.demo-hero{position:relative;min-height:70vh;display:flex;align-items:center;background:var(--gradient-dark);overflow:hidden;padding:120px 0 80px}
.demo-hero .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:60px 60px}
.demo-hero .hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.2;top:-100px;right:-100px;background:var(--blue-accent)}
.demo-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.demo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.2);border-radius:100px;padding:6px 16px;font-size:.8125rem;font-weight:600;color:var(--cyan-accent);margin-bottom:20px}
.demo-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--white);line-height:1.15;margin-bottom:20px}
.demo-hero h1 span{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.demo-hero-desc{font-size:1.0625rem;color:var(--gray-400);line-height:1.7;margin-bottom:32px}
.demo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.demo-tag{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);border-radius:100px;padding:6px 16px;font-size:.8125rem;font-weight:600;color:var(--blue-accent)}
.demo-mockup{background:rgba(15,40,71,.5);border:1px solid rgba(37,99,235,.15);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.demo-mockup-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(10,22,40,.8);border-bottom:1px solid rgba(37,99,235,.1)}
.demo-mockup-dot{width:10px;height:10px;border-radius:50%}
.demo-mockup-dot:nth-child(1){background:#ef4444}
.demo-mockup-dot:nth-child(2){background:#f59e0b}
.demo-mockup-dot:nth-child(3){background:#22c55e}
.demo-mockup-body{padding:24px;min-height:350px}
.demo-section{padding:80px 0}
.demo-section h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:12px}
.demo-section .section-subtitle{margin-bottom:40px}
.demo-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demo-feature{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:28px 24px;transition:var(--transition)}
.demo-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue-accent)}
.demo-feature-icon{width:48px;height:48px;background:var(--gradient-card);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--blue-accent);margin-bottom:16px}
.demo-feature h4{font-size:1rem;font-weight:700;color:var(--gray-800);margin-bottom:6px}
.demo-feature p{font-size:.8125rem;color:var(--gray-500);line-height:1.6}
.demo-screens{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.demo-screen{background:var(--gradient-dark);border:1px solid rgba(37,99,235,.1);border-radius:var(--radius-md);overflow:hidden}
.demo-screen-header{padding:12px 16px;background:rgba(37,99,235,.06);border-bottom:1px solid rgba(37,99,235,.1);font-size:.8125rem;font-weight:600;color:var(--gray-400);display:flex;align-items:center;gap:8px}
.demo-screen-header i{color:var(--blue-accent)}
.demo-screen-body{padding:24px;min-height:200px;display:flex;align-items:center;justify-content:center}
.demo-screen-body .screen-content{width:100%}
.ui-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ui-bar{height:10px;border-radius:4px;background:rgba(37,99,235,.12)}
.ui-bar-sm{width:60px}.ui-bar-md{width:120px}.ui-bar-lg{width:180px}.ui-bar-xl{width:100%}
.ui-circle{width:36px;height:36px;border-radius:50%;background:rgba(37,99,235,.1);flex-shrink:0}
.ui-rect{height:40px;border-radius:6px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.1);margin-bottom:8px}
.ui-table{width:100%}
.ui-table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ui-table-row:first-child{border-bottom:1px solid rgba(37,99,235,.15);font-weight:600;color:var(--gray-400);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.ui-table-cell{font-size:.8125rem;color:var(--gray-500)}
.ui-badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.6875rem;font-weight:600}
.ui-badge-green{background:rgba(34,197,94,.12);color:#22c55e}
.ui-badge-blue{background:rgba(37,99,235,.12);color:var(--blue-accent)}
.ui-badge-yellow{background:rgba(245,158,11,.12);color:#f59e0b}
.ui-badge-red{background:rgba(239,68,68,.12);color:#ef4444}
.ui-btn-mock{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;font-size:.75rem;font-weight:600;background:var(--gradient-main);color:var(--white)}
.ui-input-mock{height:36px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);width:100%;margin-bottom:8px}
.ui-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.ui-stat-card{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.1);border-radius:8px;padding:16px;text-align:center}
.ui-stat-card h5{font-size:1.25rem;font-weight:800;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ui-stat-card p{font-size:.6875rem;color:var(--gray-500);margin-top:2px}
.demo-problem{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}
.demo-problem-card{padding:28px;border-radius:var(--radius-md)}
.demo-problem-card h4{font-size:1rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.demo-problem-card ul{display:flex;flex-direction:column;gap:10px}
.demo-problem-card li{display:flex;align-items:center;gap:8px;font-size:.875rem;line-height:1.5}
.problem-before{background:#fef2f2;border:1px solid #fecaca}
.problem-before h4{color:#dc2626}
.problem-before li{color:#7f1d1d}
.problem-before li i{color:#ef4444}
.problem-after{background:#f0fdf4;border:1px solid #bbf7d0}
.problem-after h4{color:#16a34a}
.problem-after li{color:#14532d}
.problem-after li i{color:#22c55e}
@media(max-width:768px){
  .demo-hero .container,.demo-features-grid,.demo-screens,.demo-problem,.ui-stat-row{grid-template-columns:1fr}
  .demo-hero .demo-mockup-col{display:none}
}