/* ============================================================================
   ONFLOW ADS — DESIGN SYSTEM
   The shared, production-grade foundation for the entire onflowads.com site.
   ----------------------------------------------------------------------------
   Brand: red (#FB2C36) -> deep red (#E11D2E) gradient on a near-black canvas.
   Aesthetic: premium dark SaaS — glassmorphism, soft gradients, subtle grain,
   drifting aurora glows, tasteful micro-interactions. Linear / Stripe / Vercel
   tier polish.

   IMPORTANT FOR PAGE AUTHORS
   --------------------------
   * Do NOT edit this file from a page. Pages compose using the tokens and
     classes defined here, adding page-specific tweaks in a single <style>
     block in the page <head>.
   * The shared chrome (background decoration, gradient defs, fixed header/nav,
     scroll-progress bar, footer) is INJECTED by /main.js on every page. Pages
     ship only their <main> content.

   TABLE OF CONTENTS
   -----------------
    1.  Design tokens (custom properties)
    2.  Reset & base elements
    3.  Layout primitives (.container, .section, rhythm)
    4.  Typography helpers (gradient text, eyebrow, badge, pill, lead)
    5.  Background decoration (grid, aurora, grain) + scroll progress
    6.  Buttons (.btn + variants, shine sweep, focus rings)
    7.  Navbar (glass, scroll-shadow, links, mobile menu, hamburger)
    8.  Footer (multi-column + bottom bar)
    9.  Cards (.card, feature, pricing, spotlight hover)
    10. Forms (fields, validation, messages, auth split, password strength)
    11. Pricing comparison table
    12. FAQ accordion (native <details>)
    13. Marquee strip
    14. Stats band
    15. Steps / timeline
    16. Misc product surfaces (panels, chips, sparkline, avatars, logos)
    17. Utilities (reveal-on-scroll, count-up, dividers, spacing helpers)
    18. Responsive breakpoints
    19. Reduced-motion & print
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* --- Canvas & surfaces — "LUX" (dark · glass · electric) --------------- */
  --bg:            #050609;   /* page background, deepest near-black      */
  --bg-2:          #07080d;   /* slightly raised band (footer, sections)  */
  --bg-3:          #0e0f16;   /* raised inputs / nested surfaces          */
  --surface:       rgba(255, 255, 255, 0.04);   /* default card fill       */
  --surface-2:     rgba(255, 255, 255, 0.06);   /* hover / raised          */
  --surface-3:     rgba(255, 255, 255, 0.10);   /* active / strongest      */
  --glass:         rgba(6, 7, 11, 0.55);       /* nav glass (translucent) */
  --glass-solid:   rgba(6, 7, 11, 0.82);       /* nav glass scrolled       */
  /* Frosted-glass fill for panels/cards (paired with backdrop-filter). */
  --glass-fill:    linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018));
  --glass-blur:    blur(20px) saturate(150%);

  /* --- Borders ----------------------------------------------------------- */
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-faint:  rgba(255, 255, 255, 0.05);

  /* --- Text tiers -------------------------------------------------------- */
  --text:          #F4F5F7;   /* primary copy & headings                  */
  --text-dim:      #A7A8B0;   /* secondary copy                            */
  --text-faint:    #6B6C74;   /* tertiary / captions / labels             */
  --text-on-grad:  #FFFFFF;   /* text sitting on the bright gradient      */

  /* --- Brand colours — Onflow Red (red → deep red → coral) --------------- */
  --brand-blue:    #FB2C36;
  --brand-indigo:  #E11D2E;
  --blue:          #FB2C36;   /* primary accent (brand red)               */
  --indigo:        #E11D2E;   /* secondary accent (deep red)              */
  --violet:        #E11D2E;
  --cyan:          #FB2C36;   /* cool accent — "all platforms" energy     */
  --sky:           #FB2C36;
  --fuchsia:       #FF6B4A;   /* spectrum accent (marketplace only)       */

  /* Owner-uploaded logo mark — overridden site-wide by the growth layer when an
     admin uploads one (Branding panel); else the bundled vector mark. */
  --brand-logo:    url('/logo-mark.svg');

  /* --- Gradients --------------------------------------------------------- */
  --grad:          linear-gradient(120deg, #FF6B4A, #FB2C36 50%, #E11D2E);
  --grad-bright:   linear-gradient(120deg, #FF6B4A, #FB2C36 50%, #E11D2E);
  --grad-soft:     linear-gradient(135deg, rgba(251,44,54,0.16), rgba(225,29,46,0.16));
  --grad-text:     linear-gradient(120deg, #FF6B4A, #FB2C36 50%, #E11D2E);
  --grad-conic:    conic-gradient(from 180deg at 50% 50%, #FB2C36, #E11D2E, #FF6B4A, #FB2C36);
  /* Marketplace spectrum — used sparingly to signal "every platform". */
  --grad-spectrum: linear-gradient(100deg, #FB2C36, #E11D2E 45%, #FF6B4A);
  --grad-spectrum-text: linear-gradient(100deg, #FF6B4A, #FB2C36 35%, #E11D2E 55%, #FF6B4A 80%, #FB2C36);
  --grad-aurora:   conic-gradient(from 210deg at 50% 50%, #FB2C36, #FF6B4A, #E11D2E, #FF6B4A, #FB2C36);

  /* --- Semantic colours -------------------------------------------------- */
  --success:       #34D399;
  --success-bg:    rgba(52, 211, 153, 0.12);
  --success-border:rgba(52, 211, 153, 0.35);
  --warn:          #f5b83d;
  --warn-bg:       rgba(245, 184, 61, 0.12);
  --warn-border:   rgba(245, 184, 61, 0.35);
  --danger:        #FF4D4D;
  --danger-bg:     rgba(255, 77, 77, 0.12);
  --danger-border: rgba(255, 77, 77, 0.4);

  /* --- Fonts ------------------------------------------------------------- */
  /* Display/headings use Space Grotesk (matches the lux marketing pages); body
     stays Inter. Both are loaded via the per-page Google Fonts <link>. */
  --disp: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing scale (8px base) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm:  10px;
  --radius:     18px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill:100px;
  --radius-full:9999px;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-sm:  0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow:     0 24px 70px -24px rgba(0, 0, 0, 0.7);
  --shadow-lg:  0 40px 100px -30px rgba(0, 0, 0, 0.8);
  --shadow-brand: 0 12px 34px rgba(251, 44, 54, 0.4);
  --shadow-brand-lg: 0 18px 50px rgba(251, 44, 54, 0.4);
  --ring:       0 0 0 3px rgba(251, 44, 54, 0.4);   /* focus-visible ring  */

  /* Checkmark glyph for custom checkboxes — exposed as a var so page-level
     accent overrides can re-use it instead of wiping it with `background:`. */
  --check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");

  /* --- Typographic scale (fluid) ----------------------------------------- */
  --fs-xs:   0.78rem;
  --fs-sm:   0.88rem;
  --fs-base: 1rem;
  --fs-md:   1.06rem;
  --fs-lg:   1.13rem;
  --fs-xl:   clamp(1.25rem, 1.6vw, 1.4rem);
  --fs-2xl:  clamp(1.5rem, 2.4vw, 1.85rem);
  --fs-3xl:  clamp(1.9rem, 3.6vw, 2.6rem);     /* section headings        */
  --fs-4xl:  clamp(2.5rem, 5.2vw, 3.9rem);     /* hero headings           */
  --lh-tight:1.08;
  --lh-snug: 1.25;
  --lh-base: 1.65;
  --tracking-tight: -0.035em;
  --tracking-snug:  -0.02em;
  --tracking-wide:  0.1em;

  /* --- Motion ------------------------------------------------------------ */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);     /* smooth ease-out      */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot     */
  --dur-fast:   0.18s;
  --dur:        0.3s;
  --dur-slow:   0.6s;

  /* --- Layout ------------------------------------------------------------ */
  --maxw:       1140px;        /* default content container               */
  --maxw-wide:  1280px;        /* wider sections                          */
  --maxw-narrow:760px;         /* prose / forms / FAQ                      */
  --nav-h:      74px;          /* reserved height of the fixed navbar     */
  --z-bg:       -1;
  --z-base:     1;
  --z-nav:      90;
  --z-progress: 100;
  --z-overlay:  120;
}

/* Honour a comfortable scroll offset so in-page anchors clear the fixed nav. */
:root { scroll-padding-top: calc(var(--nav-h) + 16px); }


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  /* Reserve room for the fixed header so it never causes layout shift. */
  padding-top: var(--nav-h);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
/* Default icon fill, BUT never override an explicit fill="none" — outline icons
   (the password eye, the email envelope, etc.) rely on it to stay stroke-only.
   A blanket `svg { fill: currentColor }` was filling those closed shapes solid,
   so they looked like grey blobs instead of icons. */
svg:not([fill="none"]) { fill: currentColor; }

a { color: inherit; text-decoration: none; }
a:not(.btn) { transition: color var(--dur-fast) ease; }

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { font-family: var(--disp); line-height: var(--lh-snug); font-weight: 700; letter-spacing: var(--tracking-snug); }

strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }

hr { border: 0; height: 1px; background: var(--border); }

::selection { background: rgba(251,44,54, 0.35); color: #fff; }

/* Custom scrollbar (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* Accessible "skip to content" link, injected by main.js */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-overlay);
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border-strong);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); outline: none; box-shadow: var(--ring); }

/* Visually-hidden but available to assistive tech. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Global, consistent focus ring for any keyboard-focused element. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }


/* ============================================================================
   3. LAYOUT PRIMITIVES
   ============================================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-6); }
.container--wide   { max-width: var(--maxw-wide); }
.container--narrow { max-width: var(--maxw-narrow); }

/* Vertical rhythm for full-width sections. */
.section { padding-block: var(--space-24); }
.section--sm { padding-block: var(--space-16); }
.section--lg { padding-block: var(--space-32); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--band { background: var(--bg-2); border-block: 1px solid var(--border); }

/* The standard centred section header (eyebrow + h2 + lead). */
.section__head { max-width: 680px; margin: 0 auto var(--space-12); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__head h2 { font-size: var(--fs-3xl); line-height: 1.15; }
.section__head p { color: var(--text-dim); margin-top: var(--space-3); font-size: var(--fs-md); }

/* Generic responsive grid helpers. */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column split (content + visual), used by heroes / feature spotlights. */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }
.split--reverse > :first-child { order: 2; }


/* ============================================================================
   4. TYPOGRAPHY HELPERS
   ============================================================================ */

/* Animated brand-gradient text (shimmer). */
.grad-text {
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
}
/* Static gradient text variant. */
.grad-text--static { animation: none; background: var(--grad-bright); }
@keyframes shimmer { to { background-position: 200% center; } }

/* Section super-label. */
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--space-3);
}

/* Pill badge with optional status dot. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-dim); font-size: 0.82rem; font-weight: 500;
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.badge__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Small inline pill / tag — neutral + semantic variants. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--text-dim); background: var(--surface);
}
.pill--brand   { color: var(--blue);    border-color: rgba(251,44,54,0.4);  background: var(--grad-soft); }
.pill--success { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.pill--warn    { color: var(--warn);    border-color: var(--warn-border);    background: var(--warn-bg); }
.pill--danger  { color: var(--danger);  border-color: var(--danger-border);  background: var(--danger-bg); }

/* Generous intro paragraph. */
.lead { font-size: var(--fs-lg); color: var(--text-dim); }

/* Page hero title scale (reusable across all pages). */
.h-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h-section { font-size: var(--fs-3xl); line-height: 1.15; }

/* Prose block for legal / about copy. */
.prose { max-width: var(--maxw-narrow); color: var(--text-dim); }
.prose h2 { color: var(--text); font-size: var(--fs-2xl); margin: var(--space-12) 0 var(--space-4); }
.prose h3 { color: var(--text); font-size: var(--fs-xl); margin: var(--space-8) 0 var(--space-3); }
.prose p  { margin-bottom: var(--space-4); }
.prose ul { margin: 0 0 var(--space-4) var(--space-5); }
.prose li { margin-bottom: var(--space-2); list-style: disc; }
.prose a  { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--indigo); }
.prose strong { color: var(--text); }


/* ============================================================================
   5. BACKGROUND DECORATION + SCROLL PROGRESS  (injected by main.js)
   ============================================================================ */
.bg-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Fine engineering grid, masked to fade out toward the bottom/edges. */
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% -10%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% -10%, #000 35%, transparent 100%);
}

/* Drifting aurora glows. */
.bg-aurora { position: absolute; border-radius: 50%; filter: blur(130px); opacity: 0.45; will-change: transform; }
.bg-aurora--1 { width: 560px; height: 560px; top: -180px; left: -140px; background: #FF6B4A; animation: drift1 22s var(--ease) infinite; }
.bg-aurora--2 { width: 520px; height: 520px; top: 8vh;  right: -160px; background: #E11D2E; animation: drift2 26s var(--ease) infinite; }
.bg-aurora--3 { width: 460px; height: 460px; top: 78vh; left: 30%;     background: #FF6B4A; opacity: 0.28; animation: drift1 30s var(--ease) infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,60px) scale(1.08); } }

/* Subtle film grain to break up the gradients. */
.bg-noise {
  position: absolute; inset: 0; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Top scroll-progress bar (sits above the nav). */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-bright); z-index: var(--z-progress);
  box-shadow: 0 0 12px rgba(251,44,54, 0.6);
  transition: width 0.1s linear; will-change: width;
}


/* ============================================================================
   6. BUTTONS
   ============================================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; font-weight: 600; font-size: 0.95rem; line-height: 1; font-family: inherit;
  padding: 13px 22px; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden;
  border: 1px solid transparent; white-space: nowrap; user-select: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) ease,
              background var(--dur) ease,
              border-color var(--dur) ease,
              opacity var(--dur) ease;
}
.btn:focus-visible { box-shadow: var(--ring); }
.btn svg { width: 18px; height: 18px; }

/* Sizes */
.btn--sm    { padding: 9px 16px;  font-size: 0.88rem; }
.btn--lg    { padding: 16px 28px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

/* Primary — brand gradient with a glowing lift. */
.btn--primary {
  background: var(--grad); color: var(--text-on-grad);
  box-shadow: var(--shadow-brand);
}
/* Hover raises via shadow + brightness only — no translateY, which would move the
   button out from under the cursor and cause a hover/unhover shake at its edge. */
.btn--primary:hover { box-shadow: var(--shadow-brand-lg); filter: brightness(1.06); }
.btn--primary:active { transform: translateY(1px); filter: none; }

/* Ghost — translucent surface. */
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn--ghost:active { transform: translateY(1px); }

/* Danger / warning — for destructive or cautionary confirm actions. */
.btn--danger { background: var(--danger); color: #1a0b0b; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(255,77,77, 0.65); }
.btn--danger:hover { box-shadow: 0 18px 40px -12px rgba(255,77,77, 0.8); filter: brightness(1.06); }
.btn--warn { background: var(--warn); color: #211400; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(245, 158, 11, 0.6); }
.btn--warn:hover { box-shadow: 0 18px 40px -12px rgba(245, 158, 11, 0.78); filter: brightness(1.06); }

/* Outline — transparent with brand border. */
.btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); background: var(--surface); }

/* Subtle link-style button. */
.btn--link { background: none; color: var(--text-dim); padding-inline: 4px; }
.btn--link:hover { color: var(--text); }

/* Shine sweep — add .btn--shine to a button to get a light pass on hover. */
.btn--shine::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease); pointer-events: none;
}
.btn--shine:hover::after { left: 140%; }

/* Loading / disabled states (set by the JS form handler). */
.btn[disabled], .btn.is-loading { opacity: 0.7; cursor: not-allowed; pointer-events: none; transform: none; }
.btn.is-loading { color: transparent; }
.btn.is-loading::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Icon-only button (e.g. mobile menu trigger lookalikes). */
.btn--icon { padding: 10px; border-radius: var(--radius-sm); }


/* ============================================================================
   7. NAVBAR  (injected by main.js)
   ============================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: var(--glass);
  /* Always-visible hairline so the glass bar never reads as see-through. */
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.nav.is-scrolled {
  background: var(--glass-solid);
  border-bottom-color: var(--border-strong);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.85);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }

/* Brand lockup (logo + wordmark). */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; letter-spacing: var(--tracking-snug); color: var(--text); }
.brand__logo { display: inline-block; border-radius: 8px; background: var(--brand-logo) center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(251,44,54, 0.4)); transition: transform var(--dur) var(--ease); }
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.08); }
.brand__accent { background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.brand__name { white-space: nowrap; }

/* Primary nav links — lux: uppercase, letter-spaced, gradient underline. */
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a:not(.btn) { position: relative; color: var(--text-dim); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color var(--dur-fast) ease; }
.nav__links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -7px; width: 0; height: 1.5px;
  background: var(--grad-bright); border-radius: 2px; transition: width 0.25s var(--ease);
}
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__links a:not(.btn):hover::after { width: 100%; }
/* Active page (main.js adds aria-current="page"). */
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]::after { width: 100%; }

/* Right-aligned auth/CTA group. */
.nav__cta { display: flex; align-items: center; gap: 14px; }

/* Animated hamburger. */
.nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; min-width: 44px; min-height: 44px; z-index: 95; }
.nav__toggle span { width: 26px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.28s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dimming overlay behind the open mobile menu. */
.nav__scrim {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 79; background: rgba(6, 7, 11, 0.6);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) ease, visibility var(--dur) ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }


/* ============================================================================
   8. FOOTER  (injected by main.js)
   ============================================================================ */
.footer { border-top: 1px solid var(--border); padding: var(--space-16) 0 var(--space-8); background: var(--bg-2); position: relative; margin-top: var(--space-8); }
.footer__inner { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8) var(--space-10); padding-bottom: var(--space-10); }
.footer__brand .brand { margin-bottom: var(--space-3); }
.footer__brand p { color: var(--text-faint); font-size: 0.92rem; max-width: 320px; margin-bottom: var(--space-5); }

/* Link groups. */
.footer__group h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; margin-bottom: var(--space-4); }
.footer__group ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__group a { color: var(--text-dim); font-size: 0.95rem; }
.footer__group a:hover { color: var(--text); }

/* CTA column. */
.footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.footer__cta p { font-size: 0.9rem; color: var(--text-faint); max-width: 200px; }

/* Bottom bar. */
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-6); border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 0.86rem;
}
.footer__social { display: flex; gap: var(--space-3); align-items: center; }
.footer__social a { display: inline-flex; padding: 6px; border-radius: var(--radius-sm); transition: background var(--dur) ease, transform var(--dur) ease; }
.footer__social a:hover { background: var(--surface-2); transform: translateY(-2px); }


/* ============================================================================
   9. CARDS
   ============================================================================ */

/* Generic surface card. */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-8); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, background var(--dur) ease, box-shadow var(--dur) ease;
}
.card--pad-sm { padding: var(--space-6); }
.card--pad-lg { padding: var(--space-10); }
.card--hover:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--surface-2); }

/* ---- Cursor-follow spotlight ----
   Add [data-spotlight] to any element. main.js writes --mx / --my on
   pointermove; these layers reveal a soft brand glow + gradient border. */
.card--spotlight::before,
.feature::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(225,29,46, 0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur) ease; pointer-events: none;
}
.card--spotlight::after,
.feature::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(251,44,54, 0.10), transparent 45%);
  opacity: 0; transition: opacity var(--dur) ease;
}
.card--spotlight:hover::before, .card--spotlight:hover::after,
.feature:hover::before, .feature:hover::after { opacity: 1; }

/* ---- Feature card ---- */
.feature {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-8); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, background var(--dur) ease;
}
.feature:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--surface-2); }
.feature__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--border);
  margin-bottom: var(--space-5); transition: transform var(--dur) var(--ease);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature:hover .feature__icon { transform: scale(1.1) rotate(-4deg); }
.feature h3 { font-size: 1.2rem; margin-bottom: 9px; position: relative; }
.feature p { color: var(--text-dim); font-size: 0.97rem; position: relative; }
.feature__link { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); color: var(--blue); font-weight: 600; font-size: 0.92rem; }
.feature__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.feature:hover .feature__link svg { transform: translateX(4px); }

/* ---- Pricing card ---- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }
.price-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, box-shadow var(--dur) ease;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.price-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
/* Highlighted / recommended plan. */
.price-card--featured {
  border-color: rgba(251,44,54, 0.5);
  background: linear-gradient(165deg, rgba(251,44,54, 0.10), var(--surface));
  box-shadow: 0 30px 70px -30px rgba(251,44,54, 0.5);
}
.price-card--featured::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-bright);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; pointer-events: none;
}
.price-card__badge {
  position: absolute; top: 18px; right: 18px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-on-grad);
  background: var(--grad); padding: 5px 12px; border-radius: var(--radius-pill);
}
.price-card__name { font-size: var(--fs-xl); font-weight: 700; }
.price-card__desc { color: var(--text-dim); font-size: 0.95rem; }
.price-card__price { display: flex; align-items: baseline; gap: 6px; }
.price-card__amount { font-size: 2.6rem; font-weight: 800; letter-spacing: var(--tracking-snug); }
.price-card__period { color: var(--text-faint); font-size: 0.95rem; }
.price-card__features { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.price-card__features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dim); font-size: 0.95rem; }
.price-card__features li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--success); }
.price-card__features li.is-off { color: var(--text-faint); }
.price-card__features li.is-off svg { color: var(--text-faint); }
.price-card .btn { margin-top: auto; }


/* ============================================================================
   10. FORMS
   ============================================================================ */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
/* Wrapper for batching fields inside a form (e.g. multi-step creds vs a 2FA
   block). A form spaces its rows with `gap`, which only reaches DIRECT children
   — so fields wrapped in a bare <div> lose that spacing and the row below them
   (a "remember me" / checkbox row with no label of its own) collapses against
   the input above it. Mirroring the form's column rhythm here keeps grouped
   controls evenly spaced on phones and laptops alike. Always wrap grouped
   fields in `.field-group`, never a bare <div>. */
.field-group { display: flex; flex-direction: column; gap: var(--space-5); }
.field-group[hidden] { display: none; }   /* keep JS show/hide toggles working */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field .req { color: var(--danger); margin-left: 2px; }

/* Inputs / textareas / selects. */
.input, .textarea, .select {
  width: 100%; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 0.97rem; line-height: 1.5;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand-indigo); background: var(--bg-2);
  box-shadow: 0 0 0 3px rgba(251,44,54, 0.18);
}
.textarea { resize: vertical; min-height: 130px; }

/* Native select arrow. */
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a6afc6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}

/* Input with a leading icon. */
.field--icon { position: relative; }
.field--icon .input { padding-left: 44px; }
.field__icon { position: absolute; left: 14px; bottom: 13px; width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; }

/* Password show/hide toggle — the icon is centered on the input via .input-wrap
   (so it doesn't drift down to the strength meter), with no stray button chrome. */
.field--password { position: relative; }
.input-wrap { position: relative; display: block; }
.input-wrap > .input { padding-right: 46px; }   /* keep text clear of the icon */
.field__reveal {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-dim); border-radius: 8px;
  transition: color var(--dur) ease, background var(--dur) ease;
}
.field__reveal:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.field__reveal:focus-visible { outline: 2px solid var(--brand-indigo); outline-offset: 2px; }
.field__reveal svg { width: 18px; height: 18px; display: block; }

/* Checkbox & radio. */
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 0.92rem; color: var(--text-dim); }
.check input[type="checkbox"], .check input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 1px; background: var(--bg-3);
  border: 1px solid var(--border-strong); cursor: pointer;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.check input[type="checkbox"] { border-radius: 6px; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--grad); border-color: transparent; }
.check input[type="checkbox"]:checked {
  background-image: var(--check-tick), var(--grad);
  background-repeat: no-repeat; background-position: center; background-size: 64% auto, cover;
}
.check input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--bg-3); }
.check input:focus-visible { box-shadow: var(--ring); }
.check a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* --- Validation states (set by main.js) --- */
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-color: var(--danger-border); background: rgba(255,77,77, 0.06); }
.field.is-invalid .input:focus,
.field.is-invalid .textarea:focus { box-shadow: 0 0 0 3px rgba(255,77,77, 0.2); }
.field__error { display: none; font-size: var(--fs-xs); color: var(--danger); }
.field.is-invalid .field__error { display: block; }

.field.is-valid .input { border-color: var(--success-border); }

/* --- Inline form message (success / error) --- */
.form__message {
  display: none; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--border);
}
.form__message.is-visible { display: flex; animation: msgIn 0.3s var(--ease); }
.form__message svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.form__message--success { color: #86EFC2; background: var(--success-bg); border-color: var(--success-border); }
.form__message--error   { color: #FF8A8A; background: var(--danger-bg);  border-color: var(--danger-border); }
@keyframes msgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Password-strength meter (inputs with data-strength) --- */
.strength { display: flex; flex-direction: column; gap: 6px; }
.strength__bars { display: flex; gap: 5px; }
.strength__bar { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); transition: background var(--dur) ease; }
.strength__label { font-size: var(--fs-xs); color: var(--text-faint); }
/* Strength levels (main.js sets data-level on .strength). */
.strength[data-level="1"] .strength__bar:nth-child(-n+1) { background: var(--danger); }
.strength[data-level="2"] .strength__bar:nth-child(-n+2) { background: var(--warn); }
.strength[data-level="3"] .strength__bar:nth-child(-n+3) { background: #eab308; }
.strength[data-level="4"] .strength__bar:nth-child(-n+4) { background: var(--success); }
.strength[data-level="1"] .strength__label { color: var(--danger); }
.strength[data-level="2"] .strength__label { color: var(--warn); }
.strength[data-level="3"] .strength__label { color: #eab308; }
.strength[data-level="4"] .strength__label { color: var(--success); }

/* --- AUTH split-screen layout --- */
.auth {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  min-height: calc(100vh - var(--nav-h));
  align-items: stretch;
}
/* Brand value-prop panel. */
.auth__aside {
  position: relative; overflow: hidden; padding: var(--space-16) var(--space-12);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-6);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251,44,54, 0.22), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(251,44,54, 0.20), transparent 55%),
    var(--bg-2);
  border-right: 1px solid var(--border);
}
.auth__aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background: var(--grad-conic); filter: blur(120px); opacity: 0.12; animation: spin 40s linear infinite;
}
.auth__aside-inner { position: relative; max-width: 420px; }
/* Block-level (it's inline-flex by default) so the marketplace badge that
   follows drops onto its OWN line below the wordmark instead of sitting beside
   it. width:fit-content keeps the lockup hugging the logo + name. */
.auth__aside .brand { display: flex; width: fit-content; margin-bottom: var(--space-6); }
.auth__aside h2 { font-size: var(--fs-2xl); line-height: 1.2; margin-bottom: var(--space-4); }
.auth__aside p { color: var(--text-dim); margin-bottom: var(--space-8); }
.auth__props { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__prop { display: flex; align-items: flex-start; gap: 13px; }
.auth__prop-icon { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.auth__prop-icon svg { width: 20px; height: 20px; }
.auth__prop strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.auth__prop span { color: var(--text-dim); font-size: 0.9rem; }
/* Form panel. */
.auth__main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-16) var(--space-12); }
.auth__form { width: 100%; max-width: 400px; }
.auth__form h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.auth__form > p { color: var(--text-dim); margin-bottom: var(--space-8); }
.auth__divider { display: flex; align-items: center; gap: 14px; color: var(--text-faint); font-size: 0.82rem; margin: var(--space-6) 0; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth__alt { text-align: center; margin-top: var(--space-6); color: var(--text-dim); font-size: 0.92rem; }
.auth__alt a { color: var(--blue); font-weight: 600; }
.auth__alt a:hover { color: var(--indigo); }

/* Auth is a focused flow: drop the marketing footer, and on mobile drop the
   duplicate aside brand (the fixed nav already shows the wordmark) so two logos
   don't stack at the top-left. */
body[data-page="signin"] .footer,
body[data-page="signup"] .footer { display: none; }
@media (max-width: 920px) {
  .auth__aside .brand { display: none; }
  /* Cancel the desktop edge-bleed negative margin on mobile so the stacked
     aside clears the fixed nav. More specific than the per-page inline rule. */
  body[data-page="signin"] .auth, body[data-page="signup"] .auth { margin-top: 0; }
  .auth__aside { padding-top: var(--space-8); }
}

/* --- Redesign (handoff "vAuth"): present signin/signup as a centered, elevated
   split CARD rather than a full-bleed split screen. Scoped to those two pages so
   the other .auth users (CP enlist/verify) are untouched. IDs/markup unchanged. --- */
body[data-page="signin"] .auth,
body[data-page="signup"] .auth {
  width: min(960px, 100%); min-height: 0;
  margin: var(--space-10) auto var(--space-16);
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
body[data-page="signin"] .auth__aside,
body[data-page="signup"] .auth__aside {
  border-right: 0;
  background: linear-gradient(150deg, rgba(251,44,54,.2), rgba(5,6,9,.6) 60%), var(--bg-2);
}
body[data-page="signin"] .auth__main,
body[data-page="signup"] .auth__main {
  background: rgba(10,11,17,.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: var(--space-12) var(--space-10);
}
/* Telegram-blue "Continue with Telegram" secondary button (handoff spec). */
body[data-page="signin"] .auth__tg,
body[data-page="signin"] .auth__social,
body[data-page="signup"] .auth__tg,
body[data-page="signup"] .auth__social {
  background: rgba(34,158,217,.12); border: 1px solid rgba(34,158,217,.35); color: var(--text);
}
body[data-page="signin"] .auth__tg:hover,
body[data-page="signin"] .auth__social:hover,
body[data-page="signup"] .auth__tg:hover,
body[data-page="signup"] .auth__social:hover {
  background: rgba(34,158,217,.2); border-color: rgba(34,158,217,.5); color: #fff;
}
@media (max-width: 720px) {
  body[data-page="signin"] .auth, body[data-page="signup"] .auth { border-radius: 18px; margin: var(--space-6) auto var(--space-10); }
}


/* ============================================================================
   11. PRICING COMPARISON TABLE
   ============================================================================ */
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.95rem; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { font-weight: 700; color: var(--text); background: var(--surface); }
@media (max-width: 540px) { .compare th, .compare td { padding: 13px 14px; } }
.compare thead th:not(:first-child) { text-align: center; }
.compare tbody td:not(:first-child) { text-align: center; color: var(--text-dim); }
.compare tbody th { font-weight: 500; color: var(--text); }
.compare tbody tr:hover { background: var(--surface); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare__col-featured { background: linear-gradient(180deg, rgba(251,44,54,0.10), transparent); }
.compare .yes svg { width: 20px; height: 20px; color: var(--success); display: inline-block; }
.compare .no  { color: var(--text-faint); }
.compare__group td { background: var(--bg-2); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }


/* ============================================================================
   12. FAQ ACCORDION  (native <details>)
   ============================================================================ */
.faq { max-width: var(--maxw-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px var(--space-6); transition: border-color 0.25s ease, background 0.25s ease; }
.faq__item[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq__item summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-md);
  padding: 19px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { box-shadow: var(--ring); border-radius: var(--radius-sm); }
.faq__item summary::after { content: '+'; font-size: 1.6rem; font-weight: 400; color: var(--blue); transition: transform var(--dur) var(--ease); flex-shrink: 0; line-height: 1; }
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item p { color: var(--text-dim); padding-bottom: 22px; }


/* ============================================================================
   13. MARQUEE STRIP
   ============================================================================ */
.marquee {
  overflow: hidden; border-block: 1px solid var(--border); background: var(--surface); padding: 16px 0;
  /* Breathing room so the moving strip never crowds the content above/below it
     (kept modest so it doesn't stack into a void against neighbouring sections). */
  margin-block: var(--space-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 26px; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: 0.95rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.marquee__track .dot { color: var(--indigo); }
@keyframes marquee { to { transform: translateX(-50%); } }


/* ============================================================================
   14. STATS BAND
   ============================================================================ */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stats-band--3 { grid-template-columns: repeat(3, 1fr); }
.stat-block { text-align: center; padding: var(--space-6); }
.stat-block__num {
  font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: var(--tracking-snug);
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; line-height: 1.1;
}
.stat-block__label { color: var(--text-dim); font-size: 0.95rem; margin-top: 6px; }

/* Inline hero stats row. */
.hero-stats { display: flex; gap: 44px; flex-wrap: wrap; }
.hero-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stats .stat__num { font-size: 1.85rem; font-weight: 800; letter-spacing: var(--tracking-snug); background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-stats .stat__unit { font-size: 1rem; font-weight: 700; margin-left: 2px; }
.hero-stats .stat__label { font-size: 0.85rem; color: var(--text-faint); }


/* ============================================================================
   15. STEPS / TIMELINE
   ============================================================================ */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.steps__line { position: absolute; top: 51px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); z-index: 0; }
.step { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-8) var(--space-6); transition: transform var(--dur) var(--ease), border-color var(--dur) ease; }
.step:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.step__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--grad); color: var(--text-on-grad); font-weight: 800; font-size: 1.15rem; margin-bottom: var(--space-5); box-shadow: 0 10px 26px -10px rgba(251,44,54, 0.7); }
.step h3 { font-size: 1.2rem; margin-bottom: 9px; }
.step p { color: var(--text-dim); font-size: 0.97rem; }

/* Vertical timeline variant. */
.timeline { position: relative; max-width: var(--maxw-narrow); margin: 0 auto; padding-left: var(--space-10); }
.timeline::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--brand-blue), var(--brand-indigo), transparent); }
.timeline__item { position: relative; padding-bottom: var(--space-10); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: calc(-1 * var(--space-10) + 7px); top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--bg); }
.timeline__item h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.timeline__item p { color: var(--text-dim); }
.timeline__time { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
/* Tighten the rail gutter on phones so step cards aren't shoved right. */
@media (max-width: 560px) {
  .timeline { padding-left: 28px; }
  .timeline::before { left: 9px; }
  .timeline__dot { left: calc(-1 * 28px + 1px); }
  .timeline__item { padding-bottom: var(--space-8); }
}


/* ============================================================================
   16. MISC PRODUCT SURFACES (illustrative mockups)
   ============================================================================ */

/* Hero visual stage. */
.hero__visual { position: relative; height: 440px; perspective: 1200px; }
.orb { position: absolute; inset: 14% 12%; border-radius: 50%; background: var(--grad); filter: blur(70px); opacity: 0.4; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.5; } }

/* Glass product panel (3D tilt set by main.js). */
.panel {
  position: absolute; top: 50%; left: 50%; width: 340px;
  transform: translate(-50%, -50%) rotateY(-12deg) rotateX(6deg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-strong); border-radius: 20px; padding: 22px;
  box-shadow: var(--shadow); backdrop-filter: blur(12px); transition: transform 0.4s var(--ease);
}
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.panel__channel { display: flex; align-items: center; gap: 11px; }
.panel__avatar { width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.3rem; border-radius: 12px; background: var(--grad-soft); border: 1px solid var(--border); }
.panel__channel strong { display: block; font-size: 0.95rem; }
.panel__channel small { color: var(--text-faint); font-size: 0.78rem; }
.panel__pill { font-size: 0.78rem; font-weight: 700; color: var(--success); background: var(--success-bg); border: 1px solid var(--success-border); padding: 5px 10px; border-radius: var(--radius-pill); }
.panel__metric { display: flex; flex-direction: column; margin-bottom: 6px; }
.panel__metric-label { font-size: 0.8rem; color: var(--text-faint); }
.panel__metric-value { font-size: 2rem; font-weight: 800; letter-spacing: var(--tracking-snug); }

/* Animated sparkline. */
.spark { width: 100%; height: 96px; margin-top: 8px; display: block; }
.spark__line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.4s var(--ease) forwards 0.3s; }
.spark__area { opacity: 0; animation: fadein 1.2s ease forwards 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* Floating info chips. */
.chip { position: absolute; display: flex; align-items: center; gap: 11px; background: rgba(6, 7, 11, 0.82); border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 15px; box-shadow: var(--shadow); backdrop-filter: blur(10px); animation: float 6s ease-in-out infinite; }
.chip span { font-size: 1.4rem; }
.chip strong { display: block; font-size: 0.86rem; }
.chip small { color: var(--text-faint); font-size: 0.76rem; }
.chip--1 { top: 8px; left: -24px; animation-delay: 0s; }
.chip--2 { bottom: 14px; right: -28px; animation-delay: 2.5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Platform tiles (real brand SVGs go inside .platform__icon). */
.platforms { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.platform { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 12px; text-align: center; transition: transform var(--dur) var(--ease), border-color var(--dur) ease, box-shadow var(--dur) ease; }
.platform:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--glow, var(--indigo)) 55%, transparent); box-shadow: 0 18px 44px -20px var(--glow, rgba(251,44,54,0.6)); }
.platform--live { border-color: rgba(251,44,54, 0.45); background: linear-gradient(160deg, rgba(251,44,54, 0.12), transparent); }
.platform__icon { display: inline-flex; transition: transform 0.35s var(--ease); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4)); }
.platform:hover .platform__icon { transform: scale(1.16) translateY(-2px); }
.platform__name { font-weight: 600; font-size: 0.95rem; }
.platform__tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding: 3px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.platform__tag--live { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }

/* CTA panel. */
.cta__panel { position: relative; text-align: center; border-radius: var(--radius-lg); padding: 72px 32px; background: linear-gradient(135deg, rgba(251,44,54, 0.14), rgba(251,44,54, 0.14)); border: 1px solid var(--border-strong); overflow: hidden; }
.cta__glow { position: absolute; top: -60%; left: 50%; width: 600px; height: 600px; transform: translateX(-50%); background: radial-gradient(circle, rgba(251,44,54, 0.4), transparent 60%); filter: blur(40px); pointer-events: none; }
.cta__panel h2 { position: relative; font-size: var(--fs-3xl); margin-bottom: 12px; }
.cta__panel p { position: relative; color: var(--text-dim); font-size: 1.1rem; margin-bottom: 30px; }
.cta__panel .btn { position: relative; }

/* Avatar. */
.avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); font-size: 1.2rem; flex-shrink: 0; }


/* ============================================================================
   17. UTILITIES
   ============================================================================ */

/* Reveal-on-scroll (main.js adds .is-visible when in view). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(0.96); }
.reveal--left.is-visible, .reveal--right.is-visible, .reveal--scale.is-visible { transform: none; }

/* Count-up target (keeps width stable while numbers tick). */
[data-count] { font-variant-numeric: tabular-nums; }

/* Text alignment + display helpers. */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-dim    { color: var(--text-dim); }
.text-faint  { color: var(--text-faint); }
.flex        { display: flex; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Margin helpers (top). */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-8 { margin-top: var(--space-8); }
.mt-12{ margin-top: var(--space-12); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }

/* Button cluster. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }


/* ============================================================================
   18. RESPONSIVE BREAKPOINTS
   ============================================================================ */
@media (max-width: 1024px) {
  .platforms { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cta { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .footer__cta p { max-width: none; }
}

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split--reverse > :first-child { order: 0; }
  .hero__visual { height: 360px; order: 2; }
  .grid--3, .grid--4, .pricing, .steps { grid-template-columns: 1fr 1fr; }
  .steps__line { display: none; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  /* Auth collapses to a single column. On phones the SIGN-IN/SIGN-UP FORM comes
     first (on top) so people can act immediately; the marketing aside follows. */
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__aside { border-right: 0; border-top: 1px solid var(--border); padding: var(--space-12); order: 2; }
  .auth__main { padding: var(--space-12); order: 1; }
}

@media (max-width: 720px) {
  :root { --nav-h: 64px; }
  .section { padding-block: var(--space-16); }
  /* Scale the new breathing-room margins down a touch on phones. */
  .marquee { margin-block: var(--space-6); }
  .footer { margin-top: var(--space-6); }

  /* Mobile nav: slide-down sheet. */
  .nav__links {
    position: fixed; top: var(--nav-h); right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(6, 7, 11, 0.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 22px;
    /* Allow the sheet to scroll when the Platforms accordion is expanded; leave
       a little bottom breathing room (incl. iOS safe area) so nothing is cut off. */
    max-height: calc(100dvh - var(--nav-h) - 12px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    /* Hide the closed sheet by a distance that doesn't depend on its own height:
       a short sheet (e.g. signed-in, just the avatar) must still clear the bar
       instead of dipping back down and painting over the logo. */
    transform: translateY(calc(-100% - var(--nav-h) - 12px));
    transition: transform 0.32s var(--ease), visibility 0.32s var(--ease); visibility: hidden; z-index: 80;
  }
  .nav__links.is-open { transform: translateY(0); visibility: visible; }
  .nav__links a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--border); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__cta { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
  .nav__cta .btn { justify-content: center; }
  .nav__toggle { display: flex; }

  .form__row { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
}

@media (max-width: 540px) {
  .grid--2, .grid--3, .grid--4, .pricing, .steps { grid-template-columns: 1fr; }
  .platforms, .stats-band { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { flex-wrap: wrap; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .chip--1 { left: 0; } .chip--2 { right: 0; }
  .btn--lg { padding: 14px 22px; }
  /* Keep generous card padding from crowding content once the viewport is
     narrow — content stays evenly inset from the box edge on phones too. */
  .card, .card--pad-lg { padding: var(--space-6); }
  .auth__aside, .auth__main { padding: var(--space-8) var(--space-6); }
  .price-card, .feature { padding: var(--space-6); }
}

/* Smallest phones (≤480px): tighten gutters, stack the footer, calm the rhythm
   so every page stays usable and edge-to-edge clean without horizontal scroll. */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-12); }
  .section--sm { padding-block: var(--space-10); }
  .section--lg { padding-block: var(--space-16); }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { gap: var(--space-3); }
  .btn--lg { padding: 13px 18px; font-size: 0.95rem; }
  /* Never let a long word or inline code force a sideways scroll. */
  h1, h2, h3 { overflow-wrap: anywhere; }
}


/* ============================================================================
   19. REDUCED MOTION & PRINT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .spark__line { stroke-dashoffset: 0; }
  .spark__area { opacity: 1; }
  .btn--primary:hover, .btn--ghost:hover, .feature:hover, .card--hover:hover,
  .step:hover, .platform:hover, .price-card:hover { transform: none; }
}

@media print {
  .nav, .scroll-progress, .bg-decor, .footer__cta, .nav__scrim { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
}


/* ============================================================================
   20. MARKETPLACE & PLATFORM SYSTEM  (revamp — additive, backward compatible)
   ----------------------------------------------------------------------------
   New surfaces + motion for the multi-platform marketplace: the Platforms
   mega-menu, platform sub-nav, marketplace platform cards, bento grids,
   gradient-border glow cards, coming-soon heroes, trust/KPI bands, logo
   clouds, and a layer of advanced (but tasteful + reduced-motion-safe)
   animation utilities. Everything composes from the tokens above.
   ============================================================================ */

/* --- Spectrum text (marketplace "every platform" accent) ------------------ */
.grad-spectrum-text {
  background: var(--grad-spectrum-text); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s linear infinite;
}

/* --- NAV: Platforms mega-menu --------------------------------------------- */
.nav__item--has-menu { position: relative; display: inline-flex; align-items: center; }
.nav__menubtn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-family: inherit;
  background: none; border: 0; cursor: pointer; padding: 0; line-height: 1;
  transition: color var(--dur-fast) ease;
}
/* On desktop the mega-menu button sits inline with the tracked nav links. */
@media (min-width: 721px) { .nav__menubtn .nav__caret { width: 12px; height: 12px; } }
.nav__menubtn:hover, .nav__item--has-menu:focus-within .nav__menubtn,
.nav__menubtn[aria-expanded="true"], .nav__menubtn.is-active { color: var(--text); }
.nav__menubtn .nav__caret { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.nav__menubtn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(560px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 12px; border-radius: var(--radius);
  /* Near-opaque so page content never bleeds through (backdrop-filter is
     unreliable in some browsers — readability must not depend on it). */
  background: linear-gradient(180deg, #0e0f16, #050609);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: var(--z-nav);
}
.nav__menu::before {  /* hover bridge so the menu doesn't close in the gap */
  content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__menu-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background var(--dur) ease, border-color var(--dur) ease, transform var(--dur) var(--ease);
}
.nav__menu-link:hover { background: var(--surface-2); border-color: var(--border); transform: translateY(-1px); }
.nav__menu-ic { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.nav__menu-ic svg { width: 22px; height: 22px; }
.nav__menu-tx { min-width: 0; }
.nav__menu-tx strong { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--text); line-height: 1.2; }
.nav__menu-tx small { display: block; color: var(--text-faint); font-size: 0.78rem; margin-top: 2px; }
.nav__menu-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-faint); }
.nav__menu-tag--live { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.nav__menu-foot { grid-column: 1 / -1; margin-top: 4px; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.86rem; color: var(--text-dim); }
.nav__menu-foot a { color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.nav__menu-foot a svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.nav__menu-foot a:hover svg { transform: translateX(3px); }

/* --- Platform sub-nav (context bar on /telegram, etc.) -------------------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 70;
  /* Opaque so scrolled-under content never shows through the sticky bar. */
  background: rgba(6, 7, 11, 0.97); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.subnav__inner { display: flex; align-items: center; gap: var(--space-5); height: 56px; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.95rem; white-space: nowrap; padding-right: var(--space-5); border-right: 1px solid var(--border); }
.subnav__brand svg { width: 22px; height: 22px; }
.subnav__links { display: flex; align-items: center; gap: var(--space-5); }
.subnav__links a { position: relative; color: var(--text-dim); font-size: 0.92rem; font-weight: 500; white-space: nowrap; padding: 4px 0; }
.subnav__links a:hover { color: var(--text); }
.subnav__links a[aria-current="page"] { color: var(--text); }
.subnav__links a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-bright); border-radius: 2px; }
.subnav__cta { margin-left: auto; }

/* --- Marketplace platform card -------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, background var(--dur) ease, box-shadow var(--dur) ease;
}
.pcard::after {  /* per-platform glow wash on hover (uses --glow) */
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--glow, var(--indigo)) 22%, transparent), transparent 60%);
  transition: opacity var(--dur) ease;
}
.pcard:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--glow, var(--indigo)) 55%, transparent); box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--glow, rgba(251,44,54,0.7)) 70%, transparent); }
.pcard:hover::after { opacity: 1; }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--bg-3); border: 1px solid var(--border); transition: transform var(--dur) var(--ease); }
.pcard:hover .pcard__icon { transform: scale(1.08) rotate(-4deg); }
.pcard__icon svg { width: 30px; height: 30px; }
.pcard__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--tracking-snug); }
.pcard__desc { color: var(--text-dim); font-size: 0.94rem; flex: 1; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.pcard__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 700; font-size: 0.9rem; }
.pcard__cta svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.pcard:hover .pcard__cta svg { transform: translateX(4px); }
.pcard__status { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-faint); }
.pcard__status--live { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.pcard--live { border-color: color-mix(in srgb, var(--glow, var(--success)) 40%, transparent); }

/* --- Bento grid ----------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); grid-auto-rows: 1fr; }
.bento__cell {
  position: relative; grid-column: span 2; padding: var(--space-6);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) ease, background var(--dur) ease;
}
.bento__cell:hover { transform: translateY(-5px); border-color: var(--border-strong); background: var(--surface-2); }
.bento__cell--wide { grid-column: span 3; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--full { grid-column: span 6; }
.bento__cell--hero { grid-column: span 4; }
.bento__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--grad-soft); border: 1px solid var(--border); margin-bottom: var(--space-4); }
.bento__ic svg { width: 24px; height: 24px; }
.bento__cell h3 { font-size: 1.12rem; margin-bottom: 7px; }
.bento__cell p { color: var(--text-dim); font-size: 0.94rem; }
.bento__glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; background: radial-gradient(circle, rgba(251,44,54,0.5), transparent 65%); }

/* --- Gradient-border glow card -------------------------------------------- */
.glowcard { position: relative; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); padding: var(--space-8); overflow: hidden; }
.glowcard--grad::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad-aurora); background-size: 200% 200%; animation: gradmove 8s linear infinite; opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes gradmove { to { background-position: 200% 200%; } }

/* --- Trust / KPI band ----------------------------------------------------- */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.kpi__cell { position: relative; padding: var(--space-6); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; transition: border-color var(--dur) ease, transform var(--dur) var(--ease); }
.kpi__cell:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.kpi__num { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: var(--tracking-snug); background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.05; }
.kpi__label { color: var(--text-dim); font-size: 0.9rem; margin-top: 6px; }

/* ============================================================================
   REDESIGN — frosted-glass treatment for the shared card surfaces, applied
   site-wide: every page that uses these shared components (marketing AND the
   dashboard pages, which lean on .card heavily) inherits it. Pairs with the
   step-2 brand-red token migration. Placed AFTER the component definitions so it
   overrides their flat `background: var(--surface)` by source order; hover rules
   (higher specificity) still win. Bespoke per-page card classes keep their own
   translucent fills.
   ============================================================================ */
.card, .feature, .price-card, .glowcard, .kpi__cell, .step, .platform, .faq__item {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* --- Logo / platform cloud strip ----------------------------------------- */
.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-10); }
.logo-cloud__item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-faint); font-weight: 600; font-size: 0.95rem; opacity: 0.75; transition: opacity var(--dur) ease, color var(--dur) ease, transform var(--dur) var(--ease); }
.logo-cloud__item svg { width: 26px; height: 26px; }
.logo-cloud__item:hover { opacity: 1; color: var(--text); transform: translateY(-2px); }

/* --- Coming-soon hero + waitlist ----------------------------------------- */
.cs-hero { position: relative; text-align: center; padding-block: var(--space-20) var(--space-12); }
.cs-hero__badge { margin-bottom: var(--space-6); }
.cs-hero__icon { width: 96px; height: 96px; margin: 0 auto var(--space-6); display: grid; place-items: center; border-radius: 26px; background: var(--bg-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow); position: relative; }
.cs-hero__icon::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: radial-gradient(circle at 50% 0%, var(--glow, var(--indigo)), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.8; }
.cs-hero__icon svg { width: 52px; height: 52px; }
.cs-hero h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); }
.cs-hero__lead { font-size: var(--fs-lg); color: var(--text-dim); max-width: 56ch; margin: 0 auto var(--space-8); }
.waitlist { max-width: 460px; margin: 0 auto; }
.waitlist .form__row, .waitlist__row { display: flex; gap: 10px; }
.waitlist__row .field { flex: 1; }
@media (max-width: 480px) { .waitlist__row { flex-direction: column; } }

/* --- Section divider shimmer --------------------------------------------- */
.divider-glow { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--blue) 50%, var(--border-strong) 70%, transparent); opacity: 0.6; }

/* --- Animated mesh / aurora ring backdrop (opt-in per section) ------------ */
.mesh { position: relative; isolation: isolate; }
.mesh::before { content: ''; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 20% 20%, rgba(251,44,54,0.16), transparent 70%), radial-gradient(40% 50% at 80% 30%, rgba(225,29,46,0.16), transparent 70%), radial-gradient(45% 55% at 50% 90%, rgba(251,44,54,0.14), transparent 70%); filter: blur(20px); }
.aurora-ring { position: absolute; border-radius: 50%; background: var(--grad-aurora); filter: blur(60px); opacity: 0.25; animation: spin 28s linear infinite; pointer-events: none; }

/* ============================================================================
   21. ADVANCED MOTION UTILITIES  (JS-assisted, all reduced-motion safe)
   ============================================================================ */

/* Extra reveal flavours (main.js toggles .is-visible). */
.reveal--blur { filter: blur(10px); }
.reveal--blur.is-visible { filter: blur(0); }
.reveal--up-lg { transform: translateY(48px); }
.reveal--up-lg.is-visible { transform: none; }
.reveal { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); }

/* 3D tilt target — main.js writes --rx/--ry on pointermove. */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur) var(--ease); transform-style: preserve-3d; will-change: transform; }

/* Magnetic element — main.js writes --tx/--ty. */
.magnetic { transition: transform var(--dur) var(--ease-spring); }
.magnetic { transform: translate(var(--tx, 0), var(--ty, 0)); }

/* Gentle perpetual float (decorative). */
.float-y { animation: float 6.5s ease-in-out infinite; }
.float-y--slow { animation-duration: 9s; }

/* Conic spinning badge accent. */
.spin-slow { animation: spin 18s linear infinite; }

/* Scroll-driven reveal via native scroll timelines where supported — a pure
   progressive enhancement layered on top of the IO reveals (never required). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-pop { animation: scrollPop linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes scrollPop { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } }
  }
}

/* ============================================================================
   22. REVAMP RESPONSIVE + REDUCED MOTION (for sections 20–21)
   ============================================================================ */
@media (max-width: 1024px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--hero { grid-column: span 6; }
}
@media (max-width: 860px) {
  /* Bento collapses to a simple 2-col flow. */
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell, .bento__cell--wide, .bento__cell--hero, .bento__cell--full { grid-column: span 2; }
  .bento__cell--tall { grid-row: span 1; }
}
@media (max-width: 720px) {
  /* Platforms menu becomes an in-sheet accordion inside the mobile nav. */
  .nav__item--has-menu { display: block; width: 100%; }
  .nav__menubtn { width: 100%; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--text); }
  .nav__menu {
    position: static; transform: none; width: 100%; grid-template-columns: 1fr;
    background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 4px 0 8px; gap: 2px;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;  /* hidden until the accordion opens */
  }
  .nav__menu.is-open { display: grid; }
  .nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu { display: none; }
  .nav__item--has-menu:hover .nav__menu.is-open, .nav__item--has-menu:focus-within .nav__menu.is-open { display: grid; }
  .nav__menu::before { display: none; }
  .nav__menu-foot { background: var(--surface); }
  /* Sub-nav becomes a tidy wrapping LIST on mobile — no horizontal slider,
     nothing cut off. Non-sticky so it doesn't eat the small viewport. */
  .subnav { position: static; }
  .subnav__inner { flex-wrap: wrap; height: auto; overflow: visible; padding-block: 12px 14px; gap: 10px; }
  .subnav__brand { width: 100%; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .subnav__links { flex-wrap: wrap; gap: 8px; width: 100%; }
  .subnav__links a {
    padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface); font-size: 0.85rem;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .subnav__links a:hover { border-color: var(--border-strong); color: var(--text); }
  .subnav__links a[aria-current="page"] { color: var(--text); background: var(--grad-soft); border-color: rgba(251, 44, 54, 0.4); }
  .subnav__links a[aria-current="page"]::after { display: none; }
  .subnav__cta { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .grad-spectrum-text { animation: none; }
  .glowcard--grad::before { animation: none; }
  .aurora-ring, .spin-slow, .float-y { animation: none; }
  .tilt { transform: none !important; }
  .magnetic { transform: none !important; }
  .pcard:hover, .bento__cell:hover, .kpi__cell:hover, .nav__menu-link:hover, .logo-cloud__item:hover { transform: none; }
  .reveal--blur { filter: none; }
}


/* ============================================================================
   23. SIGNAL BEACON — coming-soon hero visual
   ----------------------------------------------------------------------------
   A platform logo broadcasting "soon": glowing floating core, radar pulse
   rings, a slow-rotating orbit ring with a travelling node, and floating
   placement chips. Themeable per platform via --glow (set on the element).
   Reduced-motion safe.
   ============================================================================ */
.beacon { position: relative; width: 320px; height: 320px; max-width: 86vw; margin: 0 auto var(--space-4); display: grid; place-items: center; }
.beacon__pulse { position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--glow, var(--indigo)) 55%, transparent); animation: beacon-ping 3.6s ease-out infinite; }
.beacon__pulse:nth-of-type(2) { animation-delay: 1.2s; }
.beacon__pulse:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes beacon-ping { 0% { transform: scale(0.55); opacity: 0.85; } 100% { transform: scale(2.5); opacity: 0; } }
.beacon__ring { position: absolute; width: 244px; height: 244px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--glow, var(--indigo)) 32%, var(--border)); animation: spin 26s linear infinite; }
.beacon__ring::before { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--glow, var(--indigo)); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--glow, var(--indigo)) 80%, transparent); }
.beacon__ring--inner { width: 168px; height: 168px; animation-duration: 18s; animation-direction: reverse; opacity: 0.7; }
.beacon__core {
  position: relative; z-index: 2; width: 108px; height: 108px; display: grid; place-items: center;
  border-radius: 30px; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.14), var(--bg-3));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  animation: float 6.5s ease-in-out infinite;
}
.beacon__core::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--glow, var(--indigo)), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.9;
}
.beacon__core svg { width: 58px; height: 58px; }
.beacon__chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(6, 7, 11, 0.9); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.beacon__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--glow, var(--indigo)); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--glow, var(--indigo)) 70%, transparent); flex-shrink: 0; }
.beacon__chip--1 { top: 8%;  left: 0;     animation-delay: 0.3s; }
.beacon__chip--2 { top: 40%; right: -4%;  animation-delay: 1.5s; }
.beacon__chip--3 { top: 66%; left: 4%;    animation-delay: 2.7s; }
@media (max-width: 560px) {
  .beacon { width: 256px; height: 256px; }
  .beacon__core { width: 92px; height: 92px; border-radius: 26px; }
  .beacon__core svg { width: 48px; height: 48px; }
  .beacon__ring { width: 200px; height: 200px; }
  .beacon__ring--inner { width: 140px; height: 140px; }
  .beacon__pulse { width: 108px; height: 108px; }
  .beacon__chip { font-size: 0.68rem; padding: 5px 10px; }
  .beacon__chip--1 { left: 0; } .beacon__chip--2 { right: 0; } .beacon__chip--3 { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .beacon__pulse, .beacon__ring, .beacon__core, .beacon__chip { animation: none; }
}

/* ============================================================================
   18. CHANNEL DETAILS MODAL (deep public-channel info; dashboard + admin)
   ============================================================================ */
.chd-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: var(--space-4); }
.chd-modal[hidden] { display: none; }
.chd-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 7, 11, 0.68); backdrop-filter: blur(3px); }
.chd-card { position: relative; width: min(620px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background-color: #07080d; background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-7); animation: admPop 0.2s var(--ease) both; }
@keyframes admPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.chd-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; color: var(--text-faint); cursor: pointer; border-radius: 9px; transition: color var(--dur) ease, background var(--dur) ease; }
.chd-x:hover { color: #fff; background: var(--surface-2); }
.chd-loading { padding: var(--space-8) 0; text-align: center; color: var(--text-faint); }
.chd-head { display: flex; align-items: center; gap: var(--space-4); margin: 0 var(--space-7) var(--space-5) 0; }
.chd-av { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; }
.chd-head__name { font-size: 1.25rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chd-head__handle { color: var(--blue); font-size: 0.9rem; }
.chd-desc { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; margin: 0 0 var(--space-5); }
.chd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.chd-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-4) var(--space-3); text-align: center; }
.chd-stat__n { font-size: 1.2rem; font-weight: 800; color: #fff; }
.chd-stat__l { font-size: 0.72rem; color: var(--text-faint); margin-top: 3px; }
.chd-sect { margin-top: var(--space-5); }
.chd-sect h4 { margin: 0 0 var(--space-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.chd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-5); }
.chd-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.88rem; }
.chd-row span { color: var(--text-faint); }
.chd-row b { color: var(--text); font-weight: 600; text-align: right; }
.chd-prices { display: flex; flex-wrap: wrap; gap: 7px; }
.chd-price { font-size: 0.8rem; font-weight: 700; color: #F4F5F7; background: rgba(251,44,54, 0.1); border: 1px solid var(--border); padding: 4px 10px; border-radius: 8px; }
.chd-src { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin: 0; white-space: pre-wrap; }
.chd-posts { display: flex; flex-direction: column; gap: var(--space-3); }
.chd-post { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-3) var(--space-4); }
.chd-post__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.76rem; color: var(--text-faint); margin-bottom: 5px; }
.chd-post__tx { color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; max-height: 4.6em; overflow: hidden; }
.chd-post__tx--empty { font-style: italic; color: var(--text-faint); }
.chd-post__link { display: inline-block; margin-top: 6px; color: var(--blue); font-size: 0.8rem; font-weight: 600; }
.chd-note { margin: var(--space-5) 0 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.5; }
.pv-name--link { cursor: pointer; }
.pv-name--link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .chd-card { padding: var(--space-5); }
  .chd-stats { grid-template-columns: repeat(2, 1fr); }
  .chd-grid2 { grid-template-columns: 1fr; }
}

/* ============================================================================
   CROSS-PROMOTION CAMPAIGNS  (cp-manual / cp-create / cp-join / cp-campaign)
   Shared component kit for the manual cross-promotion flow. Telegram-blue theme
   tokens (--accent / --accent-strong / --theme-grad) are set per page :root.
   ============================================================================ */
.cpx-wrap { padding-block: var(--space-12) var(--space-16); }
.cpx-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--text-faint); font-weight: 600; margin-bottom: var(--space-6); transition: color var(--dur) var(--ease); }
.cpx-back svg { width: 15px; height: 15px; }
.cpx-back:hover { color: var(--text); }

.cpx-head { margin-bottom: var(--space-7); }
.cpx-head .eyebrow { color: var(--accent, #FB2C36); }
.cpx-head h1 { margin: var(--space-2) 0 var(--space-3); font-size: clamp(1.6rem, 4vw, var(--fs-3xl)); line-height: var(--lh-tight); }
.cpx-head p { color: var(--text-dim); margin: 0; max-width: 60ch; line-height: 1.6; }

/* Telegram-blue focus accents inside the flow. */
.cpx-wrap .input:focus, .cpx-wrap .select:focus, .cpx-wrap .textarea:focus { border-color: var(--accent-strong, #FB2C36); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #FB2C36) 30%, transparent); }

/* ---- Stepper ------------------------------------------------------------- */
.cpx-steps { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-7); }
.cpx-step { display: inline-flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.cpx-step__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.74rem; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.cpx-step__dot svg { width: 13px; height: 13px; }
.cpx-step.is-current { color: var(--text); }
.cpx-step.is-current .cpx-step__dot { background: var(--theme-grad); border-color: transparent; color: var(--text-on-grad); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-strong, #FB2C36) 34%, transparent); }
.cpx-step.is-done .cpx-step__dot { background: color-mix(in srgb, var(--accent-strong, #FB2C36) 30%, transparent); border-color: var(--accent-strong, #FB2C36); color: #fff; }
.cpx-step__sep { flex: 1; height: 2px; border-radius: 2px; background: var(--border); min-width: 10px; }

/* ---- Panels / cards ------------------------------------------------------ */
.cpx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-lg); }
.cpx-pane { animation: cpxIn .4s var(--ease) both; }
.cpx-pane[hidden] { display: none; }
.cpx-pane h2 { margin: 0 0 var(--space-2); font-size: 1.3rem; }
.cpx-pane__hint { color: var(--text-dim); margin: 0 0 var(--space-6); font-size: 0.92rem; line-height: 1.6; }
@keyframes cpxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Big choice cards (create/join, change/keep, accept/decline) --------- */
.cpx-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.cpx-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-align: left; width: 100%;
  padding: var(--space-6); border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-decoration: none; color: inherit; font: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cpx-choice:hover { border-color: var(--accent-strong, #FB2C36); transform: translateY(-3px); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #FB2C36) 8%, transparent), transparent); box-shadow: 0 14px 36px color-mix(in srgb, var(--accent-strong, #FB2C36) 16%, transparent); }
.cpx-choice:focus-visible { outline: none; border-color: var(--accent-strong, #FB2C36); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #FB2C36) 32%, transparent); }
.cpx-choice__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-strong, #FB2C36) 26%, transparent), color-mix(in srgb, var(--accent, #FB2C36) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent, #FB2C36) 26%, var(--border)); }
.cpx-choice__ic svg { width: 26px; height: 26px; stroke: url(#brandGrad); }
.cpx-choice strong { display: block; font-size: 1.12rem; color: var(--text); }
/* Only the bare description span — must NOT match the icon (__ic) or button
   (__go) spans, or it overrides their display and the sign/arrow misalign. */
.cpx-choice > span:not([class]) { display: block; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
/* The "Start a campaign" / "Enter a code" affordance, styled as a real pill
   button that fills with the brand gradient when its card is hovered/focused. */
.cpx-choice__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.cpx-choice:hover .cpx-choice__go, .cpx-choice:focus-visible .cpx-choice__go { background: var(--grad); border-color: transparent; color: var(--text-on-grad); }
.cpx-choice__go svg { width: 17px; height: 17px; transition: transform var(--dur) var(--ease); }
.cpx-choice:hover .cpx-choice__go svg { transform: translateX(4px); }
.cpx-choice--danger:hover { border-color: var(--danger-border); box-shadow: 0 14px 36px rgba(255,77,77,.14); background: linear-gradient(180deg, rgba(255,77,77,.06), transparent); }
.cpx-choice--danger .cpx-choice__ic { background: linear-gradient(135deg, rgba(255,77,77,.22), rgba(255,77,77,.08)); border-color: var(--danger-border); }
.cpx-choice--danger .cpx-choice__ic svg { stroke: #FF4D4D; }
.cpx-choice--danger .cpx-choice__go { color: #FF8A8A; }

/* ---- Fetched channel card ------------------------------------------------ */
.cpx-chan { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1.5px solid color-mix(in srgb, var(--accent, #FB2C36) 30%, var(--border)); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #FB2C36) 9%, transparent), transparent); animation: cpxIn .35s var(--ease) both; }
.cpx-chan__img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.cpx-chan__tx { min-width: 0; flex: 1; }
.cpx-chan__tx strong { display: block; color: var(--text); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpx-chan__tx .cpx-chan__handle { color: var(--accent, #FB2C36); font-size: 0.85rem; }
.cpx-chan__stats { display: flex; gap: var(--space-5); margin-top: 4px; color: var(--text-faint); font-size: 0.8rem; flex-wrap: wrap; }
.cpx-chan__stats b { color: var(--text); font-weight: 700; }
.cpx-chan__badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: var(--success); }
.cpx-chan__badge svg { width: 15px; height: 15px; }

/* ---- Scheduler: timezone / calendar / time / duration -------------------- */
.cpx-sched { display: grid; gap: var(--space-7); }
.cpx-fl { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: var(--space-3); letter-spacing: .01em; }
.cpx-fl span { color: var(--text-faint); font-weight: 500; }

.cpx-tz { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.cpx-tz__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cpx-tz__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); flex-shrink: 0; }
.cpx-tz__ic svg { width: 18px; height: 18px; stroke: url(#brandGrad); }
.cpx-tz__tx { min-width: 0; flex: 1; }
.cpx-tz__tx strong { display: block; color: var(--text); font-size: 0.95rem; }
.cpx-tz__tx span { display: block; color: var(--text-faint); font-size: 0.8rem; margin-top: 1px; }
.cpx-tz__change { background: none; border: 0; color: var(--accent, #FB2C36); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; flex-shrink: 0; }
.cpx-tz__change:hover { background: color-mix(in srgb, var(--accent, #FB2C36) 12%, transparent); }
.cpx-tz__picker { margin-top: var(--space-4); }
.cpx-tz__picker[hidden] { display: none; }

.cpx-cal { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.cpx-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cpx-cal__title { font-weight: 700; color: var(--text); font-size: 0.98rem; }
.cpx-cal__nav { display: flex; gap: 6px; }
.cpx-cal__navbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cpx-cal__navbtn:hover:not(:disabled) { border-color: var(--accent-strong, #FB2C36); color: var(--text); }
.cpx-cal__navbtn:disabled { opacity: .35; cursor: not-allowed; }
.cpx-cal__navbtn svg { width: 16px; height: 16px; }
.cpx-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cpx-cal__dow { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
.cpx-cal__day { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: var(--surface); color: var(--text-dim); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cpx-cal__day:hover:not(.is-disabled):not(.is-sel) { border-color: var(--accent-strong, #FB2C36); color: var(--text); transform: translateY(-1px); }
.cpx-cal__day.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #FB2C36) 50%, transparent); }
.cpx-cal__day.is-sel { background: var(--theme-grad); color: var(--text-on-grad); border-color: transparent; font-weight: 800; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-strong, #FB2C36) 36%, transparent); transform: translateY(-1px); }
.cpx-cal__day.is-disabled { opacity: .26; cursor: not-allowed; background: transparent; }
.cpx-cal__day--pad { visibility: hidden; pointer-events: none; }
.cpx-cal__hint { margin: var(--space-3) 0 0; color: var(--text-faint); font-size: 0.78rem; }

.cpx-time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.cpx-time__clock { display: inline-flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.cpx-seg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cpx-seg__btn { width: 30px; height: 22px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.cpx-seg__btn:hover { border-color: var(--accent-strong, #FB2C36); color: var(--text); }
.cpx-seg__btn svg { width: 13px; height: 13px; }
.cpx-seg__val { width: 56px; text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--text); background: none; border: 0; padding: 2px 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cpx-seg__val::-webkit-outer-spin-button, .cpx-seg__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpx-seg__val:focus { outline: none; color: var(--accent, #FB2C36); }
/* The clock row is align-items:center, so the colon lines up with the value
   rows automatically — no magic offset needed (stays aligned if button sizes change). */
.cpx-time__colon { font-size: 1.5rem; font-weight: 800; color: var(--text-faint); }
.cpx-ampm, .cpx-time__fmt { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.cpx-ampm[hidden] { display: none; }
.cpx-ampm button, .cpx-time__fmt button { border: 0; background: none; color: var(--text-faint); font-weight: 700; font-size: 0.82rem; padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.cpx-ampm button.is-on, .cpx-time__fmt button.is-on { background: var(--theme-grad); color: var(--text-on-grad); }
.cpx-time__fmt-wrap { display: flex; align-items: center; gap: 10px; }
.cpx-time__fmt-wrap span { color: var(--text-faint); font-size: 0.8rem; }

.cpx-durs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cpx-dur { border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-dim); cursor: pointer; padding: var(--space-3) var(--space-5); text-align: center; min-width: 92px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cpx-dur:hover:not(.is-sel) { border-color: var(--accent-strong, #FB2C36); transform: translateY(-2px); }
.cpx-dur.is-sel { border-color: var(--accent-strong, #FB2C36); background: color-mix(in srgb, var(--accent, #FB2C36) 12%, transparent); color: var(--text); box-shadow: 0 0 0 1px var(--accent-strong, #FB2C36); }
.cpx-dur b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--text); }
.cpx-dur span { display: block; font-size: 0.74rem; color: var(--text-faint); margin-top: 2px; }

/* ---- Review / schedule summary ------------------------------------------ */
.cpx-summary { display: grid; gap: var(--space-5); }
.cpx-golive { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--accent, #FB2C36) 26%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-strong, #FB2C36) 14%, transparent), transparent); }
.cpx-golive__label { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #FB2C36); }
.cpx-golive__main { font-size: 1.35rem; font-weight: 800; color: var(--text); margin-top: 6px; line-height: 1.25; }
.cpx-golive__sub { color: var(--text-dim); font-size: 0.88rem; margin-top: 6px; }
.cpx-rows { display: grid; gap: 0; }
.cpx-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.cpx-row:first-child { border-top: 0; }
.cpx-row__k { color: var(--text-faint); font-size: 0.88rem; }
.cpx-row__v { color: var(--text); font-weight: 600; text-align: right; }

/* ---- Actions bar --------------------------------------------------------- */
.cpx-actions { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; align-items: center; }
.cpx-actions .btn { flex: 0 0 auto; }
.cpx-actions__spacer { flex: 1; }

/* ---- CP code result ------------------------------------------------------ */
.cpx-done { text-align: center; }
.cpx-done__ic { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto var(--space-5); display: grid; place-items: center; background: var(--grad-soft); animation: cpxPop .5s var(--ease) both; }
.cpx-done__ic svg { width: 36px; height: 36px; stroke: url(#brandGrad); }
@keyframes cpxPop { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.cpx-codebox { max-width: 420px; margin: var(--space-6) auto; padding: var(--space-6); border: 1.5px dashed color-mix(in srgb, var(--accent, #FB2C36) 40%, var(--border)); border-radius: var(--radius-lg); background: var(--surface-2); }
.cpx-codebox__label { font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); }
.cpx-code { font-family: var(--mono, 'SFMono-Regular', Consolas, Menlo, monospace); font-size: clamp(1.7rem, 6vw, 2.3rem); font-weight: 800; letter-spacing: .12em; color: #fff; word-break: break-all; }
.cpx-copy { margin-top: var(--space-4); }
.cpx-copy.is-done { background: var(--success) !important; border-color: var(--success) !important; color: #06220f !important; }
.cpx-share-note { color: var(--text-dim); max-width: 48ch; margin: 0 auto var(--space-2); line-height: 1.6; font-size: 0.95rem; }
.cpx-expiry { display: inline-flex; align-items: center; gap: 7px; margin: var(--space-3) auto 0; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); font-size: 0.82rem; font-weight: 600; }
.cpx-expiry svg { width: 15px; height: 15px; }
.cpx-orpool { margin: var(--space-7) auto 0; max-width: 480px; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: left; display: flex; gap: var(--space-4); align-items: center; }
.cpx-orpool__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); flex-shrink: 0; }
.cpx-orpool__ic svg { width: 21px; height: 21px; stroke: url(#brandGrad); }
.cpx-orpool__tx { flex: 1; min-width: 0; }
.cpx-orpool__tx strong { display: block; color: var(--text); font-size: 0.95rem; }
.cpx-orpool__tx span { display: block; color: var(--text-dim); font-size: 0.84rem; margin-top: 2px; }

/* ---- Banners / notes (campaign page) ------------------------------------- */
.cpx-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius); margin-bottom: var(--space-6); border: 1px solid var(--border); background: var(--surface-2); }
.cpx-banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cpx-banner__tx { min-width: 0; }
.cpx-banner__tx strong { display: block; color: var(--text); font-size: 0.96rem; margin-bottom: 2px; }
.cpx-banner__tx p { margin: 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }
.cpx-banner--success { background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 34%, var(--border)); }
.cpx-banner--success svg { color: var(--success); }
.cpx-banner--warn { background: var(--warn-bg); border-color: var(--warn-border); }
.cpx-banner--warn svg { color: var(--warn); }
.cpx-banner--info svg { color: var(--accent, #FB2C36); }
.cpx-banner--danger { background: rgba(255,77,77,.08); border-color: var(--danger-border); }
.cpx-banner--danger svg { color: #FF4D4D; }

/* ---- Campaign detail: channel pair + diff -------------------------------- */
.cpx-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.cpx-pair__card { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.cpx-pair__img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--surface-2); margin: 0 auto var(--space-3); display: block; }
.cpx-pair__role { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.cpx-pair__name { color: var(--text); font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpx-pair__handle { color: var(--accent, #FB2C36); font-size: 0.82rem; }
.cpx-pair__sub { color: var(--text-faint); font-size: 0.78rem; margin-top: 4px; }
.cpx-pair__link { display: inline-block; margin-top: 6px; color: var(--accent, #FB2C36); font-size: 0.78rem; font-weight: 600; }
.cpx-pair__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent, #FB2C36); }
.cpx-pair__x svg { width: 20px; height: 20px; }
.cpx-pair__empty { border: 1px dashed var(--border-strong); color: var(--text-faint); display: grid; place-items: center; min-height: 150px; font-size: 0.86rem; padding: var(--space-4); }

.cpx-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-2) 0 var(--space-5); }
.cpx-diff__col { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.cpx-diff__col--new { border-color: color-mix(in srgb, var(--accent, #FB2C36) 40%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #FB2C36) 8%, transparent), transparent); }
.cpx-diff__lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); }
.cpx-diff__col--new .cpx-diff__lbl { color: var(--accent, #FB2C36); }

/* ---- Campaign list (manual landing) -------------------------------------- */
.cpx-list { display: grid; gap: var(--space-3); }
.cpx-litem { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cpx-litem:hover { border-color: var(--accent-strong, #FB2C36); transform: translateX(3px); }
.cpx-litem__code { font-family: var(--mono, 'SFMono-Regular', Consolas, Menlo, monospace); font-weight: 800; color: var(--text); letter-spacing: .06em; }
.cpx-litem__meta { color: var(--text-faint); font-size: 0.82rem; margin-top: 3px; }
.cpx-empty { padding: var(--space-8); text-align: center; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.cpx-loading { color: var(--text-faint); }

/* ---- Code entry (join) --------------------------------------------------- */
.cpx-codein { text-align: center; font-family: var(--mono, 'SFMono-Regular', Consolas, Menlo, monospace); font-size: 1.4rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.cpx-codein::placeholder { letter-spacing: .18em; color: var(--text-faint); opacity: .5; }

/* ---- Cancel / armed (campaign actions) ----------------------------------- */
.cpx-cancel:hover { color: #FF4D4D; border-color: var(--danger-border); background: rgba(255,77,77,.08); }
.cpx-armed { color: #FF4D4D !important; border-color: var(--danger-border) !important; background: rgba(255,77,77,.1) !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .cpx-choices { grid-template-columns: 1fr; }
  .cpx-diff { grid-template-columns: 1fr; }
  .cpx-pair { grid-template-columns: 1fr; }
  .cpx-pair__x { transform: rotate(90deg); margin: 0 auto; }
  .cpx-pair__empty { min-height: 0; padding: var(--space-6); }
}
@media (max-width: 540px) {
  .cpx-step__label { display: none; }
  .cpx-card { padding: var(--space-5); }
  .cpx-actions { flex-direction: column-reverse; align-items: stretch; }
  .cpx-actions .btn { width: 100%; }
  .cpx-actions__spacer { display: none; }
  /* Stack the time picker controls so the clock + AM/PM + format toggle don't
     cluster unevenly on a narrow phone. */
  .cpx-time { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  /* Roomier tap targets for the time steppers on touch screens. */
  .cpx-seg__btn { width: 40px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpx-pane, .cpx-chan, .cpx-done__ic { animation: none; }
  .cpx-choice:hover, .cpx-dur:hover, .cpx-litem:hover, .cpx-cal__day:hover { transform: none; }
}




/* ============================================================================
   24. LUX IMMERSIVE LAYER  (shared with the marketing pages)
   ----------------------------------------------------------------------------
   Turns the functional pages into the same dark / glass / electric experience
   as the lux marketing pages: a frosted-glass treatment on every panel, a
   mouse-reactive particle field, a custom cursor, and a page-transition wipe.
   The DOM for the field / cursor / wipe is injected by main.js; this styles it.
   All of it is reduced-motion + touch safe (see the guards at the bottom).
   ============================================================================ */

/* ---- Frosted glass on the core surfaces ----------------------------------
   (.panel is intentionally excluded — it is the absolutely-centred 3D hero
   mockup with floating chips that live outside its box; it keeps its own glass.) */
.card, .feature, .price-card, .pcard, .bento__cell, .glowcard,
.kpi__cell, .cpx-card, .cpx-choice, .cpx-chan, .cpx-litem, .cpx-pair__card,
.admin-card, .adm-panel, .adm-stat-card, .stat, .verify-card,
.method-card, .role-opt__card, .wal-card, .acct-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: 0 36px 90px -52px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* A slow light sweep across the big panels on hover. Excludes surfaces that
   already own ::after for their own glow (.feature, .card--spotlight, .pcard)
   and .panel (absolute hero mockup). overflow:hidden clips the skewed bar to
   the rounded rect; .cpx-card needs it added since its base rule has none. */
.card, .price-card, .cpx-card, .glowcard, .bento__cell { position: relative; }
.cpx-card { overflow: hidden; }
.card:not(.card--spotlight)::after, .price-card::after,
.cpx-card::after, .bento__cell::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-18deg); transition: left 0.7s var(--ease); pointer-events: none;
}
.card:not(.card--spotlight):hover::after, .price-card:hover::after,
.cpx-card:hover::after, .bento__cell:hover::after { left: 130%; }

/* ---- Mouse-reactive particle field (canvas injected by main.js) ---------- */
#lxfield {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* ---- Custom cursor (desktop / fine-pointer only) ------------------------- */
.cur {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px;
  border: 1px solid rgba(251, 44, 54, 0.6); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 9500;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s, border-color 0.25s;
  mix-blend-mode: screen;
}
.cur__d {
  position: fixed; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); transform: translate(-50%, -50%); pointer-events: none;
  z-index: 9501; box-shadow: 0 0 12px var(--cyan);
}
.cur.is-hot { width: 56px; height: 56px; background: rgba(251, 44, 54, 0.1); border-color: transparent; }

/* ---- Page-transition wipe (overlay injected by main.js) ------------------ */
.wipe {
  position: fixed; inset: 0; z-index: 9000; background: var(--bg-2);
  transform: translateY(100%); pointer-events: none;
}
.wipe.is-go { animation: lxwipe 0.9s var(--ease-in-out) forwards; }
@keyframes lxwipe {
  0%   { transform: translateY(100%); }
  45%  { transform: translateY(0); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* On fine-pointer devices, hide the native cursor so the custom one leads. */
@media (hover: hover) and (pointer: fine) {
  html.lx-cursor, html.lx-cursor * { cursor: none; }
}
/* Touch / coarse pointers never get the custom cursor. */
@media (hover: none), (pointer: coarse) {
  .cur, .cur__d { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #lxfield, .cur, .cur__d { display: none !important; }
  .wipe { display: none !important; }
  /* Disable only the sweep ::after we own — not .pcard/.card--spotlight glows. */
  .card:not(.card--spotlight)::after, .price-card::after,
  .cpx-card::after, .bento__cell::after { display: none; }
}


.premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    background: linear-gradient(135deg, var(--accent), #ff9900);
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 153, 0, 0.4);
    position: relative;
    top: -1px;
}


/* ============================================================================
   REVAMP v2 — glass + motion layer (matches the 3D homepage design language).
   Pure override layer: appended last so the cascade upgrades every page that
   uses the shared components. No selectors renamed, no structure changed.
   ============================================================================ */
@keyframes oaShine { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(340%) skewX(-18deg); } }
@keyframes oaRingPulse { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes oaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- Card family: glass gradient fill + red-glow hover lift ---------------- */
.card, .feature, .price-card, .step, .pcard, .bento__cell, .glowcard,
.kpi__cell, .faq__item, .compare-wrap, .panel, .method-card, .cm-row {
  background: linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.013));
  border-color: rgba(255,255,255,0.11);
}
.card:hover, .feature:hover, .pcard:hover, .bento__cell:hover, .step:hover, .method-card:hover {
  border-color: rgba(251,44,54,0.42);
  box-shadow: 0 18px 50px -18px rgba(251,44,54,0.35), var(--shadow-sm);
  transform: translateY(-4px);
}
.kpi__cell:hover { border-color: rgba(251,44,54,0.42); }
.price-card:hover { border-color: rgba(251,44,54,0.42); box-shadow: 0 24px 70px -20px rgba(251,44,54,0.3); }
.price-card--popular {
  background: linear-gradient(165deg, rgba(251,44,54,0.14), rgba(255,255,255,0.02));
  border-color: rgba(251,44,54,0.42);
  box-shadow: 0 24px 70px rgba(251,44,54,0.22);
}

/* --- Primary buttons: shine sweep + stronger glow --------------------------- */
.btn--primary { position: relative; overflow: hidden; border-radius: 12px; }
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: oaShine 3.6s ease-in-out infinite; pointer-events: none;
}
.btn--primary:hover { box-shadow: 0 16px 50px rgba(251,44,54,0.55); transform: translateY(-2px); }
.btn--outline:hover { border-color: rgba(251,44,54,0.55); color: var(--text); background: rgba(251,44,54,0.08); }

/* --- Inputs: red focus glow -------------------------------------------------- */
.input:focus, .textarea:focus, .select:focus {
  border-color: #FB2C36;
  box-shadow: 0 0 0 3px rgba(251,44,54,0.22);
}

/* --- Badges & pills: glassier ------------------------------------------------ */
.badge { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* --- CTA panels: aurora wash ------------------------------------------------- */
.cta__panel { background: linear-gradient(140deg, rgba(251,44,54,0.16), rgba(138,60,255,0.07)); border-color: rgba(255,255,255,0.12); }

/* --- Section headings: gradient display type --------------------------------- */
.section h2, .dash-top h1 { letter-spacing: -0.025em; }

/* --- Motion hygiene ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { animation: none; display: none; }
}


/* ============================================================================
   REVAMP v3 — mobile hardening. Kills horizontal overflow site-wide (glow
   orbs / decorative absolutes were widening the page on phones, forcing
   zoom-out) and enforces touch ergonomics.
   ============================================================================ */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
img, video, iframe { max-width: 100%; }
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .dash-side__link { min-height: 44px; }
}
@media (max-width: 480px) {
  .method-cards, .kpi { grid-template-columns: 1fr; }
  .dash-top__actions { width: 100%; }
  .dash-top__actions .btn { flex: 1; }
}
