:root{
  --bg:#050508;
  --bg2:#0b0b12;
  --panel:rgba(255,255,255,0.04);
  --stroke:rgba(255,255,255,0.10);
  --txt:#e8e8ee;
  --muted:#a1a1b5;
  --pri:#f03a3a;
  --pri2:#ff5b5b;
  --cy:#35e0ff;
  --radius:16px;
  --maxw:1200px;
  --shadow:0 18px 60px rgba(0,0,0,0.55);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--txt);
  font-family:var(--font);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(240,58,58,0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(53,224,255,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
a.underlined{text-decoration:underline;text-underline-offset:3px;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* Particle canvas */
#particle-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.6;}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(5,5,8,.88) 0%, rgba(5,5,8,.45) 60%, rgba(5,5,8,0) 100%);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.06);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;min-width:220px;}
.brand svg{width:28px;height:28px;display:block;}
.brand-title{display:flex;flex-direction:column;line-height:1.05;}
.brand-title strong{font-weight:800;letter-spacing:1.4px;}
.brand-title span{font-size:12px;color:var(--muted);}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;}
.nav a{font-size:13px;font-weight:700;color:var(--txt);opacity:.85;position:relative;padding:6px 8px;border-radius:10px;}
.nav a:hover{opacity:1;background:rgba(255,255,255,0.04);}
.nav a.is-cta{background:linear-gradient(45deg, var(--pri), var(--cy));color:#07070a;opacity:1;}
.nav a.is-cta:hover{filter:brightness(1.05);}

/* Sections */
.section{padding:88px 0;position:relative;opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.section.is-visible{opacity:1;transform:translateY(0);}
.section.compact{padding:60px 0;}

/* Hero */
.hero{padding-top:32px;}
.hero-top{display:grid;grid-template-columns: 1.05fr .95fr;gap:36px;align-items:center;}
.hero-title{margin:0;font-size:clamp(2.6rem, 6vw, 4.9rem);font-weight:900;letter-spacing:-1.8px;line-height:1.0;background:linear-gradient(45deg, var(--pri2), var(--cy));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 26px rgba(240,58,58,.20), 0 0 34px rgba(53,224,255,.10);}
.hero-subtitle{margin:18px 0 26px;font-size:clamp(1.05rem, 2.3vw, 1.25rem);color:var(--muted);max-width:48ch;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:14px;border:1px solid var(--stroke);font-weight:800;font-size:14px;letter-spacing:.2px;transition:transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{border:0;background:linear-gradient(45deg, var(--pri), var(--cy));color:#07070a;box-shadow:0 18px 60px rgba(240,58,58,.14);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:rgba(255,255,255,0.03);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.05);}
.hero-hint{margin-top:14px;color:var(--muted);font-size:13px;}
.hero-hint a{text-decoration:underline;text-underline-offset:3px;}

.stream-shell{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.35);box-shadow:var(--shadow);}
.stream-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.stream-label{margin-top:10px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px;}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;border-radius:999px;padding:6px 10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);}
.dot{width:8px;height:8px;border-radius:999px;background:var(--pri);box-shadow:0 0 0 4px rgba(240,58,58,0.15);}

/* Problem */
.problem-title{text-align:center;font-size:clamp(1.9rem, 4.2vw, 3.4rem);font-weight:900;letter-spacing:-.8px;max-width:920px;margin:0 auto;}
.problem-title span{display:block;color:var(--pri);}

/* Solution cards */
.solution-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;}
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius);padding:22px;box-shadow:0 14px 40px rgba(0,0,0,0.35);}
.card:hover{border-color:rgba(255,255,255,0.16);background:rgba(255,255,255,0.04);}
.card h3{margin:0 0 8px;font-size:18px;font-weight:900;letter-spacing:-.2px;color:var(--cy);}
.card p{margin:0;color:var(--muted);line-height:1.55;}

/* Terminal */
.terminal{background:linear-gradient(145deg, rgba(10,10,15,0.75), rgba(5,5,8,0.92));border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);padding:26px;font-family:var(--mono);backdrop-filter:blur(10px);box-shadow:var(--shadow);}
.terminal-line{display:flex;align-items:center;gap:10px;font-size:14px;flex-wrap:wrap;}
.terminal-line::before{content:'>';color:var(--pri);font-weight:900;}
.cursor{width:10px;height:18px;background:var(--txt);animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.terminal-output{margin-top:18px;padding-left:18px;border-left:2px solid rgba(255,255,255,0.10);color:var(--muted);white-space:pre-wrap;line-height:1.55;font-size:13px;}

/* Utility */
.title-xl{text-align:center;font-size:clamp(1.8rem, 4.2vw, 3.2rem);font-weight:900;letter-spacing:-.8px;margin:0 0 22px;}
.utility-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px;}
.utility-item{display:flex;gap:14px;align-items:flex-start;}
.diamond{width:18px;height:18px;margin-top:6px;background:var(--pri);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);box-shadow:0 0 0 6px rgba(240,58,58,0.12);flex:0 0 auto;}
.utility-item h3{margin:0 0 4px;font-size:16px;font-weight:900;}
.utility-item p{margin:0;color:var(--muted);line-height:1.55;}

/* CTA */
.cta{ text-align:center; }
.cta .title-xl{margin-bottom:14px;}
.cta-sub{color:var(--muted);margin:0 0 20px;font-size:14px;}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid rgba(255,255,255,0.10);padding:34px 0 42px;background:rgba(0,0,0,0.20);}
.footer-grid{display:grid;grid-template-columns: 1.2fr 1fr 1fr 1fr;gap:18px;align-items:flex-start;}
.footer-brand{display:flex;gap:12px;align-items:flex-start;}
.footer-brand svg{width:26px;height:26px;opacity:.95;}
.footer-brand strong{display:block;font-weight:900;letter-spacing:1.2px;}
.footer-brand span{display:block;color:var(--muted);font-size:12px;margin-top:4px;max-width:44ch;line-height:1.45;}
.footer-col h4{margin:0 0 10px;font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,0.75);}
.footer-col a{display:block;color:var(--muted);font-size:13px;line-height:1.8;}
.footer-col a:hover{color:var(--txt);}
.footer-bottom{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08);display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;}

/* Responsive */
@media (max-width: 980px){
  .hero-top{grid-template-columns:1fr;}
  .solution-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .nav{display:none;}
  .utility-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}