/* Public landing page styles.
 *
 * Extracted from home.html; served static so it caches
 * instead of re-shipping inline on every render.
 */

:root {
      color-scheme: dark;
      --bg: #07090f;
      --bg-2: #0b0e17;
      --bg-3: #10141f;
      --ink: #f3f5f9;
      --muted: #9aa6b8;
      --subtle: #67718a;
      --line: rgba(148, 163, 184, .16);
      --line-strong: rgba(148, 163, 184, .3);
      --brand: #f97316;
      --brand-hot: #fb923c;
      --brand-deep: #c2410c;
      --ember: #ef4444;
      --success: #34d399;
      --glass: rgba(255, 255, 255, .035);
      --glass-2: rgba(255, 255, 255, .06);
      --radius: 14px;
      --shadow: 0 30px 90px rgba(0, 0, 0, .5);
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font);
      line-height: 1.5;
      overflow-x: hidden;
    }

    ::selection { background: rgba(249, 115, 22, .35); }

    h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
    p { margin: 0; }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; }
    button { font: inherit; cursor: pointer; }

    .wrap {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-weight: 750;
      font-size: 15px;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space: nowrap;
    }
    .btn-fire {
      background: linear-gradient(135deg, var(--brand-hot), var(--brand) 55%, var(--ember));
      color: #fff8f1;
      box-shadow: 0 12px 36px rgba(249, 115, 22, .32);
    }
    .btn-fire:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(249, 115, 22, .44); }
    .btn-ghost {
      background: var(--glass);
      border-color: var(--line-strong);
      color: var(--ink);
      backdrop-filter: blur(8px);
    }
    .btn-ghost:hover { transform: translateY(-2px); background: var(--glass-2); border-color: rgba(249, 115, 22, .5); }
    .btn:focus-visible { outline: 3px solid rgba(249, 115, 22, .45); outline-offset: 3px; }

    /* ---------- nav ---------- */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
      border-bottom: 1px solid transparent;
    }
    .nav.scrolled {
      background: rgba(7, 9, 15, .78);
      border-bottom-color: var(--line);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 72px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 850;
      font-size: 17px;
      letter-spacing: -.01em;
    }
    .brand-flame {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(150deg, #1e2433, #0d111c);
      border: 1px solid var(--line-strong);
      box-shadow: inset 0 0 18px rgba(249, 115, 22, .25), 0 8px 24px rgba(0, 0, 0, .4);
    }
    .brand-flame svg { width: 20px; height: 20px; }
    .nav-links { display: flex; align-items: center; gap: 26px; }
    .nav-links a {
      color: var(--muted);
      font-size: 14.5px;
      font-weight: 650;
      transition: color .2s ease;
    }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta { display: flex; align-items: center; gap: 10px; }
    .nav-cta .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      padding: 168px 0 96px;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-glow {
      position: absolute;
      z-index: -2;
      width: 880px;
      height: 880px;
      top: -340px;
      left: 50%;
      translate: -50% 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249, 115, 22, .22), rgba(239, 68, 68, .08) 45%, transparent 70%);
      filter: blur(10px);
      animation: pulse 7s ease-in-out infinite;
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: -3;
      background-image:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(ellipse 80% 65% at 50% 18%, #000 30%, transparent 75%);
    }
    @keyframes pulse {
      0%, 100% { opacity: .85; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.06); }
    }

    .ember {
      position: absolute;
      bottom: -12px;
      z-index: -1;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brand-hot);
      opacity: 0;
      filter: blur(.5px);
      animation: ember-rise linear infinite;
    }
    @keyframes ember-rise {
      0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
      8% { opacity: .85; }
      60% { opacity: .5; }
      100% { transform: translateY(-92vh) translateX(var(--drift, 40px)) scale(.2); opacity: 0; }
    }

    .hero-inner { text-align: center; }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(249, 115, 22, .35);
      background: rgba(249, 115, 22, .08);
      color: var(--brand-hot);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .hero-eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(52, 211, 153, .15);
      animation: pulse 2.4s ease-in-out infinite;
    }

    .hero h1 {
      margin: 26px auto 0;
      max-width: 16ch;
      font-size: clamp(42px, 7vw, 86px);
      font-weight: 850;
      line-height: 1.02;
    }
    .hero h1 .line { display: block; overflow: hidden; }
    .hero h1 .line > span {
      display: inline-block;
      transform: translateY(110%);
      animation: line-up .9s cubic-bezier(.22, 1, .36, 1) forwards;
    }
    .hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
    .hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
    @keyframes line-up { to { transform: translateY(0); } }

    .fire-text {
      background: linear-gradient(110deg, var(--brand-hot) 10%, var(--brand) 40%, var(--ember) 70%, var(--brand-hot) 100%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmer 5s linear infinite;
    }
    @keyframes shimmer { to { background-position: -220% center; } }

    .hero-sub {
      max-width: 62ch;
      margin: 24px auto 0;
      color: var(--muted);
      font-size: clamp(16px, 2vw, 19px);
      opacity: 0;
      animation: fade-up .8s .4s cubic-bezier(.22, 1, .36, 1) forwards;
    }
    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      margin-top: 36px;
      opacity: 0;
      animation: fade-up .8s .55s cubic-bezier(.22, 1, .36, 1) forwards;
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* hero preview board */
    .hero-board {
      position: relative;
      margin: 72px auto 0;
      max-width: 980px;
      border: 1px solid var(--line-strong);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(20, 25, 38, .9), rgba(11, 14, 23, .94));
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
      backdrop-filter: blur(12px);
      opacity: 0;
      animation: board-in 1s .7s cubic-bezier(.22, 1, .36, 1) forwards;
      will-change: transform;
    }
    @keyframes board-in {
      from { opacity: 0; transform: translateY(48px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .board-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
    }
    .board-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
    .board-title svg { width: 17px; height: 17px; color: var(--brand); }
    .board-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--success);
      font-size: 12.5px;
      font-weight: 750;
    }
    .board-live::before {
      content: "";
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--success);
      animation: pulse 2s ease-in-out infinite;
    }
    .board-body {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
      padding: 18px 20px 22px;
      text-align: left;
    }
    .wo-stack { display: grid; gap: 10px; align-content: start; }
    .wo-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--glass);
      transition: border-color .25s ease, transform .25s ease;
    }
    .wo-card:hover { border-color: rgba(249, 115, 22, .45); transform: translateX(4px); }
    .wo-card strong { display: block; font-size: 13.5px; }
    .wo-card small { display: block; margin-top: 3px; color: var(--subtle); font-size: 12px; }
    .pill {
      flex: 0 0 auto;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .03em;
    }
    .pill.hot { background: rgba(239, 68, 68, .14); color: #fda4af; border: 1px solid rgba(239, 68, 68, .35); }
    .pill.go { background: rgba(52, 211, 153, .12); color: var(--success); border: 1px solid rgba(52, 211, 153, .3); }
    .pill.due { background: rgba(249, 115, 22, .13); color: var(--brand-hot); border: 1px solid rgba(249, 115, 22, .35); }

    .board-side { display: grid; gap: 12px; align-content: start; }
    .side-metric {
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--glass);
    }
    .side-metric strong { display: block; font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
    .side-metric span { display: block; margin-top: 3px; color: var(--subtle); font-size: 12.5px; }
    .side-metric .bar {
      margin-top: 10px;
      height: 6px;
      border-radius: 99px;
      background: rgba(148, 163, 184, .15);
      overflow: hidden;
    }
    .side-metric .bar i {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--brand-hot), var(--ember));
      transform: scaleX(0);
      transform-origin: left;
      animation: bar-fill 1.4s 1.3s cubic-bezier(.22, 1, .36, 1) forwards;
    }
    @keyframes bar-fill { to { transform: scaleX(var(--w, .7)); } }

    /* ---------- marquee ---------- */
    .marquee-band {
      margin-top: 84px;
      padding: 22px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(249, 115, 22, .04), transparent);
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: marquee 36s linear infinite;
    }
    .marquee-band:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee { to { transform: translateX(-50%); } }
    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0 26px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }
    .marquee-item .spark { color: var(--brand); font-size: 17px; }

    /* ---------- sections / reveals ---------- */
    section { position: relative; }
    .section-pad { padding: 110px 0; }

    .reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
    .reveal.from-left { transform: translateX(-56px); }
    .reveal.from-right { transform: translateX(56px); }
    .reveal.in { opacity: 1; transform: none; }
    .stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
    .stagger.in > * { opacity: 1; transform: none; }
    .stagger.in > *:nth-child(1) { transition-delay: 0s; }
    .stagger.in > *:nth-child(2) { transition-delay: .1s; }
    .stagger.in > *:nth-child(3) { transition-delay: .2s; }
    .stagger.in > *:nth-child(4) { transition-delay: .3s; }
    .stagger.in > *:nth-child(5) { transition-delay: .4s; }
    .stagger.in > *:nth-child(6) { transition-delay: .5s; }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--brand-hot);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .kicker::before {
      content: "";
      width: 22px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--brand-hot), var(--ember));
    }
    .section-title {
      margin-top: 16px;
      max-width: 22ch;
      font-size: clamp(30px, 4.4vw, 48px);
      font-weight: 850;
      line-height: 1.08;
    }
    .section-sub { margin-top: 16px; max-width: 58ch; color: var(--muted); font-size: 16.5px; }

    /* ---------- stats ---------- */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 56px;
    }
    .stat-card {
      padding: 26px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(165deg, var(--glass-2), transparent 70%);
      transition: border-color .25s ease, transform .25s ease;
    }
    .stat-card:hover { border-color: rgba(249, 115, 22, .4); transform: translateY(-4px); }
    .stat-value {
      font-size: clamp(34px, 4vw, 48px);
      font-weight: 850;
      letter-spacing: -.03em;
      background: linear-gradient(120deg, #fff, #fdba74);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .stat-label { margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }

    /* ---------- feature rows ---------- */
    .feature-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(32px, 6vw, 84px);
      padding: 64px 0;
      /* Contain the pre-reveal translateX on .from-left/.from-right children so
         they can't push the page wider than the viewport (blank space on the
         right on mobile). clip doesn't affect vertical scroll or the animation. */
      overflow-x: clip;
    }
    .feature-row + .feature-row { border-top: 1px solid var(--line); }
    .feature-copy h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 820; line-height: 1.12; }
    .feature-copy p { margin-top: 14px; color: var(--muted); font-size: 16px; }
    .feature-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
    .feature-points li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      color: #cbd5e1;
      font-size: 14.5px;
      font-weight: 600;
    }
    .feature-points li::before {
      content: "";
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      background: var(--brand);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .feature-visual {
      position: relative;
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      padding: 22px;
      background: linear-gradient(170deg, rgba(22, 27, 41, .85), rgba(10, 13, 21, .92));
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .feature-visual::before {
      content: "";
      position: absolute;
      inset: -40% auto auto -20%;
      width: 70%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249, 115, 22, .14), transparent 70%);
      pointer-events: none;
    }
    .visual-rows { display: grid; gap: 10px; position: relative; }
    .visual-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255, 255, 255, .03);
      font-size: 13px;
      font-weight: 650;
    }
    .visual-row .ico {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(249, 115, 22, .12);
      border: 1px solid rgba(249, 115, 22, .3);
      color: var(--brand-hot);
      flex: 0 0 auto;
    }
    .visual-row .ico svg { width: 16px; height: 16px; }
    .visual-row small { display: block; color: var(--subtle); font-weight: 550; }
    .visual-row .end { margin-left: auto; }

    /* ---------- module rail ---------- */
    .rail-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
    .rail-nav { display: flex; gap: 10px; }
    .rail-btn {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      background: var(--glass);
      color: var(--ink);
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .rail-btn:hover { border-color: var(--brand); background: rgba(249, 115, 22, .12); transform: scale(1.06); }
    .rail-btn svg { width: 18px; height: 18px; }

    .rail {
      display: flex;
      gap: 16px;
      margin-top: 44px;
      padding: 6px 6px 26px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    }
    .rail::-webkit-scrollbar { display: none; }
    .rail-card {
      flex: 0 0 min(300px, 78vw);
      scroll-snap-align: start;
      padding: 26px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(165deg, var(--glass-2), transparent 75%);
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    .rail-card:hover {
      border-color: rgba(249, 115, 22, .5);
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    }
    .rail-ico {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(249, 115, 22, .35);
      background: rgba(249, 115, 22, .1);
      color: var(--brand-hot);
    }
    .rail-ico svg { width: 22px; height: 22px; }
    .rail-card h3 { margin-top: 18px; font-size: 18px; font-weight: 800; }
    .rail-card p { margin-top: 9px; color: var(--muted); font-size: 14px; }

    /* ---------- workflow timeline ---------- */
    .flow {
      position: relative;
      margin-top: 64px;
      display: grid;
      gap: 0;
    }
    .flow::before {
      content: "";
      position: absolute;
      left: 27px;
      top: 14px;
      bottom: 14px;
      width: 2px;
      background: rgba(148, 163, 184, .18);
    }
    .flow-progress {
      position: absolute;
      left: 27px;
      top: 14px;
      width: 2px;
      height: 0;
      background: linear-gradient(180deg, var(--brand-hot), var(--ember));
      box-shadow: 0 0 14px rgba(249, 115, 22, .6);
    }
    .flow-step {
      position: relative;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 22px;
      padding: 26px 0;
    }
    .flow-num {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      background: var(--bg-3);
      font-weight: 850;
      font-size: 17px;
      color: var(--subtle);
      transition: border-color .4s ease, color .4s ease, box-shadow .4s ease, background .4s ease;
    }
    .flow-step.in .flow-num {
      border-color: var(--brand);
      color: var(--brand-hot);
      background: rgba(249, 115, 22, .1);
      box-shadow: 0 0 0 6px rgba(249, 115, 22, .08), 0 0 24px rgba(249, 115, 22, .25);
    }
    .flow-body h3 { font-size: 20px; font-weight: 800; }
    .flow-body p { margin-top: 7px; max-width: 60ch; color: var(--muted); font-size: 15px; }

    /* ---------- CTA ---------- */
    .cta-panel {
      position: relative;
      padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 80px);
      border: 1px solid rgba(249, 115, 22, .35);
      border-radius: 22px;
      background:
        radial-gradient(ellipse 90% 130% at 50% 130%, rgba(249, 115, 22, .25), transparent 60%),
        linear-gradient(170deg, rgba(23, 28, 43, .9), rgba(10, 13, 21, .95));
      box-shadow: var(--shadow);
      text-align: center;
      overflow: hidden;
    }
    .cta-panel h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(30px, 4.6vw, 52px); font-weight: 850; line-height: 1.06; }
    .cta-panel p { max-width: 52ch; margin: 18px auto 0; color: var(--muted); font-size: 16.5px; }
    .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

    /* ---------- footer ---------- */
    footer {
      margin-top: 110px;
      border-top: 1px solid var(--line);
      padding: 38px 0 46px;
    }
    .foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: var(--subtle);
      font-size: 14px;
    }
    .foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 650; }
    .foot-links a { color: var(--muted); transition: color .2s ease; }
    .foot-links a:hover { color: var(--brand-hot); }

    /* ---------- responsive ---------- */
    @media (max-width: 960px) {
      .nav-links { display: none; }
      .hero { padding-top: 132px; }
      .board-body { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-row { grid-template-columns: 1fr; padding: 48px 0; }
      .feature-row.flip .feature-visual { order: -1; }
    }
    @media (max-width: 560px) {
      .wrap { width: calc(100% - 32px); }
      .stats-grid { grid-template-columns: 1fr; }
      .nav-cta { gap: 7px; }
      .nav-cta .btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
      .hero-cta form, .cta-actions form { width: 100%; }
      .hero-cta .btn { width: 100%; }
      .cta-actions .btn { width: 100%; }
      .flow::before, .flow-progress { left: 21px; }
      .flow-num { width: 44px; height: 44px; font-size: 15px; }
      .flow-step { grid-template-columns: 44px 1fr; gap: 16px; }
    }
    @media (max-width: 420px) {
      .brand > span:last-child { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
      .hero h1 .line > span { transform: none; }
      .hero-sub, .hero-cta, .hero-board { opacity: 1; }
      .reveal, .stagger > * { opacity: 1; transform: none; }
      .side-metric .bar i { transform: scaleX(var(--w, .7)); }
    }