/* ============================================================= tokens */
:root{
  --bg0:#04091C; --bg1:#102658;
  --panel0:#0E224E; --panel1:#050C24;
  --accent:#1E9BFF; --accent-soft:#5FC4FF; --accent-hover:#3AACFF;
  --fg:#EAF4FF; --fg-dim:#8FA9CC;
  --ok:#3DDC97; --danger:#FF6B7A; --warn:#FFD166;
  --track:#122244;
  --border:rgba(95,196,255,.18);
  --glow:0 0 22px rgba(30,155,255,.55);
  --glow-soft:0 0 28px rgba(95,196,255,.22);
  --halo:radial-gradient(1100px 520px at 50% -8%, rgba(95,196,255,.16), transparent 62%);
  --app:var(--halo), linear-gradient(180deg,var(--bg1),var(--bg0));
  --panel:linear-gradient(180deg,var(--panel0),var(--panel1));
  --card:rgba(14,34,78,.55);
  --card-hover:rgba(14,34,78,.85);
  --radius:16px;
  --tok-kw:#5FC4FF; --tok-str:#3DDC97; --tok-com:#5B7AA8; --tok-num:#FFD166;
  --tok-fn:#9ECBFF; --tok-type:#FF9F6B; --tok-op:#8FA9CC; --tok-var:#EAF4FF;
  --header-h:64px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
:root[data-theme="bright"]{
  --bg0:#EFF4FB; --bg1:#E3EDFB;
  --panel0:#FFFFFF; --panel1:#EAF1FB;
  --accent:#0B7DE0; --accent-soft:#1787E8; --accent-hover:#0A6CC4;
  --fg:#0B1730; --fg-dim:#4A5E7A;
  --ok:#0FA968; --danger:#E0445C; --warn:#C88A00;
  --track:#DCE6F2;
  --border:rgba(11,125,224,.16);
  --glow:0 0 22px rgba(11,125,224,.28);
  --glow-soft:0 0 26px rgba(23,135,232,.18);
  --halo:radial-gradient(1100px 520px at 50% -8%, rgba(23,135,232,.14), transparent 62%);
  --app:var(--halo), linear-gradient(180deg,var(--bg1),var(--bg0));
  --panel:linear-gradient(180deg,var(--panel0),var(--panel1));
  --card:rgba(255,255,255,.7);
  --card-hover:rgba(255,255,255,.95);
  --tok-kw:#0B6BC0; --tok-str:#0E9E63; --tok-com:#7C8CA3; --tok-num:#B07A00;
  --tok-fn:#2F6FB0; --tok-type:#C0551C; --tok-op:#4A5E7A; --tok-var:#0B1730;
}

/* ============================================================= reset */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--fg); background:var(--bg0);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body::before{ /* animated ambient glow */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(95,196,255,.10), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(61,220,151,.07), transparent 55%);
  animation:ambient 14s ease-in-out infinite alternate;
}
@keyframes ambient{ from{opacity:.6; transform:translateY(0)} to{opacity:1; transform:translateY(24px)} }
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:4px}

.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.kicker{font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 14px}
h1,h2,h3{font-weight:600; letter-spacing:-.01em; line-height:1.12; margin:0}
h1{font-size:clamp(2.2rem,4.8vw,3.4rem); font-weight:700; letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.lead{color:var(--fg-dim); font-size:clamp(1.02rem,1.7vw,1.18rem); max-width:66ch}
.glow-text{color:var(--accent-soft); text-shadow:0 0 18px rgba(95,196,255,.5)}

/* ============================================================= header */
header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg0) 74%, transparent); border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:18px; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.02em}
.brand .logo{width:34px; height:34px; border-radius:9px; flex:none; background:linear-gradient(180deg,var(--bg1),var(--bg0)); border:1px solid var(--border); box-shadow:var(--glow-soft); display:grid; place-items:center; color:var(--accent-soft); transition:.25s}
.brand:hover .logo{box-shadow:var(--glow); transform:rotate(-4deg) scale(1.04)}
.brand .logo svg{width:20px; height:20px}
.nav-links{display:flex; gap:2px; margin-left:2px}
.nav-links a{padding:8px 12px; border-radius:9px; color:var(--fg-dim); font-size:.93rem; transition:.18s; position:relative}
.nav-links a:hover{color:var(--fg); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.nav-links a[aria-current]{color:var(--fg)}
.spacer{flex:1}

/* OS download buttons */
.os-btns{display:flex; gap:6px; align-items:center}
.os-btn{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px;
  border-radius:11px; border:1px solid var(--border); cursor:pointer; font-size:.86rem; font-weight:600;
  background:color-mix(in srgb, var(--panel0) 55%, transparent); color:var(--fg); transition:.2s;
}
.os-btn:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-1px)}
.os-btn svg{width:17px; height:17px; color:var(--accent-soft); flex:none}
.os-btn .soon{font-family:var(--mono); font-size:.62rem; color:var(--warn); border:1px solid var(--border); border-radius:999px; padding:1px 6px; letter-spacing:.04em}
.os-btn.soon{opacity:.75; cursor:default}
.os-btn.soon:hover{transform:none; box-shadow:none; border-color:var(--border)}

/* large OS download buttons used in the hero (replace the old "Download" button) */
.hero-os{display:flex; gap:10px; margin-top:2px; flex-wrap:nowrap}
.os-lg{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:9px; padding:12px 10px; border-radius:12px; border:1px solid var(--border);
  cursor:pointer; background:color-mix(in srgb, var(--panel0) 55%, transparent);
  color:var(--fg); transition:.22s; white-space:nowrap;
}
.os-lg:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-2px)}
.os-lg svg{width:20px; height:20px; color:var(--accent-soft); flex:none}
.os-lg b{font-size:.95rem; font-weight:600}
.os-lg .soon{font-family:var(--mono); font-size:.58rem; color:var(--warn); border:1px solid var(--border); border-radius:999px; padding:1px 6px; letter-spacing:.04em; font-weight:500}
.os-lg.primary{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--glow)}
.os-lg.primary:hover{background:var(--accent-hover)}
.os-lg.primary svg{color:#fff}
.os-lg.soon{opacity:.85; cursor:default}
.os-lg.soon:hover{transform:none; box-shadow:none; border-color:var(--border)}

.icon-btn{width:40px; height:40px; border-radius:11px; cursor:pointer; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 55%, transparent); color:var(--fg); display:grid; place-items:center; transition:.18s}
.icon-btn:hover{background:var(--card-hover); box-shadow:var(--glow-soft)}
.icon-btn svg{width:19px; height:19px}

.flag{display:inline-block; flex:none; border-radius:2px; box-shadow:0 0 0 1px var(--border); vertical-align:middle}
.lang{position:relative}
.lang-btn{height:40px; border-radius:11px; cursor:pointer; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 55%, transparent); color:var(--fg); display:flex; align-items:center; gap:7px; padding:0 12px; font-family:var(--font); font-size:.9rem; transition:.18s}
.lang-btn:hover{background:var(--card-hover)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:230px; padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.4); display:none; z-index:60; max-height:70vh; overflow:auto}
.lang.open .lang-menu{display:block; animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0; transform:translateY(-8px) scale(.98)}to{opacity:1; transform:none}}
.lang-item{width:100%; text-align:left; padding:8px 11px; border-radius:9px; cursor:pointer; background:none; border:0; color:var(--fg); font-family:var(--font); font-size:.92rem; display:flex; align-items:center; gap:10px; transition:.15s}
.lang-item:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.lang-item .native{color:var(--fg-dim); font-size:.85rem; margin-left:auto}
.lang-item.active{color:var(--accent-soft)}
.lang-item.active::after{content:"✓"; margin-left:auto; color:var(--accent-soft)}
.lang-item.active .native{margin-left:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; font-family:var(--font); font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:.18s; letter-spacing:.01em}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--glow); animation:pulseGlow 3s ease-in-out infinite}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.btn-lg{padding:14px 28px; font-size:1.04rem}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 16px rgba(30,155,255,.4)}50%{box-shadow:0 0 30px rgba(30,155,255,.7)}}

/* ============================================================= sections */
section{padding:84px 0}
.sec-head{margin-bottom:48px; max-width:780px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head .lead{margin-top:16px}

.page-hero{padding:64px 0 20px}
.page-hero .lead{margin:16px 0 0}

/* ------------------------------------------------------------- hero */
.hero{position:relative; padding:72px 0 96px}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center}
.hero-copy h1{margin:0 0 18px}
.hero-copy .lead{margin:0 0 28px; font-size:clamp(1.05rem,1.9vw,1.25rem)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); margin-top:16px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 55%, transparent); font-family:var(--mono); font-size:.8rem; color:var(--accent-soft); margin-bottom:20px}
.badge .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* stats bar */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:56px 0 0}
.stat{padding:22px 20px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); text-align:center; transition:.25s}
.stat:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-3px)}
.stat .num{font-size:2rem; font-weight:700; letter-spacing:-.02em; color:var(--accent-soft); font-variant-numeric:tabular-nums}
.stat .lbl{color:var(--fg-dim); font-size:.9rem; margin-top:4px}

/* ------------------------------------------------------------- live editor demo */
.demo{position:relative; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; background:var(--panel); box-shadow:0 30px 80px rgba(0,0,0,.5); animation:floaty 7s ease-in-out infinite}
:root[data-theme="bright"] .demo{box-shadow:0 30px 70px rgba(23,80,140,.18)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.demo-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--panel1) 60%, transparent)}
.demo-bar .tl{width:11px; height:11px; border-radius:50%}
.demo-bar .tl.r{background:var(--danger)} .demo-bar .tl.y{background:var(--warn)} .demo-bar .tl.g{background:var(--ok)}
.demo-bar .fn{margin-left:10px; font-family:var(--mono); font-size:.8rem; color:var(--fg-dim)}
.demo-bar .tag{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--accent-soft)}
.editor{position:relative; height:340px; font-family:var(--mono); font-size:13.5px; line-height:1.62}
.editor .gutter{position:absolute; top:0; left:0; bottom:0; width:44px; padding:14px 0; text-align:right; color:var(--fg-dim); opacity:.55; font-family:var(--mono); font-size:12px; background:color-mix(in srgb, var(--panel1) 40%, transparent); border-right:1px solid var(--border); overflow:hidden; user-select:none}
.editor .gutter .ln{display:block; line-height:1.62}
.editor .code,.editor textarea{position:absolute; top:0; left:44px; right:0; bottom:0; margin:0; padding:14px 18px; font:inherit; line-height:1.62; white-space:pre; overflow:auto; tab-size:2}
.editor .code{pointer-events:none; color:var(--fg)}
.editor textarea{background:transparent; color:transparent; caret-color:var(--accent-soft); border:0; outline:none; resize:none; -webkit-text-fill-color:transparent}
.editor textarea::selection{background:rgba(95,196,255,.22)}
.editor .caret{display:inline-block; width:8px; height:1.2em; background:var(--accent-soft); vertical-align:middle; margin-left:2px; animation:blink 1s step-end infinite}
.tok-kw{color:var(--tok-kw)} .tok-str{color:var(--tok-str)} .tok-com{color:var(--tok-com)}
.tok-num{color:var(--tok-num)} .tok-fn{color:var(--tok-fn)} .tok-type{color:var(--tok-type)} .tok-op{color:var(--tok-op)}

/* ------------------------------------------------------------- features */
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{position:relative; padding:26px 26px 24px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); transition:.24s}
.feat:hover{background:var(--card-hover); transform:translateY(-4px); box-shadow:var(--glow-soft); border-color:var(--accent-soft)}
.feat .n{font-family:var(--mono); font-size:.78rem; color:var(--accent-soft); display:block; margin-bottom:12px}
.feat h3{font-size:1.12rem; margin-bottom:10px}
.feat p{margin:0; color:var(--fg-dim); font-size:.95rem}
.feat .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-soft); margin-bottom:16px; transition:.25s}
.feat:hover .ic{background:color-mix(in srgb, var(--accent) 24%, transparent); transform:scale(1.08) rotate(-3deg)}
.feat .ic svg{width:20px; height:20px}

/* feature rows (alternating image/text) */
.feat-rows{display:flex; flex-direction:column; gap:28px}
.feat-row{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
.feat-row.rev .media{order:2}
.feat-row h3{font-size:1.5rem; margin-bottom:12px}
.feat-row p{color:var(--fg-dim); margin:0 0 8px; max-width:56ch}
.feat-row ul{margin:8px 0 0; padding-left:18px; color:var(--fg-dim)}
.feat-row ul li{margin:5px 0}
.media{border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; background:var(--panel); box-shadow:0 24px 60px rgba(0,0,0,.35); transition:.3s}
.media:hover{transform:scale(1.015); border-color:var(--accent-soft)}
.media img{width:100%; height:auto}

/* ------------------------------------------------------------- screenshots */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.shot{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--panel); box-shadow:0 24px 60px rgba(0,0,0,.35); transition:.28s}
:root[data-theme="bright"] .shot{box-shadow:0 24px 60px rgba(23,80,140,.15)}
.shot:hover{transform:translateY(-5px) scale(1.012); border-color:var(--accent-soft)}
.shot img{width:100%; height:auto}
.shot figcaption{padding:14px 16px; font-size:.86rem; color:var(--fg-dim); border-top:1px solid var(--border)}
.shot.wide{grid-column:1 / -1}

/* ------------------------------------------------------------- skins gallery */
.skins-featured{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:36px; align-items:center; margin:0 0 48px; padding:28px; border-radius:var(--radius); border:1px solid rgba(80,255,120,.28); background:radial-gradient(700px 320px at 80% 50%, rgba(40,255,90,.10), transparent 70%), linear-gradient(180deg,#03140A,#010804); color:#D8FFE0; box-shadow:0 0 40px rgba(40,255,90,.10)}
.skins-featured h3{margin:0 0 10px; font-size:1.5rem; color:#7CFF9A; text-shadow:0 0 16px rgba(60,255,110,.55); font-family:var(--mono)}
.skins-featured p{color:#B4E8C0; margin:0 0 18px}
.skins-featured .btn{background:rgba(40,255,90,.08); border-color:rgba(80,255,120,.4); color:#9DFFB3}
.skins-featured .btn:hover{box-shadow:0 0 18px rgba(60,255,110,.35); border-color:#7CFF9A}
.skins-shot{margin:0}
.skins-shot img{display:block; width:100%; border-radius:12px; border:1px solid rgba(80,255,120,.35); box-shadow:0 0 36px rgba(40,255,90,.22)}
.skins-shot figcaption{margin-top:8px; font-family:var(--mono); font-size:.8rem; color:#7CFF9A; text-align:center}
.gallery{display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:4px 4px 18px; scrollbar-color:var(--accent) transparent}
.gallery:focus-visible{outline:2px solid var(--accent-soft); border-radius:12px}
.g-item{flex:0 0 auto; width:240px; display:flex; flex-direction:column; gap:8px; padding:0; border:0; background:none; color:var(--fg); font:14px var(--font); cursor:zoom-in; scroll-snap-align:start; text-align:start}
.g-item img{display:block; width:240px; height:135px; object-fit:cover; border-radius:10px; border:1px solid var(--border); box-shadow:var(--glow-soft); transition:transform .15s, box-shadow .15s, border-color .15s}
.g-item:hover img, .g-item:focus-visible img{transform:translateY(-3px); border-color:var(--accent-soft); box-shadow:var(--glow), var(--glow-soft)}
.g-item:focus-visible{outline:none}
.g-item span{padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg-dim)}
.lightbox{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:56px 64px 24px; background:rgba(2,6,18,.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%}
.lightbox img{max-width:min(100%,1280px); max-height:calc(100vh - 170px); border-radius:12px; border:1px solid var(--border); box-shadow:0 20px 70px rgba(0,0,0,.6); background:#000}
.lightbox figcaption{color:#fff; font-size:17px; font-weight:600}
.lb-x{position:absolute; top:14px; inset-inline-end:18px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer}
.lb-x:hover{background:var(--danger); border-color:var(--danger)}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:36px; cursor:pointer}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-prev:hover,.lb-next:hover{background:var(--accent)}
.lb-close{border:0; cursor:pointer; font-size:15px}
body.lb-open{overflow:hidden}
@media (max-width:900px){.skins-featured{grid-template-columns:1fr; padding:20px}}
@media (max-width:600px){.lightbox{padding:56px 8px 16px}.lb-prev,.lb-next{display:none}.g-item,.g-item img{width:180px}.g-item img{height:101px}}

/* ------------------------------------------------------------- downloads */
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.dl{padding:30px 28px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); transition:.24s; text-align:left; display:flex; flex-direction:column; gap:12px}
.dl:hover{background:var(--card-hover); border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-3px)}
.dl .os{display:flex; align-items:center; gap:12px; font-weight:600; font-size:1.15rem}
.dl .os svg{width:26px; height:26px; color:var(--accent-soft)}
.dl .items{color:var(--fg-dim); font-size:.9rem; margin:0}
.dl .btn{margin-top:auto}

/* ------------------------------------------------------------- changelog */
.ver-hero{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:8px}
.ver-badge{display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:var(--glow-soft); font-weight:600}
.ver-badge .v{font-family:var(--mono); font-size:1.35rem; color:var(--accent-soft)}
.ver-badge .d{color:var(--fg-dim); font-size:.9rem; font-weight:400}
.changelog{display:flex; flex-direction:column; gap:22px; max-width:780px}
.release{position:relative; padding:26px 30px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); transition:.22s}
.release:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.release .rel-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.release .rel-head h3{margin:0; font-size:1.3rem}
.release .rel-head .rel-ver{font-family:var(--mono); color:var(--accent-soft); font-weight:700}
.release .rel-head .rel-date{font-family:var(--mono); font-size:.82rem; color:var(--fg-dim)}
.release.latest{border-color:var(--accent); box-shadow:var(--glow-soft)}
.release .rel-tag{position:absolute; top:-11px; right:22px; padding:4px 12px; border-radius:999px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em}
.release ul{margin:0; padding-left:20px; color:var(--fg-dim)}
.release ul li{margin:7px 0; font-size:.96rem}
.release ul li::marker{color:var(--accent-soft)}

/* ------------------------------------------------------------- pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:840px; margin:0 auto}
.price{padding:34px 32px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); position:relative; transition:.24s}
.price:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-3px)}
.price.hot{border-color:var(--accent); box-shadow:var(--glow-soft)}
.price .flag{position:absolute; top:-13px; left:26px; padding:5px 14px; border-radius:999px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em}
.price h3{font-size:1.2rem; margin-bottom:6px}
.price .amt{font-size:2.4rem; font-weight:700; letter-spacing:-.02em; margin:10px 0 4px}
.price .amt small{font-size:1rem; font-weight:400; color:var(--fg-dim)}
.price p{color:var(--fg-dim); font-size:.95rem; margin:0 0 22px}
.price .btn{width:100%}

/* closing CTA */
.cta{padding:20px 34px; border-radius:22px; border:1px solid var(--border); background:var(--panel); text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(95,196,255,.16), transparent 60%); pointer-events:none}
.cta h2{margin-bottom:10px}
.cta p{color:var(--fg-dim); max-width:60ch; margin:0 auto 24px}

/* ============================================================= forms */
.panel{max-width:660px; margin:0 auto; padding:36px 38px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card)}
.field{display:block; margin-bottom:18px}
.field > span{display:block; font-size:.86rem; color:var(--fg-dim); margin-bottom:7px; font-weight:500}
.input,textarea.input,select.input{width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 60%, transparent); color:var(--fg); font-family:var(--font); font-size:.96rem; transition:.16s}
.input:focus{outline:none; border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
textarea.input{resize:vertical; min-height:120px}
.summary{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-radius:12px; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid var(--border); margin:20px 0}
.summary .amt{font-size:1.6rem; font-weight:700}
.note{font-size:.85rem; color:var(--fg-dim); margin-top:16px}
.mail{color:var(--accent-soft); font-family:var(--mono)}
.ok-banner{padding:16px 18px; border-radius:12px; border:1px solid var(--ok); color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); font-weight:500; margin-bottom:18px; display:none}
.err-banner{border-color:var(--danger); color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent)}
.tiers{width:100%; border-collapse:collapse; font-size:.85rem; color:var(--fg-dim); margin:8px 0 4px}
.tiers td,.tiers th{padding:4px 0}
.crypto-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.coin-addr{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 50%, transparent)}
.coin-addr code{font-family:var(--mono); font-size:.78rem; word-break:break-all; color:var(--fg)}
hr.neon{border:0; border-top:1px solid var(--border); margin:56px 0}

/* ============================================================= footer */
footer{border-top:1px solid var(--border); padding:48px 0 56px; color:var(--fg-dim); font-size:.9rem}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot .brand{color:var(--fg)}
.foot small{font-size:.8rem}
.foot .col h4{font-size:.85rem; color:var(--fg); margin:0 0 12px; letter-spacing:.02em}
.foot .col a{display:block; padding:4px 0; color:var(--fg-dim); font-size:.9rem}
.foot .col a:hover{color:var(--accent-soft)}

/* ============================================================= reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .demo,.btn-primary,.stat,.feat,.shot,.dl,.price{animation:none!important; transform:none!important}
  body::before{animation:none}
}

/* ============================================================= responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .feat-rows .feat-row{grid-template-columns:1fr}
  .feat-row.rev .media{order:0}
  .os-btn .os-label{display:none}
}
@media (max-width:960px){
  .feats{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr}
  .dl-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .crypto-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .feats{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .wrap{padding:0 18px}
  .btn-lg{width:100%}
  .os-btns{display:none}
}
@media (max-width:420px){
  .hero-os{flex-wrap:wrap}
  .os-lg{flex:1 1 100%}
}