@font-face { font-family: "Oxanium"; src: url("/assets/fonts/oxanium.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

/* The badge's own colours: a Hollywood sunset over a dark purple night. */
:root {
  --night: #120a1c;
  --dusk: #1d1030;
  --line: #3a2553;
  --text: #f6efff;
  --muted: #b9a8cf;
  --pink: #ff5fa2;
  --orange: #ff9a3c;
  --violet: #b56cff;
  --display: "Oxanium", "Eurostile", "Arial Narrow", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 72rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(70rem 40rem at 30% -10%, rgba(181, 108, 255, 0.22), transparent 70%), radial-gradient(60rem 36rem at 100% 30%, rgba(255, 95, 162, 0.14), transparent 70%), var(--night); background-attachment: fixed; color: var(--text); font: 400 1.0625rem/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--pink); color: #120a1c; padding: 0.5rem 0.9rem; border-radius: 6px; }
.skip:focus { left: 0.5rem; }

.hero { max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.status { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; font: 600 0.85rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.status span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--orange); animation: pulse 1.8s ease-in-out infinite; }
h1 { margin-top: 1.1rem; font: 800 clamp(2.2rem, 5.4vw, 4.4rem)/1 var(--display); overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: 0.01em; background: linear-gradient(180deg, #ffd166 10%, #ff7a3c 55%, #ff3d8b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin-top: 1rem; font: 600 1.05rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.lead { margin-top: 1.2rem; max-width: 32rem; font-size: 1.2rem; color: #e6daf5; }

/* The badge is a picture; the moving parts are an SVG laid over it. */
.badge { position: relative; max-width: 34rem; margin: 0 auto; width: 100%; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.smoke { stroke-dasharray: 140 520; stroke-dashoffset: 140; opacity: 0; animation: smoke 6s linear infinite; }
.smoke.b { animation-delay: -3s; }
.ember { transform-box: fill-box; transform-origin: center; animation: ember 3.4s ease-in-out infinite; }
.ring { animation: ring 2.8s ease-in-out infinite; }
.glint { transform-box: fill-box; transform-origin: center; animation: glint 4.5s ease-in-out infinite; }
@keyframes smoke { 0% { stroke-dashoffset: 140; opacity: 0; } 15% { opacity: 0.55; } 70% { opacity: 0.35; } 100% { stroke-dashoffset: -520; opacity: 0; } }
@keyframes ember { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ring { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.9; } }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1.3) rotate(40deg); } 90% { opacity: 0; transform: scale(0.3) rotate(80deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }

.plan { max-width: var(--wide); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); border-top: 1px solid var(--line); }
.plan h2 { font: 800 clamp(1.9rem, 4.4vw, 3.2rem)/1.05 var(--display); text-transform: uppercase; }
.intro { margin-top: 0.8rem; max-width: 40rem; font-size: 1.15rem; color: var(--muted); }
/* the first card is the reason the platform exists, so it is twice as wide */
.features { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.features li { padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(29, 16, 48, 0.72); }
.features .wide { grid-column: span 2; background: linear-gradient(135deg, rgba(255, 95, 162, 0.2), rgba(255, 154, 60, 0.12)), rgba(29, 16, 48, 0.72); border-color: rgba(255, 95, 162, 0.5); }
.features h3 { font: 700 1.35rem/1.2 var(--display); letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.features .wide h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #ffd166; }
.features p { color: #d9cbea; }
.features .wide p { font-size: 1.1rem; max-width: 34rem; }

.foot { max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .badge { max-width: 24rem; }
  .lead { margin-inline: auto; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .features .wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }