:root{
  --ink:#23202f;
  --muted:#605d72;
  --bg:#ffffff;
  --page:#f3f2f8;
  --border:#e7e5f0;
  --accent:#534AB7;
  --accent-dark:#3C3489;
  --radius:8px;
  --radius-lg:12px;
  --maxw:880px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--page);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2{line-height:1.25;letter-spacing:-.01em}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:1.12rem;letter-spacing:.02em;color:var(--ink)}
.brand::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--accent);margin-right:8px;vertical-align:1px}
.nav__links{display:flex;align-items:center;gap:22px}
.nav__links a{font-weight:500;font-size:.92rem;color:var(--muted)}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links .btn{color:#fff}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav__toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}

/* card shell */
.card{max-width:var(--maxw);margin:26px auto 40px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.sec{padding:1.6rem 1.85rem;border-bottom:1px solid var(--border)}
.sec:last-child{border-bottom:none}
.sec__title{font-size:1.12rem;font-weight:600;margin-bottom:9px}
.sec__text{color:var(--muted);font-size:.96rem}
.sec__text--mb{margin-bottom:16px}

/* badges */
.badge{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:3px 11px;border-radius:999px}
.badge--purple{color:var(--accent-dark);background:#EEEDFE}
.badge--gray{color:#444441;background:#F1EFE8}
.badge--teal{color:#085041;background:#E1F5EE}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.96rem;padding:11px 18px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .15s ease}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn--sm{padding:8px 14px;font-size:.88rem}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* hero */
.hero{text-align:center;padding:2.4rem 1.85rem}
.hero__title{font-size:clamp(1.5rem,4.4vw,2rem);font-weight:700;max-width:560px;margin:14px auto 12px}
.hero__lead{color:var(--muted);max-width:500px;margin:0 auto 22px;font-size:1.02rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.actions--center{justify-content:center}

/* grids */
.grid{display:grid;gap:12px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--page);border-radius:var(--radius);padding:15px 16px}
.tile__title{font-weight:600;font-size:.98rem;margin:9px 0 3px}
.tile__text{font-size:.9rem;color:var(--muted)}
.feat{border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.feat__ico{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px}
.feat__title{font-weight:600;font-size:.98rem;margin-bottom:4px}
.feat__text{font-size:.9rem;color:var(--muted)}

/* video */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#0e0b1f;border:1px solid var(--border)}
.video video{width:100%;height:100%;object-fit:cover}
.video__hint{margin-top:11px;font-size:.84rem;color:var(--muted);text-align:center}
.video__hint code{background:#EEEDFE;color:var(--accent-dark);padding:2px 7px;border-radius:5px;font-size:.9em}

/* cta */
.cta{background:var(--page);text-align:center}
.cta .sec__text{max-width:460px;margin:0 auto 18px}

/* responsive */
@media (max-width:720px){
  .nav__links{position:fixed;inset:58px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--border);padding:10px 20px 18px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.22s}
  .nav__links.open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:12px 0;border-bottom:1px solid var(--border);font-size:.98rem}
  .nav__links .btn{margin-top:10px;justify-content:center;border-bottom:none}
  .nav__toggle{display:flex}
  .nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.open span:nth-child(2){opacity:0}
  .nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .card{margin:16px 14px 28px}
  .sec{padding:1.4rem 1.3rem}
  .hero{padding:2rem 1.3rem}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}