/* Палитра «Клабс» — бежевый + голубой и чёрный + голубой.
   Значения перенесены из дизайна без изменений. */
:root{--bg:#EEEBE2;--surface:#FBF9F3;--surface2:#E2DFD3;--line:rgba(0,0,0,0.08);--text:#15273A;--dim:rgba(21,39,58,0.6);--muted:rgba(21,39,58,0.4);--accent:#7CB8DB;--accentDeep:#4D94BD;--accentDim:rgba(124,184,219,0.18);--onAccent:#0E2030;--shadow:0 10px 30px rgba(21,39,58,0.08)}
html[data-theme="dark"]{--bg:#0B1418;--surface:#142028;--surface2:#1E2C36;--line:rgba(255,255,255,0.08);--text:#FFFFFF;--dim:rgba(255,255,255,0.55);--muted:rgba(255,255,255,0.35);--accent:#9CD7F2;--accentDeep:#6FBCE0;--accentDim:rgba(156,215,242,0.18);--onAccent:#07141B;--shadow:0 10px 30px rgba(0,0,0,0.35)}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accentDeep);text-decoration:none}a:hover{color:var(--accent)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:22px 18px 40px}
.shell{width:100%;max-width:520px;display:flex;flex-direction:column;gap:18px}
.bar{display:flex;align-items:center;gap:12px}
.logo{height:17px;width:calc(17px * (2018/312));background:var(--accent);-webkit-mask:url(assets/klabs-logo.png) center/contain no-repeat;mask:url(assets/klabs-logo.png) center/contain no-repeat}
.tglow{margin-left:auto;display:flex;gap:6px}
.tg{width:24px;height:24px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:0;display:grid;place-items:center}
.tg[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
.tg i{display:block;width:11px;height:11px;border-radius:999px}
.progress{height:4px;border-radius:99px;background:var(--surface2);overflow:hidden}
.progress > div{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px 22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
.q{font-size:23px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty;margin:0}
.lede{font-size:16px;line-height:1.55;color:var(--text);margin:0;text-wrap:pretty}
.lede-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.lede-list li{font-size:15px;line-height:1.5;color:var(--dim);padding-left:16px;position:relative;text-wrap:pretty}
.lede-list li:before{content:"—";position:absolute;left:0;color:var(--accentDeep)}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:15.5px;line-height:1.4;text-align:left;cursor:pointer;transition:.16s;min-height:52px}
.opt:hover{border-color:var(--accentDeep);background:var(--accentDim)}
.opt[aria-checked="true"]{border-color:var(--accent);background:var(--accentDim);font-weight:600}
.dot{width:18px;height:18px;border-radius:999px;border:1.5px solid var(--muted);flex-shrink:0;display:grid;place-items:center}
.opt[aria-checked="true"] .dot{border-color:var(--accentDeep)}
.opt[aria-checked="true"] .dot:after{content:"";width:9px;height:9px;border-radius:999px;background:var(--accentDeep)}
.opt.multi .dot{display:none}
.opt.multi .check{margin-top:0}
.opt.multi[aria-checked="true"] .check{border-color:var(--accentDeep);background:var(--accentDeep)}
.opt.multi[aria-checked="true"] .check svg{opacity:1}
.opt.zone{align-items:flex-start;font-size:15px;line-height:1.5;padding:16px}
.opt.zone:hover{border-color:var(--zone);background:color-mix(in srgb,var(--zone) 8%,transparent)}
.opt.zone[aria-checked="true"]{border-color:var(--zone);background:color-mix(in srgb,var(--zone) 12%,transparent);font-weight:500}
.zdot{width:18px;height:18px;border-radius:999px;flex-shrink:0;margin-top:2px;background:var(--zone);opacity:.45;display:grid;place-items:center;transition:.16s}
.opt.zone[aria-checked="true"] .zdot{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--zone) 22%,transparent)}
input[type=text],textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:15px 16px;outline:none;resize:none}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] textarea{background:var(--surface2)}
input[type=text]:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
::placeholder{color:var(--muted)}
.nav{display:flex;align-items:center;gap:10px}
.btn{font:inherit;font-size:16px;font-weight:700;border:none;border-radius:999px;padding:16px 26px;background:var(--accent);color:var(--onAccent);cursor:pointer;transition:.16s;min-height:52px}
.btn:hover{background:var(--accentDeep);color:#fff}
.btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--line);font-weight:600;padding:16px 20px}
.btn.ghost:hover{color:var(--text);background:var(--surface2)}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent);color:var(--onAccent)}
.btn.ghost:disabled:hover{background:transparent;color:var(--dim)}
.hint{font-size:13px;color:var(--muted)}
.req{align-self:center;transition:.16s}
.req.warn{color:var(--dim)}
.media{border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,var(--surface2) 0 8px,var(--line) 8px 9px);display:flex;align-items:flex-end;padding:12px;position:relative}
.media span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--surface);padding:4px 7px;border-radius:5px}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play i{width:52px;height:52px;border-radius:999px;background:var(--accent);display:grid;place-items:center}
.play i:after{content:"";width:0;height:0;border-left:14px solid var(--onAccent);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
/* Реальный плеер занимает место плейсхолдера, не меняя пропорций блока. */
.media-live{padding:0;background:#000}
.player{width:100%;height:100%;border:0;display:block;object-fit:cover}
.proj{display:flex;flex-direction:column;gap:10px}
.p{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:18px;border:1px solid var(--line);background:transparent;cursor:pointer;text-align:left;font:inherit;color:var(--text);transition:.16s}
.p:hover{border-color:var(--accentDeep)}
.p[aria-checked="true"]{border-color:var(--accent);background:var(--accentDim)}
.p .body{display:flex;flex-direction:column;gap:7px;flex:1}
.p .pname{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.p .pdesc{font-size:14.5px;line-height:1.45;color:var(--dim);text-wrap:pretty}
.p .pmeta{display:flex;flex-wrap:wrap;gap:7px;margin-top:1px}
.p .pmeta span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;padding:5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim);background:var(--bg)}
html[data-theme="dark"] .p .pmeta span{background:var(--surface2)}
.p .pmeta span.price{border-color:var(--accentDeep);color:var(--accentDeep)}
.check{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--muted);flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:.16s}
.check svg{opacity:0;transition:.16s}
.p[aria-checked="true"] .check{border-color:var(--accentDeep);background:var(--accentDeep)}
.p[aria-checked="true"] .check svg{opacity:1}
.promptbox{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;line-height:1.65;color:var(--text);white-space:pre-wrap;max-height:260px;overflow:auto}
html[data-theme="dark"] .promptbox{background:var(--surface2)}
.promptbox.is-loading{color:var(--muted);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.copy{align-self:flex-start}
.metacard{aspect-ratio:9/16;max-width:250px;width:100%;align-self:center;border-radius:20px;background:repeating-linear-gradient(135deg,var(--surface2) 0 8px,var(--line) 8px 9px);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:16px}
.metacard span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.metacard-live{padding:0;object-fit:cover;background:var(--surface2)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input[type=email],input[type=tel]{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:15px 16px;outline:none}
html[data-theme="dark"] input[type=email],html[data-theme="dark"] input[type=tel]{background:var(--surface2)}
input[type=email]:focus,input[type=tel]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentDim)}
.finalcard{text-align:center;align-items:center}
.finalcard .q{font-size:29px}
.finalcard .thanks{text-align:center}
.metarow{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.metarow .metacard{align-self:stretch;max-width:190px;flex:0 0 auto}
.sendcol{flex:1;min-width:170px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.sendbtn{font-size:14.5px;padding:13px 16px;min-height:46px;width:100%}
/* «Почему вам» под проектом — вместо процента подходимости. */
.p .pwhy{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--accentDeep);text-wrap:pretty}
.field label .req-mark{color:var(--accentDeep)}
.field label .opt-mark{opacity:.7}
.sec{display:flex;flex-direction:column;gap:14px}
.thanks{font-size:16px;line-height:1.6;color:var(--dim);margin:0;text-wrap:pretty}
.dots{display:flex;gap:5px;align-items:center}
.dots i{width:5px;height:5px;border-radius:99px;background:var(--surface2)}
.dots i.on{background:var(--accent)}
.dots i.done{background:var(--accentDeep);opacity:.5}

/* Видимый фокус с клавиатуры — в прототипе его не было, а анкету
   проходят в том числе с клавиатуры и со скринридером. */
:focus-visible{outline:2px solid var(--accentDeep);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}