/* ==========================================================================
   Playitium — Coming Soon
   Pure CSS: 3s splash loader -> water drain reveal -> animated hero
   ========================================================================== */

:root {
  --navy: #071326;
  --navy-2: #0b1d3d;
  --teal: #12c8d0;
  --teal-2: #2de0c8;
  --gold: #e8b65b;
  --light: #b5c5d8;
  --white: #ffffff;

  --loader-time: 3s;      /* how long the splash stays */
  --drain-time: 1.4s;     /* how long the water takes to drain */
  --reveal: 3.25s;         /* when page elements start to appear */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-drain: cubic-bezier(.65, 0, .35, 1);

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--white);
  background: var(--navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   Loader
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  /* top edge is plain navy so it matches the wave color */
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(18, 200, 208, .14), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #0a1a35 100%);
  animation: drain var(--drain-time) var(--ease-drain) var(--loader-time) forwards;
}

/* wavy "water" edge that sits on top of the loader while it drains */
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  pointer-events: none;
}

/* main wave (same navy as the loader) */
.loader::before {
  height: 70px;
  margin-bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='%23071326'/%3E%3C/svg%3E");
  animation: wave-move 1.6s linear 3;
}

/* translucent teal wave behind it — the water "foam" */
.loader::after {
  z-index: -1;
  height: 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='%2312C8D0' fill-opacity='.45'/%3E%3C/svg%3E");
  animation: wave-move 2.4s linear 2 reverse;
}

@keyframes wave-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes drain {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(100% + 120px)); visibility: hidden; }
}

.loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  animation: loader-out .5s ease-in calc(var(--loader-time) - .25s) forwards;
}

@keyframes loader-out {
  to { opacity: 0; transform: translateY(24px) scale(.96); }
}

.loader__logo {
  width: clamp(96px, 22vw, 128px);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(18, 200, 208, .45));
  animation:
    logo-in .9s var(--ease-out) both,
    logo-breathe 2.2s ease-in-out .9s 2;
}

@keyframes logo-in {
  from { opacity: 0; transform: scale(.4) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 22px rgba(18, 200, 208, .35)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(232, 182, 91, .55)); }
}

.loader__name {
  margin-top: 26px;
  display: flex;
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

.loader__name span {
  display: inline-block;
  background: linear-gradient(180deg, #fff 30%, #9dacbe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: letter-in .6s var(--ease-out) both;
}

.loader__name span:nth-child(1) { animation-delay: .35s; }
.loader__name span:nth-child(2) { animation-delay: .40s; }
.loader__name span:nth-child(3) { animation-delay: .45s; }
.loader__name span:nth-child(4) { animation-delay: .50s; }
.loader__name span:nth-child(5) { animation-delay: .55s; }
.loader__name span:nth-child(6) { animation-delay: .60s; }
.loader__name span:nth-child(7) { animation-delay: .65s; }
.loader__name span:nth-child(8) { animation-delay: .70s; }
.loader__name span:nth-child(9) { animation-delay: .75s; }

@keyframes letter-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loader__tag {
  margin-top: 10px;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--light);
  animation: fade-in .6s ease .9s both;
}

.loader__bar {
  position: relative;
  width: clamp(170px, 46vw, 240px);
  height: 3px;
  margin-top: clamp(44px, 9vh, 72px);
  border-radius: 3px;
  background: rgba(181, 197, 216, .18);
  overflow: hidden;
  animation: fade-in .4s ease .2s both;
}

.loader__bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #7ee7ff 60%, var(--gold));
  box-shadow: 0 0 12px rgba(18, 200, 208, .8);
  width: 0;
  animation: bar-fill calc(var(--loader-time) - .4s) cubic-bezier(.45, .05, .3, 1) .2s forwards;
}

@keyframes bar-fill {
  0%   { width: 0; }
  40%  { width: 45%; }
  70%  { width: 62%; }
  100% { width: 100%; }
}

.loader__slogan {
  margin-top: 26px;
  font-size: clamp(14px, 3.6vw, 16px);
  color: #dfe8f3;
  animation: fade-in .8s ease 1.1s both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Page
   ========================================================================== */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 90% at 85% 40%, rgba(64, 80, 255, .55), transparent 65%),
    radial-gradient(50% 60% at 100% 100%, rgba(150, 70, 255, .35), transparent 70%),
    linear-gradient(115deg, #050d1f 0%, #071326 35%, #0d1f5c 75%, #1f3bd1 120%);
}

/* soft moving lights in the background */
.glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
}

.glow--1 {
  width: 420px; height: 420px;
  right: 8%; top: 10%;
  background: #2f5bff;
  animation: drift 14s ease-in-out infinite;
}

.glow--2 {
  width: 320px; height: 320px;
  right: 30%; bottom: -80px;
  background: #8a3dff;
  animation: drift 18s ease-in-out -6s infinite reverse;
}

.glow--3 {
  width: 260px; height: 260px;
  left: -80px; top: 40%;
  background: var(--teal);
  opacity: .18;
  animation: drift 16s ease-in-out -3s infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 30px) scale(1.1); }
  66%      { transform: translate(30px, -20px) scale(.95); }
}

/* ---------- header ---------- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1200px, 100% - 48px);
  margin: 28px auto 0;
  padding: 16px 28px;
  border-radius: 22px;
  background: rgba(7, 19, 38, .45);
  border: 1px solid rgba(181, 197, 216, .1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: drop-in .9s var(--ease-out) var(--reveal) both;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
}

.brand img {
  width: 40px;
  height: 40px;
  transition: transform .4s var(--ease-out);
}

.brand:hover img { transform: rotate(-12deg) scale(1.08); }

/* ---------- hero ---------- */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 24px;
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
  padding: 40px 0 24px;
}

.hero__text { padding-left: 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(232, 182, 91, .1);
  border: 1px solid rgba(232, 182, 91, .35);
  animation: rise .8s var(--ease-out) calc(var(--reveal) + .2s) both;
}

.badge__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: ping 1.8s ease-out infinite;
}

@keyframes ping {
  from { transform: scale(1);   opacity: .8; }
  to   { transform: scale(3.2); opacity: 0; }
}

.title {
  margin: 0;
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
}

.title__line {
  display: block;
  animation: rise 1s var(--ease-out) both;
}

.title__line:nth-child(1) { animation-delay: calc(var(--reveal) + .3s); }
.title__line:nth-child(2) { animation-delay: calc(var(--reveal) + .45s); }

.title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--teal), #7ef5e4, var(--teal), var(--gold), var(--teal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-flow 6s linear infinite;
}

@keyframes text-flow {
  to { background-position: 300% 0; }
}

.lead {
  margin: 26px 0 0;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.5;
  color: #e3eaf3;
  animation: rise 1s var(--ease-out) calc(var(--reveal) + .6s) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- footer ---------- */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
  padding: 0 8px 26px;
  font-size: 13px;
  color: rgba(181, 197, 216, .7);
  animation: fade-in 1s ease calc(var(--reveal) + 1s) both;
}

.footer__slogan { color: rgba(232, 182, 91, .8); }

/* ==========================================================================
   Scene — glass cubes and floating shapes
   ========================================================================== */

.scene {
  display: flex;
  justify-content: center;
  animation: scene-in 1.4s var(--ease-out) calc(var(--reveal) + .2s) both;
}

@keyframes scene-in {
  from { opacity: 0; transform: scale(.7) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.scene__box {
  position: relative;
  width: min(580px, 100%);
  aspect-ratio: 1;
  container-type: inline-size;
}

/* ---------- cube ---------- */

.cube {
  --s: 30cqw;                 /* cube size */
  --c: 70 130 255;            /* cube color (r g b) */
  --a: .42;                   /* face opacity */
  --rx: -22deg;
  --ry: 36deg;
  position: absolute;
  width: var(--s);
  height: var(--s);
  perspective: 1200px;
  filter: drop-shadow(0 0 4cqw rgb(var(--c) / .45));
  --ax: 2.4cqw;               /* wander range, x */
  --ay: 2.4cqw;               /* wander range, y */
  transition: filter .35s ease;
  animation: atom 7.3s ease-in-out infinite;
}

@media (hover: hover) {
  .cube:hover {
    filter: drop-shadow(0 0 6cqw rgb(var(--c) / .85)) brightness(1.15);
  }
}

/* ---------- click to play ----------
   Each cube has a hidden checkbox; the label around the cube toggles it.
   Checked and unchecked states run two different orbit animations, so
   every click swaps the animation name and the orbit plays again.
   (The unchecked one also plays once on load, hidden by the loader.)
   Only the cube faces take clicks, so the whole visible cube is clickable. */

.cube { pointer-events: none; }
.cube .f { pointer-events: auto; }

.cube input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cube__pop {
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cube input:checked ~ .cube__pop       { animation: orbit-cw 1.2s ease-in-out; }
.cube input:not(:checked) ~ .cube__pop { animation: orbit-ccw 1.2s ease-in-out; }

/* Electron-style orbit: rotate(a) translateX(r) rotate(-a) moves the cube
   around a circle without tilting it; r grows and shrinks, so the path is
   a spiral out and back in. The trailing rotateY/rotateX spins it on the way. */
@keyframes orbit-cw {
  0%   { transform: rotate(0deg)   translateX(0)   rotate(0deg)    rotateY(0); }
  25%  { transform: rotate(90deg)  translateX(30%) rotate(-90deg)  rotateY(90deg); }
  50%  { transform: rotate(180deg) translateX(38%) rotate(-180deg) rotateY(180deg); }
  75%  { transform: rotate(270deg) translateX(30%) rotate(-270deg) rotateY(270deg); }
  100% { transform: rotate(360deg) translateX(0)   rotate(-360deg) rotateY(360deg); }
}

@keyframes orbit-ccw {
  0%   { transform: rotate(0deg)    translateX(0)    rotate(0deg)   rotateX(0); }
  25%  { transform: rotate(-90deg)  translateX(-30%) rotate(90deg)  rotateX(-90deg); }
  50%  { transform: rotate(-180deg) translateX(-38%) rotate(180deg) rotateX(-180deg); }
  75%  { transform: rotate(-270deg) translateX(-30%) rotate(270deg) rotateX(-270deg); }
  100% { transform: rotate(-360deg) translateX(0)    rotate(360deg) rotateX(-360deg); }
}

.cube__body {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  animation: sway 9s ease-in-out infinite;
}

.f {
  position: absolute;
  inset: 0;
  border-radius: 16%;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .35), transparent 45%),
    linear-gradient(145deg, rgb(var(--c) / calc(var(--a) + .2)), rgb(var(--c) / calc(var(--a) - .25)));
  border: .45cqw solid rgb(255 255 255 / .5);
  box-shadow:
    inset 0 0 calc(var(--s) * .22) rgb(var(--c) / .95),
    inset 0 0 calc(var(--s) * .05) rgb(255 255 255 / .6);
}

.f--front  { transform: translateZ(calc(var(--s) / 2)); }
.f--back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f--right  { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.f--left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f--top    { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
.f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* wandering loop, like an atom drifting around its spot.
   --ax/--ay set the range (negative values mirror the path),
   different durations per element keep them out of sync. */
@keyframes atom {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(var(--ax), calc(var(--ay) * -.6)) rotate(calc(var(--rot, 0deg) * .5)); }
  45% { transform: translate(calc(var(--ax) * -.4), calc(var(--ay) * -1)) rotate(var(--rot, 0deg)); }
  70% { transform: translate(calc(var(--ax) * -1), calc(var(--ay) * .4)) rotate(calc(var(--rot, 0deg) * .3)); }
  85% { transform: translate(calc(var(--ax) * .5), calc(var(--ay) * .8)) rotate(calc(var(--rot, 0deg) * -.3)); }
}

@keyframes sway {
  0%, 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
  50%      { transform: rotateX(calc(var(--rx) + 8deg)) rotateY(calc(var(--ry) + 18deg)); }
}

@keyframes spin {
  from { transform: rotateX(0) rotateY(0) rotateZ(0); }
  to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

/* big blue — top */
.cube--1 {
  --s: 31cqw;
  --c: 60 150 255;
  left: 34%; top: 8%;
  z-index: 1;
}

/* orange — the accent one, in front */
.cube--2 {
  --s: 22cqw;
  --c: 255 150 40;
  --a: .78;
  --ry: 28deg;
  left: 63%; top: 24%;
  z-index: 4;
  --ax: -2.8cqw;
  --ay: 2cqw;
  animation-duration: 5.9s;
  animation-delay: -1.5s;
}
.cube--2 .cube__body { animation-duration: 7s; animation-delay: -2s; }
.cube--2 .f {
  border-color: rgb(255 230 170 / .7);
  background:
    linear-gradient(145deg, rgb(255 240 200 / .55), transparent 50%),
    linear-gradient(145deg, #ffb53d, #f08a12);
}

/* purple-blue — bottom left */
.cube--3 {
  --s: 30cqw;
  --c: 120 90 255;
  --ry: 42deg;
  left: 20%; top: 50%;
  z-index: 2;
  --ax: 2cqw;
  --ay: -2.6cqw;
  animation-duration: 8.1s;
  animation-delay: -3s;
  animation-direction: reverse;
}
.cube--3 .cube__body { animation-delay: -4s; }

/* blue — bottom right */
.cube--4 {
  --s: 32cqw;
  --c: 70 120 255;
  --ry: 30deg;
  left: 54%; top: 52%;
  z-index: 3;
  --ax: -2.2cqw;
  --ay: -2cqw;
  animation-duration: 6.7s;
  animation-delay: -2s;
}
.cube--4 .cube__body { animation-delay: -6s; }

/* small spinning teal cube */
.cube--5 {
  --s: 9cqw;
  --c: 18 200 208;
  --a: .55;
  left: 86%; top: 6%;
  z-index: 1;
  --ax: 3cqw;
  --ay: 3cqw;
  animation-duration: 4.9s;
  animation-direction: reverse;
}
.cube--5 .cube__body { animation: spin 12s linear infinite; }
.cube--5 .f { border-radius: 20%; }

/* ---------- flat shapes ---------- */

.shape {
  position: absolute;
  width: var(--w);
  aspect-ratio: 1;
  --ax: 2cqw;
  --ay: 2.6cqw;
  --rot: 14deg;
  animation: atom 7s ease-in-out infinite;
}

.shape i {
  display: block;
  width: 100%;
  height: 100%;
}



/* pink play triangle */
.shape--play {
  --w: 13cqw;
  left: 4%; top: 24%;
  z-index: 2;
  filter: drop-shadow(0 0 3cqw rgba(232, 70, 255, .6));
  animation-duration: 6s;
}
.shape--play i {
  clip-path: polygon(14% 4%, 96% 50%, 14% 96%);
  background: linear-gradient(140deg, #ff86e6, #c440ff 55%, #7a2cff);
  border-radius: 12%;
}

/* hexagons */
.shape--hex i { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }

.shape--hex-purple {
  --w: 15cqw;
  left: 1%; top: 66%;
  --rot: -20deg;
  filter: drop-shadow(0 0 3cqw rgba(170, 80, 255, .6));
  animation-duration: 8s;
  animation-delay: -2s;
}
.shape--hex-purple i { background: linear-gradient(150deg, #e08cff, #9a3dff 50%, #5a1fd1); }

.shape--hex-teal {
  --w: 8cqw;
  left: 90%; top: 30%;
  --rot: 40deg;
  filter: drop-shadow(0 0 2cqw rgba(18, 200, 208, .7));
  animation-duration: 6.5s;
  animation-delay: -4s;
}
.shape--hex-teal i { background: linear-gradient(150deg, #8ff7f0, #12c8d0 55%, #0a8aa0); }

.shape--hex-blue {
  --w: 7cqw;
  left: 92%; top: 74%;
  --rot: -30deg;
  filter: drop-shadow(0 0 2cqw rgba(60, 150, 255, .7));
  animation-duration: 7.5s;
  animation-delay: -1s;
}
.shape--hex-blue i { background: linear-gradient(150deg, #9fd0ff, #3c8cff 55%, #2350d8); }

/* small gems (rotated squares) */
.shape--gem i {
  transform: rotate(45deg);
  border-radius: 18%;
}

.shape--gem-1 {
  --w: 3cqw;
  left: 26%; top: 40%;
  --rot: 90deg;
  filter: drop-shadow(0 0 1.5cqw #ff6bd6);
  animation-duration: 5s;
}
.shape--gem-1 i { background: linear-gradient(135deg, #ffb0ee, #ff4fbf); }

.shape--gem-2 {
  --w: 2.6cqw;
  left: 88%; top: 52%;
  --rot: -90deg;
  filter: drop-shadow(0 0 1.5cqw #ff5f8f);
  animation-duration: 5.5s;
  animation-delay: -2s;
}
.shape--gem-2 i { background: linear-gradient(135deg, #ffb3c6, #ff4f7a); }

.shape--gem-3 {
  --w: 3.4cqw;
  left: 46%; top: 90%;
  --rot: 120deg;
  filter: drop-shadow(0 0 1.5cqw var(--teal));
  animation-duration: 6s;
  animation-delay: -3s;
}
.shape--gem-3 i { background: linear-gradient(135deg, #b0fff6, var(--teal)); }

/* sparkles */
.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(150, 220, 255, .9);
  animation: twinkle 3.2s ease-in-out var(--d) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0;  transform: scale(.3); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 820px) {
  .header {
    width: calc(100% - 32px);
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 18px;
  }

  .brand { font-size: 17px; }
  .brand img { width: 34px; height: 34px; }

  .loader::before { height: 44px; }
  .loader::after  { height: 70px; }

  .hero {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    padding: 36px 0 16px;
    gap: 8px;
    text-align: center;
  }

  .hero__text { padding-left: 0; }

  .badge { margin-bottom: 20px; font-size: 12px; }

  .lead { margin: 20px 0 12px; }
  .lead br { display: none; }

  .scene__box { width: min(420px, 100%); }

  .glow--1 { width: 300px; height: 300px; right: -60px; top: auto; bottom: 10%; }
  .glow--2 { width: 240px; height: 240px; }

  .footer {
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .page {
    background:
      radial-gradient(90% 50% at 70% 75%, rgba(64, 80, 255, .55), transparent 70%),
      radial-gradient(70% 40% at 100% 100%, rgba(150, 70, 255, .35), transparent 70%),
      linear-gradient(180deg, #050d1f 0%, #071326 40%, #0d1f5c 85%, #1f3bd1 130%);
  }
}

/* ==========================================================================
   Reduced motion: short loader, simple fade, still shapes
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root { --reveal: 3.2s; }

  .loader { animation: fade-away .4s ease var(--loader-time) forwards; }
  .loader::before,
  .loader::after { display: none; }

  .cube, .cube__body, .cube__pop, .shape, .glow, .spark,
  .loader__logo, .title em, .badge__dot::after {
    animation: none !important;
  }

  .spark { opacity: .7; }

  .header, .badge, .title__line, .lead, .scene,
  .loader__name span { animation-name: fade-in !important; }
  .loader__content { animation-name: fade-away !important; }
}

@keyframes fade-away {
  to { opacity: 0; visibility: hidden; }
}