/* ============================================================
   VOIDRAGE — site stylesheet
   Tokens + components, recreated from the VOIDRAGE Design System.
   Dark, brutalist, near-monochrome. One hot signal-red accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- VOID (backgrounds) --- */
  --void-950:#060607; --void-900:#0A0A0C; --void-850:#101013;
  --void-800:#16161A; --void-700:#1D1D22; --void-600:#26262C;
  /* --- STEEL (borders) --- */
  --steel-700:#2C2C33; --steel-600:#3A3A43; --steel-500:#4C4C56; --steel-400:#6B6B76;
  /* --- CONCRETE / BONE (text) --- */
  --concrete-400:#8A8A92; --concrete-300:#A8A8AF; --concrete-200:#C9C9CE;
  --bone-100:#E7E7E4; --bone-000:#FAFAF7;
  /* --- SIGNAL RED --- */
  --signal-700:#5C0F16; --signal-600:#8B1620; --signal-500:#C81829;
  --signal-400:#E5232F; --signal-300:#FF3B3B;
  /* --- meters --- */
  --meter-green:#2FBF6B; --meter-amber:#E8A33D;

  /* semantic */
  --bg-page:var(--void-900); --bg-sunken:var(--void-850); --bg-surface:var(--void-800);
  --bg-raised:var(--void-700); --bg-hover:var(--void-600);
  --border-hairline:var(--steel-700); --border:var(--steel-600); --border-strong:var(--steel-500);
  --text-primary:var(--bone-100); --text-bright:var(--bone-000); --text-secondary:var(--concrete-200);
  --text-muted:var(--concrete-300); --text-faint:var(--concrete-400); --text-disabled:var(--steel-400);
  --accent:var(--signal-500); --accent-bright:var(--signal-400); --accent-hot:var(--signal-300);
  --accent-dim:var(--signal-600); --accent-deep:var(--signal-700); --text-on-accent:var(--bone-000);
  --status-ok:var(--meter-green); --status-warn:var(--meter-amber); --status-danger:var(--signal-400);

  /* type */
  --font-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-body:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;
  --container-max:1280px; --container-prose:680px;
  --control-height-sm:32px; --control-height-md:40px; --control-height-lg:52px;

  /* effects */
  --radius-sm:2px; --radius-xs:1px; --radius-pill:999px;
  --shadow-hard:4px 4px 0 0 var(--void-950);
  --focus-ring:0 0 0 2px var(--void-900),0 0 0 3px var(--signal-500);
  --ease-mech:cubic-bezier(0.2,0,0,1); --ease-snap:cubic-bezier(0.7,0,0.3,1);
  --dur-fast:90ms; --dur-base:150ms; --dur-slow:260ms;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-body); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--accent); color:var(--text-on-accent);}
a{color:inherit;}
img{max-width:100%; display:block;}

/* film grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void-950);}
::-webkit-scrollbar-thumb{background:var(--steel-600);}

/* ---------- layout helpers ---------- */
.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--space-8);}
.section{padding:var(--space-20) 0; border-top:1px solid var(--border-hairline); position:relative; z-index:2;}
.section--sunken{background:var(--bg-sunken);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-12); gap:var(--space-6);}
.section-head h2{
  font:600 38px/1 var(--font-display); letter-spacing:-.02em; text-transform:uppercase;
  color:var(--text-primary); margin:0;
}
.eyebrow{
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.index-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-faint);
}
.mono{font-family:var(--font-mono);}
.prose{max-width:var(--container-prose);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--control-height-md); padding:0 20px;
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; white-space:nowrap; user-select:none; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-mech),color var(--dur-fast) var(--ease-mech),
    border-color var(--dur-fast) var(--ease-mech),transform var(--dur-fast) var(--ease-mech);
}
.btn:active{transform:translateY(1px);}
.btn--sm{height:var(--control-height-sm); padding:0 14px; font-size:11px;}
.btn--lg{height:var(--control-height-lg); padding:0 28px; font-size:13px;}
.btn--full{display:flex; width:100%;}
.btn--primary{background:var(--accent); color:var(--text-on-accent); border-color:var(--accent);}
.btn--primary:hover{background:var(--accent-bright); border-color:var(--accent-bright);}
.btn--secondary{background:transparent; color:var(--text-primary); border-color:var(--border-strong);}
.btn--secondary:hover{border-color:var(--bone-100); color:var(--text-bright);}
.btn--ghost{background:transparent; color:var(--text-muted); border-color:transparent;}
.btn--ghost:hover{background:var(--bg-hover); color:var(--text-primary);}
.btn--danger{background:transparent; color:var(--accent-hot); border-color:var(--accent);}
.btn--danger:hover{background:var(--accent); color:var(--text-on-accent);}
.btn:disabled,.btn[disabled]{opacity:.4; cursor:not-allowed;}

/* ---------- panel ---------- */
.panel{
  position:relative; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:var(--space-6);
}
.panel--raised{background:var(--bg-raised);}
.panel--sunken{background:var(--bg-sunken);}
.panel--shadow{box-shadow:var(--shadow-hard);}
.panel--pad0{padding:0;}
.panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--border-hairline);
}
.panel__label{
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-faint);
}
/* corner ticks */
.panel--ticks::before,.panel--ticks::after,
.panel--ticks > .tick-bl,.panel--ticks > .tick-br{content:"";}
.tick{position:absolute; width:7px; height:7px; border:0 solid var(--border-strong);}
.tick.tl{top:-1px; left:-1px; border-top-width:1px; border-left-width:1px;}
.tick.tr{top:-1px; right:-1px; border-top-width:1px; border-right-width:1px;}
.tick.bl{bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px;}
.tick.br{bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px;}

/* ---------- tag ---------- */
.tag{
  display:inline-flex; align-items:center; gap:7px; height:22px; padding:0 10px;
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--border); color:var(--text-muted);
  background:transparent; border-radius:var(--radius-sm); white-space:nowrap; line-height:1;
}
.tag .dot{width:6px; height:6px; border-radius:999px; background:currentColor;}
.tag--accent{color:var(--accent-hot); border-color:var(--accent-dim); background:rgba(200,24,41,.08);}
.tag--ok{color:var(--status-ok); border-color:rgba(47,191,107,.4); background:rgba(47,191,107,.08);}
.tag--warn{color:var(--status-warn); border-color:rgba(232,163,61,.4); background:rgba(232,163,61,.08);}
.tag--danger{color:var(--accent-hot); border-color:var(--accent); background:rgba(255,59,59,.10);}

/* ---------- inputs ---------- */
.field{display:flex; flex-direction:column; gap:8px; width:100%;}
.field > label{
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-muted);
}
.field--invalid > label{color:var(--accent-hot);}
.input-wrap{
  display:flex; align-items:center; background:var(--bg-sunken);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-mech);
}
.input-wrap.ta{align-items:flex-start;}
.input-wrap:focus-within{border-color:var(--bone-100); box-shadow:inset 0 0 0 1px var(--bone-100);}
.field--invalid .input-wrap{border-color:var(--accent);}
.input-wrap input,.input-wrap textarea{
  flex:1; width:100%; background:transparent; border:none; outline:none; color:var(--text-primary);
  font-family:var(--font-body); font-weight:300; font-size:15px;
}
.input-wrap input{height:var(--control-height-md); padding:0 14px;}
.input-wrap textarea{padding:12px 14px; line-height:1.5; resize:vertical; min-height:84px;}
.input-wrap .suffix{padding-right:12px; color:var(--text-faint); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;}
.input-wrap .prefix{padding-left:12px; color:var(--text-faint); font-family:var(--font-mono); font-size:13px;}
.field .hint{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
.field .hint--danger{color:var(--accent-hot);}

/* radio group (segmented) */
.segmented{display:flex; gap:var(--space-3); flex-wrap:wrap;}
.segmented label{
  flex:1; min-width:160px; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 16px; background:var(--bg-sunken); border:1px solid var(--border);
  border-radius:var(--radius-sm); transition:border-color var(--dur-fast) var(--ease-mech),background var(--dur-fast);
}
.segmented label:hover{border-color:var(--border-strong);}
.segmented input{position:absolute; opacity:0; pointer-events:none;}
.segmented .radiomark{
  width:14px; height:14px; flex-shrink:0; border:1px solid var(--border-strong); border-radius:999px;
  position:relative; transition:border-color var(--dur-fast);
}
.segmented input:checked + .radiomark{border-color:var(--accent);}
.segmented input:checked + .radiomark::after{
  content:""; position:absolute; inset:3px; border-radius:999px; background:var(--accent);
}
.segmented label:has(input:checked){border-color:var(--accent); background:rgba(200,24,41,.06);}
.segmented .seg-title{font:500 15px/1.1 var(--font-body); color:var(--text-bright); text-transform:uppercase; letter-spacing:.01em;}
.segmented .seg-sub{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--text-faint); text-transform:uppercase; margin-top:3px;}

/* ---------- meter ---------- */
.meter{width:100%;}
.meter__head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.meter__label{font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint);}
.meter__readout{font-family:var(--font-mono); font-size:12px; color:var(--text-secondary);}
.meter__track{
  display:flex; gap:2px; height:12px; padding:3px; background:var(--void-950);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xs);
}
.meter__seg{flex:1; background:var(--void-800); opacity:.5; transition:background var(--dur-fast) var(--ease-mech),opacity var(--dur-fast);}

/* ---------- spec rows ---------- */
.spec{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-hairline);}
.spec__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);}
.spec__value{font-family:var(--font-mono); font-size:13px; color:var(--text-secondary);}
.spec__value--accent{color:var(--accent-hot);}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40; height:68px;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-8);
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-mech),border-color var(--dur-base) var(--ease-mech);
}
.nav.scrolled{background:rgba(10,10,12,.82); backdrop-filter:blur(10px); border-bottom-color:var(--border-hairline);}
.nav__logo{height:30px; width:auto;}
.nav__links{display:flex; align-items:center; gap:var(--space-8);}
.nav__links a{
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-muted); text-decoration:none; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-mech);
}
.nav__links a:hover{color:var(--text-bright);}

/* ---------- hero ---------- */
.hero{
  position:relative; height:100dvh; min-height:600px;
  display:flex; flex-direction:column; align-items:center;
  /* push content to upper-centre, leaving room at bottom for scroll indicator */
  justify-content:center; padding-bottom:120px;
  text-align:center; overflow:hidden;
}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(.35) contrast(1.05) brightness(.7);}
.hero__scrim{position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center,rgba(10,10,12,.35),rgba(6,6,7,.86) 78%),linear-gradient(180deg,rgba(6,6,7,.6),rgba(6,6,7,.2) 30%,rgba(6,6,7,.95));}
.hero__glow{position:absolute; top:12%; left:50%; transform:translateX(-50%); width:780px; height:520px; z-index:1;
  background:radial-gradient(ellipse at center,rgba(200,24,41,.18),transparent 62%); pointer-events:none;}
.hero__inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:var(--space-4);}
.hero__eyebrow{color:var(--accent);}
.hero__logo{width:min(540px,72vw); height:auto; filter:drop-shadow(0 4px 40px rgba(0,0,0,.7));}
/* tagline sits inside inner — smaller so it clears the scroll indicator */
.hero__tagline{
  font:300 clamp(12px,1.6vw,15px)/1.5 var(--font-body);
  color:var(--text-muted); max-width:440px; margin:0;
}
/* scroll indicator is absolutely anchored at the bottom — never overlaps inner content */
.hero__scroll{
  position:absolute; bottom:var(--space-8); left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
}
.hero__arrows{display:flex; flex-direction:column; align-items:center; line-height:.6; color:var(--accent);}
.hero__arrows span{font-size:20px; animation:arrowpulse 1.6s var(--ease-mech) infinite;}
.hero__arrows span:nth-child(2){animation-delay:.18s; opacity:.7;}
.hero__arrows span:nth-child(3){animation-delay:.36s; opacity:.45;}
.hero__scroll-label{font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-muted);}
@keyframes arrowpulse{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---------- services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
.service{display:flex; flex-direction:column;}
.service__no{font:700 52px/1 var(--font-display); color:var(--steel-500); letter-spacing:-.02em;}
.service h3{font:500 22px/1.1 var(--font-display); color:var(--text-bright); text-transform:uppercase; letter-spacing:-.01em; margin:var(--space-4) 0 var(--space-3);}
.service p{font:300 15px/1.55 var(--font-body); color:var(--text-muted); margin:0; flex:1;}
.service__specs{margin-top:var(--space-6); display:flex; flex-direction:column; gap:6px;}
.service__specs > div{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary);}
.service__specs .m{color:var(--accent);}

/* ---------- mastering / form ---------- */
.master-lead h2{font:600 clamp(32px,5vw,52px)/1.02 var(--font-display); letter-spacing:-.025em; text-transform:uppercase; color:var(--text-bright); margin:0 0 var(--space-5);}
.master-lead h2 .accent{color:var(--accent);}
.master-lead p{font:300 18px/1.55 var(--font-body); color:var(--text-secondary); max-width:560px; margin:0;}
.master-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-12); margin-top:var(--space-12); align-items:start;}
.form-stack{display:flex; flex-direction:column; gap:var(--space-5);}
.dropzone{
  border:1px dashed var(--border-strong); background:var(--bg-sunken);
  padding:var(--space-10) var(--space-6); text-align:center; cursor:pointer;
  transition:all var(--dur-fast) var(--ease-mech);
}
.dropzone.drag{border-color:var(--accent); background:rgba(200,24,41,.06);}
.dropzone__icon{font:700 28px/1 var(--font-display); color:var(--text-faint);}
.dropzone__title{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-top:var(--space-3);}
.dropzone__sub{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:6px;}
.dropzone__danger{font-family:var(--font-mono); font-size:11px; color:var(--accent-hot); margin-top:6px; letter-spacing:.04em;}

/* file list */
.filelist{display:flex; flex-direction:column; gap:var(--space-2);}
.fileitem{display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); background:var(--bg-raised); border:1px solid var(--border);}
.fileitem__name{flex:1; min-width:0;}
.fileitem__name .nm{font:500 14px/1.2 var(--font-body); color:var(--text-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fileitem__name .meta{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--text-faint); margin-top:3px;}
.fileitem__status{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.fileitem .x{background:none; border:1px solid var(--border); color:var(--text-muted); width:26px; height:26px; cursor:pointer; font-family:var(--font-mono); flex-shrink:0;}
.fileitem .x:hover{border-color:var(--accent); color:var(--accent-hot);}

/* price box */
.pricebox{border:1px solid var(--border); background:var(--bg-raised); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);}
.pricebox__row{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}
.pricebox__total{display:flex; justify-content:space-between; align-items:baseline; padding-top:var(--space-3); border-top:1px solid var(--border-hairline);}
.pricebox__total .lab{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint);}
.pricebox__total .amt{font:700 38px/1 var(--font-display); color:var(--text-bright); letter-spacing:-.02em;}
.pricebox__total .amt .eu{color:var(--accent); font-size:24px;}
.pricebox__disc{color:var(--status-ok);}

/* ---------- upload progress ---------- */
.uprogress{margin-top:var(--space-2);}
.uprogress__track{height:2px; background:var(--void-700); position:relative; overflow:hidden;}
.uprogress__bar{height:100%; background:var(--accent); width:0%; transition:width .12s var(--ease-mech);}
.uprogress__bar.done{background:var(--meter-green);}
.uprogress__label{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--text-faint); margin-top:4px;}

/* ---------- toast / banners ---------- */
.banner{padding:var(--space-4) var(--space-5); border:1px solid var(--border); font-family:var(--font-mono); font-size:13px;}
.banner--ok{border-color:rgba(47,191,107,.4); background:rgba(47,191,107,.08); color:var(--status-ok);}
.banner--danger{border-color:var(--accent); background:rgba(200,24,41,.08); color:var(--accent-hot);}
.banner--warn{border-color:rgba(232,163,61,.4); background:rgba(232,163,61,.08); color:var(--status-warn);}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border); background:var(--void-950); position:relative; z-index:2;}
.footer__inner{max-width:var(--container-max); margin:0 auto; padding:var(--space-20) var(--space-8) var(--space-16);}
.footer__top{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-10);}
.footer h2{font:700 clamp(40px,7vw,64px)/.95 var(--font-display); text-transform:uppercase; letter-spacing:-.03em; color:var(--text-bright); margin:0; max-width:620px;}
.footer__cols{display:flex; gap:var(--space-16);}
.footer__col h4{font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--space-4);}
.footer__col a{display:block; font-family:var(--font-mono); font-size:13px; color:var(--text-muted); text-decoration:none; margin-bottom:var(--space-3);}
.footer__col a:hover{color:var(--text-bright);}
.footer__base{margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--border-hairline); display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.footer__base img{height:24px; width:auto; opacity:.7;}
.footer__base span{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--text-faint);}

/* ---------- play button (download/portal) ---------- */
.playbtn{width:44px; height:44px; flex-shrink:0; cursor:pointer; background:transparent;
  border:1px solid var(--border-strong); color:var(--text-secondary); font-size:13px;
  transition:all var(--dur-fast) var(--ease-mech);}
.playbtn.on{background:var(--accent); border-color:var(--accent); color:var(--text-on-accent);}

/* ---------- utility ---------- */
.stack{display:flex; flex-direction:column;}
.gap-3{gap:var(--space-3);} .gap-4{gap:var(--space-4);} .gap-5{gap:var(--space-5);} .gap-6{gap:var(--space-6);}
.mt-6{margin-top:var(--space-6);} .mt-8{margin-top:var(--space-8);} .mt-10{margin-top:var(--space-10);}
.center{display:flex; align-items:center; justify-content:center;}
.hidden{display:none !important;}
.text-faint{color:var(--text-faint);} .text-muted{color:var(--text-muted);} .accent{color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr;}
  .master-grid{grid-template-columns:1fr; gap:var(--space-8);}
  .nav__links a:not(.btn){display:none;}
  .footer__top{flex-direction:column; align-items:flex-start;}
  .footer__cols{gap:var(--space-10);}
}
@media (max-width:560px){
  .container{padding:0 var(--space-5);}
  .section{padding:var(--space-16) 0;}
  .segmented label{min-width:100%;}
}