/* Airsoft Shop Srbija — stylesheet
   Extracted from index.html. Design tokens are at the top; each
   section below matches a section of the page in document order. */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --font-display:'Oswald','Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display-weight:600;

  --accent:#FF6A00;
  --accent-hover:#FF8426;
  --accent-ink:#100800;
  --olive:#7E8F5A;

  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(0,0,0,.16), 0 12px 32px -12px rgba(0,0,0,.34);
}

/* color-scheme must be declared or Chromium's auto-dark-mode (on by default in
   Avast Secure Browser) inverts the palette and renders the orange accent as
   blue. It also gives native scrollbars and form controls the right shade. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0C0A;
  --bg-alt:#0E110E;
  --surface:#141814;
  --surface-2:#1B211B;
  --border:#262D26;
  --border-strong:#39433A;
  --text:#EAEFEA;
  --text-dim:#98A498;
  --text-faint:#6C776D;
  --grid-line:rgba(255,255,255,.035);
  --scrim:rgba(10,12,10,.82);
  --glow:radial-gradient(60% 60% at 50% 0%, rgba(255,106,0,.16), transparent 70%);
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F5F2;
  --bg-alt:#ECEEE8;
  --surface:#FFFFFF;
  --surface-2:#F7F8F4;
  --border:#DFE2DA;
  --border-strong:#C3C9BB;
  --text:#12150F;
  --text-dim:#5A6156;
  --text-faint:#858C80;
  --grid-line:rgba(18,21,15,.045);
  --scrim:rgba(244,245,242,.85);
  --glow:radial-gradient(60% 60% at 50% 0%, rgba(255,106,0,.13), transparent 70%);
  --shadow:0 1px 2px rgba(18,21,15,.05), 0 14px 34px -16px rgba(18,21,15,.22);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);line-height:1.08;letter-spacing:.01em;margin:0;text-transform:uppercase}

/* Oswald's Cyrillic and Latin cuts are weight-matched (verified side by side),
   so no per-script weight correction is needed — only a touch more tracking,
   since Cyrillic caps are visually denser. */
html[lang="sr-Cyrl"] h1,html[lang="sr-Cyrl"] h2,
html[lang="sr-Cyrl"] h3,html[lang="sr-Cyrl"] h4{letter-spacing:.025em}
p{margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s;
}
.hdr.stuck{background:var(--scrim);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--border)}
.hdr-in{display:flex;align-items:center;gap:20px;height:74px;transition:height .3s var(--ease)}
.hdr.stuck .hdr-in{height:64px}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  object-fit:contain;display:block;
  background:transparent;transition:transform .25s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--font-display);font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.brand-txt span{font-size:9.5px;letter-spacing:.24em;color:var(--text-faint);text-transform:uppercase;margin-top:3px;font-weight:600}

.nav{display:flex;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:9px 10px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);
  transition:color .2s;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--text)}

.tools{display:flex;align-items:center;gap:8px;margin-left:14px;flex-shrink:0}

/* flex-shrink:0 on these matters. Without it, on a narrow phone the brand plus
   the language switcher plus two icon buttons exceed the viewport, flex shrinks
   every item proportionally, and the burger — being last — collapses to almost
   zero width. It was never "hidden"; it was squeezed out of existence. */
.lang{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:1px;flex-shrink:0}
.lang button{
  padding:5px 9px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.07em;
  color:var(--text-faint);transition:.2s;
}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.icon-btn{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);transition:.2s;
}
.icon-btn:hover{color:var(--accent);border-color:var(--border-strong)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .ico-sun{display:block}
html[data-theme="dark"] .ico-moon{display:none}
html[data-theme="light"] .ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:block}

.burger{display:none}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:80px 28px 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease);
}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:var(--font-display);font-size:30px;text-transform:uppercase;letter-spacing:.03em;
  padding:8px 0;border-bottom:1px solid var(--border);color:var(--text-dim);transition:.2s;
}
.drawer a:hover{color:var(--accent);padding-left:10px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:170px 0 96px;overflow:hidden;background:var(--bg-alt)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(85% 70% at 50% 25%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(85% 70% at 50% 25%,#000 30%,transparent 100%);
}
.hero::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:900px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  padding:7px 14px;border-radius:100px;margin-bottom:26px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.hero h1{
  font-size:clamp(46px,8.5vw,104px);letter-spacing:-.005em;margin-bottom:24px;
}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero p.lead{
  font-size:clamp(16px,2vw,19.5px);color:var(--text-dim);max-width:600px;margin-bottom:38px;
}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-sm);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:.22s var(--ease);border:1px solid transparent;white-space:nowrap;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Brand marks (Discord, YouTube…) are solid glyphs, not line icons — they must
   be filled, not stroked, or they render as unrecognisable outlines. */
svg.solid{fill:currentColor!important;stroke:none!important}
.btn svg.solid{width:17px;height:17px}
.ct-ico svg.solid{width:19px;height:19px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--accent)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* Stats */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
}
.stat{background:var(--bg-alt);padding:22px 20px}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(30px,4.4vw,44px);line-height:1;color:var(--accent)}
.stat span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);font-weight:600}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:96px 0;position:relative}
.sec-alt{background:var(--bg-alt);border-block:1px solid var(--border)}
.sec-head{max-width:660px;margin-bottom:52px}
.kicker{
  display:flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);flex-shrink:0}
.sec-head h2{font-size:clamp(32px,5vw,52px);margin-bottom:16px}
.sec-head p{color:var(--text-dim);font-size:17px}

/* About */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.about-txt p{color:var(--text-dim);margin-bottom:18px;font-size:16.5px}
.about-txt p:last-of-type{margin-bottom:0}
.about-txt strong{color:var(--text);font-weight:600}
/* contain, not cover — the source image is a logo/badge, and cover was
   cropping its edges off. */
.about-fig{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);background:var(--surface-2);
  display:grid;place-items:center;padding:36px 32px;min-height:300px;
}
.about-fig img{width:100%;height:auto;max-height:340px;object-fit:contain}
.about-quote{
  margin-top:30px;padding:20px 24px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;
}

/* Offer cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:30px 26px 28px;overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
}
.card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .32s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleY(1)}
.card-ico{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
}
.card-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;margin-bottom:10px;letter-spacing:.02em}
.card p{color:var(--text-dim);font-size:14.8px;line-height:1.6}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:32px 26px;counter-increment:s;
}
.step::before{
  content:"0" counter(s);
  font-family:var(--font-display);font-size:56px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--border-strong);
  display:block;margin-bottom:14px;
}
.step h3{font-size:21px;margin-bottom:9px}
.step p{color:var(--text-dim);font-size:14.8px}
.step-links{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.step-links a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent);
  transition:gap .2s;
}
.step-links a:hover{gap:12px}
.step-links svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Community */
.comm{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.comm-card{
  position:relative;border-radius:var(--r-lg);padding:38px 34px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  display:flex;flex-direction:column;min-height:270px;
  transition:transform .3s var(--ease),border-color .3s;
}
.comm-card:hover{transform:translateY(-5px);border-color:var(--border-strong)}
.comm-badge{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;color:#fff;
}
.comm-badge svg{width:27px;height:27px;fill:currentColor}
.bg-yt{background:#FF0033}
.bg-dc{background:#5865F2}
.comm-card h3{font-size:27px;margin-bottom:12px}
.comm-card p{color:var(--text-dim);font-size:15px;margin-bottom:24px;flex:1}
.comm-card .btn{align-self:flex-start}

/* Discord widget */
.dc-embed{
  margin-top:18px;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);
}
.dc-embed-head{
  display:flex;align-items:center;gap:11px;padding:14px 20px;
  border-bottom:1px solid var(--border);
}
.dc-embed-head b{font-family:var(--font-display);font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.dc-dot{
  width:8px;height:8px;border-radius:50%;background:#3BA55D;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(59,165,93,.2);animation:pulse 2.4s infinite;
}
.dc-count{margin-left:auto;color:var(--text-dim);font-size:13.5px;font-weight:600;text-align:right}
.dc-embed iframe{display:block;width:100%;height:470px;border:0;background:var(--surface-2)}
@media (max-width:720px){
  .dc-embed iframe{height:400px}
  .dc-embed-head{padding:12px 16px}
  .dc-count{font-size:12px}
}

/* Partners
   ------------------------------------------------------------------
   Logos are shown exactly as the originals: unmodified brand colours, no
   filters, on a dark charcoal card in both themes — matching how airsoft.co.rs
   itself presents them.

   Two columns, so the cards are wide. --logo-w caps the image at 300px, which
   is the widest any of these files actually is (Taiwangun/Anareus/Bohemia are
   300px; Gunfire is only 246px). Without that cap the logos would be stretched
   past their native resolution by the wide card and look soft.

   Known consequence, inherited from the source files (the live site has it too):
   Novritsch is black artwork on transparency and reads faintly on dark, and
   Jolly Softair, Powair6 and Unit 13 are JPGs with a white background baked in,
   so they appear as white blocks. The only real fix is re-sourcing those four
   as transparent PNGs from each partner's press kit — no CSS can remove a
   background that is part of the image without also altering the colours.
   ------------------------------------------------------------------ */
.partners{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  --card-h:172px;   /* fixed, NOT aspect-ratio — see note below */
  --logo-h:118px;
  --logo-w:300px;   /* never upscale past native size — see note below */
}
/* The card height is a fixed pixel value on purpose. With aspect-ratio, a
   percentage max-height on the image fails to resolve, and the three square
   logos rendered at full intrinsic size and spilled ~60px out of the card.
   A pixel cap also normalises optical size: wide wordmarks are limited by
   width, square badges by height, so they read as equals. */
.partner{
  min-width:0;overflow:hidden;                  /* stops grid items overflowing the row */
  height:var(--card-h);
  background:#2F3238;                           /* same charcoal the live site uses */
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  display:grid;place-items:center;padding:14px 20px;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.partner img{
  max-width:min(100%,var(--logo-w));max-height:var(--logo-h);width:auto;height:auto;
  opacity:.92;transition:opacity .3s var(--ease);
}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.32)}
.partner:hover img{opacity:1}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.ct-list{display:flex;flex-direction:column;gap:12px}
.ct-item{
  display:flex;align-items:center;gap:16px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  transition:.24s var(--ease);
}
a.ct-item:hover{border-color:var(--accent);transform:translateX(5px)}
.ct-ico{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
}
.ct-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-meta{min-width:0}
.ct-meta span{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);font-weight:700}
.ct-meta b{display:block;font-size:16.5px;font-weight:600;margin-top:3px;overflow-wrap:anywhere}

.socials{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.soc{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);transition:.22s var(--ease);
}
.soc:hover{color:#fff;transform:translateY(-3px)}
.soc svg{width:20px;height:20px;fill:currentColor}
.soc.fb:hover{background:#1877F2;border-color:#1877F2}
.soc.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888);border-color:transparent}
.soc.yt:hover{background:#FF0033;border-color:#FF0033}
.soc.dc:hover{background:#5865F2;border-color:#5865F2}

.hours{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:26px 28px}
.hours h3{font-size:22px;margin-bottom:6px}
.hours > p{color:var(--text-dim);font-size:14.5px;margin-bottom:20px}
.hours ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.hours li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text-dim)}
.hours li svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:4px}

/* Footer */
footer{background:var(--bg-alt);border-top:1px solid var(--border);padding:56px 0 32px}
.foot-top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:center;padding-bottom:32px;border-bottom:1px solid var(--border)}
/* No plate: the logo PNG is genuinely transparent. The artwork is dark, so it
   gets a faint light halo on the dark theme to keep its edges readable. */
.foot-logo{background:none;padding:0;display:grid;place-items:center}
.foot-logo img{height:72px;width:auto}
html[data-theme="dark"] .foot-logo img,
html[data-theme="dark"] .about-fig img,
html[data-theme="dark"] .brand-mark{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 0 10px rgba(255,255,255,.12));
}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-nav a{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);transition:color .2s}
.foot-nav a:hover{color:var(--accent)}
.foot-bot{padding-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--text-faint)}
.foot-bot a{color:var(--text-dim)}
.foot-bot a:hover{color:var(--accent)}

/* Back to top */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:90;width:46px;height:46px;border-radius:var(--r-md);
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s var(--ease);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5);
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--accent-hover)}
.totop svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Scroll-reveal animations removed by request — all content is visible
   immediately. The .rv hook is kept only so the markup stays unchanged. */
.rv{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .partners{--card-h:150px;--logo-h:100px}
}
/* Header breakpoint, measured rather than guessed. Brand (198px) + full nav
   (571px) + tools with four language buttons (206px) + gaps needs 1036px. The
   burger used to appear only below 960px, so between 961 and ~1085px the nav
   had nowhere to go and pushed the theme and menu buttons off-screen.
   Switching to the burger at 1080px keeps ~70px of slack at 1081px. */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  /* .nav carried the margin-left:auto that right-aligned the header. With it
     hidden, .tools has to take over that job. */
  .tools{margin-left:auto}
}

@media (max-width:960px){
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:36px}
  .contact{grid-template-columns:1fr;gap:36px}
  .comm{grid-template-columns:1fr}
}
@media (max-width:720px){
  html{scroll-padding-top:74px}
  .wrap{padding:0 18px}
  section{padding:70px 0}
  .hero{padding:132px 0 72px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards,.steps{grid-template-columns:1fr}
  .partners{gap:12px;--card-h:118px;--logo-h:78px}
  .brand-txt span{display:none}
  .cta-row .btn{flex:1;justify-content:center}
}
@media (max-width:480px){
  /* Below this width the wordmark, language switcher and two icon buttons
     cannot all fit. The logo mark alone still identifies the brand, and the
     menu button is the one control that must never disappear. */
  .brand-txt{display:none}
  .tools{gap:6px}
  .lang button{padding:5px 7px;font-size:10px}
}
@media (max-width:420px){
  .partners{--card-h:96px;--logo-h:62px}
  .lang button{padding:5px 6px;font-size:9.5px;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}