/* Yelumio — направление «Обучение ИИ» (/obuchenie/). Поверх base.css + landing.css: берёт .hero, .niche, .steps, .faq, .order, .agent-card.
   Только переменные темы: в проде (Dawn) акцент — коралл, в старой теме — солнце. */

/* HERO */
.ob-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ob-crumbs a{color:inherit;text-decoration:none}
.ob-crumbs a:hover{color:var(--ink)}
.ob-crumbs em{font-style:normal;color:var(--ink-2)}
.ob-hero h1 .ob-h1-sub{font-size:.46em;line-height:1.2;margin-top:.55em;animation-delay:.08s}
.ob-hero h1 mark{background:none;color:var(--coral,var(--sun-deep));padding:0}
.ob-note{margin-top:18px;font-size:14px;color:var(--muted);animation:rise 1s .4s var(--ease) both}
.ob-card{justify-self:end;width:100%;max-width:460px}

/* HOW */
.ob-why{grid-template-columns:repeat(3,1fr)}
.ob-why .niche{min-height:240px}
.ob-why .niche h3{margin-top:auto}

/* PROGRAM */
.ob-prog{display:grid;gap:12px}
.ob-mod{border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line-2);transition:border-color .3s}
.ob-mod[open]{border-color:var(--line)}
.ob-mod summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,32px);align-items:center;padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,36px)}
.ob-mod summary::-webkit-details-marker{display:none}
.ob-n{font:720 clamp(28px,3.4vw,44px)/1 var(--display);font-stretch:125%;color:var(--coral,var(--sun-deep));min-width:1.6em}
.ob-mt{display:flex;flex-direction:column;gap:8px;min-width:0}
.ob-k{font:650 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ob-mod h3{font-size:clamp(18px,2vw,26px);line-height:1.1;overflow-wrap:anywhere}
.ob-sub{font-size:15px;color:var(--muted)}
.ob-plus{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none;transition:transform .3s var(--ease),background .3s,border-color .3s}
.ob-plus::before,.ob-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.ob-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ob-mod[open] .ob-plus{transform:rotate(45deg);background:var(--coral,var(--sun));border-color:var(--coral,var(--sun));color:#12142E}
.ob-mod summary:hover .ob-plus{border-color:var(--ink)}
.ob-body{display:grid;gap:18px;padding:0 clamp(20px,3vw,36px) clamp(24px,3vw,34px) calc(clamp(20px,3vw,36px) + clamp(28px,3.4vw,44px) * 1.6 + clamp(16px,3vw,32px))}
/* плавное раскрытие: высота — где браузер умеет (::details-content + interpolate-size), проявление — везде */
.ob-prog{interpolate-size:allow-keywords}
.ob-mod::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.ob-mod[open]::details-content{height:auto}
.ob-mod[open] .ob-body{animation:ob-in .45s var(--ease) both}
@keyframes ob-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ob-mod::details-content{transition:none}.ob-mod[open] .ob-body{animation:none}}
.ob-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--ink-2);max-width:760px}
.ob-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ob-tags li{font:650 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;border-radius:3px;border:1px solid var(--line);color:var(--ink-2)}
.ob-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.ob-pts li{position:relative;padding-left:22px;font-size:15px;line-height:1.5}
.ob-pts li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--coral,var(--sun-deep))}
.ob-res{margin:0;padding:16px 18px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line-2);font-weight:600;color:var(--ink)}
.ob-res span{display:block;margin-bottom:6px;font:650 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* OUTCOMES */
.ob-gets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ob-gets li{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line-2)}
.ob-gets b{font:720 15px/1.25 var(--display);font-stretch:125%;text-transform:uppercase;letter-spacing:.01em;word-spacing:.16em}
.ob-gets b::before{content:"";display:block;width:24px;height:2px;background:var(--coral,var(--sun));margin-bottom:16px}
.ob-gets span{font-size:15px;line-height:1.55;color:var(--muted)}

/* START */
.ob-steps{grid-template-columns:repeat(4,1fr)}

/* FORMATS */
.ob-fmts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ob-fmt{display:flex;flex-direction:column;gap:12px;padding:26px 22px 28px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line-2)}
.ob-fmt h3{font-size:clamp(17px,1.5vw,20px);line-height:1.15}
.ob-fmt p{font-size:15px;line-height:1.5;color:var(--muted)}
.ob-fmt-tag{align-self:flex-start;font:650 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:3px;background:var(--paper-2);color:var(--ink-2)}
.ob-fmt-on{border-color:var(--coral,var(--sun))}
.ob-fmt-on .ob-fmt-tag{background:var(--coral,var(--sun));color:#12142E}

/* CTA */
.ob-cta .hero-cta{margin-top:32px;animation:none}
.ob-cta .contacts{margin-top:0}

@media (max-width:1100px){
  .ob-gets{grid-template-columns:1fr 1fr}
  .ob-fmts,.ob-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .ob-card{justify-self:start}
  .ob-why{grid-template-columns:1fr}
  .ob-why .niche{min-height:0}
  .ob-why .niche h3{margin-top:10px}
  .ob-body{padding-left:clamp(20px,3vw,36px)}
  .ob-pts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ob-hero h1 .ob-h1-sub{font-size:.62em}
  .ob-mod summary{grid-template-columns:1fr auto;gap:12px 16px}
  .ob-n{grid-column:1/-1;font-size:26px}
  .ob-mt{grid-column:1}
  .ob-gets,.ob-fmts,.ob-steps{grid-template-columns:1fr}
  .ob-gets li,.ob-fmt{padding:20px 18px 22px}
  .ob-cta .hero-cta .btn{flex:1 1 100%}
}