:root {
        --navy-950: #071525;
        --navy-900: #0b1f35;
        --navy-800: #122c47;
        --navy-700: #1c3d5d;
        --gold: #f5b632;
        --gold-soft: #fff0be;
        --cream: #f7f3eb;
        --paper: #ffffff;
        --ink: #102237;
        --muted: #6d7b87;
        --line: #e3e8eb;
        --coral: #e8654b;
        --green: #2b9271;
        --shadow: 0 16px 40px rgba(6, 24, 42, 0.10);
        --radius-lg: 22px;
        --radius-md: 14px;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        color: var(--ink);
        background: var(--cream);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 16px;
        line-height: 1.55;
      }
      a { color: inherit; text-decoration: none; }
      button, input { font: inherit; }
      button { cursor: pointer; }
      .wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

      .topline {
        background: var(--navy-950);
        color: #dce7ef;
        font-size: 12px;
        letter-spacing: .02em;
      }
      .topline-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
      .topline a { color: var(--gold); font-weight: 700; }
      .topline .age { display: inline-flex; align-items: center; gap: 7px; }
      .age-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid #7890a0; border-radius: 50%; font-size: 10px; font-weight: 800; }

      .site-header { background: var(--navy-900); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 5px 20px rgba(4, 16, 29, .18); }
      .nav-row { min-height: 76px; display: flex; align-items: center; gap: 26px; }
      .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 214px; }
      .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: var(--navy-950); font-size: 21px; font-weight: 900; box-shadow: 4px 4px 0 rgba(255,255,255,.09); }
      .brand-name { display: block; font-size: 19px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; }
      .brand-sub { display: block; margin-top: 4px; color: #9fb2c2; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
      .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex: 1; }
      .nav-link { color: #d9e5ed; font-size: 14px; font-weight: 700; transition: color .2s ease; white-space: nowrap; }
      .nav-link:hover, .nav-link:focus-visible { color: var(--gold); }
      .nav-dropdown { position: relative; }
      .drop-trigger { border: 0; background: transparent; color: #d9e5ed; padding: 10px 0; font-size: 14px; font-weight: 700; }
      .drop-trigger::after { content: "⌄"; margin-left: 6px; color: var(--gold); }
      .dropdown-menu { position: absolute; top: calc(100% + 8px); left: -16px; display: none; width: 205px; padding: 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
      .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu, .nav-dropdown.open .dropdown-menu { display: grid; }
      .dropdown-menu a { padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; }
      .dropdown-menu a:hover { background: var(--gold-soft); }
      .nav-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid rgba(245,182,50,.55); border-radius: 9px; color: var(--navy-950); background: var(--gold); font-size: 13px; font-weight: 900; white-space: nowrap; }
      .nav-action:hover { background: #ffd166; }
      .mobile-toggle { display: none; margin-left: auto; padding: 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: transparent; color: #fff; }

      .hero { overflow: hidden; background: var(--navy-900); color: #fff; }
      .hero-inner { min-height: 470px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; padding: 66px 0 74px; position: relative; }
      .hero-copy { position: relative; z-index: 1; }
      .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
      .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
      h1, h2, h3, p { margin-top: 0; }
      h1 { max-width: 640px; margin-bottom: 19px; font-size: clamp(39px, 5vw, 64px); line-height: 1.01; letter-spacing: -.055em; }
      .hero-copy p { max-width: 570px; margin-bottom: 29px; color: #bdd0dc; font-size: 17px; }
      .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
      .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 900; transition: transform .2s ease, background .2s ease; }
      .btn:hover { transform: translateY(-2px); }
      .btn-primary { background: var(--gold); color: var(--navy-950); }
      .btn-primary:hover { background: #ffd166; }
      .btn-ghost { border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.05); }
      .btn-ghost:hover { background: rgba(255,255,255,.11); }
      .hero-note { margin-top: 16px; color: #8fa6b6; font-size: 12px; }
      .hero-visual { min-height: 320px; position: relative; }
      .hero-glow { position: absolute; width: 380px; height: 380px; right: -50px; top: -23px; border-radius: 50%; background: radial-gradient(circle, rgba(245,182,50,.22) 0%, rgba(245,182,50,.06) 38%, transparent 70%); }
      .hero-card { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(135deg, rgba(29,70,102,.95), rgba(11,31,53,.98)); box-shadow: 0 22px 40px rgba(0,0,0,.28); }
      .hero-card.main { width: min(355px, 76%); top: 13px; right: 28px; padding: 25px; transform: rotate(3deg); }
      .hero-card.small { width: 190px; left: 10px; bottom: 16px; padding: 17px; transform: rotate(-7deg); background: #fff; color: var(--ink); }
      .card-kicker { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
      .hero-card h3 { margin: 18px 0 8px; font-size: 25px; line-height: 1.08; letter-spacing: -.04em; }
      .hero-card p { margin-bottom: 18px; color: #bfd2de; font-size: 13px; }
      .card-link { color: var(--gold); font-size: 13px; font-weight: 900; }
      .small .card-kicker { color: var(--coral); }
      .small h3 { margin: 11px 0 7px; font-size: 19px; }
      .small p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
      .hero-pattern { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(90deg, transparent, black 36%, transparent 93%); pointer-events: none; }

      .trust-bar { background: #fff; border-bottom: 1px solid var(--line); }
      .trust-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 18px 0; }
      .trust-item { display: flex; align-items: center; gap: 11px; color: #426071; font-size: 13px; font-weight: 800; }
      .trust-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--gold-soft); color: #ab7000; font-size: 14px; }

      .section { padding: 74px 0; }
      .section.alt { background: #fff; }
      .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
      .section-head h2 { margin-bottom: 7px; font-size: clamp(26px, 3vw, 35px); line-height: 1.1; letter-spacing: -.045em; }
      .section-head p { max-width: 580px; margin-bottom: 0; color: var(--muted); }
      .text-link { color: var(--navy-800); font-size: 14px; font-weight: 900; white-space: nowrap; }
      .text-link:hover { color: var(--coral); }

      .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
      .category-card { min-height: 172px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: 0 5px 12px rgba(6, 24, 42, .03); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
      .category-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow); }
      .category-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 20px; border-radius: 13px; color: var(--navy-950); font-size: 22px; font-weight: 900; }
      .icon-gold { background: var(--gold-soft); }
      .icon-coral { background: #ffe0d8; }
      .icon-blue { background: #dcecf5; }
      .icon-green { background: #d8f0e5; }
      .category-card h3 { margin-bottom: 5px; font-size: 17px; }
      .category-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

      .feature-grid { display: grid; grid-template-columns: 1.34fr .66fr; gap: 18px; }
      .feature-card { min-height: 310px; padding: 32px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; }
      .feature-card::after { content: "✦"; position: absolute; right: 31px; bottom: -23px; color: rgba(245,182,50,.15); font-size: 190px; line-height: 1; }
      .feature-card h2 { max-width: 520px; margin: 16px 0 11px; font-size: 31px; line-height: 1.08; letter-spacing: -.045em; position: relative; z-index: 1; }
      .feature-card p { max-width: 500px; margin-bottom: 27px; color: #c0d3de; position: relative; z-index: 1; }
      .feature-side { padding: 27px; border: 1px solid #efdca5; border-radius: var(--radius-lg); background: #fff9e8; }
      .feature-side h3 { margin-bottom: 15px; font-size: 20px; letter-spacing: -.03em; }
      .check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
      .check-list li { display: flex; gap: 10px; color: #536674; font-size: 13px; }
      .check-list li::before { content: "✓"; color: var(--green); font-weight: 900; }

      .promo-strip { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: stretch; }
      .promo-card { padding: 28px; border-radius: var(--radius-lg); background: var(--gold); color: var(--navy-950); }
      .promo-card h2 { margin: 11px 0 8px; font-size: 29px; line-height: 1.08; letter-spacing: -.04em; }
      .promo-card p { max-width: 470px; margin-bottom: 20px; color: #4e3b08; }
      .promo-card .btn { background: var(--navy-950); color: #fff; }
      .promo-card .btn:hover { background: var(--navy-800); }
      .terms-card { padding: 28px; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; }
      .terms-card h3 { margin-bottom: 11px; font-size: 21px; }
      .terms-card p { margin-bottom: 18px; color: #bdced9; font-size: 14px; }
      .terms-card a { color: var(--gold); font-size: 13px; font-weight: 900; }

      .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
      .review-card { min-height: 240px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
      .review-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
      .pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--gold-soft); color: #916200; font-size: 11px; font-weight: 900; }
      .review-card h3 { margin-bottom: 8px; font-size: 20px; line-height: 1.13; letter-spacing: -.035em; }
      .review-card p { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
      .review-card .text-link { margin-top: auto; }

      .guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
      .guide-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
      .guide-color { height: 88px; padding: 17px; color: var(--navy-950); font-size: 25px; font-weight: 900; }
      .guide-color.one { background: #f8d277; }
      .guide-color.two { background: #b9dce4; }
      .guide-color.three { background: #f3b1a1; }
      .guide-color.four { background: #b6d5ba; }
      .guide-body { padding: 18px; }
      .guide-body span { color: var(--coral); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
      .guide-body h3 { margin: 8px 0 0; font-size: 16px; line-height: 1.22; }

      .editorial-note { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; padding: 38px; border-radius: var(--radius-lg); background: #eaf2f4; }
      .editorial-note h2 { margin-bottom: 10px; font-size: 28px; letter-spacing: -.04em; }
      .editorial-note p { margin-bottom: 0; color: #58707d; }
      .note-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
      .note-list li { padding: 13px 14px; border-radius: 11px; background: #fff; color: #355261; font-size: 13px; font-weight: 800; }

      footer { padding: 55px 0 25px; background: var(--navy-950); color: #d5e1e8; }
      .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 38px; }
      footer .brand { min-width: 0; margin-bottom: 17px; }
      footer .brand-sub { color: #89a0b0; }
      .footer-copy { max-width: 330px; color: #8fa6b6; font-size: 13px; }
      footer h3 { margin-bottom: 13px; color: var(--gold); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
      .footer-links { display: grid; gap: 8px; }
      .footer-links a { color: #b5c7d2; font-size: 13px; }
      .footer-links a:hover { color: #fff; }
      .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.12); color: #7e96a6; font-size: 12px; }
      .footer-bottom a { color: #b5c7d2; }

      /* Dark glow theme: vibrant gaming colors with a familiar editorial layout. */
      :root {
        --navy-950: #040b16;
        --navy-900: #071525;
        --navy-800: #0d2742;
        --navy-700: #174362;
        --gold: #ffc84a;
        --gold-soft: rgba(255, 200, 74, .16);
        --cream: #061321;
        --paper: #0d2035;
        --ink: #f5f8fb;
        --muted: #a4b8c7;
        --line: rgba(174, 213, 231, .16);
        --coral: #ff7457;
        --green: #43d29e;
        --shadow: 0 18px 42px rgba(0, 0, 0, .28);
      }
      body {
        background: radial-gradient(circle at 82% 15%, rgba(25, 103, 143, .18), transparent 27rem), var(--cream);
      }
      .site-header { background: rgba(4, 11, 22, .96); }
      .dropdown-menu { border-color: rgba(255, 200, 74, .3); background: #112d47; color: var(--ink); }
      .dropdown-menu a:hover { background: rgba(255, 200, 74, .17); color: var(--gold); }
      .hero { background: radial-gradient(circle at 78% 50%, rgba(20, 112, 158, .32), transparent 29rem), linear-gradient(135deg, #071525 0%, #091e34 58%, #111b42 100%); }
      .hero-card { border-color: rgba(255, 200, 74, .28); box-shadow: 0 22px 45px rgba(0, 0, 0, .45), 0 0 32px rgba(255, 200, 74, .08); }
      .hero-card.main { box-shadow: 0 22px 45px rgba(0, 0, 0, .45), 0 0 42px rgba(255, 116, 87, .12); }
      .hero-card.small { background: #102a43; color: var(--ink); border-color: rgba(73, 215, 244, .32); }
      .small p { color: #a8c0ce; }
      .hero-glow { background: radial-gradient(circle, rgba(255, 200, 74, .32) 0%, rgba(255, 116, 87, .13) 32%, rgba(73, 215, 244, .07) 48%, transparent 72%); }
      .hero-pattern { opacity: .18; background-image: radial-gradient(#ffc84a 1px, transparent 1px); }
      .trust-bar, .section.alt { background: #091a2c; border-color: var(--line); }
      .trust-item { color: #c0d4df; }
      .trust-icon { background: var(--gold-soft); color: var(--gold); box-shadow: 0 0 18px rgba(255, 200, 74, .14); }
      .section { background: #061321; }
      .section-head p, .category-card p, .review-card p { color: var(--muted); }
      .text-link { color: var(--gold); }
      .text-link:hover { color: var(--coral); }
      .category-card, .review-card, .guide-card { border-color: var(--line); background: linear-gradient(145deg, #0e253c, #0a1b2e); box-shadow: 0 9px 22px rgba(0, 0, 0, .18); }
      .category-card:hover { border-color: var(--gold); box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 0 24px rgba(255, 200, 74, .12); }
      .icon-gold { background: rgba(255, 200, 74, .18); color: var(--gold); }
      .icon-coral { background: rgba(255, 116, 87, .18); color: var(--coral); }
      .icon-blue { background: rgba(73, 215, 244, .15); color: #49d7f4; }
      .icon-green { background: rgba(67, 210, 158, .15); color: var(--green); }
      .feature-side { border-color: rgba(255, 200, 74, .35); background: linear-gradient(145deg, #173653, #0c233a); box-shadow: 0 0 32px rgba(255, 200, 74, .08); }
      .feature-side h3, .check-list li { color: #edf6fa; }
      .check-list li::before { color: var(--green); }
      .promo-card { box-shadow: 0 0 32px rgba(255, 200, 74, .18); }
      .terms-card { border: 1px solid rgba(73, 215, 244, .25); box-shadow: 0 0 32px rgba(73, 215, 244, .08); }
      .pill { background: rgba(255, 200, 74, .16); color: var(--gold); }
      .guide-color.one { background: linear-gradient(135deg, #f8ca4e, #ff8c50); }
      .guide-color.two { background: linear-gradient(135deg, #4bd4e9, #5b91ff); }
      .guide-color.three { background: linear-gradient(135deg, #ff8068, #ca73d9); }
      .guide-color.four { background: linear-gradient(135deg, #55d99f, #65b8d6); }
      .guide-body h3 { color: #f5f8fb; }
      .editorial-note { background: linear-gradient(120deg, #0c263d, #0e3342); box-shadow: 0 0 34px rgba(73, 215, 244, .08); }
      .editorial-note p { color: #b2c8d2; }
      .note-list li { background: rgba(255, 255, 255, .08); color: #e5f0f3; border: 1px solid rgba(255, 255, 255, .08); }

      /* Philippine flag palette: royal blue, strong red, bright yellow, and white. */
      :root {
        --navy-950: #020716;
        --navy-900: #041945;
        --navy-800: #082b78;
        --navy-700: #104aa9;
        --gold: #fcd116;
        --gold-soft: rgba(252, 209, 22, .17);
        --cream: #03112d;
        --paper: #ffffff;
        --ink: #f7f9fc;
        --muted: #afc2de;
        --line: rgba(255, 255, 255, .17);
        --coral: #e21d37;
        --green: #5bdd9e;
        --shadow: 0 18px 42px rgba(0, 0, 0, .32);
      }
      body {
        background: radial-gradient(circle at 10% 18%, rgba(226, 29, 55, .22), transparent 23rem), radial-gradient(circle at 90% 38%, rgba(16, 74, 169, .28), transparent 27rem), var(--cream);
      }
      .topline { background: var(--coral); color: #fff; }
      .topline a { color: var(--gold); }
      .site-header { background: rgba(2, 7, 22, .97); border-bottom: 2px solid rgba(252, 209, 22, .18); }
      .brand-mark { background: var(--gold); color: var(--navy-800); box-shadow: 4px 4px 0 rgba(226, 29, 55, .45); }
      .nav-action { background: var(--coral); border-color: #ff5668; color: #fff; box-shadow: 0 0 22px rgba(226, 29, 55, .28); }
      .nav-action:hover { background: #f12e49; }
      .dropdown-menu { background: #08285f; border-color: rgba(252, 209, 22, .36); }
      .dropdown-menu a:hover { background: var(--gold); color: var(--navy-950); }
      .hero { background: radial-gradient(circle at 81% 50%, rgba(16, 74, 169, .46), transparent 27rem), radial-gradient(circle at 6% 75%, rgba(226, 29, 55, .22), transparent 24rem), linear-gradient(135deg, #020716 0%, #05205c 68%, #071a45 100%); }
      .hero-glow { background: radial-gradient(circle, rgba(252, 209, 22, .36) 0%, rgba(226, 29, 55, .22) 28%, rgba(16, 74, 169, .16) 51%, transparent 72%); }
      .hero-card { border-color: rgba(252, 209, 22, .42); box-shadow: 0 22px 45px rgba(0, 0, 0, .46), 0 0 38px rgba(16, 74, 169, .22); }
      .hero-card.main { background: linear-gradient(135deg, #0d3b91, #06183c); box-shadow: 0 22px 45px rgba(0, 0, 0, .46), 0 0 42px rgba(226, 29, 55, .2); }
      .hero-card.small { background: #fff; color: var(--navy-800); border-color: rgba(226, 29, 55, .45); box-shadow: 0 18px 36px rgba(0, 0, 0, .35), 0 0 28px rgba(252, 209, 22, .16); }
      .small .card-kicker { color: var(--coral); }
      .small p { color: #516883; }
      .hero-pattern { background-image: radial-gradient(var(--gold) 1px, transparent 1px); opacity: .2; }
      .trust-bar { background: #fff; border-bottom-color: rgba(4, 25, 69, .16); }
      .trust-item { color: var(--navy-800); }
      .trust-icon { background: rgba(252, 209, 22, .23); color: #9e7900; box-shadow: 0 0 18px rgba(252, 209, 22, .2); }
      .section { background: #03112d; }
      .section.alt { background: #061c4f; }
      .section-head p { color: #afc2de; }
      .text-link { color: var(--gold); }
      .text-link:hover { color: #ff697b; }
      .category-card, .review-card, .guide-card { border-color: rgba(138, 180, 235, .2); background: linear-gradient(145deg, #0b347e, #061b4a); box-shadow: 0 9px 22px rgba(0, 0, 0, .23), inset 0 1px 0 rgba(255, 255, 255, .04); }
      .category-card:hover { border-color: var(--coral); box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 28px rgba(226, 29, 55, .24); }
      .category-card p, .review-card p { color: #b6c9e1; }
      .icon-gold { background: rgba(252, 209, 22, .2); color: var(--gold); }
      .icon-coral { background: rgba(226, 29, 55, .22); color: #ff6a7b; }
      .icon-blue { background: rgba(75, 169, 255, .19); color: #73c5ff; }
      .icon-green { background: rgba(91, 221, 158, .16); color: var(--green); }
      .feature-card { background: linear-gradient(120deg, #0b347e, #030c24 82%); border: 1px solid rgba(226, 29, 55, .38); box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 34px rgba(16, 74, 169, .2); }
      .feature-side { border-color: rgba(252, 209, 22, .48); background: #fff; box-shadow: 0 0 32px rgba(252, 209, 22, .13); }
      .feature-side h3, .check-list li { color: var(--navy-800); }
      .check-list li::before { color: var(--coral); }
      .promo-card { background: linear-gradient(135deg, #e21d37, #a90e2c); color: #fff; box-shadow: 0 0 34px rgba(226, 29, 55, .22); }
      .promo-card .eyebrow[style] { color: var(--gold) !important; }
      .promo-card p { color: #ffe4e5; }
      .promo-card .btn { background: var(--gold); color: var(--navy-950); }
      .promo-card .btn:hover { background: #ffe26b; }
      .terms-card { background: linear-gradient(135deg, #082b78, #031332); border: 1px solid rgba(252, 209, 22, .34); box-shadow: 0 0 34px rgba(16, 74, 169, .2); }
      .terms-card a { color: var(--gold); }
      .pill { background: rgba(252, 209, 22, .17); color: var(--gold); border: 1px solid rgba(252, 209, 22, .14); }
      .guide-color.one { background: linear-gradient(135deg, #fcd116, #ffec79); color: var(--navy-950); }
      .guide-color.two { background: linear-gradient(135deg, #0e4cb0, #55a8ff); }
      .guide-color.three { background: linear-gradient(135deg, #e21d37, #ff6b75); }
      .guide-color.four { background: linear-gradient(135deg, #fff, #d9e8ff); color: var(--navy-800); }
      .guide-body h3 { color: #f7f9fc; }
      .editorial-note { background: #fff; box-shadow: 0 0 34px rgba(252, 209, 22, .12); }
      .editorial-note h2 { color: var(--navy-800); }
      .editorial-note p { color: #4e6380; }
      .note-list li { background: var(--navy-800); color: #fff; border-color: rgba(255, 255, 255, .12); box-shadow: 0 0 18px rgba(16, 74, 169, .2); }
      footer { background: #020716; border-top: 2px solid rgba(226, 29, 55, .32); }

      @media (max-width: 980px) {
        .main-nav { gap: 13px; }
        .brand { min-width: 190px; }
        .hero-inner { gap: 35px; }
        .category-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); }
        .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
        .footer-grid > :first-child { grid-column: 1 / -1; }
      }

      @media (max-width: 760px) {
        .wrap { width: min(100% - 28px, 580px); }
        .topline-inner { min-height: 43px; font-size: 11px; }
        .topline-inner > a { display: none; }
        .nav-row { min-height: 68px; gap: 15px; }
        .brand { min-width: 0; }
        .brand-name { font-size: 17px; }
        .brand-sub { font-size: 9px; }
        .main-nav { position: absolute; top: 68px; left: 0; right: 0; display: none; padding: 10px 14px 18px; border-top: 1px solid rgba(255,255,255,.1); background: var(--navy-900); box-shadow: 0 14px 25px rgba(4,16,29,.3); }
        .main-nav.open { display: grid; justify-content: stretch; gap: 4px; }
        .nav-link, .drop-trigger { display: block; width: 100%; padding: 11px 7px; text-align: left; }
        .dropdown-menu { position: static; width: auto; margin: 0 0 4px 10px; box-shadow: none; }
        .nav-action { justify-content: center; margin-top: 5px; }
        .mobile-toggle { display: inline-grid; place-items: center; }
        .hero-inner { min-height: auto; grid-template-columns: 1fr; gap: 25px; padding: 52px 0 45px; }
        h1 { font-size: 43px; }
        .hero-copy p { font-size: 16px; }
        .hero-visual { min-height: 285px; }
        .hero-card.main { right: 8px; }
        .hero-card.small { left: 3px; }
        .trust-items { grid-template-columns: 1fr 1fr; gap: 13px 10px; padding: 16px 0; }
        .trust-item { font-size: 12px; }
        .section { padding: 54px 0; }
        .section-head { display: block; }
        .section-head .text-link { display: inline-block; margin-top: 15px; }
        .feature-grid, .promo-strip, .editorial-note { grid-template-columns: 1fr; }
        .feature-card { min-height: 330px; }
        .review-grid { grid-template-columns: 1fr; }
        .editorial-note { gap: 23px; padding: 27px; }
        .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
        .footer-grid > :first-child { grid-column: 1 / -1; }
        .footer-bottom { display: grid; gap: 8px; }
      }

      @media (max-width: 430px) {
        .category-grid, .guide-grid { grid-template-columns: 1fr; }
        .note-list { grid-template-columns: 1fr; }
        .hero-card.main { width: 81%; }
      }

      /* Reference-inspired homepage structure: red utility bands and a bold promo-style hero. */
      .site-header { background: #260006; border-bottom: 0; }
      .nav-row { min-height: 76px; }
      .main-nav { gap: 20px; }
      .nav-link, .drop-trigger { color: #fff; }
      .nav-link:hover, .nav-link:focus-visible, .drop-trigger:hover { color: var(--gold); }
      .utility-bar { background: #92000d; border-top: 1px solid rgba(252, 209, 22, .24); border-bottom: 1px solid rgba(0, 0, 0, .25); }
      .utility-inner { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
      .utility-date { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
      .utility-divider { color: rgba(255,255,255,.48); }
      .utility-links { display: flex; align-items: center; justify-content: flex-end; gap: 19px; }
      .utility-links > a:not(.utility-btn) { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
      .utility-links > a:not(.utility-btn):hover { color: var(--gold); }
      .utility-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 950; white-space: nowrap; }
      .utility-yellow { background: var(--gold); color: var(--navy-950); box-shadow: 0 0 17px rgba(252, 209, 22, .26); }
      .utility-red { background: #f3061c; color: #fff; box-shadow: 0 0 17px rgba(243, 6, 28, .26); }
      .utility-orange { background: #ff5b21; color: #fff; box-shadow: 0 0 17px rgba(255, 91, 33, .26); }
      .hero { background: radial-gradient(circle at 79% 49%, rgba(252, 209, 22, .22), transparent 16rem), radial-gradient(circle at 18% 20%, rgba(255, 119, 20, .46), transparent 21rem), linear-gradient(118deg, #9d0013 0%, #e01619 42%, #bd0718 69%, #4b0010 100%); }
      .hero-inner { min-height: 520px; grid-template-columns: 1.3fr .7fr; gap: 35px; padding: 57px 0 68px; }
      .hero-copy { max-width: 770px; }
      .hero-copy .eyebrow { color: #fff; }
      .hero-logo-text { display: block; color: var(--gold); font-size: clamp(48px, 7vw, 86px); line-height: .95; letter-spacing: -.075em; text-shadow: 3px 4px 0 #97000e, 0 0 22px rgba(252, 209, 22, .34); }
      .hero-headline { display: inline-block; margin-top: 20px; padding: 7px 21px 10px; color: #fff; background: linear-gradient(90deg, #fcd116, #e21d37 50%, #1253c8); font-size: clamp(30px, 4vw, 58px); line-height: 1; letter-spacing: -.055em; text-shadow: 2px 3px 0 rgba(74, 0, 8, .6); box-shadow: 8px 8px 0 rgba(65, 0, 8, .22); }
      .hero-copy p { max-width: 680px; color: #fff5e9; font-size: 18px; text-shadow: 0 1px 2px rgba(77, 0, 7, .48); }
      .hero-note { color: #ffe7b8; }
      .hero-visual { min-height: 360px; }
      .hero-card.main { top: 70px; right: -12px; width: 330px; padding: 25px; transform: rotate(4deg); background: linear-gradient(145deg, #0d3f98, #050e32); border: 3px solid var(--gold); }
      .hero-card.main h3 { font-size: 28px; color: #fff; }
      .hero-card.main p { color: #dce8ff; }
      .hero-card.small { left: -14px; bottom: 13px; width: 202px; transform: rotate(-7deg); }
      .hero-sunburst { position: absolute; right: 17px; top: -36px; color: var(--gold); font-size: 245px; line-height: 1; opacity: .9; transform: rotate(12deg); text-shadow: 0 0 30px rgba(252, 209, 22, .38); }
      .hero-orb { position: absolute; right: 14px; bottom: -6px; display: grid; place-items: center; width: 128px; height: 128px; border: 5px solid var(--gold); border-radius: 50%; background: #0b2f87; color: #fff; box-shadow: 0 0 0 8px rgba(226, 29, 55, .64), 0 0 30px rgba(252, 209, 22, .35); transform: rotate(11deg); z-index: 4; }
      .hero-orb span { color: var(--gold); font-size: 34px; font-weight: 950; line-height: 1; }
      .hero-orb small { margin-top: -16px; font-size: 9px; font-weight: 950; letter-spacing: .1em; line-height: 1.05; text-align: center; }
      .ticker { background: #68000b; color: #fff; border-top: 2px solid rgba(252, 209, 22, .35); border-bottom: 1px solid rgba(0, 0, 0, .3); }
      .ticker-inner { min-height: 45px; display: flex; align-items: center; gap: 22px; overflow: hidden; }
      .ticker-label { color: var(--gold); font-size: 13px; font-weight: 950; white-space: nowrap; }
      .ticker-line { color: #ffe5e5; font-size: 13px; white-space: nowrap; }
      .trust-bar { background: #fff; }
      .category-grid { grid-template-columns: repeat(5, 1fr); }
      .category-card { background: linear-gradient(145deg, #123f9a, #071b56); }

      @media (max-width: 1180px) {
        .main-nav { gap: 12px; }
        .nav-link, .drop-trigger { font-size: 12px; }
        .utility-links { gap: 10px; }
        .utility-links > a:not(.utility-btn) { font-size: 12px; }
        .utility-btn { padding-inline: 13px; font-size: 12px; }
      }
      @media (max-width: 980px) {
        .category-grid { grid-template-columns: repeat(2, 1fr); }
        .utility-date span:not(.utility-divider) { display: none; }
        .utility-inner { min-height: 48px; }
        .utility-links > a:not(.utility-btn) { display: none; }
      }
      @media (max-width: 760px) {
        .site-header { background: #260006; }
        .main-nav { top: 68px; background: #4d000b; }
        .utility-inner { justify-content: center; }
        .utility-date { font-size: 12px; }
        .utility-links { display: flex; gap: 6px; }
        .utility-btn { min-height: 34px; padding: 7px 10px; font-size: 10px; }
        .utility-yellow { display: none; }
        .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-top: 43px; }
        .hero-logo-text { font-size: 50px; }
        .hero-headline { margin-top: 15px; font-size: 31px; }
        .hero-copy p { font-size: 16px; }
        .hero-visual { min-height: 320px; }
        .hero-sunburst { right: 0; top: -13px; font-size: 190px; }
        .hero-card.main { top: 60px; right: 5px; width: 74%; }
        .hero-card.small { left: 0; bottom: 7px; width: 185px; }
        .hero-orb { right: 0; bottom: -2px; width: 108px; height: 108px; }
        .hero-orb span { font-size: 28px; }
        .ticker-inner { gap: 12px; }
        .ticker-label, .ticker-line { font-size: 11px; }
      }
      /* Keep the original logo proportions and room for navigation. */
      .site-header .brand { min-width: 0; flex-shrink: 0; }
      .site-header .brand picture { display: block; }
      .brand-logo { display: block; width: 230px; height: auto; }
      @media (min-width: 761px) and (max-width: 1180px) {
        .brand-logo { width: 200px; }
        .nav-row { gap: 18px; }
      }
      @media (min-width: 761px) and (max-width: 980px) {
        .mobile-toggle { display: inline-grid; place-items: center; }
        .main-nav { position: absolute; top: 76px; left: 0; right: 0; display: none; padding: 10px 20px 18px; border-top: 1px solid rgba(255,255,255,.1); background: #4d000b; box-shadow: 0 14px 25px rgba(4,16,29,.3); }
        .main-nav.open { display: grid; justify-content: stretch; gap: 4px; }
        .nav-link, .drop-trigger { display: block; width: 100%; padding: 11px 7px; text-align: left; }
        .dropdown-menu { position: static; width: auto; margin: 0 0 4px 10px; box-shadow: none; }
        .nav-action { justify-content: center; margin-top: 5px; }
      }
      @media (max-width: 760px) {
        .brand-logo { width: 160px; }
        .main-nav { top: 76px; }
      }
      @media (max-width: 980px) {
        .mobile-toggle { min-width: 44px; min-height: 44px; }
        .main-nav { max-height: calc(100dvh - 119px); overflow-y: auto; }
      }

/* Keep utility links inside the existing header at intermediate widths. */
@media (min-width: 761px) and (max-width: 1180px) {
  .utility-links { min-width: 0; flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }
  .utility-date { flex-shrink: 0; }
}

/* Keyboard visibility and touch targets without changing the design. */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-action, .utility-btn, .dropdown-menu a, .drop-trigger { min-height: 44px; }
.main-nav > .nav-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Let the existing hero heading fit narrow screens instead of clipping. */
.hero-copy { min-width: 0; }
.hero-headline { max-width: 100%; }
.hero-logo-text { overflow-wrap: anywhere; }