/* ============================================================
   nerdAppLabs — 2026 site design (ported 1:1 from the approved
   nerds-web-preview.html). Self-contained: pages that load this
   stylesheet must NOT also load modern-style.css.
   Dark mode: html[data-theme="dark"] (toggled by redesign footer JS).
   ============================================================ */
:root{
  --paper:#ffffff; --paper-2:#f3f4f6; --card:#ffffff;
  --ink:#111827; --soft:#1f2937; --muted:#4b5563; --dim:#6b7280;
  --line:#e5e7eb; --line-2:#d1d5db; --grid-line:rgba(17,24,39,.03); --tick:rgba(17,24,39,.24);
  --hatch:rgba(37,99,235,.07);
  --accent:#2563eb; --accent-2:#1d4ed8; --hl:#bfdbfe;
  --sans:'Plus Jakarta Sans',-apple-system,sans-serif; --mono:'Roboto Mono',monospace;
  --shadow:0 1px 0 rgba(12,12,12,.02), 0 10px 30px -14px rgba(12,12,12,.16);
  /* compatibility aliases so preserved inline styles (old token names) resolve */
  --primary:var(--accent); --primary-foreground:#fff; --foreground:var(--ink);
  --muted-foreground:var(--muted); --background:var(--card); --secondary:var(--paper-2);
  --border:var(--line); --radius:4px; --radius-lg:6px;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
}
/* form controls */
input,textarea,select{border-radius:3px;font-family:var(--sans)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)!important}
html[data-theme="dark"]{
  --paper:#0d1117; --paper-2:#161b22; --card:#11161d;
  --ink:#f1f4f8; --soft:#cdd2db; --muted:#a3acba; --dim:#74808f;
  --line:#222a36; --line-2:#323c4b; --grid-line:rgba(255,255,255,.03); --tick:rgba(255,255,255,.26);
  --hatch:rgba(59,130,246,.13);
  --accent:#3b82f6; --accent-2:#60a5fa; --hl:#3b82f6;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 32px -16px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6;transition:background .25s,color .25s}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.sec{padding:76px 0}
.sec-line{border-top:1px solid var(--line)}

.gridbg{background-color:var(--paper-2);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:16px 16px}

.brk{position:relative;border:1px solid var(--line);background-color:var(--card);background-image:
  linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
  linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
  linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)),
  linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick));
  background-repeat:no-repeat;
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;box-shadow:0 18px 44px -30px rgba(12,12,12,.16)}

.hl{color:var(--ink);padding:.04em .2em;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='48' viewBox='0 0 200 48' preserveAspectRatio='none'><path d='M5 16 C38 7 92 11 132 9 C162 7 185 12 197 14 C199 21 196 33 191 38 C148 41 92 36 52 38 C30 39 13 38 6 34 C1 28 1 21 5 16 Z' fill='%2393c5fd' fill-opacity='0.72'/></svg>") no-repeat center / 100% 90%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme="dark"] .hl{color:#0b1220}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:1px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .14s,border-color .14s,color .14s,transform .08s;white-space:nowrap;
  background-repeat:no-repeat;
  background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-image:linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick)),linear-gradient(var(--btn-tick),var(--btn-tick))}
.btn:active{transform:translateY(1px)}
.btn-primary{--btn-tick:rgba(255,255,255,.55);background-color:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background-color:var(--accent-2);border-color:var(--accent-2)}
.btn-line{--btn-tick:var(--accent);background-color:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:11px 22px;font-size:14.5px}
.iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:2px;border:none;background:transparent;color:var(--soft);cursor:pointer;transition:color .14s,background .14s}
.iconbtn:hover{color:var(--accent);background:var(--paper-2)}
.iconbtn svg{width:17px;height:17px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none}
.link-arrow:hover{gap:9px}

/* NAV */
.navbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;height:64px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.brand:hover{opacity:.85}
.brand .bn{font-weight:800;font-size:18px;letter-spacing:-.5px;color:var(--accent)}
.brand .bt{font-size:12.5px;color:var(--muted);letter-spacing:.02em;opacity:.85}
.nav .links{display:flex;align-items:center;gap:2px;margin-left:20px;font-size:14px}
.nav .links > a, .nav .links > .menu > button{display:inline-flex;align-items:center;gap:5px;color:var(--soft);text-decoration:none;background:none;border:none;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;line-height:1}
.nav .links > a:hover, .nav .links > .menu > button:hover{background:var(--paper-2);color:var(--ink)}
.nav .links > a.active{color:var(--accent)}
.nav .links > .menu > button .chev{width:13px;height:13px;color:var(--dim);transition:transform .15s}
.nav .spacer{flex:1}
.nav .right{display:flex;align-items:center;gap:8px}
.nav .right .btn{padding:7px 13px;font-size:13px}
.mobile-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px}
.mobile-toggle svg{width:24px;height:24px}

/* mega-dropdown */
.menu{position:relative}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:660px;
  background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 250px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.menu:hover .mega, .menu:focus-within .mega, .menu.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.menu:hover > button .chev, .menu.open > button .chev{transform:rotate(180deg)}
.mega .col{padding:14px}
.mega .col-head{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);padding:6px 10px 10px}
.mi{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:7px;text-decoration:none;color:var(--ink);transition:background .12s}
.mi:hover{background:var(--paper-2)}
.mi .ic{flex:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:7px;display:grid;place-items:center;color:var(--accent);background:var(--paper)}
.mi .ic svg{width:17px;height:17px}
.mi .mt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mi .t{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mi .pill{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--accent);background:rgba(37,99,235,.10);border-radius:3px;padding:2px 5px;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="dark"] .mi .pill{background:rgba(59,130,246,.16)}
.mi .d{font-size:12.5px;color:var(--muted);line-height:1.5}
.mega .feat{background-color:var(--paper-2);background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 9px);border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px}
.feat .card{background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:14px}
.feat .card .row{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.feat .card .row svg{width:16px;height:16px;color:var(--accent)}
.feat .card p{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.feat .links{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.feat .links .btn{width:100%}
.mi .pill{text-transform:uppercase}

/* HERO */
.statband{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statbar{display:flex;justify-content:center;padding:24px 0;font-size:13px;color:var(--soft);flex-wrap:wrap}
.statbar b{color:var(--accent)} .statbar span{padding:0 18px;border-right:1px solid var(--line)} .statbar span:last-child{border:none}
.hero{text-align:center;padding:54px 0 64px;position:relative;overflow:hidden;background:radial-gradient(60% 90% at 50% -8%,rgba(37,99,235,.06),transparent 60%)}
.hero::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.9;background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3Ccircle cx='300' cy='200' r='4' fill='%23000000' fill-opacity='0.15'/%3E%3Ccircle cx='500' cy='150' r='6' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='800' cy='220' r='5' fill='%23000000' fill-opacity='0.14'/%3E%3Ccircle cx='1100' cy='180' r='4' fill='%23000000' fill-opacity='0.12'/%3E%3Cpath d='M300 200 Q400 120 500 150 Q650 180 800 220 Q950 200 1100 180' stroke='%23000000' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M200 350 Q400 300 600 380 Q800 420 1000 350 Q1200 320 1400 400' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Ccircle cx='250' cy='300' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='450' cy='400' r='1.5' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='650' cy='250' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='850' cy='380' r='1.5' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='1050' cy='300' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3Crect x='100' y='500' width='40' height='25' fill='%23000000' fill-opacity='0.08' rx='3'/%3E%3Crect x='150' y='490' width='30' height='20' fill='%23000000' fill-opacity='0.06' rx='2'/%3E%3Crect x='1200' y='100' width='45' height='30' fill='%23000000' fill-opacity='0.08' rx='3'/%3E%3Crect x='1250' y='90' width='35' height='22' fill='%23000000' fill-opacity='0.06' rx='2'/%3E%3Cdefs%3E%3Cpattern id='wg' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 80 0 L 0 0 0 80' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='1' fill='%23000000' fill-opacity='0.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wg)'/%3E%3C/svg%3E")}
html[data-theme="dark"] .hero::before{filter:invert(1) brightness(1.2);opacity:.45}
.hero::before{animation:immersiveFloat 25s ease-in-out infinite}
@keyframes immersiveFloat{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
  25%{transform:translate(20px,-15px) scale(1.02) rotate(1deg)}
  50%{transform:translate(-10px,20px) scale(0.98) rotate(-0.5deg)}
  75%{transform:translate(-20px,-20px) scale(1.01) rotate(0.5deg)}
}
@media (prefers-reduced-motion: reduce){.hero::before{animation:none}}
.hero > *{position:relative;z-index:1}
.hero h1{font-size:clamp(34px,5.6vw,58px);font-weight:800;letter-spacing:-1.6px;line-height:1.08;margin:0 auto 22px;max-width:860px}
.hero h1 .hl,.hero h1 .accent{white-space:nowrap}
.hero h1 .accent{color:var(--accent)}
.hero p.sub{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 30px;line-height:1.6}
.hero .cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.hero .deliver{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:26px 0 0;font-weight:500}
.langrow{display:flex;justify-content:center;padding:30px 0 0;flex-wrap:wrap;row-gap:8px}
.langrow span{font-family:var(--mono);font-size:12px;color:var(--dim);padding:0 14px;border-right:1px solid var(--line)}
.langrow span:last-child{border:none}

/* BENTO */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:0}
.bento .cell{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.bento .cell:nth-child(2n){border-right:none}
.bento .cell:nth-last-child(-n+2){border-bottom:none}
.cell .lab{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.cell h3{margin:0 0 9px;font-size:19px;letter-spacing:-.3px}
.cell h3 .aka{color:var(--dim);font-weight:400;font-family:var(--mono);font-size:12px}
.cell p{margin:0 0 16px;color:var(--muted);font-size:14.5px;line-height:1.6}
.cell .link-arrow{margin-top:auto}

/* FLOW */
.flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.flow .step{padding:28px;border-right:1px solid var(--line);position:relative}
.flow .step:last-child{border-right:none}
.flow .step .n{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600}
.flow .step h4{margin:10px 0 4px;font-size:17px}
.flow .step .who{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin:0 0 10px;letter-spacing:.02em}
.flow .step p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

/* spec panel */
.panel{border:1px solid var(--line-2);border-radius:4px;background:var(--card);overflow:hidden;box-shadow:0 16px 40px -30px rgba(12,12,12,.24)}
.panel .ph{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);padding:15px 18px;border-bottom:1px solid var(--line)}
.panel .pr{display:flex;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel .pr:last-child{border-bottom:none}
.panel .pk{color:var(--soft);font-weight:600;font-size:14px}
.panel .pv{color:var(--muted);font-family:var(--mono);font-size:12.5px;text-align:right;line-height:1.5}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split h2{font-size:29px;letter-spacing:-.7px;margin:0 0 16px;line-height:1.18}
.split p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 18px}
.checklist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:11px;font-size:14.5px;color:var(--soft);line-height:1.5}
.checklist li svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:2px}

/* shared utilities (DRY — no per-page inline styles) */
.tac{text-align:center}
.sec-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.note-line{font-size:14px;color:var(--dim);margin:18px 0 0;line-height:1.6}
.mt-40{margin-top:40px}
.lead{font-size:18px;color:var(--muted);line-height:1.7;max-width:760px;margin:0 auto}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.prose{font-size:16px;color:var(--soft);line-height:1.8}
.prose p{margin:0 0 var(--space-6,1.5rem)}
.callout{border-left:3px solid var(--accent);background:var(--paper-2);padding:22px 26px;border-radius:0 4px 4px 0}

/* generic centered section header (multi-card grids) */
.sec-head{text-align:center;max-width:620px;margin:0 auto 44px}
.sec-head h2{font-size:29px;letter-spacing:-.7px;margin:0 0 12px;line-height:1.15}
.sec-head p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.sec-head .kicker{margin-bottom:14px}

/* card grid (borderless cells in one bracketed box) */
.cardgrid{display:grid;gap:0}
.cardgrid.cols-3{grid-template-columns:1fr 1fr 1fr}
.cardgrid.cols-2{grid-template-columns:1fr 1fr}
.cardgrid .cell{padding:26px;border-right:1px solid var(--line)}
.cardgrid.cols-3 .cell:nth-child(3n){border-right:none}
.cardgrid.cols-2 .cell:nth-child(2n){border-right:none}
.cardgrid .cell:last-child{border-right:none}
.cell .ci{float:left;margin:1px 11px 0 0;color:var(--accent);line-height:1.2}
.cell .ci i{font-size:1.2rem}
.cell .ci ~ h3{margin-top:0;overflow:hidden}
.cell .ci ~ p{clear:both}

/* tile grid (many items: portfolio work, team, quotes) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.tile{border:1px solid var(--line);border-radius:3px;background:var(--card);padding:22px;transition:border-color .15s;display:flex;flex-direction:column}
.tile:hover{border-color:var(--accent)}
.tile h4{margin:0 0 8px;font-size:16px;letter-spacing:-.2px}
.tile p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.6}
.tile blockquote{margin:0 0 14px;font-style:italic;color:var(--soft);line-height:1.6}
.tile .by{margin-top:auto;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--accent);font-weight:600}
.tile .role{font-family:var(--mono);font-size:11.5px;color:var(--accent);margin:0 0 10px}
.ttags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.ttag{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 7px}
.tile .badge{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:3px;background:var(--accent);color:#fff;margin-bottom:10px}
.tile .badge.os{background:#10b981}
@media(max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.tiles,.tiles.two{grid-template-columns:1fr}}

/* CTA */
.cta-box{text-align:center;padding:60px 30px}
.cta-box h2{font-size:33px;letter-spacing:-.7px;margin:0 0 14px}
.cta-box p{color:var(--muted);font-size:16px;max-width:520px;margin:0 auto 26px;line-height:1.6}
.cta-box .cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* footer */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line)}
.foot{padding:56px 0 44px;font-size:13.5px;color:var(--muted)}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;align-items:start}
.foot h5{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.foot a{display:block;color:var(--muted);text-decoration:none;padding:5px 0}
.foot a:hover{color:var(--accent)}
.foot .end{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);flex-wrap:wrap;gap:8px}

/* responsive */
@media(max-width:760px){
  .sec{padding:52px 0}
  .wrap{padding:0 18px}
  .hero{padding:34px 0 46px}
  .hero h1{letter-spacing:-.6px;font-size:clamp(23px,6.4vw,40px)}
  .hero p.sub{font-size:16px}
  .mega{position:static;width:auto;left:0;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0}
  .bento,.flow,.split,.cardgrid.cols-3,.cardgrid.cols-2{grid-template-columns:1fr}
  .bento .cell{border-right:none}
  .bento .cell:nth-last-child(2){border-bottom:1px solid var(--line)}
  .flow .step,.cardgrid .cell{border-right:none;border-bottom:1px solid var(--line)}.flow .step:last-child{border-bottom:none}
  .split{gap:30px}.split h2{font-size:24px}
  .cta-box{padding:44px 22px}.cta-box h2{font-size:26px}
  .statbar{padding:18px 0;gap:4px 0}.statbar span{padding:5px 14px;border-right:none}
  .hero h1 .hl{white-space:normal}
  .mega .feat{display:none}
  .nav .links{display:none}
  .nav .links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 64px);overflow-y:auto}
  .nav .links.open > a, .nav .links.open .menu > button{padding:12px;border-radius:6px}
  .brand .bt{display:none}
  .mobile-toggle{display:inline-flex}
  .foot .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:480px){
  .nav .right .btn-line{display:none}
  .statbar span:last-child{display:none}
  .foot .cols{grid-template-columns:1fr}
}
@media(max-width:400px){
  .nav .right .btn-primary{display:none}  /* keep theme + hamburger; CTA lives in the menu */
}