/* n4s.live: landing + legal pages. Static, served by Cloudflare Pages (no N4S server behind it).
   Colours and type follow the app (mobile/lib/app/theme.dart) and the design canvas. */
@font-face { font-family: "N4S Display"; src: url(/fonts/BarlowCondensed-ExtraBoldItalic.woff2) format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "N4S Display Upright"; src: url(/fonts/BarlowCondensed-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "N4S Display Cyr"; src: url(/fonts/FiraSansExtraCondensed-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "N4S Display Geo"; src: url(/fonts/NotoSansGeorgian-CondensedExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "N4S Geo"; src: url(/fonts/NotoSansGeorgian-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "N4S Geo"; src: url(/fonts/NotoSansGeorgian-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #0a0a0b;      /* page */
  --asphalt: #141416;    /* raised surfaces */
  --kerb: #2a2a2e;       /* borders */
  --seam: #1f1f23;       /* dividers */
  --chalk: #f5f5f7;      /* text */
  --soft: #d1d1d6;       /* body copy */
  --smoke: #a1a1a8;      /* secondary */
  --signal: #e10600;     /* red fills */
  --signal-text: #ff3b30;
  --safe: #30d158;       /* the privacy cell, trusted people */
  --display: "N4S Display", "N4S Display Cyr", "N4S Display Geo", "Barlow Condensed", Impact, sans-serif;
  --body: Inter, "N4S Geo", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  color-scheme: dark;
}
:lang(ka) { --display: "N4S Display Geo", "Noto Sans Georgian", sans-serif; }
:lang(ru) { --display: "N4S Display Cyr", "Fira Sans Extra Condensed", sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--chalk); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--chalk); text-underline-offset: 3px; text-decoration-color: var(--signal-text); }
a:hover { color: var(--signal-text); }
:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--chalk); color: var(--night); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(10, 10, 11, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--seam); }
.top .wrap { height: 64px; display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; height: 44px; color: var(--chalk); }
.logo svg { height: 22px; width: auto; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top nav a { text-decoration: none; color: var(--soft); font-size: 15px; font-weight: 600; padding: 10px 10px; }
.top nav a:hover { color: var(--chalk); }
.langs { display: flex; border: 1px solid var(--kerb); border-radius: 999px; padding: 3px; margin-left: 8px; }
.langs button { all: unset; cursor: pointer; font: 600 13px/1 var(--body); color: var(--smoke); padding: 8px 10px; border-radius: 999px; min-width: 24px; text-align: center; }
.langs button[aria-pressed="true"] { background: var(--chalk); color: var(--night); }
.langs button:focus-visible { outline: 2px solid var(--signal-text); }
.top nav a { white-space: nowrap; }
@media (max-width: 1080px) { .top nav a:not(.keep) { display: none; } }
@media (max-width: 520px) { .top nav a.keep { display: none; } }

/* ---------- display type: the racing italic, skewed blocks from the app's Rides menu */
.display { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; margin: 0; }
:lang(ka) .display, :lang(ru) .display { font-style: normal; text-transform: none; line-height: 1.05; }
.slab { display: inline-block; background: var(--signal); color: #fff; padding: .06em .32em .02em; transform: skewX(-12deg); }
.slab > span { display: inline-block; transform: skewX(12deg); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 18px; border-radius: 14px; background: var(--chalk); color: var(--night); font-weight: 700; font-size: 16px; text-decoration: none; border: 0; }
.btn:hover { color: var(--night); background: #fff; }
.btn svg { width: 24px; height: 24px; flex: none; }
.btn small { display: block; font-size: 12px; font-weight: 600; color: #55555c; line-height: 1.1; }
.btn b { display: block; line-height: 1.15; }
.btn.ghost { background: transparent; color: var(--soft); border: 1px solid var(--kerb); }
.btn.ghost small { color: var(--smoke); }
.btn.ghost[aria-disabled="true"] { cursor: default; }

/* ---------- footer */
.foot { border-top: 1px solid var(--seam); margin-top: 96px; padding: 40px 0 56px; color: var(--smoke); font-size: 14px; }
.foot .wrap { display: grid; grid-template-columns: 1.2fr 2fr; gap: 32px; }
.foot ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.foot li { padding: 6px 0; break-inside: avoid; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--chalk); text-decoration: underline; }
.foot p { margin: 0 0 8px; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .foot ul { columns: 1; } }
.foot li { overflow-wrap: anywhere; }