/* ===== Bigul Connect — shared foundation (dark theme, static) ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root{
    --font-primary:"Poppins", ui-sans-serif, system-ui, sans-serif;
    --accent:#5367fc;
    /* Brand blue, taken from the official Bigul logo SVGs (#5367FC + #00FFC1).
       The old #3b82f6 was a Tailwind default that never matched the mark. */
    --groww:#5367fc;
    --teal:#00ffc1;
    --cyan:#00d2ff;
    --bg-primary:#000000;
    --bg-secondary:#0a0f24;
    --bg-tertiary:#0d1235;
    --border-dark:#1a2560;
    --text-primary:#ffffff;
    --text-secondary:#94a3b8;
    --card-bg:rgba(13,18,53,0.7);
    --card-border:rgba(83,103,252,0.2);

    /* ---- Content width tokens -------------------------------------
       Every section wrapper below sizes itself from one of these and
       is centred with margin-inline:auto, so the page keeps a single
       consistent measure instead of a mix of 1120/1152/1280 columns.
       The @media (min-width:1600px) block near the end scales them
       up together so ultrawide screens fill out gracefully.        */
    --w-page:1280px;    /* .wrap · navbar · footer · GPT banner      */
    --w-panel:1120px;   /* API card · performance card              */
    --w-eco:1152px;     /* partnership ecosystem                    */
    --w-hero:1024px;    /* hero copy · demo video                   */
    --w-hero-logo:768px;/* hero wordmark                            */
    --w-form:672px;     /* get-started card                         */
    --w-tight:896px;    /* libraries · timeline · partners · FAQ    */
  }
  html { scroll-behavior: smooth; }
  /* Solid, no gradient wash — the app paints this route's <body> flat
     black; the ambient glow comes only from the .bg-glow-a/b blobs below. */
  body{
    font-family:var(--font-primary);
    color:#fff;
    background:var(--bg-primary);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3,h4{ font-family:var(--font-primary); letter-spacing:-0.02em; }
  a{ color:inherit; text-decoration:none; }

  /* ambient background grid */
  .bg-grid{ position:fixed; inset:0; width:100%; height:100%; opacity:.025; pointer-events:none; z-index:0;
    background-image:linear-gradient(to right,#5367fc 0.5px,transparent 0.5px),linear-gradient(to bottom,#5367fc 0.5px,transparent 0.5px);
    background-size:80px 80px; }
  .bg-glow-a{ position:fixed; top:-10%; right:-10%; width:45%; height:45%; border-radius:9999px; background:rgba(0,210,255,0.04); filter:blur(120px); pointer-events:none; z-index:0; }
  .bg-glow-b{ position:fixed; bottom:-10%; left:-10%; width:50%; height:50%; border-radius:9999px; background:rgba(83,103,252,0.03); filter:blur(140px); pointer-events:none; z-index:0; }
  /* Hero floating background: the two ambient blobs drift as well as pulse.
     `bgc-float` is defined in css/animations.css — applied here, never
     redefined. Listing it second means it owns `transform` (the drift) while
     bg-pulse keeps the opacity breathing. */
  .bg-glow-a.anim-pulse, .bg-glow-b.anim-pulse{
    animation: bg-pulse 4.5s ease-in-out infinite,
               bgc-float 6s ease-in-out infinite alternate; }

  .wrap{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-left:24px; padding-right:24px; }
  .rel{ position:relative; z-index:10; }

  /* ===== Navbar ===== */
  nav.topnav{ position:fixed; top:0; left:0; right:0; z-index:50; height:64px; display:flex; align-items:center; justify-content:center;
    background:rgba(10,15,36,0.8); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(26,37,96,0.2); border-bottom:1px solid rgba(26,37,96,0.2); }
  nav.topnav .inner{ max-width:var(--w-page); width:100%; margin-inline:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
  /* React header uses `h-24 sm:h-32` (96px / 128px) — the mark deliberately
     overhangs the 64px bar, exactly as in the app. */
  nav.topnav .logo img{ height:96px; width:auto; object-fit:contain; }
  @media(min-width:640px){ nav.topnav .logo img{ height:128px; } }
  /* Pull the mark toward the container edge. .inner carries 24px of padding
     and Monogram.svg has a further ~4px of transparent margin at 192px wide
     (artwork starts at x=9.1 in a 425.25 viewBox), so the logo read as
     sitting too far in. -20px keeps 4px of true gap at the container edge. */
  /* display:flex, not the default block: as a block the 128px <img> is an
     INLINE child, so the anchor picks up a line-box descender and measures
     134.4px instead of 128. Centring that taller box in the 64px bar lifted
     the mark 3.2px above true centre — which is why this header and the docs
     header disagreed vertically. As a flex item the image has no descender and
     lands on the bar's real centre. */
  nav.topnav .logo{ margin-left:-20px; display:flex; align-items:center; }
  @media(max-width:640px){ nav.topnav .logo{ margin-left:-12px; } }
  /* Logo theme variants: dark-theme logos show by default, light logos under html.light */
  .logo-light{ display:none; }
  nav.topnav .navlinks{ display:flex; align-items:center; gap:24px; }
  .nav-btn{ font-size:14px; font-weight:600; letter-spacing:0.35px; line-height:20px; text-transform:uppercase; color:var(--text-secondary); background:none; border:none; cursor:pointer; transition:color .2s; }
  .nav-btn:hover{ color:#fff; }
  .nav-btn.active{ color:var(--groww); }
  /* Baseline leaves this label mixed-case ("APIs & DOCs") while "Home"
     stays uppercase, so the transform is lifted for this item only. */
  .nav-btn[href*="api-docs"]{ text-transform:none; letter-spacing:0.35px; }
  .theme-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9999px; border:1px solid rgba(26,37,96,0.6);
    background:rgba(13,18,53,0.4); color:var(--text-secondary); font-size:16px; line-height:24px; font-weight:600; cursor:pointer; }
  .theme-pill [data-theme-label]{ font-size:11px; line-height:16px; }
  .theme-pill svg{ width:14px; height:14px; color:#facc15; }

  /* ===== Common ===== */
  /* px-4 py-1.5 / text-xs / tracking-[3px] — 28px tall, same as the app.
     No bottom margin: in React only the hero pill carries `mb-1`; every other
     eyebrow sits on its section head's own `space-y-*` rhythm, so a global
     margin here was silently adding 4px to each of those gaps. */
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:9999px; font-size:12px; line-height:16px; font-weight:600;
    letter-spacing:3px; text-transform:uppercase; color:var(--groww); background:rgba(83,103,252,0.1); border:1px solid rgba(83,103,252,0.2); }
  .hero-inner .eyebrow{ margin-bottom:4px; }   /* React hero pill: mb-1 */

  /* Fixed vertical "Sign In" tab pinned to the right edge of the viewport.
     Mirrors the React build: 35px wide, vertical-rl text, left corners rounded. */
  .signin-tab-wrap{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:40;
    transition:transform .3s ease, opacity .3s ease; }
  .signin-tab{ display:flex; align-items:center; justify-content:center; width:35px; min-height:80px;
    padding:8px 16px; border:0; cursor:pointer; background:#5367FC; color:#fff;
    border-radius:8px 0 0 8px; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
    writing-mode:vertical-rl; text-orientation:mixed;
    box-shadow:rgba(83,103,252,.5) -2px 2px 16px, rgba(83,103,252,.3) 0 0 20px;
    transition:filter .2s ease, box-shadow .2s ease; }
  .signin-tab:hover{ filter:brightness(1.08);
    box-shadow:rgba(83,103,252,.65) -2px 2px 20px, rgba(83,103,252,.45) 0 0 26px; }
  .section{ padding:48px 0; position:relative; }
  /* Sections that breathe wider than the 48px default */
  .section--lg{ padding:64px 0; }
  .section--xl{ padding:80px 0; }
  /* Clips the bloom and the full-bleed marquee to the section box */
  .pp-section{ overflow:hidden; }
  .center{ text-align:center; }
  /* Stepped rather than fluid: the app's headings jump at the 640/768
     breakpoints, so a clamp() would drift from it at every width between. */
  .h2{ font-size:30px; line-height:36px; font-weight:600; color:#fff; letter-spacing:-0.025em; }
  @media(min-width:640px){ .h2{ font-size:36px; line-height:40px; } }
  @media(min-width:768px){ .h2{ font-size:48px; line-height:48px; } }
  /* "Unmatched Execution Speed" steps back onto the standard .h2 ramp
     (30/36/48) so it no longer out-shouts the card it introduces. */
  .h2.h2-xl{ font-size:30px; line-height:36px; }
  @media(min-width:640px){ .h2.h2-xl{ font-size:36px; line-height:40px; } }
  @media(min-width:768px){ .h2.h2-xl{ font-size:48px; line-height:48px; } }
  /* "Who Can Join Us?" keeps the display size — React's md:text-6xl. */
  .eco-inner .h2.h2-xl{ font-size:36px; line-height:40px; }
  @media(min-width:768px){ .eco-inner .h2.h2-xl{ font-size:60px; line-height:60px; } }
  .sub{ font-size:16px; line-height:24px; color:var(--text-secondary); }
  .icon{ width:16px; height:16px; }

  /* Card hairline: #1a2560 in dark / #E2E8F0 in light (both carried by
     --border-dark). The old #00d2ff cyan outline is off-guideline; the soft
     glow behind it stays in dark mode only. */
  .cyan-card{ border:1px solid var(--border-dark); box-shadow:0 0 15px rgba(0,210,255,0.35); background:var(--bg-secondary); border-radius:24px; }

  /* ===== Hero ===== */
  .hero{ position:relative; min-height:85vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:96px 16px 48px; overflow:hidden; }
  .hero-inner{ position:relative; z-index:30; text-align:center; width:100%; max-width:var(--w-hero); margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
  .hero-logo{ position:relative; width:100%; max-width:var(--w-hero-logo); margin:4px auto; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:visible; }
  /* No halo on the wordmark. The selector is deliberately more specific than
     `.anim-logo-glow` / `html.light .anim-logo-glow` in css/animations.css,
     which is linked after this file and would otherwise re-apply the pulse. */
  .hero-logo img{ width:100%; height:100%; object-fit:contain; filter:none; }
  .hero-logo img.anim-logo-glow{ filter:none; animation:none; }
  /* Stepped, not clamp(): the React build uses Tailwind text-sm -> sm:text-lg,
     so it is exactly 14px below 640px and exactly 18px above. clamp() produced
     fractional in-between sizes (17.87px at 1280px) that never matched. */
  .hero-kicker{ font-size:14px; line-height:28px; letter-spacing:5px; color:var(--text-secondary); margin-bottom:8px; }
  @media (min-width:640px){ .hero-kicker{ font-size:18px; } }
  /* Sits a clear step below the wordmark now (React's max-w-2xl = 672px
     measure kept); the extra top margin opens the gap to the kicker above
     from 8px to 16px. */
  .hero-title{ font-size:20px; font-weight:600; color:#fff; max-width:672px; margin:8px auto 0; line-height:1.625; }
  .hero-cta-row{ margin-top:20px; display:flex; align-items:center; justify-content:center; gap:24px; }
  .explore-link{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; transition:color .2s; }
  .explore-link:hover{ color:var(--groww); }
  .explore-link svg{ width:14px; height:14px; }

  /* ===== Partner Link Generator card ===== */
  .plg{ width:100%; max-width:var(--w-form); margin:40px auto 0; border-radius:24px; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(13,18,53,0.95) 0%, rgba(8,8,32,0.98) 100%);
    border:1px solid var(--border-dark); box-shadow:0 0 20px rgba(0,210,255,0.4),0 20px 60px rgba(0,0,0,0.4); }
  .plg .topline{ position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(83,103,252,0.5),transparent); }
  .plg .body{ padding:32px; }
  /* Extra air between "Generate your access link instantly" and the tab row */
  .plg .head{ text-align:center; margin-bottom:40px; }
  .plg .head h3{ letter-spacing:-0.6px; }
  .plg .mini{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:9999px; line-height:16px; background:rgba(83,103,252,0.1); border:1px solid rgba(83,103,252,0.2);
    color:var(--groww); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
  .plg .mini svg{ width:12px; height:12px; }
  .plg h3{ font-size:24px; line-height:32px; font-weight:700; color:#fff; }
  .plg .head p{ font-size:14px; line-height:20px; color:var(--text-secondary); margin-top:4px; }
  .plg .tabs{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
  /* Sign Up's inner account-type toggle: a form row like any other field,
     so it takes its spacing from the form's own gap rather than a fixed margin. */
  .plg .tabs--sub{ margin-bottom:0; }
  .tabpill{ padding:8px 20px; border-radius:9999px; font-size:14px; line-height:20px; font-weight:600; cursor:pointer; border:1px solid var(--border-dark); background:var(--bg-tertiary); color:var(--text-secondary); }
  .tabpill.active{ background:var(--groww); color:#fff; border-color:var(--groww); box-shadow:0 0 16px rgba(0,210,158,0.35); }
  /* Each tab's form stacks its rows on a 20px rhythm */
  .plg form{ display:flex; flex-direction:column; gap:20px; }
  .plg-input{ width:100%; padding:12px 16px; border-radius:12px; background:var(--bg-tertiary); border:1px solid var(--border-dark); color:#fff; font-size:14px; line-height:20px; font-weight:500; outline:none; font-family:inherit; }
  .plg-input::placeholder{ color:rgba(148,163,184,0.4); }
  .plg-input:focus{ border-color:rgba(83,103,252,0.6); }

  /* Why Submit is still disabled. js/script.js injects .bgc-gate-msg just
     above the button and marks the offending field .bgc-invalid; without
     this the gate refused input silently and the button looked broken. */
  .bgc-gate-msg{ margin:-12px 0 0; font-size:12px; line-height:1.5; font-weight:500; color:#f87171; }
  .bgc-gate-msg[hidden]{ display:none; }
  .plg-input.bgc-invalid{ border-color:rgba(248,113,113,0.7); }
  .plg-input.bgc-invalid:focus{ border-color:#f87171; }

  /* Sign Up: two columns, with the optional User ID spanning both */
  .plg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .plg-field{ display:flex; flex-direction:column; gap:4px; }
  .plg-field[hidden]{ display:none; }
  .plg-field--full{ grid-column:span 2; }
  .plg-field label{ display:flex; align-items:center; gap:4px; font-size:12px; line-height:16px; font-weight:500; color:var(--text-secondary); }
  .plg-field label svg{ width:11px; height:11px; flex-shrink:0; }

  /* Vendor: password reveal sits inside the field, recovery link below it */
  .plg .input-wrap{ position:relative; }
  .plg .input-wrap .eye{ position:absolute; right:0; top:0; bottom:0; padding:0 12px; display:flex; align-items:center;
    background:none; border:none; color:rgba(148,163,184,0.6); cursor:pointer; }
  .plg .input-wrap .eye:hover{ color:var(--text-secondary); }
  .plg .input-wrap .eye svg{ width:16px; height:16px; }
  .plg-link{ align-self:flex-start; font-size:12px; font-weight:600; color:var(--groww); background:none; border:none; padding:0; cursor:pointer; }
  .plg-link:hover{ text-decoration:underline; }

  .terms{ display:flex; align-items:center; gap:10px; font-size:12px; line-height:16px; color:var(--text-secondary); }
  .checkbox{ width:16px; height:16px; border-radius:4px; border:1px solid var(--border-dark); flex-shrink:0; }
  .terms a{ color:var(--groww); font-weight:600; }
  .btn-grad{ width:100%; padding:14px; border-radius:12px; font-weight:600; font-size:14px; line-height:20px; color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#1a3fa0,#5367fc); box-shadow:0 4px 20px rgba(83,103,252,0.3); font-family:inherit; transition:transform .2s; }
  .btn-grad:hover:not(:disabled){ transform:scale(1.02); }
  .btn-grad:active:not(:disabled){ transform:scale(0.95); }
  /* Submit stays inert until the terms box is ticked (see data-consent-gate) */
  .btn-grad:disabled{ opacity:.4; cursor:not-allowed; }
  .btn-grad svg{ width:16px; height:16px; }

  /* ===== Video frame ===== */
  .video-frame{ position:relative; z-index:20; width:100%; padding:0 16px; display:flex; justify-content:center; margin-top:64px; max-width:var(--w-hero); margin-inline:auto; }
  .video-frame .laptop{ width:100%; aspect-ratio:16/9; background:var(--bg-secondary); border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
    border:2px solid var(--cyan); box-shadow:0 0 20px rgba(0,210,255,0.6),0 0 40px rgba(0,210,255,0.3); }
  .video-frame video{ width:100%; height:100%; object-fit:contain; background:#000; }

  /* ===== API Category Tabs ===== */
  .api-card{ max-width:var(--w-panel); width:100%; margin-inline:auto; padding:32px; display:flex; flex-direction:column; gap:24px; border-radius:2.5rem;
    border:1px solid var(--border-dark); box-shadow:0 0 20px rgba(0,210,255,0.4); background:#0a0f24; }
  @media(min-width:1024px){ .api-card{ flex-direction:row; align-items:stretch; gap:32px; padding:40px; } }
  .api-tabs{ display:flex; flex-direction:column; gap:8px; }
  /* From lg up the card is a fixed 560px-tall pane: the tab rail divides that
     height between its six tabs and the code panel scrolls inside it, rather
     than the whole card growing to fit the longest snippet. */
  @media(min-width:1024px){
    .api-tabs{ width:32%; height:560px; }
    .api-tabs .api-tab{ flex:1 1 0; min-height:0; }
  }
  /* 86.68px is the app's literal per-tab height (6 x 86.68 + 5 x 8px gap =
     the 560px rail below), so the stacked tabs match it outside lg too. */
  .api-tab{ text-align:left; padding:14px 24px; border-radius:20px; cursor:default; display:flex; flex-direction:column; justify-content:center; min-height:86.68px;
    border:1px solid var(--border-dark); background:transparent; color:rgba(255,255,255,0.5); }
  .api-tab.active{ border:1px solid var(--accent); background:#0d1235; color:#fff; box-shadow:0 0 18px rgba(0,210,255,0.35); }
  .api-tab h3{ font-weight:600; font-size:18px; color:rgba(255,255,255,0.7); }
  .api-tab.active h3{ color:#fff; }
  .api-tab p{ font-size:12px; margin-top:4px; line-height:1.5; font-weight:500; color:rgba(255,255,255,0.4); }
  .api-tab.active p{ color:rgba(255,255,255,0.65); }
  .api-panel{ border-radius:2rem; padding:32px; display:flex; flex-direction:column; gap:24px; border:1px solid var(--border-dark); box-shadow:0 0 15px rgba(0,210,255,0.35); background:#0d1235; }
  @media(min-width:1024px){
    .api-panel-wrap{ width:68%; height:560px; }
    .api-panel{ height:100%; overflow-y:auto; }
  }
  .code-head{ display:flex; align-items:center; justify-content:space-between; padding:0 4px; margin-bottom:12px; }
  .code-title{ display:flex; align-items:center; gap:8px; font-size:11px; font-family:"Poppins",sans-serif; font-weight:600; color:#94a3b8; letter-spacing:1.5px; text-transform:uppercase; }
  .code-title svg{ width:13px; height:13px; color:#5367fc; }
  .copy-btn{ padding:8px; color:#64748b; border-radius:12px; background:#131317; border:1px solid rgba(30,41,59,0.6); display:flex; align-items:center; justify-content:center; }
  .copy-btn svg{ width:14px; height:14px; }
  .code-box{ position:relative; background:#07070a; border:1px solid #1b1b22; border-radius:16px; padding:20px; overflow-x:auto; box-shadow:inset 0 2px 8px rgba(0,0,0,0.4); }
  .code-box pre{ font-family:"Poppins",sans-serif; font-size:13px; line-height:1.6; }
  .code-box code{ color:#d4d4d4; white-space:pre; }
  .tok-kw{ color:#569cd6; font-weight:600; }
  .tok-str{ color:#ce9178; font-weight:600; }
  .tok-com{ color:#6a9955; }
  .tok-fn{ color:#dcdcaa; font-weight:500; }

  /* ===== Performance ===== */
  .perf-card{ max-width:var(--w-panel); width:100%; margin:24px auto 0; display:flex; flex-direction:column; align-items:center; padding:40px;
    border:1px solid var(--border-dark); box-shadow:0 0 20px rgba(0,210,255,0.4); background:var(--bg-secondary); border-radius:2.5rem; position:relative; overflow:hidden; }
  /* Baseline measures 110px / 600 / -5.5px at desktop, i.e. -0.05em.
     The clamp is kept so the metric shrinks instead of overflowing on
     narrow screens; the tracking now matches the baseline ratio. */
  /* The headline metric breathes on its own (bgc-pulse-zoom lives in
     css/animations.css). */
  .perf-big{ font-size:clamp(56px,10vw,110px); font-weight:600; line-height:1; color:#fff; letter-spacing:-0.05em;
    animation:bgc-pulse-zoom 2.5s ease-in-out infinite; }
  .perf-cap{ font-size:12px; text-transform:uppercase; letter-spacing:0.3em; font-weight:600; color:rgba(148,163,184,0.6); margin-top:8px; }
  .perf-line{ width:100%; height:3px; background:linear-gradient(to right,#22d3ee,#5367fc,#34d399); border-radius:9999px; margin:24px 0 40px; box-shadow:0 1.5px 12px rgba(83,103,252,0.25); }
  .perf-grid{ width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px; }
  .perf-stat{ padding:24px; border-radius:24px; border:1px solid var(--border-dark); box-shadow:0 0 15px rgba(0,210,255,0.35); background:var(--bg-secondary);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:220px; height:135px; }
  .perf-stat .lbl{ color:var(--text-secondary); font-size:12px; font-weight:600; letter-spacing:.05em; margin-bottom:8px; }
  .perf-stat .val{ font-size:30px; font-weight:600; color:#fff; letter-spacing:-0.02em; margin-bottom:4px; }
  .perf-stat .sub{ font-size:10px; color:rgba(148,163,184,0.6); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; line-height:1.2; }

  /* ===== Why Bigul (cards) ===== */
  .why-title{ font-size:30px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:-0.03em; line-height:1.25; text-align:center; }
  @media(min-width:640px){ .why-title{ font-size:60px; } }
  .why-title span{ color:var(--groww); }
  .grid3{ display:grid; grid-template-columns:1fr; gap:24px; }
  @media(min-width:768px){ .grid3{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1024px){ .grid3{ grid-template-columns:1fr 1fr 1fr; } }
  .why-card{ background:var(--bg-secondary); border:1px solid var(--border-dark); box-shadow:0 0 15px rgba(0,210,255,0.35); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:24px; }
  .why-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#0d1235; border:1px solid var(--border-dark); color:var(--groww); }
  .why-ico svg{ width:22px; height:22px; }
  /* Title and copy sit on the app's space-y-3 rhythm — the markup nests them
     in a bare <div>, so the 12px has to come off the heading. */
  .why-card h3{ font-size:20px; font-weight:600; color:#fff; letter-spacing:-0.01em; margin-bottom:12px; }
  .why-card p{ font-size:14px; color:var(--text-secondary); line-height:1.625; }

  /* ===== Libraries ===== */
  .libs{ max-width:var(--w-tight); width:100%; margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media(min-width:768px){ .libs{ grid-template-columns:repeat(4,1fr); } }
  /* Hover zoom uses the shared `.bgc-hover-zoom` spec (transform .3s ease ->
     scale 1.05); the keyframe-free version is inlined so the markup needs no
     extra class. */
  .lib{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px; border-radius:16px; background:var(--bg-secondary); border:1px solid var(--border-dark); box-shadow:0 0 15px rgba(0,210,255,0.35);
    transition:transform .3s ease, box-shadow .3s ease; }
  /* The attribute is in the selector on purpose: these tiles also carry
     [data-animate], whose `.is-visible{transform:none}` rule lives in the
     later-loaded animations.css and would otherwise cancel the hover. */
  .lib:hover, .lib[data-animate]:hover{ transform:scale(1.05); box-shadow:0 0 25px rgba(0,210,255,0.55); }
  .lib img{ width:56px; height:56px; object-fit:contain; }
  .lib p{ font-weight:600; font-size:14px; color:#fff; }

  /* ===== Pricing ===== */
  /* text-3xl / sm:text-4xl / md:text-5xl — the old rule skipped the 36px step
     and jumped straight to 48px at 640, which made the line oversized on
     tablets. */
  .price-hero h2{ font-size:30px; font-weight:600; color:#fff; letter-spacing:-0.025em; line-height:1.25; margin-bottom:12px; }
  @media(min-width:640px){ .price-hero h2{ font-size:36px; } }
  @media(min-width:768px){ .price-hero h2{ font-size:48px; } }
  /* text-4xl / sm:text-5xl / md:text-7xl */
  .price-hero .big{ display:block; margin-top:4px; font-weight:700; font-size:36px; line-height:1; color:#5367fc; }
  @media(min-width:640px){ .price-hero .big{ font-size:48px; } }
  @media(min-width:768px){ .price-hero .big{ font-size:72px; } }
  .price-hero p{ font-size:20px; line-height:28px; color:var(--text-secondary); }

  /* Pricing comparison table — ports the React <Pricing> table (src/App.tsx),
     which had no HTML equivalent. Uses .cyan-card for the frame so it matches
     the other cards on the page. overflow:hidden keeps the 24px corners
     clipping the header row; overflow-x:auto lets the 640px min-width table
     scroll on narrow screens instead of breaking the layout. */
  .price-table{ width:100%; max-width:960px; margin:40px auto 0; overflow-x:auto; overflow-y:hidden; }
  .price-compare{ width:100%; min-width:640px; border-collapse:collapse; }
  .price-compare th,
  .price-compare td{ padding:16px 20px; text-align:left; }
  .price-compare thead th{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
    background:var(--bg-tertiary); color:var(--text-secondary); border-bottom:1px solid var(--border-dark); }
  .price-compare thead th.pc-us{ color:var(--text-primary); }
  .price-compare tbody th,
  .price-compare tbody td{ font-size:14px; border-bottom:1px solid var(--border-dark); }
  .price-compare tbody tr:last-child th,
  .price-compare tbody tr:last-child td{ border-bottom:none; }
  .price-compare tbody th{ font-weight:600; color:#e2e8f0; }
  .price-compare td.pc-us{ font-weight:600; color:#34d399; }
  .price-compare td.pc-other{ color:var(--text-secondary); }
  @media(max-width:640px){
    .price-compare th,
    .price-compare td{ padding:12px 14px; }
  }
  /* Line break only once there is room for two lines (matches hidden sm:inline) */
  br.sm-up-only{ display:none; }
  @media(min-width:640px){ br.sm-up-only{ display:inline; } }
  .chip-free{ display:inline-flex; align-items:center; gap:6px; }
  .chip-free svg{ width:15px; height:15px; color:#34d399; }

  /* ===== Partner Ecosystem ===== */
  .eco{ position:relative; overflow:hidden; padding:80px 0; background:linear-gradient(180deg,transparent 0%,rgba(83,103,252,0.03) 50%,transparent 100%); }
  .eco-inner{ max-width:var(--w-eco); margin:0 auto; padding:0 24px; display:flex; flex-direction:column; align-items:center; gap:64px; }
  .eco-hub{ display:flex; flex-direction:column; align-items:center; }
  .eco-hub .box{ width:96px; height:96px; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative;
    background:linear-gradient(135deg,#0d1235 0%,#050510 100%); border:2px solid rgba(83,103,252,0.7); box-shadow:0 0 60px rgba(83,103,252,0.4),inset 0 0 30px rgba(83,103,252,0.05); }
  .eco-hub .inner{ width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#3b82f6,#22d3ee,#3b82f6); display:flex; align-items:center; justify-content:center; }
  .eco-hub .inner svg{ width:28px; height:28px; color:#fff; }
  .eco-hub .lbl{ margin-top:12px; font-size:12px; font-weight:700; color:var(--groww); letter-spacing:3px; text-transform:uppercase; }
  .eco-timeline{ width:100%; max-width:var(--w-tight); height:100px; }
  .eco-partners{ width:100%; max-width:var(--w-tight); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(min-width:768px){ .eco-partners{ grid-template-columns:repeat(3,1fr); } }
  @media(min-width:1024px){ .eco-partners{ grid-template-columns:repeat(6,1fr); } }
  .eco-p{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .eco-p .circle{ width:64px; height:64px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#0d1235 0%,#080820 100%); border:1.5px solid var(--cyan); box-shadow:0 0 15px rgba(0,210,255,0.45); }
  .eco-p .circle svg{ width:24px; height:24px; color:#fff; }
  .eco-p p{ font-size:12px; font-weight:600; color:var(--text-secondary); text-align:center; line-height:1.3; }
  .eco-cta{ width:100%; padding:48px; border-radius:2rem; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:32px;
    background:linear-gradient(135deg,rgba(13,18,53,0.95) 0%,rgba(8,8,32,0.9) 100%); border:1px solid var(--cyan); box-shadow:0 0 20px rgba(0,210,255,0.4); }
  @media(min-width:768px){ .eco-cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
  .eco-cta h4{ font-size:clamp(24px,3vw,30px); font-weight:700; color:#fff; }
  .eco-cta p{ font-size:15px; color:var(--text-secondary); line-height:1.6; max-width:36rem; margin-top:8px; }
  .apply-btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 24px; border-radius:16px; font-weight:600; font-size:14px; color:#fff;
    background:linear-gradient(135deg,rgb(26,63,160),rgb(83,103,252)); border:none; cursor:pointer; box-shadow:0 4px 24px rgba(83,103,252,0.35); }
  .apply-btn .zap{ width:32px; height:32px; border-radius:9999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a3fa0,#5367fc); }
  .apply-btn .zap svg{ width:14px; height:14px; color:#fff; }
  .apply-btn .divider{ width:1px; height:24px; background:rgba(83,103,252,0.4); }
  .apply-btn svg.up{ width:16px; height:16px; opacity:.7; }

  /* ===== Platform partners ===== */
  /* The strip runs edge to edge; the two 96px gradients above it hide the
     logos entering and leaving rather than masking the whole track. */
  .pp-track{ width:100%; overflow:hidden; position:relative; z-index:10; }
  .pp-fade{ position:absolute; top:0; bottom:0; width:96px; z-index:10; pointer-events:none; background:none; }
  .pp-fade-l{ left:0; background:none; }
  .pp-fade-r{ right:0; background:none; }
  .pp-row{ display:flex; gap:20px; flex-wrap:nowrap; width:max-content; }  /* marquee: must NOT wrap, or the duplicated set becomes a grid */
  .pp-item{ display:flex; flex-direction:column; align-items:center; gap:12px; width:140px; flex-shrink:0; cursor:default;
    transition:transform .3s; }
  .pp-item:hover{ transform:scale(1.06); }
  .pp-item img{ width:56px; height:56px; border-radius:16px; object-fit:cover; border:1px solid rgba(0,210,255,0.5);
    box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1); transition:all .2s; }
  .pp-item:hover img{ border-color:var(--cyan); }
  .pp-item span{ font-size:12px; line-height:16.5px; font-weight:600; color:var(--text-secondary); text-align:center; transition:color .2s; }
  .pp-note{ font-size:14px; line-height:20px; color:rgba(148,163,184,0.5); text-align:center; margin-top:48px; }
  /* Soft indigo bloom centred behind the whole partners band */
  .pp-glow{ position:absolute; inset:0; pointer-events:none; }
  .pp-glow::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:700px; height:300px; border-radius:9999px; background:rgba(83,103,252,0.05); filter:blur(120px); }

  /* ===== GPT banner ===== */
  .gpt{ max-width:var(--w-page); margin:0 auto; position:relative; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.4);
    background:linear-gradient(135deg,#060b1a 0%,#0a0f24 50%,#060b1a 100%); border:1px solid var(--cyan); box-shadow:0 0 20px rgba(0,210,255,0.4); }
  .gpt .inner{ position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; gap:40px; padding:48px 40px; }
  @media(min-width:768px){ .gpt .inner{ flex-direction:row; padding:56px 64px; } }
  .gpt .orb{ position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .gpt .orb .ring{ position:absolute; width:112px; height:112px; border-radius:9999px; border:1px solid rgba(83,103,252,0.25); }
  .gpt .orb .ring2{ position:absolute; width:84px; height:84px; border-radius:9999px; border:1px solid rgba(83,103,252,0.35); background:rgba(10,15,40,0.8); }
  .gpt .orb .core{ position:relative; width:64px; height:64px; border-radius:9999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a3fa0,#5367fc); box-shadow:0 0 28px rgba(83,103,252,0.6); }
  .gpt .txt{ flex:1; text-align:center; }
  @media(min-width:768px){ .gpt .txt{ text-align:left; } }
  .gpt .tag{ display:inline-block; padding:4px 12px; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; border-radius:9999px; background:rgba(83,103,252,0.12); border:1px solid rgba(83,103,252,0.25); color:#8aa4ff; margin-bottom:16px; }
  .gpt h2{ font-size:30px; font-weight:800; color:#fff; letter-spacing:-0.025em; line-height:1.25; }
  @media(min-width:640px){ .gpt h2{ font-size:48px; } }
  .gpt .txt p{ font-size:clamp(16px,2vw,18px); font-weight:500; line-height:1.6; color:rgba(200,210,240,0.75); max-width:600px; margin-top:16px; }
  .gpt .txt p span{ color:#5b8cff; font-weight:600; }
  .gpt-btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 24px; border-radius:16px; font-weight:600; color:#fff; min-width:200px; flex-shrink:0;
    background:rgba(10,15,40,0.9); border:1.5px solid rgba(83,103,252,0.5); }
  .gpt-btn .ico{ width:36px; height:36px; border-radius:9999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a3fa0,#5367fc); }
  .gpt-btn .divider{ width:1px; height:24px; background:rgba(83,103,252,0.4); }
  .gpt-btn span{ font-size:14px; font-weight:700; letter-spacing:.03em; }
  .gpt-btn svg.up{ width:16px; height:16px; opacity:.7; }

  /* ===== FAQ ===== */
  .faq-list{ max-width:var(--w-tight); margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  /* Only the first five questions show until "Show More" is pressed. The rule
     lives in CSS rather than JS so the extra 13 never flash in before
     script.js runs. */
  .faq-list.is-collapsed > details.faq:nth-of-type(n+6){ display:none; }
  details.faq{ border:1px solid var(--cyan); box-shadow:0 0 15px rgba(0,210,255,0.3); background:var(--bg-secondary); border-radius:24px; overflow:hidden; }
  details.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; cursor:pointer; list-style:none;
    font-weight:600; font-size:16px; line-height:24px; color:#fff; }
  @media(min-width:640px){ details.faq summary{ padding:24px; font-size:18px; line-height:28px; } }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary svg{ width:20px; height:20px; color:rgba(148,163,184,0.5); flex-shrink:0; transition:transform .2s; }
  details.faq[open] summary svg{ transform:rotate(180deg); }
  details.faq .ans{ padding:0 24px 24px; color:var(--text-secondary); font-size:14px; line-height:1.625; border-top:1px solid rgba(26,37,96,0.05); padding-top:16px; }
  @media(min-width:768px){ details.faq .ans{ font-size:16px; } }
  details.faq .ans ul{ list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:6px; }

  /* "Show More (N more)" / "Show Less" toggle under the FAQ list */
  .faq-more{ display:flex; justify-content:center; margin-top:32px; }
  .faq-more-btn{ display:flex; align-items:center; gap:8px; padding:12px 32px; border:0; border-radius:12px; cursor:pointer;
    font-family:inherit; font-weight:600; font-size:14px; line-height:20px; color:#fff;
    background:linear-gradient(135deg,#1a3fa0,#5367fc); box-shadow:0 4px 24px rgba(83,103,252,0.35); transition:all .2s; }
  .faq-more-btn:hover{ transform:scale(1.03); }
  .faq-more-btn:active{ transform:scale(0.95); }
  .faq-more-btn svg{ width:16px; height:16px; transition:transform .3s; }
  .faq-more-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

  /* ===== Footer ===== */
  footer{ padding:96px 0 48px; border-top:1px solid var(--border-dark); background:#060b1a; position:relative; z-index:10; margin-top:32px; }
  footer .fwrap{ max-width:var(--w-page); margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:64px; }
  .fgrid{ display:grid; grid-template-columns:1fr; gap:32px; }
  @media(min-width:1024px){ .fgrid{ grid-template-columns:repeat(12,1fr); gap:24px; } }
  .fcol-4{ grid-column:span 1; } .fcol-2{ grid-column:span 1; }
  @media(min-width:1024px){ .fcol-4{ grid-column:span 4; } .fcol-2{ grid-column:span 2; } }
  footer h4{ font-size:14px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
  .socials{ display:flex; flex-wrap:wrap; gap:10px; }
  .soc{ width:40px; height:40px; background:#0a0f24; border:1px solid var(--border-dark); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
  .soc svg{ width:20px; height:20px; }
  .dlrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
  .dl{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:#0a0f24; border:1px solid var(--border-dark); border-radius:12px; width:155px; }
  .dl svg{ width:16px; height:16px; color:#a3a3a3; }
  .dl .t{ font-size:12px; font-weight:600; color:#fff; }
  .fcontact{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
  .fcontact a{ display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-weight:600; }
  .fcontact a svg{ width:16px; height:16px; color:var(--groww); }
  .query-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--groww); border:1px solid rgba(59,130,246,0.3); background:rgba(59,130,246,0.05); padding:8px 14px; border-radius:12px; margin-top:4px; }
  .query-btn svg{ width:14px; height:14px; }
  footer ul.links{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--text-secondary); font-weight:600; }
  .fdivider{ width:100%; height:1px; background:rgba(26,37,96,0.6); }
  .reg p{ font-size:13px; color:#e5e5e5; line-height:1.7; font-weight:600; }
  .reg .u{ color:#fff; font-weight:700; text-decoration:underline; }
  .addr-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media(min-width:768px){ .addr-grid{ grid-template-columns:repeat(3,1fr); } }
  .addr{ padding:24px; background:#0a0f24; border:1px solid var(--cyan); box-shadow:0 0 15px rgba(0,210,255,0.3); border-radius:16px; display:flex; flex-direction:column; gap:12px; font-size:14px; }
  .addr .top{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border-dark); padding-bottom:8px; }
  .addr .city{ font-size:10px; padding:2px 8px; border-radius:4px; background:rgba(255,255,255,0.1); color:#fff; text-transform:uppercase; letter-spacing:.15em; font-family:"Poppins",sans-serif; }
  .addr p{ color:#e5e5e5; font-weight:600; line-height:1.6; }
  .addr .tel{ color:#d4d4d4; font-weight:600; }
  .addr .tel span{ color:#fff; }
  .compliance p{ font-size:13px; color:#e5e5e5; line-height:1.7; font-weight:600; margin-bottom:16px; }
  .compliance a{ color:var(--groww); font-weight:700; }
  .compliance a.w{ color:#fff; text-decoration:underline; }
  .copyright{ padding-top:32px; border-top:1px solid var(--border-dark); display:flex; flex-direction:column; gap:16px; justify-content:flex-start; flex-wrap:wrap; font-size:14px; color:#a3a3a3; font-weight:600; }
  @media(min-width:640px){ .copyright{ flex-direction:row; align-items:center; } }
  .sect-head{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-bottom:32px; }
  /* Heads whose eyebrow/title/subtitle sit on a 16px rhythm rather than 12px */
  .sect-head--wide{ gap:16px; }
  /* Heads followed by a wider gap before their content */
  .sect-head--loose{ margin-bottom:48px; }

  [data-tab]{ cursor:pointer; }

  /* ============================================================
     Responsive — no horizontal scroll from 360px up
     ============================================================ */
  /* Navbar: the app keeps Home / APIs & DOCs / theme pill inline at every
     width — it never collapses into a hamburger — so the links only step
     down in size and spacing on small screens. */
  @media (max-width:639px){
    nav.topnav .inner{ padding:0 16px; }
    nav.topnav .navlinks{ gap:12px; }
    .nav-btn{ font-size:12px; }
  }
  @media (max-width:640px){
    .section{ padding:36px 0; }
    /* Hero */
    .hero{ padding:88px 12px 32px; min-height:auto; }
    .plg{ margin-top:28px; }
    .plg .body{ padding:20px; }
    .plg .head{ margin-bottom:20px; }
    .plg .tabs{ margin-bottom:16px; gap:6px; }
    .tabpill{ padding:6px 14px; font-size:13px; }
    .video-frame{ margin-top:40px; padding:0 4px; }
    /* API tabs / code panels */
    .api-card{ padding:16px; border-radius:24px; }
    .api-panel{ padding:16px; border-radius:20px; }
    .code-box{ padding:14px; }
    /* Performance — flexible stat cards, single column */
    .perf-card{ padding:24px 16px; }
    .perf-grid{ gap:16px; }
    .perf-stat{ width:100%; max-width:280px; height:auto; padding:20px; }
    /* Cards */
    .why-card{ padding:24px; }
    .lib{ padding:24px; }
    /* Ecosystem / GPT */
    .eco{ padding:56px 0; }
    .eco-cta{ padding:28px 20px; }
    .gpt .inner{ padding:32px 20px; }
    /* Footer — full-width download rows */
    .dl{ width:100%; }
  }

  /* ============================================================
     LIGHT THEME  —  scoped to  html.light  (JS adds the class)
     Palette: page #f8fafc · surface #ffffff · secondary #f1f5f9
              borders #e2e8f0 · text #0f172a · muted #475569
     Accent #5367fc / cyan #00d2ff and gradients preserved.
     ============================================================ */
  html.light{
    --bg-primary:#f8fafc;
    --bg-secondary:#ffffff;
    --bg-tertiary:#f1f5f9;
    --border-dark:#e2e8f0;
    --text-primary:#0f172a;
    --text-secondary:#475569;
    --card-bg:#ffffff;
    --card-border:#e2e8f0;
  }
  html.light body{
    color:#0f172a;
    background:#f8fafc;
    background-image:
      radial-gradient(60% 40% at 80% 0%, rgba(0,210,255,0.08), transparent 70%),
      radial-gradient(55% 45% at 0% 100%, rgba(59,130,246,0.08), transparent 70%),
      linear-gradient(135deg,#f8fafc 0%,#f1f5f9 55%,#f8fafc 100%);
  }
  html.light .bg-grid{ opacity:.05; }
  html.light .bg-glow-a{ background:rgba(0,210,255,0.06); }
  html.light .bg-glow-b{ background:rgba(59,130,246,0.05); }

  /* Navbar */
  html.light nav.topnav{ background:rgba(255,255,255,0.85); border-bottom:1px solid #e2e8f0; box-shadow:0 1px 0 rgba(226,232,240,0.8); }
  html.light .nav-btn{ color:#475569; }
  html.light .nav-btn:hover{ color:#0f172a; }
  html.light .nav-btn.active{ color:var(--accent); }
  html.light .theme-pill{ background:#f1f5f9; border-color:#e2e8f0; color:#475569; }
  html.light .logo-dark{ display:none; }
  html.light .logo-light{ display:block; }

  /* Headings / text that were hard-coded white */
  html.light .h2,
  html.light .hero-title,
  html.light .plg h3,
  html.light .perf-big,
  html.light .perf-stat .val,
  html.light .why-title,
  html.light .why-card h3,
  html.light .price-hero h2,
  html.light .lib p,
  html.light .eco-cta h4,
  html.light .gpt h2,
  html.light details.faq summary,
  html.light footer h4,
  html.light .addr .top,
  html.light .addr .tel span,
  html.light .reg .u{ color:#0f172a; }
  html.light .why-title span{ color:var(--groww); }

  /* Hero get-started card */
  html.light .plg{ background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%); box-shadow:0 0 20px rgba(0,210,255,0.15),0 20px 60px rgba(15,23,42,0.1); }
  html.light .plg-input{ background:#f1f5f9; border-color:#e2e8f0; color:#0f172a; }
  html.light .plg-input::placeholder{ color:#94a3b8; }
  html.light .checkbox{ border-color:#cbd5e1; }
  html.light .price-compare tbody th{ color:#0f172a; }
  html.light .price-compare td.pc-us{ color:#059669; }
  html.light .bgc-gate-msg{ color:#b91c1c; }
  html.light .plg-input.bgc-invalid{ border-color:#fca5a5; }
  html.light .video-frame .laptop{ background:#ffffff; }

  /* API tabs + code panels */
  html.light .api-card{ background:#ffffff; }
  html.light .api-tab{ border-color:rgba(0,210,255,0.35); color:#475569; }
  html.light .api-tab.active{ background:#f1f5f9; color:#0f172a; }
  html.light .api-tab h3{ color:#334155; }
  html.light .api-tab.active h3{ color:#0f172a; }
  html.light .api-tab p{ color:#64748b; }
  html.light .api-tab.active p{ color:#475569; }
  html.light .api-panel{ background:#ffffff; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1); }
  html.light .code-title{ color:#475569; }
  html.light .copy-btn{ background:#f1f5f9; border-color:#e2e8f0; color:#475569; }
  html.light .code-box{ background:#f8fafc; border-color:#e2e8f0; box-shadow:inset 0 2px 8px rgba(15,23,42,0.05); }
  html.light .code-box code{ color:#0f172a; }
  html.light .tok-kw{ color:#7c3aed; }
  html.light .tok-str{ color:#c2410c; }
  html.light .tok-com{ color:#64748b; }
  html.light .tok-fn{ color:#2563eb; }

  /* Performance */
  html.light .perf-card{ background:#ffffff; }
  html.light .perf-stat{ background:#ffffff; }

  /* Why cards */
  html.light .why-card{ background:#ffffff; }
  html.light .why-ico{ background:#f1f5f9; border-color:#e2e8f0; }

  /* Libraries */
  html.light .lib{ background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.07),0 1px 2px -1px rgba(0,0,0,0.04); }

  /* Ecosystem CTA */
  html.light .pp-item img{ box-shadow:0 1px 3px rgba(0,0,0,0.07),0 1px 2px -1px rgba(0,0,0,0.04); }
  html.light .eco-cta{ background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%); }

  /* GPT banner */
  html.light .gpt{ background:linear-gradient(135deg,#ffffff 0%,#f8fafc 50%,#ffffff 100%); }
  html.light .gpt .txt p{ color:#475569; }
  html.light .gpt .tag{ background:rgba(83,103,252,0.1); border-color:rgba(83,103,252,0.25); color:#4f46e5; }
  html.light .gpt .orb .ring2{ background:rgba(241,245,249,0.9); }
  html.light .gpt-btn{ background:#f1f5f9; border-color:rgba(83,103,252,0.35); color:#0f172a; }

  /* FAQ */
  html.light details.faq{ background:#ffffff; border-color:#e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,0.07),0 1px 2px -1px rgba(0,0,0,0.04); }
  html.light details.faq .ans{ color:#475569; }

  /* Footer */
  html.light footer{ background:#f1f5f9; border-top-color:#e2e8f0; }
  html.light .soc{ background:#ffffff; border-color:#e2e8f0; color:#475569; }
  html.light .dl{ background:#ffffff; border-color:#e2e8f0; }
  html.light .dl .t{ color:#0f172a; }
  html.light .dl svg{ color:#475569; }
  html.light .fdivider{ background:#e2e8f0; }
  html.light .reg p{ color:#475569; }
  html.light .addr{ background:#ffffff; }
  html.light .addr p{ color:#475569; }
  html.light .addr .tel{ color:#475569; }
  html.light .addr .city{ background:#e2e8f0; color:#0f172a; }
  html.light .compliance p{ color:#475569; }
  html.light .compliance a.w{ color:#0f172a; }
  html.light .copyright{ color:#64748b; }

/* ===== Animated background canvas (ported from the original app) ===== */
.bg-canvas{ position:fixed; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; z-index:0; }

/* ===== Hero FX: expanding rings, spark particles, flash burst =====
   Click-to-replay (matches the original app, which remounts this whole
   burst on click). Each element carries a "replay" class; script.js
   removes + re-adds it on click to restart the one-shot animation. */
.hero-fx{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:20; pointer-events:none; }

.hero-ring{ position:absolute; left:50%; top:50%; border-radius:9999px; border:2px solid #5367fc;
  opacity:0; transform:translate(-50%,-50%) scale(0.05); }
.hero-ring:nth-child(4n+1){ width:420px; height:420px; }
.hero-ring:nth-child(4n+2){ width:500px; height:500px; border-color:#00ffc1; }
.hero-ring:nth-child(4n+3){ width:580px; height:580px; }
.hero-ring:nth-child(4n+4){ width:660px; height:660px; border-color:#00ffc1; }
/* Staggered "drop" cascade so all 4 rings don't fire in perfect sync —
   each one is slower + more visible than the original's brief 0.7s burst,
   so the effect is reliably perceptible on a real page load, not just a flash. */
.hero-ring:nth-child(4n+1){ animation-delay:0s; }
.hero-ring:nth-child(4n+2){ animation-delay:.22s; }
.hero-ring:nth-child(4n+3){ animation-delay:.44s; }
.hero-ring:nth-child(4n+4){ animation-delay:.66s; }
@keyframes hero-ring-play{
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(0.05); }
  60%  { opacity:.55; }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(1); }
}
.hero-ring.replay{ animation-name:hero-ring-play; animation-duration:1.5s; animation-timing-function:ease-out; animation-fill-mode:backwards; }

.hero-burst{ position:absolute; left:50%; top:50%; width:260px; height:260px; margin:-130px 0 0 -130px;
  border-radius:9999px; opacity:0; transform:scale(0);
  background:radial-gradient(circle, rgba(83,103,252,0.6) 0%, rgba(0,255,193,0.25) 50%, transparent 70%); }
@keyframes hero-burst-play{
  0%   { opacity:0;   transform:scale(0); }
  40%  { opacity:.65; transform:scale(1); }
  100% { opacity:0;   transform:scale(1.05); }
}
.hero-burst.replay{ animation:hero-burst-play .9s ease-out .2s backwards; }

.hero-spark{ position:absolute; left:0; top:0; width:6px; height:6px; border-radius:9999px;
  background:#5367fc; box-shadow:0 0 8px #5367fc; opacity:0; }
.hero-spark:nth-child(2n){ background:#00ffc1; box-shadow:0 0 8px #00ffc1; }
@keyframes hero-spark-play{
  0%   { opacity:1; transform:translate(0,0) scale(1.6); }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) scale(0); }
}
.hero-spark.replay{ animation:hero-spark-play 1.1s ease-out .2s backwards; }

html.light .hero-ring{ border-color:rgba(83,103,252,.5); }

/* ===== Hero logo: entrance pop, replays on click alongside the FX ===== */
.hero-logo{ cursor:pointer; opacity:1; }
@keyframes hero-logo-pop{
  0%   { opacity:0; transform:scale(.1); }
  100% { opacity:1; transform:scale(1); }
}
.hero-logo.replay{ animation:hero-logo-pop .6s cubic-bezier(.34,1.56,.64,1) .5s backwards; }

/* ============================================================
   Terms & Conditions modal
   ============================================================ */
.custom-scrollbar,.api-panel{ scrollbar-width:thin; scrollbar-color:rgba(83,103,252,.5) rgba(0,0,0,.1); }
.custom-scrollbar::-webkit-scrollbar,.api-panel::-webkit-scrollbar{ width:8px; }
.custom-scrollbar::-webkit-scrollbar-track,.api-panel::-webkit-scrollbar-track{ background:rgba(0,0,0,.05); border-radius:4px; }
.custom-scrollbar::-webkit-scrollbar-thumb,.api-panel::-webkit-scrollbar-thumb{ background:rgba(83,103,252,.5); border-radius:4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover,.api-panel::-webkit-scrollbar-thumb:hover{ background:rgba(83,103,252,.7); }

.tc-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.tc-overlay[hidden]{ display:none !important; }
.tc-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.tc-panel{ position:relative; z-index:1; width:100%; max-width:42rem; max-height:85vh; display:flex; flex-direction:column;
  border-radius:24px; overflow:hidden; background:var(--bg-secondary,#0a0f24); border:1px solid rgba(0,210,255,.2);
  box-shadow:0 0 30px rgba(0,210,255,.2), 0 20px 60px rgba(0,0,0,.4);
  animation:tc-pop .25s cubic-bezier(.34,1.3,.64,1) backwards; }
@keyframes tc-pop{ 0%{opacity:0; transform:scale(.94) translateY(8px);} 100%{opacity:1; transform:none;} }

.tc-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid rgba(0,210,255,.2); flex-shrink:0; }
.tc-head h2{ font-size:1.5rem; font-weight:700; color:#fff; margin:0; }
.tc-x{ background:none; border:none; padding:8px; border-radius:10px; color:#94a3b8; cursor:pointer; display:flex; }
.tc-x:hover{ color:#5367fc; background:rgba(83,103,252,.1); }
.tc-x svg{ width:22px; height:22px; }

.tc-body{ flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:24px; font-size:13px; color:#94a3b8; line-height:1.7; }
.tc-sec h3{ font-size:1.05rem; font-weight:700; color:#5367fc; margin:0 0 12px; }
.tc-sec p{ margin:0 0 8px; }
.tc-note{ font-weight:600; color:#fff; margin:12px 0 8px; }
.tc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tc-list li{ display:flex; align-items:flex-start; gap:8px; }
.tc-check{ width:14px; height:14px; color:#22d3ee; flex-shrink:0; margin-top:2px; }
.tc-tablewrap{ overflow-x:auto; margin:12px 0; }
.tc-table{ width:100%; font-size:12px; border-collapse:collapse; }
.tc-table th,.tc-table td{ border:1px solid rgba(148,163,184,.2); padding:8px 12px; text-align:left; }
.tc-table th{ background:rgba(83,103,252,.1); color:#5367fc; font-weight:600; }
.tc-declare{ padding:16px; border-radius:16px; border:1px solid rgba(83,103,252,.3); background:rgba(83,103,252,.05); }
.tc-declare h3{ color:#5367fc; }

.tc-foot{ display:flex; gap:12px; padding:24px 28px; border-top:1px solid rgba(0,210,255,.2); flex-shrink:0; }
.tc-btn{ flex:1; padding:12px 16px; border-radius:12px; font-weight:600; font-size:14px; cursor:pointer; transition:all .2s; font-family:inherit; }
.tc-btn-ghost{ background:none; border:2px solid rgba(83,103,252,.4); color:#5367fc; }
.tc-btn-ghost:hover{ background:rgba(83,103,252,.05); border-color:rgba(83,103,252,.6); }
.tc-btn-accept{ border:none; color:#fff; background:linear-gradient(135deg,#1a3fa0,#5367fc); }
.tc-btn-accept:hover{ transform:scale(1.02); }
.tc-btn-accept:active{ transform:scale(.97); }

html.light .tc-panel{ background:#fff; border-color:rgba(83,103,252,.25); box-shadow:0 20px 60px rgba(0,0,0,.15); }
html.light .tc-head{ border-bottom-color:rgba(83,103,252,.15); }
html.light .tc-head h2{ color:#0f172a; }
html.light .tc-x{ color:#64748b; }
html.light .tc-x:hover{ color:#334155; background:#f1f5f9; }
html.light .tc-body{ color:#475569; }
html.light .tc-note{ color:#0f172a; }
html.light .tc-table th,html.light .tc-table td{ border-color:#e2e8f0; }
html.light .tc-table th{ background:rgba(83,103,252,.08); }
html.light .tc-foot{ border-top-color:rgba(83,103,252,.15); }
html.light .tc-btn-ghost{ border-color:#cbd5e1; color:#475569; }
html.light .tc-btn-ghost:hover{ background:#f8fafc; border-color:#94a3b8; }
@media (max-width:640px){ .tc-panel{ max-height:90vh; } .tc-head,.tc-foot{ padding:18px 20px; } .tc-body{ padding:18px 20px; } }

/* ===== Terms checkbox: real input, styled box ===== */
.checkbox-input{ position:absolute; opacity:0; width:16px; height:16px; margin:0; cursor:pointer; }
.terms{ position:relative; cursor:pointer; }
.checkbox{ display:inline-flex; align-items:center; justify-content:center; transition:all .18s ease; }
.checkbox-input:checked + .checkbox{ background:var(--groww); border-color:var(--groww); }
.checkbox-input:checked + .checkbox::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.checkbox-input:focus-visible + .checkbox{ outline:2px solid var(--groww); outline-offset:2px; }

/* ===== Ecosystem timeline SVG: theme-aware colour =====
   The lines/dots/arrow were hardcoded white — invisible on the light
   background. The original app uses a blue tone in light mode. */
html.light .eco-timeline .anim-dash,
html.light .eco-timeline .eco-line{ stroke:rgba(83,103,252,0.7) !important; }
html.light .eco-timeline .anim-dot{ fill:rgba(83,103,252,0.9) !important; }
html.light .eco-timeline marker polygon{ fill:rgba(83,103,252,0.8) !important; }

/* ===== Ecosystem timeline: simplify to 2 drop-arrows on mobile =====
   The 6-column desktop diagram maps to 6 individual partner icons; on
   mobile the partner grid is only 2 columns (see .eco-partners), so
   showing all 6 arrows crowds a diagram nothing lines up with anymore.
   Keep drops #2 and #5 (the two that best straddle a 2-column layout)
   and hide the rest — the center hub + horizontal bar stay untouched. */
@media (max-width:767px){
  .eco-drop[data-drop="1"], .eco-drop-dot[data-drop="1"],
  .eco-drop[data-drop="3"], .eco-drop-dot[data-drop="3"],
  .eco-drop[data-drop="4"], .eco-drop-dot[data-drop="4"],
  .eco-drop[data-drop="6"], .eco-drop-dot[data-drop="6"]{ display:none; }
}


/* ===== Keyboard focus ring (shared design system) =========================
   Mirrors the existing .checkbox-input:focus-visible pattern so every page
   gives keyboard users the same affordance. :focus-visible only matches
   keyboard / programmatic focus, so pointer users see no visual change. */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--groww,#3B82F6);
  outline-offset:2px;
}

  /* T&C modal trigger: a <button> for semantics, styled as the inline
     link it replaces so the checkbox row is visually unchanged. */
  .tc-link{ font:inherit; color:var(--groww); background:none; border:0; padding:0;
    cursor:pointer; text-decoration:none; }
  .tc-link:hover{ text-decoration:underline; }
  .tc-link:focus-visible{ outline:2px solid var(--groww,#3B82F6); outline-offset:2px; border-radius:3px; }

  /* Form controls and tables default to a UA font, so pin them to the
     single project family rather than relying on inheritance. */
  html, body, button, input, select, textarea, optgroup, table, th, td, dialog {
    font-family: var(--font-primary);
  }

  /* ---- Footer: second copyright line right-aligned -----------------
     margin-left:auto on the last line rather than reverting the container to
     justify-content:space-between. For two items the on-screen result is the
     same, but this keeps working once flex-wrap kicks in: if the pair no
     longer fits on one row the second wraps to its own row and stays right,
     instead of space-between collapsing it back to the left.
     Scoped to the row context — the container is flex-direction:column below
     640px, where margin-left:auto would push the line to the right edge on a
     phone. Both stay left when stacked. */
  @media(min-width:640px){
    .copyright p:last-child{ margin-left:auto; text-align:right; }
  }
  /* ---- Light theme: performance-panel captions --------------------
     Hardcoded translucent slate (~rgba(148,163,184,.6)) flattened to
     rgb(191,200,212) on the light panel = 1.69:1. Solid slate-600 instead. */
  html.light .perf-cap{ color:#475569; }
  html.light .perf-stat .sub{ color:#475569; }