/* Общая механика: кнопки, теги, окно демо, чат, конвейер. Цвета и шрифты задаёт тема через переменные. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sel,var(--accent));color:var(--on-sel,var(--on-accent))}
a{color:inherit}
img,svg{display:block}
h1,h2,h3,h4{font-family:var(--font-h);margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 32px, var(--wrap,1200px));margin-inline:auto}
section{scroll-margin-top:84px}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--font-b);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s,color .25s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--btn-shadow,none)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border:1px solid var(--line-2);background:var(--ghost-bg,transparent)}
.btn-ghost:hover{border-color:var(--accent);color:var(--ghost-hover,var(--ink))}
.btn.copied{border-color:var(--ok);color:var(--ok);position:relative}
.copy-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--bg);font:500 12.5px/1 var(--font-b);white-space:nowrap;pointer-events:none;animation:tip .25s var(--ease)}
@keyframes tip{from{opacity:0;transform:translate(-50%,4px)}}
.contacts{flex-wrap:wrap}
.btn-sm{height:38px;padding:0 15px;font-size:14px}
.contacts{display:flex;flex-wrap:wrap;gap:10px}

/* теги и фильтры */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font:500 12.5px/1 var(--font-b);padding:7px 10px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink,var(--muted))}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:9px 16px;font:500 14px/1 var(--font-b);color:var(--muted);transition:all .25s var(--ease)}
.chip sup{font-size:11px;margin-left:4px;opacity:.7}
.chip:hover{color:var(--ink);border-color:var(--accent)}
.chip.on{background:var(--chip-on,var(--accent));border-color:transparent;color:var(--chip-on-ink,var(--on-accent))}
.case[hidden]{display:none!important}

/* заглушка цифры */
.tbd b{text-decoration:underline dashed var(--warn) 1.5px;text-underline-offset:5px}

/* появление */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* фото */
.photo{position:relative;margin:0}
.photo-slot{position:relative;z-index:1;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:var(--faint);font-size:13px;overflow:hidden}
.photo-slot svg{width:72px;height:72px;opacity:.55}
.photo-slot.has-img{padding:0}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.brand-mark.has-img{overflow:hidden;padding:0;background:none}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* окно демонстрации */
.win{border-radius:var(--r-md);overflow:hidden;background:var(--win-bg);border:1px solid var(--win-line,var(--line));display:flex;flex-direction:column;height:100%}
.win-bar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;background:var(--win-bar);border-bottom:1px solid var(--win-line,var(--line))}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--dot,var(--line-2))}
.win-title{font:500 12.5px/1.2 var(--font-b);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.win-tabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--tabs-bg,var(--tag-bg))}
.win-tabs button{display:flex;align-items:center;gap:5px;border:0;background:transparent;border-radius:999px;padding:6px 11px;font:500 12.5px/1 var(--font-b);color:var(--muted);transition:all .2s}
.win-tabs button svg{width:11px;height:11px}
.win-tabs button.on{background:var(--tab-on,var(--surface));color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.win-body{position:relative;flex:1;min-height:var(--win-min,340px)}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.view.on{opacity:1;visibility:visible}
.view-demo{overflow-y:auto;padding:18px;scrollbar-width:thin;background:var(--demo-bg,transparent)}
.view-demo.embed{padding:0;overflow:hidden;background:var(--win-bg)}
.win-note{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:500 12px/1 var(--font-b);color:var(--accent);background:var(--tag-bg)}
.win-note svg{width:10px;height:10px}
/* color-scheme как у встроенной страницы, иначе браузер подкладывает под iframe белый фон */
.view-demo.embed iframe{display:block;width:100%;height:100%;border:0;color-scheme:light;background:transparent}
.shot-slot{position:absolute;inset:14px;border-radius:calc(var(--r-md) - 6px);border:1.5px dashed var(--slot-line,var(--line-2));background:var(--slot-bg,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;color:var(--faint);font-size:13.5px}
.shot-slot>svg{width:42px;height:42px;opacity:.6}
.run{display:inline-flex;align-items:center;gap:8px;margin-top:6px;border:0;border-radius:999px;padding:11px 18px;background:var(--accent);color:var(--on-accent);font:600 14px/1 var(--font-b);box-shadow:var(--btn-shadow,none);transition:transform .25s var(--ease),background .25s}
.run svg{width:14px;height:14px}
.run:hover{background:var(--accent-2);transform:translateY(-1px)}
.replay{display:flex;align-items:center;gap:7px;margin:14px auto 2px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:8px 14px;font:500 13px/1 var(--font-b);color:var(--muted)}
.replay svg{width:14px;height:14px}
.replay:hover{color:var(--ink);border-color:var(--accent)}

/* чат */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:84%;padding:9px 13px 7px;border-radius:16px;font-size:14px;line-height:1.45;animation:pop .35s var(--ease) both;position:relative}
.msg .who{display:block;font:600 12px/1.2 var(--font-b);margin-bottom:3px;color:var(--accent)}
.msg time{display:block;text-align:right;font-size:11px;color:var(--faint);margin-top:2px}
.msg.in{align-self:flex-start;background:var(--bubble-in);border-bottom-left-radius:5px}
.msg.bot{align-self:flex-start;background:var(--bubble-bot);border-bottom-left-radius:5px;border:1px solid var(--bubble-bot-line,transparent)}
.msg.out{align-self:flex-end;background:var(--bubble-out);color:var(--bubble-out-ink,var(--ink));border-bottom-right-radius:5px}
.msg.out .who{color:inherit;opacity:.75}
.msg.sys{align-self:center;max-width:none;padding:4px 12px;border-radius:999px;background:var(--tag-bg);font-size:12px;color:var(--muted)}
.msg.ok{box-shadow:inset 3px 0 0 var(--ok)}
.msg.struck p{text-decoration:line-through;text-decoration-color:var(--ok);text-decoration-thickness:2px;opacity:.55}
.msg.struck{transition:opacity .4s}
.msg.typing{display:flex;gap:4px;padding:12px 14px}
.msg.typing.out{align-self:flex-end}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* конвейер */
.pipe{display:flex;flex-direction:column;gap:18px}
.pipe-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:s}
.pipe-steps li{position:relative;padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--tag-bg);transition:all .3s var(--ease)}
.pipe-steps li b{display:block;font:600 14px/1.2 var(--font-h)}
.pipe-steps li span{font-size:12px;color:var(--muted)}
.pipe-steps li.on{border-color:var(--accent)}
.pipe-steps li.now{background:var(--accent);color:var(--on-accent);box-shadow:var(--btn-shadow,none)}
.pipe-steps li.now span{color:inherit;opacity:.8}
.pipe-table{width:100%;border-collapse:collapse;font-size:13.5px}
.pipe-table th{text-align:left;font:500 12px/1 var(--font-b);color:var(--faint);padding:0 10px 8px;border-bottom:1px solid var(--line)}
.pipe-table td{padding:10px;border-bottom:1px solid var(--line);animation:pop .4s var(--ease) both}

/* служебный переключатель макетов */
.mock-switch{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(20,22,30,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.3);font:500 12.5px/1 system-ui,sans-serif;width:max-content;max-width:calc(100% - 24px);overflow-x:auto}
.mock-switch a{color:#c9cedb;text-decoration:none;padding:8px 12px;border-radius:999px;white-space:nowrap}
.mock-switch a:hover{color:#fff}
.mock-switch a[aria-current]{background:#fff;color:#111}

@media (max-width:640px){
  .btn{height:44px;padding:0 16px;font-size:14px}
  .contacts .btn{flex:1 1 calc(50% - 5px);justify-content:center}
  .win-title{display:none}
  .pipe-steps{grid-template-columns:repeat(2,1fr)}
  .msg{max-width:92%}
}

/* ===== итог grilling 30.09: «Как работаю», опыт карточками ===== */
.approach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.approach-card{position:relative;padding:28px 28px 26px;overflow:hidden;outline:none}
/* у каждой карточки своя мягкая подсветка рамки (правка 30.09) */
.approach-card.ap1{--ap:45,212,191}
.approach-card.ap2{--ap:139,108,255}
.card.approach-card{border-color:rgba(var(--ap),.38);box-shadow:inset 0 1px 0 rgba(var(--ap),.18),0 0 0 1px rgba(var(--ap),.08),0 24px 60px -30px rgba(var(--ap),.55)}
.card.approach-card h3{color:rgb(var(--ap))}
.approach-card h3{font:500 22px/1.2 var(--font-h);letter-spacing:-.03em;margin-bottom:14px;color:var(--ink)}
.approach-card p{color:var(--muted);font-size:15px;line-height:1.6}
.approach-card p+p{margin-top:10px}
.approach-card p:first-of-type{color:var(--ink)}
.jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.job{padding:24px;display:flex;flex-direction:column;gap:14px}
.job-main{display:flex;flex-direction:column;gap:12px}
.job-ai{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px 36px;align-items:start}
.job-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.job-head h3{font:500 20px/1.2 var(--font-h);letter-spacing:-.02em;color:var(--ink)}
.job-ai .job-head h3{font-size:26px}
.job-head time{font-size:12.5px;color:var(--faint);white-space:nowrap}
.job-tags{display:flex;flex-wrap:wrap;gap:6px}
.job-tags li{font-size:12.5px;line-height:1;padding:6px 10px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink)}
.job-tags .scale{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.job-tags .scale.tbd{border-style:dashed;border-color:var(--warn);color:var(--warn)}
.job .job-role{font-weight:600;font-size:15.5px;color:var(--ink);margin:0}
.job .job-role .accent{color:var(--accent);font-weight:800;text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}
.job .job-path{margin:0}
.job-path{color:var(--muted);font-size:14.5px;line-height:1.55}
.job-ai-box{border-radius:var(--r-md);padding:18px 20px;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.job-ai-title{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
.job-ai-box ul{display:flex;flex-direction:column;gap:8px}
.job-ai-box li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.job-ai-box li b{font-weight:600}
.job-ai-box .ba{color:var(--muted);font-size:13.5px}
.job-ai-box .ba .was{color:var(--faint)}
.job-ai-box .ba .now{color:color-mix(in srgb,var(--accent) 55%,var(--ink));font-weight:500;text-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.job-ai-box .ba i{font-style:normal;color:var(--accent);margin:0 6px}
.job-ai-box li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.edu{margin-top:16px;font-size:12.5px;color:var(--faint)}
@media (max-width:1020px){.jobs-grid{grid-template-columns:1fr 1fr}.job-ai{grid-template-columns:1fr}}
@media (max-width:760px){.approach,.jobs-grid{grid-template-columns:1fr}.approach-card{padding:22px}}

/* ===== меню убрано (правка 30.09): шапки нет, первый экран без отступа под неё ===== */
#nav.nav-wrap{display:none}
main>#hero{padding-top:clamp(40px,7vh,84px)}

/* шапка кейса: компания, для кого, что (правка 30.09) */
dl.case-ctx{display:flex;flex-direction:column;gap:5px;margin-top:4px}
dl.case-ctx div{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline}
dl.case-ctx dt{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
dl.case-ctx dd{font-size:14px;color:var(--muted);line-height:1.45}
.case-note{margin-top:8px;font-size:12.5px;color:var(--faint)}
.case-note::before{content:"* "}
.contact-reply{margin-top:8px;color:var(--faint)}

/* ===== правки 01.10 ===== */
/* опыт: команда и достижения отдельными строками, оборот зелёным */
.job-team,.job-wins{font-size:14px;color:var(--ink);line-height:1.5}
.job-team span,.job-wins>span{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.job-wins ul{display:flex;flex-direction:column;gap:3px}
.job-wins li{position:relative;padding-left:14px}
.job-wins li::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--faint)}
.job-tags li.scale{color:#86efac;background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.32)}
/* «Сила ума»: без пересвета синим — акцент бирюзовый, блок нейтральный, «стало» контрастнее */
.job.job-ai{--ai:var(--teal,var(--accent));--cc-rgb:45,212,191}
.job .job-role .accent{color:var(--ai,var(--accent));text-shadow:none}
.job-ai .job-ai-box{background:rgba(255,255,255,.03);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--ai)}
.job-ai .job-ai-title{color:var(--ai)}
.job-ai .job-ai-box li::before{background:var(--ai);box-shadow:none;width:6px;height:6px}
.job-ai .job-ai-box .ba .was{color:var(--faint)}
.job-ai .job-ai-box .ba i{color:var(--faint)}
.job-ai .job-ai-box .ba .now{color:var(--ink);font-weight:600;text-shadow:none}
.job-ai.spot::before{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.05),transparent 60%)}