/* === header === */
    /* ============================================================
       VEGASPOKIE — MEGA-MENU HEADER (header.html)
       Brand system: dark-forest bar · eucalypt green · gold accent ·
       Inter · vp- tokens · 100% inline SVG icons. Desktop-first.
       ============================================================ */

    :root{
      --vp-night-1:#06140d;
      --vp-night-2:#0a1f14;
      --vp-night-3:#0d2818;
      --vp-eucalypt:#16a34a;
      --vp-eucalypt-2:#22c55e;
      --vp-forest:#15803d;
      --vp-gold:#ca8a04;
      --vp-gold-2:#facc15;
      --vp-gold-3:#fde047;
      --vp-sun:#f97316;
      --vp-blood:#dc2626;
      --vp-ocean:#0284c7;
      --vp-pearl:#f8fafc;
      --vp-mist:#cbd5e1;
      --vp-stone:#94a3b8;
      --vp-ink:#0a1f14;
    }

    .vh, .vh *, .vh *::before, .vh *::after{ box-sizing:border-box; }
    /* crisp, pixel-free Inter rendering across the whole header */
    .vh, .vh *{
      font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      font-feature-settings:"cv11", "ss01";
    }
    .vh a{ color:inherit; text-decoration:none; }
    .vh button{ background:none; border:0; cursor:pointer; color:inherit; font:inherit; }
    .vh svg{ display:block; }

    /* ════════════════════════════════════════════════════════════
       HEADER SHELL — sticky, dark forest, gold underline
       ════════════════════════════════════════════════════════════ */
    /* full-bleed scrollbar guard: 100vw includes the vertical scrollbar width,
       which would push the bar ~15px past the content area (overflow to the right).
       Clipping horizontal overflow on the page root removes that phantom scroll,
       so the 100vw bar can reach the true viewport edges with no right-side spill. */
    html:has(.vh){ overflow-x:clip; }

    /* stick the header to the very top: kill the padding/margin the Elementor
       wrapper chain (.e-con flexbox container + .elementor-widget-container) puts
       ABOVE the header, which otherwise leaves an empty gap between the page top
       and the dark bar. Only the container that directly holds the header widget
       is targeted (the one whose descendant is .vh), so other sections are safe. */
    .elementor-element:has(> .elementor-widget-container > .vh) > .elementor-widget-container{
      padding:0 !important; margin:0 !important;
    }
    .e-con:has(.vh){ padding-top:0 !important; margin-top:0 !important; row-gap:0 !important; }
    .e-con:has(.vh) > .e-con-inner{ padding-top:0 !important; margin-top:0 !important; }

    .vh{
      position:sticky; top:0; z-index:1000;
      /* full-bleed: break out of the Elementor e-con max-width + padding wrapper
         so the dark bar reaches the viewport edges regardless of parent width/padding.
         The .vh-bar inside stays max-width:1320px centered (content stays centered). */
      width:100vw;
      max-width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      /* clip ONLY horizontal overflow (mega-panels/absolute decor); overflow-x:clip
         does NOT create a vertical clipping context, so the .vh-mega still drops below. */
      overflow-x:clip;
      background:
        radial-gradient(760px 220px at 12% -20%, rgba(22,163,74,.24), transparent 62%),
        radial-gradient(640px 220px at 88% -20%, rgba(250,204,21,.12), transparent 62%),
        linear-gradient(180deg, rgba(6,20,13,.99), rgba(9,28,18,.985) 60%, rgba(11,33,21,.98));
      backdrop-filter:blur(18px) saturate(170%);
      -webkit-backdrop-filter:blur(18px) saturate(170%);
      border-bottom:1px solid rgba(250,204,21,.16);
      box-shadow:
        0 10px 34px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06);
      color:#cbd5e1;
    }
    .vh::after{
      content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
      background:linear-gradient(90deg, transparent 0%, #16a34a 22%, #facc15 50%, #16a34a 78%, transparent 100%);
      opacity:.8; pointer-events:none;
    }
    .vh-bar{
      max-width:1320px; margin:0 auto;
      display:flex; align-items:center; gap:14px;
      padding:12px 28px;
    }

    /* ── Brand ── */
    .vh-brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
    .vh-logo{
      position:relative; overflow:hidden;
      width:42px; height:42px; border-radius:12px;
      display:grid; place-items:center; flex-shrink:0;
      background:linear-gradient(135deg,#fef08a,#facc15 38%,#f97316 100%);
      color:#0a1f14; font-size:14px; font-weight:900; letter-spacing:-.5px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -3px 6px rgba(180,83,9,.3),
        0 5px 16px rgba(249,115,22,.5),
        0 0 0 1.5px rgba(250,204,21,.45),
        0 0 26px rgba(250,204,21,.35);
      transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
    }
    .vh-logo::before{
      content:''; position:absolute; top:0; left:0; right:0; height:46%;
      background:linear-gradient(180deg, rgba(255,255,255,.5), transparent);
      border-radius:12px 12px 50% 50%;
    }
    .vh-brand:hover .vh-logo{ transform:translateY(-1px) rotate(-3deg) scale(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(249,115,22,.6), 0 0 0 1.5px rgba(250,204,21,.55), 0 0 32px rgba(250,204,21,.45); }
    .vh-brand-name{ font-size:19px; font-weight:900; color:#fff; letter-spacing:-.5px; line-height:1; }
    .vh-brand-name em{ font-style:normal; color:#facc15; text-shadow:0 0 12px rgba(250,204,21,.45); }
    .vh-brand-tag{
      display:block; margin-top:3px;
      font-size:9.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
      color:#22c55e;
    }

    /* ════════════════════════════════════════════════════════════
       PRIMARY NAV (the 6 top-level items)
       ════════════════════════════════════════════════════════════ */
    .vh-nav{
      display:flex; align-items:stretch; gap:2px;
      margin:0 6px;
      flex:1;
    }
    .vh-item{ position:relative; display:flex; }
    .vh-top{
      display:inline-flex; align-items:center; gap:6px;
      padding:11px 15px; border-radius:11px;
      font-size:14px; font-weight:700; color:#e2e8f0; letter-spacing:-.1px;
      white-space:nowrap;
      border:1px solid transparent;
      transition:color .2s, background .2s, border-color .2s, box-shadow .2s;
    }
    .vh-top .chev{
      width:13px; height:13px; transition:transform .25s cubic-bezier(.22,1,.36,1); opacity:.7;
    }
    .vh-item:hover .vh-top,
    .vh-item.is-open .vh-top{
      color:#fff;
      background:linear-gradient(180deg, rgba(250,204,21,.14), rgba(34,197,94,.08));
      border-color:rgba(250,204,21,.22);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.2);
    }
    .vh-item:hover .vh-top .chev,
    .vh-item.is-open .vh-top .chev{ transform:rotate(180deg); opacity:1; color:#facc15; }
    /* active page state */
    .vh-top.is-active{
      color:#0a1f14; background:linear-gradient(135deg,#fde047,#facc15);
      box-shadow:0 4px 12px rgba(250,204,21,.32);
    }
    .vh-top.is-active .chev{ color:#0a1f14; opacity:.85; }

    /* ════════════════════════════════════════════════════════════
       UTILITY ZONE (right side) — placeholder, filled in block 4
       ════════════════════════════════════════════════════════════ */
    .vh-utils{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

    @media (max-width:1100px){
      .vh-bar{ padding:11px 18px; gap:10px; }
      .vh-top{ padding:10px 11px; font-size:13.5px; }
    }

    /* ════════════════════════════════════════════════════════════
       MEGA PANEL — wide dropdown, opens under the bar
       ════════════════════════════════════════════════════════════ */
    .vh-mega{
      position:absolute; top:calc(100% + 11px); left:0;
      width:min(960px, 95vw);
      background:
        radial-gradient(640px 220px at 14% -8%, rgba(22,163,74,.08), transparent 60%),
        radial-gradient(520px 200px at 96% -6%, rgba(250,204,21,.07), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f6fbf1 100%);
      border:1px solid rgba(22,163,74,.14);
      border-radius:22px;
      box-shadow:
        0 48px 100px -34px rgba(6,20,13,.62),
        0 22px 48px -22px rgba(22,163,74,.26),
        0 2px 0 rgba(22,163,74,.05),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 0 0 1px rgba(255,255,255,.5);
      padding:0; overflow:hidden;
      opacity:0; visibility:hidden; transform:translateY(-10px) scale(.985);
      transform-origin:top left;
      transition:opacity .26s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1), visibility .26s;
      color:#0a1f14;
      z-index:1001;
    }
    /* fine grain texture for a premium matte-glass surface */
    .vh-mega::after{
      content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
      opacity:.4; mix-blend-mode:multiply;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.035'/></svg>");
    }
    /* gold top hairline inside the panel */
    .vh-mega::before{
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg,#22c55e,#16a34a 40%,#facc15 70%,#ca8a04);
      box-shadow:0 1px 8px rgba(250,204,21,.4);
      z-index:3;
    }
    /* keep panel content above the grain layer */
    .vh-mega-grid{ position:relative; z-index:1; }
    .vh-item.is-open .vh-mega,
    .vh-item:hover .vh-mega{
      opacity:1; visibility:visible; transform:translateY(0) scale(1);
    }
    /* hover bridge so the gap doesn't drop the menu */
    .vh-item::after{
      content:''; position:absolute; top:100%; left:0; width:100%; height:14px;
    }
    .vh-item.align-right .vh-mega{ left:auto; right:0; transform-origin:top right; }

    /* ── two-pane layout: tab rail (left) + content (right) ── */
    .vh-mega-grid{ display:grid; grid-template-columns:248px minmax(0,1fr); }

    /* LEFT — tab rail */
    .vh-tabs{
      background:linear-gradient(165deg, rgba(22,163,74,.09), rgba(250,204,21,.05) 70%, transparent);
      border-right:1px solid rgba(22,163,74,.12);
      padding:18px 14px;
      display:flex; flex-direction:column; gap:4px;
    }
    .vh-tabs-label{
      font-size:10px; font-weight:900; letter-spacing:.9px; text-transform:uppercase;
      color:#15803d; padding:2px 12px 11px;
    }
    .vh-tab{
      position:relative;
      display:grid; grid-template-columns:auto minmax(0,1fr) auto;
      align-items:center; column-gap:12px;
      padding:11px 13px; border-radius:13px;
      font-size:13.5px; font-weight:700; color:#1e293b; letter-spacing:-.1px;
      text-align:left; width:100%;
      transition:background .15s, color .15s, box-shadow .15s;
    }
    /* tab label on one line */
    .vh-tab > span:not(.ti){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vh-tab .ti{
      position:relative; overflow:hidden;
      width:34px; height:34px; border-radius:10px; flex-shrink:0;
      display:grid; place-items:center; color:#fff;
      background:linear-gradient(135deg,#22c55e,#16a34a 55%,#15803d);
      box-shadow:0 5px 12px rgba(22,163,74,.34), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.12);
      transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
    }
    /* glossy sheen on each chip */
    .vh-tab .ti::before{
      content:''; position:absolute; top:0; left:0; right:0; height:48%;
      background:linear-gradient(180deg, rgba(255,255,255,.34), transparent);
      border-radius:10px 10px 60% 60%;
    }
    .vh-tab .ti svg{ width:17px; height:17px; position:relative; z-index:1; }
    .vh-tab .tgo{
      width:16px; height:16px; opacity:0; transform:translateX(-4px);
      transition:opacity .2s, transform .2s; color:#15803d;
    }
    .vh-tab:hover{ background:rgba(22,163,74,.08); color:#0a1f14; }
    .vh-tab:hover .ti{ transform:scale(1.06) rotate(-2deg); }
    .vh-tab.is-active{
      background:linear-gradient(180deg,#ffffff,#fbfefa); color:#0a1f14;
      box-shadow:0 10px 26px -8px rgba(22,163,74,.28), 0 2px 6px rgba(6,20,13,.06), inset 0 1px 0 rgba(255,255,255,.9);
      border:1px solid rgba(22,163,74,.16);
    }
    .vh-tab.is-active .ti{ transform:scale(1.04); }
    /* active left marker bar */
    .vh-tab.is-active::before{
      content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
      width:4px; height:22px; border-radius:99px;
      background:linear-gradient(180deg,#22c55e,#16a34a,#facc15);
      box-shadow:0 0 10px rgba(34,197,94,.5);
    }
    .vh-tab.is-active .tgo{ opacity:1; transform:translateX(0); }
    /* per-tab accent colors */
    .vh-tab[data-accent="gold"] .ti{ background:linear-gradient(135deg,#facc15,#ca8a04); color:#0a1f14; box-shadow:0 4px 10px rgba(202,138,4,.32); }
    .vh-tab[data-accent="blue"] .ti{ background:linear-gradient(135deg,#0ea5e9,#1e40af); box-shadow:0 4px 10px rgba(14,165,233,.32); }
    .vh-tab[data-accent="rose"] .ti{ background:linear-gradient(135deg,#ef4444,#b91c1c); box-shadow:0 4px 10px rgba(220,38,38,.32); }

    /* RIGHT — panes */
    .vh-panes{ position:relative; padding:20px 22px; }
    .vh-pane{ display:none; }
    .vh-pane.is-active{ display:block; animation:vh-fade .22s ease; }
    @keyframes vh-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

    /* content row: link columns (left) + feature card (right, fixed width) */
    .vh-cols{
      display:grid;
      grid-template-columns:1fr 1fr 208px;
      grid-template-rows:auto 1fr;
      gap:6px 14px; align-items:start;
    }
    .vh-col{ min-width:0; grid-row:1; }
    .vh-col .vh-col-h{
      margin:0 0 8px; padding:0 9px 9px;
      font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#15803d;
      border-bottom:1px solid rgba(22,163,74,.16);
      display:flex; align-items:center; gap:7px;
    }
    .vh-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

    /* link = premium row: icon chip LEFT + title RIGHT (.li svg used directly) */
    .vh-link{
      position:relative;
      display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; column-gap:10px;
      padding:8px 10px; border-radius:11px;
      font-size:13px; font-weight:700; color:#0a1f14; line-height:1.25; letter-spacing:-.1px;
      /* keep every label on ONE line — no ugly mid-word breaks */
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      border:1px solid transparent;
      transition:background .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, color .2s, border-color .2s;
    }
    /* the title text sits in the 2nd grid cell and truncates cleanly if needed */
    .vh-link > :not(.li){ min-width:0; overflow:hidden; text-overflow:ellipsis; }
    /* turn the inline .li svg into a chip via box on the svg itself */
    .vh-link .li{
      position:relative; overflow:hidden;
      width:32px; height:32px; border-radius:9px; flex-shrink:0;
      padding:8px; box-sizing:border-box;
      color:#15803d; background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(22,163,74,.08));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
      transition:background .2s, color .2s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
    }
    .vh-link:hover{
      background:linear-gradient(180deg,#ffffff,#f6fbf1);
      transform:translateX(3px);
      box-shadow:0 8px 20px -6px rgba(22,163,74,.2), 0 1px 3px rgba(6,20,13,.05);
      color:#15803d; border-color:rgba(22,163,74,.14);
    }
    .vh-link:hover .li{
      background:linear-gradient(135deg,#22c55e,#15803d); color:#fff;
      transform:scale(1.08) rotate(-3deg);
      box-shadow:0 5px 12px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.4);
    }
    /* inline tag chip after the title */
    .vh-link .tag{
      display:inline-block; margin-left:7px; vertical-align:middle;
      font-size:9px; font-weight:900; letter-spacing:.3px; text-transform:uppercase;
      padding:2px 7px; border-radius:99px;
    }
    .tag.hot{ color:#fff; background:linear-gradient(135deg,#ef4444,#b91c1c); }
    .tag.new{ color:#fff; background:linear-gradient(135deg,#22c55e,#15803d); }

    /* feature card — fixed right column, readable, layered depth */
    .vh-feature{
      grid-column:3; grid-row:1 / span 2; align-self:stretch;
      display:flex; flex-direction:column; justify-content:flex-end; gap:9px;
      padding:18px; border-radius:18px; color:#fff; position:relative; overflow:hidden; isolation:isolate;
      background:
        radial-gradient(120% 80% at 85% 0%, rgba(34,197,94,.4), transparent 55%),
        linear-gradient(158deg,#06140d 0%,#0b2417 45%,#123a22 80%,#15803d 140%);
      min-height:210px;
      border:1px solid rgba(250,204,21,.16);
      box-shadow:
        0 18px 40px -14px rgba(6,20,13,.6),
        0 4px 12px -4px rgba(22,163,74,.3),
        inset 0 1px 0 rgba(255,255,255,.14);
      transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
    }
    .vh-feature:hover{
      transform:translateY(-3px);
      box-shadow:0 26px 54px -16px rgba(6,20,13,.66), 0 6px 16px -4px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.18);
    }
    /* gold glow top-right (decorative, behind text) */
    .vh-feature::before{
      content:''; position:absolute; top:-34%; right:-22%; width:82%; height:82%; z-index:-1;
      background:radial-gradient(circle, rgba(250,204,21,.42), transparent 64%);
      filter:blur(2px);
    }
    /* dark scrim bottom + fine grid texture so title/text always reads */
    .vh-feature::after{
      content:''; position:absolute; inset:0; z-index:-1;
      background:
        linear-gradient(180deg, transparent 28%, rgba(3,10,6,.78) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px);
    }
    .vh-feature-tag{
      position:relative; z-index:1; align-self:flex-start;
      font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
      padding:5px 12px; border-radius:99px; color:#0a1f14;
      background:linear-gradient(135deg,#fef08a,#facc15 55%,#eab308);
      box-shadow:0 4px 12px rgba(250,204,21,.5), inset 0 1px 0 rgba(255,255,255,.6);
    }
    .vh-feature .vh-feature-h{
      position:relative; z-index:1; margin:0; font-size:17px; font-weight:900;
      line-height:1.22; letter-spacing:-.4px; color:#fff;
      text-shadow:0 2px 12px rgba(0,0,0,.55);
    }
    .vh-feature p{
      position:relative; z-index:1; margin:0; font-size:12px; color:#d7e3d2; line-height:1.55;
      text-shadow:0 1px 6px rgba(0,0,0,.5);
    }
    .vh-feature .go{
      position:relative; z-index:1; align-self:flex-start; margin-top:4px; overflow:hidden;
      display:inline-flex; align-items:center; gap:7px;
      padding:9px 15px; border-radius:11px;
      font-size:12px; font-weight:900; color:#0a1f14; letter-spacing:.1px;
      background:linear-gradient(135deg,#fef08a,#facc15 55%,#eab308);
      box-shadow:0 8px 18px rgba(250,204,21,.45), inset 0 1px 0 rgba(255,255,255,.65);
      transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
    }
    /* moving sheen across the button */
    .vh-feature .go::before{
      content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
      background:linear-gradient(110deg, transparent, rgba(255,255,255,.6), transparent);
      transform:skewX(-18deg);
    }
    .vh-feature:hover .go::before{ animation:vh-sheen 1.1s cubic-bezier(.22,1,.36,1); }
    @keyframes vh-sheen{ from{ left:-130%; } to{ left:170%; } }
    .vh-feature .go:hover{ transform:translateY(-2px); box-shadow:0 13px 26px rgba(250,204,21,.6), inset 0 1px 0 rgba(255,255,255,.7); }
    .vh-feature .go svg{ width:13px; height:13px; position:relative; }

    /* bottom promo strip — fills the panel, adds a useful row */
    .vh-foot{
      grid-column:1 / 3; grid-row:2; align-self:end;
      margin-top:14px; padding-top:13px;
      border-top:1px solid rgba(22,163,74,.14);
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    }
    .vh-foot-note{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px; font-weight:700; color:#475569;
    }
    .vh-foot-note svg{ width:15px; height:15px; color:#15803d; flex-shrink:0; }
    .vh-foot-note b{ color:#0a1f14; font-weight:900; }
    .vh-foot-link{
      display:inline-flex; align-items:center; gap:6px;
      font-size:12.5px; font-weight:900; color:#15803d;
    }
    .vh-foot-link svg{ width:14px; height:14px; }
    .vh-foot-link:hover{ color:#0a1f14; }

    /* simpler (no-tab) mega body */
    .vh-mega.is-plain{ width:min(720px, 94vw); }
    .vh-mega.is-plain .vh-panes{ padding:22px 24px; }

    @media (max-width:1100px){
      .vh-mega{ width:min(720px, 95vw); }
      .vh-mega-grid{ grid-template-columns:200px minmax(0,1fr); }
      .vh-cols{ grid-template-columns:1fr 200px; }
      .vh-col:nth-child(2){ grid-column:1; }
      .vh-feature{ grid-column:2; grid-row:1 / 99; min-height:180px; }
    }

    /* ════════════════════════════════════════════════════════════
       UTILITY ZONE — AU region pill + search
       ════════════════════════════════════════════════════════════ */
    .vh-region{
      display:inline-flex; align-items:center; gap:7px;
      padding:7px 12px; border-radius:99px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(250,204,21,.22);
      font-size:12px; font-weight:800; color:#e2e8f0; letter-spacing:.1px;
      white-space:nowrap;
    }
    .vh-region .flag{
      width:20px; height:14px; border-radius:3px; flex-shrink:0;
      box-shadow:0 1px 4px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.18);
    }
    /* search */
    .vh-search{ position:relative; }
    .vh-search-box{
      display:flex; align-items:center; gap:8px;
      padding:8px 13px; border-radius:99px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.14);
      transition:border-color .18s, background .18s;
      width:210px;
    }
    .vh-search-box:focus-within{
      border-color:rgba(250,204,21,.5);
      background:rgba(255,255,255,.12);
      box-shadow:0 0 0 4px rgba(250,204,21,.12);
    }
    .vh-search-box svg{ width:16px; height:16px; color:#94a3b8; flex-shrink:0; }
    .vh-search-box:focus-within svg{ color:#facc15; }
    .vh-search-box input{
      flex:1; min-width:0; background:none; border:0; outline:none;
      color:#fff; font-size:13px; font-weight:500; font-family:inherit;
    }
    .vh-search-box input::placeholder{ color:#94a3b8; font-weight:500; }
    .vh-search-key{
      font-size:10px; font-weight:800; color:#94a3b8;
      padding:2px 7px; border-radius:6px;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      flex-shrink:0;
    }

    @media (max-width:1240px){ .vh-search-box{ width:170px; } }
    @media (max-width:1100px){
      .vh-region{ display:none; }
      .vh-search-box{ width:150px; }
      .vh-search-key{ display:none; }
    }

    @media (prefers-reduced-motion: reduce){
      .vh-mega, .vh-pane, .vh-link, .vh-tab, .vh-tab .ti, .vh-link .li,
      .vh-top, .vh-logo, .vh-feature, .vh-feature .go, .chev{
        transition:none; animation:none;
      }
      .vh-feature .go::before{ display:none; }
    }

    /* ════════════════════════════════════════════════════════════════════
       ███  MOBILE — app-shell (frosted app-bar + bottom tab-bar + sheet)
       breakpoint ≤900 (single-col switch) · phone ≤430 compact
       ════════════════════════════════════════════════════════════════════ */

    /* mobile-only elements hidden on desktop */
    .vh-burger, .vh-search-btn, .vh-tabbar, .vh-sheet, .vh-scrim{ display:none; }
    /* these live OUTSIDE <header class="vh"> — so reset native button styling here too */
    .vh-tabbar, .vh-tabbar *, .vh-sheet, .vh-sheet *{ box-sizing:border-box; }
    .vh-tabbar button, .vh-sheet button{ background:none; border:0; cursor:pointer; color:inherit; font:inherit; }
    .vh-tabbar a, .vh-sheet a{ color:inherit; text-decoration:none; }
    .vh-tabbar svg, .vh-sheet svg{ display:block; }
    .vh-tabbar, .vh-tabbar *, .vh-sheet, .vh-sheet *{
      font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    @media (max-width:900px){
      /* ── app-bar: collapse desktop nav, frosted, safe-area ── */
      /* ALWAYS-VISIBLE: position:sticky; top:0 (from the base .vh rule) keeps the
         header pinned on mobile too. The old scroll-down hide is removed — never
         translate the bar off-screen, even if .is-hidden somehow lingers. */
      .vh{
        backdrop-filter:blur(20px) saturate(170%);
        -webkit-backdrop-filter:blur(20px) saturate(170%);
        position:sticky; top:0;
      }
      .vh.is-hidden{ transform:none; }
      .vh-bar{
        padding:10px 14px;
        padding-top:max(10px, env(safe-area-inset-top, 0px));
        gap:10px;
      }
      /* hide desktop mega nav + desktop utilities */
      .vh-nav{ display:none; }
      .vh-region, .vh-search{ display:none; }
      .vh-brand-tag{ display:none; }
      .vh-brand-name{ font-size:18px; }

      /* utility cluster shows the icon buttons instead */
      .vh-utils{ margin-left:auto; gap:6px; }
      .vh-search-btn, .vh-burger{
        display:grid; place-items:center;
        width:42px; height:42px; border-radius:12px;
        color:#e2e8f0;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(250,204,21,.18);
        transition:transform .15s, background .18s, border-color .18s;
      }
      .vh-search-btn svg, .vh-burger svg{ width:20px; height:20px; }
      .vh-search-btn:active, .vh-burger:active{ transform:scale(.92); }
      .vh-burger .x{ display:none; }
      .vh-burger.is-open .menu{ display:none; }
      .vh-burger.is-open .x{ display:block; }
      .vh-burger.is-open{ background:linear-gradient(135deg,#fde047,#facc15); color:#0a1f14; border-color:transparent; }

      /* ── BOTTOM TAB-BAR (5 slots) ── */
      .vh-tabbar{
        display:grid; grid-template-columns:repeat(5,1fr);
        position:fixed; left:0; right:0; bottom:0; z-index:1002;
        padding:7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
        background:
          radial-gradient(500px 120px at 50% 0%, rgba(22,163,74,.16), transparent 70%),
          linear-gradient(180deg, rgba(8,24,15,.92), rgba(6,20,13,.97));
        backdrop-filter:blur(22px) saturate(180%);
        -webkit-backdrop-filter:blur(22px) saturate(180%);
        border-top:1px solid rgba(250,204,21,.18);
        box-shadow:0 -8px 30px rgba(0,0,0,.4);
      }
      .vh-tabbar::before{
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background:linear-gradient(90deg, transparent, #16a34a 30%, #facc15 50%, #16a34a 70%, transparent);
        opacity:.7;
      }
      .vh-mtab{
        position:relative;
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
        min-height:52px; padding:5px 2px; border-radius:13px;
        color:#94a3b8; font-size:10.5px; font-weight:800; letter-spacing:.1px;
        transition:color .18s, transform .12s;
      }
      .vh-mtab:active{ transform:scale(.92); }
      .vh-mtab .mic{
        width:26px; height:26px; display:grid; place-items:center; border-radius:9px;
        transition:background .2s, color .2s, box-shadow .2s;
      }
      .vh-mtab .mic svg{ width:21px; height:21px; }
      .vh-mtab.is-active{ color:#fde047; }
      .vh-mtab.is-active .mic{
        background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(250,204,21,.16));
        color:#fde047;
        box-shadow:0 4px 12px rgba(22,163,74,.3), inset 0 1px 0 rgba(255,255,255,.18);
      }
      .vh-tabbar-ind{
        position:absolute; top:4px; height:3px; border-radius:99px;
        left:var(--ind-x, 0); width:var(--ind-w, 0);
        background:linear-gradient(90deg,#22c55e,#facc15);
        box-shadow:0 0 10px rgba(250,204,21,.6);
        transition:left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
      }

      /* ── SLIDE-UP SHEET (More / category accordion) ── */
      .vh-scrim{
        display:block; position:fixed; inset:0; z-index:1003;
        background:rgba(3,10,6,.5); backdrop-filter:blur(3px);
        opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s;
      }
      .vh-scrim.is-open{ opacity:1; visibility:visible; }
      /* ── premium DARK cinematic sheet ── */
      .vh-sheet{
        display:flex; flex-direction:column;
        position:fixed; left:0; right:0; bottom:0; z-index:1004;
        max-height:88dvh;
        padding:8px 0 calc(14px + env(safe-area-inset-bottom, 0px));
        color:#e8f0e6;
        background:
          radial-gradient(700px 300px at 18% 0%, rgba(22,163,74,.28), transparent 60%),
          radial-gradient(600px 280px at 92% 4%, rgba(250,204,21,.14), transparent 62%),
          linear-gradient(180deg,#0a1f14 0%,#08190f 50%,#06140d 100%);
        border-radius:28px 28px 0 0;
        border-top:1px solid rgba(250,204,21,.2);
        box-shadow:0 -28px 80px rgba(3,10,6,.7), inset 0 1px 0 rgba(255,255,255,.08);
        transform:translateY(100%);
        transition:transform .42s cubic-bezier(.22,1,.36,1);
      }
      .vh-sheet::before{
        content:''; position:absolute; top:0; left:0; right:0; height:3px;
        border-radius:28px 28px 0 0;
        background:linear-gradient(90deg, transparent, #16a34a 28%, #facc15 50%, #16a34a 72%, transparent);
        box-shadow:0 1px 10px rgba(250,204,21,.5);
      }
      /* faint starfield grain */
      .vh-sheet::after{
        content:''; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:28px 28px 0 0;
        background:
          radial-gradient(1.5px 1.5px at 22% 12%, rgba(250,204,21,.5), transparent 60%),
          radial-gradient(1.5px 1.5px at 78% 8%, rgba(34,197,94,.5), transparent 60%),
          radial-gradient(1.5px 1.5px at 60% 18%, rgba(250,204,21,.35), transparent 60%);
        opacity:.7;
      }
      .vh-sheet.is-open{ transform:translateY(0); }
      .vh-sheet > *{ position:relative; z-index:1; }
      .vh-sheet-handle{
        align-self:center; width:44px; height:5px; border-radius:99px;
        background:linear-gradient(90deg, rgba(34,197,94,.6), rgba(250,204,21,.6));
        margin:4px 0 12px; box-shadow:0 0 8px rgba(250,204,21,.4);
      }
      .vh-sheet-head{
        display:flex; align-items:center; justify-content:space-between; gap:12px;
        padding:0 18px 14px; margin:0 6px;
        border-bottom:1px solid rgba(250,204,21,.14);
      }
      .vh-sheet-head .vh-sheet-h{
        margin:0; font-size:16px; font-weight:900; color:#fff; letter-spacing:-.3px;
        display:inline-flex; align-items:center; gap:10px;
      }
      .vh-sheet-head .slogo{
        position:relative; overflow:hidden;
        width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
        font-size:11px; font-weight:900; color:#0a1f14;
        background:linear-gradient(135deg,#fef08a,#facc15 40%,#f97316);
        box-shadow:0 4px 12px rgba(249,115,22,.5), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(250,204,21,.4);
      }
      .vh-sheet-head .slogo::before{ content:''; position:absolute; top:0; left:0; right:0; height:46%; background:linear-gradient(180deg,rgba(255,255,255,.5),transparent); }
      .vh-sheet-close{
        width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
        color:#e2e8f0; background:rgba(255,255,255,.07); border:1px solid rgba(250,204,21,.2);
        transition:transform .14s, background .18s;
      }
      .vh-sheet-close:active{ transform:scale(.9); background:rgba(250,204,21,.16); }
      .vh-sheet-close svg{ width:18px; height:18px; }
      .vh-sheet-body{
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        padding:14px 14px 6px;
        -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px);
        mask-image:linear-gradient(180deg, transparent 0, #000 14px);
      }

      /* in-sheet search — glassy on dark */
      .vh-sheet-search{
        display:flex; align-items:center; gap:10px;
        margin:0 2px 14px; padding:13px 15px; border-radius:14px;
        background:rgba(255,255,255,.07);
        border:1px solid rgba(250,204,21,.2);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
        transition:border-color .18s, background .18s, box-shadow .18s;
      }
      .vh-sheet-search:focus-within{
        border-color:rgba(250,204,21,.55); background:rgba(255,255,255,.1);
        box-shadow:0 0 0 4px rgba(250,204,21,.12);
      }
      .vh-sheet-search svg{ width:19px; height:19px; color:#22c55e; flex-shrink:0; }
      .vh-sheet-search:focus-within svg{ color:#facc15; }
      .vh-sheet-search input{
        flex:1; min-width:0; border:0; outline:none; background:none;
        font-family:inherit; font-size:15px; font-weight:600; color:#fff;
      }
      .vh-sheet-search input::placeholder{ color:#94a3b8; font-weight:500; }

      /* ── ACCORDION = glass cards (one per top category) ── */
      .vh-acc{
        margin-bottom:9px; border-radius:16px; overflow:hidden;
        background:linear-gradient(180deg, rgba(13,40,24,.85), rgba(8,24,15,.8));
        border:1px solid rgba(34,197,94,.14);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.25);
        transition:border-color .2s, box-shadow .25s, background .25s;
      }
      .vh-acc.is-open{
        background:
          radial-gradient(360px 130px at 12% 0%, rgba(22,163,74,.3), transparent 70%),
          linear-gradient(180deg, rgba(18,52,32,.9), rgba(10,31,20,.85));
        border-color:rgba(250,204,21,.34);
        box-shadow:0 14px 34px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(250,204,21,.12), inset 0 1px 0 rgba(255,255,255,.1);
      }
      .vh-acc-head{
        position:relative;
        display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:13px;
        width:100%; padding:14px 15px; text-align:left;
        font-size:15.5px; font-weight:800; color:#fff; letter-spacing:-.2px;
        background:transparent; border:0; cursor:pointer; font-family:inherit;
      }
      .vh-acc-head:active{ background:rgba(250,204,21,.06); }
      .vh-acc-ic{
        position:relative; overflow:hidden;
        width:40px; height:40px; border-radius:12px; flex-shrink:0;
        display:grid; place-items:center; color:#fff;
        background:linear-gradient(135deg,#22c55e,#16a34a 55%,#15803d);
        box-shadow:0 5px 14px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.16);
        transition:transform .25s cubic-bezier(.22,1,.36,1);
      }
      .vh-acc-ic::before{ content:''; position:absolute; top:0; left:0; right:0; height:48%; background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); border-radius:12px 12px 60% 60%; }
      .vh-acc-ic svg{ width:20px; height:20px; position:relative; z-index:1; }
      .vh-acc.is-open .vh-acc-ic{ transform:scale(1.06) rotate(-3deg); }
      .vh-acc[data-accent="gold"] .vh-acc-ic{ background:linear-gradient(135deg,#fef08a,#facc15 55%,#ca8a04); color:#0a1f14; box-shadow:0 5px 14px rgba(202,138,4,.42), inset 0 1px 0 rgba(255,255,255,.6); }
      .vh-acc[data-accent="blue"] .vh-acc-ic{ background:linear-gradient(135deg,#38bdf8,#0ea5e9 55%,#1e40af); box-shadow:0 5px 14px rgba(14,165,233,.42), inset 0 1px 0 rgba(255,255,255,.4); }
      .vh-acc[data-accent="rose"] .vh-acc-ic{ background:linear-gradient(135deg,#fb7185,#ef4444 55%,#b91c1c); box-shadow:0 5px 14px rgba(220,38,38,.42), inset 0 1px 0 rgba(255,255,255,.4); }
      .vh-acc-chev{
        width:30px; height:30px; padding:6px; border-radius:9px; box-sizing:border-box;
        color:#94a3b8; background:rgba(255,255,255,.06);
        transition:transform .3s cubic-bezier(.22,1,.36,1), color .2s, background .2s;
      }
      .vh-acc.is-open .vh-acc-chev{ transform:rotate(180deg); color:#fde047; background:rgba(250,204,21,.14); }
      .vh-acc-panel{
        display:grid; grid-template-rows:0fr;
        transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1);
      }
      .vh-acc.is-open .vh-acc-panel{ grid-template-rows:1fr; }
      .vh-acc-panel-inner{ overflow:hidden; }
      .vh-acc-grid{
        display:grid; grid-template-columns:1fr 1fr; gap:6px;
        padding:4px 12px 14px;
      }
      .vh-acc-link{
        display:flex; align-items:center; gap:10px;
        padding:11px 11px; border-radius:12px; min-height:46px;
        font-size:13px; font-weight:700; color:#e2ede0; letter-spacing:-.1px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        background:rgba(6,20,13,.5);
        border:1px solid rgba(34,197,94,.12);
        transition:background .16s, border-color .16s, color .16s, transform .12s;
      }
      .vh-acc-link:active{ background:rgba(250,204,21,.12); border-color:rgba(250,204,21,.3); color:#fff; transform:scale(.97); }
      .vh-acc-link .ali{
        width:30px; height:30px; padding:7px; border-radius:8px; box-sizing:border-box; flex-shrink:0;
        color:#22c55e; background:rgba(34,197,94,.14);
      }
      .vh-acc-link .ali svg{ width:16px; height:16px; }
      .vh-acc-link .tag{
        font-size:8.5px; font-weight:900; letter-spacing:.3px; text-transform:uppercase;
        padding:2px 6px; border-radius:99px; flex-shrink:0;
      }
    }

    @media (max-width:430px){
      .vh-bar{ padding:9px 12px; padding-top:max(9px, env(safe-area-inset-top, 0px)); }
      .vh-brand-name{ font-size:17px; }
      .vh-logo{ width:38px; height:38px; }
      .vh-search-btn, .vh-burger{ width:40px; height:40px; }
      .vh-mtab{ font-size:9.5px; min-height:50px; }
      .vh-mtab .mic svg{ width:20px; height:20px; }
      .vh-acc-grid{ gap:5px; }
      .vh-acc-link{ font-size:12.5px; }
    }
    @media (max-width:360px){
      .vh-acc-grid{ grid-template-columns:1fr; }
    }

    /* no hover effects on touch devices */
    @media (hover:none){
      .vh-link:hover, .vh-tab:hover{ transform:none; }
    }