/* Фирменный стиль MAIAI на главной maiai.ru — с 16.10.2026, по макету владельца
   (знак из синей и зелёной «Λ», слово MAIAI с зелёной «I», тёмно-синий фон).
   Подключается после main.css и переопределяет его токены, поэтому переживает
   новую выгрузку из Claude Design: port_main.py пересобирает main.css, а этот
   файл не трогает. Цвета сняты с макета: синий #1E90F5, бирюза #20C893,
   зелёный #2EEC58, фон #0C1D3F. */

.site {
  --brand-navy: #0C1D3F;
  --brand-ink: #08142E;     /* текст на фирменном градиенте: от 6:1 на синем конце */
  --brand-grad: linear-gradient(100deg, #1E90F5 0%, #20C8A0 55%, #3EEA62 100%);
  --brand-panel: radial-gradient(70% 90% at 0% 0%, rgba(30, 144, 245, .38), transparent 62%),
                 radial-gradient(55% 80% at 100% 100%, rgba(46, 236, 88, .22), transparent 60%),
                 linear-gradient(160deg, #10275A 0%, #0A1834 55%, #071026 100%);
  --brand-i: #2FD653;

  --bg: #F5F7FB;
  --line: #DAE2EF;
  --blue: #0F3E8C;
  --blue-bright: #1769E0;   /* белый текст на нём 5:1 */
  --blue-soft: #E6F1FF;
  --green: #0B7A45;
  --green-bg: #E2F7EA;
  --focus: #1769E0;
  --shadow-strong: 0 2px 4px rgba(12, 29, 63, .08), 0 18px 40px -18px rgba(30, 144, 245, .5);
  --header-bg: rgba(245, 247, 251, .96);
}
@media (prefers-color-scheme: dark) {
  .site:not([data-theme="light"]) {
    --bg: #071026; --card: #0D1A36; --sunken: #0A152D;
    --line: #1D2D52; --line-soft: #16244A;
    --blue: #7CC4FF; --blue-bright: #4DB0FF; --blue-soft: #10264D; --on-bright: #071026;
    --green: #4BE38A; --green-bg: #0E2A22;
    --focus: #7CC4FF;
    --header-bg: rgba(7, 16, 38, .94);
    --brand-i: #45EE4E;
  }
}
.site[data-theme="dark"] {
  --bg: #071026; --card: #0D1A36; --sunken: #0A152D;
  --line: #1D2D52; --line-soft: #16244A;
  --blue: #7CC4FF; --blue-bright: #4DB0FF; --blue-soft: #10264D; --on-bright: #071026;
  --green: #4BE38A; --green-bg: #0E2A22;
  --focus: #7CC4FF;
  --header-bg: rgba(7, 16, 38, .94);
  --brand-i: #45EE4E;
}

/* ---------- Логотип: знак + слово ---------- */
.logo { gap: 10px; }
.logo__mark { display: block; width: 44px; height: 22px; flex: none; }
.site .logo svg.logo__word { display: block; width: 80px; height: 16px; flex: none; color: var(--text); }
.logo__i { stroke: var(--brand-i); }

/* ---------- Главная кнопка: фирменный градиент ---------- */
.site a.btn--primary, .btn--primary {
  background: var(--brand-grad); color: var(--brand-ink); border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(30, 144, 245, .8);
}
.site a.btn--primary:hover, .btn--primary:hover {
  background: var(--brand-grad); color: var(--brand-ink);
  filter: brightness(1.07) saturate(1.1);
}

/* ---------- Первый экран: тёмно-синяя панель, как на макете ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-panel); color: #fff;
  padding: 36px 0 52px;
  --focus: #7CC4FF;
}
.hero::after {               /* крупный знак водяным рисунком в углу */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -70px; bottom: -36px; width: 420px; height: 214px;
  background: url("brand/mark.svg") no-repeat center / contain; opacity: .08;
}
.site .hero h1 { color: #fff; }
.site .hero__lead { color: #C9D6F2; }
.site .hero__groups a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.site .hero__groups a .mono { color: #4FE3C9; }
.site .hero__groups a:hover { border-color: #4FE3C9; background: rgba(255, 255, 255, .1); color: #fff; }
.hero .scale {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero .scale__pct { color: #4DB0FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .scale__pct { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.site .hero .scale__what { color: #E6EEFF; }

/* ---------- Цифры: фирменная полоска сверху карточки ---------- */
.stats { padding-top: 24px; }
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-grad); }

/* ---------- Cassiopeia: каналы на тёмно-синем ---------- */
.spot__tag { background: var(--brand-grad); color: var(--brand-ink); }
.spot__ch { background: var(--brand-panel); color: #fff; }
.spot__ch h3 { color: #fff; }
.spot__ch .chk li svg { color: #4FE3C9; }

/* ---------- Финал: карточка основателя ---------- */
.site .final--founder {
  padding: 0; gap: 0; border: 0; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--brand-panel); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(12, 29, 63, .6);
  --focus: #7CC4FF;
}
.final__copy { padding: 28px 20px; display: flex; flex-direction: column; gap: 16px; }
.site .final--founder h2 { color: #fff; }
.site .final--founder p { color: #C9D6F2; }
.final__cta { display: flex; flex-direction: column; gap: 10px; }
.site .final--founder a.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.site .final--founder a.btn--ghost:hover { border-color: #4FE3C9; color: #fff; }
.final__face { margin: 0; position: relative; }
/* край фото растворяется в фоне карточки: на телефоне верхний (фото под текстом),
   на широком экране левый (фото справа от текста) */
.final__face img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 30% 20%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28%);
}
.final__face figcaption {
  position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(7, 16, 38, .78); color: #fff;
  font-family: var(--f-head); font-weight: 600; font-size: 16px; line-height: 1.3;
}

@media (min-width: 640px) {
  .final__cta { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .logo__mark { width: 48px; height: 24px; }
  .site .logo svg.logo__word { width: 90px; height: 18px; }
  .hero { padding: 64px 0 80px; }
  .hero::after { width: 620px; height: 316px; right: -110px; bottom: -60px; }
  .stats { padding-top: 40px; }
  .site .final--founder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .final__copy { padding: 48px 44px; justify-content: center; }
  .final__face img {
    height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) 14%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) 14%, #000 40%);
  }
}

/* ---------- TGWW: иконка-кот у ссылки на продукт (16.10.2026) ---------- */
.site a.tgww-link { white-space: nowrap; }
.tgww-link img { display: inline-block; width: 22px; height: 22px; border-radius: 6px; margin-right: 6px; vertical-align: -5px; }

/* ---------- TGWW: отдельный блок после группы 04 (17.10.2026), акцент зелёный ---------- */
.tgww-promo { padding: 40px 0 8px; scroll-margin-top: calc(var(--header-h) + var(--ribbon-h)); }
.tgww-promo__box {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 24px 20px; border-radius: var(--r-card); color: #fff;
  background: radial-gradient(70% 100% at 100% 0%, rgba(46, 236, 88, .26), transparent 62%),
              radial-gradient(60% 90% at 0% 100%, rgba(32, 200, 160, .2), transparent 60%),
              linear-gradient(160deg, #0B2B2C 0%, #0A1B2E 55%, #071026 100%);
  border: 1px solid rgba(62, 234, 98, .3);
  box-shadow: 0 30px 60px -30px rgba(12, 60, 40, .6);
  --focus: #6BF08F;
}
/* иконка без фона и рамки: кот с кольцом лежит прямо на панели */
.tgww-promo__icon { display: block; width: 96px; height: 96px; margin: -8px 0 -6px -6px;
  filter: drop-shadow(0 8px 22px rgba(46, 236, 88, .35)); }
.site .tgww-promo__tag { font-family: var(--f-head); font-weight: 600; font-size: 16px; color: #45EE6E; }
.site .tgww-promo h2 { margin-top: 6px; font-size: 26px; color: #fff; }
.site .tgww-promo__lead { margin-top: 10px; font-size: 18px; color: #CDEBDD; }
.site .tgww-promo__pts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.tgww-promo__pts li { padding: 6px 12px; border-radius: 999px; font-size: 16px; line-height: 1.3; color: #DDFBE6;
  background: rgba(46, 236, 88, .08); border: 1px solid rgba(62, 234, 98, .35); }
.site a.tgww-promo__btn, .site a.tgww-promo__btn:hover {
  background: linear-gradient(100deg, #20C8A0 0%, #3EEA62 100%); color: var(--brand-ink);
  box-shadow: 0 10px 28px -12px rgba(46, 236, 88, .85);
}
.site .tgww-promo__steps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; counter-reset: none; }
.tgww-promo__steps li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 16px; line-height: 1.35; color: #DDFBE6;
  background: rgba(46, 236, 88, .07); border: 1px solid rgba(62, 234, 98, .3); }
.tgww-promo__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--brand-ink); background: linear-gradient(135deg, #20C8A0, #3EEA62); }
.site .tgww-promo__rest { margin-top: 12px; font-size: 16px; color: #CDEBDD; }
.tgww-promo__rest b { color: #45EE6E; }
@media (min-width: 640px) { .site .tgww-promo__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .tgww-promo__btn { justify-self: start; } }
@media (min-width: 900px) {
  .tgww-promo { padding: 64px 0 16px; }
  .tgww-promo__box { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 36px 28px 24px; }
  .tgww-promo__icon { width: 128px; height: 128px; margin: -14px 0; }
  .site .tgww-promo h2 { font-size: 30px; }
  .tgww-promo__btn { white-space: nowrap; }
}

/* ---------- Темп рассылки: тёмная полоса, светящийся график (17.10.2026) ---------- */
.site .tempo-sec {
  position: relative; overflow: hidden; color: #fff; padding: 56px 0;
  background: url("brand/waves.svg") no-repeat right -160px top 30px / 1100px auto, var(--brand-panel);
  --focus: #7CC4FF;
}
.site .tempo-sec h2 { color: #E6F2FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site .tempo-sec h2 { background: linear-gradient(90deg, #6CC6FF 0%, #E6F2FF 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.site .tempo-sec .section__sub { color: #9FB3D9; }
.tempo-sec .tempo__chart, .tempo-sec .tempo__kpi {
  margin: 0; padding: 18px 16px; border-radius: 16px; min-width: 0;
  background: rgba(9, 20, 44, .62); border: 1px solid rgba(95, 181, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.tempo-sec .tempo__legend { color: #C9D6F2; }
.tempo-sec .tempo__key--sent { position: relative; width: 24px; height: 3px; background: #5CC0FF; box-shadow: 0 0 8px #2F9BFF; }
.tempo-sec .tempo__key--sent::after { content: ""; position: absolute; left: 7px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: #0A1834; border: 2px solid #9FDBFF; box-sizing: border-box; }
.tempo-sec .tempo__key--lead { display: inline-flex; align-items: flex-end; gap: 2px; width: auto; height: 14px; background: none; border-radius: 0; }
.tempo__key--lead i { display: block; width: 4px; border-radius: 1px; background: #45EE6E; box-shadow: 0 0 6px rgba(46, 236, 88, .6); }
.tempo__key--lead i:nth-child(1) { height: 7px; } .tempo__key--lead i:nth-child(2) { height: 10px; } .tempo__key--lead i:nth-child(3) { height: 14px; }
.tempo-sec .tempo__phone-note { color: #9FB3D9; }
/* график */
.tc-grid { stroke: rgba(150, 190, 255, .12); stroke-width: 1; }
.tc-tick { fill: #8EA3C8; font-family: var(--f-mono); font-size: 13px; }
.tc-mon { font-size: 12px; }
.tc-off { stroke: #E03C3C; stroke-width: 5; stroke-linecap: round; }
.tc-officon rect, .tc-officon path { fill: none; stroke: #FF6B6B; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-glow { fill: none; stroke: #2F9BFF; stroke-width: 9; opacity: .55; }
.tc-line { fill: none; stroke: #5CC0FF; stroke-width: 3; stroke-linecap: round; }
.tc-dot { fill: #0A1834; stroke: #7CCBFF; stroke-width: 2.5; }
.tc-dot--last { stroke: #CDEBFF; stroke-width: 3; }
.tc-peak { fill: #E6F6FF; filter: drop-shadow(0 0 6px #5CC0FF); }
.tc-bub { fill: rgba(16, 36, 74, .95); stroke: rgba(124, 196, 255, .55); }
.tc-bubt { fill: #E6F2FF; font-family: var(--f-mono); font-weight: 700; font-size: 14px; }
.tc-pad { stroke: rgba(62, 234, 98, .45); stroke-width: 1; }
.tc-padlabel { fill: #9FD9B0; }
.tc-bar { filter: drop-shadow(0 0 6px rgba(46, 236, 88, .45)); }
.tc-barv { fill: #5FF08A; font-family: var(--f-mono); font-weight: 700; font-size: 14px; }
.tempo__svg--phone .tc-tick, .tempo__svg--phone .tc-barv, .tempo__svg--phone .tc-bubt { font-size: 11px; }
/* итог за период: три плитки с иконками */
.site .tempo-sec .tempo__kpi h3 { margin-bottom: 14px; font-size: 20px; color: #fff; }
.tempo-sec .tempo__kpi dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tempo-sec .tempo__kpi dl > div { padding: 16px 58px 16px 16px; border-top: 0; }
.tempo__tile { position: relative; border-radius: 14px; overflow: hidden; }
.tempo__tile--blue { background: linear-gradient(160deg, rgba(30, 144, 245, .24), rgba(30, 144, 245, .06)); border: 1px solid rgba(77, 172, 255, .42); color: #4DC3FF; }
.tempo__tile--green { background: linear-gradient(160deg, rgba(46, 236, 88, .2), rgba(46, 236, 88, .05)); border: 1px solid rgba(62, 234, 98, .38); color: #45EE6E; }
.tempo-sec .tempo__kpi dt { font-size: 30px; line-height: 1.1; font-weight: 700; color: inherit; }
.tempo-sec .tempo__kpi dt .num { white-space: nowrap; }
.site .tempo-sec .tempo__unit { font-size: 18px; color: inherit; }
.tempo-sec .tempo__kpi dd { margin: 6px 0 0; font-size: 16px; color: #C9D6F2; }
.tempo__ico { position: absolute; right: 14px; top: 50%; width: 44px; height: 44px; margin-top: -22px; opacity: .4; }
@media (min-width: 900px) {
  .site .tempo-sec { padding: 88px 0; }
  .tempo-sec .tempo { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 20px; }
  .tempo-sec .tempo__chart, .tempo-sec .tempo__kpi { padding: 24px; }
  .tempo-sec .tempo__kpi dt { font-size: 32px; }
}

/* ---------- Каскад на примере 10 000 контактов: в блоке Cassiopeia (17.10.2026) ---------- */
.cas { margin-top: 16px; padding: 20px 16px; border-radius: var(--r-btn); color: #fff;
  background: url("brand/waves.svg") no-repeat right -200px top -40px / 900px auto, var(--brand-panel);
  box-shadow: var(--shadow-strong); }
.site .cas h3 { font-size: 20px; color: #fff; }
.site .cas__sub { margin-top: 6px; font-size: 16px; color: #9FB3D9; }
.site .cas__list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cas__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 6px 12px; align-items: end; }
.cas__name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.cas__name b { font-family: var(--f-head); font-weight: 600; font-size: 17px; color: #fff; }
.cas__name span { font-size: 14px; line-height: 1.35; color: #9FB3D9; }
.cas__track { grid-area: bar; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cas__track i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #1E90F5, #20C8A0 70%, #3EEA62);
  box-shadow: 0 0 12px rgba(46, 200, 160, .45); }
.cas__row--base .cas__track i { background: linear-gradient(90deg, #1E6FD9, #2F9BFF); box-shadow: 0 0 12px rgba(47, 155, 255, .45); }
.cas__row:last-child .cas__track i { background: linear-gradient(90deg, #E05A3C, #F3B25B); box-shadow: 0 0 10px rgba(240, 120, 60, .5); }
.cas__val { grid-area: val; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cas__val .num { font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; }
.cas__got { font-size: 14px; font-weight: 700; color: #45EE6E; white-space: nowrap; }
.cas__row--opt .cas__name b::after { content: "по выбору"; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font-family: var(--f-body); font-weight: 700; font-size: 12px; color: #F3B25B; border: 1px dashed rgba(243, 178, 91, .6); }
.cas__row--opt .cas__name span { display: none; }
.cas__sep { margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(243, 178, 91, .45); font-size: 15px; font-weight: 700; color: #F3B25B; }
.site .cas__end { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 16px; color: #FFE2C4;
  background: rgba(240, 120, 60, .1); border: 1px solid rgba(243, 178, 91, .35); }
.cas__end .num { font-weight: 700; color: #fff; }
.cas__end b { color: #F3B25B; }
.site .cas__note { margin-top: 8px; font-size: 14px; color: #8EA3C8; }
@media (min-width: 640px) {
  .cas { padding: 24px; }
  .cas__row { grid-template-columns: 220px minmax(0, 1fr) 150px; grid-template-areas: "name bar val"; align-items: center; gap: 16px; }
  .cas__track { height: 18px; border-radius: 9px; }
  .cas__track i { border-radius: 9px; }
}
@media (min-width: 900px) {
  .cas { padding: 28px 32px; }
  .site .cas h3 { font-size: 24px; }
  .cas__row { grid-template-columns: 300px minmax(0, 1fr) 170px; }
}

/* ---------- «Под какие задачи подходит»: заголовки зелёным, с маркером (17.10.2026) ---------- */
.site { --tasks-h: #0B7A45; }
@media (prefers-color-scheme: dark) { .site:not([data-theme="light"]) { --tasks-h: #45EE6E; } }
.site[data-theme="dark"] { --tasks-h: #45EE6E; }
.site .tasks h3 { display: flex; align-items: center; gap: 10px; color: var(--tasks-h); }
.site .tasks h3::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px;
  background: linear-gradient(180deg, #20C8A0, #3EEA62); }