/* ==========================================================================
   Secure Borders – main stylesheet
   Compact dashboard layout: header + hero(text | full-bleed map + panel),
   then a two-column band (about | crossings), then compact content sections.
   Layer order: tokens -> reset -> primitives -> layout -> components
   Responsive rules live in responsive.css.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette: deep navy base, graphite panels, restrained UA/HU national accents. */
  --c-bg:        #0a1628;
  --c-bg-2:      #0c1c31;
  --c-bg-3:      #0f2440;
  --c-surface:   rgba(255, 255, 255, .045);
  --c-surface-2: rgba(255, 255, 255, .075);
  --c-line:      rgba(255, 255, 255, .10);
  --c-line-2:    rgba(255, 255, 255, .18);

  --c-text:      #e9f1f9;
  --c-muted:     #9cb2cb;
  --c-dim:       #6f89a6;

  --c-accent:    #f5b91e;   /* Interreg / UA yellow, primary actions */
  --c-accent-d:  #d99f0d;
  --c-tech:      #4fc3e8;   /* turquoise technology highlight */

  --c-ua-blue:   #0057b7;
  --c-ua-yellow: #ffd700;
  --c-hu-red:    #ce2939;
  --c-hu-green:  #477050;

  --c-ok:        #47c98a;
  --c-warn:      #f0a63c;
  --c-busy:      #e8705a;

  /* Type scale — deliberately compact; the whole design is a dense dashboard. */
  --fs-hero: clamp(1.7rem, 2.7vw, 2.5rem);
  --fs-h2:   clamp(1.2rem, 1.7vw, 1.65rem);
  --fs-h3:   .875rem;
  --fs-lead: .875rem;
  --fs-body: .8125rem;
  --fs-sm:   .75rem;
  --fs-xs:   .6875rem;
  --fs-xxs:  .625rem;

  /* Spacing scale */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.75rem; --sp-7: 2.5rem;  --sp-8: 3.5rem;

  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 999px;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, .6);

  --header-h: 114px;
  --wrap: 1560px;
  /* Scales the "Secure Borders" wordmark + bridge icon. */
  --logo-scale: 1.34;
  /*
   * Scales the official Interreg emblem alone, from a 40px base. The emblem is 1153x422
   * (2.73:1), so 2.41 renders it at ~263x96 px. It is a separate token from --logo-scale
   * on purpose: the emblem was asked to grow, the wordmark beside it was not.
   * --header-h must stay above the emblem's height + padding.
   */
  --interreg-scale: 2.41;
  /*
   * Single source of truth for the page's left/right inset. --sbw is the scrollbar width,
   * set once by app.js, because 100vw includes the scrollbar and the content box does not.
   */
  --sbw: 0px;
  --gutter: max(1.25rem, calc((100vw - var(--sbw) - var(--wrap)) / 2));

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .24s;

  --font: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, "Noto Sans", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: "Cascadia Mono", Consolas, "SF Mono", monospace; }

svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/*
 * Several components below set display:flex/grid on the same element that carries the
 * `hidden` attribute, which would beat the UA stylesheet's [hidden]{display:none} on
 * specificity and leak dev notices onto the page. Keep this rule.
 */
[hidden] { display: none !important; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--c-accent); color: #10203a; font-weight: 700;
  padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; transition: top var(--dur) var(--ease);
}
.skip:focus { top: 0; }

/* ---------- Primitives ---------- */
/*
 * Every left edge on the page — header logo, hero headline, section content — must line up.
 * They all resolve to the same --gutter rather than mixing `margin-inline:auto` (which
 * measures the scrollbar-free content box) with a 100vw-based padding (which does not);
 * that mismatch shifted the hero text ~7px against the sections below it.
 */
.wrap { width: 100%; padding-inline: var(--gutter); }

.ico { width: 1.1em; height: 1.1em; flex: none; }
.ico--flip { transform: rotate(180deg); }
.ico--up { transform: rotate(-90deg); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-tech); margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-tech));
}

.h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--sp-3); }
.lead { color: var(--c-muted); font-size: var(--fs-lead); max-width: 58ch; }
.body { color: var(--c-dim); font-size: var(--fs-body); margin-top: var(--sp-3); max-width: 58ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .5rem .9rem; border-radius: var(--r-pill);
  font-weight: 650; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: .6rem 1.15rem; font-size: var(--fs-lead); }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-accent); color: #10203a; }
.btn--primary:hover { background: #ffcb3f; }
.btn--outline { border-color: var(--c-line-2); color: var(--c-text); background: rgba(10, 22, 40, .5); }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--ghost { background: var(--c-surface); border-color: var(--c-line); color: var(--c-text); }
.btn--ghost:hover { background: var(--c-surface-2); border-color: var(--c-line-2); }
.btn--ghost.is-done { border-color: var(--c-ok); color: var(--c-ok); }

.iconbtn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-text); transition: all var(--dur) var(--ease);
}
.iconbtn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.iconbtn .ico { width: .95rem; height: .95rem; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(10, 22, 40, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--c-line);
}
.header__inner {
  height: 100%; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--sp-5);
}
/*
 * Logo lockup. Every size here is derived from --logo-scale so the emblem, the bridge mark
 * and both text lines grow together — change the one token, not eight values.
 */
.header__logos { display: flex; align-items: center; gap: calc(var(--sp-3) * var(--logo-scale)); }
/* Official emblem, shown unmodified on the neutral panel its guidelines require. */
.header__interreg {
  height: calc(40px * var(--interreg-scale)); width: auto; object-fit: contain;
  background: #fff; border-radius: 5px;
  padding: calc(3px * var(--interreg-scale)) calc(6px * var(--interreg-scale));
}
.brand { display: flex; align-items: center; gap: calc(var(--sp-2) * var(--logo-scale)); text-decoration: none; }
.brand__ico { width: calc(24px * var(--logo-scale)); height: calc(24px * var(--logo-scale)); color: var(--c-accent); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: calc(var(--fs-lead) * var(--logo-scale)); font-weight: 800; letter-spacing: .02em; }
.brand__text span { font-size: calc(var(--fs-xxs) * var(--logo-scale)); color: var(--c-dim); }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; }
.nav__list a {
  display: block; padding: .35rem .6rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 550; color: var(--c-muted); text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__list a:hover { color: var(--c-text); background: var(--c-surface); }
.nav__list a.is-current { color: var(--c-accent); }

.header__side { display: flex; align-items: center; gap: var(--sp-2); }
.langs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.langs__btn {
  padding: .2rem .5rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-dim);
  transition: all var(--dur) var(--ease);
}
.langs__btn:hover { color: var(--c-text); }
.langs__btn.is-active { background: var(--c-accent); color: #10203a; }
.langs--footer { margin-top: var(--sp-4); width: fit-content; }

.burger { display: none; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.burger .ico { width: 1.1rem; height: 1.1rem; }

/* ---------- Hero (text | full-bleed map) ---------- */
.hero {
  position: relative; overflow: hidden;
  height: calc(100vh - 0px); min-height: 600px; max-height: 800px;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* The poster fills the same box, so there is no swap or shift when the video attaches. */
.hero__bg img, .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
/*
 * The photo lives on the left and dissolves into the map on the right: one continuous
 * surface rather than a photo next to a boxed map.
 *
 * The horizontal ramp is deliberately wide and finishes at 66vw. The map column starts at
 * 43vw and its schematic fades in over its own first ~32% (~61vw), so the photo's ramp-out
 * and the map's ramp-in overlap across the same band instead of meeting at a seam.
 */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10, 22, 40, .50) 0%,
      rgba(10, 22, 40, .72) 20%,
      rgba(10, 22, 40, .88) 36%,
      rgba(10, 22, 40, .97) 52%,
      var(--c-bg) 66%),
    linear-gradient(to bottom, rgba(10, 22, 40, .75) 0%, transparent 22%, transparent 72%, var(--c-bg) 100%);
}
.hero__inner {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
}
.hero__text {
  align-self: center;
  padding: var(--header-h) var(--sp-6) 0 var(--gutter);
  max-width: 640px;
}
.hero__title { font-size: var(--fs-hero); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.hero__sub { margin-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-lead); max-width: 44ch; }
.hero__cta { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__stats {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  display: grid; grid-template-columns: repeat(4, auto); gap: var(--sp-5); justify-content: start;
}
.stat { display: flex; align-items: center; gap: var(--sp-2); }
.stat__ico { width: 20px; height: 20px; color: var(--c-tech); flex: none; }
.stat__value { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.stat__label { display: block; font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.25; }

/* ---------- Map ---------- */
/* Bleeds to the top/right/bottom edges of the hero: no card, no border, no radius. */
.hero__map { position: relative; height: 100%; }
.mapwrap { position: absolute; inset: 0; overflow: hidden; }
.mapwrap__canvas { position: absolute; inset: 0; }
.gmap { position: absolute; inset: 0; }

.mapbar { position: absolute; top: calc(var(--header-h) + var(--sp-4)); right: var(--gutter); z-index: 5; }
.mapbar__toggle {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(10, 22, 40, .72); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); backdrop-filter: blur(8px);
}
.mapbar__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .3rem .7rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  transition: all var(--dur) var(--ease);
}
.mapbar__btn:hover { color: var(--c-text); }
.mapbar__btn.is-active { background: var(--c-tech); color: #06182b; }

/* List view toggling, driven by [data-active-view] on the section. */
.mlist {
  position: absolute; inset: calc(var(--header-h) + 3.5rem) var(--gutter) var(--sp-6) var(--sp-4);
  overflow-y: auto; display: none; z-index: 4;
}
[data-active-view="list"] .mlist { display: block; }
[data-active-view="list"] .mapwrap__canvas { visibility: hidden; }
.mlist__item {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: rgba(12, 28, 49, .8); text-align: left;
  transition: all var(--dur) var(--ease);
}
.mlist__item:hover { background: var(--c-surface-2); border-color: var(--c-tech); transform: translateX(3px); }
.mlist__ico { color: var(--c-tech); display: grid; place-items: center; }
.mlist__ico .ico { width: 1.05rem; height: 1.05rem; }
.mlist__body { flex: 1; min-width: 0; }
.mlist__name { display: block; font-weight: 650; font-size: var(--fs-body); }
.mlist__meta { display: block; font-size: var(--fs-xxs); color: var(--c-dim); }
.mlist__arrow { color: var(--c-dim); }

.mapmsg, .mapnote {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.4;
}
/* Sits above the schematic caption so the two can never collide. */
.mapmsg { position: absolute; left: var(--sp-4); bottom: 2.1rem; z-index: 5; max-width: 40ch; }
.mapnote { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--sp-3); z-index: 5; max-width: 62ch; }
.mapnote strong { color: var(--c-muted); }
.mapnote .ico, .mapmsg .ico { color: var(--c-tech); margin-top: 1px; }

/* Schematic fallback map */
.schematic { position: absolute; inset: 0; cursor: grab; }
.schematic.is-panning { cursor: grabbing; }
/*
 * One-finger vertical drag must still scroll the page — the map is a band inside it, not a
 * full-screen app. pan-y hands vertical gestures to the browser and leaves horizontal ones
 * to the pan handler.
 */
.schematic { touch-action: pan-y; }
.schematic:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
/* Only this layer is transformed by pan/zoom. Pins and labels are positioned in px from
   their geographic anchors instead, so they never scale with the map. */
.schematic__stage { position: absolute; inset: 0; will-change: transform; }
/* Grid lives here rather than in the SVG: the SVG stretches (preserveAspectRatio="none")
   to keep the border line locked to the pins, which would skew a grid drawn inside it.
   Centred right of middle so it fades out on its own before reaching the photo. */
.schematic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 66% 50%, #000 18%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 66% 50%, #000 18%, transparent 70%);
}
/*
 * The map column starts at 43% of the viewport, and its tinted backdrop used to switch on
 * at exactly that x — a hard vertical seam against the photo. Fading the whole schematic in
 * across its first ~32% lands the map's ramp-in on top of the photo's ramp-out
 * (.hero__scrim reaches solid at 62vw), so the two dissolve into each other instead.
 * Applied to the SVG only: the pins, labels and video card are siblings and stay crisp.
 */
.schematic__svg {
  width: 100%; height: 100%; display: block;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .8) 24%, #000 32%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .8) 24%, #000 32%);
}
/* Placed in px by map.js from a geographic anchor, so they pan with the map. */
.schematic__country {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(233, 241, 249, .82);
  background: rgba(10, 22, 40, .55); border: 1px solid var(--c-line);
  padding: .25rem .55rem; border-radius: var(--r-pill); backdrop-filter: blur(6px);
  pointer-events: none; white-space: nowrap;
}
.schematic__flag { display: flex; flex-direction: column; width: 16px; height: 11px; border-radius: 2px; overflow: hidden; }
.schematic__flag > span { flex: 1; }

/* Pointer-transparent so a drag that starts over the layer still pans; the pins
   themselves opt back in. */
.schematic__pins { position: absolute; inset: 0; pointer-events: none; }
.schematic__pins .pin { pointer-events: auto; }

/* Zoom / reset controls. Bottom-LEFT on purpose: the detail panel occupies the right side
   of the map and sits above this layer, which would bury them. */
.mapzoom {
  position: absolute; left: var(--sp-3); bottom: 2.6rem; z-index: 5;
  display: grid; gap: 3px; padding: 3px;
  background: rgba(10, 22, 40, .72); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); backdrop-filter: blur(8px);
}
.mapzoom__btn {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; color: var(--c-muted);
  transition: all var(--dur) var(--ease);
}
.mapzoom__btn:hover { background: var(--c-surface-2); color: var(--c-accent); }
.mapzoom__btn:disabled { opacity: .35; cursor: default; }
.mapzoom__btn:disabled:hover { background: none; color: var(--c-muted); }
.mapzoom__btn .ico { width: .85rem; height: .85rem; }
.schematic__note {
  position: absolute; left: var(--sp-4); bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xxs); color: var(--c-dim); pointer-events: none;
}
.schematic__note .ico { width: .8rem; height: .8rem; }

/* Pins: glowing dot + plain text label, as in the reference design. */
.pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.pin__dot {
  position: relative; z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .92);
  background: var(--c-tech); color: #06182b;
  box-shadow: 0 0 0 4px rgba(79, 195, 232, .18), 0 4px 12px rgba(0, 0, 0, .5);
  transition: all var(--dur) var(--ease);
}
.pin__dot .ico { width: .8rem; height: .8rem; }
.pin__pulse {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--c-tech); opacity: .5;
  animation: sbPulse 2.6s var(--ease) infinite;
}
.pin__label {
  position: absolute; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: var(--fs-sm); font-weight: 600;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .7);
  pointer-events: none; transition: color var(--dur) var(--ease);
}
.pin[data-side="right"] .pin__label { left: 32px; }
.pin[data-side="left"] .pin__label { right: 32px; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot { transform: scale(1.18); }
.pin.is-active { z-index: 3; }
.pin.is-active .pin__dot { background: var(--c-accent); box-shadow: 0 0 0 5px rgba(245, 185, 30, .22), 0 4px 12px rgba(0, 0, 0, .5); }
.pin.is-active .pin__pulse { background: var(--c-accent); }
.pin.is-active .pin__label { color: var(--c-accent); }

@keyframes sbPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .45; }
  70%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* ---------- Large drone video ----------
 * Positioned against .hero__map (which starts at 43vw) but pulled left with a negative
 * offset so it straddles the seam between the photo and the map.
 *
 * The negative offset is viewport-proportional and clamped: on wide screens it reaches far
 * enough left to clear the map's content, while on narrower ones it stops before it can
 * reach the hero headline. Below 1081px it snaps back inside the map (see responsive.css).
 *
 * Width is load-bearing: the Záhony–Chop pin sits at ~48% / 48% of the map frame (see
 * BOUNDS in map.js). Widen this and the card starts covering it.
 */
.mapvideo {
  position: absolute; z-index: 5;
  top: calc(var(--header-h) + var(--sp-3));
  /* -10.5vw is the largest pull that still clears the hero headline in every language at
     every width above 1080px. Ukrainian is the binding case: its title is the longest, so
     re-measure UA (not HU) before increasing this. */
  left: clamp(-300px, -10.5vw, var(--sp-4));
  width: clamp(260px, 38%, 440px);
  border: 1px solid var(--c-line-2); border-radius: var(--r-lg); overflow: hidden;
  background: #06121f; box-shadow: var(--shadow-2);
}
.mapvideo:empty { display: none; }
.mapvideo .video { aspect-ratio: 16 / 9; }
.mapvideo__cap {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-line); background: rgba(12, 28, 49, .9);
}
.mapvideo__name { font-size: var(--fs-sm); font-weight: 700; }
.mapvideo__sub { font-size: var(--fs-xxs); color: var(--c-dim); margin-left: auto; }

/* ---------- Detail panel (floats inside the map) ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(4, 10, 20, .6); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.panel {
  position: absolute; z-index: 6;
  top: calc(var(--header-h) + var(--sp-4)); right: var(--gutter); bottom: var(--sp-6);
  width: 310px; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4);
  background: rgba(12, 28, 49, .92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--c-line-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  transform: translateX(calc(100% + var(--gutter)));
  transition: transform var(--dur) var(--ease);
  scrollbar-width: thin;
}
.panel.is-open { transform: none; }

.panel__head { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.panel__title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.panel__sub { font-size: var(--fs-xs); color: var(--c-dim); }
.panel__close {
  margin-left: auto; width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-surface);
  transition: all var(--dur) var(--ease);
}
.panel__close .ico { width: .8rem; height: .8rem; }
.panel__close:hover { background: var(--c-surface-2); border-color: var(--c-busy); color: var(--c-busy); }

.panel__flagrow { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.flag { display: flex; flex-direction: column; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; border: 1px solid var(--c-line); }
.flag > i { flex: 1; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: .2rem .5rem; border-radius: var(--r-pill);
  font-size: var(--fs-xxs); font-weight: 650; border: 1px solid;
}
.badge--open { color: var(--c-ok); border-color: rgba(71, 201, 138, .4); background: rgba(71, 201, 138, .1); }
.badge--limited { color: var(--c-warn); border-color: rgba(240, 166, 60, .4); background: rgba(240, 166, 60, .1); }
.badge .ico { width: .75rem; height: .75rem; }

.panel__waits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.wait { padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.wait__dir { display: block; font-size: var(--fs-xxs); color: var(--c-dim); margin-bottom: var(--sp-1); }

/* Waiting-time chip. Severity is never colour-only: each level has its own icon,
   and the left rule gives a second, non-colour cue. */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-body); font-weight: 650;
  padding-left: var(--sp-2); border-left: 2px solid currentColor;
}
.chip--sm { font-size: var(--fs-xs); }
.chip[data-sev="0"], .chip[data-sev="1"] { color: var(--c-ok); }
.chip[data-sev="2"] { color: var(--c-warn); }
.chip[data-sev="3"], .chip[data-sev="4"] { color: var(--c-busy); }
.chip[data-sev="-1"] { color: var(--c-dim); }
.chip .ico { width: .85rem; height: .85rem; }

.demoflag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-warn); background: rgba(240, 166, 60, .1);
  border: 1px dashed rgba(240, 166, 60, .45); border-radius: var(--r-sm);
  padding: .2rem .45rem; margin-bottom: var(--sp-2);
}
.demoflag--wide {
  display: flex; width: 100%; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: var(--fs-sm); color: var(--c-muted);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); align-items: flex-start;
}
.demoflag--wide strong { color: var(--c-warn); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xxs); }
.demoflag .ico { flex: none; margin-top: 1px; }

.panel__coords {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); margin-bottom: var(--sp-2);
}
.panel__coords .ico { color: var(--c-tech); width: .85rem; height: .85rem; }
.panel__coords code { font-size: var(--fs-xs); }

.panel__facts { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.panel__facts > div { display: grid; gap: 1px; }
.panel__facts dt { font-size: var(--fs-xxs); color: var(--c-dim); text-transform: uppercase; letter-spacing: .08em; }
.panel__facts dd { margin: 0; font-size: var(--fs-body); font-weight: 600; }

.panel__note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.4; margin-bottom: var(--sp-3);
}
.panel__note .ico { flex: none; margin-top: 1px; width: .8rem; height: .8rem; color: var(--c-tech); }
.panel__note--warn .ico { color: var(--c-warn); }

.panel__block { margin-bottom: var(--sp-3); }
.panel__h3 {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-dim); margin-bottom: var(--sp-2);
}
.panel__h3 .ico { color: var(--c-tech); width: .8rem; height: .8rem; }
.panel__desc { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }

/* Per-crossing Google map embed */
.panel__map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-bg-3); }
.panel__map iframe { display: block; width: 100%; aspect-ratio: 16 / 11; border: 0; }
.panel__mapoff {
  display: grid; justify-items: start; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px dashed var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface);
}
.panel__mapoff p { font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.45; }
.panel__mapoff .ico { color: var(--c-tech); width: .9rem; height: .9rem; }
.panel__mapoff .btn { font-size: var(--fs-xs); padding: .35rem .7rem; }

.svcs { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.svc {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-muted);
}
.svc .ico { width: .9rem; height: .9rem; }

.panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.panel__actions .btn { font-size: var(--fs-xs); padding: .42rem .5rem; }

/* Desktop default: the video plays large on the map, so the panel's own block is off.
   responsive.css turns this back on below 901px, where .mapvideo is hidden instead. */
.panel__block--video { display: none; }
.panel__video { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line); background: #06121f; }
.video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #06121f; }
.videoph {
  aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center;
  gap: var(--sp-1); padding: var(--sp-3); text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 8px, transparent 8px 16px),
    var(--c-bg-3);
}
.videoph__ico { width: 26px; height: 26px; color: var(--c-tech); opacity: .7; }
.videoph__title { font-size: var(--fs-xs); font-weight: 700; }
.videoph__text { font-size: var(--fs-xxs); color: var(--c-dim); }
.videoph--loading { background: var(--c-bg-3); }

.panel__updated { font-size: var(--fs-xxs); color: var(--c-dim); text-align: right; }

/* ---------- Sections ---------- */
.section { padding: var(--sp-8) 0; position: relative; }
.section--alt { background: var(--c-bg-2); border-block: 1px solid var(--c-line); }

.secthead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.secthead__nav { display: flex; gap: var(--sp-2); }

/* Band: about (left) | crossings (right) — the reference design's second row. */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); align-items: start; }

.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-5); align-items: start; }
.about__intro .btn { margin-top: var(--sp-4); }
.about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.card {
  padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--c-line-2); background: var(--c-surface-2); }
.card__ico { width: 20px; height: 20px; color: var(--c-tech); margin-bottom: var(--sp-2); }
.card__title { font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--sp-1); line-height: 1.25; }
.card__text { font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.4; }

/* Crossing cards: a compact strip, not full-size cards. */
.ccards {
  display: grid; grid-auto-flow: column; grid-auto-columns: 168px;
  gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3); scrollbar-width: thin;
}
.ccard {
  scroll-snap-align: start;
  border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
  background: var(--c-surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.ccard:hover { transform: translateY(-2px); border-color: var(--c-line-2); }
.ccard.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.ccard__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-bg-3); overflow: hidden; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; }
.ccard__ph {
  position: absolute; inset: 0; display: none; place-items: center;
  color: var(--c-tech); opacity: .45;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 8px, transparent 8px 16px);
}
.ccard__ph .ico { width: 22px; height: 22px; }
.ccard__media.is-empty .ccard__ph { display: grid; }
.ccard__new {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  background: var(--c-accent); color: #10203a;
  font-size: .55rem; font-weight: 800; letter-spacing: .08em;
  padding: .1rem .35rem; border-radius: var(--r-sm);
}
.ccard__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.ccard__title { font-size: var(--fs-body); font-weight: 700; line-height: 1.2; }
.ccard__sub { font-size: var(--fs-xxs); color: var(--c-dim); margin-top: -.35rem; }
.ccard__badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.ccard__limit {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-xxs); color: var(--c-muted);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: .12rem .35rem;
}
.ccard__limit .ico { width: .7rem; height: .7rem; }
.ccard__waits { display: flex; gap: var(--sp-3); }
.ccard__body .btn { margin-top: auto; font-size: var(--fs-xs); padding: .38rem .5rem; }

/* Activities */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.step {
  position: relative; padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step:hover { transform: translateY(-2px); border-color: var(--c-line-2); }
.step--highlight { border-color: rgba(245, 185, 30, .45); background: rgba(245, 185, 30, .06); }
.step__num { position: absolute; top: var(--sp-3); right: var(--sp-4); font-size: 1.3rem; font-weight: 800; color: rgba(255, 255, 255, .07); line-height: 1; }
.step__ico {
  width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: var(--sp-3);
  border-radius: var(--r-sm); background: rgba(79, 195, 232, .12);
  border: 1px solid rgba(79, 195, 232, .28); color: var(--c-tech);
}
.step--highlight .step__ico { background: rgba(245, 185, 30, .14); border-color: rgba(245, 185, 30, .35); color: var(--c-accent); }
.step__ico .ico { width: 1rem; height: 1rem; }
.step__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-1); }
.step__text { font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.45; }

/* Results */
.results { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-7); align-items: center; }
.results__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.result {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); font-weight: 600; font-size: var(--fs-body);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.result:hover { transform: translateX(3px); border-color: var(--c-tech); }
.result__ico { color: var(--c-ok); width: 1rem; height: 1rem; }

/* Partners */
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.partner {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
  background: var(--c-surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.partner:hover { transform: translateY(-2px); border-color: var(--c-line-2); }
/* Logos sit on white with generous padding = the clear space the Interreg / partner
   visual identity rules require. Never crop or recolour them.
 *
 * The image is sized explicitly and letterboxed by object-fit, rather than centred by the
 * box with `max-height:100%`. As a grid/flex item the percentage resolved against the
 * auto-sized track — which grows to the image — so it never constrained anything, and tall
 * logos spilled out over the partner's name. Explicit 100%/100% + contain keeps the aspect
 * ratio, centres it, and cannot overflow whatever height the box is given. */
.partner__logo { background: #fff; padding: var(--sp-4); height: 84px; }
.partner__logo img { width: 100%; height: 100%; object-fit: contain; }
.partner__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.partner__role {
  align-self: flex-start; font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent); border: 1px solid rgba(245, 185, 30, .4); background: rgba(245, 185, 30, .08);
  padding: .12rem .4rem; border-radius: var(--r-sm); margin-bottom: var(--sp-1);
}
.partner__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.partner__country { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--c-tech); }
.partner__country .ico { width: .8rem; height: .8rem; }
.partner__text { font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.45; }
.partner__budget { font-size: var(--fs-xs); color: var(--c-muted); margin-top: auto; padding-top: var(--sp-2); }
.partner__link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 650; color: var(--c-tech); text-decoration: none; }
.partner__link:hover { text-decoration: underline; }

/* News */
.newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.news {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.news:hover { transform: translateY(-2px); border-color: var(--c-line-2); }
.news__media { position: relative; aspect-ratio: 16 / 9; background: var(--c-bg-3); overflow: hidden; }
.news__media img { width: 100%; height: 100%; object-fit: cover; }
.news__media.is-empty {
  background:
    radial-gradient(circle at 30% 30%, rgba(79, 195, 232, .18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 8px, transparent 8px 16px),
    var(--c-bg-3);
}
.news__cat {
  position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2;
  background: rgba(10, 22, 40, .85); border: 1px solid var(--c-line);
  font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-tech); padding: .12rem .4rem; border-radius: var(--r-sm);
}
.news__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.news__date { font-size: var(--fs-xxs); color: var(--c-dim); }
.news__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.news__text { font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.45; }
.news__more { margin-top: auto; padding-top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 650; color: var(--c-accent); text-decoration: none; }
.news__more:hover { text-decoration: underline; }

/* Funding */
.funding {
  display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: var(--sp-6);
  align-items: center; padding: var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface); margin-bottom: var(--sp-4);
}
.funding__logos { display: grid; gap: var(--sp-3); }
/* Clear space around the official emblem. */
.funding__logo { background: #fff; border-radius: var(--r-sm); padding: var(--sp-4); display: grid; place-items: center; }
.funding__logo img { max-width: 100%; height: auto; }
.funding__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.fact { display: grid; gap: 2px; padding-left: var(--sp-2); border-left: 2px solid rgba(245, 185, 30, .5); }
.fact dt { font-size: var(--fs-xxs); color: var(--c-dim); text-transform: uppercase; letter-spacing: .08em; }
.fact dd { margin: 0; font-size: var(--fs-xs); font-weight: 650; }

.disclaim {
  display: grid; gap: var(--sp-2);
  font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.5;
  padding: var(--sp-4); border: 1px dashed var(--c-line); border-radius: var(--r-md);
}

/* ---------- Footer ---------- */
.footer { background: #071120; border-top: 1px solid var(--c-line); padding-top: var(--sp-7); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-6); }
.footer__h { font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-tech); margin-bottom: var(--sp-3); }
.footer__h--sp { margin-top: var(--sp-5); }
.footer__title { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; margin-bottom: var(--sp-3); }
.footer__meta { font-size: var(--fs-xs); color: var(--c-dim); }
.footer__meta strong { color: var(--c-accent); }

.fpartners { display: grid; gap: var(--sp-3); }
.fpartner { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.35; }
.fpartner img { width: 38px; height: 38px; flex: none; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 3px; }
.fpartner strong { color: var(--c-muted); font-weight: 650; }

.fnews { display: grid; gap: var(--sp-2); }
.fnews a { display: grid; gap: 1px; text-decoration: none; font-size: var(--fs-xs); color: var(--c-muted); }
.fnews a:hover { color: var(--c-accent); }
.fnews time { font-size: var(--fs-xxs); color: var(--c-dim); }

.flinks { display: grid; gap: var(--sp-1); }
.flinks a { font-size: var(--fs-xs); color: var(--c-muted); text-decoration: none; }
.flinks a:hover { color: var(--c-accent); text-decoration: underline; }

.footer__eu { display: grid; gap: var(--sp-2); }
.footer__eu img { background: #fff; border-radius: var(--r-sm); padding: var(--sp-2); width: 100%; height: auto; }
.footer__eu p { font-size: var(--fs-xxs); color: var(--c-dim); line-height: 1.45; }

.footer__bar { border-top: 1px solid var(--c-line); padding: var(--sp-3) 0; }
.footer__barin { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.footer__barin p { font-size: var(--fs-xxs); color: var(--c-dim); }
.footer__top { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xxs); color: var(--c-muted); text-decoration: none; }
.footer__top:hover { color: var(--c-accent); }

/* ---------- Consent ---------- */
.consent {
  position: fixed; left: 50%; bottom: var(--sp-3); z-index: 150;
  transform: translateX(-50%); width: min(100% - 2rem, 760px);
  background: rgba(12, 28, 49, .96); backdrop-filter: blur(16px);
  border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}
.consent__inner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.consent__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-1); }
.consent__text { font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.45; }
.consent__actions { display: flex; gap: var(--sp-2); flex: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .pin__pulse { display: none; }
  .btn:hover, .card:hover, .ccard:hover, .step:hover, .partner:hover, .news:hover, .result:hover { transform: none; }
}