/* Лендинг «Честное слово» — стили (на дизайн-токенах tokens.css) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  background-image:var(--metal); background-attachment:fixed; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.skip-link{position:absolute; left:1rem; top:-4rem; z-index:var(--z-modal); background:var(--orange); color:var(--on-accent); padding:.7rem 1.1rem; border-radius:var(--radius); font-family:var(--font-head); font-weight:600; transition:top var(--dur) var(--ease)}
.skip-link:focus{top:1rem}
h1,h2,h3{font-family:var(--font-head); color:var(--text); line-height:var(--lh-head); margin:0; font-weight:600}
h1{font-size:var(--fs-hero); line-height:var(--lh-tight); text-transform:uppercase; letter-spacing:.01em}
h2{font-size:var(--fs-h2); text-transform:uppercase}
h3{font-size:var(--fs-h3)}
p{margin:0}
.container{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter)}
.cap{font-family:var(--font-mono); font-size:var(--fs-cap); letter-spacing:var(--tracking-cap); text-transform:uppercase; color:var(--orange)}
.lead{font-size:var(--fs-lead); color:var(--text-body)}
.muted{color:var(--text-muted)}
.center{text-align:center}
section{padding-block:var(--section-y)}
.sec-head{margin-bottom:var(--sp-8)}
.sec-head .lead{max-width:58ch}
.sec-head h2{margin:.3em 0}
.grad-bar{height:5px; border-radius:var(--radius-pill); background:var(--grad-brand)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; border:0; border-radius:var(--radius-pill);
  padding:.9rem 1.7rem; font-size:1rem; cursor:pointer; line-height:1;
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease)}
.btn-primary{background:var(--grad-orange); color:var(--on-accent); box-shadow:var(--glow-orange)}
.btn-primary:hover{box-shadow:0 18px 44px -14px rgba(232,115,28,.65); transform:translateY(-1px)}
.btn-pay{background:linear-gradient(180deg,var(--blue),var(--blue-600)); color:#fff; box-shadow:var(--glow-blue)}
.btn-pay:hover{box-shadow:0 18px 44px -14px rgba(28,159,224,.6); transform:translateY(-1px)}
.btn-secondary{background:transparent; color:var(--blue); border:1.5px solid var(--blue)}
.btn-secondary:hover{background:rgba(28,159,224,.12)}
.btn-call{display:none}  /* на десктопе виден номер телефона; кнопка звонка — только на мобайле */
.btn-call svg{flex:none}
.btn-ghost{background:var(--bg-3); color:var(--text)}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* header */
.hdr{position:sticky; top:0; z-index:var(--z-sticky); backdrop-filter:blur(12px);
  background:rgba(14,14,14,.78); border-bottom:1px solid var(--line)}
.hdr .container{display:flex; align-items:center; gap:var(--sp-5); height:68px}
.logo{display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; color:var(--text); font-size:1.15rem}
.logo img{height:54px; width:54px; border-radius:11px}
.logo{min-width:0}
.logo-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; gap:1.4rem; margin-left:auto; font-size:var(--fs-sm)}
.nav a{color:var(--text-body); transition:color var(--dur)}
.nav a:hover{color:var(--orange)}
.hdr .phone{font-family:var(--font-mono); font-weight:600; color:var(--text); white-space:nowrap}
.hdr .btn{padding:.6rem 1.1rem; font-size:.85rem}
.burger{display:none; background:none; border:0; color:var(--text); cursor:pointer; width:44px; height:44px; font-size:1.45rem; align-items:center; justify-content:center}

/* hero */
.hero{position:relative; padding-top:clamp(1.5rem,4vw,3rem)}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.hero h1{margin:.5em 0 .75em; line-height:1.16; letter-spacing:.01em}
.hero h1 .hl{color:var(--orange)}
.hero .lead{max-width:40ch; font-size:1.05rem; color:var(--text-body); line-height:1.65}
.hero .cap{display:inline-block}
.hero-banner{margin-top:0}
.hero-banner img,.hero-banner video{width:100%; height:auto; display:block; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-card)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6)}
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5)}
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:var(--radius-pill);
  background:var(--bg-2); border:1px solid var(--line); font-size:var(--fs-sm); color:var(--text)}
.dot{width:8px;height:8px;border-radius:50%}.dot.o{background:var(--orange)}.dot.b{background:var(--blue)}
.hero-visual{aspect-ratio:4/3; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 70% 30%, rgba(28,159,224,.18), transparent 60%),
    radial-gradient(70% 60% at 25% 80%, rgba(232,115,28,.20), transparent 60%),
    var(--bg-2);
  display:grid; place-items:center; text-align:center; box-shadow:var(--shadow-card); position:relative; overflow:hidden}
.hero-visual img{width:62%; opacity:.92; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.hero-visual .tag{position:absolute; bottom:12px; right:14px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted)}
.hero-visual.has-img{padding:0}
.hero-visual.has-img img{width:100%; height:100%; object-fit:cover; opacity:1; filter:none}

/* generic grid cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-card);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease)}
.card:hover{border-color:var(--orange); box-shadow:var(--glow-orange)}
.card .ic{width:46px;height:46px;border-radius:12px;background:rgba(232,115,28,.1);border:1px solid rgba(232,115,28,.28);display:grid;place-items:center;margin-bottom:var(--sp-4)}
.card .ic svg{width:23px;height:23px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:.4em}
.card p{color:var(--text-body); font-size:var(--fs-sm)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); counter-reset:step; position:relative}
.steps-line{position:absolute; left:0; right:22%; top:1rem; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--orange),var(--blue)); transform:scaleX(0); transform-origin:left center; box-shadow:0 0 16px rgba(232,115,28,.35); pointer-events:none; z-index:0}
.step{position:relative; z-index:1; padding-top:3.4rem}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:0; left:0;
  font-family:var(--font-head); font-weight:700; font-size:2.1rem; color:transparent;
  -webkit-text-stroke:1.5px var(--orange); line-height:1}
.step h3{font-size:1.15rem; margin-bottom:.3em}
.step p{color:var(--text-body); font-size:var(--fs-sm)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); text-align:center}
.stat .num{font-family:var(--font-head); font-weight:700; font-size:clamp(2.2rem,6vw,3.6rem); color:var(--text); line-height:1}
.stat .num span{color:var(--orange)}
.stat .lbl{color:var(--text-muted); font-size:var(--fs-sm); margin-top:.4rem}

/* calculator */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-6)}
.calc .field{margin-bottom:var(--sp-5)}
.calc label{display:block; font-size:var(--fs-sm); color:var(--text); margin-bottom:.5rem}
.calc input[type=range]{width:100%; accent-color:var(--orange)}
.calc .range-hint{display:flex; justify-content:space-between; margin-top:.55rem;
  font-family:var(--font-mono); font-size:var(--fs-cap); color:var(--text-muted)}
.calc-facts{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.calc-fact{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5)}
.calc-fact .cap{color:var(--text-muted); display:block; margin-bottom:.5rem}
.calc-fact .fact-v{font-family:var(--font-head); font-weight:700; line-height:1; color:var(--text);
  font-size:clamp(1.5rem,4.5vw,2rem)}
.calc-fact .fact-v .u{font-size:.55em; color:var(--text-muted); font-weight:600}
.calc .result{text-align:center}
.calc .result .num{font-family:var(--font-head); font-weight:700; font-size:clamp(2.4rem,7vw,4rem); color:var(--orange); line-height:1}
.calc .result .cur{font-family:var(--font-mono); color:var(--text); font-size:var(--fs-lead)}

/* faq */
.faq{max-width:820px; margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; padding:1.2rem 0; display:flex; align-items:center; gap:1rem;
  font-family:var(--font-head); font-size:1.15rem; color:var(--text); text-transform:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; margin-left:auto; color:var(--orange); font-size:1.6rem; transition:transform var(--dur)}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 0 1.2rem; color:var(--text-body); max-width:70ch}

/* testimonials */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.rev{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5)}
.rev .stars{color:var(--orange); letter-spacing:2px; margin-bottom:.6rem}
.rev p{color:var(--text-body); font-size:var(--fs-sm)}
.rev .who{margin-top:1rem; display:flex; align-items:center; gap:.7rem}
.rev .av{position:relative; width:44px;height:44px;border-radius:50%; background:var(--grad-brand);
  display:grid;place-items:center; font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:#fff;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.1), 0 6px 14px -6px rgba(0,0,0,.6)}
.rev .av.a{background:linear-gradient(135deg,#F49A52,#E8731C)}   /* оранжевый */
.rev .av.b{background:linear-gradient(135deg,#46B9ED,#1C9FE0)}   /* синий */
.rev .av.c{background:linear-gradient(135deg,#28C0A8,#1C9FE0)}   /* бирюзово-синий */
.rev .av::after{content:"✓"; position:absolute; right:-3px; bottom:-3px; width:17px; height:17px;
  border-radius:50%; background:#2BA85B; color:#fff; font-size:10px; font-weight:700; line-height:1;
  display:grid; place-items:center; border:2px solid var(--bg-2)}
.rev .who b{color:var(--text)}

/* social band */
.band{background:linear-gradient(180deg,var(--bg-1),var(--bg)); border-block:1px solid var(--line)}
/* НЕ делаем .band .container флексом: иначе в #how/#faq заголовок и контент разъезжаются
   в две колонки. */

/* channels — «каталог» авто живёт в Telegram/Max (блок №2) */
.channels{padding-block:var(--sp-8)}
.channels-panel{position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(28,159,224,.07), rgba(232,115,28,.06)), var(--bg-1);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,4vw,2.6rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  box-shadow:0 26px 64px -34px rgba(0,0,0,.6)}
.channels-head h2{margin:.4em 0 .5em}
.channels-head p{color:var(--text-body); max-width:46ch; margin:0; line-height:1.6}
.channels-head .cap{display:inline-flex; align-items:center; gap:.5rem}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none;
  box-shadow:0 0 0 0 rgba(232,115,28,.55); animation:livepulse 2.2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(232,115,28,.55)}70%{box-shadow:0 0 0 7px rgba(232,115,28,0)}100%{box-shadow:0 0 0 0 rgba(232,115,28,0)}}
.channels-cards{display:flex; flex-direction:column; gap:.8rem}
.ch-card{display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text); text-decoration:none;
  transition:border-color .2s, transform .2s, background .2s}
.ch-card:hover{transform:translateY(-2px); background:var(--bg-3)}
.ch-tg:hover{border-color:var(--blue)}
.ch-max:hover{border-color:var(--orange)}
.ch-ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
  font-family:var(--font-head); font-weight:700; font-size:1.3rem}
.ch-ico svg{width:24px; height:24px}
.ch-tg .ch-ico{background:var(--blue); color:#fff}
.ch-max .ch-ico{background:none; padding:0; overflow:hidden}
.ch-max .ch-ico img{width:100%; height:100%; border-radius:13px; display:block}
.ch-body{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.ch-body b{font-family:var(--font-head); font-size:1.02rem}
.ch-sub{font-size:var(--fs-cap); color:var(--text-muted)}
.ch-arr{margin-left:auto; color:var(--text-muted); font-size:1.25rem; transition:transform .2s, color .2s}
.ch-card:hover .ch-arr{transform:translateX(3px)}
.ch-tg:hover .ch-arr{color:var(--blue)}
.ch-max:hover .ch-arr{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* form */
.lead-form{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--sp-6); max-width:480px; box-shadow:var(--shadow-card)}
.lead-form .field{margin-bottom:var(--sp-4)}
.lead-form label{display:block; font-size:var(--fs-sm); color:var(--text); margin-bottom:.4rem}
.lead-form input{width:100%; min-height:48px; background:var(--bg); border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--radius); padding:.85rem 1rem; font-family:var(--font-body); font-size:var(--fs-body)}
.lead-form input:focus{outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue)}
.lead-form input[aria-invalid="true"]{border-color:#e0625a; outline-color:#e0625a}
.lead-form .btn{width:100%; justify-content:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lead-form .consent{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; font-size:var(--fs-cap); color:var(--text-muted); line-height:1.5; cursor:pointer; margin-top:.2rem}
.consent input{margin:1px 0 0; width:18px; height:18px; accent-color:var(--orange); cursor:pointer}
.consent span{min-width:0}
.consent a{color:var(--blue)}
.cookie[hidden]{display:none}
.form-note{font-size:var(--fs-cap); color:var(--text-muted); margin-top:.6rem}
.form-msg{margin-top:1rem; padding:.8rem 1rem; border-radius:var(--radius); display:none}
.form-msg.ok{display:block; background:rgba(40,120,40,.18); border:1px solid #2f5c2f; color:#bfe8bf}
.form-msg.err{display:block; background:rgba(150,40,40,.18); border:1px solid #5c2f2f; color:#e8bfbf}
.form-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center}

/* footer */
.ftr{border-top:1px solid var(--line); background:var(--bg-1); padding-block:var(--sp-8)}
.ftr .container{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-6)}
.ftr a:hover{color:var(--orange)}
.ftr .req{color:var(--text-muted); font-size:var(--fs-cap); margin-top:var(--sp-5); line-height:1.7}
.ftr h4{font-family:var(--font-head); color:var(--text); text-transform:uppercase; font-size:.95rem; margin:0 0 .8rem}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:var(--fs-sm)}
.ftr .logo img{height:76px; width:76px; border-radius:14px}
.ftr .logo{font-size:1.3rem}

/* cookie-баннер */
.cookie{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:var(--z-modal); max-width:780px; margin:0 auto;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.85rem 1.1rem; box-shadow:0 24px 54px -20px rgba(0,0,0,.85)}
.cookie span{font-size:var(--fs-sm); color:var(--text-body); flex:1 1 240px}
.cookie a{color:var(--blue)}
.cookie .btn{padding:.5rem 1.2rem; font-size:.85rem; white-space:nowrap; min-height:42px}

/* scroll reveal */
/* анимацию появления применяем ТОЛЬКО если есть JS (класс .js на <html>) —
   иначе (без JS / краулер / скриншот) контент виден сразу, без opacity:0 */
.js .reveal{opacity:0}  /* GSAP ScrollTrigger (js/anim.js) анимирует вход; opacity:0 — защита от FOUC до загрузки GSAP */

/* responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:var(--sp-6)}
  .channels-panel{grid-template-columns:1fr; gap:var(--sp-5)}
  .cards,.steps,.stats,.revs{grid-template-columns:1fr 1fr} .steps-line{display:none}
  .calc,.form-wrap{grid-template-columns:1fr} .ftr .container{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* калькулятор: на узких экранах ужимаем поля и значение в плитках,
     чтобы «1 800 000 ₽» всегда помещалось в строку (без переноса ₽) */
  .calc{padding:var(--sp-5)}
  .calc-fact{padding:var(--sp-3)}
  .calc-fact .fact-v{font-size:clamp(1.1rem,5vw,1.6rem); white-space:nowrap}
  .nav,.hdr .phone{display:none}
  .hdr .container{gap:.5rem; height:60px}
  .logo{font-size:.95rem; gap:.45rem}
  .logo img{height:46px; width:46px}
  .logo-txt{display:none}   /* иконка лого уже содержит надпись «Честное слово» */
  .btn-call{display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
    padding:.5rem .8rem; font-size:.8rem; background:transparent; color:var(--blue); border:1.5px solid var(--blue)}
  .btn-call svg{width:15px; height:15px}
  .hdr .btn-pay{padding:.55rem .95rem; font-size:.8rem}
  .burger{display:flex}
  .hdr.menu-open .nav{display:flex; flex-direction:column; gap:0; margin:0;
    position:absolute; top:100%; left:0; right:0; background:var(--bg-1);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:.25rem var(--gutter) .6rem; box-shadow:0 26px 44px -24px rgba(0,0,0,.85)}
  .hdr.menu-open .nav a{display:flex; align-items:center; min-height:48px; padding:.85rem .2rem;
    border-bottom:1px solid var(--line); font-size:1.02rem; color:var(--text)}
  .hdr.menu-open .nav a:last-child{border-bottom:0}
  .cards,.steps,.stats,.revs,.ftr .container{grid-template-columns:1fr}
  /* hero — единый ритм: текстовый блок плотно, затем блок действий */
  .hero{padding-top:1.25rem}
  .hero .cap{letter-spacing:.04em; line-height:1.45; font-size:.74rem; margin-bottom:.55rem}
  .hero h1{margin:0 0 .7rem}
  .hero .lead{font-size:1rem; line-height:1.5; margin:0; max-width:34ch}
  .hero-cta{flex-direction:column; gap:.7rem; margin-top:1.6rem}
  .hero-cta .btn{width:100%; flex:none}
  .chips{gap:.5rem; margin-top:1.15rem}
  .chip{padding:.4rem .8rem; font-size:.8125rem}
  .chip .dot{width:7px; height:7px}
}