/* Общая оболочка концептов: светлая тема портфолио */
:root{--porcelain:#F0EFEB;--graphite:#26282A;--burgundy:#642B39;--mist:#A9C0D1;--pink:#D5A6AD;--champagne:#D8C6AC;--muted:#55585a;--line:rgba(38,40,42,.16);
  --display:'Oranienbaum','Cormorant',serif;--accent:'Cormorant',serif;--latin:'Italiana',serif;--text:'Onest',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
body{background:var(--porcelain);color:var(--graphite);font:300 16px/1.6 var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:4px}
.ch{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 clamp(16px,4vw,48px);background:rgba(240,239,235,.7);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.5)}
.ch .logo{font:400 20px/1 var(--latin);letter-spacing:.22em;text-decoration:none;padding:10px 0}
.ch .back{font:400 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:14px 0}
.ch .back:hover{color:var(--burgundy)}
.intro{max-width:1100px;margin:0 auto;padding:clamp(36px,6vw,80px) clamp(16px,4vw,48px) 24px}
.tag{display:inline-block;padding:5px 12px;border-radius:99px;border:1px solid var(--burgundy);color:var(--burgundy);font:400 11px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase}
.intro h1{font:400 clamp(44px,7vw,96px)/.95 var(--display);margin:18px 0 14px}
.intro h1 em{font:italic 300 .62em/1 var(--accent);color:var(--burgundy);display:block;margin:.1em 0 0 1.2em}
.intro p{max-width:60ch;color:var(--muted);font-size:17px}
.stagebox{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 60px}
.panel{border-radius:24px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 30px 70px -40px rgba(38,50,70,.45);padding:clamp(16px,3vw,32px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:1px solid var(--graphite);border-radius:99px;background:transparent;cursor:pointer;font:400 12.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--graphite);color:var(--porcelain)}
.btn.solid{background:var(--graphite);color:var(--porcelain)}.btn.solid:hover{background:var(--burgundy);border-color:var(--burgundy)}
.how{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 70px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.how div{border-top:1px solid var(--line);padding-top:14px}
.how b{font:400 24px/1.1 var(--display);display:block;margin-bottom:6px}
.how p{color:var(--muted);font-size:15px}
.cta{text-align:center;padding:50px 16px 80px;background:linear-gradient(180deg,var(--porcelain),#e3dcdc)}
.cta h2{font:400 clamp(34px,5vw,60px)/1 var(--display);margin-bottom:20px}
.cta h2 em{font:italic 300 1em var(--accent);color:var(--burgundy)}
@media (max-width:760px){.how{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}
/* окно Telegram для бот-концептов */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tgw{display:flex;justify-content:center;background:linear-gradient(160deg,rgba(169,192,209,.35),rgba(213,166,173,.3))}
.tg{width:min(100%,420px);height:640px;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;background:#dfe7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23A9C0D1' opacity='.5'/%3E%3Ccircle cx='40' cy='35' r='1' fill='%23D5A6AD' opacity='.6'/%3E%3C/svg%3E");box-shadow:0 0 0 10px #26282A,0 40px 80px -40px rgba(0,0,0,.6)}
.tg-h{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;background:rgba(250,249,246,.92);border-bottom:1px solid var(--line)}
.tg-h b{display:block;font-weight:500;font-size:15px}.tg-h small{font-size:12px;color:var(--muted)}
.tg-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#D5A6AD,#642B39);color:#fff;display:flex;align-items:center;justify-content:center;font:400 20px var(--display)}
.tg-re{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:none;cursor:pointer;font-size:20px}
.tg-log{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.tg-m{max-width:84%;padding:9px 12px 18px;border-radius:16px;font-size:14.5px;line-height:1.4;position:relative;animation:tgin .3s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.08)}
@keyframes tgin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.tg-m.bot{background:#fff;align-self:flex-start;border-bottom-left-radius:6px}
.tg-m.me{background:#efd9dc;align-self:flex-end;border-bottom-right-radius:6px}
.tg-m time{position:absolute;right:10px;bottom:4px;font-size:10px;color:var(--muted)}
.tg-m.typing{padding:12px 14px;display:flex;gap:4px}
.tg-m.typing i{width:6px;height:6px;border-radius:50%;background:#9ea3a8;animation:dots 1s infinite}
.tg-m.typing i:nth-child(2){animation-delay:.15s}.tg-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.5}}
.tg-m .bar{display:block;height:8px;border-radius:99px;background:rgba(38,40,42,.1);margin-top:8px;overflow:hidden}
.tg-m .bar i{display:block;height:100%;background:#642B39;border-radius:99px}
.tg-kb{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px -4px 0}
.tg-kb button{min-height:40px;border-radius:10px;border:0;background:rgba(100,43,57,.09);color:#642B39;font-size:13.5px;cursor:pointer;padding:6px 8px;transition:background .2s}
.tg-kb button:hover{background:rgba(100,43,57,.18)}
.tg-kb button.picked{background:#642B39;color:#fff}
.tg-kb button:disabled:not(.picked){opacity:.4;cursor:default}
.tg-in{display:flex;gap:8px;padding:10px;background:rgba(250,249,246,.95);border-top:1px solid var(--line)}
.tg-in input{flex:1;min-height:44px;border-radius:99px;border:1px solid var(--line);padding:0 16px;font:inherit;background:#fff}
.tg-in button{width:44px;height:44px;border-radius:50%;border:0;background:#642B39;color:#fff;cursor:pointer}
.tg-in :disabled{opacity:.45}