/* ============================================================
   Big Tweak — computer & laptop repair, Prague
   Theme: cyberpunk — acid yellow / cyan / magenta glitch,
   chamfered corners, scanlines, HUD-style labels,
   animated exploded-view motherboard.
   Type: Tektur (display) / Onest (body) / JetBrains Mono (utility)
   ============================================================ */

:root{
  --bg:      #0A0A0E;
  --bg-2:    #101016;
  --panel:   rgba(255,255,255,0.035);
  --rim:     rgba(148,155,175,0.28);
  --ink:     #EDEDE6;
  --muted:   #8E93A0;
  --yellow:  #D9A441;
  --cyan:    #00E5FF;
  --mag:     #FF2A6D;
  --line:    rgba(148,155,175,0.14);
  --chamfer: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --chamfer-btn: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --font-d:  "Tektur", system-ui, sans-serif;
  --font-b:  "Onest", system-ui, sans-serif;
  --font-m:  "JetBrains Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; }
body{
  font-family:var(--font-b);
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
/* hazard stripe on the very top */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:repeating-linear-gradient(45deg, var(--yellow) 0 12px, #0A0A0E 12px 24px);
  pointer-events:none;
}
/* scanlines */
body::after{
  content:""; position:fixed; inset:0; z-index:199;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
  opacity:0.4;
  pointer-events:none;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--yellow); color:#0A0A0E; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

.container{ max-width:1140px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-d); line-height:1.15; }
h1{
  font-size:clamp(1.75rem, 3.9vw, 2.75rem); font-weight:900;
  letter-spacing:0.01em; text-transform:uppercase;
}
h2{
  font-size:clamp(1.3rem, 2.6vw, 1.8rem); font-weight:700;
  margin-bottom:38px; text-transform:uppercase; letter-spacing:0.02em;
}
h3{ font-size:1.12rem; font-weight:700; }

.grad{
  color:var(--yellow);
  text-shadow:0 0 26px rgba(217,164,65,0.4);
}

.eyebrow{
  font-family:var(--font-m); font-size:0.8rem; font-weight:500;
  color:var(--yellow); letter-spacing:0.08em;
  margin-bottom:14px; text-transform:uppercase;
  text-shadow:0 0 16px rgba(217,164,65,0.45);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,14,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,164,65,0.18);
}
.header-in{
  display:flex; align-items:center; gap:28px;
  height:64px;
}
.brand{
  display:flex; align-items:center; line-height:0;
}
.brand img{ width:52px; height:auto; }
.main-nav{ display:flex; gap:20px; margin-right:auto; }
.main-nav a{
  text-decoration:none; font-family:var(--font-m);
  font-weight:500; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.09em;
  color:var(--muted); padding:4px 0;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.main-nav a:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }

/* ---------- nav dropdown (категории прайса) ---------- */
.nav-drop{ position:relative; }
.nav-drop > a::after{ content:"▾"; margin-left:6px; font-size:0.72em; opacity:0.7; }
.nav-menu{
  position:absolute; top:calc(100% + 18px); left:-16px; z-index:150;
  min-width:250px;
  background:#101016;
  border:1px solid var(--rim);
  clip-path:var(--chamfer);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  transition-delay:.16s;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,0.65));
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu{
  opacity:1; visibility:visible; transform:none;
  transition-delay:0s;
}
.main-nav .nav-menu a{
  display:block; padding:10px 14px;
  font-family:var(--font-b); font-size:0.9rem;
  text-transform:none; letter-spacing:0;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.main-nav .nav-menu a:last-child{ border-bottom:none; }
.main-nav .nav-menu a:hover{
  background:rgba(217,164,65,0.08); color:var(--yellow);
  border-bottom-color:var(--line);
}

.header-tools{ display:flex; align-items:center; gap:16px; }
.lang-switch{ display:flex; gap:2px; }
.lang-switch a{
  font-family:var(--font-m); font-size:0.72rem; font-weight:500;
  background:none; border:1px solid transparent;
  color:var(--muted); padding:4px 6px; cursor:pointer;
  text-decoration:none;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.lang-switch a:hover{ color:var(--ink); }
.lang-switch a.active{
  color:#0A0A0E; border-color:var(--yellow);
  background:var(--yellow);
  box-shadow:0 0 14px rgba(217,164,65,0.4);
}
.header-phone{
  font-family:var(--font-m); font-size:0.85rem; font-weight:700;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.header-phone:hover{ color:var(--cyan); }
.burger{ display:none; }

/* ---------- booking dropdown ---------- */
.bk-drop{ position:relative; z-index:90; }
.bk-toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-m); font-size:0.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  padding:9px 14px; border:none; cursor:pointer;
  background:var(--yellow); color:#0A0A0E;
  clip-path:var(--chamfer-btn);
  animation:bk-glow 2.4s ease-in-out infinite;
  transition:background .18s;
}
.bk-toggle:hover{ background:#F0BD5B; }
@keyframes bk-glow{
  0%, 100%{ filter:drop-shadow(0 0 6px rgba(217,164,65,0.45)); }
  50%{ filter:drop-shadow(0 0 16px rgba(217,164,65,0.85)); }
}
.bk-chev{ width:13px; height:13px; transition:transform .2s; }
.bk-drop:hover .bk-chev,
.bk-drop:focus-within .bk-chev,
.bk-drop.open .bk-chev{ transform:rotate(180deg); }
.bk-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:150;
  min-width:280px;
  background:#101016;
  border:1px solid var(--rim);
  clip-path:var(--chamfer);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  transition-delay:.16s;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,0.65));
}
.bk-drop:hover .bk-menu,
.bk-drop:focus-within .bk-menu,
.bk-drop.open .bk-menu{
  opacity:1; visibility:visible; transform:none;
  transition-delay:0s;
}
.bk-menu-left{ left:0; right:auto; }
button.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:none; cursor:pointer;
  font-family:var(--font-d);
}
button.btn .bk-chev{ width:15px; height:15px; }
.bk-menu a{
  display:block; padding:11px 14px;
  font-size:0.9rem; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background .15s, color .15s;
}
.bk-menu a:last-child{ border-bottom:none; }
.bk-menu a:hover{ background:rgba(217,164,65,0.08); color:var(--yellow); }

/* ---------- hero ---------- */
.hero{
  position:relative; padding:84px 0 96px;
}
.hero::before{ /* tech grid */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,155,175,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,155,175,0.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(75% 90% at 50% 10%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 90% at 50% 10%, #000 30%, transparent 100%);
  pointer-events:none;
}
.hero::after{ /* ambient glows */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(560px 400px at 10% -5%, rgba(217,164,65,0.10), transparent 65%),
    radial-gradient(700px 520px at 88% 30%, rgba(0,229,255,0.10), transparent 65%),
    radial-gradient(420px 320px at 35% 110%, rgba(255,42,109,0.08), transparent 65%);
  pointer-events:none;
}
.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:56px; align-items:center;
}

/* glitch headline */
.hero h1{ position:relative; z-index:0; }
.hero h1::before,
.hero h1::after{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1;
  clip-path:inset(100% 0 0 0);
}
.hero h1::before{
  color:var(--cyan);
  transform:translate(-3px, -1px);
  animation:glitch-a 4.5s infinite steps(1);
}
.hero h1::after{
  color:var(--mag);
  transform:translate(3px, 1px);
  animation:glitch-b 3.9s infinite steps(1);
}
@keyframes glitch-a{
  0%, 100%   { clip-path:inset(100% 0 0 0); }
  6%         { clip-path:inset(8% 0 76% 0); }
  7%         { clip-path:inset(58% 0 24% 0); }
  8%         { clip-path:inset(100% 0 0 0); }
  56%        { clip-path:inset(32% 0 52% 0); }
  57.5%      { clip-path:inset(100% 0 0 0); }
}
@keyframes glitch-b{
  0%, 100%   { clip-path:inset(100% 0 0 0); }
  11%        { clip-path:inset(64% 0 18% 0); }
  12%        { clip-path:inset(18% 0 68% 0); }
  13%        { clip-path:inset(100% 0 0 0); }
  67%        { clip-path:inset(4% 0 86% 0); }
  68.5%      { clip-path:inset(100% 0 0 0); }
}

.hero-sub{
  font-size:1.06rem; color:var(--muted);
  margin:18px 0 30px; max-width:32em;
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--font-d); font-weight:700; font-size:0.95rem;
  text-transform:uppercase; letter-spacing:0.05em;
  padding:13px 26px;
  clip-path:var(--chamfer-btn);
  transition:transform .18s, box-shadow .18s, filter .18s, color .18s;
}
.btn-solid{
  background:var(--yellow); color:#0A0A0E;
  box-shadow:0 0 26px rgba(217,164,65,0.35);
}
.btn-solid:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(217,164,65,0.55);
}
.btn-line{
  position:relative; z-index:0;
  font-family:var(--font-m); font-weight:700;
  background:var(--cyan); color:var(--cyan);
}
.btn-line::before{
  content:""; position:absolute; inset:1.5px; z-index:-1;
  background:var(--bg);
  clip-path:var(--chamfer-btn);
}
.btn-line:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(0,229,255,0.35);
  color:#fff;
}

.chips{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:10px 22px; margin-top:32px;
}
.chips li{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-m); font-size:0.78rem; color:var(--muted);
}
.led{
  width:8px; height:8px; flex:none;
  background:var(--line);
}
.led-on{
  background:var(--cyan);
  box-shadow:0 0 10px rgba(0,229,255,0.8);
  animation:ledpulse 3.5s ease-in-out infinite;
}
@keyframes ledpulse{ 50%{ box-shadow:0 0 3px rgba(0,229,255,0.4); } }

/* ---------- animated motherboard (signature) ---------- */
.board-wrap{ display:flex; justify-content:center; }
.board{
  width:100%; max-width:520px; height:auto;
  filter:drop-shadow(0 20px 50px rgba(217,164,65,0.06));
}
.pcb{
  fill:rgba(255,255,255,0.02);
  stroke:rgba(148,155,175,0.25); stroke-width:1.5;
}
.hole{ fill:none; stroke:rgba(148,155,175,0.28); stroke-width:1.5; }
.traces path{
  fill:none; stroke:#26262F; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
}
/* all traces start at the CPU, so an increasing dash offset
   sends the light pulses inward — energy flows to the chip */
.pu{
  fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26 1200;
  stroke-dashoffset:0;
  animation-name:pulse-run;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.c1{ stroke:var(--yellow); }
.c2{ stroke:var(--cyan); }
.c3{ stroke:var(--mag); }
@keyframes pulse-run{ to{ stroke-dashoffset:1226; } }
.pads circle{ fill:#3A3A48; }
.smd rect, .smd circle{ fill:#16161E; stroke:#26262F; stroke-width:1; }
.leaders path{
  fill:none; stroke:rgba(217,164,65,0.3); stroke-width:1.5;
  stroke-dasharray:4 7; stroke-linecap:round;
}
.chip-glow{
  fill:url(#neon); opacity:0.28;
  filter:blur(16px);
  animation:breathe 6s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ opacity:0.18; } to{ opacity:0.4; } }
.chip{
  fill:#101016; stroke:url(#neon); stroke-width:1.6;
}
.chip-txt{
  font-family:var(--font-m); font-size:19px; font-weight:700;
  fill:url(#neon); text-anchor:middle; letter-spacing:3px;
}
.chip-sheen{
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{
  0%      { transform:translateX(0); }
  55%,100%{ transform:translateX(200px); }
}
/* the chip logo breathes: soft scale pulse in sync with its glow */
.chip-core{
  transform-box:fill-box; transform-origin:center;
  animation:chip-pulse 3.5s ease-in-out infinite;
}
@keyframes chip-pulse{
  50%{ transform:scale(1.045); }
}
.fan-frame{
  fill:rgba(255,255,255,0.025);
  stroke:rgba(148,155,175,0.3); stroke-width:1.5;
}
.screw{ fill:#26262F; }
/* fan rotation runs on SMIL inside the SVG — no CSS transform here,
   it would override the SMIL animateTransform */
.fan-ring{
  fill:none; stroke:rgba(217,164,65,0.25); stroke-width:1.5;
  stroke-dasharray:3 7;
}
.fan-blades path{
  fill:rgba(0,229,255,0.14);
  stroke:rgba(0,229,255,0.65); stroke-width:1.4;
  stroke-linejoin:round;
}
.fan-hub{ fill:#101016; stroke:url(#neon); stroke-width:1.5; }
.fan-dot{ fill:url(#neon); }
.ram-body{
  fill:rgba(255,255,255,0.03);
  stroke:rgba(148,155,175,0.3); stroke-width:1.5;
}
.ram-chip{ fill:#16161E; stroke:#26262F; stroke-width:1; }
.ram-pads rect{
  fill:#4A4A5C;
  animation:pad-blink 2.5s linear infinite;
}
.ram-pads rect:nth-child(2){ animation-delay:.3s; }
.ram-pads rect:nth-child(3){ animation-delay:.6s; }
.ram-pads rect:nth-child(4){ animation-delay:.9s; }
.ram-pads rect:nth-child(5){ animation-delay:1.2s; }
.ram-pads rect:nth-child(6){ animation-delay:1.5s; }
.ram-pads rect:nth-child(7){ animation-delay:1.8s; }
.ram-pads rect:nth-child(8){ animation-delay:2.1s; }
@keyframes pad-blink{
  0%, 20%, 100%{ fill:#4A4A5C; }
  8%{ fill:var(--cyan); }
}
.ticker-bg{ fill:rgba(255,255,255,0.03); stroke:rgba(148,155,175,0.2); stroke-width:1; }
.ticker{ animation:ticker-run 12s linear infinite; }
.ticker-txt{
  font-family:var(--font-m); font-size:11px;
  fill:rgba(217,164,65,0.8); letter-spacing:0.5px;
}
@keyframes ticker-run{ to{ transform:translateX(-390px); } }

/* ---------- sections ---------- */
.section{ position:relative; padding:88px 0; }
section[id]{ scroll-margin-top:72px; }
.price-cat{ scroll-margin-top:84px; }
.section-white{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-hint{
  margin-top:34px; color:var(--muted);
  font-size:0.95rem;
}

/* ---------- why band ---------- */
.why{ padding:56px 0 72px; }
.why h2{ margin-bottom:30px; }
.why-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:26px 32px;
}
.why-item{
  border-left:2px solid rgba(217,164,65,0.45);
  padding-left:16px;
}
.why-item h3{
  font-size:0.9rem; text-transform:uppercase;
  letter-spacing:0.04em; margin-bottom:6px;
}
.why-item p{ font-size:0.9rem; color:var(--muted); }

/* ---------- service cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.card{
  --acc:var(--yellow);
  position:relative; z-index:0;
  background:var(--rim);
  clip-path:var(--chamfer);
  padding:26px 24px 22px;
  transition:transform .22s, filter .22s;
}
.card::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  background:linear-gradient(160deg, #14141C, #0D0D13);
  clip-path:var(--chamfer);
}
.card:nth-child(3n+2){ --acc:var(--cyan); }
.card:nth-child(3n){ --acc:var(--mag); }
.card:hover{
  transform:translateY(-5px);
  background:var(--acc);
  filter:drop-shadow(0 14px 30px rgba(0,0,0,0.5));
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-ico{
  width:38px; height:38px; color:var(--acc);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--acc) 60%, transparent));
}
.card-tag{
  font-family:var(--font-m); font-size:0.7rem; font-weight:500;
  color:var(--muted); border:1px solid var(--line);
  padding:3px 7px;
  transition:color .2s, border-color .2s;
}
.card:hover .card-tag{ color:var(--acc); border-color:color-mix(in srgb, var(--acc) 55%, transparent); }
.card h3{ margin-bottom:14px; text-transform:uppercase; font-size:1.02rem; letter-spacing:0.02em; }
.card-list{ list-style:none; }
.card-list li{
  position:relative; padding:5px 0 5px 20px;
  font-size:0.93rem; color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.card-list li:last-child{ border-bottom:none; }
.card-list li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:7px; height:7px;
  background:rgba(148,155,175,0.25); transition:background .2s, box-shadow .2s;
}
.card:hover .card-list li::before{
  background:var(--acc);
  box-shadow:0 0 8px color-mix(in srgb, var(--acc) 70%, transparent);
}

/* ---------- process steps ---------- */
.steps{
  list-style:none; display:grid;
  grid-template-columns:repeat(4, 1fr); gap:22px;
}
.step{
  position:relative; padding-top:18px;
}
.step::before{
  content:""; position:absolute; top:0; left:0; right:0;
  border-top:2px dashed rgba(217,164,65,0.25);
}
.step-num{
  font-family:var(--font-d); font-size:1.5rem; font-weight:900;
  color:var(--yellow);
  text-shadow:3px 2px 0 rgba(255,42,109,0.55);
  display:inline-block; position:relative; top:-34px; margin-bottom:-22px;
  padding-right:12px;
  background-color:var(--bg);
}
.step h3{ margin-bottom:8px; font-size:1rem; text-transform:uppercase; }
.step p{ font-size:0.92rem; color:var(--muted); }

/* ---------- price categories (masonry: без дыр от карточек разной высоты) ---------- */
.price-cats{
  columns:2; column-gap:22px;
}
.price-cat{
  break-inside:avoid;
  margin-bottom:22px;
}
.price-cat{
  --acc:var(--yellow);
  position:relative; z-index:0;
  background:var(--rim);
  clip-path:var(--chamfer);
  padding:28px 30px 22px;
}
.price-cat::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  background:linear-gradient(160deg, #14141C, #0D0D13);
  clip-path:var(--chamfer);
}
.price-cat:nth-child(3n+2){ --acc:var(--cyan); }
.price-cat:nth-child(3n){ --acc:var(--mag); }
.price-cat-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:10px;
}
.price-cat-head h3{
  font-size:1.02rem; text-transform:uppercase; letter-spacing:0.02em;
}
.price-cat-head .card-tag{ flex-shrink:0; margin-top:2px; color:var(--acc); border-color:color-mix(in srgb, var(--acc) 45%, transparent); }
.price-cat-desc{
  color:var(--muted); font-size:0.92rem;
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.price-row{
  display:flex; align-items:baseline; gap:12px;
  padding:10px 0;
}
.price-name{ font-size:0.95rem; color:var(--ink); }
.price-lead{
  flex:1; border-bottom:2px dotted rgba(148,155,175,0.3);
  transform:translateY(-4px); min-width:24px;
}
.price-val{
  font-family:var(--font-m); font-size:0.9rem; font-weight:700;
  color:var(--yellow); white-space:nowrap;
  text-shadow:0 0 14px rgba(217,164,65,0.35);
}
.price-notes{ margin-top:26px; display:flex; flex-direction:column; gap:8px; }
.price-diag{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-m); font-size:0.82rem; color:var(--ink); font-weight:500;
}
.price-note{ color:var(--muted); font-size:0.92rem; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:44px;
  align-items:start;
}
.contact-info{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
.c-block p{ font-size:0.98rem; }
.c-block a{ color:var(--ink); font-weight:600; text-decoration-color:var(--cyan); }
.c-block a:hover{ color:var(--cyan); }
.c-label{
  display:block; font-family:var(--font-m); font-size:0.72rem;
  color:var(--yellow); letter-spacing:0.09em; text-transform:uppercase;
  margin-bottom:6px;
}
.c-dim{ color:var(--muted); font-size:0.9rem; }
.c-actions{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.c-note{ grid-column:1 / -1; color:var(--muted); font-size:0.88rem; }
.map-wrap{
  clip-path:var(--chamfer);
  overflow:hidden;
  border:1px solid var(--rim);
  min-height:380px;
}
.map-wrap iframe{
  width:100%; height:100%; min-height:380px; border:0; display:block;
  filter:invert(0.92) hue-rotate(200deg) saturate(0.65) brightness(0.9) contrast(0.95);
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  background:#08080C; color:var(--muted);
  padding:42px 0;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:repeating-linear-gradient(45deg, rgba(217,164,65,0.5) 0 12px, transparent 12px 24px);
}
.footer-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.f-brand{
  font-family:var(--font-d); font-weight:900; letter-spacing:0.08em;
  font-size:1.05rem; color:var(--yellow);
  text-shadow:0 0 18px rgba(217,164,65,0.35);
}
.f-tag{ font-size:0.85rem; }
.f-nav{ display:flex; gap:20px; }
.f-nav a{
  color:var(--muted); text-decoration:none;
  font-family:var(--font-m); font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em;
}
.f-nav a:hover{ color:var(--yellow); }
.f-rights{ font-size:0.8rem; font-family:var(--font-m); }

/* ---------- floating call button (слева: справа внизу живёт чат Tawk.to) ---------- */
.fab-call{
  display:none;
  position:fixed; left:18px; bottom:18px; z-index:120;
  width:56px; height:56px;
  clip-path:var(--chamfer-btn);
  background:var(--yellow); color:#0A0A0E;
  align-items:center; justify-content:center;
  box-shadow:0 0 28px rgba(217,164,65,0.5);
}
.fab-call svg{ width:24px; height:24px; }

/* ---------- faq ---------- */
.faq-list{ max-width:840px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:18px 0;
  font-family:var(--font-d); font-weight:700; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-m); font-weight:500; font-size:1.25rem;
  color:var(--yellow); flex-shrink:0;
  transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--yellow); }
.faq-item p{ padding:0 34px 20px 0; color:var(--muted); max-width:70ch; }

/* ---------- blog ---------- */
.blog-hero{
  position:relative;
  padding:72px 0 56px;
}
.blog-hero h1{ margin-bottom:14px; }
.blog-hero .hero-sub{ max-width:640px; }
.posts{ max-width:840px; }
.post{
  padding:40px 0;
  border-top:1px dashed rgba(148,155,175,0.25);
}
.post:first-child{ border-top:none; padding-top:0; }
.post .card-tag{ display:inline-block; margin-bottom:14px; }
.post h2{ margin-bottom:16px; }
.post p{
  color:rgba(237,237,230,0.78);
  margin-bottom:12px; max-width:72ch;
}
.post p:last-child{ margin-bottom:0; }
.post h2 a{
  color:inherit; text-decoration:none;
  transition:color .2s;
}
.post h2 a:hover{ color:var(--yellow); }
.post-more{ margin-top:4px; }
.post-more a{
  font-family:var(--font-m); font-size:0.82rem; font-weight:700;
  color:var(--yellow); text-decoration:none;
  letter-spacing:0.04em;
}
.post-more a:hover{ text-shadow:0 0 14px rgba(217,164,65,0.5); }

/* превью-миниатюра статьи в списке блога: маленькое фото слева от текста */
.post.has-thumb{ display:flex; gap:26px; align-items:flex-start; }
.post-thumb{
  flex:0 0 320px; display:block; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  aspect-ratio:4 / 3;
}
.post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.post-thumb:hover img{ transform:scale(1.05); }
.post-body{ flex:1 1 auto; min-width:0; }
@media (max-width:640px){
  .post.has-thumb{ flex-direction:column; gap:16px; }
  .post-thumb{ flex-basis:auto; width:100%; aspect-ratio:16 / 9; }
}

/* пагинация блога: ← назад / номера / вперёд → */
.pager{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin-top:48px; padding-top:36px;
  border-top:1px dashed rgba(148,155,175,0.25);
  font-family:var(--font-m); font-size:0.85rem;
}
.pager a, .pager span{
  min-width:40px; height:40px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--muted); text-decoration:none;
  transition:color .2s, border-color .2s, background .2s;
}
.pager a:hover{ color:var(--yellow); border-color:color-mix(in srgb, var(--yellow) 55%, transparent); }
.pager .is-current{ color:var(--bg); background:var(--yellow); border-color:var(--yellow); font-weight:700; }
.pager .is-disabled{ opacity:0.35; }
.post-back{ margin-bottom:18px; }
.post-back a{
  font-family:var(--font-m); font-size:0.8rem;
  color:var(--muted); text-decoration:none;
}
.post-back a:hover{ color:var(--yellow); }
.post-full{ max-width:840px; padding:0; border-top:none; }
.post-full .card-tag{ margin-bottom:20px; }
.post-box{
  position:relative; z-index:0;
  background:var(--rim);
  clip-path:var(--chamfer);
  padding:24px 28px;
  margin:26px 0;
  max-width:640px;
}
.post-box::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  background:linear-gradient(160deg, #14141C, #0D0D13);
  clip-path:var(--chamfer);
}
.post-box h2{
  font-size:0.88rem; text-transform:uppercase;
  letter-spacing:0.05em; margin-bottom:12px;
  color:var(--yellow);
}
.post-box ul{ list-style:none; }
.post-box li{
  position:relative; padding:5px 0 5px 20px;
  font-size:0.93rem; color:var(--ink);
}
.post-box li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:7px; height:7px;
  background:var(--yellow);
  box-shadow:0 0 8px rgba(217,164,65,0.6);
}
.blog-cta h2{ margin-bottom:12px; }
.blog-cta > .container > p{ color:var(--muted); margin-bottom:26px; max-width:60ch; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-in{ grid-template-columns:1fr; gap:44px; }
  .board{ max-width:460px; }
  .cards{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; gap:38px 22px; }
  .contact-grid{ grid-template-columns:1fr; }
  .header-phone{ display:none; }
}

@media (max-width: 720px){
  .section{ padding:60px 0; }
  .hero{ padding:52px 0 64px; }
  .cards{ grid-template-columns:1fr; }
  .price-cats{ columns:1; }
  .price-cat{ padding:22px 20px 18px; margin-bottom:18px; }
  .why-grid{ grid-template-columns:1fr; gap:18px; }
  .steps{ grid-template-columns:1fr; }
  .contact-info{ grid-template-columns:1fr; }
  .fab-call{ display:flex; }

  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:4.5px;
    width:40px; height:40px; padding:8px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line); cursor:pointer;
  }
  .burger span{ display:block; height:2px; background:var(--ink); transition:transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .main-nav{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    background:rgba(10,10,14,0.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 24px 16px;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:0.95rem; color:var(--ink); }
  .main-nav a:last-child{ border-bottom:none; }

  /* категории цен в мобильном меню — раскрыты списком */
  .nav-drop > a::after{ content:""; margin:0; }
  .main-nav .nav-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    clip-path:none; border:none; filter:none; background:none;
    min-width:0; padding:0 0 6px 16px; transition:none;
  }
  .main-nav .nav-menu a{
    padding:9px 0; font-size:0.9rem;
    background:none;
  }

  .lang-switch a{ padding:6px 7px; font-size:0.78rem; }
  .header-tools{ gap:10px; }
  .bk-toggle{ padding:8px 10px; font-size:0.66rem; letter-spacing:0.03em; }
  .bk-menu{ min-width:250px; }
  .footer-in{ flex-direction:column; align-items:flex-start; }
}

/* ---------- reduced motion ----------
   The client requires the board animations to always run,
   so only scroll effects are toned down here. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}