/* ============================================================
   ДЛЯ СЕБЯ — хаб-дверь для личной аудитории (/dlya-sebya.html)
   База — язык лендингов направлений, плюс блоки продуктов, тетрадей
   и «Компас — два продукта под возраст».
   ============================================================ */
:root{--bg:#f4f3ec;--surface:#fff;--ink:#1c1a1a;--ink2:#555349;--ink3:#8f8c7e;
--line:#e4e2d5;--line-soft:#eeecdf;--pine:#0e4a38;--pine-2:#13624b;--pine-soft:#e2efe7;
--emerald:#06d6a0;--emerald-deep:#0aa87e;--lime:#e9ff96;
--r:20px;--r-sm:14px;--shadow:0 1px 2px rgba(28,26,26,.04),0 16px 40px -18px rgba(28,26,26,.16);
--ease:cubic-bezier(.22,.8,.28,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;
background-image:radial-gradient(820px 440px at 12% -120px,rgba(233,255,150,.28),transparent 62%),
                 radial-gradient(700px 420px at 92% 18%,rgba(6,214,160,.12),transparent 60%);
background-attachment:fixed}
a{color:var(--pine);text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- шапка ---------- */
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:10px;padding:16px 0;border-bottom:1px solid var(--line)}
.logo{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;color:var(--ink)}
.logo i{color:var(--emerald-deep);font-style:normal}
.topbar .btn{margin-left:auto}
.btn{display:inline-block;padding:13px 22px;border-radius:14px;font-weight:600;font-size:15px;transition:transform .15s,box-shadow .15s,border-color .15s}
.btn-brand{background:var(--pine);color:#fff!important}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(14,74,56,.5)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)!important;background:var(--surface)}
.btn-ghost:hover{border-color:var(--pine)}
.btn:focus-visible{outline:2px solid var(--emerald-deep);outline-offset:2px}

/* ---------- герой ---------- */
.hero{padding:52px 0 26px}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);background:var(--lime);border-radius:99px;padding:8px 15px;margin-bottom:20px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pine)}
h1{font-family:'Unbounded',sans-serif;font-size:clamp(26px,4.4vw,42px);line-height:1.16;margin-bottom:18px;max-width:780px}
h1 .hl{background:linear-gradient(0deg,var(--lime),var(--lime)) 0 84%/100% .34em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:17px;color:var(--ink2);max-width:720px;margin-bottom:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;color:var(--pine);background:var(--pine-soft);border-radius:99px;padding:6px 12px;font-weight:600}

section{padding:28px 0}
h2{font-family:'Unbounded',sans-serif;font-size:clamp(20px,2.6vw,25px);line-height:1.25;margin-bottom:14px}
h3{font-family:'Unbounded',sans-serif;font-size:17px;line-height:1.3;margin-bottom:10px}
.sec-lead{font-size:15px;color:var(--ink2);max-width:760px;margin:-6px 0 20px}

/* ---------- продукты ---------- */
.product{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}
.product::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--pine),var(--emerald))}
.product-kompas::before{background:linear-gradient(90deg,#163c64,#ff7a1a)}
.product-art{display:flex;flex-direction:column;gap:10px;align-items:center}
.product-art img{width:100%;max-width:200px;height:auto;border-radius:12px;box-shadow:0 12px 30px -14px rgba(28,26,26,.4);display:block}
.art-cap{font-size:11.5px;color:var(--ink3);text-align:center;line-height:1.35}
.art-pair{display:flex;gap:8px;width:100%;justify-content:center}
.art-pair img{max-width:calc(50% - 4px)!important;flex:1 1 0;min-width:0}
.code{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-deep);display:block;margin-bottom:6px}
.product-kompas .code{color:#c2601a}
.product-lead{font-size:14.5px;color:var(--ink2);margin-bottom:14px}
.facts{list-style:none;display:grid;gap:7px;margin-bottom:14px}
.facts li{position:relative;padding-left:20px;font-size:14px;color:var(--ink2);line-height:1.5}
.facts li::before{content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--pine);transform:rotate(45deg)}
.facts b{color:var(--ink)}
.gift{display:flex;gap:12px;align-items:flex-start;background:var(--pine-soft);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:16px}
.gift-ico{flex:none;font-size:17px;line-height:1.2}
.gift b{display:block;font-size:13.5px;color:var(--pine);margin-bottom:2px}
.gift p{font-size:13px;color:var(--ink2);line-height:1.5}
.buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed var(--line)}
.price{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:700;color:var(--pine)}
.price small{display:block;font-family:'Onest',sans-serif;font-size:12px;font-weight:600;color:var(--ink3);margin-top:2px}
.buy-links{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.mini{font-size:13px;font-weight:700;color:var(--pine);border-bottom:1.5px solid var(--pine-soft);padding-bottom:1px}
.mini:hover{border-color:var(--pine)}

/* ---------- «Компас» — два продукта под возраст ---------- */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ed{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.ed-art{display:flex;gap:14px;align-items:flex-start}
.ed-art img{width:96px;height:auto;border-radius:10px;box-shadow:0 10px 24px -12px rgba(28,26,26,.42);flex:none}
.ed-age{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c2601a;display:block;margin-bottom:4px}
.ed h3{font-size:16px;margin-bottom:6px}
.ed p{font-size:13.5px;color:var(--ink2)}
.ed ul{list-style:none;display:grid;gap:7px}
.ed li{position:relative;padding-left:18px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.ed li::before{content:"→";position:absolute;left:0;top:0;color:var(--emerald-deep);font-size:12px}
.ed-plate{display:block;background:var(--pine-soft);border:1px solid transparent;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--pine);transition:border-color .15s,background .15s}
.ed-plate:hover{border-color:var(--pine);background:#d9e9df}
.ed-plate i{display:block;font-style:normal;font-weight:500;font-size:12px;color:var(--ink2);margin-top:3px}
.editions-note{margin-top:14px;font-size:13.5px;color:var(--ink2);background:var(--lime);border-radius:var(--r-sm);padding:14px 16px}
.editions-note b{color:var(--pine)}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.step{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;box-shadow:var(--shadow)}
.step-num{flex:none;width:34px;height:34px;border-radius:11px;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px}
.step b{display:block;font-size:14.5px;margin-bottom:5px}
.step p{font-size:13px;color:var(--ink2)}

/* ---------- FAQ ---------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 19px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.faq summary::before{content:"+";color:var(--pine);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin-top:10px;font-size:14px;color:var(--ink2);line-height:1.6}

/* ---------- переход к другой аудитории ---------- */
.cross{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r);padding:20px 22px;margin:6px 0 4px}
.cross b{font-family:'Unbounded',sans-serif;font-size:15.5px;display:block;margin-bottom:4px}
.cross p{font-size:13.5px;color:var(--ink2)}
.cross-btn{flex:none}

/* ---------- подпись методолога и подвал ---------- */
.expert{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin:24px 0}
.expert img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}
.expert p{font-size:14px;color:var(--ink2);margin:0}
footer{border-top:1px solid var(--line);margin-top:30px;padding:26px 0 44px;font-size:13.5px;color:var(--ink2)}
footer .cols{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer .note{font-size:12px;color:var(--ink3);margin-top:14px}

@media (max-width:760px){
  .product{grid-template-columns:1fr;gap:18px}
  .product-art{flex-direction:row;align-items:flex-start;gap:14px;flex-wrap:wrap}
  .product-art img{max-width:130px}
  .art-cap{text-align:left}
  .editions{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding:34px 0 20px}
  .cta{flex-direction:column}
  .cta .btn{flex:1;text-align:center}
  .topbar .btn{margin-left:0;width:100%;text-align:center}
  .buy-links{margin-left:0;width:100%}
  .cross-btn{width:100%;text-align:center}
}

/* Кнопка ролика: тот же переливающийся вид, что на хабе «Компаниям».
   Стили дублируются, потому что у каждого хаба свой файл стилей; менять вид —
   менять в обоих местах (dlya-kompanii.css и здесь). */
.dir-video{
  position:absolute;top:14px;right:16px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border:0;border-radius:99px;cursor:pointer;
  font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.01em;color:#fff;
  background:linear-gradient(100deg,#0e4a38 0%,#13624b 34%,#0aa87e 62%,#0e4a38 100%);
  background-size:230% 100%;background-position:0% 50%;
  box-shadow:0 8px 20px -12px rgba(14,74,56,.7);
  overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease;
}
.dir-video::after{
  content:"";position:absolute;inset:-60% -40%;
  background:linear-gradient(105deg,transparent 36%,rgba(233,255,150,.85) 50%,transparent 64%);
  transform:translateX(-130%);pointer-events:none;
}
.dir-video-ico{flex:none;margin-left:1px}
.dir-video:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(14,74,56,.85)}
.dir-video:focus-visible{outline:2px solid #0aa87e;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .dir-video{animation:dir-video-sheen 6s cubic-bezier(.45,0,.25,1) infinite}
  .dir-video::after{animation:dir-video-glint 6s cubic-bezier(.45,0,.25,1) infinite}
}
@keyframes dir-video-sheen{
  0%,8%{background-position:0% 50%}
  46%,100%{background-position:100% 50%}
}
@keyframes dir-video-glint{
  0%,10%{transform:translateX(-130%)}
  34%,100%{transform:translateX(130%)}
}

/* ---------- плеер ролика: создаётся по клику; до него на странице только кнопка ----------
   Тот же блок, что в dlya-kompanii.css. Без него модальное окно на этом хабе
   не позиционируется и открывается «непонятно где»: position:fixed и центрирование
   живут именно здесь. Менять вид плеера — менять в обоих файлах. */
.vid-modal{position:fixed;inset:0;z-index:200;display:none}
.vid-modal.on{display:block}
.vid-backdrop{position:absolute;inset:0;background:rgba(12,20,16,.78)}
.vid-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1080px,92vw);background:#0e1412;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.vid-box video{display:block;width:100%;height:auto;background:#000}
.vid-x{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.9);color:#16321f;font-size:17px;line-height:1}
.vid-x:hover{background:#fff}
.vid-x:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
@media (max-width:760px){
  /* Телефон: плашка одноколоночная, и кнопка в правом верхнем углу карточки
     оказывалась ровно над содержимым — на всех ширинах 320–760 она накрывала
     обложку тетради «КОМПАС·КУРС» (≈2181 px²), а в окне 398–520 ещё и подпись
     «Тетрадь «ГРАНИ» — в подарок» (≈118×15). Держать её «поверх плашки», как на
     десктопе, здесь нечего: свободного места под ней нет вообще, поэтому на
     телефоне кнопка встаёт в поток текстовой колонки — сразу под описанием
     продукта, перед списком фактов. Накрывать её больше нечем. На десктопе
     (>760px) правило не действует: там кнопка остаётся в углу карточки. */
  .dir-video{position:static;margin:0 0 14px;padding:6px 11px 6px 9px;font-size:11.5px}
}
@media (max-width:640px){
  .vid-box{width:94vw}
}
@media print{
  .dir-video,.vid-modal{display:none!important}
}