/* ══════════════════════════════════════════════════════════════
   Platon AI Crew — общий стиль (все страницы подключают этот файл)
   ══════════════════════════════════════════════════════════════ */

/* ── Fonts: self-hosted variable woff2, cyrillic + latin, без CDN ── */
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:500 900; font-display:swap;
  src:url('../fonts/unbounded-cyrillic-var.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:500 900; font-display:swap;
  src:url('../fonts/unbounded-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/onest-cyrillic-var.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/onest-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ── Tokens ── */
:root{
  --bg:#F6F5FB; --bg-soft:#EEECF9; --surface:#FFFFFF;
  --ink:#15131F; --ink-soft:#332F49; --muted:#635F78; --faint:#726C90; /* AA: 4.5:1+ на bg и белом */
  --line:#E6E2F4; --line-soft:#EFEDF8;
  --accent:#6C5CE7; --accent-light:#8F82F3; --accent-deep:#4B3ACB; --accent-wash:#EDEAFB;
  --gold:#C9A876; --gold-wash:#F5EDDD; --gold-ink:#70532C; /* WCAG AA: 6.1:1 на gold-wash, 6.1:1 на bg-soft, 7.1:1 на белом */
  --shadow-card:0 1px 1px rgba(30,20,70,.03), 0 14px 32px -18px rgba(50,40,120,.22);
  --shadow-card-hover:0 1px 1px rgba(30,20,70,.04), 0 26px 52px -18px rgba(76,59,196,.30);
  --shadow-pop:0 24px 64px -16px rgba(30,20,70,.30);
  --r-xl:24px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --pad:clamp(18px,4.5vw,64px);
  --font-display:'Unbounded','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-text:'Onest','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{margin:0; overflow-x:hidden; font-family:var(--font-text); background:var(--bg); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
.container{max-width:1180px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:4px}

/* ── Kinetic background wash (hero only, very light) ── */
.wash{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.wash::before,.wash::after{content:''; position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
  animation:drift 22s ease-in-out infinite;}
.wash::before{width:520px; height:520px; background:radial-gradient(circle,#c9bdfb,transparent 70%); top:-180px; right:-120px}
.wash::after{width:460px; height:460px; background:radial-gradient(circle,#f0e0c2,transparent 70%); bottom:-200px; left:-140px; animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,22px) scale(1.06)}}

/* ── Eyebrow / badge / chip ── */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-text); font-weight:700;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep);
  padding:8px 16px; border-radius:var(--r-pill); background:var(--accent-wash);}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-deep); box-shadow:0 0 0 3px rgba(75,58,203,.18)}
.chip{display:inline-flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); background:var(--bg-soft); padding:5px 12px; border-radius:var(--r-pill);}
.chip--gold{color:var(--gold-ink); background:var(--gold-wash)}
.bot-fn{color:var(--faint); font-weight:500}
.fn-line{font-size:13px; color:var(--muted); max-width:52ch; margin:2px 0 12px; line-height:1.5}
.fn-line b{color:var(--accent-deep)}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-text);
  font-weight:700; font-size:15px; padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .22s, box-shadow .3s, border-color .25s, color .25s; min-height:48px;}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{color:#fff; background:linear-gradient(135deg,var(--accent-light),var(--accent) 55%,var(--accent-deep));
  box-shadow:0 12px 28px -10px rgba(75,58,203,.55), inset 0 1px 0 rgba(255,255,255,.28);}
.btn-primary:hover{box-shadow:0 18px 40px -10px rgba(75,58,203,.65), inset 0 1px 0 rgba(255,255,255,.3); transform:translateY(-2px)}
.btn-ghost{color:var(--ink-soft); background:#fff; border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent-light); color:var(--accent-deep)}
.btn-block{width:100%}

/* ── Header ── */
header.site{position:sticky; top:0; z-index:50; background:rgba(246,245,251,.82);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px var(--pad); max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{width:38px; height:38px; border-radius:11px; flex:none; background:linear-gradient(135deg,var(--accent-light),var(--accent-deep));
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(75,58,203,.5);}
.brand-mark svg{width:20px; height:20px}
.brand-txt b{display:block; font-family:var(--font-display); font-weight:700; font-size:16.5px; letter-spacing:-.01em; color:var(--ink)}
.brand-txt small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:1px}
nav.site-nav{display:flex; align-items:center; gap:28px}
nav.site-nav a{font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s}
nav.site-nav a:hover{color:var(--ink)}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--accent-deep)}
.back-link svg{width:16px; height:16px}

/* ── Hero ── */
.hero{position:relative; padding:clamp(30px,4.5vw,54px) 0 clamp(26px,3.5vw,42px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,52px); align-items:center; max-width:1180px; margin:0 auto; padding:0 var(--pad)}
.hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,40px); line-height:1.14; letter-spacing:-.015em; color:var(--ink); margin:12px 0 14px}
.hero h1 i{font-style:normal; color:var(--accent-deep)}
.hero p.lead{font-size:clamp(14.5px,1.6vw,16.5px); color:var(--muted); max-width:54ch; margin-bottom:22px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* stat card (hero right side) */
.stat-card{background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:28px; position:relative}
.stat-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.stat-card-head span{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ring-row{display:flex; align-items:center; gap:18px; margin-bottom:20px}
.ring-num{font-family:var(--font-display); font-weight:800; font-size:22px; fill:var(--ink)}
.ring-label b{display:block; font-size:15px; font-weight:700; color:var(--ink)}
.ring-label small{font-size:12.5px; color:var(--muted)}
.stat-card-list{display:flex; flex-direction:column; gap:12px; padding-top:16px; border-top:1px solid var(--line-soft)}
.stat-card-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); font-weight:600}
.stat-card-list li .ico{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}

/* ── Section ── */
.section{padding:clamp(22px,3.5vw,40px) 0}
.section-head{margin-bottom:20px; max-width:640px}
.section-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.8vw,32px); letter-spacing:-.015em; color:var(--ink); margin-bottom:8px}
.section-head p{color:var(--muted); font-size:14.5px}
.section--soft{background:var(--bg-soft)}

/* ── Controls (tabs + search) ── */
.controls{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:28px}
.tabs{display:flex; gap:6px; flex-wrap:wrap; padding:5px; background:#fff; border-radius:var(--r-pill); box-shadow:var(--shadow-card)}
.tab{padding:10px 18px; border-radius:var(--r-pill); border:none; background:none; color:var(--muted);
  font-family:var(--font-text); font-weight:600; font-size:13.5px; cursor:pointer; transition:all .22s; white-space:nowrap;}
.tab:hover{color:var(--ink)}
.tab.active{color:#fff; background:linear-gradient(135deg,var(--accent-light),var(--accent-deep)); box-shadow:0 8px 18px -6px rgba(75,58,203,.5)}
/* Флагманская вкладка («Флагман») и отдельная ссылка-апселл «+ Свой VPN» — та же золотая
   акцентная рамка, что у флагманских карточек/фото, чтобы визуально считывались как одна группа. */
.tab--gold{border:1.5px solid var(--gold)}
.tab--gold.active{box-shadow:0 8px 18px -6px rgba(201,168,118,.55)}
.tab-link{padding:10px 18px; border-radius:var(--r-pill); color:var(--gold-ink); background:var(--gold-wash);
  font-family:var(--font-text); font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap;
  transition:all .22s; display:inline-flex; align-items:center; border:1.5px solid var(--gold);}
.tab-link:hover{background:#F0E2C4; transform:translateY(-1px)}
.search{flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--r-pill);
  box-shadow:var(--shadow-card); padding:12px 18px;}
.search svg{width:17px; height:17px; flex:none; color:var(--faint)}
.search input{flex:1; border:none; outline:none; background:none; font-family:var(--font-text); font-size:14.5px; color:var(--ink); min-width:0}
.search input::placeholder{color:var(--faint)}

/* ── Catalog grid & bot card ── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:22px}
.bot-card{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  overflow:hidden; transition:transform .3s, box-shadow .3s;}
.bot-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card-hover)}
/* Флагманские карточки (группа orchestration — Бригадир, VPN, доска объявлений) — та же
   структура и размер, что у обычной карточки каталога (иначе одинокая широкая карточка в ряду
   «расползается» и ломает сетку), отличие только в акцентной золотой рамке. */
.bot-card--flagship{border:1.5px solid var(--gold); box-shadow:0 1px 1px rgba(30,20,70,.03), 0 16px 34px -18px rgba(201,168,118,.45)}
.bot-card--flagship:hover{box-shadow:0 1px 1px rgba(30,20,70,.04), 0 26px 52px -18px rgba(201,168,118,.55)}
/* Портреты — постановочные «дашборд-мокапы» (лицо + UI-панели во весь кадр, не headshot):
   контент разбегается до самых краёв кадра в обе стороны, поэтому используем object-fit:contain
   (никогда не обрезает), а не cover — иначе на нестандартных пропорциях (реальные файлы плывут
   от 2:3 до ~4:5) режутся боковые/нижние панели. Фон-градиент проступает как лёгкий паспарту. */
.portrait{position:relative; aspect-ratio:3/4; background:linear-gradient(150deg,var(--accent-wash),var(--gold-wash)); overflow:hidden}
.portrait img{width:100%; height:100%; object-fit:contain; object-position:center}
.portrait .fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:64px; color:rgba(75,58,203,.28);}
.portrait.portrait--empty img{display:none}
.portrait.portrait--empty .fallback{display:flex}
/* Нечеловеческие боты (VPN, доска объявлений) — без фото, нейтральная тематическая иконка вместо
   инициала-заглушки (инициал уместен только когда речь о персонаже-человеке). */
.portrait-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(75,58,203,.32)}
.portrait-icon svg{width:36%; height:36%}
.bot-card-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; gap:12px}
.bot-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.bot-name{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink); line-height:1.2}
.bot-role{font-size:13px; font-weight:600; color:var(--accent-deep); margin-top:2px}
.bot-tagline{font-size:13.5px; color:var(--muted); line-height:1.55; flex:none}
.bot-stats{display:flex; flex-direction:column; gap:8px}
.stat-row{display:flex; align-items:center; gap:9px}
.stat-row .label{font-size:11.5px; font-weight:600; color:var(--muted); min-width:78px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat-row .track{flex:1; height:6px; border-radius:999px; background:var(--accent-wash); overflow:hidden}
.stat-row .fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-light),var(--accent-deep))}
.stat-row .num{font-size:12.5px; font-weight:800; color:var(--accent-deep); min-width:22px; text-align:right}
.bot-card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px}
.bot-price{font-size:13.5px; font-weight:800; color:var(--ink)}
.bot-more{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent-deep)}
.bot-more svg{width:14px; height:14px; transition:transform .2s}
.bot-card:hover .bot-more svg{transform:translateX(3px)}

.empty{display:none; text-align:center; color:var(--muted); padding:50px 20px; font-size:15px}

/* ── Roadmap stepper ── */
.roadmap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.rstep{position:relative; padding:0 18px 0 0; text-align:left}
.rstep-num{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-deep)); box-shadow:0 10px 22px -8px rgba(75,58,203,.55);
  margin-bottom:16px; position:relative; z-index:2;}
.rstep-line{position:absolute; top:22px; left:44px; right:-18px; height:2px; background:var(--line); z-index:1}
.rstep:last-child .rstep-line{display:none}
.rstep h4{font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--ink); margin-bottom:7px}
.rstep p{font-size:14px; color:var(--muted); line-height:1.6}
@media(max-width:860px){
  .roadmap{grid-template-columns:1fr; gap:28px}
  .rstep-line{top:44px; left:22px; right:auto; bottom:-28px; width:2px; height:28px}
}

/* ── Footer ── */
footer.site{border-top:1px solid var(--line); margin-top:20px}
.foot-in{max-width:1180px; margin:0 auto; padding:48px var(--pad) 28px; display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--muted); font-size:13.5px; line-height:1.7; margin-top:14px}
.foot-col h5{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.foot-col a{display:block; color:var(--muted); font-size:14px; margin-bottom:10px; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-legal{max-width:1180px; margin:0 auto; padding:0 var(--pad) 34px; border-top:1px solid var(--line-soft); padding-top:20px}
.foot-legal p{color:var(--muted); font-size:12px; line-height:1.7}

/* ── Cookie banner ── */
.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:640px; margin:0 auto;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:18px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  transform:translateY(120%); opacity:0; transition:transform .4s ease, opacity .4s ease; pointer-events:none;}
.cookie.show{transform:translateY(0); opacity:1; pointer-events:auto}
.cookie p{flex:1; min-width:200px; font-size:13px; color:var(--muted); line-height:1.55}
.cookie a{color:var(--accent-deep); font-weight:600}
.cookie .btn{padding:10px 18px; font-size:13px; min-height:auto}

/* ══ Bot detail page ══ */
.bot-hero{padding:clamp(24px,4vw,44px) 0 clamp(20px,3vw,34px)}
.bot-hero-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,56px); align-items:center; max-width:1180px; margin:0 auto; padding:0 var(--pad)}
.bot-portrait{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card);
  aspect-ratio:3/4; background:linear-gradient(150deg,var(--accent-wash),var(--gold-wash));}
.bot-portrait img{width:100%; height:100%; object-fit:contain; object-position:center}
.bot-portrait .fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:120px; color:rgba(75,58,203,.24);}
.bot-portrait.portrait--empty img{display:none}
.bot-portrait.portrait--empty .fallback{display:flex}
.bot-hero-info h1{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.015em; color:var(--ink); margin:12px 0 6px}
.bot-hero-info .role{font-size:15px; font-weight:700; color:var(--accent-deep); margin-bottom:12px}
.bot-hero-info .tagline{font-size:clamp(15px,1.8vw,17px); color:var(--ink-soft); border-left:3px solid var(--accent); padding-left:16px; margin-bottom:20px; line-height:1.5}
.price-block{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.price-block .amount{font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink)}
.price-block .note{font-size:13px; color:var(--muted); max-width:32ch}

/* Купить / Арендовать — только у ботов с готовой инфраструктурой (rent_label != null) */
.opt-label{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:5px}
.opt-label--gold{color:var(--gold-ink)}
.price-options{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.price-opt{flex:1; min-width:210px; background:var(--bg-soft); border-radius:var(--r-md); padding:16px 18px}
.price-opt--rent{background:var(--gold-wash)}
.price-opt .amount{display:block; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); margin-bottom:4px}
.price-opt .note{display:block; font-size:12.5px; color:var(--muted); line-height:1.5}
.rent-hint{font-size:12.5px; color:var(--muted); line-height:1.6; max-width:56ch; margin-bottom:22px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
/* Ссылка-якорь на живой чат (страница Алины) — виджет лежит далеко внизу страницы,
   даём прямой переход из hero, чтобы его не пропустили при беглом скролле. */
.chat-jump-link{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; font-weight:700; color:var(--accent-deep); transition:gap .2s}
.chat-jump-link svg{width:15px; height:15px; transform:rotate(90deg)}
.chat-jump-link:hover{gap:12px}
.btn-rent{color:var(--gold-ink); background:var(--gold-wash); border-color:#EAD9B5}
.btn-rent:hover{background:#F0E2C4; border-color:var(--gold); transform:translateY(-2px)}
.cta-band-prices{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:4px}
.portrait-badge{position:absolute; top:12px; left:12px; z-index:2; font-size:10.5px; font-weight:700; color:var(--gold-ink);
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px); padding:5px 11px; border-radius:var(--r-pill);
  box-shadow:0 4px 14px -4px rgba(30,20,70,.25);}

/* Био + «Что умеет» — двухколоночная плотная раскладка на десктопе (вместо длинной ленты) */
.bio-powers{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,56px); max-width:1180px; margin:0 auto; padding:0 var(--pad); align-items:start}
.bio-powers h2{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.015em; color:var(--ink); margin-bottom:12px}
.bio-col p{font-size:clamp(14.5px,1.4vw,15.5px); color:var(--ink-soft); line-height:1.7}

.radar-wrap{display:grid; grid-template-columns:1fr .75fr; gap:clamp(24px,4vw,48px); align-items:center; max-width:1180px; margin:0 auto; padding:0 var(--pad)}
.radar-wrap svg{width:100%; height:auto; max-width:440px}
.radar-stats{display:flex; flex-direction:column; gap:14px}
.radar-stats .stat-row .label{min-width:104px; font-size:12.5px}

.powers{display:flex; flex-direction:column; gap:2px}
.power-item{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.power-item:last-child{border-bottom:none}
.power-ico{width:24px; height:24px; border-radius:50%; background:var(--accent-wash); color:var(--accent-deep); flex:none;
  display:flex; align-items:center; justify-content:center; margin-top:1px;}
.power-ico svg{width:12px; height:12px}
.power-item p{font-size:14px; color:var(--ink-soft); line-height:1.55}

.cta-band{background:var(--bg-soft); border-radius:var(--r-xl); max-width:1180px; margin:0 auto; padding:clamp(30px,5vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h3{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.6vw,28px); color:var(--ink); margin-bottom:6px}
.cta-band p{color:var(--muted); font-size:14.5px}

/* ── «Как разворачивается» — hosting cards ── */
.hosting-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.hosting-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:22px 24px}
.hosting-ico{width:38px; height:38px; border-radius:11px; background:var(--accent-wash); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.hosting-ico svg{width:19px; height:19px}
.hosting-card .opt-label{margin-bottom:8px}
.hosting-card h4{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin-bottom:6px}
.hosting-card p{font-size:13.5px; color:var(--muted); line-height:1.6}
/* VPN-апселл — та же карточка, но кликабельная ссылка на /bot/vpn/ */
.hosting-card--link{display:block; text-decoration:none; border:1px solid transparent; transition:transform .25s, box-shadow .25s, border-color .25s}
.hosting-card--link:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--gold)}
.hosting-price{display:inline-block; margin-top:10px; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--gold-ink)}

/* ── Platform badges — icon over portrait (catalog card) ── */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.portrait-platforms{position:absolute; top:12px; right:12px; z-index:2; display:flex; gap:6px}
.platform-ico{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  color:var(--accent-deep); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -4px rgba(30,20,70,.25);}
.platform-ico svg{width:12.5px; height:12.5px}

/* ── Live chat widget (Alina) ── */
.chat-section{background:var(--bg-soft)}
.chat-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,56px); align-items:center; max-width:1180px; margin:0 auto; padding:0 var(--pad)}
.chat-intro h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.8vw,30px); letter-spacing:-.015em; color:var(--ink); margin:14px 0 12px}
.chat-intro p{font-size:14.5px; color:var(--muted); line-height:1.65; margin-bottom:18px; max-width:44ch}
.chat-widget{background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden;
  display:flex; flex-direction:column; height:460px;}
.chat-header{display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--bg-soft); border-bottom:1px solid var(--line-soft)}
.chat-avatar{width:40px; height:40px; border-radius:50%; position:relative; overflow:hidden; flex:none;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-deep));}
.chat-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center}
.chat-avatar-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px;}
.chat-name{font-family:var(--font-text); font-weight:700; font-size:15px; color:var(--ink)}
.chat-status{font-size:12px; font-weight:600; color:#0D6B3A; display:flex; align-items:center; gap:5px}
.chat-dot{width:7px; height:7px; border-radius:50%; background:currentColor; animation:chatPulse 2.4s ease-in-out infinite}
@keyframes chatPulse{0%,100%{opacity:1}50%{opacity:.35}}
.chat-messages{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.chat-msg{max-width:82%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5}
.chat-msg.alina{background:var(--bg-soft); color:var(--ink-soft); align-self:flex-start; border-bottom-left-radius:4px}
.chat-msg.visitor{background:var(--accent-deep); color:#fff;
  align-self:flex-end; border-bottom-right-radius:4px;}
.chat-msg.typing{display:flex; gap:4px; padding:14px}
.chat-msg.typing span{font-size:20px; line-height:0; color:var(--faint); animation:chatBlink 1.4s infinite}
.chat-msg.typing span:nth-child(2){animation-delay:.2s}
.chat-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes chatBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-error{display:none; margin:0 14px; padding:9px 12px; border-radius:10px; background:#FBEAEA; color:#B3261E; font-size:12.5px; line-height:1.5}
.chat-error.show{display:block}
.chat-start{padding:14px 16px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line-soft)}
.chat-name-input{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:10px 14px;
  font-size:14px; font-family:var(--font-text); color:var(--ink); outline:none; transition:border-color .2s;}
.chat-name-input::placeholder{color:var(--faint)}
.chat-name-input:focus{border-color:var(--accent)}
.consent{display:flex; align-items:flex-start; gap:9px; margin:2px 0; cursor:pointer; font-size:12px; line-height:1.5; color:var(--muted)}
.consent input{margin-top:2px; accent-color:var(--accent-deep); flex-shrink:0; cursor:pointer}
.consent a{color:var(--accent-deep); font-weight:600}
.chat-input-area{padding:12px 16px; display:flex; gap:10px; align-items:flex-end; border-top:1px solid var(--line-soft)}
.chat-textarea{flex:1; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:10px 14px;
  font-size:14px; font-family:var(--font-text); color:var(--ink); resize:none; outline:none; transition:border-color .2s; max-height:100px;}
.chat-textarea::placeholder{color:var(--faint)}
.chat-textarea:focus{border-color:var(--accent)}
.chat-send{width:42px; height:42px; border-radius:12px; border:none; cursor:pointer; flex:none; color:#fff;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-deep)); display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;}
.chat-send svg{width:17px; height:17px}
.chat-send:hover{transform:translateY(-1px); box-shadow:0 8px 18px -6px rgba(75,58,203,.5)}
.chat-send:disabled,.chat-start .btn:disabled{opacity:.5; cursor:not-allowed}

.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.rel-card{display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  padding:14px; transition:transform .25s, box-shadow .25s;}
.rel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover)}
.rel-thumb{width:52px; height:52px; border-radius:12px; flex:none; overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--accent-wash),var(--gold-wash));}
.rel-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center}
.rel-thumb .fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:22px; color:rgba(75,58,203,.3);}
.rel-thumb.portrait--empty img{display:none}
.rel-thumb.portrait--empty .fallback{display:flex}
.rel-card b{display:block; font-size:14.5px; font-weight:700; color:var(--ink)}
.rel-card small{font-size:12.5px; color:var(--muted)}

/* ── Responsive ── */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .bot-hero-grid{grid-template-columns:1fr}
  .bot-portrait{max-width:420px; margin:0 auto}
  .radar-wrap{grid-template-columns:1fr}
  .bio-powers{grid-template-columns:1fr; gap:32px}
  .chat-grid{grid-template-columns:1fr}
  .chat-intro p{max-width:none}
}
@media(max-width:820px){ nav.site-nav{display:none} }
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .stat-row .label{min-width:64px}
  .foot-in{gap:28px}
  .chat-widget{height:420px}
  /* .tabs — сам по себе flex-контейнер с wrap; как flex-item внутри .controls он иначе
     тянется к max-content (все 7 кнопок в один ряд) и толкает страницу вбок — фиксируем
     раскладку в колонку, чтобы табы и поиск каждый получали 100% доступной ширины. */
  .controls{flex-direction:column; align-items:stretch}
  .bot-card-foot{flex-wrap:wrap; row-gap:6px}
  /* пилюля 999px хороша для одного ряда; на мобильном табы переносятся в несколько
     строк, и та же радиус-величина раздувает контейнер в огромный овал — смягчаем */
  .tabs{border-radius:var(--r-lg)}
}
@media(max-width:480px){
  /* Хедер: бренд + CTA-кнопка (nowrap) не помещаются вдвоём на 375px — сжимаем. */
  .header-in{gap:8px}
  .brand-txt small{display:none}
  .brand-mark{width:32px; height:32px; border-radius:9px}
  .brand-txt b{font-size:14.5px}
  .header-in .btn{padding:10px 14px; font-size:12.5px}
  .back-link{font-size:13px}
  .price-options{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }