/* =========================================================
   Apple-like layout + Liquid Glass PRO for LunaOS (v2, fixed)
   - Исправлен многострочный data-URI (noise)
   - Добавлен fallback для color-mix в .global-nav
========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Base background gradient (глубокий космос) */
  --bg: #090c11;
  --bg-2:#0d1219;

  /* Text */
  --ink:#eef3ff;
  --muted:#b9c6d8;
  --link:#d5e4ff;

  /* Brand spectrum */
  --brand-50:#e9f4ff;
  --brand-100:#d3e8ff;
  --brand-200:#b6d8ff;
  --brand-300:#96c4ff;
  --brand-400:#7ab1ff;
  --brand-500:#5a9cff;   /* основной акцент */
  --brand-600:#3f74ff;
  --brand-700:#2a49ff;

  /* Aux accents */
  --violet:#b792ff;
  --azure:#7ee6ff;
  --magenta:#ff72e1;

  /* Glass system */
  --glass-fill: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  --glass-tint: rgba(255,255,255,.06);
  --glass-stroke: rgba(255,255,255,.18);
  --glass-stroke-soft: rgba(255,255,255,.12);
  --glass-edge: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  --glass-specular: linear-gradient(to bottom right,
                      rgba(255,255,255,.45) 0%,
                      rgba(255,255,255,.14) 18%,
                      rgba(255,255,255,0) 40%);
  --glass-shadow: 0 28px 80px rgba(0,0,0,.48), 0 6px 22px rgba(0,0,0,.32);

  /* Neon glow */
  --glow-1: 0 8px 30px rgba(122,225,255,.25);
  --glow-2: 0 14px 60px rgba(167,146,255,.24);

  /* Radii & blur */
  --r-xxl: 34px;
  --r-xl: 24px;
  --r-lg: 18px;
  --blur: 18px;

  /* Layout */
  --wrap: 980px;
  --wrap-wide: 1068px;
  --nav-h: 44px;

  /* Shadows */
  --shadow-xl: var(--glass-shadow);
  --shadow-md: 0 12px 34px rgba(0,0,0,.36);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);

  /* Subtle noise (SVG data-URI) — ОДНОЙ СТРОКОЙ */
  --noise: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 .08 .12 0 0 0 0 0 0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Логотип в шапке */
.gn-brand {
  display: flex;
  align-items: center;
  gap: 12px;              /* расстояние между картинкой и текстом */
  text-decoration: none;  /* убираем подчеркивание */
}

.gn-brand .logo-img {
  height: 90px;           /* увеличенный размер иконки */
  width: auto;            /* ширина подстраивается */
  display: block;
}

.gn-brand .brand-text {
  font-size: 20px;        /* чуть больше текст под лого */
  font-weight: 600;
  color: var(--ink, #eef3ff); /* используем твой цвет текста */
}

/* адаптив под мобильные */
@media (max-width: 768px) {
  .gn-brand .logo-img {
    height: 32px;         /* поменьше на мобильных */
  }

  .gn-brand .brand-text {
    font-size: 18px;
  }
}


/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1400px 900px at 8% -10%, rgba(120,160,255,.16), transparent 60%),
    radial-gradient(1200px 800px at 110% 0%, rgba(70,210,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}
body::after{ /* тонкое зерно поверх всего */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image: var(--noise);
  opacity:.25; mix-blend-mode:soft-light;
}

img{ display:block; max-width:100% }
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }




/* =========================
   Global Nav — Liquid Glass
   ========================= */
.global-nav{
  position:sticky; top:0; z-index:1000;
  height:var(--nav-h);
  /* стекло + лёгкая заливка, когда вверху страницы */
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    color-mix(in oklab, var(--bg) 78%, #ffffff 22%);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: height .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
  isolation:isolate;
}
.global-nav::before{ /* верхний «сияющий» кант */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30% 70%, rgba(255,255,255,.35));
  opacity:.35;
}
.global-nav::after{ /* внутренний спекуляр */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  mix-blend-mode:screen; opacity:.28;
}

/* компактная «прибранная» версия при скролле */
.global-nav.is-scrolled{
  height: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    color-mix(in oklab, var(--bg) 70%, #ffffff 30%);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 36px rgba(0,0,0,.34);
}

.gn-wrap{
  max-width:var(--wrap-wide); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 20px;
}

/* Бренд-точка — капля стекла */
.gn-brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:.2px }
.logo-dot{
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(60% 60% at 30% 30%, #fff, #cfe4ff 32%, #7aa1ff 62%, #0b0e12 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(80,120,255,.35);
}

/* ====== Нав-ссылки в «капсуле» ====== */
.gn-links{
  position:relative;
  display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.gn-links a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; min-width:48px;
  border-radius:10px;
  color:var(--ink);
  border:1px solid transparent;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease;
}
.gn-links a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.gn-links a:active{ transform: translateY(0) }

/* Активный пункт — тонкая световая полоска снизу и мягкий свеч */
.gn-links a.is-active{
  background: linear-gradient(180deg, rgba(168,206,255,.22), rgba(168,206,255,.10));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 28px rgba(122,225,255,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.gn-links a.is-active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand-500), var(--violet));
  opacity:.9;
}

/* Пилюля «скачать» как glass-кнопка */
.download-pill{
  padding:8px 14px; border-radius:999px; font-weight:800;
  background:
    linear-gradient(180deg, rgba(168,206,255,.36), rgba(168,206,255,.2)),
    radial-gradient(120% 160% at 100% -40%, rgba(255,114,225,.22), transparent 60%);
  border:1px solid var(--glass-stroke);
  box-shadow: var(--glow-2);
  transition: transform .14s ease, box-shadow .14s ease;
}
.download-pill:hover{ transform: translateY(-1px); box-shadow: var(--glow-2), 0 10px 26px rgba(0,0,0,.28) }
.download-pill:active{ transform: translateY(0) }

/* ====== Мобильная версия: стеклянный «лист» ====== */
.gn-burger{ display:none }
@media (max-width: 820px){
  .gn-burger{ display:inline-grid; gap:4px; border:0; background:transparent; padding:8px; cursor:pointer }
  .gn-burger span{ width:18px; height:2px; background:#eaf0ff; display:block; border-radius:2px }

  .gn-links{
    position:absolute; top:calc(var(--nav-h) + 8px); left:12px; right:12px;
    padding:10px; gap:8px; flex-direction:column;
    background:
      linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45)),
      rgba(12,16,22,.8);
    border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    backdrop-filter:saturate(160%) blur(18px);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    display:none; border-radius:20px;
  }
  .global-nav.open .gn-links{ display:flex }
  .gn-links a{ width:100%; justify-content:flex-start; padding:10px 12px }
}




/* ---------- Hero ---------- */
.section{ position:relative }
.hero{
  min-height: calc(100vh - var(--nav-h));
  display:grid; place-items:center; text-align:center; padding:24px;
  overflow:hidden; isolation:isolate;
}
.hero .glass{
  position:relative; z-index:2;
  border-radius:var(--r-xxl);
  padding:44px 30px;
  background: var(--glass-fill);
  border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter: saturate(170%) blur(var(--blur));
  backdrop-filter: saturate(170%) blur(var(--blur));
  box-shadow: var(--shadow-xl);
}
.hero .glass::before{ /* спекулярный блик */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: var(--glass-specular);
  mix-blend-mode:screen; opacity:.35;
}
.hero .glass::after{ /* серебряный кант */
  content:""; position:absolute; inset:1px; border-radius:calc(var(--r-xxl) - 1px);
  background: var(--glass-edge); opacity:.18; pointer-events:none;
}
.sheet-lg{ max-width: 900px }
.sheet-md{ max-width: 740px }

.kicker{ color:var(--muted); font-weight:650; margin-bottom:8px; letter-spacing:.08em }
.display{
  font-weight:850; font-size: clamp(40px, 8vw, 96px); margin:0;
  letter-spacing:-.6px; line-height:1.05;
  background: linear-gradient(180deg, #ffffff, #dbe6ff 55%, #9ec0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.display-sm{
  font-weight:830; font-size: clamp(28px, 5.6vw, 54px); margin:0 0 8px;
  background: linear-gradient(180deg, #fff, #e7eeff 60%, #b6cdff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.display .grad{
  background: linear-gradient(180deg, var(--violet), var(--brand-500));
  -webkit-background-clip:text; color:transparent
}
.subhead{ color:var(--muted); font-size: clamp(16px, 2.4vw, 22px); margin:12px auto 18px; max-width:760px }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px;
  border:1px solid var(--glass-stroke); background:var(--glass-tint); color:var(--ink);
  font-weight:760; box-shadow:var(--shadow-sm); transition:.16s ease, transform .12s ease;
}
.cta.primary{
  background:
    linear-gradient(180deg, rgba(168,206,255,.32), rgba(168,206,255,.18)),
    radial-gradient(120% 160% at 100% -40%, rgba(255,114,225,.18), transparent 60%);
}
.cta::after{ /* «shine» */
  content:""; position:absolute; inset:-120% -40% auto -40%; height:200%;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 80%);
  transform: translateX(-40%) rotate(8deg);
  transition: .6s ease; pointer-events:none;
}
.cta:hover{ transform: translateY(-1px); box-shadow: var(--glow-1) }
.cta:hover::after{ transform: translateX(30%) rotate(8deg) }

/* hero backgrounds */
.hero-grad{
  position:absolute; inset:-20% -10% -10% -10%; z-index:0;
  background:
    radial-gradient(1000px 700px at 10% 0%, rgba(167,206,255,.28), transparent 60%),
    radial-gradient(900px 700px at 120% 20%, rgba(130,230,255,.18), transparent 60%);
  filter: blur(6px);
}
.grid-glow{
  position:absolute; inset:-10%; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);
  opacity:.5; filter: blur(2px);
}
.orb{
  position:absolute; border-radius:50%; filter: blur(42px); mix-blend-mode:screen; opacity:.38;
  animation: float 18s ease-in-out infinite;
}
.orb-a{ width:440px; height:440px; background:radial-gradient(closest-side, var(--brand-500), transparent 70%); top:-60px; left:-120px }
.orb-b{ width:360px; height:360px; background:radial-gradient(closest-side, var(--azure), transparent 70%); bottom:10%; right:-80px; animation-delay:-6s }

@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}

/* ---------- Promo grid (2x3, Apple-like) ---------- */
.promos{ padding: 28px 0 10px; }
.promo-grid{
  max-width: var(--wrap-wide); margin:0 auto; padding:0 18px;
  display:grid; gap:18px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 734px){ .promo-grid{ grid-template-columns: 1fr } }

.promo-card{
  position:relative; min-height: 360px; border-radius: var(--r-xl);
  overflow:hidden; display:flex; align-items:flex-end;
  background: var(--glass-fill);
  border:1px solid var(--glass-stroke-soft);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-md);
  transform: translateZ(0);  /* для плавности */
}
.promo-card::before{ /* неоновая подсветка угла */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(127,177,255,.25), transparent 60%),
              radial-gradient(40% 40% at 0% 100%, rgba(255,114,225,.18), transparent 60%);
  opacity:.55;
}
.promo-card::after{ /* спекуляр сверху */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(to top, rgba(255,255,255,.0) 50%, rgba(255,255,255,.08) 100%);
  mix-blend-mode:screen;
}
.promo-card:hover{ box-shadow: var(--shadow-md), var(--glow-2) }
.pc-body{ position:relative; z-index:2; padding:22px }
.title{ margin:0 0 6px; font-size: clamp(22px, 3.2vw, 28px); font-weight:800 }
.desc{ margin:0 0 10px; color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  font-size:12px; padding:6px 10px; border-radius:999px; color:#eaf2ff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18)
}
.code{
  margin-top:10px; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#d9e6ff; background:rgba(10,14,20,.6); border:1px dashed rgba(255,255,255,.2);
  border-radius:14px; padding:10px 12px; overflow:auto;
}

/* ---------- Tech block ---------- */
.block{ padding: 52px 0 }
.tech .tech-wrap{ max-width: var(--wrap); margin:0 auto; padding:0 18px }
.eyebrow{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin:0 0 6px }
.tech .display-sm{ margin-bottom:16px }
.tech-cols{
  display:grid; gap:18px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 734px){ .tech-cols{ grid-template-columns: 1fr } }

.tech-col{
  position:relative;
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  border:1px solid var(--glass-stroke-soft);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  padding:18px; box-shadow: var(--shadow-sm);
}
.tech-col::before{
  content:""; position:absolute; inset:1px; border-radius:calc(var(--r-lg) - 1px);
  background: var(--glass-edge); opacity:.16; pointer-events:none;
}

/* ---------- Download sticky bar ---------- */
.download-cta{ position:sticky; bottom:0; z-index:50; margin-top:40px }
.dc-wrap{
  max-width: var(--wrap-wide); margin:0 auto 12px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-radius:20px; background: var(--glass-fill); border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-md);
}
.dc-text{ display:flex; flex-direction:column; gap:2px }
.dc-text strong{ font-size:18px }
.dc-text span{ color:var(--muted) }
.dc-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ---------- Footer ---------- */
.footer{
  margin-top:30px; padding: 28px 0 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.ft-wrap{ max-width: var(--wrap-wide); margin:0 auto; padding:0 18px }
.ft-cols{
  display:grid; gap:18px; grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px){ .ft-cols{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .ft-cols{ grid-template-columns: 1fr } }
.footer h5{ margin:0 0 8px; font-size:14px; color:#e6eeff; font-weight:700 }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.footer li a{ color:var(--muted) }
.ft-legal{ margin-top:18px; color:var(--muted); font-size:13px }
.ft-legal p{ margin:6px 0 }

/* ---------- Glass helper (utility variants) ---------- */
.glass{
  border:1px solid var(--glass-stroke);
  background: var(--glass-fill);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-xl);
}
.glass--elev-2{ box-shadow: var(--shadow-md), var(--glow-1) }
.glass--elev-3{ box-shadow: var(--shadow-xl), var(--glow-2) }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: .6s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* ---------- Accessibility ---------- */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand-500) 70%, #fff 30%);
  outline-offset: 3px; border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(122,225,255,.18);
}

/* ---------- Responsive: global nav burger ---------- */
@media (max-width: 820px){
  .gn-burger{ display:inline-grid; gap:4px; border:0; background:transparent; padding:8px; cursor:pointer }
  .gn-burger span{ width:18px; height:2px; background:#eaf0ff; display:block; border-radius:2px }
  .gn-links{
    position:absolute; top:var(--nav-h); left:0; right:0; padding:10px 18px 14px; gap:8px;
    flex-direction:column; background:rgba(11,14,18,.94);
    border-bottom:1px solid rgba(255,255,255,.08); display:none
  }
  .global-nav.open .gn-links{ display:flex }
}

/* ---------- Light mode ---------- */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8ff; --bg-2:#eef3ff;
    --ink:#0c0f14; --muted:#435064;
    --link:#2147ff;
    --glass-fill: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
    --glass-tint: rgba(255,255,255,.65);
    --glass-stroke: rgba(20,24,32,.12);
    --glass-stroke-soft: rgba(20,24,32,.08);
    --glass-edge: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  }
  .global-nav{ background: rgba(255,255,255,.75) }
  .download-pill{ border-color: rgba(20,24,32,.12) }
  body::after{ opacity:.12 } /* зерно тоньше */
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .orb, .cta::after{ animation:none; transition:none }
}

/* ===== Intro (Luna OS) ===== */
.intro{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  opacity:0; transform:scale(1.02);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events:none; /* включим при показе */
}
.intro.show{ opacity:1; transform:scale(1); pointer-events:auto }
.intro.hide{ opacity:0; transform:scale(.985); pointer-events:none }

.intro-backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(127,177,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 0%, rgba(126,230,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  filter: saturate(120%) blur(0px);
}
.intro-orb{
  position:absolute; border-radius:50%;
  filter: blur(48px); mix-blend-mode:screen; opacity:.45; pointer-events:none;
  animation: introFloat 18s ease-in-out infinite;
}
.intro-orb.orb-1{ width:520px; height:520px; left:-120px; top:-80px;
  background: radial-gradient(closest-side, var(--violet), transparent 70%); }
.intro-orb.orb-2{ width:420px; height:420px; right:-80px; bottom:8%;
  background: radial-gradient(closest-side, var(--azure), transparent 70%); animation-delay:-6s }

@keyframes introFloat{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-14px,0) }
}

.intro-glass{
  position:relative; z-index:2;
  padding:44px 36px; border-radius: var(--r-xxl);
  background: var(--glass-fill);
  border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter: saturate(170%) blur(var(--blur));
  backdrop-filter: saturate(170%) blur(var(--blur));
  box-shadow: var(--shadow-xl);
  overflow:hidden;
}
.intro-glass::before{ /* спекуляр сверху */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: var(--glass-specular); mix-blend-mode:screen; opacity:.35;
}
.intro-glass::after{ /* серебряный кант */
  content:""; position:absolute; inset:1px; border-radius:calc(var(--r-xxl) - 1px); pointer-events:none;
  background: var(--glass-edge); opacity:.18;
}

.intro-title{
  position:relative;
  margin:0; display:flex; align-items:baseline; justify-content:center; gap:.04em;
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(44px, 10vw, 120px);
  line-height:1;
  /* легкий градиент шрифта */
  background: linear-gradient(180deg, #fff, #dbe6ff 55%, #9ec0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 10px 36px rgba(0,0,0,.35);
}
.intro-title span{
  display:inline-block;
  transform: translateY(24px) scale(.98);
  opacity:0; filter: blur(6px);
  animation: introPop .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 95ms);
}
.intro-space{ width:.35em } /* визуальная щель между словами */

@keyframes introPop{
  to{ transform: translateY(0) scale(1); opacity:1; filter: blur(0) }
}

/* Shine-свип по надписи */
.intro-title::after{
  content:""; position:absolute; inset:-6% -10%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-120%) rotate(4deg);
  animation: introSweep 1.8s .55s ease both;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes introSweep{ to{ transform: translateX(120%) rotate(4deg) } }

.intro-sub{
  margin:.6rem 0 1.2rem; color:var(--muted);
  font-size: clamp(14px, 1.8vw, 18px);
  text-align:center;
}

.intro-skip{
  appearance:none; border:1px solid var(--glass-stroke);
  background: var(--glass-tint);
  color: var(--ink); font-weight:700;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  box-shadow: var(--shadow-sm);
}
.intro-skip:hover{ transform: translateY(-1px); box-shadow: var(--glow-1) }
.intro-skip:active{ transform: translateY(0) }

/* Reduce motion: быстрое появление */
@media (prefers-reduced-motion: reduce){
  .intro-title span{ animation-duration:.01ms; animation-delay:0ms }
  .intro-title::after{ display:none }
  .intro-orb{ display:none }
}

.promo-card .pc-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px auto;
}

.promo-card .pc-icon img {
  width: 200px !important;
  height: 200px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(140,220,255,0.35));
  transition: transform .25s ease;
}

.promo-card:hover .pc-icon img {
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .promo-card .pc-icon img {
    width: 120px !important;
    height: 120px !important;
  }
}


/* ===== Promo Rail (горизонтальная лента плиток) ===== */
  .promo-rail{
    position: relative;
    padding: 28px 0;
  }
  .promo-rail .rail{
    --gap: 16px;
    --duration: 32s;                 /* скорость прокрутки; ↑— медленнее, ↓— быстрее */
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  }
  .promo-rail .track{
    display: flex;
    gap: var(--gap);
    align-items: stretch;
    width: max-content;              /* ширина по контенту */
    animation: rail-scroll var(--duration) linear infinite;
  }
  .promo-rail .tile{
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 320px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
  }
  .promo-rail .tile:hover{
    transform: translateY(-2px);
    border-color: rgba(140,220,255,.35);
    box-shadow: 0 10px 34px rgba(0,0,0,.35);
  }
  .promo-rail .tile .ic{
    width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(120,170,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .promo-rail .tile .ic img{
    width: 18px; height: 18px; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(140,220,255,.35));
  }
  .promo-rail .tile .tx{
    display: flex; align-items: center; gap: 8px; font-weight: 700;
    color: var(--ink, #eef3ff);
  }
  .promo-rail .rail:hover .track{ animation-play-state: paused; }

  /* бесшовная прокрутка — второй «дубликат» в конце */
  @keyframes rail-scroll{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Мобильная компактность */
  @media (max-width: 768px){
    .promo-rail .tile{ min-width: 200px; padding: 14px 16px; }
    .promo-rail .tile .ic{ width:24px; height:24px; }
    .promo-rail .tile .ic img{ width:16px; height:16px; }
    .promo-rail .rail{ --gap: 12px; --duration: 26s; }
  }

  /* Доступность — отключаем автопрокрутку при “reduced motion” */
  @media (prefers-reduced-motion: reduce){
    .promo-rail .track{ animation: none; }
  }

  /* ===== Статичная нижняя плитка (большая синяя) ===== */
  .promo-rail .anchor{
    margin-top: 18px;
    border-radius: 22px;
    padding: 28px 24px;
    background: linear-gradient(180deg, #3c84ff, #0f5be6);
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,50,140,.35);
    border: 1px solid rgba(255,255,255,.25);
  }
  .promo-rail .anchor .h{
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: 800;
    letter-spacing: .2px;
    margin: 2px 0 10px;
  }
  .promo-rail .anchor .p{
    opacity: .92;
  }

  /* ===== Hero video background ===== */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;              /* видео уходит под стеклянный блок */
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* видео покрывает весь блок */
  object-position: center;
  filter: brightness(0.65); /* затемняем чуть-чуть для читаемости текста */
}

.hero.hero-game {
  position: relative;
  isolation: isolate;       /* чтобы текст и стекло были поверх */
}
.hero.hero-game .glass {
  position: relative;
  z-index: 2;               /* текст и карточка выше видео */
}


/* ===== Game Covers Rail ===== */
.game-rail {
  position: relative;
  padding: 50px 0;
  overflow: hidden;
  text-align: center;
}

.game-rail .title-block {
  margin: 0 auto 28px;
}

.game-rail .rail {
  --gap: 16px;
  --duration: 45s;
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.game-rail .track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: game-scroll var(--duration) linear infinite;
}

.game-rail .cover {
  flex: 0 0 auto;
  width: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-rail .cover img {
  display: block;
  width: 100%;
  height: auto;
}
.game-rail .cover:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

@keyframes game-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .game-rail .cover { width: 240px; }
  .game-rail .rail { --gap: 12px; --duration: 35s; }
}


/* ===== Animated site background (liquid aurora) ===== */
:root{
  /* интенсивность и скорость — можно править под вкус */
  --bg-anim-intensity: .18;     /* 0.0–0.35: яркость неонового слоя */
  --bg-anim-blur: 10px;         /* мягкость свечения */
  --bg-anim-duration: 52s;      /* скорость панорамирования */
}

/* дополнительный «живой» слой над базовым градиентом body */
body::before{
  content:"";
  position: fixed;
  inset: -12% -12% -12% -12%;  /* чуть шире вьюпорта, чтобы не было краёв при движении */
  z-index: 0;
  pointer-events: none;
  /* три большие полупрозрачные «туманности», которые медленно смещаются */
  background:
    radial-gradient(1000px 720px at 10% 0%, rgba(167,206,255,var(--bg-anim-intensity)), transparent 60%),
    radial-gradient(900px 640px at 110% 10%, rgba(255,114,225,calc(var(--bg-anim-intensity) * .75)), transparent 62%),
    radial-gradient(1200px 800px at 50% 110%, rgba(126,230,255,calc(var(--bg-anim-intensity) * .65)), transparent 64%);
  background-repeat: no-repeat;
  background-size:
    140% 140%,
    160% 160%,
    180% 180%;
  background-position:
    0% 0%,
    100% 10%,
    50% 100%;
  filter: blur(var(--bg-anim-blur)) saturate(115%);
  mix-blend-mode: screen;           /* мягкий, «стеклянный» замес с базовым фоном */
  animation: bg-pan var(--bg-anim-duration) ease-in-out infinite;
}

/* уже есть body::after с зерном — слегка «дышит» для живости */
body::after{
  animation: noise-breathe 6.5s ease-in-out infinite;
}

/* плавное панорамирование градиентов */
@keyframes bg-pan{
  0%{
    background-position: 0% 0%, 100% 10%, 50% 100%;
  }
  50%{
    background-position: 18% 12%, 82% 18%, 55% 86%;
  }
  100%{
    background-position: 0% 0%, 100% 10%, 50% 100%;
  }
}

/* едва заметный «вдох-выдох» зерна, чтобы картинка не застывала */
@keyframes noise-breathe{
  0%,100%{ opacity:.25 }
  50%{ opacity:.28 }
}

/* уважение к reduce-motion: фиксируем кадр, убираем дыхание зерна */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none }
  body::after{ animation: none }
}


/* ===== Subtle background shimmer (lite) ===== */
:root{
  /* Тонкая настройка эффекта */
  --bg-shimmer-opacity: .10;   /* 0.06–0.16 — сила свечения */
  --bg-shimmer-blur: 14px;     /* мягкость свечения */
  --bg-shimmer-duration: 80s;  /* скорость перелива */
  --bg-shimmer-hue: 8deg;      /* диапазон сдвига оттенка */
}

/* Едва заметная «плёнка» поверх базового фона */
body::before{
  content:"";
  position: fixed;
  inset: -10% -10% -10% -10%;    /* шире вьюпорта, чтобы без краёв при движении */
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-shimmer-opacity);
  /* мягкий градиент брендовой палитры */
  background:
    radial-gradient(1000px 720px at 12% 0%,    rgba(167,206,255,.65), transparent 62%),
    radial-gradient(900px 640px  at 110% 12%,  rgba(255,114,225,.50), transparent 64%),
    radial-gradient(1200px 800px at 50% 110%,  rgba(126,230,255,.45), transparent 66%);
  background-repeat: no-repeat;
  background-size: 150% 150%, 160% 160%, 170% 170%;
  background-position: 0% 0%, 100% 10%, 50% 100%;
  mix-blend-mode: screen;         /* стеклянный «замес» с твоим базовым фоном */
  filter: blur(var(--bg-shimmer-blur)) hue-rotate(0deg) saturate(110%);
  transform: translateZ(0);       /* включаем композитинг */
  animation: bg-shimmer-pan var(--bg-shimmer-duration) ease-in-out infinite,
             bg-shimmer-hue calc(var(--bg-shimmer-duration) * 1.25) ease-in-out infinite;
}

/* Лёгкое панорамирование пятен */
@keyframes bg-shimmer-pan{
  0%   { background-position: 0% 0%, 100% 10%, 50% 100%; transform: translate3d(0,0,0) rotate(0.1deg); }
  50%  { background-position: 14% 10%, 86% 18%, 54% 88%;  transform: translate3d(1.2%, -0.6%, 0) rotate(0.5deg); }
  100% { background-position: 0% 0%, 100% 10%, 50% 100%; transform: translate3d(0,0,0) rotate(0.1deg); }
}

/* Едва заметный сдвиг оттенка (без «радуги») */
@keyframes bg-shimmer-hue{
  0%,100% { filter: blur(var(--bg-shimmer-blur)) hue-rotate(0deg)    saturate(110%); }
  50%     { filter: blur(calc(var(--bg-shimmer-blur) + 2px)) hue-rotate(var(--bg-shimmer-hue)) saturate(114%); }
}

/* Если предпочитают «уменьшение анимации» — фиксируем кадр */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none }
}


    /* мета о файле под кнопкой */
    .beta-meta{display:block;margin-top:.35rem;font-size:.9rem;color:#b9c6d8}

    /* ===== Modal: лицензионное соглашение ===== */
    .modal-backdrop{
      position:fixed; inset:0; display:none;
      align-items:center; justify-content:center;
      background:rgba(7,10,16,.6); backdrop-filter:blur(10px);
      z-index:9999; padding:24px;
    }
    .modal-backdrop[aria-hidden="false"]{ display:flex; }
    .modal-window{
      width:min(840px,100%); max-height:85vh; overflow:auto;
      border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.45);
      border:1px solid rgba(180,200,255,.12); padding:0;
      background:rgba(20,24,31,.68);
    }
    .modal-header,.modal-actions{
      padding:16px 20px; display:flex; align-items:center; gap:12px;
    }
    .modal-header{ justify-content:space-between; border-bottom:1px solid rgba(180,200,255,.12); }
    .modal-actions{ justify-content:flex-end; border-top:1px solid rgba(180,200,255,.12); }
    .modal-close{
      background:transparent; border:0; font-size:18px; line-height:1; cursor:pointer; color:#eaf0ff;
      opacity:.7; transition:opacity .15s ease;
    }
    .modal-close:hover{ opacity:1; }
    .modal-body{ padding:16px 20px; }
    .license-text{
      font-size:.98rem; color:#d8e2f1; line-height:1.6;
      background:rgba(20,24,31,.6);
      border:1px solid rgba(180,200,255,.08);
      border-radius:14px; padding:14px; max-height:44vh; overflow:auto;
    }
    .ack-row{ display:flex; align-items:center; gap:10px; margin-top:12px; color:#c9d5e8; }
    body.no-scroll{ overflow:hidden; }

    /* ====== общие фич-стили (для карточек внутри модалки) ====== */
    .muted{ color:#b9c6d8; }
    .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
    .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
      background:rgba(140,170,255,.10); border:1px solid rgba(160,190,255,.16); font-size:.9rem; }
    .chip code{ font-size:.9em; }
    .kbd{ display:inline-block; padding:.12rem .45rem; border:1px solid rgba(180,200,255,.25);
      border-bottom-width:2px; border-radius:8px; background:rgba(255,255,255,.03); font-size:.88em; }

    /* ===== LPM SHEET ===== */
    .lpm-backdrop{
      position:fixed; inset:0; display:none;
      align-items:flex-end; justify-content:center;
      background:rgba(7,10,16,.55); backdrop-filter:blur(10px);
      z-index:10000; padding:24px;
    }
    .lpm-backdrop[aria-hidden="false"]{ display:flex; }
    .lpm-window{
      width:min(960px,100%); max-height:85vh; overflow:auto;
      border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.45);
      border:1px solid rgba(180,200,255,.12);
      background:rgba(20,24,31,.68);
      transform:translateY(24px); opacity:0;
      animation:lpm-in .28s ease forwards;
    }
    @keyframes lpm-in{ to{ transform:translateY(0); opacity:1; } }
    @media (max-width:640px){
      .lpm-backdrop{ align-items:stretch; padding:0; }
      .lpm-window{ max-height:100vh; border-radius:0; }
    }
    .lpm-header,.lpm-actions{ padding:16px 20px; display:flex; align-items:center; gap:12px; }
    .lpm-header{ justify-content:space-between; border-bottom:1px solid rgba(180,200,255,.12); }
    .lpm-actions{ justify-content:flex-end; border-top:1px solid rgba(180,200,255,.12); }
    .lpm-close{
      background:transparent; border:0; font-size:18px; line-height:1; cursor:pointer; color:#eaf0ff;
      opacity:.75; transition:opacity .15s ease;
    }
    .lpm-close:hover{ opacity:1; }
    .lpm-body{ padding:18px 20px; }

    /* grid-карточки */
    .lpm-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
    @media (max-width:980px){ .lpm-grid{ grid-template-columns:1fr; } }
    .lpm-card{
      background:rgba(20,24,31,.6);
      border:1px solid rgba(180,200,255,.10);
      border-radius:16px; padding:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .lpm-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
    .lpm-item{ display:flex; gap:10px; align-items:flex-start; }
    .lpm-ic{
      width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center;
      border-radius:7px; background:linear-gradient(180deg, rgba(120,160,255,.18), rgba(120,160,255,.06));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(40,60,120,.25); font-size:14px;
    }
    .lpm-code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size:.95rem; line-height:1.55;
      background:linear-gradient(180deg, rgba(10,14,20,.9), rgba(10,14,20,.83));
      border:1px solid rgba(160,190,255,.16);
      border-radius:16px; padding:14px 14px 14px 16px; position:relative;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.35);
      overflow:auto; white-space:pre-wrap;
    }
    .lpm-note{ font-size:.95rem; color:#c6d3e6; margin-top:10px; }

    /* tabs */
    .lpm-tabs{ display:flex; gap:8px; padding:10px 20px 0; border-bottom:1px solid rgba(180,200,255,.12); }
    .lpm-tab{
      appearance:none; border:1px solid rgba(160,190,255,.16); background:rgba(140,170,255,.08);
      padding:8px 12px; border-radius:999px; color:#dfe8ff; font-weight:600; cursor:pointer;
    }
    .lpm-tab[aria-selected="true"]{ background:rgba(160,190,255,.22); border-color:rgba(160,190,255,.4); }
    .lpm-panel{ display:none; }
    .lpm-panel[aria-hidden="false"]{ display:block; }


	/* ==== clickable promo cards: 3D tilt + sheen + glow ==== */
.promo-card.glass-card{
  cursor: default;                    /* по умолчанию */
  will-change: transform, box-shadow, filter;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
  position: relative;
  transform-style: preserve-3d;
}

/* подсказка: если карточка открывает что-то — курсор "pointer" */
.promo-card.glass-card[role="button"],
.promo-card.glass-card.is-interactive{ cursor: pointer; }

/* мягкое парящее свечение при hover/focus */
.promo-card.glass-card[role="button"]:is(:hover, :focus-visible),
.promo-card.glass-card.is-interactive:is(:hover, :focus-visible){
  box-shadow:
    0 18px 50px rgba(120,160,255,.18),
    0 4px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  border-color: rgba(180,200,255,.22);
  filter: saturate(1.05);
}

/* лёгкий приподнятый наклон на hover — сам наклон задаст JS, тут лишь fallback */
@media (hover:hover){
  .promo-card.glass-card[role="button"]:hover,
  .promo-card.glass-card.is-interactive:hover{
    transform: translateZ(0) scale(1.015);
  }
}

/* «нажатие» */
.promo-card.glass-card.is-pressed{
  transform: translateY(2px) scale(.995) !important;
  transition-duration: .08s;
}

/* стеклянный блик (sheen) — необычно и ненавязчиво */
.promo-card.glass-card::after{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(200,225,255,.38) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-120%) rotate(0.001deg);
  opacity:0; filter: blur(6px);
  transition: opacity .25s ease, transform .9s ease;
}
.promo-card.glass-card:is(:hover, :focus-visible)::after{
  opacity:.7;
  transform: translateX(120%) rotate(0.001deg);
}

/* «дыхание» — одноразовый нудж через 2сек после загрузки, чтобы подсказать кликабельность */
@keyframes cardNudge {
  0% { transform: translateY(0) scale(1); }
  40%{ transform: translateY(-3px) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}
.promo-card.glass-card.nudge-once{
  animation: cardNudge .9s ease-out 1 both;
  animation-delay: 2s;
}

/* симпатичный градиентный обвод на hover */
.promo-card.glass-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(150,190,255,.2), rgba(120,150,255,.06));
  opacity:0; transition: opacity .25s ease;
}
.promo-card.glass-card:is(:hover, :focus-visible)::before{ opacity:.9; }

/* «фокус» для клавиатуры */
.promo-card.glass-card[role="button"]:focus-visible{
  outline: 2px solid rgba(160,200,255,.9);
  outline-offset: 3px;
}

/* аккуратный риппл для клика (создаётся JS) */
.card-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle, rgba(190,220,255,.55) 0%, rgba(190,220,255,.15) 40%, rgba(190,220,255,0) 70%);
  animation: rippleOut .6s ease-out forwards;
  filter: blur(0.5px);
}
@keyframes rippleOut{
  to{ transform: translate(-50%,-50%) scale(1); opacity:0; }
}

/* снизить эффекты для тех, кто не любит движение */
@media (prefers-reduced-motion: reduce){
  .promo-card.glass-card,
  .promo-card.glass-card::after,
  .promo-card.glass-card::before{
    transition: none !important;
    animation: none !important;
  }
}


/* ====== PEEK-REVEAL для кликабельных карточек ====== */
.promo-card.glass-card{ position:relative; overflow:visible; }
.promo-card.glass-card .peek{
  position:absolute; left:12px; right:12px; bottom:12px;
  height:0; overflow:hidden; pointer-events:none;
  transition: height .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  opacity:.98; /* слегка матовое */
  z-index:2;
  --mx: 0; --my: 0; /* JS двигает параллакс */
}
.promo-card.glass-card .peek-glass{
  position:relative;
  background: rgba(16,22,30,.65);
  backdrop-filter: blur(6px) saturate(1.03);
  border:1px solid rgba(170,200,255,.18);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding:10px 12px 12px;
  transform: translate3d(calc(var(--mx)*2px), calc(var(--my)*2px), 0);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.9) 70%, rgba(0,0,0,0));
}
.promo-card.glass-card .peek-title{
  font-size:.86rem; color:#9fb2cf; margin-bottom:6px; letter-spacing:.02em;
}
.promo-card.glass-card .peek-code{
  margin:0; font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9rem; line-height:1.4; color:#dfe7ff; white-space:pre;
}
.promo-card.glass-card .peek-handle{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:46px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, rgba(180,200,255,.25), rgba(180,200,255,.6), rgba(180,200,255,.25));
  opacity:.6;
}

/* раскрыть превью при наведении/фокусе или когда JS добавляет .peeking */
.promo-card.glass-card[role="button"]:is(:hover, :focus-visible) .peek,
.promo-card.glass-card.peeking .peek{
  height:92px;
}
@media (max-width: 560px){
  .promo-card.glass-card[role="button"]:is(:hover, :focus-visible) .peek,
  .promo-card.glass-card.peeking .peek{
    height:100px; /* чуть выше на мобиле */
  }
}

/* поддержка reduced motion — без динамического роста */
@media (prefers-reduced-motion: reduce){
  .promo-card.glass-card .peek{ transition: none; }
}

/* бонус: когда превью раскрыто — основной текст чуть сдвигаем, чтобы не перекрывался */
.promo-card.glass-card[role="button"]:is(:hover, :focus-visible),
.promo-card.glass-card.peeking{
  padding-bottom: 6px; /* обычно карточка имеет внутренние отступы через .pc-body — это мягкая компенсация */
}


/* ========= Liquid Glass (для блока геймпадов) ========= */
.liquid-glass{
  position: relative;
  overflow: hidden;            /* чтобы блики не вылезали за радиус */
  background: rgba(16,22,30,.58);
  backdrop-filter: blur(8px) saturate(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
  border: 1px solid rgba(170,200,255,.16);
  border-radius: 20px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  isolation: isolate;          /* корректный mix-blend */
  transition: box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

/* Внутренний анимированный кант (тонкая «подсветка» по краю) */
.liquid-glass::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;                                  /* толщина кромки */
  background:
    linear-gradient(140deg,
      rgba(120,160,255,.38),
      rgba(180,220,255,.12) 30%,
      rgba(120,160,255,.38) 60%,
      rgba(180,220,255,.12) 100%);
  background-size: 200% 200%;
  /* вычитаем центр, оставляя только рамку */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: lg-border-flow 10s linear infinite;
  opacity:.9;
}

/* Диагональный «блик», который мягко пробегает */
.liquid-glass::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(210,230,255,.10) 48%,
    rgba(255,255,255,0) 65%);
  filter: blur(6px);
  transform: translateX(-120%);
  animation: lg-sheen 6.5s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity:.85;
}

/* Декоративные «капли света» (мягкие движущиеся пятна) */
.liquid-glass .lg-blob{
  position:absolute; left:-30px; top:-40px;
  width:180px; height:180px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle at 30% 30%,
    rgba(140,200,255,.55),
    rgba(140,200,255,0) 62%);
  filter: blur(28px);
  opacity:.35;
  animation: lg-blob-float 18s ease-in-out infinite;
  z-index:-1; /* остаётся «под стеклом» */
}
.liquid-glass .lg-blob.b2{
  left:auto; right:-32px; top:auto; bottom:-48px;
  width:240px; height:240px; opacity:.28;
  animation-duration: 22s;
}

/* Ховер/фокус — чуть ярче и контрастнее */
.liquid-glass:is(:hover, :focus-within){
  border-color: rgba(190,215,255,.26);
  box-shadow:
    0 22px 60px rgba(120,160,255,.18),
    0 6px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  filter: saturate(1.04);
}

/* Анимации */
@keyframes lg-border-flow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes lg-sheen{
  0%, 20%  { transform: translateX(-120%); opacity:.75; }
  50%      { transform: translateX(120%);  opacity:.95; }
  100%     { transform: translateX(120%);  opacity:.75; }
}
@keyframes lg-blob-float{
  0%,100% { transform: translate3d(0,0,0) }
  50%     { transform: translate3d(6px,-12px,0) }
}

/* Безопасность для тех, кто отключил анимации */
@media (prefers-reduced-motion: reduce){
  .liquid-glass, .liquid-glass::before, .liquid-glass::after,
  .liquid-glass .lg-blob{
    animation: none !important;
    transition: none !important;
  }
}



/* ===== System Requirements — PREMIUM glass ===== */
.sysreq-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem;           /* чуть больше воздуха */
  text-align: center;
  position: relative;
  left: 3%;                           /* лёгкий сдвиг вправо */
}

/* Декоративные «орбы» позади блока (тонко, без шума) */
.section.sysreq { position: relative; overflow: visible; }
.section.sysreq::before,
.section.sysreq::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  width: 36vmax; height: 36vmax; border-radius: 999px; filter: blur(38px);
  opacity:.28; transform: translateZ(0);                 /* антидребезг */
}
.section.sysreq::before{
  right: -18vmax; top: -6vmax;
  background: radial-gradient(60% 60% at 50% 50%, rgba(110,150,255,.28), rgba(0,0,0,0));
}
.section.sysreq::after{
  left: -16vmax; bottom: -10vmax;
  background: radial-gradient(60% 60% at 50% 50%, rgba(140,220,255,.22), rgba(0,0,0,0));
}

.req-grid {
  position: relative; z-index: 1;     /* поверх орбов */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  text-align: left;
}

/* Карточка: глубокое стекло + градиентный кант + спекулярный блик */
.req-card {
  position: relative;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18,24,34,.75), rgba(14,20,30,.58)); /* стекло */
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid rgba(175,205,255,.18);
  box-shadow:
    0 14px 36px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  overflow: hidden;
}

/* Градиентный «волосяной» контур (аккуратный, премиальный) */
.req-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, rgba(120,160,255,.55), rgba(120,160,255,0) 35%, rgba(160,220,255,.55) 65%, rgba(160,220,255,0));
  -webkit-mask: 
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0); 
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* Спекулярный блик, который «скользит» при ховере */
.req-card::after{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(220,235,255,.22) 50%, transparent 65%);
  filter: blur(8px);
  transform: translateX(-130%);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  opacity:.0;
}

.req-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 22px 60px rgba(120,160,255,.26),
    0 8px 22px rgba(0,0,0,.46);
  filter: saturate(1.04);
}
.req-card:hover::after{ transform: translateX(130%); opacity:.85; }

/* Заголовок и типографика */
.req-card .title{
  font-size: 1.18rem;
  margin-bottom: .8rem;
  letter-spacing: .015em;
  color: #e7eeff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Список характеристик */
.req-list{ list-style:none; margin:0; padding:0; }
.req-list li{
  display:flex; align-items:center; gap:.55rem;
  margin:.44rem 0;
  color:#d4defa; font-size:.97rem; line-height:1.45;
}

/* Маленький светящийся маркер вместо стандартного буллета (микро-деталь) */
.req-list li::before{
  content:"";
  width:8px; height:8px; border-radius:999px; flex:0 0 8px;
  background: radial-gradient(circle at 30% 30%, #cfe5ff, #7ab1ff 55%, rgba(122,177,255,.15) 70%);
  box-shadow: 0 0 10px rgba(122,177,255,.45);
}

/* Плавное появление, лёгкий «подъём» (без JS) */
@keyframes reqFadeUp{ 
  0% { opacity:0; transform: translateY(8px) scale(.995); }
  100%{ opacity:1; transform: translateY(0)   scale(1);    }
}
.req-card{ animation: reqFadeUp .6s ease both; }
.req-card:nth-child(2){ animation-delay: .08s; }
.req-card:nth-child(3){ animation-delay: .16s; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .req-card, .req-card::after{ transition:none !important; animation:none !important; }
}

/* Респонсив: сдвиг только на десктопах */
@media (max-width: 768px){
  .sysreq-wrap{ left: 0; padding: 1.25rem 1rem; }
  .section.sysreq::before, .section.sysreq::after{ display:none; } /* орбы убираем на мобиле */
}



/* ===== Mac Intel video hero ===== */
.macintel-hero{ 
  position: relative; 
  overflow: clip; 
}

.mac-bg{ 
  position: absolute; 
  inset: 0; 
  z-index: 0; 
}
.mac-bg-video{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  display: block; 
  filter: saturate(1.05) brightness(.72);
  transform: scale(1.02); /* едва заметный зум для покрытия */
}
.mac-bg-tint{
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  z-index: 1;
  /* виньетка + стеклянный градиент */
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(16,22,30,.35) 0%, rgba(16,22,30,.65) 50%, rgba(16,22,30,.85) 100%),
    linear-gradient(180deg, rgba(10,14,20,.35), rgba(10,14,20,.65));
}

/* контент поверх видео */
.mac-wrap{ 
  position: relative; 
  z-index: 2; 
  text-align: center; 
  padding: 2.2rem 1.25rem; 

  /* центрирование */
  max-width: 1100px;
  margin: 0 auto;
}

.mac-grid{
  display: grid; 
  gap: 1.5rem; 
  margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  text-align: left;
}
.mac-card{
  padding: 1.15rem 1.4rem; 
  border-radius: 18px; 
  position: relative; 
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,24,34,.75), rgba(14,20,30,.58));
  border: 1px solid rgba(175,205,255,.18);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .26s ease, box-shadow .26s ease, filter .26s ease;
}
.mac-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 60px rgba(120,160,255,.25), 0 8px 22px rgba(0,0,0,.46);
  filter: saturate(1.04);
}
.mac-card .title{ 
  font-size: 1.12rem; 
  margin-bottom: .6rem; 
  color: #e7eeff; 
}

.mac-benefits{
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1rem; 
  margin-top: 1.1rem; 
  text-align: left;
}
.benef{ 
  padding: .9rem 1rem; 
  border-radius: 14px; 
  border: 1px solid rgba(175,205,255,.16);
  background: rgba(16,22,30,.55); 
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.b-ic{ margin-right: .4rem; }

.mac-wrap .chip-row{ margin-top: .6rem; gap: .5rem; flex-wrap: wrap; }
.mac-wrap .chip{ border-color: rgba(175,205,255,.28); background: rgba(22,28,38,.6); }

.note{ margin-top: 10px; }

/* уважение к motion / энергосбережение */
@media (prefers-reduced-motion: reduce){
  .mac-bg-video{ animation: none !important; }
}

/* мобильные: сильнее затемняем фон и убираем лишнее */
@media (max-width: 768px){
  .mac-bg-tint{
    background:
      radial-gradient(130% 90% at 50% 0%, rgba(16,22,30,.55) 0%, rgba(16,22,30,.88) 60%, rgba(16,22,30,.95) 100%),
      linear-gradient(180deg, rgba(10,14,20,.45), rgba(10,14,20,.85));
  }
}


/* ===== Sysreq video background ===== */
.req-bg{
  position: absolute; 
  inset: 0; 
  z-index: 0; 
  overflow: hidden;
}
.req-bg-video{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  filter: saturate(1.05) brightness(.7);
  transform: scale(1.02);
}
.req-bg-tint{
  position: absolute; 
  inset: 0; 
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(16,22,30,.35) 0%, rgba(16,22,30,.65) 50%, rgba(16,22,30,.85) 100%),
    linear-gradient(180deg, rgba(10,14,20,.35), rgba(10,14,20,.7));
}

/* контент поверх */
.section.sysreq{ position: relative; overflow: hidden; }
.sysreq-wrap{ position: relative; z-index: 2; }


/* ===== Promo video background ===== */
.promo-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.promo-bg-video{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) brightness(.7);
  transform: scale(1.02);
}
.promo-bg-tint{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(16,22,30,.35) 0%, rgba(16,22,30,.65) 50%, rgba(16,22,30,.85) 100%),
    linear-gradient(180deg, rgba(10,14,20,.35), rgba(10,14,20,.7));
}

/* контент поверх */
.promos{ position:relative; overflow:hidden; }
.promo-grid{ position:relative; z-index:2; }



/* ===== Global page background video ===== */
.page-bg{
  position: fixed; inset: 0;
  z-index: 0; /* ниже всего контента */
  pointer-events: none;
}
.page-bg-video{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(1.05) brightness(.72);
  transform: scale(1.02);
}

/* Базовые слои для секций поверх видео */
.section.sysreq,
.promos{
  position: relative;
  z-index: 1;      /* выше видео */
  overflow: hidden;/* аккуратная виньетка внутри секции */
}

/* Полупрозрачные вуали (разные под каждую секцию) */
.req-bg-tint,
.promo-bg-tint{
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}

.req-bg-tint{
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(16,22,30,.35) 0%, rgba(16,22,30,.65) 50%, rgba(16,22,30,.85) 100%),
    linear-gradient(180deg, rgba(10,14,20,.35), rgba(10,14,20,.70));
}
.promo-bg-tint{
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(16,22,30,.28) 0%, rgba(16,22,30,.58) 50%, rgba(16,22,30,.82) 100%),
    linear-gradient(180deg, rgba(10,14,20,.32), rgba(10,14,20,.68));
}

/* Контентные контейнеры — выше тина */
.sysreq-wrap,
.promo-grid{
  position: relative; z-index: 2;
}

/* Respect motion settings */
@media (prefers-reduced-motion: reduce){
  .page-bg-video{ animation: none !important; }
}

/* Мобильникам — сильнее затемнить (читабельность) */
@media (max-width: 768px){
  .req-bg-tint,
  .promo-bg-tint{
    background:
      radial-gradient(130% 90% at 50% 0%, rgba(16,22,30,.55) 0%, rgba(16,22,30,.9) 60%, rgba(16,22,30,.96) 100%),
      linear-gradient(180deg, rgba(10,14,20,.45), rgba(10,14,20,.9));
  }
}


/* Глобальный видеофон — всегда ПОЗАДИ контента */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -2;             /* было 0 — из-за этого перекрывал контент */
  pointer-events: none;     /* чтобы не блокировал клики */
}
.page-bg-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(.72);
  transform: scale(1.02);
}

/* Стеклянные «вуали» в секциях поверх видео */
.req-bg-tint, .promo-bg-tint{
  position: absolute; inset: 0;
  z-index: -1;              /* ниже контента секции, но выше фонового видео */
  pointer-events: none;
}

/* На всякий: контент секций в своём слое */
.section, .global-nav, header, footer {
  position: relative;       /* создаём контекст и гарантируем, что выше -1 */
  z-index: 0;
}