:root {
        --bg-deep: #0c0a09;
        /* Єдині таймінги розгортань (ніші «Знайди себе», FAQ, меню, таймлайн) */
        --site-slide-duration: 0.42s;
        --site-slide-ease: cubic-bezier(0.4, 0, 0.2, 1);
        --site-slide-opacity-duration: 0.35s;
      }
      body {
        font-family: Inter, system-ui, sans-serif;
        background: var(--bg-deep);
        color: #f5f5f4;
      }
      html {
        scroll-behavior: smooth;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
      }
      .page-bg {
        background:
          radial-gradient(ellipse 120% 80% at 50% -20%, rgba(212, 168, 83, 0.12), transparent 50%),
          radial-gradient(ellipse 80% 50% at 100% 50%, rgba(52, 211, 153, 0.06), transparent 45%),
          linear-gradient(180deg, #0c0a09 0%, #0f0d0b 100%);
      }

      /* Чергування повноширинних смуг: теплий amber / холодний emerald-slate */
      .section-band-warm {
        background:
          radial-gradient(ellipse 110% 65% at 50% -5%, rgba(251, 191, 36, 0.11), transparent 52%),
          radial-gradient(ellipse 55% 45% at 95% 40%, rgba(180, 83, 9, 0.08), transparent 48%),
          radial-gradient(ellipse 40% 35% at 5% 80%, rgba(245, 158, 11, 0.04), transparent 45%),
          linear-gradient(180deg, #1f1812 0%, #16120e 38%, #100e0b 72%, #0c0a09 100%);
        box-shadow:
          inset 0 1px 0 0 rgba(251, 191, 36, 0.12),
          inset 0 -1px 0 0 rgba(0, 0, 0, 0.45);
      }

      .section-band-cool {
        background:
          radial-gradient(ellipse 100% 55% at 0% 20%, rgba(52, 211, 153, 0.09), transparent 48%),
          radial-gradient(ellipse 70% 50% at 100% 85%, rgba(16, 185, 129, 0.06), transparent 46%),
          radial-gradient(ellipse 50% 40% at 50% 100%, rgba(6, 78, 59, 0.12), transparent 42%),
          linear-gradient(180deg, #0e1312 0%, #0a1010 45%, #080d0c 100%);
        box-shadow:
          inset 0 1px 0 0 rgba(52, 211, 153, 0.1),
          inset 0 -1px 0 0 rgba(0, 0, 0, 0.4);
      }

      /*
        Смуги від блоку «Ніші»: чергування
        темна → теплий радіал (amber) → темна → холодний радіал (emerald) → …
      */
      .section-strip-dark {
        background:
          radial-gradient(ellipse 80% 50% at 50% 105%, rgba(0, 0, 0, 0.45), transparent 58%),
          radial-gradient(ellipse 65% 40% at 15% 0%, rgba(255, 255, 255, 0.025), transparent 50%),
          linear-gradient(180deg, #12100e 0%, #0e0c0a 45%, #0c0a09 100%);
        box-shadow:
          inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
          inset 0 -1px 0 0 rgba(0, 0, 0, 0.42);
      }

      .section-strip-glow-amber {
        background:
          radial-gradient(ellipse 100% 72% at 50% -18%, rgba(251, 191, 36, 0.17), transparent 55%),
          radial-gradient(ellipse 58% 48% at 96% 32%, rgba(217, 119, 6, 0.1), transparent 52%),
          radial-gradient(ellipse 48% 40% at 4% 88%, rgba(146, 64, 14, 0.08), transparent 50%),
          linear-gradient(180deg, #1d1712 0%, #15120f 40%, #100e0b 72%, #0c0a09 100%);
        box-shadow:
          inset 0 1px 0 0 rgba(251, 191, 36, 0.12),
          inset 0 -1px 0 0 rgba(0, 0, 0, 0.46);
      }

      .section-strip-glow-emerald {
        background:
          radial-gradient(ellipse 92% 68% at 10% 8%, rgba(45, 212, 191, 0.11), transparent 50%),
          radial-gradient(ellipse 58% 52% at 90% 72%, rgba(16, 185, 129, 0.1), transparent 52%),
          radial-gradient(ellipse 48% 42% at 45% 100%, rgba(6, 95, 70, 0.12), transparent 48%),
          linear-gradient(180deg, #0f1614 0%, #0c1211 48%, #0a0f0e 100%);
        box-shadow:
          inset 0 1px 0 0 rgba(52, 211, 153, 0.11),
          inset 0 -1px 0 0 rgba(0, 0, 0, 0.41);
      }

      /* Універсальне розгортання (grid 0fr → 1fr), як у блоці ніш */
      .site-slide-panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
          opacity var(--site-slide-opacity-duration) ease;
      }
      .site-slide-panel.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
      }
      .site-slide-panel > .site-slide-panel-inner {
        min-height: 0;
        overflow: hidden;
      }

      /* AIDA: мобільні підпанелі кроків — той самий grid-slide, що й ніші */
      .aida-mobile-slide {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
          opacity var(--site-slide-opacity-duration) ease;
      }
      article.aida-mobile-open .aida-mobile-slide {
        grid-template-rows: 1fr;
        opacity: 1;
      }
      .aida-mobile-slide-inner {
        min-height: 0;
        overflow: hidden;
      }
      .slide-chevron,
      .aida-step-chevron {
        transition: transform var(--site-slide-duration) var(--site-slide-ease);
      }
      [data-niche-chevron] {
        transition: transform var(--site-slide-duration) var(--site-slide-ease);
      }

      /* Додаткові можливості (mobile): grid-slide як у ніш / FAQ */
      .info-details-slide {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
          opacity var(--site-slide-opacity-duration) ease;
      }
      details.info-details[open] .info-details-slide {
        grid-template-rows: 1fr;
        opacity: 1;
      }
      .info-details-slide-inner {
        min-height: 0;
        overflow: hidden;
      }
      details.info-details .info-details-chevron {
        transition: transform var(--site-slide-duration) var(--site-slide-ease);
      }
      details.info-details[open] .info-details-chevron {
        transform: rotate(180deg);
      }
      .info-desktop-tooltip {
        opacity: 0;
        transform: translateY(0.25rem);
        pointer-events: none;
      }
      .info-details[open] .info-desktop-tooltip {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      details summary {
        list-style: none;
      }
      details summary::-webkit-details-marker {
        display: none;
      }
      #site-header {
        background-color: rgba(12, 10, 9, 0.94);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition:
          background-color 0.35s ease,
          border-color 0.35s ease,
          backdrop-filter 0.35s ease,
          -webkit-backdrop-filter 0.35s ease;
      }
      #site-header.header-scrolled {
        background-color: rgba(12, 10, 9, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom-color: rgba(255, 255, 255, 0.07);
      }
      /* Мобільний акордеон: плавне розгортання висоти (0fr → 1fr), без «ривка» max-height */
      @media (max-width: 1023px) {
        #niche-detail-shell {
          width: 100%;
          display: grid;
          grid-template-rows: 0fr;
          opacity: 0;
          transition:
            grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
            opacity var(--site-slide-opacity-duration) ease;
        }
        #niche-detail-shell.is-open {
          grid-template-rows: 1fr;
          opacity: 1;
        }
        #niche-detail-shell > .niche-detail-shell-row {
          min-height: 0;
          overflow: hidden;
        }
        #niche-detail-shell.is-open > .niche-detail-shell-row {
          overflow-x: hidden;
          overflow-y: auto;
          max-height: min(28rem, 75vh);
          -webkit-overflow-scrolling: touch;
        }
      }
      @media (min-width: 1024px) {
        #niche-detail-shell {
          display: flex !important;
          flex-direction: column !important;
          flex: 1 1 auto !important;
          min-height: 0 !important;
          grid-template-rows: none !important;
          max-height: none !important;
          opacity: 1 !important;
          overflow: visible !important;
        }
        #niche-detail-shell > .niche-detail-shell-row {
          flex: 1 1 auto !important;
          display: flex !important;
          flex-direction: column !important;
          min-height: 0 !important;
          overflow: visible !important;
          max-height: none !important;
        }
        #niche-detail {
          flex: 1 1 auto !important;
          min-height: 0 !important;
        }
      }
      main > section {
        margin: 0;
        padding-top: 40px;
        padding-bottom: 40px;
      }
      /* Однакова висота карток ніш у рядку (коли акордеон закритий) */
      .niche-item > .niche-card:only-child {
        flex: 1 1 auto;
        min-height: 5.25rem;
      }

      /* FAQ: max-height + opacity (працює з <details> у Chromium).
         display без !important перебивається UA (закритий details), тому анімації не було. */
      details.faq-item > .faq-details-anim {
        display: block !important;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        min-height: 0;
        transform: translateY(6px);
        transition:
          max-height var(--site-slide-duration) var(--site-slide-ease),
          opacity var(--site-slide-opacity-duration) ease,
          transform var(--site-slide-duration) var(--site-slide-ease);
      }
      details.faq-item[open] > .faq-details-anim {
        max-height: min(100vh, 960px);
        opacity: 1;
        transform: translateY(0);
      }
      details.faq-item > .faq-details-anim > .faq-details-inner {
        min-height: 0;
        overflow: hidden;
      }
      details.faq-item .faq-chevron {
        transition: transform var(--site-slide-duration) var(--site-slide-ease);
      }
      details.faq-item[open] .faq-chevron {
        transform: rotate(180deg);
      }
      @media (prefers-reduced-motion: reduce) {
        .site-slide-panel {
          transition: none;
        }
        .info-details-slide {
          transition: none;
        }
        details.faq-item > .faq-details-anim {
          transition: none;
        }
        details.faq-item .faq-chevron {
          transition: none;
        }
        details.info-details .info-details-chevron {
          transition: none;
        }
        [data-niche-chevron],
        .slide-chevron,
        .aida-step-chevron {
          transition: none;
        }
        .aida-mobile-slide {
          transition: none !important;
        }
      }

      /* Мобільне меню (гамбургер): той самий grid + opacity, що й site-slide-panel */
      .mobile-menu-panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
          opacity var(--site-slide-opacity-duration) ease;
      }
      .mobile-menu-panel.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
      }
      .mobile-menu-panel-inner {
        overflow: hidden;
        min-height: 0;
      }
      @media (prefers-reduced-motion: reduce) {
        .mobile-menu-panel {
          transition: none;
        }
        #mobile-menu-icon-open,
        #mobile-menu-icon-close {
          transition: none;
        }
      }
      #mobile-menu-icon-open,
      #mobile-menu-icon-close {
        transition:
          opacity var(--site-slide-opacity-duration) ease,
          transform var(--site-slide-duration) var(--site-slide-ease);
      }
      @media (min-width: 768px) {
        .mobile-menu-panel {
          display: none !important;
        }
      }
      body.mobile-menu-open {
        overflow: hidden;
      }
      @media (min-width: 768px) {
        body.mobile-menu-open {
          overflow: unset;
        }
      }

      /* Ніші: приховані 5–8 на мобільних, розгортання зі слайдом */
      @media (max-width: 1023px) {
        #niche-more-panel {
          display: grid;
          grid-template-rows: 0fr;
          opacity: 0;
          transition:
            grid-template-rows var(--site-slide-duration) var(--site-slide-ease),
            opacity var(--site-slide-opacity-duration) ease;
        }
        #niche-more-panel.is-open {
          grid-template-rows: 1fr;
          opacity: 1;
        }
        #niche-more-panel .niche-more-panel-inner {
          overflow: hidden;
          min-height: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        @media (max-width: 1023px) {
          #niche-more-panel {
            transition: none;
          }
          #niche-detail-shell {
            transition: none;
          }
        }
      }