/* web-techno.net: дизайн-система по style-reference ElevenLabs (DESIGN 9.md).
   Eggshell canvas, taupe-поверхности, чёрные pill-кнопки, Inter 300 как замена Waldenburg,
   violet #0447ff и orange #ff4704 только внутри визуалов (сферы, иллюстрации). */
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-cyrillic-400_600.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-latin-400_600.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:JBMono;src:url(/assets/fonts/JetBrainsMono-cyrillic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-045F}
@font-face{font-family:JBMono;src:url(/assets/fonts/JetBrainsMono-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --egg:#fdfcfc;--taupe:#f5f3f1;--stone:#ebe8e4;--ink:#000;--graphite:#44403b;--smoke:#777169;--ash:#a59f97;
  --violet:#0447ff;--ember:#ff4704;--pink:#ff7ab8;--peach:#ffc29a;--teal:#14b8a6;
  --b:#e5e5e5;
  --sh:rgba(0,0,0,.4) 0 0 1px 0,rgba(0,0,0,.04) 0 1px 1px 0,rgba(0,0,0,.04) 0 2px 4px 0;
  --sh-in:rgba(0,0,0,.075) 0 0 0 .5px inset;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:JBMono,ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1280px;--gut:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--egg);color:var(--ink);font:400 16px/1.5 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::selection{background:#000;color:#fff}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#000;color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.dsp,.h1,.h2,.h3{font-weight:300;letter-spacing:-.02em;font-feature-settings:"ss01","cv11"}
.dsp{font-size:clamp(40px,5.4vw,72px);line-height:1.04}
.h1{font-size:clamp(36px,4.2vw,56px);line-height:1.08}
.h2{font-size:clamp(30px,3.2vw,48px);line-height:1.08}
.h3{font-size:clamp(26px,2.5vw,36px);line-height:1.17}
.h4{font-size:20px;line-height:1.35;font-weight:400;letter-spacing:-.005em}
.lead{font-size:18px;line-height:1.6;color:var(--smoke);max-width:56ch}
.muted{color:var(--smoke)}
.ash{color:var(--ash)}
.eyb{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--graphite);margin-bottom:16px}
.eyb i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ember))}
.mono{font-family:var(--mono);font-size:13px;line-height:1.69}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:9999px;border:1px solid var(--b);font:500 14px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),transform .2s var(--ease),box-shadow .25s}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:#000;color:#fff;border-color:#000}
.btn-primary:hover{background:#262421}
.btn-ghost{background:var(--egg);color:#000;box-shadow:var(--sh)}
.btn-ghost:hover{background:var(--taupe)}
.btn-sm{height:34px;padding:0 14px;font-size:14px}
.link{border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .2s}
.link:hover{opacity:.6}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px}
.more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.more:hover svg{transform:translateX(3px)}

/* ---------- announcement + header ---------- */
.ann{background:var(--taupe);font-size:14px;color:var(--graphite);text-align:center;padding:10px 16px;position:relative}
.ann a{display:inline}
.ann b{font-weight:500;color:#000}
.ann svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-left:6px;transition:transform .3s var(--ease)}
.ann a:hover svg{transform:translateX(3px)}
.hdr{position:sticky;top:0;z-index:40;background:rgba(253,252,252,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 1px 0 var(--stone)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.02em}
.logo svg{width:22px;height:22px}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav-a{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:999px;font-size:14px;color:#000;transition:background .2s}
.nav-a:hover,.nav-a[aria-expanded=true]{background:var(--taupe)}
.nav-a[aria-current=page]{background:var(--taupe)}
.nav-a svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-a[aria-expanded=true] svg{transform:rotate(180deg)}
.mega{position:absolute;left:-12px;top:calc(100% + 10px);width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--egg);border-radius:20px;box-shadow:var(--sh),0 24px 48px -12px rgba(68,64,59,.18);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:all .28s var(--ease)}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;transition:background .2s}
.mega a:hover{background:var(--taupe)}
.mega .orb{width:40px;flex:none}
.mega b{display:block;font-weight:500;font-size:14px}
.mega small{display:block;color:var(--smoke);font-size:13px}
.hdr-cta{margin-left:auto;display:flex;gap:8px}
.burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:999px;align-items:center;justify-content:center}
.burger svg{width:22px;height:22px}
.mnav{display:none}

/* ---------- spheres (ElevenLabs audio orbs) ---------- */
.orb{position:relative;aspect-ratio:1;border-radius:50%;isolation:isolate;overflow:hidden;
  --c1:var(--violet);--c2:var(--ember);--c3:var(--pink);--c4:var(--peach);
  background:radial-gradient(circle at 50% 50%,var(--c4),var(--c3) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.orb::before{content:"";position:absolute;inset:-25%;z-index:-1;background:conic-gradient(from var(--a),var(--c1),var(--c3),var(--c2),var(--c4),var(--c1));filter:blur(18px);animation:orbspin 9s linear infinite}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 38%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.12),transparent 45%)}
.orb.o2{--c1:#ff4704;--c2:#ffb347;--c3:#ff7ab8;--c4:#ffe1c4}
.orb.o3{--c1:#0447ff;--c2:#14b8a6;--c3:#7dd3fc;--c4:#e0f2ff}
.orb.o4{--c1:#7c3aed;--c2:#ff4704;--c3:#f472b6;--c4:#fde2e4}
.orb.o5{--c1:#0f766e;--c2:#0447ff;--c3:#a7f3d0;--c4:#f0fdf4}
.orb.o6{--c1:#111;--c2:#ff4704;--c3:#a59f97;--c4:#f5f3f1}
.orb.slow::before{animation-duration:16s}
@keyframes orbspin{to{--a:360deg}}
.orb-glow{position:absolute;inset:8%;border-radius:50%;background:inherit;filter:blur(40px);opacity:.55;z-index:-1}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.split.in .w>span{transform:none}

/* ---------- sections ---------- */
.sec{padding:112px 0}
.sec-t{padding-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.band{background:var(--taupe)}
hr.hl{border:0;border-top:1px solid var(--stone);margin:0}

/* hero */
.hero{padding:72px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:end}
.hero h1{max-width:13ch}
.hero .ctas{display:flex;gap:8px;margin-top:32px}
.hero .lead{justify-self:end;max-width:40ch;padding-bottom:6px}
.voices{margin-top:56px;position:relative}
.vtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.vtrack::-webkit-scrollbar{display:none}
.voice{scroll-snap-align:start;display:block;background:var(--taupe);border-radius:24px;padding:20px 20px 24px;transition:background .35s var(--ease)}
.voice:hover{background:var(--stone)}
.voice .stage{position:relative;display:grid;place-items:center;aspect-ratio:1.15;border-radius:16px;background:var(--egg);overflow:hidden;box-shadow:var(--sh-in)}
.voice .orb{width:58%;transition:transform .8s var(--ease)}
.voice:hover .orb{transform:scale(1.08)}
.voice .play{position:absolute;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh);transition:transform .35s var(--ease)}
.voice .play svg{width:18px;height:18px}
.voice:hover .play{transform:scale(1.12)}
.voice .wave{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:3px;align-items:center;height:18px;opacity:0;transition:opacity .3s}
.voice .wave i{width:3px;border-radius:2px;background:#000;height:30%;animation:wv 1s ease-in-out infinite}
.voice .wave i:nth-child(2){animation-delay:-.2s}.voice .wave i:nth-child(3){animation-delay:-.45s}.voice .wave i:nth-child(4){animation-delay:-.7s}.voice .wave i:nth-child(5){animation-delay:-.3s}
.voice:hover .wave{opacity:1}
@keyframes wv{0%,100%{height:25%}50%{height:100%}}
.voice h3{margin-top:18px;font-size:16px;font-weight:500}
.voice p{color:var(--smoke);font-size:14px;margin-top:4px}
.voice .n{font-size:13px;color:var(--ash);margin-top:12px;display:block}
.vnav{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.vnav button{width:40px;height:40px;border-radius:999px;border:1px solid var(--b);display:grid;place-items:center;background:var(--egg);transition:background .2s}
.vnav button:hover{background:var(--taupe)}
.vnav button:disabled{opacity:.35;cursor:default}
.vnav svg{width:16px;height:16px}

/* logos */
.logos{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--stone)}
.logos .cell{position:relative;height:120px;display:grid;place-items:center;border-bottom:1px solid var(--stone)}
.logos .cell+.cell{border-left:1px solid var(--stone)}
.logos .lg{position:absolute;display:flex;align-items:center;gap:10px;color:var(--graphite);font-size:15px;font-weight:500;transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s}
.logos .lg svg{width:26px;height:26px;fill:currentColor}
.logos .lg.off{opacity:0;transform:translateY(10px);filter:blur(4px)}
.logos .cell:hover .lg{color:#000}

/* platforms */
.plats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plat{display:block}
.plat .pic{position:relative;border-radius:24px;overflow:hidden;background:var(--taupe);aspect-ratio:1.42}
.plat .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plat:hover .pic img{transform:scale(1.04)}
.plat .pic .chip{position:absolute;left:20px;bottom:20px;display:flex;gap:8px;align-items:center;background:rgba(253,252,252,.86);backdrop-filter:blur(10px);padding:8px 14px 8px 8px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:var(--sh)}
.plat .pic .chip .orb{width:24px}
.plat h3{font-size:20px;font-weight:500;margin-top:20px}
.plat p{color:var(--smoke);margin-top:4px}

/* feature bento (Разборы) */
.feat{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(300px,auto);gap:16px}
.fc{background:var(--taupe);border-radius:20px;padding:28px 28px 0;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:background .3s}
.fc h3{font-size:18px;font-weight:500}
.fc p{color:var(--smoke);font-size:15px;margin-top:6px;max-width:38ch}
.fc .vis{margin-top:auto;padding:24px 0 28px;display:flex;align-items:flex-end;justify-content:center;min-height:150px}
.fc.big{grid-column:span 2;grid-row:span 2}
.fc.img{padding:0;justify-content:flex-end;color:#fff;min-height:300px}
.fc.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fc.img:hover img{transform:scale(1.05)}
.fc.img .tx{position:relative;padding:28px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.fc.img p{color:rgba(255,255,255,.85)}
/* editor panel (real component: живой дифф статьи) */
.editor{width:100%;background:var(--egg);border-radius:16px 16px 0 0;box-shadow:var(--sh);overflow:hidden;align-self:stretch;margin-top:28px}
.editor .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--stone);font-size:13px;color:var(--smoke)}
.editor .bar .pill{margin-left:auto}
.editor .tabsx{display:flex;gap:6px}
.editor .tabsx button{height:28px;padding:0 12px;border-radius:999px;font-size:13px;border:1px solid var(--b);background:var(--egg)}
.editor .tabsx button[aria-selected=true]{background:#000;color:#fff;border-color:#000}
.code{margin:0;padding:18px 0;font:400 13px/1.85 var(--mono);color:var(--graphite);overflow-x:auto;min-height:250px}
.code .ln{display:block;padding:0 18px;white-space:pre;transition:background .5s var(--ease),opacity .5s}
.code .ln.add{background:rgba(20,184,166,.12)}
.code .ln.del{background:rgba(255,71,4,.09);text-decoration:line-through;text-decoration-color:rgba(255,71,4,.5);opacity:.7}
.code .k{color:#000;font-weight:500}.code .c{color:var(--ash)}.code .f{color:#0447ff}.code .s{color:#b5440f}
.editor .foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--stone)}
.editor .prog{flex:1;height:3px;border-radius:3px;overflow:hidden}
.editor .prog i{display:block;height:100%;width:0;background:#000;transition:width 2.6s linear}
.editor .playb{width:32px;height:32px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.editor .playb svg{width:14px;height:14px}
/* tradeoff table vis */
.tt{width:100%;background:var(--egg);border-radius:14px;box-shadow:var(--sh);font-size:13px;overflow:hidden}
.tt div{display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:9px 14px;border-top:1px solid var(--stone);opacity:0;transform:translateX(-10px);transition:all .6s var(--ease)}
.tt div:first-child{border-top:0;color:var(--ash)}
.in .tt div{opacity:1;transform:none}
.tt div:nth-child(2){transition-delay:.15s}.tt div:nth-child(3){transition-delay:.3s}.tt div:nth-child(4){transition-delay:.45s}
.tt .y{color:#0f766e}.tt .n{color:#b5440f}
/* checklist vis */
.ckl{width:100%;display:grid;gap:8px}
.ckl li{list-style:none;display:flex;align-items:center;gap:10px;background:var(--egg);border-radius:12px;padding:10px 12px;font-size:14px;box-shadow:var(--sh)}
.ckl{padding:0;margin:0}
.ckl .bx{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--ash);display:grid;place-items:center;flex:none;transition:all .3s var(--ease)}
.ckl .bx svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.4);transition:all .3s var(--ease)}
.ckl li.done .bx{background:#000;border-color:#000}
.ckl li.done .bx svg{opacity:1;transform:none}
.ckl li.done span{color:var(--smoke)}
/* level pills */
.lvl{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.lvl .pills{display:flex;gap:6px;background:var(--egg);padding:5px;border-radius:999px;box-shadow:var(--sh);position:relative}
.lvl .pills span{position:relative;z-index:1;height:32px;padding:0 14px;display:grid;place-items:center;border-radius:999px;font-size:13px;transition:color .35s}
.lvl .pills span.on{color:#fff}
.lvl .pills i{position:absolute;top:5px;height:32px;border-radius:999px;background:#000;transition:all .45s var(--ease)}
.lvl .orb{width:84px}
/* faq vis */
.qa{width:100%;display:grid;gap:8px}
.qa div{background:var(--egg);border-radius:12px;box-shadow:var(--sh);padding:11px 14px;font-size:14px}
.qa div b{font-weight:500;display:flex;justify-content:space-between;gap:8px}
.qa div b::after{content:"+";color:var(--ash);transition:transform .3s}
.qa div.open b::after{transform:rotate(45deg)}
.qa div p{max-height:0;overflow:hidden;color:var(--smoke);font-size:13px;transition:max-height .6s var(--ease),margin .4s}
.qa div.open p{max-height:80px;margin-top:6px}

/* stories (featured) */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.story{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:16px;border-radius:20px;background:var(--egg);box-shadow:var(--sh-in);border:1px solid var(--stone);transition:background .25s,transform .4s var(--ease)}
.story:hover{background:var(--taupe);transform:translateY(-2px)}
.story img{width:96px;height:96px;object-fit:cover;border-radius:14px}
.story b{display:block;font-weight:500;font-size:15px}
.story span{display:block;color:var(--smoke);font-size:14px;margin-top:2px;line-height:1.4}
.center{display:flex;justify-content:center;margin-top:40px}

/* practice: statement + tabs */
.stmt{font-size:clamp(24px,2.4vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.2;max-width:28ch;margin:0 0 48px}
.stmt em{font-style:normal;color:var(--smoke)}
.prac{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
.ptabs{display:flex;flex-direction:column;gap:4px}
.ptab{text-align:left;padding:18px 20px;border-radius:20px;transition:background .3s;position:relative}
.ptab b{display:block;font-weight:500;font-size:17px}
.ptab span{display:block;color:var(--smoke);font-size:15px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.ptab[aria-selected=true]{background:var(--taupe)}
.ptab[aria-selected=true] span{max-height:90px;opacity:1;margin-top:6px}
.ptab .bar{position:absolute;left:20px;right:20px;bottom:10px;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.ptab[aria-selected=true] .bar::after{content:"";position:absolute;inset:0;background:#000;transform-origin:left;animation:fill 8s linear forwards}
.ptab.user .bar::after{animation:none;transform:none;opacity:.15}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pvis{position:relative;border-radius:24px;overflow:hidden;background:var(--taupe);min-height:460px}
.pvis .bgorb{position:absolute;width:70%;right:-14%;top:-18%;opacity:.9}
.pvis .bgorb.b2{width:44%;left:-12%;bottom:-16%;top:auto;right:auto}
.ppane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.ppane.on{opacity:1;transform:none;pointer-events:auto}
.card{background:rgba(253,252,252,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;box-shadow:var(--sh),0 30px 60px -30px rgba(68,64,59,.35);padding:22px;width:min(440px,100%)}
.card h4{font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .mono{color:var(--graphite)}
.card .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--stone);font-size:14px}
.card .row:first-of-type{border-top:0}
.card .row span{color:var(--smoke)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--egg);border:1px solid var(--b);font-size:12px;font-weight:500;white-space:nowrap}
.pill.dk{background:#000;color:#fff;border-color:#000}
.pill.t{background:var(--taupe);border-color:transparent}
.card .a{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-size:14px;font-weight:500}
.card .a svg{width:14px;height:14px}
.term{overflow-wrap:anywhere;background:#0d0c0b;color:#e8e4df;border-radius:14px;padding:14px 16px;font:400 13px/1.8 var(--mono);margin-top:12px;min-height:96px;white-space:pre-wrap}
.term .p{color:#ff8a5c}.term .g{color:#5eead4}.term .d{color:#8a847c}
.caret::after{content:"";display:inline-block;width:7px;height:15px;background:currentColor;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* tools (API-like) */
.tools{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.tool{background:var(--taupe);border-radius:24px;padding:32px;display:flex;flex-direction:column}
.tool h3{font-size:22px;font-weight:400;letter-spacing:-.01em}
.tool>p{color:var(--smoke);margin-top:8px;max-width:46ch}
.models{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.model{display:flex;gap:14px;align-items:center;background:var(--egg);border-radius:16px;padding:14px;box-shadow:var(--sh-in);transition:transform .4s var(--ease),box-shadow .3s}
.model:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.model .orb{width:44px;flex:none}
.model b{display:block;font-weight:500;font-size:15px}
.model span{display:block;color:var(--smoke);font-size:13px;line-height:1.4}
.tool .more{margin-top:24px}
.tool .vt{margin-top:auto;padding-top:24px}

/* timeline */
.tl-head{max-width:30ch}
.tl{margin-top:48px;position:relative}
.tltrack{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding:4px 0 8px}
.tltrack::-webkit-scrollbar{display:none}
.tltrack.drag{cursor:grabbing;scroll-snap-type:none}
.tli{scroll-snap-align:start;border-top:1px solid var(--stone);padding-top:20px;position:relative;user-select:none}
.tli::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--egg);border:1px solid #000;transition:background .3s}
.tli:hover::before{background:#000}
.tli .dt{font-size:13px;color:var(--ash)}
.tli h3{font-size:20px;font-weight:400;margin-top:10px;letter-spacing:-.01em}
.tli p{color:var(--smoke);font-size:14px;margin-top:6px}
.tli a{display:inline-block;margin-top:12px;font-size:14px;font-weight:500;border-bottom:1px solid var(--stone)}
.tli a:hover{border-color:#000}
.tli.now h3::after{content:"новое";margin-left:8px;font-size:11px;vertical-align:4px;padding:2px 8px;border-radius:999px;background:#000;color:#fff;font-weight:500}

/* principles (safety) */
.safe{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.safe .pic{border-radius:24px;overflow:hidden;background:var(--taupe);min-height:420px;position:relative}
.safe .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.safe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.safe li{padding:28px 0;border-top:1px solid var(--stone);display:grid;grid-template-columns:52px 1fr;gap:18px}
.safe li:first-child{border-top:0;padding-top:4px}
.safe li .orb{width:44px}
.safe h3{font-size:20px;font-weight:400}
.safe li p{color:var(--smoke);margin-top:6px}

/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 16px}
.post{display:flex;flex-direction:column}
.post .ph{border-radius:20px;overflow:hidden;background:var(--taupe);aspect-ratio:1.5}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .ph img{transform:scale(1.04)}
.post .meta{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:13px;color:var(--ash)}
.post h3{font-size:18px;font-weight:500;line-height:1.35;margin-top:10px;letter-spacing:-.005em}
.post p{color:var(--smoke);font-size:15px;margin-top:8px}
.post .rd{font-size:13px;color:var(--ash);margin-top:10px}
.post.big{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.post.big .ph{aspect-ratio:1.6}
.post.big h3{font-size:clamp(26px,2.6vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.15}

/* final cta */
.fcta{position:relative;overflow:hidden;border-radius:24px;background:var(--taupe);padding:96px 64px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:32px}
.fcta .sph{position:relative;justify-self:center;width:min(420px,90%)}
.fcta .sph img{border-radius:50%;animation:breath 7s ease-in-out infinite}
.fcta .sph .orb{position:absolute;width:22%;right:-4%;top:6%;animation:floaty 6s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.04) rotate(6deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.fcta p{color:var(--smoke);margin-top:16px;max-width:44ch}
.fcta .ctas{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap}

/* floating orb button (как «Voice chat» на референсе) */
.fab{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:10px;height:52px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--egg);box-shadow:var(--sh),0 12px 30px -10px rgba(68,64,59,.35);font-size:14px;font-weight:500;transform:translateY(90px);transition:transform .6s var(--ease)}
.fab.show{transform:none}
.fab .orb{width:40px}
.fab:hover .orb::before{animation-duration:2.5s}

/* footer */
.ftr{margin-top:112px;border-top:1px solid var(--stone);padding:64px 0 32px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.ftr h4{font-size:14px;font-weight:500;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{color:var(--smoke);transition:color .2s}
.ftr ul a:hover{color:#000}
.fabout p{color:var(--smoke);margin-top:14px;max-width:32ch}
.fbot{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--stone);color:var(--ash)}
.fbot a:hover{color:#000}
.fword{font-size:clamp(64px,13vw,200px);font-weight:300;letter-spacing:-.05em;line-height:.9;margin-top:56px;color:var(--stone);user-select:none;white-space:nowrap;overflow:hidden}

/* ---------- listings ---------- */
.l-hero{padding:72px 0 48px}
.l-hero .in{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.l-hero .vis{justify-self:end;width:min(320px,100%);position:relative}
.l-hero .vis img{border-radius:24px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--ash);margin-bottom:20px;flex-wrap:wrap}
.crumbs a:hover{color:#000}
.filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:40px}
.filter a{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--b);display:inline-flex;align-items:center;font-size:14px;transition:background .2s}
.filter a:hover{background:var(--taupe)}
.filter a[aria-current=page]{background:#000;color:#fff;border-color:#000}

/* ---------- article ---------- */
.a-hero{padding:56px 0 40px}
.a-head{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.a-head h1{margin-top:16px}
.a-head .lead{margin-top:18px}
.a-meta{display:flex;gap:10px;align-items:center;margin-top:24px;font-size:14px;color:var(--ash);flex-wrap:wrap}
.a-cover{border-radius:24px;overflow:hidden;background:var(--taupe);aspect-ratio:1.5}
.a-cover img{width:100%;height:100%;object-fit:cover}
.a-body{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:24px var(--gut) 0;display:grid;grid-template-columns:240px minmax(0,720px);gap:72px;justify-content:center}
.a-toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14px}
.a-toc b{font-weight:500;margin-bottom:10px}
.a-toc a{color:var(--smoke);padding:7px 12px;border-radius:12px;line-height:1.4;transition:background .2s,color .2s}
.a-toc a:hover{color:#000}
.a-toc a.on{background:var(--taupe);color:#000}
.a-toc .rp{height:2px;background:var(--stone);border-radius:2px;margin-top:16px;overflow:hidden}
.a-toc .rp i{display:block;height:100%;width:0;background:#000;transition:width .5s var(--ease)}
.a-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}
.a-stats div{background:var(--taupe);border-radius:20px;padding:24px;position:relative;overflow:hidden}
.a-stats div::after{content:"";position:absolute;width:90px;height:90px;right:-24px;top:-24px;border-radius:50%;background:conic-gradient(from 90deg,var(--violet),var(--pink),var(--ember),var(--peach),var(--violet));filter:blur(14px);opacity:.55}
.a-stats b{display:block;font-size:40px;font-weight:300;letter-spacing:-.03em;line-height:1}
.a-stats span{display:block;color:var(--smoke);font-size:14px;margin-top:10px;position:relative}
.prose{font-size:17px;line-height:1.75;color:#1d1b19}
.prose>*+*{margin-top:20px}
.prose h2{font-size:30px;font-weight:300;letter-spacing:-.02em;line-height:1.17;margin-top:56px;scroll-margin-top:90px}
.prose h3{font-size:20px;font-weight:500;margin-top:36px}
.prose a{border-bottom:1px solid var(--ash)}
.prose a:hover{border-color:#000}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--ash)}
.prose code{font:400 .86em var(--mono);background:var(--taupe);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--taupe);border-radius:16px;padding:20px 22px;overflow-x:auto;font:400 13.5px/1.75 var(--mono);position:relative}
.prose pre::before{content:attr(data-lang);position:absolute;top:10px;right:14px;font-size:11px;color:var(--ash);text-transform:uppercase}
.prose pre code{background:none;padding:0;font-size:inherit}
.tblw{overflow-x:auto;border-radius:16px;border:1px solid var(--stone)}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.prose th{text-align:left;font-weight:500;background:var(--taupe);padding:12px 16px}
.prose td{padding:12px 16px;border-top:1px solid var(--stone);vertical-align:top}
.callout{display:grid;grid-template-columns:22px 1fr;gap:14px;background:var(--taupe);border-radius:16px;padding:18px 20px;font-size:16px}
.callout svg{width:22px;height:22px;color:var(--graphite)}
.pq{margin:48px 0;padding:0 0 0 28px;border-left:2px solid #000;font-size:26px;font-weight:300;letter-spacing:-.015em;line-height:1.3}
.illus{margin:40px 0;border-radius:20px;background:var(--taupe);padding:36px;display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;overflow:hidden}
.illus .orb{width:120px}
.illus b{display:block;font-weight:500;font-size:16px}
.illus span{display:block;color:var(--smoke);font-size:15px;margin-top:4px;line-height:1.5}
.faq{margin-top:64px}
.faq h2{margin-bottom:12px}
.faq details{border-top:1px solid var(--stone);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--stone)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(#000,#000) center/12px 1.5px no-repeat,linear-gradient(#000,#000) center/1.5px 12px no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--smoke);padding-bottom:18px;margin:0}
.related{padding:112px 0 0}

/* about stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:var(--taupe);border-radius:20px;padding:28px;position:relative;overflow:hidden}
.stat .lbl{font-size:14px;color:var(--smoke)}
.stat .num{display:block;font-size:56px;font-weight:300;letter-spacing:-.04em;line-height:1;margin:16px 0 12px}
.stat p{color:var(--smoke);font-size:15px}
.stat .orb{position:absolute;width:80px;right:20px;top:20px}

/* 404 */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center;padding:96px 24px}
.nf .orb{width:140px;margin:0 auto 28px}
.nf b{display:block;font-size:96px;font-weight:300;letter-spacing:-.05em;line-height:1}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gut:32px}
  .nav{display:none}.hdr-cta{display:none}
  .burger{display:inline-flex}
  .mnav{position:fixed;inset:64px 0 0;z-index:39;background:var(--egg);padding:16px 24px 40px;overflow-y:auto;flex-direction:column;gap:2px}
  .mnav.open{display:flex}
  .mnav a{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid var(--stone);font-size:17px}
  .mnav .orb{width:28px}
  .feat{grid-template-columns:1fr 1fr}
  .fc.big{grid-column:1/-1;grid-row:auto}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .fabout{grid-column:1/-1}
  .a-body{grid-template-columns:minmax(0,720px);gap:0}
  .a-toc{display:none}
}
@media (max-width:860px){
  :root{--gut:20px}
  .sec{padding:80px 0}
  .hero{padding-top:40px}
  .hero-grid,.a-head,.l-hero .in,.plats,.prac,.tools,.safe,.fcta,.post.big{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:20px}
  .hero .lead{justify-self:start}
  .logos{grid-template-columns:repeat(3,1fr)}
  .logos .cell:nth-child(4){border-left:0}
  .feat{grid-template-columns:1fr}
  .stories,.posts,.stats{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .models{grid-template-columns:minmax(0,1fr)}
  .tool{padding:24px}
  .pvis{min-height:420px}
  .ppane{padding:20px}
  .fcta{padding:56px 24px}
  .fcta .sph{width:min(280px,80%)}
  .l-hero .vis{justify-self:start;width:200px}
  .safe .pic{min-height:260px}
  .post.big{gap:20px}
  .fgrid{grid-template-columns:1fr 1fr}
  .fbot{flex-direction:column}
  .illus{grid-template-columns:1fr;padding:24px}
  .illus .orb{width:80px}
  .a-stats b{font-size:32px}
  .fab span{display:none}.fab{padding:6px}
  .ann{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;text-align:left}
}
@media (max-width:420px){
  .hero .ctas{flex-direction:column;align-items:stretch}
  .vtrack{grid-auto-columns:78%}
  .tltrack{grid-auto-columns:78%}
  .editor .tabsx button{padding:0 9px}
  .lvl .pills span{padding:0 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.split .w>span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}