/* ============================================================= fonts
   Self-hosted (SIL OFL 1.1): Oxanium for display, Exo 2 for text, JetBrains Mono for
   values, Michroma for small wide labels. Latin + Latin-Extended subsets only. */
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/oxanium-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/oxanium-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/oxanium-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/oxanium-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/oxanium-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/oxanium-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/exo-2-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/exo-2-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/exo-2-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/exo-2-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/exo-2-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/exo-2-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/exo-2-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/exo-2-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/exo-2-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Exo 2';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/exo-2-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/michroma-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================= tokens
   Nikkosynth website — the same token set and layout as the other Nikkoid sites
   (NikEdit is the reference), so the family reads as one product line. The palette
   here is the hardware panel's own: near-black navy, cyan accent, brushed metal. */
: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:'Exo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Oxanium','Exo 2',system-ui,sans-serif;
  --wide:'Michroma','Oxanium',system-ui,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:color-mix(in srgb, var(--accent) 62%, #000); 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}

.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:color-mix(in srgb, var(--accent) 62%, #000); color:#fff; box-shadow:var(--glow); animation:pulseGlow 3s ease-in-out infinite}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 72%, #000); 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-buy{background:color-mix(in srgb, var(--panel0) 55%, transparent)}
.btn-buy:hover{background:color-mix(in srgb, var(--panel0) 75%, transparent)}
.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-x:hidden; overflow-y: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:color-mix(in srgb, var(--accent) 62%, #000)}
.lb-close{border:0; cursor:pointer; font-size:15px}
body.lb-open{overflow:hidden}

/* anti-spam honeypot: visually hidden but still in the DOM (bots fill it, humans never see it) */
.hp{position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; overflow:hidden}

/* ------------------------------------------------------------- languages */
.langs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px}
.lang-chip{padding:8px 16px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--panel0) 55%, transparent); font-family:var(--mono); font-size:.85rem; color:var(--fg); transition:border-color .2s, color .2s, box-shadow .2s, transform .2s}
.lang-chip:hover{border-color:var(--accent-soft); color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-2px)}
@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 */
.dls{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
.dl-group{display:grid; gap:12px; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card)}
.dl-os-h{display:flex; align-items:center; gap:9px; margin:0; font-size:1.05rem; font-weight:600; color:var(--fg)}
.dl-os-h svg{width:20px; height:20px; color:var(--accent-soft)}
.dl-grid{display:grid; gap:8px}
.dl{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; border:1px solid var(--border); text-decoration:none; color:var(--fg); background:color-mix(in srgb, var(--panel0) 50%, transparent); transition:box-shadow .15s, border-color .15s, transform .15s}
.dl:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft); transform:translateY(-1px)}
.dl-what{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.dl-what span{font-weight:600; font-size:.95rem}
.dl-what small{color:var(--fg-dim); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-get{color:var(--accent-soft); flex:none}

/* ------------------------------------------------------------- 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:color-mix(in srgb, var(--accent) 62%, #000); 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:color-mix(in srgb, var(--accent) 62%, #000); 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}
}
@media (max-width:960px){
  .feats{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr}
  .dls{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%}
}

/* our apps menu */
.apps{position:relative}
.apps summary{list-style:none; display:flex; align-items:center; gap:7px; cursor:pointer; font-size:14px; color:var(--fg-dim); border:1px solid var(--border); border-radius:9px; padding:6px 10px; white-space:nowrap; user-select:none; background:transparent; transition:color .18s,border-color .18s,box-shadow .18s}
.apps summary::-webkit-details-marker{display:none}
.apps summary:hover,.apps[open] summary{color:var(--fg); border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.apps .apps-ico{flex:none; width:16px; height:16px}
.apps .chev{flex:none; opacity:.7; transition:transform .15s}
.apps[open] .chev{transform:rotate(180deg)}
.apps-menu{position:absolute; inset-inline-start:0; top:calc(100% + 6px); min-width:180px; padding:6px; display:grid; gap:2px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.4), var(--glow-soft); z-index:60}
.apps[open] .apps-menu{animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
.apps-menu a{display:block; padding:7px 12px; border-radius:8px; color:var(--fg); font-size:14px; text-decoration:none; white-space:nowrap; transition:background .15s}
.apps-menu a:hover,.apps-menu a:focus-visible{background:color-mix(in srgb, var(--accent) 12%, transparent); outline:none}
.apps-menu a[aria-current]{background:color-mix(in srgb, var(--accent) 62%, #000); color:#fff}
.apps-menu .apps-home{font-weight:600; letter-spacing:.02em}
.apps-menu hr{border:0; height:1px; margin:4px 8px; background:linear-gradient(90deg, transparent, var(--accent-soft), transparent); opacity:.55}
@media (max-width:560px){.apps summary{padding:5px 7px}.apps-name{display:none}}

/* ================================================================= Nikkosynth */

/* The hero instrument: a live spectrum on a dark bezel, with the panel's own
   cyan. The canvas is driven by assets/site.js. */
.instrument{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--border); background:linear-gradient(180deg,#08142F,#04091C);
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(30,155,255,.10);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s ease;
  will-change:transform;
}
.instrument:hover{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-6px)}
.instrument-bar{display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:rgba(6,13,24,.7)}
.instrument-bar .tl{width:10px;height:10px;border-radius:50%}
.instrument-bar .tl.r{background:var(--danger)} .instrument-bar .tl.y{background:var(--warn)}
.instrument-bar .tl.g{background:var(--ok)}
.instrument-bar .nm{margin-left:10px;font-family:var(--mono);font-size:.78rem;color:var(--fg-dim);letter-spacing:.06em}
.instrument-bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;color:var(--ok)}
.instrument-bar .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 1.8s ease-in-out infinite}
#heroSpec{display:block; width:100%; height:320px}
.instrument-foot{display:flex; gap:14px; flex-wrap:wrap; padding:14px 16px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:.72rem; color:var(--fg-dim); letter-spacing:.04em}
.instrument-foot b{color:var(--accent-soft); font-weight:600}

/* Keys that light as the arpeggio runs under the hero — CSS only, tasteful. */
.keybed{display:flex; gap:2px; padding:10px 16px 14px; border-top:1px solid var(--border)}
.keybed i{flex:1; height:26px; border-radius:0 0 3px 3px; background:#0d1a2b; border:1px solid rgba(95,196,255,.14);
  animation:press 3.4s cubic-bezier(.4,0,.2,1) infinite}
.keybed i:nth-child(3n){height:16px; background:#060d18; align-self:flex-start; margin-top:-10px}
.keybed i:nth-child(7n){animation-delay:.18s}
.keybed i:nth-child(5n){animation-delay:.42s}
.keybed i:nth-child(4n){animation-delay:.66s}
@keyframes press{
  0%,96%,100%{background:#0d1a2b; box-shadow:none}
  2%{background:color-mix(in srgb, var(--accent) 70%, #000); box-shadow:0 0 14px var(--accent)}
  8%{background:#0d1a2b; box-shadow:none}
}

/* A knob that turns itself, as the section marker for the features grid. */
.turnknob{width:52px;height:52px;border-radius:50%;position:relative;
  background:repeating-conic-gradient(#202429 0deg 8deg,#3a4148 8deg 16deg);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4)}
.turnknob::before{content:"";position:absolute;inset:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #edf1f4, #99a1aa)}
.turnknob::after{content:"";position:absolute;top:5px;left:50%;width:3px;height:14px;margin-left:-1.5px;
  border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--accent);transform-origin:50% 21px;
  animation:turn 6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes turn{0%,100%{transform:rotate(-135deg)} 50%{transform:rotate(115deg)}}

/* Feature rows: a small live meter where the other sites put a screenshot. */
.meter{display:flex; align-items:flex-end; gap:5px; height:120px; padding:18px;
  border-radius:var(--radius); border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,28,66,.7), rgba(4,9,28,.9))}
.meter i{flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg,#a8f4ff,#2CC4E0 40%,#155f92);
  animation:bounce 1.9s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:scaleY(.42)} 50%{transform:scaleY(1)}}
.meter i:nth-child(2n){animation-delay:.12s} .meter i:nth-child(3n){animation-delay:.26s}
.meter i:nth-child(4n){animation-delay:.38s} .meter i:nth-child(5n){animation-delay:.5s}

/* The register/pricing band uses the shared .price grid; give it the accent rule. */
.price.hot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px 200px at 50% 0%, rgba(95,196,255,.14), transparent 70%)}

/* OS badge on a download row. */
.dl-os{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent-soft);flex:none}
.dl-os svg{width:16px;height:16px}

/* Support page: a two-column Q&A. */
.faq{display:flex;flex-direction:column;gap:14px;max-width:820px}
.faq details{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:18px 20px;transition:.2s}
.faq details[open]{border-color:var(--accent-soft);box-shadow:var(--glow-soft)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--accent-soft);font-family:var(--mono);font-size:1.2rem;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:12px 0 0;color:var(--fg-dim)}

/* The tabs on the download page. */
.os-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.os-tab{padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--fg-dim);
  font-family:var(--font);font-size:.92rem;cursor:pointer;transition:.18s}
.os-tab:hover{color:var(--fg);border-color:var(--accent-soft)}
.os-tab.on{background:color-mix(in srgb,var(--accent) 62%, #000);color:#fff;border-color:transparent}

@media (prefers-reduced-motion: reduce){
  .instrument{transform:none; transition:none}
  .keybed i, .turnknob::after, .meter i{animation:none}
}

/* Screenshot cards: each keeps its own height. The plates are very different shapes
   (the FX column is three times the height of the filter), and stretching them to a
   common row height left a large empty area inside the shorter card. `align-items:
   start` plus a height cap on the image keeps every card the size of its picture. */
.shots{align-items:start}
/* A uniform picture height with `contain`, so a narrow plate is centred on the card
   and a tall one is not cropped into an unreadable sliver. */
.shot img{width:100%; height:auto}
.shot figcaption{margin:0}


/* ============================================================= typography v2
   Oxanium (bold, squared) for every heading, number and button; Exo 2 for reading;
   Michroma for kickers. Sizes are deliberately a step smaller than before: the
   display face is wide, so it needs less size to carry the same weight. */
body{font-size:15px; line-height:1.62; font-weight:400; letter-spacing:.005em}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:.01em; line-height:1.14}
h1{font-size:clamp(1.9rem,3.7vw,2.75rem); font-weight:800; letter-spacing:.005em}
h2{font-size:clamp(1.45rem,2.6vw,2rem)}
h3{font-size:1.05rem}
.lead{font-size:clamp(.98rem,1.4vw,1.08rem); line-height:1.65}
.hero-copy .lead{font-size:clamp(1rem,1.5vw,1.12rem)}
.kicker{font-family:var(--wide); font-size:.66rem; letter-spacing:.24em; font-weight:400}
.brand{font-family:var(--display); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.98rem}
.nav-links a{font-family:var(--display); font-weight:600; font-size:.86rem; letter-spacing:.04em}
.btn{font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase}
.btn-lg{font-size:.95rem; padding:13px 26px}
.badge{font-family:var(--display); font-weight:600; letter-spacing:.06em; font-size:.76rem; text-transform:uppercase}
.hero-note{font-size:.76rem}
.stat .num{font-family:var(--display); font-weight:800; font-size:1.85rem; letter-spacing:.02em}
.stat .lbl{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem}
.feat .n{font-family:var(--wide); font-size:.66rem; letter-spacing:.2em}
.feat h3{font-size:1.04rem; letter-spacing:.02em}
.feat p{font-size:.9rem; line-height:1.6}
.feat-row h3{font-size:1.3rem}
.feat-row p,.feat-row ul{font-size:.93rem}
.price h3{font-size:1.1rem; text-transform:uppercase; letter-spacing:.08em}
.price .amt{font-family:var(--display); font-weight:800; font-size:2.1rem}
.cta h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.instrument-foot,.instrument-bar .nm{font-family:var(--display); letter-spacing:.1em}
.dl-os-h{font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.95rem}
.faq summary{font-family:var(--display); font-weight:700; letter-spacing:.02em; font-size:.98rem}
.foot .col h4{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem}
code,pre,kbd{font-family:var(--mono)}

/* ============================================================= screenshots v2
   Every capture is shown at its own aspect ratio — no letterbox, no black bars.
   The plates flow in balanced columns, so tall and wide crops sit together. */
.shot-hero{margin:0 0 26px}
.shot-hero img{display:block}
.shots{display:block; columns:3 300px; column-gap:22px}
.shots .shot{break-inside:avoid; margin:0 0 22px; display:block}
.shot img{display:block; width:100%; height:auto; background:#0A1630}
.shot figcaption{font-size:.84rem; line-height:1.5; padding:12px 15px 14px}
.shot figcaption b{display:block; font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; color:var(--fg); margin-bottom:3px}
.skins-h{margin:44px 0 18px; text-align:center; font-size:1.15rem; letter-spacing:.04em}
.skins-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.skins-grid .shot{margin:0}
@media (max-width:640px){ .skins-grid{grid-template-columns:1fr} .shots{columns:1} }

/* ================================================================= visual FX pass
   Scroll progress, a header that firms up on scroll, a pointer spotlight on cards,
   a hero glow that follows the pointer, a sheen on the headline, zoomable
   screenshots and a back-to-top button. Everything here stands down under
   prefers-reduced-motion. Driven by initFx() / initLightbox() in site.js. */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--accent-soft), #b4f6ff);
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 70%, transparent)}
header{transition:background .35s ease, box-shadow .35s ease, border-color .35s ease}
header.scrolled{background:color-mix(in srgb, var(--bg0) 90%, transparent);
  border-bottom-color:color-mix(in srgb, var(--accent-soft) 30%, transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.32)}
:root[data-theme="bright"] header.scrolled{box-shadow:0 10px 30px rgba(23,80,140,.12)}

/* Hero: a soft light that follows the pointer, and a slow sheen across the title. */
.hero{isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 360px at var(--hx,70%) var(--hy,40%), rgba(95,196,255,.13), transparent 70%);
  transition:background .25s linear}
.hero-copy h1{background:linear-gradient(105deg, var(--fg) 0%, var(--fg) 42%, var(--accent-soft) 50%, var(--fg) 58%, var(--fg) 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 9s cubic-bezier(.45,0,.2,1) 1.2s infinite}
@keyframes sheen{0%{background-position:100% 0} 38%,100%{background-position:0 0}}

/* Pointer spotlight on cards: a light that sits under the cursor. */
.stat,.dl-group{position:relative}
.feat,.stat,.price,.dl-group{isolation:isolate}
.feat::before,.stat::before,.price::before,.dl-group::before{content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(95,196,255,.17), transparent 62%)}
.feat:hover::before,.stat:hover::before,.price:hover::before,.dl-group:hover::before{opacity:1}
:root[data-theme="bright"] .feat::before,:root[data-theme="bright"] .stat::before,
:root[data-theme="bright"] .price::before,:root[data-theme="bright"] .dl-group::before{
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(11,125,224,.10), transparent 62%)}

/* Screenshots: clickable, a gentle zoom inside the frame, a light sweep, and a hint. */
figure.shot{position:relative; cursor:zoom-in}
figure.shot img{transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .4s ease}
figure.shot:hover img{transform:scale(1.03); filter:brightness(1.06) saturate(1.05)}
figure.shot::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  background-size:250% 100%; background-position:120% 0; opacity:0; transition:opacity .3s}
figure.shot:hover::after{opacity:1; animation:sweep 1.1s ease forwards}
@keyframes sweep{to{background-position:-30% 0}}
figure.shot::before{content:""; position:absolute; z-index:2; top:12px; right:12px; width:34px; height:34px;
  border-radius:10px; pointer-events:none; opacity:0; transform:scale(.85); transition:.25s;
  background:rgba(4,9,28,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FC4FF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
  border:1px solid var(--border); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
figure.shot:hover::before,figure.shot:focus-visible::before{opacity:1; transform:none}
figure.shot:focus-visible{outline:2px solid var(--accent-soft); outline-offset:3px}

/* Lightbox: counter, and each picture fades in. */
.lightbox{animation:lbFade .22s ease; z-index:80}
.lightbox img.lb-in{animation:lbIn .35s cubic-bezier(.2,.8,.2,1)}
.lb-count{font-family:var(--mono); font-size:.78rem; color:rgba(255,255,255,.6); letter-spacing:.08em}
.lightbox figcaption{max-width:72ch; text-align:center; font-weight:500; font-size:15px; line-height:1.5}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbIn{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}

/* Back to top. */
.to-top{position:fixed; right:22px; bottom:22px; z-index:55; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; color:var(--accent-soft);
  border:1px solid var(--border); background:color-mix(in srgb, var(--bg0) 80%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--glow-soft);
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s, transform .3s, border-color .2s, box-shadow .2s}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{border-color:var(--accent-soft); box-shadow:var(--glow)}
.to-top svg{width:20px; height:20px}

/* Stats: the number glows once it has counted up. */
.stat .num{transition:text-shadow .6s ease}
.stat:hover .num{text-shadow:0 0 18px rgba(95,196,255,.55)}

@media (prefers-reduced-motion: reduce){
  .hero-copy h1{animation:none; background:none; color:var(--fg)}
  figure.shot img, figure.shot:hover img{transition:none; transform:none}
  figure.shot:hover::after{animation:none; opacity:0}
  .lightbox, .lightbox img.lb-in{animation:none}
  .scroll-progress{display:none}
}
@media print{.scroll-progress,.to-top{display:none}}