/* ── LIGHT MODE ── */
    :root {
      --navy:      #1a4a8c;
      --navy-d:    #123670;
      --navy-dim:  rgba(26,74,140,.08);
      --teal:      #00c896;
      --teal-d:    #00a87e;
      --teal-dim:  rgba(0,200,150,.1);
      --bg:        #f4f8ff;
      --surface:   #ffffff;
      --surface2:  #eaf1fb;
      --border:    #d0dff2;
      --border-h:  #1a4a8c;
      --text:      #0b1829;
      --text2:     #1a3a5c;
      --muted:     #536a85;
      --nav-bg:    rgba(255,255,255,.96);
      --nav-shadow:0 1px 0 #d0dff2;
      --radius:    10px;
    }

    /* ── DARK MODE ── */
    body.dark {
      --navy:      #4d9de0;
      --navy-d:    #2d7dd2;
      --navy-dim:  rgba(45,125,210,.13);
      --teal:      #00c896;
      --teal-d:    #00a87e;
      --teal-dim:  rgba(0,200,150,.11);
      --bg:        #081422;
      --surface:   #0d1e35;
      --surface2:  #112540;
      --border:    rgba(77,157,224,.12);
      --border-h:  rgba(77,157,224,.35);
      --text:      #ddeeff;
      --text2:     #aaccee;
      --muted:     #6688aa;
      --nav-bg:    rgba(8,20,34,.94);
      --nav-shadow:0 1px 0 rgba(77,157,224,.1);
      --radius:    10px;
    }

    /* ── smooth language cross-fade via View Transitions API ── */
    @keyframes lang-fade-in  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes lang-fade-out { from { opacity: 1; } to { opacity: 0; } }
    html.lang-vt::view-transition-old(root) {
      animation: lang-fade-out .25s cubic-bezier(.4,.0,.2,1) both;
    }
    html.lang-vt::view-transition-new(root) {
      animation: lang-fade-in .35s cubic-bezier(.4,.0,.2,1) both;
    }
    /* old & new overlap for crossfade (instead of sequential) */
    html.lang-vt::view-transition-image-pair(root) {
      isolation: auto;
    }

    /* ── Lenis smooth scroll (https://lenis.dev) — required CSS ── */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: clip; }
    .lenis.lenis-smooth iframe { pointer-events: none; }

    .skip-link {
      position: absolute; top: -100px; left: 0;
      background: var(--navy); color: #fff;
      padding: 10px 16px; border-radius: 0 0 8px 0;
      font-weight: 700; font-size: .85rem;
      text-decoration: none; z-index: 9999;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 0; outline: 2px solid var(--teal); outline-offset: 2px; }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 64px; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── smooth theme switching ── */
    body, body *:not(.theme-toggle-icon) {
      transition:
        background-color .5s cubic-bezier(.4,.0,.2,1),
        color .5s cubic-bezier(.4,.0,.2,1),
        border-color .5s cubic-bezier(.4,.0,.2,1),
        box-shadow .5s cubic-bezier(.4,.0,.2,1),
        fill .5s cubic-bezier(.4,.0,.2,1),
        stroke .5s cubic-bezier(.4,.0,.2,1);
    }
    /* During theme swap, force every element to honor the long crossfade
       (overrides per-component short transitions like .2s on buttons/cards). */
    body.theme-switching,
    body.theme-switching *,
    body.theme-switching *::before,
    body.theme-switching *::after {
      transition:
        background-color .55s cubic-bezier(.4,.0,.2,1) !important,
        background-image .55s cubic-bezier(.4,.0,.2,1) !important,
        color .55s cubic-bezier(.4,.0,.2,1) !important,
        border-color .55s cubic-bezier(.4,.0,.2,1) !important,
        box-shadow .55s cubic-bezier(.4,.0,.2,1) !important,
        fill .55s cubic-bezier(.4,.0,.2,1) !important,
        stroke .55s cubic-bezier(.4,.0,.2,1) !important,
        opacity .55s cubic-bezier(.4,.0,.2,1) !important;
    }
    @media (prefers-reduced-motion: reduce) {
      body, body *,
      body.theme-switching, body.theme-switching * { transition: none !important; }
    }
    .theme-toggle .theme-toggle-icon {
      display: inline-block;
      transition: transform .55s cubic-bezier(.4,.2,.2,1), opacity .3s ease;
    }
    body.theme-switching .theme-toggle .theme-toggle-icon {
      transform: rotate(360deg) scale(1.15);
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: .55s;
      animation-timing-function: cubic-bezier(.4,.0,.2,1);
    }
    ::view-transition-old(root) {
      animation: fade-out .55s cubic-bezier(.4,.0,.2,1) both;
    }
    ::view-transition-new(root) {
      animation: fade-in .55s cubic-bezier(.4,.0,.2,1) both;
    }
    @keyframes fade-out { to { opacity: 0; } }
    @keyframes fade-in  { from { opacity: 0; } }

    /* ═══ NAV ═══ */
    body > nav {
      position: sticky; top: 0; z-index: 200;
      background: var(--nav-bg);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--nav-shadow);
    }
    .nav-inner {
      max-width: 1280px; margin: auto;
      display: flex; align-items: center;
      height: 54px; padding: 0 clamp(1.5rem,5vw,4rem);
      gap: 2px;
    }
    .nav-logo {
      display: inline-flex; align-items: center;
      height: 42px; margin-right: auto; flex-shrink: 0;
      text-decoration: none;
      font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
      background: linear-gradient(90deg, #00c896 0%, #1a6fd4 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .nav-links {
      display: flex; align-items: center; gap: 1px;
      overflow-x: auto; scrollbar-width: none;
      position: relative;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-indicator {
      position: absolute;
      top: 50%;
      left: 0;
      height: 28px;
      width: 0;
      transform: translate3d(0, -50%, 0);
      background: var(--navy-dim);
      border: 1px solid rgba(26,74,140,.25);
      border-radius: 7px;
      pointer-events: none;
      opacity: 0;
      transition:
        transform .35s cubic-bezier(.4,.2,.2,1),
        width .35s cubic-bezier(.4,.2,.2,1),
        opacity .25s ease,
        background-color .45s ease,
        border-color .45s ease;
      z-index: 0;
    }
    .nav-indicator.ready { opacity: 1; }
    .nav-links a {
      color: var(--muted); text-decoration: none;
      font-size: .79rem; font-weight: 500; white-space: nowrap;
      padding: 5px 11px; border-radius: 7px;
      transition: color .25s ease; flex-shrink: 0;
      position: relative; z-index: 1;
      background: transparent;
    }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a.pill {
      color: var(--navy); font-weight: 700;
    }
    .nav-links a.pill:hover { color: var(--navy-d); }
    .theme-toggle, .lang-toggle {
      background: none; border: 1px solid var(--border);
      border-radius: 7px; padding: 5px 8px; cursor: pointer;
      font-size: .8rem; flex-shrink: 0; margin-left: 6px;
      color: var(--muted); transition: .15s; font-family: inherit; font-weight: 600;
    }
    .theme-toggle:hover, .lang-toggle:hover { border-color: var(--teal); color: var(--teal); }
    .lang-toggle.active { background: var(--teal-dim); border-color: var(--teal); color: var(--teal-d); }
    body.dark .lang-toggle.active { color: var(--teal); }

    /* ── nav "More" dropdown ── */
    .nav-more { position: relative; z-index: 1; }
    .nav-more-btn {
      display: inline-flex; align-items: center; gap: 4px;
      background: transparent; border: 0; cursor: pointer;
      font-family: inherit; font-size: .79rem; font-weight: 500;
      color: var(--muted); padding: 5px 11px; border-radius: 7px;
      white-space: nowrap; flex-shrink: 0;
      transition: color .2s ease, background-color .2s ease;
    }
    .nav-more-btn svg { transition: transform .25s cubic-bezier(.4,.2,.2,1); }
    .nav-more-btn:hover { color: var(--navy); }
    .nav-more.pill .nav-more-btn,
    .nav-more-btn.pill { color: var(--navy); font-weight: 700; }
    .nav-more.open .nav-more-btn { color: var(--navy); }
    .nav-more.open .nav-more-btn svg { transform: rotate(180deg); }
    .nav-more-panel {
      position: absolute;
      top: calc(100% + 6px); right: 0;
      min-width: 160px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 10px 32px rgba(0,0,0,.12);
      padding: 6px;
      display: flex; flex-direction: column; gap: 2px;
      opacity: 0; pointer-events: none;
      transform: translateY(-6px) scale(.98);
      transform-origin: top right;
      transition: opacity .2s ease, transform .2s cubic-bezier(.4,.2,.2,1);
    }
    body.dark .nav-more-panel { box-shadow: 0 10px 32px rgba(0,0,0,.5); }
    .nav-more.open .nav-more-panel {
      opacity: 1; pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .nav-more-panel a {
      display: flex; align-items: center;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: .82rem; font-weight: 500;
      color: var(--text2);
      text-decoration: none;
      transition: background-color .15s ease, color .15s ease;
    }
    .nav-more-panel a:hover { background: var(--navy-dim); color: var(--navy); }
    .nav-more-panel a.current { background: var(--teal-dim); color: var(--teal-d); font-weight: 700; }
    body.dark .nav-more-panel a.current { color: var(--teal); background: rgba(0,200,150,.12); }

    /* mobile menu divider */
    .mobile-menu-divider {
      height: 1px; background: var(--border);
      margin: .35rem clamp(1.5rem,5vw,4rem);
    }

    .nav-burger {
      display: none;
      width: 30px; height: 28px;
      position: relative;
      cursor: pointer; margin-left: 6px; flex-shrink: 0;
      padding: 0;
      border: 1px solid var(--border); border-radius: 7px;
      background: transparent;
      transition: border-color .2s ease, background-color .2s ease, color .2s ease;
      color: var(--muted);
      font-family: inherit;
    }
    .nav-burger:hover { border-color: var(--teal); color: var(--teal); }
    .nav-burger span {
      display: block; width: 14px; height: 2px;
      background: currentColor; border-radius: 2px;
      position: absolute; left: 50%; top: 50%;
      transform-origin: center;
      transition: transform .3s cubic-bezier(.4,.2,.2,1), opacity .2s ease, background-color .3s ease;
    }
    .nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
    .nav-burger span:nth-child(2) { transform: translate(-50%, -50%); }
    .nav-burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
    .nav-burger.open { color: var(--teal); border-color: var(--teal); }
    .nav-burger.open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); }
    .nav-burger.open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

    .menu-backdrop {
      position: fixed; inset: 54px 0 0 0;
      background: rgba(0,0,0,.4);
      backdrop-filter: blur(2px);
      opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
      z-index: 150;
    }
    .menu-backdrop.open { opacity: 1; pointer-events: auto; }

    .mobile-menu {
      position: fixed; top: 54px; left: 0; right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 12px 28px rgba(0,0,0,.18);
      padding: .5rem 0 .85rem;
      display: flex; flex-direction: column; gap: 2px;
      max-height: calc(100vh - 54px);
      overflow-y: auto;
      z-index: 180;
      transform: translateY(-12px);
      opacity: 0; pointer-events: none;
      transition: transform .3s cubic-bezier(.4,.2,.2,1), opacity .25s ease;
    }
    body.dark .mobile-menu { box-shadow: 0 12px 28px rgba(0,0,0,.5); }
    .mobile-menu.open {
      opacity: 1; pointer-events: auto; transform: translateY(0);
    }
    .mobile-menu a {
      color: var(--text2); text-decoration: none;
      font-size: .95rem; font-weight: 500;
      padding: 14px clamp(1.5rem,5vw,4rem);
      border-left: 3px solid transparent;
      transition: background-color .15s ease, color .15s ease, border-color .15s ease, padding-left .2s ease;
      display: flex; align-items: center; justify-content: space-between;
    }
    .mobile-menu a::after {
      content: '→';
      opacity: 0; transform: translateX(-4px);
      transition: opacity .2s ease, transform .2s ease;
      color: var(--teal);
    }
    .mobile-menu a:hover,
    .mobile-menu a:active {
      color: var(--navy); background: var(--navy-dim);
      border-left-color: var(--navy);
    }
    .mobile-menu a:hover::after { opacity: 1; transform: translateX(0); }
    .mobile-menu a.pill {
      color: var(--teal-d); font-weight: 700;
      background: var(--teal-dim);
      border-left-color: var(--teal);
    }
    body.dark .mobile-menu a { color: var(--text); }
    body.dark .mobile-menu a:hover, body.dark .mobile-menu a:active {
      color: #fff; background: rgba(77,157,224,.15); border-left-color: var(--navy);
    }
    body.dark .mobile-menu a.pill { color: var(--teal); background: rgba(0,200,150,.1); }

    body.menu-open { overflow: hidden; }

    @media (max-width: 700px) {
      .nav-links { display: none; }
      .nav-burger { display: inline-flex; }
    }
    @media (min-width: 701px) {
      .mobile-menu, .menu-backdrop { display: none !important; }
    }

    /* ═══ HERO ═══ */
    .hero {
      text-align: center;
      padding: clamp(5rem,10vw,8rem) clamp(1.5rem,5vw,4rem) clamp(3rem,5vw,5rem);
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(26,74,140,.1), transparent 60%),
        radial-gradient(ellipse 30% 20% at 5% 100%, rgba(0,200,150,.07), transparent);
    }
    body.dark .hero::before {
      background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(26,74,140,.28), transparent 60%),
        radial-gradient(ellipse 30% 20% at 5% 100%, rgba(0,200,150,.09), transparent);
    }
    .hero > * { position: relative; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--teal-dim); border: 1px solid rgba(0,200,150,.25);
      color: var(--teal-d); font-size: .72rem; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      padding: 4px 14px; border-radius: 99px; margin-bottom: 1.5rem;
    }
    body.dark .hero-badge { color: var(--teal); }
    .hero h1 {
      font-size: clamp(2.4rem,5.5vw,4rem);
      font-weight: 900; line-height: 1.08; letter-spacing: -.04em;
      color: var(--navy); margin-bottom: 1.1rem;
    }
    body.dark .hero h1 { color: var(--text); }
    .hero h1 em { font-style: normal; color: var(--teal); }
    .hero p {
      max-width: 500px; margin: 0 auto 2.2rem;
      color: var(--muted); font-size: 1rem; font-weight: 400;
    }
    .hero-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--teal); color: #fff;
      padding: 13px 28px; border-radius: var(--radius);
      font-weight: 700; font-size: .95rem; text-decoration: none;
      box-shadow: 0 4px 18px rgba(0,200,150,.3);
      transition: background .18s, transform .15s, box-shadow .18s;
    }
    .hero-cta:hover { background: var(--teal-d); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,200,150,.35); }
    .trust-row {
      display: flex; justify-content: center; flex-wrap: wrap;
      gap: .55rem; margin: 1.5rem auto 0; max-width: 540px;
    }
    .trust-chip {
      font-size: .72rem; font-weight: 600; color: var(--muted);
      background: var(--surface); border: 1px solid var(--border);
      padding: 4px 12px; border-radius: 99px;
    }
    .hero-stats {
      display: flex; justify-content: center; flex-wrap: wrap;
      gap: 2.5rem; margin-top: 3rem;
      padding-top: 2.5rem; border-top: 1px solid var(--border);
    }
    .stat-num { font-size: 1.75rem; font-weight: 900; color: var(--navy); letter-spacing: -.04em; }
    body.dark .stat-num { color: var(--text); }
    .stat-lbl { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

    /* ═══ HOW IT WORKS ═══ */
    .how {
      background: var(--surface);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .how-inner {
      max-width: 1280px; margin: auto;
      padding: 3rem clamp(1.5rem,5vw,4rem);
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 2rem;
    }
    .how-step { display: flex; align-items: flex-start; gap: 1rem; }
    .how-num {
      width: 34px; height: 34px; flex-shrink: 0;
      background: var(--teal-dim); border: 1px solid rgba(0,200,150,.22);
      border-radius: 9px; display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: .9rem; color: var(--teal-d);
    }
    body.dark .how-num { color: var(--teal); }
    .how-title { font-weight: 700; font-size: .88rem; color: var(--text); }
    .how-desc { font-size: .79rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }

    /* ═══ FILTER BAR ═══ */
    .filter-wrap {
      background: var(--surface);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 1.1rem 0 1.25rem;
      position: relative;
    }
    .filter-bar {
      max-width: 1280px; margin: 0 auto;
      padding: 0 clamp(1.5rem,5vw,4rem);
      display: flex; flex-direction: column; gap: .85rem;
    }
    .filter-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding-bottom: .75rem; margin-bottom: .25rem;
      border-bottom: 1px dashed var(--border);
      min-height: 34px;
    }
    .filter-head-left {
      display: flex; align-items: center; gap: .55rem;
      color: var(--text); font-weight: 700;
      height: 30px;
    }
    .filter-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 8px;
      background: var(--teal-dim); color: var(--teal-d);
      flex-shrink: 0;
    }
    body.dark .filter-icon { color: var(--teal); background: rgba(0,200,150,.1); }
    .filter-title {
      font-size: .88rem; letter-spacing: .02em;
      color: var(--text);
      line-height: 1;
    }
    .filter-count {
      font-size: .7rem; font-weight: 600;
      color: var(--muted);
      padding: 0 10px; height: 22px;
      display: inline-flex; align-items: center;
      border-radius: 99px;
      background: var(--surface2); border: 1px solid var(--border);
      line-height: 1;
    }
    .filter-count.filtered { color: var(--teal-d); border-color: rgba(0,200,150,.35); background: var(--teal-dim); }
    body.dark .filter-count.filtered { color: var(--teal); background: rgba(0,200,150,.1); }

    .filter-reset {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: inherit; font-size: .76rem; font-weight: 700;
      color: var(--muted);
      background: transparent;
      border: 1px solid var(--border);
      padding: 6px 14px; border-radius: 99px; cursor: pointer;
      transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
    }
    .filter-reset:hover { color: var(--teal-d); border-color: var(--teal); background: var(--teal-dim); }
    body.dark .filter-reset:hover { color: var(--teal); background: rgba(0,200,150,.12); }
    .filter-reset.active {
      color: var(--teal-d); border-color: var(--teal); background: var(--teal-dim);
    }
    body.dark .filter-reset.active { color: var(--teal); background: rgba(0,200,150,.1); }
    .filter-reset.clickable {
      color: var(--navy); border-color: var(--navy);
      background: transparent;
    }
    body.dark .filter-reset.clickable { color: var(--navy); border-color: var(--navy); }
    .filter-reset.clickable:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
    .filter-reset.clickable .filter-reset-icon { animation: nudge 1.4s ease-in-out infinite; }
    @keyframes nudge {
      0%, 100% { transform: rotate(0); }
      50% { transform: rotate(-25deg); }
    }
    .filter-reset-icon {
      display: inline-block; font-weight: 900;
      transition: transform .4s cubic-bezier(.4,.2,.2,1);
    }
    .filter-reset:hover .filter-reset-icon { transform: rotate(-180deg); }

    .filter-groups {
      display: flex; flex-direction: column; gap: .45rem;
    }
    .filter-group {
      display: flex; align-items: center; flex-wrap: wrap;
      gap: .45rem;
      min-height: 34px;
    }
    .filter-label {
      font-size: .7rem; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .08em;
      white-space: nowrap;
      line-height: 1;
      display: inline-flex; align-items: center; justify-content: flex-start;
      height: 30px;
      margin-right: .6rem;
      flex-shrink: 0;
      width: 86px;
    }
    .filter-label::after {
      content: '';
      display: inline-block;
      width: 1px; height: 14px;
      background: var(--border);
      margin-left: auto;
      padding-left: 0;
    }
    body.dark .filter-label { color: var(--text2); opacity: .78; }
    .filter-chips {
      display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
      min-height: 30px;
      flex: 1 1 auto;
    }
    .filter-chips .filter-btn {
      height: 30px;
      display: inline-flex; align-items: center;
      padding: 0 14px;
      line-height: 1;
    }
    .filter-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text2);
      font-size: .76rem; font-weight: 600;
      padding: 6px 14px; border-radius: 99px; cursor: pointer;
      transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
      font-family: inherit; white-space: nowrap; flex-shrink: 0;
    }
    body.dark .filter-btn {
      background: rgba(77,157,224,.06);
      border-color: rgba(77,157,224,.2);
      color: var(--text);
    }
    .filter-btn:hover {
      border-color: var(--navy);
      color: var(--navy);
      background: var(--navy-dim);
      transform: translateY(-1px);
    }
    body.dark .filter-btn:hover {
      color: #fff;
      background: rgba(77,157,224,.18);
      border-color: var(--navy);
    }
    .filter-btn.active {
      background: var(--navy); border-color: var(--navy); color: #fff;
      box-shadow: 0 2px 8px rgba(26,74,140,.25);
    }
    body.dark .filter-btn.active {
      box-shadow: 0 2px 12px rgba(77,157,224,.35);
    }
    .filter-all {
      border-color: var(--teal);
      color: var(--teal-d);
      background: var(--teal-dim);
      font-weight: 700;
      padding: 7px 18px;
    }
    body.dark .filter-all { color: var(--teal); background: rgba(0,200,150,.08); border-color: rgba(0,200,150,.45); }
    .filter-all:hover {
      border-color: var(--teal); color: var(--teal-d); background: rgba(0,200,150,.18);
    }
    body.dark .filter-all:hover { color: #fff; background: rgba(0,200,150,.22); border-color: var(--teal); }
    .filter-all.active {
      background: var(--teal); border-color: var(--teal); color: #fff;
      box-shadow: 0 2px 10px rgba(0,200,150,.35);
    }

    @media (max-width: 700px) {
      .filter-wrap { padding: .9rem 1rem 1rem; }
      .filter-bar { gap: .7rem; }
      .filter-head { padding-bottom: .55rem; }
      .filter-title { font-size: .8rem; }
      .filter-count { font-size: .68rem; padding: 2px 8px; }
      .filter-reset { font-size: .72rem; padding: 5px 11px; }
      .filter-groups { gap: .55rem; }
      .filter-group {
        gap: .35rem;
        align-items: stretch;
        flex-wrap: nowrap;
      }
      .filter-label {
        font-size: .65rem;
        width: 74px;
        margin-right: .4rem;
        height: 28px;
      }
      .filter-chips {
        flex-wrap: nowrap; overflow-x: auto;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin: 0 -1rem; padding: 2px 1rem 4px;
        gap: .35rem;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
      }
      .filter-chips::-webkit-scrollbar { display: none; }
      .filter-chips .filter-btn { scroll-snap-align: start; }
    }

    /* ═══ SECTION ═══ */
    .section {
      max-width: 1280px; margin: auto;
      padding: 4rem clamp(1.5rem,5vw,4rem);
    }
    .section-header { margin-bottom: 2rem; }
    .section-label {
      font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: var(--teal-d); margin-bottom: .5rem;
    }
    body.dark .section-label { color: var(--teal); }
    .section-title {
      font-size: 1.35rem; font-weight: 800; color: var(--text);
      letter-spacing: -.025em; line-height: 1.2;
      padding-left: .9rem; border-left: 3px solid var(--teal);
    }
    .section-desc { color: var(--muted); font-size: .84rem; margin-top: .4rem; padding-left: .9rem; }
    .section-divider { border: none; border-top: 1px solid var(--border); }

    /* AI featured section */
    #ai-trainer { background: var(--surface); border-top: 2px solid var(--navy); }
    .ai-intro {
      background: var(--navy-dim); border: 1px solid rgba(26,74,140,.15);
      border-radius: var(--radius); padding: 1rem 1.25rem;
      margin-bottom: 2rem; font-size: .86rem; color: var(--text2);
      display: flex; gap: .75rem; line-height: 1.6;
    }
    body.dark .ai-intro { color: var(--text2); border-color: rgba(77,157,224,.2); }
    .ai-intro .bulb { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

    /* ═══ CARDS ═══ */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }

    /* AI trainer: horizontal 2-col cards */
    #ai-trainer .cards { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
    #ai-trainer .card { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
    #ai-trainer .card-body { display: flex; flex-direction: column; gap: .75rem; flex: 1; min-width: 0; }
    #ai-trainer .card-links { margin-top: auto; min-width: 160px; flex-shrink: 0; }
    @media (max-width: 640px) {
      #ai-trainer .cards { grid-template-columns: 1fr; }
      #ai-trainer .card { flex-direction: column; }
      #ai-trainer .card-links { min-width: unset; }
    }

    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.4rem;
      display: flex; flex-direction: column; gap: .9rem;
      transition: border-color .18s, transform .18s, box-shadow .2s;
    }
    .card:hover {
      border-color: var(--border-h); transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(26,74,140,.1);
    }
    body.dark .card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.4); }

    /* left-border instead of pill badge */
    .card.star-card { border-left: 3px solid var(--teal); }
    .card.fast-card { border-left: 3px solid var(--navy); }
    .card.ai-card   { border-left: 3px solid var(--navy); background: var(--surface); }
    .card.ai-card:hover { border-color: var(--navy); }

    .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
    .card-name { font-weight: 700; font-size: .96rem; color: var(--text); letter-spacing: -.01em; }
    .card-badge-label {
      font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
      color: var(--teal-d); margin-bottom: .1rem;
    }
    body.dark .card-badge-label { color: var(--teal); }
    .fast-label { color: var(--navy); }
    body.dark .fast-label { color: #7ab8f5; }
    .card-payout {
      font-size: .69rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
      padding: 3px 9px; border-radius: 5px; line-height: 1.5;
      background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
    }
    .card-desc { color: var(--muted); font-size: .84rem; flex: 1; line-height: 1.55; }
    .card-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
    .tag {
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: 5px;
    }
    .tag.effort { color: var(--teal-d); border-color: rgba(0,200,150,.25); background: var(--teal-dim); }
    body.dark .tag.effort { color: var(--teal); }

    .card-code { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
    .code-val {
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--text); font-family: 'Courier New', monospace; font-size: .78rem;
      padding: 2px 8px; border-radius: 5px; user-select: all;
    }
    .copy-btn {
      background: none; border: 1px solid var(--border); color: var(--muted);
      font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 5px;
      cursor: pointer; font-family: inherit; transition: .15s;
    }
    .copy-btn:hover { border-color: var(--teal); color: var(--teal-d); }
    .copy-btn.copied { color: var(--teal-d); border-color: rgba(0,200,150,.3); background: var(--teal-dim); }

    .card-links { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; }
    .btn {
      display: block; text-align: center;
      padding: 10px 14px; border-radius: var(--radius);
      font-weight: 700; font-size: .83rem; text-decoration: none;
      transition: opacity .15s, transform .12s;
    }
    .btn:hover { opacity: .88; transform: translateY(-1px); }
    .btn-primary { background: var(--navy); color: #fff; }
    .btn-accent  { background: var(--teal); color: #fff; box-shadow: 0 2px 10px rgba(0,200,150,.22); }
    .btn-outline {
      border: 1px solid var(--border); color: var(--muted); background: transparent;
    }
    .btn-outline:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-dim); }
    .btn-secondary {
      border: 1.5px solid var(--teal); color: var(--teal-d); background: var(--teal-dim);
    }
    body.dark .btn-secondary { color: var(--teal); background: rgba(0,200,150,.1); border-color: rgba(0,200,150,.5); }
    .btn-secondary:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
    body.dark .btn-secondary:hover { color: #fff; background: var(--teal); }

    .card.hidden { display: none; }
    section.section-empty { display: none; }
    section.section-empty + .section-divider { display: none; }

    /* ── Bling collapsible ── */
    .bling-extra { display: none; flex-direction: column; gap: .45rem; margin-top: .45rem; }
    .bling-extra.open { display: flex; }
    .bling-toggle {
      background: none; border: 1px dashed var(--border); border-radius: 7px;
      color: var(--muted); font-size: .75rem; font-weight: 600;
      padding: 5px 12px; cursor: pointer; text-align: left;
      transition: color .15s, border-color .15s;
    }
    .bling-toggle:hover { color: var(--navy); border-color: var(--navy); }

    /* ═══ FOOTER ═══ */
    /* ═══ ARTICLE / ABOUT ═══ */
    .article-section { background: var(--surface); border-top: 1px solid var(--border); }
    .article-body {
      max-width: 820px; margin: 0 auto;
      font-size: 1rem; line-height: 1.75;
      color: var(--text2);
    }
    .article-body p {
      margin-bottom: 1.1rem;
    }
    .article-body p:last-child { margin-bottom: 0; }
    .article-body strong { color: var(--text); font-weight: 700; }
    body.dark .article-body { color: var(--text2); }
    body.dark .article-body strong { color: var(--text); }
    .article-body em {
      font-style: normal; color: var(--teal-d);
      background: var(--teal-dim); padding: 1px 6px; border-radius: 5px;
      font-weight: 600;
    }
    body.dark .article-body em { color: var(--teal); background: rgba(0,200,150,.1); }

    /* ═══ FAQ ═══ */
    .faq-section {
      background: var(--bg);
      border-top: 1px solid var(--border);
    }
    .faq-list {
      max-width: 820px; margin: 0 auto;
      display: flex; flex-direction: column; gap: .5rem;
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    .faq-item[open] {
      border-color: var(--teal);
      box-shadow: 0 4px 16px rgba(0,200,150,.1);
    }
    body.dark .faq-item[open] { box-shadow: 0 4px 16px rgba(0,200,150,.18); }
    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 1rem 1.25rem;
      font-weight: 600;
      font-size: .95rem;
      color: var(--text);
      display: flex; justify-content: space-between; align-items: center;
      gap: 1rem;
      position: relative;
      user-select: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '';
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--teal-dim);
      background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
      background-size: 12px 2px, 2px 12px;
      background-position: center, center;
      background-repeat: no-repeat;
      color: var(--teal-d);
      transition: transform .3s cubic-bezier(.4,.2,.2,1), background-color .25s ease, color .25s ease;
    }
    body.dark .faq-item summary::after { color: var(--teal); background-color: rgba(0,200,150,.12); }
    .faq-item[open] summary::after {
      /* turn the vertical bar invisible → leaves a clean horizontal − */
      background-size: 12px 2px, 0 0;
      background-color: var(--teal);
      color: #fff;
      transform: rotate(180deg);
    }
    .faq-item summary:hover { color: var(--teal-d); }
    body.dark .faq-item summary:hover { color: var(--teal); }
    .faq-answer {
      padding: 0 1.25rem 1.1rem;
      color: var(--text2);
      font-size: .9rem; line-height: 1.7;
      animation: faq-slide .3s ease;
    }
    @keyframes faq-slide {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 600px) {
      .faq-item summary { font-size: .88rem; padding: .85rem 1rem; }
      .faq-answer { font-size: .85rem; padding: 0 1rem 1rem; }
      .article-body { font-size: .92rem; line-height: 1.7; }
    }

    footer {
      text-align: center;
      padding: 2.25rem clamp(1rem, 4vw, 2rem) 1.5rem;
      color: var(--muted); font-size: .78rem; line-height: 1.7;
    }
    .footer-tagline {
      font-size: .82rem; color: var(--text2);
      max-width: 560px; margin: 0 auto .75rem;
    }
    .footer-tagline strong { color: var(--text); }
    .footer-nav,
    .footer-credit {
      display: flex; flex-wrap: wrap;
      justify-content: center; align-items: center;
      gap: .25rem .55rem;
      font-size: .76rem;
      background: transparent;
    }
    .footer-nav { margin-bottom: .55rem; }
    .footer-credit {
      font-size: .73rem;
      opacity: .85;
    }
    .footer-nav a,
    .footer-credit a {
      color: var(--teal-d); text-decoration: none; font-weight: 600;
      white-space: nowrap;
      transition: color .15s ease, opacity .15s ease;
    }
    body.dark .footer-nav a, body.dark .footer-credit a { color: var(--teal); }
    .footer-nav a:hover, .footer-credit a:hover { opacity: .7; }
    .footer-nav .sep,
    .footer-credit .sep { opacity: .35; user-select: none; }
    .footer-credit > span:first-child { color: var(--muted); }
    .footer-copy {
      margin-top: .85rem;
      font-size: .72rem; opacity: .55;
    }
    @media (max-width: 600px) {
      footer { padding: 2rem 1rem 1.5rem; }
      .footer-tagline { font-size: .78rem; }
      .footer-nav, .footer-credit { font-size: .72rem; gap: .2rem .45rem; }
    }

    @media (max-width: 600px) {
      .cards { grid-template-columns: 1fr; }
      .hero-stats { gap: 1.5rem; }
    }