/* CoinAvio — concept B "Stablecoin Green" */

/* Self-hosted fonts (Onest / Geist Mono variable; latin subset from @fontsource-variable 5.2.8,
   latin-ext, cyrillic and cyrillic-ext subsets from Google Fonts, Onest v11 / Geist Mono v6, with
   Google's unicode-ranges) and Lenis 1.3.27 base styles. The browser downloads a subset only when the
   page uses one of its characters: English and Uzbek need latin only (U+02BB is in latin), Russian,
   Ukrainian and Kazakh add cyrillic, Kazakh also cyrillic-ext (ә ғ қ ң ө ү һ), and ₸ is in latin-ext.
   Everything is served from /home/v6 so the page passes a strict same-origin CSP. */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/onest-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/onest-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/onest-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/geist-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/geist-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/home/v6/fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
/* ---------- theme tokens ----------
   Dark is the default (html[data-theme="dark"], set before paint by js/head.js); light only when the
   visitor chose it (localStorage "coinavio-theme" === "light", the same key as the app).
   The dark set below is also applied to the hero, to the header while it overlaps the hero, and to the
   code panels, so those stay dark in both themes. Components use these tokens only, never theme selectors. */
:root,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .nav:not(.is-past-hero),
:root[data-theme="light"] :is(.snip, .term, .code) {
  color-scheme: dark;
  color: var(--ink);
  --bg: #05080a;
  --bg-2: #081012;
  --bg-3: #0c1618;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.08);
  --field: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --dot: rgba(255, 255, 255, 0.14);
  --dot-2: rgba(255, 255, 255, 0.22);
  --ink: #eef6f2;
  --ink-2: #a9b8b2;
  --ink-3: #82918b;
  --em: #10e39a;
  --mint: #5cf5c2;
  --em-600: #0bbf80;
  --em-900: #03301f;
  --ok: #10e39a;
  --gold: #e8b85a;
  --gold-2: #f5d38e;
  --red: #ff6b6b;
  --amber: #f5b84a;
  --blue: #6aa8ff;
  --em-soft: rgba(16, 227, 154, 0.1);
  --em-soft-2: rgba(16, 227, 154, 0.14);
  --em-line: rgba(16, 227, 154, 0.3);
  --em-line-2: rgba(16, 227, 154, 0.5);
  --blue-soft: rgba(106, 168, 255, 0.12);
  --amber-soft: rgba(245, 184, 74, 0.14);
  --gold-soft: rgba(232, 184, 90, 0.13);
  --gold-line: rgba(232, 184, 90, 0.3);
  --warn-line: rgba(245, 184, 74, 0.4);
  --warn-soft: rgba(245, 184, 74, 0.04);
  --woo-soft: rgba(127, 84, 179, 0.2);
  --woo-ink: #c9a8f0;
  --code-bg: rgba(16, 227, 154, 0.09);
  --card: linear-gradient(180deg, #0c1517, #091012);
  --card-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  --card-solid: rgba(8, 14, 15, 0.86);
  --card-shadow: none;
  --card-glow: rgba(16, 227, 154, 0.1);
  --card-glow-2: rgba(16, 227, 154, 0.18);
  --spot: rgba(92, 245, 194, 0.1);
  --glow: rgba(16, 227, 154, 0.22);
  --sec-glow: rgba(16, 227, 154, 0.09);
  --panel: #070d0e;
  --panel-2: #060b0c;
  --panel-soft: rgba(255, 255, 255, 0.025);
  --ring: #070d0e;
  --ring-2: #0b1214;
  --seg-on: rgba(255, 255, 255, 0.08);
  --seg-on-shadow: none;
  --mock-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  --mock-ring: transparent;
  --kpi-main: linear-gradient(150deg, rgba(16, 227, 154, 0.14), rgba(16, 227, 154, 0.02));
  --kpi-main-line: rgba(16, 227, 154, 0.25);
  --credit-bg: linear-gradient(160deg, rgba(16, 227, 154, 0.16), rgba(16, 227, 154, 0.04));
  --credit-line: rgba(16, 227, 154, 0.35);
  --try-bg: linear-gradient(100deg, rgba(16, 227, 154, 0.09), rgba(16, 227, 154, 0.02) 70%);
  --try-line: rgba(16, 227, 154, 0.22);
  --board-shadow: 0 60px 160px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 120px -30px rgba(16, 227, 154, 0.35);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-line: #34f5b4;
  --chart-fill: #10e39a;
  --node-bg: #071210;
  --node-glow: 0 0 30px -6px rgba(16, 227, 154, 0.6);
  --sq-glow: 0 0 10px #10e39a;
  --secgrid-bg: rgba(6, 11, 12, 0.92);
  --price-shadow: 0 50px 140px -40px rgba(16, 227, 154, 0.45);
  --nav-bg: rgba(5, 8, 10, 0.78);
  --menu-bg: rgba(5, 8, 10, 0.97);
  --foot-bg: #040607;
  --sec-bg: #040708;
  --img-filter: none;
  --img-blend: normal;
  --sec-img-op: 0.55;
  --dev-img-op: 0.5;
  --cta-img-op: 1;
  --sec-veil: linear-gradient(90deg, rgba(4, 7, 8, 0.96) 0%, rgba(4, 7, 8, 0.7) 55%, rgba(4, 7, 8, 0.4) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 70%, var(--bg) 100%);
  --dev-veil: linear-gradient(180deg, var(--bg) 0%, rgba(5, 8, 10, 0.55) 30%, rgba(5, 8, 10, 0.6) 70%, var(--bg) 100%);
  --cta-veil: linear-gradient(180deg, var(--bg) 0%, rgba(5, 8, 10, 0.2) 40%, rgba(5, 8, 10, 0) 80%, rgba(4, 6, 7, 0.9) 100%);
  --cta-ink-2: #c9d8d2;
  --btn-bg: linear-gradient(180deg, #3cf2b4, #10e39a 60%, #0cc985);
  --btn-hover-bg: linear-gradient(180deg, #3cf2b4, #10e39a 60%, #0cc985);
  --btn-ink: #00170d;
  --btn-shadow: 0 0 0 1px rgba(92, 245, 194, 0.5) inset, 0 10px 30px -8px rgba(16, 227, 154, 0.55);
  --btn-hover-shadow: 0 0 0 1px rgba(92, 245, 194, 0.7) inset, 0 16px 40px -8px rgba(16, 227, 154, 0.7);
  --ghost-bg: rgba(255, 255, 255, 0.04);
  --ghost-hover: rgba(255, 255, 255, 0.08);
  --act-bg: #10e39a;
  --act-ink: #00170d;
  --scroll-thumb: #1d2a28;
  --selection: rgba(16, 227, 154, 0.35);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --tick-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%235cf5c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plus-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' stroke='%235cf5c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --play-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l7 4-7 4z' fill='%2310e39a'/%3E%3C/svg%3E");
}
/* Light: the dashboard's light tokens (apps/web globals.css). Text pairs meet WCAG AA on --bg and white. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8f7;
  --bg-2: #eef3f0;
  --bg-3: #e6ede9;
  --surface: #ffffff;
  --surface-2: #eef3f0;
  --surface-3: #e6ede9;
  --field: #f6f8f7;
  --line: #dce5df;
  --line-2: #cbd7d0;
  --line-3: #aebdb5;
  --dot: #cfd9d3;
  --dot-2: #bfcbc4;
  --ink: #0c1412;
  --ink-2: #56625d;
  --ink-3: #64706a;
  --faint: #7a867f;
  --em: #0e9f6e;
  --mint: #087c54;
  --em-600: #087c54;
  --em-900: #03301f;
  --ok: #087c54;
  --gold: #c9962f;
  --gold-2: #7a5a12;
  --red: #ad2828;
  --amber: #825600;
  --blue: #1d4ea8;
  --em-soft: #e2f5eb;
  --em-soft-2: #d3efe1;
  --em-line: rgba(8, 124, 84, 0.26);
  --em-line-2: rgba(8, 124, 84, 0.45);
  --blue-soft: #e3eefc;
  --amber-soft: #fff2d8;
  --gold-soft: #fbf1d9;
  --gold-line: rgba(138, 100, 22, 0.28);
  --warn-line: rgba(130, 86, 0, 0.32);
  --warn-soft: #fffaf0;
  --woo-soft: #f1eafa;
  --woo-ink: #6b3fa0;
  --code-bg: #e2f5eb;
  --card: #ffffff;
  --card-soft: #ffffff;
  --card-solid: #ffffff;
  --card-shadow: 0 1px 2px rgba(12, 20, 18, 0.04), 0 10px 30px -18px rgba(12, 20, 18, 0.14);
  --card-glow: rgba(16, 185, 129, 0.07);
  --card-glow-2: rgba(16, 185, 129, 0.12);
  --spot: rgba(16, 185, 129, 0.07);
  --glow: rgba(16, 185, 129, 0.16);
  --sec-glow: rgba(16, 185, 129, 0.1);
  --panel: #ffffff;
  --panel-2: #f8faf9;
  --panel-soft: #fbfcfb;
  --ring: #fbfcfb;
  --ring-2: #ffffff;
  --seg-on: #ffffff;
  --seg-on-shadow: 0 1px 2px rgba(12, 20, 18, 0.1);
  --mock-shadow: 0 0 0 1px #dce5df, 0 26px 50px -26px rgba(12, 20, 18, 0.32);
  --mock-ring: #e4e4e7;
  --kpi-main: linear-gradient(150deg, #e2f5eb, #f4fbf7);
  --kpi-main-line: rgba(8, 124, 84, 0.22);
  --credit-bg: linear-gradient(160deg, #e2f5eb, #ffffff);
  --credit-line: rgba(8, 124, 84, 0.24);
  --try-bg: linear-gradient(100deg, #e2f5eb, #f3faf6 70%);
  --try-line: rgba(8, 124, 84, 0.2);
  --board-shadow: 0 50px 120px -50px rgba(12, 20, 18, 0.35), 0 0 0 1px rgba(12, 20, 18, 0.07), 0 0 120px -40px rgba(16, 185, 129, 0.25);
  --chart-grid: #e3eae6;
  --chart-line: #0e9f6e;
  --chart-fill: #10b981;
  --node-bg: #ffffff;
  --node-glow: 0 0 0 5px #e2f5eb, 0 8px 20px -8px rgba(8, 124, 84, 0.45);
  --sq-glow: 0 0 0 3px #d3efe1;
  --secgrid-bg: #ffffff;
  --price-shadow: 0 40px 100px -40px rgba(8, 124, 84, 0.45);
  --nav-bg: rgba(246, 248, 247, 0.84);
  --menu-bg: rgba(246, 248, 247, 0.98);
  --foot-bg: #eef3f0;
  --sec-bg: #eef3f0;
  --img-filter: none;
  --img-blend: normal;
  --sec-img-op: 0.9;
  --dev-img-op: 0.8;
  --cta-img-op: 1;
  --sec-veil: linear-gradient(90deg, rgba(238, 243, 240, 0.97) 0%, rgba(238, 243, 240, 0.86) 52%, rgba(238, 243, 240, 0.3) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 75%, var(--bg) 100%);
  --dev-veil: linear-gradient(180deg, var(--bg) 0%, rgba(246, 248, 247, 0.55) 30%, rgba(246, 248, 247, 0.6) 70%, var(--bg) 100%);
  --cta-veil: radial-gradient(ellipse 34% 46% at 50% 100%, rgba(246, 248, 247, 0.9), rgba(246, 248, 247, 0) 72%), linear-gradient(180deg, var(--bg) 0%, rgba(246, 248, 247, 0.35) 40%, rgba(246, 248, 247, 0) 80%, rgba(238, 243, 240, 0.9) 100%);
  --cta-ink-2: #3f4b46;
  --btn-bg: #087c54;
  --btn-hover-bg: #066a47;
  --btn-ink: #ffffff;
  --btn-shadow: 0 1px 2px rgba(12, 20, 18, 0.12), 0 8px 20px -10px rgba(8, 124, 84, 0.55);
  --btn-hover-shadow: 0 1px 2px rgba(12, 20, 18, 0.12), 0 14px 30px -12px rgba(8, 124, 84, 0.6);
  --ghost-bg: #ffffff;
  --ghost-hover: #eef3f0;
  --act-bg: #087c54;
  --act-ink: #ffffff;
  --scroll-thumb: #c4d0c9;
  --selection: rgba(16, 185, 129, 0.25);
  --shadow-1: 0 1px 2px rgba(12, 20, 18, 0.05), 0 18px 40px -22px rgba(12, 20, 18, 0.22);
  --shadow-2: 0 30px 80px -34px rgba(12, 20, 18, 0.3), 0 0 0 1px rgba(12, 20, 18, 0.06);
  --tick-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23087c54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plus-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' stroke='%23087c54' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --play-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l7 4-7 4z' fill='%23087c54'/%3E%3C/svg%3E");
}
:root {
  --light: #f6f8f7;
  --light-ink: #0c1412;
  --light-ink-2: #56625d;
  --light-line: #e3e8e5;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --font: 'Onest Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --control-h: 44px;
  --sec-y: clamp(64px, 6.6vw, 104px);
  --fs-h2: clamp(36px, 4.2vw, 58px);
  --seam: clamp(120px, 14vw, 200px);
  --z-nav: 50;
  --z-menu: 60;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --dur-hover: 0.4s;
  accent-color: var(--em);
}
/* the toggle flips everything in one frame: no colour transitions while the tokens swap */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

html.js-reveal [data-reveal] { visibility: hidden; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: 0.88em; padding: 0.1em 0.38em; border-radius: 6px; background: var(--code-bg); color: var(--mint); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--selection); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--em); color: #00150c; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  --h: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-soft-out), background-color 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.btn--sm { --h: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { --h: 52px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
}
.btn--ghost { background: var(--ghost-bg); border-color: var(--line-2); color: var(--ink); }
.btn--dark { background: #07110d; color: #eafff6; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px); background: var(--btn-hover-bg); box-shadow: var(--btn-hover-shadow); }
  .btn--ghost:hover { background: var(--ghost-hover); border-color: var(--line-3); transform: translateY(-2px); }
  .btn--dark:hover { transform: translateY(-2px); background: #000; }
}
.btn svg { transition: transform var(--dur-hover) var(--ease-soft-out); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- tags / status ---------- */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.tag--muted { background: var(--surface-2); color: var(--ink-2); }
.tag--warn { background: var(--amber-soft); color: var(--amber); }
.tag--ok { background: var(--em-soft-2); color: var(--mint); }
.st { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--font); font-style: normal; white-space: nowrap; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st--paid { background: var(--em-soft); color: var(--mint); }
.st--conf { background: var(--blue-soft); color: var(--blue); }
.st--hold { background: var(--amber-soft); color: var(--amber); }
.st--over { background: var(--gold-soft); color: var(--gold-2); }
.st--exp { background: var(--surface-2); color: var(--ink-3); }
.st--new { background: var(--surface-3); color: var(--ink-2); }
.lbl { font-size: 12px; color: var(--ink-3); letter-spacing: 0.01em; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ease-soft-out); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 19px; letter-spacing: -0.02em; }
.brand .brand__ic { flex: none; width: 34px; height: 34px; }
.nav__links { display: flex; gap: 4px; margin-left: 12px; }
.nav__links a { padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: color 0.2s, background-color 0.2s; }
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav__signin { padding: 8px 14px; font-size: 15px; color: var(--ink-2); border-radius: 999px; }
.nav__signin:hover { color: var(--ink); }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ghost-bg); position: relative; cursor: pointer; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease-soft-out); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 72px 0 auto 0; z-index: var(--z-menu); background: var(--menu-bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; max-height: calc(100dvh - 72px); overflow: auto; }
.menu nav { display: grid; margin-bottom: 16px; }
.menu nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: 120px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 70% 40%; opacity: 0.95; }
.hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 25% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 25% 40%, #000 0%, transparent 75%);
}
.hero__veil { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(5,8,10,.94) 0%, rgba(5,8,10,.8) 34%, rgba(5,8,10,.35) 50%, rgba(5,8,10,0) 64%),
  linear-gradient(180deg, rgba(5,8,10,.5) 0%, rgba(5,8,10,0) 18%, rgba(5,8,10,0) 70%, var(--bg) 100%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; min-height: min(780px, calc(100svh - 120px)); padding-bottom: 40px; }
.hero__copy { max-width: 600px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(16, 227, 154, 0.08); border: 1px solid rgba(16, 227, 154, 0.25); color: var(--mint); font-size: 14px; font-weight: 500; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 4px rgba(16, 227, 154, 0.18); animation: pulse 2.4s var(--ease-soft-out) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,227,154,.45); } 60% { box-shadow: 0 0 0 7px rgba(16,227,154,0); } }
.hero__title { margin-top: 22px; font-size: clamp(42px, 5.4vw, 78px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 640; }
.grad { background: linear-gradient(100deg, #ffffff 0%, #b7ffe4 30%, var(--em) 62%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { margin-top: 24px; font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 540px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--ink-2); }
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: rgba(16,227,154,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%235cf5c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.hero__meta strong { color: var(--ink); font-weight: 600; }

/* stage */
.stage { position: relative; height: 660px; perspective: 1600px; }
.stage__halo { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; translate: -40% -50%; background: radial-gradient(circle, rgba(16,227,154,.32), rgba(16,227,154,0) 65%); filter: blur(10px); pointer-events: none; }

.dash { background: linear-gradient(180deg, rgba(14, 24, 24, 0.92), rgba(8, 14, 15, 0.94)); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; }
.dash--hero { position: absolute; right: -36px; top: 0; width: 560px; transform: rotateY(-12deg) rotateX(3deg) translateZ(-40px); transform-origin: right center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dash__bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.dash__crumb b { color: var(--ink-3); font-weight: 400; margin: 0 4px; }
.dash__bar .tag { margin-left: auto; }
.dash__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.dash__side { display: grid; align-content: start; gap: 10px; padding: 16px 12px; border-right: 1px solid var(--line); min-height: 100%; }
.dash__side i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.06); }
.dash__side i.on { background: rgba(16,227,154,.35); }
.dash__main { justify-self: end; width: 280px; padding: 18px 18px 14px; }
.dash__bal { display: grid; gap: 2px; }
.dash__bal .big { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.dash__bal .delta { font-size: 12.5px; color: var(--mint); opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s var(--ease-out); }
.dash__bal .delta.is-on { opacity: 1; transform: none; }
.dash__chart { width: 100%; height: 70px; margin: 10px 0 12px; }
.dash__list { display: grid; gap: 2px; }
.dash__list .row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 12.5px; }
.dash__list .row em { display: block; font-style: normal; color: var(--ink-3); font-size: 11px; }
.dash__list .row.is-new { background: rgba(16,227,154,.08); }

/* checkout widget (light, as in the product) */
.co {
  position: absolute; left: 0; top: 0; z-index: 2; width: 372px;
  background: var(--light); color: var(--light-ink);
  border-radius: 22px; box-shadow: 0 50px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 80px -20px rgba(16,227,154,.45);
  overflow: hidden; font-size: 13px;
}
.co__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #eef2f0; border-bottom: 1px solid var(--light-line); }
.co__avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #0d3b2c, #0a7a55); color: #d9fff0; font: 700 11px/1 var(--font); letter-spacing: 0.02em; }
.co__merchant { display: grid; line-height: 1.25; }
.co__merchant b { font-weight: 600; font-size: 13.5px; }
.co__merchant small { display: inline-flex; align-items: center; gap: 4px; color: var(--light-ink-2); font-size: 11.5px; }
.co__tag { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--light-ink-2); border: 1px solid var(--light-line); padding: 5px 7px; border-radius: 6px; background: #fff; }
.co__amount { display: grid; justify-items: center; padding: 14px 16px 6px; }
.co__desc { font-size: 12px; color: var(--light-ink-2); }
.co__usd { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.co__usd small { font-size: 12px; font-weight: 500; color: var(--light-ink-2); letter-spacing: 0; }
.co__steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 12px 10px; position: relative; }
.co__steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 1.5px; background: var(--light-line); }
.co__steps::after { content: ''; position: absolute; left: 12.5%; top: 17px; height: 1.5px; width: calc(75% * var(--p, 0)); background: #10b981; transition: width .6s var(--ease-out); }
.co__steps li { position: relative; z-index: 1; }
.co__steps button { display: grid; justify-items: center; gap: 4px; width: 100%; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--light-ink-2); font-size: 11px; }
.co__steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid var(--light-line); font: 600 10px/1 var(--mono); font-style: normal; transition: background-color .3s, border-color .3s, color .3s; }
.co__steps li.is-done i { background: #10b981; border-color: #10b981; color: #fff; }
.co__steps li.is-on i { border-color: #10b981; color: #0a8f63; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.co__steps li.is-on button, .co__steps li.is-done button { color: var(--light-ink); font-weight: 600; }
.co__body { position: relative; height: 318px; border-top: 1px solid var(--light-line); }
.co__pane { position: absolute; inset: 0; padding: 14px 16px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease-soft-out), transform .6s var(--ease-out), visibility 0s .45s; }
.co__pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-soft-out) .08s, transform .7s var(--ease-out) .08s, visibility 0s; }
.co__h { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--light-line); border-radius: 11px; background: #fff; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-soft-out); }
.opts li > img, .opts li > .ic { grid-row: 1 / 3; }
.opts li > span:nth-of-type(1), .opts li > span:not(.ic):first-of-type { min-width: 0; }
.opts b { display: block; font-size: 12px; font-weight: 650; line-height: 1.2; }
.opts em { display: block; font-style: normal; font-size: 10.5px; color: var(--light-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.opts .mono { grid-column: 2; font-size: 11px; color: var(--light-ink-2); }
.opts li.is-hover { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.opts li.is-press { transform: scale(.97); }
.ic { position: relative; width: 22px; height: 22px; }
.ic__net { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.cursor { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: transform .9s var(--ease-in-out), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.cursor.is-on { opacity: 1; }

.pay { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start; }
.qr { position: relative; width: 132px; height: 132px; padding: 8px; background: #fff; border: 1px solid var(--light-line); border-radius: 12px; }
.qr svg { width: 100%; height: 100%; }
.qr__logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 30px; height: 30px; display: grid; place-items: center; background: #fff; border-radius: 8px; }
.pay__info { display: grid; gap: 3px; align-content: start; }
.pay__info .lbl { color: var(--light-ink-2); font-size: 11px; margin-top: 4px; }
.pay__amt { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.pay__amt small { font-size: 12px; color: var(--light-ink-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; background: #fdf6e3; border: 1px solid #f1e2b4; font-size: 11px; font-weight: 600; color: #6b5313; }
.addr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--light-ink); }
.timer { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--light-line); }
.timer__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--light-ink-2); }
.timer__row b { color: var(--light-ink); font-weight: 600; }
.timer__bar { height: 4px; border-radius: 4px; background: #e8eeeb; margin: 8px 0; overflow: hidden; }
.timer__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: inherit; transform-origin: left; }
.timer__note { font-size: 11px; color: var(--light-ink-2); line-height: 1.45; }

.conf { display: grid; gap: 8px; }
.conf__badge { display: inline-flex; align-items: center; gap: 8px; width: max-content; height: 26px; padding: 0 10px; border-radius: 999px; background: #e8f1ff; color: #1d4fb8; font-size: 12px; font-weight: 600; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(29,79,184,.25); border-top-color: #1d4fb8; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.conf__tx { font-size: 11px; color: var(--light-ink-2); }
.conf__count { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.conf__count b { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.conf__count span { font-size: 16px; color: var(--light-ink-2); }
.conf__count em { font-style: normal; font-size: 12px; color: var(--light-ink-2); margin-left: 4px; }
.segs { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; }
.segs i { height: 8px; border-radius: 2px; background: #e3e9e6; transition: background-color .25s; }
.segs i.on { background: #10b981; }
.conf__rpc { display: flex; gap: 8px; }
.conf__rpc li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--light-line); background: #fff; font-size: 11px; color: var(--light-ink-2); transition: border-color .3s, color .3s; }
.conf__rpc li i { width: 8px; height: 8px; border-radius: 50%; background: #cfd8d4; transition: background-color .3s; }
.conf__rpc li.ok { border-color: #a7f0d0; color: #0a7a55; }
.conf__rpc li.ok i { background: #10b981; }

.done { display: grid; justify-items: center; text-align: center; gap: 6px; padding-top: 12px; }
.done__check { width: 64px; height: 64px; }
.done__check circle { stroke-dasharray: 190; stroke-dashoffset: 190; }
.done__check path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.co__pane.is-on .done__check circle { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease-out) .1s; }
.co__pane.is-on .done__check path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) .6s; }
.done__t { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; }
.done__s { font-size: 12px; color: var(--light-ink-2); }
.done .btn { margin-top: 14px; --h: 40px; font-size: 13px; }

.co__play { position: absolute; left: 8px; top: 610px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8,16,15,.8); color: var(--ink-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; cursor: pointer; }
.co__play svg { fill: var(--em); }
.co__play:hover { color: var(--ink); border-color: rgba(16,227,154,.4); }
.co__play[aria-pressed="true"] .p2 { display: none; }
.co__play[aria-pressed="true"] .p1 { width: 0; }
.co__play[aria-pressed="true"] svg { background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l7 4-7 4z' fill='%2310b981'/%3E%3C/svg%3E"); }

.hook { position: absolute; right: 0; bottom: 40px; z-index: 3; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 16px 12px 14px; border-radius: 14px; background: rgba(8, 18, 16, 0.9); border: 1px solid rgba(16,227,154,.35); box-shadow: 0 20px 50px -10px rgba(0,0,0,.8), 0 0 40px -10px rgba(16,227,154,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .4s var(--ease-soft-out), transform .6s var(--ease-out); }
.hook.is-on { opacity: 1; transform: none; }
.hook__dot { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(16,227,154,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%235cf5c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.hook__t { font-size: 13px; }
.hook__t b { color: var(--mint); font-weight: 600; }
.hook__s { font-size: 11px; color: var(--ink-3); }

/* placement of the stage pieces */
.stage .co { left: 8px; top: 92px; }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-bottom: 24px; }
.facts li { display: grid; gap: 6px; padding: 24px 26px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font-size: 30px; font-weight: 650; letter-spacing: -0.035em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.facts li:first-child b { color: var(--em); }
.facts span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--sec-y) 0; }
.sec__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__head--center .eyebrow { justify-content: center; }
.sec__head--center .sec__lede { margin-inline: auto; }
.sec h2 { font-size: var(--fs-h2); letter-spacing: -0.042em; line-height: 1.03; text-wrap: balance; }
.sec__lede { font-size: clamp(16px, 1.3vw, 18.5px); color: var(--ink-2); max-width: 560px; margin-top: 18px; }
.sec__head--split .sec__lede { margin-top: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font: 500 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); }
.eyebrow--dark { color: #053a26; }
/* recurring device: a confirmation rail — section n of 8, like blocks confirming */
.rail { display: inline-grid; grid-template-columns: repeat(8, 6px); gap: 3px; }
.rail::before { content: ''; grid-column: 1 / -1; height: 10px; border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px) 0 0 / calc(var(--n) * 9px) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--dot) 0 6px, transparent 6px 9px);
  width: 69px; }
.eyebrow--dark .rail::before { background:
    repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px) 0 0 / calc(var(--n) * 9px) 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0,40,25,.18) 0 6px, transparent 6px 9px); }

/* ---------- coins ---------- */
.coins { overflow: hidden; background: radial-gradient(ellipse 70% 50% at 50% 38%, var(--sec-glow), transparent 70%); }
.coinrow { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 28px); margin: 0 auto clamp(40px, 6vw, 72px); }
.coin3d { position: relative; width: clamp(50px, 12vw, 168px); aspect-ratio: 1; flex: none; animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1.1s); }
.coin3d--hero { width: clamp(78px, 17vw, 236px); }
.coin3d__base { width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%); }
.coin3d__logo { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; translate: -50% -50%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
html[data-motion="static"] .coin3d { animation: none; }

.nets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.net { position: relative; display: grid; align-content: start; gap: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--card-soft); border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden; transition: border-color .3s, transform var(--dur-hover) var(--ease-soft-out); }
.net::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 120px; background: radial-gradient(ellipse 80% 100% at 30% 0%, color-mix(in srgb, var(--c, var(--em)) 22%, transparent), transparent 70%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .net:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--em)) 50%, transparent); } }
.net__top { position: relative; display: flex; align-items: center; gap: 12px; }
.net__top b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.net__top span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mint); }
.net__top span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--em); }
.net__coins { display: flex; gap: 6px; flex-wrap: wrap; }
.coinchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.net__spec { display: grid; gap: 12px; margin: 0; }
.net__spec div { display: grid; gap: 2px; }
.net__spec dt { font-size: 13px; color: var(--ink-3); }
.net__spec dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.4; }
.net__spec dd.mono { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.net__note { font-size: 13.5px; color: var(--gold-2); line-height: 1.4; padding-top: 12px; border-top: 1px dashed var(--gold-line); }
.net--next { border-style: dashed; border-color: var(--line-3); background: transparent; box-shadow: none; align-content: center; gap: 10px; }
.net--next::before { display: none; }
.net__plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--em-line-2); color: var(--mint); font-size: 22px; }
.net--next b { font-size: 17px; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.25; }
.net--next p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---------- products bento ---------- */
.products { background: var(--bg); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; display: grid; gap: 24px; align-content: space-between; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 50% at 100% 100%, var(--card-glow), transparent 70%); }
.card h3 { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -0.03em; }
.card__copy p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; max-width: 46ch; }
.card--checkout { grid-column: span 7; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.card--api { grid-column: span 5; }
.card--link, .card--woo, .card--test { grid-column: span 4; }
.card--wd { grid-column: span 12; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.card--checkout::after { background: radial-gradient(ellipse 70% 70% at 85% 50%, var(--card-glow-2), transparent 70%); }

.mini-co { background: var(--light); color: var(--light-ink); border-radius: 18px; padding: 14px; box-shadow: var(--mock-shadow); font-size: 12px; transform: rotate(-2deg); }
.mini-co__top { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--light-line); }
.mini-co__top .co__avatar { width: 26px; height: 26px; font-size: 9px; }
.mini-co__top .mono { margin-left: auto; font-weight: 600; font-size: 15px; }
.mini-co__grid { display: grid; gap: 6px; margin: 10px 0; }
.mini-co__grid span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--light-line); border-radius: 10px; background: #fff; font-weight: 600; }
.mini-co__grid em { font-style: normal; font-weight: 400; color: var(--light-ink-2); }
.mini-co__grid .on { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.mini-co__foot { font-size: 11px; color: var(--light-ink-2); }
.mini-co__foot .mono { color: var(--light-ink); font-weight: 600; }

.snip { margin: 0; padding: 18px 20px; border-radius: 16px; background: #050a0b; border: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: #cfe0da; overflow: auto; white-space: pre; }
.k { color: #7ee8c3; } .s { color: #f5d38e; } .v { color: #b9c7ff; } .c { color: #72827b; } .ok { color: var(--ok); font-weight: 600; }

.linkui { display: grid; gap: 8px; }
.linkui__field, .linkui__url { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.linkui__field b { color: var(--ink); font-size: 15px; padding-right: 8px; }
.linkui__url .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.linkui__copy { flex: none; height: 34px; display: grid; place-items: center; padding: 0 14px; border-radius: 9px; background: var(--act-bg); color: var(--act-ink); font-weight: 600; }

.wooui { background: #fff; color: #1e1e1e; border-radius: 14px; box-shadow: 0 0 0 1px var(--mock-ring); padding: 12px; display: grid; gap: 8px; font-size: 13px; }
.wooui__row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e4e4e7; border-radius: 10px; }
.wooui__row--muted { color: #71717a; }
.wooui__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #a1a1aa; flex: none; }
.wooui__radio.on { border: 5px solid #7f54b3; }
.wooui__coins { margin-left: auto; display: flex; }
.wooui__coins img { margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.wooui__btn { height: 38px; display: grid; place-items: center; border-radius: 8px; background: #7f54b3; color: #fff; font-weight: 600; }

.testui { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed var(--warn-line); background: var(--warn-soft); }
.testui__bar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); }
.testui__row { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--line); font-size: 13.5px; }
.testui__btn { height: 40px; display: grid; place-items: center; border-radius: 10px; background: #f5b84a; color: #2a1a00; font-weight: 650; font-size: 14px; }

.ticks { display: grid; gap: 10px; margin-top: 20px; }
.ticks li { position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--em-soft-2) var(--tick-ic) center/16px no-repeat; }
.ticks--lg li { font-size: 15.5px; }

.wdui { display: grid; gap: 10px; padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); max-width: 460px; justify-self: end; width: 100%; }
.wdui__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wdui__head b { font-size: 17px; }
.wdui__field { display: grid; gap: 6px; }
.wdui__val { display: flex; align-items: center; gap: 10px; height: var(--control-h); padding: 0 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--line-2); font-size: 14px; }
.wdui__val em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); }
.wdui__fee { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); padding: 4px 2px; }
.wdui__fee .mono { color: var(--ink-2); }
.wdui__btn { height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--act-bg); color: var(--act-ink); font-weight: 650; }

/* ---------- how ---------- */
.how { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); }
.how__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.steps { position: relative; display: grid; gap: 8px; margin-top: 40px; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 20px 20px 20px 16px; border-radius: 20px; border: 1px solid transparent; transition: background-color .5s, border-color .5s, opacity .5s; opacity: .5; }
.step.is-on { opacity: 1; background: var(--surface); border-color: var(--line); }
.step__n { font-size: 14px; color: var(--mint); padding-top: 4px; }
.step h3 { font-size: 22px; letter-spacing: -0.025em; }
.step p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.how__bar { display: none; }
.how__stage { position: relative; height: 560px; display: grid; place-items: center; }
.how__glow { position: absolute; inset: 10% 10%; background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(20px); }
.scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transition: opacity .6s var(--ease-soft-out), transform .9s var(--ease-out), visibility 0s .6s; }
.scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease-soft-out), transform .9s var(--ease-out), visibility 0s; }
.term { width: min(540px, 100%); border-radius: 18px; background: #050a0b; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--ink-3); }
.term pre { margin: 0; padding: 18px 20px; font-size: 13px; line-height: 1.75; color: #cfe0da; white-space: pre-wrap; overflow-wrap: anywhere; }
.resp { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--em-soft); border: 1px solid var(--em-line); font-size: 13px; color: var(--ink-2); }
.phone { position: relative; width: 280px; height: 560px; padding: 12px; border-radius: 46px; background: linear-gradient(145deg, #2a3532, #0b1110 40%, #1b2422); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, var(--shadow-2), 0 0 80px -20px rgba(16,227,154,.4); }
.phone__notch { position: absolute; left: 50%; top: 22px; translate: -50% 0; width: 90px; height: 26px; border-radius: 20px; background: #000; z-index: 2; }
.phone__screen { height: 100%; border-radius: 36px; background: var(--light); color: var(--light-ink); display: grid; justify-items: center; align-content: start; gap: 10px; padding: 60px 20px 20px; text-align: center; }
.ph__head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ph__head .co__avatar { width: 26px; height: 26px; font-size: 9px; }
.ph__usd { font-size: 30px; font-weight: 600; letter-spacing: -0.04em; }
.ph__qr { width: 168px; height: 168px; padding: 10px; background: #fff; border-radius: 14px; border: 1px solid var(--light-line); }
.ph__qr svg { width: 100%; height: 100%; }
.ph__amt { font-size: 18px; font-weight: 600; }
.chip--light { background: #fdf6e3; }
.ph__bar { width: 100%; }
.ph__bar i { transform: scaleX(.97); }
.ph__note { font-size: 12px; color: var(--light-ink-2); }
.credit { display: grid; gap: 4px; min-width: min(460px, 100%); padding: 26px 28px; border-radius: 22px; background: var(--credit-bg); border: 1px solid var(--credit-line); box-shadow: var(--shadow-2); }
.credit__big { font-size: 48px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.credit__delta { color: var(--mint); font-size: 14px; }
.whlog { display: grid; gap: 6px; width: min(460px, 100%); padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--card-shadow); }
.whlog__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.whlog__row:first-child { background: var(--em-soft); }
.whlog__row .mono:last-child { color: var(--ink-3); font-size: 12px; }
.whlog__row--dim { color: var(--ink-2); }
.whlog__sig { margin-top: 4px; padding: 8px 10px; background: var(--field); color: var(--ink-3); font-size: 11.5px; border-radius: 8px; overflow-wrap: anywhere; }

.how__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); border-radius: 2px; }
.how__copy { position: relative; }
.how__copy .how__bar { left: -24px; top: 160px; }
.how__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--em), var(--gold)); transform-origin: top; transform: scaleY(0); }
/* stacked version (phones, lite, static): each scene under its step */
.how--stacked .how__stage { display: none; }
.how--stacked .how__in { grid-template-columns: 1fr; }
.how--stacked .step { opacity: 1; background: var(--surface); border-color: var(--line); gap: 12px 24px; }
.how--stacked .scene { position: relative; inset: auto; grid-column: 1 / -1; opacity: 1; visibility: visible; transform: none; margin-top: 12px; padding: 24px 0 8px; }
.how--stacked .steps { gap: 16px; }
@media (min-width: 1024px) {
  .how--stacked .step { grid-template-columns: 52px minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; padding: 28px; }
  .how--stacked .scene { grid-column: 3; grid-row: 1; margin: 0; padding: 0; }
  .how--stacked .phone { transform: scale(.8); margin: -56px 0; }
}
@media (max-width: 1023px) {
  .how--stacked .phone { transform: scale(.82); margin: -50px 0; }
}

/* ---------- showcase ---------- */
.showcase { padding-bottom: clamp(60px, 8vw, 110px); overflow-x: clip; }
.showcase__frame { perspective: 1800px; }
.board { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-radius: 26px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--board-shadow); overflow: hidden; transform-origin: 50% 0; }
.board__side { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 20px 14px; border-right: 1px solid var(--line); background: var(--panel-2); }
.board__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.board__brand .brand__ic { flex: none; width: 24px; height: 24px; }
.board__side nav { display: grid; gap: 2px; align-content: start; }
.board__side nav span { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.board__side nav span.on { background: var(--em-soft); color: var(--ink); }
.board__side svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.board__side nav span.on svg { stroke: var(--mint); }
.board__mode { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--field); font-size: 13px; color: var(--ink-2); }
.sw { width: 30px; height: 18px; border-radius: 10px; background: var(--em); position: relative; }
.sw i { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.board__main { display: grid; gap: 16px; padding: 22px; min-width: 0; }
.board__top { display: flex; align-items: center; gap: 14px; }
.board__top div { display: grid; }
.board__top b { font-size: 22px; letter-spacing: -0.03em; }
.board__top .tag { margin-left: 8px; }
.board__btn { margin-left: auto; height: 38px; display: grid; place-items: center; padding: 0 16px; border-radius: 10px; background: var(--act-bg); color: var(--act-ink); font-weight: 600; font-size: 14px; }
.board__kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px; }
.kpi { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--panel-soft); border: 1px solid var(--line); }
.kpi b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.kpi--main { background: var(--kpi-main); border-color: var(--kpi-main-line); }
.kpi--main b { font-size: 30px; }
.kpi__sub { font-size: 12px; color: var(--ink-3); }
.board__mid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.panel { padding: 16px; border-radius: 16px; background: var(--panel-soft); border: 1px solid var(--line); min-width: 0; }
.panel__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.seg span { padding: 3px 10px; border-radius: 6px; font-size: 12px; color: var(--ink-3); }
.seg .on { background: var(--seg-on); box-shadow: var(--seg-on-shadow); color: var(--ink); }
.panel--chart { display: flex; flex-direction: column; }
.chart { width: 100%; height: 180px; flex: 1; min-height: 150px; }
.chart__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.bals { display: grid; gap: 4px; }
.bals li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; font-size: 13.5px; }
.bals li em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.bals .ic__net { box-shadow: 0 0 0 1.5px var(--ring); }
.tbl { display: grid; font-size: 13.5px; }
.tr { display: grid; grid-template-columns: 80px minmax(0, 1.6fr) 1fr 1.1fr 70px; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); }
.tr.th { border-top: 0; color: var(--ink-3); font-size: 12px; padding-top: 0; }
.tr > span:nth-child(3), .tr > span:nth-child(5) { text-align: right; }
.tr.th > span:nth-child(3), .tr.th > span:nth-child(5) { text-align: right; }
.pw { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw img { flex: none; }
.dashpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.dashpoints li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.dashpoints b { font-size: 17px; letter-spacing: -0.02em; }
.dashpoints span { color: var(--ink-2); font-size: 15px; }

/* ---------- security ---------- */
.security { overflow: hidden; isolation: isolate; background: var(--sec-bg); }
.security__bg { position: absolute; inset: 0; z-index: -1; }
.security__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 30%; opacity: var(--sec-img-op); filter: var(--img-filter); }
.security__bg::after { content: ''; position: absolute; inset: 0; background: var(--sec-veil); }
.flow { position: relative; margin-bottom: 56px; }
.flow__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 48px; }
.flow__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
html[data-motion="static"] .flow__draw { stroke-dashoffset: 0; }
.flow__nodes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.flow__nodes li { display: grid; gap: 6px; justify-items: center; text-align: center; }
.flow__nodes i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--node-bg); border: 1.5px solid var(--em-line-2); color: var(--mint); font: 600 15px/1 var(--mono); font-style: normal; box-shadow: var(--node-glow); margin-bottom: 8px; }
.flow__nodes b { font-size: 15.5px; letter-spacing: -0.01em; }
.flow__nodes span { font-size: 14px; color: var(--ink-2); max-width: 22ch; line-height: 1.45; }
.flow__end i { background: linear-gradient(135deg, var(--em), var(--gold)); color: #001a0e; border-color: transparent; }
.secgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.secgrid article { padding: 28px; background: var(--secgrid-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.secgrid h3 { font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.secgrid h3::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--em); box-shadow: var(--sq-glow); flex: none; }
.secgrid p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* ---------- developers ---------- */
.dev { overflow: hidden; isolation: isolate; }
.dev__bg { position: absolute; inset: 0; z-index: -1; }
.dev__bg img { width: 100%; height: 100%; object-fit: cover; opacity: var(--dev-img-op); filter: var(--img-filter); }
.dev__bg::after { content: ''; position: absolute; inset: 0; background: var(--dev-veil); }
.dev__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.dev__copy h2 { font-size: clamp(32px, 3.6vw, 50px); }
.dev__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.code { border-radius: 22px; background: rgba(4, 8, 9, 0.94); border: 1px solid var(--line-2); box-shadow: var(--shadow-2), 0 0 100px -30px rgba(16,227,154,.35); overflow: hidden; min-width: 0; }
.code__tabs { display: flex; align-items: center; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.code__tabs::-webkit-scrollbar { display: none; }
.code__tabs [role="tab"] { flex: none; height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: none; color: var(--ink-3); font-size: 14px; font-weight: 500; cursor: pointer; transition: color .2s, background-color .2s; }
.code__tabs [role="tab"]:hover { color: var(--ink); }
.code__tabs [role="tab"][aria-selected="true"] { background: rgba(16,227,154,.1); color: var(--mint); }
.code__copy { margin-left: auto; flex: none; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.code__copy:hover { color: var(--ink); }
.code__panels { min-height: 430px; overflow-x: auto; overflow-y: hidden; }
.code__panels pre { margin: 0; padding: 22px 24px; font-size: 13.5px; line-height: 1.75; color: #cfe0da; white-space: pre; tab-size: 2; min-height: 430px; }
.integ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(56px, 7vw, 96px); }
.integ li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 20px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.integ__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--em-soft); color: var(--mint); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.integ__ic--woo { background: var(--woo-soft); color: var(--woo-ink); }
.integ b { font-size: 17px; letter-spacing: -0.02em; }
.integ li > span:not(.integ__ic):not(.tag) { color: var(--ink-2); font-size: 14.5px; }
.integ a { margin-top: 4px; font-size: 14px; color: var(--mint); font-weight: 500; }
.integ a::after { content: ' →'; }
.integ--soon { border-style: dashed !important; }
.integ--soon .integ__ic { background: var(--surface-2); color: var(--ink-2); }
.integ .tag { width: max-content; margin-top: 4px; }

/* ---------- pricing ---------- */
.price { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 120% at 0% 50%, #073d2a 0%, transparent 60%), linear-gradient(120deg, #0b5c40 0%, #12b07a 45%, #3ff0b4 100%);
  color: #02140c; box-shadow: var(--price-shadow); }
.price__img { position: relative; height: 100%; min-height: 520px; }
.price__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.price__copy { padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px) clamp(36px, 5vw, 72px) 24px; }
.price__big { font-size: clamp(44px, 5.6vw, 84px) !important; letter-spacing: -0.05em; line-height: .95; font-weight: 650; }
.price__num { display: block; font-size: 2em; letter-spacing: -0.06em; font-weight: 700; color: #02140c; line-height: .9; font-variant-numeric: tabular-nums; }
.price__sub { margin-top: 14px; font-size: 19px; color: #053a26; font-weight: 500; }
.price__list { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(2,20,12,.18); }
.price__list li { position: relative; padding-left: 28px; font-size: 15.5px; color: #053a26; line-height: 1.5; }
.price__list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #02140c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%235cf5c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.price__list b { color: #02140c; }
.price__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
.price__fine { font-size: 13.5px; color: #064b31; max-width: 32ch; }
.price :focus-visible { outline-color: #02140c; }

/* ---------- faq ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head a { color: var(--mint); }
.faq__list { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 550; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: no-repeat center/14px var(--plus-ic); transition: transform .35s var(--ease-soft-out), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--em-soft); }
.faq summary:hover { color: var(--mint); }
.faq details p { padding: 0 52px 22px 0; color: var(--ink-2); font-size: 16px; }
.faq details[open] p { animation: faqIn .45s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- cta ---------- */
.cta { position: relative; padding: clamp(100px, 13vw, 180px) 0; text-align: center; overflow: hidden; isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; opacity: var(--cta-img-op); filter: var(--img-filter); }
.cta__bg::after { content: ''; position: absolute; inset: 0; background: var(--cta-veil); }
.cta h2 { font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.05em; line-height: 1; max-width: 14ch; margin: 0 auto; }
.cta p { max-width: 560px; margin: 24px auto 0; color: var(--cta-ink-2); font-size: 18px; }
.cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- footer ---------- */
.foot { padding: 72px 0 36px; border-top: 1px solid var(--line); background: var(--foot-bg); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.foot__brand p { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; max-width: 34ch; }
.foot__mail { display: inline-block; margin-top: 16px; color: var(--mint); font-size: 15px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot__cols h3 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.foot__cols a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--ink-2); }
.foot__cols a:hover { color: var(--ink); }
.foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .dash--hero { display: none; }
  .stage .co { left: 50%; translate: -50% 0; top: 40px; }
  .co__play { left: 50%; translate: -50% 0; top: 560px; }
  .hook { right: 50%; translate: 50% 0; bottom: 20px; }
  .nets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nets .net--next { grid-column: span 2; }
  .board__kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__signin { display: none; }
  .hero__in { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .hero__copy { max-width: 680px; }
  .stage { height: 660px; max-width: 640px; width: 100%; margin: 0 auto; }
  .dash--hero { display: block; }
  .stage .co { left: 0; translate: none; top: 92px; }
  .co__play { left: 8px; translate: none; top: 610px; }
  .hook { right: 0; translate: none; bottom: 40px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec__head--split { grid-template-columns: 1fr; gap: 0; }
  .sec__head--split .sec__lede { margin-top: 18px; }
  .card--checkout, .card--api, .card--wd { grid-column: span 12; }
  .card--link, .card--woo, .card--test { grid-column: span 6; }
  .card--test { grid-column: span 12; }
  .how__in { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .board__side { display: none; }
  .flow__nodes { grid-template-columns: 1fr; gap: 0; justify-items: start; }
  .flow__nodes li { grid-template-columns: 48px 1fr; justify-items: start; text-align: left; column-gap: 16px; row-gap: 2px; padding-bottom: 22px; position: relative; }
  .flow__nodes li::before { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: linear-gradient(var(--em), var(--em-line)); }
  .flow__nodes li:last-child::before { display: none; }
  .flow__nodes i { grid-row: 1 / 3; margin: 0; }
  .flow__nodes span { max-width: none; }
  .flow__line { display: none; }
  .secgrid { grid-template-columns: 1fr 1fr; }
  .dev__in { grid-template-columns: 1fr; }
  .integ { grid-template-columns: 1fr 1fr; }
  .price { grid-template-columns: 1fr; }
  .price__img { min-height: 280px; height: 280px; }
  .price__img img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .price__copy { padding: 8px clamp(24px, 5vw, 56px) clamp(36px, 5vw, 56px); }
  .faq__in { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .foot__top { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero { padding-top: 96px; }
  .hero__img { object-position: 50% 30%; opacity: .7; }
  .hero__veil { background: linear-gradient(180deg, rgba(5,8,10,.75) 0%, rgba(5,8,10,.55) 45%, rgba(5,8,10,.3) 70%, var(--bg) 100%); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .stage { height: auto; perspective: none; display: grid; justify-items: center; padding-bottom: 24px; }
  .stage .co { position: relative; left: auto; top: auto; width: min(372px, 100%); }
  .dash--hero { display: none; }
  .hook { position: relative; right: auto; bottom: auto; margin-top: -18px; width: min(340px, 94%); }
  .stage__halo { width: 420px; height: 420px; translate: -50% -50%; }
  .facts { grid-template-columns: 1fr; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
  .facts li { padding: 18px 20px; grid-template-columns: 88px 1fr; align-items: center; gap: 14px; }
  .facts b { font-size: 22px; }
  .nets { grid-template-columns: 1fr; }
  .nets .net--next { grid-column: auto; }
  .card--link, .card--woo { grid-column: span 12; }
  .card--checkout, .card--wd { grid-template-columns: 1fr; }
  .mini-co { transform: none; }
  .wdui { justify-self: stretch; }
  .how__stage { height: 520px; }
  .phone { transform: scale(.92); }
  .term pre { font-size: 12px; padding: 14px; }
  .board__main { padding: 14px; }
  .board__top .tag { display: none; }
  .board__mid { grid-template-columns: 1fr; }
  .kpi--main b { font-size: 24px; }
  .kpi b { font-size: 20px; }
  .tr { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .tr > span:nth-child(2) { display: none; }
  .tr > span:nth-child(5) { display: none; }
  .tr > span:nth-child(3) { text-align: left; }
  .tr > span:nth-child(4) { text-align: right; }
  .dashpoints { grid-template-columns: 1fr; gap: 20px; }
  .secgrid { grid-template-columns: 1fr; }
  .secgrid article { padding: 22px; }
  .integ { grid-template-columns: 1fr; }
  .code__panels { height: 380px; }
  .code__panels pre { font-size: 12px; padding: 16px; }
  .price { border-radius: 26px; }
  .faq summary { font-size: 16.5px; }
  .faq details p { padding-right: 0; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .co__play { position: relative; left: auto; top: auto; margin-top: 14px; }
  .net__spec { grid-template-columns: 76px 1fr; align-items: start; }
  .net { gap: 14px; }
  .sec h2 br { display: none; }
  .chart { height: 120px; }
  .price { background: linear-gradient(180deg, #0b6b45 0%, #12a874 40%, #3ff0b4 100%); }
}
@media (max-width: 400px) {
  .opts em { font-size: 10px; }
  .co__steps button span { font-size: 10px; }
}

/* static tier: everything visible, nothing moving */
html[data-motion="static"] *, html[data-motion="static"] *::before, html[data-motion="static"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   Phones and touch devices (default motion tier, what real visitors get).
   No pins or scrubs (main.js), content visible before JS, short reveals,
   one product visual in the hero, tighter rhythm, 13 px minimum text.
   ====================================================================== */
html:not(.lenis) section[id] { scroll-margin-top: 80px; }
html[data-touch="1"] section[id] { scroll-margin-top: 72px; }
.bento__dots { display: none; }

/* light reveals for touch: start early, finish in ~0.35 s, never needed for visibility without JS */
html[data-touch="1"] .rv { opacity: 0; transform: translateY(14px); }
html[data-touch="1"] .rv.rv-in { opacity: 1; transform: none; transition: opacity .3s var(--ease-soft-out), transform .35s var(--ease-out); }
html[data-touch="1"] .flow__draw { stroke-dashoffset: 0; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html[data-touch="1"]:not([data-motion="static"]) .hero__copy > *,
html[data-touch="1"]:not([data-motion="static"]) .stage .co { animation: riseIn .45s var(--ease-out) both; }
html[data-touch="1"] .hero__copy > :nth-child(2) { animation-delay: .04s; }
html[data-touch="1"] .hero__copy > :nth-child(3) { animation-delay: .08s; }
html[data-touch="1"] .hero__copy > :nth-child(4) { animation-delay: .12s; }
html[data-touch="1"] .hero__copy > :nth-child(5) { animation-delay: .16s; }
html[data-touch="1"] .stage .co { animation-delay: .18s; }

@media (max-width: 767px) {
  /* rhythm */
  .sec { padding: 48px 0; }
  .sec__head { margin-bottom: 28px; }
  .sec h2 { font-size: clamp(30px, 8.4vw, 36px); line-height: 1.06; }
  .sec__lede { margin-top: 14px; font-size: 16px; }
  .sec__head--split .sec__lede { margin-top: 14px; }
  .eyebrow { margin-bottom: 14px; }
  code { font-size: max(13px, .88em); }
  .lbl { font-size: 13px; }
  .tag { height: 24px; font-size: 13px; letter-spacing: .02em; }
  .st { height: 24px; font-size: 13px; }

  /* nav */
  .nav__in { height: 64px; gap: 12px; }
  /* 44 px hit areas without moving anything: the bar centres the brand; the 38 px CTA gets an invisible 4 px band above and below */
  .nav .brand { min-height: 44px; }
  .nav__cta .btn--sm { position: relative; }
  .nav__cta .btn--sm::after { content: ''; position: absolute; inset: -4px 0; }
  .menu { inset: 64px 0 0 0; max-height: none; background: var(--bg); overscroll-behavior: contain; }
  .menu nav a { padding: 12px 4px; font-size: 17px; }

  /* hero: copy + CTAs in the first screen, then one product visual that fits */
  .hero { padding-top: 84px; }
  .hero__in { gap: 28px; padding-bottom: 20px; }
  .hero__title { margin-top: 16px; font-size: clamp(38px, 11vw, 46px); line-height: 1.02; }
  .hero__lede { margin-top: 16px; font-size: 16px; line-height: 1.55; }
  .hero__ctas { margin-top: 22px; gap: 10px; }
  .hero__meta { margin-top: 18px; }
  .stage { padding-bottom: 0; }
  .stage__halo { width: 340px; height: 340px; }
  .stage .co { width: 100%; max-width: 400px; }
  .co__play { margin-top: 12px; min-height: 44px; font-size: 13px; padding: 0 14px 0 12px; }
  .hook { position: absolute; left: 50%; right: auto; bottom: 64px; translate: -50% 0; margin: 0; width: min(330px, calc(100% - 24px)); }
  .facts { grid-template-columns: 1fr 1fr; margin-bottom: 8px; border-radius: 18px; }
  .facts li { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px; align-items: start; }
  .facts li + li { border-top: 0; }
  .facts li:nth-child(even) { border-left: 1px solid var(--line); }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .facts b { font-size: 22px; }
  .facts span { font-size: 13.5px; line-height: 1.45; }

  /* checkout widget: same product, readable sizes */
  .co { font-size: 14px; }
  .co__head { padding: 12px 14px; }
  .co__avatar { font-size: 13px; }
  .co__merchant b { font-size: 14px; }
  .co__merchant small, .co__desc, .co__usd small, .pay__amt small, .lbl, .addr, .timer__row,
  .timer__note, .done__s, .conf__tx, .conf__count em, .conf__rpc li, .conf__badge { font-size: 13px; }
  .co__tag { font-size: 13px; letter-spacing: .02em; }
  .co__steps { padding: 6px 6px 10px; }
  .co__steps::before, .co__steps::after { top: 18px; }
  .co__steps button, .co__steps button span { font-size: 13px; }
  .co__steps button { min-height: 48px; align-content: start; }
  .co__steps i { width: 26px; height: 26px; font-size: 13px; }
  .co__body { height: 344px; }
  .co__pane { padding: 12px 14px; }
  .co__h { font-size: 14px; }
  .opts li { padding: 7px 8px; column-gap: 7px; }
  .opts b { font-size: 13px; }
  .opts em, .opts .mono { font-size: 13px; }
  .pay__info .lbl { font-size: 13px; margin-top: 2px; }
  .pay { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; }
  .qr { width: 124px; height: 124px; }
  .chip { font-size: 13px; height: 26px; }
  .hook__t, .hook__s { font-size: 13px; }

  /* coins & networks: compact cards */
  .coinrow { margin-bottom: 28px; }
  .coin3d { width: clamp(46px, 13vw, 60px); }
  .coin3d--hero { width: clamp(70px, 20vw, 88px); }
  .nets { gap: 10px; }
  .net { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 10px; padding: 16px; border-radius: 18px; }
  .net__top img { width: 32px; height: 32px; }
  .net__top span { font-size: 13px; }
  .net__coins { justify-content: flex-end; }
  .net__spec { grid-column: 1 / -1; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .net__spec dt { font-size: 13px; }
  .net__spec dd.mono { font-size: 24px; }
  .net__note { grid-column: 1 / -1; font-size: 13px; padding-top: 10px; }
  .net--next { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; }
  .net--next .net__plus { grid-row: 1 / 3; }
  .net--next p { font-size: 14px; }

  /* products: a swipeable row with the next card peeking */
  .bento { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .bento::-webkit-scrollbar { display: none; }
  .bento:focus-visible { outline-offset: -2px; border-radius: 0; }
  .bento .card { flex: 0 0 86%; scroll-snap-align: start; grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 20px; border-radius: 22px; }
  .card h3 { font-size: 21px; }
  .card__copy p { font-size: 15px; }
  .mini-co { padding: 12px; font-size: 13px; }
  .mini-co__top .co__avatar { width: 28px; height: 28px; font-size: 13px; }
  .mini-co__grid span:nth-child(n+4) { display: none; }
  .mini-co__foot { font-size: 13px; }
  .snip { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; padding: 14px; }
  .testui__bar { font-size: 13px; }
  .card--wd .wdui { display: none; }
  .bento__dots { display: flex; justify-content: center; gap: 0; margin-top: 6px; }
  .bento__dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .bento__dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--dot-2); transition: width .3s var(--ease-out), background-color .3s; }
  .bento__dots button[aria-current="true"] i { width: 22px; background: var(--em); }

  /* how it works: stacked, compact scenes */
  .steps { margin-top: 24px; }
  .how--stacked .steps { gap: 12px; }
  .how--stacked .step { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 8px; padding: 18px 16px; border-radius: 18px; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 15px; }
  .how--stacked .scene { margin-top: 8px; padding: 12px 0 0; gap: 10px; justify-items: stretch; }
  .term__bar { font-size: 13px; height: 36px; }
  .term pre { font-size: 13px; line-height: 1.55; padding: 12px 14px; }
  /* step 2's phone repeats the hero checkout's Pay step shown at the top of the page */
  .how--stacked .scene[data-scene="1"] { display: none; }
  .resp { flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; }
  .how--stacked .phone { transform: none; margin: 0 auto; width: 236px; height: auto; border-radius: 38px; padding: 10px; }
  .phone__notch { top: 18px; width: 72px; height: 22px; }
  .phone__screen { border-radius: 30px; padding: 46px 16px 18px; gap: 8px; }
  .ph__head { font-size: 14px; }
  .ph__head .co__avatar { font-size: 13px; }
  .ph__usd { font-size: 26px; }
  .ph__qr { width: 132px; height: 132px; padding: 8px; }
  .ph__amt { font-size: 17px; }
  .ph__note { font-size: 13px; }
  .credit { min-width: 0; padding: 18px 20px; border-radius: 18px; }
  .credit__big { font-size: 38px; }
  .whlog { width: 100%; padding: 10px; }
  .whlog__row { gap: 10px; padding: 7px 8px; }
  .whlog__row .mono:last-child { font-size: 13px; }
  .whlog__sig { font-size: 13px; }

  /* dashboard: KPIs and the live invoice table; chart and balance list are covered by the points below */
  .showcase { padding-bottom: 48px; }
  .tbl .tr:nth-child(n+5) { display: none; }
  .board { border-radius: 20px; }
  .board__main { gap: 12px; }
  .board__top b { font-size: 20px; }
  .board__btn { height: 40px; font-size: 14px; }
  .board__kpis { gap: 8px; }
  .kpi { padding: 12px; gap: 4px; border-radius: 14px; }
  .kpi .lbl, .kpi__sub { font-size: 13px; line-height: 1.35; }
  .board__mid { display: none; }
  .panel { padding: 12px; }
  .panel__h { font-size: 14px; margin-bottom: 6px; }
  .tbl { font-size: 14px; }
  .tr { padding: 9px 4px; }
  .tr.th { font-size: 13px; }
  .dashpoints { margin-top: 28px; gap: 16px; }
  .dashpoints li { padding-top: 14px; gap: 4px; }
  .dashpoints span { font-size: 14.5px; }

  /* security */
  .flow { margin-bottom: 28px; }
  .flow__nodes li { padding-bottom: 16px; }
  .flow__nodes i { width: 42px; height: 42px; }
  .flow__nodes li { grid-template-columns: 42px 1fr; }
  .flow__nodes li::before { left: 20px; top: 42px; }
  .flow__nodes b { font-size: 15.5px; }
  .flow__nodes span { font-size: 13.5px; }
  .secgrid article { padding: 14px 16px; }
  .secgrid h3 { font-size: 16.5px; }
  .secgrid p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }

  /* developers */
  .dev__links { margin-top: 22px; }
  .dev__links .btn { flex: 1 1 auto; }
  .code { border-radius: 18px; }
  .code__tabs [role="tab"] { height: 44px; min-width: 44px; padding: 0 12px; }
  .code__copy { height: 44px; min-width: 44px; }
  .code__panels { height: 300px; }
  .code__panels pre { font-size: 13px; padding: 14px; line-height: 1.6; }
  .integ { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
  .integ li { padding: 16px 14px 8px; gap: 4px; border-radius: 16px; }
  .integ__ic { width: 36px; height: 36px; margin-bottom: 4px; font-size: 13px; border-radius: 10px; }
  .integ b { font-size: 16px; }
  .integ li > span:not(.integ__ic):not(.tag) { font-size: 14px; line-height: 1.45; }
  .integ a { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
  .integ .tag { margin: 8px 0 10px; }

  /* pricing */
  .price__img { min-height: 0; height: 150px; }
  .price__img img { object-position: 30% 38%; }
  .price__copy { padding: 0 22px 28px; margin-top: -12px; position: relative; }
  .price__big { font-size: 40px !important; }
  .price__sub { font-size: 17px; margin-top: 10px; }
  .price__list { margin-top: 20px; padding-top: 18px; gap: 10px; }
  .price__list li { font-size: 15px; }
  .price__ctas { margin-top: 22px; }
  .price__ctas .btn { width: 100%; }
  .price__fine { font-size: 13.5px; max-width: none; }

  /* faq */
  .faq__in { gap: 20px; }
  .faq__head a { display: inline-block; padding: 10px 0; }
  .faq summary { min-height: 52px; padding: 10px 0; gap: 14px; }
  .faq details p { font-size: 15px; padding-bottom: 18px; }

  /* cta + footer */
  .cta { padding: 72px 0 80px; }
  .cta h2 { font-size: clamp(36px, 10vw, 44px); }
  .cta p { margin-top: 16px; font-size: 16px; }
  .cta__btns { margin-top: 26px; }
  .foot { padding: 44px 0 28px; }
  .foot__top { gap: 28px; }
  .foot__brand p { font-size: 14px; margin-top: 12px; }
  .foot .brand { min-height: 44px; margin-block: -5px; }  /* 44 px hit area, same footprint as the 34 px logo */
  .foot__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; }
  .foot__cols { gap: 20px 16px; }
  .foot__cols h3 { font-size: 13px; margin-bottom: 4px; }
  .foot__cols a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 14.5px; line-height: 1.3; }
  .foot__bot { margin-top: 24px; padding-top: 18px; }
}

/* ======================================================================
   Elevate pass (2026-10-24): rhythm, live-network row, quote ticker,
   pinned how-it-works chrome, security lighting, scroll progress.
   ====================================================================== */

/* nav: thin scroll progress under the bar */
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-soft-out); }
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--em-600), var(--em) 45%, var(--mint) 80%, var(--gold)); transform-origin: left center; transform: scaleX(0); }
html[data-motion="static"] .nav__progress { display: none; }

/* hero: networks live today, instead of repeating the fee facts */
.hero__live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 30px; }
.hero__live-l { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hero__live-l i { width: 6px; height: 6px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 3px rgba(16,227,154,.18); }
.hero__live ul { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__live li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 7px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.hero__live img { width: 18px; height: 18px; }

/* facts: unit text inside the number */
.facts b small { font-size: .52em; font-weight: 550; letter-spacing: -0.015em; color: var(--ink-2); margin-left: 2px; }
.facts b span { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }

/* quote ticker: the eight ways to pay a $249.00 invoice */
.ticker { position: relative; padding: clamp(28px, 3vw, 44px) 0 0; }
.ticker__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker__track { display: flex; width: max-content; animation: tickerMove 64s linear infinite; }
.ticker--js .ticker__track { animation: none; }
.ticker.is-paused .ticker__track { animation-play-state: paused; }
@media (hover: hover) { .ticker__track:hover { animation-play-state: paused; } }
@keyframes tickerMove { to { transform: translateX(-50%); } }
.ticker__row { display: flex; gap: 12px; padding-right: 12px; flex: none; }
.ticker__row li { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px 0 14px; border-radius: 16px; white-space: nowrap;
  background: var(--card-soft); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.ticker__row li > img, .ticker__row .ic { width: 22px; height: 22px; flex: none; }
.ticker__row b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.ticker__row em { font-style: normal; font-size: 13.5px; color: var(--ink-3); }
.ticker__row .mono { margin-left: 8px; font-size: 15px; color: var(--ink); }
.ticker__row .ic__net { box-shadow: 0 0 0 1.5px var(--ring-2); }
.ticker__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.ticker__lbl { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); min-width: 0; }
.ticker__lbl .tag { flex: none; }
.ticker__short { display: none; }
.ticker__pause { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ghost-bg); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s; }
.ticker__pause svg { fill: var(--mint); }
.ticker__pause:hover { color: var(--ink); border-color: var(--em-line-2); }
.ticker__pause[aria-pressed="true"] .p2 { display: none; }
.ticker__pause[aria-pressed="true"] .p1 { width: 0; }
.ticker__pause[aria-pressed="true"] svg { background: no-repeat center/10px var(--play-ic); }
html[data-motion="static"] .ticker__track { animation: none; }
html[data-motion="static"] .ticker__row[aria-hidden="true"], html[data-motion="static"] .ticker__pause { display: none; }
html[data-motion="static"] .ticker__view { overflow-x: auto; scrollbar-width: none; }
.coins { padding-top: clamp(56px, 5.6vw, 88px); }

/* how it works, pinned (desktop full tier): per-step progress and a counter */
.step { position: relative; }
.step__bar { display: none; position: absolute; left: 68px; right: 20px; bottom: 12px; height: 2px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.step__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--em), var(--mint)); transform-origin: left center; transform: scaleX(0); }
.how__count { display: none; position: absolute; right: 8px; top: 8px; z-index: 2; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.how__count b { font-size: 15px; color: var(--ink); font-weight: 600; }
.how--pinned .step__bar, .how--pinned .how__count, .how--pinned .how__bar { display: block; }
.how--pinned .scene { transition: none; }
/* pinned only (main.js wraps each title): the step's button looks exactly like the plain title, and its hit area and focus ring cover the whole step */
.step__btn { -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.step__btn::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.step__btn:focus-visible { outline: none; }
.step__btn:focus-visible::after { outline: 2px solid var(--mint); outline-offset: 3px; }
.how--pinned .step { transition: background-color .45s var(--ease-soft-out), border-color .45s var(--ease-soft-out), opacity .45s var(--ease-soft-out); }

/* security: nodes light up as the screening path reaches them (desktop full tier) */
.flow--live .flow__nodes li { opacity: .38; transition: opacity .45s var(--ease-soft-out); }
.flow--live .flow__nodes li i { box-shadow: none; border-color: var(--line-3); color: var(--ink-3); transition: box-shadow .45s var(--ease-soft-out), border-color .45s var(--ease-soft-out), color .45s; }
.flow--live .flow__nodes li.is-lit { opacity: 1; }
.flow--live .flow__nodes li.is-lit i { border-color: var(--em-line-2); color: var(--mint); box-shadow: var(--node-glow); }
.flow--live .flow__nodes li.flow__end.is-lit i { color: #001a0e; }

/* pricing: the colour field opens as it arrives (desktop full tier sets the clip) */
.pricing { padding-top: clamp(24px, 3vw, 48px); }
.price { will-change: auto; }

/* products: soft spotlight that follows the pointer on fine pointers */
@media (hover: hover) and (pointer: fine) {
  .card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .4s var(--ease-soft-out);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%); }
  .card:hover::before { opacity: 1; }
  .card { transition: border-color .4s var(--ease-soft-out); }
  .card:hover { border-color: var(--em-line); }
}

/* phones: compact ticker, tighter rhythm so the page doesn't grow */
@media (max-width: 767px) {
  .sec { padding: 44px 0; }
  .coins { padding-top: 28px; }
  .pricing { padding-top: 16px; }
  .hero__live { margin-top: 18px; gap: 8px 10px; }
  .hero__live-l { font-size: 13px; letter-spacing: .04em; }
  .hero__live li { height: 30px; font-size: 13px; padding: 0 10px 0 6px; }
  .hero__live img { width: 16px; height: 16px; }
  .facts { margin-bottom: 0; }
  .facts b small { font-size: .6em; }
  .sec { padding: 40px 0; }
  .ticker { padding-top: 14px; }
  .ticker__view { margin-right: 52px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 88%, transparent); }
  .ticker__track { animation-duration: 52s; }
  .ticker__row { gap: 8px; padding-right: 8px; }
  .ticker__row li { height: 44px; padding: 0 14px 0 10px; gap: 8px; border-radius: 14px; }
  .ticker__row b, .ticker__row .mono { font-size: 14px; }
  .ticker__row em { font-size: 13px; }
  .ticker__head { display: block; margin-top: 8px; }
  .ticker__lbl { line-height: 1.4; }
  .ticker__long, .ticker__lbl .tag { display: none; }
  .ticker__short { display: inline; font-size: 13px; }
  .ticker__pause { position: absolute; right: calc(var(--gutter) - 4px); top: 14px; min-height: 44px; width: 44px; justify-content: center; padding: 0; }
  .ticker__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .facts li { padding: 14px 16px; }
  .code__panels { overflow: auto; min-height: 0; }
  .code__panels pre { min-height: 100%; }
  .ticker__pause span { font-size: 13px; }
  .code__v { display: none; }
  #t-hook { text-transform: capitalize; }
  .code__tabs [role="tab"] { padding: 0 10px; }
}

/* hero depth on scroll moves the webhook toast through a variable, so its own show/hide transform stays intact */
@media (min-width: 1181px) { .hook { translate: 0 var(--hy, 0px); } }
@media (min-width: 768px) and (max-width: 1180px) { .hook { translate: 50% var(--hy, 0px); } }
@media (min-width: 768px) and (max-width: 1023px) { .hook { translate: 0 var(--hy, 0px); } }
html.js-reveal .hero__title { visibility: hidden; }
.hero__title .line-mask { padding-bottom: .1em; margin-bottom: -.1em; }
html[data-motion="lite"] .flow__draw { stroke-dashoffset: 0; }

/* open menu: no backdrop-filter on the bar (it would become the menu's containing block), solid ground instead */
.nav.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.nav.is-open .nav__progress { opacity: 0; }

/* ---------- try it live: real donation payment links, under the network cards ---------- */
.try { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--try-line); background: var(--try-bg); }
.try__t { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; }
.try__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 4px var(--em-soft-2); }
.try__s { margin-top: 6px; max-width: 62ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.try__btns { flex: none; display: flex; gap: 10px; }
@media (max-width: 767px) {
  .try { flex-direction: column; align-items: stretch; margin-top: 16px; padding: 18px 16px; border-radius: 18px; }
  .try__s { font-size: 14px; }
  .try__btns .btn { flex: 1 1 0; padding: 0 14px; }
}

/* ======================================================================
   Light theme (2026-10-25). Tokens live at the top of this file; the rules
   below only wire SVG paint, image treatment, the hero seam and the toggle.
   ====================================================================== */

/* SVG paint from tokens (CSS beats the presentation attributes in the markup) */
.chart g { stroke: var(--chart-grid); }
.chart__line { stroke: var(--chart-line); }
.chart circle { fill: var(--chart-line); }
#bc stop { stop-color: var(--chart-fill); }
.flow__line path:first-child { stroke: var(--line-2); }
#fg stop:first-child { stop-color: var(--em); }
#fg stop:last-child { stop-color: var(--gold); }

/* photographic backgrounds: each section has a dark render and a light render of the same scene.
   Both <img> are lazy, so only the visible theme's file is fetched; js/theme.js warms the other one
   when the page is idle and waits for it before switching, so a toggle never shows an empty section. */
.security__bg img, .dev__bg img, .cta__bg img { mix-blend-mode: var(--img-blend); }
.bg-light { display: none; }
:root[data-theme="light"] .bg-dark { display: none; }
:root[data-theme="light"] .bg-light { display: block; }
.dev, .cta { background: var(--bg); }

/* dark islands (code panels) sitting on a light page: a soft, ink-coloured shadow instead of black */
:root[data-theme="light"] :is(.term, .code) { box-shadow: 0 30px 70px -34px rgba(12, 20, 18, 0.45), 0 0 0 1px rgba(12, 20, 18, 0.06); }
:root[data-theme="light"] .coin3d__base { -webkit-mask-image: radial-gradient(circle closest-side, #000 90%, transparent 97%); mask-image: radial-gradient(circle closest-side, #000 90%, transparent 97%); }
:root[data-theme="light"] .coin3d { filter: drop-shadow(0 18px 22px rgba(12, 20, 18, 0.18)); }

/* ---------- hero seam: the dark hero settles into the light page ----------
   Owner decision: the hero (and its mockups) stay dark in both themes. In light, the hero gets a
   seam zone under the facts strip where the night picture dissolves through deep emerald into the
   page colour, with a faint horizon glow, instead of a hard edge. */
.hero { background: var(--bg); }
/* spans the hero from its top to the point where the header should turn light: a jump in either direction always crosses it */
.hero__sentinel { position: absolute; left: 0; top: 0; width: 1px; bottom: 36px; pointer-events: none; visibility: hidden; }
:root[data-theme="light"] .hero { padding-bottom: var(--seam); }
:root[data-theme="light"] .hero__sentinel { bottom: calc(var(--seam) * 0.75 + 32px); }
:root[data-theme="light"] .hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; height: calc(var(--seam) + 72px); pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246, 248, 247, 0) 70%, #f6f8f7 100%),
    radial-gradient(ellipse 88% 82% at 50% 100%, #f6f8f7 0%, #f6f8f7 30%, #e6f0eb 44%, #bcd8ca 57%, #74a592 69%, rgba(30, 78, 61, 0.62) 81%, rgba(9, 28, 22, 0) 98%),
    linear-gradient(180deg, rgba(5, 8, 10, 0) 0%, rgba(5, 10, 11, 0.8) 18%, #081713 40%, #0c2620 62%, #2c5a49 84%, #8db3a2 100%);
}

/* ---------- theme toggle (header icon button, same look as the menu button) ---------- */
.nav__theme { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ghost-bg); color: var(--ink-2); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.nav__theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__theme:hover { color: var(--ink); background: var(--ghost-hover); border-color: var(--line-3); }
.nav__theme .i-moon, :root[data-theme="light"] .nav__theme .i-sun { display: none; }
:root[data-theme="light"] .nav__theme .i-moon { display: block; }
@media (max-width: 767px) {
  .nav__cta { gap: 6px; }
}
@media (max-width: 379px) {
  .nav__in { gap: 8px; }
  .nav .brand { gap: 8px; font-size: 17px; }
  .nav__cta .btn--sm { padding: 0 12px; }
}

/* header controls share one height: theme toggle, menu button and the Get started / Dashboard pill */
.nav__cta .btn--sm { --h: 44px; }
/* Narrow phones: the signed-in pill is long in some languages ("Личный кабинет", "Shaxsiy kabinet"). */
@media (max-width: 429px) {
  .nav__in { gap: 8px; }
  .nav__cta .btn--sm { padding: 0 12px; font-size: 13px; white-space: nowrap; }
}
/* Below 380 px the wordmark no longer fits next to four controls: keep the icon (the link has an aria-label). */
@media (max-width: 379px) {
  .nav .brand > span { display: none; }
}

/* ---------- language switcher (js/lang.js; markup written by scripts/build-home-locales.mjs) ----------
   Header: an icon button like the theme toggle (globe + current code) opening a menu of native names.
   Phones: the header has no room, so the languages sit in the mobile menu as 44 px chips instead.
   Both inherit the header's tokens, so they follow the theme and the dark-over-hero state. */
.lang { position: relative; flex: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 12px 0 11px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ghost-bg); color: var(--ink-2); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.lang__btn:hover, .lang.is-open .lang__btn { color: var(--ink); background: var(--ghost-hover); border-color: var(--line-3); }
.lang__globe { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lang__code { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; }
.lang__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 2; min-width: 210px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--menu-bg); box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lang__menu[hidden] { display: none; }
.lang__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 9px; font-size: 14.5px; color: var(--ink); outline: none; }
.lang__opt:hover, .lang__opt:focus-visible { background: var(--ghost-hover); }
.lang__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--mint); }
.lang__name { flex: 1; min-width: 0; }
.lang__c { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.lang__check { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang__opt[aria-checked="true"] { color: var(--mint); font-weight: 600; }
.lang__opt[aria-checked="true"] .lang__check { visibility: visible; }
.menu__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.menu__langs a { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ghost-bg); color: var(--ink-2); font-size: 15px; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.menu__langs a:hover { color: var(--ink); border-color: var(--line-3); }
.menu__langs a[aria-current="true"] { color: var(--ink); border-color: var(--em-line-2); background: var(--em-soft); font-weight: 600; }
@media (max-width: 767px) { .nav__cta .lang { display: none; } }
@media (min-width: 768px) { .menu__langs { display: none; } }

/* ---------- longer translations (ru, uk, uz, kk run 20–35 % longer than English) ---------- */
/* Donation buttons wrap onto their own lines instead of overflowing. */
.try__btns { flex-wrap: wrap; }
@media (max-width: 767px) { .try__btns .btn { flex: 1 1 auto; } }
/* The code tabs scroll sideways on narrow screens; the copy button stays in view at the end. */
.code__copy { position: sticky; inset-inline-end: 0; background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03)), #070c0d; box-shadow: -14px 0 10px -4px rgba(4, 8, 9, 0.94); }
/* Header too narrow for the links in this language (js/lang.js measures it): the menu button takes over,
   exactly as below 1024 px. */
.nav--compact .nav__links, .nav--compact .nav__signin { display: none; }
.nav--compact .nav__burger { display: block; }
/* Hero dashboard rows: "Замовлення #1041" and longer status chips need a little more room than English. */
.dash__list .row { column-gap: 8px; }
/* Translated headlines carry longer words ("Криптовалютамен", "криптовалютою"); a slightly smaller hero
   title keeps the longest word inside the column at every width. */
html:not([lang="en"]) .hero__title { font-size: clamp(38px, 4.6vw, 66px); }
@media (max-width: 767px) { html:not([lang="en"]) .hero__title { font-size: clamp(32px, 9.6vw, 42px); } }
/* WooCommerce mock: a longer "Pay with crypto" wraps; the coin icons keep their size. */
.wooui__row b { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.wooui__coins { flex: none; }
/* Footer links: long single words ("конфиденциальности") hyphenate instead of leaving their column. */
.foot__cols a { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }