:root {
  --bg-dark: #08060f;
  --bg-card: rgba(18, 14, 28, 0.7);
  --bg-card-hover: rgba(32, 24, 52, 0.9);

  --accent-purple: #8b5cf6;
  --accent-purple-glow: rgba(139, 92, 246, 0.4);
  --accent-purple-hover: #7c3aed;
  --accent-green: #10b981;

  --text-main: #f3f3f7;
  --text-muted: #9490ad;
  --border-color: rgba(255, 255, 255, 0.08);

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-height: 70px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ВКЛЮЧАЕМ ПОПРАНИЧНУЮ ПРИВЯЗКУ (SCROLL SNAP) */
html {
  background-color: var(--bg-dark);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory; /* Страницы магнитом притягиваются при скролле */
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* ДИНАМИЧЕСКИЙ ФОН И CANVAS */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* Анимированная светящаяся сетка на фоне */
.page-bg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 50px 50px, 50px 50px;
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.02); }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* НАВИГАЦИЯ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background-color: rgba(8, 6, 15, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
}

.logo span { color: var(--accent-purple); }

.nav-links { display: flex; gap: 30px; }
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }

/* КНОПКА IP */
.btn-copy-ip {
  position: relative;
  overflow: hidden;
  user-select: none;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #fff;
  padding: 9px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.btn-copy-ip i {
  color: var(--accent-purple);
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-copy-ip:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: var(--accent-purple);
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.4);
}

.btn-copy-ip:active, .btn-primary:active {
  transform: scale(0.95) !important;
}

.btn-copy-ip.copied, .btn-primary.copied {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: var(--accent-green) !important;
  color: #a7f3d0 !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.4) !important;
}

.btn-copy-ip.copied i, .btn-primary.copied i {
  color: var(--accent-green) !important;
  transform: scale(1.25) rotate(360deg);
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleAnimation 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* КОНТЕЙНЕР СЕКЦИЙ И СТРАНИЦЫ (SCROLL SNAP ITEMS) */
.page-main {
  position: relative;
  width: 100%;
  z-index: 2;
}

.site-section {
  position: relative;
  height: 100vh; /* Каждый блок строго высотой в один экран */
  min-height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--nav-height) + 20px) 0 40px;
  overflow: hidden;

  /* Точка фиксации страницы при скролле */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* СВЕТЯЩИЕСЯ ОРБЫ НА ФОНЕ */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 10s infinite alternate ease-in-out;
}

@keyframes floatOrb {
  0% { transform: scale(1) translate(0, 0); opacity: 0.4; }
  50% { transform: scale(1.2) translate(30px, -30px); opacity: 0.7; }
  100% { transform: scale(0.9) translate(-20px, 20px); opacity: 0.5; }
}

.orb-1 { width: 500px; height: 500px; background: rgba(139, 92, 246, 0.25); top: 10%; left: 50%; transform: translateX(-50%); }
.orb-2 { width: 450px; height: 450px; background: rgba(124, 58, 237, 0.2); bottom: 10%; right: 5%; }
.orb-3 { width: 400px; height: 400px; background: rgba(168, 85, 247, 0.18); top: 20%; left: 5%; }

/* ЗАГОЛОВКИ */
.section-header {
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.section-badge {
  display: inline-block;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 4px;
}

/* HERO */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}

.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
}

.hero-title { font-size: 3.6rem; font-weight: 900; line-height: 1.1; margin-bottom: 16px; }
.hero-title span {
  background: linear-gradient(135deg, #c4b5fd 0%, var(--accent-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle { color: var(--text-muted); font-size: 1.05rem; margin: 0 auto 28px; max-width: 600px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: 12px; font-size: 0.92rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: all 0.25s ease;
  position: relative; overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-hover) 100%);
  color: #fff; border: none; box-shadow: 0 4px 20px var(--accent-purple-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5); }

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05); color: var(--text-main); border: 1px solid var(--border-color);
}
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.agreement-hero-link { color: #e5dbf5; background: rgba(113,84,153,.16); border-color: rgba(167,139,250,.34); }
.agreement-hero-link:hover { background: rgba(113,84,153,.28); border-color: rgba(190,168,235,.62); }

/* CARDS GRID */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.feature-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  text-decoration: none;
  color: var(--text-main);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 15px rgba(139, 92, 246, 0.2);
}

.agreement-feature-card { border-color: rgba(167,139,250,.28); background: linear-gradient(145deg,rgba(58,43,79,.38),var(--bg-card) 58%); }
.agreement-feature-card .card-tag { color: #d6c9ec; background: rgba(167,139,250,.11); }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.card-icon {
  width: 44px; height: 44px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #c4b5fd; transition: 0.3s;
}

.feature-card:hover .card-icon { background: var(--accent-purple); color: #fff; }
.card-tag { font-size: 0.72rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); padding: 3px 8px; border-radius: 10px; }

.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; color: #fff; }
.feature-card p { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 20px; flex-grow: 1; }
.card-footer { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: #c4b5fd; }

/* ГАЛЕРЕЯ */
.flex-header { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }

.bento-gallery-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 175px);
  gap: 16px;
  position: relative;
  z-index: 2;
}

.bento-item {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #110e1a;
}

.bento-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bento-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 4, 8, 0.95) 0%, rgba(5, 4, 8, 0.1) 60%, transparent 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bento-tag { font-size: 0.68rem; color: #c4b5fd; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.bento-content h4 { font-size: 1.05rem; font-weight: 700; color: #fff; }

.bento-item:hover img { transform: scale(1.08); }
.bento-video-badge { position:absolute; top:14px; left:14px; z-index:2; padding:6px 9px; color:#fff; background:rgba(10,8,16,.78); border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:.65rem; font-weight:700; backdrop-filter:blur(8px); }
.home-countdown-section { width:100%; margin:0 auto 54px; padding:0; text-align:left; transform:translateY(-25px); }
.home-countdown-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:11px; }
.home-countdown-card { position:relative; isolation:isolate; overflow:hidden; padding:clamp(18px,3vw,27px); background:radial-gradient(ellipse at 86% 0,rgba(139,92,246,.17),transparent 55%),linear-gradient(135deg,rgba(27,20,42,.96),rgba(12,10,18,.96)); border:1px solid rgba(167,139,250,.3); border-radius:17px; box-shadow:0 14px 38px rgba(0,0,0,.2); transition:border-color .3s,box-shadow .3s,transform .3s; }
.home-countdown-card::after { position:absolute; z-index:-1; right:-45px; bottom:-75px; width:190px; height:190px; content:""; border:1px solid rgba(167,139,250,.1); border-radius:50%; box-shadow:0 0 0 19px rgba(167,139,250,.025),0 0 0 39px rgba(167,139,250,.02); pointer-events:none; }
.home-countdown-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.home-countdown-heading .section-badge { margin:0; }
.home-countdown-status { color:#a99db8; font-size:.65rem; font-weight:750; }
.home-countdown-title { margin:12px 0 3px; color:#f6f2ff; font-size:clamp(1.25rem,2.7vw,1.7rem); }
.home-countdown-summary { margin:0 0 14px; color:var(--text-muted,#a9a1ba); font-size:.82rem; }
.home-countdown-timer { display:flex; flex-wrap:wrap; gap:8px; }
.home-countdown-unit { min-width:65px; padding:8px 10px; text-align:center; background:rgba(7,6,12,.52); border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.home-countdown-unit strong,.home-countdown-unit small { display:block; }
.home-countdown-unit strong { color:#fff; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.home-countdown-unit small { margin-top:2px; color:#a99fc0; font-size:.59rem; }
.home-countdown-date { margin:12px 0 0; color:#90869b; font-size:.66rem; }
.home-countdown-finished { margin:14px 0 0; color:#b6f0ca; font-weight:700; }
.home-countdown-card.is-near { border-color:rgba(167,139,250,.52); }
.home-countdown-card.is-imminent { border-color:rgba(233,209,121,.56); box-shadow:0 12px 38px rgba(0,0,0,.22),0 0 25px rgba(233,209,121,.08); }
.home-countdown-card.is-imminent .home-countdown-status { color:#e9d179; }
.home-countdown-card.is-starting { border-color:rgba(248,170,104,.72); box-shadow:0 12px 42px rgba(0,0,0,.24),0 0 35px rgba(248,170,104,.13); animation:countdown-arrival 2.8s ease-in-out infinite; }
.home-countdown-card.is-starting .home-countdown-status { color:#ffc28c; }
.home-countdown-card.is-starting .home-countdown-unit { border-color:rgba(248,170,104,.22); }
.home-countdown-card.is-live { border-color:rgba(106,205,151,.45); }
.home-countdown-card.is-live .home-countdown-status { color:#a7e5bd; }
.home-countdown-seal { display:inline-grid; place-items:center; font-size:1.25rem; filter:drop-shadow(0 0 10px rgba(255,255,255,.35)); animation:seal-arrival 1.1s ease-in-out infinite alternate; }
.home-countdown-seal[hidden] { display:none; }
.home-countdown-card.is-phase-week { border-color:rgba(167,139,250,.48); }
.home-countdown-card.is-phase-three-days { border-color:rgba(129,164,245,.58); box-shadow:0 14px 38px rgba(0,0,0,.22),0 0 28px rgba(129,164,245,.1); }
.home-countdown-card.is-phase-day { border-color:rgba(197,139,250,.64); box-shadow:0 14px 40px rgba(0,0,0,.22),0 0 30px rgba(197,139,250,.13); }
.home-countdown-card.is-phase-half-day { border-color:rgba(235,173,126,.7); box-shadow:0 14px 42px rgba(0,0,0,.24),0 0 32px rgba(235,173,126,.14); }
.home-countdown-card.is-phase-hour,.home-countdown-card.is-phase-half-hour { border-color:rgba(248,170,104,.78); box-shadow:0 14px 46px rgba(0,0,0,.25),0 0 38px rgba(248,170,104,.2); animation:countdown-arrival 2s ease-in-out infinite; }
.home-countdown-card.is-phase-minute { border-color:rgba(246,112,143,.83); background:radial-gradient(ellipse at 84% 0,rgba(227,76,126,.26),transparent 57%),linear-gradient(135deg,rgba(40,17,35,.97),rgba(12,10,18,.98)); box-shadow:0 16px 52px rgba(0,0,0,.3),0 0 42px rgba(246,112,143,.22); animation:countdown-arrival 1.25s ease-in-out infinite; }
.home-countdown-card.is-phase-ten-seconds { border-color:rgba(255,119,137,.95); background:radial-gradient(ellipse at 50% 0,rgba(242,80,118,.32),transparent 65%),linear-gradient(135deg,rgba(47,15,35,.98),rgba(14,8,18,.98)); box-shadow:0 18px 58px rgba(0,0,0,.35),0 0 52px rgba(255,98,127,.3); animation:countdown-arrival .72s ease-in-out infinite; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { color:#ffd6df; font-size:1.55rem; text-shadow:0 0 15px rgba(255,126,151,.75); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-status,.home-countdown-card.is-phase-minute .home-countdown-status { color:#ffb5c3; }
.home-countdown-card.is-phase-live { border-color:rgba(106,205,151,.55); background:radial-gradient(ellipse at 86% 0,rgba(72,180,125,.17),transparent 58%),linear-gradient(135deg,rgba(18,33,29,.96),rgba(12,10,18,.96)); }
@keyframes seal-arrival { from { transform:translateY(2px) rotate(-8deg); } to { transform:translateY(-4px) rotate(8deg); } }
@keyframes countdown-arrival { 0%,100% { box-shadow:0 12px 42px rgba(0,0,0,.24),0 0 22px rgba(248,170,104,.09); } 50% { box-shadow:0 12px 42px rgba(0,0,0,.24),0 0 38px rgba(248,170,104,.2); } }
@media(max-width:620px) { .home-countdown-section { margin-bottom:36px; transform:translateY(-12px); } .home-countdown-card { padding:16px; } .home-countdown-unit { min-width:58px; padding:7px 8px; } }
@media(prefers-reduced-motion:reduce) { .home-countdown-card { transition:none; } .home-countdown-card.is-starting,.home-countdown-card.is-phase-hour,.home-countdown-card.is-phase-half-hour,.home-countdown-card.is-phase-minute,.home-countdown-card.is-phase-ten-seconds,.home-countdown-seal { animation:none; } }
.lore-inline-reference { color:#c9b4ff; text-decoration-color:rgba(201,180,255,.45); text-underline-offset:3px; font-weight:650; }
.lore-inline-reference:hover { color:#fff; text-decoration-color:#fff; }
.lore-link-preview { position:fixed; z-index:7000; width:min(340px,calc(100vw - 24px)); display:grid; gap:6px; padding:12px; color:#e8e1f2; background:rgba(18,14,27,.97); border:1px solid rgba(167,139,250,.35); border-radius:12px; box-shadow:0 12px 38px rgba(0,0,0,.42); pointer-events:none; }
.lore-link-preview[hidden] { display:none; }
.lore-link-preview img { width:100%; max-height:125px; object-fit:cover; border-radius:7px; }
.lore-link-preview small { color:#bca9e4; font-size:.64rem; }
.lore-link-preview strong { color:#fff; font-size:.82rem; line-height:1.35; }
.lore-link-preview span { color:#b8aec5; font-size:.72rem; line-height:1.5; }

/* The countdown changes layout as launch gets close, so the final minute reads at a glance. */
.home-countdown-progress { width:min(100%,620px); height:5px; overflow:hidden; margin:0 0 13px; background:rgba(255,255,255,.09); border-radius:99px; }
.home-countdown-progress-fill { display:block; width:100%; height:100%; transform-origin:left center; background:linear-gradient(90deg,#8b5cf6,#a78bfa); border-radius:inherit; transition:transform .8s linear,background-color .3s; }
.home-countdown-card.is-phase-day .home-countdown-progress-fill,.home-countdown-card.is-phase-half-day .home-countdown-progress-fill { background:linear-gradient(90deg,#fbbf24,#fb923c); }
.home-countdown-card.is-phase-hour .home-countdown-progress-fill,.home-countdown-card.is-phase-half-hour .home-countdown-progress-fill { background:linear-gradient(90deg,#fb923c,#fb7185); }
.home-countdown-card.is-phase-minute .home-countdown-progress-fill,.home-countdown-card.is-phase-ten-seconds .home-countdown-progress-fill { background:linear-gradient(90deg,#fb7185,#f43f5e); box-shadow:0 0 16px rgba(251,113,133,.9); }
.home-countdown-card.is-phase-live .home-countdown-progress-fill { background:#34d399; }
.home-countdown-card.is-phase-half-day { background:radial-gradient(ellipse at 88% 0,rgba(124,107,246,.28),transparent 58%),linear-gradient(130deg,#171b37,#100d1c); }
.home-countdown-card.is-phase-day { background:radial-gradient(ellipse at 88% 0,rgba(245,158,11,.24),transparent 58%),linear-gradient(130deg,#291d28,#100d1c); }
.home-countdown-card.is-phase-hour,.home-countdown-card.is-phase-half-hour { border-width:2px; background:radial-gradient(ellipse at 50% 0,rgba(251,146,60,.27),transparent 66%),linear-gradient(130deg,#2b1b25,#100c18); }
.home-countdown-card.is-phase-minute { grid-column:1/-1; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-width:2px; background:radial-gradient(ellipse at 50% 0,rgba(244,63,94,.34),transparent 70%),linear-gradient(135deg,#351328,#140d1b); }
.home-countdown-card.is-phase-minute .home-countdown-heading { width:100%; }
.home-countdown-card.is-phase-minute .home-countdown-title { font-size:clamp(1.8rem,5vw,3rem); letter-spacing:.02em; }
.home-countdown-card.is-phase-minute .home-countdown-summary,.home-countdown-card.is-phase-minute .home-countdown-date { display:none; }
.home-countdown-card.is-phase-minute .home-countdown-progress { width:min(100%,680px); height:7px; margin:0 0 18px; }
.home-countdown-card.is-phase-minute .home-countdown-timer { justify-content:center; gap:12px; }
.home-countdown-card.is-phase-minute .home-countdown-unit { min-width:92px; padding:12px 16px; border-color:rgba(255,167,183,.3); background:rgba(20,8,18,.7); }
.home-countdown-card.is-phase-minute .home-countdown-unit strong { color:#ffe1e8; font-size:clamp(2rem,6vw,3.5rem); text-shadow:0 0 18px rgba(251,113,133,.35); }
.home-countdown-card.is-phase-minute .home-countdown-unit small { color:#ffc0cf; font-size:.7rem; }
.home-countdown-card.is-phase-ten-seconds { grid-column:1/-1; min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:2px solid #ff6682; background:radial-gradient(ellipse at 50% 42%,rgba(244,63,94,.3),transparent 42%),linear-gradient(145deg,#351126,#100b18 70%); box-shadow:0 18px 70px rgba(244,63,94,.2),inset 0 0 70px rgba(244,63,94,.08); }
.home-countdown-card.is-phase-ten-seconds::after { right:50%; bottom:auto; top:50%; width:260px; height:260px; transform:translate(50%,-50%); border-color:rgba(255,133,157,.22); box-shadow:0 0 0 30px rgba(255,133,157,.035),0 0 0 60px rgba(255,133,157,.025),0 0 80px rgba(255,91,125,.12); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-heading { width:100%; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-heading .section-badge { color:#ffe4ea; background:rgba(244,63,94,.2); border-color:rgba(255,161,179,.38); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-title { margin:5px 0 0; color:#fff; font-size:clamp(1.25rem,3.5vw,2rem); text-transform:uppercase; letter-spacing:.14em; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-summary,.home-countdown-card.is-phase-ten-seconds .home-countdown-date { display:none; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-progress { width:min(100%,480px); height:9px; margin:16px 0 5px; order:3; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-timer { position:relative; z-index:1; min-height:175px; align-items:center; justify-content:center; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-0,.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-1,.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-2 { display:none; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 { min-width:0; padding:0 18px; background:transparent; border:0; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { color:#fff4f6; font-size:clamp(7rem,24vw,12rem); line-height:.95; letter-spacing:-.08em; text-shadow:0 0 28px rgba(255,87,122,.68),0 0 80px rgba(255,87,122,.32); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 small { margin-top:9px; color:#ffc3d0; font-size:.75rem; letter-spacing:.28em; text-transform:uppercase; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-status { padding:6px 12px; color:#fff; background:rgba(244,63,94,.22); border:1px solid rgba(255,145,165,.38); border-radius:99px; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-seal { margin-left:auto; }
.home-countdown-card.is-phase-live { grid-column:1/-1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-width:2px; }
.home-countdown-card.is-phase-live .home-countdown-title { font-size:clamp(1.8rem,5vw,3rem); }
.home-countdown-card.is-phase-live .home-countdown-finished { padding:10px 18px; color:#c8ffe0; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.25); border-radius:99px; }
@media(max-width:620px) {
  .home-countdown-card.is-phase-minute { min-height:200px; }
  .home-countdown-card.is-phase-minute .home-countdown-unit { min-width:68px; padding:9px 10px; }
  .home-countdown-card.is-phase-ten-seconds { min-height:310px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-timer { min-height:145px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { font-size:clamp(6rem,34vw,9rem); }
}
@media(prefers-reduced-motion:reduce) {
  .home-countdown-progress-fill { transition:none; }
  .home-countdown-card.is-phase-ten-seconds { animation:none; }
}

/* Ten-second launch scene: the entire card shifts through a short visual sequence. */
.home-countdown-card.is-phase-ten-seconds { position:relative; overflow:hidden; transition:background .45s,border-color .35s,box-shadow .35s,transform .35s; animation:countdown-launch-pulse .9s ease-in-out infinite alternate; }
.home-countdown-card.is-phase-ten-seconds::before { position:absolute; z-index:-2; inset:-70%; content:""; opacity:.24; background:conic-gradient(from 0deg,transparent 0 58%,rgba(255,255,255,.16) 68%,transparent 79% 100%); animation:countdown-launch-orbit 8s linear infinite; pointer-events:none; }
.home-countdown-final-label { position:relative; z-index:1; margin:14px 0 5px; color:#e7d4ff; font-size:.68rem; font-weight:850; letter-spacing:.3em; text-align:center; text-shadow:0 0 16px rgba(189,147,255,.6); }
.home-countdown-final-label[hidden],.home-countdown-launch-rail[hidden] { display:none!important; }
.home-countdown-launch-rail { position:relative; z-index:1; display:flex; width:min(100%,480px); gap:5px; margin:0 auto 6px; }
.home-countdown-launch-rail span { flex:1; height:4px; background:rgba(255,255,255,.13); border-radius:99px; transition:background .25s,box-shadow .25s,transform .25s; }
.home-countdown-launch-rail span.is-passed { background:rgba(255,255,255,.42); }
.home-countdown-launch-rail span.is-current { background:#fff; transform:scaleY(2); box-shadow:0 0 12px rgba(255,255,255,.85); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { display:block; animation:countdown-number-arrive .58s cubic-bezier(.16,1,.3,1) both; }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="10"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="9"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="8"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="7"] { border-color:#9c8aff; background:radial-gradient(ellipse at 50% 42%,rgba(126,93,255,.38),transparent 48%),linear-gradient(145deg,#211a48,#100b1b 72%); box-shadow:0 18px 70px rgba(111,85,255,.24),inset 0 0 70px rgba(130,103,255,.09); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="6"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="5"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="4"] { border-color:#ffad65; background:radial-gradient(ellipse at 50% 42%,rgba(255,145,63,.4),transparent 48%),linear-gradient(145deg,#382019,#140d18 72%); box-shadow:0 18px 70px rgba(255,126,61,.22),inset 0 0 70px rgba(255,154,83,.1); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="3"],.home-countdown-card.is-phase-ten-seconds[data-countdown-second="2"] { border-color:#ff6282; background:radial-gradient(ellipse at 50% 42%,rgba(255,56,106,.43),transparent 48%),linear-gradient(145deg,#3b102b,#150a18 72%); box-shadow:0 20px 76px rgba(255,50,105,.3),inset 0 0 80px rgba(255,71,122,.12); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] { border-color:#fff1c2; background:radial-gradient(ellipse at 50% 42%,rgba(255,239,190,.58),transparent 44%),linear-gradient(145deg,#552b38,#17101d 72%); box-shadow:0 0 110px rgba(255,217,152,.48),inset 0 0 100px rgba(255,228,171,.19); animation:countdown-launch-critical .42s ease-in-out infinite alternate; }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] .home-countdown-final-label { color:#fff9e9; font-size:.85rem; text-shadow:0 0 22px rgba(255,233,175,.95); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] .home-countdown-unit-3 strong { color:#fffdf5; text-shadow:0 0 32px rgba(255,229,166,.95),0 0 100px rgba(255,210,128,.65); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] .home-countdown-launch-rail span.is-current { background:#fff6db; box-shadow:0 0 18px rgba(255,243,202,1); }
.home-countdown-card.is-phase-live { overflow:hidden; background:radial-gradient(ellipse at 50% 20%,rgba(73,233,164,.3),transparent 62%),linear-gradient(145deg,#102c27,#100d18 72%); box-shadow:0 0 70px rgba(52,211,153,.2); }
.home-countdown-card.is-phase-live .home-countdown-title { color:#d7ffe9; text-shadow:0 0 26px rgba(92,244,174,.35); }
@keyframes countdown-launch-orbit { to { transform:rotate(360deg); } }
@keyframes countdown-launch-pulse { from { transform:scale(1); } to { transform:scale(1.012); } }
@keyframes countdown-launch-critical { from { transform:scale(1.005); filter:brightness(1); } to { transform:scale(1.025); filter:brightness(1.2); } }
@keyframes countdown-number-arrive { 0% { opacity:0; transform:translateY(24px) scale(.62); filter:blur(8px); } 70% { opacity:1; transform:translateY(-4px) scale(1.06); filter:blur(0); } 100% { transform:translateY(0) scale(1); } }
@media(max-width:620px) {
  .home-countdown-final-label { font-size:.6rem; letter-spacing:.22em; }
  .home-countdown-launch-rail { gap:3px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-countdown-card.is-phase-ten-seconds,.home-countdown-card.is-phase-ten-seconds::before,.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { animation:none!important; transition:none!important; }
  .home-countdown-launch-rail span { transition:none; }
}

/* АРХИВ / 1 СЕЗОН */
.season-banner {
  background: linear-gradient(135deg, rgba(20, 16, 32, 0.85) 0%, rgba(12, 9, 20, 0.95) 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 24px;
  padding: 35px 40px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(12px);
}

.season-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 35px;
  align-items: center;
}

.season-info h2 { font-size: 2.1rem; font-weight: 900; margin: 8px 0 12px; }
.season-info p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 22px; }

.season-features { display: flex; gap: 20px; margin-bottom: 25px; }
.s-feat-item { display: flex; align-items: center; gap: 10px; }
.s-feat-item i {
  font-size: 1.1rem; color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.12); padding: 10px; border-radius: 10px;
}
.s-feat-item strong { display: block; font-size: 0.88rem; color: #fff; }
.s-feat-item span { font-size: 0.75rem; color: var(--text-muted); }

.season-btn-group { display: flex; gap: 12px; }

.visual-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  height: 250px;
}

.visual-card img { width: 100%; height: 100%; object-fit: cover; }
.visual-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px;
  background: rgba(5, 4, 8, 0.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: #fff;
}
.visual-overlay i { color: #f59e0b; }

/* Главная: выбор сюжетной летописи */
.home-lore-banner { width: 100%; }
.home-lore-info { min-width: 0; }
.home-lore-info > p { max-width: 650px; }
.home-lore-seasons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 19px 0 14px; }
.home-lore-season { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; color: #f4efff; text-decoration: none; background: linear-gradient(145deg,rgba(139,92,246,.12),rgba(255,255,255,.025)); border: 1px solid rgba(167,139,250,.2); border-radius: 14px; transition: transform .2s ease,border-color .2s ease,background .2s ease; }
.home-lore-season:hover, .home-lore-season:focus-visible { transform: translateY(-2px); background: rgba(139,92,246,.15); border-color: rgba(167,139,250,.56); outline: none; }
.home-lore-season-current { background: linear-gradient(145deg,rgba(139,92,246,.21),rgba(255,255,255,.035)); border-color: rgba(167,139,250,.36); }
.home-lore-season-mark { color: #cbbaff; font-size: .64rem; font-weight: 800; letter-spacing: .7px; }
.home-lore-season > strong { font-size: .96rem; }
.home-lore-season-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; color: var(--text-muted); font-size: .74rem; }
.home-lore-season-count i { color: #c4b5fd; }
.home-lore-map { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .78rem; text-decoration: none; }
.home-lore-map:hover { color: #fff; }
.home-lore-visual { min-width: 0; }
.home-lore-preview { position: relative; min-height: 310px; padding: 18px; overflow: hidden; border: 1px solid rgba(145,160,194,.2); border-radius: 17px; background: radial-gradient(ellipse at 95% 0%,rgba(73,110,170,.14),transparent 42%),linear-gradient(145deg,#111722,#0c1018); }
.home-lore-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.home-lore-preview-heading > div { display: grid; gap: 4px; }
.home-lore-preview-heading span { color: #91a3c4; font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.home-lore-preview-heading strong { color: #f1f4fc; font-size: .97rem; }
.home-lore-preview-heading > i { display: grid; width: 38px; height: 38px; place-items: center; color: #9fcaff; border: 1px solid rgba(129,177,244,.25); border-radius: 12px; background: rgba(83,133,207,.1); }
.home-lore-preview-list { position: relative; display: grid; gap: 9px; margin: 13px 0; }
.home-lore-preview-list::before { position: absolute; top: 18px; bottom: 18px; left: 12px; width: 1px; content: ''; background: linear-gradient(180deg,rgba(115,169,237,.62),rgba(138,103,195,.12)); }
.home-lore-preview-entry { position: relative; display: grid; gap: 5px; min-width: 0; padding: 10px 11px 10px 34px; color: #f2f4fb; text-decoration: none; border: 1px solid rgba(255,255,255,.085); border-radius: 11px; background: rgba(24,31,44,.84); transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.home-lore-preview-entry::before { position: absolute; top: 15px; left: 7px; width: 11px; height: 11px; content: ''; border: 2px solid #8db8ed; border-radius: 50%; background: #172235; box-shadow: 0 0 12px rgba(117,174,240,.22); }
.home-lore-preview-entry:hover, .home-lore-preview-entry:focus-visible { transform: translateX(2px); border-color: rgba(129,177,244,.42); background: rgba(40,53,74,.9); outline: none; }
.home-lore-preview-entry > span { color: #9bbce7; font-size: .58rem; font-weight: 800; letter-spacing: .09em; }
.home-lore-preview-entry > strong { overflow: hidden; color: #f5f6fb; font-size: .84rem; line-height: 1.35; text-overflow: ellipsis; }
.home-lore-preview-entry > p { display: -webkit-box; margin: 0; overflow: hidden; color: #aeb7c8; font-size: .7rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-lore-preview-entry.is-type-person::before { border-color: #e59bac; }
.home-lore-preview-entry.is-type-place::before { border-color: #79d2bc; }
.home-lore-preview-entry.is-type-object::before { border-color: #e6bb71; }
.home-lore-preview-entry.is-type-record::before { border-color: #a995e8; }
.home-lore-preview-empty { display: grid; min-height: 150px; margin: 0; place-items: center; color: #9da9bd; font-size: .82rem; text-align: center; }
.home-lore-preview-foot { display: flex; align-items: center; gap: 8px; padding-top: 11px; color: #aab5c7; border-top: 1px solid rgba(255,255,255,.08); font-size: .7rem; line-height: 1.45; }
.home-lore-preview-foot i { flex: 0 0 auto; color: #e0b66c; }
.home-lore-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding: 13px 15px; color: #eee8ff; font-weight: 700; font-size: .82rem; text-decoration: none; background: rgba(139,92,246,.12); border: 1px solid rgba(167,139,250,.22); border-radius: 12px; }
.home-lore-open i { color: #c4b5fd; transition: transform .2s ease; }
.home-lore-open:hover i { transform: translateX(4px); }

/* ПОДВАЛ (СЕКЦИЯ С ФИКСАЦИЕЙ) */
.footer {
  height: auto;
  min-height: auto;
  padding: 30px 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-dark);
  position: relative;
  z-index: 10;
  scroll-snap-align: end;
}

.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.disclaimer { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); }
.footer-links { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 22px; text-align: right; }
.footer-links a { display: inline-flex; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; text-decoration: none; }

.toast {
  position: fixed; bottom: 25px; right: 25px; background: #161224; border: 1px solid var(--accent-purple);
  color: #fff; padding: 12px 20px; border-radius: 10px; display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 2000;
}
.toast.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* МЕДИАЗАПРОСЫ (На маленьких экранах отключаем snap, чтобы контент не резался) */
@media (max-width: 992px) {
  html { scroll-snap-type: none; }
  .site-section { height: auto; min-height: calc(100vh - var(--nav-height)); padding: 80px 0; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-gallery-compact { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento-item { height: 200px; }
  .season-grid { grid-template-columns: 1fr; }
  .home-lore-visual .visual-card { height: 250px; }
}

@media (max-width: 640px) {
  html, body { width: 100%; overflow-x: hidden; }
  .nav-container { gap: 10px; padding: 0 16px; }
  .logo { flex: 0 0 auto; font-size: 1.25rem; }
  .nav-actions { min-width: 0; }
  .nav-actions .btn-copy-ip { gap: 7px; padding: 8px 10px; font-size: .73rem; white-space: nowrap; }
  .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); overflow-wrap: anywhere; }
  .hero-content { width: 100%; min-width: 0; padding: 0 16px; }
  .hero-subtitle { font-size: .95rem; }
  .hero-buttons { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 0 12px; }
  .hero-buttons > * { justify-content: center; min-width: 0; }
  .site-section { min-width: 0; padding: calc(var(--nav-height) + 22px) 0 48px; }
  .container { width: 100%; min-width: 0; padding: 0 16px; }
  .section-title { font-size: clamp(1.65rem, 7vw, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }
  .section-subtitle { max-width: 100%; }
  .cards-grid, .bento-gallery-compact { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .cards-grid > *, .bento-gallery-compact > *, .season-banner, .season-grid, .season-info, .season-visual, .visual-card { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .feature-card { padding: 20px; }
  .flex-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .bento-item { height: 190px; }
  .season-banner { width: 100%; padding: 22px 17px; border-radius: 19px; }
  .home-lore-seasons { grid-template-columns: minmax(0,1fr); }
  .season-grid { grid-template-columns: minmax(0,1fr); }
  .season-info h2, .season-info p, .season-features, .season-btn-group { width: 100%; min-width: 0; max-width: 100%; }
  .season-info .section-badge { width: max-content; max-width: 100%; }
  .season-info h2 { font-size: clamp(1.5rem, 6.5vw, 2.1rem); line-height: 1.15; overflow-wrap: anywhere; }
  .season-info p { overflow-wrap: anywhere; }
  .season-features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 10px; margin-bottom: 20px; }
  .s-feat-item { min-width: 0; align-items: flex-start; gap: 8px; }
  .s-feat-item i { flex: 0 0 auto; padding: 9px; font-size: 1rem; }
  .s-feat-item strong, .s-feat-item span { overflow-wrap: anywhere; }
  .season-btn-group { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; }
  .season-btn-group > * { width: 100%; min-width: 0; max-width: 100%; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .visual-card { height: min(58vw, 250px); min-height: 180px; }
  .visual-card img { width: 100%; max-width: 100%; display: block; }
  .visual-overlay { align-items: flex-start; font-size: .75rem; overflow-wrap: anywhere; }
  .visual-overlay span { min-width: 0; overflow-wrap: anywhere; }
    .footer-container { align-items: flex-start; flex-direction: column; gap: 10px; padding: 0 16px; }
    .footer-links { justify-content: flex-start; text-align: left; }
  .toast { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); }
}

@media (max-width: 380px) {
  .nav-container { padding: 0 12px; }
  .logo { font-size: 1.12rem; }
  .nav-actions .btn-copy-ip { padding: 7px 8px; font-size: .68rem; }
  .container { padding-right: 12px; padding-left: 12px; }
  .season-banner { padding: 19px 14px; }
  .season-features { grid-template-columns: minmax(0,1fr); }
}
.nav-search-link { display:inline-flex; align-items:center; gap:6px; }

/* Countdown launch scene: color, dial, and card react to every second. */
@property --countdown-accent { syntax: "<color>"; inherits: true; initial-value: #a78bfa; }
@property --countdown-glow { syntax: "<color>"; inherits: true; initial-value: rgba(124,91,255,.42); }
@property --countdown-shadow { syntax: "<color>"; inherits: true; initial-value: rgba(124,91,255,.42); }
.home-countdown-card.is-phase-ten-seconds {
  min-height:500px;
  padding:clamp(22px,4vw,42px);
  border:2px solid var(--countdown-accent,#a78bfa);
  background:radial-gradient(ellipse at 50% 45%,var(--countdown-glow,rgba(124,91,255,.42)) 0%,transparent 55%),linear-gradient(145deg,#211a36,#0c0a14 74%);
  box-shadow:0 24px 90px rgba(0,0,0,.4),0 0 84px var(--countdown-shadow,rgba(124,91,255,.42)),inset 0 0 100px var(--countdown-glow,rgba(124,91,255,.42));
  transition:--countdown-accent .72s ease,--countdown-glow .72s ease,--countdown-shadow .72s ease,background .72s ease,border-color .72s ease,box-shadow .72s ease;
  animation:countdown-launch-breathe 2.8s ease-in-out infinite;
}
.home-countdown-card.is-phase-ten-seconds > * { position:relative; z-index:1; }
.home-countdown-card.is-phase-ten-seconds::before {
  z-index:0;
  inset:-85%;
  opacity:.5;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--countdown-glow,rgba(124,91,255,.42)) 68%,rgba(255,255,255,.2) 70%,transparent 77% 100%);
  animation:countdown-launch-orbit 12s linear infinite;
}
.home-countdown-card.is-phase-ten-seconds::after {
  z-index:0;
  right:50%; top:50%; bottom:auto;
  width:min(88vw,570px); height:min(88vw,570px);
  transform:translate(50%,-50%);
  border-color:var(--countdown-accent,#a78bfa);
  opacity:.18;
  box-shadow:0 0 0 28px var(--countdown-glow,rgba(124,91,255,.42)),0 0 0 62px rgba(255,255,255,.035),0 0 95px var(--countdown-shadow,rgba(124,91,255,.42));
  animation:countdown-launch-rings 3.2s ease-in-out infinite;
}
.home-countdown-card.is-phase-ten-seconds .home-countdown-heading { order:0; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-title { order:1; margin:12px 0 0; text-align:center; letter-spacing:.12em; text-shadow:0 0 26px var(--countdown-glow,rgba(124,91,255,.42)); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-final-label { order:2; margin:14px 0 6px; color:var(--countdown-accent,#a78bfa); font-size:clamp(.78rem,2vw,1rem); letter-spacing:.34em; text-shadow:0 0 22px var(--countdown-glow,rgba(124,91,255,.42)); transition:color .5s,text-shadow .5s; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-launch-rail { order:3; width:min(100%,520px); gap:6px; margin:0 auto 5px; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-launch-rail span { height:6px; background:rgba(255,255,255,.12); transition:background .3s,box-shadow .3s,transform .3s; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-launch-rail span.is-passed { background:var(--countdown-accent,#a78bfa); opacity:.48; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-launch-rail span.is-current { background:#fff; transform:scaleY(1.8); box-shadow:0 0 18px var(--countdown-shadow,rgba(124,91,255,.42)); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-timer {
  order:4;
  width:min(76vw,330px); aspect-ratio:1; min-height:0;
  display:grid; place-items:center;
  margin:10px auto 18px; padding:0;
  overflow:visible; border-radius:50%; isolation:isolate;
  background:radial-gradient(circle,rgba(13,10,20,.95) 0 49%,transparent 50%);
  filter:drop-shadow(0 0 35px var(--countdown-glow,rgba(124,91,255,.42)));
}
.home-countdown-card.is-phase-ten-seconds .home-countdown-timer::before {
  position:absolute; z-index:0; inset:0; content:""; border-radius:50%;
  background:conic-gradient(from -90deg,var(--countdown-accent,#a78bfa) 0 var(--countdown-angle,360deg),rgba(255,255,255,.11) var(--countdown-angle,360deg) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  filter:drop-shadow(0 0 15px var(--countdown-shadow,rgba(124,91,255,.42)));
}
.home-countdown-card.is-phase-ten-seconds .home-countdown-timer::after {
  position:absolute; z-index:0; inset:13%; content:""; border:1px dashed var(--countdown-accent,#a78bfa); border-radius:50%; opacity:.42;
  animation:countdown-launch-orbit 32s linear infinite reverse;
}
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 { z-index:1; display:grid; width:100%; height:100%; place-content:center; justify-items:center; min-width:0; padding:0; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong {
  color:#fff; font-size:clamp(8rem,26vw,13rem); line-height:.84; letter-spacing:-.1em;
  text-shadow:0 0 24px var(--countdown-accent,#a78bfa),0 0 75px var(--countdown-glow,rgba(124,91,255,.42));
  animation:countdown-number-arrive .72s cubic-bezier(.16,1,.3,1) both;
}
.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 small { margin-top:15px; color:var(--countdown-accent,#a78bfa); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; }
.home-countdown-card.is-phase-ten-seconds .home-countdown-progress { order:5; width:min(100%,520px); height:8px; margin:4px 0 0; background:rgba(255,255,255,.13); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-progress-fill { background:linear-gradient(90deg,var(--countdown-accent,#a78bfa),#fff); box-shadow:0 0 18px var(--countdown-glow,rgba(124,91,255,.42)); }
.home-countdown-card.is-phase-ten-seconds .home-countdown-status { color:var(--countdown-accent,#a78bfa); background:rgba(10,8,17,.56); border-color:var(--countdown-accent,#a78bfa); }
.home-countdown-card.is-phase-ten-seconds.is-countdown-tick { animation:countdown-card-impact .68s cubic-bezier(.2,.8,.25,1) both,countdown-launch-breathe 2.8s ease-in-out .68s infinite; }
.home-countdown-card.is-phase-ten-seconds.is-countdown-tick::before { animation:countdown-launch-sweep .68s ease-out both; }
.home-countdown-card.is-phase-ten-seconds.is-countdown-tick .home-countdown-timer::before { animation:countdown-dial-hit .68s ease-out both; }
.home-countdown-card.is-phase-ten-seconds.is-countdown-tick .home-countdown-timer::after { animation:countdown-inner-flash .68s ease-out both; }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] { border-color:#fff4c5; }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] .home-countdown-final-label { color:#fff8df; font-size:1.1rem; letter-spacing:.48em; }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"] .home-countdown-unit-3 strong { color:#fffdf5; text-shadow:0 0 38px #fff,0 0 110px var(--countdown-glow,rgba(255,225,143,.62)); }
.home-countdown-card.is-phase-ten-seconds[data-countdown-second="1"].is-countdown-tick { animation:countdown-final-pulse .42s ease-in-out infinite alternate; }
@keyframes countdown-launch-breathe { 0%,100% { transform:scale(1); filter:brightness(1); } 50% { transform:scale(1.012); filter:brightness(1.13); } }
@keyframes countdown-card-impact { 0% { transform:scale(.975); filter:brightness(.82); } 42% { transform:scale(1.035); filter:brightness(1.55); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes countdown-launch-sweep { 0% { transform:rotate(0deg); opacity:.05; } 35% { opacity:.9; } 100% { transform:rotate(90deg); opacity:.5; } }
@keyframes countdown-launch-rings { 0%,100% { transform:translate(50%,-50%) scale(.94); opacity:.13; } 50% { transform:translate(50%,-50%) scale(1.035); opacity:.34; } }
@keyframes countdown-dial-hit { 0% { transform:scale(.88); opacity:.5; } 65% { transform:scale(1.045); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@keyframes countdown-inner-flash { 0% { transform:scale(.82); opacity:.05; border-width:1px; } 45% { transform:scale(1.12); opacity:.85; border-width:3px; } 100% { transform:scale(1); opacity:.42; border-width:1px; } }
@keyframes countdown-final-pulse { from { transform:scale(1); filter:brightness(1.08); } to { transform:scale(1.035); filter:brightness(1.45); } }
@media(max-width:620px) {
  .home-countdown-card.is-phase-ten-seconds { min-height:440px; padding:20px 14px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-heading { gap:6px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-heading .section-badge { font-size:.56rem; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-timer { width:min(76vw,290px); }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { font-size:clamp(7.5rem,34vw,10rem); }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-final-label { letter-spacing:.2em; }
}
@media(prefers-reduced-motion:reduce) {
  .home-countdown-card.is-phase-ten-seconds,.home-countdown-card.is-phase-ten-seconds::before,.home-countdown-card.is-phase-ten-seconds::after,
  .home-countdown-card.is-phase-ten-seconds .home-countdown-timer::after,.home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { animation:none!important; transition:none!important; }
  .home-countdown-card.is-phase-ten-seconds.is-countdown-tick { animation:none!important; transform:none!important; filter:none!important; }
}
.home-countdown-card.is-phase-live { min-height:260px; border-color:rgba(115,255,190,.48); background:radial-gradient(ellipse at 50% 15%,rgba(52,211,153,.2),transparent 62%),linear-gradient(145deg,#102923,#0c0a14 76%); transition:background 1s,border-color 1s,box-shadow 1s; }
.home-countdown-card.is-phase-live.is-launching { position:relative; min-height:350px; overflow:hidden; border:2px solid #8bffc5; background:radial-gradient(ellipse at 50% 46%,rgba(74,255,177,.42),transparent 56%),linear-gradient(145deg,#174438,#0d1018 76%); box-shadow:0 0 110px rgba(52,211,153,.48),inset 0 0 110px rgba(74,255,177,.16); animation:countdown-start-impact 1.05s cubic-bezier(.18,.86,.3,1) both,countdown-live-glow 3.2s ease-in-out 1.05s infinite; }
.home-countdown-card.is-phase-live.is-launching > * { position:relative; z-index:1; }
.home-countdown-card.is-phase-live.is-launching::before { position:absolute; z-index:0; inset:-90%; content:""; opacity:.8; background:conic-gradient(from 0deg,transparent 0 38%,rgba(255,255,255,.8) 43%,rgba(113,255,192,.24) 48%,transparent 55% 100%); animation:countdown-start-sweep 1.65s cubic-bezier(.12,.7,.22,1) both; pointer-events:none; }
.home-countdown-card.is-phase-live.is-launching::after { z-index:0; right:50%; top:50%; bottom:auto; width:min(72vw,430px); height:min(72vw,430px); transform:translate(50%,-50%) scale(.35); border:2px solid rgba(164,255,211,.8); opacity:0; box-shadow:0 0 0 18px rgba(74,255,177,.15),0 0 65px rgba(74,255,177,.55); animation:countdown-start-ripple 1.55s cubic-bezier(.12,.64,.25,1) both; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-summary,.home-countdown-card.is-phase-live.is-launching .home-countdown-date { display:none; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-title { margin:10px 0; color:#eafff3; text-shadow:0 0 24px rgba(110,255,190,.38); }
.home-countdown-card.is-phase-live.is-launching .home-countdown-timer { position:relative; z-index:1; width:min(55vw,230px); aspect-ratio:1; display:grid; place-items:center; margin:5px auto 10px; border:2px solid rgba(173,255,215,.72); border-radius:50%; background:radial-gradient(circle,rgba(8,34,26,.88),rgba(8,34,26,.12) 68%,transparent 70%); box-shadow:0 0 0 10px rgba(95,255,181,.08),0 0 42px rgba(95,255,181,.32),inset 0 0 36px rgba(95,255,181,.14); }
.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-0,.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-1,.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-2 { display:none; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-3 { min-width:0; padding:0; border:0; background:transparent; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-3 strong { color:#f1fff7; font-size:clamp(6rem,18vw,9rem); line-height:.9; text-shadow:0 0 30px #64ffb5,0 0 85px rgba(74,255,177,.72); animation:countdown-zero-arrive .8s cubic-bezier(.16,1,.3,1) both; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-3 small { color:#b6ffda; font-size:.72rem; letter-spacing:.25em; }
.home-countdown-card.is-phase-live.is-launching .home-countdown-progress { width:min(100%,520px); height:7px; margin:0 auto 10px; background:rgba(255,255,255,.13); }
.home-countdown-card.is-phase-live.is-launching .home-countdown-progress-fill { transform-origin:right center!important; background:linear-gradient(90deg,#48e6a3,#f3fff8); box-shadow:0 0 22px rgba(108,255,185,.9); animation:countdown-progress-launch 1.35s ease-out both; }
.home-countdown-card.is-phase-live.has-launched { min-height:220px; box-shadow:0 16px 55px rgba(0,0,0,.28),0 0 32px rgba(52,211,153,.13); animation:countdown-live-settle .8s cubic-bezier(.16,1,.3,1) both; }
.home-countdown-card.is-phase-live.has-launched .home-countdown-finished { padding:13px 20px; color:#d9ffeb; background:rgba(52,211,153,.1); border:1px solid rgba(127,255,193,.32); border-radius:999px; box-shadow:0 0 28px rgba(52,211,153,.14); animation:countdown-finished-reveal .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes countdown-start-impact { 0% { transform:scale(.94); filter:brightness(.65); } 32% { transform:scale(1.045); filter:brightness(1.8); } 62% { transform:scale(.99); filter:brightness(1.18); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes countdown-start-sweep { 0% { transform:rotate(-60deg); opacity:0; } 24% { opacity:.95; } 100% { transform:rotate(110deg); opacity:0; } }
@keyframes countdown-start-ripple { 0% { transform:translate(50%,-50%) scale(.35); opacity:.85; } 100% { transform:translate(50%,-50%) scale(1.45); opacity:0; } }
@keyframes countdown-zero-arrive { 0% { transform:scale(.3) rotate(-18deg); opacity:0; filter:blur(12px); } 58% { transform:scale(1.15) rotate(4deg); opacity:1; filter:blur(0); } 100% { transform:scale(1) rotate(0); } }
@keyframes countdown-progress-launch { 0% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes countdown-live-glow { 0%,100% { box-shadow:0 0 70px rgba(52,211,153,.24),inset 0 0 60px rgba(74,255,177,.07); } 50% { box-shadow:0 0 110px rgba(52,211,153,.55),inset 0 0 100px rgba(74,255,177,.17); } }
@keyframes countdown-live-settle { 0% { transform:scale(1.025); filter:brightness(1.35); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes countdown-finished-reveal { 0% { opacity:0; transform:translateY(16px) scale(.86); filter:blur(7px); } 70% { opacity:1; transform:translateY(-2px) scale(1.04); filter:blur(0); } 100% { transform:translateY(0) scale(1); } }
@media(max-width:620px) { .home-countdown-card.is-phase-live.is-launching { min-height:310px; } .home-countdown-card.is-phase-live.is-launching .home-countdown-timer { width:min(56vw,190px); } }
@media(prefers-reduced-motion:reduce) { .home-countdown-card.is-phase-live.is-launching,.home-countdown-card.is-phase-live.is-launching::before,.home-countdown-card.is-phase-live.is-launching::after,.home-countdown-card.is-phase-live.is-launching .home-countdown-unit-3 strong,.home-countdown-card.is-phase-live.has-launched,.home-countdown-card.is-phase-live.has-launched .home-countdown-finished { animation:none!important; transition:none!important; } }

/* Keep the homepage feature blocks readable when the viewport gets narrow. */
@media (max-width: 760px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { min-width: 0; overflow-wrap: anywhere; }
  .home-countdown-section { width: 100%; margin-bottom: 34px; transform: translateY(-8px); }
  .home-countdown-list { grid-template-columns: minmax(0, 1fr); }
  .home-countdown-card { min-width: 0; }
  .home-countdown-heading { align-items: flex-start; flex-wrap: wrap; }
  .home-countdown-status { max-width: 100%; text-align: right; }
  .home-countdown-timer { justify-content: center; }
  .home-countdown-card.is-phase-minute,
  .home-countdown-card.is-phase-ten-seconds,
  .home-countdown-card.is-phase-live { grid-column: auto; }
  .home-countdown-card.is-phase-ten-seconds { min-height: 0; padding: 22px 14px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-timer { width: min(72vw, 290px); }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { font-size: clamp(6rem, 31vw, 9rem); }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-final-label { letter-spacing: .18em; }
  .home-countdown-card.is-phase-live.is-launching { min-height: 0; padding: 24px 14px; }
  .home-countdown-card.is-phase-live.is-launching .home-countdown-timer { width: min(58vw, 210px); }
  .bento-gallery-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(155px, 30vw); gap: 12px; }
  .bento-item { min-width: 0; }
}
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-gallery-compact { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 190px; }
  .bento-item { height: auto; }
  .site-section > .container { min-width: 0; }
  .flex-header { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .home-countdown-section { margin-bottom: 26px; }
  .home-countdown-card { padding: 16px 12px; }
  .home-countdown-title { overflow-wrap: anywhere; }
  .home-countdown-unit { min-width: 54px; padding: 7px 6px; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-heading .section-badge { font-size: .54rem; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-status { font-size: .58rem; }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-timer { width: min(70vw, 255px); }
  .home-countdown-card.is-phase-ten-seconds .home-countdown-unit-3 strong { font-size: clamp(5.6rem, 30vw, 7.4rem); }
  .bento-gallery-compact { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 210px; }
}
