:root {
  --orange: #F58220;
  --orange-soft: #ffa14d;
  --bg: #0b1220;
  --bg-2: #111b30;
  --text: #ffffff;
  --muted: #9aa7bd;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%, #070c17 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Soft sun glow behind content */
.glow {
  position: fixed;
  left: 50%;
  top: 38%;
  width: min(900px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245,130,32,.22) 0%, rgba(245,130,32,.08) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: breathe 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes breathe {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* Layout: perfectly centered on every screen */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem 0 4.5rem;
}

/* Sun mark */
.sun {
  width: clamp(110px, 22vw, 190px);
  height: auto;
  margin-bottom: clamp(.5rem, 2vw, 1rem);
  filter: drop-shadow(0 0 18px rgba(245,130,32,.45));
  overflow: visible;
}

.rays line { animation: ray 3.2s ease-in-out infinite; }
.rays line:nth-child(odd) { animation-delay: .5s; }

@keyframes ray {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Brand text */
.brand {
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--orange);
  font-size: clamp(2.1rem, 8.5vw, 4.6rem);
  text-transform: uppercase;
}

.unit {
  margin: .7rem 0 0;
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(.58rem, 2.2vw, .85rem);
}

.divider {
  width: 64px;
  height: 3px;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}

/* Coming soon */
.title {
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .28em;
  padding-left: .28em; /* balances letter-spacing for true centering */
  font-size: clamp(1.4rem, 5.2vw, 2.6rem);
}

.lead-text {
  margin: 1.1rem auto 0;
  max-width: 34ch;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(.9rem, 2.6vw, 1.1rem);
}

/* Footer */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  color: #5f6c82;
  font-size: .75rem;
  letter-spacing: .08em;
}

/* Entrance animation */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Small phones */
@media (max-width: 380px) {
  .unit { letter-spacing: .14em; }
  .title { letter-spacing: .2em; padding-left: .2em; }
}

/* Short landscape screens (phones sideways, small laptops) */
@media (max-height: 520px) {
  .page { padding: 1.5rem 0 3.5rem; }
  .sun { width: 90px; }
  .divider { margin: 1rem auto; }
  .lead-text { margin-top: .6rem; }
}

/* Large / TV screens */
@media (min-width: 1600px) {
  .brand { font-size: 5.4rem; }
  .title { font-size: 3rem; }
  .lead-text { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .rays line, .reveal { animation: none; }
  .reveal { opacity: 1; transform: none; }
}