:root{
  --bg:#070912; --panel:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
  --txt:#eef2ff; --muted:#9098ba; --acc:#7c5cff; --acc2:#00e5ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;overflow-x:hidden}
h2{font-size:clamp(26px,5vw,38px);letter-spacing:-.02em;margin-bottom:24px}

/* Scroll-Progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:rgba(255,255,255,.07)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 0 12px var(--acc2)}

/* Navbar */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:24px clamp(16px,4vw,42px);transition:.45s cubic-bezier(.2,.8,.2,1);
  background:transparent;border-bottom:1px solid transparent}
.nav.scrolled{padding:13px clamp(16px,4vw,42px);
  background:rgba(8,9,20,.72);backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);box-shadow:0 16px 44px rgba(0,0,0,.45)}
.nav.hide{transform:translateY(-110%)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--txt);font-weight:700;
  letter-spacing:.14em;font-size:15px}
.logo{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;font-size:18px;color:#070912;
  background:linear-gradient(135deg,var(--acc),var(--acc2));transition:.45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 10px 26px rgba(124,92,255,.45)}
.nav.scrolled .logo{transform:rotate(-90deg) scale(.86);box-shadow:0 6px 18px rgba(0,229,255,.5)}
.name{transition:.4s}
.nav.scrolled .name{letter-spacing:.24em;font-size:14px}

.links{display:flex;gap:6px;margin-left:auto}
.link{position:relative;padding:10px 16px;border-radius:12px;text-decoration:none;color:var(--muted);
  font-size:14.5px;font-weight:500;transition:.3s}
.link:hover{color:var(--txt);background:rgba(255,255,255,.07)}
.link::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.link:hover::after{transform:scaleX(.6)}
.link.active{color:var(--txt)}
.link.active::after{transform:scaleX(1)}

.actions{display:flex;gap:10px;align-items:center}
.cta,.ghost{padding:12px 22px;border-radius:13px;font-family:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;transition:.35s cubic-bezier(.34,1.56,.64,1)}
.cta{border:none;color:#070912;background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 12px 30px rgba(124,92,255,.4)}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(124,92,255,.6)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.ghost:hover{border-color:var(--acc2);transform:translateY(-3px)}
.nav.scrolled .cta{padding:10px 18px}

.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;
  justify-content:center;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer}
.burger i{width:18px;height:2px;border-radius:2px;background:var(--txt);transition:.35s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Content */
main{padding-top:110px}
.hero{min-height:74vh;display:grid;place-content:center;text-align:center;padding:40px 18px;
  background:radial-gradient(700px 400px at 50% 0%, rgba(124,92,255,.24), transparent 70%)}
.tag{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:8px 16px;border-radius:99px;background:var(--panel);
  justify-self:center}
.hero h1{font-size:clamp(38px,8vw,84px);letter-spacing:-.03em;margin:22px 0 14px;line-height:1.02}
.hero h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:clamp(15px,2.4vw,18px);max-width:60ch;margin:0 auto}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

.sect{padding:80px clamp(18px,5vw,60px);max-width:1100px;margin:0 auto}
.sect.alt{background:linear-gradient(180deg,transparent,rgba(124,92,255,.08),transparent);
  max-width:none}
.sect.alt h2,.sect.alt .cards{max-width:1100px;margin-left:auto;margin-right:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.c{padding:26px;border-radius:22px;background:var(--panel);border:1px solid var(--line);
  transition:.4s cubic-bezier(.2,.8,.2,1)}
.c:hover{transform:translateY(-7px);border-color:var(--acc);
  box-shadow:0 26px 56px rgba(124,92,255,.28)}
.c h3{font-size:18px;margin-bottom:9px}
.c p{color:var(--muted);font-size:14.3px;line-height:1.65}
.c.tall img{width:100%;border-radius:15px;aspect-ratio:16/9;object-fit:cover;margin-bottom:15px}
.highlight{background:linear-gradient(150deg,rgba(124,92,255,.28),rgba(0,229,255,.14));
  border-color:rgba(0,229,255,.5)}
.foot{text-align:center;padding:46px 16px;color:var(--muted);font-size:13.5px;
  border-top:1px solid var(--line)}

@media (max-width:860px){
  .burger{display:flex}
  .actions .ghost{display:none}
  .links{position:fixed;top:74px;left:14px;right:14px;flex-direction:column;gap:4px;padding:14px;
    border-radius:20px;background:rgba(10,11,24,.96);border:1px solid var(--line);
    backdrop-filter:blur(20px);box-shadow:0 30px 70px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-14px) scale(.97);
    transition:.35s cubic-bezier(.2,.8,.2,1);margin:0}
  .links.open{opacity:1;visibility:visible;transform:none}
  .link{padding:15px 16px;font-size:15.5px}
  .link::after{display:none}
  .link.active{background:linear-gradient(90deg,rgba(124,92,255,.3),rgba(0,229,255,.14))}
  .cta{padding:11px 16px;font-size:13.5px}
}
@media (max-width:420px){.cta{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}