/* ============================================================
   TrafficBoost — КП-презентация (mobile-first responsive)
   Построено на токенах дизайн-системы (--tb-*). Light, premium,
   один синий акцент, редкая оранжевая искра. Fluid-типографика
   через clamp() — читается от 360px до десктопа без «поплывов».
   ============================================================ */

/* ---- Fluid type roles ---- */
:root{
  --fs-display: clamp(31px, 7.4vw, 72px);
  --fs-quote:   clamp(32px, 8.4vw, 92px);
  --fs-h2:      clamp(26px, 5.6vw, 50px);
  --fs-h3:      clamp(20px, 3.4vw, 27px);
  --fs-lead:    clamp(17px, 2.5vw, 24px);
  --fs-body:    clamp(15px, 2.1vw, 19px);
  --fs-metric:  clamp(34px, 8vw, 52px);
  --pad-x:      clamp(16px, 5vw, 48px);
  --sec-y:      clamp(56px, 9vw, 120px);
}

html,body{overflow-x:clip}
body{background:var(--tb-bg);color:var(--tb-ink-700)}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--tb-container);margin:0 auto;padding:0 var(--pad-x)}
.wrap--narrow{max-width:880px}
section{position:relative}
.sec{padding:var(--sec-y) 0}
.sec--subtle{background:var(--tb-paper-subtle)}
.sec--tight{padding:clamp(44px,7vw,90px) 0}

/* ---- Type ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(12px,1.5vw,15px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tb-ink-500)}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--tb-blue-600)}
.eyebrow.is-spark::before{background:var(--tb-orange-600)}

h1.display{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--tb-ink-900);margin:0;text-wrap:balance}
h2.h2{font-size:var(--fs-h2);line-height:1.07;letter-spacing:-.026em;font-weight:700;color:var(--tb-ink-900);margin:0;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--tb-ink-600);margin:0;text-wrap:pretty}
.body{font-size:var(--fs-body);line-height:1.55;color:var(--tb-ink-500);margin:0;text-wrap:pretty}
.accent{color:var(--tb-blue-600)}
.spark{color:var(--tb-orange-600)}
.strong{color:var(--tb-ink-900)}
.mono{font-family:var(--tb-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stack{display:flex;flex-direction:column;min-width:0}
.gap-sm{gap:14px}.gap-md{gap:22px}.gap-lg{gap:30px}

/* ---- Sticky nav ---- */
.nav{position:sticky;top:0;z-index:50;
  background:var(--tb-glass-fill-strong);
  -webkit-backdrop-filter:var(--tb-glass-blur);backdrop-filter:var(--tb-glass-blur);
  border-bottom:1px solid var(--tb-line-soft)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:60px;max-width:var(--tb-container);margin:0 auto;padding:0 var(--pad-x)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:28px;width:auto}
.brand__wm{font-size:clamp(16px,4.4vw,20px);font-weight:700;letter-spacing:-.03em;color:var(--tb-ink-900);line-height:1;white-space:nowrap}
.brand__wm .l{font-weight:500;color:var(--tb-ink-400)}
.brand__wm .kz{color:var(--tb-blue-600)}

/* ---- Buttons ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 22px;border-radius:var(--tb-radius-md);
  font-family:var(--tb-font-sans);font-size:clamp(15px,2vw,18px);font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:normal;text-align:center;max-width:100%;
  transition:transform var(--tb-dur-smooth) var(--tb-ease-glide),box-shadow var(--tb-dur-smooth) var(--tb-ease-glide),background .2s var(--tb-ease-out)}
.btn>*{position:relative;z-index:2}
.btn .arw{font-family:var(--tb-font-mono);font-size:1.15em;transition:transform var(--tb-dur-smooth) var(--tb-ease-glide)}
.btn:hover .arw{transform:translateX(4px)}
.btn--primary{background:linear-gradient(180deg,var(--tb-blue-500),var(--tb-blue-600));color:#fff;
  box-shadow:0 10px 26px rgba(10,102,255,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 38px rgba(10,102,255,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--primary:active{transform:translateY(0)}
/* liquid-glass: soft white highlight that tracks the cursor (--mx/--my set in JS); subtle sheen at rest */
.btn--primary::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.5),transparent 56%);
  opacity:.4;transition:opacity var(--tb-dur-smooth) var(--tb-ease-out)}
.btn--primary:hover::before{opacity:1}
.btn--primary::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;z-index:1;pointer-events:none;
  transform:translateX(-180%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.btn--primary:hover::after{animation:btn-sweep 1.05s var(--tb-ease-glide)}
@keyframes btn-sweep{to{transform:translateX(280%) skewX(-18deg)}}
.btn--ghost{background:var(--tb-surface);color:var(--tb-ink-900);border-color:var(--tb-line);box-shadow:var(--tb-shadow-xs)}
.btn--ghost:hover{border-color:var(--tb-line-strong);transform:translateY(-1px);box-shadow:var(--tb-shadow-sm)}
.btn--sm{min-height:42px;padding:0 16px;font-size:14px}
.btn--lg{min-height:60px;padding:0 30px}
.btn--block{display:flex;width:100%}

/* ---- Pills / chips ---- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border-radius:999px;
  background:var(--tb-surface);border:1px solid var(--tb-line);box-shadow:var(--tb-shadow-xs);
  font-size:clamp(13px,1.7vw,16px);font-weight:500;color:var(--tb-ink-600)}
.pill b{color:var(--tb-ink-900);font-weight:700}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--tb-blue-600);box-shadow:0 0 0 4px rgba(10,102,255,.14);flex:none}
.pill .dot.spark{background:var(--tb-orange-600);box-shadow:0 0 0 4px rgba(255,106,26,.16)}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border-radius:11px;
  background:var(--tb-paper-subtle);border:1px solid var(--tb-line);font-size:clamp(13px,1.7vw,17px);color:var(--tb-ink-600)}
.chip .x{color:var(--tb-orange-600);font-family:var(--tb-font-mono);font-size:.85em}

/* ---- Status badge ---- */
.badge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;
  font-family:var(--tb-font-mono);font-size:14px}
.badge .d{width:7px;height:7px;border-radius:50%}
.badge--live{background:rgba(18,161,80,.12);border:1px solid rgba(18,161,80,.3);color:var(--tb-success-600)}
.badge--live .d{background:var(--tb-success-600)}
.badge--pause{background:rgba(232,140,0,.14);border:1px solid rgba(255,130,66,.34);color:var(--tb-orange-500)}
.badge--pause .d{background:var(--tb-orange-500)}

/* ---- Lists ---- */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.list li{display:flex;align-items:flex-start;gap:13px;font-size:var(--fs-body);line-height:1.45;color:var(--tb-ink-600)}
.list li .mk{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;margin-top:1px;
  background:rgba(10,102,255,.12);color:var(--tb-blue-600);font-family:var(--tb-font-mono);font-size:13px;font-weight:700}
.list.spark li .mk{background:rgba(255,106,26,.14);color:var(--tb-orange-600)}
.list.check li .mk{background:rgba(18,161,80,.14);color:var(--tb-success-600)}

/* ---- Cards grid ---- */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-radius-lg);
  padding:clamp(20px,4vw,30px);display:flex;flex-direction:column;gap:13px;
  box-shadow:var(--tb-shadow-xs),0 14px 34px rgba(16,24,40,.05);
  transition:transform var(--tb-dur-smooth) var(--tb-ease-glide),box-shadow var(--tb-dur-smooth) var(--tb-ease-glide)}
.card:hover{transform:translateY(-3px);box-shadow:var(--tb-ring),var(--tb-shadow-lg)}
.card.is-spark{background:linear-gradient(180deg,#fff6f0,#fff);border-color:#ffd9c2}
.card__ix{display:flex;align-items:center;gap:13px}
.card__num{font-family:var(--tb-font-mono);font-size:16px;font-weight:700;color:var(--tb-blue-600);
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(10,102,255,.1);flex:none}
.card__num.spark{color:var(--tb-orange-600);background:rgba(255,106,26,.12)}
.card__t{font-size:var(--fs-h3);font-weight:700;color:var(--tb-ink-900);letter-spacing:-.01em}
.card__d{font-size:var(--fs-body);line-height:1.5;color:var(--tb-ink-500)}
.card__foot{margin-top:auto;padding-top:6px;font-family:var(--tb-font-mono);font-size:clamp(14px,1.8vw,17px);color:var(--tb-blue-400)}
.card__foot.spark{color:var(--tb-orange-500)}

/* ---- Metrics ---- */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px}
.metric .v{font-family:var(--tb-font-mono);font-weight:700;letter-spacing:-.03em;color:var(--tb-ink-900);
  line-height:1;font-variant-numeric:tabular-nums;font-size:var(--fs-metric)}
.metric .v.up{color:var(--tb-success-600)}
.metric .v .u{font-size:.5em;color:var(--tb-blue-600)}
.metric .l{font-size:clamp(13px,1.7vw,17px);color:var(--tb-ink-500);margin-top:8px}

/* ---- Chain flow (problem + growth loop) ---- */
.flow{display:flex;flex-direction:column;gap:10px}
.flow .node{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:0 18px;border-radius:13px;
  background:var(--tb-surface);border:1px solid var(--tb-line);box-shadow:var(--tb-shadow-xs);
  font-size:clamp(15px,2vw,20px);font-weight:600;color:var(--tb-ink-800)}
.flow .node .i{font-family:var(--tb-font-mono);font-size:.75em;color:var(--tb-blue-600)}
.flow .node.money{border-color:rgba(18,161,80,.45);box-shadow:0 4px 14px rgba(18,161,80,.14)}
.flow .node.money .i{color:var(--tb-success-600)}
.flow .node.spark{background:rgba(255,106,26,.07);border-color:#ffd9c2;color:#c2410c}
.flow .node.hot{background:rgba(18,161,80,.08);border-color:#b6e6c8;color:#0f7a3d}
.flow .arw{color:var(--tb-ink-300);font-family:var(--tb-font-mono);font-size:20px;text-align:center;transform:rotate(90deg);line-height:1}

/* ---- VS comparison ---- */
.vs{display:grid;grid-template-columns:1fr;gap:16px}
.vs__col{padding:clamp(22px,4.5vw,38px);border-radius:var(--tb-radius-xl)}
.vs__col.bad{background:var(--tb-paper-subtle);border:1px solid var(--tb-line)}
.vs__col.good{background:linear-gradient(180deg,#eef4ff,#fff);border:1px solid var(--tb-blue-200);box-shadow:0 22px 56px rgba(10,102,255,.12)}
.vs__tag{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.vs__col.bad .vs__tag{color:var(--tb-ink-400)}
.vs__col.good .vs__tag{color:var(--tb-blue-600)}
.vs__name{font-size:var(--fs-h3);font-weight:700;color:var(--tb-ink-900);letter-spacing:-.01em;margin-bottom:8px}
.vs__name .small{display:block;font-size:.66em;font-weight:500;color:var(--tb-ink-500);letter-spacing:0;margin-top:6px}
.vs__col .list{margin-top:18px}

/* ---- Glass note ---- */
.glassnote{background:linear-gradient(180deg,#f3f8ff,#fff);border:1px solid var(--tb-blue-200);
  border-radius:var(--tb-radius-lg);padding:clamp(20px,4vw,28px);box-shadow:0 1px 2px rgba(10,102,255,.06),0 20px 48px rgba(10,102,255,.1)}

/* ---- Quote ---- */
.quote{text-align:center}
.quote h2{font-size:var(--fs-quote);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:0;color:var(--tb-ink-900)}
.quote .pay{color:var(--tb-ink-300);display:block}
.quote .pay.on{color:var(--tb-ink-900)}
.quote .pay .spark{color:var(--tb-orange-600)}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden}
.hero__glow{position:absolute;inset:-15% -10% auto auto;width:min(680px,120%);height:560px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 60% at 70% 30%,rgba(10,102,255,.16),transparent 70%),
             radial-gradient(50% 50% at 85% 60%,rgba(255,106,26,.09),transparent 70%);filter:blur(8px)}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,56px);align-items:center}
.hero__in>*{min-width:0}
/* hero headline: capped smaller than the full-bleed offer headline so it
   doesn't break one-word-per-line inside the narrower hero text column */
.hero h1.display{font-size:clamp(31px,5vw,54px)}
/* safety: never let grid/flex children force a track wider than the viewport */
.cards>*,.vs>*,.metrics>*{min-width:0}

/* ---- Browser / phone frames (screenshots) ---- */
.collage{position:relative;display:flex;flex-direction:column;gap:16px}
.collage .chip-float{align-self:flex-start}
.browser{border-radius:16px;overflow:hidden;border:1px solid var(--tb-line);background:#fff;box-shadow:var(--tb-shadow-xl)}
.browser__bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#f1f3f6;border-bottom:1px solid var(--tb-line-soft)}
.browser__bar .d{width:11px;height:11px;border-radius:50%;background:#cdd3db;flex:none}
.browser__url{margin-left:12px;height:24px;flex:1;min-width:0;border-radius:7px;background:#fff;border:1px solid var(--tb-line-soft);
  display:flex;align-items:center;padding:0 12px;font-family:var(--tb-font-mono);font-size:12px;color:var(--tb-ink-400);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__shot{display:block;width:100%;height:auto}
.chip-float{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--tb-line);border-radius:16px;
  padding:12px 16px;box-shadow:0 18px 40px rgba(16,24,40,.16)}
.chip-float .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(18,161,80,.12);color:var(--tb-success-600);font-family:var(--tb-font-mono);font-weight:700;font-size:19px}
.chip-float .v{font-family:var(--tb-font-mono);font-weight:700;font-size:24px;color:var(--tb-ink-900);line-height:1}
.chip-float .l{font-size:12px;color:var(--tb-ink-500);margin-top:3px}

/* case screenshots */
.casemedia{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.casemedia .browser{flex:1 1 260px;min-width:0}
.phone{flex:0 0 auto;width:128px;border-radius:26px;border:5px solid #fff;background:#fff;overflow:hidden;
  box-shadow:0 24px 50px rgba(16,24,40,.22),0 0 0 1px var(--tb-line)}
.phone img{width:100%;height:auto;display:block}

/* ---- Expertise hub ---- */
.hub{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.hub__core{width:min(220px,62vw);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 50% 30%,#2a78ff,#0a52d6);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 18px 50px rgba(10,102,255,.32),inset 0 1px 0 rgba(255,255,255,.4);padding:20px}
.hub__core .lbl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600}
.hub__core .nm{font-size:clamp(20px,5vw,26px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.hub__nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hub__node{display:inline-flex;align-items:center;min-height:50px;padding:0 18px;border-radius:13px;
  background:#fff;border:1px solid var(--tb-blue-200);color:var(--tb-ink-900);font-size:clamp(14px,1.9vw,19px);font-weight:600;
  box-shadow:var(--tb-shadow-sm)}

/* ---- Offer band (dark final CTA) ---- */
.offer{position:relative;overflow:hidden;border-radius:var(--tb-radius-2xl);background:var(--tb-ink-900);color:#fff;
  padding:clamp(32px,6vw,64px)}
.offer__glow{position:absolute;inset:auto -8% -40% auto;width:min(520px,110%);height:420px;pointer-events:none;
  background:radial-gradient(50% 50% at 70% 50%,rgba(10,102,255,.4),transparent 70%),radial-gradient(40% 40% at 85% 70%,rgba(255,106,26,.24),transparent 70%)}
.offer__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.offer h2{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.03em;font-weight:700;color:#fff;margin:0;text-wrap:balance}
.offer .lead{color:var(--tb-blue-200)}
.offer .strong{color:#fff}
.offer__contacts{display:flex;flex-wrap:wrap;gap:12px}
.offer__contacts a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:15px;text-decoration:none;
  transition:background .2s var(--tb-ease-out)}
.offer__contacts a:hover{background:rgba(255,255,255,.16);color:#fff}
.offer__contacts .mono{color:#fff}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--tb-line-soft);padding:40px 0}
.footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
.footer__meta{font-family:var(--tb-font-mono);font-size:14px;color:var(--tb-ink-400);letter-spacing:.03em}

/* ---- Section heading block ---- */
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,5vw,48px)}

/* ============================================================
   Breakpoints — progressive enhancement upward
   ============================================================ */
@media (min-width:560px){
  .metrics{grid-template-columns:repeat(3,1fr);gap:22px 18px}
}
@media (min-width:640px){
  .flow{flex-direction:row;flex-wrap:wrap;align-items:center}
  .flow .arw{transform:none;padding:0 4px}
  .cards--2{grid-template-columns:repeat(2,1fr)}
  .chip-float .v{font-size:26px}
}
@media (min-width:860px){
  .hero__in{grid-template-columns:1.12fr .88fr}
  .vs{grid-template-columns:1fr 1fr;gap:24px}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .casemedia--reverse{flex-direction:row}
}
@media (min-width:1080px){
  .cards--4{grid-template-columns:repeat(4,1fr)}
}

/* ---- Hero collage: two browser shots overlap + float chip on wide screens ---- */
.chip-float{margin-top:-28px;margin-left:8px}
@media (min-width:860px){
  .collage{display:block}
  .collage .collage__main{width:88%}
  .collage .collage__crm{position:absolute;right:0;bottom:-18px;width:60%;z-index:2;box-shadow:0 30px 70px rgba(16,24,40,.26)}
  .hero .chip-float{position:absolute;left:-10px;bottom:24px;margin:0;z-index:3}
}