/* ==================================================================
   Emarox Map landing — landing/css/landing.css
   The standalone landing's style.css with every selector moved under
   #landing-overlay, so none of it reaches the app around it:
   :root tokens live on the overlay, html/body rules are merged into it,
   Lenis classes sit on the overlay (its wrapper), and the fonts are
   registered as 'EMX Inter' / 'EMX Jakarta' so they never merge with the
   app's Google Fonts Inter. Class names the app also uses carry an l-
   prefix (l-btn-primary, l-nav-logo, l-lang-opt, l-pf-*, ...).
   ================================================================== */

/* ==================================================================
   Emarox Map, new landing (working copy) — style.css
   Built on the EMAROX family style (STYL-EMAROX.md): the neutral black
   base, navbar, buttons, footer and motion are the same as emarox.com.
   Only the accent differs: the cyan of the EX logo, taken deeper so it
   reads as enamel, not as an LED. Motion lives in js/motion.js; CSS only
   sets resting states and reduced-motion fallbacks.
   ================================================================== */

/* ---- fonts: self-hosted (Plus Jakarta Sans, Inter; SIL OFL) ---- */
@font-face{ font-family:'EMX Jakarta'; 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:'EMX Jakarta'; 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:'EMX 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:'EMX 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; }

/* ---- the overlay itself (the app shows and hides it with .hidden) ----
   It is the scroll container: Lenis runs with wrapper = #landing-overlay.
   Never give it (or #landing-scroll) a transform, filter, backdrop-filter or
   will-change: position:fixed inside would stop sticking to the screen and
   position:sticky would stop working. */
#landing-overlay{ position:fixed; inset:0; z-index:9999; overflow-y:auto; overflow-x:hidden; display:block !important; }
#landing-overlay.hidden{ display:none !important; }
/* Until DOMContentLoaded nobody knows whether a returning user skips the
   landing (checkLandingState, the fast-load unlock), so it stays invisible
   and never flashes. The head script in index.html sets and clears the flag. */
html.emx-boot #landing-overlay{ visibility:hidden; }
/* A reload further down the page: hidden until bridge.js puts it back in
   place, so the top does not flash first. */
html.emx-restore #landing-overlay #landing-scroll{ visibility:hidden; }
/* A new visitor always sees the landing: until DOMContentLoaded the page
   wears its background, so the app's navy canvas never shows through. */
html.emx-first, html.emx-first body{ background:#0a0a0b; }
html.emx-first[data-theme="light"], html.emx-first[data-theme="light"] body{ background:#f5f5f3; }
html.emx-first #emarox-bg{ visibility:hidden; }


#landing-overlay{
  /* ---- base: shared by the whole family ---- */
  --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:#a3a3a7;
  --text-3:#8a8a90;

  /* ---- accent: Emarox Map ----
     Hue ~191°, from the EX logo. The logo itself is near-neon; the page
     uses the same hue deeper and less saturated, like glazed enamel. */
  --accent-base:#1fa4c2;
  --accent-hi:#74dcea;
  --accent-lo:#127a95;
  --accent-deep:#0a4a5c;
  --accent-ink:#02151b;                     /* text on an accent fill */
  --accent:#3cbfda;                         /* accent as text: 9.6:1 on --bg */
  --metal:linear-gradient(180deg,#a4ecf4 0%,#4cc9e0 38%,#1c97b5 68%,#0d5f77 100%);
  --tint:rgba(31,164,194,.08);
  --tint-2:rgba(31,164,194,.14);
  --glow:rgba(31,164,194,.15);
  --btn-fill:linear-gradient(180deg,#63d4e7 0%,#27abc8 55%,#1689a7 100%);
  --btn-shine:rgba(225,250,255,.55);
  --btn-shadow:rgba(31,164,194,.5);
  --sheen:rgba(236,252,255,.9);

  /* second colour: only where VAN and TIR are told apart (the app does the same) */
  --tir:#e8922a;
  --tir-metal:linear-gradient(180deg,#f7c378 0%,#ec9a36 40%,#c9731a 72%,#8c4b0c 100%);

  --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);

  --font-head:'EMX Jakarta',system-ui,sans-serif;
  --font-body:'EMX Inter',system-ui,"Segoe UI",Arial,sans-serif;

  --gutter:clamp(16px,4vw,40px);
  --section-y:clamp(72px,8.5vw,120px);
  --maxw:1240px;
  --nav-h:56px; --nav-top:16px;

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

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

  color-scheme:dark;
}

:root[data-theme="light"] #landing-overlay{
  --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:#55555a;
  --text-3:#68686d;

  --accent-base:#13849f;
  --accent-hi:#2aa8c4;
  --accent-lo:#0d6a82;
  --accent-deep:#0a4a5c;
  --accent:#0a6479;                         /* 6.3:1 on --bg, AA for small text */
  --metal:linear-gradient(180deg,#2eaecb 0%,#14879f 42%,#0d6a82 74%,#0a4a5c 100%);
  --tint:rgba(19,132,159,.08);
  --tint-2:rgba(19,132,159,.15);
  --glow:rgba(19,132,159,.14);
  --btn-fill:linear-gradient(180deg,#3fc2dc 0%,#1c9bb9 55%,#11809c 100%);
  --btn-shine:rgba(225,250,255,.6);
  --btn-shadow:rgba(19,132,159,.45);
  --sheen:rgba(255,255,255,.85);

  --tir:#b3620c;
  --tir-metal:linear-gradient(180deg,#e0923a 0%,#c26f14 42%,#9c5409 74%,#6e3a05 100%);

  --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);

  color-scheme:light;
}

/* ================= base ================= */
#landing-overlay *,#landing-overlay *::before,#landing-overlay *::after{ box-sizing:border-box; margin:0; padding:0; }
#landing-overlay{ -webkit-text-size-adjust:100%; }

#landing-overlay.lenis.lenis-smooth{ scroll-behavior:auto !important; }
#landing-overlay.lenis-stopped{ overflow:hidden; }
html.no-lenis #landing-overlay{ scroll-behavior:smooth; }
#landing-overlay{
  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;
}
#landing-overlay img{ max-width:100%; display:block; }
#landing-overlay a{ color:inherit; text-decoration:none; }
#landing-overlay ul,#landing-overlay ol{ list-style:none; }
#landing-overlay button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
#landing-overlay h1,#landing-overlay h2,#landing-overlay h3,#landing-overlay h4{ font-family:var(--font-head); font-weight:700; line-height:1.1; }
#landing-overlay ::selection{ background:var(--accent-base); color:var(--accent-ink); }
#landing-overlay :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

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

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

/* Shared heading scale: big, tight, never decorated with a label above. */
#landing-overlay .h-section{
  font-size:clamp(2.35rem,5.6vw,4.75rem); letter-spacing:-.032em; line-height:1.04;
  word-spacing:.04em; text-wrap:balance;
}
#landing-overlay .lead{
  font-size:clamp(1.1rem,1.35vw,1.25rem); line-height:1.6; color:var(--text-2);
  max-width:56ch; text-wrap:pretty;
}
#landing-overlay .dot{ margin-left:-.07em; }
#landing-overlay .dot:empty{ margin-left:0; }
#landing-overlay .nw{ white-space:nowrap; }

/* Accent as text: the metal gradient clipped to the letters. A second
   layer carries the sheen band; it rests off to the right and is swept
   across by motion.js. */
#landing-overlay .metal-text{
  background-image:linear-gradient(100deg, transparent 40%, var(--sheen) 50%, transparent 60%), var(--metal);
  background-size:260% 100%, 100% 100%;
  background-position:160% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.12em;
}
#landing-overlay .split-line-mask{ padding-bottom:.08em; margin-bottom:-.08em; }

/* ================= buttons ================= */
#landing-overlay .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);
}
#landing-overlay .btn-arrow{ width:16px; height:16px; transition:transform var(--t) var(--ease-out); }
#landing-overlay .btn:hover .btn-arrow{ transform:translateX(3px); }
#landing-overlay .btn:active{ transform:translateY(0) scale(.98); }

#landing-overlay .l-btn-primary{
  color:var(--accent-ink);
  background:var(--btn-fill);
  box-shadow:inset 0 1px 0 var(--btn-shine), inset 0 -1px 0 rgba(0,40,55,.35),
             0 10px 30px -12px var(--btn-shadow);
}
/* one slow sheen on hover: the same light that crosses the metal words */
#landing-overlay .l-btn-primary::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(235,252,255,.55) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out);
}
#landing-overlay .l-btn-primary:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--btn-shine), inset 0 -1px 0 rgba(0,40,55,.35), 0 16px 36px -14px var(--btn-shadow); }
#landing-overlay .l-btn-primary:hover::after{ transform:translateX(120%); }

#landing-overlay .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"] #landing-overlay .btn-ghost{ background:rgba(255,255,255,.6); }
#landing-overlay .btn-ghost:hover{ border-color:var(--accent-base); color:var(--accent); transform:translateY(-2px); }

/* ================= NAVBAR ================= */
#landing-overlay .site-header{
  position:fixed; top:var(--nav-top); left:0; right:var(--sbw,0px); z-index:2000;
  display:flex; justify-content:center; padding:0 var(--gutter);
  pointer-events:none;
}
#landing-overlay .nav-pill{
  --ctrl:40px;
  pointer-events:auto;
  display:flex; align-items:center; gap:14px; max-width:100%;
  padding:8px 8px 8px 18px; 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);
}
#landing-overlay .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"] #landing-overlay .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); }

#landing-overlay .l-nav-logo{ display:flex; align-items:center; gap:10px; height:var(--ctrl); flex-shrink:0; }
/* The EX mark in the same metal as the name beside it: the logo's own shape
   (its alpha) masks the --metal gradient, so it follows the theme too. */
#landing-overlay .logo-metal{
  display:block; flex-shrink:0; height:24px; aspect-ratio:108 / 64;
  background:var(--metal);
  -webkit-mask:url("../assets/img/logo-mark.webp") center / contain no-repeat;
  mask:url("../assets/img/logo-mark.webp") center / contain no-repeat;
}
#landing-overlay .nav-logo-img{ height:22px; }
/* the product name wears the page's own accent metal, like the accent line
   of the headline, so the navbar and the page speak one colour */
#landing-overlay .nav-logo-text{
  font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:-.02em; white-space:nowrap;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em;
}
#landing-overlay .nav-divider{ width:1px; height:22px; background:var(--line-2); flex-shrink:0; }

#landing-overlay .nav-links{ position:relative; display:flex; align-items:center; gap:2px; }
#landing-overlay .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);
}
#landing-overlay .nav-link:hover{ color:var(--text); }
#landing-overlay .nav-link.is-active{ color:var(--accent); }
#landing-overlay .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);
}
#landing-overlay .nav-indicator.is-on{ opacity:1; }

#landing-overlay .nav-right{ display:flex; align-items:center; gap:4px; }
#landing-overlay .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);
}
#landing-overlay .control-btn:hover{ background:var(--tint-2); color:var(--accent); }
#landing-overlay .control-btn-wide{ width:auto; padding:0 12px; gap:6px; font-size:.84rem; font-weight:600; letter-spacing:.02em; }
#landing-overlay .icon{ width:19px; height:19px; flex-shrink:0; }

/* The one product-specific control in the family navbar: the way into the app. */
#landing-overlay .nav-login{
  height:var(--ctrl); margin-left:6px; padding:0 18px; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:600; white-space:nowrap; color:var(--accent);
  background:var(--tint); border:1px solid var(--tint-2);
  transition:background-color var(--t-fast), border-color var(--t-fast);
}
#landing-overlay .nav-login:hover{ background:var(--tint-2); border-color:var(--accent-base); }

#landing-overlay .lang-switcher{ position:relative; }
#landing-overlay .lang-caret{ transition:transform var(--t-fast) var(--ease-out); }
#landing-overlay .lang-switcher.open .lang-caret{ transform:rotate(180deg); }
#landing-overlay .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"] #landing-overlay .lang-menu{ box-shadow:0 18px 40px rgba(20,20,24,.14); }
#landing-overlay .lang-switcher.open .lang-menu{ opacity:1; pointer-events:auto; transform:none; }
#landing-overlay .l-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);
}
#landing-overlay .l-lang-opt small{ font-size:.7rem; font-weight:600; letter-spacing:.08em; color:var(--text-3); }
#landing-overlay .l-lang-opt:hover{ background:var(--tint); color:var(--text); }
#landing-overlay .l-lang-opt.active, #landing-overlay .l-lang-opt.active small{ color:var(--accent); }

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

#landing-overlay .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);
}
#landing-overlay .mobile-trigger:hover{ background:var(--tint-2); }
#landing-overlay .hamburger{ position:relative; width:22px; height:14px; display:block; }
#landing-overlay .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);
}
#landing-overlay .hamburger span:nth-child(1){ top:0; }
#landing-overlay .hamburger span:nth-child(2){ top:6px; width:64%; }
#landing-overlay .hamburger span:nth-child(3){ top:12px; }
#landing-overlay .mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(1){ top:6px; transform:rotate(45deg); }
#landing-overlay .mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; width:0; }
#landing-overlay .mobile-trigger[aria-expanded="true"] .hamburger span:nth-child(3){ top:6px; transform:rotate(-45deg); }

#landing-overlay .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;
}
#landing-overlay .mobile-menu::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 50% at 50% 0%, var(--glow), transparent 70%);
}
#landing-overlay .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; }
#landing-overlay .mobile-menu:focus{ outline:none; }
#landing-overlay .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));
}
#landing-overlay .mobile-nav{ display:flex; flex-direction:column; }
#landing-overlay .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);
}
#landing-overlay .mobile-menu.open .mobile-link{ opacity:1; transform:none; }
#landing-overlay .mobile-menu.open .mobile-link:nth-child(1){ transition-delay:.12s; }
#landing-overlay .mobile-menu.open .mobile-link:nth-child(2){ transition-delay:.18s; }
#landing-overlay .mobile-menu.open .mobile-link:nth-child(3){ transition-delay:.24s; }
#landing-overlay .mobile-menu.open .mobile-link:nth-child(4){ transition-delay:.30s; }
#landing-overlay .mobile-link:active{ color:var(--accent); }

#landing-overlay .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;
}
#landing-overlay .mobile-menu.open .mobile-foot{ opacity:1; transform:none; }
#landing-overlay .mobile-login{ width:100%; }
#landing-overlay .mobile-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#landing-overlay .mobile-langs{ display:flex; gap:4px; padding:4px; border:1px solid var(--line-2); border-radius:var(--r-pill); }
#landing-overlay .mobile-langs .l-lang-opt{ width:auto; padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:.82rem; }
#landing-overlay .mobile-langs .l-lang-opt.active{ background:var(--tint-2); }
#landing-overlay .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);
}
#landing-overlay .mobile-theme .icon{ width:18px; height:18px; }
#landing-overlay .mobile-theme .icon-sun{ display:none; opacity:1; transform:none; }
#landing-overlay .mobile-theme .icon-moon{ display:block; opacity:1; transform:none; }
:root[data-theme="light"] #landing-overlay .mobile-theme .icon-sun{ display:block; }
:root[data-theme="light"] #landing-overlay .mobile-theme .icon-moon{ display:none; }
#landing-overlay .mobile-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:18px; border-top:1px solid var(--line); font-size:1rem; color:var(--text-2); }

@media (max-width:1060px){
  #landing-overlay .nav-desktop-only{ display:none !important; }
  #landing-overlay .mobile-trigger{ display:flex; }
  #landing-overlay .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 #landing-overlay, :root.theme-switching #landing-overlay *{ transition:none !important; }

/* ================= HERO ================= */
#landing-overlay .hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--nav-h) + var(--nav-top)) 0 clamp(40px,6vw,80px);
}
#landing-overlay .hero-light{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
#landing-overlay .hero-light::before, #landing-overlay .hero-light::after{
  content:''; position:absolute; left:50%; border-radius:50%;
  transform:translateX(-50%); will-change:transform;
}
#landing-overlay .hero-light::before{
  top:-38vh; width:min(1500px,150vw); height:88vh;
  background:radial-gradient(closest-side, rgba(104,214,236,.12), rgba(60,190,220,.04) 55%, transparent);
  animation:heroDrift 22s var(--ease-io) infinite alternate;
}
#landing-overlay .hero-light::after{
  top:-10vh; width:min(700px,90vw); height:46vh;
  background:radial-gradient(closest-side, rgba(200,244,252,.07), transparent);
  animation:heroDrift2 17s var(--ease-io) infinite alternate;
}
:root[data-theme="light"] #landing-overlay .hero-light::before{ background:radial-gradient(closest-side, rgba(30,150,180,.16), rgba(30,150,180,.05) 55%, transparent); }
:root[data-theme="light"] #landing-overlay .hero-light::after{ background:radial-gradient(closest-side, rgba(170,230,242,.4), 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%); } }

#landing-overlay .grain{
  position:absolute; inset:0; z-index:-1; 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"] #landing-overlay .grain{ opacity:.07; mix-blend-mode:multiply; }

/* The headline block is centred in the top ~76% of the screen, close to
   where the opening played, and the app screen peeks in below it: a
   teaser, not a second headline. Works from a low laptop to a tall
   monitor; if the text needs more room than that, it simply takes it. */
#landing-overlay .hero-inner{
  position:relative; text-align:center; will-change:transform,opacity;
  display:flex; flex-direction:column; justify-content:center;
  min-height:calc(76vh - var(--nav-h) - var(--nav-top));
  min-height:calc(76svh - var(--nav-h) - var(--nav-top));
  padding-top:clamp(24px,4vh,48px); padding-bottom:clamp(24px,5vh,56px);
}
#landing-overlay .hero-title{
  font-size:clamp(2.7rem,6.9vw,6.4rem); font-weight:700;
  letter-spacing:-.042em; line-height:1; word-spacing:.06em;
  margin:0 auto; max-width:17ch;
}
#landing-overlay .hero-title .line{ display:block; text-wrap:balance; }
/* The metal is painted only inside the element's box; at line-height 1
   the tails of g, y and j hang below it and were cut off. The box gets
   room underneath, taken back by a negative margin so nothing moves. */
#landing-overlay .hero-title .metal-text{ padding-bottom:.2em; margin-bottom:-.2em; }
#landing-overlay .hero-sub{
  margin:clamp(24px,3vw,34px) auto 0; max-width:52ch;
  font-size:clamp(1.1rem,1.45vw,1.25rem); line-height:1.6; color:var(--text-2); text-wrap:balance;
}
#landing-overlay .hero-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:clamp(30px,3.6vw,40px); }

/* One real screen, large. It rises out of the hero with a slight tilt
   that straightens as it scrolls into view (motion.js). */
#landing-overlay .hero-shot-wrap{ perspective:1800px; }
#landing-overlay .hero-shot{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:50% 0;
}
#landing-overlay .hero-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#landing-overlay .hero-shot img{ width:100%; height:auto; }

/* pre-JS resting state: hidden only while the intro is pending */
html.js-intro #landing-overlay .hero-title, html.js-intro #landing-overlay .hero-sub, html.js-intro #landing-overlay .hero-cta, html.js-intro #landing-overlay .hero-shot{ visibility:hidden; }
html.js-intro #landing-overlay .site-header{ opacity:0; }

/* ================= HERO INTRO =================
   Small and centred: the run draws itself across a map of Europe that
   dissolves into the dark at its edges (no frame). Distance and tolls
   count underneath; each toll is named as it is paid. Then EMAROX MAP
   rises in metal. Hidden unless motion.js starts it. */
#landing-overlay .hero-intro{
  position:absolute; left:0; right:0; top:0; height:100vh; height:100dvh; z-index:1;
  pointer-events:none; visibility:hidden; overflow:hidden;
}
#landing-overlay .hero.is-intro .hero-intro{ visibility:visible; }
/* on a phone the hero can be shorter than the screen; while the opening
   plays it takes the full screen so nothing is cut off */
#landing-overlay .hero.is-intro{ min-height:100vh; min-height:100dvh; }

#landing-overlay .intro-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2.2vh,24px); padding:calc(var(--nav-h) + var(--nav-top)) var(--gutter) 24px;
}
/* sized by the screen: never wider than 760 px, never so tall that the
   readout under it would leave the screen on a low laptop display */
#landing-overlay .intro-stage{
  position:relative; aspect-ratio:16 / 9;
  width:min(max(760px, 40vw), 90vw, calc((100vh - 290px) * 16 / 9));
  width:min(max(760px, 40vw), 90vw, calc((100dvh - 290px) * 16 / 9));
  -webkit-mask-image:radial-gradient(closest-side, #000 70%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 70%, transparent 100%);
}
#landing-overlay .intro-map{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#landing-overlay .intro-eu{ color:rgba(255,255,255,.2); }
#landing-overlay .intro-eu path{ fill:rgba(255,255,255,.025); stroke:currentColor; stroke-width:1; }
:root[data-theme="light"] #landing-overlay .intro-eu{ color:rgba(12,12,14,.18); }
:root[data-theme="light"] #landing-overlay .intro-eu path{ fill:rgba(12,12,14,.035); }

#landing-overlay .ig-1{ stop-color:var(--accent-hi); } #landing-overlay .ig-2{ stop-color:var(--accent-base); }
#landing-overlay .intro-route{ fill:none; stroke:url(#intro-grad); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
#landing-overlay .intro-route-glow{ fill:none; stroke:var(--accent-base); stroke-width:12; stroke-linecap:round; stroke-linejoin:round; opacity:.2; filter:blur(7px); }
#landing-overlay .intro-dot{ fill:#effcff; }
#landing-overlay .intro-halo{ fill:var(--accent-base); opacity:.22; }
:root[data-theme="light"] #landing-overlay .intro-dot{ fill:var(--accent-lo); }

/* towns: small, quiet; the ones on the route light up once passed */
#landing-overlay .intro-city circle{ fill:var(--text-3); }
#landing-overlay .intro-city text{
  fill:var(--text-3); font-family:var(--font-body); font-weight:500; font-size:12.5px; text-anchor:middle;
  paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round;
  transition:fill .6s var(--ease-out);
}
#landing-overlay .intro-city.is-on-route circle{ fill:var(--text-2); }
#landing-overlay .intro-city.is-passed text{ fill:var(--text); }
#landing-overlay .intro-city.is-passed circle{ fill:var(--accent-hi); }
#landing-overlay .intro-city:not(.is-end) text{ opacity:var(--lbl,1); }
#landing-overlay .intro-city.is-end text{ font-family:var(--font-head); font-weight:700; font-size:16px; fill:var(--text); }
#landing-overlay .intro-city.to-left text{ text-anchor:end; }
#landing-overlay .intro-city.to-right text{ text-anchor:start; }
#landing-overlay .intro-city.is-end circle{ fill:var(--bg); stroke:var(--accent-base); stroke-width:2.5px; }
#landing-overlay .intro-toll circle{ fill:var(--bg); stroke:var(--accent-hi); stroke-width:2px; }

/* the running readout, small */
#landing-overlay .intro-readout{ display:flex; justify-content:center; gap:clamp(26px,5vw,64px); }
#landing-overlay .intro-cell{ display:flex; flex-direction:column; align-items:center; gap:6px; }
#landing-overlay .intro-cell dt{ font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
#landing-overlay .intro-cell dd{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.25rem,2.3vw,1.85rem); letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center;
}
#landing-overlay #intro-km{ min-width:4.6em; }
#landing-overlay #intro-tolls-sum{ min-width:4.4em; }
#landing-overlay .intro-note{ min-height:1.6em; font-size:.95rem; color:var(--text-2); text-align:center; font-variant-numeric:tabular-nums; }
#landing-overlay .intro-note b{ color:var(--text); font-weight:600; }

/* the name alone, in the accent metal: deep, a lit top edge, a soft shadow under it */
#landing-overlay .intro-brand{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; visibility:hidden;
}
#landing-overlay .intro-word{
  font-family:var(--font-head); font-weight:700; font-size:clamp(3rem,11vw,10.5rem);
  letter-spacing:-.042em; word-spacing:.06em; line-height:1; white-space:nowrap; padding:0 .04em .14em;
  filter:drop-shadow(0 1px 0 rgba(210,250,255,.18)) drop-shadow(0 22px 44px rgba(0,0,0,.6));
}
:root[data-theme="light"] #landing-overlay .intro-word{ filter:drop-shadow(0 18px 36px rgba(10,74,92,.22)); }

@media (max-width:600px){
  #landing-overlay .intro-stage{ aspect-ratio:4 / 3; width:min(520px,96vw); }
}

/* ================= shared: heading, then its lead underneath =================
   Headings are set one sentence per line (a <br> in the text), so they
   get the full width and the lead sits below, never beside. */
#landing-overlay .split-head{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px,2.4vw,28px); }
#landing-overlay .split-head .lead{ max-width:62ch; }
#landing-overlay .lead{ text-wrap:balance; }
#landing-overlay .section-center{ text-align:center; }
#landing-overlay .section-center .h-section, #landing-overlay .section-center .lead{ margin-left:auto; margin-right:auto; }
#landing-overlay .section-center .lead{ margin-top:22px; }

/* ================= JEDEN KURS ================= */
#landing-overlay .proof-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,96px); margin-top:clamp(48px,6vw,80px);
}

/* steps joined by a line that fills as you read */
#landing-overlay .proof-steps{ position:relative; --p:0; --rail-top:40px; --rail-bot:40px; }
/* room under the last step, so it reaches the reading line while its
   window is still pinned beside it */
@media (min-width:901px){ #landing-overlay .proof-steps{ padding-bottom:clamp(120px,24vh,280px); } }
#landing-overlay .proof-steps::before, #landing-overlay .proof-steps::after{
  content:''; position:absolute; left:17px; top:var(--rail-top); bottom:var(--rail-bot); width:2px; border-radius:2px;
}
#landing-overlay .proof-steps::before{ background:var(--line-2); }
#landing-overlay .proof-steps::after{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent-base));
  transform-origin:50% 0; transform:scaleY(var(--p));
}
#landing-overlay .proof-step{
  position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:0 clamp(18px,2.4vw,32px);
  padding:clamp(22px,3vw,34px) 0; min-height:min(38vh,340px);
}
#landing-overlay .proof-step:last-child{ min-height:0; }
#landing-overlay .proof-num{
  position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums;
  color:var(--text-3); background:var(--bg); border:1.5px solid var(--line-2);
  transition:color var(--t) var(--ease-out), background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
#landing-overlay .proof-step.is-past .proof-num{ color:var(--accent); border-color:var(--accent-base); }
#landing-overlay .proof-step.is-active .proof-num{ color:var(--accent-ink); background:var(--btn-fill); border-color:transparent; box-shadow:0 0 0 6px var(--tint); }
#landing-overlay .proof-body{ padding-top:1px; }
#landing-overlay .proof-body h3{
  font-size:clamp(1.5rem,2.3vw,2rem); letter-spacing:-.028em; word-spacing:.04em; line-height:1.15;
  color:var(--text-2); transition:color var(--t) var(--ease-out);
}
#landing-overlay .proof-body > p{ margin-top:12px; color:var(--text-2); max-width:46ch; text-wrap:pretty; }
#landing-overlay .proof-step.is-active h3{ color:var(--text); }
#landing-overlay .proof-slot:empty{ display:none; }

/* the run window */
#landing-overlay .proof-stage{ position:relative; }
#landing-overlay .proof-frame{
  position:sticky; top:calc(var(--nav-top) + var(--nav-h) + 28px);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  height:min(700px, calc(100svh - var(--nav-h) - var(--nav-top) - 56px));
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 50%), var(--bg-2);
  border:1px solid var(--line-2); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"] #landing-overlay .proof-frame{ background:var(--surface); box-shadow:var(--shadow-lg), inset 0 1px 0 #fff; }
/* a hairline of accent along the top edge: light catching the enamel */
#landing-overlay .proof-frame::before{
  content:''; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent-hi), transparent); opacity:.6;
}
#landing-overlay .run-bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 22px; border-bottom:1px solid var(--line);
}
#landing-overlay .run-title{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; min-width:0; }
#landing-overlay .run-title b{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:-.015em; }
#landing-overlay .run-title span{ font-size:.92rem; color:var(--text-3); }
#landing-overlay .run-progress{ display:flex; gap:6px; flex-shrink:0; }
#landing-overlay .run-progress li{ width:22px; height:4px; border-radius:4px; background:var(--line-2); transition:background-color var(--t) var(--ease-out); }
#landing-overlay .run-progress li.is-on{ background:var(--accent-base); }

#landing-overlay .proof-panels{ position:relative; display:grid; min-height:0; }
#landing-overlay .proof-panel{
  grid-area:1 / 1; display:grid; place-items:center; padding:clamp(20px,3vw,40px); min-height:0;
  visibility:hidden; opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s;
}
#landing-overlay .proof-panel.is-active{
  visibility:visible; opacity:1; transform:none;
  transition:opacity .7s var(--ease-out) .08s, transform .7s var(--ease-out) .08s, visibility 0s;
}
#landing-overlay .proof-panel.is-shot{ padding:0; overflow:hidden; }
#landing-overlay .proof-panel.is-shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

/* figures of the run, filling in as the steps are read */
#landing-overlay .run-sum{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
#landing-overlay .run-sum div{ padding:14px 18px 16px; }
#landing-overlay .run-sum div + div{ border-left:1px solid var(--line); }
#landing-overlay .run-sum dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
#landing-overlay .run-sum dd{
  margin-top:6px; font-family:var(--font-head); font-weight:700; font-size:clamp(1.05rem,1.5vw,1.3rem); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:opacity .6s var(--ease-out), filter .6s var(--ease-out);
}
#landing-overlay .run-sum div:not(.is-set) dd{ opacity:.25; filter:blur(5px); }
#landing-overlay .run-sum .is-profit.is-set dd{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em; }

/* order document */
#landing-overlay .doc{
  position:relative; overflow:hidden;
  width:min(100%,430px); padding:26px 28px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
}
:root[data-theme="light"] #landing-overlay .doc{ background:#fff; box-shadow:0 24px 60px -30px rgba(20,20,24,.3); }
#landing-overlay .doc-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
#landing-overlay .doc-type{
  padding:4px 8px; border-radius:6px; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  color:var(--text-2); border:1px solid var(--line-2);
}
#landing-overlay .doc-title{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; word-spacing:.04em; }
#landing-overlay .doc-rows div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
#landing-overlay .doc-rows dt{ color:var(--text-2); }
#landing-overlay .doc-rows dd{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
#landing-overlay .doc-foot{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:.95rem; font-weight:600; color:var(--accent); }
#landing-overlay .doc-tick{ width:18px; height:18px; border-radius:50%; background:var(--metal); position:relative; flex-shrink:0; }
#landing-overlay .doc-tick::after{ content:''; position:absolute; left:6px; top:3.5px; width:5px; height:9px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
/* the scanner's light passes over the document once when it shows */
#landing-overlay .doc::after{
  content:''; position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--tint-2), transparent);
  opacity:0;
}
#landing-overlay .proof-panel.is-active .doc::after{ animation:docScan 1.6s var(--ease-io) .35s 1 both; }
@keyframes docScan{ 0%{ top:-30%; opacity:1; } 100%{ top:110%; opacity:1; } }

/* ledgers */
#landing-overlay .ledger, #landing-overlay .share{ width:min(100%,460px); }
#landing-overlay .ledger-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.3rem,2vw,1.6rem); letter-spacing:-.025em; word-spacing:.04em; margin-bottom:18px; }
#landing-overlay .ledger-rows{ font-variant-numeric:tabular-nums; }
#landing-overlay .ledger-rows div{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:14px 0; border-top:1px solid var(--line);
}
#landing-overlay .ledger-rows dt{ display:flex; align-items:center; gap:10px; color:var(--text-2); min-width:0; }
#landing-overlay .ledger-rows dd{ font-weight:600; white-space:nowrap; }
#landing-overlay .ledger-rows .is-sum{ border-top-color:var(--line-2); padding-top:18px; }
#landing-overlay .ledger-rows .is-sum dt{ color:var(--text); font-weight:600; }
#landing-overlay .ledger-rows .is-sum dd{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.03em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em;
}
/* rows arrive in order when a panel shows */
#landing-overlay .proof-panel .ledger-rows div, #landing-overlay .proof-panel .split-bar, #landing-overlay .proof-panel .share-route, #landing-overlay .proof-panel .share-actions{
  opacity:0; transform:translateY(10px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
#landing-overlay .proof-panel.is-active .ledger-rows div, #landing-overlay .proof-panel.is-active .split-bar, #landing-overlay .proof-panel.is-active .share-route, #landing-overlay .proof-panel.is-active .share-actions{
  opacity:1; transform:none; transition-duration:.8s; transition-delay:calc(.2s + var(--k,0) * .08s);
}
#landing-overlay .ledger-rows div:nth-child(2){ --k:1; } #landing-overlay .ledger-rows div:nth-child(3){ --k:2; } #landing-overlay .ledger-rows div:nth-child(4){ --k:3; }
#landing-overlay .share-actions{ --k:1; }

#landing-overlay .split-bar{ display:flex; gap:3px; height:10px; margin-bottom:22px; border-radius:6px; overflow:hidden; }
#landing-overlay .split-bar i{ display:block; height:100%; }
#landing-overlay .split-cost{ flex:588; background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px 0 0 6px; }
#landing-overlay .split-profit{ flex:612; background:linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); border-radius:0 6px 6px 0; }
#landing-overlay .key{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
#landing-overlay .key-cost{ background:var(--surface-2); border:1px solid var(--line-2); }
#landing-overlay .key-profit{ background:var(--accent-base); }

#landing-overlay .share-route{
  padding:16px 18px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface);
  font-weight:600; font-variant-numeric:tabular-nums;
}
:root[data-theme="light"] #landing-overlay .share-route{ background:var(--surface-2); }
#landing-overlay .share-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
#landing-overlay .l-share-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 14px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); font-size:.95rem; font-weight:600; text-align:center;
}
#landing-overlay .l-share-btn svg{ width:18px; height:18px; flex-shrink:0; }
#landing-overlay .l-share-btn.is-main{ color:var(--accent); border-color:var(--accent-lo); background:var(--tint); }

/* phones and tablets: each step carries its own picture (proof.js moves it) */
@media (max-width:900px){
  #landing-overlay .proof-grid{ grid-template-columns:1fr; }
  #landing-overlay .proof-stage{ display:none; }
  #landing-overlay .proof-step{ min-height:0; }
  #landing-overlay .proof-step h3{ color:var(--text); }
  #landing-overlay .proof-slot{ margin-top:22px; }
  #landing-overlay .proof-slot .proof-panel{
    position:relative; visibility:visible; opacity:1; transform:none; transition:none;
    border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
    background:var(--bg-2); padding:clamp(20px,5vw,32px);
  }
  :root[data-theme="light"] #landing-overlay .proof-slot .proof-panel{ background:var(--surface-2); }
  #landing-overlay .proof-slot .proof-panel.is-shot{ padding:0; aspect-ratio:8 / 9; }
  /* the order document is its own card; no second frame around it */
  :root #landing-overlay .proof-slot .proof-panel[data-panel="1"]{ padding:0; border:0; background:none; }
  #landing-overlay .proof-slot .doc{ width:100%; }
  #landing-overlay .proof-slot .proof-panel .ledger-rows div, #landing-overlay .proof-slot .proof-panel .split-bar,
  #landing-overlay .proof-slot .proof-panel .share-route, #landing-overlay .proof-slot .proof-panel .share-actions{ opacity:1; transform:none; }
  #landing-overlay .share-actions{ grid-template-columns:1fr; }
}

/* ================= EMAROX PROFIT =================
   One window of the app, the five steps beside it. The window walks
   through its screens by itself while it is on screen (profit-demo.js);
   the open step shows its sentence and how long it stays. The window is
   the app's own chrome (MAPA | PROFIT modes and the section tabs) around
   five screens built after the real PROFIT views. Parts of a screen
   settle in when it becomes the open one. */
#landing-overlay .profit{ --warn:var(--tir); }
#landing-overlay .pf-tour{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(28px,4vw,64px); align-items:center;
  margin-top:clamp(48px,6vw,80px);
}
#landing-overlay .pf-steps{ display:flex; flex-direction:column; gap:4px; }
#landing-overlay .pf-step{
  position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 16px; width:100%; text-align:left;
  padding:16px 18px 18px 14px; border-radius:var(--r); overflow:hidden;
  transition:background-color var(--t) var(--ease-out);
}
#landing-overlay .pf-step:hover{ background:rgba(255,255,255,.025); }
:root[data-theme="light"] #landing-overlay .pf-step:hover{ background:rgba(12,12,14,.03); }
#landing-overlay .pf-step.is-active{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
:root[data-theme="light"] #landing-overlay .pf-step.is-active{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(20,20,24,.25); }
#landing-overlay .l-pf-num{
  grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--text-3); border:1.5px solid var(--line-2);
  transition:color var(--t) var(--ease-out), background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
#landing-overlay .pf-step.is-active .l-pf-num{ color:var(--accent-ink); background:var(--btn-fill); border-color:transparent; }
#landing-overlay .pf-step-t{
  align-self:center; font-family:var(--font-head); font-weight:700; font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.025em; word-spacing:.04em;
  line-height:1.2; color:var(--text-2); transition:color var(--t) var(--ease-out);
}
#landing-overlay .pf-step.is-active .pf-step-t, #landing-overlay .pf-step:hover .pf-step-t{ color:var(--text); }
/* the sentence opens under the open step only */
#landing-overlay .pf-step-d{ grid-column:2; display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
#landing-overlay .pf-step-d > span{ overflow:hidden; color:var(--text-2); line-height:1.6; text-wrap:pretty; }
#landing-overlay .pf-step.is-active .pf-step-d{ grid-template-rows:1fr; }
#landing-overlay .pf-step.is-active .pf-step-d > span{ padding-top:8px; }
#landing-overlay .pf-step-time{
  position:absolute; left:18px; right:18px; bottom:0; height:2px; border-radius:2px;
  background:var(--accent-base); transform-origin:0 50%; transform:scaleX(0); opacity:0;
}
#landing-overlay .pf-tour.is-walking .pf-step.is-active .pf-step-time{ opacity:.85; }
#landing-overlay .pf-stage{ min-width:0; }
#landing-overlay .proof-frame.pf-frame{ position:relative; top:auto; height:auto; }

/* app chrome */
#landing-overlay .l-pf-bar{ display:flex; align-items:center; gap:18px; padding:12px 16px; border-bottom:1px solid var(--line); min-width:0; }
#landing-overlay .l-pf-modes{ display:flex; gap:3px; padding:3px; flex-shrink:0; border-radius:var(--r-pill); background:rgba(255,255,255,.035); border:1px solid var(--line); }
:root[data-theme="light"] #landing-overlay .l-pf-modes{ background:var(--surface-2); }
#landing-overlay .l-pf-mode{
  padding:6px 13px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); transition:color var(--t) var(--ease-out), background-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
#landing-overlay .pf-frame[data-at="1"] .l-pf-mode.is-map, #landing-overlay .pf-frame:not([data-at="1"]) .l-pf-mode.is-profit{
  color:var(--accent-ink); background:var(--btn-fill); box-shadow:inset 0 1px 0 var(--btn-shine), 0 6px 18px -8px var(--btn-shadow);
}
#landing-overlay .pf-tabs{ display:flex; gap:2px; min-width:0; overflow:hidden; transition:opacity var(--t) var(--ease-out); }
#landing-overlay .pf-frame[data-at="1"] .pf-tabs{ opacity:.35; }
#landing-overlay .l-pf-tab{ position:relative; padding:7px 10px; font-size:.84rem; font-weight:600; color:var(--text-3); white-space:nowrap; transition:color var(--t) var(--ease-out); }
#landing-overlay .l-pf-tab::after{
  content:''; position:absolute; left:10px; right:10px; bottom:-13px; height:2px; border-radius:2px;
  background:var(--accent-base); transform:scaleX(0); transition:transform var(--t) var(--ease-out);
}
#landing-overlay .pf-frame[data-at="2"] [data-tab="overview"], #landing-overlay .pf-frame[data-at="5"] [data-tab="overview"],
#landing-overlay .pf-frame[data-at="3"] [data-tab="fleet"], #landing-overlay .pf-frame[data-at="4"] [data-tab="clients"]{ color:var(--text); }
#landing-overlay .pf-frame[data-at="2"] [data-tab="overview"]::after, #landing-overlay .pf-frame[data-at="5"] [data-tab="overview"]::after,
#landing-overlay .pf-frame[data-at="3"] [data-tab="fleet"]::after, #landing-overlay .pf-frame[data-at="4"] [data-tab="clients"]::after{ transform:scaleX(1); }
#landing-overlay .pf-frame .proof-panel{ padding:clamp(16px,2vw,26px); place-items:center stretch; }
/* a narrower window keeps only the tabs the walk visits */
@media (max-width:1280px){ #landing-overlay .l-pf-tab[data-tab="orders"], #landing-overlay .l-pf-tab[data-tab="drivers"]{ display:none; } }

/* shared screen parts */
#landing-overlay .pfs{ display:flex; flex-direction:column; gap:12px; width:100%; min-width:0; font-variant-numeric:tabular-nums; }
#landing-overlay .pfs-head{ display:flex; justify-content:space-between; align-items:center; gap:10px 14px; flex-wrap:wrap; }
#landing-overlay .pfs-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.12rem,1.5vw,1.3rem); letter-spacing:-.02em; word-spacing:.04em; }
#landing-overlay .pfs-pill{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:600; color:var(--text-2); background:rgba(255,255,255,.04); border:1px solid var(--line);
}
#landing-overlay .pfs-pill.is-good{ color:var(--accent); background:var(--tint); border-color:color-mix(in srgb, var(--accent-base) 30%, transparent); }
#landing-overlay .pfs-sub{ display:block; margin-top:1px; font-size:.76rem; font-weight:500; color:var(--text-3); }
#landing-overlay .pfs-card, #landing-overlay .pfs-kpi, #landing-overlay .pfs-idle, #landing-overlay .pfs-hud{
  border-radius:14px; background:var(--surface); border:1px solid var(--line);
}
:root[data-theme="light"] #landing-overlay .pfs-card, :root[data-theme="light"] #landing-overlay .pfs-kpi, :root[data-theme="light"] #landing-overlay .pfs-idle, :root[data-theme="light"] #landing-overlay .pfs-hud{ background:var(--surface-2); }
#landing-overlay .pfs-chip{
  display:inline-block; min-width:3.4em; padding:3px 8px; border-radius:var(--r-pill); text-align:center; white-space:nowrap;
  font-size:.8rem; font-weight:600; color:var(--text-2); background:rgba(255,255,255,.05);
}
:root[data-theme="light"] #landing-overlay .pfs-chip{ background:rgba(12,12,14,.06); }
#landing-overlay .pfs-chip.is-good{ color:var(--accent); background:var(--tint-2); }
#landing-overlay .pfs-chip.is-warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); }

/* 1 · the run on the map */
#landing-overlay .pfs-map{
  position:relative; overflow:hidden; aspect-ratio:800 / 350; border-radius:14px; border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 80% at 60% 50%, var(--tint), transparent 75%), var(--surface);
}
:root[data-theme="light"] #landing-overlay .pfs-map{ background:radial-gradient(ellipse 70% 80% at 60% 50%, var(--tint), transparent 75%), var(--surface-2); }
#landing-overlay .pfs-svg{ display:block; width:100%; height:100%; }
#landing-overlay .pfs-eu path{ fill:rgba(255,255,255,.025); stroke:rgba(255,255,255,.15); stroke-width:1; }
:root[data-theme="light"] #landing-overlay .pfs-eu path{ fill:rgba(12,12,14,.03); stroke:rgba(12,12,14,.18); }
#landing-overlay .pfs-route{ fill:none; stroke:var(--accent-hi); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#landing-overlay .pfs-route-glow{ fill:none; stroke:var(--accent-base); stroke-width:11; stroke-linecap:round; stroke-linejoin:round; opacity:.22; filter:blur(5px); }
:root[data-theme="light"] #landing-overlay .pfs-route{ stroke:var(--accent-base); }
#landing-overlay .pfs-end{ r:7px; fill:var(--bg); stroke:var(--accent-base); stroke-width:3px; }
#landing-overlay .pfs-town{
  font-family:var(--font-head); font-weight:700; font-size:18px; fill:var(--text);
  paint-order:stroke; stroke:var(--surface); stroke-width:6px; stroke-linejoin:round;
}
#landing-overlay .pfs-hud{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#landing-overlay .pfs-hud > div{ padding:12px 14px; min-width:0; }
#landing-overlay .pfs-hud > div + div{ border-left:1px solid var(--line); }
#landing-overlay .pfs-hud dt{ font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; }
#landing-overlay .pfs-hud dd{ margin-top:4px; font-family:var(--font-head); font-weight:700; font-size:clamp(1rem,1.4vw,1.2rem); letter-spacing:-.02em; white-space:nowrap; }
#landing-overlay .pfs-hud .is-profit dd span{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em; }
#landing-overlay .pfs-save{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
#landing-overlay .pfs-save-btn{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; border-radius:var(--r-pill);
  font-size:.86rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--btn-fill);
  box-shadow:inset 0 1px 0 var(--btn-shine), inset 0 -1px 0 rgba(0,40,55,.35), 0 12px 30px -14px var(--btn-shadow);
}
#landing-overlay .pfs-save-btn svg{ width:18px; height:18px; }
#landing-overlay .pfs-save-btn::after, #landing-overlay .pfs-an-btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(235,252,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);
}
#landing-overlay .pf-frame .proof-panel.is-active .pfs-save-btn::after{ animation:pfsSheen 1.4s var(--ease-io) .6s both; }
#landing-overlay .pf-frame .proof-panel.is-active .pfs-an-btn::after{ animation:pfsSheen 1.2s var(--ease-io) .25s both; }
@keyframes pfsSheen{ to{ transform:translateX(120%); } }
#landing-overlay .pfs-save-note{ text-align:center; font-size:.86rem; color:var(--text-3); }

/* 2 · the month */
#landing-overlay .pfs-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#landing-overlay .pfs-kpi{ padding:13px 16px 14px; min-width:0; }
#landing-overlay .pfs-k-l{ font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
#landing-overlay .pfs-k-v{ margin-top:4px; font-family:var(--font-head); font-weight:700; font-size:clamp(1.3rem,1.9vw,1.65rem); letter-spacing:-.03em; line-height:1.15; white-space:nowrap; }
#landing-overlay .pfs-kpi.is-profit .pfs-k-v span{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em; }
#landing-overlay .pfs-k-s{ display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:3px; font-size:.8rem; color:var(--text-3); }
#landing-overlay .pfs-up{ color:var(--accent); font-weight:600; }
#landing-overlay .pfs-two{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; }
#landing-overlay .pfs-card{ padding:13px 16px 14px; min-width:0; }
#landing-overlay .pfs-card-t{ font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:12px; }
#landing-overlay .pfs-trend{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; align-items:end; height:112px; }
#landing-overlay .pfs-trend li{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
#landing-overlay .pfs-trend i{
  display:block; width:100%; max-width:24px; height:calc(var(--h) * 86px); border-radius:5px 5px 2px 2px; background:var(--line-2);
  transform-origin:50% 100%; transition:transform .8s var(--ease-out);
}
#landing-overlay .pfs-trend li:nth-child(2) i{ transition-delay:.05s; } #landing-overlay .pfs-trend li:nth-child(3) i{ transition-delay:.1s; }
#landing-overlay .pfs-trend li:nth-child(4) i{ transition-delay:.15s; } #landing-overlay .pfs-trend li:nth-child(5) i{ transition-delay:.2s; } #landing-overlay .pfs-trend li:nth-child(6) i{ transition-delay:.25s; }
#landing-overlay .pfs-trend .is-now i{ background:linear-gradient(180deg, var(--accent-hi), var(--accent-base)); }
#landing-overlay .pfs-trend span{ font-size:.7rem; color:var(--text-3); }
#landing-overlay .pfs-trend .is-now span{ color:var(--text); font-weight:600; }
#landing-overlay .pfs-costs li{ display:grid; grid-template-columns:minmax(4.6em,auto) minmax(30px,1fr) auto; gap:10px; align-items:center; padding:5px 0; }
#landing-overlay .pfs-cname{ font-size:.84rem; color:var(--text-2); white-space:nowrap; }
#landing-overlay .pfs-cbar{ height:8px; border-radius:6px; background:var(--line); overflow:hidden; }
#landing-overlay .pfs-cbar i, #landing-overlay .pfs-lbar i{
  display:block; height:100%; width:calc(var(--w) * 100%); border-radius:6px;
  background:linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
  transform-origin:0 50%; transition:transform .9s var(--ease-out) .1s;
}
#landing-overlay .pfs-cval{ display:flex; gap:8px; justify-content:flex-end; font-size:.84rem; white-space:nowrap; }
#landing-overlay .pfs-cval span{ min-width:2.9em; text-align:right; color:var(--text-3); }

/* 3 · vehicles and drivers */
#landing-overlay .pfs-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
#landing-overlay .pfs-table th{
  padding:6px 10px 9px; text-align:left; font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
#landing-overlay .pfs-table td{ padding:10px; border-bottom:1px solid var(--line); color:var(--text-2); white-space:nowrap; }
#landing-overlay .pfs-table tr:last-child td{ border-bottom:0; }
#landing-overlay .pfs-table th:first-child, #landing-overlay .pfs-table td:first-child{ padding-left:2px; }
#landing-overlay .pfs-table th:last-child, #landing-overlay .pfs-table td:last-child{ padding-right:2px; }
#landing-overlay .pfs-table b{ color:var(--text); font-weight:600; }
#landing-overlay .pfs-table .is-num{ text-align:right; }
#landing-overlay .pfs-idle{ padding:13px 16px 12px; }
#landing-overlay .pfs-idle-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; font-size:.86rem; }
#landing-overlay .pfs-idle-head b{ font-weight:600; }
#landing-overlay .pfs-drow{ display:grid; grid-template-columns:5.2em minmax(0,1fr) 3.6em; gap:12px; align-items:center; padding:4px 0; }
#landing-overlay .pfs-dname{ font-size:.84rem; font-weight:600; white-space:nowrap; }
#landing-overlay .pfs-days{ display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); gap:2px; }
#landing-overlay .pfs-days li{
  height:16px; border-radius:3px; background:var(--line);
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out); transition-delay:calc(var(--i) * 12ms);
}
#landing-overlay .pfs-days li.is-load{ background:linear-gradient(180deg, var(--accent-hi), var(--accent-base)); }
#landing-overlay .pfs-days li.is-idle{ background:var(--warn); }
#landing-overlay .pfs-dcost{ text-align:right; font-size:.84rem; font-weight:600; color:var(--warn); white-space:nowrap; }
#landing-overlay .pfs-dcost.is-zero{ color:var(--text-3); }

/* 4 · lanes by margin; the line in each bar is the target */
#landing-overlay .pfs-tick{ width:2px; height:12px; border-radius:2px; background:var(--text-2); }
#landing-overlay .pfs-lanes li{
  display:grid; grid-template-columns:6.4em minmax(40px,1fr) auto 4.6em; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
#landing-overlay .pfs-lanes li:last-child{ border-bottom:0; }
#landing-overlay .pfs-lane b{ font-weight:600; white-space:nowrap; }
#landing-overlay .pfs-lbar{ position:relative; height:10px; border-radius:6px; background:var(--line); }
#landing-overlay .pfs-lbar i{ position:absolute; left:0; top:0; }
#landing-overlay .pfs-lanes .is-warn .pfs-lbar i{ background:var(--warn); }
#landing-overlay .pfs-lbar em{ position:absolute; left:50%; top:-5px; bottom:-5px; width:2px; border-radius:2px; background:var(--text-2); opacity:.55; }
#landing-overlay .pfs-leur{ text-align:right; font-weight:600; white-space:nowrap; }

/* 5 · the analysis */
#landing-overlay .pfs-an-head{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; }
#landing-overlay .pfs-an-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:700; letter-spacing:.14em; color:var(--accent-ink); background:var(--btn-fill);
  box-shadow:inset 0 1px 0 var(--btn-shine), 0 10px 26px -14px var(--btn-shadow);
}
#landing-overlay .pfs-verdict{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.05rem,1.45vw,1.25rem); letter-spacing:-.02em; word-spacing:.04em; }
#landing-overlay .pfs-findings{ display:flex; flex-direction:column; gap:8px; }
#landing-overlay .pfs-findings li{ position:relative; padding:12px 14px 12px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
:root[data-theme="light"] #landing-overlay .pfs-findings li{ background:var(--surface-2); }
#landing-overlay .pfs-findings li::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--warn); }
#landing-overlay .pfs-findings p:first-child{ color:var(--text); font-weight:500; }
#landing-overlay .pfs-do{ margin-top:3px; color:var(--accent); font-weight:600; }
#landing-overlay .pfs-an-actions{ display:flex; gap:10px; }
#landing-overlay .pfs-an-actions .l-share-btn{ min-height:40px; padding:0 16px; font-size:.86rem; }

/* settling in: when a screen becomes the open one */
#landing-overlay .pfs-kpi, #landing-overlay .pfs-findings li, #landing-overlay .pfs-lanes li, #landing-overlay .pfs-table tbody tr, #landing-overlay .pfs-hud, #landing-overlay .pfs-save{
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
#landing-overlay .pfs-kpi:nth-child(2), #landing-overlay .pfs-lanes li:nth-child(2), #landing-overlay .pfs-findings li:nth-child(2), #landing-overlay .pfs-table tbody tr:nth-child(2){ transition-delay:.07s; }
#landing-overlay .pfs-kpi:nth-child(3), #landing-overlay .pfs-lanes li:nth-child(3), #landing-overlay .pfs-findings li:nth-child(3), #landing-overlay .pfs-table tbody tr:nth-child(3){ transition-delay:.14s; }
#landing-overlay .pfs-kpi:nth-child(4), #landing-overlay .pfs-lanes li:nth-child(4){ transition-delay:.21s; }
#landing-overlay .pfs-lanes li:nth-child(5){ transition-delay:.28s; }
#landing-overlay .pfs-save{ transition-delay:.15s; }
#landing-overlay .pf-frame .proof-panel:not(.is-active) :is(.pfs-kpi, .pfs-findings li, .pfs-lanes li, .pfs-table tbody tr, .pfs-hud, .pfs-save){ opacity:0; transform:translateY(10px); }
#landing-overlay .pf-frame .proof-panel:not(.is-active) .pfs-trend i{ transform:scaleY(0); }
#landing-overlay .pf-frame .proof-panel:not(.is-active) :is(.pfs-cbar i, .pfs-lbar i){ transform:scaleX(0); }
#landing-overlay .pf-frame .proof-panel:not(.is-active) .pfs-days li{ opacity:0; transform:scaleY(.3); }

/* what "built in" means */
#landing-overlay .pf-facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(56px,7vw,96px);
  border-top:1px solid var(--line);
}
#landing-overlay .pf-facts > div{ padding:26px 26px 0 0; }
#landing-overlay .pf-facts > div + div{ padding-left:26px; border-left:1px solid var(--line); }
#landing-overlay .pf-facts dt{ font-family:var(--font-head); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; word-spacing:.04em; }
#landing-overlay .pf-facts dd{ margin-top:8px; color:var(--text-2); font-size:.98rem; line-height:1.55; text-wrap:pretty; }

@media (max-width:900px){
  #landing-overlay .pf-tour{ grid-template-columns:1fr; }
  #landing-overlay .pf-stage{ order:-1; }
  /* the window keeps the height of its tallest screen; shorter ones sit at the top */
  #landing-overlay .pf-frame .proof-panel{ place-items:start stretch; }
  #landing-overlay .pf-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #landing-overlay .pf-facts > div:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:600px){
  #landing-overlay .pfs-hud{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #landing-overlay .pfs-hud > div:nth-child(3){ border-left:0; }
  #landing-overlay .pfs-hud > div:nth-child(n+3){ border-top:1px solid var(--line); }
  #landing-overlay .pfs-end{ r:13px; stroke-width:4px; }
  #landing-overlay .pfs-town{ font-size:34px; stroke-width:9px; }
  #landing-overlay .pfs-two{ grid-template-columns:1fr; }
  #landing-overlay .pfs-hide-s{ display:none; }
  #landing-overlay .pfs-table{ font-size:.86rem; }
  #landing-overlay .pfs-table td, #landing-overlay .pfs-table th{ padding-left:6px; padding-right:6px; }
  #landing-overlay .pfs-drow{ grid-template-columns:1fr auto; gap:6px 10px; padding:6px 0; }
  #landing-overlay .pfs-days{ grid-column:1 / -1; grid-row:2; gap:1.5px; }
  #landing-overlay .pfs-days li{ height:14px; border-radius:2px; }
  #landing-overlay .pf-frame .proof-panel{ padding:14px; }
  #landing-overlay .pf-tabs{ display:none; }
  #landing-overlay .pf-step{ padding:12px 12px 14px 8px; gap:0 12px; }
  #landing-overlay .pfs-table th{ letter-spacing:.06em; font-size:.62rem; }
  #landing-overlay .pfs-lanes li{ grid-template-columns:5.6em minmax(24px,1fr) auto; gap:10px; }
  #landing-overlay .pfs-leur{ display:none; }
  #landing-overlay .pfs-an-actions{ flex-direction:column; }
  #landing-overlay .pf-facts{ grid-template-columns:1fr; }
  #landing-overlay .pf-facts > div, #landing-overlay .pf-facts > div + div{ padding:22px 0 0; border-left:0; }
}

/* ================= FUNKCJE =================
   One module at a time: tabs, one sentence with a few facts, and the
   real screen of the app below, as large as the page allows. The shots
   are taken at twice their size, so they stay sharp on any display. */
#landing-overlay .showcase{ margin-top:clamp(40px,5vw,64px); }
/* the tabs, the sentence and the whole screen fit in one view */
@media (min-width:901px){ #landing-overlay .showcase{ max-width:max(760px, calc((100svh - 320px) * 1.78)); } }
#landing-overlay .sc-tabs{
  display:inline-flex; gap:4px; padding:5px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  border-radius:var(--r-pill); background:rgba(255,255,255,.035); border:1px solid var(--line);
}
#landing-overlay .sc-tabs::-webkit-scrollbar{ display:none; }
:root[data-theme="light"] #landing-overlay .sc-tabs{ background:var(--surface-2); }
#landing-overlay .sc-tab{
  position:relative; overflow:hidden; flex-shrink:0; min-height:44px; padding:0 20px; border-radius:var(--r-pill); white-space:nowrap;
  font-size:.97rem; font-weight:600; color:var(--text-2);
  transition:color var(--t-fast), background-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
#landing-overlay .sc-tab:hover{ color:var(--text); }
#landing-overlay .sc-tab.is-active{ color:var(--accent-ink); background:var(--btn-fill); box-shadow:inset 0 1px 0 var(--btn-shine), 0 8px 22px -12px var(--btn-shadow); }
#landing-overlay .sc-tab-time{
  position:absolute; left:18px; right:18px; bottom:5px; height:2px; border-radius:2px;
  background:var(--accent-ink); opacity:0; transform-origin:0 50%; transform:scaleX(0);
}
#landing-overlay .showcase.is-walking .sc-tab.is-active .sc-tab-time{ opacity:.45; }
#landing-overlay .sc-panels{ display:grid; margin-top:clamp(22px,2.6vw,32px); touch-action:pan-y; }
#landing-overlay .sc-panel{ grid-area:1 / 1; min-width:0; }
#landing-overlay .sc-panel[hidden]{ display:block; visibility:hidden; opacity:0; pointer-events:none; }
#landing-overlay .sc-panel.is-active{ animation:scIn .6s var(--ease-out) both; }
@keyframes scIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
#landing-overlay .sc-info{ display:flex; justify-content:space-between; align-items:center; gap:14px 40px; flex-wrap:wrap; }
#landing-overlay .sc-info p{ font-size:clamp(1.0625rem,1.3vw,1.18rem); line-height:1.6; color:var(--text-2); max-width:56ch; text-wrap:pretty; }
#landing-overlay .sc-info .mod-chips{ margin-top:0; }
#landing-overlay .sc-shot{
  position:relative; margin-top:clamp(18px,2vw,26px); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
#landing-overlay .sc-shot::before{
  content:''; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--accent-hi), transparent); opacity:.6;
}
#landing-overlay .sc-shot img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; }
#landing-overlay .mod-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
#landing-overlay .mod-chips li{
  padding:7px 14px; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--text); white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
}
:root[data-theme="light"] #landing-overlay .mod-chips li{ background:var(--surface); }
@media (max-width:600px){
  #landing-overlay .sc-tab{ padding:0 14px; font-size:.9rem; }
  #landing-overlay .sc-shot{ border-radius:var(--r); }
  #landing-overlay .mod-chips li{ white-space:normal; }
}

/* ================= VAN / TIR / FLOTA ================= */
#landing-overlay .mode-list{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); }
#landing-overlay .mode-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:12px 48px; align-items:center;
  padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line);
}
#landing-overlay .mode-word{
  font-family:var(--font-head); font-weight:800; font-size:clamp(3.4rem,8.6vw,7.4rem); letter-spacing:-.05em; line-height:.95;
  padding-bottom:.04em;
}
#landing-overlay .mode-word.is-van{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
#landing-overlay .mode-word.is-tir{ background:var(--tir-metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
#landing-overlay .mode-word.is-fleet{ color:var(--text); }
#landing-overlay .mode-text{ font-size:clamp(1.0625rem,1.3vw,1.18rem); line-height:1.6; color:var(--text-2); max-width:52ch; text-wrap:pretty; }
@media (max-width:760px){ #landing-overlay .mode-row{ grid-template-columns:1fr; } }

/* ================= CENNIK ================= */
#landing-overlay .pr-controls{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:clamp(32px,4vw,44px); }
#landing-overlay .seg{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--bg-2); }
#landing-overlay .seg-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  font-size:.95rem; font-weight:600; color:var(--text-2);
  transition:background-color var(--t-fast), color var(--t-fast);
}
#landing-overlay .seg-btn:hover{ color:var(--text); }
#landing-overlay .seg-btn small{ font-size:.82rem; font-weight:600; color:var(--accent); }
#landing-overlay .seg-btn.is-on{ background:var(--tint-2); color:var(--text); }

#landing-overlay .pr-panel{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(20px,3vw,36px);
  margin-top:clamp(24px,3vw,36px); padding:clamp(24px,3.4vw,44px);
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%), var(--surface);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"] #landing-overlay .pr-panel{ background:var(--surface); box-shadow:var(--shadow-lg), inset 0 1px 0 #fff; }
#landing-overlay .pr-label{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
#landing-overlay .pr-plan{ margin-top:8px; font-family:var(--font-head); font-weight:700; font-size:1.2rem; letter-spacing:-.015em; }
#landing-overlay .pr-rate-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:14px; }
#landing-overlay .pr-rate{ font-family:var(--font-head); font-weight:700; font-size:clamp(3rem,6vw,4.4rem); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
#landing-overlay .pr-rate-unit{ color:var(--text-2); }
#landing-overlay .pr-billed{ margin-top:6px; font-size:.95rem; color:var(--text-3); }

#landing-overlay .pr-seats{ margin-top:clamp(28px,3vw,36px); }
#landing-overlay .pr-seats-head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; }
#landing-overlay .pr-seats-val{ font-family:var(--font-head); font-weight:700; font-size:1.6rem; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
#landing-overlay .pr-slider{
  --pct:0%;
  -webkit-appearance:none; appearance:none; width:100%; height:44px; margin-top:6px; background:transparent; cursor:pointer;
}
#landing-overlay .pr-slider::-webkit-slider-runnable-track{
  height:6px; border-radius:6px;
  background:linear-gradient(90deg, var(--accent-lo), var(--accent-hi)) 0 0 / var(--pct) 100% no-repeat, var(--line-2);
}
#landing-overlay .pr-slider::-moz-range-track{ height:6px; border-radius:6px; background:var(--line-2); }
#landing-overlay .pr-slider::-moz-range-progress{ height:6px; border-radius:6px; background:linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); }
#landing-overlay .pr-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:var(--btn-fill); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent-lo), 0 4px 12px rgba(0,0,0,.45);
  transition:transform var(--t-fast) var(--ease-out);
}
#landing-overlay .pr-slider::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--accent-base); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent-lo), 0 4px 12px rgba(0,0,0,.45);
}
#landing-overlay .pr-slider:hover::-webkit-slider-thumb, #landing-overlay .pr-slider:active::-webkit-slider-thumb{ transform:scale(1.1); }
#landing-overlay .pr-slider:focus-visible{ outline:none; }
#landing-overlay .pr-slider:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:3px; }
#landing-overlay .pr-slider-ends{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--text-3); }

#landing-overlay .pr-total{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
#landing-overlay .pr-total-label{ font-weight:600; }
#landing-overlay .pr-breakdown{ margin-top:2px; font-size:.95rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
#landing-overlay .pr-total-right{ text-align:right; }
#landing-overlay .pr-total-amt{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,3vw,2.2rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#landing-overlay .pr-total-period{ font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:0; color:var(--text-2); }
#landing-overlay .pr-annual-sub{ font-size:.9rem; color:var(--text-3); }
#landing-overlay .pr-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
#landing-overlay .pr-actions .btn{ flex:1 1 220px; }
#landing-overlay .pr-demo-note{ margin-top:14px; font-size:.95rem; color:var(--text-2); }

#landing-overlay .pr-side{ display:flex; flex-direction:column; gap:16px; }
#landing-overlay .pr-cmp{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
#landing-overlay .pr-cmp-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  transition:background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
#landing-overlay .pr-cmp-row b{ display:block; font-family:var(--font-head); font-weight:700; letter-spacing:-.01em; }
#landing-overlay .pr-cmp-row small{ display:block; font-size:.9rem; color:var(--text-3); }
#landing-overlay .pr-cmp-price{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-2); }
#landing-overlay .pr-cmp-row.is-on{ background:var(--tint); border-color:var(--tint-2); }
#landing-overlay .pr-cmp-row.is-on .pr-cmp-price{ color:var(--accent); }
#landing-overlay .pr-daily{
  margin-top:auto; padding:22px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2);
}
:root[data-theme="light"] #landing-overlay .pr-daily{ background:var(--surface-2); }
#landing-overlay .pr-daily-val{ margin-top:8px; font-family:var(--font-head); font-weight:700; font-size:clamp(2.2rem,4vw,3rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
#landing-overlay .pr-daily-unit{ margin-top:6px; color:var(--text-2); }
#landing-overlay .pr-daily-caption{ margin-top:12px; color:var(--text-2); text-wrap:pretty; }
#landing-overlay .pr-note{ margin-top:22px; text-align:center; color:var(--text-2); }
@media (max-width:900px){ #landing-overlay .pr-panel{ grid-template-columns:1fr; } }

/* ================= FAQ ================= */
#landing-overlay .faq-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,96px); align-items:start; }
#landing-overlay .faq-head{ position:sticky; top:calc(var(--nav-top) + var(--nav-h) + 40px); }
#landing-overlay .faq-head .h-section{ max-width:10ch; }
#landing-overlay .faq-head .lead{ margin-top:24px; max-width:36ch; }
#landing-overlay .reach{ margin-top:clamp(26px,3vw,36px); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
#landing-overlay .reach-phone{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.03em; line-height:1.15;
  font-variant-numeric:tabular-nums; transition:opacity var(--t-fast);
}
#landing-overlay .reach-phone:hover{ opacity:.85; }
#landing-overlay .reach-mail{ font-size:1.0625rem; font-weight:500; color:var(--text-2); transition:color var(--t-fast); }
#landing-overlay .reach-mail:hover{ color:var(--accent); }

#landing-overlay .faq-list{ border-top:1px solid var(--line); }
#landing-overlay .l-faq-item{ border-bottom:1px solid var(--line); }
#landing-overlay .faq-q{ margin:0; font-size:inherit; font-weight:inherit; }
#landing-overlay .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.08rem,1.6vw,1.25rem); letter-spacing:-.015em; line-height:1.35;
  transition:color var(--t-fast);
}
#landing-overlay .faq-btn:hover{ color:var(--accent); }
#landing-overlay .faq-icon{ position:relative; width:14px; height:14px; flex-shrink:0; }
#landing-overlay .faq-icon::before, #landing-overlay .faq-icon::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:1px;
  transition:transform .45s var(--ease-out), opacity .3s;
}
#landing-overlay .faq-icon::before{ width:14px; height:1.6px; transform:translate(-50%,-50%); }
#landing-overlay .faq-icon::after{ width:1.6px; height:14px; transform:translate(-50%,-50%); }
#landing-overlay .l-faq-item.is-open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
#landing-overlay .l-faq-item.is-open .faq-btn{ color:var(--accent); }
#landing-overlay .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
#landing-overlay .l-faq-item.is-open .faq-a{ grid-template-rows:1fr; }
#landing-overlay .faq-a-inner{ overflow:hidden; }
#landing-overlay .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);
}
#landing-overlay .faq-a strong{ color:var(--text); font-weight:600; }
#landing-overlay .l-faq-item.is-open .faq-a p{ opacity:1; transform:none; transition-delay:.08s; }
@media (max-width:900px){
  #landing-overlay .faq-grid{ grid-template-columns:1fr; }
  #landing-overlay .faq-head{ position:static; }
}

/* ================= ZAMKNIĘCIE ================= */
#landing-overlay .closing{ text-align:center; overflow:hidden; padding-bottom:clamp(40px,6vw,80px); }
#landing-overlay .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(104,214,236,.07), rgba(60,190,220,.02) 55%, transparent);
  pointer-events:none;
}
:root[data-theme="light"] #landing-overlay .closing-light{ background:radial-gradient(closest-side, rgba(30,150,180,.1), transparent); }
#landing-overlay .closing-inner{ position:relative; }
#landing-overlay .closing-title{ margin:0 auto; }
#landing-overlay .closing .lead{ margin:26px auto 0; max-width:70ch; }
#landing-overlay .closing-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ================= CONTACT MODAL ================= */
#landing-overlay .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"] #landing-overlay .contact-modal{ background:rgba(20,20,24,.32); }
#landing-overlay .contact-modal.open{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity var(--t) var(--ease-out), visibility 0s; }
#landing-overlay .contact-modal:focus{ outline:none; }
#landing-overlay .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);
}
#landing-overlay .contact-modal.open .contact-panel{ transform:none; }
#landing-overlay .contact-close{
  position:absolute; top:14px; right:14px; width:44px; height:44px; 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);
}
#landing-overlay .contact-close:hover{ background:var(--tint-2); color:var(--accent); transform:rotate(90deg); }
#landing-overlay .contact-aside h2{ font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.035em; }
#landing-overlay .contact-sub{ color:var(--text-2); margin-top:12px; text-wrap:pretty; }
#landing-overlay .contact-facts{ margin-top:32px; display:flex; flex-direction:column; gap:16px; }
#landing-overlay .contact-fact{ padding-top:16px; border-top:1px solid var(--line); }
#landing-overlay .contact-fact dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
#landing-overlay .contact-fact dd{ display:flex; flex-direction:column; gap:3px; }
#landing-overlay .contact-fact a{ color:var(--accent); font-weight:600; }
#landing-overlay .contact-fact a:hover{ text-decoration:underline; text-underline-offset:3px; }
#landing-overlay .contact-people{ display:flex; flex-direction:column; gap:14px; align-self:center; }
#landing-overlay .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);
}
#landing-overlay .contact-person:hover{ border-color:var(--line-2); transform:translateY(-2px); }
#landing-overlay .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(--accent-ink);
  background:var(--btn-fill);
}
#landing-overlay .contact-name{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:-.015em; }
#landing-overlay .contact-role{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
#landing-overlay .contact-mail{ display:inline-block; margin-top:8px; font-size:.95rem; font-weight:600; color:var(--accent); word-break:break-word; }
#landing-overlay .contact-mail:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:800px){
  #landing-overlay .contact-panel{ grid-template-columns:1fr; gap:28px; }
  #landing-overlay .contact-people{ align-self:stretch; }
}
@media (max-width:480px){
  #landing-overlay .contact-person{ padding:16px; gap:12px; }
  #landing-overlay .contact-avatar{ width:42px; height:42px; }
}

/* ================= FOOTER ================= */
#landing-overlay .footer{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%);
  padding-top:clamp(84px,9vw,150px);
}
#landing-overlay .footer-wordmark-wrap{ position:absolute; top:clamp(8px,2vw,28px); left:0; right:0; display:flex; justify-content:center; pointer-events:none; }
#landing-overlay .footer-wordmark{
  font-family:var(--font-head); font-weight:800; font-size:clamp(3.4rem,12.5vw,11.5rem); letter-spacing:-.06em; line-height:1;
  padding:0 .06em;
  background:linear-gradient(180deg, rgba(116,220,234,.13) 0%, rgba(31,164,194,.08) 38%, rgba(18,122,149,.03) 72%, rgba(18,122,149,0) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; user-select:none;
}
:root[data-theme="light"] #landing-overlay .footer-wordmark{ background:linear-gradient(180deg, rgba(19,132,159,.2) 0%, rgba(19,132,159,.11) 38%, rgba(19,132,159,.04) 72%, rgba(19,132,159,0) 96%); -webkit-background-clip:text; background-clip:text; }
#landing-overlay .footer-main{ position:relative; z-index:1; }
#landing-overlay .footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-top:clamp(32px,4vw,56px); }
#landing-overlay .footer-logo{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; font-family:var(--font-head); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; }
#landing-overlay .footer-logo span:not(.logo-metal){ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em; }
#landing-overlay .footer-logo img{ height:24px; width:auto; }
#landing-overlay .footer-brand p{ color:var(--text-2); font-size:1rem; max-width:34ch; margin-bottom:18px; }
#landing-overlay .footer-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; font-size:1rem; }
#landing-overlay .footer-contact a:hover, #landing-overlay .footer-col a:hover, #landing-overlay .footer-linkbtn:hover, #landing-overlay .footer-crosslinks a:hover{ color:var(--accent); }
#landing-overlay .footer-social{ display:flex; gap:10px; }
#landing-overlay .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);
}
#landing-overlay .footer-social a:hover{ color:var(--accent); border-color:var(--accent-base); background:var(--tint); transform:translateY(-2px); }
#landing-overlay .footer-col h2{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px; }
#landing-overlay .footer-col li{ margin-bottom:12px; }
#landing-overlay .footer-col a, #landing-overlay .footer-linkbtn{ font-size:1rem; color:var(--text); transition:color var(--t-fast); }
#landing-overlay .footer-linkbtn{ padding:0; text-align:left; }
#landing-overlay .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:.88rem; color:var(--text-3);
}
#landing-overlay .footer-crosslinks{ display:flex; gap:10px; align-items:center; }
#landing-overlay .footer-crosslinks a{ transition:color var(--t-fast); }
@media (max-width:900px){ #landing-overlay .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ #landing-overlay .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } #landing-overlay .footer-brand{ grid-column:1 / -1; } }

/* touch screens: every link at least ~44 px tall; only the hit area grows */
@media (pointer:coarse), (max-width:760px){
  #landing-overlay .footer-col li{ margin-bottom:0; }
  #landing-overlay .footer-col a, #landing-overlay .footer-linkbtn{ display:inline-flex; align-items:center; min-height:44px; }
  #landing-overlay .footer-contact{ gap:0; }
  #landing-overlay .footer-contact a{ display:inline-flex; align-items:center; min-height:44px; }
  #landing-overlay .footer-social a{ width:44px; height:44px; }
  #landing-overlay .footer-crosslinks a{ display:inline-flex; align-items:center; min-height:44px; }
  #landing-overlay .reach{ gap:0; }
  #landing-overlay .reach a{ display:inline-flex; align-items:center; min-height:48px; }
  #landing-overlay .mobile-meta a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ================= scroll-top ================= */
#landing-overlay .scroll-top{
  position:fixed; right:calc(var(--gutter) + var(--sbw,0px)); 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);
}
#landing-overlay .scroll-top.visible{ opacity:1; pointer-events:auto; transform:none; }
#landing-overlay .scroll-top:hover{ border-color:var(--accent-base); transform:translateY(-2px); }
#landing-overlay .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); }
#landing-overlay .scroll-top:hover svg{ transform:translateY(-1px); }
:root[data-theme="light"] #landing-overlay .scroll-top svg{ filter:drop-shadow(0 1px 1px rgba(10,74,92,.25)); }
/* the same metal as --metal, as SVG stops */
#landing-overlay .mt-1{ stop-color:#a4ecf4; } #landing-overlay .mt-2{ stop-color:#4cc9e0; } #landing-overlay .mt-3{ stop-color:#1c97b5; } #landing-overlay .mt-4{ stop-color:#0d5f77; }
:root[data-theme="light"] #landing-overlay .mt-1{ stop-color:#2eaecb; } :root[data-theme="light"] #landing-overlay .mt-2{ stop-color:#14879f; }
:root[data-theme="light"] #landing-overlay .mt-3{ stop-color:#0d6a82; } :root[data-theme="light"] #landing-overlay .mt-4{ stop-color:#0a4a5c; }

/* ================= phones: one sentence per line holds ================= */
@media (max-width:600px){
  #landing-overlay .h-section{ font-size:clamp(1.8rem,8.2vw,2.35rem); }
  #landing-overlay .hero-title{ font-size:clamp(2rem,8.6vw,2.7rem); }
}

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

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  #landing-overlay *,#landing-overlay *::before,#landing-overlay *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  #landing-overlay [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  #landing-overlay .hero-light::before, #landing-overlay .hero-light::after{ animation:none; }
  #landing-overlay .proof-panel, #landing-overlay .proof-panel *{ transition:none !important; }
  #landing-overlay .proof-panel.is-active .doc::after{ animation:none; }
  #landing-overlay .pfs, #landing-overlay .pfs *, #landing-overlay .pf-step, #landing-overlay .pf-step *, #landing-overlay .sc-panel{ transition:none !important; animation:none !important; }
}