/* ============================================================================
   Live LUFS — livelufs.com
   Design language ported from mastering.to: near-black canvas, single cyan
   accent, Space Grotesk display + JetBrains Mono utility.
   ========================================================================== */

/* ---- Fonts (self-hosted for speed + privacy) ---- */
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2"); }

:root{
  --bg:#06070b;
  --surface:#0d0f15;
  --surface-2:#12151d;
  --cyan:#00d4ff;
  --cyan-dim:rgba(0,212,255,.28);
  --text:#e8e8f0;
  --muted:#8a8a9e;
  --dim:#555568;
  --line:#191c27;
  --line-2:#23283a;
  --sans:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap:1120px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip-link{
  position:absolute; left:12px; top:-48px; z-index:100;
  background:var(--cyan); color:#06070b; padding:10px 16px; border-radius:8px;
  font-family:var(--mono); font-size:12px; font-weight:700; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ---- Shared type helpers ---- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
}
.eyebrow.center{ display:flex; justify-content:center; }
.center{ text-align:center; }
.section-title{
  font-family:var(--sans); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(26px,3.6vw,40px); color:var(--text); margin-bottom:16px;
}
.section-title.center{ margin-inline:auto; max-width:760px; }
.section-lead{ color:var(--muted); font-size:17px; max-width:640px; }
.section-lead.center{ margin-inline:auto; }
.mono{ font-family:var(--mono); }

.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); display:inline-block; flex:none;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.45;transform:scale(1);} 50%{opacity:1;transform:scale(1.25);} }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; border-radius:10px;
  padding:15px 26px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s, color .2s, background .2s;
  white-space:nowrap;
}
.btn-sm{ padding:10px 16px; font-size:11px; border-radius:8px; }
.btn-lg{ padding:17px 30px; font-size:13px; }
.btn-store{
  color:#eef2f6;
  background:linear-gradient(150deg,#12151d 0%,#0c0e15 60%,#0a0c12 100%);
  border-color:var(--cyan-dim);
  box-shadow:0 0 0 rgba(0,212,255,0), inset 0 1px 0 rgba(255,255,255,.03);
}
.btn-store:hover{ transform:translateY(-2px); border-color:rgba(0,212,255,.55); box-shadow:0 8px 30px rgba(0,212,255,.14); color:#fff; }
.btn-store .chrome-ico{ color:var(--cyan); }
.btn-ghost{ color:var(--muted); border-color:var(--line-2); background:transparent; }
.btn-ghost:hover{ transform:translateY(-2px); color:var(--cyan); border-color:var(--cyan-dim); }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px;
}

/* ---- Top bar ---- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(6,7,11,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-logo{ width:32px; height:32px; flex:none; display:block; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:18px; color:var(--text); line-height:1.02; }
.brand-accent{ color:var(--cyan); }
.brand-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; color:var(--dim); margin-top:3px; }
.topnav{ display:flex; align-items:center; gap:20px; }
.topnav-link{ font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s; }
.topnav-link:hover{ color:var(--cyan); }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; padding:clamp(48px,7vw,92px) 0 clamp(40px,5vw,64px); }
.hero::before{
  content:""; position:absolute; top:-10%; left:-8%; width:640px; height:640px;
  background:radial-gradient(ellipse,rgba(0,212,255,.09) 0%,transparent 65%);
  pointer-events:none; z-index:0; animation:heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow{ 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.12);} }
.hero-trace{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:0; pointer-events:none; }
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.hero-copy{ animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both; }
.hero-title{
  font-family:var(--sans); font-weight:700; letter-spacing:-.025em; line-height:1.03;
  font-size:clamp(38px,5.6vw,62px); color:var(--text); margin-bottom:20px;
}
.hero-sub{ color:var(--muted); font-size:clamp(16px,1.4vw,18px); max-width:480px; margin-bottom:30px; }
.hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.hero-cta.center-cta{ justify-content:center; }
.chrome-ico{ flex:none; }
.hero-proof{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--dim);
}
.hero-proof strong{ color:var(--text); }
.stars{ color:var(--cyan); letter-spacing:2px; }
.proof-sep{ color:var(--line-2); }

.hero-shot{ position:relative; animation:fadeImg 1s cubic-bezier(.22,1,.36,1) .15s both; }
.shot-frame{
  position:relative; width:100%; max-width:360px; margin-inline:auto;
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  background:var(--surface);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(0,212,255,.08);
}
.shot-frame img{ width:100%; display:block; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }
@keyframes fadeImg{ from{opacity:0;transform:translateX(26px) scale(.97);} to{opacity:1;transform:none;} }

/* ---- Install button (ported from the extension page) ---- */
.ext-install-btn{
  display:inline-flex; align-items:center; gap:12px; padding:14px 26px;
  border:1px solid rgba(0,212,255,.28); border-radius:9px;
  background:linear-gradient(150deg,#12151d 0%,#0c0e15 60%,#0a0c12 100%);
  color:#eef2f6; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 0 22px rgba(0,212,255,.10),0 6px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  position:relative; overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease, transform .25s ease, background .35s ease;
}
.ext-install-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(0,212,255,.10) 48%,rgba(255,255,255,.14) 52%,transparent 80%);
  transform:skewX(-14deg); animation:extInstallShimmer 5.5s ease-in-out infinite; pointer-events:none;
}
.ext-install-btn:hover{
  border-color:rgba(0,212,255,.55);
  background:linear-gradient(150deg,#161a24 0%,#0d1018 60%,#0a0c12 100%);
  box-shadow:0 0 0 1px rgba(0,212,255,.12),0 0 34px rgba(0,212,255,.22),0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(-2px);
}
.ext-install-logo{ display:block; flex-shrink:0; filter:drop-shadow(0 0 5px rgba(0,212,255,.25)); }
.ext-install-label{ position:relative; z-index:1; }
.ext-install-sep{ width:1px; height:16px; background:rgba(255,255,255,.10); flex-shrink:0; }
.ext-install-free{ position:relative; z-index:1; font-size:11px; font-weight:600; letter-spacing:.1em; color:#7d8694; }
.ext-install-chev{ position:relative; z-index:1; font-size:14px; font-weight:400; color:#7d8694; margin-left:-2px; transition:transform .25s ease, color .25s ease; }
.ext-install-btn:hover .ext-install-chev{ transform:translateX(3px); color:var(--cyan); }
@keyframes extInstallShimmer{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

/* ---- Browser compatibility chips ---- */
.ext-browsers{ margin-bottom:26px; }
.ext-browsers-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#444458; margin-bottom:12px; }
.ext-browser-row{ display:flex; gap:14px; flex-wrap:wrap; }
.ext-browser-chip{ display:inline-flex; align-items:center; gap:11px; padding:13px 18px; border:1px solid #1a1d28; border-radius:10px; background:#0a0c12; transition:border-color .2s, background .2s; }
.ext-browser-chip:hover{ border-color:rgba(0,212,255,.2); background:#0d0f17; }
.ext-browser-chip img{ display:block; flex-shrink:0; }
.ext-browser-chip span{ font-family:var(--mono); font-size:13px; font-weight:500; color:#b0b0c0; }

/* ---- Live widget (ported from the extension page's LivePopupDemo) ---- */
.lw-demo{ display:flex; flex-direction:column; align-items:center; animation:fadeImg 1s cubic-bezier(.22,1,.36,1) .12s both; }
.lw{ width:372px; max-width:100%; border-radius:10px; overflow:hidden; font-family:var(--mono);
     box-shadow:0 24px 60px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06); }
.lw-caption{ text-align:center; margin-top:14px; font-family:var(--mono); font-size:10.5px; color:#444458; letter-spacing:.05em; }
.lw-titlebar{ display:flex; align-items:center; height:38px; padding:0 12px; background:#fff; font-family:"Segoe UI",system-ui,sans-serif; border-bottom:1px solid #ececec; }
.lw-tb-logo{ width:17px; height:17px; border-radius:4px; margin-right:9px; }
.lw-tb-title{ font-size:13px; color:#1f2329; }
.lw-tb-icons{ margin-left:auto; display:flex; align-items:center; gap:14px; color:#5b6470; }
.lw-tb-x{ font-size:16px; color:#6b7280; line-height:1; }
.lw-body{ background:#080b10; padding:14px; display:flex; flex-direction:column; gap:11px; }
.lw-card{ border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.012); padding:13px 14px; }
.lw-main{ padding:15px 16px; }
.lw-eyebrow{ font-size:9.5px; font-weight:600; letter-spacing:1.6px; color:#54616f; margin-bottom:7px; }
.lw-head{ display:flex; align-items:center; margin-bottom:16px; }
.lw-head-logo{ width:22px; height:22px; border-radius:50%; }
.lw-head-name{ margin-left:9px; font-size:16px; font-weight:700; letter-spacing:-.3px; color:#e9eef3; }
.lw-accent{ color:var(--cyan); }
.lw-live{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.lw-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); animation:extPulse 1.6s ease-in-out infinite; }
.lw-live-txt{ font-size:9.5px; font-weight:600; letter-spacing:2.2px; color:#3c4a58; }
@keyframes extPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.3; transform:scale(.82); } }
.lw-main .lw-eyebrow{ letter-spacing:1.8px; margin-bottom:5px; }
.lw-int-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:13px; }
.lw-int{ font-size:47px; font-weight:800; line-height:.9; letter-spacing:-1.5px; color:var(--cyan); text-shadow:0 0 22px rgba(0,212,255,.35); }
.lw-int-unit{ font-size:12px; font-weight:600; letter-spacing:1px; color:#6b7685; }
.lw-target-row{ display:flex; align-items:center; gap:10px; }
.lw-sel{ flex:1; min-width:0; background:#0d1219; border:1px solid rgba(255,255,255,.1); border-radius:6px; color:#c3ccd6;
  font-family:inherit; font-size:11px; font-weight:500; padding:7px 24px 7px 10px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236b7685' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; }
.lw-sel:focus{ outline:none; border-color:rgba(0,212,255,.5); }
.lw-sel option{ background:#0d1219; color:#c3ccd6; }
.lw-over{ font-size:11px; font-weight:600; color:#6b7685; white-space:nowrap; }
.lw-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.lw-mini{ display:flex; align-items:baseline; gap:5px; }
.lw-val{ font-size:23px; font-weight:800; letter-spacing:-.5px; color:var(--cyan); }
.lw-unit{ font-size:10px; font-weight:600; color:#6b7685; }
.lw-wave{ padding:13px 14px 10px; }
.lw-wave .lw-eyebrow{ margin-bottom:8px; }
.lw-canvas-wrap{ height:62px; width:100%; }
.lw-canvas-wrap canvas{ display:block; width:100%; height:100%; }
.lw-corr{ display:block; margin-bottom:7px; }
.lw-corr-bar{ height:3px; border-radius:2px; background:rgba(255,255,255,.07); }
.lw-corr-fill{ height:100%; border-radius:2px; background:var(--cyan); box-shadow:0 0 6px rgba(0,212,255,.6); width:73%; transition:width .2s ease; }
.lw-source{ font-size:11.5px; font-weight:500; color:#5e6a78; }
.lw-source span{ color:#8b95a3; display:inline-block; animation:extSourceFade .4s ease; }
@keyframes extSourceFade{ from{opacity:0;} to{opacity:1;} }
.lw-actions{ display:flex; align-items:center; justify-content:space-between; padding:2px 1px; }
.lw-reset{ background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:6px; color:#8b95a3; font-size:11px; font-weight:500; padding:6px 13px; cursor:pointer; font-family:inherit; transition:background .2s ease; }
.lw-reset:hover{ background:rgba(255,255,255,.04); }
.lw-link{ font-size:11.5px; font-weight:600; color:var(--cyan); text-decoration:none; }
.lw-link:hover{ text-decoration:underline; }
.lw-toggle{ background:transparent; border:1px solid rgba(232,69,95,.4); border-radius:7px; color:#e8455f; font-size:13px; font-weight:700; letter-spacing:.3px; padding:13px; width:100%; cursor:pointer; font-family:inherit; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.lw-toggle:hover{ background:rgba(255,255,255,.04); }
.lw-toggle.paused{ border-color:rgba(0,212,255,.45); color:var(--cyan); }

/* ---- Section rhythm ---- */
.section{ padding:clamp(56px,7vw,96px) 0; position:relative; }
.section + .section{ border-top:1px solid var(--line); }

/* ---- Any tab ---- */
.chip-row{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:26px auto 44px; max-width:720px;
}
.chip-row li{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid var(--line-2); border-radius:20px; padding:7px 15px;
  background:var(--surface); transition:border-color .2s, color .2s;
}
.chip-row li:hover{ border-color:var(--cyan-dim); color:var(--text); }
.shots-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px; }
.context-shot{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.context-shot img{ width:100%; }
.context-shot figcaption{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  padding:14px 16px; border-top:1px solid var(--line);
}

/* ---- Features ---- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.feat{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px; transition:border-color .25s, transform .25s, background .25s;
}
.feat:hover{ border-color:var(--cyan-dim); transform:translateY(-3px); background:var(--surface-2); }
.feat-title{
  font-family:var(--sans); font-weight:600; font-size:17px; color:var(--text);
  margin-bottom:9px; letter-spacing:-.01em;
}
.feat p{ color:var(--muted); font-size:15px; line-height:1.62; }

/* ---- How it works ---- */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; counter-reset:none; }
.step{ position:relative; padding:28px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.step-num{
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--cyan);
  letter-spacing:.1em; display:block; margin-bottom:16px;
}
.step-title{ font-family:var(--sans); font-weight:600; font-size:18px; margin-bottom:8px; letter-spacing:-.01em; }
.step p{ color:var(--muted); font-size:15px; }

/* ---- Targets table ---- */
.target-table{ max-width:640px; margin:40px auto 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.target-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; border-top:1px solid var(--line); }
.target-row:first-child{ border-top:none; }
.target-head{ background:var(--surface-2); }
.target-head span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.target-row span:first-child{ color:var(--text); font-size:15px; }
.target-row .mono{ color:var(--cyan); font-size:15px; font-weight:500; }

/* ---- Metrics ---- */
.metric-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.metric{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px 24px; }
.metric dt{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--cyan); margin-bottom:7px; letter-spacing:-.01em; }
.metric dd{ color:var(--muted); font-size:15px; line-height:1.62; }

/* ---- Privacy ---- */
.privacy-inner{ max-width:720px; }
.privacy .section-title{ max-width:620px; }

/* ---- FAQ ---- */
.faq-list{ max-width:760px; margin:40px auto 0; }
.faq-item{ border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:12px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 22px;
  font-family:var(--sans); font-weight:600; font-size:16px; color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--mono); font-size:20px; color:var(--cyan);
  transition:transform .25s ease; line-height:1;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--cyan); }
.faq-body{ padding:0 22px 22px; color:var(--muted); font-size:15px; line-height:1.65; }
.faq-body a{ color:var(--cyan); text-decoration:none; }
.faq-body a:hover{ text-decoration:underline; }
.faq-shot{ margin-top:16px; width:260px; max-width:100%; border:1px solid var(--line-2); border-radius:12px; }

/* ---- Final CTA ---- */
.final-cta{ text-align:center; }
.final-inner{ max-width:640px; }
.final-title{ font-family:var(--sans); font-weight:700; letter-spacing:-.02em; font-size:clamp(26px,3.8vw,42px); margin-bottom:14px; }
.final-sub{ color:var(--muted); font-size:17px; margin-bottom:30px; }

/* ---- Footer ---- */
.footer{ border-top:1px solid var(--line); padding:40px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-brand{ font-family:var(--sans); font-weight:700; font-size:17px; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-links a:hover{ color:var(--cyan); }
.footer-note{ font-family:var(--mono); font-size:11px; color:var(--dim); width:100%; }
.footer-note a{ color:var(--dim); text-decoration:none; }
.footer-note a:hover{ color:var(--cyan); }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-shot{ order:0; display:flex; justify-content:center; }
  .shot-frame{ max-width:300px; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .metric-list{ grid-template-columns:1fr; }
  .shots-2{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .topnav-link{ display:none; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .feat-grid{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
  .hero-trace{ display:none; }
}