/* p³ bot v2 «The Felt» — один CSS, токены «Acid felt». Сцена WebGL — fixed-канвас за контентом (design/v2-webgl/CONCEPT.md). */
:root{
  --ink:#0B0B10;--ink2:#17171E;--line:#2A2A33;--line2:#1E1E26;
  --acid:#FFD23F;--acid-hover:#FFE27A;--felt:#0F3D2E;--felt2:#1E4D3B;--felt3:#0C3327;
  --win:#2ED573;--mint:#7EE2B0;--paper:#F4F1EA;--paper-line:#DAD6CB;--red:#E5383B;
  --text:#F4F1EA;--muted:#B8B8C2;--muted2:#9A9AA3;--dark-muted:#4A4A52;--dark-muted2:#6B6B72;--gold-text:#7A6A1C;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;--mono:'IBM Plex Mono',Menlo,Consolas,monospace;--display:'Gabarito','Avenir Next','Segoe UI',sans-serif;
  --r:14px;--gutter:20px;--maxw:1200px;--col:560px;--top:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding-top:var(--top);overflow-x:clip}
main{overflow-x:clip}
a{color:var(--acid);text-decoration:none}a:hover{color:var(--text)}
img{max-width:100%;height:auto;display:block}
sup{font-size:.6em;vertical-align:top;position:relative;top:.15em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.d,.h1,.h2,.h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.m,.eyebrow,.num{font-family:var(--mono)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acid);margin:0 0 10px}
.h1{font-size:clamp(38px,10vw,46px);line-height:.98;margin:0;text-wrap:balance}
.h2{font-size:clamp(26px,7vw,32px);line-height:1.02;margin:0;text-wrap:balance}
.h3{font-size:20px;line-height:1.1;margin:0}
.lead{font-size:17px;line-height:1.45;color:var(--muted)}
@media(min-width:900px){.h1{font-size:clamp(56px,5.6vw,84px);line-height:.94}.h2{font-size:42px}.lead{font-size:20px}}

/* ===== сцена ===== */
.gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.poster{display:none}
.no3d .gl{display:none}
.no3d .poster{display:block;position:fixed;inset:0;z-index:0;pointer-events:none}
.no3d .poster img{width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.9}
main,.band,.foot,.top{position:relative;z-index:1}

/* ===== кнопки ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:44px;padding:0 18px;border-radius:var(--r);font-weight:600;font-size:16px;color:var(--ink);background:var(--acid);transition:background .15s,transform .15s}
.btn:hover{background:var(--acid-hover);color:var(--ink)}.btn:active{transform:translateY(1px)}
.btn--primary{height:58px;font-size:18px;box-shadow:0 10px 30px rgba(255,210,63,.25);width:100%}
.btn--ghost{background:rgba(23,23,30,.7);color:var(--text);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}.btn--ghost:hover{background:var(--ink2);color:var(--text)}
.btn--inverse{background:var(--ink);color:var(--acid)}.btn--inverse:hover{background:#1c1c24;color:var(--acid)}
.btn--pill{height:44px;padding:0 16px;border-radius:999px;font-size:14px}
.btn sup{top:.1em}.btn>span{display:inline-block;line-height:1}
@media(min-width:900px){.btn--primary{height:62px;font-size:19px;width:auto;padding:0 28px}}

/* ===== шапка (fixed, полупрозрачная над сценой) ===== */
.top{position:fixed;top:0;left:0;right:0;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 18px;background:rgba(11,11,16,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line2);z-index:5}
.top__brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text)}
.wordmark{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.03em;line-height:1}
.top__nav{display:none}
.top .btn--pill{margin-left:auto}
.top__burger{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.nav-open .top__nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:rgba(11,11,16,.96);border-bottom:1px solid var(--line2);padding:8px 18px 16px}
.nav-open .top__nav a{color:var(--text);font-weight:600;font-size:18px;min-height:48px;display:flex;align-items:center}
@media(min-width:900px){
  :root{--top:76px}
  .top{padding:0 64px;gap:36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .top .btn--pill{justify-self:end;margin-left:0}
  .wordmark{font-size:21px}
  .top__nav{display:flex;gap:36px;justify-self:center}.top__nav a{color:#D8D8DF;font-weight:600;font-size:18px;min-height:44px;display:inline-flex;align-items:center}.top__nav a:hover{color:var(--acid)}
  .top__burger{display:none}
}

/* ===== биты: колонка текста + место для сцены ===== */
.beat{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0 var(--gutter)}
.beat .col{position:relative;z-index:1;padding:28px 0 0}
.stage-gap{height:58vh}
@media(max-width:899px){.beat--final{display:flex;flex-direction:column;padding:0}.beat--final .stage-gap{order:-1;height:54vh}.beat--final .col{padding:28px var(--gutter) 36px;background:var(--acid)}}
.beat--hero .col{padding-top:22px}
.beat--hero .stage-gap{height:52vh;margin-top:18px}
.hero__cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.beat .eyebrow .dot,.home .eyebrow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--win);box-shadow:0 0 12px var(--win);margin-right:8px;vertical-align:middle}
.beat--hero .lead{margin:18px 0 0}

.panel{background:rgba(23,23,30,.86);border:1px solid var(--line);border-radius:24px;padding:22px 20px 24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.panel--paper{background:rgba(244,241,234,.96);color:var(--ink);border-color:var(--paper-line)}
.panel--paper .eyebrow{color:var(--gold-text)}.panel--paper a{color:var(--ink);border-bottom:2px solid var(--ink)}.panel--paper a:hover{color:var(--dark-muted)}
.panel--felt{background:rgba(15,61,46,.9);border-color:var(--felt2)}.panel--felt .eyebrow{color:var(--mint)}.panel--felt a{color:var(--mint)}
.panel .body{margin-top:16px;font-size:15px;line-height:1.5}
.panel .body p{margin:0 0 14px;text-wrap:pretty}.panel .body li{text-wrap:pretty}.panel .body a{font-weight:600}
.panel .body .cta{margin:22px 0 8px}
.bignum{font-family:var(--display);font-weight:700;font-size:clamp(34px,9vw,44px);letter-spacing:-.03em;line-height:1;color:var(--acid);margin:14px 0 0;font-variant-numeric:tabular-nums}
.bignum small{display:block;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--mint);letter-spacing:0;margin-top:8px}
.shot{margin:18px 0;width:fit-content;max-width:100%}.shot img{border-radius:16px;border:1px solid var(--line)}.shot figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.panel--paper .shot img{border-color:var(--paper-line)}.panel--paper .shot figcaption{color:var(--dark-muted2)}
.panel--felt .shot img{border-color:var(--felt2)}.panel--felt .body{color:#D8D8DF}

/* лента фактов */
.band{margin:0 -30px 0;padding:18px 40px;background:var(--acid);color:var(--ink);transform:rotate(-2deg);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.band__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;padding:0 var(--gutter)}
.band__big{font-size:30px;line-height:1}.band__small{font-size:12px;margin-top:4px}
.intro{padding:44px var(--gutter) 0;font-size:16px;line-height:1.55;color:var(--muted)}
.intro .col{max-width:680px}.intro p{margin:0}

/* 01 formats — чек */
.s01 .body ul{list-style:none;padding:6px 16px 14px;margin:18px 0;background:#fff;border:1px solid var(--paper-line);border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.s01 .body ul li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed #C9C4B6;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.s01 .body ul li:last-child{border-bottom:0}
.s01 .body ul li::after{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain}
/* 02 proof */
.s02 .shot{background:var(--ink);border-radius:16px;padding:14px;border:1px solid var(--felt2)}
.s02 .shot img{border:0;border-radius:12px}
.s02 .body>p:last-of-type a{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:14px;background:var(--mint);color:var(--ink);font-weight:600;font-size:16px;margin-top:10px}
.s02 .body>p:last-of-type a::after{content:"→";font-family:var(--mono);font-weight:700}
/* 03 radar — 4 карточки */
.s03 .body ol{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;counter-reset:n}
@media(max-width:600px){.s03 .body ol{grid-template-columns:1fr}}
.s03 .body ol li{background:rgba(11,11,16,.7);border-radius:14px;padding:16px;box-shadow:inset 0 3px 0 var(--acid);font-size:13px;color:var(--muted);line-height:1.4;counter-increment:n}
.s03 .body ol li::before{content:counter(n);display:block;font-family:var(--display);font-weight:700;font-size:28px;color:var(--acid);line-height:1;margin-bottom:8px}
.s03 .body ol li:last-child{box-shadow:inset 0 3px 0 var(--red)}.s03 .body ol li:last-child::before{color:var(--red)}
/* 04 price */
.s04 .panel{background:rgba(255,210,63,.96);color:var(--ink);border-color:#E6BB2E}
.s04 .panel .eyebrow{color:var(--ink)}
.s04 .body{background:var(--ink);color:var(--text);border-radius:20px;padding:24px 20px;margin-top:26px}
@media(max-width:899px){.s04 .body{margin:18px -8px -12px;padding:22px 18px}}
.s04 .body p:first-child{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.s04 .body ul{list-style:none;padding:0;margin:18px 0}.s04 .body ul li{padding:5px 0 5px 28px;position:relative;font-size:15px}
.s04 .body ul li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ED573' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain}
.s04 .body a:not(.btn){color:var(--acid)}
/* 05 versus — таблица */
.s05 .body table{display:table;width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;border:1px solid var(--paper-line);font-size:13px;line-height:1.35;margin:20px 0 14px}
.s05 .body th{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--ink);color:var(--text);padding:10px 12px;text-align:left}
.s05 .body th:nth-child(2){color:var(--acid)}
.s05 .body td{padding:12px;border-bottom:1px solid var(--paper-line);color:var(--dark-muted2);vertical-align:top}
.s05 .body td:first-child{color:var(--dark-muted)}.s05 .body td:nth-child(2){font-weight:600;color:var(--ink)}
.s05 .body tr:nth-child(odd) td{background:#fff}
@media(max-width:720px){.s05 .body table{font-size:11.5px;line-height:1.3}.s05 .body th,.s05 .body td{padding:8px 6px}.s05 .body td:first-child{font-family:var(--mono);font-size:10.5px}}
/* 06 setup — таймлайн */
.s06 .body ol{list-style:none;padding:0;margin:22px 0;position:relative;counter-reset:st}
.s06 .body ol::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--line)}
.s06 .body ol li{display:block;position:relative;padding:14px 0 14px 52px;counter-increment:st;font-size:14px;color:var(--muted);line-height:1.45}
.s06 .body ol li::before{content:counter(st);position:absolute;left:0;top:10px;width:36px;height:36px;border-radius:50%;background:var(--acid);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px;z-index:1}
.s06 .body ol li:last-child::before{background:var(--win)}
/* 07 partners */
.s07 .body blockquote{margin:14px 0;padding:14px;background:rgba(11,11,16,.7);border-radius:14px 14px 14px 4px;font-size:14px;line-height:1.45}
.s07 .shot{max-width:320px}
/* 08 FAQ — аккордеон */
.s08 .body details{border-top:1px solid var(--paper-line)}
.s08 .body summary{font-family:var(--sans);font-weight:600;font-size:16px;padding:16px 0;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;min-height:44px}
.s08 .body summary::-webkit-details-marker{display:none}
.s08 .body summary::after{content:"";width:20px;height:20px;flex:none;transition:transform .2s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B10' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain}
.s08 .body details[open] summary::after{transform:rotate(180deg)}
.s08 .body details p{font-size:14px;color:var(--dark-muted);margin:0 0 16px}
.s08 .body>p:last-child a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;border-bottom:2px solid var(--ink)}
/* final — небо acid (рендерер меняет фон; без WebGL — фон секции) */
.beat--final{color:var(--ink);min-height:100vh;align-content:center}
.no3d .beat--final{background:var(--acid)}
.beat--final .h2{font-size:clamp(40px,11vw,56px);line-height:.96;max-width:12ch}
.beat--final .body .cta .btn{background:var(--ink);color:var(--acid);width:auto;padding:0 22px;box-shadow:none}
.beat--final .body p:not(.cta){font-size:12px;color:rgba(11,11,16,.72);line-height:1.6;margin-top:24px;max-width:520px}
.beat--final .stage-gap{height:50vh}
/* футер — отделяем от acid-неба */
.foot{padding:28px var(--gutter) 40px;font-size:12px;color:var(--muted2);line-height:1.6;background:var(--ink);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-80px;height:80px;background:linear-gradient(180deg,rgba(11,11,16,0),var(--ink));pointer-events:none}
.foot__legal{max-width:70ch}
.foot>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.foot__nav,.foot__legal-links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot__nav a{color:var(--text);font-weight:600;font-size:14px;min-height:40px;display:inline-flex;align-items:center}
.foot__legal{margin:10px auto}
.foot__legal-links a{color:var(--muted2);min-height:44px;display:inline-flex;align-items:center}

/* ===== внутренние страницы: hero со сценой, тело — плотный ink ===== */
.beat--page .col{padding-top:26px}
.stage-gap--page{height:38vh}
.page-body{position:relative;background:var(--ink);border-top:1px solid var(--line2);padding:36px 0 64px}
.page-body .wrap{max-width:calc(760px + 2 * var(--gutter));margin:0}
.prose{font-size:17px;line-height:1.6}
.prose h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:28px;line-height:1.05;margin:44px 0 12px}
.prose h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:20px;line-height:1.15;margin:28px 0 8px}
.prose p{margin:0 0 16px}.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}.prose li{margin:0 0 6px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 20px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--acid);background:var(--ink2)}
.prose img{border-radius:14px;border:1px solid var(--line);margin:8px 0}
.prose figure{margin:20px 0;width:fit-content;max-width:100%}.prose figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}
.prose tbody tr:nth-child(even) td{background:var(--ink2)}
.prose details{border-top:1px solid var(--line)}.prose summary{font-weight:600;font-size:17px;padding:14px 0;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;min-height:44px}.prose summary::-webkit-details-marker{display:none}.prose summary::after{content:"";width:20px;height:20px;flex:none;transition:transform .2s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain}.prose details[open] summary::after{transform:rotate(180deg)}.prose details p{color:var(--muted);font-size:16px}
.prose h2+details{margin-top:8px}
@media(max-width:600px){.prose{font-size:16px}.prose h2{margin:36px 0 10px}}
.prose blockquote{margin:0 0 16px;padding:14px 16px;background:var(--ink2);border-radius:14px 14px 14px 4px;border:0}
.prose .cta{margin:28px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* ===== десктоп ===== */
@media(min-width:900px){
  .beat{grid-template-columns:minmax(0,var(--col)) minmax(0,1fr);gap:40px;padding:0 64px;min-height:100vh;align-items:center;max-width:1400px;margin:0 auto}
  .beat .col{padding:64px 0}
  .stage-gap,.beat--hero .stage-gap,.beat--final .stage-gap{height:auto;align-self:stretch;min-height:100vh}
  .beat--hero{min-height:calc(100vh - var(--top))}
  .hero__cta{flex-direction:row;margin-top:34px}
  .panel{padding:32px 32px 34px;border-radius:28px}
  .panel .body{font-size:17px}
  .band{margin:0 -40px 0;padding:22px 100px;transform:rotate(-1.5deg)}.band__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.band__big{font-size:40px}
  .intro{padding:64px 64px 0;max-width:1400px;margin:0 auto;font-size:18px}
  .s03 .body ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beat--final .h2{font-size:64px}
  .beat--page{min-height:56vh;align-items:start}
  .beat--page .col{padding:56px 0 40px}
  .beat--page .h1{font-size:clamp(40px,4.4vw,64px)}
  .page-body .wrap{padding:0 64px;max-width:888px;margin:0 auto}
}

/* планшет-ландшафт: колонка уже, сцена правее */
@media(min-width:900px) and (max-width:1200px){:root{--col:430px}.beat{padding:0 40px}.top{padding:0 40px}.intro{padding-left:40px;padding-right:40px}}

/* мобилка: место под sticky CTA; планшет-портрет 680–899: не телефонная вёрстка */
@media(min-width:680px) and (max-width:899px){.btn--primary{width:auto;padding:0 28px}.hero__cta{flex-direction:row}.h1{font-size:clamp(46px,6.4vw,64px)}.h2{font-size:36px}.beat .col,.intro .col{max-width:640px}.stage-gap{height:48vh}}
@media(max-width:1100px){.band{transform:rotate(-1deg)}}

/* /vs/: широкая таблица 7 колонок — скролл с липкой первой колонкой, страница шире */
.page-vs .prose table{min-width:1080px;font-size:13px;line-height:1.35}
.page-vs .prose th:first-child,.page-vs .prose td:first-child{position:sticky;left:0;background:var(--ink);font-family:var(--mono);font-size:11px;color:var(--muted);z-index:1}
.page-vs .prose th:nth-child(2),.page-vs .prose td:nth-child(2){background:rgba(255,210,63,.08)}
.page-vs .prose th:nth-child(2){color:var(--acid)}
.page-vs .prose table::after{content:"";display:block}
@media(min-width:900px){.page-vs .page-body .wrap{max-width:1200px}.page-vs .prose table{min-width:1000px}}