:root{--bg:#0e100d;--surface:#171a15;--surface2:#20241c;--ink:#ecebe3;--mute:#a8a89c;--accent:#d8a94a;--accent-ink:#17140b;
--paper:#e9e6dc;--pink:#1a1b17;--pmute:#5c5d54;--pstep:#d8d4c6;--m:24px;
--step-small:clamp(.8125rem,.79rem + .1vw,.875rem);--step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);--step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);--step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 "Bricolage Grotesque",system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:.95}
.bar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px var(--m);background:var(--bg)}
.logo{font-weight:600;font-size:1.375rem;letter-spacing:-.04em}
.bar nav{display:flex;gap:28px;align-items:center;font-size:var(--step-small)}
.bar nav a{transition:color .2s}.bar nav a:hover{color:var(--accent)}
.lang button{background:none;border:0;padding:6px 4px;color:var(--mute);font-size:var(--step-small)}.lang button.on{color:var(--ink)}
/* кнопки */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:14px 24px;font-weight:600;font-size:1rem;min-height:48px;transition:transform .15s var(--ease),filter .2s;border:0}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(2px) scale(.98)}
.btn.alt{background:var(--pstep);color:var(--pink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* первый экран */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m);padding:8px var(--m) 80px;align-items:start}
.hl{display:flex;flex-direction:column;gap:20px;min-width:0}
h1{font-size:clamp(2.5rem,5.2vw,5rem);max-width:12em;padding-top:12px}
.sub{max-width:36em;font-size:var(--step-lead);line-height:1.35;letter-spacing:-.01em}
.board{--rx:0deg;--ry:0deg;perspective:1200px;margin-top:8px;background:var(--surface);padding:clamp(16px,2.5vw,36px);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(58vh,560px)}
.board svg{width:100%;max-height:min(48vh,500px);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s var(--ease);display:block}
.board .cap{margin-top:18px;color:var(--mute);font-size:var(--step-small)}
.tr{stroke-dasharray:1;stroke-dashoffset:0}
.first .tr{animation:draw 1.6s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* чек: калькулятор */
.slip{background:var(--paper);color:var(--pink);position:sticky;top:76px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.stub{padding:24px 24px 22px;border-bottom:6px dotted var(--bg)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.k{color:var(--pmute);font-size:var(--step-small)}
#price{font-size:clamp(2.5rem,4.4vw,3.75rem);font-weight:600;letter-spacing:-.04em;line-height:1;transition:opacity .2s}
.meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:var(--step-small);color:var(--pmute)}.meta b{color:var(--pink)}
#state{color:var(--pmute);font-size:var(--step-small);min-height:1.3em;margin-top:4px}
#result[data-state=busy] #price,#result[data-state=busy] #lead{opacity:.35}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#form{padding:14px 24px 20px}
.row{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center;padding:6px 0}
.row label{color:var(--pmute);font-size:var(--step-small)}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{background:var(--pstep);border:0;padding:6px 11px;font-size:.9375rem;min-height:36px;color:var(--pink);transition:background .15s,color .15s,transform .12s}
.seg button:hover{background:#c9c4b3}.seg button:active{transform:scale(.95)}
.seg button.on{background:var(--pink);color:var(--paper)}
.seg.sw button{width:36px;padding:0;background:var(--c)}.seg.sw button.on{outline:3px solid var(--pink);outline-offset:2px}
.size{display:flex;align-items:center;gap:8px;color:var(--pmute)}
input[type=number]{width:80px;background:var(--pstep);border:0;color:var(--pink);padding:6px 10px;font:inherit;font-size:.9375rem;min-height:36px;font-variant-numeric:tabular-nums}
/* преимущества: листы */
.feat{padding:120px var(--m) 0}
.feat h2,.how h2{font-size:var(--step-head);margin-bottom:48px}
.sheet{position:sticky;top:var(--top);height:calc(100svh - var(--top) - 16px);min-height:480px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;column-gap:var(--m);padding:20px 0 0 28px;overflow:hidden;border-radius:28px 28px 0 0;margin-top:0}
.sheet h3{grid-column:1/7;grid-row:1;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1;align-self:start;height:52px;white-space:nowrap}
.sheet p{grid-column:1/6;grid-row:2;align-self:end;font-size:1.125rem;max-width:40ch;padding:0 0 32px;line-height:1.45}
.sheet img{grid-column:7/13;grid-row:1/3;width:100%;height:100%;object-fit:cover;margin-top:72px;margin-left:0;min-height:0;transition:transform 1.4s var(--ease)}
.sheet.s1{background:var(--surface)}.sheet.s2{background:var(--surface2)}.sheet.s3{background:var(--accent);color:var(--accent-ink)}
/* шаги */
.how{padding:200px 0 0 var(--m)}.how h2{margin-bottom:40px}
.track{display:flex;gap:var(--m);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--m) 8px 0;cursor:grab;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}.track.drag{cursor:grabbing;scroll-snap-type:none}
.card{flex:0 0 clamp(280px,32vw,460px);min-height:460px;background:var(--surface);padding:28px;display:flex;flex-direction:column;gap:14px;scroll-snap-align:start;transition:background .25s}
.card:nth-child(2n){background:var(--surface2)}.card:hover{background:#2a2f24}
.card h3{font-size:clamp(1.75rem,2.6vw,2.5rem)}
.card p{max-width:30ch}
.card svg{margin-top:auto;width:100%;max-height:160px}
.card img{margin-top:auto;width:100%;height:220px;object-fit:cover}
/* финал */
.close{padding:200px var(--m) 0}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--m)}
.trio img{width:100%;height:clamp(240px,36vw,520px);object-fit:cover}
.trio img:nth-child(1){object-position:20% 50%}.trio img:nth-child(3){object-position:80% 50%}
.field{background:var(--accent);color:var(--accent-ink);margin-top:var(--m);padding:clamp(40px,7vw,120px) var(--m);display:grid;grid-template-columns:repeat(12,1fr);gap:20px var(--m);align-items:end}
.field h2{grid-column:1/9;font-size:clamp(2.5rem,6vw,6.5rem)}
.field p{grid-column:1/7;font-size:var(--step-lead);line-height:1.3}
.field .btn{grid-column:10/13;justify-self:end;background:var(--accent-ink);color:var(--accent)}
/* подвал */
footer{margin-top:200px;overflow:hidden;background:var(--surface);padding:48px var(--m) 0}
.fcols{display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--m);font-size:var(--step-small)}
.fnote{font-size:1.125rem;max-width:22em}.fcols nav{display:flex;flex-direction:column;gap:6px}.fcols nav a:hover{color:var(--accent)}
.credit{color:var(--mute)}
.name{font-weight:600;letter-spacing:-.06em;line-height:.8;font-size:30vw;margin:48px 0 -.12em -.04em;color:var(--ink);white-space:nowrap}
/* появление */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.sheet img.rv.in{transform:scale(1.04)}
@media(max-width:860px){
 :root{--m:16px}
 .bar nav a:nth-child(3){display:none}.bar nav{gap:16px}
 .hero{grid-template-columns:1fr;padding-bottom:40px}.slip{position:static}
 .board{min-height:200px}.board svg{max-height:260px}
 .row{grid-template-columns:1fr;gap:4px}
 .feat{padding-top:80px}
 .sheet{height:auto;min-height:0;padding:12px 0 0 16px;display:flex;flex-direction:column;border-radius:20px 20px 0 0;top:var(--top)}
 .sheet h3{height:40px;font-size:1.375rem}.sheet img{order:2;height:220px;margin-top:0;margin-left:-16px;width:calc(100% + 16px);max-width:none}
 .sheet p{order:3;padding:20px 16px 28px 0;font-size:1.0625rem}
 .how,.close{padding-top:120px}.card{flex-basis:78vw;min-height:380px}
 .trio{grid-template-columns:1fr 1fr}.trio img:nth-child(3){display:none}
 .field h2,.field p{grid-column:1/13}.field .btn{grid-column:1/13;justify-self:start}
 footer{margin-top:120px}.fcols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.first .tr{animation:none}html{scroll-behavior:auto}.board svg,.btn{transition:none}}

/* первый экран v2: композиция как у /6 — заголовок и плата слева, тёмная панель с золотой кромкой справа */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;padding:40px var(--m) 72px;max-width:1320px;margin:0 auto}
h1{font-size:clamp(2.5rem,4.6vw,4.25rem);max-width:13ch;padding-top:0}
.board{background:none;padding:0;min-height:0;margin-top:24px;align-items:flex-start;justify-content:flex-start;height:clamp(300px,34vw,440px)}
.board svg{max-height:none;height:100%;width:auto;max-width:100%}
.slip{background:var(--surface);color:var(--ink);border-top:3px solid var(--accent);top:84px;padding:8px 28px 28px}
.slip h2{font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;padding:22px 0 8px}
#form{padding:0}
.slip .k,.slip .row label,.slip .meta,.slip #state,.slip .size{color:var(--mute)}.slip .meta b{color:var(--ink)}
.slip .row{padding:10px 0;border-bottom:1px solid var(--surface2)}
.slip .seg button{background:var(--surface2);color:var(--ink)}.slip .seg button:hover{background:#2c3224}
.slip .seg button.on{background:var(--accent);color:var(--accent-ink)}
.slip .seg.sw button.on{outline-color:var(--accent)}
.slip input[type=number]{background:var(--surface2);color:var(--ink)}
.slip .stub{border:0;padding:20px 0 0}
.slip #price{color:var(--accent)}
.slip .btn.alt{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.slip .acts .btn{flex:1;text-align:center}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:20px;padding-top:20px}.board{height:260px}.slip{padding:4px 18px 20px}}
.slip .seg.sw button{background:var(--c)}
.slip .tot{align-items:flex-end}
/* живая 3D-плата */
.board{perspective:1400px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;align-items:center;justify-content:center;position:relative;overflow:visible;height:clamp(320px,38vw,480px)}
.board.grab{cursor:grabbing}
.board svg{height:100%;width:100%;max-height:none;transform:none!important;transition:none;display:block;border-radius:2px}
.b3{--s:min(34vw,420px);position:relative;width:calc(var(--s)*var(--fw));height:calc(var(--s)*var(--fh));transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-28deg);will-change:transform}
.b3 .f{position:absolute;backface-visibility:hidden}
.b3 .top{inset:0;transform:translateZ(calc(var(--s)*var(--ft)/2));box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.b3 .bot{inset:0;transform:translateZ(calc(var(--s)*var(--ft)/-2)) rotateY(180deg);background:#12150f}
.b3 .sn,.b3 .ss{left:0;right:0;height:calc(var(--s)*var(--ft))}
.b3 .se,.b3 .sw{top:0;bottom:0;width:calc(var(--s)*var(--ft))}
.b3 .sn{top:0;transform-origin:50% 0;transform:translateZ(calc(var(--s)*var(--ft)/-2)) rotateX(90deg)}
.b3 .ss{bottom:0;transform-origin:50% 100%;transform:translateZ(calc(var(--s)*var(--ft)/-2)) rotateX(-90deg)}
.b3 .se{right:0;transform-origin:100% 50%;transform:translateZ(calc(var(--s)*var(--ft)/-2)) rotateY(90deg)}
.b3 .sw{left:0;transform-origin:0 50%;transform:translateZ(calc(var(--s)*var(--ft)/-2)) rotateY(-90deg)}
.b3 .sn,.b3 .ss,.b3 .se,.b3 .sw{background:linear-gradient(#d7b45f,#7c6330 55%,#b8963f);backface-visibility:visible}
.gl{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle at var(--px,50%) var(--py,40%),rgba(255,222,140,.55),rgba(255,222,140,0) 42%),
 linear-gradient(112deg,transparent calc(var(--sh,40%) - 14%),rgba(255,236,190,.28) var(--sh,40%),transparent calc(var(--sh,40%) + 14%))}
.shadow{position:absolute;left:50%;top:50%;width:calc(34vw);max-width:440px;aspect-ratio:1;margin:-12% 0 0 -17vw;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(14px);z-index:-1;pointer-events:none;transform:translateY(60px)}
.board .cap{position:absolute;left:0;bottom:-8px}
@media(max-width:860px){.b3{--s:min(68vw,300px)}.board{height:300px}.shadow{width:68vw;margin-left:-34vw}}
/* реалистичная плата (three.js) */
.board{perspective:none;position:relative;height:clamp(340px,40vw,520px);cursor:grab;touch-action:pan-y}
.board .gl3{position:absolute;inset:0;width:100%;height:100%;display:block}
.board .cap{position:absolute;left:0;bottom:-6px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--mute);font-size:var(--step-small);z-index:1}
@media(max-width:860px){.board{height:300px}}
/* секции v3: инженерный ритм */
.spec{max-width:1240px;margin:0 auto;padding:clamp(56px,9vw,120px) var(--gut,24px) 0}
.sh{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--accent);padding-top:14px;margin-bottom:clamp(24px,4vw,48px)}
.sh .no,.rows .n,.steps .n{font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:.06em;font-size:var(--step-small)}
.sh h2{font-size:clamp(34px,5.4vw,72px);line-height:1;margin:0;color:var(--ink);opacity:1}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid #2c3026}
.rows h3{font-size:clamp(22px,2.4vw,32px);margin:0;line-height:1.15;color:var(--ink)}
.rows p{margin:0;color:var(--mute);max-width:52ch;line-height:1.5}
.rows b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent);font-size:var(--step-small);text-align:right;letter-spacing:.03em}
.strip{margin:clamp(28px,5vw,56px) 0 0;position:relative}
.strip img{display:block;width:100%;height:clamp(220px,34vw,460px);object-fit:cover;filter:saturate(.8) contrast(1.05)}
.strip figcaption,.xs figcaption{margin-top:10px;color:var(--mute);font-size:var(--step-small);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:16px 0;border-bottom:1px solid #2c3026;vertical-align:middle}
.tbl th{font-weight:500;color:var(--mute);width:40%;font-size:var(--step-small)}
.tbl td{color:var(--ink);font-variant-numeric:tabular-nums;font-size:clamp(16px,1.6vw,20px)}
.sws{display:flex;gap:10px}.sws i{width:28px;height:28px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.xs svg{width:100%;height:auto;display:block}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.steps li{padding:22px 24px 0 0;border-top:1px solid #2c3026;position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--accent)}
.steps h3{font-size:clamp(20px,2vw,26px);margin:10px 0 10px;line-height:1.15;color:var(--ink)}
.steps p{margin:0;color:var(--mute);line-height:1.5}
.end{max-width:1240px;margin:0 auto;padding:clamp(64px,10vw,140px) var(--gut,24px) 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.end h2{font-size:clamp(38px,6vw,84px);line-height:1;margin:0 0 18px;color:var(--ink)}
.end p{color:var(--mute);margin:0 0 28px;font-size:clamp(17px,1.6vw,22px)}
.end .strip{margin:0}.end .strip img{height:clamp(240px,30vw,400px);object-position:50% 40%}
@media(max-width:860px){
 .rows li{grid-template-columns:36px 1fr;gap:6px 12px;padding:20px 0}.rows p,.rows b{grid-column:2;text-align:left}
 .two,.end{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps li{padding:18px 0 22px}
}
footer .fnote,footer nav a,footer .credit{color:var(--mute);opacity:1}
footer nav a:hover{color:var(--accent)}
footer .credit{font-size:12px}