/* assets/styles.css (ОНОВЛЕНО: справжній мобайл, меню, краще читання, safe-area) */
:root{
    --bg0:#0b0d10;
    --bg1:#0f1216;
    --bg2:#141922;
    --card:#121722cc;
    --card2:#0f141dcc;
    --line:#232a36;
    --text:#f2f5f8;
    --muted:#a9b2c0;
    --soft:#cfd6e1;
    --accent:#ffffff;
    --shadow: 0 14px 40px rgba(0,0,0,.45);
    --radius: 18px;
    --radius2: 26px;
    --max: 1120px;
    --focus: 0 0 0 3px rgba(255,255,255,.12);
  }
  
  [data-contrast="high"]{
    --bg0:#07080a;
    --bg1:#0b0d10;
    --bg2:#0f1216;
    --line:#2c3444;
    --muted:#c0c9d6;
    --card:#0f141dcc;
    --card2:#0b0f16cc;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    color: var(--text);
    background: var(--bg0);       /* базовий бек */
    overflow-x: hidden;
    position: relative;
  }
  
  /* ✅ Один “ковер-фон” поверх всього, без швів */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  
    /* Тут “cover”: заповнює екран одним шаром */
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.04), transparent 55%),
      radial-gradient(700px 340px at 30% 15%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(520px 260px at 80% 30%, rgba(255,255,255,.05), transparent 60%),
      linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
  
    transform: translateZ(0); /* ✅ антишов */
    will-change: transform;
  }

  
 
  
  a{color:inherit; text-decoration:none}
  a:focus-visible, button:focus-visible{outline:none; box-shadow: var(--focus); border-radius:12px}
  
  .container{
    width:min(var(--max), calc(100% - 40px));
    margin:0 auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  @media (max-width: 420px){
    .container{width: calc(100% - 28px);}
  }
  
  .topbar{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(10,12,15,.78), rgba(10,12,15,.38));
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .topbar__inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:12px;
  }
  
  .brand{display:flex; gap:12px; align-items:center}
  .brand__mark{
    width:42px; height:42px; border-radius:14px;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(circle at 70% 70%, rgba(255,255,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
  }
  .brand-mini-slider{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
  }
  .brand-mini-slider__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .45s ease;
  }
  .brand-mini-slider__img.is-active{
    opacity: 1;
  }
  .brand__title{font-weight:800; letter-spacing:.2px}
  .brand__subtitle{font-size:12px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase}
  
  .topbar__nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
  @media (max-width: 860px){
    .topbar__nav{display:none}
  }
  
  .chip{
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color:var(--soft);
    font-size:13px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .chip:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16)}
  
  .hamburger{
    display:none;
    width:44px; height:44px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    cursor:pointer;
    padding:10px;
    gap:6px;
    flex-direction:column;
    justify-content:center;
  }
    .hamburger span{
    display:block;
    width:100%;
    height:2px;
    border-radius:999px;
    background: rgba(255,255,255,.85);
    transform-origin:center;
    transition: transform .2s ease, opacity .2s ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }
  .hamburger[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
  @media (max-width: 860px){
    .hamburger{display:flex}
  }
  
  .mobile-menu{
    border-top:1px solid rgba(255,255,255,.06);
    background: rgba(10,12,15,.82);
    backdrop-filter: blur(14px);
  }
  .mobile-menu__inner{
    padding: 10px 0 14px;
    display:grid;
    gap:8px;
  }
  
  .mobile-menu__actions{padding-top:6px}
  
  .hero{
    padding: 26px 0 18px;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 18px;
    align-items: start;
  }

  
  .hero__left, .hero__right{
    min-width: 0;
  }
  
  
  
  .hero__right{ order: 1; }
  .hero__left{ order: 2; }
  
  
  .hero-media-slider{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius2);
    overflow: hidden;
    background: rgba(255,255,255,.03);
  }

  .hero-media-slider__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .45s ease;
  }

  .hero-media-slider__img.is-active{
    opacity: 1;
  }
  @media (max-width: 1024px){
    .hero{
      grid-template-columns: 1fr;
      gap: 14px;
      padding-top: 18px;
    }
    .hero__actions{
      width: 100%;
    }
    .hero__actions .btn{
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }
  
  @media (max-width: 520px){
    .hero{ padding: 16px 0 12px; }
    .note{ margin-top: 12px; }
  }
  
  h1{margin:0 0 10px; font-size: clamp(28px, 3.6vw, 44px); line-height:1.05}
  h2{margin:0 0 10px; font-size: clamp(20px, 2.8vw, 30px); line-height:1.12}
  p{margin:0 0 12px; line-height:1.62}
  .muted{color:var(--muted)}
  .small{font-size:12px}
  code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.92em;
    color:#e8edf6;
  }
  
  .hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
  
  .btn{
    cursor:pointer;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color:var(--text);
    padding: 11px 14px;
    font-weight:700;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18)}
  .btn--primary{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
  }
  
  .hide-on-mobile{display:inline-flex}
  @media (max-width: 860px){
    .hide-on-mobile{display:none}
  }
  
  .note{
    margin-top:16px;
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 14px;
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .note__icon{
    width:28px; height:28px; border-radius:10px;
    display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    font-weight:900;
    flex: 0 0 auto;
  }
  .note__text{color:var(--muted); font-size:14px; line-height:1.5}
  
  .card{
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, var(--card), var(--card2));
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .card--glow{position:relative}
  .card--glow:before{
    content:"";
    position:absolute; inset:-120px -60px auto auto;
    width:260px; height:260px;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 65%);
    pointer-events:none;
  }
  .card__head{padding:16px 16px 8px; display:flex; align-items:center; justify-content:space-between; gap:12px}
  .card__foot{padding:10px 16px 16px; border-top:1px solid rgba(255,255,255,.06)}
  
  .pill{
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--soft);
  }
  
  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
    padding: 10px 0 22px;
  }
  @media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
  @media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }
  
  .grid__tile{
    padding:16px 16px;
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .grid__tile:hover{transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14)}
  .grid__title{font-weight:900; margin-bottom:6px}
  .grid__desc{color:var(--muted); line-height:1.5; font-size:14px}
  
  .footer{
    padding: 18px 0 28px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  
  /* PAGES */
  .page{padding: 22px 0 34px; display:grid; grid-template-columns: 1fr; gap:14px}
  .breadcrumbs{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px}
  .breadcrumbs a{color:var(--soft)}
  .breadcrumbs .sep{opacity:.5}
  
  .section-header{
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding: 18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .section-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .kpi{
    padding:8px 10px; border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    font-size:13px; color:var(--soft);
  }
  
  .content{
    grid-template-columns: 1.05fr .95fr;
    gap:14px;
  }
  @media (max-width: 980px){ .content{grid-template-columns:1fr;} }
  
  .prose{
    padding:18px;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .prose p{margin-bottom:12px}
  .prose ul{margin: 10px 0 0 18px; color:var(--muted)}
  .prose li{margin: 6px 0}
  
  /* SLIDER (mobile-friendly: swipe + snap feel) */
  .slider{
    touch-action: pan-y;
    overflow:hidden;
    border-radius: var(--radius2);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    margin-top: 30px;
  }
  .slider__viewport{
    overflow:hidden;
    width:100%;
  }
  .slider__track{
    display:flex;
    gap:12px;
    padding: 16px;
    transform: translateX(0);
    transition: transform .35s ease;
    will-change: transform;
  }
  .slide{
    min-width: 100%;
    padding: 16px;
  }
  @media (max-width: 520px){
    .slider__track{padding: 14px}
    .slide{padding: 14px}
  }
  
  .slide__kicker{color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
  .slide__title{font-weight:900; font-size:18px; margin:6px 0 8px}
  .slide__text{color:var(--muted); line-height:1.55}
  
  .slider__controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 10px 14px 14px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .iconbtn{
    width:42px; height:42px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color:var(--text);
    font-size:22px;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .iconbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18)}
  .iconbtn:disabled{opacity:.45; cursor:not-allowed; transform:none}
  
  .dots{display:flex; gap:8px; justify-content:center; flex:1}
  .dot{
    width:8px; height:8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.10);
    cursor:pointer;
    opacity:.65;
  }
  .dot.is-active{
    width:20px;
    opacity:1;
    background: rgba(255,255,255,.28);
  }
  /* ===== Listen block (під темний дизайн, адаптив) ===== */
.listen{ padding: 6px 0 34px; }
.listen__head{ margin-bottom: 10px; }

.listen__card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px;
}

.listen__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* На ширших екранах можна в 2 колонки */
@media (min-width: 860px){
  .listen__list{
    grid-template-columns: 1fr 1fr;
  }
}

.listen__item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.listen__link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  min-height: 56px;
}

.listen__link:hover{
  background: rgba(255,255,255,.04);
}

.listen__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.listen__icon svg{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.92);
}

.listen__text{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.listen__title{
  font-weight: 900;
  line-height: 1.1;
}

.listen__meta{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.listen__arrow{
  margin-left: auto;
  color: rgba(255,255,255,.60);
  font-weight: 900;
}

.listen__hint{
  margin-top: 10px;
}

/* Мобайл: робимо все 1 колонкою і більші тап-зони */
@media (max-width: 520px){
  .listen__link{
    padding: 13px 12px;
    min-height: 60px;
  }
  .listen__meta{ font-size: 12.5px; }
}
  /* TIMELINE: scrollable + snap on mobile */
  .timeline{padding: 0 0 0}
  .timeline__track{
    display:flex;
    gap:12px;
    padding: 0 16px 12px;
    overflow:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .timeline__track::-webkit-scrollbar{height:10px}
  .timeline__track::-webkit-scrollbar-thumb{background: rgba(255,255,255,.10); border-radius:999px}
  .timeline__item{
    scroll-snap-align: start;
    min-width: 72%;
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: 14px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  @media (max-width: 980px){ .timeline__item{min-width: 86%} }
  @media (max-width: 520px){ .timeline__item{min-width: 92%} }
  .timeline__item:hover{transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14)}
  .timeline__kicker{color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
  .timeline__title{font-weight:900; margin:6px 0 4px}
  .timeline__desc{color:var(--muted); font-size:14px; line-height:1.5}
  
  /* MEDIA SECTION */
  .media{padding: 6px 0 34px}
  .media__head{margin-bottom:10px}
  .media__card{
    border-radius: var(--radius2);
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: 16px;
  }
  .media__list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
  .media__item{
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .media__link{
    display:block;
    padding: 12px 12px;
  }
  .media__link:hover{background: rgba(255,255,255,.04)}
  .media__title{font-weight:900}
  .media__meta{color: var(--muted)}
  .media__hint{margin-top:10px}
  /* ===== Photo slides ===== */
  .slider--photos .slide{
    box-sizing:border-box;
    width:100%;
    flex:0 0 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
  }

  .slider--photos .photo{
    width:100%;
    height:clamp(260px, 52vh, 560px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    border:0;
    border-radius: var(--radius2);
    background: rgba(255,255,255,.02);
    overflow:hidden;
    cursor: zoom-in;
    touch-action: manipulation;
    transition: transform .12s ease, background .12s ease;
  }

  .slider--photos .photo:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
  }

  .slider--photos .photo img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:100%;
    height:100%;
    margin:auto;
    object-fit: contain;
    object-position:center;
    border-radius:14px;
  }

  @media (max-width: 520px){
    .slider--photos .slide{ padding:12px; }
    .slider--photos .photo{ height:clamp(220px, 46vh, 420px); }
  }
  /* ===== Lightbox ===== */
  .lightbox{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
  }
  
  .lightbox[hidden]{ display:none; }
  
  .lightbox__backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
  }
  
  .lightbox__dialog{
    position: relative;
    width: min(1200px, calc(100% - 24px));
    max-height: calc(100vh - 24px);
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(12,14,18,.92);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
  }
  
  @media (max-width: 520px){
    .lightbox__dialog{
      width: calc(100% - 16px);
    }
  }
  
  .lightbox__frame{
    padding: 12px;
    width: 100%;
    order: 1;
  }
  
  .lightbox__img{
    display:block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    object-position: center;
    border-radius: calc(var(--radius2) - 10px);
    background: rgba(255,255,255,.02);
  }
  
  .lightbox__close{
    position: static;
    order: 2;
    width: 48px;
    height: 48px;
    margin: 0 0 14px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
  }
  .lightbox__close:hover{
    background: rgba(255,255,255,.09);
  }
  
  /* ✅ коли модалка відкрита — прибираємо скрол */
  body.no-scroll{
    overflow:hidden;
    touch-action: none;
  }