/* Fregat.com — дизайн-система (стиль Fregat Service) */
@font-face{
  font-family:'StavokGrotesque';
  src:url('/fonts/StavokGrotesque-Light.otf') format('opentype');
  font-weight:300 700; font-display:swap;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff; --surface:#ffffff; --accent:#6022b4;
  --accent-light:rgba(96,34,180,.05); --accent-mid:rgba(96,34,180,.12);
  --border:rgba(96,34,180,.15); --border-light:rgba(96,34,180,.08);
  --text:#17161a; --text-muted:#6d6d6d;
  --radius:24px; --radius-sm:12px; --ease:cubic-bezier(.25,1,.5,1);
  --header-bg:rgba(255,255,255,.9);
}
:root[data-theme="dark"]{
  color-scheme:dark;--bg:#0e0c12; --surface:#17141d; --accent:#a47be8;
  --accent-light:rgba(164,123,232,.08); --accent-mid:rgba(164,123,232,.16);
  --border:rgba(164,123,232,.22); --border-light:rgba(164,123,232,.12);
  --text:#f3f1f7; --text-muted:#a09bab; --header-bg:rgba(14,12,18,.85);
}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{
  color-scheme:dark;--bg:#0e0c12; --surface:#17141d; --accent:#a47be8;
  --accent-light:rgba(164,123,232,.08); --accent-mid:rgba(164,123,232,.16);
  --border:rgba(164,123,232,.22); --border-light:rgba(164,123,232,.12);
  --text:#f3f1f7; --text-muted:#a09bab; --header-bg:rgba(14,12,18,.85);
}}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'StavokGrotesque','Rubik',sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--accent-mid);border-radius:10px}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* HEADER */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:68px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5vw;background:var(--header-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-light)}
.logo{grid-column:1;justify-self:start}
.nav{grid-column:2;justify-self:center}
.header-actions{grid-column:3;justify-self:end}
.logo{display:flex;align-items:center;gap:12px}
.logo-word{font-size:1.5rem;font-weight:300;letter-spacing:-.03em;color:var(--text);line-height:1;display:block;white-space:nowrap}
.logo{flex-shrink:0}
.header .logo-word .ll{display:inline-block;will-change:transform}
.header .logo-word.wave .ll,.header .logo:hover .logo-word .ll{animation:logoWave .6s var(--ease)}
@keyframes logoWave{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
/* хвиля логотипа керується власним перемикачем спокою (:root[data-motion=off] глушить усе), а не OS prefers-reduced-motion — інакше на мобільних із «зменшенням руху» хвиля не їздила при скролі */
/* контекст-рядок акцій (місто/тип) */
.ak-ctx{margin:-8px 0 26px;color:var(--text-muted);font-size:1rem}
.ak-ctx b{color:var(--accent);font-size:1.15rem}
/* skeleton-завантаження карток */
.skeleton{border:1px solid var(--border-light);border-radius:var(--radius);min-height:280px;
  background:linear-gradient(100deg,var(--accent-light) 30%,var(--accent-mid) 50%,var(--accent-light) 70%);
  background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
.logo-sep{width:1px;height:18px;background:var(--border);flex:none}
.badge:empty{display:none}  /* порожня плашка-бейдж не показується (акції/тарифи без бейджа — чисто) */
.logo-label{font-size:.78rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent);line-height:1;display:block;transform:translateY(1px)}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{position:relative;font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);transition:color .2s}
.nav a:hover{color:var(--accent)}
/* дропдаун у меню (F-сервіс / F-бізнес) */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{background:none;border:none;font-family:inherit;font-size:.78rem;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--text-muted);cursor:pointer;padding:0;transition:color .2s;
  line-height:1;display:inline-flex;align-items:center;gap:4px}
.nav-drop-btn::after{content:'▾';font-size:.7em}
.nav-drop-btn:hover{color:var(--accent)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-8px);margin-top:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px;display:flex;flex-direction:column;
  gap:2px;min-width:160px;opacity:0;pointer-events:none;transition:all .22s var(--ease);
  box-shadow:0 16px 40px rgba(0,0,0,.15);z-index:50}
.nav-drop-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}  /* міст для hover */
.nav-drop:hover .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{padding:10px 14px;border-radius:9px;font-size:.78rem;color:var(--text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:1.5px}
.nav-drop-menu a:hover{background:var(--accent-light);color:var(--accent)}
.nav>a.active{color:var(--accent)}
.nav>a.active::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);border-radius:2px;animation:navund .3s var(--ease) both}
@keyframes navund{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.header-actions{display:flex;align-items:center;gap:1rem}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;font-size:1.1rem;display:grid;place-items:center;transition:all .2s;font-family:inherit}
.icon-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Шестерня налаштувань (мова/тема/спокій) */
.settings{position:relative}
#settingsBtn{color:var(--accent);background:transparent}
#settingsBtn:hover,#settingsBtn.open,.settings:hover #settingsBtn{background:var(--accent-light);color:var(--accent)}
/* Кнопки в меню — нейтральні (як на business): темна іконка, прозорий фон, рамка; тільки шестерня фіолетова */
.settings-pop .icon-btn{background:transparent;color:var(--text);border:1px solid var(--border)}
.settings-pop .icon-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#motionBtn{font-size:1rem}
.settings{z-index:130}
.settings-pop{position:absolute;top:100%;right:0;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;box-shadow:0 16px 44px rgba(0,0,0,.16);border-top:12px solid transparent;background-clip:padding-box;opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity .22s,transform .22s;z-index:1000}
.settings.open .settings-pop,.settings:hover .settings-pop{opacity:1;transform:none;pointer-events:auto}
/* Спокійний режим — ручний reduce-motion */
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.btn-cab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);color:var(--accent);padding:9px 18px;border-radius:50px;
  font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;transition:all .2s}
.btn-cab svg{flex-shrink:0}
.btn-cab:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.mob-cab{display:flex;align-items:center;gap:8px}
/* телефоны — кнопка, что разворачивается */
.phones{position:relative}
.phones-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  background:var(--accent-light);color:var(--accent);padding:9px 16px;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;transition:all .2s}
.phones-toggle:hover{background:var(--accent);color:#fff}
.phones-pop{position:absolute;top:100%;right:0;display:flex;flex-direction:column;gap:2px;border-top:14px solid transparent;background-clip:padding-box;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px;min-width:190px;
  box-shadow:0 16px 40px rgba(0,0,0,.15);opacity:0;transform:translateY(-10px) scale(.96);transform-origin:top right;
  pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:50}
.phones:hover .phones-pop,.phones.open .phones-pop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.phones-pop a{padding:10px 14px;border-radius:9px;font-weight:700;color:var(--accent);font-size:.95rem;white-space:nowrap;transition:background .2s}
.phones-pop a:hover{background:var(--accent-light)}
.phones-pop .ph-mail{font-weight:400;font-size:.85rem;border-top:1px solid var(--border-light);margin-top:4px;padding-top:11px;border-radius:0 0 9px 9px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--border);background:var(--accent-light);
  border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.burger span{width:18px;height:2px;background:var(--accent);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 5vw 8vh;
  position:relative;overflow:hidden;border-bottom:1px solid var(--border-light)}
.hero-bg-circle{position:absolute;top:-20%;right:-10%;width:70vw;height:70vw;border-radius:50%;
  background:radial-gradient(circle,var(--accent-mid) 0%,transparent 70%);pointer-events:none}
/* оптика живёт в полосе: от уровня бейджа (top) до чуть выше кнопок (bottom), ширина ~до левого края кнопок */
.hero-art{position:absolute;right:5vw;top:13%;bottom:38%;width:min(42vw,500px);color:var(--accent);
  pointer-events:none;opacity:.5;animation:fadeUp 1.2s var(--ease) .4s both}
.hero-badge{align-self:flex-start;font-size:.72rem;text-transform:uppercase;letter-spacing:3px;
  padding:10px 22px;border:1px solid var(--accent);border-radius:50px;color:var(--accent);
  margin-bottom:2.2rem;margin-top:84px;animation:fadeUp .8s var(--ease) both}
.hero h1{font-size:clamp(3rem,8.5vw,8rem);font-weight:300;line-height:1.18;text-transform:uppercase;letter-spacing:-1px;
  color:var(--accent);max-width:1000px;animation:fadeUp 1s var(--ease) .1s both}
.hero-sub{display:flex;align-items:flex-end;justify-content:space-between;margin-top:2.6rem;gap:2rem;
  flex-wrap:wrap;animation:fadeUp 1s var(--ease) .25s both}
.hero-desc{font-size:1.05rem;color:var(--text-muted);line-height:1.7;max-width:400px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary,.btn-outline{padding:.9rem 2.2rem;border-radius:40px;cursor:pointer;font-size:.8rem;
  font-family:inherit;text-transform:uppercase;letter-spacing:1.5px;display:inline-flex;align-items:center;
  gap:8px;transition:all .3s var(--ease);border:1px solid transparent}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--border)}
.btn-outline:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero-scroll{margin-top:3rem;display:flex;flex-direction:column;gap:10px;font-size:.7rem;
  text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);opacity:.6}
.hero-scroll-line{width:1px;height:40px;background:var(--accent)}
/* компактный hero для внутренних страниц (акции и т.п.) */
.akcii-hero{min-height:auto;justify-content:center;padding:120px 5vw 50px}
.akcii-hero h1{font-size:clamp(2.4rem,7vw,6rem);white-space:nowrap}
.akcii-hero .hero-sub{flex-wrap:wrap;row-gap:1rem}  /* довгий слоган (напр. «Зручність у деталях») не налазить на опис — опис переходить на новий рядок */
@media(max-width:560px){.akcii-hero h1{white-space:normal}}
.akcii-hero .hero-badge{border:none;padding:0;margin-bottom:1.4rem}  /* рамку прибрано */

/* SECTIONS */
.section{max-width:1200px;margin:0 auto;padding:90px 5vw}
.section-head{margin-bottom:2.5rem}
.section-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:3px;color:var(--accent);
  border-left:2px solid var(--accent);padding-left:10px}
.section-head h2{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:-1px;margin-top:14px;line-height:1}

/* TARIFF CONTROLS */
.tctrl{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%;margin-bottom:2rem}
.seg{display:inline-flex;padding:4px;gap:4px;border:1px solid var(--border);border-radius:50px;background:var(--surface)}
.seg button{border:none;background:none;color:var(--text);font-family:inherit;font-size:.85rem;
  padding:9px 22px;border-radius:50px;cursor:pointer;opacity:.65;text-transform:uppercase;letter-spacing:1px;transition:all .25s}
.seg button.on{background:var(--accent);color:#fff;opacity:1}
.city-sel{font-family:inherit;font-size:.9rem;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:50px;padding:11px 46px 11px 22px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a47be8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center}

/* CARDS — равномерные (одинаковая высота, кнопка прижата вниз) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;align-items:stretch}
.card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius);padding:28px;position:relative;transition:transform .25s,box-shadow .25s;min-height:280px}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px var(--accent-light)}
@keyframes cardTwitch{0%,100%{transform:none}18%{transform:translateY(-3px)}38%{transform:translateY(0)}58%{transform:translateY(-1px)}78%{transform:translateY(0)}}
.card.twitch{animation:cardTwitch .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.card.twitch{animation:none}}
.card.pop{border-color:var(--accent);box-shadow:0 8px 30px var(--accent-mid)}
.card .badge{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:.68rem;
  padding:4px 12px;border-radius:50px;letter-spacing:.05em;text-transform:uppercase}
.card-top{flex:1}
.card .tname{font-size:1rem;opacity:.7}
.card .speed{font-size:3rem;font-weight:700;line-height:1;margin:12px 0 4px;color:var(--text)}
.card .speed span{font-size:.85rem;font-weight:400;opacity:.5;margin-left:4px}
.card .tech{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.card-bot{margin-top:20px}
.card .price{font-size:1.7rem;font-weight:700;color:var(--accent);margin-bottom:16px}
.card .price span{font-size:.8rem;color:var(--text-muted);font-weight:400;margin-left:4px}
.card .pick{width:100%;background:var(--accent-light);border:1px solid var(--border);color:var(--text);
  font-family:inherit;padding:13px;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;
  text-transform:uppercase;letter-spacing:1px;transition:all .25s}
.card .pick:hover{background:var(--accent);color:#fff}
.empty{grid-column:1/-1;text-align:center;color:var(--text-muted);padding:30px}
/* інфо-сторінки + форми */
.info-p{color:var(--text-muted);font-size:.95rem;line-height:1.6;margin-top:6px}
.info-p a{color:var(--accent)}
.req-box{margin-top:28px;background:var(--accent-light);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px}
.req-box h3{margin-bottom:12px;font-size:1.1rem}
.req-box p{margin:6px 0;font-size:.95rem;color:var(--text-muted)}
.req-box b{color:var(--text)}
/* нова картка реквізитів */
.req-card{margin-top:28px;width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.req-head{background:linear-gradient(100deg,var(--accent),#8e5fd0,var(--accent));background-size:200% 100%;
  color:#fff;padding:16px 24px;font-weight:700;letter-spacing:.02em;font-size:1.05rem;animation:reqShine 5s linear infinite}
@keyframes reqShine{to{background-position:200% 0}}
.req-grid{display:flex;flex-direction:column}
.req-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-light);transition:background .2s}
.req-row:hover{background:var(--accent-light)}
.req-row:last-child{border-bottom:none}
.req-row span{color:var(--text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;flex:none}
.req-row b{color:var(--text);text-align:right;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.req-copy{border:1px solid var(--border);background:var(--accent-light);color:var(--accent);font-family:inherit;
  font-size:.72rem;padding:5px 12px;border-radius:50px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.req-copy:hover{background:var(--accent);color:#fff}
@media(max-width:560px){.req-row{flex-direction:column;align-items:flex-start}.req-row b{text-align:left;justify-content:flex-start}}
.pform{max-width:520px;display:flex;flex-direction:column;gap:12px}
.pform-sub{color:var(--text-muted);font-size:.92rem;margin-bottom:4px}
.pform input,.pform textarea{font-family:inherit;font-size:1rem;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:var(--radius-sm);padding:13px 16px;width:100%}
.pform textarea{resize:vertical}
.file-lbl{display:block;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:14px 16px;
  cursor:pointer;color:var(--text-muted);font-size:.92rem;background:var(--accent-light)}
.file-lbl input{display:block;margin-top:8px;font-size:.85rem}
/* кастомний файл-інпут */
.file-field{display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:var(--bg);
  border-radius:var(--radius-sm);padding:10px 12px 10px 16px;margin-bottom:12px}
.file-ico{font-size:1.05rem;flex:none}
.file-text{flex:1;color:var(--text-muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-btn{border:1px solid var(--accent);background:var(--accent-light);color:var(--accent);font-family:inherit;
  font-size:.78rem;padding:8px 18px;border-radius:50px;cursor:pointer;white-space:nowrap;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}
.file-btn:hover{background:var(--accent);color:#fff}
.thanks-box{background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius);padding:30px;max-width:520px}
.thanks-box h3{font-size:1.4rem;margin-bottom:8px}.thanks-box p{color:var(--text-muted)}
.card .info-p+.card-bot,.card .price{margin-top:auto}
.year-hint{grid-column:1/-1;background:var(--accent-light);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 18px;font-size:.9rem;color:var(--text);margin-bottom:4px}
.year-hint b{color:var(--accent)}
/* выделенная (популярная) карточка акции — обычная ширина, подсветка */
.card.featured{background:linear-gradient(135deg,var(--accent-light),transparent);border-color:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--border);background:var(--accent-light);padding:60px 5vw 30px}
.footer-top{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-brand p{color:var(--text-muted);font-size:.9rem;margin:14px 0 18px;max-width:300px}
.footer-logo{height:24px;margin-bottom:4px}
.footer-eco{display:flex;flex-direction:column;gap:8px}
.footer-eco a{font-size:.88rem;color:var(--accent)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--accent-light);
  color:var(--accent);display:grid;place-items:center;transition:all .2s}
.socials a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.stv-feat{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.stv-feat li{font-size:.85rem;color:var(--text-muted);padding-left:18px;position:relative}
.stv-feat li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.ch-chip{font-size:.82rem;color:var(--text);background:var(--accent-light);border:1px solid var(--border-light);
  padding:6px 12px;border-radius:50px}
/* завлекаюча стрічка «що дивитись» */
.watch-line{display:inline-flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700;color:var(--accent);
  background:var(--accent-light);border:1px solid var(--border);padding:8px 18px;border-radius:50px;
  margin-bottom:14px;transition:opacity .25s;min-height:24px}
/* баннер приставки */
.box-banner{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--accent-mid),var(--accent-light));border:1px solid var(--accent);
  border-radius:var(--radius);padding:24px 30px}
.box-banner-info .tname{font-size:1.2rem;font-weight:700}
.box-banner-price{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* документи */
.docs-list{display:flex;flex-direction:column;gap:10px;max-width:640px}
.doc-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);transition:all .2s}
.doc-item:hover{border-color:var(--accent);background:var(--accent-light)}
.doc-arr{color:var(--accent);font-size:1.1rem}
.footer-col h4,.footer-cities h4{font-size:.72rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:14px}
.footer-col a{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:9px}
.footer-col a:hover{color:var(--accent)}
.footer-cities{max-width:1200px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--border-light)}
.city-chips{display:flex;flex-wrap:wrap;gap:0 4px;align-items:center}
.city-chips span{font-size:.9rem;color:var(--text-muted);padding:4px 0;transition:color .2s}
.city-chips span:not(:last-child)::after{content:'·';margin-left:8px;color:var(--accent);opacity:.5}
.footer-copy{max-width:1200px;margin:30px auto 0;font-size:.8rem;color:var(--text-muted);text-align:center}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;z-index:200;padding:20px}
.modal.on{display:grid;animation:fadeUp .2s ease}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:36px;max-width:430px;width:100%;position:relative}
.modal-box h3{font-size:1.4rem;text-transform:uppercase;letter-spacing:-.5px}
.modal-sub{color:var(--text-muted);font-size:.9rem;margin:6px 0 20px}
.modal-box input,.modal-box textarea,.modal-box .zv-sel{width:100%;font-family:inherit;font-size:1rem;border:1px solid var(--border);background:var(--bg);
  color:var(--text);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:12px}
.modal-box .zv-sel{cursor:pointer;font-weight:600}
.modal-box textarea{resize:vertical}
.modal-send{width:100%;justify-content:center;margin-top:6px}
.modal-x{position:absolute;top:18px;right:22px;cursor:pointer;font-size:1.6rem;opacity:.5;line-height:1}
.modal-x:hover{opacity:1}
.hp{position:absolute!important;left:-9999px}
/* reveal-on-scroll (тільки коли JS активний) */
html.js .section:not(.in),html.js .req-card:not(.in),html.js .box-banner:not(.in){opacity:0;transform:translateY(26px)}
.section,.req-card,.box-banner{transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* кнопка «нагору» */
.to-top{position:fixed;right:29px;bottom:96px;z-index:90;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--accent);font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(12px);
  transition:all .25s var(--ease);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--accent);color:#fff}
@media(max-width:560px){ .to-top{width:42px;height:42px} }
.mob-only{display:none}   /* пункти лише для бургер-меню */
.t-short{display:none}


/* HERO-КАРУСЕЛЬ (тільки моб) */
.hero-carousel{display:none}
.htrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.htrack::-webkit-scrollbar{display:none}
.hslide{min-width:100%;scroll-snap-align:center;box-sizing:border-box;padding:90px 6vw 24px;
  min-height:76vh;display:flex;flex-direction:column;justify-content:flex-end}
.hslide .hero-badge{margin:0 0 1.3rem;align-self:flex-start}
.hslide h1{font-size:clamp(2.4rem,13vw,3.6rem);line-height:1.08;text-transform:uppercase;letter-spacing:-.5px;color:var(--accent);margin:0}
.hslide .hero-desc{margin:1.1rem 0 0;max-width:none}
.hslide .hero-btns{width:100%;margin-top:1.6rem}
.cdots{display:flex;gap:8px;justify-content:center;padding:16px}
.cdots span{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;cursor:pointer}
.cdots span.on{background:var(--accent);width:22px;border-radius:5px}

/* Затемнення-підложка під моб-меню + анімація появи пунктів */
.mn-scrim{position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(10,8,16,.45);z-index:150;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.mn-scrim.open{opacity:1;visibility:visible}
@keyframes navItemIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Окреме моб-меню (поза header — щоб не потрапляти в його stacking-context/containing-block від backdrop-filter). Як на fregat-service/business */
.mobile-nav{position:fixed;top:64px;left:0;right:0;background:var(--bg);z-index:201;display:flex;flex-direction:column;gap:2px;padding:1rem 6vw 1.75rem;max-height:calc(100dvh - 64px);overflow-y:auto;border-bottom:1px solid var(--border);border-radius:0 0 20px 20px;box-shadow:0 24px 50px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .38s var(--ease),visibility .3s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-size:1rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text);text-decoration:none;padding:14px 0;text-align:center;border-bottom:1px solid var(--border-light);opacity:0;transform:translateY(16px);transition:color .2s,opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav.open a:nth-child(1){transition-delay:.06s,.06s,.06s} .mobile-nav.open a:nth-child(2){transition-delay:.1s,.1s,.1s}
.mobile-nav.open a:nth-child(3){transition-delay:.14s,.14s,.14s} .mobile-nav.open a:nth-child(4){transition-delay:.18s,.18s,.18s}
.mobile-nav.open a:nth-child(5){transition-delay:.22s,.22s,.22s} .mobile-nav.open a:nth-child(6){transition-delay:.26s,.26s,.26s}
.mobile-nav.open a:nth-child(7){transition-delay:.3s,.3s,.3s} .mobile-nav.open a:nth-child(8){transition-delay:.34s,.34s,.34s}
.mobile-nav.open a:nth-child(n+9){transition-delay:.38s,.38s,.38s}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav .mn-phone{color:var(--accent);letter-spacing:.5px}
.mobile-nav .mn-cab{color:var(--accent)}

/* TABLET — бургер раніше (6 пунктів меню не влазили на малих моніторах) */
@media(max-width:400px){ .logo-label,.logo-sep{display:none} }  /* на вузьких — лише «fregat», щоб не тиснуло */
@media(max-width:1180px){
  .header{grid-template-columns:auto 1fr auto}  /* нав прихована → лого по контенту, не стискається до 1fr */
  .nav{display:none}
  .nav.open{border-radius:0 0 20px 20px}
  .nav.open>*{animation:navItemIn .5s var(--ease) both}
  .nav.open>*:nth-child(1){animation-delay:.05s} .nav.open>*:nth-child(2){animation-delay:.1s}
  .nav.open>*:nth-child(3){animation-delay:.15s} .nav.open>*:nth-child(4){animation-delay:.2s}
  .nav.open>*:nth-child(5){animation-delay:.25s} .nav.open>*:nth-child(6){animation-delay:.3s}
  .nav.open>*:nth-child(7){animation-delay:.35s} .nav.open>*:nth-child(8){animation-delay:.4s}
  .nav.open>*:nth-child(n+9){animation-delay:.45s}
  .hero-art{display:none}
  .burger{display:flex}
  .phones{display:none}        /* телефони → у бургер-меню */
  .btn-cab{padding:9px;gap:0}  /* кабінет → лише іконка-人 у шапці */
  .btn-cab span{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  /* мобільне меню — суцільний фон, пункти по центру */
  /* width:100vw + left:50% + translateX(-50%) — повна ширина попри backdrop-filter containing-block у .header */
  .nav.open{display:flex;position:fixed;top:64px;left:50%;right:auto;width:100vw;transform:translateX(-50%);flex-direction:column;gap:0;
    background:var(--bg);padding:6px 6vw 26px;border-bottom:1px solid var(--border);
    max-height:calc(100dvh - 64px);overflow-y:auto;z-index:200;box-shadow:0 24px 50px rgba(0,0,0,.28)}
  .nav.open>a{padding:16px 0;border-bottom:1px solid var(--border-light);font-size:1rem;text-align:center}
  .nav.open .mob-only{display:block}
  /* десктопний дропдаун «Ще» ховаємо у бургері — замість нього акордеони */
  .nav.open .nav-drop{display:none}
  /* розкривашки «Ще» та «Зв'язок» — рівні рядки по центру */
  .nav.open details.mob-acc{border-bottom:1px solid var(--border-light)}
  .nav.open details.mob-acc summary{padding:16px 0;font-size:1rem;cursor:pointer;list-style:none;
    color:var(--text);text-align:center}
  .nav.open details.mob-acc summary::-webkit-details-marker{display:none}
  .nav.open details.mob-acc summary::after{content:' ▾'}
  .nav.open details.mob-acc[open] summary{color:var(--accent)}
  .nav.open details.mob-acc a{display:block;text-align:center;padding:13px 0;font-size:1rem;
    color:var(--accent);border-bottom:1px solid var(--border-light)}
  .nav.open details.mob-acc a:last-child{border-bottom:none}
  /* особистий кабінет — окремий пункт */
  .nav.open a.mob-only{text-align:center}
}
/* MOBILE */
@media(max-width:560px){
  .header{padding:0 4vw;height:58px}
  .nav.open{top:58px;max-height:calc(100dvh - 58px)}
  .mn-scrim,.mobile-nav{top:58px}
  .mobile-nav{max-height:calc(100dvh - 58px)}
  .hero{padding:0 6vw 7vh}
  .hero h1{font-size:clamp(1.8rem,9.5vw,3.4rem);letter-spacing:-.5px;overflow-wrap:anywhere}
  .hero-badge{margin-top:74px}
  .hero-sub{flex-direction:column;align-items:flex-start!important}
  .hero-btns{width:100%}
  .btn-primary,.btn-outline{flex:1;justify-content:center;padding:.9rem 1rem;font-size:.72rem}
  .t-full{display:none}.t-short{display:inline}
  .section{padding:60px 6vw}
  .cards{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .tctrl{flex-direction:column;align-items:stretch}
  .seg{justify-content:center;width:100%}
  .seg button{flex:1;text-align:center}
  .city-sel{width:100%}
}