:root{
    /* Brand theme — Bravo (black + red). Change colors here */
    --bg:#0a0a0a;            /* page background (near-black) */
    --bg-dark:#020202;            /* page background (near-black) */
    --text:#f5f6f7;          /* primary text (near-white) */
    --muted:#c7c9cc;         /* secondary text */
    --accent:#b20d09;        /* brand red */
    --card:#121212;          /* cards */
    --blur-bg:rgba(10,10,10,0.55); /* header blur */
    --border:#2a1717;        /* subtle dark red border */
    --partners-speed: 90s;   /* slow marquee */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg-dark);line-height:1.5;min-width:375px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:0 auto}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sansation', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

p, .text-desc, .vision-par, .gallery .card p, .cta p {
    font-family: 'Macha', 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #ddd; /* або будь-який відповідний колір */
}

/* Header */
header{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;z-index:1000;transition:background .25s,box-shadow .25s,backdrop-filter .25s;background:transparent}
header.scrolled{background:var(--blur-bg);backdrop-filter:saturate(140%) blur(5px);box-shadow:0 2px 16px rgba(0,0,0,.25);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{width:132px;height:28px;border-radius:6px;background:linear-gradient(135deg,#e53935,#7a1010);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px}
.logo span{font-size:.9rem}
.actions{display:flex;gap:10px;align-items:center}
.btn{appearance:none;border:1px solid var(--border);background:#1a1f27;color:#e8eaed;padding:.6rem 1rem;border-radius:0;cursor:pointer;transition:transform .06s,background .2s,border-color .2s;font-weight:600}
.btn:hover{background:#202632;border-color:#334050}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#ffffff;border-color:transparent}
.btn-primary:hover{filter:brightness(1.05); color:#ffffff;}
.lang{display:inline-flex;border:1px solid var(--border);border-radius:0;overflow:hidden}
.lang button{border:0;background:transparent;color:#e8eaed;padding:.5rem .75rem;cursor:pointer}
.lang button.active{background:#243042}
/* Language dropdown */
.lang-switch {
    position: relative;
    display: inline-block;
}
#langBtn {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}
#langBtn:hover {
    background: rgba(255,255,255,0.1);
}
#langMenu {
    position: absolute;
    right: 0;
    top: 110%;
    background: rgba(0,0,0,0.9);
    border: 1px solid #333;
    border-radius: 6px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 140px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#langMenu li {
    padding: 8px 14px;
    color: #eee;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
#langMenu li:hover {
    background: rgba(255,0,0,0.3);
    color: #fff;
}
.hidden {
    display: none;
}

/* Sections full screen */
section.fullvh{min-height:100vh;display:flex;align-items:center}

/* Hero */
.hero {
    position: relative;
    padding-top: 96px;
    background: url('/app/assets/image-517.png') center center / cover no-repeat;
    color: var(--text);
    isolation: isolate;
    animation: bgMove 40s ease-in-out infinite alternate;
}
@keyframes bgMove {
    from { background-position: center center; }
    to { background-position: center 20%; }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
    z-index: -1;
}
.hero-grid{display:grid;gap:32px;grid-template-columns:1.05fr .95fr}
.hero h1{font-size:clamp(28px,3.8vw,48px);margin:.5rem 0 1rem; text-align: center;}
.hero p{color:var(--muted); text-align: center;font-size: 18px;}
.hero-actions{margin-top:16px;display:flex;gap:10px;justify-content: center;}
.ph-img{background:transparent;border:1px dashed #6a1b1b;border-radius:16px;min-height:280px}
.text-desc{font-size: 18px;}

/* --- HERO: smooth mount fade-in --- */
.hero .hero-grid > div:first-child,           /* ліва колонка (текст) */
.hero .hero-grid .ph-img {                    /* права колонка (картинка) */
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(2px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}

/* показати з невеликим «stagger»: текст трохи раніше, картинка — пізніше */
.hero.is-visible .hero-grid > div:first-child {
    opacity: 1;
    transform: translate3d(0,0,0);
    filter: none;
    transition-delay: .2s;
}
.hero.is-visible .hero-grid .ph-img {
    opacity: 1;
    transform: translate3d(0,0,0);
    filter: none;
    transition-delay: .25s;
}

/* доступність: без анімацій для reduce motion */
@media (prefers-reduced-motion: reduce){
    .hero .hero-grid > div:first-child,
    .hero .hero-grid .ph-img {
        transition: none;
        transform: none;
        filter: none;
        opacity: 1;
    }
}


/* Vision */
.vision{ position:relative; display:block; padding:10vh 0 12vh; overflow:hidden; }
.vision-title{ font-size: clamp(28px, 4vw, 48px); margin:0 0 24px; letter-spacing:0.5px; }
.vision-wrap{ position:relative; }

.container--narrow {
    width: min(860px, 86%);
    margin: 0 auto;
}

@media (max-width: 900px) {
    .container--narrow {
        width: 92%;
    }
}

.vision-par{
    position:relative;
    margin: 28px 0;
    padding: 18px 18px 18px 22px;
    color: var(--c-fg);
    font-size: clamp(18px, 2.1vw, 18px);
    line-height: 1.7;
    border-left: 2px solid transparent;
    transform: translate3d(0, 12px, 0); /* start state for reveal */
    opacity: 0;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), border-color .6s ease;
    will-change: transform, opacity;
    background:
        linear-gradient(90deg, rgba(111,227,255,0.08), rgba(143,123,255,0.05)) padding-box,
        linear-gradient(90deg, var(--c-border), rgba(0,0,0,0)) border-box;
    border-radius: 12px;
    backdrop-filter: blur(3px);
}

.vision-par.is-visible{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    border-left-color: var(--c-accent);
}

.vision-par.accent{
    background:
        linear-gradient(90deg, rgba(143,123,255,0.12), rgba(111,227,255,0.12)) padding-box,
        linear-gradient(90deg, var(--c-border), rgba(0,0,0,0)) border-box;
    border-left-color: var(--c-accent-2);
}


/* Гарний акцент на важливих словах */
/* градієнт для всього, КРІМ .red */
.vision-par em,
.vision-par strong,
.vision-par span:not(.red){
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gallery-title{ font-size: clamp(28px, 4vw, 48px); margin:0 0 24px; letter-spacing:0.5px; }


.vision-par span.red{
    color: var(--accent);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-weight: 600; /* опційно */
}

/* Паралакс (додаткові дрібні тіні) */
.vision-par::after{
    content:"";
    position:absolute; inset:0;
    box-shadow: 0 20px 40px -30px rgba(0,0,0,0.5);
    opacity: 0; pointer-events:none;
    transition: opacity .6s ease;
}
.vision-par.is-visible::after{ opacity:.8; }

/* ===== Lang switch ===== */
.lang-switch{ position:relative; }
.lang-switch button{ background:#151822; color:var(--c-fg); border:1px solid var(--c-border); border-radius:10px; padding:8px 12px; cursor:pointer; }
.lang-switch ul{ position:absolute; right:0; top:calc(100% + 6px); background:#111420; border:1px solid var(--c-border); border-radius:12px; padding:8px 0; margin:0; list-style:none; min-width:180px; z-index:20; }
.lang-switch ul.hidden{ display:none; }
.lang-switch li{ padding:8px 14px; cursor:pointer; }
.lang-switch li:hover{ background:#171b2b; }

/* ===== Modal (простий) ===== */
.modal[aria-hidden="true"]{ display:none; }
.modal[aria-hidden="false"]{ display:block; position:fixed; inset:0; z-index:50; background: rgba(7,9,14,0.6); backdrop-filter: blur(4px); }
.modal .modal-inner{ display:grid; place-items:center; min-height:100vh; padding:20px; }
.modal .sheet{ width: min(720px, 96vw); background:#0e111a; border:1px solid var(--c-border); border-radius:16px; box-shadow: 0 24px 120px rgba(0,0,0,.55); }
.sheet-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--c-border); }
.sheet-body{ padding:20px; }

/* ===== Buttons ===== */
.btn{ background: var(--accent); color:var(--text); border:1px solid var(--c-border); padding:10px 14px; border-radius:0px; cursor:pointer; }
.btn:hover{ background: var(--accent); color: var(--text); }
.btn-primary{ background: var(--accent); border:none; color: var(); }
.btn-primary:hover{ filter: brightness(1.05); }

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce){
    .vision-par{
        transition:none;
        transform:none;
    }
}

/* Gallery (reduced vertical padding) */
.gallery{padding:20px 0}
.grid-3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.ph-rect{height:160px;border-radius:0;background:radial-gradient(120% 120% at 20% 10%, #2b0b0b, #120707);border:1px dashed #6a1b1b}
.card h3{margin:.9rem 0 .25rem;font-size:1.05rem}
.card p{color:var(--muted);margin:0}

/* Partners slider — smaller top/bottom padding, no borders/background, infinite marquee */
.partners{padding:12px 0}
.slider{overflow:hidden}
.track{display:flex;gap:28px;padding:8px 0;will-change:transform;animation:marquee var(--partners-speed) linear infinite}
.slide{flex:0 0 180px;height:84px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#c7cbd2;opacity:.9}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* CTA */
.cta .cta-grid{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
.cta h2{font-size:clamp(22px,3vw,36px);margin:0 0 .5rem}
.cta p{color:var(--muted);margin:0 0 1rem}
.cta .ph-img{min-height:220px}

/* Footer */
footer{padding:40px 0;background:var(--bg-dark);border-top:1px solid var(--border)}
.footer-grid{display:grid;gap:20px;grid-template-columns:1fr 280px;align-items:start}
.footer-logo{width:132px;height:28px;border-radius:6px;background:#3a6073}
.footer-links{display:flex;gap:20px;justify-content:flex-start;flex-wrap:wrap;text-align:right}
.footer-links a{color:#a3a7ae}
.footer-contacts{justify-self:end;color:#a3a7ae}
.footer-contacts a{display:block}
.copyright{margin-top:10px;color:#a3a7ae;font-size:.9rem;text-align:center}

/* Modal full-screen */
.modal{position:fixed;inset:0;display:none;z-index:2000;background:rgba(10,10,10,.8);backdrop-filter:blur(3px)}
.modal.open{display:block}
.modal-inner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.sheet{width:min(720px,100%);max-height:calc(100vh - 48px);background:#0b0b0b;border:none;border-radius:0;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;position:sticky;top:0;background:#0b0b0b;border-bottom:none;z-index:1}
.sheet-body{padding:20px}
.close-x{background:transparent;border:0;color:#a3a7ae;font-size:1.5rem;cursor:pointer}
.form-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form-grid .span-2{grid-column:1/-1}
label{display:block;font-size:.9rem;margin:0 0 .25rem;color:#a3a7ae}
input,textarea{width:100%;background:#111723;color:#e8eaed;border:1px solid var(--border);border-radius:0;padding:.7rem .85rem;outline:none}
textarea{min-height:140px;resize:vertical}
.req{color:var(--accent);margin-left:4px}
.error{color:#ff6b6b;font-size:.85rem;display:none}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* Responsive */
@media (max-width:900px){
    .hero-grid,.cta .cta-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-links{justify-content:flex-start;text-align:left}
    .footer-contacts{justify-self:start}
    .grid-3{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .slide{flex-basis:150px;height:72px}
}

.btn:not(.btn-primary):hover{ color: var(--bg-dark); }

// /* CTA with background image */
// .cta.cta--bg{
//     position: relative;
//     background-image: url('/app/assets/cta-bg.png');
//     background-size: cover;
//     background-position: center right;
//     background-repeat: no-repeat;
//     isolation: isolate;
// }
// .cta.cta--bg::before{
//     content: "";
//     position: absolute; inset: 0;
//     background: linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.15) 75%, rgba(10,10,10,0.0) 100%);
//     z-index: -1;
// }
// .cta .cta-art{min-height:220px}
// @media (max-width: 900px){
//     .cta.cta--bg{ background-position: center; }
// }
/* =========================
   CTA BG (image + dark overlay + scroll variables)
   PUT THIS AT THE VERY END OF styles.css
   ========================= */

   .cta.cta--bg{
    position: relative;
    isolation: isolate;
    overflow: hidden;
  
    /* ✅ твоя нова картинка */
    background-image: url('/app/assets/YOUR_CTA_IMAGE.png');
    background-size: cover;
    background-repeat: no-repeat;
  
    /* базова позиція */
    background-position: center right;
  
    /* scroll-driven vars (оновлює JS) */
    --cta-p: 0;               /* 0..1 */
    --cta-parallax: 0px;      /* px */
    --cta-zoom: 1;            /* scale */
    --cta-overlay: .70;       /* 0..1 */
  
    /* паралакс через background-position */
    background-position: center calc(50% + var(--cta-parallax));
  }
  
  /* zoom фону (псевдоелемент) */
  .cta.cta--bg::after{
    content:"";
    position:absolute;
    inset:-6%;
    z-index:-2;
    background-image: url('/app/assets/rx.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center calc(50% + var(--cta-parallax));
    transform: scale(var(--cta-zoom));
    will-change: transform, background-position;
  }
  
  /* затемнення поверх картинки */
  .cta.cta--bg::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
  
    /* можна тонко підкрутити градієнт */
    background: linear-gradient(
      90deg,
      rgba(10,10,10,0.92) 0%,
      rgba(10,10,10,0.72) 42%,
      rgba(10,10,10,0.42) 75%,
      rgba(10,10,10,0.18) 100%
    );
    opacity: var(--cta-overlay);
    transition: opacity .15s linear;
    pointer-events:none;
  }
  
  /* ✅ прибираємо/перекриваємо старий червоно-чорний арт */
  .cta .cta-art{
    min-height: 220px;
    background: none !important;
    mask-image: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    animation: none !important;
  }
  
  /* якщо canvas лишається — зробимо йому легкий “glass” */
  .cta .cta-art canvas{
    width:100%;
    display: none;
    height:100%;
    display:block;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(4px);
  }
  
  /* CTA контент поверх всього */
  .cta .cta-grid{
    position: relative;
    z-index: 2;
  }
  
  /* Mobile позиція фону */
  @media (max-width: 900px){
    .cta.cta--bg{
      background-position: center;
    }
    .cta.cta--bg::after{
      background-position: center calc(50% + var(--cta-parallax));
    }
  }
  
  /* reduce motion */
  @media (prefers-reduced-motion: reduce){
    .cta.cta--bg{
      --cta-parallax: 0px;
      --cta-zoom: 1;
      --cta-overlay: .70;
    }
    .cta.cta--bg::after{
      will-change: auto;
      transform: none;
    }
    .cta.cta--bg::before{
      transition: none;
    }
  }
  
  /* ==========================================================
   CTA DARK VIGNETTE — top / bottom / sides
   Paste AFTER CTA bg component
   ========================================================== */

#cta.cta.cta--bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  /* ВІНЬЄТКА З УСІХ СТОРІН */
  background:
    /* верх */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.0) 45%
    ),
    /* низ */
    linear-gradient(
      to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.0) 45%
    ),
    /* ліва сторона */
    linear-gradient(
      to right,
      rgba(0,0,0,0.90) 0%,
      rgba(0,0,0,0.45) 28%,
      rgba(0,0,0,0.0) 55%
    ),
    /* права сторона */
    linear-gradient(
      to left,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.35) 28%,
      rgba(0,0,0,0.0) 55%
    );

  /* контроль інтенсивності */
  opacity: 1;
}

  

/* Logo image variant */
.logo-img img{display:block;height:28px}

/* 3D viewer */
.viewer3d .three-wrap{
    position:relative; width:100%; height:60vh; min-height:360px;
    background: radial-gradient(120% 120% at 20% 10%, #1a0b0b, #0b0b0b);
    border:1px solid var(--border);
}
.viewer3d canvas{width:100%; height:100%; display:none}
.viewer3d .viewer-hint{color:var(--muted)}

.footer-contacts p{margin:.2rem 0}


/* --- HERO image card + fade-in --- */
.hero-img{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(20,20,20,.35);
    box-shadow: 0 10px 40px rgba(0,0,0,.5);

    /* стартовий стан (для fade-in) */
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(2px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
    will-change: transform, opacity, filter;
}

.hero-img img{
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 8s ease;
    will-change: transform;
}
.hero-img:hover img{ transform: scale(1.05); }

.hero.is-visible .hero-img{
    opacity: 1;
    transform: translate3d(0,0,0);
    filter: none;
    transition-delay: .25s; /* трохи пізніше за текст */
}

/* --- HERO parallax variables --- */
.hero{
    /* значення оновлюватиме JS */
    --hero-parallax: 0px;        /* для фону */
    --hero-img-shift: 0px;       /* для картинки */
    background-position: center calc(50% + var(--hero-parallax));
    will-change: background-position;
}
.hero-img{
    transform: translate3d(0, var(--hero-img-shift), 0);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
    .hero, .hero-img{ will-change: auto; }
    .hero-img{ transition: none; transform:none; filter:none; opacity:1; }
}


/* --- Red Thread (SVG overlay) --- */
#threadSvg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* висоту ставимо через JS під висоту документу */
    pointer-events: none;
    z-index: 500; /* нижче хедера (1000), але вище контенту */
}

.thread-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(229,57,53,0.55));
}

/* Стейт до старту анімації: нитка «схована» */
.thread-path[data-armed="true"] {
    transition: stroke-dashoffset 2.2s ease;
}

/* Анімація запуску (Vision увійшла у вʼюпорт) */
.thread-path.animate {
    transition: stroke-dashoffset 2.2s ease;
}

/* Невидимі якорі для зручної розкладки */
.thread-point {
    position: absolute;
    width: 1px; height: 1px;
    inset: auto auto auto auto;
    /* для дебагу: увімкнути крапку
    background: red; width: 6px; height: 6px; border-radius: 50%;
    */
}

/* Поставимо їх в помірно логічні місця всередині контейнерів */
#vision .thread-point[data-thread-point="start"] { top: 0; left: 8%; }
#gallery .thread-point[data-thread-point="mid-1"] { top: 20%; left: 80%; }
#gallery .thread-point[data-thread-point="mid-2"] { top: 75%; left: 20%; }

/* Фініш — до кнопки Download привʼяжемо JS-ом (точну позицію візьмемо з кнопки) */

/* На всяк випадок: підсвіт червоного слова */
.red { color: var(--accent)!important; font-weight: 600; }

/* --- Red Thread (SVG overlay) --- */
#threadSvg{
    position:absolute; left:0; top:0; width:100%;
    pointer-events:none; z-index:500;
}

.thread-path{
    fill:none;
    stroke:var(--accent);
    stroke-width:3;
    stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 0 6px rgba(229,57,53,.55));
    opacity:0;                   /* схована до старту */
    transition:none;             /* під час побудови без анімацій */
}

/* коли запускаємо — вмикаємо тільки dashoffset + прозорість */
.thread-path.animate{
    opacity:1;
    transition:stroke-dashoffset 2.6s ease-in-out, opacity .25s ease;
}

.cta-art {
    position: relative;
    height: 320px;
    background: radial-gradient(circle at 60% 40%, rgba(229,57,53,0.25), transparent 70%);
    mask-image: linear-gradient(to left, transparent 10%, black 80%);
    opacity: 0.8;
    animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { filter: brightness(0.9); transform: scale(1); }
    50% { filter: brightness(1.4); transform: scale(1.05); }
}

.cta-art {
    background: url('/app/assets/mesh-grid-red.svg') center right / cover no-repeat;
    opacity: 0.3;
    mix-blend-mode: lighten;
}

.nextgen {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    color: white;
    text-align: center;
}

.video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) contrast(1.05);
}

/* чорна віньєтка + легке затемнення по всій площині */
.vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.4) 25%,
            rgba(0, 0, 0, 0.4) 75%,
            rgba(0, 0, 0, 0.9) 100%
        ),
        rgba(0, 0, 0, 0.3); /* додаткове затемнення поверх усього відео */
    pointer-events: none;
    z-index: 2;
}

.nextgen-content {
    position: relative;
    z-index: 3;
    padding: 0 2rem;
}

.hero-content{
    z-index: 9;

}

.nextgen-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: #fff;
}


/* ===== Red Thread layers ===== */
#threadSvgUnder,
#threadSvgOver{
    position:absolute; left:0; top:0; width:100%;
    pointer-events:none;
}
#threadSvgUnder{ z-index: 200; } /* під контентом, вище фону */
#threadSvgOver { z-index: 600; } /* над контентом