/* =========================================================
       Fizook design tokens — the single source of truth
       =========================================================
       All app pages (index/demo/register/vendor/auction-details/
       fzk-new/etc.) copy these :root values verbatim. When you
       change a color/shadow/radius here, mirror it into every
       other page's :root block so the surface stays cohesive.
       Kept in sync with fizook-auctions-v2-mobile.html specifically
       because that's the primary live-auction production file. */
    *,*::before,*::after{box-sizing:border-box}
    :root{
      --bg:#0b1220;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --border:#e5e7eb;
      --text:#0f172a;
      --muted:#64748b;
      --primary:#2481bc;
      --primary-dark:#1a6494;
      --success:#16a34a;
      --success-light:#dcfce7;
      --danger:#dc2626;
      --warn:#f59e0b;
      --accent:#7c3aed;
      --shadow-sm:0 1px 2px rgba(15,23,42,.06);
      --shadow:0 4px 16px rgba(15,23,42,.08);
      --shadow-lg:0 16px 40px rgba(15,23,42,.18);
      --radius:14px;
      --radius-sm:10px;
      --radius-lg:20px;
      --radius-button:6px;
    }
    html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--surface-2)}
    body{min-height:100vh}
    img{max-width:100%;display:block}
    a{color:var(--primary)}
    code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

    /* ---------- Top hero ---------- */
    .sg-hero{
      background:linear-gradient(135deg,#0b1220,#1a6494 60%,#2481bc);
      color:#fff;padding:48px 20px 56px;
      box-shadow:var(--shadow);
    }
    .sg-hero-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
    .sg-logo{
      width:60px;height:60px;border-radius:16px;
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#fff;
      box-shadow:0 0 24px rgba(124,58,237,.4);
    }
    .sg-hero h1{margin:0;font-size:2.1rem;font-weight:800;letter-spacing:-.5px}
    .sg-hero p{margin:6px 0 0;opacity:.85;font-size:1rem;max-width:640px;line-height:1.5}
    .sg-tag{
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;
      font-size:.78rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
    }

    /* ---------- Layout ---------- */
    .sg-wrap{
      max-width:1240px;margin:0 auto;padding:32px 24px 80px;
      display:grid;gap:32px;
      grid-template-columns:1fr;
    }
    @media (min-width:960px){
      .sg-wrap{grid-template-columns:220px 1fr;align-items:start}
    }
    .sg-sidebar{
      position:sticky;top:16px;
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);
      padding:14px;box-shadow:var(--shadow-sm);
      max-height:calc(100vh - 32px);overflow:auto;
      min-width:0;
    }
    .sg-sidebar h4{
      margin:0 0 10px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;
    }
    .sg-sidebar nav{display:grid;gap:2px}
    .sg-sidebar a{
      display:block;padding:7px 10px;border-radius:6px;
      color:var(--text);text-decoration:none;font-size:.86rem;font-weight:500;
    }
    .sg-sidebar a:hover{background:var(--surface-2);color:var(--primary)}
    /* min-width:0 lets grid items shrink below their content's intrinsic
       width — otherwise a single long <pre> line expands the whole grid
       on narrow viewports (landscape phones especially). */
    .sg-main{display:grid;gap:32px;min-width:0}
    .sg-section{min-width:0}
    .sg-section pre.code,
    .sg-section .code{max-width:100%;overflow-x:auto;overflow-y:hidden}

    /* ---------- Section ---------- */
    .sg-section{
      position:relative;
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);
      padding:24px 24px 24px 28px;box-shadow:var(--shadow);
      scroll-margin-top:16px;
      overflow:hidden;
    }
    /* Default left accent stripe (overridden per section ID below). */
    .sg-section::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
      background:linear-gradient(180deg,#2481bc,#1a6494);
      border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);
      z-index:2;
    }
    /* Soft corner glow tinted with the section color. */
    .sg-section::after{
      content:"";position:absolute;left:0;top:0;width:60%;height:140px;
      background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%);
      pointer-events:none;z-index:0;
    }
    /* Per-section accents — palette cycles blue → green → purple → orange-red
       → cyan → amber → pink to keep the wall of sections visually varied. */
    #brand::before     {background:linear-gradient(180deg,#2481bc,#1a6494)}
    #brand::after      {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)}
    #color::before     {background:linear-gradient(180deg,#16a34a,#15803d)}
    #color::after      {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    #gradient::before  {background:linear-gradient(180deg,#7c3aed,#5b21b6)}
    #gradient::after   {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)}
    #type::before      {background:linear-gradient(180deg,#fbbf24,#ef4444)}
    #type::after       {background:radial-gradient(ellipse at top left,rgba(251,191,36,.12),transparent 70%)}
    #tokens::before    {background:linear-gradient(180deg,#22d3ee,#0891b2)}
    #tokens::after     {background:radial-gradient(ellipse at top left,rgba(34,211,238,.10),transparent 70%)}
    #shadow::before    {background:linear-gradient(180deg,#f59e0b,#b45309)}
    #shadow::after     {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    #button::before    {background:linear-gradient(180deg,#ec4899,#be185d)}
    #button::after     {background:radial-gradient(ellipse at top left,rgba(236,72,153,.10),transparent 70%)}
    #chip::before      {background:linear-gradient(180deg,#2481bc,#1a6494)}
    #chip::after       {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)}
    #form::before      {background:linear-gradient(180deg,#16a34a,#15803d)}
    #form::after       {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    #badge::before     {background:linear-gradient(180deg,#7c3aed,#5b21b6)}
    #badge::after      {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)}
    #card::before      {background:linear-gradient(180deg,#fbbf24,#ef4444)}
    #card::after       {background:radial-gradient(ellipse at top left,rgba(251,191,36,.12),transparent 70%)}
    #marketing::before {background:linear-gradient(180deg,#22d3ee,#0891b2)}
    #marketing::after  {background:radial-gradient(ellipse at top left,rgba(34,211,238,.10),transparent 70%)}
    #glass::before     {background:linear-gradient(180deg,#f59e0b,#b45309)}
    #glass::after      {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    #auction-v8::before{background:linear-gradient(180deg,#ec4899,#be185d)}
    #auction-v8::after {background:radial-gradient(ellipse at top left,rgba(236,72,153,.10),transparent 70%)}
    #setup::before     {background:linear-gradient(180deg,#2481bc,#1a6494)}
    #setup::after      {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)}
    #modal::before     {background:linear-gradient(180deg,#16a34a,#15803d)}
    #modal::after      {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    #feed::before      {background:linear-gradient(180deg,#7c3aed,#5b21b6)}
    #feed::after       {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)}
    #anim::before      {background:linear-gradient(180deg,#fbbf24,#ef4444)}
    #anim::after       {background:radial-gradient(ellipse at top left,rgba(251,191,36,.12),transparent 70%)}
    #icon::before      {background:linear-gradient(180deg,#22d3ee,#0891b2)}
    #icon::after       {background:radial-gradient(ellipse at top left,rgba(34,211,238,.10),transparent 70%)}
    #voice::before     {background:linear-gradient(180deg,#f59e0b,#b45309)}
    #voice::after      {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    /* Keep section content above the corner-glow. */
    .sg-section > *{position:relative;z-index:1}
    .sg-section h2{
      margin:0 0 6px;font-size:1.4rem;font-weight:800;letter-spacing:-.3px;
      display:flex;align-items:center;gap:10px;
    }
    .sg-section h2 i{color:var(--primary)}
    .sg-section .lead{margin:0 0 22px;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:800px}
    .sg-section h3{
      margin:24px 0 10px;font-size:1.05rem;font-weight:700;
      padding-bottom:6px;border-bottom:1px dashed var(--border);
    }
    .sg-section h3:first-of-type{margin-top:8px}
    .sg-note{
      background:#f1f5f9;border-left:3px solid var(--primary);
      padding:10px 12px;border-radius:6px;font-size:.86rem;color:var(--text);
      margin:12px 0;
    }
    .sg-note.warn{border-color:var(--warn);background:#fef3c7}
    .sg-note.danger{border-color:var(--danger);background:#fee2e2}
    .sg-note.success{border-color:var(--success);background:var(--success-light)}

    /* ---------- Color swatches ---------- */
    .swatch-grid{
      display:grid;gap:14px;
      grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    }
    .swatch{
      border:1px solid var(--border);border-radius:12px;overflow:hidden;
      background:#fff;
    }
    .swatch .chip{
      height:84px;display:grid;place-items:end;padding:10px;
      color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.4px;text-transform:uppercase;
    }
    .swatch.dark .chip{color:var(--text)}
    .swatch .meta{padding:10px 12px;font-size:.78rem}
    .swatch .meta .name{font-weight:700;color:var(--text);margin-bottom:2px}
    .swatch .meta .vals{color:var(--muted);font-family:'JetBrains Mono',monospace}

    /* ---------- Type specimens ---------- */
    .type-row{
      display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:baseline;
      padding:12px 0;border-bottom:1px dashed var(--border);
    }
    .type-row:last-child{border-bottom:0}
    .type-row .label{
      font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;
    }
    .type-row .label .mono{display:block;color:var(--text);text-transform:none;letter-spacing:0;margin-top:2px}
    .type-row .specimen{font-family:'Inter',sans-serif;color:var(--text)}

    .weight-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .weight-card{
      border:1px solid var(--border);border-radius:10px;padding:12px;background:#fff;
    }
    .weight-card .demo{font-size:1.1rem;line-height:1.2}
    .weight-card .meta{font-size:.72rem;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace}

    /* ---------- Token tables ---------- */
    .token-table{
      width:100%;border-collapse:collapse;font-size:.86rem;
    }
    .token-table th,.token-table td{
      text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;
    }
    .token-table th{
      font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;background:var(--surface-2);
    }
    .token-table .mono{color:var(--text)}
    .token-table .preview{display:inline-block;background:#0f172a;padding:8px 12px;border-radius:6px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:.75rem}

    .radius-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
    .radius-demo{
      width:90px;height:60px;background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;
      display:grid;place-items:center;font-weight:700;font-size:.78rem;
    }
    .radius-demo + div{font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace}

    .shadow-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:8px}
    .shadow-card{
      background:#fff;border-radius:12px;padding:24px 16px;text-align:center;font-weight:700;font-size:.88rem;
    }
    .shadow-card .meta{font-size:.7rem;color:var(--muted);font-weight:500;margin-top:6px;font-family:'JetBrains Mono',monospace}

    /* ---------- Buttons (mirroring v2-mobile) ---------- */
    .btn{
      appearance:none;border:0;cursor:pointer;font-weight:700;
      padding:10px 14px;border-radius:var(--radius-button);font-size:.88rem;
      display:inline-flex;align-items:center;justify-content:center;gap:6px;
      font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
    .btn-primary{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;box-shadow:0 4px 12px rgba(36,129,188,.32)}
    .btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.32)}
    .btn-ghost{background:#f1f5f9;color:var(--text);border:1px solid var(--border)}
    .btn-ghost:hover{background:#e2e8f0}
    .btn-danger{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
    .btn-clear-all{color:#dc2626;padding:10px 12px;background:#f1f5f9;border:1px solid var(--border);border-radius:var(--radius-button)}
    .btn-clear-all:hover{background:#fee2e2;color:#b91c1c}
    .demo-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 4px}

    /* ---------- Chips ---------- */
    .chip-demo{
      display:inline-flex;align-items:center;gap:6px;
      background:#fff;border:1px solid var(--border);
      border-radius:var(--radius-button);padding:8px 14px;cursor:pointer;
      font-size:.88rem;font-weight:600;color:var(--text);
      box-shadow:var(--shadow-sm);
      font-family:inherit;
    }
    .chip-demo.active{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;border-color:transparent}
    .chip-demo[disabled]{opacity:.55;cursor:not-allowed}

    /* ---------- Form controls ---------- */
    .form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .form-field{display:flex;flex-direction:column;gap:4px}
    .form-field label{font-size:.78rem;color:var(--muted);font-weight:600}
    .form-field select,.form-field input[type=text],.form-field input[type=email],.form-field input[type=number]{
      border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:#fff;font-size:.92rem;
      font-family:inherit;color:var(--text);
    }
    .form-field input[type=range]{padding:0;width:100%}

    /* ---------- Badges / pills ---------- */
    .badge-info{background:#dbeafe;color:#1d4ed8;padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:700;display:inline-block}
    .badge-success{background:var(--success-light);color:#15803d;padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:700;display:inline-block}
    .save-pill{display:inline-flex;align-items:center;gap:4px;background:var(--success-light);color:#15803d;padding:3px 8px;border-radius:999px;font-size:.75rem;font-weight:700}
    .trend{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:#15803d;background:var(--success-light);padding:3px 8px;border-radius:999px}
    .trend.flat{color:var(--muted);background:#f1f5f9}
    .ribbon{display:inline-block;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:999px;box-shadow:var(--shadow-sm)}
    .pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(22,163,74,.7);animation:pulse 1.6s infinite;display:inline-block}
    .pulse-dot.paused{background:var(--warn);animation:none}
    .pulse-dot.ended{background:var(--danger);animation:none}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

    /* ---------- Cards (sample bidder + held) ---------- */
    .stat-demo{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:10px 12px;
    }
    .stat-demo .k{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:2px}
    .stat-demo .v{font-size:1.15rem;font-weight:700}
    .stat-demo .v.green{color:var(--success)}
    .stat-demo .v.blue{color:var(--primary)}
    .stat-demo .v.purple{color:var(--accent)}
    .stat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

    .bidder-demo{
      background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);
      border:1px solid var(--border);max-width:340px;
    }
    .bidder-demo.best{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.18),var(--shadow);position:relative}
    .bidder-demo.best::after{
      content:"BEST DEAL";position:absolute;top:10px;right:10px;
      background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
      font-size:.65rem;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:999px;
    }
    .bidder-demo .head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,var(--surface-2))}
    .bidder-demo .vlogo{width:42px;height:42px;border-radius:10px;background:#e2e8f0;display:grid;place-items:center;font-weight:800;color:#475569}
    .bidder-demo .name{font-weight:700;font-size:.98rem;margin:0;line-height:1.1}
    .bidder-demo .sub{font-size:.78rem;color:var(--muted);margin-top:2px}
    .bidder-demo .body{padding:12px 14px;display:flex;gap:12px;align-items:center}
    .bidder-demo .meal-thumb{width:96px;height:96px;border-radius:12px;background:#f1f5f9;display:grid;place-items:center;border:1px solid var(--border);color:var(--muted);font-size:.7rem}
    .bidder-demo .info{flex:1;min-width:0}
    .bidder-demo .meal-name{font-weight:600;font-size:.95rem;margin:0 0 4px}
    .bidder-demo .price-now{font-size:1.45rem;font-weight:800;color:var(--primary)}
    .bidder-demo .price-was{font-size:.85rem;color:var(--muted);text-decoration:line-through;margin-left:8px}

    .held-demo{
      background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;
      display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);min-height:130px;width:160px;
    }
    .held-demo .h-thumb{width:100%;aspect-ratio:1.2/1;border-radius:8px;background:#f1f5f9;display:grid;place-items:center;color:var(--muted);font-size:.7rem}
    .held-demo .h-name{font-size:.78rem;font-weight:700;margin:0}
    .held-demo .h-price{font-size:1rem;font-weight:800;color:var(--primary)}
    .held-demo.empty{
      background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 8px,#f1f5f9 8px,#f1f5f9 16px);
      color:var(--muted);display:grid;place-items:center;text-align:center;font-size:.82rem;font-weight:600;
      border-style:dashed;
    }

    /* ---------- Status text demo ---------- */
    .status-text{font-weight:700;font-size:1rem;display:inline-block;margin-right:10px}
    .status-text.live{color:var(--success)}
    .status-text.paused{color:var(--warn)}
    .status-text.ended{color:var(--danger)}
    .live-word{color:var(--danger);animation:liveWordFlash 1s ease-in-out infinite;font-weight:800}
    @keyframes liveWordFlash{0%,100%{color:var(--danger);opacity:1}50%{color:#fca5a5;opacity:.55}}
    /* End-of-auction status composition */
    .ended-static{color:var(--danger);font-weight:800}
    .ended-flash{color:var(--success);font-weight:800}        /* solid (animation defined but unused) */
    @keyframes endedFlash{0%,100%{color:var(--success);opacity:1}50%{color:#86efac;opacity:.55}}
    .hand-bounce{display:inline-block;animation:handBounce 1s ease-in-out infinite}
    @keyframes handBounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}

    /* Muted Start button — series-limit state */
    .btn.btn-muted{
      background:#cbd5e1 !important;color:#64748b !important;
      box-shadow:none !important;cursor:pointer;
    }
    .btn.btn-muted:hover{transform:none;background:#94a3b8 !important;color:#fff !important}

    /* Series-limit popup (live demo, statically positioned for the guide) */
    .series-modal-static{
      background:#fff;border-radius:var(--radius);max-width:440px;
      padding:22px 22px 18px;box-shadow:var(--shadow-lg);position:relative;
      border:1px solid var(--border);
    }
    .series-modal-static .smc-close{
      position:absolute;top:10px;right:10px;background:#f1f5f9;border:0;border-radius:6px;
      width:32px;height:32px;cursor:pointer;font-size:1.2rem;color:var(--text);
    }
    .series-modal-static h3{margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--text)}
    .series-modal-static p{margin:0 0 18px;color:var(--muted);font-size:.9rem;line-height:1.5}
    .series-modal-static .smc-section{
      border-top:1px solid var(--border);padding-top:14px;text-align:center;
    }
    .series-modal-static .smc-title{margin:0 0 12px;font-size:1rem;font-weight:700;color:var(--text)}
    .series-modal-static .smc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

    /* Activity feed clickable rows */
    .feed-demo{
      background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;
      max-width:560px;
    }
    .feed-demo ul{list-style:none;margin:0;padding:6px 0}
    .feed-demo li{
      padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:.85rem;
      border-bottom:1px dashed var(--border);
    }
    .feed-demo li:last-child{border-bottom:0}
    .feed-demo .badge-sm{
      background:var(--success-light);color:#15803d;padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:700;
    }
    .feed-demo .badge-sm.info{background:#dbeafe;color:#1d4ed8}
    .feed-demo .ago{margin-left:auto;color:var(--muted);font-size:.75rem}
    .feed-demo .clickable{cursor:pointer;transition:background .15s ease}
    .feed-demo .clickable:hover{background:var(--surface-2)}

    /* ---------- Sheet preview ---------- */
    .sheet-demo{
      background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);
      border:1px solid var(--border);max-width:520px;overflow:hidden;
    }
    .sheet-demo .grip{width:42px;height:5px;border-radius:999px;background:#cbd5e1;margin:8px auto 0}
    .sheet-demo .sheet-head{padding:10px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
    .sheet-demo .sheet-title{margin:0;font-size:1.05rem;font-weight:700}
    .sheet-demo .sheet-close{margin-left:auto;background:#f1f5f9;border:0;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:1.2rem;color:var(--text)}
    .sheet-demo .sheet-body{padding:14px}
    .sheet-demo .sheet-meal{display:flex;gap:10px;align-items:flex-start}
    .sheet-demo .sheet-meal img{width:88px;height:88px;border-radius:10px;background:#f1f5f9;border:1px solid var(--border)}
    .sheet-demo .sheet-meal h4{margin:0 0 2px;font-size:.98rem}
    .sheet-demo .sheet-meal p{margin:0 0 6px;color:var(--muted);font-size:.8rem;line-height:1.35}

    /* ---------- Toast preview ---------- */
    .toast-demo{
      display:inline-block;background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;
      box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:600;
    }
    .toast-demo.success{background:#15803d}
    .toast-demo.warn{background:#b45309}

    /* ---------- Animations gallery ---------- */
    .anim-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:8px}
    .anim-card{
      background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;
      display:flex;flex-direction:column;align-items:center;gap:10px;
    }
    .anim-card .label{font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;text-align:center}
    .pulse-best{
      width:80px;height:80px;border-radius:12px;background:#fff;border:2px solid #22c55e;
      animation:bestPulseRing 1.1s ease-in-out infinite, bestBgFlash 1.1s ease-in-out infinite;
    }
    @keyframes bestPulseRing{
      0%{box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2px rgba(34,197,94,.45) inset}
      50%{box-shadow:0 0 14px 6px rgba(34,197,94,.55), 0 0 0 3px rgba(34,197,94,.85) inset}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2px rgba(34,197,94,.45) inset}
    }
    @keyframes bestBgFlash{0%,100%{background:#fff}50%{background:#dcfce7}}

    /* ---------- Icon grid ---------- */
    .icon-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .icon-tile{
      background:#fff;border:1px solid var(--border);border-radius:10px;
      padding:14px 8px;text-align:center;
    }
    .icon-tile i{font-size:1.5rem;color:var(--primary);margin-bottom:6px;display:block}
    .icon-tile .name{font-size:.7rem;color:var(--muted);font-family:'JetBrains Mono',monospace;word-break:break-all}

    /* ---------- Voice & tone ---------- */
    .voice-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
    .voice-col{
      border:1px solid var(--border);border-radius:12px;padding:14px;background:#fff;
    }
    .voice-col h4{margin:0 0 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
    .voice-col.do h4{color:var(--success)}
    .voice-col.dont h4{color:var(--danger)}
    .voice-col ul{margin:0;padding-left:18px;font-size:.88rem;color:var(--text);line-height:1.55}
    .voice-col li{margin-bottom:6px}
    .copy-sample{
      background:var(--surface-2);border-left:3px solid var(--primary);
      padding:8px 12px;border-radius:6px;margin:6px 0;font-size:.88rem;font-style:italic;color:var(--text);
    }

    /* ---------- Code block ---------- */
    pre.code{
      background:#0f172a;color:#e2e8f0;border-radius:8px;
      padding:12px 14px;font-size:.78rem;line-height:1.45;
      overflow:auto;
    }
    pre.code .tok-c{color:#94a3b8}
    pre.code .tok-k{color:#7dd3fc}
    pre.code .tok-s{color:#a7f3d0}
    pre.code .tok-n{color:#fcd34d}

    /* ---------- Layout breakpoints ---------- */
    .bp-list{display:grid;gap:8px;margin-top:8px}
    .bp-row{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:8px 12px;background:var(--surface-2);border-radius:8px;font-size:.86rem}
    .bp-row .key{font-family:'JetBrains Mono',monospace;color:var(--primary);font-weight:700}

    footer.sg-footer{
      max-width:1240px;margin:0 auto;padding:24px;text-align:center;color:var(--muted);font-size:.85rem;
    }

    /* =========================================================
       v3 / index.html DEMO BLOCKS — added 2026-05-03
       ========================================================= */

    /* Mirror v3 keyframes that the motion-section demos reference inline */
    @keyframes fzGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    @keyframes fzPulse{
      0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
      70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
    }

    /* Scroll-progress bar demo (static, just shows the gradient stripe) */
    .progress-bar-demo{
      height:3px;width:100%;border-radius:2px;
      background:linear-gradient(90deg,#22d3ee,#7c3aed,#16a34a);
      box-shadow:0 0 12px rgba(124,58,237,.5);
    }

    /* Marketing hero banner demo */
    .hero-banner-demo{
      position:relative;overflow:hidden;border-radius:var(--radius-lg);
      background:linear-gradient(135deg,#0b1220,#1a6494 50%,#7c3aed 110%);
      color:#fff;padding:32px 24px 36px;text-align:center;
    }
    .hero-banner-demo::before,
    .hero-banner-demo::after{
      content:"";position:absolute;border-radius:50%;
      filter:blur(48px);opacity:.55;pointer-events:none;
    }
    .hero-banner-demo::before{width:200px;height:200px;background:#22d3ee;top:-70px;left:-50px}
    .hero-banner-demo::after {width:220px;height:220px;background:#ec4899;bottom:-90px;right:-50px}
    .hero-banner-demo .tag-pill{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;
      font-size:.7rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;position:relative;z-index:1;
    }
    .hero-banner-demo .tag-pill .pulse-dot{width:7px;height:7px}
    .hero-banner-demo h3{margin:10px 0 6px;font-size:1.5rem;font-weight:800;line-height:1.1;position:relative;z-index:1}
    .hero-banner-demo h3 .grad{
      background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero-banner-demo p{margin:0;font-size:.88rem;opacity:.9;line-height:1.5;position:relative;z-index:1;max-width:520px;margin-left:auto;margin-right:auto}

    /* Brand-gradient swatches */
    .grad-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .grad-card{
      border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
    }
    .grad-card .grad-strip{height:64px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.4px;text-transform:uppercase}
    .grad-card .grad-meta{padding:9px 11px;font-size:.74rem;color:var(--muted);font-family:'JetBrains Mono',monospace;line-height:1.45}

    /* Glassmorphic card demo */
    .glass-stage{
      position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:26px 22px;
      background:linear-gradient(135deg,#0b1220,#1a6494 50%,#7c3aed 110%);
      display:flex;align-items:center;justify-content:center;
    }
    .glass-card{
      position:relative;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);
      border:1px solid rgba(255,255,255,.6);color:var(--text);
      border-radius:var(--radius-lg);padding:18px 18px 16px;box-shadow:var(--shadow-lg);
      max-width:300px;width:100%;
    }
    .glass-card::before{
      content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);
      background:linear-gradient(135deg,rgba(34,211,238,.7),rgba(124,58,237,.7),rgba(236,72,153,.7));
      z-index:-1;filter:blur(14px);opacity:.55;
    }
    .glass-card h4{margin:0 0 4px;font-size:1.05rem;font-weight:800;text-align:center}
    .glass-card p.sub{margin:0 0 12px;font-size:.78rem;color:var(--muted);text-align:center}
    .glass-card .glass-input{
      width:100%;border:1px solid var(--border);border-radius:10px;
      padding:9px 10px;font-size:.86rem;font-family:inherit;color:var(--text);background:#fff;
      margin-bottom:8px;
    }

    /* Pitch-stat (glass pill on dark) demo */
    .pitch-stat-demo{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      backdrop-filter:saturate(1.4) blur(8px);
      border-radius:10px;padding:8px 12px;font-size:.84rem;font-weight:600;color:#fff;
    }
    .pitch-stat-demo strong{font-weight:800;font-size:1rem}
    .pitch-stat-demo.green strong{color:#a7f3d0}
    .pitch-stat-demo.cyan  strong{color:#a5f3fc}
    .pitch-stat-demo.pink  strong{color:#fbcfe8}

    /* Animated stat-tile (gradient text counter) demo */
    .stat-tile-demo{
      text-align:center;padding:14px 10px;border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(36,129,188,.04),rgba(124,58,237,.04));
      border:1px solid rgba(36,129,188,.1);
    }
    .stat-tile-demo .v{
      font-size:2rem;font-weight:800;letter-spacing:-.5px;line-height:1;
      background:linear-gradient(135deg,#2481bc,#7c3aed);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .stat-tile-demo .v.green{background:linear-gradient(135deg,#16a34a,#15803d);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile-demo .v.cyan {background:linear-gradient(135deg,#22d3ee,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile-demo .v.amber{background:linear-gradient(135deg,#f59e0b,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile-demo .k{margin-top:6px;font-size:.74rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}

    /* Feature-card demo (icon rotates on hover) */
    .feature-card-demo{
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);
      padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
      max-width:260px;
    }
    .feature-card-demo::before{
      content:"";position:absolute;left:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
      background:radial-gradient(circle,rgba(36,129,188,.10),transparent 70%);pointer-events:none;
    }
    .feature-card-demo:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cbd5e1}
    .feature-icon-demo{
      width:42px;height:42px;border-radius:11px;
      display:grid;place-items:center;color:#fff;font-size:1.05rem;
      box-shadow:var(--shadow-sm);transition:transform .25s ease;
      background:linear-gradient(135deg,#2481bc,#1a6494);
    }
    .feature-icon-demo.purple{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
    .feature-icon-demo.green{background:linear-gradient(135deg,#16a34a,#15803d)}
    .feature-icon-demo.amber{background:linear-gradient(135deg,#f59e0b,#b45309)}
    .feature-card-demo:hover .feature-icon-demo{transform:rotate(-8deg) scale(1.08)}
    .feature-card-demo h4{margin:12px 0 4px;font-size:1rem;font-weight:800}
    .feature-card-demo p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}

    /* Sheet hold-flash demo (centered green badge) */
    .hold-flash-stage{
      position:relative;height:130px;border-radius:var(--radius);
      background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 8px,#f1f5f9 8px,#f1f5f9 16px);
      border:1px dashed var(--border);
    }
    .hold-flash-demo{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      background:linear-gradient(135deg,#22c55e,#16a34a);
      color:#fff;font-weight:500;font-size:1.05rem;letter-spacing:.2px;
      padding:14px 22px;border-radius:14px;
      box-shadow:0 18px 44px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.18) inset;
      white-space:nowrap;
    }

    /* Animated held-grid border ring demo (cyan→purple→pink) */
    .held-ring-demo{
      display:inline-block;position:relative;border-radius:14px;padding:8px;
      background:
        linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
        linear-gradient(135deg,#22d3ee,#7c3aed,#ec4899) border-box;
      border:1px solid transparent;
      background-size:300% 100%, 200% 200%;
      animation:demoHeldShift 12s ease infinite;
    }
    .held-ring-demo .inner{
      display:grid;grid-template-columns:repeat(4,52px);gap:6px;padding:4px;
    }
    .held-ring-demo .inner > div{
      height:52px;border-radius:8px;background:#fff;border:1px solid var(--border);
      display:grid;place-items:center;font-size:.7rem;color:var(--muted);font-weight:600;
    }
    @keyframes demoHeldShift{
      0%,100%{background-position:0% 0%, 0% 50%}
      50%   {background-position:0% 0%, 100% 50%}
    }

    /* Bolt-shimmer + counter-pulse demos */
    .shimmer-bolt{
      font-size:1.6rem;color:var(--accent);
      filter:drop-shadow(0 0 6px rgba(124,58,237,.55));
      animation:demoBolt 2.4s ease-in-out infinite;
    }
    @keyframes demoBolt{
      0%,100%{filter:drop-shadow(0 0 4px rgba(124,58,237,.4))}
      50%   {filter:drop-shadow(0 0 12px rgba(124,58,237,.85))}
    }
    .counter-pulse-demo{
      display:inline-flex;align-items:center;gap:4px;
      background:#dbeafe;color:#1d4ed8;font-weight:700;
      padding:3px 8px;border-radius:999px;font-size:.78rem;
      box-shadow:0 0 0 0 rgba(36,129,188,.45);
      animation:demoCounter 2.4s ease-in-out infinite;
    }
    @keyframes demoCounter{
      0%,100%{box-shadow:0 0 0 0 rgba(36,129,188,.4)}
      50%   {box-shadow:0 0 0 6px rgba(36,129,188,0)}
    }

    /* Active-chip glow demo */
    .chip-glow-demo{
      display:inline-flex;align-items:center;gap:6px;
      background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;
      padding:8px 14px;border-radius:var(--radius-button);font-weight:600;font-size:.86rem;
      box-shadow:0 4px 14px rgba(36,129,188,.32), 0 0 0 0 rgba(36,129,188,.45);
      animation:demoChipGlow 2.6s ease-in-out infinite;border:0;font-family:inherit;
    }
    @keyframes demoChipGlow{
      0%,100%{box-shadow:0 4px 14px rgba(36,129,188,.32), 0 0 0 0 rgba(36,129,188,.45)}
      50%   {box-shadow:0 4px 14px rgba(36,129,188,.32), 0 0 0 9px rgba(36,129,188,0)}
    }

    /* Mesh-background demo tile */
    .mesh-demo{
      height:140px;border-radius:var(--radius);overflow:hidden;
      background:
        radial-gradient(640px 360px at 18% 24%, rgba(34,211,238,.55), transparent 65%),
        radial-gradient(540px 320px at 82% 76%, rgba(236,72,153,.45), transparent 65%),
        radial-gradient(480px 320px at 52% 100%, rgba(124,58,237,.45), transparent 70%),
        #f8fafc;
    }

    /* Shimmer button demo (for btn-success gloss sweep) */
    .btn-shimmer{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
      box-shadow:0 6px 18px rgba(22,163,74,.4);
      padding:11px 18px;border-radius:var(--radius-button);font-weight:700;border:0;
      cursor:pointer;font-family:inherit;font-size:.92rem;
      display:inline-flex;align-items:center;gap:8px;
    }
    .btn-shimmer::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
      transform:translateX(-100%);transition:transform .6s ease;pointer-events:none;
    }
    .btn-shimmer:hover::after{transform:translateX(100%)}

    /* Audience-picker mini demo */
    .aud-card-demo{
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);
      padding:18px;box-shadow:var(--shadow-sm);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
      display:flex;flex-direction:column;gap:8px;max-width:240px;text-decoration:none;color:inherit;
    }
    .aud-card-demo:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cbd5e1}
    .aud-card-demo .aud-ico{
      width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.05rem;
      background:linear-gradient(135deg,#2481bc,#1a6494);transition:transform .25s ease;
    }
    .aud-card-demo:hover .aud-ico{transform:rotate(-8deg) scale(1.08)}
    .aud-card-demo h4{margin:4px 0 0;font-size:1.05rem;font-weight:800}
    .aud-card-demo p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
    .aud-card-demo .aud-link{
      margin-top:6px;display:inline-flex;align-items:center;gap:6px;
      color:var(--primary);font-weight:800;font-size:.84rem;
    }
    .aud-card-demo .aud-link i{transition:transform .2s ease}
    .aud-card-demo:hover .aud-link i{transform:translateX(4px)}

    /* Final-CTA mini block */
    .final-cta-demo{
      background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#0e7490 100%);
      color:#fff;border-radius:var(--radius-lg);padding:24px 22px;text-align:center;
      box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
    }
    .final-cta-demo::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 30% -20%, rgba(255,255,255,.18), transparent 70%);pointer-events:none}
    .final-cta-demo h4{margin:0 0 6px;font-size:1.2rem;font-weight:800;position:relative;z-index:1}
    .final-cta-demo p{margin:0 0 12px;opacity:.92;font-size:.88rem;position:relative;z-index:1}
    .final-cta-demo .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
    .btn-ghost-light-demo{
      background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);
      padding:10px 14px;border-radius:var(--radius-button);font-weight:700;cursor:pointer;font-family:inherit;font-size:.86rem;
      display:inline-flex;align-items:center;gap:6px;
    }

    /* =========================================================
       v8 LIVE-AUCTION DEMOS — added 2026-06-03
       Static recreations of the battle ticker, podium, and the
       6-stat headline strip. No animation in the ticker demo so it
       reads cleanly in print.
       ========================================================= */
    .ticker-demo{
      background:#0b1220;color:#cbd5e1;border-radius:12px;overflow:hidden;
      display:flex;align-items:stretch;min-height:40px;
      box-shadow:var(--shadow-sm);
    }
    .ticker-demo .label{
      background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;
      padding:6px 14px;display:flex;align-items:center;gap:8px;font-weight:800;
      font-size:.74rem;letter-spacing:.7px;text-transform:uppercase;
    }
    .ticker-demo .label .live-pulse{
      width:8px;height:8px;border-radius:50%;background:#fff;
      box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite;
    }
    .ticker-demo .track{
      flex:1;display:flex;align-items:center;gap:18px;padding:6px 14px;
      font-size:.82rem;white-space:nowrap;overflow:hidden;
    }
    .ticker-demo .item{display:inline-flex;align-items:center;gap:6px}
    .ticker-demo .item.drop  i{color:#22c55e}
    .ticker-demo .item.lead  i{color:#fbbf24}
    .ticker-demo .item.war   i{color:#22d3ee}
    .ticker-demo .item.event i{color:#a78bfa}
    .ticker-demo .item .ti-vendor{color:#a5f3fc;font-weight:700}
    .ticker-demo .item .ti-price{color:#86efac;font-weight:800}
    .ticker-demo .sep{color:#475569;opacity:.7}

    /* Podium — three tiles (silver / gold / bronze) with the gold tile
       sitting taller in the middle. Static demo only. */
    .podium-demo{
      background:linear-gradient(180deg,#0b1220,#1a6494 80%,#0b1220);
      color:#fff;border-radius:var(--radius-lg);
      padding:22px 18px 18px;position:relative;overflow:hidden;
      box-shadow:var(--shadow-lg);
    }
    .podium-demo::before{
      content:"";position:absolute;left:-30px;top:-30px;
      width:140px;height:140px;border-radius:50%;
      background:radial-gradient(circle,rgba(245,158,11,.35),transparent 70%);
      pointer-events:none;
    }
    .podium-demo .pd-head{
      display:flex;align-items:center;justify-content:space-between;gap:8px;
      margin-bottom:14px;position:relative;z-index:1;
    }
    .podium-demo .pd-title{
      margin:0;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px;
    }
    .podium-demo .pd-title i{color:#f59e0b;filter:drop-shadow(0 0 6px rgba(245,158,11,.45))}
    .podium-demo .pd-sub{font-size:.78rem;opacity:.78;font-weight:600}
    .podium-demo .pd-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
      align-items:end;position:relative;z-index:1;
    }
    .podium-demo .pd-tile{
      background:rgba(255,255,255,.06);backdrop-filter:saturate(1.4) blur(6px);
      border:1px solid rgba(255,255,255,.12);border-radius:14px;
      padding:14px 10px 12px;text-align:center;
    }
    .podium-demo .pd-tile.gold  {border-color:rgba(245,158,11,.7);padding-top:22px;padding-bottom:18px}
    .podium-demo .pd-tile.silver{border-color:rgba(203,213,225,.55)}
    .podium-demo .pd-tile.bronze{border-color:rgba(202,138,4,.5)}
    .podium-demo .medal{
      display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.6px;
      padding:3px 7px;border-radius:999px;margin-bottom:8px;color:#0b1220;
    }
    .podium-demo .pd-tile.gold   .medal{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff}
    .podium-demo .pd-tile.silver .medal{background:linear-gradient(135deg,#e2e8f0,#94a3b8)}
    .podium-demo .pd-tile.bronze .medal{background:linear-gradient(135deg,#fcd34d,#ca8a04);color:#fff}
    .podium-demo .pd-vendor{font-size:.74rem;font-weight:700;opacity:.85;margin-bottom:2px}
    .podium-demo .pd-meal  {font-size:.78rem;opacity:.7;margin-bottom:6px}
    .podium-demo .pd-price {font-size:1.15rem;font-weight:800;color:#a5f3fc}

    /* 6-stat headline strip (live-auction status hero) */
    .stat-strip-6{
      display:grid;gap:10px;grid-template-columns:repeat(6,1fr);
      background:#fff;border:1px solid var(--border);border-radius:var(--radius);
      padding:12px;box-shadow:var(--shadow-sm);
    }
    @media (max-width:759.98px){.stat-strip-6{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:419.98px){.stat-strip-6{grid-template-columns:repeat(2,1fr)}}
    .stat-strip-6 .tile{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:10px 8px;text-align:center;
    }
    .stat-strip-6 .k{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:2px}
    .stat-strip-6 .v{font-size:1.05rem;font-weight:800;line-height:1.1}
    .stat-strip-6 .v.green{color:var(--success)}
    .stat-strip-6 .v.blue {color:var(--primary)}
    .stat-strip-6 .v.purple{color:var(--accent)}

    /* =========================================================
       SETUP / ACCOUNT-PAGE DEMOS — added 2026-06-03
       Static recreations of patterns shared across
       auction-details.html, fizook-register.html, fizook-vendor.html,
       fizook-history.html, and fizook-profile.html.
       ========================================================= */

    /* Toggle group — pill segmented control (Delivery vs Pickup, etc.) */
    .toggle-group-demo{display:inline-flex;flex-wrap:wrap;gap:8px}
    .toggle-pill{
      position:relative;display:inline-flex;align-items:center;gap:6px;
      background:#fff;border:1px solid var(--border);border-radius:999px;
      padding:8px 14px;font-size:.86rem;font-weight:700;color:var(--text);
      cursor:pointer;font-family:inherit;
      transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
    }
    .toggle-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:#cbd5e1}
    .toggle-pill.active{
      background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;border-color:transparent;
      box-shadow:0 4px 12px rgba(36,129,188,.3);
    }

    /* Day-of-week row (Mon Tue Wed …) */
    .day-row-demo{display:flex;flex-wrap:wrap;gap:6px}
    .day-btn-demo{
      min-width:46px;padding:8px 10px;border-radius:10px;
      background:#fff;border:1px solid var(--border);font-weight:700;font-size:.82rem;
      color:var(--text);cursor:pointer;font-family:inherit;
      transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
    }
    .day-btn-demo:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:#cbd5e1}
    .day-btn-demo.active{
      background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;border-color:transparent;
      box-shadow:0 4px 12px rgba(36,129,188,.3);
    }

    /* Hour grid (open hours selector) */
    .hour-grid-demo{
      display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
      max-width:520px;
    }
    .hour-cell{
      padding:8px 6px;border-radius:8px;background:#fff;border:1px solid var(--border);
      text-align:center;font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;
      transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
    }
    .hour-cell:hover{transform:translateY(-1px);border-color:#cbd5e1}
    .hour-cell.on{
      background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border-color:transparent;
      box-shadow:0 3px 10px rgba(22,163,74,.25);
    }

    /* Upload preview boxes (logo + cover image dropzones) */
    .upload-preview-demo{
      width:120px;height:120px;border-radius:14px;border:2px dashed var(--border);
      display:grid;place-items:center;background:var(--surface-2);
      color:var(--muted);font-size:.74rem;font-weight:600;text-align:center;
      transition:border-color .2s ease,transform .2s ease;cursor:pointer;
    }
    .upload-preview-demo:hover{border-color:var(--primary);transform:translateY(-2px)}
    .upload-preview-demo.is-circle{border-radius:50%}
    .upload-preview-demo i{display:block;font-size:1.4rem;color:#cbd5e1;margin-bottom:4px}

    /* Live preview card (right rail on vendor signup) */
    .preview-card-demo{
      background:#fff;border:1px solid var(--border);border-radius:14px;
      padding:14px;box-shadow:var(--shadow-sm);max-width:260px;
      display:flex;flex-direction:column;gap:8px;
    }
    .preview-card-demo .pc-thumb{
      height:90px;border-radius:10px;background:#f1f5f9;border:1px solid var(--border);
      display:grid;place-items:center;color:var(--muted);font-size:.74rem;
    }
    .preview-card-demo .pc-vendor{font-size:.78rem;color:var(--muted);font-weight:600}
    .preview-card-demo .pc-name{font-size:.95rem;font-weight:800;margin:0}
    .preview-card-demo .pc-row{display:flex;align-items:baseline;gap:8px}
    .preview-card-demo .pc-price{font-size:1.2rem;font-weight:800;color:var(--primary)}
    .preview-card-demo .pc-was{font-size:.8rem;color:var(--muted);text-decoration:line-through}

    /* Tips card (dark gradient + radial blob + tip list) */
    .tips-demo{
      position:relative;overflow:hidden;border-radius:14px;
      background:linear-gradient(135deg,#0b1220,#1a6494);
      color:#fff;padding:16px 18px;
    }
    .tips-demo::before{
      content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
      background:radial-gradient(circle,rgba(34,211,238,.45),transparent 70%);pointer-events:none;
    }
    .tips-demo h4{margin:0 0 8px;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px;position:relative;z-index:1}
    .tips-demo ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.5;opacity:.92;position:relative;z-index:1}
    .tips-demo li{margin-bottom:6px}
    .tips-demo i{color:#22d3ee}

    /* Connected accounts list (profile) */
    .conn-list-demo{display:grid;gap:8px}
    .conn-row-demo{
      display:flex;align-items:center;gap:12px;
      background:#fff;border:1px solid var(--border);border-radius:12px;
      padding:10px 12px;
    }
    .conn-row-demo .conn-ico{
      width:34px;height:34px;border-radius:8px;background:var(--surface-2);
      display:grid;place-items:center;color:var(--text);font-size:1rem;flex:0 0 auto;
    }
    .conn-row-demo .conn-meta{flex:1;min-width:0}
    .conn-row-demo .conn-name{font-size:.88rem;font-weight:700;margin:0}
    .conn-row-demo .conn-sub{font-size:.74rem;color:var(--muted);margin-top:1px}
    .conn-row-demo .conn-state{
      font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px;
    }
    .conn-row-demo .conn-state.on {background:var(--success-light);color:#15803d}
    .conn-row-demo .conn-state.off{background:#f1f5f9;color:var(--muted)}

    /* Danger zone */
    .danger-zone-demo{
      border:1px solid #fecaca;background:#fff5f5;border-radius:12px;
      padding:14px 16px;
    }
    .danger-zone-demo h4{margin:0 0 4px;font-size:.95rem;font-weight:800;color:#b91c1c}
    .danger-zone-demo p{margin:0 0 10px;font-size:.84rem;color:#7f1d1d;line-height:1.45}

    /* Sticky save bar */
    .save-bar-demo{
      position:relative;background:#fff;border:1px solid var(--border);
      border-radius:14px;box-shadow:var(--shadow);
      padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    }
    .save-bar-demo .summary{font-size:.86rem;color:var(--muted);flex:1;min-width:200px}
    .save-bar-demo .summary strong{color:var(--text)}

    /* Receipt tile (history) */
    .receipt-demo{
      background:linear-gradient(135deg,#0b1220,#1a6494);color:#fff;
      border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);
      max-width:280px;
    }
    .receipt-demo .r-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.75}
    .receipt-demo .r-meal{margin:6px 0 2px;font-size:1.05rem;font-weight:800}
    .receipt-demo .r-vendor{font-size:.82rem;opacity:.85;margin-bottom:10px}
    .receipt-demo .r-row{display:flex;align-items:baseline;justify-content:space-between;font-size:.86rem}
    .receipt-demo .r-row.total{margin-top:6px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.2);font-weight:800;font-size:.95rem}
    .receipt-demo .r-row .v{color:#a7f3d0;font-weight:800}

    /* Footer mini-preview */
    .footer-demo{background:#0b1220;color:#cbd5e1;border-radius:var(--radius);padding:18px 20px}
    .footer-demo h4{margin:0 0 8px;color:#fff;font-size:.92rem;font-weight:700}
    .footer-demo .socials{display:flex;gap:10px;margin-top:10px}
    .footer-demo .socials a{
      width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);
      display:inline-flex;align-items:center;justify-content:center;color:#cbd5e1;
      transition:background .2s ease,transform .2s ease;text-decoration:none;
    }
    .footer-demo .socials a:hover{background:rgba(34,211,238,.25);transform:translateY(-2px);color:#fff}

    /* =========================================================
       RESPONSIVE — phone portrait, tiny phone, phone landscape
       Keeps the guide readable and tap-friendly on a 320–430 px
       viewport in both orientations. Single-column layout already
       kicks in below 960 px (see grid rule near the top); these
       rules tighten padding, restack rigid grids, and convert the
       sticky sidebar into a horizontal jump-menu of chips.
       ========================================================= */
    @media (max-width:959.98px){
      /* Hero — slimmer on phone/tablet */
      .sg-hero{padding:32px 18px 36px}
      .sg-hero-inner{gap:14px}
      .sg-logo{width:50px;height:50px;border-radius:14px;font-size:1.4rem}
      .sg-hero h1{font-size:1.6rem;letter-spacing:-.3px}
      .sg-hero p{font-size:.88rem;line-height:1.5}
      .sg-tag{font-size:.7rem;padding:3px 9px}

      /* Page wrap */
      .sg-wrap{padding:18px 14px 56px;gap:18px}

      /* Sidebar → horizontal chip-style jump menu pinned to top */
      .sg-sidebar{
        position:static;
        max-height:none;overflow:visible;
        padding:10px 12px;
      }
      .sg-sidebar h4{margin-bottom:8px}
      .sg-sidebar nav{
        display:flex;flex-wrap:wrap;gap:5px;
      }
      .sg-sidebar a{
        flex:0 0 auto;
        padding:6px 10px;font-size:.78rem;
        background:var(--surface-2);
        border:1px solid var(--border);
      }
      .sg-sidebar a:hover{background:#e2e8f0}

      /* Sections */
      .sg-section{padding:18px 14px}
      .sg-section h2{font-size:1.2rem;gap:8px}
      .sg-section h3{font-size:1rem;margin-top:18px}
      .sg-section .lead{font-size:.9rem}

      /* Type rows — stack the label above the specimen */
      .type-row{grid-template-columns:1fr;gap:4px;padding:10px 0}
      .type-row .label .mono{display:inline-block;margin-left:6px;margin-top:0}

      /* Breakpoint rows — stack the key above the description */
      .bp-row{grid-template-columns:1fr;gap:4px;padding:10px 12px}

      /* Demo cards — drop fixed widths so they fit at 320 px */
      .bidder-demo{max-width:100%}
      .bidder-demo .meal-thumb{width:84px;height:84px;flex:0 0 auto}
      .sheet-demo{max-width:100%}
      .series-modal-static{max-width:100%}
      .glass-card{max-width:100%}

      /* Voice grid — proper single column at narrow widths */
      .voice-grid{grid-template-columns:1fr}

      /* Hero banner demo — tighten so the gradient text doesn't wrap awkwardly */
      .hero-banner-demo{padding:24px 18px 26px}
      .hero-banner-demo h3{font-size:1.25rem}
      .hero-banner-demo p{font-size:.84rem}

      /* Held-ring demo — let inner cells flex */
      .held-ring-demo .inner{grid-template-columns:repeat(4,1fr);width:100%}
      .held-ring-demo{display:block}

      /* Stat tiles — 2-up rather than 1 long column */
      .stat-row{grid-template-columns:repeat(2,1fr)}

      /* Final CTA / glass stages — tighter padding */
      .final-cta-demo{padding:20px 16px}
      .glass-stage{padding:18px 14px}

      /* Footer */
      footer.sg-footer{padding:18px 14px;font-size:.8rem}
    }

    /* Tiny portrait phones (iPhone SE, Galaxy A series) */
    @media (max-width:419.98px){
      .sg-hero{padding:24px 14px 28px}
      .sg-hero h1{font-size:1.35rem}
      .sg-hero p{font-size:.82rem}
      .sg-logo{width:44px;height:44px;font-size:1.25rem}

      .sg-section{padding:16px 12px}
      .sg-section h2{font-size:1.05rem}
      .sg-section h3{font-size:.95rem}
      .sg-section .lead{font-size:.86rem}

      .demo-row{gap:6px}

      /* Bidder demo body — let the meal-thumb sit on its own row at very narrow widths */
      .bidder-demo .body{flex-wrap:wrap}
      .bidder-demo .meal-thumb{width:100%;aspect-ratio:16/10;height:auto}

      /* Token tables get cramped — shrink type and padding */
      .token-table{font-size:.78rem}
      .token-table th,.token-table td{padding:6px 8px}

      /* Code blocks — keep them readable, allow horizontal scroll */
      pre.code{font-size:.72rem;padding:10px 12px}

      /* Hero banner demo headline */
      .hero-banner-demo h3{font-size:1.1rem}

      /* Audience + feature mini-cards — full width */
      .feature-card-demo,.aud-card-demo{max-width:100%}
    }

    /* Phone landscape — minimize hero so the content below is reachable
       without scrolling past a giant gradient. Convert the sidebar's
       chip menu to a horizontal scrollable strip. */
    @media (orientation:landscape) and (max-height:500px){
      .sg-hero{padding:18px 16px 22px}
      .sg-hero h1{font-size:1.3rem}
      .sg-hero p{font-size:.82rem;line-height:1.4}
      .sg-logo{width:42px;height:42px;font-size:1.15rem}

      .sg-wrap{padding:12px 14px 36px;gap:14px}

      .sg-sidebar{padding:8px 10px}
      .sg-sidebar h4{
        display:inline-block;margin:0 8px 0 0;font-size:.62rem;vertical-align:middle;
      }
      .sg-sidebar nav{
        flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
        scrollbar-width:thin;
      }
      .sg-sidebar a{
        white-space:nowrap;font-size:.74rem;padding:5px 9px;
      }

      .sg-section{padding:14px 12px}
      .sg-section h2{font-size:1.05rem}
      .sg-section .lead{font-size:.85rem;margin-bottom:14px}

      .hero-banner-demo{padding:18px 16px 20px}
      .hero-banner-demo h3{font-size:1.1rem}
      .final-cta-demo{padding:16px 14px}

      footer.sg-footer{padding:14px;font-size:.78rem}
    }

    /* Belt-and-braces: never let any element force the page wider than the viewport */
    img,pre,table,.token-table,.bidder-demo,.sheet-demo,.series-modal-static,
    .glass-card,.feature-card-demo,.aud-card-demo,.hero-banner-demo,.final-cta-demo{
      max-width:100%;
    }
    body{overflow-x:hidden}

    /* =========================================================
       LIVE CHROME — added 2026-06-03
       Brings the style guide in line with the marketing + live-auction
       pages: animated mesh background, scroll-progress bar, blob /
       coin / sparkle confetti inside the hero, gradient text, and
       scroll-reveal entrances on every section card. All ambient
       motion is gated behind prefers-reduced-motion.
       ========================================================= */

    /* =========================================================
       TOP BAR — matches the primary nav on the rest of the active
       suite (fzk-new, fizook-vendor, etc.). Sticky at top:0; the
       scroll-progress stripe sits over its topmost 3 px at z-90.
       ========================================================= */
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px);
      color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
    /* Admin menu — far-left dropdown linking to docs/admin pages. */
    .admin-menu{position:relative;display:inline-block;flex:0 0 auto}
    .admin-btn{
      background:rgba(255,255,255,.08);color:#fff;border:0;
      border-radius:6px;padding:7px 12px;cursor:pointer;
      font-family:inherit;font-size:.92rem;font-weight:700;
      display:inline-flex;align-items:center;gap:8px;
      transition:background .15s ease;
    }
    .admin-btn:hover{background:rgba(255,255,255,.18)}
    .admin-btn[aria-expanded="true"]{background:rgba(255,255,255,.18)}
    .admin-btn > i.fa-cogs{color:#22d3ee;font-size:.95rem}
    .admin-btn .admin-caret{color:#cbd5e1;font-size:.78rem;margin-left:2px;transition:transform .2s ease}
    .admin-btn[aria-expanded="true"] .admin-caret{transform:rotate(180deg)}
    .admin-dropdown{
      position:absolute;top:100%;right:0;left:auto;
      margin-top:6px;min-width:210px;
      background:rgba(11,18,32,.98);
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;padding:6px;
      box-shadow:0 16px 40px rgba(0,0,0,.5);
      z-index:60;
    }
    .admin-dropdown[hidden]{display:none}
    .admin-link{
      display:flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:6px;
      color:#cbd5e1;text-decoration:none;
      font-size:.92rem;font-weight:600;
      transition:background .15s ease,color .15s ease;
    }
    .admin-link:hover{background:rgba(255,255,255,.10);color:#fff}
    .admin-link.active{background:rgba(34,211,238,.15);color:#fff}
    .admin-link i{color:#22d3ee;width:14px;text-align:center;font-size:.92rem}
    .admin-section-label{
      font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
      color:#94a3b8;padding:8px 12px 4px;
    }
    .admin-divider{
      height:1px;background:rgba(255,255,255,.10);margin:6px 4px;
    }
    @media (max-width:559.98px){
      .admin-btn{padding:6px 10px;font-size:.86rem;gap:6px}
      .admin-btn-label{display:none}
    }
    .topbar .brand{
      font-weight:800;letter-spacing:.5px;font-size:1.25rem;
      display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
      background:linear-gradient(135deg,#ffffff,#a5f3fc 60%,#fbcfe8);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .topbar .brand .dot{
      width:10px;height:10px;border-radius:50%;flex:0 0 auto;
      background:linear-gradient(135deg,#22d3ee,#7c3aed) !important;
      box-shadow:0 0 16px rgba(34,211,238,.7);
    }
    .nav-toggle{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:6px;padding:11px 14px;min-width:44px;min-height:44px;cursor:pointer}
    .topnav{display:none}
    .topbar .nav-link{
      background:transparent;border:0;font-family:inherit;color:#cbd5e1;
      text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px;
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    }
    .topbar .nav-link:hover{background:rgba(255,255,255,.14);color:#fff}
    .topbar .nav-link.active{background:rgba(36,129,188,.25);color:#fff}
    @media (min-width:900px){
      .nav-toggle{display:none}
      .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
    }
    .topnav.open{
      display:flex;flex-direction:column;align-items:stretch;gap:2px;
      padding:8px 12px;background:rgba(11,18,32,.98);
      position:absolute;top:100%;left:0;right:0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    @media (min-width:900px){.topnav.open{position:static;flex-direction:row;background:transparent;padding:0;border:0}}

    /* Mesh background — same recipe documented in §2b */
    body{
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(36,129,188,.12), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(22,163,74,.06), transparent 70%),
        var(--surface-2);
      background-attachment:fixed;
      scroll-behavior:smooth;
    }
    body::before{
      content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
      background:
        radial-gradient(640px 360px at 18% 24%, rgba(34,211,238,.18), transparent 65%),
        radial-gradient(540px 320px at 82% 76%, rgba(236,72,153,.16), transparent 65%),
        radial-gradient(480px 320px at 52% 100%, rgba(124,58,237,.14), transparent 70%);
      background-size:140% 140%;
      animation:fzMeshShift 22s ease-in-out infinite;
    }
    @keyframes fzMeshShift{
      0%,100%{background-position:0% 0%}
      50%   {background-position:100% 100%}
    }

    /* Scroll-progress stripe */
    .sg-scroll-progress{
      position:fixed;top:0;left:0;height:3px;width:0%;z-index:90;
      background:linear-gradient(90deg,#22d3ee,#7c3aed,#16a34a);
      box-shadow:0 0 12px rgba(124,58,237,.5);
      transition:width .1s linear;
    }

    /* Animated hero — replaces the flat gradient. */
    .sg-hero{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#0b1220,#1a6494 50%,#7c3aed 110%);
    }
    .sg-hero::before,.sg-hero::after{
      content:"";position:absolute;border-radius:50%;
      filter:blur(50px);opacity:.55;pointer-events:none;
    }
    .sg-hero::before{
      width:340px;height:340px;background:#22d3ee;
      top:-100px;left:-80px;animation:fzFloatA 9s ease-in-out infinite;
    }
    .sg-hero::after{
      width:380px;height:380px;background:#ec4899;
      bottom:-140px;right:-80px;animation:fzFloatB 11s ease-in-out infinite;
    }
    @keyframes fzFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
    @keyframes fzFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}

    .sg-hero-inner{position:relative;z-index:2}

    /* Let the text wrapper claim the row's remaining width so the copy
       lines up with the content area below instead of scrunching into
       a narrow column on the left of the hero. */
    .sg-hero-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
    .sg-hero h1{max-width:none;margin:0;line-height:1.1}
    .sg-hero p{max-width:none;margin:0}
    @media (min-width:1100px){
      /* Cap the paragraph at ~88ch for readability on very wide viewports,
         but keep it wide enough to span the full grid width below. */
      .sg-hero p{max-width:1100px}
    }

    /* Vertical breathing room around the hero so the H1 sits in its
       own space instead of bumping into the tag pill above and the
       paragraph below. Responsive overrides run last so landscape
       phones don't end up with a giant gradient eating the viewport. */
    .sg-hero{padding-top:60px;padding-bottom:72px}
    @media (max-width:959.98px){
      .sg-hero{padding-top:40px;padding-bottom:48px}
      .sg-hero-copy{gap:14px}
    }
    @media (max-width:419.98px){
      .sg-hero{padding-top:30px;padding-bottom:36px}
      .sg-hero-copy{gap:12px}
    }
    @media (orientation:landscape) and (max-height:500px){
      .sg-hero{padding-top:14px;padding-bottom:18px}
      .sg-hero-copy{gap:8px}
      .sg-hero h1{font-size:1.25rem;line-height:1.1}
      .sg-hero p{font-size:.8rem;line-height:1.4}
    }

    /* Falling coin emoji */
    .sg-coin{
      position:absolute;font-size:1.4rem;opacity:.85;pointer-events:none;
      animation:fzCoinFall linear infinite;z-index:1;
    }
    .sg-coin.c1{left:8%; top:-40px;animation-duration:9s; animation-delay:0s}
    .sg-coin.c2{left:24%;top:-40px;animation-duration:11s;animation-delay:1.6s}
    .sg-coin.c3{left:40%;top:-40px;animation-duration:8s; animation-delay:.8s}
    .sg-coin.c4{left:62%;top:-40px;animation-duration:12s;animation-delay:3s}
    .sg-coin.c5{left:78%;top:-40px;animation-duration:10s;animation-delay:2.2s}
    .sg-coin.c6{left:92%;top:-40px;animation-duration:13s;animation-delay:4.5s}
    @keyframes fzCoinFall{
      0%  {transform:translateY(-40px) rotate(0);opacity:0}
      10% {opacity:.9}
      90% {opacity:.9}
      100%{transform:translateY(110vh) rotate(720deg);opacity:0}
    }

    /* Drifting sparkles inside the hero */
    .sg-spark{
      position:absolute;font-size:1.05rem;opacity:.6;pointer-events:none;z-index:1;
      animation:fzSparkleDrift 7s ease-in-out infinite;
    }
    .sg-spark.s1{top:18%;left:18%;animation-delay:0s}
    .sg-spark.s2{top:62%;left:78%;animation-delay:2.4s}
    .sg-spark.s3{top:36%;left:54%;animation-delay:4.1s}
    @keyframes fzSparkleDrift{
      0%,100%{transform:translateY(0) rotate(0);opacity:.4}
      50%   {transform:translateY(-14px) rotate(20deg);opacity:.9}
    }

    /* Glowing logo — breathes via animated box-shadow only.
       (Tried a ::after halo ring earlier; it escaped the stacking
       context and could sit behind the hero gradient. box-shadow
       achieves the same visual without that risk.) */
    .sg-logo{animation:fzLogoGlow 3.6s ease-in-out infinite}
    @keyframes fzLogoGlow{
      0%,100%{box-shadow:0 0 18px rgba(124,58,237,.45)}
      50%   {box-shadow:0 0 34px rgba(34,211,238,.65)}
    }

    /* Gradient title — animates color band side to side.
       Fallback color (#a5f3fc) keeps the word legible if a browser
       can't render background-clip:text. */
    .sg-hero h1 .gradient-text{
      color:#a5f3fc;
      background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
      background-size:200% 200%;
      animation:fzGradShift 8s ease infinite;
    }
    @keyframes fzGradShift{
      0%,100%{background-position:0% 50%}
      50%   {background-position:100% 50%}
    }

    /* Pulse dot in the hero tag chip */
    .sg-tag .pulse-dot{
      width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;
      box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:fzPulseHero 1.6s infinite;
      vertical-align:middle;margin-right:6px;
    }
    @keyframes fzPulseHero{
      0%  {box-shadow:0 0 0 0 rgba(34,197,94,.6)}
      70% {box-shadow:0 0 0 12px rgba(34,197,94,0)}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
    }

    /* Scroll-into-view reveal — additive pattern.
       Sections render fully visible by default so missing/blocked JS
       can never hide content. When IntersectionObserver adds .in, the
       one-shot rise animation replays from invisible to visible. */
    .sg-section{transition:box-shadow .25s ease}
    .sg-section.in{animation:fzSectionRise .6s ease both}
    .sg-section:hover{box-shadow:var(--shadow)}
    @keyframes fzSectionRise{
      0%  {opacity:0;transform:translateY(24px)}
      100%{opacity:1;transform:translateY(0)}
    }

    /* =========================================================
       FUN LAYER — added 2026-06-03
       Gradient H2 icons, animated underline, staggered child rise,
       scroll-spy sidebar, code shimmer, hover spice, back-to-top.
       Same gradients + timings as the marketing pages.
       ========================================================= */

    /* Section H2 icon — gradient text fill + gentle bob */
    .sg-section h2{position:relative;padding-bottom:10px}
    .sg-section h2 i{
      background:linear-gradient(135deg,#2481bc,#7c3aed,#ec4899);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
      filter:drop-shadow(0 2px 6px rgba(124,58,237,.28));
      animation:fzIconBob 3.4s ease-in-out infinite;
      transform-origin:center;
    }
    @keyframes fzIconBob{
      0%,100%{transform:translateY(0) rotate(0)}
      50%   {transform:translateY(-3px) rotate(-4deg)}
    }
    /* Underline draws in under the H2 when its section reveals */
    .sg-section h2::after{
      content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
      background:linear-gradient(90deg,#22d3ee,#7c3aed,#ec4899);
      border-radius:3px;transition:width .9s ease;
    }
    .sg-section.in h2::after{width:96px}

    /* Lead paragraph slides up just behind the H2 */
    .sg-section.in .lead{animation:fzFadeUp .7s .15s ease both}
    @keyframes fzFadeUp{
      0%  {opacity:0;transform:translateY(8px)}
      100%{opacity:1;transform:translateY(0)}
    }

    /* Staggered rise for grid children inside a revealed section.
       The :nth-child cascade gives a 50–350 ms ramp; anything
       past the 7th child shares the final delay so big grids
       (icon tiles, swatches) still feel coordinated. */
    .sg-section.in .swatch,
    .sg-section.in .weight-card,
    .sg-section.in .shadow-card,
    .sg-section.in .grad-card,
    .sg-section.in .anim-card,
    .sg-section.in .icon-tile,
    .sg-section.in .stat-tile-demo,
    .sg-section.in .feature-card-demo,
    .sg-section.in .aud-card-demo,
    .sg-section.in .bidder-demo,
    .sg-section.in .conn-row-demo,
    .sg-section.in .bp-row{
      animation:fzCardRise .55s ease both;
    }
    .sg-section.in .swatch:nth-child(1),.sg-section.in .weight-card:nth-child(1),.sg-section.in .shadow-card:nth-child(1),.sg-section.in .grad-card:nth-child(1),.sg-section.in .anim-card:nth-child(1),.sg-section.in .icon-tile:nth-child(1),.sg-section.in .bp-row:nth-child(1){animation-delay:.05s}
    .sg-section.in .swatch:nth-child(2),.sg-section.in .weight-card:nth-child(2),.sg-section.in .shadow-card:nth-child(2),.sg-section.in .grad-card:nth-child(2),.sg-section.in .anim-card:nth-child(2),.sg-section.in .icon-tile:nth-child(2),.sg-section.in .bp-row:nth-child(2){animation-delay:.10s}
    .sg-section.in .swatch:nth-child(3),.sg-section.in .weight-card:nth-child(3),.sg-section.in .shadow-card:nth-child(3),.sg-section.in .grad-card:nth-child(3),.sg-section.in .anim-card:nth-child(3),.sg-section.in .icon-tile:nth-child(3),.sg-section.in .bp-row:nth-child(3){animation-delay:.15s}
    .sg-section.in .swatch:nth-child(4),.sg-section.in .weight-card:nth-child(4),.sg-section.in .shadow-card:nth-child(4),.sg-section.in .grad-card:nth-child(4),.sg-section.in .anim-card:nth-child(4),.sg-section.in .icon-tile:nth-child(4),.sg-section.in .bp-row:nth-child(4){animation-delay:.20s}
    .sg-section.in .swatch:nth-child(5),.sg-section.in .weight-card:nth-child(5),.sg-section.in .grad-card:nth-child(5),.sg-section.in .anim-card:nth-child(5),.sg-section.in .icon-tile:nth-child(5),.sg-section.in .bp-row:nth-child(5){animation-delay:.25s}
    .sg-section.in .swatch:nth-child(6),.sg-section.in .grad-card:nth-child(6),.sg-section.in .anim-card:nth-child(6),.sg-section.in .icon-tile:nth-child(6),.sg-section.in .bp-row:nth-child(6){animation-delay:.30s}
    .sg-section.in .swatch:nth-child(n+7),.sg-section.in .anim-card:nth-child(n+7),.sg-section.in .icon-tile:nth-child(n+7),.sg-section.in .bp-row:nth-child(n+7){animation-delay:.35s}
    @keyframes fzCardRise{
      0%  {opacity:0;transform:translateY(14px) scale(.96)}
      100%{opacity:1;transform:translateY(0)    scale(1)}
    }

    /* Swatches — colored halo on hover */
    .swatch{position:relative;isolation:isolate}
    .swatch::before{
      content:"";position:absolute;inset:-2px;border-radius:14px;z-index:-1;
      background:linear-gradient(135deg,#22d3ee,#7c3aed,#ec4899);
      opacity:0;transition:opacity .3s ease;filter:blur(8px);
    }
    .swatch:hover::before{opacity:.55}

    /* Icon tiles — rotate the glyph on hover */
    .icon-tile i{transition:transform .3s ease}
    .icon-tile:hover i{transform:rotate(-8deg) scale(1.18)}

    /* Token table row — gradient sweep on hover */
    .token-table tbody tr{transition:background .2s ease}
    .token-table tbody tr:hover{
      background:linear-gradient(90deg,rgba(36,129,188,.07),rgba(124,58,237,.07));
    }

    /* Sidebar nav — current section gets a pulsing primary pill (scroll spy) */
    .sg-sidebar a.is-current{
      background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff !important;
      box-shadow:0 4px 12px rgba(36,129,188,.3),0 0 0 0 rgba(36,129,188,.45);
      animation:fzNavGlow 2.6s ease-in-out infinite;
      transform:translateX(2px);
    }
    @keyframes fzNavGlow{
      0%,100%{box-shadow:0 4px 12px rgba(36,129,188,.3),0 0 0 0 rgba(36,129,188,.4)}
      50%   {box-shadow:0 4px 12px rgba(36,129,188,.3),0 0 0 9px rgba(36,129,188,0)}
    }
    /* On phone the sidebar is a chip strip — keep the pill compact */
    @media (max-width:959.98px){
      .sg-sidebar a.is-current{transform:none}
    }

    /* Code blocks — shimmer line travels along the top edge */
    pre.code{position:relative;overflow:hidden}
    pre.code::before{
      content:"";position:absolute;left:-50%;top:0;height:2px;width:50%;
      background:linear-gradient(90deg,transparent,#22d3ee,#7c3aed,#ec4899,transparent);
      animation:fzCodeShimmer 4s linear infinite;
      pointer-events:none;
    }
    @keyframes fzCodeShimmer{
      0%  {left:-50%}
      100%{left:100%}
    }

    /* Section H3 — animated dashed divider color */
    .sg-section h3{
      border-bottom:1px dashed transparent;
      background-image:linear-gradient(90deg,rgba(36,129,188,.45),rgba(124,58,237,.45),rgba(236,72,153,.45));
      background-size:200% 1px;background-position:0 100%;background-repeat:no-repeat;
      animation:fzH3Sweep 9s ease-in-out infinite;
    }
    @keyframes fzH3Sweep{
      0%,100%{background-position:0% 100%}
      50%   {background-position:100% 100%}
    }

    /* "Back to top" floating gradient orb */
    .sg-totop{
      position:fixed;right:18px;bottom:18px;z-index:80;
      width:48px;height:48px;border-radius:50%;
      background:linear-gradient(135deg,#22d3ee,#7c3aed,#ec4899);
      color:#fff;border:0;cursor:pointer;font-size:1.05rem;
      box-shadow:0 8px 24px rgba(124,58,237,.4);
      opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
      transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease,visibility .25s ease;
      display:grid;place-items:center;overflow:hidden;
      font-family:inherit;
    }
    .sg-totop.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
    .sg-totop:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(124,58,237,.55)}
    .sg-totop::after{
      content:"";position:absolute;inset:0;border-radius:50%;
      background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
      transform:translateX(-100%);transition:transform .6s ease;pointer-events:none;
    }
    .sg-totop:hover::after{transform:translateX(100%)}

    /* =========================================================
       PHONE PORTRAIT + LANDSCAPE TWEAKS for the fun layer.
       Keeps the new animated chrome (cascade, scroll-spy, back-to-top,
       gradient icons) usable on a 320–430 px viewport in either
       orientation without crowding the content.
       ========================================================= */
    @media (max-width:559.98px){
      /* Back-to-top — smaller orb, snugger to the edge */
      .sg-totop{width:42px;height:42px;right:14px;bottom:14px;font-size:.95rem}

      /* H2 underline shorter so it sits inside the card padding */
      .sg-section.in h2::after{width:68px}

      /* Section H2 icon — smaller drop-shadow, gentler bob.
         Drop-shadows can ghost on low-DPI phone screens. */
      .sg-section h2 i{filter:drop-shadow(0 1px 4px rgba(124,58,237,.22))}

      /* Coins + sparks — float-trace was tuned for desktop; thin them
         on phone so they don't crowd the smaller hero. */
      .sg-coin.c2,.sg-coin.c4,.sg-coin.c6{display:none}
      .sg-spark.s3{display:none}

      /* Hero h1 is already 1.6rem on phone (line 712).
         Reduce gradient-text background-size so the colour band
         shifts visibly in the shorter title. */
      .sg-hero h1 .gradient-text{background-size:140% 140%}
    }

    @media (max-width:419.98px){
      /* Tiny phones — orb shrinks once more */
      .sg-totop{width:38px;height:38px;right:12px;bottom:12px;font-size:.9rem}
      .sg-section.in h2::after{width:56px}

      /* Drop more coins/sparks so the hero reads cleanly */
      .sg-coin.c5{display:none}
    }

    @media (orientation:landscape) and (max-height:500px){
      /* Landscape phones — orb is at minimum size and pinned tight
         to the corner so it doesn't sit on top of dock-style fixed
         elements on other pages. */
      .sg-totop{width:36px;height:36px;right:10px;bottom:10px;font-size:.85rem}

      /* Underline shrinks too, matches smaller H2 */
      .sg-section.in h2::after{width:48px;height:2px}

      /* Hide ambient hero decoration so the slim hero stays legible */
      .sg-coin,.sg-spark{display:none}

      /* The bob on the H2 icon feels too active when the whole viewport
         is short. Disable just on this orientation. */
      .sg-section h2 i{animation:none}

      /* Scroll-spy pill — drop the active glow ring (saves repaint cost
         in a viewport that's already memory-tight on mobile Safari). */
      .sg-sidebar a.is-current{animation:none}
    }

    /* Sidebar nav link hover lift */
    .sg-sidebar a{transition:background .15s ease,color .15s ease,transform .15s ease}
    .sg-sidebar a:hover{transform:translateX(2px)}

    /* Swatches / weight cards / shadow cards / icon tiles — gentle lift on hover */
    .swatch,.weight-card,.shadow-card,.icon-tile,.feature-card-demo,.aud-card-demo,
    .stat-tile-demo,.grad-card,.bp-row{
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .swatch:hover,.weight-card:hover,.icon-tile:hover,.grad-card:hover,
    .stat-tile-demo:hover{
      transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#cbd5e1;
    }
    .shadow-card{transition:transform .2s ease,box-shadow .2s ease}
    .shadow-card:hover{transform:translateY(-2px)}

    /* Reduced-motion: kill every ambient + reveal animation, keep colors. */
    @media (prefers-reduced-motion: reduce){
      body::before,
      .sg-hero::before,.sg-hero::after,
      .sg-coin,.sg-spark,
      .sg-logo,.sg-tag .pulse-dot,
      .sg-hero h1 .gradient-text,
      .pulse-dot,.pulse-best,
      .shimmer-bolt,.counter-pulse-demo,.chip-glow-demo,
      .held-ring-demo,.live-word,.btn-shimmer::after,
      .mesh-demo,.podium-demo,.ticker-demo .live-pulse,
      .sg-section h2 i,.sg-section h3,
      .sg-sidebar a.is-current,pre.code::before{
        animation:none !important;
      }
      .sg-section{opacity:1;transform:none;transition:none}
      .sg-section.in,
      .sg-section.in .swatch,.sg-section.in .weight-card,
      .sg-section.in .shadow-card,.sg-section.in .grad-card,
      .sg-section.in .anim-card,.sg-section.in .icon-tile,
      .sg-section.in .stat-tile-demo,.sg-section.in .feature-card-demo,
      .sg-section.in .aud-card-demo,.sg-section.in .bidder-demo,
      .sg-section.in .conn-row-demo,.sg-section.in .bp-row,
      .sg-section.in .lead{
        animation:none !important;
      }
      .sg-section h2::after{transition:none}
      .sg-totop{transition:opacity .15s linear}
      .sg-hero h1 .gradient-text{color:#fff;background:none;-webkit-text-fill-color:#fff !important}
    }