/* ============================================================
   Shankara Brand System 01 — Case pages v3 (light editorial)
   Референс: FLUXLAB-борды. Белый объясняет, кобальт — акцент.
   ============================================================ */

:root{
  --paper:#F6F7FA;
  --white:#FFFFFF;
  --lake:#07172F;
  --cobalt:#365CFF;
  --cobalt-deep:#2847DB;
  --ink:#07152F;
  --border:#D9DDE7;
  --border-soft:#E6E9F0;
  --muted:#858DA0;

  --font:'Inter',-apple-system,system-ui,sans-serif;

  --display-xl:clamp(58px,7.1vw,112px);
  --display-l:clamp(42px,5.2vw,82px);
  --heading:clamp(26px,2.7vw,42px);
  --num:clamp(30px,3.4vw,54px);
  --sub:clamp(18px,1.6vw,22px);
  --micro:11px;

  --tr-display:-0.055em;
  --tr-body:-0.018em;
  --tr-micro:0.04em;

  --r-pill:999px;

  --ease:cubic-bezier(.22,.8,.22,1);
  --t-ui:250ms;
  --t-reveal:800ms;

  --gutter:clamp(20px,4.4vw,64px);
  --section-y:clamp(64px,8vw,110px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--cobalt);color:#fff}

.wrap{width:min(100% - 2*var(--gutter),1360px);margin-inline:auto}

section{padding:var(--section-y) 0;border-bottom:1px solid var(--border-soft)}

/* ---------- типографика ---------- */
h1,h2,h3,h4{font-weight:400;letter-spacing:var(--tr-display);line-height:1.04;text-wrap:balance}
h1{font-size:var(--display-l);font-weight:300}
h2{font-size:var(--heading)}
h3{font-size:var(--sub);letter-spacing:var(--tr-body);line-height:1.3}
p{text-wrap:pretty}
.muted{color:var(--muted)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:300;color:var(--muted);line-height:1.55}
.body-l{font-size:1.02rem;line-height:1.6;max-width:62ch}

.micro-label{
  display:block;
  font-size:var(--micro);font-weight:600;
  letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--muted);
}
.micro-label--cobalt{color:var(--cobalt)}

.mt-2{margin-top:.5rem}.mt-3{margin-top:.85rem}.mt-4{margin-top:1.1rem}
.mt-6{margin-top:1.6rem}.mt-8{margin-top:2.2rem}.mt-10{margin-top:3rem}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  height:48px;padding:0 26px;border-radius:var(--r-pill);
  font-size:.95rem;font-weight:500;letter-spacing:var(--tr-body);
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  transition:background var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt);transform:translateY(-2px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(54,92,255,.35)}
.btn .arr{color:inherit}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn--ghost:hover{background:transparent;color:var(--cobalt);border-color:var(--cobalt);transform:none}

/* ---------- навигация ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--white) 90%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:25px;width:auto;display:block}
.nav__actions{display:flex;align-items:center;gap:.7rem}
@media(max-width:700px){
  .nav__actions .btn--nav-cta{display:none}
  .brand img{height:21px}
}

/* ---------- логотип (как на главной) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand-symbol{position:relative;display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:15px 10px;column-gap:4px;row-gap:5px;width:20px;height:30px;flex:0 0 20px;transform:scale(.9);transform-origin:left center}
.brand-symbol::after{content:"";position:absolute;left:-2px;right:-2px;top:17px;height:1px;background:currentColor;opacity:.72}
.brand-symbol i{display:block;background:currentColor}
.brand-symbol i:nth-child(n+4){opacity:.28}
.brand-wordmark{display:inline-flex;align-items:center;color:var(--ink);font-family:var(--font);font-size:24px;font-weight:500;line-height:1;letter-spacing:-.055em}
@media(max-width:700px){.brand-wordmark{font-size:20px}}

/* ---------- хлебные крошки ---------- */
.crumbs{
  display:flex;align-items:center;gap:.9rem;
  font-size:var(--micro);font-weight:600;
  letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--muted);
}
.crumbs a{transition:color var(--t-ui) var(--ease)}
.crumbs a:hover{color:var(--cobalt)}
.crumbs .sep{color:var(--border)}
.crumbs .cur{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px,5vw,72px);border-bottom:1px solid var(--border-soft)}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;
  margin-top:clamp(2rem,4vw,3.4rem);
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:var(--display-l)}
.hero .niche{font-size:var(--sub);font-weight:400;color:var(--ink);margin-top:1rem;line-height:1.35;max-width:30ch}
.hero-visual img{width:100%;aspect-ratio:4/3.2;object-fit:cover}

.meta-cols{
  display:grid;grid-template-columns:repeat(4,auto);
  gap:clamp(1.2rem,2.6vw,2.8rem);justify-content:start;
  margin-top:clamp(1.8rem,3vw,2.6rem);
}
@media(max-width:700px){.meta-cols{grid-template-columns:1fr 1fr;gap:1.2rem}}
.meta-cols .k{font-size:var(--micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
.meta-cols .v{margin-top:.5rem;font-size:.95rem;line-height:1.45}

.summary-row{
  display:flex;align-items:flex-start;gap:1rem;
  margin-top:clamp(1.8rem,3vw,2.6rem);
  font-size:1rem;line-height:1.5;max-width:46ch;
}
.summary-row .arr{color:var(--ink);font-size:1.25rem;line-height:1.2}

/* ---------- интро: компания + запрос ---------- */
.intro-3col{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(1.6rem,3.4vw,3.6rem)}
@media(max-width:900px){.intro-3col{grid-template-columns:1fr}}
.intro-3col h2{max-width:16ch}
.intro-3col .col .micro-label{margin-bottom:1.1rem}
.intro-3col .col p{color:var(--ink);font-size:.98rem;line-height:1.6}
.intro-3col .col p b{font-weight:500}
.intro-3col .conclusion{
  display:flex;align-items:flex-start;gap:1rem;margin-top:clamp(2rem,4vw,3.4rem);
  font-size:1rem;max-width:40ch;line-height:1.5;
}
.intro-3col .conclusion .arr{font-size:1.25rem;line-height:1.2}

/* ---------- цитаты запроса ---------- */
.phrase-list{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--white)}
.phrase-item{
  display:grid;grid-template-columns:40px 1fr;align-items:start;
  padding:1.15rem 1.3rem;border-bottom:1px solid var(--border-soft);
  font-size:1rem;line-height:1.5;
}
.phrase-item:last-child{border-bottom:0}
.quote-mark{color:var(--cobalt);font-size:1.8rem;font-weight:300;line-height:1}

/* ---------- «Что сделали» — карточки этапов ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:980px){.stages{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.stages{grid-template-columns:1fr}}
.stage-card{
  border:1px solid var(--border);background:var(--white);
  padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;
}
.stage-card__head{display:flex;align-items:baseline;gap:1rem}
.stage-card__num{font-size:.85rem;color:var(--muted);font-weight:500}
.stage-card__name{font-size:1.15rem;font-weight:400;letter-spacing:var(--tr-body)}
.stage-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.stage-card__img img{width:100%;height:100%;object-fit:cover}
.stage-card p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---------- дизайн-борд айдентики ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:980px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.board{grid-template-columns:1fr}}
.board-card{border:1px solid var(--border);background:var(--white);padding:1.1rem;display:flex;flex-direction:column;gap:.9rem}
.board-card .micro-label{padding-left:.2rem}
.board-card__img{overflow:hidden;background:var(--paper)}
.board-card__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* ---------- ряд мокапов ---------- */
.mockups{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.mockups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mockups{grid-template-columns:1fr}}
.mockups img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border-soft);background:var(--paper)}
.mockups img.wide{grid-column:1/-1;aspect-ratio:21/9}

/* ---------- развороты брендбука (лента) ---------- */
.bb{border:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.bb__track{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem;scroll-padding-left:1.2rem}
.bb__track::-webkit-scrollbar{display:none}
.bb__slide{flex-shrink:0;width:min(320px,74vw);scroll-snap-align:start;overflow:hidden;aspect-ratio:16/9;background:var(--paper);border:1px solid var(--border-soft)}
.bb__slide img{width:100%;height:100%;object-fit:cover}
.bb__nav{display:flex;align-items:center;justify-content:space-between;padding:0 1.2rem 1.2rem}
.bb__hint{font-size:var(--micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
.bb__arrows{display:flex;gap:.6rem}
.bb__btn{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:transparent;transition:all var(--t-ui) var(--ease)}
.bb__btn:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* ---------- результат ---------- */
.result-badge{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.45rem 1.1rem;font-size:.85rem;color:var(--ink);background:var(--white);
}
.result-head{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.6rem,3.4vw,3.6rem);align-items:start;margin-top:1.6rem}
@media(max-width:860px){.result-head{grid-template-columns:1fr}}
.result-head h2{font-size:clamp(30px,3.4vw,52px);font-weight:300;max-width:18ch}
.result-head .note-r{color:var(--ink);font-size:.98rem;line-height:1.6;padding-top:.5rem}

.result-grid{
  display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;
  border:1px solid var(--border);background:var(--white);
  margin-top:clamp(2rem,3.6vw,3rem);
}
@media(max-width:1100px){.result-grid{grid-template-columns:1fr 1fr !important}}
@media(max-width:600px){.result-grid{grid-template-columns:1fr !important}}
.res-card{padding:1.6rem;border-right:1px solid var(--border-soft);display:flex;flex-direction:column;gap:1.2rem;min-height:230px}
.res-card:last-child{border-right:0}
@media(max-width:1100px){.res-card{border-bottom:1px solid var(--border-soft)}}
.res-card .num{font-size:.85rem;color:var(--muted);font-weight:500}
.res-card .n{font-size:var(--num);font-weight:300;letter-spacing:var(--tr-display);line-height:1;margin-top:auto}
.res-card .l{color:var(--muted);font-size:.92rem;line-height:1.5}
.res-card--visual{padding:0;overflow:hidden;min-height:230px}
.res-card--visual img{width:100%;height:100%;object-fit:cover}

.result-cta{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.6rem,3.4vw,3.6rem);
  align-items:center;margin-top:clamp(2.4rem,4vw,3.6rem);
}
@media(max-width:860px){.result-cta{grid-template-columns:1fr}}
.result-cta .verdict{font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:300;letter-spacing:var(--tr-body);line-height:1.4;max-width:36ch}
.result-cta .cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.result-cta .cta-side .hint{color:var(--muted);font-size:.92rem}

/* ---------- цитаты / отзыв ---------- */
.quote-list{display:flex;flex-direction:column;gap:1.3rem}
.quote-list blockquote{
  border-left:2px solid var(--cobalt);padding-left:1.2rem;
  font-size:1.02rem;line-height:1.55;font-weight:300;
}
.quote-author{font-size:.85rem;color:var(--muted)}

/* ---------- видео ---------- */
.video-wrap{position:relative;border:1px solid var(--border);aspect-ratio:9/16;max-width:250px;overflow:hidden;cursor:pointer;background:var(--paper)}
.video-wrap img{width:100%;height:100%;object-fit:cover}
.video-wrap .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--cobalt);color:#fff;
  display:grid;place-items:center;transition:transform var(--t-ui) var(--ease);
}
.video-wrap:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.vmodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(4,10,22,.95)}
.vmodal.open{display:flex}
.vmodal__in{position:relative;height:85vh;aspect-ratio:9/16;max-width:100%;background:#000}
.vmodal video{width:100%;height:100%;object-fit:cover}
.vmodal__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;border-radius:50%}

/* ---------- примечание ---------- */
.note{border:1px solid var(--border);padding:1.3rem 1.5rem;display:flex;gap:1rem;align-items:flex-start;background:var(--white)}
.note p{font-size:.92rem;color:var(--muted)}
.note i,.note svg{color:var(--cobalt)}

/* ---------- сетки общего назначения ---------- */
.grid-2{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:800px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);border:1px solid var(--border);padding:26px}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- терум: смысловое ядро ---------- */
.value-card{border:1px solid var(--border);background:var(--white);padding:1.6rem}
.value-card h3{margin-bottom:.6rem;font-size:1.1rem}
.value-card p{font-size:.9rem;color:var(--muted);line-height:1.55}
.value-num{font-size:var(--micro);color:var(--cobalt);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;margin-bottom:.7rem}

.archetype-bar{display:flex;height:12px;overflow:hidden;border:1px solid var(--border)}
.archetype-bar span{display:block;height:100%}
.archetype-legend{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin-top:1rem}
.archetype-legend b{color:var(--ink);font-weight:500}

.swatches{display:flex;gap:1px;flex-wrap:wrap;border:1px solid var(--border);background:var(--border);overflow:hidden}
.swatch{display:flex;flex-direction:column;flex:1 1 96px;background:var(--white)}
.swatch__chip{width:100%;aspect-ratio:1}
.swatch__label{font-size:.75rem;color:var(--muted);padding:.55rem .7rem;line-height:1.35}

.voice-ex{border-left:2px solid var(--cobalt);padding-left:1.2rem}
.voice-ex h3{font-size:.95rem;font-weight:500}
.voice-ex .yes{font-size:1rem;line-height:1.5;font-weight:300}
.voice-ex .no{color:var(--muted);font-size:.88rem;margin-top:.5rem;text-decoration:line-through;opacity:.75}

.word-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.word-tag{border:1px solid var(--border);border-radius:var(--r-pill);padding:.4rem 1rem;font-size:.85rem;background:var(--white)}
.word-tag--stop{text-decoration:line-through;color:var(--muted);opacity:.75;background:transparent}

/* ---------- следующий кейс ---------- */
.next-case{display:block;background:var(--paper);border-bottom:1px solid var(--border-soft)}
.next-case .wrap{
  padding:clamp(2.4rem,4.6vw,3.6rem) 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.next-case .k{font-size:var(--micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
.next-case .name{
  font-size:var(--heading);font-weight:300;letter-spacing:var(--tr-display);
  display:inline-flex;align-items:center;gap:1rem;
  transition:color var(--t-ui) var(--ease);
}
.next-case .name .arr{color:var(--cobalt);transition:transform var(--t-ui) var(--ease)}
.next-case:hover .name{color:var(--cobalt)}
.next-case:hover .name .arr{transform:translateX(8px)}

/* ---------- футер ---------- */
.foot{background:var(--white);padding:2.2rem 0;border-top:1px solid var(--border-soft)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.foot img{height:21px;width:auto}
.foot .copy{font-size:.85rem;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}