/* ============================================================
   Капитан Клин — редизайн (светлая тема, синий+голубой+стекло).
   Палитра: тёмно-синий из лого + голубой акцент + полупрозрачное
   стекло. Светлый фотофон. Базовые стили + утилиты слайдеров,
   бегущей строки, табов цен и мобильного меню.
   ============================================================ */
:root{
  --ink:#15183A;        /* основной текст/заголовки */
  --navy:#1E2150;       /* синий из лого */
  --accent:#3A4084;     /* синий-акцент (читаемый на светлом) */
  --muted:#3C406A;      /* вторичный текст */
  --muted2:#565A82;     /* подписи */
  --sky:#AEB6E0;        /* голубой (на тёмном стекле) */

  /* стекло (полупрозрачное, НЕ серое) */
  --glass:rgba(255,255,255,0.42);
  --glass-strong:rgba(255,255,255,0.55);
  --glass-bd:rgba(255,255,255,0.75);
  --glass-navy:rgba(22,25,58,0.55);     /* синее стекло */
  --glass-navy-bd:rgba(255,255,255,0.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background-color:#EAF0FB;
}
/* фоновый слой фиксируем отдельным элементом — надёжно работает на мобилке
   (background-attachment:fixed мобильные браузеры часто игнорируют) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(233,239,251,0.32),rgba(208,219,244,0.50)),url("../assets/bg-desktop.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
@media (max-width:640px){
  body::before{ background-image:linear-gradient(rgba(233,239,251,0.34),rgba(208,219,244,0.52)),url("../assets/bg-mobile.webp"); }
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
img{display:block;max-width:100%}
::placeholder{color:#8488A8}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
a:focus-visible,button:focus-visible,input:focus-visible,[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== ШАПКА: на мобилке только лого по центру ===== */
@media (max-width:640px){
  .cc-nav,.cc-header-actions{display:none !important}
  .cc-header-inner{justify-content:center !important;flex-wrap:nowrap !important}
  .cc-logo{margin:0 !important;flex:0 0 auto !important}
}

/* ===== СЛАЙДЕР: грид на десктопе, scroll-snap (активный по центру) на мобилке ===== */
.cc-slider{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (max-width:640px){
  .cc-slider{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(-1*clamp(20px,5vw,48px));margin-right:calc(-1*clamp(20px,5vw,48px));
    padding:4px 10% 14px;scrollbar-width:none;
  }
  .cc-slider::-webkit-scrollbar{display:none}
  .cc-slider>*{scroll-snap-align:center;flex:0 0 80%}
}
/* вариант для слайдера внутри панели */
@media (max-width:640px){
  .cc-slider--inset{margin-left:0;margin-right:0;padding:4px 10% 14px}
  .cc-slider--inset>*{flex:0 0 80%}
}

/* ===== УПРАВЛЕНИЕ СЛАЙДЕРОМ: стрелки + прогресс-точки (только мобилка) ===== */
.cc-slider-ctrls{display:none}
@media (max-width:640px){
  .cc-slider-ctrls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
  .cc-arrow{width:40px;height:40px;border-radius:50%;border:1px solid rgba(30,33,80,0.2);background:var(--glass-strong);color:var(--navy);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0;transition:opacity .2s}
  .cc-arrow:disabled{opacity:0.3}
  .cc-dots{display:flex;gap:7px;align-items:center}
  .cc-dot{width:7px;height:7px;border-radius:50%;background:rgba(30,33,80,0.25);transition:width .25s,background .25s}
  .cc-dot.is-active{background:var(--navy);width:22px;border-radius:4px}
  /* тёмный вариант — внутри синей панели «Как работаем» */
  .cc-slider-ctrls--dark .cc-arrow{border-color:rgba(255,255,255,0.32);background:rgba(255,255,255,0.1);color:#fff}
  .cc-slider-ctrls--dark .cc-dot{background:rgba(255,255,255,0.3)}
  .cc-slider-ctrls--dark .cc-dot.is-active{background:#fff}
}

/* ===== БЕГУЩАЯ СТРОКА (цифры под hero, только мобилка) ===== */
.cc-marquee{display:none}
@media (max-width:640px){
  .cc-stats-grid{display:none !important}
  .cc-marquee{display:block;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .cc-marquee__track{display:flex;width:max-content;animation:cc-scroll 20s linear infinite}
  .cc-marquee__item{display:flex;align-items:baseline;gap:8px;padding:14px 22px;white-space:nowrap}
  .cc-marquee__item:after{content:"·";margin-left:22px;color:rgba(30,33,80,0.3)}
}
@keyframes cc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cc-marquee__track{animation:none}}

/* ===== ТАБЫ ЦЕН (только мобилка) ===== */
.cc-price-tabs{display:none}
@media (max-width:640px){
  .cc-price-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .cc-price-tab{background:rgba(30,33,80,0.06);border:1px solid rgba(30,33,80,0.16);color:var(--navy);font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px}
  .cc-price-tab[aria-selected="true"]{background:linear-gradient(150deg,#3A4084,#1E2150);color:#fff;border-color:transparent}
  .cc-price-head{display:none}
  .cc-price-group{display:none}
  .cc-price-group.is-active{display:block}
}