/* ============================================================
   Fixly — redesign (концепт в духе seoxl, своя синяя тема)
   Подключается ПОСЛЕ home.css. Этап 1: hero главной.
   ============================================================ */
:root{
  --a:#2f5bea; --a2:#5b7bff; --a-deep:#1c39b0; --ag:rgba(47,91,234,.08);
  --ink:#0e1424; --sub:#5a6178; --sub2:#878ca3;
  --dash:#0e1526; --dash2:#16203a; --dash-line:rgba(255,255,255,.07);
  --live:#22c55e;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sh-dash:0 40px 90px -30px rgba(10,18,42,.55),0 12px 30px -14px rgba(10,18,42,.4);
}

/* атмосферный светлый фон */
body{background:#f4f6fa !important;
  background-image:radial-gradient(1200px 560px at 88% -10%,rgba(47,91,234,.10),transparent 60%) !important;}

/* моно-чип с точкой */
.hero .tag-line{font-family:var(--mono) !important;font-size:12px !important;letter-spacing:.06em !important;
  font-weight:600 !important;text-transform:uppercase;background:#fff !important;border:1px solid var(--brd2) !important;
  color:var(--ink) !important;box-shadow:0 2px 6px -2px rgba(14,20,36,.08);}
.hero .tag-dot{background:var(--live) !important;box-shadow:0 0 0 4px rgba(34,197,94,.16) !important;}

/* акцент заголовка — синий концепт (сплошной, надёжно) */
.hero .h1-accent{color:var(--a) !important;-webkit-text-fill-color:var(--a) !important;background:none !important;}

/* trust-строка — моно */
.hero .hero-stats{font-family:var(--mono) !important;}
.hero .free-note{font-family:var(--mono) !important;}

/* кнопки */
.hero .btn-a{background:linear-gradient(135deg,var(--a),var(--a-deep)) !important;
  box-shadow:0 10px 24px -8px rgba(47,91,234,.5) !important;transition:transform .18s,box-shadow .18s !important;}
.hero .btn-a:hover{transform:translateY(-2px) !important;box-shadow:0 16px 34px -8px rgba(47,91,234,.6) !important;}

/* ── ТЁМНЫЙ ПРОДУКТОВЫЙ ДАШБОРД (.hcard) ── */
.hero .hcard{background:linear-gradient(160deg,var(--dash),var(--dash2)) !important;
  border:none !important;box-shadow:var(--sh-dash) !important;border-radius:24px !important;
  color:#e8ecf6 !important;overflow:hidden;position:relative;padding-top:52px !important;}
/* macOS-точки в шапке карточки */
.hero .hcard::before{content:'';position:absolute;top:20px;left:22px;width:11px;height:11px;border-radius:50%;
  background:#ff5f57;box-shadow:19px 0 #febc2e,38px 0 #28c840;}
.hero .hcard .hc-title{color:#aeb6cf !important;font-family:var(--mono) !important;font-size:12.5px !important;}
.hero .hcard .hc-badge{color:var(--live) !important;background:rgba(34,197,94,.12) !important;
  font-family:var(--mono) !important;font-size:11px !important;border:none !important;}
.hero .hcard .hc-amount-main{color:#fff !important;font-variant-numeric:tabular-nums;}
.hero .hcard .hc-amount-sub{color:#8a93b2 !important;}
.hero .hcard .bar-track{background:rgba(255,255,255,.08) !important;}
.hero .hcard .bar-fill{background:linear-gradient(90deg,var(--a2),var(--a)) !important;}
.hero .hcard .bar-meta{color:#8a93b2 !important;font-family:var(--mono) !important;font-size:11.5px !important;}
/* лента списаний как продуктовый лог */
.hero .hcard .hc-rows{border-top:1px solid var(--dash-line) !important;}
.hero .hcard .hc-row{font-family:var(--mono) !important;border-color:var(--dash-line) !important;}
.hero .hcard .hc-row:hover{background:rgba(255,255,255,.04) !important;}
.hero .hcard .hc-row-name{color:#cdd4e8 !important;}
.hero .hcard .hc-row-time{color:#6f7899 !important;}
.hero .hcard .hc-row-cost{color:#9db4ff !important;font-weight:600 !important;}
.hero .hcard .hc-foot{border-top:1px solid var(--dash-line) !important;}
.hero .hcard .hc-live{color:var(--live) !important;font-family:var(--mono) !important;font-size:12px !important;}
.hero .hcard .hc-refill{color:#9db4ff !important;font-family:var(--mono) !important;font-size:12px !important;}

/* ============================================================
   ЭТАП 2: СТРАНИЦА УСЛУГИ (base.html) — весь контент в новом языке
   hero светлый + тёмная «продуктовая» прайс-карта + моно-детали
   ============================================================ */
/* eye-подпись — моно с акцентной чертой */
.s-eye,.sec-eye{font-family:var(--mono) !important;text-transform:uppercase;letter-spacing:.08em !important;
  font-size:12px !important;color:var(--a) !important;font-weight:600 !important;display:inline-flex;align-items:center;gap:9px;}
.s-eye::before,.sec-eye::before{content:"";width:20px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--a),var(--a2));display:inline-block;}

/* акцент заголовка услуги — синий сплошной */
.page-title-accent em{color:var(--a) !important;-webkit-text-fill-color:var(--a) !important;background:none !important;font-style:normal;}

/* кнопки */
.btn-a{background:linear-gradient(135deg,var(--a),var(--a-deep)) !important;
  box-shadow:0 10px 24px -8px rgba(47,91,234,.5) !important;transition:transform .18s,box-shadow .18s !important;}
.btn-a:hover{transform:translateY(-2px) !important;box-shadow:0 16px 34px -8px rgba(47,91,234,.6) !important;}
.btn-b{transition:transform .18s,border-color .18s !important;}
.btn-b:hover{transform:translateY(-2px) !important;border-color:var(--a) !important;color:var(--a) !important;}

/* ── ТЁМНАЯ ПРОДУКТОВАЯ ПРАЙС-КАРТА (.price-card) ── */
.price-card{background:linear-gradient(160deg,var(--dash),var(--dash2)) !important;border:none !important;
  box-shadow:var(--sh-dash) !important;border-radius:24px !important;color:#e8ecf6 !important;
  position:relative;overflow:hidden;padding-top:50px !important;}
.price-card::before{content:'';position:absolute;top:19px;left:22px;width:11px;height:11px;border-radius:50%;
  background:#ff5f57;box-shadow:19px 0 #febc2e,38px 0 #28c840;}
.price-card .pc-label{color:#aeb6cf !important;font-family:var(--mono) !important;font-size:11.5px !important;
  letter-spacing:.05em;text-transform:uppercase;}
.price-card .pc-rate{color:#fff !important;font-family:var(--mono) !important;font-variant-numeric:tabular-nums;}
.price-card .pc-sub{color:#8a93b2 !important;}
.price-card .pc-rows{border-top:1px solid var(--dash-line) !important;margin-top:6px;}
.price-card .pc-row{border-color:var(--dash-line) !important;font-family:var(--mono) !important;}
.price-card .pc-row:hover{background:rgba(255,255,255,.04) !important;}
.price-card .pc-row-name{color:#cdd4e8 !important;}
.price-card .pc-row-time{color:#6f7899 !important;}
.price-card .pc-row-cost{color:#9db4ff !important;font-weight:600 !important;font-family:var(--mono) !important;}
.price-card .pc-div{background:var(--dash-line) !important;border:none !important;}
.price-card .pc-cta .btn-a{width:100%;text-align:center;}
.price-card .pc-free{color:#8a93b2 !important;font-family:var(--mono) !important;font-size:12px !important;}

/* ── секции ниже: карточки в новом стиле ── */
.sec-title{font-family:var(--display,'Bricolage Grotesque',sans-serif);letter-spacing:-.03em;}
.works-grid .work-item{background:#fff !important;border:1px solid var(--brd) !important;border-radius:14px !important;
  transition:transform .2s,box-shadow .2s,border-color .2s !important;}
.works-grid .work-item:hover{transform:translateY(-5px) !important;
  box-shadow:0 20px 44px -18px rgba(14,20,36,.20) !important;border-color:rgba(47,91,234,.28) !important;}
.work-item .work-check{color:var(--a) !important;}
.work-item .work-time{font-family:var(--mono) !important;color:var(--a) !important;font-size:12px !important;}
.timeline .tl-dot{background:var(--a) !important;box-shadow:0 0 0 4px var(--ag) !important;}
.timeline .tl-name{font-weight:600 !important;}
.service-faq-item{transition:border-color .18s !important;}
.service-faq-item:hover{border-color:rgba(47,91,234,.28) !important;}
.service-faq-q{font-weight:600 !important;}
/* хвостовая CTA-ссылка в статьях/интро */
.cta-line a{color:var(--a);font-weight:600;text-decoration:none;border-bottom:2px solid var(--ag);}
.cta-line a:hover{border-color:var(--a);}

/* ============================================================
   ЭТАП 3: БЛОГ, ХАБ УСЛУГ, ЦЕНЫ — единый язык дизайна
   ============================================================ */

/* ── БЛОГ: список статей ── */
.article-card{background:#fff !important;border:1px solid var(--brd) !important;border-radius:16px !important;
  overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s !important;}
.article-card:hover{transform:translateY(-6px) !important;
  box-shadow:0 24px 50px -20px rgba(14,20,36,.22) !important;border-color:rgba(47,91,234,.28) !important;}
.ac-visual{background:linear-gradient(155deg,var(--dash),var(--dash2)) !important;position:relative;}
.ac-visual-ico{color:var(--a2) !important;}
.ac-cat{font-family:var(--mono) !important;font-size:11.5px !important;letter-spacing:.05em;text-transform:uppercase;
  color:var(--a) !important;font-weight:600 !important;}
.ac-dot{background:var(--a) !important;}
.ac-title{font-family:var(--display,'Bricolage Grotesque',sans-serif) !important;font-weight:700 !important;letter-spacing:-.02em !important;}
.ac-meta,.ac-date,.ac-read,.ac-tag{font-family:var(--mono) !important;font-size:11.5px !important;color:var(--sub2) !important;}
.ac-link{color:var(--a) !important;font-weight:600 !important;}

/* ── БЛОГ: статья ── */
.art-cat{font-family:var(--mono) !important;text-transform:uppercase;letter-spacing:.05em;color:var(--a) !important;font-weight:600 !important;}
.art-dot{background:var(--a) !important;}
.art-title{font-family:var(--display,'Bricolage Grotesque',sans-serif) !important;font-weight:800 !important;letter-spacing:-.03em !important;line-height:1.05 !important;}
.art-meta,.art-date,.art-read,.art-tag{font-family:var(--mono) !important;font-size:12px !important;color:var(--sub2) !important;}
.art-lead{color:var(--sub) !important;}
.art-body h2{font-family:var(--display,'Bricolage Grotesque',sans-serif) !important;letter-spacing:-.02em;margin-top:1.6em;}
.art-body a{color:var(--a) !important;text-decoration:underline;text-underline-offset:3px;}
.art-body strong{color:var(--ink) !important;}
.toc{background:#fff !important;border:1px solid var(--brd) !important;border-radius:14px !important;}
.toc-title{font-family:var(--mono) !important;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px !important;color:var(--sub2) !important;}
.toc-item.active,.toc-item:hover{color:var(--a) !important;}

/* ── ХАБ УСЛУГ ── */
.page-hero .hero-rate-val{font-family:var(--mono) !important;color:var(--ink) !important;font-variant-numeric:tabular-nums;}
.page-hero .hero-rate-label,.page-hero .hero-rate-sub{font-family:var(--mono) !important;}
.filter-bar .filter-label{font-family:var(--mono) !important;text-transform:uppercase;letter-spacing:.06em;font-size:12px !important;color:var(--sub2) !important;}
.ftag{font-family:var(--mono) !important;font-size:13px !important;transition:all .18s !important;}
.ftag.on{background:linear-gradient(135deg,var(--a),var(--a-deep)) !important;color:#fff !important;border-color:transparent !important;}
.sc-ico{color:var(--a) !important;background:var(--ag) !important;}
.sc-tag{font-family:var(--mono) !important;font-size:11px !important;letter-spacing:.04em;text-transform:uppercase;
  color:var(--a) !important;background:var(--ag) !important;}
.sc-title{font-family:var(--display,'Bricolage Grotesque',sans-serif) !important;font-weight:700 !important;letter-spacing:-.02em !important;}
.sc-time,.sc-work{font-family:var(--mono) !important;font-size:12px !important;}
.sc-link{color:var(--a) !important;font-weight:600 !important;}

/* ── ЦЕНЫ ── */
.calc-panel{background:linear-gradient(160deg,var(--dash),var(--dash2)) !important;border:none !important;
  color:#e8ecf6 !important;border-radius:20px !important;box-shadow:var(--sh-dash) !important;}
.calc-panel .ci-label,.calc-panel .ci-val,.calc-panel .cr-label,.calc-panel .cr-name,
.calc-panel .cr-val,.calc-panel .cr-total,.calc-panel .cr-sub,.calc-panel .cr-note{font-family:var(--mono) !important;}
.calc-panel .cr-label,.calc-panel .cr-name{color:#aeb6cf !important;}
.calc-panel .cr-val,.calc-panel .ci-val{color:#fff !important;}
.calc-panel .cr-total{color:var(--a2) !important;font-weight:700 !important;}
.calc-panel .cr-row{border-color:var(--dash-line) !important;}
.calc-input{background:rgba(255,255,255,.06) !important;color:#fff !important;border:1px solid var(--dash-line) !important;font-family:var(--mono) !important;}
.faq-item{transition:border-color .18s !important;}
.faq-item:hover,.faq-item.open{border-color:rgba(47,91,234,.28) !important;}
.faq-q{font-weight:600 !important;}
.faq-item .hi,.hi{color:var(--a) !important;}