/* NEVER AGAIN — лендинг. Цвета из логотипа: оранжевый + светло-голубой на тёмном. */

:root{
  /* палитра проекта: голубой #BFECFF, оранжевый #FD6C03, бежевый #EBEBDF */
  --orange:#FD6C03; --orange-deep:#E05E00; --blue:#BFECFF; --blue-deep:#1E7FA6;
  --ink:#1A1917; --paper:#EBEBDF;
  --font-display:"Unbounded","Arial Black",Impact,sans-serif;
  --font-body:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --max:1180px; --pad:clamp(20px,4vw,48px);
  --r:6px;
}
/* полосы: у каждой свой набор токенов, компоненты читают только их */
.band-light{ --bg:var(--paper); --bg-2:#FFFFFF; --fg:#1A1917; --fg-2:#3D3B36; --muted:#6F6C63; --line:#D4D3C4; --accent:var(--orange); --accent-2:#1E7FA6; }
.band-blue { --bg:var(--blue);  --bg-2:#FFFFFF; --fg:#14232B; --fg-2:#2F4650; --muted:#4F6B78; --line:#93D6F0; --accent:var(--orange); --accent-2:#DE5E00; }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.05; text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

.band{background:var(--bg); color:var(--fg)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.section{padding:clamp(72px,9vw,128px) 0}
.eyebrow{font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); margin-bottom:22px}
.h2{font-size:clamp(30px,4.6vw,54px); max-width:16ch}
.h3{font-family:var(--font-body); font-weight:600; font-size:20px; letter-spacing:-.01em; line-height:1.3}
.lede{font-size:clamp(18px,1.7vw,21px); line-height:1.55; color:var(--fg-2); max-width:58ch}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---- кнопки ---- */
.btn{display:inline-flex; align-items:center; gap:12px; padding:18px 28px; border-radius:var(--r); background:var(--orange); color:#1A1917; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; border:2px solid var(--orange); transition:transform .18s ease, background .18s ease, box-shadow .18s ease; white-space:nowrap}
.btn:hover{background:var(--orange-deep); border-color:var(--orange-deep); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(255,90,15,.75)}
.btn .arr{font-family:var(--font-body); font-weight:400; font-size:20px; line-height:1; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2); border-color:var(--fg); box-shadow:none}
.btn-sm{padding:12px 18px; font-size:12px}

/* ---- шапка ---- */
.top{position:sticky; top:0; z-index:20; background:rgba(235,235,223,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #D4D3C4}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; min-width:0}
.top .btn-sm{flex:none}
.brand{display:flex; flex-direction:column; gap:3px; font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1; letter-spacing:.02em; color:var(--orange); text-decoration:none}
.brand small{color:var(--blue-deep); font-weight:700; font-size:9.5px; letter-spacing:.2em}
.top nav{display:flex; gap:26px; font-size:14px; font-weight:500}
.top nav a{color:#3D3B36; text-decoration:none}
.top nav a:hover{color:var(--orange)}
.top .btn-sm .s{display:none}
@media(max-width:820px){
  .top nav{display:none}
  .top .wrap{height:auto; min-height:60px; padding-top:10px; padding-bottom:10px; gap:12px}
  .top .btn-sm{padding:11px 16px; font-size:11.5px}
}
@media(max-width:400px){.top .btn-sm .l{display:none} .top .btn-sm .s{display:inline}}

/* ---- hero ---- */
.hero{padding:clamp(56px,7vw,110px) 0 0; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); min-width:0; gap:clamp(28px,5vw,72px); align-items:center}
.hero h1{font-size:clamp(38px,6.2vw,76px); font-weight:800; margin:0 0 26px}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero .lede{margin-bottom:34px}
.hero .cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:54px}
.hero .cta .hint{font-size:14px; color:var(--muted); max-width:24ch; line-height:1.4}
.stats{display:grid; grid-template-columns:repeat(3,auto); gap:clamp(24px,4vw,56px); padding:28px 0 0; border-top:1px solid var(--line); margin-bottom:clamp(40px,5vw,72px)}
.stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.8vw,46px); line-height:1; color:var(--fg); letter-spacing:-.02em}
.stat span{display:block; margin-top:8px; font-size:13.5px; color:var(--muted); letter-spacing:.02em}
.hero .grid{align-items:center}
.collage{position:relative; width:100%; aspect-ratio:5/6; margin-bottom:clamp(40px,5vw,72px)}
.collage img{position:absolute; object-fit:cover; border-radius:var(--r); border:5px solid #fff; box-shadow:0 30px 50px -28px rgba(15,14,13,.45), 0 2px 6px rgba(15,14,13,.08); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.collage .c1{left:0; top:4%; width:56%; aspect-ratio:3/4; transform:rotate(-4deg); z-index:1}
.collage .c2{right:2%; top:0; width:38%; aspect-ratio:3/4; transform:rotate(5deg); z-index:2}
.collage .c3{left:26%; bottom:2%; width:72%; aspect-ratio:4/3; transform:rotate(-2.5deg); z-index:3}
.collage:hover .c1{transform:rotate(-6deg) translateY(-6px)}
.collage:hover .c2{transform:rotate(7deg) translateY(-4px)}
.collage:hover .c3{transform:rotate(-1deg) translateY(-6px)}
.collage .badge{position:absolute; left:6%; bottom:14%; z-index:4; width:118px; height:118px; border-radius:50%; background:var(--orange); color:#0F0E0D; font-family:var(--font-display); font-weight:800; font-size:34px; line-height:.9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transform:rotate(-10deg); box-shadow:0 20px 40px -20px rgba(255,90,15,.7)}
.collage .badge small{font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.stat b.inf{font-size:clamp(44px,5.6vw,68px); line-height:.72; transform:translateY(3px)}
@media(max-width:900px){
  .hero .grid{grid-template-columns:minmax(0,1fr)}
  .collage{max-width:440px; margin:0 auto clamp(40px,5vw,72px); aspect-ratio:1/1}
  .collage .badge{width:96px; height:96px; font-size:28px}
  .stats{grid-template-columns:repeat(3,1fr); gap:12px} .stat b{font-size:28px}
}

/* ---- бегущая строка ---- */
.marquee{background:var(--orange); color:#1A1917; overflow:hidden; padding:14px 0; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.marquee .track{display:inline-flex; gap:0; animation:mq 38s linear infinite; will-change:transform}
.marquee span{padding:0 28px}
.marquee i{font-style:normal; padding:0 10px; font-size:15px; vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ---- что ждёт ---- */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start}
@media(max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
.checks li{position:relative; padding:16px 0 16px 38px; border-bottom:1px solid var(--line); font-size:17px; color:var(--fg)}
.checks li::before{content:""; position:absolute; left:0; top:22px; width:18px; height:18px; border-radius:50%; background:var(--accent); mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black'/><path d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black'/><path d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none'/></svg>") center/contain no-repeat}
.nots{margin-top:8px}
.nots li{padding:14px 0; border-bottom:1px solid var(--line); color:var(--fg); font-size:17px; display:flex; gap:14px; align-items:center}
.nots li::before{content:"✕"; color:var(--accent); font-weight:700; font-size:15px; flex:none; width:22px; height:22px; border:2px solid var(--accent); border-radius:6px; display:grid; place-items:center; line-height:1}
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px}
.card + .card{margin-top:14px}
.card .tag{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px}
.card .h3{margin-bottom:8px}
.card p{color:var(--fg-2); font-size:16px}

/* ---- об Анастасии ---- */
.about .grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:center}
.about figure{margin:0}
.about figure img{border-radius:var(--r); aspect-ratio:3/4; object-fit:cover}
.about .name{font-size:clamp(28px,3.6vw,42px); margin-bottom:14px}
.about .role{color:var(--muted); font-size:15px; margin-bottom:26px}
.about p + p{margin-top:16px}
.quote{margin:34px 0 0; padding:0 0 0 22px; border-left:3px solid var(--orange); font-size:clamp(19px,2vw,23px); line-height:1.45; font-weight:500; letter-spacing:-.01em; color:var(--fg)}
.quote cite{display:block; margin-top:12px; font-style:normal; font-size:14px; color:var(--muted)}
@media(max-width:820px){.about .grid{grid-template-columns:minmax(0,1fr)}}
.strip{margin-top:clamp(40px,5vw,72px)}
.strip-h{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); margin-bottom:18px}
.strip .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.strip img{border-radius:var(--r); width:100%; aspect-ratio:16/9; object-fit:cover}
@media(max-width:700px){.strip .row{grid-template-columns:1fr}}

/* ---- отзывы ---- */
.reviews-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:34px; flex-wrap:wrap}
.reviews-head .lede{max-width:44ch}
/* отзывы — скрины как пришпиленные карточки */
.shots{columns:3; column-gap:18px}
.shot{break-inside:avoid; margin:0 0 18px; background:#fff; border-radius:10px; padding:9px; box-shadow:0 14px 34px -20px rgba(20,35,43,.45), 0 1px 3px rgba(20,35,43,.08); transform:rotate(var(--tilt,0deg)); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.shot:nth-child(3n+1){--tilt:-1.3deg} .shot:nth-child(3n+2){--tilt:.9deg} .shot:nth-child(3n){--tilt:-.5deg}
.shot:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 24px 44px -22px rgba(20,35,43,.5)}
.shot img{width:100%; height:auto; display:block; border-radius:6px}
.shots[data-collapsed="1"] .shot:nth-child(n+7){display:none}
.shots-more{display:flex; justify-content:center; margin:10px 0 28px}
.shots-more .btn-ghost{background:#fff; border-color:#fff; color:var(--fg)}
.shots-more .btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
@media(max-width:900px){.shots{columns:2} .shots[data-collapsed="1"] .shot:nth-child(n+5){display:none}}
@media(max-width:560px){.shots{columns:1} .shots[data-collapsed="1"] .shot:nth-child(n+4){display:none}}
.gal-h{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); margin-bottom:22px}
.car-wrap{position:relative; padding:0 60px}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:2px solid var(--accent); background:var(--bg); color:var(--accent); font-size:20px; cursor:pointer; display:grid; place-items:center; transition:background .15s, color .15s; z-index:2}
.car-btn.prev{left:0} .car-btn.next{right:0}
.car-btn:hover{background:var(--accent); color:#1A1917}
.car{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 28px) / 3); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px}
.car::-webkit-scrollbar{display:none}
.res{scroll-snap-align:start; margin:0; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:8px; display:flex; flex-direction:column; gap:10px}
.res img{border-radius:4px; aspect-ratio:1/1; object-fit:cover; width:100%}
.res figcaption{display:flex; align-items:center; gap:8px; padding:0 4px 4px; font-size:13px; color:var(--fg-2); letter-spacing:.02em}
.res figcaption b{font-family:var(--font-display); color:var(--accent); font-size:13px; margin-right:4px}
.res figcaption i{font-style:normal; color:var(--accent)}
@media(max-width:860px){.car{grid-auto-columns:calc((100% - 14px) / 2)}}
@media(max-width:520px){.car-wrap{padding:0} .car{grid-auto-columns:88%} .car-btn{width:40px; height:40px; background:rgba(255,255,255,.9)} .car-btn.prev{left:6px} .car-btn.next{right:6px}}
.closer{margin-top:clamp(48px,6vw,80px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:center; padding-top:40px; border-top:1px solid var(--line)}
.closer .cta{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.closer .cta .hint{font-size:14px; color:var(--muted); max-width:34ch; line-height:1.45}
.closer .price{margin-bottom:0}
.closer .h3{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.8vw,32px); line-height:1.15; max-width:22ch}
.closer .note{margin-top:12px; color:var(--muted); font-size:15px}
@media(max-width:760px){.closer{grid-template-columns:minmax(0,1fr)}}

/* ---- план ---- */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:44px 0 0}
.cat{border:1px solid var(--line); border-radius:var(--r); padding:24px 22px 22px; background:var(--bg-2)}
.cat .n{font-family:var(--font-display); font-weight:800; font-size:44px; line-height:1; color:var(--accent); letter-spacing:-.03em; margin-bottom:14px}
.cat .h3{margin-bottom:8px; font-size:18px}
.cat p{font-size:14.5px; color:var(--fg-2); line-height:1.5}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cats{grid-template-columns:1fr}}
.formats{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); margin-top:clamp(48px,6vw,80px); padding-top:40px; border-top:1px solid var(--line)}
.formats .h3{margin-bottom:16px}
.dl div{padding:12px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:120px 1fr; gap:16px; font-size:15.5px}
.dl dt{margin:0; font-weight:600; color:var(--fg)}
.dl dd{margin:0; color:var(--fg-2)}
@media(max-width:820px){.formats{grid-template-columns:1fr}}
.plan-table{margin-top:clamp(48px,6vw,80px)}
.plan-table .h3{margin-bottom:18px; font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px)}
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15.5px}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
thead th{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--bg)}
tbody tr:last-child td{border-bottom:none}
td.i{font-family:var(--font-display); font-weight:700; color:var(--accent); width:64px; font-size:14px}
td.t{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg)}
td.e{color:var(--fg-2); white-space:nowrap}
tbody tr:hover td{background:color-mix(in srgb, var(--accent) 5%, transparent)}

/* ---- как работает ---- */
.how .grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:center}
.how figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.steps li{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.steps b{font-family:var(--font-display); color:var(--accent); font-size:13px; padding-top:4px}
.steps span{color:var(--fg-2); font-size:16.5px}
@media(max-width:860px){.how .grid{grid-template-columns:minmax(0,1fr)}}

/* ---- подарки ---- */
.gifts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.gift{border:1px solid var(--line); background:var(--bg-2); border-radius:var(--r); padding:28px 26px; display:flex; flex-direction:column; gap:12px; min-height:240px}
.gift .k{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.gift .h3{font-size:19px}
.gift p{color:var(--fg-2); font-size:15px; flex:1}
.gift .v{font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--fg); letter-spacing:-.03em; line-height:1}
@media(max-width:1000px){.gifts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gifts{grid-template-columns:1fr}}

/* ---- faq ---- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; font-weight:600; font-size:17.5px; position:relative; color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:14px; height:14px; transform:translateY(-50%); background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat, linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat; transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 24px; color:var(--fg-2); max-width:62ch; font-size:16.5px}

/* ---- финал ---- */
.offer{position:relative; overflow:hidden}
.offer .wrap{position:relative}
.offer h2{font-size:clamp(40px,7vw,88px); font-weight:800; line-height:.98; margin-bottom:22px}
.offer h2 em{font-style:normal; color:var(--orange)}
.offer .lede{margin-bottom:36px}
.price{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:34px}
.price b{font-family:var(--font-display); font-weight:800; font-size:clamp(36px,5vw,60px); letter-spacing:-.03em; line-height:1}
.price span{color:var(--muted); font-size:15px}
.offer .cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.offer .cta .hint{font-size:14px; color:var(--muted); max-width:30ch; line-height:1.4}

/* ---- футер ---- */
footer{background:var(--paper); color:#6F6C63; padding:44px 0; border-top:1px solid #D4D3C4; font-size:14px}
footer .wrap{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center}
footer .brand{font-size:15px}
footer .tag{margin-top:6px}
footer nav{display:flex; gap:22px; flex-wrap:wrap}
footer nav a{color:#3D3B36; text-decoration:none}
footer nav a:hover{color:var(--orange)}
@media(max-width:700px){footer .wrap{grid-template-columns:1fr}}

/* ---- появление при скролле ---- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ---- кнопки на телефоне: во всю ширину и с переносом текста ---- */
@media(max-width:600px){
  .btn:not(.btn-sm){white-space:normal; width:100%; justify-content:center; text-align:center; padding:17px 20px; font-size:13px; line-height:1.3}
  .hero .cta,.offer .cta{flex-direction:column; align-items:stretch; gap:14px}
  .hero .cta .hint,.offer .cta .hint{max-width:none; text-align:center}
}


/* ================= v15: видео-hero, тарифы, слайдер ================= */
.hero{padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px); text-align:center}
.hero-h{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.2vw,62px); line-height:1.06; letter-spacing:-.02em; margin:0 auto 24px; max-width:18ch; text-wrap:balance}
.hero-h em{font-style:normal; color:var(--accent)}
.hero-lede{font-size:clamp(16px,1.55vw,19px); line-height:1.6; color:var(--fg-2); max-width:70ch; margin:0 auto clamp(30px,4vw,44px)}
.player{margin:0 auto clamp(26px,3.5vw,38px); max-width:920px; border-radius:14px; overflow:hidden; background:#0E1114; box-shadow:0 40px 90px -46px rgba(20,35,43,.55), 0 2px 8px rgba(20,35,43,.12)}
.player video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0E1114}
.hero-cta{display:flex; justify-content:center; margin-bottom:clamp(40px,5vw,64px)}
.hero .stats{grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,44px); border-top:1px solid var(--line); padding-top:30px; max-width:920px; margin:0 auto; text-align:center}
.hero .stat b{font-size:clamp(22px,3vw,40px)}
.hero .stat span{max-width:20ch; margin-left:auto; margin-right:auto}
@media(max-width:700px){.hero .stats{grid-template-columns:1fr; gap:18px} .hero .stat b{font-size:26px}}

/* тарифы */
.tariffs{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px; align-items:start}
.tar{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:30px 28px 28px; display:flex; flex-direction:column; gap:14px}
.tar-top{border-color:var(--accent); box-shadow:0 26px 60px -34px rgba(253,108,3,.55)}
.tar-badge{position:absolute; top:-13px; right:24px; background:var(--accent); color:#1A1917; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:20px}
.tar-name{font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.8vw,21px); line-height:1.2; margin:0; min-height:2.4em}
.tar-price{display:flex; align-items:baseline; gap:10px; margin:0}
.tar-price b{font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,46px); letter-spacing:-.03em; line-height:1}
.tar-price span{color:var(--muted); font-size:16px}
.tar-desc{color:var(--fg-2); font-size:15px; margin:0; min-height:3.2em}
.tar-list{display:flex; flex-direction:column; gap:0; flex:1; border-top:1px solid var(--line); margin-top:4px}
.tar-list li{position:relative; padding:11px 0 11px 30px; border-bottom:1px solid var(--line); font-size:15px; line-height:1.4}
.tar-list li::before{position:absolute; left:0; top:11px; width:19px; height:19px; border-radius:5px; display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1}
.tar-list li.yes{color:var(--fg)}
.tar-list li.yes::before{content:"✓"; background:var(--accent); color:#1A1917}
.tar-list li.no{color:var(--muted)}
.tar-list li.no::before{content:"✕"; border:1.5px solid var(--line); color:var(--muted)}
.tar .btn{margin-top:8px; justify-content:center}
@media(max-width:860px){.tariffs{grid-template-columns:1fr} .tar-name,.tar-desc{min-height:0}}

/* слайдер «смахни» */
.slider{position:relative; margin:clamp(40px,5vw,64px) 0 0}
.slider-track{display:grid; grid-auto-flow:column; grid-auto-columns:min(320px,72vw); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px}
.slider-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center; margin:0; border-radius:12px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line)}
.slide img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover}
.slider-btn{position:absolute; top:calc(50% - 16px); transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:2px solid var(--accent); background:var(--bg); color:var(--accent); font-size:20px; cursor:pointer; display:grid; place-items:center; z-index:2; transition:background .15s, color .15s}
.slider-btn:hover{background:var(--accent); color:#1A1917}
.slider-btn.prev{left:-6px} .slider-btn.next{right:-6px}
.slider-note{text-align:center; color:var(--muted); font-size:13.5px; margin-top:14px}
@media(max-width:700px){.slider-btn{display:none} .slider-track{grid-auto-columns:80%}}

/* как это работает: галочки вместо цифр */
.checks-list li{grid-template-columns:28px 1fr}
.checks-list li::before{content:"✓"; color:var(--accent); font-weight:700; font-size:16px; padding-top:2px}
.support-line{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:15px; color:var(--fg-2)}
.support-line a{color:var(--accent); font-weight:600; text-decoration:none}
.support-line a:hover{text-decoration:underline}