:root {
  --bg: #080806;
  --bg-soft: #0e0c09;
  --panel: rgba(16, 13, 9, .78);
  --line: rgba(219, 166, 69, .24);
  --line-strong: rgba(232, 182, 84, .56);
  --gold: #e2ad4a;
  --gold-soft: #f3cf7a;
  --gold-deep: #8b5a19;
  --arcane: #44c7ff;
  --arcane-soft: #8fe5ff;
  --emerald: #1fbf5b;
  --silver: #d8d8d6;
  --text: #efede6;
  --muted: #aaa59a;
  --dark: #030303;
  --danger: #d96c35;
  --max: 1220px;
  --display: "Cinzel", Georgia, serif;
  --body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(176, 99, 24, .08), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(68, 199, 255, .08), transparent 28%),
    radial-gradient(circle at 12% 32%, rgba(68, 199, 255, .05), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  overflow-x: hidden;
}

::selection { background: rgba(226, 173, 74, .24); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.cursor-glow {
  position: fixed;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 148, 53, .10), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 64px);
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
  transition: .35s ease;
}

.topbar.scrolled {
  height: 66px;
  background: rgba(6, 5, 4, .88);
  backdrop-filter: blur(16px);
  border-color: rgba(226, 173, 74, .16);
  box-shadow: inset 0 -1px 0 rgba(68,199,255,.08);
}

.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 800; letter-spacing: .12em; font-size: 14px; text-transform: uppercase; }
.brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(226,173,74,.3)) drop-shadow(0 0 18px rgba(68,199,255,.14)); }
.nav { display: flex; gap: clamp(20px, 3vw, 42px); }
.nav a { position: relative; color: #c8c3b9; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -9px; height: 1px; background: var(--gold); transition: .25s ease; }
.nav a:hover { color: #fff; }
.nav a:hover::after { left: 0; right: 0; }
.topbar-status { display: flex; align-items: center; gap: 8px; color: #b9b1a0; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.topbar-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 1.8s infinite; }

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(226, 173, 74, .18);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -5;
  transform: scale(1.04);
  filter: saturate(.96) contrast(1.14) brightness(.50) hue-rotate(-4deg);
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.84) 100%),
    linear-gradient(180deg, rgba(10, 18, 28, .52) 0%, rgba(14,12,10,.12) 38%, #080806 100%),
    radial-gradient(circle at 28% 30%, rgba(68,199,255,.08), transparent 35%),
    radial-gradient(circle at 70% 24%, rgba(226,173,74,.10), transparent 38%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .18;
  background-image:
    linear-gradient(rgba(226,173,74,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,173,74,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 28%, transparent 78%);
  transform: perspective(700px) rotateX(62deg) translateY(40%);
  transform-origin: center bottom;
}

.ember-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 16% 82%, rgba(235,111,26,.38) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 69%, rgba(239,158,49,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 76%, rgba(228,95,22,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 61%, rgba(250,169,63,.22) 0 1px, transparent 2px);
  background-size: 170px 220px, 240px 260px, 210px 240px, 260px 300px;
  animation: embers 13s linear infinite;
  opacity: .7;
}
.hero-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-aura span {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .26;
}
.hero-aura span:first-child {
  width: 340px;
  height: 340px;
  left: 10%;
  top: 20%;
  background: radial-gradient(circle, rgba(68,199,255,.65), transparent 68%);
}
.hero-aura span:last-child {
  width: 420px;
  height: 420px;
  right: 8%;
  top: 16%;
  background: radial-gradient(circle, rgba(226,173,74,.55), transparent 68%);
}
.hero-runes {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  pointer-events: none;
}
.hero-runes::before,
.hero-runes::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(68,199,255,.12);
  box-shadow: inset 0 0 40px rgba(68,199,255,.03), 0 0 50px rgba(68,199,255,.05);
}
.hero-runes::before {
  width: 540px;
  height: 540px;
  left: -100px;
  top: 120px;
}
.hero-runes::after {
  width: 680px;
  height: 680px;
  right: -160px;
  top: 60px;
  border-color: rgba(226,173,74,.12);
  box-shadow: inset 0 0 40px rgba(226,173,74,.03), 0 0 50px rgba(226,173,74,.05);
}

.hero-content {
  width: min(1120px, calc(100% - 34px));
  padding: 112px 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(239,203,125,.28);
  background: rgba(5,5,5,.38);
  backdrop-filter: blur(8px);
  color: var(--gold-soft);
  font-family: var(--display);
  letter-spacing: .28em;
  font-size: 10px;
  box-shadow: inset 0 0 18px rgba(226,173,74,.05), 0 10px 40px rgba(0,0,0,.25);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.hero-logo {
  width: min(660px, 78vw);
  max-height: 265px;
  object-fit: contain;
  margin: 14px auto -8px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.8)) drop-shadow(0 0 28px rgba(226,173,74,.12));
}

.hero-tagline { margin: 0 0 18px; font-family: var(--display); font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .18em; font-weight: 700; text-shadow: 0 2px 20px #000; }
.hero-tagline span { color: var(--gold-soft); }

.launch-date { display: flex; align-items: center; justify-content: center; gap: 13px; color: #e9e5db; font-family: var(--display); letter-spacing: .12em; font-size: clamp(10px, 1.2vw, 13px); flex-wrap: wrap; }
.launch-date strong { font-weight: 700; }
.launch-date i { color: var(--gold); font-style: normal; }
.launch-date small { color: #9c968b; font-family: var(--body); font-size: 9px; letter-spacing: .16em; }
.launch-date__line { display: block; width: 64px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.launch-date__line:last-child { transform: rotate(180deg); }

.launch-live { margin-top: 27px; align-items: center; gap: 10px; color: var(--gold-soft); font-family: var(--display); letter-spacing: .15em; font-weight: 700; }
.launch-live:not([hidden]) { display: flex; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8a03a; box-shadow: 0 0 18px #e8a03a; animation: pulse 1.1s infinite; }

.rate-line { margin-top: 24px; display: flex; gap: 15px; align-items: center; justify-content: center; flex-wrap: wrap; color: #b8b1a5; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.rate-line i { width: 3px; height: 3px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 8px var(--gold); }
.hero-badges {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}
.hero-badges span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(13,16,20,.62), rgba(19,14,10,.52));
  color: #c9c9c7;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: inset 0 0 14px rgba(68,199,255,.02), 0 0 18px rgba(0,0,0,.12);
}

.scroll-cue { margin-top: 30px; display: grid; justify-items: center; gap: 9px; color: #9f998e; font-size: 8px; letter-spacing: .18em; font-weight: 700; }
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 1.6s ease-in-out infinite; }

.hero-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.button:hover { transform: translateY(-2px); }
.button--primary {
  background: linear-gradient(135deg, rgba(24,156,74,.96), rgba(31,191,91,.96));
  border-color: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.24), 0 0 28px rgba(31,191,91,.16);
}
.button--ghost {
  background: linear-gradient(145deg, rgba(14,17,22,.62), rgba(21,15,10,.54));
  color: #efede6;
  border-color: rgba(68,199,255,.18);
  box-shadow: inset 0 0 22px rgba(68,199,255,.03), 0 12px 28px rgba(0,0,0,.16);
}
.button--ghost:hover { border-color: rgba(68,199,255,.38); }

.hero-advantage {
  margin-top: 28px;
  width: min(900px, 100%);
  padding: 24px 24px 20px;
  border: 1px solid rgba(226,173,74,.22);
  background: linear-gradient(145deg, rgba(14,17,21,.78), rgba(17,13,10,.78));
  box-shadow: inset 0 0 30px rgba(226,173,74,.035), inset 0 0 24px rgba(68,199,255,.03), 0 18px 50px rgba(0,0,0,.24);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.hero-advantage__eyebrow {
  color: var(--arcane-soft);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-advantage h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(25px, 3.1vw, 38px);
  line-height: 1.15;
  font-weight: 600;
}
.hero-advantage h2 em { color: var(--gold-soft); font-style: normal; text-shadow: 0 0 18px rgba(226,173,74,.12); }
.hero-advantage p {
  margin: 14px auto 0;
  max-width: 760px;
  color: #b1ab9f;
  line-height: 1.75;
  font-size: 13px;
}
.hero-advantage p b { color: #fff; }
.hero-advantage p span { color: var(--arcane-soft); }
.hero-advantage__tags {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-advantage__tags span {
  padding: 8px 10px;
  border: 1px solid rgba(226,173,74,.16);
  background: rgba(255,255,255,.02);
  color: #9f998f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stat-ribbon {
  position: relative;
  z-index: 5;
  width: min(1280px, calc(100% - 32px));
  margin: -28px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(145deg, rgba(10,9,7,.93), rgba(10,14,18,.93));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(226,173,74,.24);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.33), inset 0 0 24px rgba(68,199,255,.03);
}
.stat-ribbon div { min-height: 94px; padding: 21px 14px; display: grid; place-items: center; gap: 5px; text-align: center; position: relative; }
.stat-ribbon div:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(transparent, rgba(226,173,74,.30), transparent); }
.stat-ribbon strong { color: var(--gold-soft); font-family: var(--display); font-size: clamp(18px, 2vw, 25px); letter-spacing: .03em; }
.stat-ribbon span { color: #999287; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; }

.cinematic-band {
  position: relative;
  overflow: hidden;
}
.cinematic-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(68,199,255,.08), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(226,173,74,.10), transparent 32%);
  pointer-events: none;
}
.cinematic-band__wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 24px;
  padding-top: 82px;
  padding-bottom: 40px;
}
.cinematic-band__intro h2 {
  margin: 16px 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.08;
  font-weight: 600;
}
.cinematic-band__intro h2 em { color: var(--arcane-soft); font-style: normal; }
.cinematic-band__intro p {
  max-width: 720px;
  color: #a6a198;
  font-size: 14px;
  line-height: 1.78;
}
.cinematic-band__grid {
  display: grid;
  gap: 14px;
}
.cinematic-chip {
  position: relative;
  padding: 22px 24px 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(150deg, rgba(12,15,20,.76), rgba(17,13,10,.78));
  box-shadow: inset 0 0 28px rgba(68,199,255,.025), 0 14px 36px rgba(0,0,0,.18);
}
.cinematic-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--arcane), transparent 80%);
}
.cinematic-chip small {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cinematic-chip strong {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
}
.cinematic-chip span {
  display: block;
  margin-top: 8px;
  color: #989287;
  font-size: 12px;
  line-height: 1.65;
}

.section { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; padding: 128px 0; }
.section-kicker { display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--gold); font-family: var(--display); font-size: 10px; letter-spacing: .23em; text-transform: uppercase; }
.section-kicker > span { width: 45px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.section-kicker > span:last-child { transform: rotate(180deg); }
.section-kicker--left { justify-content: flex-start; }
.section-title { margin: 16px auto 18px; max-width: 900px; text-align: center; font-family: var(--display); font-size: clamp(34px, 5vw, 61px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; }
.section-title em, .economy-copy h2 em, .finale h2 em { color: var(--gold-soft); font-style: normal; }
.section-copy { max-width: 790px; margin: 0 auto; color: #aaa398; text-align: center; line-height: 1.75; font-size: 14px; }

.pillars { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar { position: relative; min-height: 250px; padding: 34px 30px; border: 1px solid rgba(226,173,74,.16); background: linear-gradient(145deg, rgba(26,22,16,.52), rgba(8,8,7,.62)); overflow: hidden; }
.pillar::after { content: ""; position: absolute; inset: auto -15% -55% 20%; height: 160px; background: radial-gradient(ellipse, rgba(226,173,74,.09), transparent 67%); }
.pillar-index { font-family: var(--display); color: rgba(226,173,74,.42); font-size: 12px; letter-spacing: .12em; }
.pillar h3 { margin: 38px 0 12px; font-family: var(--display); color: #eee8dc; font-size: 21px; }
.pillar p { margin: 0; color: #9d978c; font-size: 13px; line-height: 1.72; }

.advantage-section { padding-top: 110px; }
.advantage-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.adv-card {
  position: relative;
  min-height: 310px;
  padding: 30px 30px 26px;
  border: 1px solid rgba(226,173,74,.15);
  background: linear-gradient(150deg, rgba(13,16,21,.72), rgba(18,14,10,.82));
  overflow: hidden;
}
.adv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 14%, rgba(226,173,74,.09), transparent 28%);
  pointer-events: none;
}
.adv-card--highlight {
  border-color: rgba(226,173,74,.35);
  box-shadow: inset 0 0 36px rgba(226,173,74,.05);
}
.adv-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #8f887d;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.adv-card__top span { color: var(--gold); }
.adv-card__top strong {
  color: #746e64;
  font-size: 9px;
  letter-spacing: .14em;
  font-family: var(--body);
}
.adv-card h3 {
  margin: 26px 0 12px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: #f0ece3;
}
.adv-card p {
  margin: 0;
  color: #9f988d;
  font-size: 12px;
  line-height: 1.75;
}
.adv-card ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.adv-card li {
  position: relative;
  padding-left: 18px;
  color: #b8b2a6;
  font-size: 11px;
}
.adv-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.progression { position: relative; }
.progression::before { content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(171,104,27,.08), transparent 67%); pointer-events: none; }
.timeline-shell { position: relative; margin-top: 62px; padding-top: 26px; }
.timeline-track { position: absolute; left: 5%; right: 5%; top: 13px; height: 1px; background: rgba(226,173,74,.18); }
.timeline-track span { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(226,173,74,.2)); box-shadow: 0 0 12px rgba(226,173,74,.18); transform-origin: left; animation: breatheLine 4s ease-in-out infinite; }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; position: relative; z-index: 2; }
.milestone { position: relative; min-height: 164px; padding: 24px 14px 18px; background: rgba(10,9,8,.7); border: 1px solid rgba(226,173,74,.12); text-align: center; transition: .3s ease; }
.milestone::before { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid var(--gold); background: #0a0907; top: -18px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.milestone:hover { transform: translateY(-6px); border-color: rgba(226,173,74,.38); background: rgba(20,16,11,.84); }
.milestone.active { border-color: rgba(226,173,74,.28); box-shadow: inset 0 0 24px rgba(226,173,74,.04); }
.milestone small { color: var(--gold); font-size: 9px; letter-spacing: .1em; }
.milestone strong { display: block; margin-top: 14px; font-family: var(--display); font-size: 14px; color: #e6e1d7; letter-spacing: .04em; }
.milestone p { margin: 7px 0 12px; color: #8f897f; font-size: 10px; }
.milestone span { display: block; color: #68635b; font-size: 9px; line-height: 1.45; }

.progression-note { margin-top: 26px; padding: 24px 28px; display: grid; grid-template-columns: 270px 1fr; align-items: center; gap: 36px; border: 1px solid rgba(226,173,74,.16); background: linear-gradient(90deg, rgba(28,21,13,.54), rgba(10,9,8,.64)); }
.progression-note > div { padding-right: 32px; border-right: 1px solid rgba(226,173,74,.16); }
.progression-note span { display: block; color: #8d867c; font-size: 9px; letter-spacing: .16em; }
.progression-note strong { display: block; margin-top: 6px; color: var(--gold-soft); font-family: var(--display); font-size: 24px; }
.progression-note strong i { color: #72634c; font-style: normal; font-weight: 400; }
.progression-note p { margin: 0; color: #9f998f; font-size: 12px; line-height: 1.7; }

.launch-events { padding-top: 110px; }
.event-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.event-card { position: relative; min-height: 286px; padding: 30px; border: 1px solid rgba(226,173,74,.15); background: linear-gradient(150deg, rgba(22,18,13,.66), rgba(7,7,6,.78)); overflow: hidden; }
.event-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 55%, rgba(226,173,74,.035)); pointer-events: none; }
.event-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -95px; top: -95px; border: 1px solid rgba(226,173,74,.08); transform: rotate(45deg); }
.event-card--featured { border-color: rgba(226,173,74,.40); box-shadow: inset 0 0 40px rgba(226,173,74,.045); }
.event-top { display: flex; justify-content: space-between; gap: 20px; color: #867f74; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.event-top span { color: var(--gold); }
.event-top time { text-align: right; }
.event-card h3 { margin: 50px 0 12px; font-family: var(--display); font-size: 28px; font-weight: 600; }
.event-card p { max-width: 510px; margin: 0; color: #9e978c; font-size: 12px; line-height: 1.72; }
.event-meta { position: absolute; left: 30px; right: 30px; bottom: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.event-meta span { padding: 6px 8px; border: 1px solid rgba(226,173,74,.14); color: #8f887c; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }

.economy { padding-top: 75px; }
.economy-panel { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 520px; border: 1px solid rgba(226,173,74,.20); background: radial-gradient(circle at 20% 50%, rgba(218,142,42,.11), transparent 38%), linear-gradient(140deg, #100d09, #070706); overflow: hidden; }
.economy-emblem { position: relative; display: grid; place-items: center; overflow: hidden; }
.economy-emblem::before { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(226,173,74,.12); border-radius: 50%; box-shadow: inset 0 0 70px rgba(226,173,74,.04), 0 0 70px rgba(226,173,74,.03); }
.economy-emblem::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(226,173,74,.10); transform: rotate(45deg); }
.economy-emblem img { width: 74%; filter: drop-shadow(0 20px 45px #000) drop-shadow(0 0 36px rgba(226,173,74,.15)); opacity: .96; z-index: 2; }
.economy-copy { display: flex; flex-direction: column; justify-content: center; padding: 65px 70px 65px 35px; }
.economy-copy h2 { margin: 16px 0 18px; font-family: var(--display); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 600; }
.economy-copy p { max-width: 610px; margin: 0; color: #9f988e; font-size: 13px; line-height: 1.8; }
.economy-copy ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 18px; }
.economy-copy li { padding: 10px 0; color: #8f887e; border-bottom: 1px solid rgba(226,173,74,.10); font-size: 11px; }
.economy-copy li b { color: #d7d1c6; font-weight: 600; }

/* PC + MOBILE showcase */
.platform-showcase {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}
.platform-device {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(226,173,74,.25);
  background: linear-gradient(145deg, rgba(26,21,15,.78), rgba(7,7,6,.86));
  box-shadow: inset 0 0 34px rgba(226,173,74,.035);
}
.platform-icon {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(68,199,255,.26);
  background: radial-gradient(circle, rgba(68,199,255,.14), rgba(8,8,7,.78));
  color: var(--arcane-soft);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 0 34px rgba(226,173,74,.08);
}
.platform-device small {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .18em;
}
.platform-device strong {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
}
.platform-device p {
  margin: 10px 0 0;
  color: #9f988d;
  font-size: 11px;
  line-height: 1.65;
}
.platform-bridge {
  align-self: center;
  min-width: 72px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #7f786d;
}
.platform-bridge span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226,173,74,.3);
  color: var(--gold-soft);
  font-family: var(--display);
  font-size: 22px;
  transform: rotate(45deg);
}
.platform-bridge span::first-letter { transform: rotate(-45deg); }
.platform-bridge b {
  font-size: 7px;
  letter-spacing: .14em;
  text-align: center;
}

/* Floating WhatsApp CTA */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px 11px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(135deg, #1ca654, #1fbf5b);
  color: #fff;
  box-shadow: 0 14px 42px rgba(0,0,0,.38), 0 0 24px rgba(31,191,91,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 32px rgba(31,191,91,.26);
  filter: brightness(1.05);
}
.whatsapp-float__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
}
.whatsapp-float__copy { display: grid; line-height: 1.05; }
.whatsapp-float__copy small {
  margin-bottom: 4px;
  font-size: 7px;
  letter-spacing: .16em;
  opacity: .84;
}
.whatsapp-float__copy strong {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .05em;
}

.finale { position: relative; min-height: 760px; padding: 120px 20px 95px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-top: 1px solid rgba(226,173,74,.12); }
.finale-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, #080806 0%, rgba(8,8,6,.78) 30%, rgba(4,4,3,.86) 100%), url("../images/hero-poster.png") center 40% / cover no-repeat; filter: saturate(.58) contrast(1.1); z-index: -2; }
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(177,103,24,.08), transparent 48%); z-index: -1; }
.finale-logo { width: min(400px, 72vw); max-height: 155px; object-fit: contain; margin-bottom: 5px; filter: drop-shadow(0 16px 30px #000); }
.finale h2 { margin: 20px 0 22px; font-family: var(--display); font-size: clamp(36px, 5vw, 62px); line-height: 1.1; font-weight: 600; }
.finale-signature { margin-top: 42px; color: #736e66; font-size: 8px; letter-spacing: .22em; }

footer { min-height: 74px; padding: 0 clamp(20px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(226,173,74,.12); color: #6d685f; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse { 0%,100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes embers { from { background-position: 0 120px, 0 80px, 0 140px, 0 100px; } to { background-position: 10px -280px, -20px -320px, 18px -260px, -12px -300px; } }
@keyframes scrollLine { 0%,100% { opacity: .25; transform: scaleY(.65); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes breatheLine { 0%,100% { opacity: .38; } 50% { opacity: .9; } }

@media (max-width: 980px) {
  .nav { display: none; }
  .topbar-status { font-size: 8px; }
  .stat-ribbon { grid-template-columns: repeat(3, 1fr); }
  .stat-ribbon div:nth-child(3)::after { display: none; }
  .stat-ribbon div:nth-child(4), .stat-ribbon div:nth-child(5) { border-top: 1px solid rgba(226,173,74,.12); }
  .cinematic-band__wrap { grid-template-columns: 1fr; padding-top: 70px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 200px; }
  .advantage-grid { grid-template-columns: 1fr; }
  .timeline-shell { overflow-x: auto; padding-bottom: 12px; scrollbar-color: rgba(226,173,74,.25) transparent; }
  .timeline-track { width: 980px; right: auto; }
  .timeline { width: 1040px; }
  .progression-note { grid-template-columns: 1fr; gap: 18px; }
  .progression-note > div { border-right: 0; border-bottom: 1px solid rgba(226,173,74,.16); padding: 0 0 18px; }
  .platform-showcase { grid-template-columns: 1fr; }
  .platform-bridge { grid-template-columns: auto auto; justify-content: center; }
  .economy-panel { grid-template-columns: 1fr; }
  .economy-emblem { min-height: 390px; }
  .economy-emblem img { width: min(360px, 70vw); }
  .economy-copy { padding: 36px 36px 52px; }
}

@media (max-width: 680px) {
  .topbar { height: 64px; padding: 0 18px; }
  .brand span { font-size: 11px; }
  .brand img { width: 30px; height: 30px; }
  .topbar-status { display: none; }
  .hero-content { padding-top: 92px; }
  .hero-logo { width: min(690px, 100%); margin-top: 7px; }
  .hero-tagline { font-size: 10px; letter-spacing: .11em; }
  .launch-date { gap: 8px; max-width: 390px; }
  .launch-date__line { display: none; }
  .rate-line { gap: 9px; font-size: 7px; max-width: 360px; }
  .hero-badges { gap: 6px; }
  .hero-badges span { font-size: 7px; }
  .hero-advantage { padding: 20px 18px 18px; }
  .hero-advantage h2 { font-size: clamp(23px, 7vw, 30px); }
  .hero-advantage p { font-size: 12px; }
  .hero-actions { gap: 8px; }
  .button { width: 100%; min-height: 44px; padding: 0 14px; font-size: 9px; }
  .scroll-cue { margin-top: 22px; }
  .stat-ribbon { width: calc(100% - 22px); grid-template-columns: repeat(2, 1fr); margin-top: -16px; }
  .stat-ribbon div { min-height: 79px; padding: 16px 8px; border-top: 1px solid rgba(226,173,74,.10); }
  .stat-ribbon div::after { display: none; }
  .stat-ribbon div:last-child { grid-column: 1 / -1; }
  .section { width: min(100% - 28px, var(--max)); padding: 92px 0; }
  .cinematic-band__intro h2 { font-size: clamp(29px, 9vw, 40px); }
  .cinematic-band__intro p { font-size: 12px; }
  .cinematic-chip { padding: 20px; }
  .cinematic-chip strong { font-size: 22px; }
  .section-kicker { font-size: 8px; gap: 8px; }
  .section-kicker > span { width: 24px; }
  .section-title { font-size: clamp(31px, 10vw, 42px); }
  .section-copy { font-size: 12px; }
  .pillars { margin-top: 38px; }
  .pillar { padding: 26px 23px; }
  .pillar h3 { margin-top: 28px; }
  .platform-device { grid-template-columns: 82px 1fr; padding: 20px; }
  .platform-icon { width: 82px; height: 82px; font-size: 12px; }
  .platform-device strong { font-size: 19px; }
  .adv-card { min-height: 280px; padding: 24px; }
  .adv-card h3 { font-size: 24px; }
  .event-grid { grid-template-columns: 1fr; }
  .event-card { min-height: 310px; padding: 25px; }
  .event-card h3 { margin-top: 42px; font-size: 24px; }
  .event-meta { left: 25px; right: 25px; }
  .economy { width: 100%; }
  .economy-panel { border-left: 0; border-right: 0; }
  .economy-emblem { min-height: 330px; }
  .economy-copy { padding: 30px 24px 44px; }
  .economy-copy ul { grid-template-columns: 1fr; }
  .finale { min-height: 670px; }
  .whatsapp-float { right: 12px; bottom: 12px; padding: 8px 12px 8px 8px; }
  .whatsapp-float__icon { width: 38px; height: 38px; }
  .whatsapp-float__copy strong { font-size: 10px; }
  footer { min-height: 92px; flex-direction: column; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-video { display: none; }
  .hero { background: url("../images/hero-poster.png") center / cover no-repeat; }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}


/* =========================================================
   V5 — PRIME TECHNOLOGY / CINEMATIC SKILL SYSTEM
   ========================================================= */
.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: .62;
  mix-blend-mode: screen;
}
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .028;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.42) 4px);
}

.boot-sequence {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background:
    radial-gradient(circle at center, rgba(21,43,57,.36), transparent 28%),
    radial-gradient(circle at center, rgba(160,104,33,.12), transparent 46%),
    #030405;
  transition: opacity .65s ease, visibility .65s ease;
}
.boot-sequence.is-done { opacity: 0; visibility: hidden; }
.boot-core { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.boot-core img { width: 74px; filter: drop-shadow(0 0 22px rgba(68,199,255,.22)) drop-shadow(0 0 28px rgba(226,173,74,.16)); animation: bootCore 1.4s ease-in-out infinite; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(68,199,255,.28); }
.boot-ring::before, .boot-ring::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--arcane); box-shadow:0 0 15px var(--arcane); }
.boot-ring::before { top:-4px; left:50%; }
.boot-ring::after { bottom:-4px; left:50%; }
.boot-ring--1 { animation: spinTech 3.5s linear infinite; }
.boot-ring--2 { inset: 14px; border-color: rgba(226,173,74,.28); animation: spinTechReverse 2.4s linear infinite; }
.boot-line { position:absolute; width:180px; height:1px; background:linear-gradient(90deg,transparent,var(--arcane),var(--gold),transparent); box-shadow:0 0 12px rgba(68,199,255,.25); animation: bootScan 1.2s ease-in-out infinite; }
.boot-copy { text-align:center; display:grid; gap:5px; text-transform:uppercase; }
.boot-copy small { color:var(--arcane-soft); font-size:8px; letter-spacing:.28em; }
.boot-copy strong { font-family:var(--display); font-size:15px; letter-spacing:.16em; }
.boot-copy span { color:#6f7478; font-size:8px; letter-spacing:.15em; }

.hud-corners { position:absolute; inset:94px 34px 34px; z-index:-1; pointer-events:none; opacity:.45; }
.hud-corners i { position:absolute; width:86px; height:86px; border-color:rgba(68,199,255,.24); }
.hud-corners i:nth-child(1){left:0;top:0;border-left:1px solid;border-top:1px solid;}
.hud-corners i:nth-child(2){right:0;top:0;border-right:1px solid;border-top:1px solid;border-color:rgba(226,173,74,.22);}
.hud-corners i:nth-child(3){left:0;bottom:0;border-left:1px solid;border-bottom:1px solid;border-color:rgba(226,173,74,.18);}
.hud-corners i:nth-child(4){right:0;bottom:0;border-right:1px solid;border-bottom:1px solid;}
.hero-energy-beam { position:absolute; left:50%; top:7%; bottom:4%; width:1px; transform:translateX(-50%); background:linear-gradient(transparent,rgba(68,199,255,.16),rgba(226,173,74,.13),transparent); opacity:.55; z-index:-1; box-shadow:0 0 24px rgba(68,199,255,.12); }
.hero-status { position:absolute; top:118px; z-index:2; display:grid; gap:3px; color:#6f7b83; text-transform:uppercase; font-size:7px; letter-spacing:.18em; }
.hero-status span { color:#6b6b68; }
.hero-status b { color:var(--arcane-soft); font-size:8px; font-weight:700; }
.hero-status--left { left:42px; }
.hero-status--right { right:42px; text-align:right; }

.hero-logo-wrap { position:relative; width:min(660px,78vw); margin:14px auto -8px; display:grid; place-items:center; overflow:visible; }
.hero-logo-wrap .hero-logo { width:100%; margin:0; position:relative; z-index:2; }
.logo-orbit { position:absolute; border-radius:50%; pointer-events:none; }
.logo-orbit--1 { width:360px; height:360px; border:1px solid rgba(68,199,255,.11); box-shadow:inset 0 0 45px rgba(68,199,255,.02); animation:spinTech 18s linear infinite; }
.logo-orbit--2 { width:290px; height:290px; border:1px dashed rgba(226,173,74,.12); animation:spinTechReverse 13s linear infinite; }
.logo-orbit::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; top:-3px; left:50%; background:var(--arcane); box-shadow:0 0 14px var(--arcane); }
.logo-orbit--2::before { background:var(--gold); box-shadow:0 0 14px var(--gold); }
.logo-sweep { position:absolute; z-index:3; width:30%; height:115%; top:-7%; left:-36%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); filter:blur(4px); animation:logoSweep 5.5s ease-in-out infinite 1.2s; pointer-events:none; }

.launch-console { margin-top:20px; display:flex; align-items:center; gap:10px; color:#727a80; font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.launch-console i { width:70px; height:1px; background:linear-gradient(90deg,var(--arcane),rgba(226,173,74,.3)); box-shadow:0 0 8px rgba(68,199,255,.18); }
.launch-console b { color:var(--arcane-soft); font-size:8px; }

.hero-badges span { position:relative; overflow:hidden; }
.hero-badges span i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--arcane); box-shadow:0 0 8px var(--arcane); animation:pulse 1.8s infinite; }
.hero-badges span:nth-child(even) i { background:var(--gold); box-shadow:0 0 8px var(--gold); }

.skill-console { padding-top:100px; padding-bottom:80px; position:relative; }
.skill-console::before { content:""; position:absolute; left:50%; top:10%; width:min(1000px,90vw); height:620px; transform:translateX(-50%); background:radial-gradient(circle,rgba(68,199,255,.055),transparent 60%); pointer-events:none; }
.skill-console__head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.skill-console__head h2 { margin:14px 0 0; font-family:var(--display); font-size:clamp(34px,5vw,60px); line-height:1.06; font-weight:600; }
.skill-console__head h2 em { color:var(--arcane-soft); font-style:normal; }
.console-signal { min-width:190px; padding:16px 18px; border:1px solid rgba(68,199,255,.15); background:rgba(7,10,13,.58); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.console-signal span { width:7px;height:7px;border-radius:50%;background:var(--arcane);box-shadow:0 0 12px var(--arcane);animation:pulse 1.4s infinite; }
.console-signal small { color:#70787d;font-size:7px;letter-spacing:.16em; }
.console-signal b { color:var(--arcane-soft);font-size:9px; }
.skill-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.skill-tile { --skill-accent:var(--arcane); position:relative; min-height:240px; padding:26px; border:1px solid rgba(255,255,255,.075); background:linear-gradient(145deg,rgba(11,15,20,.82),rgba(17,13,10,.86)); overflow:hidden; transform-style:preserve-3d; transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease; }
.skill-tile--gold { --skill-accent:var(--gold); }
.skill-tile:hover { border-color:color-mix(in srgb,var(--skill-accent) 42%,transparent); box-shadow:inset 0 0 32px color-mix(in srgb,var(--skill-accent) 5%,transparent),0 20px 50px rgba(0,0,0,.28),0 0 28px color-mix(in srgb,var(--skill-accent) 8%,transparent); }
.skill-tile::before { content:""; position:absolute; inset:-1px; background:linear-gradient(115deg,transparent 25%,color-mix(in srgb,var(--skill-accent) 8%,transparent) 48%,transparent 67%); transform:translateX(-105%); transition:transform .65s ease; }
.skill-tile:hover::before { transform:translateX(105%); }
.skill-icon { position:absolute; right:24px; top:22px; width:66px; height:66px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--skill-accent) 35%,transparent); transform:rotate(45deg); box-shadow:inset 0 0 25px color-mix(in srgb,var(--skill-accent) 5%,transparent); }
.skill-icon span { transform:rotate(-45deg); font-family:var(--display); font-size:18px; color:color-mix(in srgb,var(--skill-accent) 90%,white 10%); }
.skill-data { max-width:72%; position:relative; z-index:2; transform:translateZ(18px); }
.skill-data small { color:var(--skill-accent); font-size:8px; letter-spacing:.2em; }
.skill-data h3 { margin:16px 0 10px; font-family:var(--display); font-size:26px; font-weight:600; }
.skill-data p { margin:0;color:#96918a;font-size:12px;line-height:1.7; }
.skill-meter { position:absolute; left:26px; right:26px; bottom:30px; height:2px; background:rgba(255,255,255,.045); }
.skill-meter i { display:block;width:var(--level);height:100%;background:linear-gradient(90deg,var(--skill-accent),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--skill-accent) 30%,transparent); animation:meterBoot 1.2s ease both; }
.skill-code { position:absolute; right:24px; bottom:20px; color:#555b5f; font-size:7px; letter-spacing:.15em; }

.cinematic-chip, .pillar, .adv-card, .event-card, .platform-device { transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.cinematic-chip:hover, .pillar:hover, .adv-card:hover, .event-card:hover { transform:translateY(-6px); border-color:rgba(68,199,255,.22); box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 0 28px rgba(68,199,255,.025); }
.adv-card--highlight:hover, .event-card--featured:hover { border-color:rgba(226,173,74,.44); box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 0 34px rgba(226,173,74,.04); }

.platform-link-label { margin-top:42px; margin-bottom:12px; display:flex; justify-content:space-between; gap:18px; color:#626b70; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.platform-link-label b { color:var(--arcane-soft); font-size:8px; }
.platform-showcase { margin-top:0; }
.platform-device:hover { transform:translateY(-5px); border-color:rgba(68,199,255,.28); box-shadow:0 18px 48px rgba(0,0,0,.25),inset 0 0 34px rgba(68,199,255,.035); }
.platform-bridge { position:relative; overflow:visible; }
.bridge-line { position:absolute; left:-30px; right:-30px; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--arcane),var(--gold),transparent); box-shadow:0 0 12px rgba(68,199,255,.2); animation:bridgePulse 2s ease-in-out infinite; }
.platform-bridge em { position:absolute; width:5px;height:5px;border-radius:50%;background:var(--arcane);box-shadow:0 0 12px var(--arcane);animation:bridgeNode 2.4s linear infinite; }

.timeline-track span { background:linear-gradient(90deg,var(--arcane),var(--gold),rgba(226,173,74,.2)); box-shadow:0 0 16px rgba(68,199,255,.15),0 0 12px rgba(226,173,74,.16); }
.milestone::before { border-color:var(--arcane); box-shadow:0 0 10px rgba(68,199,255,.12); }
.milestone.active::before { background:var(--arcane); box-shadow:0 0 16px rgba(68,199,255,.38); }

.event-livebar { margin:34px 0 18px; min-height:44px; padding:0 14px; display:flex; align-items:center; gap:10px; border:1px solid rgba(68,199,255,.11); background:rgba(8,11,14,.52); color:#727a7f; text-transform:uppercase; letter-spacing:.14em; font-size:8px; }
.event-livebar b { color:var(--arcane-soft);font-size:8px; }
.event-livebar i { flex:1;height:1px;background:linear-gradient(90deg,rgba(68,199,255,.28),transparent); }
.event-livebar small { font-size:7px;color:#65635f; }
.event-card h3 { text-shadow:0 0 20px rgba(68,199,255,.04); }

.whatsapp-float::before { content:""; position:absolute; inset:-5px; border-radius:999px; border:1px solid rgba(31,191,91,.22); animation:whatsPulse 2.2s ease-out infinite; }
.footer-core { display:flex;align-items:center;gap:8px;color:#69747a; }
.footer-core i { width:5px;height:5px;border-radius:50%;background:var(--arcane);box-shadow:0 0 8px var(--arcane); }

@keyframes spinTech { to { transform:rotate(360deg); } }
@keyframes spinTechReverse { to { transform:rotate(-360deg); } }
@keyframes logoSweep { 0%,62%{left:-36%;opacity:0} 68%{opacity:.7} 82%{left:108%;opacity:.2} 100%{left:108%;opacity:0} }
@keyframes energyRun { from{transform:translateX(-120%)} to{transform:translateX(340%)} }
@keyframes bootCore { 0%,100%{transform:scale(.96);opacity:.78} 50%{transform:scale(1.04);opacity:1} }
@keyframes bootScan { 0%,100%{transform:scaleX(.25);opacity:.25} 50%{transform:scaleX(1);opacity:1} }
@keyframes meterBoot { from{width:0} }
@keyframes bridgePulse { 0%,100%{opacity:.25}50%{opacity:.85} }
@keyframes bridgeNode { 0%{left:-20%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:115%;opacity:0} }
@keyframes whatsPulse { 0%{transform:scale(.92);opacity:.55}100%{transform:scale(1.16);opacity:0} }

@media (max-width:980px){
  .hero-status{display:none}
  .hud-corners{inset:84px 18px 24px}
  .skill-console__head{align-items:start;flex-direction:column}
  .skill-grid{grid-template-columns:1fr}
  .skill-data{max-width:78%}
  .platform-link-label{flex-direction:column;align-items:center;text-align:center}
  .bridge-line{top:50%;left:50%;right:auto;width:1px;height:90px;transform:translate(-50%,-50%);background:linear-gradient(transparent,var(--arcane),var(--gold),transparent)}
}
@media (max-width:680px){
  .boot-core{width:104px;height:104px}.boot-core img{width:60px}
  .hud-corners{display:none}
  .hero-logo-wrap{width:min(690px,100%)}
  .logo-orbit--1{width:260px;height:260px}.logo-orbit--2{width:210px;height:210px}
  .launch-console{font-size:7px}.launch-console i{width:36px}
  .skill-console{padding-top:72px;padding-bottom:60px}
  .skill-console__head h2{font-size:clamp(30px,10vw,43px)}
  .console-signal{width:100%}
  .skill-tile{min-height:255px;padding:22px}
  .skill-icon{width:54px;height:54px;right:20px;top:20px}
  .skill-data{max-width:78%}.skill-data h3{font-size:22px}.skill-data p{font-size:11px}
  .skill-meter{left:22px;right:22px;bottom:29px}
  .event-livebar{flex-wrap:wrap;padding:12px 14px}.event-livebar i{display:none}
  .footer-core{display:none}
}
@media (prefers-reduced-motion:reduce){
  .boot-sequence{display:none!important}
  .fx-canvas{display:none}
  .logo-orbit,.logo-sweep,.bridge-line,.platform-bridge em,.whatsapp-float::before{animation:none!important}
}