:root {
      --bg: #0c0f14;
      --text: #e9eef7;
      --muted: #b9c2d0;
      --accent: #6ea8fe;
      --accent-2: #9b8cff;
      --card: #121721;
      --card-2: #0f1420;
      --ok: #22c55e;
      --danger: #ef4444;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
    }
html { scroll-behavior: auto; }

/* Скрываем полосу, но сохраняем нативный скролл */
body{ scrollbar-width: 0px; }           /* Firefox */
body::-webkit-scrollbar{ width:0; height:0; } /* WebKit */

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
    }

    /* ====== SNAP SCROLL ====== */
    .panel, .hero { min-height: 100svh; scroll-snap-align: start; }
    body.snap-enabled { scroll-snap-type: y mandatory; }
    body.snap-enabled .panel, body.snap-enabled .hero { scroll-snap-stop: always; }

    /* ====== HERO с двойным видео (ambient + stage) ====== */
    .hero { position: relative; min-height: 100svh; width: 100%; isolation: isolate; overflow: hidden; }

    .hero__ambient {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: -2;
      filter: blur(28px) saturate(1.1) brightness(.75);
      transform: scale(1.08);
    }

    .hero__stage {
      position: absolute;
      top: 50%;
      max-width: 1420px;
      width: 90%;
      border-radius: calc(var(--radius) + 6px);
      overflow: clip;
      box-shadow: 0 30px 80px rgba(0,0,0,.45);
      transition: transform .35s ease, inset .35s ease, width .35s ease, height .35s ease;
      margin: 0 auto; left: 50%; transform: translate(-50%, -50%);
    }

    .hero__stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; filter: saturate(1.05) contrast(1.05); }

    .hero__frame { pointer-events: none; position: absolute; inset: 0; border-radius: inherit; outline: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
    .hero__frame.fx-vignette::after{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(120% 140% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); }
    .hero__frame.fx-grain::before{ content:""; position:absolute; inset:-20%; background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 .25 0'/></feComponentTransfer></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity:.12; mix-blend-mode: overlay; animation: noise 1.2s steps(2,end) infinite; }
    @keyframes noise { to { transform: translate3d(-1%,1%,0); } }

    .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(12,15,20,.85) 0%, rgba(12,15,20,.35) 35%, rgba(12,15,20,.2) 60%, rgba(12,15,20,0) 100%); pointer-events:none; }

    

    /* Заголовок, подзаголовок и CTA в hero */
    .hero__content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 10;
      max-width: 90%;
    }
    .hero__title {
      font-size: clamp(36px, 6vw, 64px);
      font-weight: 800;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: var(--text);
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease forwards 0.5s;
    }
    .hero__subtitle {
      font-size: clamp(16px, 2.2vw, 20px);
      color: var(--muted);
      margin-top: 12px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease forwards 0.7s;
    }
    .hero__cta {
      margin-top: 24px;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards 0.9s;
    }

    .hero__scroll {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards 1s, bounce 2s ease-in-out infinite;
    }
    @keyframes fadeInUp {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
      0%, 100% { transform: translateY(-1px) scale(1); }
      50% { transform: translateY(-1px) scale(1.02); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

    .portfolio__video {
        max-width: 350px;
        width: 100%;
        border-radius: 8px;
    } 

    /* Затемнение и текст после первого проигрывания */
    .hero__overlay {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      z-index: 8;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
        max-width: 100%;
        color: var(--text);
    }

     @media (max-width: 450px) {
      .hero__overlay { opacity: 1; background: transparent; padding: 40px 0px 100px 0; justify-content: start; pointer-events: auto;}
      .hero__subtitle { flex: 1; }
      .hero__toggle {display: none}
    }

    .hero__overlay.active {
      opacity: 1;
      pointer-events: auto;
    }
    .hero__overlay-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(24px, 4vw, 48px);
      font-weight: 800;
      color: var(--text);
      opacity: 0;
      transition: opacity 0.5s ease 0.2s;
    }
    .hero__overlay.active .hero__overlay-text {
      opacity: 1;
    }

    /* Кнопка показать/скрыть */
    .hero__toggle {
      position: absolute;
      bottom: 20px;
      right: 20px;
      z-index: 10;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #0b1020;
      font-weight: 800;
      padding: 12px 20px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
      opacity: 0;
    }
    .hero__toggle.active {
        opacity: 1;
        transition: opacity 0.2s ease-in;
    }

    .hero__toggle:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
    }

    .dots{ position: fixed; right: clamp(8px, 2vw, 20px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 70; }
    .dots a{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: var(--shadow); display: block; transition: transform .2s ease, background .2s ease; }
    .dots a.active{ background: var(--accent); transform: scale(1.2); }

    section { padding: clamp(56px, 8vh, 100px) 24px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 100%); }
    .container { margin: 0 auto; max-width: 1200px; }

    .about { display: grid; gap: 18px; text-align: center; }
    .about h2 { font-size: clamp(32px, 4vw, 48px); margin: 0; letter-spacing: -0.02em; }
    .about p { margin: 0 auto; max-width: 900px; color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.8; }

    .pricing { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    @media (max-width: 980px) { .pricing { grid-template-columns: 1fr; } }
    .card { position: relative; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.3s ease; }
    .card:hover { transform: translateY(-4px) rotateX(2deg) rotateY(2deg); }
    .badge { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #0b1020; background: linear-gradient(135deg, #ffd658, #ff9d66); padding: 8px 10px; border-radius: 999px; }
    .card h3 { margin: 0 0 6px; font-size: 22px; }
    .card p { margin: 0; color: var(--muted); }
    .price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; }
    .price .now { font-size: 34px; font-weight: 800; }
    .price .old { font-size: 16px; color: #a8b1bf; text-decoration: line-through; opacity: .8; }
    .save { font-size: 12px; color: var(--ok); font-weight: 700; }
    .features { margin: 16px 0 22px; display: grid; gap: 10px; }
    .features li { list-style: none; display: flex; gap: 10px; align-items: center; color: #cdd6e6; }
    .features li::before { content: "✓"; font-weight: 900; }
    .features li svg { width: 16px; height: 16px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 220px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b1020; font-weight: 800; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, filter .15s ease; }
    .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

    .portfolio .icard { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 22px; text-align: left; box-shadow: var(--shadow); transition: transform 0.3s ease, border-color .35s ease, background .35s ease; }
    .portfolio .icard:hover { transform: translateY(-4px) rotateX(2deg) rotateY(2deg); border-color: rgba(110,168,254,.35); background: linear-gradient(180deg, rgba(110,168,254,.08), rgba(155,140,255,.04)); }
    .portfolio .icard video { width: 100%; border-radius: 12px; margin-bottom: 12px; background: #000; }

    footer { padding: 40px 24px 60px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.08); }
    footer .row { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    footer a { color: var(--text); text-decoration: none; opacity: .9; }
    footer a:hover { text-decoration: underline; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.is-visible { opacity: 1; transform: none; }

    .cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
    @media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

    .icard { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 22px; text-align: left; box-shadow: var(--shadow); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
    .icard:hover { transform: translateY(-4px); border-color: rgba(110,168,254,.35); background: linear-gradient(180deg, rgba(110,168,254,.08), rgba(155,140,255,.04)); }

    .icard .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: radial-gradient(120% 120% at 30% 20%, rgba(110,168,254,.35), rgba(155,140,255,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
    .icard h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: 0; }
    .icard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

    @keyframes floaty { 0%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } 100%{ transform: translateY(0) } }
    .icard .icon svg { width: 22px; height: 22px; animation: floaty 4.5s ease-in-out infinite; }

    .stagger > * { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
    .stagger.is-visible > * { opacity: 1; transform: none; }

    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 10px; }
    @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
    .step { position: relative; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
    .step .num { position: absolute; top: 14px; right: 16px; font-weight: 800; font-size: 12px; color: #0b1020; background: linear-gradient(135deg, #ffd658, #ff9d66); padding: 6px 8px; border-radius: 999px; letter-spacing: .06em; }

    .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

    .parallax { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .p-layer { position: absolute; will-change: transform; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); opacity: .65; }
    .p-layer svg { display: block; width: 100%; height: auto; }
    .p1{ top:10%; left:5%; width:56px; }
    .p2{ top:18%; right:8%; width:72px; }
    .p3{ bottom:12%; left:12%; width:64px; }
    .p4{ bottom:8%; right:14%; width:48px; }
    .p5{ top:40%; left:45%; width:42px; opacity:.45; }
    .p6{ top:70%; left:60%; width:54px; opacity:.5; }
    .p7{ top:32%; left:18%; width:38px; opacity:.55; }
    .p8{ bottom:28%; right:26%; width:58px; opacity:.6; }

    .hero, .panel { position: relative; z-index: 1; }

    @media (prefers-reduced-motion: reduce) { .parallax { display: none; } }
    @media (max-width: 640px) {
      .hero__stage { width: 100%; max-width: 95%; }
      .hero__title { font-size: clamp(28px, 5vw, 32px); }
      .parallax { display: none; }
    }

    .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
    .muted { color: var(--muted); }
    .pill { display: inline-block; padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; background: linear-gradient(135deg, rgba(110,168,254,.25), rgba(155,140,255,.2)); color: #dfe7ff; border: 1px solid rgba(255,255,255,.08); }


    .splash-bg-outer{
  position: fixed; inset: 0;
  z-index: 1;                 /* под контентом, над чистым фоном */
  pointer-events: none;
}
.splash-bg{
  width: 100%; height: 100%;
  display: block;
  mix-blend-mode: screen;     /* светится на тёмном фоне */
  opacity: .95;               /* при необходимости 0.8–1 */
}
@media (pointer:coarse){
  .splash-bg-outer{ display:none; } /* выключаем на тачах */
}



/* Эффект “заливки” на ховере */
.icard::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(110,168,254,.22), rgba(155,140,255,.16));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.icard:hover::before{ transform: scaleX(1); }
.icard > *{ position: relative; z-index: 1; }


/* Двухколоночная лестница “портфолио” */
.work-grid{
  --col-gap: 80px;
  --row-gap: 140px;          /* большой вертикальный ритм */
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
  align-items: start;
}

.work-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  padding: 18px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.work-card:hover{ transform: translateY(-6px); border-color: rgba(110,168,254,.35); }

/* Лестница: чётные — правая колонка + сдвиг вниз */
.work-card:nth-child(odd)  { grid-column: 1; }
.work-card:nth-child(even) { grid-column: 2; margin-top: 120px; }

/* Доп. ритм — каждые 4-ре слегка смещаем больше/меньше */
.work-card:nth-child(4n+2){ margin-top: 180px; }
.work-card:nth-child(4n+4){ margin-top: 60px; }

/* Крупные превью */
.work-card img, .work-card video{
  width: 100%; display:block; border-radius: 12px; background:#000; margin:0 0 12px;
}

/* Текстовый блок снизу слева как у рефа */
.work-card .meta{
  display:flex; gap: 12px; align-items: baseline; justify-content: space-between;
  color: var(--muted);
}
.work-card h3{ font-size: clamp(20px, 2.6vw, 28px); margin: 10px 0 6px; }
.work-card .year{ opacity:.9; }

/* “Заливка” при ховере (мягкий радиальный градиент слева снизу) */
.work-card::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(140% 140% at 10% 90%, rgba(110,168,254,.22), rgba(155,140,255,.14) 60%, rgba(0,0,0,0) 70%);
  transform: scale(.6);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
}
.work-card:hover::before{ transform: scale(1); opacity: 1; }
.work-card > *{ position: relative; z-index: 1; }

@media (max-width: 980px){
  .work-grid{ grid-template-columns: 1fr; row-gap: 60px; }
  .work-card{ margin-top: 0 !important; }
}

/* --- FIX: приоритетно задаём сетку, если контейнер имеет оба класса --- */
.cards.work-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0,1fr) против переполнений */
  column-gap: var(--col-gap, 80px);
  row-gap: var(--row-gap, 140px);
}

/* Чётные — во вторую колонку только когда колонок две и больше */
.cards.work-grid .work-card:nth-child(odd)  { grid-column: 1; }
.cards.work-grid .work-card:nth-child(even) { grid-column: 2; }

/* Немного уменьшаем «ритм» на средних ширинах — меньше шансов на «ступеньки» */
@media (max-width: 1200px){
  .cards.work-grid{ --col-gap: 56px; --row-gap: 110px; }
  .cards.work-grid .work-card:nth-child(even){ margin-top: 90px; }
  .cards.work-grid .work-card:nth-child(4n+2){ margin-top: 130px; }
  .cards.work-grid .work-card:nth-child(4n+4){ margin-top: 50px; }
}

@media (max-width: 1024px){
  .cards.work-grid{ --col-gap: 40px; --row-gap: 90px; }
  .cards.work-grid .work-card:nth-child(even){ margin-top: 70px; }
  .cards.work-grid .work-card:nth-child(4n+2){ margin-top: 100px; }
  .cards.work-grid .work-card:nth-child(4n+4){ margin-top: 40px; }
}

/* --- Ключевой брейкпоинт: ≤980px — переходим в блоки --- */
@media (max-width: 980px){
  .cards.work-grid{
    grid-template-columns: 1fr;
    --col-gap: 24px;
    --row-gap: 24px;
  }
  /* Сбрасываем принудительное размещение в 2-й колонке и «лестничные» смещения */
  .cards.work-grid .work-card{
    grid-column: auto !important;
    margin-top: 0 !important;
  }
}

/* Если где-то используешь .work-grid без .cards — те же правила, чтобы не дублировать */
.work-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: var(--col-gap, 80px);
  row-gap: var(--row-gap, 140px);
}
@media (max-width: 980px){
  .work-grid{ grid-template-columns: 1fr; --row-gap: 24px; }
  .work-grid .work-card{ grid-column: auto !important; margin-top: 0 !important; }
}



#fluid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
}

/* резервируем место под превью до загрузки медиа */
.work-card img,
.work-card video,
.portfolio .icard video,
.portfolio .icard img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9;           /* подбери под свои ролики */
  object-fit:cover;             /* или contain, если нужно без кропа */
}