/* Сайт эфира «Дашборд из 1С с помощью вайб-кодинга» · стеклянная система запуска (та же, что в презентации). */
:root{
  --bg:#eef2f7; --bg2:#f5f7fb; --t:#101828; --t2:#3a4358; --t3:#5c6a86;
  --y:#ffd028; --y2:#c98a00; --ysoft:#fff4cc; --line:rgba(16,24,40,.10);
  --good:#2fa96b; --bad:#e5484d;
  --d:"Gilroy",system-ui,sans-serif; --f:"Inter",system-ui,sans-serif;
  --r:22px; --wrap:1200px; --hh:72px;
  --pad:max(20px, calc((100vw - var(--wrap)) / 2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t);font-family:var(--f);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--d);letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.nb{white-space:nowrap}

/* ── сцена за страницей: сцены сменяют друг друга по мере прокрутки ── */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
.stage i{position:absolute;inset:-6% 0;background-size:cover;background-position:center;opacity:0;
  transition:opacity .9s ease;will-change:opacity,transform}
.stage i.on{opacity:1}
.stage .sc-title{background-image:url(assets/scenes/title.webp)}
.stage .sc-flow{background-image:url(assets/scenes/flow.webp)}
.stage .sc-dash{background-image:url(assets/scenes/dash.webp)}
.stage .sc-ticket{background-image:url(assets/scenes/ticket.webp)}
.stage .sc-gifts{background-image:url(assets/scenes/gifts.webp)}
.page{position:relative;z-index:1}

/* ── шапка ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hh);transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr__logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 15px var(--d);color:var(--t)}
.hdr__logo img{height:34px;width:auto}
.hdr__meta{display:flex;align-items:center;gap:18px;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s;pointer-events:none}
.hdr__date{font:700 14px var(--d);color:var(--t2);letter-spacing:.02em}
.hdr__date b{color:var(--t)}
.hdr.is-on{background:rgba(238,242,247,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.hdr.is-on .hdr__meta{opacity:1;transform:none;pointer-events:auto}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 17px/1 var(--d);padding:17px 26px;border-radius:14px;
  background:var(--y);color:var(--t);text-decoration:none;box-shadow:0 14px 30px rgba(255,208,40,.32), inset 0 1px 0 #fff6;
  transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(255,208,40,.4)}
.btn--sm{padding:12px 18px;font-size:15px;border-radius:12px;box-shadow:0 8px 18px rgba(255,208,40,.28)}
.btn--ghost{background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:none;color:var(--t2)}
.btn--ghost:hover{box-shadow:none;background:#fff}
.btn--dark{background:var(--t);color:#fff;box-shadow:0 14px 30px rgba(16,24,40,.25)}

/* ── стекло и карточки ── */
.g{background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r);padding:26px 28px;
  box-shadow:0 18px 44px rgba(30,50,90,.12), inset 0 1px 0 #fff}
.sec--quiet .g{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 12px 30px rgba(30,50,90,.08)}
.g--hot,.sec--quiet .g--hot{background:linear-gradient(150deg,#ffe479,#ffd028);border-color:#ffe98f}
.g h3{font:700 clamp(19px,1.55vw,23px)/1.25 var(--d);margin:0 0 8px}
.g p{color:var(--t2);font-size:16.5px;line-height:1.5}
.g--hot p{color:#1f2637}
.k{font:800 12px/1 var(--d);letter-spacing:.14em;text-transform:uppercase;color:var(--y2);margin-bottom:12px}
.g--hot .k{color:var(--t)}
.chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px 9px 10px;
  font:700 14.5px var(--d);color:var(--t);box-shadow:0 8px 20px rgba(30,50,90,.08)}
.chip img{height:22px;width:auto}
.pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);border-radius:999px;
  padding:9px 16px;font:700 14px var(--d);color:var(--t2);box-shadow:0 8px 20px rgba(30,50,90,.08)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--good);display:inline-block;box-shadow:0 0 0 4px rgba(47,169,107,.18)}

/* ── секции ── */
.sec{position:relative;padding:clamp(72px,9vh,116px) 0}
.sec--quiet{background:linear-gradient(180deg,#f6f8fb 0%,#e9eef4 100%)}
.sec--scene{background:transparent}
.sec--scene::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(238,242,247,.94) 0%,rgba(238,242,247,.72) 42%,rgba(238,242,247,.12) 66%,rgba(238,242,247,0) 80%)}
.sec > .wrap{position:relative}
.sh{max-width:780px;margin-bottom:clamp(28px,4vh,44px)}
.lbl{font:700 12px/1 var(--d);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin:0 0 14px}
.lbl b{color:var(--y2)}
.h2{font:800 clamp(32px,4vw,56px)/1.06 var(--d);letter-spacing:-.025em}
.lead{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--t2);margin-top:14px;max-width:640px}
.sec__foot{margin-top:clamp(28px,4vh,40px);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.note{color:var(--t3);font-size:15.5px;line-height:1.5}

/* ── первый экран ── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(238,242,247,.95) 0%,rgba(238,242,247,.78) 40%,rgba(238,242,247,.2) 62%,rgba(238,242,247,0) 78%)}
.hero__col{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.9vh,20px);
  padding:calc(var(--hh) + 2vh) 0 4vh var(--pad);max-width:calc(var(--pad) + 700px)}
.hero__aud{font:700 12.5px/1.4 var(--d);letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.hero h1{font:800 min(5.6vw,9vh)/1.02 var(--d);letter-spacing:-.03em;max-width:12ch}
.hero__sub{font-size:min(1.35vw,2.6vh);line-height:1.5;color:var(--t2);max-width:52ch}
.hero__row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__trust{font-size:14px;color:var(--t3)}
.hero__trust b{color:var(--t2);font-weight:600}
.hero__bonus{display:flex;gap:16px;align-items:center;max-width:560px;padding:16px 20px}
.hero__bonus .k{margin:0 0 4px}
.hero__bonus b{font:700 16.5px/1.3 var(--d);display:block}
.hero__bonus p{font-size:14.5px;line-height:1.45}
.hero__bonus .ic{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,#ffe479,#ffd028);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(255,208,40,.35)}
.hero__bonus .ic svg{width:26px;height:26px}
.hero__art{position:relative;z-index:1}
.hero__art img{position:absolute;bottom:0;right:max(12px,calc((100vw - 1500px)/2));height:min(90vh,920px);width:auto;max-width:none;
  filter:drop-shadow(0 30px 60px rgba(30,50,90,.28))}
.hero__face{display:none}

/* ── bento ── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bento .wide{grid-column:span 2}
.bento .full{grid-column:1/-1;display:flex;gap:18px;align-items:center}
.bento .full p{font-size:17.5px;color:var(--t)}
.bento .full .ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font:800 20px var(--d)}

/* ── маршрут ── */
.route{max-width:640px}
.steps{display:grid;gap:12px;margin-top:26px}
.step{display:flex;gap:16px;align-items:flex-start;padding:14px 18px}
.step i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--y);font:800 17px var(--d);font-style:normal;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(30,50,90,.14)}
.step div{font-size:16.5px;line-height:1.45;color:var(--t2);padding-top:8px}
.step b{color:var(--t);font-weight:600}

/* ── карусель программы ── */
.car__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.car__head .sh{margin-bottom:0}
.car__nav{display:flex;gap:10px;flex:none}
.car__nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(30,50,90,.08);transition:transform .2s}
.car__nav button:hover{transform:translateY(-2px)}
.car__nav svg{width:18px;height:18px}
.car__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  padding:6px var(--pad) 28px;margin:0 calc(-1 * var(--pad));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car__track::-webkit-scrollbar{display:none}
.pc{flex:0 0 clamp(260px,25vw,330px);scroll-snap-align:start;padding:14px 14px 20px;position:relative}
.pc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.pc .num{position:absolute;top:26px;left:26px;background:var(--y);font:800 14px var(--d);border-radius:10px;padding:7px 10px;box-shadow:0 8px 18px rgba(30,50,90,.16)}
.pc h3{font-size:19px;margin:14px 6px 6px}
.pc p{font-size:15px;margin:0 6px;line-height:1.45}
.car__count{font-size:14px;color:var(--t3);margin-top:4px}

/* ── цифры кейса ── */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px}
.num b{display:block;font:800 clamp(30px,3.2vw,50px)/1.05 var(--d);letter-spacing:-.03em;color:var(--t)}
.num b small{font-size:.55em;font-weight:800;letter-spacing:0;margin-left:4px;color:var(--y2)}
.num span{display:block;font-size:15.5px;color:var(--t2);margin-top:10px;line-height:1.45}

/* ── подарки ── */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gifts .two{grid-template-columns:1fr 1fr}
.gift img{width:100%;max-height:230px;object-fit:contain;border-radius:14px;margin-bottom:16px}
.gift .k{margin-bottom:8px}
.gifts--reg{grid-template-columns:1fr 1fr;margin-bottom:18px}

/* ── спикер ── */
.spk{display:grid;grid-template-columns:400px 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.spk__ph{position:relative;height:560px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#f8fafd 0%,#dfe6ef 100%);
  box-shadow:0 24px 50px rgba(30,50,90,.16), inset 0 1px 0 #fff}
.spk__ph > img{position:absolute;left:50%;bottom:-2%;height:104%;width:auto;transform:translateX(-50%);max-width:none}
.spk__ph .chip img{position:static;height:22px;width:auto;transform:none}
.spk__ph .chip{position:absolute;left:18px;bottom:18px}
.spk .h2{margin-top:10px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.facts .g{padding:18px 20px}
.facts b{display:block;font:800 30px/1 var(--d);color:var(--t);margin-bottom:6px}
.facts b.s{font-size:19px;line-height:1.25}
.facts span{font-size:15px;color:var(--t2);line-height:1.4}
.spk__q{margin-top:18px;padding:16px 20px;border-left:4px solid var(--y);font-size:16.5px;color:var(--t)}

/* ── тарифы ── */
.tt{width:100%;border-collapse:separate;border-spacing:0;font-size:16.5px}
.tt th,.tt td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.tt th:first-child,.tt td:first-child{text-align:left;color:var(--t);font-weight:600}
.tt th{font:700 13px var(--d);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding-bottom:12px}
.tt th .price{display:block;font:800 30px/1 var(--d);color:var(--t);letter-spacing:-.02em;margin-top:8px;text-transform:none}
.tt th .price small{font-size:14px;letter-spacing:0;color:var(--t3);font-weight:700;margin-left:6px}
.tt td.paid,.tt th.paid{background:rgba(255,236,160,.45)}
.tt th.paid{border-top:3px solid var(--y);border-radius:14px 14px 0 0}
.tt tr:last-child td{border-bottom:0}
.tt .ok{color:var(--good);font-weight:700}
.tt .no{color:var(--bad);font-weight:700}
.tt .soft{color:var(--t3);font-size:14.5px}
.tt td .btn{width:100%}
.tt .paid .btn{background:var(--y)}
.tcards{display:none}
.tcard .ul{list-style:none;margin:14px 0 18px;padding:0;font-size:15.5px;color:var(--t2)}
.tcard .ul li{padding:7px 0 7px 26px;position:relative;border-bottom:1px solid var(--line)}
.tcard .ul li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
.tcard .ul li.off{color:var(--t3)}
.tcard .ul li.off::before{content:"✗";color:var(--bad)}
.tcard .price{font:800 34px/1 var(--d);margin:6px 0 4px}

/* ── FAQ ── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q{padding:0}
.q summary{list-style:none;cursor:pointer;padding:20px 52px 20px 24px;font:700 17.5px/1.3 var(--d);position:relative}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:22px;top:22px;width:14px;height:14px;border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);transform:rotate(45deg);transition:transform .25s}
.q[open] summary::after{transform:rotate(-135deg);top:28px}
.q .a{padding:0 24px 22px;color:var(--t2);font-size:16px;line-height:1.5}

/* ── финал ── */
.final{max-width:640px}
.final .h2{font-size:clamp(36px,4.6vw,64px)}
.cd{display:inline-flex;gap:8px;align-items:baseline;font:700 15px var(--d);color:var(--t2);background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);border-radius:999px;padding:9px 16px}
.cd b{font-size:20px;color:var(--t)}

/* ── подвал ── */
.ftr{background:#101828;color:#aeb8c9;padding:56px 0 40px;font-size:14.5px;position:relative;z-index:1}
.ftr .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.ftr h4{margin:0 0 12px;font:700 13px var(--d);letter-spacing:.14em;text-transform:uppercase;color:#e8edf5}
.ftr a{color:#e8edf5;text-decoration:none;border-bottom:1px solid rgba(232,237,245,.25)}
.ftr a:hover{border-color:#fff}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__brand img{height:36px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.ftr__copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:8px;color:#7d8aa3;font-size:13px}

/* ── появление ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.stage i{transition:none}html{scroll-behavior:auto}}

/* ── планшет ── */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 1fr}
  .hero h1{font-size:min(6vw,8.5vh)}
  .bento{grid-template-columns:1fr 1fr}
  .bento .wide{grid-column:span 2}
  .nums,.gifts{grid-template-columns:1fr 1fr}
  .spk{grid-template-columns:340px 1fr}
  .spk__ph{height:480px}
  .ftr .wrap{grid-template-columns:1fr 1fr}
}
/* ── телефон ── */
@media (max-width:760px){
  :root{--hh:60px}
  body{font-size:16px}
  .hdr__logo img{height:28px}
  .hdr__date{display:none}
  .hdr .btn--sm{padding:11px 14px;font-size:14px}
  .stage i{inset:0}
  .stage .sc-title{background-image:url(assets/scenes/title-m.webp);background-position:center top}
  .stage .sc-flow{background-image:url(assets/scenes/flow-m.webp)}
  .stage .sc-dash{background-image:url(assets/scenes/dash-m.webp)}
  .stage .sc-ticket{background-image:url(assets/scenes/ticket-m.webp)}
  .stage .sc-gifts{background-image:url(assets/scenes/gifts-m.webp)}
  .sec--scene::before,.hero::before{background:linear-gradient(180deg,rgba(238,242,247,.94) 0%,rgba(238,242,247,.86) 55%,rgba(238,242,247,.5) 100%)}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__col{padding:calc(var(--hh) + 18px) 20px 22px;max-width:none;gap:14px}
  .hero h1{font-size:clamp(34px,10.5vw,44px);max-width:none}
  .hero__sub{font-size:16px;max-width:none}
  .hero__art{display:none}
  .hero__face{display:flex;align-items:center;gap:14px}
  .hero__face img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 8px 20px rgba(30,50,90,.18);border:2px solid #fff}
  .hero__face b{display:block;font:700 16px var(--d)}
  .hero__face span{font-size:14px;color:var(--t2)}
  .hero__cta .btn{width:100%}
  .hero__cta .btn--ghost{display:none}
  .hero__bonus{padding:14px 16px}
  .sec{padding:56px 0}
  .bento,.nums,.gifts,.gifts--reg,.faq,.facts{grid-template-columns:1fr}
  .bento .wide{grid-column:auto}
  .bento .full{flex-direction:row}
  .g{padding:20px 20px}
  .car__nav{display:none}
  .pc{flex-basis:78vw}
  .spk{grid-template-columns:1fr}
  .spk__ph{height:420px}
  .tt{display:none}
  .tcards{display:grid;gap:16px}
  .ftr .wrap{grid-template-columns:1fr}
}

/* ── низкие окна: первый экран обязан влезать целиком ── */
@media (min-width:761px) and (max-height:900px){
  .hero__col{gap:10px;padding-top:calc(var(--hh) + 1vh);padding-bottom:2vh}
  .hero h1{font-size:min(5.4vw,7.9vh)}
  .hero__sub{font-size:min(1.25vw,2.3vh)}
  .hero__bonus{padding:12px 16px}
  .hero__bonus p{font-size:13.5px}
  .hero__bonus .ic{width:44px;height:44px}
  .hero__trust{font-size:13px}
  .hero__art img{height:min(86vh,900px)}
}
@media (min-width:761px) and (max-height:700px){
  .hero__trust{display:none}
}

@media (min-width:761px) and (max-height:760px){
  .hero__col{gap:8px;padding-bottom:1vh}
  .hero h1{font-size:min(5.2vw,7.5vh)}
  .hero__bonus p{display:none}
}

/* ── правки после первой ленты ── */
.nums{max-width:820px}
.num b{white-space:nowrap;font-size:clamp(26px,2.5vw,40px)}
.num b.long{font-size:clamp(22px,2.1vw,34px)}
.tt-wrap{max-width:1000px}
@media (max-width:760px){.num b{white-space:normal}}