/* =============================================================
   Flexosamine — дизайн «Split Dossier»
   Экран поделён: слева закреплённая бирюзовая панель продукта
   (диагональные полосы как на коробке, ореол, цена, CTA, навигация-точки),
   справа прокручиваемое досье: прогресс-бар разделов, ячейковый паспорт,
   «периодическая таблица» компонентов, список минусов, ценовая панель.
============================================================== */
:root{
  --teal:#14706D; --teal-2:#1B8A87; --teal-3:#2BA6A2; --teal-ink:#0B3F3D; --mint:#E6F3F2; --mint-2:#F3F9F8;
  --red:#E4502B; --red-2:#C63F1D; --red-50:#FDEBE5; --amber:#F6A33B;
  --ink:#122423; --ink-soft:#56686A; --line:#D9E6E5; --paper:#FFFFFF; --bg:#F7FAF9;
  --head:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3{font-family:var(--head); color:var(--ink); margin:0; letter-spacing:-.02em;}
p{margin:0 0 1em;}
a{color:var(--teal);}
img{max-width:100%; display:block; height:auto;}
.icon{width:20px; height:20px; flex:none;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--red); color:#fff; font-family:var(--body); font-weight:700; font-size:16.5px; line-height:1.25; padding:16px 24px; border-radius:14px; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(228,80,43,.32); transition:background .15s, transform .12s;}
.btn:hover{background:var(--red-2); transform:translateY(-2px);}
.btn .icon{transition:transform .15s;}
.btn:hover .icon{transform:translateX(3px);}
.btn.light{background:#fff; color:var(--teal-ink); box-shadow:0 10px 24px rgba(0,0,0,.18);}

.topbar{background:var(--teal-ink); color:#CFE7E5; text-align:center; font-size:13px; letter-spacing:.04em; padding:8px 16px;}

/* ---------- split layout ---------- */
.split{display:grid; grid-template-columns:minmax(380px,44%) 1fr;}

/* LEFT stage */
.stage{position:sticky; top:0; height:100vh; align-self:start; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 30px),
    radial-gradient(circle at 50% 46%, var(--teal-3) 0%, var(--teal-2) 38%, var(--teal) 70%, var(--teal-ink) 100%);
  color:#fff; overflow:hidden;}
.stage-inner{height:100%; display:grid; grid-template-rows:auto 1fr auto; padding:28px 34px 30px; position:relative;}
.brand{font-family:var(--head); font-weight:800; font-size:26px; color:#fff; text-decoration:none; letter-spacing:-.02em;}
.brand span{color:#FFD7C7;}
.dots{position:absolute; left:34px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; z-index:3;}
.dots a{position:relative; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.65); text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.02em;}
.dots a::before{content:attr(data-i); width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; transition:all .2s;}
.dots a span{display:none;}
.dots a:hover,.dots a.on{color:#fff;}
.dots a.on::before{background:#fff; color:var(--teal); border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.18);}
.product{position:relative; display:flex; align-items:center; justify-content:center; padding-left:150px;}
.halo{position:absolute; left:calc(50% + 75px); top:50%; width:min(440px,34vw); aspect-ratio:1; transform:translate(-50%,-50%);}
.halo i{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.28);}
.halo i:nth-child(2){inset:12%; border-color:rgba(255,215,199,.45); background:radial-gradient(circle, rgba(246,163,59,.35) 0%, rgba(228,80,43,.18) 40%, transparent 70%);}
.halo i:nth-child(3){inset:-10%; border-style:dashed; border-color:rgba(255,255,255,.18); animation:turn 40s linear infinite;}
@keyframes turn{to{transform:rotate(360deg);}}
.product img{position:relative; width:min(380px,24vw); filter:drop-shadow(0 34px 34px rgba(4,40,38,.45));}
.buy{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:20px; padding:18px 20px; backdrop-filter:blur(6px);}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-bottom:12px;}
.price .amt{font-family:var(--head); font-weight:800; font-size:46px; line-height:1;}
.price .cur{font-weight:700; font-size:16px;}
.price .per{flex-basis:100%; font-size:13.5px; color:#CFE7E5;}
.buy .btn{width:100%;}
.btn-note{font-size:12.5px; color:#CFE7E5; text-align:center; margin:10px 0 0;}

/* RIGHT flow */
.flow{background:var(--paper); min-width:0; padding:0 clamp(24px,5vw,80px);}
.intro{padding:64px 0 40px; border-bottom:1px solid var(--line); max-width:760px;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:18px;}
.intro h1{font-size:clamp(38px,4.6vw,66px); line-height:.98; font-weight:800; margin-bottom:22px;}
.intro h1 .u{color:var(--red); background:linear-gradient(transparent 72%, var(--red-50) 72%);}
.lead{font-size:19px; color:var(--ink-soft); margin-bottom:24px;}
.checks{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:8px;}
.checks li{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:15.5px;}
.checks .icon{width:22px; height:22px; padding:4px; border-radius:7px; background:var(--mint); color:var(--teal); margin-top:1px;}
.trust{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:8px;}
.trust li{display:flex; align-items:center; gap:8px; background:var(--mint-2); border:1px solid var(--line); border-radius:40px; padding:7px 14px 7px 10px; font-size:14px; font-weight:600;}
.trust .icon{color:var(--red); width:18px; height:18px;}
.eeat{font-size:13.5px; color:var(--ink-soft); margin:0;}
.eeat b{color:var(--ink);}
.eeat span{color:var(--line); margin:0 6px;}

/* chapters */
.chap{padding:64px 0; border-bottom:1px solid var(--line); max-width:760px; scroll-margin-top:20px;}
.prog{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.prog .n{font-family:var(--head); font-weight:800; font-size:15px; color:#fff; background:var(--teal); border-radius:8px; padding:3px 9px;}
.prog .bar{display:flex; gap:4px;}
.prog .bar i{width:34px; height:6px; border-radius:6px; background:var(--line);}
.prog .bar i.on{background:var(--teal-3);}
.prog .bar i.on:last-of-type{background:var(--red);}
.prog .of{font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase;}
.chap h2{font-size:clamp(28px,3.2vw,42px); line-height:1.06; font-weight:750; margin-bottom:20px;}
.chap h3{font-size:clamp(21px,2.1vw,26px); line-height:1.15; font-weight:700; margin:40px 0 14px;}

/* passport grid */
.passport{margin-top:26px; border:1.5px solid var(--teal-ink); border-radius:18px; overflow:hidden;}
.pp-head{display:flex; justify-content:space-between; align-items:center; background:var(--teal-ink); color:#fff; padding:12px 18px; font-family:var(--head); font-weight:700; font-size:17px;}
.pp-id{font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.12em; color:#9FD2CF;}
.pp-grid{display:grid; grid-template-columns:1fr 1fr;}
.cell{padding:14px 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px;}
.cell:nth-child(odd):not(.wide){border-right:1px solid var(--line);}
.cell.wide{grid-column:1 / -1;}
.cell.wide + .cell{border-right:1px solid var(--line);}
.cell .k{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);}
.cell .v{font-size:15.5px; font-weight:600; line-height:1.45;}
.cell .v.big{font-family:var(--head); font-size:24px; font-weight:800;}

/* periodic-table elements */
.elements{list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.el{position:relative; border-radius:16px; padding:16px 16px 18px; min-height:190px; display:flex; flex-direction:column; border:1.5px solid transparent;}
.el.t1{background:var(--mint); border-color:#BFDDDB;}
.el.t2{background:#FFF4EC; border-color:#F6D3C2;}
.el.t3{background:#F1F5F4; border-color:var(--line);}
.el .no{position:absolute; top:12px; right:14px; font-size:12px; font-weight:700; color:var(--ink-soft);}
.el .sym{font-family:var(--head); font-weight:800; font-size:46px; line-height:1; color:var(--teal-ink); margin-bottom:8px;}
.el.t2 .sym{color:var(--red-2);}
.el b{font-size:15.5px; line-height:1.3; margin-bottom:6px;}
.el .d{font-size:14px; line-height:1.5; color:var(--ink-soft);}

/* dose + cautions */
.dose{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-bottom:22px;}
.dose p{margin:0;}
.dose-pill{display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--teal-ink); color:#fff; border-radius:18px; padding:18px 22px; text-align:center; font-weight:600; font-size:14px;}
.dose-pill b{font-family:var(--head); font-size:38px; line-height:1; display:block;}
.cap{width:64px; height:26px; border-radius:20px; background:linear-gradient(90deg,#fff 0 50%, var(--red) 50% 100%); transform:rotate(-24deg); box-shadow:0 4px 10px rgba(0,0,0,.25);}
.cautions{margin:0; border-top:2px solid var(--ink);}
.cautions > div{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line);}
.cautions dt{font-weight:700; font-size:14.5px; display:flex; gap:10px; align-items:flex-start;}
.cautions dt::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--red); margin-top:8px; flex:none;}
.cautions dd{margin:0; font-size:15.5px; color:var(--ink-soft);}

/* cons */
.cons{list-style:none; padding:0; margin:22px 0 0; counter-reset:c;}
.cons li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:16px 18px; border-radius:14px; background:#FFF7F3; border:1px solid #F6D3C2; margin-bottom:10px;}
.cons .mk{width:34px; height:34px; border-radius:10px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;}
.cons p{margin:0; font-size:16px;}
.flag{display:flex; gap:14px; margin-top:22px; padding:18px 20px; border-left:4px solid var(--teal); background:var(--mint-2); border-radius:0 14px 14px 0;}
.flag .icon{color:var(--teal); margin-top:3px;}
.flag p{margin:0; font-size:15.5px;}

/* price */
.pricebar{display:grid; grid-template-columns:auto 1fr; gap:22px 28px; align-items:center; margin-top:24px; background:var(--teal-ink); color:#fff; border-radius:22px; padding:26px 28px;}
.pb-amt{display:flex; flex-direction:column; padding-right:28px; border-right:1px solid rgba(255,255,255,.18);}
.pb-amt .lbl{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9FD2CF;}
.pb-amt .num{font-family:var(--head); font-weight:800; font-size:64px; line-height:1;}
.pb-amt .cur{font-size:13.5px; color:#CFE7E5;}
.pb-rows{margin:0;}
.pb-rows > div{display:grid; grid-template-columns:140px 1fr; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:15px;}
.pb-rows > div:last-child{border-bottom:none;}
.pb-rows dt{color:#9FD2CF; font-weight:600;}
.pb-rows dd{margin:0; font-weight:600;}
.pricebar .btn{grid-column:1 / -1;}
.flow-steps{list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; counter-reset:s;}
.flow-steps li{display:flex; gap:10px; align-items:center; font-size:14.5px; font-weight:600; line-height:1.35; background:var(--mint-2); border:1px solid var(--line); border-radius:14px; padding:12px 14px;}
.flow-steps span{width:28px; height:28px; flex:none; border-radius:50%; background:var(--teal); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}

/* faq */
.faq{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.fq{border-radius:18px; padding:20px; background:var(--mint-2); border:1px solid var(--line); display:flex; flex-direction:column;}
.fq:nth-child(2){background:#FFF7F3; border-color:#F6D3C2;}
.fq h3{font-size:18px !important; margin:0 0 10px !important; line-height:1.25 !important;}
.fq p{margin:0; font-size:15px; color:var(--ink-soft);}

/* final + sources + footer */
.final{margin:56px 0 0; padding:44px 40px; border-radius:26px; color:#fff; max-width:760px; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 14px, rgba(255,255,255,0) 14px 30px),
    linear-gradient(135deg, var(--red) 0%, #F07A3E 100%);}
.final h2{color:#fff; font-size:clamp(28px,3.2vw,40px); font-weight:800; line-height:1.15; margin-bottom:12px;}
.final p{font-size:17.5px; color:#FFE6DC; margin-bottom:24px;}
.sources{padding:44px 0 10px; max-width:760px; font-size:14.5px; color:var(--ink-soft);}
.sources h2{font-size:20px; margin-bottom:8px;}
.foot{max-width:760px; padding:26px 0 50px; border-top:1px solid var(--line); margin-top:30px; font-size:13.5px; color:var(--ink-soft);}
.legal{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:16px;}
.legal a{color:var(--ink); font-weight:600;}
.foot strong{color:var(--ink);}
.copy{font-size:12.5px; margin-top:14px;}

.sticky-cta{display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:50; background:var(--teal-ink); color:#fff; border-radius:18px; padding:8px 8px 8px 18px; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 12px 30px rgba(0,0,0,.25);}
.sticky-cta .price{display:block; margin:0; font-family:var(--head); font-weight:800; font-size:20px; line-height:1.1;}
.sticky-cta .price s{display:block; text-decoration:none; font-family:var(--body); font-weight:500; font-size:12px; color:#9FD2CF;}
.sticky-cta .btn{padding:12px 18px; font-size:15px; box-shadow:none;}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .split{grid-template-columns:minmax(340px,40%) 1fr;}
  .dots a{font-size:0; gap:0;}
  .product{padding-left:50px;}
  .halo{left:calc(50% + 25px);}
  .product img{width:min(380px,28vw);}
  .elements{grid-template-columns:1fr 1fr;}
  .faq{grid-template-columns:1fr;}
}
@media (max-width:900px){
  body{font-size:16.5px;}
  .split{grid-template-columns:1fr;}
  .stage{position:relative; height:auto;}
  .stage-inner{display:flex; flex-direction:column; gap:14px; padding:20px 18px 22px;}
  .dots{display:none;}
  .product{padding-left:0; min-height:330px;}
  .halo{left:50%; width:300px;}
  .product img{width:min(300px,78vw);}
  .flow{padding:0 18px;}
  .intro{padding:40px 0 30px;}
  .chap{padding:46px 0;}
  .cautions > div{grid-template-columns:1fr; gap:2px;}
  .pricebar{grid-template-columns:1fr; padding:22px;}
  .pb-amt{border-right:none; padding-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:14px;}
  .flow-steps{grid-template-columns:1fr;}
  .final{padding:32px 24px;}
  .sticky-cta{display:flex;}
  .foot{padding-bottom:110px;}
}
@media (max-width:560px){
  .pp-grid{grid-template-columns:1fr;}
  .cell:nth-child(odd):not(.wide),.cell.wide + .cell{border-right:none;}
  .elements{grid-template-columns:1fr;}
  .el{min-height:0;}
  .dose{grid-template-columns:1fr;}
  .pb-rows > div{grid-template-columns:1fr; gap:0;}
  .prog .bar i{width:22px;}
}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .halo i{animation:none !important;} .btn,.btn .icon{transition:none;}}