/* =========================================================================
   Londre — londre.ge
   LONDRE AI LLC · Batumi, Georgia
   Design system: "signal & road" — taken from the Londre logo
   Slate #2F3A44 (wordmark) · Blue #0078BF (mark) · Orange #F26F1F (arrow)
   Blue carries the platform and the car wash; orange is the live/recovery
   signal and is used sparingly, in the same proportion as the logo.
   ========================================================================= */

/* ------------------------------------------------------------------ type */
/* FiraGO (SIL OFL, bBox Type) draws Latin and Georgian as one design, which is
   why it is here: switching EN/GE changes the language, not the typeface.
   Self-hosted and subset by tools/build-fonts.sh — two slices per weight, split
   on unicode-range, so an English visitor never fetches Georgian outlines.
   Georgian is Mkhedruli only; FiraGO ships no Mtavruli and the site uses none. */

@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/firago-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-200D, U+2010-2015, U+2018-201E, U+2020-2022,
                 U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+20BE, U+2122,
                 U+2190-2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/firago-400-georgian.woff2') format('woff2');
  unicode-range: U+10D0-10FF;
}

@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/firago-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-200D, U+2010-2015, U+2018-201E, U+2020-2022,
                 U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+20BE, U+2122,
                 U+2190-2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/firago-500-georgian.woff2') format('woff2');
  unicode-range: U+10D0-10FF;
}

@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/firago-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-200D, U+2010-2015, U+2018-201E, U+2020-2022,
                 U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+20BE, U+2122,
                 U+2190-2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/firago-600-georgian.woff2') format('woff2');
  unicode-range: U+10D0-10FF;
}

/* Metric-matched stand-in for the swap window. FiraGO's x-height is 527/1000;
   Arial's is 0.5186 and Helvetica Neue's 0.517, so one adjustment serves both.
   Ascent and descent are then restated against the adjusted em, which holds the
   line box still when the real face arrives — no reflow, no CLS. */
@font-face {
  font-family: 'FiraGO Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 101.8%;
  ascent-override: 91.9%;
  descent-override: 26.0%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* surfaces */
  --ink:        #16202A;
  --ink-2:      #223040;
  --page:       #FFFFFF;
  --surface:    #FFFFFF;
  --fog:        #F4F6F9;
  --fog-2:      #E9EDF2;

  /* text */
  --text:       #2F3A44;
  --text-soft:  #46535F;
  --mute:       #64717F;

  /* lines */
  --line:        rgba(47, 58, 68, .11);
  --line-strong: rgba(47, 58, 68, .19);

  /* brand accents — sampled from the logo artwork */
  --signal:    #F26F1F;   /* logo orange — live status, recovery, urgency */
  --signal-d:  #C2510C;   /* orange darkened to pass AA as text on white */
  --signal-w:  rgba(242, 111, 31, .16);
  --brand:     #0078BF;   /* logo blue — platform, car wash */
  --brand-d:   #00669F;   /* blue darkened to pass AA as text on white */
  --brand-w:   rgba(0, 120, 191, .14);

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(22, 32, 42, .05), 0 4px 12px -4px rgba(22, 32, 42, .06);
  --sh-2: 0 2px 6px rgba(22, 32, 42, .05), 0 18px 38px -14px rgba(22, 32, 42, .16);
  --sh-3: 0 30px 70px -24px rgba(22, 32, 42, .28), 0 4px 10px rgba(22, 32, 42, .05);

  /* metrics */
  --wrap:  1180px;
  --gut:   clamp(20px, 5vw, 40px);
  --sec-y: clamp(64px, 8.5vw, 120px);

  /* type — one family for both scripts, separated by weight rather than face */
  --f-display: 'FiraGO', 'FiraGO Fallback', system-ui, -apple-system, sans-serif;
  --f-body:    'FiraGO', 'FiraGO Fallback', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* road motif: lane markings advance, they never bounce */
  --ease-road: cubic-bezier(.32, .72, .28, 1);
}

/* Dark surfaces re-point the same tokens, so every component below inherits
   its inverted skin without a single per-component dark rule. */
.section-dark,
.banner,
.cta,
.site-footer {
  --surface:     rgba(255, 255, 255, .045);
  --fog:         rgba(255, 255, 255, .05);
  --text:        #EDF1F5;
  --text-soft:   #C3CCD5;
  --mute:        #9AA6B3;
  --line:        rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .24);
  --signal-d:    #FF8B45;
  --brand-d:      #5BB8EA;
  color: var(--text);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: rgba(242, 111, 31, .3); color: var(--ink); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  position: fixed;
  left: var(--gut);
  top: 12px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .75em 1.2em;
  border-radius: var(--r-sm);
  font-size: .92rem;
  text-decoration: none;
  box-shadow: var(--sh-3);
}

/* --------------------------------------------------- bilingual switching */
/* Only ever hide. Never force a display value — that would flatten the
   inline/block distinction the markup relies on. */
html[lang="en"] .ka { display: none !important; }
html[lang="ka"] .en { display: none !important; }

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: inherit;
  font-weight: 600;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* Tracking is set for FiraGO, a humanist grotesque with generous sidebearings —
   it wants roughly half the negative tracking a tightly drawn geometric face
   would take. Pulling it tighter than this closes the counters on 'a' and 'e'. */
h1 {
  font-size: clamp(2.3rem, 1.15rem + 4.6vw, 4.05rem);
  line-height: 1.06;
  letter-spacing: -.018em;
}

h2 {
  font-size: clamp(1.7rem, 1rem + 2.5vw, 2.65rem);
  line-height: 1.14;
  letter-spacing: -.013em;
}

h3 {
  font-size: clamp(1.1rem, .96rem + .55vw, 1.32rem);
  line-height: 1.34;
  letter-spacing: -.006em;
}

/* Same family now carries Georgian, so this is no longer compensating for a
   different typeface — only for Mkhedruli itself, which sets wider than Latin
   and hangs both ascenders and descenders, so it needs the extra leading. */
/* Mkhedruli sets appreciably wider than Latin at the same point size, so the
   display sizes come down a step — otherwise a headline that runs three lines
   in English runs five in Georgian and drags the whole hero down with it. */
html[lang="ka"] h1 {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.35rem);
  letter-spacing: -.004em;
  line-height: 1.18;
}
html[lang="ka"] h2 {
  font-size: clamp(1.55rem, 1rem + 2vw, 2.3rem);
  letter-spacing: 0;
  line-height: 1.26;
}
html[lang="ka"] h3 { letter-spacing: 0; line-height: 1.42; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--text); }

/* Eyebrow — the recurring brand signature: blue label, orange dot. Same
   blue-mass / orange-tip relationship as the logo mark. */
.eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-d);
  margin: 0 0 1.1em;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  /* pin to the first line so the dot stays put when the label wraps */
  align-self: flex-start;
  margin-top: .56em;
}
html[lang="ka"] .eyebrow { letter-spacing: .06em; }

/* ------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec-y); }

.section-fog {
  background: var(--fog);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
/* map-grid texture */
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .085) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.section-dark > .wrap { position: relative; z-index: 1; }

.section-head {
  max-width: 780px;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.section-head h2 { margin-bottom: .45em; }
.section-head > p {
  color: var(--mute);
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
  max-width: 68ch;
  margin: 0;
}

.grid { display: grid; gap: clamp(18px, 2vw, 26px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .95em 1.65em;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .25s, border-color .25s, color .25s;
}
.btn::after {
  content: '→';
  font-size: 1.05em;
  line-height: 1;
  transition: transform .35s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(22, 32, 42, .55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(22, 32, 42, .6);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--fog);
  border-color: var(--text);
  transform: translateY(-2px);
}

/* On ink surfaces the primary button flips to the beacon colour. */
.cta .btn-primary,
.section-dark .btn-primary,
.banner .btn-primary {
  background: var(--signal);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(242, 111, 31, .55);
}
.cta .btn-primary:hover,
.section-dark .btn-primary:hover,
.banner .btn-primary:hover {
  background: #FF8B45;
  box-shadow: 0 16px 32px -16px rgba(242, 111, 31, .6);
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -22px rgba(22, 32, 42, .55);
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  transition: opacity .25s;
}
.brand:hover { opacity: .78; }
.brand img { height: 36px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  padding: .6em .9em;
  border-radius: var(--r-sm);
  font-size: .96rem;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav-links a:hover { color: var(--text); background: var(--fog); }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .18em;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--signal);
}

/* language — segmented control */
.lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fog);
  border: 1px solid var(--line);
  flex: none;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mute);
  padding: .45em .8em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] {
  background: var(--page);
  color: var(--text);
  box-shadow: var(--sh-1);
}

/* Drawn in CSS rather than set as ☰ / ✕. FiraGO carries neither glyph, so a
   character would drop to a fallback face and render inconsistently — and bars
   we own can morph. Three rules that fold into a cross: lane markings again. */
.nav-toggle {
  display: none;
  position: relative;
  appearance: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--text);
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.nav-toggle:hover { background: var(--fog); border-color: var(--line-strong); }

.nav-toggle::before,
.nav-toggle::after,
.nav-toggle span {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .38s var(--ease-road), opacity .2s linear;
}
.nav-toggle::before { transform: translateY(-6px); }
.nav-toggle::after  { transform: translateY(6px); }

.site-header.open .nav-toggle::before { transform: rotate(45deg); }
.site-header.open .nav-toggle::after  { transform: rotate(-45deg); }
.site-header.open .nav-toggle span    { opacity: 0; transform: scaleX(.2); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 96px) clamp(64px, 8vw, 112px);
  background:
    radial-gradient(ellipse 58% 52% at 84% 10%, rgba(242, 111, 31, .13), transparent 60%),
    radial-gradient(ellipse 46% 46% at 4%  62%, rgba(0, 120, 191, .10), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 52%, #FFFFFF 100%);
}
/* map-grid, faded */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(47, 58, 68, .075) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000, transparent 72%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(38px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: .42em; }

.hero .eyebrow::after { animation: beacon 2.6s ease-out infinite; }

.lede {
  font-size: clamp(1.05rem, .99rem + .4vw, 1.21rem);
  line-height: 1.62;
  color: var(--mute);
  max-width: 56ch;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* ------------------------------------------- hero status panel (live job) */
.status-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 28px);
  box-shadow: var(--sh-3);
  position: relative;
}
.status-panel::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 111, 31, .8), transparent);
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
.panel-label::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}
.panel-label { position: relative; }
.panel-label::after { animation: beacon 2.6s ease-out infinite; }
html[lang="ka"] .panel-label { letter-spacing: .05em; }

.status-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.status-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  font-size: .95rem;
  color: var(--mute);
}
/* connector to the next stage */
.status-list li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: calc(50% + 11px);
  height: calc(100% - 22px);
  width: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.status-list li:last-child::before { display: none; }
.status-list li.done::before { background: var(--signal); }

.status-list .dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  box-sizing: border-box;
}
.status-list .done .dot { background: var(--signal); border-color: var(--signal); }
.status-list .now  .dot {
  background: var(--signal);
  border-color: var(--signal);
}
.status-list .now .dot::after { animation: beacon 2.2s ease-out infinite; }
.status-list .done { color: var(--text-soft); }
.status-list .now  { color: var(--text); font-weight: 600; }

.stamp {
  font-family: var(--f-display);
  font-size: .8rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.panel-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--mute);
}

/* The beacon expands a ring rather than an animated box-shadow. A shadow
   repaints the element every frame; a scaled pseudo-element stays on the
   compositor, which matters because this is the one loop that never stops. */
@keyframes beacon {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .55; }
  70%  { transform: translate(-50%, -50%) scale(3.4); opacity: 0;   }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0;   }
}

/* Shared ring geometry: centred on whatever dot it is paired with. Scoped to
   the three live-signal spots only — a beacon on every eyebrow would turn a
   signal into wallpaper. */
.hero .eyebrow::after,
.panel-label::after,
.status-list .now .dot::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  pointer-events: none;
  will-change: transform, opacity;
  /* Resting state must be the invisible, centred one. If the centring lived
     only in the keyframes, anything that stops the animation — reduced motion,
     a paused timeline — would strand the ring off-centre and fully opaque. */
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* .eyebrow::before is the dot itself, so the ring rides on ::after and is
   pinned to the dot's centre — 7px dot, offset by half, on the first line. */
.hero .eyebrow::after {
  left: 3.5px;
  top: calc(.56em + 3.5px);
}
.panel-label::after {
  left: 4px;
  top: 50%;
}
.status-list .now .dot::after {
  left: 50%;
  top: 50%;
}
.status-list .now .dot { position: relative; }

/* ---------------------------------------------- banner (inner page hero) */
.banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 88% 0%, rgba(242, 111, 31, .2), transparent 62%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 120, 191, .16), transparent 65%),
    linear-gradient(160deg, #1F2C39 0%, #16202A 62%);
  padding-block: clamp(62px, 7vw, 104px) clamp(52px, 6vw, 84px);
}
/* dashed lane markings: thin diagonal rules, cut into dashes by a
   perpendicular mask */
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(116deg,
    rgba(255, 255, 255, .085) 0 2px, transparent 2px 78px);
  -webkit-mask-image: repeating-linear-gradient(26deg, #000 0 66px, transparent 66px 116px);
  mask-image: repeating-linear-gradient(26deg, #000 0 66px, transparent 66px 116px);
  pointer-events: none;
}
.banner > .wrap { position: relative; z-index: 1; }
.banner h1 { margin-bottom: .34em; max-width: 20ch; }
.banner > .wrap > p {
  color: var(--text-soft);
  font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem);
  max-width: 62ch;
  margin: 0;
}

/* ----------------------------------------------------------------- cards */
.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}
.card h3 { margin-bottom: .55em; }
.card p { color: var(--mute); }
.card a { color: var(--text); text-decoration-color: var(--brand); text-underline-offset: 3px; }

/* accent rules: amber = recovery, aqua = wash */
.card-line::before,
.card-line-b::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.card-line::before  { background: linear-gradient(90deg, var(--signal), rgba(242, 111, 31, 0)); }
.card-line-b::before { background: linear-gradient(90deg, var(--brand),  rgba(0, 120, 191, 0)); }

/* ----------------------------------------------------------------- ticks */
.ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--mute);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .28em;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--signal-w);
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: .6em;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--signal-d);
  border-bottom: 2px solid var(--signal-d);
  transform: rotate(42deg);
}
.card-line-b .ticks li::before { background: var(--brand-w); }
.card-line-b .ticks li::after {
  border-right-color: var(--brand-d);
  border-bottom-color: var(--brand-d);
}

/* ----------------------------------------------------------------- steps */
.steps {
  counter-reset: step;
  max-width: 920px;
}
.step {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.2vw, 26px);
  padding-block: 24px;
}
/* lane-marking rail between the numbers */
.step::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 78px;
  bottom: -14px;
  width: 2px;
  background: repeating-linear-gradient(180deg,
    var(--line-strong) 0 6px, transparent 6px 13px);
}
.step:last-child::before { display: none; }

.step-n {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: var(--f-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px -10px rgba(22, 32, 42, .7);
}
.step-n::before { content: counter(step, decimal-leading-zero); }

.step h3 { margin-bottom: .35em; }
.step p { color: var(--mute); }

.section-dark .step-n { background: var(--signal); color: var(--ink); }

/* ------------------------------------------------------------------- cta */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(242, 111, 31, .22), transparent 65%),
    linear-gradient(180deg, #1B2937, #16202A);
  padding-block: clamp(64px, 7.5vw, 108px);
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(116deg,
    rgba(255, 255, 255, .085) 0 2px, transparent 2px 78px);
  -webkit-mask-image: repeating-linear-gradient(26deg, #000 0 66px, transparent 66px 116px);
  mask-image: repeating-linear-gradient(26deg, #000 0 66px, transparent 66px 116px);
  opacity: .4;
  pointer-events: none;
}
.cta > .wrap { position: relative; z-index: 1; }
.cta h2 { margin-bottom: .5em; }
.cta .en, .cta .ka { display: block; }
.cta p {
  color: var(--text-soft);
  max-width: 56ch;
  margin-inline: auto;
  font-size: clamp(1rem, .96rem + .28vw, 1.1rem);
}
.cta .btn { margin-top: clamp(26px, 3vw, 36px); }

/* ---------------------------------------------------------------- tables */
.table-shell {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}
.data th,
.data td {
  padding: 16px clamp(16px, 2vw, 24px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data th {
  width: 33%;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--text);
  background: var(--fog);
}
.data td { color: var(--mute); }
.data td a { color: var(--text); text-decoration-color: var(--brand); text-underline-offset: 3px; }
.data tr:last-child th,
.data tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- prose */
.prose {
  max-width: 74ch;
  margin-inline: auto;
  font-size: 1.02rem;
  color: var(--text-soft);
}
.prose h2 {
  margin: 2.3em 0 .65em;
  font-size: clamp(1.32rem, 1.1rem + .95vw, 1.7rem);
  color: var(--text);
  scroll-margin-top: 100px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  margin: 1.9em 0 .5em;
  color: var(--text);
  scroll-margin-top: 100px;
}
.prose p { margin: 0 0 1.15em; }
.prose ul,
.prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--brand-d); }
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.prose a:hover { color: var(--brand-d); }
.prose strong { color: var(--text); }

.meta {
  display: inline-block;
  font-size: .85rem;
  color: var(--mute);
  background: var(--fog);
  border: 1px solid var(--line);
  padding: .5em 1.1em;
  border-radius: 999px;
  margin-bottom: 2.4em;
}

/* --------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.contact-grid > div > h2 { margin-bottom: .5em; }
.contact-grid p { color: var(--mute); }

.contact-item {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  align-items: start;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.contact-item:first-of-type { margin-top: 30px; }
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-item .k {
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: .25em;
}
html[lang="ka"] .contact-item .k { letter-spacing: .04em; }
.contact-item .v { color: var(--text); }
.contact-item .v address {
  font-style: normal;
  line-height: 1.75;
  color: var(--text-soft);
}
.contact-item .v a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .2s;
}
.contact-item .v a:hover { color: var(--brand-d); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  background: var(--ink);
  padding-block: clamp(54px, 6vw, 82px) 28px;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 120, 191, .5) 35%, rgba(242, 111, 31, .6) 65%, transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
}

.footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 22px;
}

.site-footer address {
  font-style: normal;
  font-size: .94rem;
  line-height: 1.8;
  color: var(--mute);
}
.site-footer address strong {
  display: inline-block;
  margin-bottom: .3em;
  color: #fff;
  font-weight: 600;
}

.site-footer h4 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
html[lang="ka"] .site-footer h4 { letter-spacing: .05em; }

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.site-footer ul a {
  font-size: .95rem;
  color: var(--mute);
  text-decoration: none;
  transition: color .22s;
}
.site-footer ul a:hover { color: #fff; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--mute);
}

/* =========================================================================
   MOTION
   Every movement here comes from the logo: a road running to an orange arrow,
   with lane markings receding. Things advance along a path — they do not bounce,
   spin or float. Two hard rules: only transform and opacity are animated, so
   the work stays on the compositor; and the beacon is the single loop that
   never ends. Everything else runs once and stops.
   ========================================================================= */

/* ---------------------------------------------------- scroll reveal */
/* .reveal is applied by site.js, so content stays visible without JS.
   The stagger is a CSS delay off --i rather than a JS timer: the browser
   schedules it on the animation frame instead of the task queue. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------- hero lane texture drift */
/* Scroll-linked, so it runs off the main thread with no scroll listener at all.
   Browsers without view() timelines simply keep the texture still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero::before {
      animation: lane-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes lane-drift {
      from { transform: translate3d(0, -1.5%, 0); }
      to   { transform: translate3d(0,  4.5%, 0); }
    }
  }
}

/* ------------------------------------ status panel: the order advances */
/* .anim means JS is present and will run this; without it the panel renders
   in its finished state. Fires once, when the panel first comes into view. */
.status-panel.anim .status-list li::before {
  transform: scaleY(0);
  transform-origin: top;
}
.status-panel.anim .status-list .dot {
  transform: scale(.35);
  opacity: 0;
}
.status-panel.anim .status-list .stamp { opacity: 0; }
.status-panel.anim .status-list .now .dot::after { animation-play-state: paused; }

.status-panel.anim.ran .status-list li::before {
  transform: scaleY(1);
  transition: transform .42s var(--ease-road);
  transition-delay: calc(var(--i) * 200ms + 180ms);
}
.status-panel.anim.ran .status-list .dot {
  transform: scale(1);
  opacity: 1;
  transition: transform .34s var(--ease-road), opacity .24s linear;
  transition-delay: calc(var(--i) * 200ms);
}
.status-panel.anim.ran .status-list .stamp {
  opacity: 1;
  transition: opacity .3s linear;
  transition-delay: calc(var(--i) * 200ms + 100ms);
}
/* the live row only starts pulsing once the sequence has reached it */
.status-panel.anim.ran .status-list .now .dot::after {
  animation-play-state: running;
  animation-delay: calc(var(--i, 0) * 200ms);
}

/* --------------------------------------------- steps rail draws down */
/* Reuses the .reveal hook already on each .step — no second observer. */
.step.reveal::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--ease-road);
  transition-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.step.reveal.in::before { transform: scaleY(1); }

/* --------------------------------------------------- card hover sheen */
/* Pointer position arrives as --mx/--my from one delegated listener in
   site.js. Fine pointers only: on touch there is no hover to track. */
@media (hover: hover) and (pointer: fine) {
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--ease);
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 0%),
      rgba(242, 111, 31, .09),
      transparent 62%);
  }
  .card:hover::after { opacity: 1; }
  .section-dark .card::after,
  .cta .card::after {
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, .07),
      transparent 62%);
  }
}

/* ------------------------------------------------ nav sliding marker */
/* Sized and placed from JS via custom properties; only transform animates. */
@media (min-width: 901px) {
  .nav-links { position: relative; }
  .nav-links::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--marker-w, 0);
    height: 34px;
    margin-top: -17px;
    border-radius: var(--r-sm);
    background: var(--fog);
    opacity: var(--marker-o, 0);
    transform: translateX(var(--marker-x, 0));
    transition: transform .4s var(--ease-road), width .4s var(--ease-road),
                opacity .25s linear;
    pointer-events: none;
  }
  /* the link's own hover background would double up with the marker */
  .nav-links.has-marker a:hover { background: transparent; }
}

/* --------------------------------------------------------- logo nudge */
.brand img {
  transition: transform .4s var(--ease-road);
}
.brand:hover img { transform: translateX(2px); }

/* ---------------------------------------------------- page transitions */
/* Cross-document, native, no script. The chrome stays put and only <main>
   crosses over, so navigating reads as one continuous surface. Browsers
   without support just navigate normally. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out .22s var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-in .3s var(--ease) both;
  }
  @keyframes vt-out { to   { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px);  } }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .status-panel { max-width: 520px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .lang { margin-left: 10px; order: 3; }
  .nav-toggle { order: 4; margin-left: 0; }

  .nav-links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px var(--gut) 22px;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .site-header.open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-links a { padding: .85em .9em; font-size: 1rem; }
  .nav-links a[aria-current="page"]::after {
    left: auto;
    right: .9em;
    bottom: auto;
    top: 50%;
    margin: -2.5px 0 0;
  }
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  /* the inline gap:56px on some two-column grids is too wide once stacked */
  .grid-2[style] { gap: 34px !important; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
  .data th, .data td { display: block; width: 100%; }
  .data th { border-bottom: 0; padding-bottom: 6px; }
  .data td { padding-top: 0; }
  .data tr { display: block; border-bottom: 1px solid var(--line); }
  .data tr:last-child { border-bottom: 0; }
  .data tr th, .data tr td { border-bottom: 0; }

  .contact-item { grid-template-columns: 1fr; gap: 6px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .step::before { display: none; }
  .step + .step { border-top: 1px solid var(--line); }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
  .lang button { padding: .45em .65em; }
}

/* --------------------------------------------------------------- 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;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Blanking the durations above is not enough for anything whose resting
     state is "not yet arrived" — those have to be put into their finished
     state explicitly, or they stay invisible. */
  .status-panel.anim .status-list li::before { transform: scaleY(1); }
  .status-panel.anim .status-list .dot { transform: scale(1); opacity: 1; }
  .status-panel.anim .status-list .stamp { opacity: 1; }
  .step.reveal::before { transform: scaleY(1); }
  .hero::before { transform: none; }
  .nav-links::before { opacity: 0 !important; }
  .card::after { display: none; }

  /* A cross-fade is still motion to a vestibular system. Skip it entirely. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .nav-toggle, .lang, .cta, .skip { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section, .banner { padding-block: 18pt; }
  .banner, .section-dark, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .card, .table-shell { box-shadow: none; border-color: #bbb; }
  a { text-decoration: underline; }
  .reveal { opacity: 1 !important; transform: none !important; }
}