/* =========================================================
   LunaOS — Mobile Master Pack (≤768px / ≤420px)
   Фокус: читабельность, экономия GPU, понятные расстояния,
   уверенные зоны тапа, notch/динамик айфонов, OLED-аккуратность
========================================================= */

/* ---------- Глобальные тюнинги под мобилу ---------- */
@media (max-width: 768px){
  :root{
    /* немного «легче» стекло и тени */
    --blur: 11px;
    --r-xxl: 26px;
    --r-xl: 20px;
    --r-lg: 16px;
    --shadow-md: 0 10px 28px rgba(0,0,0,.30);
    --shadow-sm: 0 5px 16px rgba(0,0,0,.26);
    --wrap: 100%;
    --wrap-wide: 100%;
  }

  html{ font-size: 15px; }               /* базовый масштаб */
  body{
    overflow-x:hidden;
    padding-bottom: env(safe-area-inset-bottom); /* для iOS */
  }

  /* зерно и «живой» фон делаем деликатнее на OLED */
  body::after{ opacity:.16; }
  body::before{
    opacity:.08;
    filter: blur(calc(var(--bg-shimmer-blur,14px) + 2px));
    animation-duration: calc(var(--bg-shimmer-duration,80s) * .85);
  }

  /* сглаживаем «дерганья» ховеров на тач-экранах */
  @media (hover:none){
    a:hover{ text-decoration: none; }
    .cta:hover, .promo-rail .tile:hover, .game-rail .cover:hover{ transform:none; box-shadow:inherit; }
  }
}

/* ---------- Навигация / бургер ---------- */
@media (max-width: 768px){
  .global-nav{
    height: 56px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
      color-mix(in oklab, var(--bg) 72%, #fff 28%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
  }
  .global-nav.is-scrolled{ height: 52px; }

  .gn-wrap{ padding: 0 14px; gap: 10px; }

  .gn-brand{ gap:8px; }
  .gn-brand .logo-img{ height: 28px; }
  .gn-brand .brand-text{ font-size: 16px; font-weight: 700; }

  .gn-burger{ display:inline-grid; gap:4px; padding:12px; }
  .gn-burger span{ width:22px; height:2px; border-radius:2px; background:#eaf0ff; }

  .gn-links{
    position: absolute;
    top: calc(56px + 6px);
    left: 12px; right: 12px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42)),
      rgba(12,16,22,.85);
    border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 16px 36px rgba(0,0,0,.34);
  }
  .global-nav.open .gn-links{ display:flex; }

  .gn-links a{
    width:100%;
    justify-content:flex-start;
    padding: 12px;
    min-height: 44px;                 /* зона тапа */
    border-radius: 12px;
  }
}

/* ---------- Hero / типографика / CTA ---------- */
@media (max-width: 768px){
  .hero{
    min-height: calc(100dvh - 56px);
    padding: 18px 16px 24px;
  }
  .hero .glass{
    padding: 28px 18px;
    border-radius: var(--r-xl);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
  }

  .kicker{ font-size: 12px; letter-spacing:.12em; }
  .display{ font-size: clamp(28px, 8.2vw, 44px); letter-spacing:-.3px; }
  .display-sm{ font-size: clamp(22px, 6vw, 30px); }
  .subhead{ font-size: 15px; max-width: 92vw; }

  .cta-row{ gap: 10px; }
  .cta{
    padding: 12px 14px;
    min-height: 44px;
    border-radius: 12px;
  }
  .cta.primary{ box-shadow: 0 8px 24px rgba(0,0,0,.28); }

  /* видео фон в hero */
  .hero-media{ inset:0; }
  .hero-video{ object-fit:cover; object-position:center; filter:brightness(.72); transform: translateZ(0); }
}

/* ---------- Промо-сетка / карточки ---------- */
@media (max-width: 768px){
  .promos{ padding: 18px 0 6px; }
  .promo-grid{
    padding: 0 14px;
    grid-template-columns: 1fr;      /* одна колонка */
    gap: 14px;
  }
  .promo-card{
    min-height: 280px;
    border-radius: var(--r-xl);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
  .pc-body{ padding: 16px; }
  .title{ font-size: clamp(18px, 5vw, 22px); }
  .desc{ font-size: 14px; }
  .chips{ gap: 6px; }
  .chip{ padding: 5px 9px; }

  /* иконки — поменьше; укрепляю твоё правило */
  .promo-card .pc-icon img{
    width: 120px !important;
    height: 120px !important;
  }
}

/* ---------- Tech-блоки / код ---------- */
@media (max-width: 768px){
  .block{ padding: 36px 0; }
  .tech .tech-wrap{ padding: 0 14px; }
  .tech-cols{ grid-template-columns: 1fr; gap: 14px; }
  .tech-col{
    padding: 16px;
    border-radius: var(--r-lg);
  }
  .eyebrow{ font-size: 11px; letter-spacing:.14em; }
  .code{
    font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    border-radius: 12px;
  }
}

/* ---------- Горизонтальные ленты (promo-rail / game-rail) ---------- */
@media (max-width: 768px){
  .promo-rail{ padding: 22px 0; }
  .promo-rail .rail{ --gap: 12px; --duration: 28s; }
  .promo-rail .track{ will-change: transform; } /* плавность */
  .promo-rail .tile{
    min-width: 200px;
    max-width: 260px;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .promo-rail .anchor{
    margin-top: 14px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .game-rail{ padding: 36px 0; }
  .game-rail .rail{ --gap: 12px; --duration: 35s; }
  .game-rail .cover{ width: 240px; border-radius: 14px; }
}

/* ---------- Sticky download bar ---------- */
@media (max-width: 768px){
  .download-cta{ bottom: calc(10px + env(safe-area-inset-bottom)); }
  .dc-wrap{
    margin: 0 12px 10px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
  .dc-text strong{ font-size: 16px; }
  .dc-text span{ font-size: 13px; }
  .dc-actions{ gap: 8px; }
  .dc-actions .cta{ padding: 10px 12px; min-height: 42px; }
}

/* ---------- Footer ---------- */
@media (max-width: 768px){
  .footer{ margin-top: 24px; padding: 22px 0 28px; }
  .ft-wrap{ padding: 0 14px; }
  .ft-cols{ grid-template-columns: 1fr; gap: 12px; }
  .footer h5{ font-size: 13px; margin-bottom: 6px; }
  .footer li a{ font-size: 14px; }
  .ft-legal{ font-size: 12px; }
}

/* ---------- Intro (анимация «Luna OS») ---------- */
@media (max-width: 768px){
  .intro-glass{
    padding: 28px 20px;
    border-radius: var(--r-xl);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
  }
  .intro-title{ font-size: clamp(36px, 10vw, 58px); }
  .intro-sub{ font-size: 14px; }
  .intro-skip{ min-height: 44px; padding: 10px 14px; }
  .intro-orb{ filter: blur(38px); opacity:.36; }
}

/* ---------- Формы / интерактив ---------- */
@media (max-width: 768px){
  input, select, textarea, button{
    font-size: 16px;               /* анти-zoom в iOS */
  }
  .cta, button, .download-pill{
    touch-action: manipulation;
  }
}

/* ---------- Узкие экраны (≤420px) ---------- */
@media (max-width: 420px){
  html{ font-size: 14px; }

  .gn-wrap{ padding: 0 12px; }
  .gn-links{ left: 10px; right: 10px; padding: 10px; top: calc(56px + 6px); }
  .gn-links a{ padding: 11px 10px; min-height: 44px; }

  .hero{ padding: 14px 12px 22px; }
  .hero .glass{ padding: 22px 14px; }
  .display{ font-size: clamp(26px, 9vw, 36px); }
  .subhead{ font-size: 14px; }

  .promo-grid{ padding: 0 12px; gap: 12px; }
  .promo-card{ min-height: 250px; }
  .pc-body{ padding: 14px; }
  .title{ font-size: 18px; }
  .desc{ font-size: 13px; }

  .promo-rail .tile{ min-width: 180px; }
  .game-rail .cover{ width: 200px; }

  .dc-wrap{ margin: 0 10px 10px; padding: 10px; }
}

/* ---------- Аксессибилити / reduce-motion / контраст ---------- */
@media (max-width: 768px){
  :focus-visible{
    outline: 2px solid color-mix(in oklab, var(--brand-500) 70%, #fff 30%);
    outline-offset: 2px; border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(122,225,255,.18);
  }
}
@media (prefers-reduced-motion: reduce){
  .orb, .intro-orb, .cta::after, body::before, body::after{ animation: none !important; }
}

/* ---------- Fallback: без backdrop-filter ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  @media (max-width: 768px){
    .glass,
    .hero .glass,
    .promo-card,
    .tech-col,
    .dc-wrap,
    .intro-glass,
    .gn-links{
      background: linear-gradient(180deg, rgba(30,36,48,.88), rgba(18,22,30,.80));
      border-color: rgba(255,255,255,.12);
    }
  }
}