:root {
      --bg:#090909; --surface:#151515; --surface-2:#1b1f27;
      --border:#272b35; --border-strong:#3a4150;
      --ink:#e4e4e7; --ink-2:#a1a1aa; --ink-3:#71717a;
      --accent:#7c8cff; --accent-2:#22d3ee; --accent-3:#7c8cff;
      --success:#34d399; --warning:#fbbf24; --danger:#f87171;
      /* Vibrant brand gradient from Steam blue to cyan to indigo. Used on the
         headline highlight, primary CTAs, eyebrows and key numbers so the
         page has one consistent splash of colour instead of flat blue. */
      --grad: #7c8cff;
      --grad-glow: 0 8px 26px rgba(124,140,255,.30);
    }
    body { background:var(--bg); color:var(--ink); font-feature-settings:'cv11','ss01'; }

    /* Gradient text helper (clipped fill). Falls back to accent if a browser
       can't clip the background to the text. */
    .grad-text { color:var(--accent);
      background:var(--grad); -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; }
    .panel  { background:var(--surface); border:1px solid var(--border); border-radius:4px; }
    .num { font-family:'Manrope','Inter','-apple-system','BlinkMacSystemFont',sans-serif; font-variant-numeric:tabular-nums; }

    /* Buttons */
    .btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px;
      background:var(--grad); color:#06121f; font-weight:700; padding:12px 22px; border-radius:4px;
      font-size:14px; box-shadow:var(--grad-glow);
      transition:filter .15s ease, box-shadow .15s ease, transform .15s ease; }
    .btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px);
      box-shadow:0 10px 30px rgba(124,140,255,.45); }
    .btn-primary.lg { padding:15px 28px; font-size:15px; }
    /* (Old `nav .btn-primary` mobile-hide removed 2026-07-22: the nav CTAs now
       use the dedicated .nav-cta / .nav-login classes, hidden <md by default.) */
    .btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:11px 20px; border-radius:4px; color:var(--ink-2); border:1px solid var(--border);
      font-size:14px; font-weight:500; transition:color .12s, border-color .12s; }
    .btn-ghost:hover { color:var(--ink); border-color:var(--border-strong); }

    /* Sliders */
    input[type=range] { -webkit-appearance:none; appearance:none; width:100%; background:transparent; }
    input[type=range]::-webkit-slider-runnable-track { height:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:2px; }
    input[type=range]::-moz-range-track { height:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:2px; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-7px;
      background:var(--accent); border:1px solid var(--accent); border-radius:50%; cursor:pointer;
      box-shadow:0 0 0 4px rgba(124,140,255,0.10); transition:box-shadow .15s; }
    input[type=range]::-webkit-slider-thumb:hover { box-shadow:0 0 0 6px rgba(124,140,255,0.18); }
    input[type=range]::-moz-range-thumb { width:16px; height:16px; background:var(--accent); border:1px solid var(--accent); border-radius:50%; cursor:pointer; }

    /* Status pip (used in trust strip) */

    /* Subtle divider gradient for the hero */
    .hero-grid { background-image:
        linear-gradient(rgba(39,43,53,0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39,43,53,0.45) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image:radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
      -webkit-mask-image:radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%); }

    /* Hero background photo. It sits at opacity .32 under the vignette, so it's
       pure atmosphere, not content. We DON'T load it below 768px: on phones
       it's barely visible through the gradient and the ~300KB download is the
       single biggest asset on the page - not worth it on cellular. Desktop
       still gets it. */
    .hero-bg { background-size:cover; background-position:center; opacity:0.32; }
    @media (min-width:768px) {
      .hero-bg { background-image:var(--hi-hero-bg); }
    }

    /* Mobile sticky CTA - only visible after the user scrolls past the hero. */
    .sticky-cta { display:none; position:fixed; bottom:0; left:0; right:0; z-index:40;
      background:var(--surface); border-top:1px solid var(--border-strong); padding:10px 14px env(safe-area-inset-bottom); }
    @media (max-width:640px) { .sticky-cta.visible { display:flex; gap:10px; align-items:center; } }

    /* Inputs in modals */
    .input { width:100%; padding:9px 12px; border-radius:4px; background:var(--bg);
      border:1px solid var(--border); color:var(--ink); font-size:13px;
      font-family:'Manrope','Inter','-apple-system','BlinkMacSystemFont',sans-serif;
      transition:border-color .12s ease; }
    .input:focus { outline:none; border-color:var(--accent); background:var(--surface); }
    .input::placeholder { color:var(--ink-3); }

    details > summary::-webkit-details-marker { display:none; }

    ::-webkit-scrollbar { width:8px; height:8px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:var(--border); }
    ::-webkit-scrollbar-thumb:hover { background:var(--border-strong); }

    /* ===== Site header =====
       Taller 64px glass bar. Links are quiet ink-2 pills that light up on a
       soft surface tint - no glow, no gimmicks. The single blue CTA is the
       only saturated element so the eye lands on it. */
    .site-nav {
      background: var(--bg);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid var(--border);
    }
    html.minimal-home .site-nav {
      background: var(--bg);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .site-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1320px; height: 64px; gap: 12px; }
    .site-nav .brand-link { flex: 0 0 auto; white-space: nowrap; }
    .site-nav-links { display: none !important; align-items: center; min-width: 0; }
    .nav-link {
      position: relative;
      display: inline-block;
      color: var(--ink-2);
      font-size: 14.5px;
      font-weight: 500;
      padding: 8px 13px;
      border-radius: 8px;
      line-height: 1.25;
      white-space: nowrap;
      flex: 0 0 auto;
      transition: color .18s ease, background-color .18s ease;
    }
    .nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
    .nav-link.is-active { color: var(--ink); }
    /* Right-side auth cluster: quiet login link + one solid CTA. Both custom
       classes (NOT tailwind utilities) so the precompiled-css purge can't eat
       them, and both hidden <md - the drawer carries auth on mobile. */
    .nav-login {
      display: none;
      color: var(--ink-2); font-size: 14px; font-weight: 600;
      padding: 9px 12px; border-radius: 8px;
      white-space: nowrap; flex: 0 0 auto;
      transition: color .15s ease;
    }
    .nav-login:hover { color: var(--ink); }
    .nav-cta {
      display: none;
      align-items: center;
      background: var(--accent); color: #090909;
      font-size: 14px; font-weight: 700;
      padding: 9px 18px; border-radius: 8px;
      line-height: 1.25; white-space: nowrap; flex: 0 0 auto;
      transition: filter .15s ease, transform .12s ease;
    }
    .nav-cta:hover { filter: brightness(1.1); }
    .nav-cta:active { transform: translateY(1px); }
    @media (min-width: 768px) {
      .nav-login { display: inline-flex; }
      .nav-cta   { display: inline-flex; }
    }
    @media (min-width: 1280px) { .site-nav-links { display: flex !important; } }

    /* Brand mark - subtle icon glow on hover so the click target reads. */
    .brand-link { transition: opacity .2s ease; }
    .brand-link img { transition: filter .3s ease; }
    .brand-link:hover img { filter: drop-shadow(0 0 8px rgba(124,140,255,0.45)); }

    /* Nav dropdown - opens on hover (desktop) or focus-within (keyboard).
       Two-column grid of feature links. The invisible ::after bridge below
       the trigger fills the 14px gap to the menu so hover doesn't break
       when the cursor traverses diagonally. Mobile uses the regular link
       target (the parent /features page) since hover doesn't exist on touch. */
    .nav-dropdown { position: relative; }
    .nav-dropdown::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      height: 18px;
      /* invisible - just extends the hover hit-area down to the menu */
    }
    .nav-dropdown-menu {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      width: 480px;
      max-width: calc(100vw - 24px);
      padding: 8px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
      z-index: 50;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    /* Each menu row - icon + title only. Generous click target. */
    .nav-dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 4px;
      transition: background-color .15s ease;
    }
    .nav-dropdown-item:hover { background: var(--surface-2); }
    .nav-dropdown-item-icon {
      flex-shrink: 0;
      color: var(--accent);
      width: 22px; height: 22px;
      display: flex; align-items: center; justify-content: center;
    }
    .nav-dropdown-item-title {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.3;
    }
    .nav-dropdown-footer {
      grid-column: span 2;
      padding: 10px 12px;
      margin-top: 4px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-size: 12px;
    }
    .nav-dropdown-footer a {
      color: var(--accent);
      text-decoration: none;
      transition: text-decoration-color .15s ease;
    }
    .nav-dropdown-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* Language selector - compact flag dropdown. Hover/focus-within reveal,
       same interaction model as .nav-dropdown (no JS). Desktop only; mobile
       uses the flag row inside the hamburger menu. */
    /* display via custom media query (NOT Tailwind md:block - that utility
       isn't in the precompiled tailwind.css, so it'd silently stay hidden). */
    .lang-dropdown { position: relative; display: none; }
    @media (min-width: 768px) { .lang-dropdown { display: block; } }
    /* Just the flag with a thin stroke - no box, no chevron. Click toggles. */
    .lang-trigger {
      display: inline-flex; align-items: center; line-height: 0;
      padding: 2px; border-radius: 4px;
      background: transparent; border: 1px solid var(--border-strong);
      cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
    }
    .lang-trigger:hover { border-color: var(--accent); }
    .lang-dropdown.open .lang-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,140,255,0.15); }
    .lang-trigger img { width: 34px; height: 23px; border-radius: 3px; display: block; object-fit: cover; }
    .lang-menu {
      position: absolute;
      top: calc(100% + 10px); right: 0;
      opacity: 0; pointer-events: none; transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease;
      width: 190px; padding: 6px;
      background: var(--surface); border: 1px solid var(--border-strong);
      border-radius: 4px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
      z-index: 50;
    }
    .lang-dropdown.open .lang-menu {
      opacity: 1; pointer-events: auto; transform: translateY(0);
    }
    .lang-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 4px;
      font-size: 13.5px; font-weight: 500; color: var(--ink);
      transition: background-color .15s ease;
    }
    .lang-item:hover { background: var(--surface-2); }
    .lang-item img { width: 22px; height: 16px; border-radius: 2px; display: block; object-fit: cover; flex-shrink: 0; }
    .lang-item.active { background: var(--surface-2); }
    .lang-item.active span { color: var(--accent); }

    /* Mobile language row - lives at the foot of the hamburger menu. */
    .mobile-menu-lang { padding: 12px 4px 4px; border-top: 1px solid var(--border); margin-top: 6px; }
    .mobile-menu-lang-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 10px; }
    .mobile-menu-lang-flags { display: flex; flex-wrap: wrap; gap: 10px; }
    .mobile-menu-lang-flag { padding: 3px; border-radius: 4px; border: 1px solid transparent; line-height: 0; }
    .mobile-menu-lang-flag img { width: 30px; height: 21px; border-radius: 3px; display: block; object-fit: cover; }
    .mobile-menu-lang-flag.active { border-color: var(--accent); }

    /* Feature card - just .panel with a subtle border-tint on hover. No
       icons, no gradients, no decorative rules. The copy carries the card. */

    /* ===== Compact nav: right-side drawer =====
       Used below 1280px. The hamburger slides a fixed drawer in from
       the right with a dimmed backdrop, like a native app - NOT the old
       slide-down-under-the-bar panel. Markup lives OUTSIDE <nav> because the
       nav's backdrop-filter creates a containing block that would trap
       position:fixed descendants. */
    .mobile-menu-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px;
      border-radius: 8px;
      color: var(--ink-2);
      transition: color .15s ease, background-color .15s ease;
    }
    /* Hard-hide on desktop: the compiled tailwind.css loads before this inline
       \3c style>, so .md:hidden alone loses to .mobile-menu-btn's display. */
    @media (min-width: 1280px) { .mobile-menu-btn { display: none; } }
    .mobile-menu-btn:hover { color: var(--ink); background: var(--surface-2); }

    .mobile-drawer-backdrop {
      position: fixed; inset: 0; z-index: 60;
      background: rgba(4,6,10,0.62);
      opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
    }
    .mobile-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .mobile-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
      width: min(320px, 86vw);
      display: flex; flex-direction: column;
      background: var(--surface);
      border-left: 1px solid var(--border-strong);
      box-shadow: -24px 0 60px rgba(0,0,0,0.5);
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.22,1,.36,1);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .mobile-drawer.is-open { transform: none; }
    @media (min-width: 1280px) { .mobile-drawer, .mobile-drawer-backdrop { display: none; } }
    @media (prefers-reduced-motion: reduce) {
      .mobile-drawer, .mobile-drawer-backdrop { transition: none; }
    }
    .drawer-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 12px 12px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .drawer-close {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 8px;
      color: var(--ink-2);
      transition: color .15s ease, background-color .15s ease;
    }
    .drawer-close:hover { color: var(--ink); background: var(--surface-2); }
    .drawer-links { padding: 8px 0; }
    .mobile-menu-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 20px;
      font-size: 15px; font-weight: 600;
      color: var(--ink-2);
      transition: color .15s ease, background-color .15s ease;
    }
    .mobile-menu-link:hover,
    .mobile-menu-link:active { color: var(--ink); background: var(--surface-2); }
    /* Auth + language pinned to the drawer foot. */
    .drawer-foot {
      margin-top: auto;
      padding: 16px 20px 20px;
      border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 10px;
      flex-shrink: 0;
    }
    .drawer-cta {
      display: flex; align-items: center; justify-content: center;
      background: var(--accent); color: #090909;
      font-size: 15px; font-weight: 700;
      padding: 13px 16px; border-radius: 8px;
      transition: filter .15s ease;
    }
    .drawer-cta:hover, .drawer-cta:active { filter: brightness(1.08); color: #090909; }
    .drawer-login {
      display: flex; align-items: center; justify-content: center;
      color: var(--ink-2); font-size: 14px; font-weight: 600;
      padding: 12px 16px; border-radius: 8px;
      border: 1px solid var(--border-strong);
      transition: color .15s ease, border-color .15s ease;
    }
    .drawer-login:hover, .drawer-login:active { color: var(--ink); border-color: var(--accent); }


    /* ===== "Why boost" + example-accounts two-column block ===== */
    .why-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; max-width: 64rem; margin-left: auto; margin-right: auto; }
    .why-head { font-size: 1.75rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.15; }
    .why-sub  { font-size: 1rem; color: #fff; margin-top: 5px; margin-bottom: 16px; }
    .why-box  { background: #4a3f78; border: 1px solid #5a4f8c; padding: 24px 26px; }
    .accts-box { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); padding: 24px 26px; }
    /* Two columns + equal heights only on desktop. On mobile the boxes are
       auto-height (height:100% there overflowed the grid row and overlapped). */
    @media (min-width: 768px) {
      .why-grid { grid-template-columns: 1fr 1fr; }
      .why-box, .accts-box { height: 100%; }
    }
    .accts-watermark { position: absolute; right: -30px; bottom: -30px; width: 300px; height: auto; opacity: 0.07; pointer-events: none; }
    .why-list, .accts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
    .why-list li  { position: relative; padding-left: 20px; color: #fff; font-size: 15px; line-height: 1.55; }
    .accts-list li { position: relative; padding-left: 22px; color: #fff; font-size: 17px; line-height: 1.5; }
    .why-list li::before, .accts-list li::before { content: '•'; position: absolute; left: 3px; color: #fff; }
    .accts-list a {
      color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px;
      display: inline-flex; align-items: center; gap: 7px; transition: border-color .15s ease;
    }
    .accts-list a:hover { border-color: #fff; }
    .accts-check { width: 16px; height: 16px; color: #fff; flex-shrink: 0; }

    /* ===== Revamped hero ===== */
    .hero-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }
    .hero-cols { display:grid; grid-template-columns:1fr; gap:40px; align-items:center; position:relative; z-index:1; }
    @media (min-width:980px){ .hero-cols { grid-template-columns:1.04fr .96fr; gap:52px; } }
    .hero-copy { text-align:center; }
    @media (min-width:980px){ .hero-copy { text-align:left; } }
    .hero-trust { display:flex; flex-wrap:wrap; gap:9px 16px; align-items:center; justify-content:center; margin-top:30px; }
    /* On desktop keep all three signals on one line; below 980px (narrow
       column) they're allowed to wrap. */
    @media (min-width:980px){ .hero-trust { justify-content:flex-start; flex-wrap:nowrap; } }
    .hero-trust .t { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); white-space:nowrap; }
    .hero-trust .t b { color:var(--ink); font-weight:700; }
    .hero-trust .t svg { width:15px; height:15px; flex-shrink:0; }
    .hero-stars { display:inline-flex; gap:1px; }
    .hero-stars svg { width:13px; height:13px; color:#fbbf24; fill:#fbbf24; }

    /* Fanned game posters in the hero - the outer two tilt away like a hand
       of cards while the middle one sits raised and on top. Static (no bob
       animation): the tilt IS the composition, and a transform animation
       would fight the rotate. Captions removed - the alt text still names
       each game for crawlers/screen readers. */
    .float-games { display:flex; justify-content:center; align-items:center;
      gap:clamp(10px,2.2vw,22px); padding:14px 0; }
    .float-card { width:clamp(108px,15vw,164px); }
    .float-card:nth-child(1){ transform:rotate(-5deg) translateY(10px); }
    .float-card:nth-child(2){ transform:translateY(-12px); position:relative; z-index:2; }
    .float-card:nth-child(3){ transform:rotate(5deg) translateY(10px); }
    .float-poster { display:block; width:100%; aspect-ratio:600/900; object-fit:cover;
      border-radius:10px; background:var(--surface-2); border:1px solid var(--border-strong);
      box-shadow:0 22px 45px rgba(0,0,0,.55); }

    /* Real, live global hours counter - the showcase number in the hero's
       right column. Server-rendered with the true fleet total, count-up
       animated on load, then refreshed by the same 5-min poll as the safety
       section. This is the genuine figure; nothing here is fabricated. */
    .hero-fleet { margin-top:30px; text-align:center; }
    @media (min-width:980px){ .hero-fleet { text-align:left; } }
    .hero-fleet-num { display:block; font-family:'Manrope','Inter',sans-serif;
      font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
      font-size:clamp(2rem,4.4vw,3rem); line-height:1.04; }
    .hero-fleet-label { display:block; margin-top:6px; color:var(--ink-3);
      font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

    /* Highlighted "Most popular" pricing card - accent ring + soft glow + a
       faint gradient wash at the top so it lifts off the row of plain plans. */
    .plan-pop { border-color:transparent !important;
      box-shadow:0 0 0 1.5px var(--accent), 0 18px 44px rgba(124,140,255,.20);
      background:linear-gradient(180deg, rgba(124,140,255,.07), transparent 42%), var(--surface); }

    /* Approved pricing presentation shared by every localized homepage. */
    .pricing-en .pricing-shell { max-width:1280px; }
    .pricing-en .pricing-heading { margin-bottom:58px; }
    .pricing-en .pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
      gap:28px; align-items:stretch; }
    .pricing-en .pricing-card { min-height:470px; padding:30px 30px 28px;
      border:1px solid #2a2e37; border-radius:16px; background:#101216;
      box-shadow:none; transition:transform .18s ease,border-color .18s ease,background-color .18s ease; }
    .pricing-en .pricing-card:hover { transform:translateY(-3px); border-color:#3a4150; }
    .pricing-en .pricing-card.plan-pop { border-color:var(--accent-3) !important;
      background:linear-gradient(180deg,rgba(124,140,255,.055),rgba(124,140,255,.018)),#101116;
      box-shadow:0 0 0 1px rgba(124,140,255,.12); }
    .pricing-en .pricing-badge { top:-11px !important; right:18px; left:auto !important;
      transform:none !important; padding:7px 16px !important; border-radius:999px;
      background:var(--accent-3) !important; color:#fff !important; box-shadow:none !important;
      font-size:11px; line-height:1; letter-spacing:.01em; text-transform:none; }
    .pricing-en .pricing-plan-name { text-align:center; font-size:20px; line-height:1.2;
      font-weight:700; letter-spacing:-.015em; }
    .pricing-en .pricing-price { display:flex; align-items:baseline; justify-content:center;
      flex-wrap:wrap; gap:3px; margin:20px 0 28px; min-height:54px; text-align:center; }
    .pricing-en .pricing-price-amount { color:var(--accent-3) !important;
      font-size:42px; line-height:1; font-weight:800; letter-spacing:-.03em; }
    .pricing-en .pricing-price-suffix { color:var(--ink-2) !important; font-size:15px; }
    .pricing-en .pricing-price-note { flex-basis:100%; margin-top:7px !important;
      color:var(--ink-3) !important; font-size:11px; }
    .pricing-en .pricing-account-summary,
    .pricing-en .pricing-unit-price { display:none; }
    .pricing-en .pricing-feature-list { margin:0 0 28px; padding:26px 8px 0;
      border-top:1px solid #292c33; color:#b4b4bc !important; font-size:14px;
      line-height:1.45; }
    .pricing-en .pricing-feature-list li { display:block; margin:0 0 13px; }
    .pricing-en .pricing-feature-list li:last-child { margin-bottom:0; }
    .pricing-en .pricing-feature-list svg { display:none; }
    .pricing-en .pricing-feature-list .pricing-feature-missing { display:none; }
    .pricing-en .pricing-cta { min-height:50px; margin-top:auto; padding:0 18px !important;
      border:0 !important; border-radius:14px; background:var(--accent-3) !important;
      color:#fff !important; font-size:15px; font-weight:700; box-shadow:none;
      transition:filter .15s ease,transform .15s ease; }
    .pricing-en .pricing-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
    @media (max-width:1023px) {
      .pricing-en .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    }
    @media (max-width:639px) {
      .pricing-en .pricing-heading { margin-bottom:42px; }
      .pricing-en .pricing-grid { grid-template-columns:1fr; gap:20px; }
      .pricing-en .pricing-card { min-height:0; padding:28px 26px 26px; }
    }

    /* Hero headline/subhead/CTA sizing driven by explicit CSS rather than
       Tailwind utilities: the precompiled tailwind.css doesn't include the
       unprefixed text-4xl / leading-[1.04] / md:* classes, so relying on them
       silently shrank the mobile headline to body size. clamp() also gives a
       smoother responsive curve than discrete breakpoints. */
    .hero-h1  { font-size:clamp(2.05rem, 6.2vw, 3.75rem); line-height:1.05; letter-spacing:-0.02em; }
    /* English brand hero: two identical layers create a moving liquid fill.
       Keep shadows off the clipped layer; filters render its rectangular clip
       surface in some browsers instead of following the letter shapes. */
    .houridler-wave-title { position:relative; display:inline-grid; isolation:isolate;
      margin:0; font-size:clamp(3.45rem,9vw,5.8rem); line-height:.96;
      letter-spacing:-.055em; white-space:nowrap; }
    .houridler-wave-title > span { grid-area:1 / 1; display:block; }
    .houridler-wave-base { color:rgba(228,228,231,.90);
      text-shadow:-1px -1px 0 rgba(228,228,231,.34),0 -1px 0 rgba(228,228,231,.34),
        1px -1px 0 rgba(228,228,231,.34),1px 0 0 rgba(228,228,231,.34),
        1px 1px 0 rgba(228,228,231,.34),0 1px 0 rgba(228,228,231,.34),
        -1px 1px 0 rgba(228,228,231,.34),-1px 0 0 rgba(228,228,231,.34); }
    .houridler-wave-fill { color:var(--accent);
      clip-path:polygon(0% 52%,16% 47%,34% 50%,52% 60%,68% 58%,84% 51%,100% 48%,100% 100%,0% 100%);
      animation:houridlerWave 4s ease-in-out infinite; will-change:clip-path; }
    @keyframes houridlerWave {
      0%,100% { clip-path:polygon(0% 52%,16% 47%,34% 50%,52% 60%,68% 58%,84% 51%,100% 48%,100% 100%,0% 100%); }
      50% { clip-path:polygon(0% 45%,16% 50%,34% 59%,52% 55%,68% 47%,84% 44%,100% 50%,100% 100%,0% 100%); }
    }
    @media (max-width:420px) { .houridler-wave-title { font-size:clamp(3rem,16vw,4.15rem); } }
    @media (prefers-reduced-motion:reduce) {
      .houridler-wave-fill { animation:none;
        clip-path:polygon(0% 50%,16% 46%,34% 51%,52% 58%,68% 56%,84% 49%,100% 47%,100% 100%,0% 100%); }
    }
    .hero-sub { font-size:1.0625rem; line-height:1.62; max-width:34rem; margin-left:auto; margin-right:auto; }
    .hero-cta { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; margin-top:30px; }
    @media (min-width:640px){ .hero-cta { flex-direction:row; } }
    @media (min-width:980px){
      .hero-sub { margin-left:0; margin-right:0; }
      .hero-cta { justify-content:flex-start; }
    }

    /* ===== Motion =====
       Everything is scoped to html.js-anim (set by the inline head script) so
       content is never hidden without JS, and every rule collapses to static
       under prefers-reduced-motion. */
    html { scroll-behavior:smooth; }

    /* Keep the hero copy immediately readable. Only the supporting poster
       composition and fleet counter enter with motion. */
    @keyframes riseIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
    html.js-anim .float-games { animation:riseIn .8s cubic-bezier(.22,1,.36,1) .15s both; }
    html.js-anim .hero-fleet  { animation:riseIn .8s cubic-bezier(.22,1,.36,1) .35s both; }

    /* Scroll-reveal REMOVED (2026-07-22, operator request): sections render
       static; [data-rv] attributes remain in the markup but are inert. Only
       the one-time hero load entrance above is kept. */

    /* Reduced-motion handling lives in the head gate script: html.js-anim is
       never added for those users (unless ?motion=1 forces a preview), so all
       the rules above simply don't apply. Only smooth scroll needs a CSS-level
       opt-out because it isn't scoped to the class. */
    @media (prefers-reduced-motion:reduce) {
      html:not(.js-anim) { scroll-behavior:auto; }
    }
  
      .risk-row { display:flex; flex-wrap:wrap; justify-content:center; gap:11px 26px;
        margin-top:30px; max-width:60rem; margin-left:auto; margin-right:auto; }
      .risk-item { display:inline-flex; align-items:center; gap:8px;
        font-size:13px; font-weight:600; color:var(--ink-2); }
      .risk-item svg { width:16px; height:16px; flex-shrink:0; color:var(--success); }
    
  .lbt-wrap { max-width: 720px; margin: 0 auto; }
  .lbt-head { text-align: center; margin-bottom: 22px; }
  .lbt-h2 { display: inline-flex; align-items: center; gap: 9px; color: var(--ink);
            font-weight: 800; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.01em; }
  .lbt-sub { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
  .lbt-list { border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
              background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
  .lbt-row { display: grid; grid-template-columns: 38px 40px 1fr auto; align-items: center;
             gap: 14px; padding: 13px 18px; }
  .lbt-row + .lbt-row { border-top: 1px solid var(--border); }
  .lbt-rank { text-align: center; font-family: 'Manrope','Inter',sans-serif;
              font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--ink-3); }
  .lbt-row:first-child .lbt-rank { color: #f5c542; }
  .lbt-avatar { width: 40px; height: 40px; border-radius: 4px; object-fit: cover;
                background: var(--surface-2); border: 1px solid var(--border-strong); display: block; }
  .lbt-name { font-size: 14px; font-weight: 600; color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lbt-hours { font-family: 'Manrope','Inter',sans-serif; font-variant-numeric: tabular-nums;
               font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; text-align: right; }
  .lbt-hours span { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
  .lbt-cta { text-align: center; margin-top: 18px; }
  .lbt-cta a { color: var(--accent); font-size: 14px; font-weight: 600; }
  .lbt-cta a:hover { text-decoration: underline; text-underline-offset: 2px; }

    /* Brand-unified feature cards: surface panels (var(--surface)) with the site
       border + 12px radius + soft shadow, matching the pricing / video / community
       cards. (Previously a separate deep-navy #0b1f46 Figma palette - retoned so
       the page reads as one card system instead of stitched-together frames.) */
    .hw-section { padding-top: 64px; }
    @media (min-width: 768px) { .hw-section { padding-top: 96px; } }
    .hw-wrap { max-width: 1000px; margin: 0 auto; }
    .hw-h2 { text-align: center; color: var(--ink); font-weight: 700; line-height: 1.15;
             font-size: clamp(22px, 3vw, 30px); }
    .hw-sub { text-align: center; color: var(--ink-2); font-weight: 600; font-size: 18px; margin-top: 10px; }
    .hw-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 34px; }
    @media (min-width: 768px) { .hw-grid { grid-template-columns: repeat(3, 1fr); } }
    .hw-card {
      position: relative; overflow: hidden;
      background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.35);
      padding: 22px 22px 24px; min-height: 200px;
      transition: border-color .15s ease;
    }
    .hw-card:hover { border-color: var(--border-strong); }
    .hw-title { color: var(--ink); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0; }
    .hw-title.lg { font-size: 24px; }
    .hw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .hw-icon { width: 54px; height: 54px; object-fit: contain; flex: none; }
    .hw-pills { display: grid; grid-template-columns: repeat(2, 93px); column-gap: 40px; row-gap: 13px; margin-top: 22px; }
    .hw-pill { display: flex; align-items: center; justify-content: center;
      background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; height: 37px;
      font-size: 16px; font-weight: 600; color: var(--ink); }
    .hw-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
    .hw-list li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
    .hw-list li::before { content: '\25CF'; position: absolute; left: 0; top: 3px; font-size: 9px; color: var(--accent); }
    .hw-computer { position: absolute; right: 12px; bottom: 12px; width: 150px; height: auto; pointer-events: none; }
    /* VAC-safe card: same surface panel, normalised to the 12px radius (was a
       lone 87px corner - the main radius outlier the unification removes). */
    .hw-vac {
      position: relative; overflow: hidden; background: var(--surface);
      border: 1px solid var(--border); border-radius: 4px; margin-top: 22px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.35);
      padding: 30px 34px 40px; display: flex; align-items: center; gap: 24px;
    }
    .hw-vac-text { flex: 1; min-width: 0; }
    .hw-vac-lead { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 14px; }
    .hw-vac-subh { color: var(--ink); font-weight: 600; font-size: 15px; margin-top: 24px; }
    .hw-vac-list { list-style: none; margin: 12px 0 0; padding: 0; }
    .hw-vac-list li { color: var(--ink-2); font-size: 13px; line-height: 1.9; position: relative; padding-left: 20px; }
    .hw-vac-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; }
    .hw-vac-foot { color: var(--ink-2); font-size: 14px; margin-top: 24px; line-height: 1.5; }
    .hw-lock { width: 200px; height: 200px; object-fit: contain; flex: none; }
    @media (max-width: 767px) {
      /* Pills fill the card width on phones instead of sitting in a narrow block. */
      .hw-pills { grid-template-columns: 1fr 1fr; column-gap: 12px; }
      .hw-card { min-height: 0; }
      .hw-vac { flex-direction: column-reverse; align-items: flex-start; gap: 18px;
                padding: 24px 20px 30px; }
      .hw-vac-list li { line-height: 1.8; }
      .hw-lock { width: 116px; height: 116px; }
      .hw-computer { width: 120px; }
    }
  
  .vid-wrap { max-width: 920px; margin: 0 auto; }
  .vid-frame { position: relative; margin-top: 28px; aspect-ratio: 16 / 9;
    border-radius: 4px; overflow: hidden; border: 1px solid var(--border-strong);
    background: var(--surface-2); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
  .vid-el { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }
  /* Click-to-play overlay: poster scrim + custom play button. Hidden once
     playing, restored when the clip ends so it can be replayed. */
  .vid-overlay { position: absolute; inset: 0; width: 100%; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(rgba(8,10,14,0.20), rgba(8,10,14,0.45));
    transition: background .2s ease; }
  .vid-overlay:hover { background: linear-gradient(rgba(8,10,14,0.10), rgba(8,10,14,0.34)); }
  .vid-overlay.is-hidden { display: none; }
  .vid-play { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #06121f;
    box-shadow: 0 10px 34px rgba(124,140,255,0.50);
    transition: transform .15s ease, filter .15s ease; }
  .vid-overlay:hover .vid-play { transform: scale(1.06); filter: brightness(1.07); }
  .vid-play svg { width: 30px; height: 30px; margin-left: 4px; display: block; } /* nudge triangle to optical center */
  @media (prefers-reduced-motion: reduce) {
    .vid-overlay, .vid-overlay:hover .vid-play { transition: none; }
  }

  .cmp-wrap { max-width: 820px; margin: 0 auto; }
  .cmp-head { text-align: center; margin-bottom: 4px; }
  .cmp-h2 { color: var(--ink); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; }
  .cmp-sub { color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 64ch; margin: 12px auto 0; }
  .cmp-table { margin-top: 30px; border: 1px solid var(--border); border-radius: 4px;
               overflow: hidden; background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
  .cmp-row { display: grid; grid-template-columns: 1fr 120px 120px; align-items: stretch; }
  .cmp-row + .cmp-row { border-top: 1px solid var(--border); }
  .cmp-cell { padding: 13px 16px; font-size: 13.5px; display: flex; align-items: center; }
  .cmp-feat { color: var(--ink-2); }
  .cmp-mark { justify-content: center; }
  /* HourIdler column gets a continuous accent tint to draw the eye. */
  .cmp-us { background: rgba(124,140,255,0.07); }
  .cmp-th { background: var(--surface-2); }
  .cmp-th .cmp-cell { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
  .cmp-th .cmp-feat { color: var(--ink-3); }
  .cmp-th .cmp-col { color: var(--ink); justify-content: center; }
  .cmp-th .cmp-us  { color: var(--accent); }
  .cmp-yes { color: var(--success); }
  .cmp-no  { color: var(--ink-3); }
  .cmp-cta-row { text-align: center; margin-top: 26px; }
  @media (max-width: 560px) {
    .cmp-row { grid-template-columns: 1fr 62px 62px; }
    .cmp-cell { padding: 11px 12px; font-size: 12.5px; }
  }

  .learn-wrap { max-width:1040px; margin:0 auto; }
  .learn-head { max-width:720px; }
  .learn-kicker { color:var(--accent); font:700 11px/1.2 'Manrope','Inter',sans-serif;
    letter-spacing:.14em; text-transform:uppercase; }
  .learn-title { color:var(--ink); font-size:clamp(27px,4vw,42px); line-height:1.08;
    letter-spacing:-.025em; font-weight:800; margin-top:13px; }
  .learn-lede { color:var(--ink-2); font-size:15px; line-height:1.7; max-width:68ch; margin-top:16px; }
  .learn-map { margin-top:38px; border-top:1px solid var(--border); }
  .learn-row { display:grid; grid-template-columns:180px 1fr 26px; gap:28px; align-items:start;
    padding:24px 8px; border-bottom:1px solid var(--border);
    transition:border-color .15s ease; }
  .learn-row:hover { border-bottom-color:var(--border-strong); }
  .learn-row:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
  .learn-label { color:var(--accent); font:700 11px/1.4 'Manrope','Inter',sans-serif;
    letter-spacing:.09em; text-transform:uppercase; padding-top:3px; }
  .learn-copy h3 { color:var(--ink); font-size:18px; line-height:1.3; font-weight:700;
    transition:color .15s ease; }
  .learn-copy p { color:var(--ink-2); font-size:13.5px; line-height:1.6; margin-top:6px; max-width:65ch; }
  .learn-row:hover .learn-copy h3 { color:#fff; }
  .learn-trust { margin-top:34px; display:flex; gap:14px 28px; flex-wrap:wrap; color:var(--ink-3); font-size:12px; }
  .learn-trust a { color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:rgba(161,161,170,.35); }
  .learn-trust a:hover { color:var(--ink); }
  @media (max-width:680px) {
    .learn-row { grid-template-columns:1fr 22px; gap:8px 14px; padding:21px 4px; }
    .learn-label { grid-column:1 / -1; }
    .learn-copy { grid-column:1; }
  }

  /* ===== Community section ===== */
  .community-card {
    max-width:760px; margin:0 auto; position:relative; border-radius:4px; overflow:hidden;
    border:1px solid var(--border,#272b35);
    background-image:linear-gradient(rgba(8,10,14,0.62), rgba(8,10,14,0.74)), var(--hi-content-bg);
    background-size:cover; background-position:center;
  }
  .community-inner { padding:48px 24px; text-align:center; }
  .community-title { color:#fff; font-weight:800; font-size:28px; letter-spacing:-0.01em; }
  .community-sub { color:#c5cbd6; font-size:14px; margin-top:8px; }
  .community-discord { display:inline-block; margin-top:24px; transition:transform .15s ease, filter .15s ease; }
  .community-discord:hover { transform:translateY(-1px); filter:brightness(1.06); }
  .community-discord img { width:220px; max-width:80%; height:auto; display:block; }

  @media (max-width:720px) {
    .community-title { font-size:23px; }
  }

  .faq-wrap { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-item { background:var(--surface,#151515); border:1px solid var(--border,#272b35); border-radius:4px; overflow:hidden; transition:border-color .15s ease; }
  .faq-item[open] { border-color:rgba(124,140,255,0.40); }
  .faq-q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; color:#fff; font-weight:600; font-size:15px; line-height:1.4; }
  .faq-q::-webkit-details-marker { display:none; }
  .faq-q:hover { background:rgba(255,255,255,0.025); }
  .faq-chev { flex-shrink:0; width:18px; height:18px; color:var(--accent,#7c8cff); transform:rotate(0deg); transform-origin:center; transition:transform .2s ease; }
  .faq-item[open] .faq-chev { transform:rotate(180deg); }
  .faq-a { padding:0 20px 18px; color:var(--ink-2,#a1a1aa); font-size:14px; line-height:1.65; }