:root {
        --bg: #ffffff;
        --text: #1b3139;
        --text-muted: rgba(27, 49, 57, 0.72);
        --text-faint: rgba(27, 49, 57, 0.55);
        --accent: #eb1600;
        --accent-2: #ff5f46;
        --border: rgba(27, 49, 57, 0.12);
        --glass: rgba(255, 255, 255, 0.62);
        --glass-strong: rgba(255, 255, 255, 0.78);
        --shadow: 0 24px 60px rgba(12, 18, 22, 0.12);
        --shadow-soft: 0 12px 34px rgba(12, 18, 22, 0.10);

        --radius: 22px;
        --radius-sm: 14px;
        --max-w: 1160px;

        --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
        --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }

      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: var(--font);
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      ::selection { background: rgba(235, 22, 0, 0.18); }

      /* Background mesh + noise */
      .bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(900px 520px at 12% 18%, rgba(235, 22, 0, 0.16) 0%, transparent 60%),
          radial-gradient(820px 520px at 92% 14%, rgba(255, 95, 70, 0.14) 0%, transparent 58%),
          radial-gradient(780px 520px at 55% 92%, rgba(0, 173, 191, 0.10) 0%, transparent 60%);
        filter: saturate(1.1);
      }
      .noise {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
      }

      /* Starscape canvas (subtle on light bg) */
      #stars {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.20;
        mix-blend-mode: multiply;
      }

      /* Loader (hidden until JS adds .is-blocking after a delay — avoids flash on fast load) */
      .loader {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 420ms ease, visibility 420ms ease;
      }
      .loader.is-blocking:not(.hidden) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .loader.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      /* Author .loader { display: grid } otherwise wins over the [hidden] attribute */
      .loader[hidden] {
        display: none !important;
      }
      .loader-card {
        width: min(520px, calc(100vw - 40px));
        padding: calc(26px * var(--dp-density-scale, 1)) calc(26px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: var(--glass-strong);
        border: 1px solid rgba(27,49,57,0.10);
        box-shadow: var(--shadow);
      }
      .loader-top {
        display: flex;
        align-items: center;
        gap: calc(14px * var(--dp-density-scale, 1));
        margin-bottom: calc(16px * var(--dp-density-scale, 1));
      }
      .loader-top img {
        width: 140px;
        height: auto;
        display: block;
        filter: saturate(1.05);
      }
      .loader-title {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: calc(4px * var(--dp-density-scale, 1));
      }
      .loader-title .kicker {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-faint);
      }
      .loader-title .big {
        font-size: calc(18px * var(--dp-density-scale, 1));
        font-weight: 650;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .progress {
        height: 10px;
        border-radius: 999px;
        background: rgba(27,49,57,0.08);
        overflow: hidden;
        border: 1px solid rgba(27,49,57,0.10);
      }
      .progress > div {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        box-shadow: 0 0 22px rgba(235,22,0,0.28);
        transition: width 180ms ease;
      }
      .progress-meta {
        margin-top: calc(10px * var(--dp-density-scale, 1));
        display: flex;
        justify-content: space-between;
        gap: calc(12px * var(--dp-density-scale, 1));
        font-size: calc(12px * var(--dp-density-scale, 1));
        color: var(--text-muted);
      }

      /* Top progress bar */
      .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 250;
        background: transparent;
      }
      .scroll-progress > div {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        box-shadow: 0 0 22px rgba(235, 22, 0, 0.30);
      }

      /* Navbar (full -> pill) */
      .nav {
        position: fixed;
        top: 12px;
        left: 0;
        right: 0;
        z-index: 220;
        padding: 0 calc(26px * var(--dp-density-scale, 1));
        pointer-events: none;
      }
      .nav-inner {
        pointer-events: auto;
        max-width: var(--max-w);
        margin: 0 auto;
        padding: calc(12px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(12px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.80);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 10px 24px rgba(12,18,22,0.08);
        transform-origin: top center;
        transition: transform 280ms ease, background 280ms ease, box-shadow 280ms ease, max-width 280ms ease;
      }
      .nav-inner.scrolled {
        max-width: 860px;
        background: rgba(255,255,255,0.52);
        box-shadow: 0 18px 44px rgba(12,18,22,0.16);
      }
      .brand {
        display: flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        text-decoration: none;
        color: inherit;
        min-width: 0;
      }
      .brand img {
        width: auto;
        height: calc(28px * var(--dp-density-scale, 1));
        max-width: min(176px, 46vw);
        display: block;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
      }
      .nav-links { display: flex; align-items: center; gap: calc(6px * var(--dp-density-scale, 1)); }
      .nav-links a {
        text-decoration: none;
        color: var(--text-muted);
        font-size: calc(13px * var(--dp-density-scale, 1));
        font-weight: 600;
        padding: calc(8px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: 999px;
        transition: background 160ms ease, color 160ms ease;
        white-space: nowrap;
      }
      .nav-links a:hover { background: rgba(27,49,57,0.06); color: var(--text); }
      .nav-actions { display: flex; gap: calc(8px * var(--dp-density-scale, 1)); align-items: center; }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        border-radius: 999px;
        border: 1px solid rgba(27,49,57,0.12);
        background: rgba(255,255,255,0.2);
        color: var(--text);
        text-decoration: none;
        font-weight: 700;
        font-size: calc(13.5px * var(--dp-density-scale, 1));
        letter-spacing: -0.01em;
        transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
        cursor: pointer;
      }
      .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.40); border-color: rgba(27,49,57,0.18); }
      .btn.primary {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        box-shadow: 0 12px 26px rgba(235, 22, 0, 0.20);
      }
      .btn.primary:hover { box-shadow: 0 16px 34px rgba(235, 22, 0, 0.25); }
      .btn.secondary {
        background: #1b3139;
        color: #fff;
        border-color: #1b3139;
      }
      .btn.secondary:hover { background: #12252b; border-color: #12252b; }

      .iconBtn {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(27,49,57,0.12);
        background: rgba(255,255,255,0.22);
        color: var(--text);
        display: inline-grid;
        place-items: center;
        cursor: pointer;
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
      }
      .iconBtn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.44); border-color: rgba(27,49,57,0.18); }
      .nav-menu { display: none; font-size: calc(18px * var(--dp-density-scale, 1)); font-weight: 900; line-height: 1; }

      /* Mobile menu */
      .menuBackdrop{
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(0,0,0,0.42);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .mobileMenu{
        position: fixed;
        top: 14px;
        right: 14px;
        left: 14px;
        z-index: 241;
        border-radius: 22px;
        background: rgba(255,255,255,0.92);
        border: 1px solid rgba(255,255,255,0.82);
        box-shadow: 0 28px 80px rgba(0,0,0,0.28);
        overflow: hidden;
      }
      .mobileMenuTop{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(14px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
        border-bottom: 1px solid rgba(27,49,57,0.08);
        background: radial-gradient(circle at top left, rgba(255,255,255,0.98), rgba(255,255,255,0.84));
      }
      .mobileMenuTitle{
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.66);
      }
      .mobileMenuLinks{
        display: grid;
        gap: calc(6px * var(--dp-density-scale, 1));
        padding: calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
      }
      .mobileMenuLinks a{
        text-decoration:none;
        color: var(--text);
        font-weight: 800;
        letter-spacing: -0.02em;
        padding: calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: 14px;
        border: 1px solid rgba(27,49,57,0.08);
        background: rgba(27,49,57,0.03);
      }
      .mobileMenuLinks a:active{ transform: translateY(1px); }
      .mobileMenuActions{
        display:flex;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
      }
      .mobileMenuActions .btn{ flex: 1; }

      /* Layout */
      main { position: relative; z-index: 2; }
      section { padding: calc(110px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1)); }
      .wrap { max-width: var(--max-w); margin: 0 auto; }
      .divider {
        height: 1px;
        max-width: 760px;
        margin: 0 auto;
        background: linear-gradient(90deg, transparent, rgba(235,22,0,0.22), transparent);
        opacity: 0.75;
      }

      /* Hero */
      .hero { padding-top: calc(132px * var(--dp-density-scale, 1)); padding-bottom: calc(84px * var(--dp-density-scale, 1)); }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: calc(40px * var(--dp-density-scale, 1));
        align-items: center;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(8px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.62);
        border: 1px solid rgba(27,49,57,0.12);
        border-radius: 999px;
        box-shadow: var(--shadow-soft);
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.78);
      }
      .badge-dot {
        width: 10px;
        height: 10px;
        background: rgba(34, 197, 94, 0.90);
        border-radius: 50%;
        box-shadow: 0 0 0 6px rgba(34,197,94,0.10);
        animation: pulse 1.9s ease-in-out infinite;
      }
      @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(0.9); opacity: 0.55 } }

      h1 {
        margin: calc(18px * var(--dp-density-scale, 1)) 0 calc(12px * var(--dp-density-scale, 1));
        font-size: clamp(40px, 5.2vw, 68px);
        line-height: 1.03;
        letter-spacing: -0.045em;
        font-weight: 800;
      }
      .grad {
        background: linear-gradient(100deg, var(--accent), #ff3c00 42%, #00aebf 96%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lead {
        margin: 0 0 calc(22px * var(--dp-density-scale, 1));
        font-size: calc(18px * var(--dp-density-scale, 1));
        line-height: 1.65;
        color: var(--text-muted);
        max-width: 52ch;
      }
      .hero-ctas { display: flex; flex-wrap: wrap; gap: calc(10px * var(--dp-density-scale, 1)); margin-top: calc(18px * var(--dp-density-scale, 1)); }
      .scroll-hint {
        margin-top: calc(26px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(12px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.55);
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .scroll-hint .chev {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(27,49,57,0.12);
        background: rgba(255,255,255,0.65);
        box-shadow: var(--shadow-soft);
      }

      .hero-card {
        border-radius: var(--radius);
        background: rgba(255,255,255,0.56);
        border: 1px solid rgba(255,255,255,0.84);
        box-shadow:
          0 24px 60px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        overflow: hidden;
        position: relative;
      }
      .hero-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,0.8),
          transparent
        );
        pointer-events: none;
      }
      .hero-card-top {
        padding: calc(12px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
        background: radial-gradient(circle at top left, rgba(255,255,255,0.96), rgba(255,255,255,0.70));
        border-bottom: 1px solid rgba(255,255,255,0.82);
      }
      .dots { display: flex; gap: calc(6px * var(--dp-density-scale, 1)); }
      .dot { width: 10px; height: 10px; border-radius: 50%; }
      .dot.r { background: #ef4444; }
      .dot.y { background: #eab308; }
      .dot.g { background: #22c55e; }
      .hero-card-title {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hero-card-body { padding: calc(16px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)); }
      .mini {
        display: grid;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .mini-row {
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: calc(10px * var(--dp-density-scale, 1));
        align-items: start;
      }
      .pill {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(235,22,0,0.10);
        border: 1px solid rgba(235,22,0,0.18);
      }
      .mini-row p {
        margin: 0;
        font-size: calc(13px * var(--dp-density-scale, 1));
        line-height: 1.55;
        color: rgba(27,49,57,0.72);
      }
      .mini-row strong { color: var(--text); }

      /* Scroll animation section */
      .scrollSection { padding-top: calc(84px * var(--dp-density-scale, 1)); padding-bottom: calc(84px * var(--dp-density-scale, 1)); }
      .scrollShell {
        position: relative;
        height: 360vh; /* tweak to pace animation */
        min-height: 2400px;
      }
      .sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: grid;
        align-items: center;
      }
      .stage {
        width: min(1240px, 100%);
        margin: 0 auto;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: 30px;
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 28px 80px rgba(12,18,22,0.16),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        display: grid;
        grid-template-columns: 1.4fr 0.6fr;
        gap: calc(16px * var(--dp-density-scale, 1));
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .stage::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
        pointer-events: none;
      }
      .frameWrap {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background:
          url('./frames/frame_0001.jpg') center / cover no-repeat,
          rgba(255,255,255,0.85);
        border: 1px solid rgba(27,49,57,0.10);
      }
      #seq {
        width: 100%;
        height: min(74vh, 720px);
        display: block;
      }
      .annoRail { position: relative; padding: calc(10px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1)); }
      .anno {
        border-radius: 18px;
        padding: calc(14px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(27,49,57,0.10);
        box-shadow: 0 12px 32px rgba(12,18,22,0.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 280ms ease, transform 280ms ease;
      }
      .anno.visible { opacity: 1; transform: translateY(0); }
      .anno + .anno { margin-top: calc(12px * var(--dp-density-scale, 1)); }
      .anno .k {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.56);
      }
      .anno h3 {
        margin: calc(8px * var(--dp-density-scale, 1)) 0 calc(6px * var(--dp-density-scale, 1));
        font-size: calc(15px * var(--dp-density-scale, 1));
        letter-spacing: -0.02em;
      }
      .anno p {
        margin: 0;
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.72);
        line-height: 1.55;
      }
      .snapHint {
        margin-top: calc(10px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.52);
      }

      /* Specs */
      .specsGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .spec {
        padding: calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.50);
        border: 1px solid rgba(255,255,255,0.86);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
      }
      .spec .num {
        font-size: calc(34px * var(--dp-density-scale, 1));
        font-weight: 820;
        letter-spacing: -0.03em;
        margin: 0;
        line-height: 1.05;
      }
      .spec .label {
        margin-top: calc(8px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.58);
      }

      /* Features */
      .sectionHead {
        text-align: center;
        margin-bottom: calc(40px * var(--dp-density-scale, 1));
      }
      .sectionHead .tag {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(8px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        border-radius: 999px;
        background: rgba(235,22,0,0.08);
        border: 1px solid rgba(235,22,0,0.16);
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(235,22,0,0.92);
      }
      .sectionHead h2 {
        margin: calc(14px * var(--dp-density-scale, 1)) 0 calc(10px * var(--dp-density-scale, 1));
        font-size: clamp(28px, 3.6vw, 44px);
        letter-spacing: -0.04em;
        line-height: 1.12;
      }
      .sectionHead p {
        margin: 0 auto;
        max-width: 68ch;
        color: var(--text-muted);
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1.7;
      }

      .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .card {
        padding: calc(22px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease, border-color 240ms ease;
        position: relative;
        overflow: hidden;
      }
      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 72px rgba(12,18,22,0.18);
        border-color: rgba(255,255,255,0.95);
        background: rgba(255,255,255,0.96);
      }
      .icon {
        width: 46px; height: 46px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(235,22,0,0.08);
        border: 1px solid rgba(235,22,0,0.16);
        margin-bottom: calc(14px * var(--dp-density-scale, 1));
      }
      .card h3 { margin: 0 0 calc(8px * var(--dp-density-scale, 1)); letter-spacing: -0.02em; font-size: calc(16px * var(--dp-density-scale, 1)); }
      .card p { margin: 0; color: var(--text-muted); font-size: calc(14px * var(--dp-density-scale, 1)); line-height: 1.65; }

      /* How it works */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .step {
        text-align: center;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.50);
        border: 1px solid rgba(255,255,255,0.86);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transform-origin: center bottom;
        transform: translateY(18px) scale(0.96) rotateX(18deg);
        opacity: 0;
        transition:
          opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
          transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 620ms ease;
      }
      .step.step-visible {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        box-shadow:
          0 26px 72px rgba(12,18,22,0.20),
          0 0 0 0.5px rgba(255,255,255,0.96);
      }
      .step:nth-child(2).step-visible {
        transition-delay: 90ms;
      }
      .step:nth-child(3).step-visible {
        transition-delay: 170ms;
      }
      .step .n {
        width: 56px; height: 56px;
        margin: 0 auto calc(14px * var(--dp-density-scale, 1));
        border-radius: 18px;
        display: grid;
        place-items: center;
        background: rgba(27,49,57,0.05);
        border: 1px solid rgba(27,49,57,0.10);
        font-family: var(--mono);
        font-size: calc(12px * var(--dp-density-scale, 1));
        letter-spacing: 0.10em;
        color: rgba(27,49,57,0.72);
      }
      .step h3 { margin: 0 0 calc(8px * var(--dp-density-scale, 1)); font-size: calc(17px * var(--dp-density-scale, 1)); letter-spacing: -0.02em; }
      .step p { margin: 0; color: var(--text-muted); font-size: calc(14px * var(--dp-density-scale, 1)); line-height: 1.65; }

      /* Testimonials */
      .tGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14px * var(--dp-density-scale, 1)); }
      .tCard {
        padding: calc(22px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
      }
      .tCard q { display: block; margin: 0 0 calc(16px * var(--dp-density-scale, 1)); color: var(--text-muted); font-style: italic; line-height: 1.65; }
      .who { display: flex; align-items: center; gap: calc(10px * var(--dp-density-scale, 1)); }
      .avatar {
        width: 38px; height: 38px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 800;
        letter-spacing: -0.02em;
        background: linear-gradient(135deg, var(--accent), #00aebf);
      }
      .who .name { font-weight: 800; letter-spacing: -0.02em; }
      .who .role { font-size: calc(12.5px * var(--dp-density-scale, 1)); color: rgba(27,49,57,0.60); }

      /* Rocket.new-like testimonial background */
      .testimonialsBg {
        padding-top: calc(160px * var(--dp-density-scale, 1));
        padding-bottom: calc(130px * var(--dp-density-scale, 1));
        background: url("./assets/trusted-bg.jpeg") center/cover no-repeat;
        position: relative;
        color: #ffffff;
      }
      .testimonialsBg::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(900px 520px at 15% 25%, rgba(0,173,191,0.34) 0%, transparent 60%),
          linear-gradient(180deg, rgba(7,16,45,0.86) 0%, rgba(7,16,45,0.72) 40%, rgba(7,16,45,0.82) 100%);
        pointer-events: none;
      }
      .testimonialsOverlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

      .sectionHeadOnDark .tag {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.18);
        color: rgba(255,255,255,0.88);
      }
      .sectionHeadOnDark h2 { color: #ffffff; text-shadow: 0 18px 46px rgba(0,0,0,0.35); }
      .sectionHeadOnDark p { color: rgba(255,255,255,0.80); }

      /* Horizontal glass carousel */
      .tCarousel {
        margin-top: calc(26px * var(--dp-density-scale, 1));
        display: flex;
        flex-direction: column;
        gap: calc(16px * var(--dp-density-scale, 1));
      }
      .carouselControls{
        display:flex;
        justify-content: center;
      }
      .chipBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        border-radius: 999px;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.88);
        border: 1px solid rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        cursor: pointer;
      }
      .chipBtn[aria-pressed="true"]{
        background: rgba(255,255,255,0.22);
        border-color: rgba(255,255,255,0.28);
      }
      .tCarouselRow {
        overflow-x: hidden;
        position: relative;
      }
      .tCarouselTrack {
        display: flex;
        gap: calc(14px * var(--dp-density-scale, 1));
        align-items: stretch;
        padding: calc(10px * var(--dp-density-scale, 1)) calc(4px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        min-height: 200px;
      }
      .tCardOnDark {
        min-width: min(360px, calc(100vw - 80px));
        max-width: 400px;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1));
        border-radius: 24px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.22);
        box-shadow:
          0 26px 72px rgba(0,0,0,0.28),
          0 0 0 0.5px rgba(255,255,255,0.08);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        overflow: hidden;
      }
      .tCardOnDark q {
        margin-bottom: calc(18px * var(--dp-density-scale, 1));
        color: rgba(255,255,255,0.82);
      }
      .tCardOnDark .who .role { color: rgba(255,255,255,0.68); }
      .carouselHint {
        margin-top: calc(10px * var(--dp-density-scale, 1));
        text-align: center;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.65);
      }

      /* Make header readable on top of busy background */
      .testimonialsBg .sectionHeadOnDark {
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 22px;
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 26px 80px rgba(0,0,0,0.25);
      }

      .testimonialsBg .sectionHeadOnDark .tag {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.24);
        color: rgba(255, 255, 255, 0.92);
      }
      .testimonialsBg .sectionHeadOnDark h2 {
        color: rgba(255, 255, 255, 0.98);
        text-shadow: 0 20px 64px rgba(0,0,0,0.50);
      }
      .testimonialsBg .sectionHeadOnDark p {
        color: rgba(255, 255, 255, 0.90);
        text-shadow: 0 20px 64px rgba(0,0,0,0.42);
      }

      @media (max-width: 980px) {
        .testimonialsBg { padding-top: calc(140px * var(--dp-density-scale, 1)); padding-bottom: calc(110px * var(--dp-density-scale, 1)); }
        .tCardOnDark { min-width: min(340px, calc(100vw - 56px)); }
      }
      @media (max-width: 520px) {
        .testimonialsBg { padding-top: calc(116px * var(--dp-density-scale, 1)); padding-bottom: calc(88px * var(--dp-density-scale, 1)); }
        .tCardOnDark { min-width: calc(100vw - 42px); }
      }

      /* FAQ */
      #faq .wrap { position: relative; z-index: 2; }
      #faq {
        position: relative;
        z-index: 2;
      }
      #faq .sectionHead { margin-bottom: calc(24px * var(--dp-density-scale, 1)); }
      .faqGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .faqItem {
        border-radius: var(--radius);
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.10),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        overflow: hidden;
      }
      .faqItem summary {
        cursor: pointer;
        list-style: none;
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        display: flex;
        align-items: center;
        gap: calc(12px * var(--dp-density-scale, 1));
        font-weight: 820;
        letter-spacing: -0.02em;
        color: var(--text);
        user-select: none;
      }
      .faqItem summary::-webkit-details-marker { display: none; }
      .faqItem summary::after {
        content: "+";
        margin-left: auto;
        width: 28px;
        height: 28px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(235,22,0,0.06);
        border: 1px solid rgba(235,22,0,0.14);
        color: rgba(235,22,0,0.85);
        transition: transform 180ms ease, background 180ms ease;
      }
      .faqItem[open] summary::after {
        content: "–";
        transform: rotate(0deg) scale(1.02);
        background: rgba(235,22,0,0.10);
      }
      .faqBody {
        padding: 0 calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.75;
        font-size: calc(14px * var(--dp-density-scale, 1));
      }
      .faqItem[open] .faqBody { animation: faqIn 200ms ease both; }
      @keyframes faqIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 980px) {
        .faqGrid { grid-template-columns: 1fr; }
      }

      /* CTA */
      .ctaBox {
        border-radius: 30px;
        padding: calc(58px * var(--dp-density-scale, 1)) calc(24px * var(--dp-density-scale, 1));
        background: linear-gradient(135deg, rgba(235,22,0,0.06), rgba(0,173,191,0.04)), rgba(255,255,255,0.54);
        border: 1px solid rgba(255,255,255,0.92);
        box-shadow:
          0 28px 80px rgba(12,18,22,0.18),
          0 0 0 0.5px rgba(255,255,255,0.94);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .ctaBox h2 { margin: 0 0 calc(10px * var(--dp-density-scale, 1)); font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.04em; }
      .ctaBox p { margin: 0 auto calc(20px * var(--dp-density-scale, 1)); max-width: 70ch; color: var(--text-muted); line-height: 1.7; }
      .ctaBox .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(10px * var(--dp-density-scale, 1)); }

      /* Rocket.new-style CTA */
      .rocketCta {
        padding: calc(92px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1)) calc(78px * var(--dp-density-scale, 1));
        background: url("./assets/cta-rocket.png") center bottom / cover no-repeat;
        position: relative;
        color: #ffffff;
      }
      .rocketCta::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(7, 16, 45, 0.78) 0%, rgba(7, 16, 45, 0.55) 40%, rgba(7, 16, 45, 0.72) 100%);
        pointer-events: none;
      }
      .rocketCta .wrap {
        position: relative;
        z-index: 1;
      }
      .rocketTitle {
        text-align: center;
        font-size: clamp(34px, 5vw, 56px);
        letter-spacing: -0.05em;
        margin: 0 0 calc(10px * var(--dp-density-scale, 1));
        font-weight: 850;
        text-shadow: 0 16px 46px rgba(0,0,0,0.35);
      }
      .rocketSub {
        text-align: center;
        margin: 0 auto calc(28px * var(--dp-density-scale, 1));
        max-width: 64ch;
        color: rgba(255,255,255,0.78);
        font-size: calc(15px * var(--dp-density-scale, 1));
        line-height: 1.65;
      }
      .rocketPromptCard {
        max-width: 860px;
        margin: 0 auto;
        border-radius: 18px;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 26px 70px rgba(0,0,0,0.35);
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        border: 1px solid rgba(255,255,255,0.55);
      }
      .rocketPromptTop {
        height: 44px;
        display: flex;
        align-items: center;
        border-radius: 14px;
        padding: 0 calc(16px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.88);
        border: 1px solid rgba(27,49,57,0.06);
      }
      .rocketPlaceholder {
        color: rgba(27,49,57,0.46);
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 600;
      }
      .rocketPromptBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: calc(14px * var(--dp-density-scale, 1));
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .rocketChip {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: 14px;
        background: rgba(27,49,57,0.02);
        border: 1px solid rgba(27,49,57,0.06);
      }
      .rocketPlus {
        width: 20px;
        height: 20px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-weight: 900;
        color: rgba(27,49,57,0.55);
        background: rgba(27,49,57,0.03);
        line-height: 1;
      }
      .rocketChipText {
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 700;
        color: rgba(27,49,57,0.66);
      }
      .rocketSend {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        border: 1px solid rgba(27,49,57,0.08);
        background: rgba(255,255,255,0.85);
        color: rgba(27,49,57,0.60);
        text-decoration: none;
        box-shadow: 0 14px 36px rgba(0,0,0,0.10);
        cursor: pointer;
        transition: transform 140ms ease, background 140ms ease;
      }
      .rocketSend:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,1);
      }

      @media (max-width: 520px) {
        .rocketCta { padding: calc(76px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(64px * var(--dp-density-scale, 1)); }
        .rocketPromptCard { padding: calc(14px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)); border-radius: 16px; }
        .rocketPromptTop { padding: 0 calc(12px * var(--dp-density-scale, 1)); }
        .rocketPromptBottom { padding-top: calc(12px * var(--dp-density-scale, 1)); }
      }

      .footer-v7__sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: calc(-1px * var(--dp-density-scale, 1));
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Footer (scroll-stop / DM Sans language — not DESIGN.md) */
      .footer-v7 {
        position: relative;
        z-index: 2;
        padding: calc(52px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1)) calc(88px * var(--dp-density-scale, 1));
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        background: var(--glass-strong);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 -12px 36px rgba(12, 18, 22, 0.06);
      }
      .footer-v7__inner {
        max-width: var(--max-w);
        margin: 0 auto;
      }
      .footer-v7__intro {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: calc(24px * var(--dp-density-scale, 1));
        padding-bottom: calc(36px * var(--dp-density-scale, 1));
        margin-bottom: calc(36px * var(--dp-density-scale, 1));
        border-bottom: 1px solid var(--border);
      }
      .footer-v7__brand-block {
        flex: 1 1 260px;
        min-width: 0;
      }
      .footer-v7__logo-link img {
        display: block;
        width: min(132px, 38vw);
        height: auto;
      }
      .footer-v7__tagline {
        margin: calc(14px * var(--dp-density-scale, 1)) 0 0;
        font-family: var(--font);
        font-size: calc(15px * var(--dp-density-scale, 1));
        line-height: 1.55;
        color: var(--text-muted);
        max-width: 38rem;
      }
      .footer-v7__cta {
        display: flex;
        flex-wrap: wrap;
        gap: calc(10px * var(--dp-density-scale, 1));
        align-items: center;
      }
      .footer-v7__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: calc(28px * var(--dp-density-scale, 1)) calc(36px * var(--dp-density-scale, 1));
      }
      .footer-v7__col-title {
        margin: 0 0 calc(14px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text);
      }
      .footer-v7__links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .footer-v7__links a {
        font-family: var(--font);
        font-size: calc(15px * var(--dp-density-scale, 1));
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: color 160ms ease, background 160ms ease;
      }
      .footer-v7__links a:hover {
        color: var(--accent);
      }
      .footer-v7__links a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      .footer-v7__bottom {
        margin-top: calc(40px * var(--dp-density-scale, 1));
        padding-top: calc(20px * var(--dp-density-scale, 1));
        border-top: 1px solid var(--border);
      }
      .footer-v7__copyright {
        font-family: var(--font);
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: rgba(27, 49, 57, 0.55);
      }
      .footer-v7__signoff {
        margin-top: calc(28px * var(--dp-density-scale, 1));
        display: flex;
        justify-content: center;
        padding-bottom: calc(8px * var(--dp-density-scale, 1));
      }
      .footer-v7__signoff-mark {
        display: inline-block;
        font-family: var(--font);
        font-weight: 800;
        font-size: clamp(34px, 9vw, 62px);
        letter-spacing: -0.05em;
        line-height: 1;
        color: var(--text-faint);
        opacity: 0.42;
        padding: 16px clamp(24px, 6vw, 44px);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background:
          radial-gradient(120% 140% at 12% 18%, rgba(235, 22, 0, 0.11), transparent 55%),
          radial-gradient(100% 120% at 92% 72%, rgba(0, 173, 191, 0.09), transparent 58%);
      }
      @media (max-width: 720px) {
        .footer-v7 {
          padding: calc(44px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(104px * var(--dp-density-scale, 1));
          padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        }
        .footer-v7__intro {
          flex-direction: column;
          align-items: stretch;
        }
        .footer-v7__cta .btn {
          flex: 1 1 auto;
          justify-content: center;
        }
        .footer-v7__grid {
          grid-template-columns: 1fr;
          gap: calc(24px * var(--dp-density-scale, 1));
        }
      }

      /* Trusted-by: inline SVG marks (no external hotlinks) */
      .trust-strip .trust-card {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
      }
      .trust-marks {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 3vw, 22px);
        flex-wrap: wrap;
      }
      .trust-mark {
        display: inline-flex;
        align-items: center;
        line-height: 0;
      }
      .trust-img {
        height: 24px;
        width: auto;
        max-width: min(120px, 28vw);
        object-fit: contain;
        flex-shrink: 0;
        display: block;
      }
      .trust-img--apple {
        max-width: 22px;
      }

      /* Responsive */
      @media (max-width: 980px) {
        .hero-grid { grid-template-columns: 1fr; }
        .stage { grid-template-columns: 1fr; }
        #seq { height: min(62vh, 640px); }
        .grid3 { grid-template-columns: 1fr; }
        .steps { grid-template-columns: 1fr; }
        .tGrid { grid-template-columns: 1fr; }
        .specsGrid { grid-template-columns: repeat(2, 1fr); }
        .nav-links { display: none; }
        .nav-menu { display: inline-grid; }
      }
      @media (max-width: 520px) {
        section { padding: calc(84px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)); }
        .hero { padding-top: calc(122px * var(--dp-density-scale, 1)); }
        .nav { padding: 0 calc(14px * var(--dp-density-scale, 1)); }
        .nav-inner { padding: calc(10px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)); }
        .brand img { width: auto; height: 24px; padding: 0; background: transparent; }
        .specsGrid { grid-template-columns: 1fr; }
        .scrollShell { height: 270vh; min-height: 2000px; }
        .annoRail { padding: 0; }
        .anno { position: absolute; left: 14px; right: 14px; bottom: 16px; margin: 0 !important; }
        .anno p { display: none; }
        .anno .k { font-size: calc(10px * var(--dp-density-scale, 1)); }
        .anno h3 { margin: calc(6px * var(--dp-density-scale, 1)) 0 0; font-size: calc(14px * var(--dp-density-scale, 1)); }
        .snapHint { margin-top: calc(8px * var(--dp-density-scale, 1)); }
      }
      @media (prefers-reduced-motion: reduce) {
        * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
      }