:root {
  --bg-1: #0d022f;
  --bg-2: #19004a;
  --panel: rgba(19, 7, 58, 0.78);
  --panel-border: rgba(255, 196, 0, 0.35);
  --text: #fff4c2;
  --muted: #d9c9ff;
  --gold-1: #ffd84a;
  --gold-2: #ff9900;
  --red-1: #c60016;
  --red-2: #7f0012;
  --shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(90, 40, 255, 0.4), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(255, 160, 0, 0.15), transparent 18%),
    radial-gradient(circle at 15% 25%, rgba(255, 60, 60, 0.18), transparent 18%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-orbs {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .28;
  pointer-events: none;
}
.orb-1 { width: 280px; height: 280px; background: #6d2cff; top: 6%; left: -60px; }
.orb-2 { width: 320px; height: 320px; background: #ff9f1a; top: 45%; right: -120px; }
.orb-3 { width: 260px; height: 260px; background: #ff2f63; bottom: -60px; left: 20%; }

.topbar,
.container,
.footer { position: relative; z-index: 2; }

.topbar {
  width: min(1200px, calc(100% - 32px));
  margin: 22px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brand-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #2c0000;
  background: linear-gradient(180deg, #fff370, #ff9d00);
  box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.5), 0 8px 28px rgba(255, 166, 0, 0.35);
}
.brand-note {
  color: var(--muted);
  font-weight: 700;
}

.mini-link {
  color: #fff4c2;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
}
.mini-link:hover { background: rgba(255,255,255,0.12); }

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 24px auto 0;
  padding-bottom: 32px;
}

.hero-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
  padding: 30px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(42, 12, 102, 0.9), rgba(18, 5, 56, 0.92));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}

.hero-copy h1 {
  margin: 12px 0 16px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #ffe97d;
  text-shadow:
    0 2px 0 #9d0000,
    0 0 12px rgba(255, 180, 0, 0.65),
    0 0 28px rgba(255, 95, 0, 0.38);
}
.hero-copy h1 span { color: #ffffff; }
.hero-copy p {
  margin: 0;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.65;
  color: #f2e8ff;
}
.kicker,
.panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,223,91,.18), rgba(255,127,0,.16));
  border: 1px solid rgba(255, 207, 85, 0.35);
  color: #ffe992;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.action-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 26px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .3px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cta:hover { transform: translateY(-2px) scale(1.01); }
.cta.primary,
.cta.large {
  color: #fff8d1;
  background: linear-gradient(180deg, #ffcc2f, #ff7b00);
  box-shadow: 0 0 0 4px rgba(140, 0, 0, 0.5), 0 16px 34px rgba(255, 127, 0, 0.28);
}
.cta.secondary {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
}
.large { min-width: 280px; }

.stats {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.stats li {
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.stats strong {
  display: block;
  font-size: 20px;
  color: #ffd84a;
  margin-bottom: 4px;
}
.stats span {
  color: #e7d9ff;
  font-size: 14px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}
.hero-image {
  position: relative;
  width: min(100%, 560px);
  border-radius: 28px;
  display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), 0 0 0 2px rgba(255, 196, 0, 0.14);
}
.glow-frame {
  position: absolute;
  inset: 8% 6%;
  border-radius: 34px;
  border: 2px solid rgba(255, 203, 66, 0.22);
  box-shadow: 0 0 120px rgba(255, 169, 24, 0.26), inset 0 0 60px rgba(255, 120, 0, 0.08);
  pointer-events: none;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.info-box,
.cta-panel {
  background: var(--panel);
  border: 1px solid rgba(255, 206, 80, 0.18);
  box-shadow: var(--shadow);
}
.info-box {
  padding: 24px;
  border-radius: 24px;
}
.info-box h2 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #ffdf68;
}
.info-box p {
  margin: 0;
  color: #efe5ff;
  line-height: 1.65;
}

.cta-panel {
  margin-top: 24px;
  padding: 28px;
  border-radius: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.cta-panel h2 {
  margin: 12px 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  color: #fff0a0;
}
.cta-panel p {
  margin: 0;
  color: #f1e8ff;
  font-size: 18px;
}

.footer {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 28px;
}
.footer p {
  margin: 0;
  text-align: center;
  color: #d2c2ff;
}

@media (max-width: 980px) {
  .hero-card,
  .info-grid,
  .cta-panel { grid-template-columns: 1fr; }
  .hero-card { display: block; }
  .hero-visual { min-height: auto; margin-top: 22px; }
  .cta-panel { display: block; }
  .cta-panel .cta { margin-top: 18px; width: 100%; }
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .hero-card { padding: 20px; border-radius: 24px; }
  .hero-copy p { font-size: 17px; }
  .cta { width: 100%; }
  .info-box { padding: 20px; }
}