/* ==========================================================================
   RoyalNetwork - public site + customer panel
   Design system ported from the approved "royal" preview:
   dark ink base, gold gradient accents, glass panels, mono micro-labels.
   Typography: Space Grotesk (headings) - Manrope (body) - Vazirmatn (data/labels)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --bg: #08090b;
    --bg-soft: #0d0e12;
    --panel: rgba(20, 21, 25, .78);
    --panel-solid: #121318;
    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .055);
    --line-gold: rgba(246, 201, 91, .34);
    --gold: #f3c85c;
    --gold-2: #ffe7a3;
    --gold-dark: #9f7020;
    --ink: #f7f4eb;
    --muted: #a2a3aa;
    --muted-2: #777a83;
    --green: #83dda8;
    --ok: #83dda8;
    --warn: #f3c85c;
    --err: #f88f83;
    --on-gold: #17130a;
    --max: 1240px;
    --radius: 24px;
    --radius-sm: 12px;
    --radius-md: 17px;
    --ease: cubic-bezier(.2, .75, .25, 1);
    /* Plus Jakarta Sans: same geometric, modern feel as Manrope, but a taller
       x-height and wider letters, which is what makes it readable at 14-16px. */
    --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", "Space Grotesk", system-ui, sans-serif;
    --font-mono: Vazirmatn, "Plus Jakarta Sans", system-ui, sans-serif;
    --header-h: 86px;
}

[data-theme="light"] {
    --bg: #f8f5ee;
    --bg-soft: #fffdf7;
    --panel: rgba(255, 253, 247, .88);
    --panel-solid: #fffdf7;
    --line: rgba(28, 24, 14, .13);
    --line-2: rgba(28, 24, 14, .07);
    --line-gold: rgba(160, 118, 24, .38);
    --gold: #a97a15;
    --gold-2: #8a5f09;
    --gold-dark: #6f4c07;
    --ink: #16140f;
    --muted: #5c584f;
    --muted-2: #7d796f;
    --green: #1d7d4f;
    --ok: #1d7d4f;
    --err: #b3372a;
    --on-gold: #1a1509;
}

[dir="rtl"] {
    --font: Vazirmatn, "Plus Jakarta Sans", system-ui, Tahoma, sans-serif;
    --font-display: Vazirmatn, "Plus Jakarta Sans", sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 78% 8%, rgba(202, 155, 45, .13), transparent 32%),
        radial-gradient(ellipse at 5% 37%, rgba(77, 90, 130, .10), transparent 28%),
        linear-gradient(180deg, #090a0d 0%, #08090b 48%, #0b0b0d 100%);
}

/* The dot grid now lives in .s-bg-grid so it can drift with the colour
   fields; keeping a second static grid here produced visible moire. */

[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse at 78% 8%, rgba(190, 145, 45, .14), transparent 34%),
        radial-gradient(ellipse at 5% 37%, rgba(90, 100, 140, .08), transparent 28%),
        linear-gradient(180deg, #fbf8f1 0%, #f8f5ee 50%, #f6f2e9 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
::selection { background: rgba(243, 200, 92, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.s-ic { flex: 0 0 auto; vertical-align: -2px; }
.s-mono { font-family: var(--font-mono); }

/* ---------- 3. Layout ---------- */
.s-shell,
.container {
    width: min(var(--max), calc(100% - 48px));
    margin-inline: auto;
}
.s-narrow { max-width: 820px; }
.s-section,
.section { position: relative; padding: 110px 0; }
body > .s-main { display: block; }

/* ---------- 4. Micro labels ---------- */
.eyebrow,
.s-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-2);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    margin: 0;
}
.eyebrow::before,
.s-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(243, 200, 92, .65);
    flex: 0 0 auto;
}

.gradient-text,
.s-gradient {
    background: linear-gradient(100deg, #fff4ca 0%, #f4cc65 45%, #b9812b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="light"] .gradient-text,
[data-theme="light"] .s-gradient {
    background: linear-gradient(100deg, #c99a1f 0%, #a97a15 48%, #7d550c 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.s-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold-2);
    font-size: 11px;
    font-weight: 800;
    border-bottom: 1px solid transparent;
}
.s-link:hover { border-color: currentColor; }
.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: #e4cb7d;
    font-size: 10px;
    font-weight: 800;
}
[data-theme="light"] .inline-link { color: var(--gold); }
.inline-link svg { width: 13px; height: 13px; transition: transform .2s; }
.inline-link:hover svg { transform: translateX(3px); }

/* ---------- 5. Buttons ---------- */
.btn,
.s-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 12px;
    letter-spacing: .015em;
    font-weight: 800;
    transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover, .s-btn:hover { transform: translateY(-2px); }
.btn svg { width: 15px; height: 15px; }

.btn-gold,
.s-btn-primary {
    color: var(--on-gold);
    background: linear-gradient(135deg, #ffe9a0 0%, #efc24f 54%, #dca63b 100%);
    box-shadow: 0 8px 28px rgba(206, 155, 44, .15), inset 0 1px 0 rgba(255, 255, 255, .48);
}
.btn-gold:hover,
.s-btn-primary:hover { box-shadow: 0 12px 34px rgba(206, 155, 44, .25), inset 0 1px 0 rgba(255, 255, 255, .65); }

.btn-dark,
.s-btn-ghost {
    color: #f4f1e7;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .13);
}
.btn-dark:hover,
.s-btn-ghost:hover { border-color: var(--line-gold); background: rgba(243, 200, 92, .06); }
[data-theme="light"] .btn-dark,
[data-theme="light"] .s-btn-ghost { color: var(--ink); background: rgba(28, 24, 14, .03); border-color: var(--line); }

.s-btn-sm { min-height: 40px; padding: 0 15px; font-size: 10px; border-radius: 10px; }
.s-btn-lg { min-height: 52px; padding: 0 24px; font-size: 13px; }
.s-btn-block { width: 100%; }
.s-btn.is-disabled { opacity: .45; pointer-events: none; }

.s-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    color: var(--muted);
    transition: color .2s, border-color .2s, background .2s;
}
.s-icon-btn:hover { color: var(--ink); border-color: var(--line-gold); }
[data-theme="light"] .s-icon-btn { color: var(--muted); background: rgba(28, 24, 14, .03); }
.s-theme-light { display: none; }
[data-theme="light"] .s-theme-dark { display: none; }
[data-theme="light"] .s-theme-light { display: inline-flex; }

.s-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 999;
    background: var(--gold);
    color: var(--on-gold);
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    font-size: 12px;
    font-weight: 800;
}
.s-skip:focus { inset-inline-start: 0; }

/* ---------- 6. Topline ---------- */
.topline { border-bottom: 1px solid var(--line-2); background: rgba(255, 255, 255, .018); }
.topline-inner {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #b8b8bd;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
[data-theme="light"] .topline-inner { color: var(--muted); }
.live-dot,
.s-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(131, 221, 168, .08), 0 0 12px rgba(131, 221, 168, .65);
    display: inline-block;
    flex: 0 0 auto;
    animation: pulse 2.4s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(131, 221, 168, .08), 0 0 12px rgba(131, 221, 168, .45); }
    50% { opacity: .55; box-shadow: 0 0 0 7px rgba(131, 221, 168, 0), 0 0 18px rgba(131, 221, 168, .65); }
}
.s-dot-on { background: var(--green); }

/* ---------- 7. Navbar ---------- */
.navbar {
    position: sticky;
    z-index: 50;
    top: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    background: rgba(8, 9, 11, .80);
}
[data-theme="light"] .navbar { background: rgba(248, 245, 238, .85); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: var(--header-h); }

.brand,
.s-brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(243, 200, 92, .34);
    background: linear-gradient(145deg, rgba(243, 200, 92, .16), rgba(243, 200, 92, .035));
    box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 0 22px rgba(243, 200, 92, .07);
    flex: 0 0 auto;
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(243, 200, 92, .3); }
.brand-name,
.s-brand-text { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -.04em; font-weight: 700; }
.brand-sub {
    display: block;
    margin-top: 2px;
    color: #898a91;
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
[data-theme="light"] .brand-sub { color: var(--muted-2); }

.nav-links, .s-nav { display: flex; align-items: center; gap: 30px; margin-inline-start: auto; }
.nav-links a {
    color: #b7b7bd;
    font-size: 11px;
    font-weight: 700;
    transition: color .2s;
    padding: 4px 0;
}
[data-theme="light"] .nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--gold-2); }
.nav-links a.is-active { color: var(--gold-2); }

.nav-actions, .s-header-actions { display: flex; align-items: center; gap: 12px; }
.crypto-mini { display: flex; align-items: center; gap: 7px; color: #bdbdc3; font-size: 10px; }
[data-theme="light"] .crypto-mini { color: var(--muted); }
.crypto-mini svg { width: 16px; height: 16px; color: var(--gold); }
.nav-actions .btn,
.nav-actions .s-btn { min-height: 40px; padding: 0 15px; font-size: 10px; border-radius: 10px; }

/* language switcher */
.s-lang { position: relative; }
.s-lang > summary { list-style: none; cursor: pointer; }
.s-lang > summary::-webkit-details-marker { display: none; }
.s-lang-code { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .04em; }
.s-lang-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 10px);
    min-width: 214px;
    background: #14151a;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
    padding: 8px;
    z-index: 120;
}
[data-theme="light"] .s-lang-panel { background: #fffdf7; }
.s-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 11px;
    color: var(--muted);
}
.s-lang-item small { margin-inline-start: auto; color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.s-lang-item:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.s-lang-item.is-active { color: var(--gold-2); background: rgba(243, 200, 92, .08); }

.mobile-toggle, .s-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    place-items: center;
}
.mobile-toggle svg { width: 20px; height: 20px; }

.s-mobile-nav {
    display: none;
    border-top: 1px solid var(--line-2);
    background: rgba(8, 9, 11, .97);
    backdrop-filter: blur(18px);
    padding: 10px 0 18px;
}
[data-theme="light"] .s-mobile-nav { background: rgba(248, 245, 238, .98); }
.s-mobile-nav.is-open { display: block; }
.s-mobile-link {
    display: block;
    padding: 14px 6px;
    border-bottom: 1px solid var(--line-2);
    font-size: 12px;
    font-weight: 700;
}
.s-mobile-link:last-of-type { border-bottom: 0; }
.s-mobile-cta { width: 100%; margin-top: 14px; }

/* ---------- 8. Hero ---------- */
.hero, .s-hero { position: relative; overflow: hidden; padding: 82px 0 54px; }
.hero::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 650px;
    top: -250px;
    inset-inline-end: -180px;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(224, 171, 61, .105), transparent 65%);
}
.hero-grid, .s-hero-inner { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 48px; }
.hero-copy { padding: 20px 0 42px; position: relative; z-index: 2; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(243, 200, 92, .2);
    background: rgba(243, 200, 92, .055);
    color: #e4c977;
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 800;
    text-transform: uppercase;
}
.hero-kicker svg { width: 13px; height: 13px; }

.hero h1, .s-h1 {
    font-family: var(--font-display);
    font-size: clamp(52px, 6.2vw, 82px);
    letter-spacing: -.075em;
    line-height: .99;
    font-weight: 600;
    margin: 27px 0 21px;
    max-width: 660px;
}
.hero h1 .line2 { display: block; }
.hero-desc, .s-lead { max-width: 510px; margin: 0; color: #a7a8ae; font-size: 15px; line-height: 1.9; }
[data-theme="light"] .hero-desc, [data-theme="light"] .s-lead { color: var(--muted); }
.hero-desc strong { color: #e8e6df; font-weight: 600; }
.hero-ctas, .s-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 27px; color: #7d7f87; font-size: 10px; }
[data-theme="light"] .hero-note { color: var(--muted-2); }
.avatar-stack { display: flex; align-items: center; }
.avatar-stack span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    margin-inline-start: -6px;
    border: 2px solid #0b0c0e;
    border-radius: 50%;
    background: #2d2d2b;
    color: #f0dca5;
    font-size: 8px;
    font-weight: 800;
}
.avatar-stack span:first-child { margin-inline-start: 0; background: #303c38; color: #a9f0c7; }
.avatar-stack span:nth-child(2) { background: #33313e; color: #c9c2ff; }
.avatar-stack span:nth-child(3) { background: #473929; color: #f4d1a1; }

/* hero visual: orbit globe */
.hero-visual { min-height: 490px; position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.visual-aura {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 182, 62, .11) 0%, rgba(169, 125, 32, .045) 42%, transparent 68%);
    filter: blur(7px);
}
.globe { position: relative; width: min(100%, 490px); aspect-ratio: 1; display: grid; place-items: center; }
.globe::before {
    content: "";
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(243, 200, 92, .15);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(225, 172, 53, .075), inset 0 0 80px rgba(225, 172, 53, .04);
}
.globe::after { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(255, 255, 255, .075); border-radius: 50%; }
.globe-core {
    position: relative;
    width: 49%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 34% 23%, rgba(255, 231, 163, .24), rgba(198, 144, 35, .09) 28%, rgba(13, 14, 17, .1) 67%),
        linear-gradient(135deg, rgba(243, 200, 92, .08), rgba(255, 255, 255, .01));
    border: 1px solid rgba(243, 200, 92, .24);
    box-shadow: 0 0 65px rgba(243, 200, 92, .12), inset 0 0 45px rgba(243, 200, 92, .07);
    z-index: 1;
}
.globe-core::before,
.globe-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(243, 200, 92, .28);
    border-radius: 50%;
    transform: scaleX(.42);
}
.globe-core::after { transform: scaleX(.75) rotate(90deg); border-color: rgba(255, 255, 255, .1); }
.globe-brand { position: relative; z-index: 2; text-align: center; }
.globe-brand svg { width: 74px; height: 56px; filter: drop-shadow(0 0 18px rgba(243, 200, 92, .34)); margin-inline: auto; }
.globe-brand div { font-family: var(--font-display); font-size: 10px; letter-spacing: .19em; font-weight: 700; margin-top: 4px; }

.orbit { position: absolute; border: 1px solid rgba(243, 200, 92, .25); border-radius: 50%; width: 85%; height: 33%; transform: rotate(-34deg); }
.orbit.orbit-two { width: 86%; height: 43%; transform: rotate(54deg); border-color: rgba(255, 255, 255, .12); }
.orbit.orbit-three { width: 98%; height: 52%; transform: rotate(12deg); border-color: rgba(243, 200, 92, .1); }
.orbit-spin { position: absolute; width: 100%; height: 100%; inset: 0; animation: orbit 32s linear infinite; }
.orbit-dot {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 16%;
    left: 14%;
    border-radius: 50%;
    background: var(--gold-2);
    box-shadow: 0 0 0 5px rgba(243, 200, 92, .08), 0 0 20px rgba(243, 200, 92, .9);
}
.orbit-dot.d2 { top: 76%; left: 80%; width: 7px; height: 7px; background: #8ee5bc; box-shadow: 0 0 0 5px rgba(142, 229, 188, .07), 0 0 18px rgba(142, 229, 188, .8); }
@keyframes orbit { to { transform: rotate(360deg); } }

.route-line { position: absolute; width: 72%; height: 72%; inset: 14%; z-index: 2; overflow: visible; opacity: .86; }
.route-line path { stroke-dasharray: 4 8; animation: dash 18s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -180; } }

.node-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(13, 14, 17, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    color: #c5c5c9;
    font-size: 8px;
    letter-spacing: .11em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.node-label b { color: #f5e9c9; font-weight: 700; }
.node-label .node { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.node-label.us { top: 24%; inset-inline-start: -1%; }
.node-label.eu { top: 16%; inset-inline-end: 1%; }
.node-label.in { bottom: 22%; inset-inline-end: -3%; }
.node-label.ir { bottom: 13%; inset-inline-start: 5%; }

.status-card {
    position: absolute;
    z-index: 3;
    inset-inline-start: 0;
    bottom: 35px;
    width: 218px;
    padding: 15px 16px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(17, 18, 22, .84);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
    animation: float 6s ease-in-out infinite;
}
.status-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status-card-title { color: #a2a4ac; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.secure-tag { display: inline-flex; align-items: center; gap: 5px; color: #9ee5bb; font-size: 8px; font-weight: 800; }
.secure-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8ee5ad; }
.route-path { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 11px; font-weight: 800; }
.route-path span { color: #6f727a; font-size: 10px; }
.route-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #7f828b;
    font-size: 9px;
}
.route-meta strong { color: #dfc779; font-weight: 600; }

.encryption-float {
    position: absolute;
    inset-inline-end: -3px;
    bottom: 95px;
    padding: 13px 14px;
    border: 1px solid rgba(243, 200, 92, .2);
    border-radius: 13px;
    background: rgba(15, 16, 19, .85);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
    animation: float 7s ease-in-out -2s infinite;
}
.encryption-float .label { color: #81838b; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.encryption-float .value { margin-top: 5px; color: #f4df9c; font-family: var(--font-mono); font-size: 11px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hero-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 31px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 17px;
    overflow: hidden;
    background: rgba(255, 255, 255, .055);
}
.hero-stat { display: flex; align-items: center; gap: 13px; padding: 18px 20px; background: rgba(12, 13, 16, .95); }
[data-theme="light"] .hero-stat { background: var(--panel-solid); }
.stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    height: 37px;
    border-radius: 11px;
    border: 1px solid rgba(243, 200, 92, .18);
    color: var(--gold);
    background: rgba(243, 200, 92, .055);
}
.stat-icon svg { width: 17px; height: 17px; }
.stat-value { font-family: var(--font-display); font-size: 21px; letter-spacing: -.04em; font-weight: 700; }
.stat-label { margin-top: 3px; color: #82848c; font-size: 9px; }
[data-theme="light"] .stat-label { color: var(--muted-2); }

/* ---------- 9. Tech strip ---------- */
.tech-strip { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(255, 255, 255, .014); }
.tech-inner { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.tech-caption { color: #6d7078; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
[data-theme="light"] .tech-caption { color: var(--muted-2); }
.tech-logos { display: flex; align-items: center; justify-content: flex-end; gap: clamp(17px, 3.3vw, 42px); flex-wrap: wrap; }
.tech-word {
    color: #b7b7bc;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.03em;
    opacity: .84;
    transition: color .2s, opacity .2s;
    text-align: center;
}
[data-theme="light"] .tech-word { color: var(--ink); opacity: .7; }
.tech-word:hover { color: var(--gold-2); opacity: 1; }
.tech-word small { display: block; margin-top: 3px; color: #666973; font-family: var(--font); font-size: 7px; letter-spacing: .14em; font-weight: 600; }

/* ---------- 10. Section heads ---------- */
.section-head, .s-section-head { max-width: 690px; margin-bottom: 44px; }
.section-head h2, .s-section-head h2, .s-h2 {
    margin: 16px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.055em;
    font-weight: 600;
}
.section-head h2 .gold, .s-gold { color: var(--gold); }
.section-head p, .s-section-head p, .s-sub {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    max-width: 610px;
    margin: 0;
}
.s-h3 { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.045em; margin-bottom: 10px; }
.s-copy { color: var(--muted); font-size: 14px; line-height: 1.9; }
.s-muted { color: var(--muted-2); font-size: 11px; }
.s-hint { color: var(--muted-2); font-size: 10px; line-height: 1.7; margin: 10px 0 0; }
.s-note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted-2); font-size: 10px; line-height: 1.7; margin-block: 20px 0; }
.s-section-more { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 32px; }
.s-mt { margin-top: 32px; }

/* ---------- 11. Feature cards ---------- */
.features-grid, .s-grid { display: grid; gap: 14px; }
.features-grid { grid-template-columns: repeat(4, 1fr); }
.s-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.feature-card, .s-card {
    position: relative;
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s, background .3s;
}
[data-theme="light"] .feature-card,
[data-theme="light"] .s-card { background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); border-color: var(--line); }
.feature-card { min-height: 240px; }
.feature-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    inset-inline-end: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(243, 200, 92, .08);
    filter: blur(12px);
    transition: opacity .3s;
    opacity: 0;
}
.feature-card:hover, .s-card:hover {
    transform: translateY(-5px);
    border-color: rgba(243, 200, 92, .28);
    background: linear-gradient(145deg, rgba(243, 200, 92, .065), rgba(255, 255, 255, .012));
}
.feature-card:hover::after { opacity: 1; }
.feature-icon, .s-feature-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(243, 200, 92, .19);
    border-radius: 13px;
    color: var(--gold);
    background: rgba(243, 200, 92, .06);
    margin-bottom: 0;
}
.feature-icon svg { width: 21px; height: 21px; }
.feature-index {
    position: absolute;
    top: 26px;
    inset-inline-end: 22px;
    color: #51535a;
    font-family: var(--font-mono);
    font-size: 10px;
}
[data-theme="light"] .feature-index { color: var(--muted-2); }
.feature-card h3, .s-card-title { margin: 23px 0 10px; font-family: var(--font-display); font-size: 17px; letter-spacing: -.035em; }
.s-card-title { margin: 0 0 10px; }
.feature-card p, .s-card-text { color: #94969d; font-size: 12px; line-height: 1.8; margin: 0; }
[data-theme="light"] .feature-card p,
[data-theme="light"] .s-card-text { color: var(--muted); }

/* ---------- 12. Protocol panel ---------- */
.protocol-wrap {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 26px;
    background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .06), transparent 42%), rgba(255, 255, 255, .016);
}
.protocol-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.protocol-head h3 { margin: 0; font-size: 24px; letter-spacing: -.05em; }
.protocol-head p { margin: 0; color: #8e9098; font-size: 11px; line-height: 1.7; max-width: 390px; }
.protocol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.protocol-card {
    min-height: 180px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 16px;
    background: rgba(8, 9, 11, .42);
    transition: border-color .25s, transform .25s, background .25s;
}
[data-theme="light"] .protocol-card { background: rgba(255, 255, 255, .6); }
.protocol-card:hover { transform: translateY(-4px); border-color: rgba(243, 200, 92, .27); background: rgba(243, 200, 92, .035); }
.protocol-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.protocol-symbol {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
}
.protocol-badge { color: #777982; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.protocol-card h4 { margin: 19px 0 7px; font-size: 14px; letter-spacing: -.02em; }
.protocol-card p { color: #858790; font-size: 10px; line-height: 1.7; margin: 0; }

/* ---------- 13. Network section ---------- */
.network-section { overflow: hidden; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .014), transparent); }
.network-grid { display: grid; grid-template-columns: .93fr 1.07fr; gap: 64px; align-items: center; }
.network-copy h2 { margin: 16px 0 17px; font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -.06em; }
.network-copy p { color: #9b9da5; font-size: 13px; line-height: 1.9; margin: 0; }
.network-points { display: grid; gap: 16px; margin-top: 26px; }
.network-point { display: flex; gap: 12px; align-items: flex-start; }
.check {
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    height: 23px;
    border: 1px solid rgba(131, 221, 168, .23);
    border-radius: 7px;
    color: #91dfae;
    background: rgba(131, 221, 168, .07);
}
.check svg { width: 13px; height: 13px; }
.network-point strong { display: block; font-size: 12px; margin-bottom: 4px; }
.network-point span { display: block; color: #81848d; font-size: 10px; line-height: 1.7; }

.network-board {
    min-height: 410px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 48%, rgba(243, 200, 92, .085), transparent 48%), linear-gradient(145deg, #111216, #0b0c0f);
}
[data-theme="light"] .network-board { background: radial-gradient(ellipse at 50% 48%, rgba(243, 200, 92, .16), transparent 48%), linear-gradient(145deg, #fffdf7, #f4efe2); }
.board-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(ellipse, black, transparent 80%);
    mask-image: radial-gradient(ellipse, black, transparent 80%);
}
.board-title { position: absolute; inset-inline-start: 23px; top: 21px; color: #757781; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.board-status { position: absolute; inset-inline-end: 21px; top: 17px; display: flex; gap: 7px; align-items: center; color: #9da0a8; font-size: 9px; }
.board-status i { display: block; width: 6px; height: 6px; background: #85dba7; border-radius: 50%; box-shadow: 0 0 10px #85dba7; }
.network-lines { position: absolute; inset: 10% 4% 9%; width: 92%; height: 81%; }
.network-lines .line { stroke: rgba(243, 200, 92, .38); stroke-width: 1.2; stroke-dasharray: 4 6; fill: none; animation: dash 22s linear infinite; }
.network-lines .line-dim { stroke: rgba(255, 255, 255, .15); stroke-width: 1; fill: none; }
.network-lines .hub { fill: #f3c85c; stroke: rgba(243, 200, 92, .2); stroke-width: 6; }
.network-lines .hub-green { fill: #83dda8; stroke: rgba(131, 221, 168, .2); stroke-width: 6; }
.map-label {
    position: absolute;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(12, 13, 16, .84);
    font-size: 9px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}
[data-theme="light"] .map-label { background: rgba(255, 253, 247, .9); }
.map-label small { display: block; color: #777a83; font-size: 7px; letter-spacing: .12em; margin-bottom: 4px; }
.map-label strong { font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.map-label.frankfurt { top: 37%; inset-inline-start: 36%; border-color: rgba(243, 200, 92, .3); }
.map-label.newyork { top: 22%; inset-inline-start: 9%; }
.map-label.mumbai { inset-inline-end: 8%; top: 51%; }
.map-label.iran { inset-inline-start: 24%; bottom: 18%; }
.board-foot {
    position: absolute;
    inset-inline: 20px;
    bottom: 17px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #72757d;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.board-foot strong { color: #c6bc9a; font-weight: 600; }

/* ---------- 14. Regions ---------- */
.regions-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.regions-head .section-head { margin: 0; }
.region-status-note { display: flex; align-items: center; gap: 7px; color: #888a92; font-size: 10px; white-space: nowrap; padding-bottom: 5px; }
.region-status-note span { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.regions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

.region-card, .s-region-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .022);
    overflow: hidden;
    transition: transform .25s, border-color .25s;
}
.s-region-card { display: block; }
[data-theme="light"] .region-card, [data-theme="light"] .s-region-card { background: rgba(255, 255, 255, .66); }
.region-card { min-height: 138px; }
.region-card:hover, .s-region-card:hover { transform: translateY(-3px); border-color: rgba(243, 200, 92, .24); }
.flag, .s-region-flag {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    font-size: 25px;
    filter: saturate(.84);
}
.s-region-flag { margin-bottom: 14px; }
.region-card h3, .region-card .s-card-title { margin: 0 0 5px; font-family: var(--font-display); font-size: 15px; letter-spacing: -.025em; }
.region-card p, .s-region-card .s-card-text { margin: 0; color: #83858e; font-size: 10px; line-height: 1.6; }
.region-card .status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #91d9ad; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.region-card .status::before { content: ""; width: 5px; height: 5px; background: #82dba5; border-radius: 50%; }
.region-card.soon { border-style: dashed; background: rgba(243, 200, 92, .02); }
.region-card.soon .status { color: #e9c975; }
.region-card.soon .status::before { background: var(--gold); box-shadow: 0 0 9px rgba(243, 200, 92, .6); }
.region-arrow { position: absolute; inset-inline-end: 17px; top: 17px; color: #5c5f67; }
.region-arrow svg { width: 15px; height: 15px; }
.s-region-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted-2); margin: 10px 0 0; }
.s-region-code { margin-inline-start: auto; font-family: var(--font-mono); letter-spacing: .08em; }

/* ---------- 15. Pricing ---------- */
.pricing-section {
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    background: radial-gradient(ellipse at 50% 30%, rgba(243, 200, 92, .055), transparent 55%), rgba(255, 255, 255, .012);
}
.pricing-head { text-align: center; max-width: 740px; margin: 0 auto 33px; }
.pricing-head .section-head { margin: 0 auto; }
.pricing-head .eyebrow { justify-content: center; }
.pricing-head .eyebrow::before { display: none; }
.pricing-head h2 { margin: 15px 0 12px; font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 53px); letter-spacing: -.06em; line-height: 1.06; }
.pricing-head p { color: #999ba3; font-size: 13px; line-height: 1.8; max-width: 560px; margin: 0 auto; }

.duration-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    margin: 29px auto 13px;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
}
[data-theme="light"] .duration-switch { background: rgba(255, 255, 255, .6); }
.duration-switch button {
    position: relative;
    min-width: 79px;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8c8f97;
    font-size: 10px;
    font-weight: 800;
    transition: background .2s, color .2s;
}
[data-theme="light"] .duration-switch button { color: var(--muted); }
.duration-switch button.active { color: #1a160d; background: linear-gradient(135deg, #ffeba5, #e7b94d); box-shadow: 0 3px 16px rgba(243, 200, 92, .12); }
.duration-switch button .best { display: block; position: absolute; inset-inline-start: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); color: #f1d17c; font-family: var(--font-mono); font-size: 7px; white-space: nowrap; letter-spacing: .1em; }

.plan-mode { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 37px; }
.mode-label { font-size: 10px; color: #82858d; }
.mode-label.active { color: #f3dfab; }
[data-theme="light"] .mode-label.active { color: var(--gold); }
.mode-toggle { width: 43px; height: 24px; padding: 3px; border: 1px solid rgba(243, 200, 92, .25); border-radius: 20px; background: rgba(243, 200, 92, .11); }
.mode-toggle span { display: block; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #ffeba5, #e5b340); box-shadow: 0 1px 7px rgba(0, 0, 0, .25); transition: transform .25s; }
.mode-toggle.traffic span { transform: translateX(18px); }

.pricing-layout { display: grid; grid-template-columns: 1fr .88fr; gap: 16px; max-width: 950px; margin: 0 auto; }
.plan-summary {
    position: relative;
    padding: 33px;
    border: 1px solid rgba(243, 200, 92, .28);
    border-radius: 22px;
    background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .13), transparent 45%), linear-gradient(145deg, rgba(29, 27, 21, .95), rgba(14, 15, 18, .96));
    overflow: hidden;
}
[data-theme="light"] .plan-summary { background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .2), transparent 45%), linear-gradient(145deg, #fffdf7, #f6f0e0); }
.plan-summary::after {
    content: "";
    position: absolute;
    top: -110px;
    inset-inline-end: -70px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(243, 200, 92, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(243, 200, 92, .018), 0 0 0 48px rgba(243, 200, 92, .014);
    pointer-events: none;
}
.plan-label { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.plan-label .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(243, 200, 92, .19);
    border-radius: 20px;
    color: #e8cd81;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
}
.plan-label .pill svg { width: 12px; height: 12px; }
.plan-label .edit-label { color: #777981; font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
.plan-summary h3 { position: relative; z-index: 1; margin: 26px 0 9px; font-size: 31px; line-height: 1.08; letter-spacing: -.055em; }
.plan-summary > p { position: relative; z-index: 1; margin: 0; color: #9c9da3; font-size: 11px; line-height: 1.8; max-width: 400px; }
.selection-box { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 25px 0 22px; }
.selection-item { padding: 13px; border: 1px solid rgba(255, 255, 255, .085); border-radius: 12px; background: rgba(0, 0, 0, .15); }
[data-theme="light"] .selection-item { background: rgba(28, 24, 14, .03); }
.selection-item span { display: block; color: #777a82; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 7px; }
.selection-item strong { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: #efe0b5; }
[data-theme="light"] .selection-item strong { color: var(--gold-dark); }
.plan-summary .btn,
.plan-summary .s-btn { position: relative; z-index: 1; width: 100%; }
.plan-fineprint { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #777a81; font-size: 8px; }
.plan-fineprint svg { width: 12px; height: 12px; color: #d9bd6b; }
.plan-benefits { padding: 29px; border: 1px solid rgba(255, 255, 255, .085); border-radius: 22px; background: rgba(16, 17, 21, .72); }
[data-theme="light"] .plan-benefits { background: rgba(255, 255, 255, .72); }
.plan-benefits h3 { margin: 0 0 21px; font-size: 14px; letter-spacing: -.02em; }
.benefit-list { display: grid; gap: 17px; }
.benefit { display: flex; align-items: flex-start; gap: 11px; }
.benefit-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(243, 200, 92, .16);
    border-radius: 9px;
    color: #e1c36d;
    background: rgba(243, 200, 92, .05);
}
.benefit-icon svg { width: 15px; height: 15px; }
.benefit strong { display: block; margin: 1px 0 4px; font-size: 11px; }
.benefit p { margin: 0; color: #83858e; font-size: 9px; line-height: 1.7; }
.pricing-note { max-width: 950px; margin: 22px auto 0; color: #6e7179; text-align: center; font-size: 9px; line-height: 1.7; }

/* ---------- 16. Security banner ---------- */
.security-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background: linear-gradient(115deg, rgba(243, 200, 92, .055), transparent 45%), rgba(255, 255, 255, .018);
}
.security-banner h2 { margin: 13px 0; font-size: clamp(28px, 3vw, 39px); line-height: 1.1; letter-spacing: -.055em; }
.security-banner p { margin: 0; color: #999ba3; font-size: 12px; line-height: 1.8; }
.security-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.security-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(0, 0, 0, .17);
    font-size: 10px;
    font-weight: 700;
}
[data-theme="light"] .security-pill { background: rgba(28, 24, 14, .03); }
.security-pill svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--gold); }
.security-note { grid-column: 1 / -1; color: #6d7078; font-size: 9px; line-height: 1.7; margin-top: 3px; }

/* ---------- 17. FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.faq-intro h2 { margin: 15px 0 13px; font-size: clamp(34px, 3.8vw, 48px); letter-spacing: -.06em; line-height: 1.04; }
.faq-intro p { margin: 0; color: #93959d; font-size: 12px; line-height: 1.85; }
.faq-list, .s-accordion { border-top: 1px solid rgba(255, 255, 255, .09); }
.s-accordion { display: grid; gap: 0; }
.faq-item, .s-acc { border-bottom: 1px solid rgba(255, 255, 255, .09); padding: 0; background: transparent; border-inline: 0; border-top: 0; border-radius: 0; }
.faq-question, .s-acc > summary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    border: 0;
    background: transparent;
    text-align: start;
    color: #e9e8e2;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
[data-theme="light"] .faq-question,
[data-theme="light"] .s-acc > summary { color: var(--ink); }
.s-acc > summary::-webkit-details-marker { display: none; }
.faq-question svg, .s-acc > summary svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #a8a9af;
    transition: transform .25s, color .25s;
}
.faq-item.open .faq-question svg,
.s-acc[open] > summary svg { transform: rotate(45deg); color: var(--gold); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { margin: 0; color: #92949c; font-size: 11px; line-height: 1.9; padding: 0 36px 0 0; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer p { padding-bottom: 21px; }
.s-acc > p { color: var(--muted); font-size: 11px; line-height: 1.9; padding: 0 0 21px; margin: 0; max-width: 62ch; }

/* ---------- 18. Final CTA ---------- */
.final-cta, .s-cta {
    position: relative;
    overflow: hidden;
    padding: 65px 40px;
    text-align: center;
    border: 1px solid rgba(243, 200, 92, .2);
    border-radius: 27px;
    background: radial-gradient(ellipse at 50% 110%, rgba(243, 200, 92, .17), transparent 58%), linear-gradient(140deg, rgba(30, 27, 20, .9), rgba(14, 15, 18, .96));
}
[data-theme="light"] .final-cta, [data-theme="light"] .s-cta { background: radial-gradient(ellipse at 50% 110%, rgba(243, 200, 92, .22), transparent 58%), linear-gradient(140deg, #fffdf7, #f5efdf); }
.final-cta::before, .final-cta::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: 510px;
    height: 220px;
    transform: translate(-50%, -50%) rotate(-22deg);
    border: 1px solid rgba(243, 200, 92, .085);
    border-radius: 50%;
    pointer-events: none;
}
.final-cta::after { width: 640px; height: 300px; transform: translate(-50%, -50%) rotate(31deg); border-color: rgba(255, 255, 255, .055); }
.final-cta > *, .s-cta > * { position: relative; z-index: 1; }
.final-cta .eyebrow, .s-cta .eyebrow { justify-content: center; }
.final-cta .eyebrow::before, .s-cta .eyebrow::before { display: none; }
.final-cta h2, .s-cta .s-h2 { margin: 16px 0 14px; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.065em; }
.final-cta p, .s-cta .s-sub { max-width: 540px; margin: 0 auto; color: #a0a0a6; font-size: 12px; line-height: 1.85; }
.final-cta .hero-ctas, .s-cta .s-hero-actions { justify-content: center; margin-top: 25px; }

/* ---------- 19. Footer ---------- */
.footer, .s-footer { padding: 54px 0 26px; border-top: 1px solid var(--line-2); margin-top: 40px; }
.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-wrap: wrap;
}
.footer-tagline { color: #858790; font-size: 10px; margin-top: 8px; max-width: 34ch; }
[data-theme="light"] .footer-tagline { color: var(--muted); }
.footer-contact { display: grid; gap: 8px; margin-top: 16px; }
.footer-contact-item { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.footer-contact-item:hover { color: var(--gold-2); }
.footer-cols { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.footer-col h3 { font-family: var(--font); font-size: 8px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-2); font-weight: 700; margin-bottom: 12px; }
.footer-col a { display: block; color: #9698a0; font-size: 10px; padding: 3px 0; transition: color .2s; }
[data-theme="light"] .footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--gold-2); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 19px;
    color: #62656d;
    font-size: 9px;
    flex-wrap: wrap;
}
[data-theme="light"] .footer-bottom { color: var(--muted-2); }
.footer-bottom .slogan { color: #8a7a4b; letter-spacing: .1em; text-transform: uppercase; }
.footer-status { display: inline-flex; align-items: center; gap: 7px; }
.footer-locales { display: flex; flex-wrap: wrap; gap: 5px; }
.s-locale-chip {
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .05em;
    color: var(--muted-2);
}
.s-locale-chip:hover { border-color: var(--gold); color: var(--gold); }
.s-locale-chip.is-active { border-color: var(--gold); color: var(--gold); background: rgba(243, 200, 92, .1); }

/* ---------- 20. Reveal ---------- */
/* Only hide content once JS has run, so a blocked/failed script never
   leaves the page invisible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

/* ==========================================================================
   21. Inner pages (s-* component layer)
   ========================================================================== */
.s-page-head {
    position: relative;
    padding: 62px 0 34px;
    border-bottom: 1px solid var(--line-2);
    overflow: hidden;
}
.s-page-head::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 420px;
    top: -260px;
    inset-inline-end: -120px;
    background: radial-gradient(ellipse, rgba(224, 171, 61, .1), transparent 65%);
    pointer-events: none;
}
.s-page-head > .s-shell { position: relative; }
.s-page-head .s-h1 { font-size: clamp(38px, 5vw, 62px); margin: 0 0 18px; }
.s-page-head .s-lead { max-width: 620px; }
.s-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 18px;
}
.s-breadcrumb a:hover { color: var(--gold); }

.s-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
}
.s-pill-on, .s-pill-active { color: var(--green); border-color: rgba(131, 221, 168, .35); }
.s-pill-blocked, .s-pill-finished { color: var(--err); border-color: rgba(248, 143, 131, .35); }
.s-pill-awaiting { color: var(--gold); border-color: var(--line-gold); }

.s-badge {
    position: absolute;
    inset-inline-end: 16px;
    top: -11px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-gold);
    background: linear-gradient(135deg, #ffe9a0, #efc24f);
    padding: 5px 12px;
    border-radius: 999px;
}

.s-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.s-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .022);
    font-size: 12px;
}
[data-theme="light"] .s-chip { background: rgba(255, 255, 255, .66); }
.s-chip small { color: var(--muted-2); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

/* tables */
.s-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow-x: auto;
    background: rgba(255, 255, 255, .018);
}
[data-theme="light"] .s-table-wrap { background: rgba(255, 255, 255, .7); }
.s-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 600px; }
.s-table th, .s-table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--line-2); }
.s-table th {
    font-family: var(--font-mono);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted-2);
    font-weight: 500;
    background: rgba(255, 255, 255, .02);
}
.s-table tr:last-child td { border-bottom: 0; }

/* steps */
.s-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.s-steps-vertical { grid-template-columns: 1fr; gap: 12px; }
.s-step {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
}
.s-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(243, 200, 92, .08);
    border: 1px solid var(--line-gold);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 11px;
    margin-bottom: 13px;
}
.s-step .s-card-title, .s-step h3 { font-size: 15px; margin-bottom: 8px; }

/* bands */
.s-band {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(140deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    margin-top: 34px;
}
.s-band-quiet { border-style: dashed; }

/* plan cards on / */
.s-plan { display: flex; flex-direction: column; gap: 6px; }
.s-plan.is-featured { border-color: var(--line-gold); box-shadow: 0 20px 60px -30px rgba(243, 200, 92, .5); }
.s-plan-amount { font-family: var(--font-display); font-size: 24px; letter-spacing: -.04em; }
.s-plan-period { color: var(--muted-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.s-plan-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; }
.s-plan-price strong { font-family: var(--font-mono); font-size: 22px; color: var(--gold-2); font-weight: 500; }
.s-plan-price s { color: var(--muted-2); font-size: 10px; }
.s-plan-note { font-size: 9px; color: var(--muted-2); margin: 0 0 8px; }
.s-plan-list { display: grid; gap: 8px; margin: 10px 0 20px; font-size: 10px; color: var(--muted); }
.s-plan-list li, .s-mini-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.7; }
.s-plan-list .s-ic, .s-mini-list .s-ic { color: var(--gold); margin-top: 2px; }
.s-plan .s-btn { margin-top: auto; }

/* forms / calculator */
.s-form { display: grid; gap: 16px; }
.s-field { border: 0; padding: 0; margin: 0 0 24px; }
.s-field:last-child { margin-bottom: 0; }
.s-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 12px;
    padding: 0;
}
.s-output { color: var(--gold-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.s-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(0, 0, 0, .24);
    color: var(--ink);
    font-size: 12px;
    transition: border-color .2s, box-shadow .2s;
}
[data-theme="light"] .s-input { background: #fffdf7; border-color: var(--line); }
.s-input:focus { outline: none; border-color: rgba(243, 200, 92, .5); box-shadow: 0 0 0 3px rgba(243, 200, 92, .12); }
.s-check { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; color: var(--muted); }
.s-check input { margin-top: 3px; accent-color: var(--gold); }

.s-segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.s-seg { position: relative; }
.s-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.s-seg span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.s-seg input:checked + span { border-color: var(--gold); color: var(--gold-2); background: rgba(243, 200, 92, .1); }
.s-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.s-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill, 30%), rgba(255, 255, 255, .1) var(--fill, 30%));
    margin-block: 6px 16px;
    cursor: pointer;
}
[data-theme="light"] .s-range { background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill, 30%), rgba(28, 24, 14, .12) var(--fill, 30%)); }
.s-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffeba5, #e5b340);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px rgba(243, 200, 92, .6);
}
.s-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #f3c85c; border: 3px solid var(--bg); }

.s-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.s-preset {
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
    transition: all .18s;
}
[data-theme="light"] .s-preset { background: rgba(28, 24, 14, .03); }
.s-preset:hover { border-color: var(--line-gold); color: var(--ink); }
.s-preset.is-active { border-color: var(--gold); color: var(--gold-2); background: rgba(243, 200, 92, .1); }

.s-calc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: clamp(20px, 3vw, 34px); align-items: start; }
.s-calc-form-only { grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
.s-calc-form {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    padding: clamp(20px, 3vw, 30px);
}
[data-theme="light"] .s-calc-form { background: rgba(255, 255, 255, .8); }
.s-calc-summary {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    border: 1px solid var(--line-gold);
    border-radius: var(--radius);
    background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .12), transparent 45%), linear-gradient(160deg, rgba(29, 27, 21, .95), rgba(14, 15, 18, .96));
    padding: clamp(20px, 3vw, 28px);
}
[data-theme="light"] .s-calc-summary { background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .18), transparent 45%), linear-gradient(160deg, #fffdf7, #f6f0e0); }
.s-summary-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.s-summary-price { font-family: var(--font-mono); font-size: clamp(24px, 4vw, 32px); font-weight: 500; color: var(--gold-2); letter-spacing: -.02em; margin: 0 0 4px; }
.s-summary-old { color: var(--muted-2); font-size: 10px; margin: 0 0 14px; }
.s-summary-list { display: grid; gap: 8px; margin: 18px 0; padding-block: 16px; border-block: 1px solid var(--line-2); }
.s-summary-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.s-summary-list dt { color: var(--muted-2); }
.s-summary-list dd { margin: 0; font-family: var(--font-mono); font-size: 10px; }
.s-summary-free { font-size: 10px; color: var(--green); margin: 0 0 12px; line-height: 1.6; }
.s-summary-error { font-size: 10px; color: var(--err); margin: 0 0 12px; line-height: 1.6; }
.s-mini-list { display: grid; gap: 7px; margin: 16px 0 0; font-size: 10px; color: var(--muted); }

/* legal */
.s-legal-block { margin-bottom: 26px; }
.s-legal-block .s-h3 { font-size: 18px; }
.s-legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.s-legal-nav a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: var(--muted); }
.s-legal-nav a:hover, .s-legal-nav a.is-active { border-color: var(--gold); color: var(--gold-2); background: rgba(243, 200, 92, .08); }

/* code block */
.s-code { border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(0, 0, 0, .3); overflow: hidden; margin-block: 20px; }
[data-theme="light"] .s-code { background: #fbf7ec; }
.s-code-label { display: block; padding: 10px 16px; font-family: var(--font-mono); font-size: 9px; color: var(--gold); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); letter-spacing: .04em; }
.s-code pre { margin: 0; padding: 16px; overflow-x: auto; }
.s-code code { font-family: var(--font-mono); font-size: 10px; color: var(--muted); line-height: 1.8; }

/* channels / contact */
.s-channel { display: block; }
.s-channel .s-ic { color: var(--gold); margin-bottom: 12px; }

/* alerts */
.s-alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 11px; margin-bottom: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); line-height: 1.7; }
.s-alert-ok { border-color: rgba(131, 221, 168, .3); color: #a5e7bc; background: rgba(131, 221, 168, .055); }
.s-alert-err { border-color: rgba(248, 143, 131, .3); color: #f7b3a9; background: rgba(248, 143, 131, .06); }
[data-theme="light"] .s-alert-ok { color: #14603a; }
[data-theme="light"] .s-alert-err { color: #8f2c20; }

/* auth */
.s-section-auth { padding: 70px 0 90px; }
.s-auth-shell { display: flex; justify-content: center; }
.s-auth-card {
    width: 100%;
    max-width: 440px;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius);
    background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .1), transparent 45%), linear-gradient(145deg, rgba(27, 25, 20, .96), rgba(13, 14, 17, .97));
    padding: clamp(24px, 4vw, 38px);
}
[data-theme="light"] .s-auth-card { background: radial-gradient(ellipse at 100% 0%, rgba(243, 200, 92, .16), transparent 45%), linear-gradient(145deg, #fffdf7, #f7f1e2); }
.s-auth-card .s-h2 { font-size: 28px; margin-bottom: 8px; }
.s-auth-foot { margin: 20px 0 0; font-size: 11px; color: var(--muted-2); text-align: center; }

/* alternate section band */
.s-section-alt { border-block: 1px solid var(--line-2); background: rgba(255, 255, 255, .014); }
[data-theme="light"] .s-section-alt { background: rgba(255, 255, 255, .55); }

/* stat strip (about page) */
.s-strip { border-block: 1px solid var(--line-2); background: rgba(255, 255, 255, .018); }
.s-strip-flat { border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); margin-top: 32px; }
.s-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding-block: 26px; }
.s-strip-item { text-align: center; }
.s-strip-item strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); color: var(--gold-2); letter-spacing: -.04em; }
.s-strip-item span { color: var(--muted-2); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

/* order limit tiles */
.s-limit .s-ic { color: var(--gold); margin-bottom: 12px; }
.s-limit .s-card-title { margin-bottom: 6px; }
.s-limit-value { font-family: var(--font-mono); font-size: 13px; color: var(--gold-2); margin: 0; }

/* client list (apps page) */
.s-client-list { display: grid; gap: 12px; }
.s-client { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.s-client .s-card-title { margin-bottom: 6px; }

/* legacy body hook */
.s-body { display: block; }

/* ==========================================================================
   22. Customer panel (u-*)
   ========================================================================== */
.u-header {
    position: sticky;
    z-index: 50;
    top: 0;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-2);
    background: rgba(8, 9, 11, .84);
}
[data-theme="light"] .u-header { background: rgba(248, 245, 238, .9); }
.u-header-inner { display: flex; align-items: center; gap: 18px; min-height: 66px; flex-wrap: wrap; }
.u-header-tag { color: var(--muted-2); font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.s-brand-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(243, 200, 92, .3); }
.u-nav { display: flex; gap: 4px; margin-inline-start: 8px; flex-wrap: wrap; }
.u-nav a { padding: 8px 12px; border-radius: 9px; font-size: 11px; font-weight: 700; color: var(--muted); }
.u-nav a:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.u-nav a[aria-current="page"] { color: var(--gold-2); background: rgba(243, 200, 92, .1); }
.u-header-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.u-balance {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-gold);
    background: rgba(243, 200, 92, .07);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold-2);
    white-space: nowrap;
}
.u-shell { padding: 34px 0 60px; }
.u-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.u-head .s-h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 8px; }
.u-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 34px; }
.u-tile { display: flex; flex-direction: column; gap: 8px; }
.u-tile-label { font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.u-tile-value { font-family: var(--font-display); font-size: 26px; letter-spacing: -.04em; color: var(--gold-2); }
.u-section-title { margin: 0 0 16px; }
.u-empty { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 40px 22px; }
.u-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* ==========================================================================
   23. RTL
   ========================================================================== */
[dir="rtl"] .node-label.us { inset-inline-start: auto; inset-inline-end: -1%; }
[dir="rtl"] .node-label.eu { inset-inline-end: auto; inset-inline-start: 1%; }
[dir="rtl"] .node-label.in { inset-inline-end: auto; inset-inline-start: -3%; }
[dir="rtl"] .node-label.ir { inset-inline-start: auto; inset-inline-end: 5%; }
[dir="rtl"] .status-card { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .encryption-float { inset-inline-end: auto; inset-inline-start: -3px; }
[dir="rtl"] .map-label.newyork { inset-inline-start: auto; inset-inline-end: 9%; }
[dir="rtl"] .map-label.mumbai { inset-inline-end: auto; inset-inline-start: 8%; }
[dir="rtl"] .s-code pre { direction: ltr; text-align: left; }
[dir="rtl"] .inline-link:hover svg { transform: translateX(-3px); }
[dir="rtl"] .hero h1, [dir="rtl"] .s-h1, [dir="rtl"] .section-head h2, [dir="rtl"] .s-h2 { letter-spacing: -.02em; }
[dir="rtl"] .s-acc > summary svg { transform: rotate(0); }
[dir="rtl"] .s-acc[open] > summary svg { transform: rotate(45deg); }

/* ==========================================================================
   24. Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .nav-links { gap: 18px; }
    .crypto-mini { display: none; }
    .hero-grid { gap: 20px; grid-template-columns: 1fr .9fr; }
    .hero h1 { font-size: clamp(50px, 6.6vw, 70px); }
    .hero-visual { min-height: 430px; }
    .status-card { inset-inline-start: -6px; bottom: 9px; transform: scale(.92); transform-origin: left bottom; }
    .encryption-float { inset-inline-end: -2px; bottom: 68px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .network-grid { gap: 35px; }
    .faq-layout { gap: 45px; }
    .s-calc, .s-calc-form-only { grid-template-columns: 1fr; }
    .s-calc-summary { position: static; }
}

@media (max-width: 900px) {
    .nav-links { display: none; }
    .mobile-toggle, .s-burger { display: grid; }
    .s-hide-sm { display: none; }
    .s-nav { display: none; }
    .hero-grid, .s-hero-inner { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .s-header-actions { margin-inline-start: auto; }
}

@media (max-width: 820px) {
    .s-shell, .container { width: min(var(--max), calc(100% - 36px)); }
    .topline-inner { font-size: 8px; letter-spacing: .06em; min-height: 30px; }
    .nav-inner { height: 68px; gap: 12px; }
    .brand-mark { width: 37px; height: 37px; }
    .brand-name { font-size: 15px; }
    .brand-sub { font-size: 7px; }
    .nav-actions { margin-inline-start: auto; }
    .nav-actions .btn { display: none; }
    .hero { padding: 49px 0 40px; }
    .hero h1 { font-size: clamp(46px, 12vw, 66px); margin: 23px 0 17px; }
    .hero-desc { font-size: 13px; line-height: 1.85; }
    .hero-ctas .btn, .s-hero-actions .s-btn { flex: 1; }
    .hero-visual { min-height: 380px; }
    .globe { width: min(100%, 400px); }
    .node-label { font-size: 7px; padding: 8px 9px; }
    .hero-bottom { grid-template-columns: 1fr 1fr; margin-top: 25px; }
    .hero-stat { padding: 14px 12px; gap: 9px; }
    .stat-icon { flex-basis: 31px; height: 31px; border-radius: 9px; }
    .stat-icon svg { width: 15px; height: 15px; }
    .stat-value { font-size: 19px; }
    .stat-label { font-size: 8px; }
    .tech-inner { flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px 0; gap: 17px; }
    .tech-logos { justify-content: flex-start; gap: 19px 24px; }
    .tech-word { font-size: 12px; }
    .section, .s-section { padding: 72px 0; }
    .section-head { margin-bottom: 30px; }
    .section-head h2 { font-size: clamp(30px, 7.6vw, 42px); }
    .section-head p { font-size: 12px; }
    .features-grid { gap: 10px; }
    .feature-card { min-height: 0; padding: 18px 16px; }
    .feature-icon { width: 40px; height: 40px; }
    .feature-index { top: 20px; inset-inline-end: 17px; }
    .feature-card h3 { font-size: 15px; margin: 20px 0 9px; }
    .feature-card p { font-size: 10px; }
    .protocol-wrap { padding: 20px 15px; border-radius: 20px; }
    .protocol-head { display: block; }
    .protocol-head h3 { font-size: 21px; margin-bottom: 8px; }
    .protocol-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .protocol-card { min-height: 0; padding: 15px; }
    .protocol-card h4 { margin: 16px 0 7px; font-size: 13px; }
    .protocol-card p { font-size: 9px; }
    .network-grid { grid-template-columns: 1fr; gap: 32px; }
    .network-board { min-height: 350px; }
    .regions-head { display: block; }
    .regions-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .region-card { min-height: 127px; display: block; padding: 15px; }
    .flag, .s-region-flag { width: 39px; height: 39px; font-size: 20px; border-radius: 11px; margin-bottom: 13px; }
    .region-card h3 { font-size: 13px; }
    .region-card p { font-size: 9px; }
    .region-card .status { font-size: 7px; margin-top: 8px; }
    .pricing-head h2 { font-size: clamp(32px, 8vw, 44px); }
    .duration-switch { width: 100%; gap: 3px; padding: 4px; }
    .duration-switch button { min-width: 0; flex: 1; padding: 11px 3px; font-size: 9px; }
    .pricing-layout { grid-template-columns: 1fr; gap: 12px; }
    .plan-summary { padding: 24px 20px; }
    .plan-summary h3 { font-size: 27px; margin-top: 22px; }
    .plan-benefits { padding: 23px 20px; }
    .security-banner { grid-template-columns: 1fr; gap: 25px; padding: 24px 19px; }
    .security-pills { gap: 7px; }
    .faq-layout { grid-template-columns: 1fr; gap: 25px; }
    .faq-intro h2 { font-size: 36px; }
    .faq-question, .s-acc > summary { font-size: 11px; padding: 19px 0; }
    .final-cta, .s-cta { padding: 48px 20px; border-radius: 22px; }
    .footer-main { flex-direction: column; align-items: flex-start; gap: 23px; }
    .footer-cols { gap: 22px 34px; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; line-height: 1.8; }
    .s-btn-lg { width: 100%; }
    .s-h1 { font-size: clamp(34px, 9vw, 48px); }
    .s-table { min-width: 520px; }
    .u-header-inner { gap: 12px; }
    .u-nav { order: 3; width: 100%; margin-inline-start: 0; }
    .s-calc-form, .s-calc-summary { padding: 20px 16px; }
    .s-auth-card { padding: 24px 18px; }
}

@media (max-width: 420px) {
    .hero h1 { font-size: 42px; }
    .hero-visual { min-height: 340px; }
    .status-card { width: 176px; }
    .regions-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .protocol-grid { grid-template-columns: 1fr; }
    .security-pills { grid-template-columns: 1fr; }
    .selection-box { grid-template-columns: 1fr; }
}

/* ==========================================================================
   25. Motion / print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .navbar, .topline, .footer, .s-footer, .u-header, .hero-visual { display: none; }
    body::before, body::after { display: none; }
}

/* ==========================================================================
   26. Header groups, currency chip, wallet & panel extras
   ========================================================================== */
.nav-group { position: relative; }
.nav-group > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
    color: #b7b7bd;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 0;
    transition: color .2s;
}
[data-theme="light"] .nav-group > summary { color: var(--muted); }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--gold-2); }
/* A group that contains the current page: quiet dot, never the full active
   treatment, so the exact page link is the only highlighted entry. */
.nav-group > summary.is-current { color: var(--ink); }
.nav-group > summary.is-current::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-inline-end: 1px;
    border-radius: 50%;
    background: var(--gold-2);
    box-shadow: 0 0 0 3px rgba(243, 200, 92, .14);
}
.nav-group > summary.is-current:hover { color: var(--gold-2); }
.nav-group[open] > summary { color: var(--gold-2); }
.nav-menu {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    top: calc(100% + 14px);
    min-width: 208px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #14151a;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
    z-index: 120;
}
[data-theme="light"] .nav-menu { background: #fffdf7; }
.nav-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.nav-menu a:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.nav-menu a.is-active { color: var(--gold-2); background: rgba(243, 200, 92, .08); }
[dir="rtl"] .nav-menu { transform: translateX(50%); }

.currency-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .035);
    color: var(--muted);
    font-size: 10px;
    transition: border-color .2s, color .2s;
}
.currency-chip::-webkit-details-marker { display: none; }
.currency-chip:hover { border-color: var(--line-gold); color: var(--ink); }
.currency-symbol { color: var(--gold-2); font-family: var(--font-mono); font-size: 11px; }

.s-mb { margin-bottom: 18px; }
.s-mt-sm { margin-top: 14px; }
.s-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    font-size: 11px;
}
.s-radio input { accent-color: var(--gold); }
.s-radio:has(input:checked) { border-color: var(--gold); background: rgba(243, 200, 92, .07); }
.s-bonus {
    margin-block: 18px;
    padding: 14px 16px;
    border: 1px dashed var(--line-gold);
    border-radius: var(--radius-sm);
    background: rgba(243, 200, 92, .05);
    font-size: 10px;
    color: var(--muted);
}
.s-bonus strong { display: block; margin-bottom: 6px; color: var(--gold-2); font-size: 11px; }
.s-bonus ul { display: grid; gap: 4px; }
.s-token {
    display: block;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .28);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold-2);
    word-break: break-all;
}
[data-theme="light"] .s-token { background: #fbf7ec; }

.u-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 32px; }
.u-quick-item { display: flex; align-items: flex-start; gap: 12px; }
.u-quick-item .s-ic { color: var(--gold); margin-top: 2px; }
.u-quick-item strong { display: block; font-size: 12px; margin-bottom: 3px; }
.u-quick-item small { color: var(--muted-2); font-size: 9px; line-height: 1.6; display: block; }

/* ==========================================================================
   27. Panel chrome, form controls, responsive hardening
   ========================================================================== */
.u-topbar { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.u-topbar .brand { min-width: 0; flex: 0 1 auto; }
.brand-copy { min-width: 0; }
.brand-copy .brand-name,
.brand-copy .brand-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.u-balance-amount { white-space: nowrap; }

.u-tabbar { border-top: 1px solid var(--line-2); background: rgba(255, 255, 255, .012); }
[data-theme="light"] .u-tabbar { background: rgba(28, 24, 14, .02); }
.u-tabbar-inner {
    display: flex;
    gap: 6px;
    padding-block: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.u-tabbar-inner::-webkit-scrollbar { display: none; }
.u-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
}
.u-tab:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
[data-theme="light"] .u-tab:hover { background: rgba(28, 24, 14, .05); }
.u-tab[aria-current="page"] { color: var(--gold-2); background: rgba(243, 200, 92, .1); border-color: var(--line-gold); }
.u-tab-muted { margin-inline-start: auto; color: var(--muted-2); }

/* Form controls must inherit the site font, not the UA default. */
input, select, textarea, button, optgroup, option { font-family: inherit; }
select.s-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a3aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-inline-end: 36px;
    color-scheme: dark;
    cursor: pointer;
}
[dir="rtl"] select.s-input {
    background-position: left 12px center;
    padding-inline-end: 13px;
    padding-inline-start: 36px;
}
[data-theme="light"] select.s-input {
    color-scheme: light;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c584f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.s-input option { background: #14151a; color: var(--ink); }
[data-theme="light"] select.s-input option { background: #fffdf7; color: var(--ink); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.s-field, .s-form, .s-card { min-width: 0; }

@media (max-width: 900px) {
    .u-tabbar-inner { padding-inline: 0; }
    .u-head-actions { width: 100%; }
    .u-head-actions .s-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
    .u-topbar { min-height: 58px; gap: 10px; }
    .u-topbar .brand-sub { display: none; }
    .u-topbar .brand-logo { width: 34px; height: 34px; }
    .u-actions { gap: 6px; }
    .u-logout-text { display: none; }
    .u-balance { padding: 6px 9px; font-size: 9px; }
    .u-balance-amount { font-size: 9px; }

    .s-grid-2, .s-grid-3 { grid-template-columns: 1fr; }
    .u-tiles { grid-template-columns: 1fr; }
    .u-quick { grid-template-columns: 1fr; }

    .topline-inner { gap: 6px; font-size: 7px; letter-spacing: .04em; }
    .topline-inner > :nth-child(n+3) { display: none; }

    .s-band { flex-direction: column; align-items: stretch; }
    .s-section-more { flex-direction: column; align-items: flex-start; gap: 10px; }
    .s-hero-actions .s-btn, .hero-ctas .btn { width: 100%; }
    .u-head { gap: 12px; }
    .s-presets { gap: 6px; }
    .s-preset { padding: 8px 11px; font-size: 9px; }
    .s-summary-price { font-size: 26px; }
    .s-acc > summary { gap: 12px; }
    .nav-actions .btn-dark { display: none; }
}

@media (max-width: 420px) {
    .s-shell, .container { width: min(var(--max), calc(100% - 26px)); }
    .u-balance-amount { display: none; }
    .hero-bottom { grid-template-columns: 1fr; }
    .s-seg span { padding: 8px 11px; font-size: 10px; }
    .u-tab { padding: 7px 10px; font-size: 10px; }
    .footer-bottom { align-items: flex-start; }
}

/* ---------- 28. Inline subscription naming ---------- */
.u-rename { margin-top: 5px; }
.u-rename > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.u-rename > summary::-webkit-details-marker { display: none; }
.u-rename-value { color: var(--gold-2); font-weight: 600; }
.u-rename-add { color: var(--muted-2); }
.u-rename-add:hover { color: var(--gold); }
.u-rename-form { display: flex; gap: 8px; margin-top: 8px; min-width: 220px; }
.u-rename-form .s-input { min-width: 130px; padding: 7px 10px; font-size: 11px; }
@media (max-width: 640px) {
    .u-rename-form { flex-direction: column; min-width: 0; }
}
/* ---------- 29. Ambient background (site + panel) ---------- */
/*
 * Three drifting colour fields and a slow grid. Every moving part is an
 * element animated with `transform` only, so the work stays on the compositor
 * instead of repainting a full-screen gradient on each frame. Motion is off
 * for anyone who asked for reduced motion.
 */
.s-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.s-bg-orb {
    position: absolute;
    display: block;
    width: 78vmax;
    height: 78vmax;
    border-radius: 50%;
    opacity: .55;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation: s-orb-a 52s var(--ease) infinite alternate;
}

.s-bg-orb-a {
    top: -34vmax;
    inset-inline-end: -18vmax;
    background: radial-gradient(circle at 50% 50%, rgba(243, 200, 92, .16), rgba(243, 200, 92, .05) 42%, transparent 66%);
}

.s-bg-orb-b {
    top: 26%;
    inset-inline-start: -34vmax;
    animation-name: s-orb-b;
    animation-duration: 61s;
    background: radial-gradient(circle at 50% 50%, rgba(96, 116, 176, .13), rgba(96, 116, 176, .04) 44%, transparent 68%);
}

.s-bg-orb-c {
    bottom: -40vmax;
    inset-inline-start: 24%;
    animation-name: s-orb-c;
    animation-duration: 74s;
    background: radial-gradient(circle at 50% 50%, rgba(80, 170, 140, .10), rgba(80, 170, 140, .03) 46%, transparent 70%);
}

.s-bg-grid {
    position: absolute;
    inset: -10%;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 72%);
    animation: s-grid-drift 90s linear infinite;
    will-change: transform;
}

/* The panel is a working surface: same idea, quieter and further back. */
.s-bg--panel .s-bg-orb { opacity: .34; }
.s-bg--panel .s-bg-orb-a {
    background: radial-gradient(circle at 50% 50%, rgba(243, 200, 92, .11), transparent 62%);
}
.s-bg--panel .s-bg-orb-b {
    background: radial-gradient(circle at 50% 50%, rgba(120, 108, 178, .10), transparent 64%);
}
.s-bg--panel .s-bg-orb-c {
    background: radial-gradient(circle at 50% 50%, rgba(70, 140, 150, .08), transparent 66%);
}
.s-bg--panel .s-bg-grid { opacity: .11; }

@keyframes s-orb-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12); }
}
@keyframes s-orb-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(7vmax, -6vmax, 0) scale(1); }
}
@keyframes s-orb-c {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-5vmax, -7vmax, 0) scale(1.1); }
}
@keyframes s-grid-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(68px, 68px, 0); }
}

[data-theme="light"] .s-bg-orb { opacity: .5; }
[data-theme="light"] .s-bg-orb-a {
    background: radial-gradient(circle at 50% 50%, rgba(190, 145, 45, .18), transparent 64%);
}
[data-theme="light"] .s-bg-orb-b {
    background: radial-gradient(circle at 50% 50%, rgba(96, 116, 176, .10), transparent 66%);
}
[data-theme="light"] .s-bg-orb-c {
    background: radial-gradient(circle at 50% 50%, rgba(60, 150, 120, .09), transparent 68%);
}
[data-theme="light"] .s-bg-grid {
    opacity: .6;
    background-image:
        linear-gradient(rgba(28, 24, 14, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 24, 14, .05) 1px, transparent 1px);
}

@media (prefers-reduced-motion: reduce) {
    .s-bg-orb,
    .s-bg-grid { animation: none; }
}

/* Coarse pointers and small screens get still backgrounds: battery first. */
@media (max-width: 720px) {
    .s-bg-orb { opacity: .42; }
}
@media (hover: none) and (max-width: 720px) {
    .s-bg-orb,
    .s-bg-grid { animation: none; }
}

/* ---------- 30. Illustrations ---------- */
.s-illus {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin-inline: auto;
    overflow: visible;
}

.s-illus--wide { max-width: 760px; }
.s-illus--sm { max-width: 300px; }

.s-illus-frame {
    position: relative;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(243, 200, 92, .10), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .006));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
    overflow: hidden;
}
[data-theme="light"] .s-illus-frame {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(190, 145, 45, .12), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .4));
    box-shadow: 0 22px 60px rgba(28, 24, 14, .10);
}

/* Animated details inside the illustrations. */
.s-illus-flow {
    stroke-dasharray: 6 9;
    animation: s-illus-flow 1.6s linear infinite;
}
.s-illus-pulse { animation: s-illus-pulse 3.2s ease-in-out infinite; transform-origin: center; }
.s-illus-pulse-2 { animation-delay: .8s; }
.s-illus-pulse-3 { animation-delay: 1.6s; }
.s-illus-bar { transform-origin: bottom; animation: s-illus-bar 3.4s var(--ease) infinite alternate; }
.s-illus-bar:nth-of-type(2) { animation-delay: .35s; }
.s-illus-bar:nth-of-type(3) { animation-delay: .7s; }
.s-illus-bar:nth-of-type(4) { animation-delay: 1.05s; }
.s-illus-scan { animation: s-illus-scan 4s var(--ease) infinite; }

@keyframes s-illus-flow {
    to { stroke-dashoffset: -30; }
}
@keyframes s-illus-pulse {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes s-illus-bar {
    from { transform: scaleY(.55); }
    to { transform: scaleY(1); }
}
@keyframes s-illus-scan {
    0%, 100% { transform: translateY(0); opacity: .15; }
    50% { transform: translateY(78px); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
    .s-illus-flow,
    .s-illus-pulse,
    .s-illus-pulse-2,
    .s-illus-pulse-3,
    .s-illus-bar,
    .s-illus-scan { animation: none; }
    .s-illus-flow { stroke-dasharray: none; }
}

/* Two column "picture + copy" rows used by the marketing pages. */
.s-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

.s-media--flip > :first-child { order: 2; }

.s-media-copy > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .s-media { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .s-media--flip > :first-child { order: 0; }
}

/* ---------- 31. Network + apps detail blocks ---------- */
.s-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    counter-reset: flow;
}

.s-flow-step {
    position: relative;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    backdrop-filter: blur(10px);
}

.s-flow-step::before {
    counter-increment: flow;
    content: counter(flow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    border-radius: 50%;
    border: 1px solid var(--line-gold);
    color: var(--gold-2);
    font-size: 10px;
    font-weight: 700;
}

.s-flow-step h3 { font-size: 14px; margin-bottom: 6px; }
.s-flow-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 820px) {
    .s-flow { grid-template-columns: minmax(0, 1fr); }
}

.s-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.s-spec {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
}

.s-spec h3 { font-size: 13px; margin-bottom: 6px; }
.s-spec p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.s-spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: var(--gold-2);
    border: 1px solid var(--line-gold);
    background: rgba(243, 200, 92, .09);
}

/* Latency meter on the exit-point cards. */
.s-latency {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--muted-2);
}

.s-latency-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 14px;
}

.s-latency-bars i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: var(--line);
}

.s-latency-bars i:nth-child(1) { height: 5px; }
.s-latency-bars i:nth-child(2) { height: 8px; }
.s-latency-bars i:nth-child(3) { height: 11px; }
.s-latency-bars i:nth-child(4) { height: 14px; }
.s-latency-bars i.on { background: var(--green); }

/* Platform badges on the client list. */
.s-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.s-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .04em;
}

/* Illustration palette. Set through CSS classes, not presentation attributes,
   so the theme variables resolve everywhere (var() in an SVG attribute is not
   reliable in older Safari). */
.il-frame { fill: none; stroke: var(--line-gold); stroke-width: 1.4; }
.il-soft { fill: none; stroke: var(--line); stroke-width: 1.2; }
.il-glass { fill: var(--panel-solid); opacity: .62; }
.il-gold { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.il-gold-fill { fill: var(--gold); stroke: none; }
.il-green { fill: none; stroke: var(--green); stroke-width: 1.6; }
.il-green-fill { fill: var(--green); stroke: none; }
.il-muted { fill: none; stroke: var(--muted-2); stroke-width: 1.2; }
.il-muted-fill { fill: var(--muted-2); stroke: none; }
.il-ink-fill { fill: var(--ink); stroke: none; }
.il-dash { fill: none; stroke: var(--line-gold); stroke-width: 1.2; stroke-dasharray: 5 7; }

/* Small screens: keep the illustration frames and step cards tight, so the
   pictures add context without pushing the text off the first screen. */
@media (max-width: 640px) {
    .s-illus-frame { padding: 14px; border-radius: var(--radius-md); }
    .s-illus--sm { max-width: 230px; }
    .s-flow-step { padding: 18px 16px; }
    .s-spec { padding: 16px; }
    .s-media { gap: 24px; }
}

/* ==========================================================================
   32. Readability pass: type scale
   ==========================================================================
   The old sheet was built around 9-12px micro text. That reads as "small and
   cramped" on a laptop and is close to unusable on a phone, so every reading
   size is raised here while the hierarchy (display -> heading -> body ->
   caption) stays intact. Nothing in the interface is smaller than 11px now.
   ========================================================================== */
body { font-size: 15.5px; line-height: 1.72; }
p { margin: 0 0 1.1rem; }

/* Captions and hints */
.s-muted,
.s-hint,
.s-note,
.hero-note,
.s-region-meta,
.s-latency { font-size: 12.5px; line-height: 1.65; }

/* Body copy */
.s-copy { font-size: 15px; line-height: 1.85; }
.feature-card p,
.s-card-text { font-size: 14px; line-height: 1.75; color: var(--muted); }
.s-card-title { font-size: 17px; line-height: 1.35; margin: 0 0 10px; font-weight: 700; }

/* Lead paragraphs */
.s-lead,
.s-sub,
.hero-desc,
.s-section-head p { font-size: 16.5px; line-height: 1.75; }
.s-cta .s-sub,
.final-cta p { font-size: 15px; }

/* Section headings */
.s-h3 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.03em; }
.s-card-title:is(h1, h2, h3) { letter-spacing: -.02em; }

/* Overline labels */
.eyebrow,
.s-eyebrow { font-size: 11.5px; letter-spacing: .15em; }

/* Buttons */
.s-btn { font-size: 14px; font-weight: 600; }
.s-btn-sm { font-size: 13px; min-height: 42px; padding: 0 16px; }
.s-btn-lg { font-size: 15px; min-height: 55px; padding: 0 26px; }
.s-link,
.inline-link { font-size: 13.5px; }

/* Forms */
.s-label { font-size: 13.5px; }
.s-input,
.s-select { font-size: 14.5px; }
.s-hint { margin-top: 10px; }
.s-radio { font-size: 14px; }
.s-radio strong { font-weight: 600; }

/* Compact controls */
.s-pill { font-size: 11px; }
.s-preset { font-size: 13.5px; }
.s-badge { font-size: 11px; }
.s-step-n { font-size: 12px; }
.s-breadcrumb,
.s-breadcrumb a { font-size: 12.5px; }

/* Tables */
.s-table { font-size: 14px; }
.s-table th { font-size: 11px; letter-spacing: .08em; }
.s-table td { font-size: 14px; }

/* Accordions */
.s-acc > summary,
.faq-question { font-size: 15.5px; padding: 17px 0; }
.s-acc > p,
.faq-answer p { font-size: 14px; line-height: 1.8; }

/* Footer */
.footer-col h3 { font-size: 11px; letter-spacing: .13em; }
.footer-col a { font-size: 13.5px; padding: 5px 0; }
.footer-tagline,
.footer-contact-item { font-size: 13px; line-height: 1.6; }
.footer-bottom { font-size: 12.5px; }
.footer-bottom a { font-size: 12.5px; }

/* Home page mock labels stay illustration-sized, they are not reading text */
.topline-inner { font-size: 11px; }
.brand-sub { font-size: 10px; letter-spacing: .14em; }
.brand-name,
.s-brand-text { font-size: 18px; }

/* --------------------------------------------------------------------------
   33. Site header: bigger type, calmer layout
   -------------------------------------------------------------------------- */
.navbar { backdrop-filter: blur(20px); }
.nav-inner { gap: 34px; }

.brand { gap: 13px; }
.brand-mark,
.brand-logo { width: 44px; height: 44px; }

.nav-links,
.s-nav { gap: 34px; }

.nav-links > a,
.nav-group > summary {
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    padding: 9px 0;
    color: #c9c9d0;
}
[data-theme="light"] .nav-links > a,
[data-theme="light"] .nav-group > summary { color: var(--muted); }

.nav-links > a:hover,
.nav-group > summary:hover { color: var(--gold-2); }

/* The current page gets a bar under the label instead of only a colour shift:
   colour alone is hard to notice, and it doubles as a focus anchor. */
.nav-links > a.is-active { color: var(--gold-2); }
.nav-links > a.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.nav-group[open] > summary { color: var(--gold-2); }

/* Dropdown: wider, larger targets, real hover rows. */
.nav-menu {
    top: calc(100% + 16px);
    min-width: 264px;
    padding: 10px;
    border-radius: 16px;
    background: #101116;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .58);
}
[data-theme="light"] .nav-menu { background: #fff; box-shadow: 0 26px 60px rgba(28, 24, 14, .16); }

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}
.nav-menu a:hover { background: rgba(255, 255, 255, .055); color: var(--ink); }
[data-theme="light"] .nav-menu a:hover { background: rgba(28, 24, 14, .05); }
.nav-menu a.is-active { color: var(--gold-2); background: rgba(243, 200, 92, .1); font-weight: 600; }
.nav-menu a.is-active::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--gold-2);
}

/* Right-hand controls */
.nav-actions { gap: 10px; }
.nav-actions .s-btn { min-height: 44px; padding: 0 18px; font-size: 13.5px; border-radius: 12px; }
.currency-chip { min-height: 44px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.s-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.s-lang-code { font-size: 11px; }
.s-lang-item { font-size: 13.5px; padding: 11px 12px; }
.s-lang-item small { font-size: 11px; }
.s-lang-panel { min-width: 208px; padding: 8px; border-radius: 15px; }

/* Drawer */
.s-mobile-link {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--line-2);
}
.s-mobile-cta { margin-top: 18px; }

@media (max-width: 1080px) {
    .nav-links { gap: 22px; }
    .nav-links > a,
    .nav-group > summary { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   34. Customer panel: nav and header
   -------------------------------------------------------------------------- */
.u-topbar { min-height: 78px; gap: 16px; }
.u-body .brand-name { font-size: 18px; }
.u-body .brand-sub { font-size: 10px; }

.u-actions { gap: 10px; }
.u-balance {
    min-height: 42px;
    padding: 0 15px;
    gap: 9px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
}
.u-balance-amount { font-size: 14.5px; }
.u-logout .s-btn { min-height: 42px; font-size: 13px; }

/* The tab bar becomes a real navigation bar: taller, icon + label, and the
   current section is a filled pill rather than a colour-only hint. */
.u-tabbar {
    position: relative;
    border-top: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .015);
}
[data-theme="light"] .u-tabbar { background: rgba(28, 24, 14, .025); }

.u-tabbar-inner,
.u-tabbar > .s-shell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-block: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.u-tabbar-inner::-webkit-scrollbar,
.u-tabbar > .s-shell::-webkit-scrollbar { display: none; }

.u-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: color .18s, background .18s, border-color .18s;
}
.u-tab svg { width: 16px; height: 16px; }
.u-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
[data-theme="light"] .u-tab:hover { background: rgba(28, 24, 14, .05); }

.u-tab[aria-current="page"] {
    color: var(--gold-2);
    background: rgba(243, 200, 92, .12);
    border-color: var(--line-gold);
}
[data-theme="light"] .u-tab[aria-current="page"] { color: var(--gold-dark); background: rgba(169, 122, 21, .1); }

.u-tab-muted { margin-inline-start: auto; color: var(--muted-2); font-weight: 500; }

/* Panel headings and empty states */
.u-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.u-head .s-h2 { margin-bottom: 8px; }

@media (max-width: 860px) {
    .u-topbar { min-height: 66px; }
    .u-tab { padding: 10px 13px; font-size: 13px; }
    .u-tab svg { width: 15px; height: 15px; }
}
@media (max-width: 640px) {
    .u-tabbar-inner,
    .u-tabbar > .s-shell { padding-block: 8px; }
    .u-tab { padding: 9px 12px; font-size: 12.5px; gap: 7px; }
    .u-tab-muted { margin-inline-start: 0; }
    .u-balance { font-size: 13.5px; min-height: 38px; padding: 0 12px; }
}

/* "New order" is the one action a customer comes back for, so it reads as a
   button inside the tab bar instead of one more equal-weight row. */
.u-tab-primary {
    color: var(--on-gold);
    background: linear-gradient(135deg, #ffe9a0 0%, #efc24f 54%, #dca63b 100%);
    box-shadow: 0 6px 20px rgba(206, 155, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .5);
    border-color: transparent;
}
.u-tab-primary:hover {
    color: var(--on-gold);
    background: linear-gradient(135deg, #fff0b8 0%, #f6cd64 54%, #e6b348 100%);
}
.u-tab-primary[aria-current="page"] {
    color: var(--on-gold);
    background: linear-gradient(135deg, #ffe9a0 0%, #efc24f 54%, #dca63b 100%);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(206, 155, 44, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* The account controls wrap instead of overflowing on tablets. */
.u-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Mobile drawer: the larger labels need their own scroll container, otherwise
   seven links plus the account buttons run off the bottom of a phone screen. */
@media (max-width: 900px) {
    .s-mobile-nav {
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 0 22px;
    }
    .s-mobile-nav .s-shell { padding-inline: 0; }
    .mobile-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
    .nav-actions .btn,
    .nav-actions .s-btn { display: none; }
    .nav-actions .btn-gold { display: none; }
}

/* Phones: the header has to fit brand + four controls on one row. */
@media (max-width: 560px) {
    :root { --header-h: 74px; }
    .brand-sub { display: none; }
    .brand { gap: 10px; }
    .brand-mark, .brand-logo { width: 38px; height: 38px; }
    .brand-name, .s-brand-text { font-size: 16px; }
    .currency-chip .s-lang-code,
    .s-icon-btn .s-lang-code { display: none; }
    .currency-chip { min-height: 40px; padding: 0 11px; }
    .s-icon-btn { width: 40px; height: 40px; }
    .nav-inner { gap: 10px; }
}

/* ---------- 35. Dashboard: renewals and order actions ---------- */
.u-renewals {
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius-md);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(243, 200, 92, .12), transparent 62%),
        var(--panel);
}

.u-renewals-head { margin-bottom: 14px; }
.u-renewals-head .s-h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--gold-2);
}
.u-renewals-head .s-hint { margin: 0; }

.u-renewals-list { display: grid; gap: 10px; }

.u-renewal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}
[data-theme="light"] .u-renewal { background: rgba(255, 255, 255, .6); }
.u-renewal strong { font-size: 14.5px; }
.u-renewal .s-hint { margin: 4px 0 0; }

/* Row actions in the orders table */
.u-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.u-row-actions form { display: inline-flex; }

/* Reseller "manage" disclosure, one per order row */
.u-actions-menu { display: inline-block; margin-top: 8px; }
.u-actions-menu > summary { list-style: none; cursor: pointer; }
.u-actions-menu > summary::-webkit-details-marker { display: none; }

.u-actions-panel {
    margin-top: 10px;
    padding: 12px;
    min-width: 260px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-solid);
    display: grid;
    gap: 10px;
}

.u-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
}
.u-action-row:last-child { border-bottom: 0; padding-bottom: 0; }

.u-action-label { font-size: 12.5px; color: var(--muted); }
.u-action-form { display: flex; align-items: center; gap: 6px; }
.u-action-form .s-input { width: 74px; padding: 7px 9px; font-size: 13px; }
.u-action-inline { display: flex; gap: 6px; }

.u-action-danger .u-action-label { color: var(--err); }
.u-action-danger .s-btn { border-color: rgba(248, 143, 131, .4); color: var(--err); }
.u-action-danger .s-btn:hover { background: rgba(248, 143, 131, .1); }

.s-pill-warn { color: var(--warn); border-color: var(--line-gold); }

@media (max-width: 720px) {
    .u-actions-panel { min-width: 0; width: 100%; }
    .u-renewal { align-items: flex-start; }
}

/* ---------- 36. Orders: responsive cards ---------- */
.u-orders { display: grid; gap: 14px; }

.u-order {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    backdrop-filter: blur(10px);
}

.u-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
}

.u-order-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.u-order-id strong { font-size: 15.5px; }
.u-order-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.u-order-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 20px;
    margin: 16px 0 0;
}

.u-order-details > div { min-width: 0; }
.u-order-details dt {
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.u-order-details dd { margin: 0; font-size: 14px; font-weight: 600; }
.u-order-email { overflow-wrap: anywhere; font-weight: 500; color: var(--muted); }

.u-usage-bar {
    height: 6px;
    margin-top: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
[data-theme="light"] .u-usage-bar { background: rgba(28, 24, 14, .08); }
.u-usage-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--gold));
}
.u-usage-bar span.is-high { background: linear-gradient(90deg, var(--gold), var(--err)); }

.u-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 720px) {
    .u-order { padding: 15px 15px; }
    .u-order-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .u-order-actions { flex-direction: column; align-items: stretch; }
    .u-order-actions .u-row-actions { width: 100%; }
    .u-order-actions .u-row-actions > * { flex: 1 1 auto; }
    .u-order-actions .s-btn,
    .u-order-actions .s-link { justify-content: center; }
}

@media (max-width: 420px) {
    .u-order-details { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 37. Account page, tickets, misc panel blocks ---------- */
.u-stack { display: grid; gap: 14px; align-content: start; }
.u-divider { margin: 20px 0; border: 0; border-top: 1px solid var(--line-2); }

.u-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}
.u-stat-grid > div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.u-stat-grid dt {
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.u-stat-grid dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; }

/* Tickets */
.u-ticket-list { display: grid; gap: 10px; }
.u-ticket-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}
.u-ticket-row a { font-weight: 600; }
.u-ticket-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted-2); }

.u-thread { display: grid; gap: 12px; margin: 18px 0; }
.u-msg {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}
.u-msg.is-staff { border-color: var(--line-gold); background: rgba(243, 200, 92, .06); }
.u-msg header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted-2);
    font-family: var(--font-mono);
    letter-spacing: .04em;
}
.u-msg .u-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.7; }

@media (max-width: 640px) {
    .u-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Badge on the Support tab */
.u-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--on-gold);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* The flat menu has six entries now; tighten the spacing so it still fits on
   a laptop without dropping a link into an overflow. */
.nav-links, .s-nav { gap: 26px; }
.nav-links > a, .nav-group > summary { font-size: 14px; }

@media (max-width: 1240px) {
    .nav-links, .s-nav { gap: 18px; }
    .nav-links > a, .nav-group > summary { font-size: 13.5px; }
}
@media (max-width: 1100px) {
    .nav-links, .s-nav { gap: 13px; }
    .nav-links > a, .nav-group > summary { font-size: 13px; }
    .nav-actions .s-btn { padding: 0 14px; }
}

/* ---------- 38. Modals (native <dialog>) ---------- */
.u-modal {
    width: min(560px, calc(100% - 32px));
    max-height: min(86vh, 760px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-solid);
    color: var(--ink);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.u-modal::backdrop { background: rgba(4, 5, 7, .62); backdrop-filter: blur(2px); }
[data-theme="light"] .u-modal { background: #fffdf7; box-shadow: 0 30px 80px rgba(28, 24, 14, .22); }

.u-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-2);
}
.u-modal-title { margin: 0; font-size: 16.5px; }
.u-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
}
.u-modal-close:hover { color: var(--ink); border-color: var(--line-gold); }

.u-modal-body { padding: 18px 20px 22px; overflow-y: auto; max-height: calc(min(86vh, 760px) - 64px); display: grid; gap: 20px; }

.u-modal-block { display: grid; gap: 10px; }
.u-modal-block h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.u-modal-block .s-hint { margin: 0; }

.u-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u-inline-form .s-input { width: 88px; }
.u-inline-label { min-width: 84px; font-size: 13px; color: var(--muted); }

.u-modal-danger { border-top: 1px solid var(--line-2); padding-top: 16px; }
.u-modal-danger h3 { color: var(--err); }
.u-modal-danger .s-btn { border-color: rgba(248, 143, 131, .4); color: var(--err); }
.u-modal-danger .s-btn:hover { background: rgba(248, 143, 131, .1); }

/* The dialog opened from a manage button needs the page not to scroll behind */
body.u-modal-open { overflow: hidden; }

@media (max-width: 520px) {
    .u-inline-form { flex-wrap: nowrap; }
    .u-inline-label { display: none; }
    .u-inline-form .s-input { flex: 1 1 auto; width: auto; }
}

/* ---------- 39. Panel navigation: desktop row, mobile drawer ---------- */
/* Desktop keeps the horizontal bar; on phones the same links become a drawer
   opened by the hamburger, which is far easier to hit than a scroll strip. */
.u-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.u-menu-toggle:hover { border-color: var(--line-gold); color: var(--gold-2); }

@media (max-width: 900px) {
    .u-menu-toggle { display: inline-flex; }
    .u-logout { display: none; }

    .u-tabbar { display: none; }
    .u-tabbar.is-open { display: block; }

    .u-tabbar-inner {
        display: grid;
        gap: 4px;
        padding-block: 10px 16px;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .u-tab {
        padding: 14px 14px;
        font-size: 15.5px;
        font-weight: 600;
        border-radius: 12px;
        border: 1px solid transparent;
    }
    .u-tab svg { width: 18px; height: 18px; }

    .u-tab[aria-current="page"] {
        border-color: var(--line-gold);
        background: rgba(243, 200, 92, .12);
    }

    .u-tab-primary { justify-content: center; }
    .u-tab-muted {
        margin-inline-start: 0;
        margin-top: 8px;
        border-top: 1px solid var(--line-2);
        border-radius: 0;
        padding-top: 18px;
    }
}

@media (max-width: 640px) {
    .u-tabbar-inner { padding-block: 8px 14px; }
    .u-tab { padding: 13px 12px; font-size: 15px; }
}

/* ---------- 40. Ticket attachments and danger button ---------- */
.u-attachment { margin-top: 12px; display: grid; gap: 8px; }

.u-attachment-image {
    display: block;
    max-width: 320px;
    max-height: 240px;
    border-radius: 10px;
    border: 1px solid var(--line);
    object-fit: cover;
}

.u-attachment-video {
    display: block;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #000;
}

.u-danger-btn { color: var(--err); border-color: rgba(248, 143, 131, .4); }
.u-danger-btn:hover { background: rgba(248, 143, 131, .1); border-color: var(--err); }

/* ==========================================================================
   41. Customer panel shell: sidebar + top bar + content
   ==========================================================================
   Replaces the header-tabs layout. Desktop keeps a fixed sidebar (the panel is
   a workspace, not a marketing page); below 1024px the same sidebar slides in
   as a drawer over a scrim.
   ========================================================================== */
.p-shell { display: flex; min-height: 100dvh; }

/* ---------------------------------------------------------- sidebar ---- */
.p-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 0 0 268px;
    width: 268px;
    height: 100dvh;
    padding: 20px 16px 18px;
    border-inline-end: 1px solid var(--line);
    background: rgba(12, 13, 17, .72);
    backdrop-filter: blur(18px);
    z-index: 60;
}
[data-theme="light"] .p-sidebar { background: rgba(255, 253, 247, .86); }

.p-brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 2px; }
.p-brand-mark img { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-gold); object-fit: cover; }
.p-brand-text { display: grid; min-width: 0; }
.p-brand-text strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.p-brand-text small { font-size: 10px; letter-spacing: .04em; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-nav { display: grid; gap: 2px; overflow-y: auto; flex: 1 1 auto; padding-bottom: 4px; scrollbar-width: thin; }
.p-nav-label {
    margin: 14px 10px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.p-nav-label:first-child { margin-top: 4px; }

.p-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid transparent;
    transition: background .16s, color .16s, border-color .16s;
}
.p-nav-item svg { flex: 0 0 auto; opacity: .9; }
.p-nav-item:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
[data-theme="light"] .p-nav-item:hover { background: rgba(28, 24, 14, .05); }

.p-nav-item.is-active {
    color: var(--gold-2);
    background: rgba(243, 200, 92, .12);
    border-color: var(--line-gold);
}
.p-nav-item.is-primary {
    margin: 6px 0;
    color: var(--on-gold);
    background: linear-gradient(135deg, #ffe9a0 0%, #efc24f 54%, #dca63b 100%);
    box-shadow: 0 6px 18px rgba(206, 155, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.p-nav-item.is-primary:hover { color: var(--on-gold); filter: brightness(1.04); }
.p-nav-item.is-primary.is-active { border-color: transparent; }

.p-nav-badge {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--on-gold);
    font-size: 11px;
    font-weight: 800;
}

.p-sidebar-foot { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }

.p-balance {
    display: grid;
    gap: 2px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
}
.p-balance-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-family: var(--font-mono); }
.p-balance strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.p-balance-add { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--gold-2); }
.p-balance-add:hover { color: var(--gold); }

.p-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--muted-2);
}
.p-foot-link:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }

/* ---------------------------------------------------------- top bar ---- */
.p-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.p-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px clamp(14px, 2.4vw, 26px);
    border-bottom: 1px solid var(--line-2);
    background: rgba(10, 11, 14, .78);
    backdrop-filter: blur(16px);
}
[data-theme="light"] .p-topbar { background: rgba(250, 247, 240, .84); }

.p-topbar-text { display: grid; min-width: 0; }
.p-topbar-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.p-topbar-sub {
    font-size: 11.5px;
    color: var(--muted-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.p-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .16s, color .16s, background .16s;
}
.p-icon-btn:hover { border-color: var(--line-gold); color: var(--gold-2); }
.p-icon-btn .s-lang-code { font-size: 10.5px; }
.p-logout form, .p-logout { display: contents; }

.p-menu-toggle-hidden { display: none; }

/* ---------------------------------------------------------- content ---- */
.p-content {
    flex: 1 1 auto;
    padding: clamp(18px, 2.6vw, 32px) clamp(14px, 2.6vw, 30px) 56px;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}
/* Pages already wrap themselves in .s-shell .u-shell: inside the new content
   column that would centre them again, so flatten it. */
.p-content .s-shell,
.p-content .u-shell {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
}
.p-content .u-head { margin-bottom: 22px; }
.p-content .u-head .s-h2 { font-size: clamp(22px, 2.4vw, 30px); }

/* ---------------------------------------------------------- dashboard -- */
.p-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.p-hero-text { display: flex; align-items: center; gap: 14px; min-width: 0; }

.p-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(243, 200, 92, .3), rgba(243, 200, 92, .08));
    border: 1px solid var(--line-gold);
    color: var(--gold-2);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.p-hero h1 { margin: 0 0 3px; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.03em; }
.p-hero p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.p-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.p-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.p-kpi {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    overflow: hidden;
}
.p-kpi::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(243, 200, 92, .5), transparent);
    opacity: 0;
}
.p-kpi.is-gold, .p-kpi.is-warn { border-color: var(--line-gold); }
.p-kpi.is-gold::after, .p-kpi.is-warn::after { opacity: 1; }

.p-kpi-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.p-kpi-value { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.p-kpi-foot { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--gold-2); }
.p-kpi-foot.is-muted { color: var(--muted-2); font-weight: 500; }
a.p-kpi-foot:hover { color: var(--gold); }

.p-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.p-stack { display: grid; gap: 16px; align-content: start; }

.p-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    overflow: hidden;
}
.p-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
}
.p-panel-head h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.p-panel-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--gold-2); }
.p-panel-link:hover { color: var(--gold); }
.p-panel-note { margin: 0; padding: 12px 18px 16px; font-size: 12px; color: var(--muted-2); line-height: 1.6; }

.p-empty { display: grid; gap: 12px; justify-items: start; padding: 22px 18px; }
.p-empty p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* Order list */
.p-order-list { display: grid; }
.p-order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
}
.p-order:last-child { border-bottom: 0; }
.p-order-main { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.p-order-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-order-id { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.p-order-title strong { font-size: 14px; }
.p-order-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted-2); }

.p-order-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; max-width: 320px; }
[data-theme="light"] .p-order-bar { background: rgba(28, 24, 14, .09); }
.p-order-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--gold)); }
.p-order-bar span.is-high { background: linear-gradient(90deg, var(--gold), var(--err)); }

.p-order-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
}
.p-order-go:hover { border-color: var(--line-gold); color: var(--gold-2); }

/* Trials */
.p-trial-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 4px; }
.p-trial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.p-trial:hover { border-color: var(--line-gold); color: var(--gold-2); }
.p-trial-flag { font-size: 15px; }

/* Bonus tiers */
.p-tier-list { display: grid; gap: 8px; margin: 0; padding: 14px 18px 16px; list-style: none; }
.p-tier-list li {
    padding: 9px 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

/* Quick actions */
.p-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 14px 18px 16px; }
.p-quick-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.p-quick-item:hover { border-color: var(--line-gold); color: var(--gold-2); background: rgba(243, 200, 92, .06); }

/* Payments list */
.p-pay-list { display: grid; margin: 0; padding: 0; list-style: none; }
.p-pay-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-2);
    font-size: 12.5px;
}
.p-pay-list li:last-child { border-bottom: 0; }
.p-pay-method { color: var(--muted-2); }
.p-pay-amount { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 600; }

/* ---------------------------------------------------------- responsive */
.p-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    border: 0;
    background: rgba(4, 5, 8, .6);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .p-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-102%);
        transition: transform .24s var(--ease);
        box-shadow: 24px 0 60px rgba(0, 0, 0, .4);
    }
    [dir="rtl"] .p-sidebar { transform: translateX(102%); }

    .p-sidebar.is-open { transform: translateX(0); }
    .p-scrim.is-open { display: block; }

    .p-columns { grid-template-columns: minmax(0, 1fr); }
    .p-topbar-title { font-size: 14px; }
}

@media (max-width: 640px) {
    .p-topbar { padding: 10px 12px; gap: 8px; }
    .p-topbar-sub { display: none; }
    .p-icon-btn { width: 38px; height: 38px; border-radius: 10px; }
    .p-content { padding: 14px 12px 44px; }
    .p-hero { gap: 12px; }
    .p-hero h1 { font-size: 19px; }
    .p-hero-actions { width: 100%; }
    .p-hero-actions .s-btn { flex: 1 1 auto; }
    .p-order { padding: 12px 14px; }
    .p-kpi { padding: 14px; }
    .p-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; border-radius: 13px; }
}

/* Drawer polish + card consistency inside the new panel */
.p-sidebar-close {
    display: none;
    position: absolute;
    top: 14px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.p-sidebar-close:hover { color: var(--ink); border-color: var(--line-gold); }

@media (max-width: 1024px) {
    .p-sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
    body.p-drawer-open { overflow: hidden; }
    .p-sidebar { padding-top: 56px; }
}

/* Cards on the remaining pages share the dashboard's radius and rhythm. */
.p-content .s-card { border-radius: 16px; }
.p-content .s-grid { gap: 16px; }
.p-content .s-section-more { margin-top: 18px; }
.p-content .u-empty { padding: 26px 20px; }

/* ---------- 42. Top bar: account summary, sidebar tools ---------- */
.p-topbar-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 52ch; }
.p-topbar-dot { opacity: .45; }
.p-topbar-user { font-family: var(--font-mono); }

/* Visitor controls live in the header on every screen. */
.p-sidebar-tools { display: none; gap: 6px; align-items: center; }
.p-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
}
.p-tool:hover { color: var(--gold-2); border-color: var(--line-gold); }
.p-tool .s-lang-code { font-size: 11px; }
.p-lang { position: relative; }



/* Theme picker (branding) */
.p-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 10px;
    margin: 14px 0 4px;
}
.p-theme-option { display: grid; gap: 7px; cursor: pointer; }
.p-theme-option input { position: absolute; opacity: 0; pointer-events: none; }

.p-theme-preview {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 58px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--t-primary), var(--t-accent));
    transition: border-color .16s, transform .16s;
}
.p-theme-preview i { display: block; width: 12px; height: 100%; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.p-theme-preview i:nth-child(2) { height: 62%; }
.p-theme-preview i:nth-child(3) { height: 38%; }

.p-theme-option:hover .p-theme-preview { transform: translateY(-1px); }
.p-theme-option input:checked + .p-theme-preview {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(243, 200, 92, .45);
}
.p-theme-option input:focus-visible + .p-theme-preview { outline: 2px solid var(--gold); outline-offset: 2px; }

.p-theme-name { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.p-theme-option input:checked ~ .p-theme-name { color: var(--ink); }

/* ---------- 43. Orders page (redesigned) ---------- */
.p-orders-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.p-orders-dot { opacity: .4; }
.p-orders-due { color: var(--warn); font-weight: 600; }

.p-orders { display: grid; gap: 14px; }

.p-order-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    overflow: hidden;
    transition: border-color .16s;
}
.p-order-card:hover { border-color: rgba(255, 255, 255, .16); }
.p-order-card.is-due { border-color: var(--line-gold); }

.p-oc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}
[data-theme="light"] .p-oc-head { background: linear-gradient(180deg, rgba(28, 24, 14, .03), transparent); }

.p-oc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.p-oc-id { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.p-oc-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }

/* Rename control */
.p-oc-rename { position: relative; }
.p-oc-rename > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.p-oc-rename > summary::-webkit-details-marker { display: none; }
.p-oc-rename > summary:hover { color: var(--gold-2); border-color: var(--line-gold); }
.p-oc-rename form {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: flex;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-solid);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}
.p-oc-rename form .s-input { width: 190px; padding: 8px 10px; font-size: 13px; }

.p-oc-body { padding: 16px 18px 6px; }

.p-oc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 20px;
    margin: 0;
}
.p-oc-facts > div { min-width: 0; }
.p-oc-facts dt {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 3px;
}
.p-oc-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; }
.p-oc-email { font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }

.p-oc-bar {
    height: 5px;
    margin: 16px 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
[data-theme="light"] .p-oc-bar { background: rgba(28, 24, 14, .08); }
.p-oc-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--gold)); }
.p-oc-bar span.is-high { background: linear-gradient(90deg, var(--gold), var(--err)); }

.p-oc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px 16px;
}
.p-oc-actions-main, .p-oc-actions-manage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-oc-actions-main form, .p-oc-actions-manage form { display: inline-flex; }

.p-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

@media (max-width: 720px) {
    .p-oc-head, .p-oc-body, .p-oc-actions { padding-inline: 14px; }
    .p-oc-actions { flex-direction: column; align-items: stretch; }
    .p-oc-actions-main, .p-oc-actions-manage { width: 100%; }
    .p-oc-actions-main > *, .p-oc-actions-manage > * { flex: 1 1 auto; }

    /* Only the card's own action buttons stretch. A descendant selector here
       used to reach the buttons inside the manage dialog, squeezing its
       inputs to a sliver on phones. */
    .p-oc-actions-main > .s-btn,
    .p-oc-actions-main > form > .s-btn,
    .p-oc-actions-manage > .s-btn,
    .p-oc-actions-manage > form > .s-btn { width: 100%; justify-content: center; }

    .p-oc-rename form { inset-inline: 0; }
    .p-oc-rename form .s-input { width: 100%; }
}

@media (max-width: 420px) {
    .p-oc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The visitor controls live in the header on every screen (same size/design as
   before); only the menu toggle is mobile-only, since the sidebar is permanent
   on desktop. */
@media (min-width: 1025px) {
    .p-topbar .p-icon-btn.p-menu-btn { display: none; }
    .p-topbar-actions { gap: 8px; }
}

/* ---------- 44. Manage-order modal layout ---------- */
.u-modal { width: min(620px, calc(100% - 28px)); }

.u-modal-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.u-modal-row > .u-modal-block { min-width: 0; }

.u-modal-tile {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}
[data-theme="light"] .u-modal-tile { background: rgba(28, 24, 14, .025); }
.u-modal-tile-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.u-modal-control { display: flex; align-items: center; gap: 8px; }
.u-modal-control .s-input { flex: 1 1 60px; min-width: 0; width: auto; }
.u-modal-control .s-btn { flex: 0 0 auto; }

/* The cancel action closes the dialog: full width, centred, quiet until hover. */
.u-modal-cancel { justify-content: center; text-align: center; }

@media (max-width: 560px) {
    .u-modal-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .u-modal-body { padding: 14px 14px 18px; }
    .u-modal-head { padding: 12px 14px; }
}

/* Old inline form helpers kept for the compact rules inside the modal */
.u-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The sidebar brand now uses the shared .brand-mark tile from site.css, so the
   old bespoke wrapper only keeps its layout role. */
.p-brand { gap: 12px; }
.p-brand-text strong { line-height: 1.2; }

/* ---------- 45. Renew dialog + modal hardening ---------- */
/* The dialog is a flex column: the head and the actions stay put while the
   body scrolls, so a long form never pushes the submit button off-screen on a
   phone. `:not([open])` keeps the native "closed" behaviour, which the author
   `display` would otherwise override. */
.u-modal {
    width: min(620px, calc(100% - 24px));
    max-width: 100%;
    max-height: min(86vh, 760px);
    max-height: min(88dvh, 760px);
    display: flex;
    flex-direction: column;
}
.u-modal:not([open]) { display: none; }

.u-modal-head { flex: 0 0 auto; }
.u-modal-title { overflow-wrap: anywhere; }

.u-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The renew dialog wraps body + footer in a form, so the form carries the
   column and the body keeps the scroll. */
.u-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.u-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line-2);
}

.u-field { display: grid; gap: 6px; min-width: 0; }
.u-field > .s-hint { margin: 0; }
.u-field .s-input { width: 100%; }

.u-modal-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}
[data-theme="light"] .u-modal-summary { background: rgba(28, 24, 14, .025); }
.u-modal-summary > div { min-width: 0; }
.u-modal-summary .s-summary-label { display: block; margin-bottom: 4px; }
.u-modal-summary .s-summary-price { margin: 0; font-size: clamp(18px, 5vw, 22px); }
.u-modal-summary .s-hint { margin: 0; max-width: 40ch; min-width: 0; }
.u-modal-summary .s-hint:empty { display: none; }

/* Two limit tiles need real width: below 640px they stack. */
@media (max-width: 640px) {
    .u-modal-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 560px) {
    .u-modal { width: calc(100% - 16px); border-radius: 16px; }
    .u-modal-body { padding: 14px; gap: 16px; }
    .u-modal-head { padding: 12px 14px; }
    .u-modal-title { font-size: 15.5px; }
    .u-modal-foot { padding: 12px 14px; }
    .u-modal-summary { padding: 10px 12px; }
}

/* Phones: the actions become full-width stacked buttons (primary on top). */
@media (max-width: 520px) {
    .u-modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .u-modal-foot .s-btn { width: 100%; justify-content: center; }

    /* 16px stops iOS from zooming the whole page on focus. */
    .u-modal .s-input,
    .u-modal select,
    .u-modal input[type="number"],
    .u-modal input[type="text"] { font-size: 16px; }

    .u-modal-summary { flex-direction: column; align-items: flex-start; }
    .u-modal-summary .s-hint { max-width: none; }
    .u-modal-tile { padding: 10px; }
}

/* Very narrow screens: the input/button pair wraps instead of squeezing. */
@media (max-width: 400px) {
    .u-modal-control { flex-wrap: wrap; }
    .u-modal-control .s-input { flex: 1 1 100%; }
    .u-modal-control .s-btn { flex: 1 1 100%; justify-content: center; }
}