/* Общие стили страниц Autonomix AI.
   Вынесены из index.html, чтобы посадочные страницы не расходились по виду
   и правка стиля делалась в одном месте. Отдаётся с no-cache (см. nginx),
   поэтому правки доезжают до посетителей сразу. */
:root{--bg:#0a0815;--bg2:#120e2a;--card:#16122e;--txt:#fff;--mut:rgba(255,255,255,.62);
    --mut2:rgba(255,255,255,.55);--ac:#7c6af5;--ac2:#a78bfa;--line:rgba(255,255,255,.09);
    --green:#34d399;--ac-t:#a78bfa;--mut2-t:rgba(255,255,255,.55);--font:'Onest','Inter',-apple-system,sans-serif}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.6}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  nav{position:sticky;top:0;z-index:50;background:rgba(10,8,21,.86);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line)}
  .nav-i{display:flex;align-items:center;justify-content:space-between;height:62px}
  .logo{font-weight:800;font-size:17px;letter-spacing:-.3px}
  .logo span{background:linear-gradient(90deg,var(--ac2),var(--ac));-webkit-background-clip:text;
    -webkit-text-fill-color:transparent}
  .nav-l{display:flex;gap:22px;font-size:14px;color:var(--mut)}
  .nav-l a:hover{color:#fff}
  .btn{display:inline-block;padding:13px 28px;border-radius:12px;font-weight:700;font-size:15px;
    background:linear-gradient(135deg,var(--ac),#6c5ce7);color:#fff;
    box-shadow:0 4px 26px rgba(108,92,231,.45);transition:.15s}
  .btn:hover{transform:translateY(-1px)}
  .btn.ghost{background:none;border:1px solid rgba(255,255,255,.18);box-shadow:none;color:var(--mut)}
  .hero{padding:92px 0 70px;background:linear-gradient(160deg,#0a0815 0%,#150f33 55%,#0d0d1a 100%);
    position:relative;overflow:hidden}
  .hero::before{content:'';position:absolute;top:-120px;left:22%;width:520px;height:520px;
    background:radial-gradient(circle,rgba(124,106,245,.22),transparent 70%);pointer-events:none}
  .tag{display:inline-block;padding:6px 14px;border-radius:20px;border:1px solid rgba(167,139,250,.32);
    background:rgba(167,139,250,.09);font-size:12px;font-weight:700;letter-spacing:.5px;
    text-transform:uppercase;color:var(--ac2);margin-bottom:24px}
  h1{font-size:clamp(32px,5.4vw,54px);font-weight:900;line-height:1.12;letter-spacing:-1.5px;
    max-width:800px;margin-bottom:20px}
  h1 em{font-style:normal;background:linear-gradient(90deg,var(--ac2),var(--ac),#6366f1);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent}
  /* Приём из скилла seo-landing: ключ забирает H1, характер бренда — строкой следом.
     Смысл прежний, но заголовок теперь несёт коммерческий запрос. */
  .h1sub{font-size:clamp(19px,2.6vw,26px);font-weight:700;color:var(--ac2);letter-spacing:-.5px;
    margin:-8px 0 18px;max-width:800px}
  .sub{font-size:18px;color:var(--mut);max-width:640px;margin-bottom:34px}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:58px}
  .stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:18px}
  .stat b{display:block;font-size:24px;color:var(--ac2);letter-spacing:-.5px}
  .stat span{font-size:13px;color:var(--mut)}
  section{padding:76px 0}
  .sec-tag{color:var(--ac2);font-size:12px;font-weight:800;letter-spacing:1.5px;
    text-transform:uppercase;margin-bottom:10px}
  h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;letter-spacing:-1px;margin-bottom:14px}
  .sec-sub{color:var(--mut);max-width:620px;margin-bottom:44px}
  .grid{display:grid;gap:16px}
  .g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;
    transition:.15s}
  .card:hover{border-color:rgba(167,139,250,.35)}
  .card h3{font-size:17px;font-weight:800;margin-bottom:10px}
  .card p{font-size:14px;color:var(--mut)}
  .price{font-size:26px;font-weight:900;color:var(--ac2);letter-spacing:-.5px;margin:14px 0 4px}
  .price small{font-size:13px;color:var(--mut2);font-weight:500}
  .term{font-size:12.5px;color:var(--mut2);margin-bottom:14px}
  .feat{list-style:none;margin:14px 0 0}
  .feat li{font-size:13.5px;color:var(--mut);padding:4px 0 4px 22px;position:relative}
  .feat li::before{content:'✓';position:absolute;left:0;color:var(--ac2);font-weight:700}
  .pop{border:2px solid var(--ac);position:relative}
  .pop::after{content:'ЧАЩЕ ВСЕГО';position:absolute;top:-11px;left:24px;background:#f59e0b;
    color:#fff;font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 12px;border-radius:20px}
  .prod{display:flex;flex-direction:column;gap:8px}
  .prod .niche{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--ac2);text-transform:uppercase}
  .prod .go{margin-top:auto;padding-top:12px;font-size:13px;color:var(--ac2);font-weight:600}
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .step b{display:flex;width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,var(--ac),var(--ac2));align-items:center;justify-content:center;
    font-size:13px;margin-bottom:12px}
  .step h4{font-size:14.5px;font-weight:700;margin-bottom:6px}
  .step p{font-size:12.5px;color:var(--mut)}
  .diff td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
  .diff{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden}
  .diff tr td:first-child{color:var(--mut);width:34%}
  .diff .hd td{font-weight:800;color:var(--ac2);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
  .cta{background:linear-gradient(135deg,#150f33,#1a1040);border-radius:24px;padding:56px 40px;
    text-align:center}
  .cta h2{margin-bottom:12px}
  footer{border-top:1px solid var(--line);padding:30px 0;font-size:13px;color:var(--mut2)}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .steps.s4{grid-template-columns:repeat(4,1fr)}
  .lf input,.lf textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
    border-radius:11px;padding:12px 15px;color:#fff;font:inherit;font-size:14.5px;margin-bottom:10px}
  .lf input::placeholder,.lf textarea::placeholder{color:rgba(255,255,255,.35)}
  .lf input:focus,.lf textarea:focus{outline:none;border-color:rgba(167,139,250,.55)}
  /* Динамика (паттерн лендингов Контрагент/Директолог): появление при скролле + живой hero */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,26px) scale(1.06)}}
  .hero::before{animation:float 10s ease-in-out infinite}
  .hero .tag{animation:fadeUp .6s .05s both}
  .hero h1{animation:fadeUp .65s .14s both}
  .hero .sub{animation:fadeUp .65s .24s both}
  .hero .btn{animation:fadeUp .65s .34s both}
  .hero .stats{animation:fadeUp .7s .46s both}
  .rise{opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .rise.on{opacity:1;transform:none}
  .grid>.rise:nth-child(2),.steps>.rise:nth-child(2){transition-delay:.08s}
  .grid>.rise:nth-child(3),.steps>.rise:nth-child(3){transition-delay:.16s}
  .steps>.rise:nth-child(4){transition-delay:.24s}
  .steps>.rise:nth-child(5){transition-delay:.32s}
  .card.rise:hover,.card.prod.rise:hover{transform:translateY(-3px)}
  .lead-btn{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--ac2);
    border:1px solid rgba(167,139,250,.35);border-radius:10px;padding:9px 18px;transition:.15s}
  .lead-btn:hover{background:rgba(167,139,250,.12)}
  /* Тест стоит между двумя широкими блоками (первый экран и продукты), поэтому
     фон тянется на всю ширину экрана — карточка-островок посередине проваливалась.
     Сам блок внутри уже без рамки: полосу держит секция. */
  .quiz-sect{background:linear-gradient(135deg,#231655 0%,#1a1140 55%,#171033 100%);
    border-top:1px solid rgba(167,139,250,.22);border-bottom:1px solid rgba(167,139,250,.22);
    position:relative;overflow:hidden}
  .quiz-sect::before{content:'';position:absolute;top:-160px;right:8%;width:420px;height:420px;
    background:radial-gradient(circle,rgba(124,106,245,.28),transparent 70%);pointer-events:none}
  .quiz-banner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
    position:relative;transition:.15s}
  .quiz-banner:hover .quiz-go{transform:translateY(-2px);box-shadow:0 8px 32px rgba(108,92,231,.55)}
  .quiz-go{flex-shrink:0;padding:14px 28px;border-radius:12px;font-weight:700;font-size:15px;
    background:linear-gradient(135deg,var(--ac),#6c5ce7);color:#fff;box-shadow:0 4px 24px rgba(108,92,231,.4);
    transition:.15s}
  @media(max-width:700px){.quiz-banner{flex-direction:column;align-items:stretch}
    .quiz-go{text-align:center}}
  /* FAQ: нативный details/summary — работает без JS и раскрывается поисковым роботом */
  .faq{display:grid;gap:10px;max-width:820px}
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:0 20px;transition:border-color .15s}
  .faq details[open]{border-color:rgba(167,139,250,.35)}
  .faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:15.5px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';font-size:22px;font-weight:400;color:var(--ac2);
    transition:transform .2s;line-height:1}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq p{padding:0 0 18px;color:var(--mut);font-size:14.5px;max-width:70ch}
  .faq a{color:var(--ac2);text-decoration:underline;text-underline-offset:2px}
  .lt .faq details,.lt2 .faq details{background:#fff;border-color:rgba(20,18,31,.1)}
  .lt .faq details[open],.lt2 .faq details[open]{border-color:rgba(91,70,217,.4)}
  .lt .faq summary::after,.lt2 .faq summary::after{color:#5b46d9}
  .lt .faq p,.lt2 .faq p{color:#4f4b66}
  .lt .faq a,.lt2 .faq a{color:#5b46d9}
  .ccard{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:20px;transition:.15s}
  .ccard:hover{border-color:rgba(167,139,250,.4);transform:translateY(-2px)}
  .cico{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:rgba(124,106,245,.14);
    display:flex;align-items:center;justify-content:center}
  .ccard b{display:block;font-size:14.5px;margin-bottom:2px}
  .cval{display:block;color:var(--ac2);font-size:13.5px;font-weight:600}
  .cnote{display:block;color:var(--mut2);font-size:12px;margin-top:3px;line-height:1.5}
  /* ── Светлые секции ──────────────────────────────────────────────────────────
     Замер до правки: фон, «светлая» секция и карточка отличались по яркости
     в 1.06-1.1 раза — страница читалась как одно тёмное пятно на 6900px, глазу
     не за что зацепиться. Тёмными остаются первый экран, полоса теста, блок
     заявки и контакты — они держат акценты; вся читательская часть светлая,
     заодно стыкуется со статьями блога, которые уже светлые.
     Фиолетовый на белом взят темнее (#5b46d9 вместо #7c6af5): исходный давал
     контраст 3.3 и для текста не проходил. */
  .lt{background:#f7f7fb;color:#14121f;--ac-t:#5b46d9;--mut2-t:#6b6782}
  .lt2{background:#ecebf4;color:#14121f;--ac-t:#5b46d9;--mut2-t:#6b6782}
  .lt h2,.lt2 h2,.lt h3,.lt2 h3,.lt h4,.lt2 h4,.lt b,.lt2 b{color:#14121f}
  .lt .sec-tag,.lt2 .sec-tag{color:#5b46d9}
  .lt .sec-sub,.lt2 .sec-sub,.lt .card p,.lt2 .card p,.lt .step p,.lt2 .step p,
  .lt .feat li,.lt2 .feat li{color:#4f4b66}
  .lt .card,.lt2 .card{background:#fff;border-color:rgba(20,18,31,.1);
    box-shadow:0 1px 3px rgba(20,18,31,.06)}
  .lt .card:hover,.lt2 .card:hover{border-color:rgba(91,70,217,.45);
    box-shadow:0 8px 28px rgba(20,18,31,.1)}
  .lt .price,.lt2 .price,.lt .prod .niche,.lt2 .prod .niche,.lt .prod .go,.lt2 .prod .go,
  .lt .feat li::before,.lt2 .feat li::before,.lt .go,.lt2 .go{color:#5b46d9}
  .lt .price small,.lt2 .price small,.lt .term,.lt2 .term,.lt .cnote,.lt2 .cnote{color:#6b6782}
  .lt .pop,.lt2 .pop{border-color:#5b46d9}
  .lt .diff,.lt2 .diff{background:#fff}
  .lt .diff td,.lt2 .diff td{border-bottom-color:rgba(20,18,31,.1)}
  .lt .diff tr td:first-child,.lt2 .diff tr td:first-child{color:#4f4b66}
  .lt .diff .hd td,.lt2 .diff .hd td{color:#5b46d9}
  .lt .dsub,.lt2 .dsub{border-top-color:rgba(20,18,31,.12)}
  .lt .lead-btn,.lt2 .lead-btn{color:#5b46d9;border-color:rgba(91,70,217,.4)}
  .lt .lead-btn:hover,.lt2 .lead-btn:hover{background:rgba(91,70,217,.08)}
  .lt .btn,.lt2 .btn{color:#fff}
  @media(prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none;transition:none}
    .hero::before,.hero .tag,.hero h1,.hero .sub,.hero .btn,.hero .stats{animation:none}}
  .dsub{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
  @media(max-width:820px){.g3,.g2,.stats,.steps,.steps.s4{grid-template-columns:1fr}
    .nav-l{display:none}.hero{padding:56px 0 46px}}