/* Neural Logic — видео-презентации: токены взяты с neurallogic.ru */
:root{
  --bg-dark:#0C241E;
  --bg-mid:#1A4137;
  --accent:#C6D936;
  --bg-light:#F8F5F2;
  --text-dark:#051B05;
  --text-muted:#595B62;
  --rule-light:rgba(5,27,5,.1);
  --rule-dark:rgba(255,255,255,.12);

  --font-head:'DM Sans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --maxw:1180px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--bg-light);
  line-height:1.5;
}

h1,h2,h3{ font-family:var(--font-head); font-weight:700; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(32px,5vw,52px); line-height:1.1; }
h2{ font-size:clamp(24px,3.2vw,32px); }
h3{ font-size:16px; margin-bottom:.25em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--text-dark);
  padding:12px 20px; z-index:100; font-family:var(--font-head); font-weight:700;
}
.skip-link:focus{ left:16px; top:16px; }

a{ color:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-head); font-weight:700; font-size:14px;
  text-decoration:none; text-transform:uppercase; letter-spacing:.02em;
  padding:13px 26px; border-radius:5px; border:2px solid transparent;
  white-space:nowrap;
}
.btn-accent{ background:var(--accent); color:var(--text-dark); }
.btn-accent:hover{ background:#b9cb2f; }
.btn-outline{ border-color:currentColor; }
.btn-lg{ padding:16px 32px; font-size:15px; }

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:#FFFFFF; border-bottom:1px solid var(--rule-light);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.logo-link{ display:flex; align-items:center; }
.logo-img{ height:32px; width:auto; }

/* ---- sections ---- */
.section{ padding:72px 0; }
.section-light{ background:var(--bg-light); color:var(--text-dark); }
.section-dark{ background:var(--bg-dark); color:#F8F5F2; }
.section-lede{ max-width:620px; color:var(--text-muted); font-size:17px; }
.on-dark{ color:#F8F5F2; }
.on-dark-muted{ color:#F8F5F2; opacity:.78; }

/* ---- hero ---- */
.hero{ background:var(--bg-dark); color:#F8F5F2; padding:56px 0 72px; }
.hero-inner{
  display:flex; align-items:center; gap:48px; flex-wrap:wrap;
}
.hero-copy{ flex:1 1 440px; min-width:0; }
.hero-visual{ flex:1 1 440px; min-width:0; border-radius:12px; overflow:hidden; }
.hero-image{ width:100%; height:auto; }
.pill{
  display:inline-block; background:rgba(198,217,54,.14); color:var(--accent);
  font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 16px; border-radius:20px; margin-bottom:20px;
}
.hero-sub{ font-size:18px; opacity:.86; max-width:480px; }
.cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.cta-note{ font-size:14px; opacity:.68; }
.hero .cta-note--lg{ font-size:18px; opacity:.86; max-width:480px; }
.hero-caption{ margin:8px 0 0; font-size:13px; color:#F8F5F2; opacity:.7; }
.hero-visual{ overflow:visible; }
.hero-visual .hero-image{ border-radius:12px; display:block; }

/* ---- проблема ---- */
.problem-list{ list-style:none; max-width:640px; display:flex; flex-direction:column; gap:16px; font-size:17px; }
.problem-list li{ padding-left:28px; position:relative; }
.problem-list li::before{
  content:"—"; position:absolute; left:0; color:var(--text-muted);
}

/* ---- было/стало ---- */
.compare-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-top:32px;
}
.compare-card h3{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.compare-tag{ font-family:var(--font-body); font-weight:400; font-size:13px; opacity:.6; text-transform:none; }
.compare-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.compare-pair figure{ margin:0; }
.compare-pair img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.compare-pair figcaption{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-top:6px;
}
.soon{
  font-size:10px; background:rgba(198,217,54,.18); color:var(--accent);
  padding:2px 8px; border-radius:10px; text-transform:none; letter-spacing:0; margin-left:4px;
}

/* ---- инсайт / выгоды ---- */
.insight{
  margin:0 0 8px; font-family:var(--font-head); font-weight:700; font-size:clamp(22px,3vw,28px);
  color:var(--bg-mid); font-style:italic; max-width:680px;
}
.insight-sub{ color:var(--text-muted); max-width:600px; margin-bottom:32px; }
.benefits-list{ list-style:none; display:flex; flex-direction:column; gap:14px; max-width:640px; font-size:17px; }
.benefits-list li{ padding-left:28px; position:relative; }
.benefits-list li::before{ content:"✓"; position:absolute; left:0; color:var(--bg-mid); font-weight:700; }

/* ---- процесс ---- */
.process-list{ list-style:none; display:flex; flex-direction:column; gap:32px; max-width:720px; }
.process-list li{ display:flex; gap:20px; align-items:flex-start; }
.step-num{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:rgba(198,217,54,.14); color:var(--accent);
  font-family:var(--font-head); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}

/* ---- тарифы ---- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin:32px 0; }
.price-card{
  background:#FFFFFF; border:1px solid var(--rule-light); border-radius:10px; padding:28px;
  display:flex; flex-direction:column; gap:8px;
}
.price-name{ font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.price-value{ font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--bg-mid); }
.price-dur{ font-size:13px; color:var(--text-muted); }
.price-card hr{ border:none; border-top:1px solid var(--rule-light); margin:6px 0; width:100%; }
.price-card p{ font-size:13.5px; color:var(--text-muted); margin:0; }

.price-card p + p{ margin-top:6px; }
.price-card .price-label{ font-family:var(--font-head); font-weight:700; color:var(--text-dark); margin-top:8px; }
.price-list{ list-style:none; display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--text-muted); }
.price-list li{ padding-left:18px; position:relative; }
.price-list li::before{ content:"✓"; position:absolute; left:0; color:var(--bg-mid); font-weight:700; }
.price-list--no li::before{ content:"—"; color:var(--text-muted); }

.diff-box, .report-box, .all-tariffs, .first-five{ margin-top:20px; border-radius:10px; padding:24px 28px; }
.diff-box{ background:#fff; border:1px solid var(--rule-light); }
.diff-box h3, .report-box h3{ font-size:18px; }
.diff-box ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.diff-box li{ padding-left:18px; position:relative; }
.diff-box li::before{ content:"•"; position:absolute; left:4px; color:var(--bg-mid); }
.report-box{ background:var(--bg-dark); color:#F8F5F2; }
.report-box p{ max-width:760px; opacity:.86; margin:0 0 .8em; }
.report-box p:last-child{ margin:0; opacity:1; }
.all-tariffs{ padding:4px 0; }
.all-tariffs p{ margin:0 0 6px; font-size:15px; }
.first-five{ margin-top:16px; background:rgba(198,217,54,.16); border:1px solid rgba(26,65,55,.25); display:flex; flex-direction:column; gap:4px; }
.first-five strong{ font-family:var(--font-head); font-size:18px; }
.first-five span{ font-size:14px; color:var(--text-dark); }

/* ---- квиз ---- */
.quiz{ background:#fff; border:1px solid var(--rule-light); border-radius:10px; padding:24px 28px; margin:24px 0; display:flex; flex-direction:column; gap:14px; }
.quiz-title{ font-size:20px; margin:0; }
.quiz fieldset{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.quiz legend{ font-family:var(--font-head); font-weight:700; font-size:15px; margin-bottom:8px; padding:0; width:100%; }
.quiz label{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border:1px solid var(--rule-light); border-radius:999px; font-size:14px; cursor:pointer; background:var(--bg-light); }
.quiz label:has(input:checked){ border-color:var(--bg-mid); background:rgba(198,217,54,.25); font-weight:600; }
.quiz input{ accent-color:var(--bg-mid); }
.quiz input:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.quiz-res{ background:var(--bg-dark); color:#F8F5F2; border-radius:10px; padding:20px 24px; }
.quiz-res[hidden]{ display:none; }
.quiz-res .btn{ white-space:normal; text-align:center; }
.quiz-res h4{ font-size:22px; margin:0 0 4px; color:var(--accent); }
.quiz-meta{ font-size:13px; opacity:.75; margin:0 0 8px; }
.quiz-why{ margin:0 0 14px; }
.quiz-small{ font-size:12px; opacity:.7; margin:10px 0 0; }

.compare-meta{ margin:0 0 4px; font-size:13px; opacity:.7; }

.pilot-banner{
  background:var(--bg-mid); border-radius:10px; padding:26px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pilot-banner div{ display:flex; flex-direction:column; gap:4px; color:#F8F5F2; }
.pilot-banner span{ font-size:13px; opacity:.75; }

/* ---- faq ---- */
.faq{ max-width:720px; display:flex; flex-direction:column; gap:10px; }
.faq details{
  border:1px solid var(--rule-light); border-radius:8px; padding:16px 20px; background:#fff;
}
.faq summary{
  cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:16px;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--text-muted); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:12px 0 0; color:var(--text-muted); }

/* ---- финальный cta ---- */
.final-cta{ text-align:left; }

/* ---- footer ---- */
.site-footer{
  background:var(--bg-dark); color:#F8F5F2; opacity:.7; font-size:13px;
  padding:24px 0;
}
.site-footer .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-footer a{ text-decoration:none; }

/* ---- touch targets ---- */
.btn, summary, a{ min-height:24px; }

/* ---- responsive ---- */
@media (max-width: 900px){
  .compare-grid{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .section{ padding:48px 0; }
  .header-inner{ padding:14px 18px; }
  .hero{ padding:40px 0 48px; }
  .hero-inner{ gap:32px; }
  .cta-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  .pilot-banner{ flex-direction:column; align-items:flex-start; }
  .compare-pair{ grid-template-columns:1fr 1fr; }
}

/* Видео-версия SkillFlow в карточке «Было / Стало» */
.compare-card--video .compare-pair img,
.compare-card--video .compare-pair video{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; display:block; }
.video-thumb{ position:relative; display:block; width:100%; padding:0; border:0; background:none; border-radius:8px; overflow:hidden; cursor:pointer; }
.video-thumb__badge{
  position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; font:500 12px/1 var(--font-body); color:#F8F5F2; letter-spacing:.01em;
  background:rgba(12,36,30,.76); border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s, color .2s;
}
.video-thumb:hover .video-thumb__badge{ background:var(--accent); color:var(--text-dark); }
.case-dialog{
  width:min(960px, 94vw); padding:0; border:0; border-radius:12px; overflow:hidden;
  background:var(--bg-dark); box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.case-dialog::backdrop{ background:rgba(5,27,5,.72); }
.case-dialog iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }
.case-dialog__close{
  position:absolute; top:8px; right:8px; z-index:2; width:40px; height:40px; border:0; border-radius:50%;
  font:400 26px/1 var(--font-body); color:#F8F5F2; background:rgba(12,36,30,.7); cursor:pointer;
}
.case-dialog__close:hover{ background:var(--accent); color:var(--text-dark); }
.compare-card--video .compare-pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.compare-card--video figure{ min-width:0; }
.video-thumb, .case-video{ min-width:0; max-width:100%; }
img.case-video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* ---- cookie bar ---- */
.cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:720px; margin:0 auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--bg-dark); color:#fff; padding:16px 20px; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.35); font-size:14px; line-height:1.45; }
.cookie-bar[hidden]{ display:none; }
.cookie-bar p{ margin:0; flex:1 1 280px; }
.cookie-bar a{ color:var(--accent); text-decoration:underline; }
.cookie-bar__btns{ display:flex; gap:12px; align-items:center; }
.cookie-bar__no{ background:none; border:0; color:#fff; opacity:.75; text-decoration:underline; cursor:pointer; font:inherit; padding:8px; }

.hero-player{ position:relative; width:100%; aspect-ratio:1280/696; border-radius:12px; overflow:hidden; background:#000; }
.hero-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.video-thumb .case-preview{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }