/* ==================================================================
   EMAROX.com v2 (wersja kompromisowa) — style.css
   Neutral black + the deep amber gold of the logo. Dark first, light
   designed alongside it. Motion lives in js/motion.js; CSS only sets
   the resting states and the reduced-motion fallbacks.
   ================================================================== */

/* ---- fonts: self-hosted ----
   Variable Plus Jakarta Sans and Inter (SIL Open Font License), latin and
   latin-ext subsets, which cover PL, EN, DE and FR. Served from this site,
   so no visitor data goes to a font service. */
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500 800; font-display:swap; src:url("../assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500 800; font-display:swap; src:url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  /* ---- palette: dark ----
     Neutral greys with no brown cast. The gold is sampled from the logo
     artwork (hue ~40°), not the lemon #d4af37 the old site used. */
  --bg:#0a0a0b;
  --bg-2:#0f0f11;
  --surface:#141417;
  --surface-2:#1b1b1f;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#f4f3f0;
  --text-2:#c2c2c6;
  --text-3:#8a8a90;                         /* 5.4:1 on --surface, AA */

  --gold:#d09a24;
  --gold-hi:#ecbd45;
  --gold-lo:#a86f10;
  --gold-deep:#6e4506;
  --accent:var(--gold);                     /* gold that has to stay legible as text */
  --gold-ink:#130d02;                       /* text on a gold fill */
  --metal:linear-gradient(180deg,#f5d163 0%,#e3aa2e 38%,#c7870f 68%,#93580a 100%);
  --glow:rgba(208,154,36,.16);
  --tint:rgba(208,154,36,.08);
  --tint-2:rgba(208,154,36,.14);

  --nav-bg:rgba(18,18,21,.62);
  --nav-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);

  /* ---- type ---- */
  --font-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,"Segoe UI",Arial,sans-serif;

  /* ---- space ---- */
  --gutter:clamp(16px,4vw,40px);
  /* compromise: ~115 px like viktor.com, down from 184 px */
  --section-y:clamp(56px,6vw,88px);
  --maxw:1240px;
  --nav-h:56px; --nav-top:16px;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.2s; --t:.4s; --t-slow:.8s;

  /* ---- products board ---- */
  --pcb-bed:rgba(0,0,0,.9);
  --pcb-spec:#fff3cf;
  --pcb-charge:#fffaf0;
  --pcb-dead:#4a4232;
  --pcb-dead-hi:#6c5f45;
  --pcb-shroud:#0e0e10; --pcb-shroud-hi:#1f1f23;
  --pcb-well:#050506;   --pcb-well-hi:#19191c;
  --pcb-ic:#1c1c20; --pcb-ic-hi:#3b3b41; --pcb-ic-lo:#0c0c0e;
  --pcb-pin:#b9bcc2; --pcb-pin-hi:#eceef1; --pcb-pin-lo:#6c6f75;

  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#f5f5f3;
  --bg-2:#eeeeeb;
  --surface:#ffffff;
  --surface-2:#f1f1ee;
  --line:rgba(12,12,14,.09);
  --line-2:rgba(12,12,14,.17);
  --text:#0e0e10;
  --text-2:#46464b;
  --text-3:#68686d;                         /* 4.8:1 on --bg-2, AA */

  --gold:#b87d0e;
  --gold-hi:#d99f2a;
  --gold-lo:#8f5c07;
  --gold-deep:#6e4506;
  --accent:#8a5705;                          /* 5.3:1 on --bg, AA for small text */
  --metal:linear-gradient(180deg,#d9a133 0%,#bf8013 42%,#955c07 74%,#6e4506 100%);
  --glow:rgba(184,125,14,.14);
  --tint:rgba(184,125,14,.08);
  --tint-2:rgba(184,125,14,.15);

  --nav-bg:rgba(255,255,255,.74);
  --nav-shadow:0 10px 34px rgba(20,20,24,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-lg:0 30px 70px rgba(20,20,24,.14), 0 4px 14px rgba(20,20,24,.06);

  --pcb-bed:rgba(40,30,8,.28);
  --pcb-spec:#fffaf0;
  --pcb-charge:#7a4a00;
  --pcb-dead:#a39a88;
  --pcb-dead-hi:#bdb4a2;
  --pcb-shroud:#e4e3df; --pcb-shroud-hi:#fbfbfa;
  --pcb-well:#e9e8e4;   --pcb-well-hi:#ffffff;
  --pcb-ic:#3b3a37; --pcb-ic-hi:#6d6b66; --pcb-ic-lo:#262523;
  --pcb-pin:#8e9298; --pcb-pin-hi:#d2d5da; --pcb-pin-lo:#5c6066;

  color-scheme:light;
}

/* ================= base ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
html.no-lenis{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.1; }
::selection{ background:var(--gold); color:var(--gold-ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

.container{ width:100%; max-width:calc(var(--maxw) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }
.section{ position:relative; padding:var(--section-y) 0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:10000;
  background:var(--gold); color:var(--gold-ink); padding:10px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* Shared heading scale. Headings are the page's main visual material,
   so they are big, tight and never decorated with labels above them. */
.h-section{
  font-size:clamp(2.35rem,5.6vw,4.75rem); letter-spacing:-.032em; line-height:1.04;
  text-wrap:balance;
}
/* Tight tracking narrows the spaces as well, so at display sizes two
   words could read as one. Word spacing gives the gaps back; the letters
   keep their tight fit. */
.hero-title{ word-spacing:.06em; }
.h-section, .legal-title{ word-spacing:.04em; }
.contact-aside h2{ word-spacing:.04em; }
.lead{
  font-size:clamp(1.1rem,1.35vw,1.25rem); line-height:1.6; color:var(--text-2);
  max-width:56ch; text-wrap:pretty;
}
/* Plus Jakarta's full stop carries wide side bearings; at display sizes
   it reads as a detached dot, so headings pull it in. */
.dot{ margin-left:-.07em; }
/* SplitText leaves an empty copy of the span behind; without this the pull applies twice while split */
.dot:empty{ margin-left:0; }
.gold-text{
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* background-clip:text drops descenders that hang outside the line box */
  padding-bottom:.06em;
}
/* SplitText line masks: a little room so descenders and the metal
   gradient's bottom are not sliced off by overflow:clip. */
.split-line-mask{ padding-bottom:.08em; margin-bottom:-.08em; }

/* ================= buttons ================= */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:var(--r-pill);
  font-weight:600; font-size:.97rem; letter-spacing:-.005em; line-height:1; white-space:nowrap;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
             background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-arrow{ width:16px; height:16px; transition:transform var(--t) var(--ease-out); }
.btn:hover .btn-arrow{ transform:translateX(3px); }
.btn:active{ transform:translateY(0) scale(.98); }

.btn-primary{
  color:var(--gold-ink);
  background:linear-gradient(180deg,#eab846 0%,#d59a22 55%,#c0820f 100%);
  box-shadow:inset 0 1px 0 rgba(255,244,210,.55), inset 0 -1px 0 rgba(80,45,0,.35),
             0 10px 30px -10px rgba(208,154,36,.55);
}
/* A single slow sheen crosses the button on hover: the same light that
   runs over the wordmark in the brand moment, so the two feel related. */
.btn-primary::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,250,230,.55) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,244,210,.6), inset 0 -1px 0 rgba(80,45,0,.35), 0 16px 36px -12px rgba(208,154,36,.7); }
.btn-primary:hover::after{ transform:translateX(120%); }

.btn-ghost{
  color:var(--text); background:rgba(255,255,255,.035);
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
:root[data-theme="light"] .btn-ghost{ background:rgba(255,255,255,.6); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--accent); transform:translateY(-2px); }

/* ================= NAVBAR ================= */
.site-header{
  position:fixed; top:var(--nav-top); left:0; right:0; z-index:2000;
  display:flex; justify-content:center; padding:0 var(--gutter);
  pointer-events:none;
}
.nav-pill{
  --ctrl:40px;
  pointer-events:auto;
  display:flex; align-items:center; gap:14px; max-width:100%;
  padding:8px 8px 8px 20px; border-radius:var(--r-pill);
  background:var(--nav-bg); border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--nav-shadow);
  transition:border-color var(--t), box-shadow var(--t) var(--ease-out), background-color var(--t);
}
.site-header.is-scrolled .nav-pill{ border-color:var(--line-2); box-shadow:0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="light"] .site-header.is-scrolled .nav-pill{ box-shadow:0 14px 36px rgba(20,20,24,.14), inset 0 1px 0 rgba(255,255,255,.9); }

.nav-logo{ display:flex; align-items:center; height:var(--ctrl); flex-shrink:0; }
.nav-logo-img{ height:26px; width:auto; }
.nav-divider{ width:1px; height:22px; background:var(--line-2); flex-shrink:0; }

.nav-links{ position:relative; display:flex; align-items:center; gap:2px; }
.nav-link{
  position:relative; z-index:1; display:flex; align-items:center; height:var(--ctrl);
  padding:0 15px; border-radius:var(--r-pill);
  font-size:.92rem; font-weight:500; color:var(--text-2); white-space:nowrap;
  transition:color var(--t-fast);
}
.nav-link:hover{ color:var(--text); }
.nav-link.is-active{ color:var(--accent); }
.nav-indicator{
  position:absolute; left:0; top:50%; height:var(--ctrl); margin-top:calc(var(--ctrl) / -2);
  width:0; border-radius:var(--r-pill); background:var(--tint);
  opacity:0; pointer-events:none; z-index:0;
  transition:transform var(--t) var(--ease-out), width var(--t) var(--ease-out), opacity var(--t-fast);
}
.nav-indicator.is-on{ opacity:1; }

.nav-right{ display:flex; align-items:center; gap:4px; }
.control-btn{
  width:var(--ctrl); height:var(--ctrl); display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); color:var(--text-2);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.control-btn:hover{ background:var(--tint-2); color:var(--accent); }
.control-btn-wide{ width:auto; padding:0 12px; gap:6px; font-size:.84rem; font-weight:600; letter-spacing:.02em; }
.icon{ width:19px; height:19px; flex-shrink:0; }

.lang-switcher{ position:relative; }
.lang-caret{ transition:transform var(--t-fast) var(--ease-out); }
.lang-switcher.open .lang-caret{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:150px; padding:6px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transform:translateY(-6px) scale(.97); transform-origin:top right;
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
:root[data-theme="light"] .lang-menu{ box-shadow:0 18px 40px rgba(20,20,24,.14); }
.lang-switcher.open .lang-menu{ opacity:1; pointer-events:auto; transform:none; }
.lang-opt{
  display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%;
  padding:9px 12px; border-radius:9px; text-align:left;
  font-size:.88rem; font-weight:500; color:var(--text-2);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.lang-opt small{ font-size:.7rem; font-weight:600; letter-spacing:.08em; color:var(--text-3); }
.lang-opt:hover{ background:var(--tint); color:var(--text); }
.lang-opt.active{ color:var(--accent); }
.lang-opt.active small{ color:var(--accent); }

.theme-icons{ position:relative; width:19px; height:19px; display:block; }
.theme-icons .icon{ position:absolute; inset:0; transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out); }
.icon-sun{ opacity:0; transform:rotate(-90deg) scale(.5); }
.icon-moon{ opacity:1; transform:none; }
:root[data-theme="light"] .icon-sun{ opacity:1; transform:none; }
:root[data-theme="light"] .icon-moon{ opacity:0; transform:rotate(90deg) scale(.5); }

/* hamburger */
.mobile-trigger{
  display:none; width:44px; height:44px; margin-left:auto; flex-shrink:0;
  align-items:center; justify-content:center; border-radius:var(--r-pill);
  transition:background-color var(--t-fast);
}
.mobile-trigger:hover{ background:var(--tint-2); }
.hamburger{ position:relative; width:22px; height:14px; display:block; }
.hamburger span{
  position:absolute; left:0; width:100%; height:1.8px; border-radius:2px; background:var(--text);
  transition:transform .45s var(--ease-out), opacity .2s, width .45s var(--ease-out), top .45s var(--ease-out);
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:6px; width:64%; }
.hamburger span:nth-child(3){ top:12px; }
.mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(1){ top:6px; transform:rotate(45deg); }
.mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; width:0; }
.mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:1990; background:var(--bg);
  opacity:0; pointer-events:none; visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-out), opacity .3s var(--ease-out), visibility 0s linear .6s;
  overscroll-behavior:contain;
}
.mobile-menu::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 50% at 50% 0%, var(--glow), transparent 70%);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .6s var(--ease-out), opacity .3s var(--ease-out), visibility 0s; }
.mobile-menu:focus{ outline:none; }
.mobile-menu-scroll{
  position:relative; height:100%; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  padding:calc(var(--nav-h) + var(--nav-top) + 48px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
}
.mobile-nav{ display:flex; flex-direction:column; }
.mobile-link{
  display:flex; align-items:baseline; gap:18px; width:100%; text-align:left;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,8vw,2.4rem); letter-spacing:-.03em;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--t-fast);
}
.mobile-menu.open .mobile-link{ opacity:1; transform:none; }
.mobile-menu.open .mobile-link:nth-child(1){ transition-delay:.12s; }
.mobile-menu.open .mobile-link:nth-child(2){ transition-delay:.18s; }
.mobile-menu.open .mobile-link:nth-child(3){ transition-delay:.24s; }
.mobile-menu.open .mobile-link:nth-child(4){ transition-delay:.30s; }
.mobile-link:active{ color:var(--accent); }

.mobile-foot{
  display:flex; flex-direction:column; gap:22px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out) .38s, transform .5s var(--ease-out) .38s;
}
.mobile-menu.open .mobile-foot{ opacity:1; transform:none; }
.mobile-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mobile-langs{ display:flex; gap:4px; padding:4px; border:1px solid var(--line-2); border-radius:var(--r-pill); }
.mobile-langs .lang-opt{ width:auto; padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:.82rem; }
.mobile-langs .lang-opt.active{ background:var(--tint-2); }
.mobile-theme{
  display:flex; align-items:center; gap:9px; padding:11px 18px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-size:.85rem; font-weight:600; color:var(--text-2);
}
.mobile-theme .icon{ width:18px; height:18px; }
.mobile-theme .icon-sun{ display:none; opacity:1; transform:none; }
.mobile-theme .icon-moon{ display:block; opacity:1; transform:none; }
:root[data-theme="light"] .mobile-theme .icon-sun{ display:block; }
:root[data-theme="light"] .mobile-theme .icon-moon{ display:none; }
.mobile-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:18px; border-top:1px solid var(--line); font-size:.9rem; color:var(--text-2); }

@media (max-width:960px){
  .nav-desktop-only{ display:none !important; }
  .mobile-trigger{ display:flex; }
  .nav-pill{ width:100%; padding:6px 6px 6px 18px; }
}

/* theme switch: circular wipe from the pressed button (View Transitions) */
::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
::view-transition-old(root){ z-index:1; }
::view-transition-new(root){ z-index:2; }
:root.theme-switching *{ transition:none !important; }

/* ================= HERO =================
   Typography only. The light is two soft radial pools that drift very
   slowly (softened by about half on 2026-09-26), plus a fine grain so the gradient does not band on 8-bit
   panels. Nothing else is allowed in here. */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + var(--nav-top) + 40px) 0 120px;
  overflow:hidden; isolation:isolate;
}
.hero-light{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.hero-light::before, .hero-light::after{
  content:''; position:absolute; left:50%; border-radius:50%;
  transform:translateX(-50%); will-change:transform;
}
.hero-light::before{
  top:-38vh; width:min(1500px,150vw); height:88vh;
  background:radial-gradient(closest-side, rgba(242,200,104,.07), rgba(236,189,69,.024) 55%, transparent);
  animation:heroDrift 22s var(--ease-io) infinite alternate;
}
.hero-light::after{
  top:-10vh; width:min(700px,90vw); height:46vh;
  background:radial-gradient(closest-side, rgba(255,236,190,.035), transparent);
  animation:heroDrift2 17s var(--ease-io) infinite alternate;
}
:root[data-theme="light"] .hero-light::before{ background:radial-gradient(closest-side, rgba(200,140,30,.11), rgba(200,140,30,.035) 55%, transparent); }
:root[data-theme="light"] .hero-light::after{ background:radial-gradient(closest-side, rgba(255,220,150,.2), transparent); }
@keyframes heroDrift{ from{ transform:translateX(-54%) scale(1); } to{ transform:translateX(-46%) scale(1.08); } }
@keyframes heroDrift2{ from{ transform:translateX(-30%); } to{ transform:translateX(-70%); } }

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.028; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .grain{ opacity:.07; mix-blend-mode:multiply; }

.hero-inner{ position:relative; text-align:center; will-change:transform,opacity; }
.hero-title{
  font-size:clamp(3rem,min(9.4vw,15svh),8.6rem); font-weight:700;
  letter-spacing:-.042em; line-height:1;
  margin:0 auto; max-width:12ch;
}
.hero-title .line{ display:block; text-wrap:balance; }
.hero-sub{
  margin:clamp(24px,3vw,36px) auto 0; max-width:44ch;
  font-size:clamp(1.05rem,1.45vw,1.25rem); line-height:1.55; color:var(--text-2); text-wrap:balance;
}
.hero-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:clamp(32px,4vw,44px); }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--text-2);
}
.scroll-cue-line{ position:relative; width:2px; height:52px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.scroll-cue-line::after{
  content:''; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:linear-gradient(transparent, var(--gold-hi));
  animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ to{ top:100%; } }

/* Pre-JS resting state: hidden only while the intro is pending, so the
   hero is never blank if a script fails. */
.js-intro .hero-title, .js-intro .hero-sub, .js-intro .hero-cta, .js-intro .scroll-cue{ visibility:hidden; }
.js-intro .site-header{ opacity:0; }

/* ================= LINE BREAKING =================
   Headings and short centred texts are balanced (lines of similar
   length); running text is "pretty" (the browser avoids a lone word on
   the last line and ragged rivers). Single-letter words and numbers with
   their units are glued by js/i18n.js (typography()), per language. */
h1, h2, h3, h4, .faq-btn span, .who-role, .inside-cap-title, .bus-soon-title, .trust-fact dt{ text-wrap:balance; }
p, li, dd, figcaption, .lead, .faq-a-inner p{ text-wrap:pretty; }
.hero-sub, .section-center .lead, .closing .lead, .contact-sub{ text-wrap:balance; }

/* ================= HERO ROUTE (TEST 2026-09-26) =================
   The example run of the whole page, Katowice -> Lyon by bus, drawn once
   behind the headline from the real OSRM route (tools/build-route.py).
   Thin, one colour, no glow; the middle is dimmed by a mask so the
   headline and the line under it stay easy to read. Without JS or with
   reduced motion it is simply there, fully drawn. To remove the test:
   delete the ROUTE block in index.html and this section. */
.hero-route{
  position:absolute; z-index:0; pointer-events:none;
  inset:calc(var(--nav-top) + var(--nav-h) + 12px) clamp(16px,5vw,80px) clamp(40px,9vh,110px);
  /* behind the headline the line is barely there, it comes up to full
     strength only towards the edges, where Katowice and Lyon sit */
  -webkit-mask-image:radial-gradient(ellipse 50% 44% at 50% 46%, rgba(0,0,0,.14) 35%, #000 100%);
          mask-image:radial-gradient(ellipse 50% 44% at 50% 46%, rgba(0,0,0,.14) 35%, #000 100%);
}
.hero-route svg{ width:100%; height:100%; overflow:visible; }
/* widths are in the SVG's own units (1000 wide), not non-scaling: with
   vector-effect:non-scaling-stroke Chrome measures the dashes in screen
   space while pathLength="1" is in path space, and the gold line stopped
   short of Lyon on wide screens */
.route-base, .route-line{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.route-base{ stroke:var(--line-2); stroke-width:1.1; stroke-dasharray:.003 .007; }
.route-line{ stroke:var(--gold); stroke-width:1.7; stroke-dasharray:1 1; stroke-dashoffset:0; opacity:.5; }
/* the moving light: a bright head with a soft halo and a tail of three
   stacked dashes (long and faint, shorter and stronger, short and bright)
   that all end at the head, so the tail fades out behind it. motion.js
   moves it; without JS or with reduced motion it stays hidden. */
.route-car{ opacity:0; }
.route-track{ fill:none; stroke:none; }
.hero-route.is-car{
  -webkit-mask-image:radial-gradient(ellipse 50% 44% at 50% 46%, rgba(0,0,0,.55) 35%, #000 100%);
          mask-image:radial-gradient(ellipse 50% 44% at 50% 46%, rgba(0,0,0,.55) 35%, #000 100%);
}
.route-trail{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke:#f2c55a; }
.route-trail.t1{ stroke-width:2.2; opacity:.22; }
.route-trail.t2{ stroke-width:2.4; opacity:.45; }
.route-trail.t3{ stroke-width:2.6; opacity:.95; stroke:#ffe08a; }
.route-glow{ fill:url(#routeGlow); }
.route-head{ fill:#fff3cf; }
:root[data-theme="light"] .route-trail{ stroke:#c7870f; }
:root[data-theme="light"] .route-trail.t3{ stroke:#b87d0e; }
:root[data-theme="light"] .route-head{ fill:#b87d0e; }
.route-city circle{ fill:var(--bg); stroke:var(--gold); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.route-city.is-end circle{ fill:var(--gold); }
.route-city text{
  fill:var(--text-3); font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.hero-inner{ z-index:1; }
/* until motion.js takes over (js-intro), the route is not drawn yet, so it
   never shows complete for a moment and then starts again */
.js-intro .route-line{ stroke-dashoffset:1; }
.js-intro .route-city{ opacity:0; }
/* phones: the route sits in the free band between the menu and the
   headline, small and whole, never behind the text or the buttons */
@media (max-width:700px){
  .hero-route{
    inset:calc(var(--nav-top) + var(--nav-h) + 14px) 16px auto; height:clamp(90px,17vh,150px);
    -webkit-mask-image:none; mask-image:none;
  }
  .route-city text{ font-size:26px; }
  .route-base{ stroke-width:3; }
  .route-line{ stroke-width:4.5; }
  .route-trail.t1{ stroke-width:5; } .route-trail.t2{ stroke-width:5.5; } .route-trail.t3{ stroke-width:6; }
  .route-glow{ r:34; } .route-head{ r:7; }
  .hero-route.is-car{ -webkit-mask-image:none; mask-image:none; }
  .route-city circle{ r:9; }
}

/* ================= HERO INTRO =================
   The brand moment opens the hero instead of following it: the words and
   the wordmark share one grid cell centred on the hero, play once per
   session (~2.4 s) and leave the stage to the headline. Hidden unless
   motion.js starts it, so without JS or with reduced motion the hero
   simply shows. */
.hero-intro{
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  pointer-events:none; visibility:hidden;
}
.hero.is-intro .hero-intro{ visibility:visible; }
.hero-intro > *{ grid-area:1 / 1; }
.brand-words{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .26em;
  font-family:var(--font-head); font-weight:700; letter-spacing:-.035em; line-height:1.05;
  font-size:clamp(2.6rem,7.4vw,6.6rem); text-align:center; padding:0 var(--gutter);
  user-select:none;
}
.brand-word{ display:inline-block; will-change:transform,opacity,filter; }
.brand-wordmark{
  position:relative; width:min(72vw,820px); aspect-ratio:1501 / 346;
  user-select:none; -webkit-user-select:none;
}
.brand-wordmark-img, .brand-wordmark-sheen{ position:absolute; inset:0; pointer-events:none; }
.brand-wordmark-img{
  background:url("../assets/logo/emarox-wordmark.webp") center / contain no-repeat;
  filter:drop-shadow(0 22px 50px rgba(0,0,0,.6));
}
:root[data-theme="light"] .brand-wordmark-img{ filter:drop-shadow(0 18px 38px rgba(110,69,6,.22)); }
/* The sheen is a bright band masked by the wordmark itself, so light
   runs over the letters only, never over the page around them. */
.brand-wordmark-sheen{
  -webkit-mask:url("../assets/logo/emarox-wordmark.webp") center / contain no-repeat;
          mask:url("../assets/logo/emarox-wordmark.webp") center / contain no-repeat;
  background:linear-gradient(100deg, transparent 38%, rgba(255,246,214,.9) 50%, transparent 62%) no-repeat;
  background-size:260% 100%; background-position:160% 0;
  mix-blend-mode:screen; opacity:.9;
}
:root[data-theme="light"] .brand-wordmark-sheen{ mix-blend-mode:soft-light; opacity:1; }

/* ================= MISJA =================
   One column, one left edge: heading, the letter, the signature under it.
   The letter is clearly a step below the heading by size and weight
   (about half the size, 500 against 700), and reads in one even colour:
   no dimmed middle with bright lines around it. */
.mission .h-section{ max-width:22ch; }
.mission-statement{
  margin-top:clamp(32px,4vw,52px);
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.18rem,1.8vw,1.65rem); line-height:1.5; letter-spacing:-.012em;
  max-width:40ch; color:var(--text); text-wrap:pretty;
}
/* the letter runs in three short paragraphs, with air between them */
.mission-statement p{ text-wrap:pretty; }
.mission-statement p + p{ margin-top:1.1em; }
/* read-along starts from a legible grey, not from near-invisible */
.mission-statement .sw{ opacity:.34; }
/* Signed like the end of a letter: a short stroke of gold under the
   last line, drawn in when it arrives, and the name beneath it. */
.mission-sign{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  margin-top:clamp(32px,4vw,48px);
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.05rem,1.3vw,1.2rem); letter-spacing:-.01em; color:var(--text);
}
.mission-sign-rule{
  display:block; width:56px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold-hi), var(--gold-lo));
  transform-origin:0 50%; transform:scaleX(0); transition:transform 1.1s var(--ease-out) .3s;
}
.mission-sign.is-visible .mission-sign-rule{ transform:none; }
@media (prefers-reduced-motion: reduce){ .mission-sign-rule{ transform:none; transition:none; } }

/* shared: heading left, lead bottom-right. A grid with fixed columns,
   not a wrapping flex row: while its lines are split for the reveal the
   heading is narrower than at rest, and in a flex row that difference
   was enough to let the lead sit beside it and then drop below it the
   moment the reveal ended. */
.split-head, .cmp-head{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:24px clamp(32px,5vw,80px); align-items:end;
}
.split-head .h-section{ max-width:13ch; }
.split-head .lead, .cmp-head .lead{ justify-self:end; max-width:40ch; padding-bottom:.4em; }
@media (max-width:900px){
  .split-head, .cmp-head{ grid-template-columns:1fr; }
  .split-head .lead, .cmp-head .lead{ justify-self:start; }
}

/* ================= DLA KOGO =================
   Rows with hairlines, the role on the left in the heading face, what
   changes for that person on the right. Deliberately not a card grid. */
.who-list{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); }
.who-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:12px 48px; align-items:baseline;
  padding:clamp(26px,3vw,38px) 0; border-bottom:1px solid var(--line);
}
.who-role{ font-size:clamp(1.35rem,2.2vw,1.9rem); letter-spacing:-.025em; line-height:1.15; transition:color var(--t) var(--ease-out); }
.who-row:hover .who-role{ color:var(--accent); }
.who-text{ font-size:clamp(1.06rem,1.3vw,1.18rem); line-height:1.6; color:var(--text-2); max-width:56ch; text-wrap:pretty; }
/* The head uses the rows' own grid, so the lead starts on the same left
   edge as the texts under it; the heading is set in three short lines by
   hand and is a size smaller, so it fits the narrower left column. */
#dla-kogo .split-head{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 48px; }
#dla-kogo .split-head .h-section{ max-width:none; font-size:clamp(2rem,3.2vw,3.2rem); text-wrap:initial; }
#dla-kogo .split-head .lead{ justify-self:start; max-width:56ch; }
@media (max-width:900px){ #dla-kogo .split-head{ grid-template-columns:1fr; } }
@media (max-width:760px){ .who-row{ grid-template-columns:1fr; } }

/* ================= PRODUKTY — bus =================
   The EMAROX core at the top of a gold rail; every product is a row that
   branches off it, so the section grows by adding rows. Conductors keep
   the board's material: a gold body, a dark bed under it, a via where a
   branch leaves the rail. The rail is powered to the last live product,
   then a dashed, unpowered run leads to the "in preparation" socket. */
.bus{
  --rail:clamp(56px,9vw,132px); --core:clamp(76px,9vw,124px);
  --gap:clamp(28px,3vw,40px); --branch-y:clamp(56px,6vw,76px); --tw:3px;
  position:relative; margin-top:clamp(48px,6vw,80px);
}
.bus-core{ width:var(--rail); display:flex; justify-content:center; }
.bus-core .core{ position:relative; left:auto; top:auto; transform:none; width:var(--core); }
.bus-list{ position:relative; display:flex; flex-direction:column; }
.bus-item{ position:relative; padding-left:var(--rail); padding-top:var(--gap); }
.bus-item[hidden]{ display:none; }
.bus-rail{
  position:absolute; left:calc(var(--rail) / 2 - var(--tw) / 2); top:0; bottom:0; width:var(--tw);
  border-radius:2px; transform-origin:50% 0;
}
.bus-branch{
  position:absolute; left:calc(var(--rail) / 2); width:calc(var(--rail) / 2); height:var(--tw);
  top:calc(var(--gap) + var(--branch-y) - var(--tw) / 2); border-radius:2px; transform-origin:0 50%;
}
.is-live > .bus-rail{
  overflow:hidden;
  background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 45%, var(--gold));
  box-shadow:1.5px 1px 0 var(--pcb-bed);
}
.is-live > .bus-branch{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  box-shadow:0 1.5px 0 var(--pcb-bed);
}
.bus-branch::before{
  content:''; position:absolute; left:-5.5px; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #fff0bf, var(--gold) 55%, var(--gold-lo));
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
:root[data-theme="light"] .bus-branch::before{ box-shadow:0 1px 2px rgba(40,30,8,.3); }
.is-soon > .bus-rail{
  bottom:auto; height:calc(var(--gap) + var(--branch-y));
  background:repeating-linear-gradient(180deg, var(--pcb-dead-hi) 0 6px, transparent 6px 12px);
  width:2px; left:calc(var(--rail) / 2 - 1px);
}
.is-soon > .bus-branch{ height:2px; background:repeating-linear-gradient(90deg, var(--pcb-dead-hi) 0 6px, transparent 6px 12px); }
.is-soon > .bus-branch::before{ background:var(--pcb-dead); box-shadow:none; }
/* charge running down the powered rail */
.bus.is-on .is-live > .bus-rail::after{
  content:''; position:absolute; left:0; right:0; top:-30%; height:30%;
  background:linear-gradient(180deg, transparent, var(--pcb-charge), transparent);
  animation:cue 2.8s linear infinite;
}

/* ---- core socket ---- */
.core{ position:relative; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; z-index:2; }
.core > span{ position:absolute; border-radius:50%; }
.core-shroud{
  inset:-7%;
  background:radial-gradient(circle at 38% 30%, var(--pcb-shroud-hi), var(--pcb-shroud) 68%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.10), inset 0 -6px 14px rgba(0,0,0,.7), 0 24px 54px rgba(0,0,0,.6);
}
:root[data-theme="light"] .core-shroud{ box-shadow:inset 0 2px 3px #fff, inset 0 -6px 14px rgba(40,30,10,.14), 0 20px 44px rgba(40,30,10,.16); }
.core-ring{
  inset:0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0deg 1.1deg, rgba(0,0,0,.06) 1.1deg 2.2deg),
    conic-gradient(from 208deg, var(--gold-deep) 0deg, var(--gold-hi) 58deg, var(--gold) 116deg,
      var(--gold-deep) 184deg, var(--gold-hi) 262deg, var(--gold) 316deg, var(--gold-deep) 360deg);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.55), 0 0 0 1px var(--gold-deep);
}
.core-chamfer{
  inset:8%;
  background:conic-gradient(from 28deg, var(--gold-deep) 0deg, var(--gold) 74deg, var(--gold-hi) 150deg,
    var(--gold-deep) 214deg, var(--gold) 292deg, var(--gold-deep) 360deg);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.28);
}
.core-well{
  position:relative !important; width:80%; aspect-ratio:1; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 52% 72%, var(--pcb-well-hi), var(--pcb-well) 70%);
  box-shadow:inset 0 3px 11px rgba(0,0,0,.9), inset 0 0 18px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.07);
}
:root[data-theme="light"] .core-well{ box-shadow:inset 0 3px 10px rgba(40,30,10,.28), inset 0 0 16px rgba(40,30,10,.12), inset 0 -1px 0 #fff; }
.core-well img{ width:70%; height:auto; }

/* ---- empty socket ---- */
.socket{
  position:relative; width:44px; aspect-ratio:1; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 58% 74%, var(--pcb-well-hi), var(--pcb-well) 72%);
  box-shadow:inset 0 6px 10px rgba(0,0,0,.95), inset 0 0 14px #000, inset 0 -2px 2px rgba(255,255,255,.08),
             0 0 0 1.5px rgba(208,154,36,.22), 0 1px 0 rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.5);
}
:root[data-theme="light"] .socket{ box-shadow:inset 0 5px 9px rgba(40,30,10,.3), inset 0 0 10px rgba(40,30,10,.12), inset 0 -2px 2px #fff, 0 0 0 1.5px rgba(160,110,20,.35), 0 6px 14px rgba(40,30,10,.12); }
.socket::after{
  content:''; position:absolute; left:50%; top:50%; width:18%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--pcb-dead);
}
.bus-soon{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; }
.bus-soon .socket{ margin-top:calc(var(--branch-y) - 22px); }
.bus-soon > div{ padding-top:calc(var(--branch-y) - 30px); }
.bus-soon-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:-.02em; line-height:1.25; }
.bus-soon-text{ margin-top:8px; color:var(--text-2); max-width:54ch; text-wrap:pretty; }
.text-link{
  display:inline; padding:0; font:inherit; font-weight:600; color:var(--accent);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color var(--t-fast);
}
.text-link:hover{ color:var(--gold-hi); }

/* ---- product card ---- */
.pcard{
  position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--bg-2);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.pcard.no-shot{ grid-template-columns:1fr; }
:root[data-theme="light"] .pcard{ background:var(--surface); box-shadow:var(--shadow-lg), inset 0 1px 0 #fff; }
/* the edge the branch plugs into lights up when the card powers on */
.pcard::before{
  content:''; position:absolute; left:-1px; top:calc(var(--branch-y) - 44px); width:2px; height:88px; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--gold-hi), transparent);
  opacity:0; transition:opacity .8s var(--ease-out);
}
.pcard.is-powered::before{ opacity:1; }
.pcard-body{ padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; }
.pcard-top{ display:flex; align-items:center; gap:12px; }
.pcard-mark{ width:38px; height:38px; border-radius:10px; background:#0b1a24; padding:5px; flex-shrink:0; }
.pcard-top h3{ font-size:clamp(1.4rem,2vw,1.7rem); letter-spacing:-.025em; }
.pcard-state{ margin-left:auto; font-size:.82rem; font-weight:600; color:var(--text-3); }
.pcard-desc{ margin-top:18px; color:var(--text-2); font-size:1.08rem; line-height:1.6; max-width:48ch; text-wrap:pretty; }
.pcard-list{ margin:20px 0 22px; display:flex; flex-direction:column; gap:11px; }
.pcard-list li{ display:flex; gap:12px; align-items:baseline; font-size:1.02rem; line-height:1.45; }
.pcard-list li::before{
  content:''; width:6px; height:6px; flex-shrink:0; transform:translateY(-1px) rotate(45deg);
  border:1px solid var(--gold); border-radius:1px;
}
.pcard-for{ margin-bottom:26px; font-size:.95rem; color:var(--text-3); }
.pcard-cta{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.97rem; color:var(--accent);
  padding:12px 20px; border-radius:var(--r-pill); border:1px solid var(--tint-2); background:var(--tint);
  transition:background-color var(--t-fast), border-color var(--t-fast), transform var(--t) var(--ease-out);
}
.pcard-cta svg{ width:15px; height:15px; transition:transform var(--t) var(--ease-out); }
.pcard-cta:hover{ background:var(--tint-2); border-color:var(--gold); transform:translateY(-1px); }
.pcard-cta:hover svg{ transform:translate(2px,-2px); }
.pcard-shot{ position:relative; display:block; overflow:hidden; aspect-ratio:8 / 9; border-left:1px solid var(--line); background:#0d1720; }
/* the picture is composed for this 8:9 slot, so it is shown whole */
.pcard-shot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  transition:transform 1.2s var(--ease-out);
}
.pcard:hover .pcard-shot img{ transform:scale(1.03); }
.pcard-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,10,11,.28), transparent 14%);
}
:root[data-theme="light"] .pcard-shot::after{ background:linear-gradient(90deg, rgba(0,0,0,.08), transparent 14%); }

@media (max-width:900px){
  .pcard{ grid-template-columns:1fr; }
  .pcard-shot{ border-left:0; border-top:1px solid var(--line); aspect-ratio:1; }
  .pcard-shot img{ object-position:50% 0; }
}
@media (max-width:600px){
  .bus{ --rail:34px; --core:58px; --branch-y:40px; }
  .bus-core{ justify-content:flex-start; margin-left:calc(var(--rail) / 2 - var(--core) / 2); width:auto; }
  .bus-branch::before{ width:9px; height:9px; left:-4.5px; margin-top:-4.5px; }
  .bus-soon{ gap:14px; }
  .bus-soon .socket{ width:36px; margin-top:calc(var(--branch-y) - 18px); }
  .bus-soon > div{ padding-top:calc(var(--branch-y) - 26px); }
}

/* ================= PORÓWNANIE =================
   Tabs across the top, each with a thin line that fills while it plays
   (a CSS animation; its end moves to the next tab, so there is no timer
   to drift). Panels share one grid cell, so switching never changes the
   section height, and cross-fade. Inside the new panel things arrive in
   order: the time, the meter, the steps, the app's own numbers. The old
   way's meter crawls; Emarox's barely moves. That is the whole point. */
.cmp-head .h-section{ max-width:12ch; }
.cmp-head .lead{ max-width:34ch; }
.cmp{ margin-top:clamp(44px,6vw,80px); }

.cmp-tabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,28px); }
.cmp-tab{
  position:relative; padding:18px 0 0; text-align:left;
  font-family:var(--font-head); font-weight:600; font-size:clamp(.95rem,1.25vw,1.08rem); letter-spacing:-.012em;
  color:var(--text-3); transition:color var(--t) var(--ease-out);
}
.cmp-tab:hover, .cmp-tab[aria-selected="true"]{ color:var(--text); }
.cmp-tab:focus-visible{ outline-offset:6px; }
.cmp-tab-bar{ position:absolute; top:0; left:0; right:0; height:2px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.cmp-tab-bar::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transform:scaleX(0); transform-origin:0 50%;
}
.cmp-tab[aria-selected="true"] .cmp-tab-bar::after{ transform:scaleX(1); transition:transform .6s var(--ease-out); }

.cmp-stage{ display:grid; margin-top:clamp(24px,3vw,36px); }
.cmp-panel{
  grid-area:1/1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px,1.8vw,24px);
  visibility:hidden; opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s;
}
.cmp-panel.is-active{ visibility:visible; opacity:1; transform:none; transition:opacity .7s var(--ease-out) .12s, transform .7s var(--ease-out) .12s, visibility 0s; }
.cmp-panel:focus-visible{ outline-offset:8px; border-radius:var(--r-lg); }

.cmp-card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,3vw,40px); border-radius:var(--r-lg); border:1px solid var(--line);
}
.cmp-card.is-old{ background:transparent; }
.cmp-card.is-new{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%), var(--surface);
  border-color:var(--line-2);
}
:root[data-theme="light"] .cmp-card.is-new{ background:var(--surface); box-shadow:0 24px 60px -30px rgba(20,20,24,.25); }
/* a single hairline of gold along the top edge: metal catching light */
.cmp-card.is-new::before{
  content:''; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-hi), transparent); opacity:.7;
}
.cmp-who{ display:flex; align-items:center; gap:10px; font-size:.98rem; font-weight:600; color:var(--text-3); }
.cmp-card.is-new .cmp-who{ color:var(--text); }
.cmp-who img{ width:22px; height:22px; object-fit:contain; }
.cmp-time{
  margin-top:clamp(18px,2.4vw,28px);
  font-family:var(--font-head); font-weight:700; font-size:clamp(2.1rem,4.2vw,3.6rem); letter-spacing:-.035em; line-height:1;
  color:var(--text-2);
}
.cmp-card.is-new .cmp-time{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
.cmp-meter{ display:block; height:4px; margin-top:20px; border-radius:4px; background:var(--line); overflow:hidden; }
.cmp-meter i{ display:block; height:100%; border-radius:inherit; background:var(--text-3); transform:scaleX(0); transform-origin:0 50%; }
.cmp-card.is-new .cmp-meter i{ background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); min-width:10px; }
.cmp-panel.is-active .cmp-meter i{ transform:scaleX(var(--v)); }
.cmp-panel.is-active .is-old .cmp-meter i{ transition:transform 2.6s cubic-bezier(.45,.05,.4,1) .35s; }
.cmp-panel.is-active .is-new .cmp-meter i{ transition:transform .5s var(--ease-out) .45s; }

.cmp-steps{ margin-top:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:12px; counter-reset:cmp; }
.cmp-steps li{
  position:relative; padding-left:34px; font-size:1.06rem; line-height:1.45; color:var(--text-2); text-wrap:pretty;
  counter-increment:cmp;
}
.cmp-steps li::before{
  content:counter(cmp); position:absolute; left:0; top:.05em;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:600; color:var(--text-3); border:1px solid var(--line-2);
}
.is-new .cmp-steps li{ color:var(--text); }
.is-new .cmp-steps li::before{ color:var(--gold-ink); background:var(--metal); border-color:transparent; }

.cmp-readout{
  margin-top:auto; padding-top:clamp(22px,2.6vw,32px);
  font-variant-numeric:tabular-nums;
}
.cmp-readout div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-top:1px solid var(--line); font-size:1rem; }
.cmp-readout dt{ color:var(--text-2); min-width:0; }
.cmp-readout dd{ font-weight:600; white-space:nowrap; }
.cmp-readout .is-sum dt{ color:var(--text); font-weight:600; }
.cmp-readout .is-sum dd{ color:var(--accent); font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }

/* arrival order inside a freshly shown panel */
.cmp-panel .cmp-time, .cmp-panel .cmp-steps li, .cmp-panel .cmp-readout div{
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.cmp-panel.is-active .cmp-time, .cmp-panel.is-active .cmp-steps li, .cmp-panel.is-active .cmp-readout div{
  opacity:1; transform:none; transition-duration:.8s; transition-delay:calc(.2s + var(--k,0) * .07s);
}
.cmp-panel.is-active .cmp-steps li:nth-child(1){ --k:3; } .cmp-panel.is-active .cmp-steps li:nth-child(2){ --k:4; }
.cmp-panel.is-active .cmp-steps li:nth-child(3){ --k:5; } .cmp-panel.is-active .cmp-steps li:nth-child(4){ --k:6; }
.cmp-panel.is-active .cmp-readout div:nth-child(1){ --k:7; } .cmp-panel.is-active .cmp-readout div:nth-child(2){ --k:8; }
.cmp-panel.is-active .cmp-readout div:nth-child(3){ --k:9; } .cmp-panel.is-active .cmp-readout div:nth-child(4){ --k:10; }
.cmp-panel.is-active .is-new .cmp-time{ --k:1; }

/* phones: tabs become a row you can swipe, cards stack */
@media (max-width:760px){
  .cmp-tabs{
    display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); scroll-padding:0 var(--gutter);
  }
  .cmp-tabs::-webkit-scrollbar{ display:none; }
  .cmp-tab{ flex:none; white-space:nowrap; padding-bottom:4px; }
  .cmp-panel{ grid-template-columns:1fr; }
}

/* ================= LUDZIE =================
   Left: the claim and a phone number set large in metal, the one thing
   an older visitor looks for first. Right: four plain facts as a
   definition list with hairlines. */
.trust{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start; }
.trust-head .h-section{ max-width:12ch; }
.trust-head .lead{ margin-top:24px; max-width:40ch; }
.trust-reach{ margin-top:clamp(28px,3.5vw,40px); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.trust-phone{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.03em; line-height:1.15;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em;
  font-variant-numeric:tabular-nums; transition:opacity var(--t-fast);
}
.trust-phone:hover{ opacity:.85; }
.trust-mail{ font-size:1.06rem; font-weight:500; color:var(--text-2); transition:color var(--t-fast); }
.trust-mail:hover{ color:var(--accent); }
/* on touch screens the links become inline-flex (48 px hit area), which
   drops the space in "Biuro: +48 ..."; the gap puts it back */
.trust-reach a{ column-gap:.3em; }
.trust-facts{ border-top:1px solid var(--line); }
.trust-fact{
  display:grid; gap:6px;
  padding:clamp(22px,2.6vw,30px) 0; border-bottom:1px solid var(--line);
}
.trust-fact dt{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:-.02em; line-height:1.2; }
.trust-fact dd{ color:var(--text-2); line-height:1.55; max-width:44ch; text-wrap:pretty; }
@media (max-width:900px){ .trust{ grid-template-columns:1fr; } }

/* ================= W ŚRODKU =================
   Real screens of Emarox Map. One wide shot with its caption, then rows:
   picture on one side, short text on the other, alternating. Frames are
   hairline surfaces like .pcard, never glowing. */
.inside-hero{
  margin-top:clamp(40px,5vw,64px); border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:var(--surface); box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.inside-hero img{ display:block; width:100%; height:auto; }
.inside-hero figcaption{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:10px 48px; align-items:baseline;
  padding:clamp(22px,2.8vw,36px) clamp(22px,3vw,44px); border-top:1px solid var(--line);
}
.inside-cap-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-.02em; word-spacing:.04em; line-height:1.18; color:var(--text); }
.inside-hero figcaption p:not(.inside-cap-title){ font-size:clamp(1.06rem,1.3vw,1.18rem); line-height:1.6; color:var(--text-2); max-width:56ch; text-wrap:pretty; }

:root[data-theme="light"] .inside-hero{ box-shadow:0 24px 60px rgba(0,0,0,.12); }
@media (max-width:900px){
  .inside-hero figcaption{ grid-template-columns:1fr; }
}

/* registered company details from the old emarox.com: small, below the copyright */
.footer-company{ display:block; margin-top:6px; font-size:.8rem; line-height:1.5; color:var(--text-3); }

/* ================= FAQ ================= */
.section-center{ text-align:center; }
.section-center .h-section, .section-center .lead{ margin-left:auto; margin-right:auto; }
.section-center .lead{ margin-top:22px; }

.faq-list{ max-width:820px; margin:clamp(40px,5vw,64px) auto 0; border-top:1px solid var(--line); text-align:left; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ margin:0; font-size:inherit; font-weight:inherit; }
.faq-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 4px; text-align:left;
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:-.015em;
  transition:color var(--t-fast);
}
.faq-btn:hover{ color:var(--accent); }
.faq-icon{ position:relative; width:14px; height:14px; flex-shrink:0; }
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:1px;
  transition:transform .45s var(--ease-out), opacity .3s;
}
.faq-icon::before{ width:14px; height:1.6px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:1.6px; height:14px; transform:translate(-50%,-50%); }
.faq-item.is-open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.is-open .faq-btn{ color:var(--accent); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a p{
  padding:0 48px 28px 4px; color:var(--text-2); max-width:64ch; text-wrap:pretty;
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.faq-item.is-open .faq-a p{ opacity:1; transform:none; transition-delay:.08s; }

/* ================= ZAMKNIĘCIE ================= */
.closing{ text-align:center; overflow:hidden; padding-bottom:clamp(40px,6vw,80px); }
.closing-light{
  position:absolute; left:50%; top:4%; width:min(1100px,120vw); aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(242,200,104,.07), rgba(236,189,69,.02) 55%, transparent);
  pointer-events:none;
}
:root[data-theme="light"] .closing-light{ background:radial-gradient(closest-side, rgba(217,159,42,.12), transparent); }
.closing-inner{ position:relative; }
.closing-title{ max-width:13ch; margin:0 auto; font-size:clamp(2.5rem,6.4vw,5.6rem); letter-spacing:-.036em; }
.closing .lead{ margin:26px auto 0; max-width:40ch; }
.closing-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ================= LEGAL PAGES / 404 ================= */
.legal{ padding:calc(var(--nav-top) + var(--nav-h) + clamp(56px,8vw,112px)) 0 clamp(72px,10vw,140px); }
.legal-inner{ max-width:calc(760px + var(--gutter) * 2); }
.legal-back{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:500; color:var(--text-2); transition:color var(--t-fast); }
.legal-back::before{ content:'←'; transition:transform var(--t) var(--ease-out); }
.legal-back:hover{ color:var(--accent); }
.legal-back:hover::before{ transform:translateX(-3px); }
.legal-title{ margin-top:28px; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.045em; line-height:1.04; }
.legal-updated{ margin-top:14px; font-size:.9rem; color:var(--text-3); }
.legal-lead{ margin-top:28px; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; color:var(--text); max-width:52ch; text-wrap:pretty; }
.legal-body{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); }
.legal-sec{ display:grid; grid-template-columns:minmax(0,1fr); padding:clamp(28px,3.5vw,40px) 0; border-bottom:1px solid var(--line); }
.legal-sec h2{ display:flex; align-items:baseline; gap:14px; font-size:1.15rem; letter-spacing:-.02em; }
.legal-num{ font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.06em; color:var(--accent); font-variant-numeric:tabular-nums; }
.legal-text{ margin-top:14px; padding-left:calc(.78rem * 2 + 14px); }
.legal-text p, .legal-text li{ color:var(--text-2); line-height:1.75; max-width:68ch; text-wrap:pretty; }
.legal-text p + p, .legal-text p + ul, .legal-text ul + p{ margin-top:12px; }
.legal-text ul{ display:flex; flex-direction:column; gap:6px; }
.legal-text li{ position:relative; padding-left:20px; }
.legal-text li::before{ content:''; position:absolute; left:2px; top:.8em; width:6px; height:1px; background:var(--gold); }
.legal-text strong{ color:var(--text); font-weight:600; }
.legal-text code{ font-size:.88em; padding:1px 6px; border-radius:6px; background:var(--surface-2); color:var(--text); }
.legal-text a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
@media (max-width:560px){ .legal-text{ padding-left:0; } }

.error-page{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:calc(var(--nav-h) + 60px) 0 80px; }
.error-code{
  font-family:var(--font-head); font-weight:800; font-size:clamp(6rem,22vw,14rem); letter-spacing:-.06em; line-height:.9;
  background:linear-gradient(180deg, rgba(236,189,69,.34), rgba(168,111,16,.04)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.error-page .h-section{ margin-top:12px; }
.error-page .lead{ margin:20px auto 32px; }

/* ================= CONTACT MODAL ================= */
.contact-modal{
  position:fixed; inset:0; z-index:2600; display:flex; align-items:center; justify-content:center;
  padding:var(--gutter);
  background:rgba(5,5,6,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--t) var(--ease-out), visibility 0s linear var(--t);
  overscroll-behavior:contain;
}
:root[data-theme="light"] .contact-modal{ background:rgba(20,20,24,.32); }
.contact-modal.open{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity var(--t) var(--ease-out), visibility 0s; }
.contact-modal:focus{ outline:none; }
.contact-panel{
  position:relative; width:min(920px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:48px;
  padding:clamp(28px,5vw,60px);
  background:radial-gradient(ellipse 70% 60% at 0% 0%, var(--tint), transparent 60%), var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.98); transition:transform .5s var(--ease-out);
}
.contact-modal.open .contact-panel{ transform:none; }
.contact-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-2); border:1px solid var(--line-2);
  transition:background-color var(--t-fast), color var(--t-fast), transform var(--t) var(--ease-out);
}
.contact-close:hover{ background:var(--tint-2); color:var(--accent); transform:rotate(90deg); }
.contact-aside h2{ font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.035em; }
.contact-sub{ color:var(--text-2); margin-top:12px; text-wrap:pretty; }
.contact-facts{ margin-top:32px; display:flex; flex-direction:column; gap:16px; }
.contact-fact{ padding-top:16px; border-top:1px solid var(--line); }
.contact-fact dt{ font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.contact-fact dd{ display:flex; flex-direction:column; gap:3px; }
.contact-fact a{ color:var(--accent); font-weight:600; }
.contact-fact a:hover{ text-decoration:underline; text-underline-offset:3px; }
.contact-people{ display:flex; flex-direction:column; gap:14px; align-self:center; }
.contact-person{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center;
  padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
  transition:border-color var(--t), transform var(--t) var(--ease-out);
}
.contact-person:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.contact-avatar{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--gold-ink);
  background:linear-gradient(180deg,#eab846,#b87d0e);
}
.contact-name{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:-.015em; }
.contact-role{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
.contact-mail{ display:inline-block; margin-top:8px; font-size:.9rem; font-weight:600; color:var(--accent); word-break:break-word; }
.contact-mail:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:800px){
  .contact-panel{ grid-template-columns:1fr; gap:28px; }
  .contact-people{ align-self:stretch; }
}
@media (max-width:480px){
  .contact-person{ padding:16px; gap:12px; }
  .contact-avatar{ width:42px; height:42px; }
}

/* ================= FOOTER ================= */
/* No edge where the page ends: the footer starts on the page colour and
   only deepens towards the bottom. The wordmark sits whole inside it,
   brushed metal at a low light, and dissolves into the columns. */
.footer{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%);
  padding-top:clamp(84px,9vw,150px);
}
.footer-wordmark-wrap{ position:absolute; top:clamp(8px,2vw,28px); left:0; right:0; display:flex; justify-content:center; pointer-events:none; }
.footer-wordmark{
  font-family:var(--font-head); font-weight:800; font-size:clamp(5rem,19vw,15rem); letter-spacing:-.06em; line-height:1;
  padding:0 .06em;
  background:linear-gradient(180deg, rgba(236,189,69,.14) 0%, rgba(208,154,36,.09) 38%, rgba(168,111,16,.035) 72%, rgba(168,111,16,0) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; user-select:none;
}
:root[data-theme="light"] .footer-wordmark{ background:linear-gradient(180deg, rgba(184,125,14,.21) 0%, rgba(184,125,14,.12) 38%, rgba(184,125,14,.042) 72%, rgba(184,125,14,0) 96%); -webkit-background-clip:text; background-clip:text; }
.footer-main{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-top:clamp(32px,4vw,56px); }
.footer-brand img{ height:30px; width:auto; margin-bottom:18px; }
.footer-brand p{ color:var(--text-2); font-size:.97rem; max-width:34ch; margin-bottom:18px; }
.footer-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; font-size:.92rem; }
.footer-contact a:hover, .footer-col a:hover, .footer-linkbtn:hover, .footer-crosslinks a:hover{ color:var(--accent); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); color:var(--text-2);
  transition:color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t) var(--ease-out);
}
.footer-social a:hover{ color:var(--accent); border-color:var(--gold); background:var(--tint); transform:translateY(-2px); }
.footer-col h2{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--text-3); margin-bottom:18px; }
.footer-col li{ margin-bottom:12px; }
.footer-col a, .footer-linkbtn{ font-size:.97rem; color:var(--text); transition:color var(--t-fast); }
.footer-linkbtn{ padding:0; text-align:left; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:clamp(40px,5vw,64px); padding:24px 0 calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); font-size:.85rem; color:var(--text-3);
}
.footer-crosslinks{ display:flex; gap:10px; align-items:center; }
.footer-crosslinks a{ transition:color var(--t-fast); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } .footer-brand{ grid-column:1 / -1; } }

/* Touch screens: every link is at least ~44 px tall so a thumb hits it
   first time (older visitors especially). Only the hit area grows; the
   look on desktop is untouched. */
@media (pointer:coarse), (max-width:760px){
  .footer-col li{ margin-bottom:0; }
  .footer-col a, .footer-linkbtn{ display:inline-flex; align-items:center; min-height:44px; }
  .footer-contact{ gap:0; }
  .footer-contact a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer-social a{ width:44px; height:44px; }
  .footer-crosslinks a{ display:inline-flex; align-items:center; min-height:44px; }
  .trust-reach{ gap:0; }
  .trust-reach a{ display:inline-flex; align-items:center; min-height:48px; }
  .text-link{ padding:12px 0; }
}

/* ================= scroll-top ================= */
.scroll-top{
  position:fixed; right:var(--gutter); bottom:calc(20px + env(safe-area-inset-bottom)); z-index:1500;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text); background:var(--nav-bg); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transform:translateY(12px) scale(.9);
  transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), color var(--t-fast), border-color var(--t-fast);
}
.scroll-top.visible{ opacity:1; pointer-events:auto; transform:none; }
.scroll-top:hover{ border-color:var(--gold); transform:translateY(-2px); }
.scroll-top svg{ width:19px; height:19px; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); transition:transform var(--t) var(--ease-out); }
.scroll-top:hover svg{ transform:translateY(-1px); }
:root[data-theme="light"] .scroll-top svg{ filter:drop-shadow(0 1px 1px rgba(110,69,6,.25)); }
/* the same metal as --metal, as SVG stops */
.mt-1{ stop-color:#f5d163; } .mt-2{ stop-color:#e3aa2e; } .mt-3{ stop-color:#c7870f; } .mt-4{ stop-color:#93580a; }
:root[data-theme="light"] .mt-1{ stop-color:#d9a133; } :root[data-theme="light"] .mt-2{ stop-color:#bf8013; }
:root[data-theme="light"] .mt-3{ stop-color:#955c07; } :root[data-theme="light"] .mt-4{ stop-color:#6e4506; }

/* ================= reveal ================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d,0s); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .mission-statement .sw{ opacity:1; }
  .hero-light::before, .hero-light::after{ animation:none; }
  .bus.is-on .is-live > .bus-rail::after{ animation:none; display:none; }
  .cmp-panel, .cmp-panel *{ transition:none !important; }
}

/* Descriptions (2026-09-26): a lighter grey (--text-2) and a touch more
   weight than regular body text, so they read clearly on the dark
   background without looking bold like the headings. */
.lead, .hero-sub, .who-text, .bus-soon-text, .pcard-desc, .cmp-steps li,
.trust-fact dd, .inside-hero figcaption p:not(.inside-cap-title), .faq-a p,
.contact-sub, .footer-brand p, .legal-text p, .legal-text li{ font-weight:450; }