/* ─────────────────────────────────────────────
   Etherlink · «Сигнал» — tokens, fonts, reset
   ───────────────────────────────────────────── */

/* Zrnic — фірмовий шрифт вордмарку. У наданому файлі кириличні гліфи порожні,
   тому шрифт обрізано до латиниці й цифр: він відповідає лише за «машинні дані»
   (швидкості, ціни, телефон, коди тарифів, домени). Решта падає на Fixel. */
@font-face {
  font-family: "Zrnic";
  src: url("../fonts/zrnic-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0020-005A, U+005C, U+005E-007A, U+007C;
}
@font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fixel Display"; src: url("../fonts/FixelDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("../fonts/FixelText-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("../fonts/FixelText-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("../fonts/FixelText-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* IBM Plex Mono — «приладові» підписи. Лише у двох місцях: смуга фактів героя і панель тарифу. */
@font-face { font-family: "Plex Mono"; src: url("../fonts/PlexMono-400-lat.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+2192; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/PlexMono-400-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/PlexMono-500-lat.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+2192; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/PlexMono-500-cyr.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }

:root {
  color-scheme: dark;

  /* Ink — чорний і майже-чорні площини */
  --ink-0: #000000;
  --ink-1: #07060a;
  --ink-2: #0e0c11;
  --ink-3: #16131a;
  --line: #1f1c24;
  --line-2: #2c2833;
  --line-3: #3d3845;

  /* Текст */
  --fg: #f3f1f5;
  --fg-2: #bab5c1;   /* 10.3:1 на #000 */
  --fg-3: #8c8694;   /* 5.8:1 на #000 */
  --fg-4: #5d5865;   /* лише декор, не текст */

  /* Неоновий фіолетовий — світло, а не заливка */
  --v-500: #b14dff;  /* сигнал; 5.4:1 на #000 */
  --v-400: #c47bff;  /* текст/ховер; 7.3:1 */
  --v-300: #dcb4ff;  /* ядро світіння */
  --v-700: #7c1f9a;  /* оригінальний колір бренду */
  --v-900: #1c0a26;  /* підкладка світіння */
  --v-glow: rgb(177 77 255 / 0.38);
  --brand-blue: #0000a3; /* лише друк / світлий фон */

  /* Шрифти */
  --f-data: "Zrnic", "Fixel Display", system-ui, sans-serif;
  --f-display: "Fixel Display", "Fixel Text", system-ui, sans-serif;
  --f-text: "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Шкала */
  --fs-hero: clamp(46px, 7.2vw, 112px);
  --fs-h2: clamp(36px, 4.7vw, 72px);
  --fs-h3: clamp(22px, 2vw, 30px);
  --fs-lead: clamp(17px, 1.32vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12.5px;
  --fs-num-stage: min(17vh, 15.5vw, 172px);
  --fs-num-card: clamp(64px, 6.6vw, 104px);
  --fs-num-price: clamp(30px, 2.8vw, 42px);

  /* Сітка й ритм (база 8) */
  --gutter: clamp(20px, 4.45vw, 64px);
  --col-gap: clamp(12px, 1.67vw, 24px);
  --max: 1440px;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
  --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; --sp-9: 176px;
  --section-y: clamp(88px, 10vw, 152px);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --header-h: 72px;

  /* Рух */
  --e-signal: cubic-bezier(0.22, 1, 0.36, 1);   /* вихід сигналу */
  --e-tune: cubic-bezier(0.65, 0, 0.35, 1);     /* перемикання стану */
  --e-press: cubic-bezier(0.32, 0, 0.67, 0);    /* натискання / вхід */
  --d-1: 160ms; --d-2: 280ms; --d-3: 520ms; --d-4: 900ms;
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--v-500); color: #000; }

:focus-visible {
  outline: 2px solid var(--v-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Утиліти */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--v-500); color: #000; padding: 10px 16px; border-radius: var(--radius-s);
  font-weight: 600; transition: top var(--d-2) var(--e-signal);
}
.skip:focus { top: 16px; }
.mono { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.data { font-family: var(--f-data); font-weight: 400; letter-spacing: 0; font-feature-settings: "kern"; }
/* Окрема «6» у Zrnic читається як кирилична «б» — таку шістку набираємо Fixel (висота цифр зрівняна з Zrnic) */
.d6 { font-family: var(--f-display); font-weight: 500; font-size: .93em; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.nw { white-space: nowrap; }