/* ═══════════════════════════════════════════
   ЛАПЫ ВЛАСТИ — Design Tokens
   ═══════════════════════════════════════════ */

:root {
  /* Фоновая система */
  --color-bg-primary: #F5E6C8;
  --color-bg-warm: #F0DEB8;
  --color-bg-cool: #FAF0E0;
  --color-bg-dark: #2C1810;

  /* Текст */
  --color-text-primary: #3E2723;
  --color-text-body: #5D4037;
  --color-text-muted: #8D6E63;
  --color-text-on-dark: #F5E6C8;

  /* Секторные цвета */
  --sector-industry: #C75B12;
  --sector-media: #C2185B;
  --sector-finance: #1B7A42;
  --sector-state: #1A3D6D;

  --sector-industry-light: #E8935A;
  --sector-media-light: #E06090;
  --sector-finance-light: #66BB6A;
  --sector-state-light: #5C8DB8;

  --sector-industry-wash: #FDF0E6;
  --sector-media-wash: #FCE4EC;
  --sector-finance-wash: #EAF5EB;
  --sector-state-wash: #E5EDF7;

  /* Ресурсы */
  --color-money: #D4A017;
  --color-money-glow: #D4A01733;
  --color-influence: #8B0000;
  --color-influence-glow: #8B000033;

  /* Утилитарные */
  --color-border: #3E272333;
  --color-shadow: #3E272320;
  --color-overlay: #2C181080;

  /* Органичные карточки — "скетчбук" */
  --color-card-bg: rgba(245, 230, 200, 0.6);
  --shadow-card-soft: 0 2px 12px rgba(62, 39, 35, 0.08);
  --border-card-soft: 1px solid rgba(62, 39, 35, 0.1);

  /* Типографика */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-handwritten: 'Caveat', 'Kalam', cursive;

  /* Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-hero: clamp(3rem, 2rem + 5vw, 6rem);

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Spacing */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 4px 16px var(--color-shadow);
  --shadow-lg: 0 8px 32px var(--color-shadow);
  --shadow-card: 0 4px 20px var(--color-shadow), 0 0 0 1px var(--color-border);
  --shadow-hero: 0 20px 60px #2C181040;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-hero: 800ms;

  --max-width: 1280px;
  --max-width-narrow: 768px;
}

[data-theme="dark"] {
  --color-bg-primary: #2C1810;
  --color-text-primary: #F5E6C8;
  --color-text-body: #E0D0B8;
  --color-text-muted: #B8A894;
  --color-border: #F5E6C833;
  --color-shadow: #00000040;
}

/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   BACKGROUND LAYER SYSTEM — "Живой скетчбук"
   ═══════════════════════════════════════════ */

.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* Layer 2: Крафтовая текстура бумаги */
.bg-texture {
  background-image: url('../bg/bg-paper-tile.jpg');
  background-repeat: repeat;
  background-size: 250px;
  opacity: 0.4;
  filter: contrast(1.1);
  mix-blend-mode: multiply;
}

/* Layer 3: Акварельные пятна по углам */
.bg-stain {
  width: 55vmin;
  height: 55vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.8;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.bg-stain--tl {
  top: -15vmin;
  left: -15vmin;
  background-image: url('../bg/stain-blue.jpeg');
  transform: rotate(-15deg);
}
.bg-stain--tr {
  top: -15vmin;
  right: -15vmin;
  background-image: url('../bg/stain-orange.jpeg');
  transform: rotate(35deg);
}
.bg-stain--bl {
  bottom: -15vmin;
  left: -15vmin;
  background-image: url('../bg/stain-green.jpeg');
  transform: rotate(-45deg);
}
.bg-stain--br {
  bottom: -15vmin;
  right: -15vmin;
  background-image: url('../bg/stain-magenta.jpeg');
  transform: rotate(15deg);
}

/* Layer 4: Виньетка */
.bg-vignette {
  background: radial-gradient(circle at center, transparent 20%, rgba(20, 15, 10, 0.65) 150%);
  mix-blend-mode: multiply;
  z-index: 1;
}

@media (max-width: 600px) {
  .bg-stain {
    width: 70vmin;
    height: 70vmin;
    opacity: 0.5;
  }
}

/* Контент поверх фоновых слоёв */
.header,
.hero,
.section,
.cta,
.footer,
.mobile-menu,
.skip-link { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ═══════════════════════════════════════════
   TYPOGRAPHY VOICES
   ═══════════════════════════════════════════ */

.voice-title { font-family: var(--font-display); font-weight: 700; }
.voice-body { font-family: var(--font-body); font-weight: 400; }
.voice-data { font-family: var(--font-mono); font-weight: 700; }
.voice-flavor { font-family: var(--font-handwritten); font-style: italic; }

/* Sector accents */
.sector-industry { --sector: var(--sector-industry); --sector-light: var(--sector-industry-light); --sector-wash: var(--sector-industry-wash); }
.sector-media { --sector: var(--sector-media); --sector-light: var(--sector-media-light); --sector-wash: var(--sector-media-wash); }
.sector-finance { --sector: var(--sector-finance); --sector-light: var(--sector-finance-light); --sector-wash: var(--sector-finance-wash); }
.sector-state { --sector: var(--sector-state); --sector-light: var(--sector-state-light); --sector-wash: var(--sector-state-wash); }

/* ═══════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 0.75em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1;
}
.btn--primary {
  background: var(--color-money);
  color: var(--color-bg-dark);
  border-color: var(--color-money);
  box-shadow: 0 4px 16px var(--color-money-glow);
}
.btn--primary:hover {
  background: #E0AD22;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-money-glow);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.btn--secondary:hover {
  background: var(--color-text-on-dark);
  color: var(--color-bg-dark);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255,255,255,0.3);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
}
.btn--large {
  font-size: var(--text-lg);
  padding: 1em 2em;
  border-radius: var(--radius-lg);
}
.btn--sm { font-size: var(--text-xs); padding: 0.5em 1em; }

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  transition: background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.header.scrolled {
  background: rgba(245, 230, 200, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.header.scrolled .header__logo,
.header.scrolled .header__nav a { color: var(--color-text-primary); }

.header__logo {
  margin-right: auto;
  font-size: var(--text-lg);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: color var(--duration-normal);
}
.header__nav {
  display: flex;
  gap: var(--space-md);
}
.header__nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  position: relative;
  padding: var(--space-xs) 0;
  transition: color var(--duration-normal);
}
.header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--color-money);
  transition: width var(--duration-normal) var(--ease-out);
}
.header__nav a:hover::after { width: 100%; }
.header__cta { transition: color var(--duration-normal); }

.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
}
.header__burger span {
  width: 24px; height: 2px;
  background: var(--color-text-on-dark);
  transition: all var(--duration-normal) var(--ease-out);
  border-radius: 2px;
}
.header.scrolled .header__burger span { background: var(--color-text-primary); }
.header__burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.header__burger.active span:nth-child(2) { opacity: 0; }
.header__burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .header__nav { display: none; }
  .header__cta { display: none; }
  .header__burger { display: flex; }
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(44, 24, 16, 0.97);
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.mobile-menu__nav a:hover { color: var(--color-money); }
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-dark);
  border-bottom: 5px solid var(--color-text-primary);
  box-shadow:
    0 2px 0 0 var(--color-money),
    0 12px 35px rgba(44, 24, 16, 0.5);
  z-index: 3;
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  animation: heroImageReveal 1.5s var(--ease-out) both;
}
@keyframes heroImageReveal {
  from { opacity: 0.3; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1.05); }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Верх — зона заголовка + header */
    linear-gradient(to bottom, rgba(44, 24, 16, 0.5) 0%, transparent 25%),
    /* Низ — зона стола для мета-инфо */
    linear-gradient(to top, rgba(44, 24, 16, 0.35) 0%, transparent 25%);
  /* Центр — чистый, звери видны */
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  min-height: 100vh;
  padding: 90px var(--space-md) 40px;
  animation: heroFadeIn var(--duration-hero) var(--ease-out) forwards;
  will-change: transform, opacity;
}

/* Заголовок — зона дыма над головами */
.hero__top {
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.3);
}

/* Мета + кнопки — зона стола */
.hero__bottom {
  background: rgba(44, 24, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  max-width: 600px;
  margin: 0 auto;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__sup {
  font-size: var(--text-xs);
  color: var(--color-money);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-size: var(--text-hero);
  color: var(--color-text-on-dark);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-xs);
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-money);
  opacity: 0.8;
  margin-bottom: 0;
}
.hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-text-on-dark);
  opacity: 0.9;
  margin: 0 auto var(--space-sm);
  line-height: var(--leading-snug);
}
.hero__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.hero__meta-item {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark);
  opacity: 0.8;
  padding: 0.4em 0.8em;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: scrollBounce 2s infinite;
}
.hero__scroll-arrow {
  font-size: 1.5rem;
  color: var(--color-text-on-dark);
  opacity: 0.5;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ═══════════════════════════════════════════
   SECTIONS COMMON
   ═══════════════════════════════════════════ */

.section {
  padding: var(--space-section) var(--space-md);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
}
.section-title::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  background: var(--color-money);
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
}
.section-subtitle {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* ═══════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════ */

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}
.about__card {
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: var(--border-card-soft);
  border-top: 4px solid var(--sector, var(--color-text-muted));
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.about__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(62, 39, 35, 0.15);
}
.about__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}
.about__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}
.about__card p {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════
   HEROES
   ═══════════════════════════════════════════ */

.heroes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-card {
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(62, 39, 35, 0.08);
  border: 1px solid rgba(62, 39, 35, 0.1);
  transition: transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) var(--ease-out);
}
.hero-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(62, 39, 35, 0.15);
}

.hero-card__portrait {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: transparent;
}
.hero-card__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform var(--duration-slow) var(--ease-out);
}
.hero-card:hover .hero-card__portrait-img { transform: scale(1.08); }

.hero-card__info {
  padding: var(--space-md);
  background: rgba(245, 230, 200, 0.7);
  backdrop-filter: blur(4px);
}
.hero-card__sector {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sector, var(--color-text-muted));
}
.hero-card__name {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin: var(--space-xs) 0;
}
.hero-card__quote {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  border: none;
  padding: 0;
  margin: var(--space-xs) 0 var(--space-sm);
}
.hero-card__style {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
}
.hero-card__stats {
  display: flex;
  gap: var(--space-sm);
}

/* ═══════════════════════════════════════════
   RESOURCES BADGES
   ═══════════════════════════════════════════ */

.resource {
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
.resource--money { color: var(--color-money); background: var(--color-money-glow); }
.resource--influence { color: var(--color-influence); background: var(--color-influence-glow); }

/* ═══════════════════════════════════════════
   HOW TO PLAY — PHASES
   ═══════════════════════════════════════════ */

.phases__timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.phase {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
  position: relative;
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  border: var(--border-card-soft);
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--duration-normal) var(--ease-out);
}
.phase:hover { transform: translateY(-4px); }

.phase__number {
  font-size: var(--text-3xl);
  color: var(--color-border);
  line-height: 1;
}
.phase__icon {
  font-size: 2.5rem;
  margin: var(--space-sm) 0;
}
.phase__title {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.phase__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
}

@media (max-width: 1024px) {
  .phases__timeline { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .phases__timeline { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   VICTORY
   ═══════════════════════════════════════════ */

.victory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}

.victory__card {
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border: var(--border-card-soft);
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--duration-normal) var(--ease-out);
}
.victory__card:hover { transform: translateY(-4px); }

.victory__card--combo {
  background: linear-gradient(135deg, rgba(245, 230, 200, 0.7), rgba(245, 224, 192, 0.7));
  border: 2px solid var(--color-money);
}

.victory__icon { font-size: 3rem; margin-bottom: var(--space-sm); }
.victory__card h3 {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}
.victory__req {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.victory__card p { font-size: var(--text-sm); color: var(--color-text-body); }
.victory__note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xl);
}

/* ═══════════════════════════════════════════
   SECTORS
   ═══════════════════════════════════════════ */

.sectors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.sector-card {
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: var(--border-card-soft);
  border-left: 5px solid var(--sector, var(--color-text-muted));
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--duration-normal) var(--ease-out);
}
.sector-card:hover { transform: translateY(-4px); }
.sector-card h3 {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
.sector-card__sectors {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sector);
  margin-bottom: var(--space-sm);
}
.sector-card .voice-flavor {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════ */

.components__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.component-item {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  border: var(--border-card-soft);
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--duration-normal) var(--ease-out);
}
.component-item:hover { transform: translateY(-4px); }
.component-item__count {
  display: block;
  font-size: var(--text-3xl);
  color: var(--color-money);
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.component-item__label {
  display: block;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.component-item__detail {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   SIGNATURE MOMENTS
   ═══════════════════════════════════════════ */

.moments { background: transparent; }
.moments__list {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.moment {
  padding: var(--space-lg);
  border-left: 4px solid var(--color-money);
  background: var(--color-card-bg);
  backdrop-filter: blur(4px);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-card-soft);
}
.moment p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}
.moment em {
  color: var(--color-text-muted);
  font-size: var(--text-xl);
}

/* ═══════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════ */

.cta {
  padding: var(--space-section) var(--space-md);
  background: var(--color-bg-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '🦁';
  position: absolute;
  font-size: clamp(10rem, 20vw, 30rem);
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.04;
  pointer-events: none;
}
.cta__content { position: relative; z-index: 2; }
.cta__title {
  font-size: var(--text-2xl);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-sm);
}
.cta__subtitle {
  font-size: var(--text-xl);
  color: var(--color-money);
  margin-bottom: var(--space-xl);
}
.cta__btn {
  animation: ctaPulse 3s infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 16px var(--color-money-glow); }
  50% { box-shadow: 0 8px 32px var(--color-money-glow), 0 0 60px var(--color-money-glow); }
}
.cta__or {
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-md);
  font-size: var(--text-sm);
}
.cta__form {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  max-width: 450px;
  margin: 0 auto;
}
.cta__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.75em 1em;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--duration-normal);
}
.cta__form input:focus {
  outline: none;
  border-color: var(--color-money);
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.footer {
  padding: var(--space-xl) var(--space-md) var(--space-md);
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-border);
}
.footer__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.footer__logo {
  font-size: var(--text-xl);
  color: var(--color-text-on-dark);
}
.footer__brand p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-top: var(--space-xs);
}
.footer__nav {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.footer__nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.footer__nav a:hover { color: var(--color-money); }
.footer__copy {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-lg);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   SKIP LINK
   ═══════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-money);
  color: var(--color-bg-dark);
  font-family: var(--font-body);
  z-index: 200;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-sm); }

/* Focus visible */
:focus-visible {
  outline: 3px solid var(--color-money);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}