:root {
  color-scheme: dark;
  --bg: #0a0c12;
  --bg-2: #11141c;
  --bg-3: #161a24;
  --bg-4: #1d2230;
  --text: #ecedee;
  --text-dim: #9aa1b1;
  --text-faint: #5d6373;
  --accent: #7c5cff;
  --accent-2: #5bc8e0;
  --accent-3: #ff6fae;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --maxw: 1160px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* clip, NOT hidden: `overflow-x: hidden` on body makes body the scroll
     container instead of the viewport, which kills the compositor fast-scroll
     path and makes scrolling janky. `clip` hides horizontal overflow without
     creating a scroll container. */
  overflow-x: clip;
  line-height: 1.5;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* nebula glow */
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(124, 92, 255, 0.26), transparent 60%),
    radial-gradient(55% 45% at 90% 18%, rgba(91, 200, 224, 0.18), transparent 60%),
    radial-gradient(45% 40% at 75% 95%, rgba(255, 111, 174, 0.12), transparent 60%);
  /* promote to its own compositor layer so it never repaints while scrolling */
  transform: translateZ(0);
  will-change: transform;
}

/* ---------- galaxy starfield ---------- */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.stars::before, .stars::after {
  content: ""; position: absolute; top: 0; left: 0; border-radius: 50%;
}
.stars::before {
  width: 1px; height: 1px;
  box-shadow:
    30px 50px rgba(255,255,255,.55), 120px 200px rgba(255,255,255,.4), 200px 90px rgba(255,255,255,.6),
    320px 400px rgba(255,255,255,.35), 90px 600px rgba(255,255,255,.5), 450px 150px rgba(255,255,255,.45),
    540px 520px rgba(255,255,255,.55), 610px 90px rgba(255,255,255,.4), 700px 330px rgba(255,255,255,.6),
    780px 640px rgba(255,255,255,.35), 850px 220px rgba(255,255,255,.5), 930px 480px rgba(255,255,255,.45),
    1010px 120px rgba(255,255,255,.55), 1080px 700px rgba(255,255,255,.4), 1150px 300px rgba(255,255,255,.6),
    1230px 560px rgba(255,255,255,.35), 1300px 90px rgba(255,255,255,.5), 1380px 420px rgba(255,255,255,.45),
    1460px 680px rgba(255,255,255,.55), 1540px 200px rgba(255,255,255,.4), 1620px 520px rgba(255,255,255,.6),
    1700px 110px rgba(255,255,255,.4), 1780px 380px rgba(255,255,255,.5), 1850px 640px rgba(255,255,255,.45),
    60px 880px rgba(255,255,255,.5), 240px 760px rgba(255,255,255,.4), 400px 920px rgba(255,255,255,.55),
    560px 840px rgba(255,255,255,.35), 720px 980px rgba(255,255,255,.5), 880px 880px rgba(255,255,255,.45),
    1040px 940px rgba(255,255,255,.55), 1200px 820px rgba(255,255,255,.4), 1360px 980px rgba(255,255,255,.5),
    1520px 880px rgba(255,255,255,.45), 1680px 940px rgba(255,255,255,.55), 1840px 820px rgba(255,255,255,.4),
    360px 280px rgba(255,255,255,.45), 660px 460px rgba(255,255,255,.5), 1120px 380px rgba(255,255,255,.4);
}
.stars::after {
  width: 2px; height: 2px;
  box-shadow:
    180px 130px #fff, 520px 300px rgba(255,255,255,.9), 880px 160px #fff,
    1240px 240px rgba(188,176,255,.9), 1600px 360px #fff, 300px 540px rgba(255,255,255,.85),
    720px 700px rgba(140,225,255,.9), 1080px 600px #fff, 1480px 760px rgba(255,255,255,.85),
    60px 360px #fff, 940px 880px rgba(255,255,255,.9), 1340px 480px rgba(188,176,255,.85),
    1720px 640px #fff, 420px 820px rgba(255,255,255,.85);
}
a { color: inherit; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  /* Solid translucent bar (no backdrop-filter) — denser opacity for a clean,
     readable header without the blur. */
  background: rgba(9, 11, 17, 0.94);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none; color: var(--text); }
.brand .dot { color: var(--accent); }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(124,92,255,.7); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang a {
  color: var(--text-dim); font-size: 12px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; text-decoration: none; transition: .15s;
}
.lang a.active { background: var(--accent); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  border-radius: 11px; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 10px 30px -10px rgba(124,92,255,.7); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(124,92,255,.8); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }

.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-2); background: rgba(91,200,224,.1); border: 1px solid rgba(91,200,224,.22);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
h1 {
  font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 800; margin: 0 0 22px;
}
h1 .grad {
  background: linear-gradient(115deg, var(--accent) 10%, var(--accent-2) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-dim); max-width: 32em; margin: 0 0 32px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ver { font-size: 13px; color: var(--text-faint); }

.hero-art { position: relative; }
.hero-art::before {
  content: ""; position: absolute; inset: -8% -6% -8% -6%;
  background: radial-gradient(60% 60% at 60% 40%, rgba(124,92,255,.35), transparent 70%);
  filter: blur(36px); z-index: -1;
}
.app {
  border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden;
  background: var(--bg-2); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  display: grid; grid-template-columns: 56px 168px 1fr; height: 360px;
  transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: left center;
  will-change: transform; backface-visibility: hidden;
}
.app-top { grid-column: 1 / -1; height: 30px; background: var(--bg-3); display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.app-top i { width: 10px; height: 10px; border-radius: 999px; background: var(--bg-4); }
.app-rail { background: #0c0e15; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.srv { width: 34px; height: 34px; border-radius: 11px; background: var(--bg-4); }
.srv.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 13px; box-shadow: 0 6px 16px -6px rgba(124,92,255,.8); }
.app-side { background: var(--bg-2); border-right: 1px solid var(--border); padding: 12px 10px; }
.side-hd { font-size: 13px; font-weight: 700; padding: 4px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.cat { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); margin: 10px 6px 4px; }
.ch { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); padding: 6px 8px; border-radius: 6px; }
.ch.on { background: var(--bg-4); color: var(--text); }
.ch b { color: var(--text-faint); font-weight: 600; }
.ch .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.ch .bars i { width: 2px; background: var(--accent-2); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.ch .bars i:nth-child(1){height:5px;animation-delay:0s}
.ch .bars i:nth-child(2){height:10px;animation-delay:.2s}
.ch .bars i:nth-child(3){height:7px;animation-delay:.4s}
@keyframes eq { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)} }
.app-main { display: flex; flex-direction: column; }
.main-hd { height: 40px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; font-weight: 600; }
.main-hd b { color: var(--text-faint); }
.msgs { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; }
.msg .nm { font-size: 12.5px; font-weight: 700; }
.msg .nm span { color: var(--text-faint); font-weight: 500; font-size: 10.5px; margin-left: 6px; }
.msg p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); }
.bubble { height: 9px; border-radius: 5px; background: var(--bg-3); margin-top: 6px; }

/* Only vertical padding — using `padding` shorthand here would wipe out the
   horizontal padding from .wrap on elements that have both classes, pulling the
   section text out of alignment with the nav and hero. */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.025em; font-weight: 800; margin: 0 0 8px; }
.section .sec-sub { color: var(--text-dim); font-size: 16px; margin: 0 0 40px; max-width: 36em; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
  background: linear-gradient(180deg, var(--bg-2), var(--bg)); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; transition: border-color .2s, transform .2s;
}
.feat:hover { border-color: var(--border-2); transform: translateY(-3px); }
.feat .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(124,92,255,.12); color: var(--accent); margin-bottom: 16px;
}
.feat .ic svg { width: 21px; height: 21px; }
.feat h3 { font-size: 17px; font-weight: 700; margin: 0 0 7px; letter-spacing: -0.01em; }
.feat p { font-size: 14px; color: var(--text-dim); margin: 0; }

.band {
  margin: 8px 0 0; border: 1px solid var(--border-2); border-radius: 22px; padding: clamp(32px, 5vw, 56px);
  background: linear-gradient(120deg, rgba(124,92,255,.16), rgba(91,200,224,.1));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.band h2 { margin: 0 0 6px; font-size: clamp(24px,3vw,34px); letter-spacing: -0.02em; }
.band p { margin: 0; color: var(--text-dim); }

.foot { border-top: 1px solid var(--border); padding: 36px 0 48px; margin-top: clamp(40px, 6vw, 72px); }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.foot .brand { font-size: 16px; }
.foot small { color: var(--text-faint); font-size: 12.5px; display: block; margin-top: 6px; }
.foot-links { display: flex; gap: 22px; font-size: 14px; }
.foot-links a { color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { color: var(--text); }

.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 20px; transition: border-color .2s; }
.faq details[open] { border-color: var(--border-2); }
.faq summary {
  cursor: pointer; font-size: 16px; font-weight: 600; padding: 16px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-faint); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
/* Answer wrapper — its height is animated by JS (scroll.js) for a smooth
   expand/collapse. Without JS, the native <details> just toggles it instantly. */
.faq-a { overflow: hidden; }
.faq-a > p { margin: 0; padding-bottom: 16px; color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }

.reveal { opacity: 0; transform: translateY(16px); animation: up .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal.d1 { animation-delay: .06s; } .reveal.d2 { animation-delay: .12s; }
.reveal.d3 { animation-delay: .18s; }
@keyframes up { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .ch .bars i { animation: none; }
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .grid { grid-template-columns: 1fr; }
}