:root {
      --bg: #1a1d23;
      --bg-2: #22262e;
      --bg-3: #2a2f38;
      --fg: #e5e7eb;
      --fg-2: #c4cad4;
      --muted: #8b94a3;
      --line: #2f3540;
      --line-2: #3a414d;
      --accent: #4ea3ff;
      --accent-2: #2563eb;
      --max: 1080px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--fg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }

    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
    section { padding: 96px 0; border-top: 1px solid var(--line); }
    section:first-of-type { border-top: 0; }

    /* Nav */
    nav {
      position: sticky; top: 0; z-index: 10;
      background: rgba(26,29,35,.85);
      backdrop-filter: saturate(180%) blur(8px);
      -webkit-backdrop-filter: saturate(180%) blur(8px);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      max-width: var(--max); margin: 0 auto; padding: 14px 24px;
    }
    .brand {
      display: flex; align-items: center; gap: 12px;
      font-weight: 700; letter-spacing: -0.01em;
      font-size: 18px;
      flex-shrink: 0; white-space: nowrap;
    }
    .brand .logo-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: none;
      transition: transform .15s ease;
    }
    .brand .logo-icon img {
      width: auto;
      height: 32px;
      max-width: 100%;
      max-height: 100%;
      filter: none;
    }
    .brand:hover .logo-icon {
      transform: translateY(-1px);
    }
    .brand .name {
      color: var(--fg);
      background: linear-gradient(180deg, #ffffff 0%, #c4cad4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .brand .name .blue {
      background: linear-gradient(180deg, #6cb3ff 0%, #2563eb 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* BLE signal indicator — three dots pulsing in sequence */
    .brand .ble {
      display: inline-flex; align-items: flex-end; gap: 3px;
      height: 14px; margin-left: 4px;
    }
    .brand .ble span {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(255,255,255,0.75);
      animation: ble-pulse 1.4s ease-in-out infinite;
    }
    .brand .ble span:nth-child(1) { animation-delay: 0s;    width: 4px;  height: 4px;  }
    .brand .ble span:nth-child(2) { animation-delay: 0.2s;  width: 4px;  height: 8px;  }
    .brand .ble span:nth-child(3) { animation-delay: 0.4s;  width: 4px;  height: 12px; }
    @keyframes ble-pulse {
      0%, 100% { opacity: 0.35; transform: scaleY(0.7); }
      50%      { opacity: 1;    transform: scaleY(1.1); }
    }
    .nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--muted); align-items: center; min-width: 0; flex-wrap: nowrap; }
    .nav-links a { white-space: nowrap; }
    .nav-links a:hover { color: var(--fg); }

    /* Active page indicator — `aria-current="page"` is set per-page in the
       HTML. Renders as a small accent underline so the user always knows
       which page they're on. Works on regular links, nav-cta, and nav-buy. */
    .nav-links a[aria-current="page"] { color: var(--fg); position: relative; }
    .nav-links a[aria-current="page"]::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
      height: 2px; background: var(--accent); border-radius: 2px;
    }
    .nav-links a.nav-cta[aria-current="page"] { color: var(--accent); }
    .nav-links a.nav-buy[aria-current="page"] {
      background: rgba(78,163,255,0.20); border-color: var(--accent);
    }

    /* "Get one" + "Update Your EucBuddy" — CTA-style nav items, visually
       distinct from the rest of the menu by color and weight only. */
    .nav-links a.nav-cta { color: var(--accent); font-weight: 700; }
    .nav-links a.nav-cta:hover { color: #6cb3ff; }

    /* "Get one" — the buy CTA, highlighted as a pill so it stands out (matches index.html). */
    .nav-links a.nav-buy {
      color: var(--accent); border: 1px solid rgba(78,163,255,0.35);
      padding: 4px 12px; border-radius: 999px; background: rgba(78,163,255,0.07);
    }
    .nav-links a.nav-buy:hover { background: rgba(78,163,255,0.16); border-color: var(--accent); }

    /* Hamburger button — hidden on desktop, shown on mobile */
    .nav-toggle {
      display: none;
      background: none; border: none; padding: 8px; margin: 0;
      cursor: pointer; flex-direction: column; gap: 5px;
      align-items: center; justify-content: center;
    }
    .nav-toggle span {
      display: block; width: 22px; height: 2px;
      background: var(--fg); border-radius: 1px;
      transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile: collapse links into a dropdown */
    @media (max-width: 768px) {
      .nav-toggle { display: flex; }
      .nav-inner { position: relative; }
      .nav-links {
        display: none;
        position: absolute;
        /* Match .nav-inner's width so the drawer never overflows the
           viewport on narrow screens (was `left: -24px; right: -24px`
           which pushed the drawer 24px past the viewport on phones). */
        top: calc(100% + 1px); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: rgba(26,29,35,0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        /* 24px horizontal padding keeps link text aligned with the rest of
           the page (`.wrap` has `padding: 0 24px`). */
        padding: 14px 24px;
        border-bottom: 1px solid var(--line);
        color: var(--fg-2);
        font-size: 15px;
      }
      .nav-links a[aria-current="page"] {
        background: rgba(78,163,255,0.08);
      }
      .nav-links a[aria-current="page"]::after {
        display: none;
      }
      .nav-links a.nav-buy {
        padding: 14px 24px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        color: var(--accent);
        font-weight: 700;
      }
      .nav-links a.nav-buy:hover,
      .nav-links a.nav-buy[aria-current="page"] {
        background: rgba(78,163,255,0.08);
        border-color: var(--line);
      }
      .nav-links a:last-child { border-bottom: 0; }
    }

    /* Hero */
    .hero {
      padding: 120px 0 80px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(78,163,255,0.10), transparent 60%),
        var(--bg);
    }
    /* Decorative background grid + glows (behind everything in the hero) */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(78,163,255,0.18) 1px, transparent 1.4px),
        linear-gradient(rgba(78,163,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,163,255,0.06) 1px, transparent 1px);
      background-size: 32px 32px, 64px 64px, 64px 64px;
      background-position: 0 0, 0 0, 0 0;
      mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 80%);
      z-index: 0;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .hero .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }
    .hero .orb.a {
      top: 10%; left: -60px;
      width: 320px; height: 320px;
      background: radial-gradient(circle, rgba(78,163,255,0.35), transparent 70%);
      animation: drift-a 16s ease-in-out infinite;
    }
    .hero .orb.b {
      bottom: 5%; right: -80px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(120,80,255,0.25), transparent 70%);
      animation: drift-b 20s ease-in-out infinite;
    }
    .hero .orb.c {
      top: 55%; left: 45%;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(78,163,255,0.20), transparent 70%);
      animation: drift-c 24s ease-in-out infinite;
    }
    @keyframes drift-a {
      0%, 100% { transform: translate(0, 0)        scale(1); }
      50%      { transform: translate(40px, 30px)  scale(1.1); }
    }
    @keyframes drift-b {
      0%, 100% { transform: translate(0, 0)         scale(1); }
      50%      { transform: translate(-50px, -20px) scale(1.15); }
    }
    @keyframes drift-c {
      0%, 100% { transform: translate(0, 0)         scale(1); }
      50%      { transform: translate(20px, -30px)  scale(0.9); }
    }
    .hero .wrap { position: relative; z-index: 1; }
    .hero-grid {
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
    }
    @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

    .eyebrow {
      display: inline-block; font-size: 12px; letter-spacing: .14em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
      padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px;
      background: rgba(78,163,255,0.08);
    }
    h1 {
      font-size: clamp(40px, 7vw, 68px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0 0 24px;
      font-weight: 700;
    }
    h1 .accent { color: var(--accent); }
    .lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--fg-2); max-width: 560px; margin: 0 0 32px; }
    .cta { display: inline-flex; gap: 12px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px;
      border: 1px solid var(--accent); background: var(--accent); color: #0b0d12;
      transition: transform .12s ease, background .12s ease, opacity .12s ease;
    }
    .btn:hover { transform: translateY(-1px); background: #6cb3ff; }
    .btn.ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
    .btn.ghost:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }

    /* Hero product photo — the device shot IS the hero visual */
    .hero-photo {
      position: relative;
      margin-top: 8px;
    }
    .hero-photo .frame {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--line-2);
      background: var(--bg-2);
      box-shadow:
        0 30px 80px rgba(0,0,0,0.5),
        0 0 60px rgba(78,163,255,0.14),
        0 0 0 1px rgba(78,163,255,0.10);
    }
    .hero-photo .frame img { width: 100%; height: auto; display: block; }
    /* Soft bottom fade so the photo sits into the dark page */
    .hero-photo .frame::after {
      content: "";
      position: absolute; inset: 0;
      border-radius: 20px;
      background: linear-gradient(180deg, transparent 72%, rgba(26,29,35,0.35));
      pointer-events: none;
    }
    /* Floating mascot badge overlapping the photo corner */
    .hero-photo .badge {
      position: absolute; top: -26px; right: -14px;
      width: 84px; height: 84px;
      border-radius: 22px;
      background: #ffffff;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 30px rgba(78,163,255,0.30);
      display: flex; align-items: center; justify-content: center;
      animation: float 4s ease-in-out infinite;
      z-index: 2;
    }
    .hero-photo .badge img { width: 100%; height: 100%; object-fit: contain; }
    @media (max-width: 960px) {
      .hero-photo { max-width: 560px; margin: 0 auto; }
      .hero-photo .badge { top: -22px; right: 6px; width: 72px; height: 72px; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-18px); }
    }
    /* Quick-fact chips under the hero CTAs */
    .hero-chips {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 28px;
    }
    .hero-chips span {
      font-size: 12.5px; color: var(--muted);
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.02);
      white-space: nowrap;
    }
    .hero-chips span strong { color: var(--fg-2); font-weight: 600; }

    /* Facebook follow — a deliberate, brand-styled link, set apart from the fact chips
       (not another themed pill). Official Facebook blue on the icon makes it read as a
       real social link rather than generic site chrome. */
    .hero-social {
      display: inline-flex; align-items: center; gap: 12px;
      margin-top: 24px;
      text-decoration: none;
    }
    .hero-social .fb {
      display: grid; place-items: center;
      width: 40px; height: 40px; flex-shrink: 0;
      border-radius: 50%;
      background: #1877F2; color: #fff;
      box-shadow: 0 4px 14px rgba(24,119,242,0.32);
      transition: transform .14s ease, box-shadow .14s ease;
    }
    .hero-social .label { display: flex; flex-direction: column; line-height: 1.3; }
    .hero-social .label b { font-size: 14px; font-weight: 600; color: var(--fg); }
    .hero-social .label small { font-size: 12px; color: var(--muted); }
    .hero-social:hover .fb { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(24,119,242,0.5); }
    .hero-social:hover .label b { color: var(--accent); }

    /* Section headings */
    h2 {
      font-size: clamp(28px, 3.4vw, 40px);
      letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px;
      font-weight: 700;
    }
    .sub { color: var(--fg-2); max-width: 620px; margin: 0 0 48px; }

    /* Features */
    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .feature {
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 28px;
      transition: border-color .12s ease, transform .12s ease;
    }
    .feature:hover { border-color: var(--accent); transform: translateY(-2px); }
    .feature .num {
      display: inline-block; font-size: 11px; color: var(--accent);
      letter-spacing: .14em; padding: 3px 8px; border-radius: 999px;
      background: rgba(78,163,255,0.10); border: 1px solid rgba(78,163,255,0.2);
    }
    .feature h3 { font-size: 18px; margin: 14px 0 8px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
    .feature p { margin: 0; color: var(--fg-2); font-size: 14.5px; }
    @media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

    /* Dashboards (Features) section */
    .dashboards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    @media (max-width: 760px) { .dashboards-grid { grid-template-columns: 1fr; } }
    .dashboard-card {
      padding: 20px 24px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: border-color .15s ease, transform .15s ease;
    }
    .dashboard-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .dashboard-card .dash-label {
      display: inline-block;
      font-family: ui-monospace, "Menlo", "Consolas", monospace;
      font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
      color: #5ee0ff;
      padding: 3px 8px; border-radius: 6px;
      background: rgba(94, 224, 255, 0.08);
      border: 1px solid rgba(94, 224, 255, 0.22);
      margin-bottom: 10px;
    }
    .dashboard-card p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.55; }
    .dashboard-card p strong { color: var(--fg); }

    /* Screens showcase (Features section) */
    .screens-showcase {
      display: grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
      gap: 28px 34px;
      align-items: start;
    }
    .screens-intro {
      grid-column: 1 / -1;
      max-width: 780px;
    }
    .screens-intro .eyebrow { margin-bottom: 14px; }
    .screens-intro h2 { margin: 0 0 12px; }
    .screens-intro .sub {
      margin: 0;
      max-width: 50ch;
      font-size: clamp(16px, 1.45vw, 18px);
    }
    .screens-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
    }
    .screens-stats span {
      color: var(--fg-2);
      font-size: 13px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.025);
    }
    .screens-stats b { color: var(--fg); font-weight: 700; }
    .screens-photo {
      margin: 0;
      position: relative;
      justify-self: stretch;
      align-self: start;
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
        var(--bg-2);
      border: 1px solid var(--line-2);
      box-shadow:
        0 28px 70px rgba(0,0,0,0.42),
        0 0 0 1px rgba(78,163,255,0.10);
    }
    .screens-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 70%, rgba(26,29,35,0.22));
    }
    .screens-photo img {
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
      object-fit: contain;
    }
    .screens-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .screens-list li {
      --screen-accent: var(--accent);
      --screen-accent-rgb: 78,163,255;
      display: grid;
      grid-template-columns: 38px 1fr;
      align-items: start;
      gap: 12px;
      min-height: 0;
      padding: 13px 14px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
      transition: border-color .15s ease, transform .15s ease, background .15s ease;
    }
    .screens-list li:hover {
      border-color: rgba(var(--screen-accent-rgb),0.62);
      background: rgba(var(--screen-accent-rgb),0.055);
      transform: translateY(-2px);
    }
    .screens-list li.accent-cyan { --screen-accent: #5ee0ff; --screen-accent-rgb: 94,224,255; }
    .screens-list li.accent-green { --screen-accent: #3ad17a; --screen-accent-rgb: 58,209,122; }
    .screens-list li.accent-yellow { --screen-accent: #ffd54f; --screen-accent-rgb: 255,213,79; }
    .screens-list li.accent-pink { --screen-accent: #f472b6; --screen-accent-rgb: 244,114,182; }
    .screens-list li.accent-blue { --screen-accent: #82a8ff; --screen-accent-rgb: 130,168,255; }
    .screens-list li.accent-orange { --screen-accent: #ff9f43; --screen-accent-rgb: 255,159,67; }
    .screens-list .screen-ico {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: 8px;
      background: rgba(var(--screen-accent-rgb),0.11);
      border: 1px solid rgba(var(--screen-accent-rgb),0.28);
      color: var(--screen-accent);
      flex-shrink: 0;
    }
    .screens-list li > div { min-width: 0; }
    .screens-list .dash-label {
      color: var(--screen-accent);
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
    }
    .screens-list li p { margin: 6px 0 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.5; }
    .screens-list li strong { color: var(--fg); }
    @media (max-width: 900px) {
      .screens-showcase { grid-template-columns: 1fr; gap: 24px; }
      .screens-intro { max-width: none; }
      .screens-photo { max-width: 640px; width: 100%; margin: 0 auto; }
      .screens-list { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .screens-list { grid-template-columns: 1fr; }
    }

    /* Headlight split (Features section) */
    .headlight-split {
      display: grid;
      grid-template-columns: minmax(220px, 320px) 1fr;
      gap: 28px;
      align-items: center;
      width: 100%;
      margin-top: 28px;
      padding: 20px 24px;
      background: rgba(255, 213, 79, 0.035);
      border: 1px solid rgba(255, 213, 79, 0.14);
      border-radius: 12px;
    }
    .headlight-photo img {
      width: 100%;
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(255, 213, 79, 0.14);
    }
    .headlight-body h3 { margin: 0 0 8px; font-size: 20px; color: var(--fg); }
    .headlight-body p { margin: 0 0 14px; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
    .headlight-body p strong { color: var(--fg); }
    .hl-chip {
      display: inline-block;
      font-family: ui-monospace, "Menlo", "Consolas", monospace;
      font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
      color: #ffd54f;
      padding: 5px 12px; border-radius: 6px;
      background: rgba(255, 213, 79, 0.10);
      border: 1px solid rgba(255, 213, 79, 0.28);
    }
    @media (max-width: 820px) {
      .headlight-split { grid-template-columns: minmax(160px, 220px) 1fr; gap: 20px; padding: 16px 18px; }
      .headlight-body h3 { font-size: 18px; }
      .headlight-body p { font-size: 14px; }
    }
    @media (max-width: 560px) {
      .headlight-split { grid-template-columns: 1fr; }
      .headlight-photo { max-width: 220px; }
    }

    /* Gallery */
    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      gap: 16px;
    }
    .gallery .tile {
      aspect-ratio: 4 / 3;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--bg-2);
      position: relative;
    }
    .gallery .tile.zoomable { cursor: zoom-in; transition: transform .15s ease, border-color .15s ease; }
    .gallery .tile.zoomable:hover { transform: translateY(-2px); border-color: var(--accent); }
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gallery .tile::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(26,29,35,0.5));
      pointer-events: none;
    }
    /* "More coming" placeholder tile */
    .gallery .tile-more {
      display: flex; align-items: center; justify-content: center;
      border: 1.5px dashed var(--line-2);
      background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(78,163,255,0.06), transparent 70%),
        var(--bg-2);
    }
    .gallery .tile-more::after { display: none; }
    .gallery .more-inner { text-align: center; color: var(--muted); user-select: none; }
    .gallery .more-icon {
      width: 44px; height: 44px; border-radius: 50%;
      margin: 0 auto 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; font-weight: 300; line-height: 1;
      color: var(--accent);
      border: 1.5px solid rgba(78,163,255,0.4);
      background: rgba(78,163,255,0.06);
    }
    .gallery .more-text {
      font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--fg-2);
    }
    @media (max-width: 860px) {
      .gallery { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .gallery { grid-template-columns: 1fr; }
    }

    /* MyBuddy section */
    .buddy-layout {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 48px;
      align-items: start;
    }
    @media (max-width: 860px) {
      .buddy-layout { grid-template-columns: 1fr; gap: 32px; }
    }
    .buddy-art {
      position: sticky; top: 96px;
      display: flex; flex-direction: column;
      align-items: center; gap: 24px;
    }
    @media (max-width: 860px) { .buddy-art { position: static; } }
    .buddy-mascot {
      width: 100%; max-width: 240px;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow:
        0 24px 64px rgba(0,0,0,0.4),
        0 0 40px rgba(78,163,255,0.18);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .buddy-mascot img {
      width: auto; height: 100%; max-width: 100%;
      animation: float 4s ease-in-out infinite;
    }
    .buddy-stage {
      width: 100%; max-width: 240px;
      aspect-ratio: 1 / 1;
      /* Mirrors the firmware's drawDashboardBackdrop(): blue wash from the
         top, pink wash from the bottom, on a deep navy base — lifts the dark
         tire off the background instead of drowning it in flat black. */
      background:
        linear-gradient(180deg, rgba(0,90,255,0.22), transparent 42%),
        linear-gradient(0deg, rgba(244,30,150,0.16), transparent 42%),
        radial-gradient(circle at 50% 58%, rgba(78,163,255,0.10), transparent 60%),
        #070a12;
      border-radius: 24px;
      border: 1px solid rgba(78,163,255,0.28);
      box-shadow:
        0 24px 64px rgba(0,0,0,0.55),
        0 0 32px rgba(78,163,255,0.12),
        inset 0 0 50px rgba(0,0,0,0.45);
      position: relative; overflow: hidden;
    }
    .buddy-level-title {
      font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--fg);
      margin: 0;
    }
    .buddy-level-title .lvl {
      color: var(--accent);
    }
    .buddy-level-title .name {
      color: #f472b6;
    }
    .buddy-stage canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      image-rendering: pixelated;
    }
    .buddy-controls { display: flex; gap: 8px; }
    .buddy-controls button {
      font: inherit;
      padding: 10px 20px; border-radius: 999px;
      border: 1px solid var(--accent); background: var(--accent); color: #0b0d12;
      font-weight: 600; cursor: pointer; font-size: 14px;
      transition: background .12s ease, transform .12s ease;
    }
    .buddy-controls button:hover { background: #6cb3ff; transform: translateY(-1px); }
    .buddy-stages {
      display: flex; flex-direction: column; gap: 6px;
      width: 100%; max-width: 240px;
    }
    .buddy-stages .stage {
      display: grid;
      grid-template-columns: 24px 1fr auto;
      align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 13px;
      transition: border-color .15s ease, transform .15s ease;
    }
    .buddy-stages .stage:hover { border-color: var(--accent); transform: translateX(2px); }
    .buddy-stages .stage-num {
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(78,163,255,0.10);
      border: 1px solid rgba(78,163,255,0.30);
      color: var(--accent);
      border-radius: 50%;
      font-weight: 700; font-size: 12px;
    }
    .buddy-stages .stage-name { color: var(--fg); font-weight: 600; }
    .buddy-stages .stage-km { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

    .buddy-info { display: flex; flex-direction: column; gap: 16px; }
    .buddy-card {
      padding: 20px 24px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: border-color .15s ease;
    }
    .buddy-card:hover { border-color: var(--accent); }
    .buddy-tag {
      display: inline-block;
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--accent);
      padding: 3px 8px; border-radius: 999px;
      background: rgba(78,163,255,0.10);
      border: 1px solid rgba(78,163,255,0.22);
      margin-bottom: 10px;
    }
    .buddy-card h3 {
      font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
      color: var(--fg); margin: 0 0 8px;
    }
    .buddy-card p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }
    .buddy-card p + p { margin-top: 10px; }
    .buddy-card em { color: var(--accent); font-style: normal; font-weight: 600; }
    .buddy-card strong { color: var(--fg); }
    .buddy-stages-narrative {
      display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
      font-size: 13.5px; color: var(--fg-2);
    }
    .buddy-stages-narrative span {
      padding: 4px 10px;
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: 999px;
      white-space: nowrap;
    }
    .buddy-note { color: var(--muted); font-size: 13.5px !important; }

    /* Lightbox */
    .lightbox {
      position: fixed; inset: 0; z-index: 200;
      display: none;
      align-items: center; justify-content: center;
      padding: 24px;
      background: rgba(8, 10, 14, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: zoom-out;
      animation: lb-fade .2s ease both;
    }
    .lightbox.open { display: flex; }
    .lightbox img {
      max-width: 92vw; max-height: 86vh;
      width: auto; height: auto;
      object-fit: contain;
      border-radius: 10px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6);
      cursor: default;
    }
    .lightbox .lb-caption {
      position: absolute; left: 0; right: 0; bottom: 24px;
      text-align: center; color: var(--fg-2); font-size: 14px;
      pointer-events: none;
    }
    .lightbox .lb-close {
      position: absolute; top: 16px; right: 20px;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s ease, transform .12s ease;
    }
    .lightbox .lb-close:hover { background: rgba(255,255,255,0.15); transform: rotate(90deg); }
    @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

    /* Specs */
    .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-2); }
    .specs .row { display: flex; justify-content: space-between; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
    .specs .row:nth-last-child(-n+2) { border-bottom: 0; }
    .specs .k { color: var(--muted); font-size: 14px; }
    .specs .v { font-size: 14px; font-weight: 500; text-align: right; color: var(--fg); }
    @media (max-width: 560px) { .specs { grid-template-columns: 1fr; } }

    /* CTA strip */
    .cta-strip {
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      color: #0b0d12; border-radius: 18px;
      padding: 48px; display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .cta-strip h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.01em; }
    .cta-strip p { margin: 0; color: rgba(11,13,18,0.75); }
    .cta-strip .btn { background: #0b0d12; color: var(--fg); border-color: #0b0d12; }
    .cta-strip .btn:hover { background: #1a1d23; color: var(--accent); }

    /* Footer */
    footer { padding: 48px 0 64px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
    footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    footer a:hover { color: var(--accent); }

    /* Fade-in */
    .fade-in { animation: fade .6s ease both; }
    @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }