/* ==== 10-tokens.css ==== */
/* ==========================================================================
   FIXIKI — токени
   Палітра виведена з логотипа (виміряно з img/logo.png):
   лайм #B0BE16, нейві #0E3350, білий #FAF9F9, теплий #DFB446.
   Акцент освітлено до #C8DA1E — сам #B0BE16 не витягує 4.5:1 на темному.
   ========================================================================== */

:root{
  /* --- поверхні: родина нейві з логотипа --- */
  --bg-deep:      #07182a;
  --bg-panel:     #0e3350;
  --bg-panel-2:   #14415f;
  --bg-panel-3:   #1b5075;

  /* --- лінії плати --- */
  --line-circuit:     #2e6e96;
  --line-circuit-dim: #1d4a68;

  /* --- акцент: лайм логотипа --- */
  --accent-lime:      #c8da1e;
  --accent-lime-dim:  #a8b80c;
  --accent-lime-glow: rgba(200,218,30,.35);

  /* --- другий акцент: тепле з ока персонажа --- */
  --accent-amber:      #dfb446;
  --accent-amber-glow: rgba(223,180,70,.3);

  /* --- текст --- */
  --text-primary:   #f5f7fa;
  --text-secondary: #b3c6d8;
  --text-muted:     #7d9ab3;

  /* --- межі --- */
  --border-soft: rgba(179,198,216,.15);
  --border-lime: rgba(200,218,30,.42);

  /* --- статуси --- */
  --danger:  #ff7a6b;
  --success: #6fe39a;

  /* --- шрифти --- */
  --font-display: 'Chakra Petch', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- типографічна шкала --- */
  --fs-display: clamp(2.4rem, 1.35rem + 4.6vw, 4.5rem);
  --fs-h2:      clamp(1.7rem, 1.22rem + 2.1vw, 2.75rem);
  --fs-h3:      clamp(1.15rem, 1.03rem + .55vw, 1.5rem);
  --fs-lede:    clamp(1.02rem, .97rem + .28vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  /* --- сітка --- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-xl: 38px;

  /* --- відступи, крок 4px --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  /* --- глибина: 4 рівні замість пласких рамок --- */
  --elev-1:
    0 1px 2px rgba(0,0,0,.40),
    0 4px 12px -2px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
  --elev-2:
    0 2px 4px rgba(0,0,0,.45),
    0 12px 28px -6px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.07);
  --elev-3:
    0 4px 8px rgba(0,0,0,.50),
    0 24px 48px -12px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);
  --elev-4:
    0 8px 16px rgba(0,0,0,.55),
    0 40px 80px -20px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.10);

  /* сумісність зі старим ім'ям */
  --shadow-panel: var(--elev-3);

  /* --- рух --- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in:  cubic-bezier(.55,.06,.68,.19);
  --dur-fast: .16s;
  --dur:      .24s;
  --dur-slow: .34s;

  /* --- шари --- */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 90; --z-overlay: 100;
}

/* градієнтний край для піднятих поверхонь */
.has-edge{
  position:relative;
  background:
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
    linear-gradient(160deg, rgba(200,218,30,.32), rgba(179,198,216,.10) 42%, rgba(179,198,216,.03)) border-box;
  border:1px solid transparent;
}

/* ==== 20-base.css ==== */
/* ==========================================================================
   FIXIKI — база: ресет, типографіка, утиліти
   ========================================================================== */

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before{
  /* ambient circuit grid wash across whole page */
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(46,110,150,.16), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(200,218,30,.07), transparent 36%),
    linear-gradient(180deg, var(--bg-deep) 0%, color-mix(in srgb, var(--bg-panel) 55%, var(--bg-deep)) 45%, var(--bg-deep) 100%);
  z-index:-2;
  pointer-events:none;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: clamp(56px, 9vw, 128px) 0; position:relative; }
.section--tight{ padding: clamp(40px, 6vw, 80px) 0; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent-lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- eyebrow / kicker (used sparingly, as a PCB "trace label") --- */
.kicker{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-lime);
}
.kicker::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--accent-lime);
  box-shadow: 0 0 8px var(--accent-lime-glow);
}

.eyebrow-line{
  display:flex; align-items:center; gap:14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform: uppercase;
}
.eyebrow-line::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, var(--border-soft), transparent);
}

/* --- headings --- */
h1{ font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.04; }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.08; }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lede{ color: var(--text-secondary); font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 60ch; }

/* --- readout / price chip (LED-style) --- */
.readout{
  display:inline-flex; align-items:baseline; gap:.35em;
  font-family: var(--font-mono);
  background: rgba(4,14,26,.85);
  border: 1px solid var(--border-lime);
  color: var(--accent-lime);
  padding: .3em .65em;
  border-radius: 6px;
  text-shadow: 0 0 12px var(--accent-lime-glow);
  font-size: .95em;
  white-space: nowrap;
}
.readout small{ color: var(--text-muted); font-size:.7em; text-transform:uppercase; letter-spacing:.06em; }

/* ==== 30-header.css ==== */
/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  /* solid (not blurred) so it never becomes an accidental containing block
     for the fixed-position mobile nav panel nested inside it */
  background: rgba(7,24,42,.96);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand-mark{
  display:flex; align-items:center; gap:12px; min-height:44px;
  font-family: var(--font-display);
  font-weight:700; font-size:1.05rem;
  letter-spacing:.01em;
  color: var(--text-primary);
}
.brand-logo{
  width:46px; height:46px; flex:none;
  border-radius:50%;
  filter: drop-shadow(0 0 12px var(--accent-lime-glow));
}
/* назва пишеться змішаним регістром — FiXiKi, як у картці Google і в лого */
.brand-name{ display:block; line-height:1.15; letter-spacing:.04em; }
.brand-mark .sub{ display:block; font-family: var(--font-body); font-weight:500; font-size:.68rem; color: var(--text-muted); letter-spacing:.08em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap: clamp(15px, 1.9vw, 30px); }
.main-nav a{
  font-size:.92rem; color: var(--text-secondary);
  position:relative; padding: 6px 0;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.is-active{ color: var(--text-primary); }
.main-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--accent-lime); box-shadow:0 0 8px var(--accent-lime-glow);
}
.header-cta{ display:flex; align-items:center; gap:14px; }
.tel-link{ font-family: var(--font-mono); font-size:.95rem; color: var(--text-primary); white-space:nowrap; }
.tel-link .lbl{ display:block; font-family: var(--font-body); font-size:.66rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }

.nav-toggle{ display:none; background:none; border:1px solid var(--border-soft); border-radius:8px; width:44px; height:44px; color:var(--text-primary); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-display); font-weight:600; font-size:.92rem;
  letter-spacing:.02em;
  padding: .85em 1.5em;
  border-radius: 999px;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn--lime{
  background: var(--accent-lime); color: var(--bg-deep);
  box-shadow: 0 0 0 0 rgba(215,255,61,0);
}
.btn--lime:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--accent-lime-glow); }
.btn--ghost{
  background: transparent; color: var(--text-primary); border-color: var(--border-soft);
}
.btn--ghost:hover{ border-color: var(--accent-lime); color: var(--accent-lime); }
.btn--sm{ padding:.6em 1.1em; font-size:.82rem; min-height:44px; }
.btn--block{ width:100%; }


/* Шапці потрібно більше ширини, ніж текстовій колонці: бренд + 6 посилань + телефон
   разом ~1104px. Даємо свій контейнер із меншими полями, інакше нав тулиться впритул. */
.site-header .container{
  max-width: 1440px;
  padding-inline: clamp(16px, 2.6vw, 40px);
  gap: var(--sp-5);
}

/* перемикач мов */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 12px;
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.04em;
  color: var(--text-secondary);
  border:1px solid var(--border-soft); border-radius:8px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.lang-switch:hover{ color: var(--accent-lime); border-color: var(--border-lime); background: rgba(200,218,30,.08); }
@media (max-width: 420px){
  .lang-switch{ padding:0 9px; font-size:.72rem; }
}

/* телефон у шапці виходив 41px на десктопі — це окремий контрол, не текстове посилання */
.tel-link{ display:inline-flex; flex-direction:column; justify-content:center; min-height:44px; }

/* ==== 40-hero.css ==== */
/* ==========================================================================
   FIXIKI — герой із проморіликом у рамці телефону
   Ролик вертикальний (720×1280), тому він живе всередині корпусу телефону,
   а не фоном: інакше на десктопі його обріже до смужки.
   ========================================================================== */

.hero{
  position:relative;
  padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 112px);
  overflow:hidden;
}

/* світлова пляма позаду — дає глибину без картинки */
.hero::before{
  content:'';
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(60% 55% at 72% 32%, rgba(200,218,30,.16), transparent 62%),
    radial-gradient(55% 50% at 18% 12%, rgba(46,110,150,.28), transparent 65%);
  pointer-events:none;
}

.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}

.hero-copy h1{
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing:-.02em;
  margin: var(--sp-4) 0 var(--sp-5);
}
.hero-copy h1 em{ font-style:normal; color: var(--accent-lime); }
.hero-copy .lede{ font-size: var(--fs-lede); max-width: 56ch; }

.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-7); }

/* плитка довіри */
.hero-trust{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3);
}
.hero-trust .stat{
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(20,65,95,.7), rgba(14,51,80,.55));
  box-shadow: var(--elev-1);
  border-left: 2px solid var(--accent-lime);
}
.hero-trust .stat b{
  display:block;
  font-family: var(--font-display); font-size: 1.45rem; line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.hero-trust .stat span{ display:block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Рамка телефону
   -------------------------------------------------------------------------- */

.hero-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  perspective: 1400px;
}

.phone{
  position:relative;
  width: min(300px, 78vw);
  aspect-ratio: 9 / 19.2;
  border-radius: var(--radius-xl);
  padding: 10px;
  background:
    linear-gradient(150deg, #3a4a5c 0%, #16222f 22%, #0b1420 52%, #1d2a38 78%, #46586b 100%);
  box-shadow: var(--elev-4), 0 0 0 1px rgba(255,255,255,.08);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

/* лаймове світіння по контуру */
.phone::before{
  content:''; position:absolute; inset:-2px; border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(150deg, var(--accent-lime), transparent 38%, transparent 62%, rgba(46,110,150,.8));
  opacity:.55; filter: blur(7px); z-index:-1;
}

/* екран */
.phone-screen{
  position:relative; height:100%; width:100%;
  border-radius: calc(var(--radius-xl) - 8px);
  overflow:hidden;
  background: #05101c;
  isolation:isolate;
}

/* шар під відео: градієнт + приглушений логотип. Замінює файл-постер —
   у жодному стані не видно порожнього чорного прямокутника. */
.phone-screen::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 45% at 50% 32%, rgba(46,110,150,.35), transparent 70%),
    linear-gradient(180deg, #0b2338, #05101c);
}
.phone-fallback{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-3);
  text-align:center; padding: var(--sp-5);
  transition: opacity var(--dur) var(--ease-out);
}
.phone-fallback img{ width:74px; height:74px; opacity:.9; }
.phone-fallback span{ font-size: var(--fs-xs); color: var(--text-muted); letter-spacing:.04em; }
.phone.is-playing .phone-fallback{ opacity:0; pointer-events:none; }

.phone-video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity var(--dur-slow) var(--ease-out);
  background:transparent;
}
.phone.is-playing .phone-video{ opacity:1; }

/* вирізка під камеру */
.phone-notch{
  position:absolute; z-index:3; top:10px; left:50%; transform:translateX(-50%);
  width:34%; height:20px; border-radius: 0 0 14px 14px;
  background:#05101c;
}
.phone-notch::after{
  content:''; position:absolute; right:22%; top:7px;
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #2e6e96, #071824);
}

/* блік по склу */
.phone-glare{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background: linear-gradient(112deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 76%, rgba(255,255,255,.06) 100%);
  mix-blend-mode: screen;
}

/* кнопка звуку */
.phone-sound{
  position:absolute; z-index:5; right:12px; bottom:12px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border-soft); cursor:pointer;
  background: rgba(7,24,42,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-primary);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.phone-sound:hover{ background: rgba(200,218,30,.16); border-color: var(--border-lime); color: var(--accent-lime); }
.phone-sound:active{ transform: scale(.94); }
.phone-sound .ico{ width:20px; height:20px; }
.phone-sound .ico-on{ display:none; }
.phone-sound[aria-pressed="true"] .ico-on{ display:block; }
.phone-sound[aria-pressed="true"] .ico-off{ display:none; }

/* підпис під телефоном */
.hero-stage-note{
  margin-top: var(--sp-4); text-align:center;
  font-size: var(--fs-xs); color: var(--text-muted);
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ order:-1; }
  .phone{ width: min(258px, 66vw); }
  .hero-trust{ grid-template-columns:1fr; }
  .hero-trust .stat{ display:flex; align-items:baseline; gap: var(--sp-3); }
  .hero-trust .stat b{ font-size:1.2rem; }
  .hero-trust .stat span{ margin-top:0; }
}

@media (prefers-reduced-motion: reduce){
  .phone{ transition:none; }
  .phone-video{ transition:none; }
}

/* ==== 50-components.css ==== */
/* ==========================================================================
   BRAND STRIP (compact chip row, used on brand pages / footer of sections)
   ========================================================================== */
.brand-strip{ display:flex; flex-wrap:wrap; gap:14px; }
.brand-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  background: var(--bg-panel); border:1px solid var(--border-soft);
  font-family: var(--font-display); font-size:.85rem;
  transition: border-color .18s ease, transform .18s ease;
}
.brand-pill:hover{ border-color: var(--border-lime); transform: translateY(-2px); }
.brand-pill.is-active{ border-color: var(--accent-lime); color: var(--accent-lime); }
.brand-pill svg{ width:18px; height:18px; }

/* ==========================================================================
   FEATURE / VALUE CARDS
   ========================================================================== */
.feature-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background: var(--border-soft);
  border:1px solid var(--border-soft); border-radius: var(--radius-m); overflow:hidden;
}
.feature-card{
  background: var(--bg-panel); padding: 30px 26px; position:relative;
}
.feature-card .num{ font-family: var(--font-mono); font-size:.72rem; color: var(--accent-lime); letter-spacing:.1em; }
.feature-card h3{ margin: 14px 0 10px; }
.feature-card p{ color: var(--text-secondary); font-size:.93rem; }
@media (max-width: 900px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PROCESS (genuine sequence -> numbered)
   ========================================================================== */
.process-rail{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; position:relative;
}
.process-rail::before{
  content:""; position:absolute; top:26px; left:6%; right:6%; height:1px;
  background: repeating-linear-gradient(90deg, var(--line-circuit-dim) 0 8px, transparent 8px 16px);
}
.process-step{ position:relative; }
.process-step .step-idx{
  width:52px; height:52px; border-radius:50%;
  background: var(--bg-panel); border:1px solid var(--border-lime);
  color: var(--accent-lime); font-family: var(--font-display); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  position:relative; z-index:1;
}
.process-step h3{ margin-bottom:8px; font-size:1.05rem; }
.process-step p{ color: var(--text-secondary); font-size:.9rem; }
@media (max-width: 860px){
  .process-rail{ grid-template-columns: 1fr 1fr; row-gap:34px; }
  .process-rail::before{ display:none; }
}
@media (max-width: 520px){ .process-rail{ grid-template-columns: 1fr; } }

/* ==========================================================================
   BRAND PRICE CARDS (home page summary)
   ========================================================================== */
.brand-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.brand-card{
  background: linear-gradient(165deg, var(--bg-panel-2), var(--bg-panel) 75%);
  border:1px solid var(--border-soft); border-radius: var(--radius-m);
  padding: 26px 24px; display:flex; flex-direction:column; gap:16px;
  transition: transform .2s ease, border-color .2s ease;
}
.brand-card:hover{ transform: translateY(-4px); border-color: var(--border-lime); }
.brand-card .bc-head{ display:flex; align-items:center; justify-content:space-between; }
.brand-card .bc-ico{ width:38px; height:38px; color: var(--accent-lime); }
.brand-card h3{ font-size:1.15rem; }
.brand-card .bc-models{ display:flex; flex-direction:column; gap:8px; font-size:.86rem; }
.brand-card .bc-models li{ display:flex; justify-content:space-between; gap:10px; color: var(--text-secondary); }
.brand-card .bc-models li b{ color: var(--text-primary); font-weight:600; }
.brand-card .bc-from{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
@media (max-width: 980px){ .brand-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .brand-cards{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PRICE TABLE (brand pages)
   ========================================================================== */
.price-table-wrap{
  border:1px solid var(--border-soft); border-radius: var(--radius-m); overflow: hidden;
  background: var(--bg-panel);
}
table.price-table{ width:100%; border-collapse: collapse; font-size:.92rem; }
table.price-table caption{ text-align:left; padding:18px 22px; color:var(--text-muted); font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border-soft); }
table.price-table th, table.price-table td{ padding: 14px 18px; text-align:left; border-bottom:1px solid var(--border-soft); }
table.price-table th{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--text-muted); font-weight:500; background: var(--bg-panel-2);
}
table.price-table tbody tr:hover{ background: rgba(215,255,61,.04); }
table.price-table tbody tr:last-child td{ border-bottom:none; }
table.price-table td.model{ font-family: var(--font-display); font-weight:600; color:var(--text-primary); }
table.price-table td.price{ font-family: var(--font-mono); color: var(--accent-lime); white-space:nowrap; }
.price-table-wrap{ overflow-x:auto; }
.price-note{ margin-top:16px; color: var(--text-muted); font-size:.84rem; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width: 820px; }
.faq-item{ border:1px solid var(--border-soft); border-radius: var(--radius-s); background: var(--bg-panel); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding: 18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family: var(--font-display); font-size:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color: var(--accent-lime); transition: transform .2s ease; flex:none; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-a{ padding: 0 22px 20px; color: var(--text-secondary); font-size:.94rem; max-width: 70ch; }

/* ==========================================================================
   CONTACT / MAP
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
.contact-card{ background: var(--bg-panel); border:1px solid var(--border-soft); border-radius: var(--radius-m); padding: 30px; }
.contact-list{ display:flex; flex-direction:column; gap:18px; margin-top:20px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-list .ico{ width:20px; height:20px; color: var(--accent-lime); flex:none; margin-top:2px; }
.contact-list b{ display:block; font-family: var(--font-display); font-size:.95rem; }
.contact-list span{ color: var(--text-secondary); font-size:.88rem; }
/* телефон/пошта в контактах — повноцінний тач-таргет */
.contact-list a[href^="tel:"], .contact-list a[href^="mailto:"]{ display:inline-flex; align-items:center; min-height:44px; }
.map-frame{ border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--border-soft); min-height:340px; background:var(--bg-panel-2); }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; filter: grayscale(.3) invert(.92) contrast(.9); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; font-family: var(--font-mono); font-size:.76rem; color: var(--text-muted); margin-bottom: 20px; }
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb a:hover{ color: var(--accent-lime); }
.breadcrumb span.sep{ opacity:.5; }
.breadcrumb span.here{ color: var(--text-secondary); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--border-soft); padding: 56px 0 30px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--text-muted); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; }
.footer-col a, .footer-col p{ color: var(--text-secondary); font-size:.9rem; }
/* посилання у футері — тач-таргет 44px без зміни візуального ритму */
.footer-col li a{ display:flex; align-items:center; min-height:44px; }
.footer-col a:hover{ color: var(--accent-lime); }
.footer-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color: var(--text-muted); font-size:.8rem; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================

/* ==========================================================================
   ГЛИБИНА — перекриває пласкі рамки наявних карток
   Замість "1px рамка + пласка заливка" усюди: градієнтний край,
   світлий внутрішній верх і тришарова тінь із токенів висот.
   ========================================================================== */

.feature-card,
.brand-card,
.contact-card,
.faq-item,
.price-table-wrap,
.sidebar-box,
.map-frame{
  border:1px solid transparent;
  background:
    linear-gradient(180deg, var(--bg-panel), color-mix(in srgb, var(--bg-panel) 82%, var(--bg-deep))) padding-box,
    linear-gradient(160deg, rgba(200,218,30,.30), rgba(179,198,216,.10) 40%, rgba(179,198,216,.03)) border-box;
  box-shadow: var(--elev-2);
}

.feature-card,
.brand-card{
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
@media (hover: hover){
  .feature-card:hover,
  .brand-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
  }
}

.brand-pill{
  box-shadow: var(--elev-1);
}

/* цифри в цінах і термінах не мають стрибати */
.readout,
.price-table td,
.feature-card .num,
.brand-card .from{
  font-variant-numeric: tabular-nums;
}

/* поява на скролі */
[data-reveal]{
  opacity:0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ціна, якої ще немає — не число, тож і виглядати має інакше */
.price-table td.price--ask{
  color: var(--text-muted);
  font-style: italic;
  font-variant-numeric: normal;
}

/* швидка відповідь — блок, який AI-системи витягують окремо від сторінки */
.quick-answer{
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-s);
  border-left: 3px solid var(--accent-lime);
  background: rgba(14,51,80,.55);
  box-shadow: var(--elev-1);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 78ch;
}
.quick-answer strong{ color: var(--accent-lime); }

/* назва бренду у футері пишеться як у картці Google — FiXiKi,
   решта заголовків колонок лишається великими літерами */
.footer-col h4.is-brand{ text-transform: none; letter-spacing: .02em; }

/* плитки брендів виходили 43.75px — на чверть пікселя менші за мінімум 44 */
.brand-pill{ min-height: 44px; }

/* ==== 60-sections.css ==== */
/* ==========================================================================
   FIXIKI — нові секції головної
   ========================================================================== */

/* --- смуга довіри ---------------------------------------------------- */
.trust-bar{
  border-block: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(14,51,80,.55), rgba(7,24,42,.2));
}
.trust-bar .container{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--sp-5);
  padding-block: var(--sp-6);
}
.trust-item{ display:flex; align-items:center; gap: var(--sp-4); }
.trust-item .ico{ width:30px; height:30px; color: var(--accent-lime); flex:none; }
.trust-item b{
  display:block; font-family: var(--font-display); font-size:1.32rem; line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.trust-item span{ display:block; font-size: var(--fs-xs); color: var(--text-muted); }

/* --- що ремонтуємо ---------------------------------------------------- */
.fix-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5);
}
.fix-card{
  position:relative; padding: var(--sp-6);
  border-radius: var(--radius-m);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, var(--bg-panel), color-mix(in srgb, var(--bg-panel) 80%, var(--bg-deep))) padding-box,
    linear-gradient(160deg, rgba(200,218,30,.30), rgba(179,198,216,.10) 42%, rgba(179,198,216,.03)) border-box;
  box-shadow: var(--elev-2);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  overflow:hidden;
}
.fix-card::after{
  content:''; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px;
  background: radial-gradient(circle, var(--accent-lime-glow), transparent 68%);
  opacity:0; transition: opacity var(--dur) var(--ease-out); pointer-events:none;
}
@media (hover: hover){
  .fix-card:hover{ transform: translateY(-5px); box-shadow: var(--elev-3); }
  .fix-card:hover::after{ opacity:.5; }
}
.fix-card .ico{
  width:38px; height:38px; color: var(--accent-lime);
  margin-bottom: var(--sp-4);
}
.fix-card h3{ font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.fix-card p{ color: var(--text-secondary); font-size: var(--fs-sm); }
.fix-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top:1px solid var(--border-soft);
}
.fix-time{
  display:inline-flex; align-items:center; gap:.4em;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.fix-time .ico{ width:15px; height:15px; margin:0; color: var(--text-muted); }

/* --- оригінал чи аналог ------------------------------------------------ */
.parts-compare{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5);
}
.parts-col{
  padding: var(--sp-6);
  border-radius: var(--radius-m);
  box-shadow: var(--elev-2);
  border:1px solid transparent;
}
.parts-col--analog{
  background:
    linear-gradient(180deg, var(--bg-panel), color-mix(in srgb, var(--bg-panel) 80%, var(--bg-deep))) padding-box,
    linear-gradient(160deg, rgba(223,180,70,.34), rgba(179,198,216,.06)) border-box;
}
.parts-col--original{
  background:
    linear-gradient(180deg, var(--bg-panel-2), color-mix(in srgb, var(--bg-panel) 82%, var(--bg-deep))) padding-box,
    linear-gradient(160deg, rgba(200,218,30,.42), rgba(179,198,216,.06)) border-box;
}
.parts-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3); flex-wrap:wrap; }
.parts-head h3{ font-size: var(--fs-h3); }
.parts-col ul{ margin-top: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3); }
.parts-col li{
  display:flex; gap: var(--sp-3); align-items:flex-start;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.parts-col li .ico{ width:18px; height:18px; flex:none; margin-top:3px; }
.parts-col--analog li .ico{ color: var(--accent-amber); }
.parts-col--original li .ico{ color: var(--accent-lime); }
.parts-note{
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-s);
  background: rgba(7,24,42,.55);
  font-size: var(--fs-sm); color: var(--text-secondary);
  border-left: 2px solid var(--accent-lime);
}

@media (max-width: 1000px){
  .fix-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trust-bar .container{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .fix-grid{ grid-template-columns:1fr; }
  .parts-compare{ grid-template-columns:1fr; }
  .trust-bar .container{ grid-template-columns:1fr; gap: var(--sp-4); }
}

/* --- процес: шкала з прогресом ------------------------------------------ */
.process-rail{ --progress: 0; }
/* заповнена частина лінії росте за кількістю пройдених кроків */
.process-rail::after{
  content:''; position:absolute; top:26px; left:6%; height:2px;
  width: calc((100% - 12%) * var(--progress));
  background: linear-gradient(90deg, var(--accent-lime-dim), var(--accent-lime));
  box-shadow: 0 0 12px var(--accent-lime-glow);
  transition: width .5s var(--ease-out);
  pointer-events:none;
}
.process-step .step-idx{
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.process-step .step-ico{
  width:22px; height:22px; position:absolute; opacity:0;
  transition: opacity var(--dur) var(--ease-out);
}
.process-step .step-num{ transition: opacity var(--dur) var(--ease-out); }
.process-step.is-done .step-idx{
  background: var(--accent-lime); border-color: var(--accent-lime);
  color: var(--bg-deep); transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(200,218,30,.10), var(--elev-2);
}
.process-step.is-done .step-ico{ opacity:1; }
.process-step.is-done .step-num{ opacity:0; }

@media (max-width: 860px){ .process-rail::after{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .process-rail::after{ transition:none; }
  .process-step .step-idx, .process-step .step-ico, .process-step .step-num{ transition:none; }
}

/* --- фінальна CTA -------------------------------------------------------- */
.final-cta{ padding: clamp(48px,7vw,96px) 0; }
.final-cta-panel{
  position:relative; overflow:hidden;
  border-radius: var(--radius-l);
  padding: clamp(32px,5vw,64px);
  border:1px solid transparent;
  background:
    linear-gradient(150deg, var(--bg-panel-2), var(--bg-panel) 55%, var(--bg-deep)) padding-box,
    linear-gradient(150deg, rgba(200,218,30,.55), rgba(179,198,216,.10) 45%, rgba(46,110,150,.35)) border-box;
  box-shadow: var(--elev-3);
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px,4vw,56px); align-items:center;
}
.final-cta-panel::before{
  content:''; position:absolute; inset:auto -12% -70% auto; width:520px; height:520px;
  background: radial-gradient(circle, var(--accent-lime-glow), transparent 66%);
  opacity:.5; pointer-events:none;
}
.final-cta h2{ font-size: var(--fs-h2); line-height:1.08; }
.final-cta .lede{ margin-top: var(--sp-4); }
.final-cta-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.final-cta-side{ position:relative; z-index:1; display:flex; flex-direction:column; gap: var(--sp-4); }
.final-cta-side .line{ display:flex; align-items:flex-start; gap: var(--sp-3); }
.final-cta-side .ico{ width:22px; height:22px; color: var(--accent-lime); flex:none; margin-top:3px; }
.final-cta-side b{ display:block; font-family: var(--font-display); font-size:1.02rem; }
.final-cta-side span{ display:block; color: var(--text-secondary); font-size: var(--fs-sm); }
.final-cta-phone{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); font-weight:700;
  color: var(--accent-lime); letter-spacing:.02em;
  display:inline-flex; align-items:center; min-height:44px;
}
.final-cta-phone:hover{ text-decoration:underline; }

@media (max-width: 860px){
  .final-cta-panel{ grid-template-columns:1fr; }
}

/* --- SEO-текст унизу ----------------------------------------------------- */
.seo-outro{ border-top:1px solid var(--border-soft); }
.seo-outro h2{ font-size: var(--fs-h3); color: var(--text-secondary); }
.seo-outro .lede{ font-size: var(--fs-sm); color: var(--text-muted); max-width: 92ch; }

/* --- блог -------------------------------------------------------------- */
.post-body h2{ font-size: var(--fs-h3); margin-top: var(--sp-7); }
.post-body h3{ font-size: 1.05rem; margin-top: var(--sp-5); color: var(--text-secondary); }
.post-body p{ color: var(--text-secondary); max-width: 72ch; margin-top: var(--sp-3); }
.post-body a{ color: var(--accent-lime); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover{ color: var(--text-primary); }
.post-list{ margin-top: var(--sp-3); display:flex; flex-direction:column; gap: var(--sp-2); max-width: 72ch; }
.post-list li{
  position:relative; padding-left: var(--sp-5);
  color: var(--text-secondary); font-size: var(--fs-sm);
}
.post-list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background: var(--accent-lime);
}
.post-body .price-table-wrap{ margin-top: var(--sp-5); }
.post-body .parts-note{ margin-top: var(--sp-4); }
/* картки в списку блогу — заголовок посилання, не сама картка */
.fix-card h3 a{ color: inherit; }
.fix-card h3 a:hover{ color: var(--accent-lime); }

/* ==== 70-page-brand.css ==== */
PAGE HERO (brand pages — smaller, single column)
   ========================================================================== */
.page-hero{ padding: clamp(40px,7vw,72px) 0 clamp(30px,5vw,50px); }
.page-hero .kicker{ margin-bottom:16px; }
.page-hero h1{ margin-bottom:16px; max-width: 18ch; }
.page-hero .lede{ margin-bottom: 24px; }

.two-col{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items:start; }
@media (max-width: 900px){ .two-col{ grid-template-columns:1fr; } }

.sidebar-box{ background: var(--bg-panel); border:1px solid var(--border-soft); border-radius: var(--radius-m); padding:26px; position:sticky; top:96px; }
.sidebar-box h3{ font-size:1rem; margin-bottom:14px; }
.sidebar-box .contact-list{ margin-top:0; }

.related-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.related-list a{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border:1px solid var(--border-soft); border-radius:10px; font-size:.88rem; }
.related-list a:hover{ border-color: var(--border-lime); color: var(--accent-lime); }

/* util */
.mt-0{margin-top:0;} .stack{ display:flex; flex-direction:column; gap:22px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em; padding:6px 12px; border-radius:999px; border:1px solid var(--border-soft); color: var(--text-muted); }

/* mobile nav */
@media (max-width: 1140px){
  .main-nav{
    position:fixed; inset: 76px 0 0 0; z-index: 90; background: #050b18;
    flex-direction:column; align-items:flex-start; padding: 30px var(--gutter);
    gap: 22px; transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.is-open{ opacity:1; pointer-events:auto; transform:none; }
  .main-nav a{ font-size:1.1rem; display:flex; align-items:center; min-height:44px; padding:0; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .header-cta .tel-link .lbl{ display:none; }
  .brand-mark .sub{ display:none; }
  .brand-logo{ width:40px; height:40px; }
  .tel-link{ font-size:.82rem; }
}

@media (max-width: 380px){
  .header-cta .tel-link{ display:none; }
}

/* section heading row */
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 40px; }
.section-head .lede{ margin-top:12px; }

/* Колонки гріда мають min-width:auto, тому широка таблиця цін не давала
   колонці стиснутись і розпирала сторінку. Дозволяємо стискатись —
   горизонтальний скрол лишається всередині .price-table-wrap, де йому й місце. */
.two-col > *{ min-width: 0; }

/* хлібні крихти: тап-зона 44px без зміни висоти рядка */
.breadcrumb{ align-items: center; margin-bottom: 8px; }
.breadcrumb a{ display: inline-flex; align-items: center; min-height: 44px; }