/* =========================================================
   Šiandiena — design tokens
   ========================================================= */
:root{
  --c-white:#ffffff;
  --c-bg-alt:#F6F5FC;
  /* Primary accent — violet (replaces the old green) */
  --c-green:#6C5CE7;
  --c-green-dark:#4B3FB0;
  --c-green-tint:#EDE9FF;
  /* Secondary accent — coral (replaces the old yellow) */
  --c-yellow:#FF7A45;
  --c-yellow-dark:#E85C2A;
  /* Tertiary accent — deep indigo (replaces the old blue) */
  --c-blue:#2541B2;
  --c-blue-dark:#16296B;
  --c-ink:#1A1830;
  --c-gray:#6E6B85;
  --c-border:#E4E1F0;

  /* Aliases matching the new brand vocabulary — same values as above, used
     in the newer redesigned components so the palette reads intentionally
     rather than as a green→violet find/replace. */
  --c-accent:var(--c-green);
  --c-accent-dark:var(--c-green-dark);
  --c-accent-tint:var(--c-green-tint);
  --c-coral:var(--c-yellow);
  --c-coral-dark:var(--c-yellow-dark);
  --c-indigo:var(--c-blue);
  --c-indigo-dark:var(--c-blue-dark);
  --c-surface:#FBFAFE;

  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;

  --radius-s:8px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-s:0 2px 16px rgba(20,15,60,0.08);
  --shadow-m:0 18px 46px rgba(20,15,60,0.16);
  --shadow-l:0 34px 90px rgba(20,15,60,0.22);
  --gradient-brand:linear-gradient(135deg, var(--c-green) 0%, #8B7CF6 45%, var(--c-coral) 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1120px;

  /* Responsive rhythm — every horizontal gutter and vertical section rhythm is
     derived from these two so a single breakpoint override rescales the whole
     page instead of each component needing its own media query. */
  --gutter:clamp(16px, 4vw, 24px);
  --section-y:clamp(44px, 7vw, 72px);
  /* Height reserved for the bottom row of floating widgets (chat / a11y
     launchers), so fixed panels and the consent banner can stack above them
     without covering each other on a phone. */
  --widget-safe-b:calc(20px + env(safe-area-inset-bottom, 0px));

  /* Root text scale, as two independent factors that multiply:
       --root-fs   — device tier (bigger on a TV, viewed from across the room)
       --a11y-scale — the visitor's own choice in the accessibility toolbar
     Keeping them separate means the TV tier can't silently overwrite (and so
     disable) the visitor's text-size preference. */
  --root-fs:100%;
  --a11y-scale:1;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  font-size:calc(var(--root-fs) * var(--a11y-scale));
  scroll-behavior:smooth;
  /* iOS Safari inflates text when a phone is rotated to landscape unless this
     is pinned — it silently breaks every carefully sized layout below. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  /* Belt-and-braces against a stray wide child causing a sideways scroll on a
     narrow phone. `clip` (not `hidden`) is used so the sticky header keeps
     working — `overflow:hidden` on an ancestor would break `position:sticky`. */
  overflow-x:clip;
}
/* Long unbreakable strings (support e-mail addresses, URLs in the legal pages,
   generated phone numbers) must wrap rather than widen the page on a phone. */
p, li, td, th, dd, figcaption, .lede, .hint{ overflow-wrap:break-word; }
img{ max-width:100%; display:block; }
a{ color:var(--c-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.1; margin:0 0 .5em; color:var(--c-ink); letter-spacing:-0.02em; }
/* The lower clamp bounds are sized for a 320px phone (the narrowest device we
   support) — at 2.4rem the old h1 pushed 3-4 words per line there. */
h1{ font-size:clamp(1.95rem,6.4vw,4.2rem); font-weight:700; }
h2{ font-size:clamp(1.5rem,4.4vw,2.7rem); font-weight:700; }
h3{ font-size:clamp(1.12rem,2.6vw,1.3rem); font-weight:600; }
p{ margin:0 0 1em; color:var(--c-ink); }
.container{
  max-width:var(--maxw); margin:0 auto;
  /* safe-area insets keep content clear of the notch/rounded corners when an
     iPhone is held in landscape */
  padding-left:calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right, 0px));
}
.section{ padding:var(--section-y) 0; }
.section-alt{ background:var(--c-bg-alt); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-blue-dark);
  background:var(--c-green-tint); border:1px solid var(--c-border);
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.lede{ font-size:1.1rem; color:var(--c-gray); max-width:60ch; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* signal-wave signature glyph, reused everywhere */
.signal{ display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
.signal i{ width:3px; background:var(--c-green); border-radius:2px; display:block; }
.signal i:nth-child(1){ height:35%; }
.signal i:nth-child(2){ height:60%; background:var(--c-yellow); }
.signal i:nth-child(3){ height:85%; background:var(--c-blue); }
.signal i:nth-child(4){ height:100%; background:var(--c-green-dark); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:14px 28px; border-radius:var(--radius-m); border:1.5px solid transparent;
  cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:var(--gradient-brand); color:var(--c-white); box-shadow:var(--shadow-s); }
.btn-primary:hover{ box-shadow:var(--shadow-m); filter:brightness(1.05); }
.btn-secondary{ background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); color:var(--c-indigo-dark); border-color:rgba(37,65,178,0.28); }
.btn-secondary:hover{ background:var(--c-indigo-dark); color:var(--c-white); border-color:var(--c-indigo-dark); }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-border); }
.btn-ghost:hover{ border-color:var(--c-accent); color:var(--c-accent-dark); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* =========================================================
   Header / nav
   ========================================================= */
#site-header{ position:sticky; top:0; z-index:40; }
.nav{
  background:rgba(26,21,53,0.92); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,0.08);
  /* anchor for the mobile menu panel, which is positioned against the real
     rendered header height rather than a hardcoded pixel offset */
  position:relative;
}
.nav-row{
  max-width:var(--maxw); margin:0 auto;
  padding:14px calc(var(--gutter) + env(safe-area-inset-right, 0px)) 14px calc(var(--gutter) + env(safe-area-inset-left, 0px));
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff; min-width:0; min-height:44px; }
.brand > span{ white-space:nowrap; }
.brand-mark{ width:34px; height:34px; flex:none; }
/* Two header controls are rendered twice (see build/render-header.js): the CTA
   and the language switcher. Exactly one copy of each is ever visible — the bar
   copies above the nav breakpoint, the menu copies below it. */
.nav-item-cta, .nav-item-lang{ display:none; }
.lang-switcher-menu{ justify-content:center; width:100%; font-size:.95rem; }
.lang-switcher-menu a{ color:var(--c-ink); padding:12px 10px; min-height:44px; display:inline-flex; align-items:center; }
.lang-switcher-menu a.active{ color:var(--c-accent-dark); }
.lang-switcher-menu .lang-sep{ color:var(--c-border); }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:rgba(255,255,255,0.86); font-weight:600; font-size:.95rem; }
.nav-links a:hover{ color:#fff; text-decoration:none; }
.nav-links a.active{ color:var(--c-coral); }
.nav-dropdown{ position:relative; }
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 14px); right:0; background:var(--c-white);
  border:1px solid var(--c-border); border-radius:var(--radius-m); box-shadow:var(--shadow-m);
  min-width:200px; padding:8px; display:none; flex-direction:column;
}
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{ display:flex; }
.nav-dropdown-panel a{ padding:9px 12px; border-radius:var(--radius-s); font-weight:500; color:var(--c-ink); }
.nav-dropdown-panel a:hover{ background:var(--c-bg-alt); text-decoration:none; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.lang-switcher{ display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:.8rem; font-weight:700; }
.lang-switcher a{ color:rgba(255,255,255,0.55); padding:4px 3px; }
.lang-switcher a:hover{ color:#fff; text-decoration:none; }
.lang-switcher a.active{ color:var(--c-coral); }
.lang-switcher .lang-sep{ color:rgba(255,255,255,0.25); }
.nav-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,0.25); border-radius:var(--radius-s); padding:8px 10px; cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; background:#fff; margin:4px 0; }

/* Tablets in portrait keep the full desktop nav but with tighter spacing —
   without this the four links + language switcher + CTA collide at ~768px. */
@media (max-width:1000px) and (min-width:881px){
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:.9rem; }
  .nav-cta{ gap:12px; }
  .nav-cta .btn{ padding:12px 18px; font-size:.88rem; }
}

@media (max-width:880px){
  .nav-row{ gap:12px; }
  /* Visual order on a phone/tablet: brand — hamburger. DOM order (brand,
     toggle, links, cta) is left alone so keyboard/AT users still reach the
     toggle straight after the brand. */
  .brand{ order:1; }
  .nav-toggle{ order:3; }
  .nav-links{
    /* Anchored to the bottom edge of the *real* header rather than a hardcoded
       64px, so it can't overlap or float away from a header whose height
       changed — wrapped brand text, enlarged a11y font size, landscape
       safe-area padding. */
    position:absolute; top:100%; left:var(--gutter); right:var(--gutter);
    order:4; background:var(--c-white);
    border:1px solid var(--c-border); border-radius:var(--radius-m); box-shadow:var(--shadow-m);
    flex-direction:column; align-items:stretch; padding:14px; gap:8px;
    /* A landscape phone is only ~360px tall — the menu has to scroll rather
       than spill off the bottom of the screen. */
    max-height:calc(100svh - 100% - 24px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
  }
  .nav-links.open{ transform:scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{
    width:100%; min-height:48px; padding:12px 10px; color:var(--c-ink); border-radius:var(--radius-s);
    display:flex; align-items:center; justify-content:center;
    text-align:center; transition:background .15s ease, color .15s ease;
  }
  .nav-links a:hover{ background:var(--c-bg-alt); text-decoration:none; }
  .nav-links a.active{ color:var(--c-accent-dark); background:var(--c-accent-tint); font-weight:700; }
  /* The switcher's four links share one row, so they must opt out of the
     full-width treatment the stacked menu links get above — otherwise EN/LT/
     RU/PL end up flung to the four corners of the menu. */
  .nav-links .lang-switcher-menu a{ width:auto; flex:0 0 auto; padding:12px 10px; }
  .nav-dropdown-panel{ position:static; box-shadow:none; border:none; padding:0 0 0 12px; display:none; }
  .nav-dropdown.open .nav-dropdown-panel{ display:flex; }
  .nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; min-width:44px; min-height:44px; }
  /* Below the nav breakpoint the bar carries the brand and the hamburger and
     nothing else — both header controls move into the menu, where the CTA gets
     a full-width tap target and the switcher a full row. Leaving either copy in
     the bar as well showed the same two controls twice on a tablet, and on a
     320-375px phone it pushed the CTA (and half the switcher) off-screen. */
  .nav-cta{ display:none; }
  .nav-item-lang{ display:block; }
  .nav-item-cta{ display:block; margin-top:6px; }
  .nav-item-lang + .nav-item-cta{ margin-top:2px; }
  .nav-item-cta .btn{ width:100%; min-height:48px; }
}
@media (max-width:400px){
  .nav-row{ gap:8px; padding-top:11px; padding-bottom:11px; }
  .brand{ font-size:1.02rem; gap:7px; }
  .brand-mark{ width:29px; height:29px; }
}
/* =========================================================
   Hero
   ========================================================= */
.hero{ padding:clamp(32px,6vw,64px) 0 clamp(24px,4vw,40px); position:relative; overflow:hidden; }
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter:blur(70px); z-index:-1; opacity:.55;
}
.hero::before{ width:460px; height:460px; background:var(--c-accent-tint); top:-160px; right:-110px; }
.hero::after{ width:380px; height:380px; background:#FFE4D6; bottom:-160px; left:-120px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,48px); align-items:center; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }
.hero h1{ margin-bottom:.4em; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--c-blue-dark); }
.hero-stat span{ color:var(--c-gray); font-size:.85rem; }

/* phone / signal illustration */
.wave-card{
  background:rgba(255,255,255,0.55); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.6); border-radius:var(--radius-l);
  padding:clamp(18px,4vw,32px); box-shadow:var(--shadow-l); position:relative;
}
.wave-card .bars{ display:flex; align-items:flex-end; gap:10px; height:120px; margin:20px 0; }
.hero-illustration{ width:100%; height:auto; margin:18px 0; }
.wave-card .bars i{ flex:1; border-radius:8px 8px 2px 2px; animation:pulse 2.4s ease-in-out infinite; }
.wave-card .bars i:nth-child(1){ background:var(--c-green); height:40%; animation-delay:.1s; }
.wave-card .bars i:nth-child(2){ background:var(--c-yellow); height:70%; animation-delay:.3s; }
.wave-card .bars i:nth-child(3){ background:var(--c-blue); height:95%; animation-delay:.5s; }
.wave-card .bars i:nth-child(4){ background:var(--c-green-dark); height:60%; animation-delay:.2s; }
.wave-card .bars i:nth-child(5){ background:var(--c-blue-dark); height:80%; animation-delay:.4s; }
@keyframes pulse{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.7); } }
@media (prefers-reduced-motion:reduce){ .wave-card .bars i{ animation:none; } }

.wave-divider{ display:block; width:100%; height:60px; }
.wave-divider path{ fill:var(--c-bg-alt); }

/* =========================================================
   Cards / grids
   ========================================================= */
.grid{ display:grid; gap:clamp(16px,3vw,24px); }
/* minmax(0,1fr) instead of 1fr: a plain 1fr track has min-width:auto, so one
   long word or a wide table inside a cell would blow the grid (and the page)
   wider than the phone screen. */
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Tablet portrait (768-980px) gets 2 columns rather than dropping straight from
   3 to 1 — an iPad Mini has plenty of room for two cards side by side. */
@media (max-width:980px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .grid-3, .grid-2{ grid-template-columns:minmax(0,1fr); } }

.card{
  background:var(--c-surface); border:1px solid rgba(228,225,240,0.9); border-radius:var(--radius-m);
  padding:clamp(20px,3.5vw,30px); box-shadow:var(--shadow-s); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
  border-top:3px solid transparent;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-top-color:var(--c-accent); }
/* A card that sits directly in a <section>, outside any .container, but has to
   line up with the .container content above it. Replaces a hardcoded
   `max-width:1090px; width:calc(100% - 48px)` inline style that neither
   followed the responsive gutter on phones nor the widened measure on TVs. */
.section-card{
  width:calc(100% - var(--gutter) * 2);
  max-width:calc(var(--maxw) - var(--gutter) * 2);
  margin:24px auto 0;
}
.card h3{ display:flex; align-items:center; gap:10px; }

/* CYBORA trust panel (about page) */
.cybora-panel-head{ display:flex; align-items:flex-start; gap:18px; }
.cybora-icon{ width:40px; height:40px; flex:none; color:var(--c-accent); }
.cybora-panel-head h3{ margin-bottom:8px; }
.cybora-badges{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.cybora-badge{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; flex:1 1 180px;
  background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--radius-m); padding:20px 16px;
}
.cybora-badge svg{ width:120px; height:120px; flex:none; color:var(--c-accent); }
.cybora-badge b{ display:block; font-family:var(--font-display); font-size:.95rem; }
.cybora-badge small{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--c-gray); text-transform:uppercase; }

/* plan / pricing cards */
.plan-card{
  border:1px solid rgba(228,225,240,0.9); border-radius:var(--radius-l); background:var(--c-surface);
  padding:clamp(22px,4vw,34px); display:flex; flex-direction:column; gap:16px; position:relative; box-shadow:var(--shadow-s);
  transition:border-color .3s ease, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.plan-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); }
.plan-card.featured{ border-color:var(--c-accent); box-shadow:var(--shadow-m); background:linear-gradient(180deg, var(--c-accent-tint) 0%, var(--c-surface) 140px); }
.plan-badge{
  position:absolute; top:-13px; left:28px; background:var(--gradient-brand); color:var(--c-white);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.plan-price{ font-family:var(--font-display); font-size:2.6rem; color:var(--c-indigo-dark); display:flex; align-items:baseline; gap:6px; }
.plan-price small{ font-family:var(--font-body); font-size:.95rem; color:var(--c-gray); font-weight:600; }
.plan-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.plan-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; }
.plan-list li::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--c-green); margin-top:7px; flex:none;
}

/* radio-styled selectable cards (used in order form) */
.choice-card{
  border:2px solid var(--c-border); border-radius:var(--radius-m); padding:22px; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; transition:border-color .15s ease, background .15s ease;
  background:var(--c-white);
}
.choice-card:hover{ border-color:var(--c-green); }
.choice-card input{ position:absolute; opacity:0; pointer-events:none; }
.choice-card.selected{ border-color:var(--c-green); background:var(--c-green-tint); }
.choice-price{ font-family:var(--font-display); font-size:1.7rem; color:var(--c-blue-dark); }

/* =========================================================
   Forms
   ========================================================= */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field label{ font-weight:600; font-size:.9rem; }
.field .hint{ font-size:.8rem; color:var(--c-gray); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], select, textarea{
  font-family:var(--font-body);
  /* 16px is not cosmetic: iOS Safari force-zooms the page on focus for any
     field below 16px, and never zooms back out. */
  font-size:16px;
  padding:12px 14px; border-radius:var(--radius-s);
  border:1px solid var(--c-border); background:var(--c-white); color:var(--c-ink); width:100%;
  min-height:46px;
  /* iOS otherwise imposes its own inset shadow + pill radius on text fields */
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:120px; }
/* appearance:none removes the native select arrow, so draw one back in */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236E6B85' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
  padding-right:38px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible{
  outline:3px solid var(--c-yellow); outline-offset:1px;
}
.file-drop{
  border:2px dashed var(--c-border); border-radius:var(--radius-m); padding:22px; text-align:center;
  background:var(--c-bg-alt); cursor:pointer;
}
.file-drop.dragover{ border-color:var(--c-green); background:var(--c-green-tint); }
.checkbox-row{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; }
/* the default 13px box is far below the 24px minimum for a reliable thumb tap */
.checkbox-row input[type=checkbox], .checkbox-row input[type=radio],
.cookie-toggle-row input[type=checkbox], .a11y-toggle-row input[type=checkbox]{
  width:24px; height:24px; flex:none; accent-color:var(--c-accent);
}
.checkbox-row input{ margin-top:2px; }
fieldset{ border:0; padding:0; margin:0; }
legend{ padding:0; font-weight:700; font-family:var(--font-display); font-size:1.1rem; margin-bottom:12px; }

.tabs{ display:flex; gap:10px; border-bottom:1px solid var(--c-border); margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{
  background:none; border:none; padding:12px 4px; font-weight:700; color:var(--c-gray);
  cursor:pointer; border-bottom:3px solid transparent; font-family:var(--font-body); font-size:.98rem;
  min-height:46px; text-align:left;
}
/* Two long tab labels ("Pasilikti savo numerį" / "Gauti naują numerį") don't fit
   on one phone line — give each its own full-width row instead of letting them
   squeeze into unreadable slivers. */
@media (max-width:480px){
  .tabs{ gap:0; }
  .tab-btn{ flex:1 1 100%; padding:12px 2px; font-size:.92rem; }
}
.tab-btn.active{ color:var(--c-green-dark); border-color:var(--c-green); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.number-display{
  font-family:var(--font-mono); font-size:1.7rem; color:var(--c-blue-dark); background:var(--c-bg-alt);
  border:1px dashed var(--c-blue); border-radius:var(--radius-s); padding:16px 20px; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
/* Order page layout. This lives here rather than as an inline style on the form
   (where it used to be) because an inline `grid-template-columns` outranks any
   media query — the sidebar stayed a 96px-wide sliver on a phone. */
.order-layout{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:flex-start; gap:32px;
}
@media (max-width:980px){
  .order-layout{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
.order-summary{
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-m);
  padding:22px; position:sticky; top:96px; box-shadow:var(--shadow-s);
}
/* Once stacked, the summary is just another block in the flow — keeping it
   sticky would pin it over the fields the customer is filling in. */
@media (max-width:980px){ .order-summary{ position:static; top:auto; } }
.order-summary-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--c-border); font-size:.92rem; }
.order-summary-row:last-of-type{ border-bottom:none; }
.step-badge{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--c-green); color:#fff; font-family:var(--font-mono); font-size:.8rem; font-weight:700; margin-right:10px;
}
.success-panel{
  background:var(--c-green-tint); border:1px solid var(--c-green); border-radius:var(--radius-m); padding:24px; display:none;
}
.success-panel.show{ display:block; }
.error-text{ color:#b3401f; font-size:.85rem; display:none; }
.error-text.show{ display:block; }

/* =========================================================
   Footer
   ========================================================= */
#site-footer{ background:linear-gradient(160deg, #1A1535 0%, var(--c-indigo-dark) 60%, #201A4D 100%); color:#ecebfb; margin-top:60px; position:relative; }
.footer-top-wave{ display:block; width:100%; height:48px; margin-top:-1px; }
.footer-top-wave path{ fill:#1A1535; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:28px; padding:20px 0 32px; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .footer-grid{ grid-template-columns:1fr; } }
#site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
#site-footer a{ color:#cfe3e0; }
#site-footer a:hover{ color:#fff; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-protected-by{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:.82rem; color:#9fbdb8; }
.footer-protected-by svg{ flex-shrink:0; color:#9fbdb8; }
.footer-protected-by:hover{ color:#fff; }
.footer-protected-by:hover svg{ color:#fff; }
.footer-brand p{ color:#b9d2ce; font-size:.9rem; max-width:32ch; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#9fbdb8; }

/* =========================================================
   Cookie consent banner
   ========================================================= */
#cookie-consent{
  position:fixed; left:12px; right:12px; z-index:80; max-width:560px; margin:0 auto;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-m);
  box-shadow:var(--shadow-m); padding:clamp(16px,4vw,22px); display:none; gap:14px; flex-direction:column;
  /* Cap the banner so it can never own the whole screen (on a 320x568 phone the
     three stacked buttons plus the explanation filled it edge to edge). The text
     and the preferences list scroll; the action buttons stay pinned and visible,
     so consent is always one tap away without scrolling inside the banner. */
  max-height:min(76svh, calc(100svh - 32px));
}
#cookie-consent > p, #cookie-preferences{ overflow-y:auto; min-height:0; }
.cookie-actions{ flex:none; }
#cookie-consent.show{ display:flex; }
#cookie-consent h4{ margin:0 0 4px; font-family:var(--font-display); }
#cookie-consent p{ margin:0; font-size:.88rem; color:var(--c-gray); }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:10px 16px; font-size:.88rem; min-height:44px; }
/* Three consent buttons never fit on one phone row, and half-wrapped rows read
   as broken — stack them full-width so each is an unambiguous target. */
@media (max-width:480px){
  .cookie-actions{ flex-direction:column; }
  .cookie-actions .btn{ width:100%; }
}
#cookie-preferences{ display:none; border-top:1px solid var(--c-border); margin-top:6px; padding-top:14px; gap:12px; flex-direction:column; }
#cookie-preferences.show{ display:flex; }
.cookie-toggle-group{ display:flex; flex-direction:column; gap:2px; }
.cookie-toggle-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; }
.cookie-toggle-detail{ margin:0; font-size:.76rem; color:var(--c-gray); }

/* Always-visible "reopen cookie settings" tab, left edge */
#cookie-settings-tab{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:70;
  writing-mode:vertical-rl; display:flex; align-items:center; gap:8px;
  background:var(--c-accent); color:#fff; border:none; border-radius:0 10px 10px 0;
  padding:14px 8px; cursor:pointer; box-shadow:var(--shadow-s); font-family:var(--font-body);
  font-weight:600; font-size:.78rem; transition:padding .2s ease, background .2s ease;
}
#cookie-settings-tab svg{ flex:none; }
#cookie-settings-tab:hover{ padding-right:14px; background:var(--c-accent-dark); }
#cookie-settings-tab{ min-width:44px; min-height:48px; justify-content:center; }
/* On a phone the vertical left-edge tab sat on top of the page content — it
   covered part of the h1 on the home page. Dock it into the bottom row with the
   other two launchers instead, as a matching icon-only circle (the button
   already carries an aria-label, so dropping the visible text is safe). The
   offsets place it to the right of the accessibility launcher and well clear of
   the chat launcher on the far right, even at 320px. */
@media (max-width:640px), (max-height:520px){
  #cookie-settings-tab span{ display:none; }
  #cookie-settings-tab{
    writing-mode:horizontal-tb;
    top:auto; transform:none;
    bottom:var(--widget-safe-b);
    left:calc(78px + env(safe-area-inset-left, 0px));
    width:48px; height:48px; min-width:48px; min-height:48px; padding:0;
    border-radius:50%;
  }
  #cookie-settings-tab:hover{ padding:0; }
}

/* =========================================================
   Chatbot widget
   ========================================================= */
#chatbot-launcher{
  position:fixed; bottom:var(--widget-safe-b); right:calc(16px + env(safe-area-inset-right, 0px));
  z-index:70; width:58px; height:58px; border-radius:50%;
  background:var(--c-green); border:none; box-shadow:var(--shadow-m); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
#chatbot-launcher:hover{ background:var(--c-green-dark); }
#chatbot-panel{
  position:fixed; bottom:calc(var(--widget-safe-b) + 68px); right:calc(16px + env(safe-area-inset-right, 0px));
  z-index:70; width:340px; max-width:calc(100vw - 24px);
  /* svh, not vh: on iOS `vh` is measured against the *expanded* viewport, so a
     70vh panel is taller than the visible area while the URL bar is showing.
     The calc keeps it clear of the launcher on a short landscape screen too. */
  max-height:min(70svh, calc(100svh - var(--widget-safe-b) - 88px));
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-m);
  box-shadow:var(--shadow-m); display:none; flex-direction:column; overflow:hidden;
}
/* Below ~420px a 340px panel leaves no margin — go edge to edge instead. */
@media (max-width:420px){
  #chatbot-panel{ left:12px; right:12px; width:auto; max-width:none; }
}
#chatbot-panel.open{ display:flex; }

/* =========================================================
   Accessibility toolbar
   ========================================================= */
#a11y-launcher{
  position:fixed; bottom:var(--widget-safe-b); left:calc(16px + env(safe-area-inset-left, 0px));
  z-index:70; width:52px; height:52px; border-radius:50%;
  background:var(--c-indigo-dark); border:none; box-shadow:var(--shadow-m); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
#a11y-launcher:hover{ background:var(--c-blue); }
#a11y-panel{
  position:fixed; bottom:calc(var(--widget-safe-b) + 62px); left:calc(16px + env(safe-area-inset-left, 0px));
  z-index:70; width:280px; max-width:calc(100vw - 24px);
  max-height:calc(100svh - var(--widget-safe-b) - 82px); overflow-y:auto;
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-m);
  box-shadow:var(--shadow-m); padding:16px; display:none; flex-direction:column; gap:12px;
}
#a11y-panel.open{ display:flex; }
.a11y-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font-display); }
.a11y-panel-head button{ background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--c-gray); }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.88rem; }
.a11y-text-btns{ display:flex; gap:6px; }
.a11y-text-btns button{ width:40px; height:40px; border-radius:var(--radius-s); border:1px solid var(--c-border); background:var(--c-bg-alt); cursor:pointer; font-weight:700; }
.a11y-toggle-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.88rem; cursor:pointer; }

/* effects driven by the toolbar */
html[data-a11y-text="large"]{ --a11y-scale:1.125; }
html[data-a11y-text="xlarge"]{ --a11y-scale:1.25; }
html.a11y-contrast{ filter:contrast(1.25); }
html.a11y-contrast body{ background:#fff; color:#000; }
html.a11y-contrast a{ color:#0000EE; }
html.a11y-contrast .nav{ background:#000; }
html.a11y-underline-links a{ text-decoration:underline !important; }
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{
  animation-duration:0.001ms !important; animation-iteration-count:1 !important;
  transition-duration:0.001ms !important; scroll-behavior:auto !important;
}
.chat-head{ background:var(--c-blue-dark); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chat-head strong{ font-family:var(--font-display); font-size:.98rem; }
.chat-head span{ font-size:.75rem; color:#bcd; display:block; }
.chat-close{ background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; line-height:1; }
.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--c-bg-alt); }
.chat-msg{ max-width:85%; padding:10px 12px; border-radius:12px; font-size:.88rem; line-height:1.45; }
.chat-msg.bot{ background:#fff; border:1px solid var(--c-border); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-msg.user{ background:var(--c-green); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.chat-msg a{ color:var(--c-blue-dark); font-weight:600; }
.chat-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:var(--c-bg-alt); }
.chip{ background:#fff; border:1px solid var(--c-border); border-radius:999px; padding:6px 11px; font-size:.78rem; cursor:pointer; }
.chip:hover{ border-color:var(--c-green); color:var(--c-green-dark); }
.chat-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--c-border); background:#fff; }
.chat-input-row input{ flex:1; }
.chat-input-row button{ background:var(--c-green); color:#fff; border:none; border-radius:var(--radius-s); padding:0 14px; cursor:pointer; }
.chat-input-row button:hover{ background:var(--c-green-dark); }

/* Cloudflare Turnstile renders a fixed 300px-wide iframe and ignores the width
   of whatever it is placed in. On a 320-360px phone that made the page wider
   than the screen, and the browser responded by zooming the *whole page* out —
   which is what made the login and order forms look broken on mobile. `zoom`
   is used deliberately instead of `transform:scale`: transform is visual only
   and would leave the 300px box still stretching the layout. */
.cf-turnstile{ max-width:100%; }
@media (max-width:400px){ .cf-turnstile{ zoom:.85; } }

/* utility */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-muted{ color:var(--c-gray); }
/* A 3-4 column comparison table can't shrink below its content on a 320px
   phone, so it scrolls sideways inside its own box instead of stretching the
   page. `-webkit-overflow-scrolling` keeps the flick gesture native on iOS. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0; }
/* No min-width: a table with `width:100%` can't lay out narrower than its
   min-content width, so it overflows — and therefore scrolls — exactly when it
   genuinely doesn't fit, and simply wraps when it does. A fixed floor made even
   the small two-column tables scroll needlessly. */
.table-scroll .table-simple{ margin:0; }
.table-simple{ width:100%; border-collapse:collapse; margin:20px 0; }
.table-simple th, .table-simple td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--c-border); font-size:.92rem; }
.table-simple thead th{ border-bottom:2px solid var(--c-ink); }
.table-simple th{ font-family:var(--font-display); color:var(--c-blue-dark); }
.table-simple tbody tr:last-child td{ border-bottom:none; }
.legal-nav{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.legal-nav a{ background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600; color:var(--c-ink); }
.legal-nav a.active{ border-color:var(--c-green); color:var(--c-green-dark); }
.anchor-offset{ scroll-margin-top:100px; }

/* =========================================================
   Scroll-reveal (Apple-style fade/rise-in on scroll)
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   Europe calls map illustration
   ========================================================= */
.europe-section{ position:relative; overflow:hidden; }
.europe-map{ width:100%; height:auto; max-width:560px; margin:0 auto; display:block; }
.europe-map .city-dot{ animation:cityPulse 2.6s ease-in-out infinite; transform-origin:center; }
.europe-map .city-dot:nth-child(2){ animation-delay:.4s; }
.europe-map .city-dot:nth-child(3){ animation-delay:.8s; }
.europe-map .city-dot:nth-child(4){ animation-delay:1.2s; }
.europe-map .city-dot:nth-child(5){ animation-delay:1.6s; }
@keyframes cityPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }
.europe-map .call-arc{ stroke-dasharray:6 7; animation:arcFlow 3.5s linear infinite; }
@keyframes arcFlow{ to{ stroke-dashoffset:-130; } }
@media (prefers-reduced-motion:reduce){
  .europe-map .city-dot, .europe-map .call-arc{ animation:none; }
}
.city-label{ font-family:var(--font-mono); font-size:10px; fill:var(--c-blue-dark); }

/* =========================================================
   Plan details modal ("learn more" popup)
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,58,74,0.55); z-index:90;
  display:none; align-items:center; justify-content:center;
  padding:clamp(10px,3vw,20px);
  padding-bottom:calc(clamp(10px,3vw,20px) + env(safe-area-inset-bottom, 0px));
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--c-white); border-radius:var(--radius-l); max-width:640px; width:100%;
  /* svh keeps the box inside the *visible* area on iOS, where vh ignores the
     URL bar and would push the close button off-screen. */
  max-height:85svh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(20px,4vw,30px); box-shadow:var(--shadow-m); position:relative;
}
/* Room for the absolutely-positioned close button on a narrow screen, so it
   never lands on top of the heading. */
@media (max-width:480px){ .modal-box{ padding-top:52px; } }
.modal-close{
  position:absolute; top:12px; right:12px; background:var(--c-bg-alt); border:1px solid var(--c-border);
  border-radius:50%; width:40px; height:40px; font-size:1.2rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.modal-close:hover{ border-color:var(--c-green); color:var(--c-green-dark); }
.link-btn{
  background:none; border:none; padding:0; margin:0; font:inherit; color:var(--c-accent);
  text-decoration:underline; cursor:pointer; display:inline;
}
.link-btn:hover{ color:var(--c-accent-dark); }
#termsModalBox{ overflow-y:auto; }
#termsModalContent h2{ font-size:1rem; }
#termsModalContent p{ font-size:.88rem; color:var(--c-ink); line-height:1.6; }
.modal-box h3{ margin-bottom:6px; }
.modal-box ol{ padding-left:20px; margin:0; }
.modal-box ol li{ margin-bottom:12px; font-size:.9rem; color:var(--c-gray); line-height:1.55; }
.plan-extra-list{ list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.plan-extra-list li{ display:flex; align-items:flex-start; gap:8px; font-size:.88rem; color:var(--c-ink); }
.plan-extra-list li::before{ content:'🛡'; flex:none; }
.learn-more-btn{ background:none; border:none; color:var(--c-blue-dark); font-weight:600; font-size:.88rem; cursor:pointer; padding:0; text-decoration:underline; }
.learn-more-btn:hover{ color:var(--c-green-dark); }

/* =========================================================
   Hero slideshow
   ========================================================= */
.slideshow{ position:relative; }
.slide{ display:none; }
.slide.active{ display:block; animation:slideFade .5s ease; }
@keyframes slideFade{ from{ opacity:0; } to{ opacity:1; } }
.slide-dots{ display:flex; justify-content:center; gap:2px; margin-top:8px; }
/* The dot itself stays 9px, but the button around it is padded out to ~29x41 so
   it is a real thumb target on a touchscreen (it used to be 9x9 — unhittable). */
.slide-dot{
  background:none; border:none; cursor:pointer; padding:16px 10px;
  display:flex; align-items:center; justify-content:center;
}
.slide-dot::before{
  content:''; display:block; width:9px; height:9px; border-radius:50%;
  background:var(--c-border); transition:width .2s ease, background .2s ease;
}
.slide-dot.active::before{ background:var(--c-green); width:22px; border-radius:5px; }
.slide-badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.slide-badge{
  display:flex; align-items:center; gap:8px; background:var(--c-green-tint); border:1px solid var(--c-border);
  border-radius:999px; padding:8px 14px; font-size:.82rem; font-weight:600; color:var(--c-blue-dark);
}
@media (prefers-reduced-motion:reduce){ .slide.active{ animation:none; } }

/* =========================================================
   Device tiers
   Everything above is the layout itself; the blocks below adapt it to classes
   of device — touchscreens, tablets, big desktops/TVs, short landscape
   screens, print. Kept together at the end so the cascade order is obvious.
   ========================================================= */

/* ---------- touchscreens (phones, tablets, touch laptops) ---------- */
@media (hover:none), (pointer:coarse){
  /* Hover lifts are wrong on touch: the "hover" sticks after a tap, leaving
     cards and buttons frozen in their raised state until you tap elsewhere. */
  .card:hover, .plan-card:hover, .btn:hover{ transform:none; }
  .card:hover{ box-shadow:var(--shadow-s); border-top-color:transparent; }

  /* Pad out the small inline targets so each clears ~44px of thumb. (Only the
     bar copy — the menu copy already sets its own 44px rows.) */
  .nav-cta .lang-switcher a{ padding:11px 6px; }
  /* A 1024px iPad gets the *desktop* nav (the hamburger only kicks in below
     880px), where the links were bare 19px-tall text — too small to tap. */
  .nav-links a{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-links a, .footer-bottom a, .legal-nav a, .footer-protected-by{ display:inline-flex; align-items:center; min-height:44px; }
  .legal-nav a{ padding:11px 16px; }
  .learn-more-btn, .link-btn{ min-height:44px; display:inline-flex; align-items:center; }
  .chat-close, .a11y-panel-head button{ min-width:44px; min-height:44px; }
  .chip{ min-height:38px; display:inline-flex; align-items:center; padding:8px 14px; }
  .tab-btn{ min-height:48px; }
  /* Native momentum scrolling inside the scrollable panels */
  .chat-body, .modal-box, .table-scroll{ -webkit-overflow-scrolling:touch; }
}

/* ---------- tablets ---------- */
/* Starts at 881px, NOT 768px: below 880 the hero is deliberately stacked to one
   column, and because this block sits later in the file a wider range here would
   override that and squeeze two columns back onto an iPad in portrait. */
@media (min-width:881px) and (max-width:1024px){
  /* In the 881-1024px band the hero is still two columns, but 1.1fr/.9fr leaves
     the text column too narrow for the long LT/RU headlines — favour the copy. */
  .hero-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:32px; }
}
@media (min-width:761px) and (max-width:1024px){
  .footer-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Anything on the hamburger side of the breakpoint — phones and iPad portrait. */
@media (max-width:880px){
  .hero-stats{ gap:20px; }
  /* Let the two hero buttons share the row evenly instead of leaving a ragged
     gap, and grow to a full-width pair once they have to wrap. */
  .hero-actions .btn{ flex:1 1 auto; }
}

/* ---------- large desktops and TVs ---------- */
/* Content simply stops growing at --maxw, which on a 4K TV leaves a 1120px
   column stranded in the middle of the screen. Widen the measure in steps and
   nudge the root font size up, since a TV is viewed from across the room. */
@media (min-width:1500px){
  :root{ --maxw:1280px; }
}
@media (min-width:1900px){
  :root{ --maxw:1440px; --section-y:88px; --root-fs:106%; }
}
@media (min-width:2400px){
  :root{ --maxw:1680px; --section-y:104px; --root-fs:119%; }
  .hero-illustration, .europe-map{ max-width:720px; margin-left:auto; margin-right:auto; }
}
@media (min-width:3200px){
  :root{ --maxw:2000px; --root-fs:138%; }
}
/* TV browsers (and anything driven by a remote/D-pad) have no pointer at all —
   make the focus ring unmissable, since focus is the only cursor there. */
@media (pointer:none), (pointer:coarse) and (min-width:1600px){
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:4px solid var(--c-yellow); outline-offset:3px;
  }
}

/* ---------- short / landscape screens ---------- */
/* A phone in landscape is only ~360-390px tall: a sticky header plus full hero
   padding can leave almost no room for the content itself. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:20px 0 16px; }
  .section{ padding:32px 0; }
  .nav-row{ padding-top:8px; padding-bottom:8px; }
  .brand-mark{ width:28px; height:28px; }
  #site-footer{ margin-top:32px; }
  .wave-card .bars{ height:80px; }
}

/* ---------- print (the legal pages get printed) ---------- */
@media print{
  #site-header, #site-footer, #chatbot-launcher, #chatbot-panel,
  #a11y-launcher, #a11y-panel, #cookie-consent, #cookie-settings-tab{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .container{ max-width:100%; padding:0; }
  a{ color:#000; text-decoration:underline; }
}