:root{
  --bg:#070b16;
  --bg-2:#0b1020;
  --fg:#e6e9f2;
  --muted:#9aa3b2;
  --accent:#6ee7ff;
  --accent-2:#a78bfa;
  --brand:linear-gradient(135deg,#6ee7ff, #a78bfa 60%, #f472b6);
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity=".035" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background:radial-gradient(1200px 800px at 80% -10%, rgba(111,231,255,.10), transparent 60%),
             radial-gradient(900px 600px at 10% -20%, rgba(167,139,250,.08), transparent 55%),
             var(--bg);
}

body::before{content:""; position:fixed; inset:0; pointer-events:none; background-image:var(--noise); z-index:0}

.container{width:min(1120px, 92%); margin-inline:auto}

.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.1) blur(8px); background:linear-gradient(180deg, rgba(7,11,22,.75), rgba(7,11,22,.35) 70%, transparent)}
.nav__row{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{font-weight:800; font-size:20px; letter-spacing:.2px; color:var(--fg); text-decoration:none; background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.menu{display:flex; gap:20px; align-items:center}
.menu a{color:var(--fg); opacity:.85; text-decoration:none; font-weight:500}
.menu a:hover{opacity:1}
.menu__cta{padding:10px 14px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,.25)}

.hero{position:relative; overflow:hidden}
.hero__content{padding:104px 0 48px; position:relative}
.backdrop{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; filter:blur(40px); opacity:.5; transform:translateZ(0)}
.blob--one{width:520px; height:520px; left:-120px; top:-140px; background:radial-gradient(closest-side, rgba(111,231,255,.7), transparent 70%); animation:float1 18s ease-in-out infinite}
.blob--two{width:560px; height:560px; right:-140px; top:-120px; background:radial-gradient(closest-side, rgba(167,139,250,.7), transparent 70%); animation:float2 22s ease-in-out infinite}
.grid{position:absolute; inset:-10% -5% 0 -5%; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:40px 40px; mask-image:linear-gradient(transparent, #000 15%, #000 75%, transparent)}

.headline{font-size:clamp(32px, 5vw, 56px); line-height:1.05; letter-spacing:-.02em; margin:0 0 16px}
.subhead{font-size:clamp(16px, 2.1vw, 20px); line-height:1.6; color:var(--muted); margin:0 0 28px}
.hero__ctas{display:flex; gap:14px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:600; text-decoration:none; border:1px solid var(--border); color:var(--fg)}
.btn--primary{background:var(--brand); color:#0a0d18; border:none}
.btn--ghost{background:rgba(255,255,255,.04)}
.btn--lg{padding:16px 22px; font-size:18px}
.btn--shine{position:relative; overflow:hidden}
.btn--shine::after{content:""; position:absolute; inset:0 -40%; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform:translateX(-120%); animation:shine 4s ease-in-out infinite}

.codecard{margin-top:28px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.codecard__chrome{display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(6,10,20,.6); border-bottom:1px solid var(--border)}
.codecard__chrome span{width:10px; height:10px; border-radius:50%; display:inline-block; background:radial-gradient(circle at 30% 30%, #fff, #bbb)}
.codecard__chrome em{margin-left:auto; font-style:normal; font-weight:600; color:var(--muted); font-size:12px}
.code{margin:0; padding:18px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color:#d5f6ff; font-size:14px; overflow:auto}

.section{padding:80px 0}
.section__title{font-size:28px; margin:0 0 28px}
.muted{color:var(--muted)}

.features__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:16px; padding:18px; min-height:160px; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:box-shadow .2s ease, transform .2s ease}
.card:hover{box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card__icon{font-size:22px; margin-bottom:8px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); line-height:1.6}

.how__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:28px}
.step{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:16px; padding:18px; min-height:140px}
.step__num{width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand); color:#0a0d18; font-weight:800; margin-bottom:10px}

.diagram{display:flex; align-items:center; justify-content:center; gap:12px; opacity:.95}
.diagram__node{padding:10px 14px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.diagram__node--core{background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.18)); border-color:rgba(255,255,255,.22)}
.diagram__pipe{width:60px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.1)); border-radius:2px}

.cta{padding:86px 0}
.cta__box{border:1px solid var(--border); border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); padding:32px; text-align:center; box-shadow:var(--shadow)}
.cta__box h2{margin:0 0 8px}
.cta__box p{margin:0 0 16px; color:var(--muted)}

/* Install */
.install__header{margin-bottom:14px}
.install__stepchips{display:flex; gap:8px; flex-wrap:wrap}
.stepchip{appearance:none; border:none; cursor:pointer; padding:8px 12px; border-radius:999px; color:var(--fg); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid var(--border); font-weight:600}
.stepchip.is-active{background:var(--brand); color:#0a0d18; border:none}

.install__carousel{position:relative; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); box-shadow:var(--shadow)}
.install__viewport{position:relative; overflow:hidden; border-radius:18px; transition:height .4s ease}
.install__viewport::before,.install__viewport::after{content:""; position:absolute; top:0; bottom:0; width:64px; pointer-events:none; z-index:2}
.install__viewport::before{left:0; background:linear-gradient(90deg, rgba(7,11,22, .65), rgba(7,11,22,0))}
.install__viewport::after{right:0; background:linear-gradient(-90deg, rgba(7,11,22, .65), rgba(7,11,22,0))}
.install__track{display:flex; transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform}
.install__slide{flex:0 0 100%; padding:22px; opacity:.75; transform:scale(.965); filter:saturate(.95); transition:opacity .4s ease, transform .4s ease, filter .4s ease}
.install__slide.is-active{opacity:1; transform:scale(1); filter:saturate(1)}
.install__slide h3{margin:0 0 10px}

.install__controls{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px}
.install__btn{appearance:none; cursor:pointer; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); color:var(--fg); width:38px; height:38px; border-radius:12px; font-size:20px; line-height:1}
.install__btn:active{transform:scale(.98)}
.install__dots{display:flex; align-items:center; gap:8px}
.dot{appearance:none; border:1px solid var(--border); width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.15); cursor:pointer}
.dot.is-active{background:linear-gradient(135deg,#6ee7ff,#a78bfa)}
.install__progress{height:4px; background:rgba(255,255,255,.08); border-top:1px solid var(--border)}
.install__progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#6ee7ff,#a78bfa,#f472b6); transition:width .4s ease}

.codeblock{position:relative; margin-top:10px}
.codeblock::before{content:"bash"; position:absolute; top:10px; left:12px; z-index:2; font-size:12px; color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--border); padding:2px 6px; border-radius:8px}
.copy-btn{position:absolute; top:8px; right:8px; z-index:2; background:rgba(255,255,255,.08); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer}
.copy-btn:active{transform:scale(.98)}

/* Accessible visually-hidden utility */
.sr-only{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}

/* Code area spacing so labels/buttons don't overlap content */
.code{padding-top:44px}

/* Minor responsive refinements */
@media (max-width: 720px){
  .code{font-size:13px}
}

/* Screens */
.screens__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.screen{margin:0; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.screen img{display:block; width:100%; height:auto}
.screen figcaption{padding:10px 12px; color:var(--muted)}

/* Demo */
.demo__frame{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.04); box-shadow:var(--shadow)}
.demo__video{display:block; width:100%; height:auto}

/* Contacts */
.contacts .contacts__row{display:flex; gap:12px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid var(--border); color:var(--fg); text-decoration:none}
.chip span{opacity:.8}
.chip strong{font-weight:700}

.footer{border-top:1px solid var(--border); margin-top:48px; padding:16px 0; background:rgba(10,14,28,.4)}
.footer__row{display:flex; align-items:center; justify-content:space-between; color:var(--muted)}

.reveal{opacity:0; transform:translateY(14px) scale(.98); transition:opacity .6s ease, transform .6s ease}
.reveal--visible{opacity:1; transform:none}

@keyframes float1{0%,100%{transform:translate(-10px, -10px)} 50%{transform:translate(8px, 14px)}}
@keyframes float2{0%,100%{transform:translate(8px, -6px)} 50%{transform:translate(-10px, 10px)}}
@keyframes shine{0%{transform:translateX(-120%)} 100%{transform:translateX(120%)}}

@media (max-width: 1024px){
  .features__grid{grid-template-columns:repeat(2,1fr)}
  .how__grid{grid-template-columns:repeat(2,1fr)}
  /* carousel layout remains single slide */
  .screens__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .menu a:not(.menu__cta){display:none}
  .features__grid{grid-template-columns:1fr}
  .how__grid{grid-template-columns:1fr}
  .install__viewport::before,.install__viewport::after{width:40px}
  .screens__grid{grid-template-columns:1fr}
  .hero__content{padding:88px 0 36px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}