@property --tint{syntax:'<color>';inherits:true;initial-value:#0B0A0A}
@property --fr{syntax:'<length>';inherits:true;initial-value:0px}
:root{
  --bg:#0B0A0A; --card:#131010;
  --ink:#F4F0E9; --muted:#8B8179;
  --line:rgba(244,240,233,.09); --line2:rgba(244,240,233,.2);
  --accent:#E4572E; --sand:#E9D8B4; --mint:#7FD1AE;
  --display:'Unbounded',system-ui,sans-serif;
  --body:'Onest',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(18px,5vw,76px);
  --ease:cubic-bezier(.16,1,.3,1);
  --tint:#0B0A0A;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:clamp(15px,1.05vw,17px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#0B0A0A}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98}
p{margin:0}
.only-client,.only-hire{display:none}
[data-mode="client"] .only-client,[data-mode="hire"] .only-hire{display:inline}

.wrap{padding-inline:var(--pad);max-width:1560px;margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.9vw,28px)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── слои ── */
.grain{position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:9996}

/* ── прелоадер ── */
.pre{position:fixed;inset:0;z-index:10000;background:var(--bg);display:grid;place-items:center;transition:clip-path 1.1s var(--ease);clip-path:inset(0 0 0 0)}
.pre.done{clip-path:inset(0 0 100% 0)}
.pre .num{font-family:var(--display);font-weight:900;font-size:clamp(70px,17vw,230px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.pre .bar{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);height:1px;background:var(--line)}
.pre .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.pre .lbl{position:absolute;left:var(--pad);top:var(--pad)}
.pre .lbl2{position:absolute;right:var(--pad);top:var(--pad)}

/* ── курсор ── */
.ring{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);z-index:9997;pointer-events:none;transition:width .45s var(--ease),height .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:transparent;will-change:transform}
.ring.big{width:86px;height:86px;background:rgba(228,87,46,.92);border-color:var(--accent);color:#0B0A0A}
.ring.txt{width:6px;height:6px;background:var(--ink);border-color:var(--ink)}
@media (hover:none),(pointer:coarse){.ring{display:none}}

/* ── шапка ── */
header{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);transition:background .4s,border-color .4s,transform .6s var(--ease);border-bottom:1px solid transparent}
header.stuck{background:rgba(11,10,10,.72);backdrop-filter:blur(14px);border-color:var(--line)}
header.hide{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.brand b{display:grid;place-items:center;width:26px;height:26px;background:var(--accent);color:#0B0A0A;font-family:var(--display);font-size:13px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(127,209,174,.6);animation:pulse 2.4s infinite;flex:none;display:inline-block}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(127,209,174,0)}100%{box-shadow:0 0 0 0 rgba(127,209,174,0)}}
nav{display:flex;gap:24px}
nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s}
nav a:hover{color:var(--ink)}
@media (max-width:1180px){nav{display:none}}
.hright{display:flex;align-items:center;gap:10px}
.kbtn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line2);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);transition:.3s}
.kbtn:hover{color:var(--ink);border-color:var(--ink)}
.kbtn kbd{font-family:var(--mono);padding:1px 5px;border:1px solid var(--line2);border-radius:4px;font-size:9.5px}
@media (max-width:640px){.kbtn span{display:none}}
.switch{display:flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;flex:none}
.switch button{padding:7px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.3s}
.switch button.on{background:var(--ink);color:var(--bg)}
@media (max-width:480px){.switch button{padding:7px 9px;font-size:9px}}

/* ── герой ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:clamp(30px,5vw,56px);overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 2s var(--ease)}
#gl.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,10,10,.55) 0%,rgba(11,10,10,0) 30%,rgba(11,10,10,.25) 60%,var(--bg) 100%)}
.hero>.wrap{position:relative;z-index:2;width:100%}
.eyebrow{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line2)}
.status{display:inline-flex;align-items:center;gap:8px}
h1.display{font-size:clamp(40px,10.2vw,166px);font-weight:900;line-height:.9;letter-spacing:-.05em;margin:clamp(24px,4vw,44px) 0 0;text-transform:uppercase}
h1.display .l2{color:var(--accent)}
.mask{display:block;overflow:hidden;padding-bottom:.05em;white-space:nowrap}
.mask>span{display:block;transform:translateY(108%);transition:transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.loaded .mask>span{transform:none}
.vl{display:inline-block;font-variation-settings:'wght' 900}
.hero-foot{margin-top:clamp(30px,4.5vw,56px);align-items:end}
.lede{grid-column:span 6;font-size:clamp(16px,1.35vw,21px);line-height:1.5;color:#D8D0C6}
.lede b{color:var(--ink);font-weight:600}
.stats{grid-column:span 6;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);border-top:1px solid var(--line2);padding-top:22px}
.stat .n{display:block;font-family:var(--display);font-size:clamp(24px,3.1vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .l{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.35}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border:1px solid var(--line2);border-radius:999px;font-size:14px;font-weight:500;transition:background .35s,color .35s,border-color .35s;will-change:transform}
.btn:hover{background:rgba(244,240,233,.07)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#0B0A0A}
.btn.solid:hover{background:#f2683c;border-color:#f2683c}
.scrollhint{position:absolute;right:var(--pad);bottom:clamp(30px,5vw,56px);z-index:2;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.scrollhint i{width:1px;height:54px;background:linear-gradient(var(--accent),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){.lede,.stats{grid-column:span 12}.scrollhint{display:none}}
@media (max-width:520px){.stats{grid-template-columns:1fr 1fr}}

/* ── бегущая строка ── */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;white-space:nowrap}
.ticker-row{display:inline-flex;will-change:transform}
.ticker-row span{padding-right:48px;font-family:var(--display);font-size:clamp(18px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;color:#3E3936}
.ticker-row .hot{color:var(--sand)}

/* ── секции ── */
section{padding-block:clamp(66px,9vw,140px)}
.sec-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline;padding-bottom:clamp(24px,3.4vw,46px);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.8vw,56px)}
.sec-title{font-size:clamp(30px,5.2vw,74px);letter-spacing:-.04em}
.sec-title em{font-style:normal;color:var(--accent)}

.pillar{grid-column:span 4;border-top:1px solid var(--line2);padding-top:22px;position:relative}
.pillar::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--accent);transition:width .8s var(--ease)}
.pillar:hover::before{width:100%}
.pillar h3{font-size:clamp(20px,2vw,30px);margin:16px 0 12px}
.pillar p{color:var(--muted);font-size:15px}
.pillar ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pillar li{font-size:14px;color:#BEB5AC;padding-left:18px;position:relative}
.pillar li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}
@media (max-width:900px){.pillar{grid-column:span 12}}

/* ── шоурум ── */
.show{position:relative;background:var(--bg)}
.show-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.show-bg{position:absolute;inset:0;contain:strict;background:radial-gradient(70% 80% at 60% 45%,var(--tint) 0%,var(--bg) 70%);transition:--tint 1s var(--ease);opacity:.9;pointer-events:none}
.track{position:relative;display:flex;gap:clamp(24px,3vw,56px);padding-inline:var(--pad);align-items:center;will-change:transform}
.intro-panel{flex:none;width:clamp(280px,31vw,480px);display:flex;flex-direction:column;gap:22px}
.intro-panel .sec-title{font-size:clamp(30px,3.3vw,58px);line-height:1.02;overflow-wrap:anywhere}
.intro-panel p{color:var(--muted);max-width:34ch}
.panel{flex:none;width:min(78vw,calc(60vh * 1.6));cursor:none;text-align:left;display:block}
.p-cover{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0E0D0D;border:1px solid var(--line);transform-style:preserve-3d;transition:transform .8s var(--ease),border-color .5s;will-change:transform}
.panel:hover .p-cover{border-color:var(--line2)}
.p-cover .spot{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 45%)}
.panel:hover .spot{opacity:1}
.p-info{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,32px);align-items:baseline;padding-top:22px}
.p-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.p-info h3{font-size:clamp(22px,2.4vw,38px)}
.p-info p{grid-column:2/3;color:var(--muted);font-size:14.5px;max-width:60ch;margin-top:-4px}
.p-info .tags{grid-row:1;grid-column:3}
.tags{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.outro-panel{flex:none;width:clamp(300px,40vw,620px);display:flex;flex-direction:column;gap:22px;padding-right:var(--pad)}
.outro-panel h3{font-size:clamp(34px,4.6vw,76px);letter-spacing:-.045em;line-height:.92}
.outro-panel h3 em{font-style:normal;color:var(--accent)}
.show-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,3.5vh,40px);display:flex;align-items:center;gap:22px;z-index:3}
.show-hud .bar{flex:1;height:1px;background:var(--line2);position:relative;overflow:hidden}
.show-hud .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.show-hud .cnt{font-family:var(--display);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;min-width:74px}
.show-hud .nm{min-width:180px;text-align:right}
@media (max-width:900px){
  .show-sticky{position:relative;height:auto;padding-block:70px}
  .track{flex-direction:column;align-items:stretch;transform:none!important;gap:48px}
  .intro-panel,.panel,.outro-panel{width:100%}
  .outro-panel{padding-right:0}
  .show-hud{display:none}
  .panel{cursor:pointer}
  .p-info{grid-template-columns:auto 1fr}
  .p-info .tags{grid-column:1/-1;grid-row:auto}
  .p-info p{grid-column:1/-1}
}

/* мини-UI обложки */
.art{position:absolute;inset:0;transition:transform 1.4s var(--ease)}
.panel:hover .art{transform:scale(1.05)}
.shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,10,10,.05),rgba(11,10,10,.5));pointer-events:none}
.idx{position:absolute;top:16px;left:18px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,240,233,.75)}
.slug{position:absolute;bottom:16px;left:18px;z-index:3;font-family:var(--mono);font-size:11px;color:rgba(244,240,233,.7)}
.live{position:absolute;top:14px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(11,10,10,.72);border:1px solid var(--line2);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.ui{position:absolute;inset:0;z-index:1;padding:clamp(14px,2vw,30px);padding-top:clamp(46px,5vw,64px);padding-bottom:clamp(40px,4vw,54px);display:flex;flex-direction:column;gap:10px}
.bars{display:flex;align-items:flex-end;gap:6px;height:48%}
.bars i{flex:1;background:linear-gradient(180deg,#6FA8FF,rgba(111,168,255,.12));border-radius:3px;transform-origin:bottom;animation:grow 2.4s var(--ease) both;animation-delay:var(--gd,0s)}
@keyframes grow{from{transform:scaleY(.12)}}
.kpi{display:flex;gap:8px}
.kpi div{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(20,24,36,.7)}
.kpi b{display:block;font-family:var(--mono);font-size:clamp(10px,1.1vw,15px)}
.kpi s{display:block;text-decoration:none;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.bub{max-width:72%;padding:9px 13px;border-radius:15px;font-size:clamp(10.5px,1.1vw,14px);line-height:1.38}
.bub.them{align-self:flex-start;background:rgba(244,240,233,.1);border-bottom-left-radius:4px}
.bub.me{align-self:flex-end;background:var(--mint);color:#08130F;border-bottom-right-radius:4px}
.typing{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.typing i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:1;transform:translateY(-2px)}}
.stars{color:#FFC542;font-size:13px;letter-spacing:2px}
.rev{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.045);font-size:clamp(10.5px,1.05vw,13.5px);line-height:1.42;max-width:86%}
.big-n{font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,96px);letter-spacing:-.05em;line-height:.9}
.term{font-family:var(--mono);font-size:clamp(10px,1.05vw,13px);line-height:1.85;color:rgba(244,240,233,.68)}
.term u{text-decoration:none;color:var(--accent)}
.frame-art{position:absolute;inset:13%;z-index:1;border:1px solid rgba(244,240,233,.28)}
.frame-art::after{content:"";position:absolute;inset:9px;border:1px solid rgba(244,240,233,.14)}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic}

/* ── лаборатория ── */
.lab-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.lab-tabs button{padding:11px 18px;border:1px solid var(--line2);border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.3s}
.lab-tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lab{border:1px solid var(--line2);border-radius:18px;background:linear-gradient(180deg,#141111,#0F0D0D);overflow:hidden}
.lab-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lab-bar i{width:10px;height:10px;border-radius:50%;background:#2A2524}
.lab-bar span{margin-left:10px}
.lab-pane{display:none;padding:clamp(18px,3vw,40px);gap:clamp(20px,3vw,48px);grid-template-columns:1fr 1fr}
.lab-pane.on{display:grid;animation:fadeup .6s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}}
@media (max-width:900px){.lab-pane{grid-template-columns:1fr}}
.lab h4{font-size:clamp(20px,2vw,30px);margin-bottom:12px}
.lab .desc{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.note{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#6B625B}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input[type=text],.field textarea,.field select{width:100%;padding:12px 14px;background:#0B0A0A;border:1px solid var(--line2);border-radius:10px;outline:none;transition:border-color .3s;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.starpick{display:flex;gap:4px}
.starpick button{font-size:24px;color:#3A3431;transition:color .2s,transform .2s}
.starpick button.on{color:#FFC542}
.starpick button:hover{transform:scale(1.15)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line2);outline:none;margin:18px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 6px rgba(228,87,46,.18)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.calc-out{display:grid;gap:14px}
.calc-row{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.calc-row .v{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,42px);letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.calc-row.hl{border-color:rgba(228,87,46,.45);background:rgba(228,87,46,.07)}
.calc-row.hl .v{color:var(--accent)}
.sales{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,56px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wbcard{border:1px solid var(--line2);border-radius:14px;padding:18px;background:#0B0A0A;display:flex;flex-direction:column;gap:12px;min-height:320px}
.wbcard .head{display:flex;justify-content:space-between;align-items:center}
.wbcard .badge{padding:3px 9px;border-radius:6px;background:#CB11AB;color:#fff;font-family:var(--mono);font-size:10px;font-weight:500}
.reply{padding:14px;border-radius:12px;border:1px solid rgba(228,87,46,.4);background:rgba(228,87,46,.07);font-size:14.5px;line-height:1.5;min-height:120px;white-space:pre-wrap}
.reply .caret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:car 1s steps(1) infinite}
@keyframes car{50%{opacity:0}}
.chat{border:1px solid var(--line2);border-radius:14px;background:#0B0A0A;display:flex;flex-direction:column;height:430px;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-head .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1E6F5C,#7FD1AE)}
.chat-head b{display:block;font-size:14px}
.chat-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.chat-body .bub{max-width:82%;animation:fadeup .45s var(--ease)}
.chat-body .bub.me{background:#1E2A26;color:var(--ink);border:1px solid rgba(127,209,174,.3)}
.chat-body .bub.them{background:rgba(244,240,233,.08)}
.chat-body .sys{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mint);padding:5px 10px;border:1px solid rgba(127,209,174,.3);border-radius:999px;animation:fadeup .45s var(--ease)}
.chat-body .photo{width:140px;height:92px;border-radius:10px;background:linear-gradient(135deg,#3A3F48,#1B1E24);position:relative;overflow:hidden}
.chat-body .photo::after{content:"IMG_2041.jpg";position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.6)}
.chat-body .photo::before{content:"";position:absolute;left:18%;top:40%;width:34px;height:20px;border-radius:40%;border:2px solid #FF6B6B;box-shadow:0 0 12px rgba(255,107,107,.5)}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-top:1px solid var(--line)}
.quick button{padding:8px 12px;border:1px solid var(--line2);border-radius:999px;font-size:12.5px;transition:.3s}
.quick button:hover{border-color:var(--mint);color:var(--mint)}
.quick button:disabled{opacity:.3;pointer-events:none}
.feat{display:grid;gap:14px;margin-top:6px}
.feat div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#C4BCB3}
.feat div::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent)}

/* ── процесс / стек / принципы / faq ── */
.step{grid-column:span 12;display:grid;grid-template-columns:120px 1fr 1fr;gap:clamp(14px,2vw,40px);padding:28px 0;border-top:1px solid var(--line);align-items:start;position:relative}
.step::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);transition:width 1s var(--ease)}
.step:hover::after{width:100%}
.step h3{font-size:clamp(19px,2vw,30px);transition:transform .6s var(--ease)}
.step:hover h3{transform:translateX(12px)}
.step p{color:var(--muted);font-size:14.5px}
@media (max-width:820px){.step{grid-template-columns:1fr;gap:10px}}
.stackgrid{grid-column:span 12;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,26px)}
.stackcol{border-top:1px solid var(--line2);padding-top:18px}
.stackcol h4{font-size:12px;font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.stackcol ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.stackcol li{font-size:14.5px;color:#C4BCB3}
.princ{grid-column:span 6;border-top:1px solid var(--line);padding:22px 0}
.princ h3{font-size:clamp(17px,1.5vw,22px);margin-bottom:10px}
.princ p{color:var(--muted);font-size:14.5px}
@media (max-width:820px){.princ{grid-column:span 12}}
details.faq{grid-column:span 12;border-bottom:1px solid var(--line)}
details.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.7vw,24px);letter-spacing:-.02em;transition:color .3s}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--accent)}
details.faq summary i{flex:none;width:22px;height:22px;position:relative}
details.faq summary i::before,details.faq summary i::after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:currentColor;transition:transform .4s var(--ease)}
details.faq summary i::after{transform:rotate(90deg)}
details.faq[open] summary i::after{transform:rotate(0)}
details.faq .ans{padding:0 0 24px;max-width:78ch;color:var(--muted);font-size:15px}

/* ── контакт + финал ── */
.outro{padding-block:clamp(80px,11vw,170px);border-top:1px solid var(--line)}
.outro h2{font-size:clamp(42px,10vw,168px);font-weight:900;letter-spacing:-.05em;line-height:.86;text-transform:uppercase;margin:22px 0 0}
.outro h2 em{font-style:normal;color:var(--accent);display:block}
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line);padding-top:26px}
.contacts a,.contacts button,.contacts div{display:block;text-align:left}
.contacts s{display:block;text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contacts b{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.4vw,21px);letter-spacing:-.02em;transition:color .3s}
.contacts a:hover b,.contacts button:hover b{color:var(--accent)}
.flash{position:relative;padding-inline:var(--pad);font-family:var(--display);font-weight:900;font-size:15.2vw;line-height:.8;letter-spacing:-.05em;text-transform:uppercase;user-select:none;overflow:hidden;padding-top:.1em;cursor:none}
.flash .o{display:block;color:transparent;-webkit-text-stroke:1px rgba(244,240,233,.13)}
.flash .f{position:absolute;inset:0;padding:inherit;padding-top:.1em;color:var(--accent);--fr:0px;-webkit-mask-image:radial-gradient(circle var(--fr) at var(--fx,50%) var(--fy,50%),#000 0%,#000 25%,transparent 100%);mask-image:radial-gradient(circle var(--fr) at var(--fx,50%) var(--fy,50%),#000 0%,#000 25%,transparent 100%);transition:--fr .6s var(--ease)}
.flash:hover .f{--fr:clamp(120px,16vw,280px)}
.foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:22px var(--pad);border-top:1px solid var(--line)}

/* ── кейс ── */
.case{position:fixed;inset:0;z-index:9995;background:var(--bg);overflow:auto;visibility:hidden;clip-path:inset(50% 50% 50% 50% round 18px);transition:clip-path .9s var(--ease),visibility 0s .9s;overscroll-behavior:contain}
.case.on{visibility:visible;clip-path:inset(0 0 0 0 round 0);transition:clip-path .9s var(--ease),visibility 0s}
.case-top{position:relative;height:min(78vh,760px);overflow:hidden}
.case-top .ui{inset:0 0 38% 0;padding:clamp(80px,9vw,110px) var(--pad) 12px}
.case-top .ui .bub,.case-top .ui .rev{max-width:min(520px,70%)}
.case-top .big-n{font-size:clamp(50px,9vw,150px)}
.case-top::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,10,10,.3),rgba(11,10,10,0) 40%,var(--bg) 100%);pointer-events:none}
.case-title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vw,50px);z-index:3}
.case-title h2{font-size:clamp(38px,7.4vw,124px);letter-spacing:-.05em;line-height:.9;margin-top:12px}
.case-x{position:fixed;top:18px;right:var(--pad);z-index:9;width:48px;height:48px;border-radius:50%;background:rgba(11,10,10,.6);backdrop-filter:blur(8px);border:1px solid var(--line2);display:grid;place-items:center;font-size:18px;transition:.3s}
.case-x:hover{background:var(--accent);color:#0B0A0A;border-color:var(--accent);transform:rotate(90deg)}
.case-body{padding:clamp(30px,5vw,70px) var(--pad) clamp(60px,8vw,110px);max-width:1560px;margin:auto}
.case-sub{font-size:clamp(18px,1.8vw,27px);line-height:1.45;color:#D8D0C6;max-width:52ch}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(34px,4vw,60px);border-top:1px solid var(--line);padding-top:26px}
.metrics b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,58px);letter-spacing:-.04em;line-height:1;color:var(--accent)}
.metrics span{display:block;margin-top:10px;color:var(--muted);font-size:14px}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,2.4vw,36px);margin-top:clamp(40px,5vw,70px)}
.blocks>div{border-top:1px solid var(--line2);padding-top:18px}
.blocks h4{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.blocks ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.blocks li{font-size:15px;color:#C4BCB3;padding-left:16px;position:relative}
.blocks li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:1px;background:var(--line2)}
.case-next{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,7vw,100px);padding-top:30px;border-top:1px solid var(--line);text-align:left;width:100%}
.case-next h3{font-size:clamp(28px,5vw,80px);letter-spacing:-.045em;transition:color .4s}
.case-next:hover h3{color:var(--accent)}

/* ── палитра команд ── */
.pal{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;background:rgba(6,5,5,.6);backdrop-filter:blur(8px)}
.pal.on{display:flex;animation:fadeup .35s var(--ease)}
.pal-box{width:min(620px,100%);background:#141111;border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.pal-box input{width:100%;padding:18px 20px;background:none;border:0;border-bottom:1px solid var(--line);outline:none;font-size:17px}
.pal-list{max-height:52vh;overflow:auto;padding:8px}
.pal-item{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:10px;text-align:left;font-size:15px}
.pal-item.sel{background:rgba(244,240,233,.07)}
.pal-item.sel .mono{color:var(--accent)}
.pal-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line)}

.toast{position:fixed;left:50%;bottom:28px;z-index:10001;transform:translate(-50%,20px);opacity:0;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;transition:.5s var(--ease);pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}

.chip-g{padding:4px 10px;border:1px solid var(--g);border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g)}