/*
Theme Name: СОЗИДАЙ — Обучение SMM
Theme URI: https://sozidai.pro
Author: СОЗИДАЙ
Description: Автономная одностраничная тема-лендинг для оффера «Бесплатное обучение SMM-специалистов». Не связана с основной темой sozidai. Весь текст и фото редактируются из wp-admin (одна страница «Настройки лендинга»). Собрана под платный трафик: целевое действие — переход в Telegram-бота, запасная форма на два поля, липкая CTA-панель на мобильных, цели в Метрике.
Version: 3.0.0
Requires PHP: 7.4
Text Domain: sozidai-smm-landing
*/

  :root{
    --paper:#FFFFFF; --paper-2:#EEF2F5; --paper-3:#E2E8EE;
    --ink:#2E2C41; --ink-2:#43415A; --ink-mute:#6E6C80;
    --mark:#EB333F; --mark-dim:#C8222E; --mark-2:#9298B0; --mark-soft:#FBDDDF;
    --rule:#E1E6EA; --rule-2:#C9CFD6;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Karla',sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif; font-weight:400; margin:0 0 .4em;
    letter-spacing:-.01em;
  }
  .mono{
    font-family:'JetBrains Mono',monospace; text-transform:uppercase;
    letter-spacing:.12em; font-size:.72rem; color:var(--ink-mute);
  }
  a{color:inherit;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
  .rule{border:none; border-top:1px solid var(--rule); margin:0;}

  /* header */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px; max-width:1080px; margin:0 auto;
  }
  .logo{font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500; text-decoration:none;}
  .logo span{color:var(--mark);}
  .hnav{display:flex; align-items:center; gap:22px;}
  .hnav a{font-size:.9rem; text-decoration:none; color:var(--ink-2);}
  .hnav a.back{color:var(--ink-mute);}

  /* buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Karla',sans-serif; font-weight:600; font-size:.96rem;
    padding:14px 26px; border-radius:18px; text-decoration:none;
    cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary{
    background:linear-gradient(180deg,#F0454F,#C8222E); color:#fff;
    box-shadow:0 10px 22px rgba(200,34,46,.32);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(200,34,46,.4);}
  .btn-primary:disabled{
    background:var(--rule-2); color:var(--ink-mute); box-shadow:none; cursor:not-allowed;
  }
  .btn-primary:disabled:hover{transform:none;}
  .btn-outline{
    background:transparent; color:var(--ink); border:1.5px solid var(--ink);
  }
  .btn-outline:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(46,44,65,.14);}
  .btn-head{padding:10px 20px; font-size:.86rem; border-radius:14px;}
  .btn-dark{background:var(--ink); color:#fff;}
  .btn-dark:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(46,44,65,.24);}
  /* на всю ширину — только кнопка отправки внутри самой формы */
  .modal .btn-dark{width:100%;}

  /* Тихие ссылки-спутники под кнопками (например «как это устроено») */
  .alt-row{margin:10px 0 0; font-size:.86rem; line-height:1.5;}
  .alt-link{
    color:var(--mark-dim); text-decoration:underline;
    text-underline-offset:2px; cursor:pointer;
  }
  .alt-link:hover{text-decoration:none;}
  .alt-link.muted{color:var(--ink-mute); text-decoration-color:var(--rule-2);}
  .alt-sep{color:var(--rule-2); margin:0 8px;}

  /* hero */
  .hero{padding:70px 0 50px; text-align:center;}
  .hero .mono{display:block; margin-bottom:22px;}
  .hero h1{font-size:clamp(2.1rem, 4.4vw, 3.2rem); max-width:820px; margin:0 auto .5em; line-height:1.15;}
  .hero h1 mark{
    background:none; color:var(--mark); position:relative; font-style:italic;
  }
  .hero p.sub{max-width:620px; margin:0 auto 34px; color:var(--ink-2); font-size:1.08rem;}
  .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;}
  .section-cta .actions{margin-bottom:0;}
  .hero .micro{font-size:.85rem; color:var(--ink-mute);}
  .cta-micro{
    font-size:.85rem; color:var(--ink-mute); max-width:420px;
    margin:0 auto 8px; line-height:1.45;
  }

  /* trust strip — снимает базовые возражения до того, как человек их сформулирует */
  .trust{padding:0 0 44px;}
  .trust-list{
    list-style:none; margin:0; padding:14px 20px; display:flex; flex-wrap:wrap;
    justify-content:center; gap:10px 26px;
    background:var(--paper-2); border:1px solid var(--rule); border-radius:16px;
  }
  .trust-list li{
    position:relative; padding-left:22px; font-size:.9rem; color:var(--ink-2);
  }
  .trust-list li::before{
    content:"✓"; position:absolute; left:0; top:-1px;
    color:var(--mark); font-weight:700; font-size:.9rem;
  }

  section{padding:64px 0;}
  .section-cta{text-align:center; margin-top:38px;}
  .section-cta .cta-micro{margin-top:12px; margin-bottom:0;}


  /* Приоритет действий разный на телефоне и на компьютере.
     На телефоне Telegram под рукой — он и главный. На компьютере переход
     в мессенджер стоит человеку логина в веб-версию, и по данным Метрики
     этого не делает никто (56 визитов с ПК — ноль кликов). Поэтому на
     широких экранах главной становится форма, а Telegram — запасным путём. */
  @media (min-width:861px){
    .actions .btn-dark, .apply-buttons .btn-dark{
      order:-1;
      background:linear-gradient(180deg,#F0454F,#C8222E);
      box-shadow:0 10px 22px rgba(200,34,46,.32);
    }
    .actions .btn-dark:hover, .apply-buttons .btn-dark:hover{
      box-shadow:0 14px 28px rgba(200,34,46,.4);
    }
    .actions .btn-primary, .apply-buttons .btn-primary{
      background:var(--ink); box-shadow:none;
    }
    .actions .btn-primary:hover, .apply-buttons .btn-primary:hover{
      box-shadow:0 8px 18px rgba(46,44,65,.14);
    }
  }

  /* instructor */
  .instructor{
    display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:center;
  }
  .instructor-photo{
    border-radius:16px; overflow:hidden; border:1px solid var(--rule);
    background:var(--paper-2);
  }
  .instructor-photo img{display:block; width:100%; height:100%; object-fit:cover;}
  .instructor-body h3{font-size:1.5rem; margin-bottom:.15em;}
  .instructor-role{
    font-family:'JetBrains Mono',monospace; color:var(--mark-dim); font-size:.78rem;
    text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:16px;
  }
  .instructor-body p{color:var(--ink-2); font-size:.98rem; margin:0 0 14px;}
  .instructor-facts{
    display:flex; gap:24px; flex-wrap:wrap; margin-top:20px; padding-top:20px;
    border-top:1px solid var(--rule);
  }
  .instructor-fact{display:flex; flex-direction:column; gap:2px;}
  .instructor-fact b{font-family:'Fraunces',serif; font-size:1.3rem; color:var(--ink);}
  .instructor-fact span{font-size:.8rem; color:var(--ink-mute);}
  .section-head{display:flex; align-items:baseline; gap:16px; margin-bottom:30px;}
  .num{font-family:'JetBrains Mono',monospace; color:var(--mark); font-size:.85rem;}

  /* cards */
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .card{
    background:var(--paper-2); border-radius:16px; padding:26px;
    border:1px solid var(--rule);
  }
  .card h3{font-size:1.15rem; margin-bottom:.35em;}
  .card p{color:var(--ink-2); font-size:.96rem; margin:0;}
  .card .mono{display:block; margin-bottom:12px;}

  /* who badges */
  .badge{
    display:inline-block; background:var(--mark); color:#fff; font-weight:700;
    font-size:.85rem; padding:5px 16px; border-radius:999px; margin-bottom:16px;
  }
  .who-card{
    background:var(--paper-2); border-radius:16px; padding:28px 26px;
    border:1px solid var(--rule); display:flex; flex-direction:column;
  }
  .who-card h3{font-size:1.2rem; margin-bottom:.35em;}
  .who-card p{color:var(--ink-2); font-size:.95rem; margin:0;}
  .pain{
    background:var(--mark-soft); border-radius:16px; padding:26px 30px;
    font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem;
    color:var(--mark-dim); margin-bottom:34px; line-height:1.5;
  }

  /* platform strengths */
  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  .strength{
    display:flex; gap:18px; align-items:flex-start;
    border-bottom:1px solid var(--rule); padding:22px 0;
  }
  .strength:nth-child(odd){border-right:1px solid var(--rule); padding-right:22px;}
  .strength:nth-child(even){padding-left:22px;}
  .strength .num-mark{
    font-family:'JetBrains Mono',monospace; color:var(--mark); font-size:.85rem;
    flex-shrink:0; padding-top:4px;
  }
  .strength h3{font-size:1.12rem; font-weight:600; margin-bottom:.3em; letter-spacing:-.01em;}
  .strength p{color:var(--ink-2); font-size:.93rem; margin:0;}
  .strength-callout{
    margin-top:26px; background:var(--ink); color:#fff; border-radius:16px;
    padding:22px 28px; font-family:'Fraunces',serif; font-size:1.1rem; font-style:italic;
  }
  .strength-callout b{font-style:normal; color:var(--mark-soft);}

  /* platform intro — мини-блок про то, на чём проходит обучение */
  .platform-intro{
    display:flex; align-items:flex-start; gap:16px;
    background:var(--paper-2); border:1px solid var(--rule); border-radius:16px;
    padding:20px 24px; max-width:760px; margin:0 auto 30px;
  }
  .platform-intro-badge{
    flex-shrink:0; width:46px; height:46px; border-radius:12px;
    background:linear-gradient(180deg,#F0454F,#C8222E); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-size:1.2rem; font-weight:500;
  }
  .platform-intro p{margin:0; color:var(--ink-2); font-size:.94rem;}
  .platform-intro b{color:var(--ink);}

  /* timeline */
  .timeline{display:flex; gap:0; margin-top:10px; position:relative;}
  .tl-step{flex:1; text-align:left; padding:0 16px 0 0; position:relative;}
  .tl-step:not(:last-child)::after{
    content:""; position:absolute; top:17px; right:0; width:16px; height:1px;
    background:var(--rule-2);
  }
  .tl-dot{
    width:34px; height:34px; border-radius:50%; background:var(--ink);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-size:.78rem; margin-bottom:14px;
  }
  .tl-step h4{font-family:'Karla',sans-serif; font-weight:700; font-size:.98rem; margin:0 0 6px;}
  .tl-step p{font-size:.88rem; color:var(--ink-mute); margin:0;}

  /* if not selected */
  .offer{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:var(--paper-2); border-radius:16px; padding:28px 32px;
    border:1px solid var(--rule); flex-wrap:wrap;
  }
  .offer h3{font-size:1.15rem; margin-bottom:.3em;}
  .offer p{color:var(--ink-2); margin:0; max-width:520px; font-size:.95rem;}
  .offer-action{display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0;}
  .offer-action .alt-link{font-size:.82rem; text-align:center;}

  /* faq */
  details{border-bottom:1px solid var(--rule); padding:18px 0;}
  summary{
    cursor:pointer; font-family:'Fraunces',serif; font-size:1.08rem;
    list-style:none; display:flex; justify-content:space-between; align-items:center;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+"; color:var(--mark); font-family:'JetBrains Mono',monospace; font-size:1.2rem;}
  details[open] summary::after{content:"–";}
  details p{color:var(--ink-2); margin:14px 0 0; font-size:.96rem; max-width:680px;}
  /* выход на живого человека — часть сомневающихся не оставит заявку, но напишет */
  .faq-human{
    margin:26px 0 0; font-size:.94rem; color:var(--ink-mute);
  }
  .faq-human a{color:var(--mark-dim); text-decoration:underline; margin-left:6px;}

  /* final dark band + form */
  .final{
    position:relative; overflow:hidden; padding:80px 0; text-align:center;
    background:linear-gradient(135deg,#2E2C41 0%, #201f30 100%); color:#fff;
  }
  .final::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(235,51,63,.28), transparent 55%);
    pointer-events:none;
  }
  .final .wrap{position:relative; z-index:1;}
  .final h2{font-size:clamp(1.7rem,3.6vw,2.4rem); color:#fff; max-width:640px; margin:0 auto .3em;}
  .final p.sub{color:#C9CFD6; max-width:520px; margin:0 auto 30px; font-size:1rem;}
  .final .disclaimer{font-size:.78rem; color:#9298B0; max-width:560px; margin:26px auto 0;}

  .form-card{
    background:#fff; color:var(--ink); border-radius:20px; padding:36px;
    max-width:480px; margin:0 auto; text-align:left;
  }
  .form-card h3{font-size:1.2rem; margin-bottom:.2em;}
  .form-card > p{color:var(--ink-mute); font-size:.88rem; margin:0 0 22px;}
  .apply-buttons{display:flex; flex-direction:column; gap:12px;}
  .apply-buttons .btn{width:100%; text-align:center;}
  .form-card .btn-outline{border-color:var(--rule-2); color:var(--ink-2);}

  /* снятие рисков — ровно в момент принятия решения */
  .risk-list{
    list-style:none; margin:26px auto 0; padding:0; max-width:560px;
    display:flex; flex-direction:column; gap:8px; text-align:left;
  }
  .risk-list li{
    position:relative; padding-left:24px; font-size:.88rem; color:#C9CFD6; line-height:1.45;
  }
  .risk-list li::before{
    content:"✓"; position:absolute; left:0; top:0; color:var(--mark); font-weight:700;
  }

  /* ---------- запасная форма ----------
     Без JS это обычный блок в конце страницы (ссылки ведут на него якорем).
     С JS — модальное окно: не надо мотать страницу до низа. */
  .modal{
    max-width:480px; margin:0 auto 40px; background:#fff; color:var(--ink);
    border-radius:20px; padding:32px; border:1px solid var(--rule); position:relative;
  }
  .modal-backdrop{display:none;}
  .modal-close{display:none;}
  .modal h3{font-size:1.2rem; margin-bottom:.25em;}
  .modal-sub{color:var(--ink-mute); font-size:.88rem; margin:0 0 20px;}

  .has-js .modal{
    display:none; position:fixed; inset:0; z-index:100; max-width:none;
    margin:0; padding:20px; background:none; border:none; border-radius:0;
    align-items:center; justify-content:center;
  }
  .has-js .modal.open{display:flex;}
  .has-js .modal-backdrop{
    display:block; position:absolute; inset:0;
    background:rgba(32,31,48,.55); backdrop-filter:blur(3px);
  }
  .has-js .modal-card{
    position:relative; z-index:1; background:#fff; border-radius:20px;
    padding:32px; width:100%; max-width:420px; text-align:left;
    max-height:calc(100vh - 40px); overflow-y:auto;
    box-shadow:0 24px 60px rgba(32,31,48,.3);
  }
  .has-js .modal-close{
    display:block; position:absolute; top:12px; right:14px;
    background:none; border:none; font-size:1.6rem; line-height:1;
    color:var(--ink-mute); cursor:pointer; padding:4px 8px;
  }
  .has-js .modal-close:hover{color:var(--ink);}

  .field{margin-bottom:16px;}
  .field label{display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; color:var(--ink-2);}
  .field input{
    width:100%; border:1.5px solid var(--rule-2); border-radius:12px; padding:11px 14px;
    font-family:'Karla',sans-serif; font-size:.95rem; color:var(--ink); background:var(--paper-2);
  }
  .field input:focus{outline:2px solid var(--mark); outline-offset:1px; background:#fff;}
  .form-consent{font-size:.74rem; color:var(--ink-mute); text-align:center; margin:12px 0 0; line-height:1.45;}
  .form-consent a{color:var(--ink-mute); text-decoration:underline;}
  .form-notice{border-radius:12px; padding:12px 16px; font-size:.85rem; margin:0 0 16px;}
  .form-notice.success{background:#E7F5EA; color:#2C6B3A;}
  .form-notice.error{background:var(--mark-soft); color:var(--mark-dim);}
  /* ловушка для ботов */
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  /* липкая панель на мобильных */
  .sticky-cta{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    border-top:1px solid var(--rule);
  }
  .sticky-cta[hidden]{display:none !important;}
  .sticky-cta .btn{width:100%; padding:13px 20px;}
  .sticky-cta span{
    font-size:.72rem; color:var(--ink-mute); text-align:center;
    font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  }

  footer{padding:32px 28px; text-align:center;}
  footer .mono{margin-bottom:6px;}
  footer a{text-decoration:none; color:var(--ink-mute); font-size:.85rem;}

  /* ---------- адаптив ----------
     Пять брейкпоинтов вместо двух: между 620 и 960 живут планшеты и половина
     Android-парка, и именно там трёхколоночные сетки формально помещаются,
     а фактически превращаются в нечитаемые полоски. */

  @media (max-width:1120px){
    section{padding:56px 0;}
    .final{padding:64px 0;}
  }

  @media (max-width:960px){
    body{font-size:16px;}
    .grid3{grid-template-columns:repeat(2,1fr);}
    .grid2{grid-template-columns:1fr;}
    .instructor{grid-template-columns:220px 1fr; gap:28px;}
    .strength:nth-child(odd){border-right:none; padding-right:0;}
    .strength:nth-child(even){padding-left:0;}
    .timeline{flex-wrap:wrap; gap:22px 0;}
    .tl-step{flex:0 0 50%; padding-right:16px;}
    .tl-step:not(:last-child)::after{display:none;}
  }

  @media (max-width:860px){
    .sticky-cta{display:flex;}
    body{padding-bottom:96px;}
  }

  @media (max-width:760px){
    .platform-intro{flex-direction:column; align-items:center; text-align:center;}
    .instructor{grid-template-columns:1fr; text-align:center;}
    .instructor-photo{max-width:280px; margin:0 auto;}
    .offer{flex-direction:column; align-items:flex-start;}
    .offer-action{width:100%; align-items:stretch;}
    .offer .btn{width:100%;}
    .has-js .modal-card{padding:26px;}
    .hnav{gap:14px;}
    .form-card{padding:26px;}
  }

  @media (max-width:620px){
    .grid3{grid-template-columns:1fr;}
    .timeline{flex-direction:column; gap:20px;}
    .tl-step{flex:1 1 auto; padding-right:0;}
    .hero{padding:48px 0 36px;}
    .hero p.sub{font-size:1rem;}
    .actions{flex-direction:column; align-items:stretch; gap:12px;}
    .actions .btn{width:100%;}
    .pain{padding:22px; font-size:1.05rem;}
    .strength-callout{padding:20px 22px; font-size:1rem;}
    /* на узком экране ссылки встают в столбик, разделитель повис бы в конце строки */
    .alt-row{display:flex; flex-direction:column; gap:8px; align-items:center;}
    .alt-sep{display:none;}
    /* полосы фактов флексом рвутся на неровные строки — на телефоне колонка */
    .trust-list{flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px;}
    /* блок цифр: три колонки по 100px не дают уместить подпись — переводим в список */
    .instructor-facts{
      display:flex; flex-direction:column; gap:10px; text-align:left;
    }
    .instructor-fact{
      flex-direction:row; align-items:baseline; gap:12px;
    }
    .instructor-fact b{flex:0 0 108px; font-size:1.1rem;}
    .instructor-fact span{flex:1;}
    .final{padding:56px 0;}
    .risk-list{margin-top:22px;}
  }

  @media (max-width:430px){
    /* кнопку в шапке заменяет липкая панель */
    .btn-head{display:none;}
    .wrap{padding:0 18px;}
    header{padding:18px;}
    .form-card{padding:22px;}
  }

  @media (max-width:360px){
    .hero h1{font-size:1.85rem;}
    .btn{padding:13px 20px; font-size:.92rem;}
    .instructor-fact b{flex:0 0 92px;}
  }