/* ============================================================
   CUBIO — единая дизайн-система (single source of truth)
   Палитра сэмплирована с живого cubio.pro:
     green   #8A9E7D (sage)      orange #C97453 (терракота)
     beige   #FAF7F1             ink    #2C2C2A
   Подключать ПОСЛЕ внутреннего <style> страницы — токены :root
   и переопределения здесь выигрывают по порядку каскада.
   Cache-bust: <link href="assets/cubio.css?v=YYYYMMDDx">
   ============================================================ */

:root {
  /* Акценты cubio.pro */
  --green:        #8A9E7D;
  --green-600:    #6E8463;   /* hover/нажатие, тёмная зелень */
  --green-700:    #566B4C;   /* глубокая зелень (плашки, футер) */
  --green-100:    #E7ECE1;   /* светлый фон бейджей */
  --orange:       #C97453;
  --orange-600:   #AC5B3C;   /* hover оранжевой кнопки */
  --orange-100:   #F4E3DA;   /* светлый фон акцента */

  /* Нейтральные */
  --beige:        #FAF7F1;   /* фон страницы (клиент: «фон ок») */
  --beige-2:      #F0EAE0;   /* фон секций/карточек */
  --surface:      #FFFFFF;
  --ink:          #2C2C2A;   /* текст, тёмные заголовки */
  --ink-soft:     #6E665C;   /* вторичный текст */
  --border:       #E8E1D6;

  /* Дерево (детали, без чёрных плашек) */
  --wood:         #D4B996;
  --wood-dark:    #A0826D;

  /* Радиусы — кнопки НЕ круглые (как на cubio.pro) */
  --r-btn:        10px;
  --r-sm:         8px;
  --r:            12px;
  --r-lg:         18px;

  /* === РЕМАП ЛЕГАСИ-ТОКЕНОВ страниц на новую палитру === */
  --accent:       var(--green);
  --accent-dark:  var(--green-600);
  --accent-light: var(--green-100);
  --sage:         var(--green);
  --bg:           var(--beige);
  --bg-subtle:    var(--beige-2);
  --success:      var(--green-600);
}

/* ---------- ЛОГОТИП: один белый кубик + «cubio» ---------- */
/* HTML:
   <a class="cubio-logo" href="/cubio/">
     <span class="cubio-logo__cube" aria-hidden="true">…SVG…</span>
     <span class="cubio-logo__word">cubio</span>
   </a>
   Модификатор .cubio-logo--white — для тёмного фона (кубик и текст белые). */
.cubio-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.cubio-logo__cube{display:block;width:38px;height:38px;flex-shrink:0}
.cubio-logo__cube svg{display:block;width:100%;height:100%}
.cubio-logo__word{
  font-family:'Bricolage Grotesque','Montserrat',sans-serif;
  font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--green);
}
.cubio-logo--white .cubio-logo__word{color:#fff}
.cubio-logo--white .cubio-logo__cube svg [data-fill]{fill:#fff}
.cubio-logo--white .cubio-logo__cube svg [data-stroke]{stroke:#fff}
@media(max-width:720px){
  .cubio-logo__cube{width:32px;height:32px}
  .cubio-logo__word{font-size:22px}
}

/* ---------- КНОПКИ: радиус 10px, green / orange ---------- */
.cbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--r-btn);border:none;cursor:pointer;
  font-family:'Inter','Montserrat',sans-serif;font-size:15px;font-weight:600;
  line-height:1;text-decoration:none;white-space:nowrap;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.cbtn--primary{background:var(--green);color:#fff}
.cbtn--primary:hover{background:var(--green-600);transform:translateY(-1px)}
.cbtn--accent{background:var(--orange);color:#fff}
.cbtn--accent:hover{background:var(--orange-600);transform:translateY(-1px)}
.cbtn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.cbtn--ghost:hover{border-color:var(--green);color:var(--green)}
.cbtn--lg{padding:17px 34px;font-size:16px}
@media(max-width:720px){
  .cbtn{white-space:normal;max-width:100%;width:100%}
}

/* ---------- ПЛАШКИ-СЕКЦИИ: яркие, без чёрного ---------- */
.plate--green{background:var(--green);color:#fff}
.plate--green-deep{background:var(--green-700);color:#fff}
.plate--orange{background:var(--orange);color:#fff}
.plate--green *,.plate--green-deep *,.plate--orange *{border-color:rgba(255,255,255,.22)}
.plate--green .plate__muted,.plate--orange .plate__muted,
.plate--green-deep .plate__muted{color:rgba(255,255,255,.85)}

/* Бейджи/киккеры — допускается скруглённый pill (это НЕ кнопка) */
.cbadge{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:6px 14px;border-radius:999px;background:var(--green-100);color:var(--green-600);
}
.cbadge--orange{background:var(--orange-100);color:var(--orange-600)}

/* ============================================================
   ПЕРЕОПРЕДЕЛЕНИЯ ЛЕГАСИ-КЛАССОВ (страницы prototypes)
   Срабатывают, т.к. cubio.css подключён ПОСЛЕ их <style>.
   ============================================================ */
/* Кнопки страниц → радиус 10px (бейджи .hero__kicker/.section__eyebrow не трогаем) */
.pill, .btn, .nav-cta, .q-next, .q-prev, .quiz-submit, .pill-btn{ border-radius:var(--r-btn) !important; }
.pill.primary, .nav-cta{ background:var(--green) !important; color:#fff !important; }
.pill.primary:hover{ background:var(--green-600) !important; }
.pill.accent, .btn.accent{ background:var(--orange) !important; color:#fff !important; }

/* sage-литералы → тёмный зелёный (читаемо на светлом фоне, контраст ≥4.5) */
.section__eyebrow{ color:var(--green-700) !important; }

/* Тёмные плашки-секции → глубокий зелёный (не чёрный) */
.section--dark{ background:var(--green-700) !important; color:#fff !important; }

/* ============================================================
   v2 — реальные рендеры в карточках + 3D-наведение
   ============================================================ */
/* Студийные рендеры на белом — показываем целиком, без обрезки */
.card__img{
  background-size:contain !important;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#fff;
}
/* 3D-наклон + подъём карточек с визуалом (tilt задаёт cubio.js) */
.card,.macro__card,.season__card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
  transform-style:preserve-3d;will-change:transform;
}
.card:hover,.macro__card:hover,.season__card:hover{
  box-shadow:0 22px 50px rgba(44,44,42,.18),0 6px 16px rgba(44,44,42,.10);
}
.card .card__img,.macro__card img,.season__card img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img{transform:scale(1.05)}
.macro__card:hover img,.season__card:hover img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .card,.macro__card,.season__card,
  .card .card__img,.macro__card img,.season__card img{transition:none!important;transform:none!important}
}

/* ============================================================
   v3 — БЛИК на главных CTA (проскальзывающая световая полоска)
   ============================================================ */
.pill.primary,.nav-cta,.btn-primary,.cbtn--primary,.cbtn--accent{
  position:relative;overflow:hidden;isolation:isolate;
}
.pill.primary::after,.nav-cta::after,.btn-primary::after,
.cbtn--primary::after,.cbtn--accent::after{
  content:"";position:absolute;top:-20%;left:-160%;
  width:55%;height:140%;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-22deg);
  animation:cubio-shine 4s ease-in-out infinite;
}
/* при наведении блик ускоряется */
.pill.primary:hover::after,.nav-cta:hover::after,.btn-primary:hover::after,
.cbtn--primary:hover::after,.cbtn--accent:hover::after{animation-duration:1.1s}
@keyframes cubio-shine{
  0%{left:-160%}
  55%{left:160%}
  100%{left:160%}
}
@media (prefers-reduced-motion:reduce){
  .pill.primary::after,.nav-cta::after,.btn-primary::after,
  .cbtn--primary::after,.cbtn--accent::after{display:none}
}

/* ============================================================
   v4 — HERO: единый ЧИСТЫЙ full-bleed (2026-06-01)
   Убираем тёмную «коробку» .hero__inner (background/blur/border-radius)
   — её видимый край поверх фото = баг. Текст сидит прямо на ОДНОМ
   мягком левом градиенте (desktop) / нижнем (mobile). Перебивает
   inline-стили страниц, т.к. cubio.css грузится последним.
   ============================================================ */
.hero__inner{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-radius:0 !important;
  padding:0 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55) !important;
}
.hero .hero__overlay,.hero--I .hero__overlay,.hero--III .hero__overlay{
  background:linear-gradient(90deg,
    rgba(18,20,18,.72) 0%,
    rgba(18,20,18,.54) 26%,
    rgba(18,20,18,.30) 44%,
    rgba(18,20,18,.10) 58%,
    transparent 70%) !important;
}
@media(max-width:720px){
  .hero .hero__overlay,.hero--I .hero__overlay,.hero--III .hero__overlay{
    background:linear-gradient(180deg,
      rgba(18,20,18,.26) 0%,
      rgba(18,20,18,.66) 56%,
      rgba(18,20,18,.93) 100%) !important;
  }
}