/* Витрина MAIAI. Своя палитра, не site.css: у витрины отдельный визуальный язык —
   тёмный, с акцентом на карточки продуктов. Сайт продукта Cassiopeia остаётся
   светлым, и смешивать их не нужно: это разные бренды на разных доменах. */
:root{
  --bg:#060B1D; --bg-deep:#020612; --surface:#0A102A; --surface-2:#121A41;
  --surface-hover:#242B67; --border:#1B2550;
  --primary:#4055A9; --primary-hover:#5369C0;
  --secondary:#9FAED3; --violet:#806D9E; --star:#7FA6FF;
  --text:#EDEDF1; --text-2:#B4BDD7; --muted:#7E89AA;
  --ok:#4CAF88;
  --maxw:1080px;
  --font:"Golos Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--star); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
:focus-visible{outline:2.5px solid var(--star); outline-offset:3px; border-radius:4px}

/* ── шапка ─────────────────────────────────────────────── */
header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#070D22 0%,var(--bg) 100%);
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.15rem; letter-spacing:.04em; color:var(--text)}
.brand:hover{text-decoration:none}
.brand svg{display:block; flex:none}
.bar nav{display:flex; gap:20px; font-size:.93rem; flex-wrap:wrap}
.bar nav a{color:var(--text-2)}
.bar nav a[aria-current]{color:var(--star)}

/* ── герой ─────────────────────────────────────────────── */
.hero{padding:64px 0 44px}
.hero h1{
  margin:0 0 18px; font-size:clamp(1.9rem,5.2vw,3rem); line-height:1.16;
  letter-spacing:-.02em; font-weight:800;
}
.hero h1 b{color:var(--star); font-weight:800}
.lead{margin:0; max-width:62ch; font-size:clamp(1.02rem,2.4vw,1.2rem); color:var(--text-2)}
.hint{margin:26px 0 0; font-size:.93rem; color:var(--muted)}

/* ── карточки продуктов ────────────────────────────────── */
.grid{
  display:grid; gap:18px; padding:8px 0 56px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:26px 24px 24px;
}
.card:hover{border-color:var(--surface-hover)}
.tag{
  display:inline-block; align-self:flex-start; padding:4px 11px; border-radius:999px;
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  background:#121A41; color:var(--secondary); border:1px solid var(--border);
}
.tag.ai{color:#C3B4DC; border-color:#2C2550; background:#1A1435}
.card h2{margin:0; font-size:1.34rem; letter-spacing:-.01em}
.card p{margin:0; color:var(--text-2); font-size:.99rem}
.card ul{margin:0; padding-left:18px; color:var(--text-2); font-size:.95rem}
.card li{margin:5px 0}
.card .go{margin-top:auto; padding-top:6px}
.btn{
  display:inline-block; padding:11px 20px; border-radius:10px; font-weight:600; font-size:.97rem;
  background:var(--primary); color:#fff; border:1px solid var(--primary);
}
.btn:hover{background:var(--primary-hover); border-color:var(--primary-hover); text-decoration:none}
.btn.ghost{background:transparent; color:var(--star); border-color:var(--border)}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--surface-hover)}

/* ── блок контакта ─────────────────────────────────────── */
.strip{
  border:1px solid var(--border); border-radius:16px; background:var(--surface-2);
  padding:28px 24px; margin:0 0 56px;
}
.strip h2{margin:0 0 10px; font-size:1.3rem}
.strip .btn{margin:0 10px 8px 0}
.strip p{margin:0 0 18px; color:var(--text-2); max-width:70ch}

/* ── страница продукта ─────────────────────────────────── */
.crumbs{padding:22px 0 0; font-size:.88rem; color:var(--muted)}
.crumbs a{color:var(--text-2)}
.page-head{padding:14px 0 30px}
.page-head h1{margin:12px 0 14px; font-size:clamp(1.7rem,4.4vw,2.5rem); line-height:1.18; letter-spacing:-.02em; font-weight:800}
.prose{max-width:70ch; padding-bottom:40px}
.prose h2{margin:34px 0 12px; font-size:1.3rem; letter-spacing:-.01em}
.prose h3{margin:24px 0 8px; font-size:1.08rem}
.prose p{margin:0 0 14px; color:var(--text-2)}
.prose ul,.prose ol{margin:0 0 14px; padding-left:20px; color:var(--text-2)}
.prose li{margin:0 0 6px}
.prose strong{color:var(--text)}
.prose blockquote{margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--border); color:var(--muted)}
.others{display:flex; flex-wrap:wrap; gap:10px; padding:0 0 56px}
.others a{
  display:inline-block; padding:9px 15px; border-radius:10px; font-size:.93rem;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
}
.others a:hover{border-color:var(--surface-hover); text-decoration:none}

/* ── подвал ────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); background:var(--bg-deep); padding:30px 0 40px}
footer p{margin:0 0 8px; color:var(--muted); font-size:.87rem}
footer a{color:var(--text-2)}

@media (max-width:560px){
  body{font-size:16px}
  .hero{padding:44px 0 30px}
  .bar{flex-direction:column; align-items:flex-start; gap:10px}
  .card{padding:22px 18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}