@font-face{font-family:Geist;font-weight:100 900;font-display:swap;src:url(assets/fonts/geist-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geist;font-weight:100 900;font-display:swap;src:url(assets/fonts/geist-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-weight:400 600;font-display:swap;src:url(assets/fonts/geist-mono-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist Mono";font-weight:400 600;font-display:swap;src:url(assets/fonts/geist-mono-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Concept: medical monitor + highlighter. Ink "screen", neutral paper, one accent: lime.
   Radius rule: pills for buttons, chips and nav; 28px for cards and panels; 14px for inputs. */
:root{
  --paper:#efefed; --surf:#fff; --ink:#101114; --ink2:#1c1e23; --mut:#5d616b; --line:#dcdde0;
  --on-ink:#f2f2ee; --on-ink-mut:#a3a7b0; --lime:#c9f24b; --lime-d:#b4dc2f;
  --r:28px; --ri:14px; --ease:cubic-bezier(.22,1,.36,1);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Geist,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.i{display:inline-block;width:1.2em;height:1.2em;flex:none;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.panel-intro :focus-visible,.foot :focus-visible{outline-color:var(--lime)}

h1,h2,h3{font-weight:600;letter-spacing:-.045em;line-height:1.02}
h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:17ch;margin-bottom:2.4rem}
h3{font-size:1.35rem;letter-spacing:-.025em;line-height:1.15}
p{max-width:62ch}
.mono{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:2px;transition:gap .35s var(--ease),background .25s}
.link:hover{gap:.7rem;background:var(--lime)}

/* highlighter marker: sweeps in when the heading scrolls into view */
.mk{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 88%/100% .4em;padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .mk{background-size:0 .4em;transition:background-size 1.1s var(--ease) .35s}
.js .in .mk,.js .mk.in{background-size:100% .4em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.65rem;white-space:nowrap;padding:1rem 1.7rem;border-radius:999px;background:var(--ink);color:var(--on-ink);text-decoration:none;font-weight:600;border:1.5px solid var(--ink);cursor:pointer;transition:transform .4s var(--ease),translate .5s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink2)}
.btn .i{transition:transform .4s var(--ease)}
.btn:hover .i{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-sm{padding:.62rem 1.2rem;font-size:.95rem}
.btn-lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-d);border-color:var(--lime-d)}
.btn-ghost-dark{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.28)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-block{width:100%;justify-content:center}

/* nav */
.nav{position:fixed;z-index:30;top:18px;left:0;right:0;margin-inline:auto;width:min(1200px,100% - 36px);height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 7px 0 8px;border-radius:999px;background:rgba(16,17,20,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);color:var(--on-ink);transition:transform .55s var(--ease)}
.nav.hide{transform:translateY(-140%)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.mark{width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:1.3rem}
.nav-links{display:flex;gap:.2rem}
.nav-links a{text-decoration:none;color:var(--on-ink-mut);font-size:.94rem;padding:.45rem .85rem;border-radius:999px;transition:background .25s,color .25s}
.nav-links a:hover{background:rgba(255,255,255,.08);color:var(--on-ink)}

/* hero: dark monitor card */
.hero{position:relative;margin:10px;border-radius:32px;background:var(--ink);color:var(--on-ink);min-height:calc(100dvh - 20px);display:flex;flex-direction:column;padding:112px 0 clamp(1.5rem,3vw,2.4rem);overflow:hidden}
.hero-top{display:flex;justify-content:space-between;gap:1rem;color:var(--on-ink-mut);margin-bottom:clamp(1rem,2.5vw,1.8rem)}
.hero-ebm{color:var(--lime)}
.title{font-size:clamp(2.7rem,7.6vw,7.4rem);line-height:.92;letter-spacing:-.058em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block}
.line{display:block;min-height:1em;white-space:nowrap}
.title em{font-style:normal;color:var(--lime)}
.caret{display:none;width:.05em;height:.78em;margin-left:.06em;border-radius:2px;background:var(--lime);vertical-align:-.03em}
.js .caret{display:inline-block;animation:blink 1.05s steps(1) infinite}
.js .typing .caret{animation:none}
@keyframes blink{50%{opacity:0}}
.ecg{position:relative;flex:1;min-height:150px;margin:clamp(.6rem,2vw,1.4rem) 0}
.ecg canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;flex-wrap:wrap}
.hero-copy{display:grid;gap:1.4rem;justify-items:start}
.lead{color:var(--on-ink-mut);font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:44ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.pulse{text-align:right;color:var(--on-ink-mut);display:grid;gap:.35rem;justify-items:end}
.bpm{font-size:clamp(3.2rem,6.4vw,5.6rem);font-weight:600;letter-spacing:-.06em;line-height:.9;color:var(--lime);font-variant-numeric:tabular-nums}
.bpm small{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;font-weight:500;color:var(--on-ink-mut);margin-left:.5rem}
.pulse-note{color:var(--on-ink);min-height:1.4em}

/* topics: floating islands. Layers of motion on separate properties so they combine:
   scale = pop-in, translate/rotate = idle bobbing, transform = push away from the cursor */
.topics{padding:clamp(4.5rem,9vw,7rem) 0 clamp(1rem,3vw,2rem)}
.topics-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem 2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.topics-head h2{margin:0}
.topics-hint{color:var(--mut)}
.isles{position:relative;list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 12px;max-width:1080px;margin:0 auto}
.isle{display:inline-flex;align-items:center;gap:.6em;padding:.42em 1.15em .42em .42em;border-radius:999px;background:var(--surf);border:1px solid var(--line);font-size:clamp(1rem,1.65vw,1.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 12px 26px -20px rgba(16,17,20,.5);
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:opacity .6s var(--ease),scale .9s cubic-bezier(.34,1.56,.64,1),transform .7s var(--ease),background .3s,color .3s,border-color .3s;
  transition-delay:calc(var(--k,0) * 55ms),calc(var(--k,0) * 55ms),0s,0s,0s,0s}
.isle:nth-child(4n+1){margin-top:20px}
.isle:nth-child(5n+3){margin-top:-10px}
.isle.lg{font-size:clamp(1.15rem,2.3vw,1.8rem)}
.isle.lime{background:var(--lime);border-color:var(--lime)}
.isle-ico{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--paper);font-size:.95em;flex:none;transition:background .3s,color .3s}
.isle.lime .isle-ico{background:rgba(255,255,255,.55)}
.isle:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.isle:hover .isle-ico{background:var(--lime);color:var(--ink)}
.isle-ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink);padding-left:1.15em;margin-top:10px}
.isle-ink .i{color:var(--lime);transition:transform .4s var(--ease)}
.isle-ink:hover{background:var(--ink2)}
.isle-ink:hover .i{transform:translateX(4px)}
.isles-label{text-align:center;color:var(--mut);max-width:none;margin:clamp(2.5rem,5vw,3.5rem) 0 1rem}
.isles-small .isle{font-size:clamp(.92rem,1.3vw,1.05rem);padding:.7em 1.2em;background:var(--ink);border-color:var(--ink);color:var(--on-ink);cursor:default;margin-top:0}
.isles-small .isle::before{content:"";width:.8em;height:.8em;background:var(--lime);-webkit-mask:url(assets/icons/asterisk.svg) center/contain no-repeat;mask:url(assets/icons/asterisk.svg) center/contain no-repeat}
.isles-small .isle:hover{background:var(--ink2)}
.js .isles.rv{opacity:1;transform:none}
.js .isles .isle{opacity:0;scale:.4}
.js .isles.in .isle{opacity:1;scale:1;animation:bob var(--dur,6s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes bob{from{translate:0 -6px;rotate:-1.2deg}to{translate:0 6px;rotate:1.2deg}}

.sec{padding:clamp(4.5rem,10vw,8rem) 0}
.sec-top0{padding-top:clamp(1rem,3vw,2rem)}
.intro{color:var(--mut);font-size:1.12rem;max-width:52ch;margin:-1.2rem 0 3rem}

/* evidence pyramid */
.evidence{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pyramid{display:grid;gap:6px}
.lvl{display:block;width:100%;height:clamp(58px,6.6vw,80px);border:0;padding:0 .5rem;cursor:pointer;font-family:var(--mono);font-size:clamp(.7rem,1.05vw,.88rem);font-weight:500;letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(calc(50% - var(--t) * 50%) 0,calc(50% + var(--t) * 50%) 0,calc(50% + var(--b) * 50%) 100%,calc(50% - var(--b) * 50%) 100%)}
.l5{background:var(--ink);color:#fff}
.l4{background:#2e3138;color:#fff}
.l3{background:#5a5e68;color:#fff}
.l2{background:#a2a6ae;color:var(--ink)}
.l1{background:#cfd1d5;color:var(--ink)}
.lvl:hover{scale:1.025}
.lvl.on{background:var(--lime);color:var(--ink)}
.lvl-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.3rem);display:grid;gap:1rem;justify-items:start;align-content:start;min-height:300px}
.lvl-card .mono{color:var(--mut)}
.lvl-card h3{font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.04em}
.lvl-card p{color:var(--mut)}
.verdict{display:inline-flex;padding:.5rem 1.05rem;border-radius:999px;background:var(--paper);font-weight:600;font-size:.95rem}
.verdict.strong{background:var(--lime)}
.lvl-card.swap>*{animation:swap .55s var(--ease) both}
.lvl-card.swap>:nth-child(2){animation-delay:40ms}
.lvl-card.swap>:nth-child(3){animation-delay:80ms}
.lvl-card.swap>:nth-child(4){animation-delay:120ms}
@keyframes swap{from{opacity:0;transform:translateY(10px)}}

/* myths: flip cards */
.myths{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.myth{display:block;height:clamp(270px,25vw,320px);padding:0;border:0;background:none;text-align:left;cursor:pointer;perspective:1400px;border-radius:var(--r)}
.myth-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.myth:hover .myth-in{transform:rotateY(-9deg)}
.myth[aria-pressed=true] .myth-in{transform:rotateY(180deg)}
.myth[aria-pressed=true]:hover .myth-in{transform:rotateY(171deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.front{background:var(--ink);color:var(--on-ink)}
.front .mono{color:var(--on-ink-mut)}
.myth:nth-child(2) .front,.myth:nth-child(3) .front{background:var(--surf);color:var(--ink);border:1px solid var(--line)}
.myth:nth-child(2) .front .mono,.myth:nth-child(3) .front .mono{color:var(--mut)}
.claim{font-size:clamp(1.55rem,2.7vw,2.3rem);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.back{background:var(--lime);color:var(--ink);transform:rotateY(180deg)}
.answer{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.5}
.answer b{display:block;font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.05em;line-height:1;margin-bottom:.6rem}
.turn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.front .turn{color:var(--lime)}
.myth:nth-child(2) .front .turn,.myth:nth-child(3) .front .turn{color:var(--ink)}
.turn .i{transition:transform .6s var(--ease)}
.myth:hover .turn .i{transform:rotate(180deg)}

/* about: badge on a lanyard */
.about-sec{background:var(--surf)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.badge-zone{display:flex;flex-direction:column;align-items:center;margin-top:calc(-1 * clamp(4.5rem,10vw,8rem))}
.swing{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.swing.drag{cursor:grabbing}
.strap{width:46px;height:clamp(130px,15vw,190px);background:var(--ink);color:var(--lime);display:flex;justify-content:center;overflow:hidden;border-radius:0 0 8px 8px}
.strap span{writing-mode:vertical-rl;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;padding-top:.9rem}
.clip{position:relative;z-index:1;width:36px;height:26px;margin-top:-6px;border-radius:7px;background:linear-gradient(#d3d6db,#9ca1ab)}
.clip::after{content:"";position:absolute;left:50%;bottom:-12px;width:12px;height:16px;translate:-50% 0;border-radius:4px;background:#9ca1ab}
.badge{position:relative;width:min(300px,76vw);margin-top:4px;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:1rem 1.2rem 1.2rem;display:grid;gap:.35rem;box-shadow:0 34px 60px -30px rgba(16,17,20,.5)}
.badge::before{content:"";justify-self:center;width:56px;height:10px;border-radius:10px;background:var(--surf);border:1px solid var(--line);margin-bottom:.5rem}
.badge-top{display:flex;justify-content:space-between;color:var(--mut);font-size:.68rem}
.photo{aspect-ratio:1;margin:.5rem 0 .7rem;border-radius:16px;overflow:hidden;background:var(--lime);display:grid;place-items:center;font-size:clamp(4.2rem,9vw,6.2rem);font-weight:600;letter-spacing:-.07em;color:var(--ink)}
.photo img{width:100%;height:100%;object-fit:cover}
.badge-name{font-size:1.65rem;font-weight:600;letter-spacing:-.045em;line-height:1.05}
.badge-role{color:var(--mut)}
.badge-foot{display:flex;justify-content:space-between;gap:.5rem;border-top:1.5px dashed #c3c6cc;padding-top:.8rem;margin-top:.5rem;font-size:.66rem}
.drag-hint{color:var(--mut);margin-top:1.5rem}
.about-copy{display:grid;gap:1.1rem;justify-items:start}
.about-copy h2{margin-bottom:.3rem}
.about-copy>p{color:var(--mut);font-size:1.06rem}
.pull{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.18;max-width:22ch;margin:.4rem 0}
.pull::before{content:"\201C";display:block;height:.45em;font-size:2.4em;line-height:.8;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;width:100%;margin-top:1rem}
.facts div{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);border-radius:22px;padding:1.3rem}
.facts div:last-child{background:var(--lime)}
.facts dd{order:-1;font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.facts dt{color:var(--mut);font-size:.92rem;line-height:1.3}
.facts div:last-child dt{color:var(--ink)}

/* process: sticky stack */
.process{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.process-head{position:sticky;top:110px;display:grid;gap:1.3rem;justify-items:start}
.process-head h2{margin:0}
.process-head p{color:var(--mut);font-size:1.06rem}
.stack{list-style:none;padding:0;display:grid;gap:1rem}
/* запас после последней карточки: она ложится на стопку, стопка стоит, потом уезжает целиком.
   Нужен именно элемент, а не padding: липкие карточки ограничены контентом списка */
.stack::after{content:"";height:clamp(40px,7vh,80px)}
/* Карточки одной высоты, а нижний отступ компенсирует ступеньку (3 = число карточек - 1):
   тогда все упираются в конец списка одновременно и уезжают, сохраняя лесенку */
.step{position:sticky;top:calc(100px + var(--k) * 22px);min-height:320px;margin-bottom:calc((3 - var(--k)) * 22px);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;transform-origin:50% 0;transform:scale(calc(1 - var(--p, 0) * .06));box-shadow:0 -14px 40px -24px rgba(16,17,20,.35)}
.step::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:calc(var(--p, 0) * .12);pointer-events:none}
.step h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.04em}
.step p{margin-top:.6rem;max-width:44ch;color:var(--mut)}
.ico{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--paper);font-size:1.5rem;flex:none}
.s1{--k:0;background:var(--surf);border:1px solid var(--line)}
.s2{--k:1;background:#e1e2df}
.s2 .ico{background:var(--surf)}
.s3{--k:2;background:var(--ink);color:var(--on-ink)}
.s3 p{color:var(--on-ink-mut)}
.s3 .ico{background:rgba(255,255,255,.1);color:var(--lime)}
.s4{--k:3;background:var(--lime)}
.s4 p{color:#2c3313}
.s4 .ico{background:var(--ink);color:var(--lime)}

/* reviews */
.revhead{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2.2rem}
.revhead h2{margin-bottom:1.2rem}
.score{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;color:var(--mut)}
.score b{font-size:clamp(2.6rem,5vw,3.8rem);line-height:.9;font-weight:600;letter-spacing:-.06em;color:var(--ink)}
.stars{display:flex;gap:3px;font-size:1.1rem;color:var(--ink)}
.revctl{display:flex;gap:.6rem}
.arrow{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(16,17,20,.18);background:transparent;display:grid;place-items:center;font-size:1.25rem;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease),translate .5s var(--ease)}
.arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.arrow:active{transform:scale(.92)}
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,(100% - 1200px) / 2);padding:.4rem max(20px,(100% - 1200px) / 2) 1.6rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rev{flex:0 0 min(400px,84vw);min-height:320px;scroll-snap-align:start;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.8rem;transition:transform .6s var(--ease),border-color .3s}
.rev:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--ink)}
.rev blockquote{font-size:1.12rem;line-height:1.5;letter-spacing:-.012em}
.rev blockquote::before{content:"\201C";display:block;height:.5em;font-size:4.2rem;line-height:.75;font-weight:600;margin-bottom:.4rem}
.rev figcaption{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--mut);line-height:1.35}
.rev b{display:block;color:var(--ink);font-weight:600}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:600;background:var(--lime);color:var(--ink)}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head p{color:var(--mut)}
.acc{display:grid;gap:.7rem}
.acc details{background:var(--surf);border-radius:22px;padding:0 1.5rem;transition:background .35s,color .35s}
.acc details[open]{background:var(--ink);color:var(--on-ink)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.35rem 0;font-weight:500;font-size:1.1rem;letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .i{transition:transform .45s var(--ease),color .35s}
.acc details[open] summary .i{transform:rotate(135deg);color:var(--lime)}
.acc details p{padding:0 2rem 1.4rem 0;color:var(--on-ink-mut)}
@supports selector(::details-content){
  .acc details{interpolate-size:allow-keywords}
  .acc details::details-content{height:0;overflow:clip;transition:height .5s var(--ease),content-visibility .5s allow-discrete}
  .acc details[open]::details-content{height:auto}
}

/* form panel */
.panel{background:var(--ink);color:var(--on-ink);border-radius:36px;padding:clamp(1.4rem,4vw,3.5rem);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.panel-intro>.mono{color:var(--lime);margin-bottom:1rem}
.panel h2{color:var(--on-ink);margin-bottom:1.1rem}
.panel h2 em{font-style:normal;color:var(--lime)}
.panel-intro>p{color:var(--on-ink-mut)}
.contacts{list-style:none;padding:0;display:grid;gap:.6rem;margin:1.6rem 0}
.contacts a{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;transition:background .3s,border-color .3s,transform .45s var(--ease)}
.contacts a:hover{background:rgba(201,242,75,.1);border-color:var(--lime);transform:translateX(5px)}
.contacts .i{font-size:1.5rem;color:var(--lime)}
.contacts a>span:last-child{font-size:.95rem;color:var(--on-ink-mut);line-height:1.35;overflow-wrap:anywhere}
.contacts b{display:block;color:var(--on-ink);font-weight:600;font-size:1rem}
.warn{font-size:.9rem;color:var(--on-ink-mut);border-top:1px solid rgba(255,255,255,.14);padding-top:1.1rem}
.form{background:var(--surf);color:var(--ink);border-radius:26px;padding:clamp(1.3rem,3vw,2.2rem);display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0;border:0;padding:0}
.wide{grid-column:1/-1}
label,legend{font-size:.95rem;font-weight:500}
legend{margin-bottom:.5rem}
input[type=text],input[type=tel],select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid transparent;border-radius:var(--ri);padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s,background .2s}
::placeholder{color:#6b6f78}
textarea{resize:vertical;min-height:130px}
input:focus,select:focus,textarea:focus{outline:0;background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px var(--lime)}
.hint{font-size:.88rem;color:var(--mut)}
.err{font-size:.9rem;color:#c2261d;font-weight:500}
.field.bad input[type=text],.field.bad input[type=tel],.field.bad textarea{border-color:#d93b30;background:#fff6f5}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choices label{cursor:pointer}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices span{display:inline-block;padding:.6rem 1.15rem;border-radius:999px;background:var(--paper);border:1.5px solid transparent;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.choices label:hover span{border-color:var(--line)}
.choices input:checked+span{background:var(--ink);color:var(--lime)}
.choices input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;cursor:pointer;color:var(--mut)}
.check input{width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none;accent-color:var(--ink)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn:disabled{opacity:.6;cursor:progress}
.ok{background:var(--lime);padding:1rem 1.2rem;border-radius:var(--ri);font-weight:500}
[hidden]{display:none!important}

/* footer */
.foot{margin:0 10px 10px;border-radius:32px;background:var(--ink);color:var(--on-ink);padding:clamp(2.5rem,6vw,4.5rem) 0 1.8rem;overflow:hidden}
.bigname{font-size:clamp(3rem,13.2vw,12rem);font-weight:600;letter-spacing:-.07em;line-height:.9;white-space:nowrap;max-width:none;margin-bottom:2rem;overflow:hidden;padding-bottom:.1em}
.bigname .ch{display:inline-block}
.bigname .ch:hover{color:var(--lime)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem;color:var(--on-ink-mut);font-size:.92rem}

/* motion */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease),scale .5s var(--ease),background .35s,color .35s;transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
/* pyramid: stagger only the reveal, colour changes react instantly */
.js .lvl.rv{transition-delay:calc(var(--d,0) * 90ms),calc(var(--d,0) * 90ms),0s,0s,0s}
/* скрытое начальное состояние живёт только в анимации: если она не запустится, текст просто виден */
.js .title .w>span{animation:rise-in 1.1s var(--ease) calc(var(--i) * 90ms + 100ms) both}
.js .up{animation:fade-up 1s var(--ease) calc(var(--d) * 90ms + 200ms) both}
.js .bigname.rv{opacity:1;transform:none}
.js .bigname .ch{transform:translateY(110%);transition:transform 1.1s var(--ease),color .3s;transition-delay:calc(var(--i) * 45ms),0s}
.js .bigname.in .ch{transform:none}
@keyframes rise-in{from{transform:translateY(112%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}}

@media (max-width:1080px){
  .nav-links{display:none}
}
@media (max-width:980px){
  .evidence,.about,.process,.faq,.panel{grid-template-columns:1fr}
  .process-head,.faq-head{position:static}
  .step{top:calc(86px + var(--k) * 14px);min-height:330px;margin-bottom:calc((3 - var(--k)) * 14px)}
  .about{gap:3rem}
  /* одна карточка из двух частей вместо рамки в рамке: сверху тёмная, снизу анкета */
  .panel{padding:0;gap:0;overflow:hidden}
  .panel-intro{padding:clamp(1.6rem,5vw,2.6rem) clamp(1.25rem,5vw,2.6rem) 1.8rem}
  .form{border-radius:0;padding:clamp(1.6rem,5vw,2.6rem) clamp(1.25rem,5vw,2.6rem)}
}
@media (max-width:640px){
  .panel{margin-inline:-14px;border-radius:24px}
  .hero{margin:6px;border-radius:24px;padding-top:96px;min-height:calc(100dvh - 12px)}
  .hero-top{flex-direction:column;gap:.3rem}
  .hero-bottom{flex-direction:column;align-items:flex-start}
  .pulse{text-align:left;justify-items:start}
  .ecg{min-height:120px}
  .nav{top:12px;width:calc(100% - 24px)}
  .myths,.form{grid-template-columns:1fr}
  .isles{gap:9px 7px}
  .isle{font-size:.86rem;gap:.4em;padding:.32em .85em .32em .32em;letter-spacing:-.02em}
  .isle.lg{font-size:.98rem}
  .isle-ico{width:1.9em;height:1.9em}
  .isles-small .isle{font-size:.82rem;padding:.6em .95em}
  .isle:nth-child(4n+1),.isle:nth-child(5n+3){margin-top:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:last-child{grid-column:1/-1}
  .revctl{display:none}
  .btn{padding-inline:1.35rem}
  .foot{margin:0 6px 6px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .up,.js .title .w>span,.js .bigname .ch{opacity:1;transform:none}
  .js .isles .isle{opacity:1;scale:1}
  .js .mk{background-size:100% .4em}
}