/* ============================================
   404 AFFILIATE /bans — PREMIUM DARK retrofit v3
   - typography brutal big light Helvetica
   - кнопки premium cyan gradient + glow
   - subtle radius (не плоские 2010)
   - dotted grid background + cyan radial glows
   - motion: hero fade-up on load + IntersectionObserver reveal
   - НИКАКОЙ логики Stripe/Pixel/CAPI не трогаем
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Press+Start+2P&display=swap');

:root {
  --dt-cyan: #00ECFF;
  --dt-cyan-2: #08ADFF;
  --dt-cyan-deep: #00C9DA;
  --dt-cyan-soft: rgba(0, 236, 255, 0.18);
  --dt-cyan-glow: rgba(0, 236, 255, 0.35);
  --dt-cyan-tint: rgba(0, 236, 255, 0.04);
  --dt-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dt-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --dt-pixel: 'Press Start 2P', 'IBM Plex Mono', monospace;
  --dt-radius-sm: 6px;
  --dt-radius: 10px;
  --dt-radius-lg: 14px;
}

/* ============================================
   1. ШРИФТЫ — IBM Plex Mono для UI/body
   ============================================ */
body, p, a, span, li, label, input, textarea {
  font-family: var(--dt-mono);
}

/* ============================================
   2. ЗАГОЛОВКИ — Helvetica light + UPPERCASE + brutal-huge
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--dt-display) !important;
  letter-spacing: -0.015em !important;
  text-transform: uppercase !important;
}
h1 {
  font-size: clamp(44px, 8.2vw, 124px) !important;
  line-height: 0.98 !important;
  font-weight: 400 !important;
}
h1 span { font-weight: 400 !important; }
h2 {
  font-size: clamp(34px, 5vw, 84px) !important;
  line-height: 1.04 !important;
  font-weight: 300 !important;
}
h3 {
  font-size: clamp(22px, 3vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
}
h4 { font-weight: 400 !important; }

/* ============================================
   3. ФОН СТРАНИЦЫ — чисто чёрный + звёздное небо
   Звёзды генерятся через JS (см. dt-overlay-init).
   Здесь — только базовый фон.
   ============================================ */
body {
  position: relative;
  background: #000 !important;
  background-attachment: fixed !important;
}
/* Контейнер для JS-сгенерированных звёзд.
   Position absolute, начинается с top: 100vh — то есть звёзд НЕТ
   в области первого экрана (header + announcement + hero).
   Они появляются только когда пользователь проскроллил past hero */
.dt-stars-layer {
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dt-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  will-change: opacity;
}
@keyframes dt-twinkle {
  0%, 100% { opacity: var(--dt-op, 0.6); }
  50%      { opacity: 0.15; }
}
.dt-star.dt-twinkle {
  animation: dt-twinkle var(--dt-dur, 4s) ease-in-out infinite;
  animation-delay: var(--dt-delay, 0s);
}
/* Чтобы все главные контейнеры были выше звёзд */
main, section, header, nav, footer {
  position: relative;
  z-index: 2;
}
/* Все секции прозрачные — звёзды просвечивают, но physically они только ПОСЛЕ hero
   (см. .dt-stars-layer top:100vh выше) */
section.bg-black { background-color: transparent !important; }
main.bg-black { background-color: transparent !important; }

/* ============================================
   4. КНОПКИ ПОКУПКИ — PREMIUM CYAN GRADIENT
   Селектор ловит все 8 buy-CTA: text-black + group + inline-flex
   :not([data-state]) исключает Radix accordion
   ============================================ */
button.group.inline-flex.text-black:not([data-state]),
button.group.text-black:not([data-state]) {
  background: linear-gradient(180deg, #00ECFF 0%, #00C9DA 100%) !important;
  background-image: linear-gradient(180deg, #00ECFF 0%, #00C9DA 100%) !important;
  border-radius: var(--dt-radius) !important;
  border: 1px solid rgba(0, 236, 255, 0.6) !important;
  padding: 18px 32px !important;
  font-family: var(--dt-mono) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #001317 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 10px 30px rgba(0, 236, 255, 0.30),
    0 0 0 1px rgba(0, 236, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s ease,
              filter 0.18s ease !important;
}
button.group.inline-flex.text-black:not([data-state]):hover,
button.group.text-black:not([data-state]):hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(0, 236, 255, 0.45),
    0 0 0 1px rgba(0, 236, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}
button.group.inline-flex.text-black:not([data-state]):active {
  transform: translateY(0);
  filter: brightness(0.95);
}
/* Sheen эффект — лёгкий блик при hover (через ::before) */
button.group.inline-flex.text-black:not([data-state])::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
button.group.inline-flex.text-black:not([data-state]):hover::before {
  left: 125%;
}

/* Inner badges «17 €» внутри buy-кнопок */
button.group.inline-flex.text-black:not([data-state]) span[class*="rounded"],
button.group.text-black:not([data-state]) span[class*="bg-"] {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #001317 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

/* Header CTA — компактнее */
header button.group.inline-flex.text-black:not([data-state]),
nav button.group.inline-flex.text-black:not([data-state]) {
  padding: 10px 22px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ============================================
   5. КАРТОЧКИ И РАМКИ — premium dark glass
   Возвращаем мягкие радиусы (не острые)
   ============================================ */
.rounded-full,
[class*="rounded-full"] {
  border-radius: 9999px !important; /* пилюли остаются пилюлями для бейджей */
}
.rounded-lg, [class*="rounded-lg"] { border-radius: var(--dt-radius) !important; }
.rounded-xl, [class*="rounded-xl"] { border-radius: var(--dt-radius-lg) !important; }
.rounded-2xl, [class*="rounded-2xl"] { border-radius: 18px !important; }
.rounded-3xl, [class*="rounded-3xl"] { border-radius: 22px !important; }
.rounded-md, .rounded { border-radius: var(--dt-radius-sm) !important; }

/* Card-like контейнеры (с border) — добавим subtle cyan-tint фон + soft shadow */
[class*="border"][class*="rounded-"]:not(button):not(svg):not(input) {
  background-image: linear-gradient(
    180deg,
    rgba(0, 236, 255, 0.025) 0%,
    rgba(0, 0, 0, 0.0) 100%
  ) !important;
  border-color: rgba(0, 236, 255, 0.16) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 236, 255, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Бейджи типа «КОНФИДЕНЦИАЛЬНО», «MINI-КУРС META ADS», «СОСТАВ КУРСА» — премиум */
[class*="rounded-full"][class*="border"],
[class*="rounded-full"][class*="bg-"] {
  background: linear-gradient(180deg, rgba(0, 236, 255, 0.14) 0%, rgba(0, 236, 255, 0.06) 100%) !important;
  border: 1px solid rgba(0, 236, 255, 0.35) !important;
  box-shadow:
    0 0 24px rgba(0, 236, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================
   6. SECTION ДИВАЙДЕРЫ — тонкие cyan-линии
   ============================================ */
section + section {
  position: relative;
}
section + section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(60%, 700px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 236, 255, 0.25), transparent);
  pointer-events: none;
}

/* ============================================
   7. HERO VIDEO BACKGROUND
   ============================================ */
.dt-hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
}
.dt-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 90% 70% at center 40%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, transparent 25%, transparent 70%, #000 100%);
}
/* Спрятать canvas-волны и его обёртку */
div.relative.flex.min-h-screen canvas {
  display: none !important;
}
div.relative.flex.min-h-screen > div.pointer-events-none.absolute.inset-0:has(canvas) {
  display: none !important;
}
div.relative.flex.min-h-screen > .relative {
  z-index: 5 !important;
  position: relative;
}

/* Лёгкая тень для hero текста — без жирной halo, только базовый контраст */
div.relative.flex.min-h-screen h1,
div.relative.flex.min-h-screen p {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/* Cyan span в H1 — solid #00ECFF (gradient-трюк ломается, рендерим простым цветом) */
div.relative.flex.min-h-screen h1 .bg-clip-text,
div.relative.flex.min-h-screen h1 [style*="00ECFF"] {
  background-image: none !important;
  background: none !important;
  -webkit-text-fill-color: #00ECFF !important;
  color: #00ECFF !important;
  filter: none !important;
}

/* ============================================
   8. CYAN-АКЦЕНТ В H1 (legacy, обнулено правилом выше)
   ============================================ */
h1 .bg-clip-text[style*="00ECFF"] {
  background-image: none !important;
}

/* ============================================
   9. CONTAINERS — больше воздуха в hero
   ============================================ */
div.relative.flex.min-h-screen .max-w-3xl,
div.relative.flex.min-h-screen .max-w-4xl,
div.relative.flex.min-h-screen .max-w-5xl {
  max-width: 1200px !important;
}

/* ============================================
   10. MOTION — fade-up для hero (на load) +
       IntersectionObserver-классы для секций
   ============================================ */
@keyframes dt-fadeup {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dt-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dt-blurin {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Hero — animate on load */
div.relative.flex.min-h-screen h1 {
  animation: dt-blurin 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
div.relative.flex.min-h-screen h1 ~ p,
div.relative.flex.min-h-screen .text-base,
div.relative.flex.min-h-screen .text-sm {
  animation: dt-fadeup 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
div.relative.flex.min-h-screen button {
  animation: dt-fadeup 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both;
}

/* Reveal-классы для секций — JS добавит .dt-in-view */
.dt-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.dt-reveal.dt-in-view {
  opacity: 1;
  transform: translateY(0);
}
.dt-reveal-delay-1.dt-reveal { transition-delay: 0.1s; }
.dt-reveal-delay-2.dt-reveal { transition-delay: 0.2s; }
.dt-reveal-delay-3.dt-reveal { transition-delay: 0.3s; }

/* ============================================
   10b. TYPEWRITER эффект на H2 секций (как у DT)
   ============================================ */
.dt-tw-hidden { visibility: hidden; }
.dt-tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  margin-left: 0.06em;
  background: #00ECFF;
  vertical-align: text-bottom;
  box-shadow: 0 0 8px rgba(0, 236, 255, 0.6);
  animation: dt-tw-blink 0.7s steps(1) infinite;
}
@keyframes dt-tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================
   11. MOBILE — адаптация
   ============================================ */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(38px, 11vw, 72px) !important;
    line-height: 1.0 !important;
  }
  h2 {
    font-size: clamp(28px, 8vw, 52px) !important;
    line-height: 1.05 !important;
  }
  h3 {
    font-size: clamp(20px, 5vw, 32px) !important;
  }
  button.group.inline-flex.text-black:not([data-state]),
  button.group.text-black:not([data-state]) {
    padding: 14px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    border-radius: 9px !important;
  }
  header button.group.inline-flex.text-black:not([data-state]),
  nav button.group.inline-flex.text-black:not([data-state]) {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
  /* Mobile: cover (заполняет весь hero), голова прижата к верху,
     тело растягивается ниже и становится фоном для текста */
  .dt-hero-video {
    object-fit: cover !important;
    object-position: center top !important;
  }
  /* Overlay: верх (голова) почти прозрачный, низ (под текстом) затемнён */
  .dt-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0)    28%,
        rgba(0,0,0,0.50) 50%,
        rgba(0,0,0,0.72) 72%,
        rgba(0,0,0,0.92) 90%,
        #000 100%
      );
  }
  /* Текст в нижней половине hero — НА туловище, не на лице */
  div.relative.flex.min-h-screen > .relative {
    justify-content: flex-end !important;
    padding-bottom: 5vh !important;
    padding-top: 0 !important;
  }
  /* Лёгкая тень для контраста (без halo) */
  div.relative.flex.min-h-screen h1,
  div.relative.flex.min-h-screen p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  }
  /* На мобиле меньше dot-grid плотности */
  body::before {
    background-size: 28px 28px;
  }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(32px, 13vw, 56px) !important; }
  body { letter-spacing: 0; }
}

/* ============================================
   12. PERFORMANCE: respect reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .dt-hero-video { display: none !important; }
  .dt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  div.relative.flex.min-h-screen h1,
  div.relative.flex.min-h-screen p,
  div.relative.flex.min-h-screen button {
    animation: none !important;
  }
  div.relative.flex.min-h-screen.overflow-hidden::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at center, rgba(0,236,255,0.08), transparent 60%),
      linear-gradient(180deg, #000, #050a0d 50%, #000);
  }
}