:root {
  --blue: #0060FB;
  --blue-light: #01A7FB;
  --blue-soft: #68B3F8;
  --navy: #0A152A;
  --navy-deep: #030814;
  --ice: #EDEDED;
  --text: #F8FAFF;
  --muted: rgba(237, 237, 237, .72);
  --muted-soft: rgba(237, 237, 237, .52);
  --border: rgba(104, 179, 248, .18);
  --font-title: "Raleway", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html { background: var(--navy-deep); }

body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background:
    radial-gradient(circle at 76% 18%, rgba(1, 167, 251, .22), transparent 30%),
    radial-gradient(circle at 20% 82%, rgba(0, 96, 251, .20), transparent 34%),
    radial-gradient(circle at 52% 48%, rgba(104, 179, 248, .08), transparent 42%),
    linear-gradient(140deg, #020713 0%, #071127 46%, #02131f 100%);
}

button,
a { -webkit-tap-highlight-color: transparent; }

#spaceCanvas,
.universe,
.universe span {
  position: fixed;
  pointer-events: none;
}

#spaceCanvas {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.universe {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.universe::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .070;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.universe::after {
  content: "";
  position: fixed;
  inset: -18%;
  opacity: .20;
  background:
    linear-gradient(rgba(104,179,248,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,179,248,.020) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at 50% 50%, black 0 18%, transparent 70%);
  animation: gridDrift 42s linear infinite;
}

.nebula {
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  filter: blur(38px);
  opacity: .34;
  background: radial-gradient(circle, rgba(1, 167, 251, .34), rgba(0, 96, 251, .10) 40%, transparent 72%);
  animation: nebulaFloat 18s ease-in-out infinite;
}

.nebula-one { right: -16rem; top: -20rem; }
.nebula-two { left: -22rem; bottom: -24rem; opacity: .23; animation-delay: -7s; }
.nebula-three { left: 42%; top: 42%; width: 34rem; height: 34rem; opacity: .13; animation-delay: -12s; }

.orbit {
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  opacity: .22;
  background: repeating-radial-gradient(circle at center, rgba(104, 179, 248, .15) 0 1px, transparent 1px 13px);
  filter: blur(.55px);
  animation: slowRotate 72s linear infinite;
}

.orbit-one { right: -35vw; top: -36vw; }
.orbit-two { left: -44vw; bottom: -44vw; opacity: .11; animation-direction: reverse; }

.page {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 46px);
}

.coming-card {
  --glow-x: 50%;
  --glow-y: 42%;
  position: relative;
  width: min(980px, 100%);
  min-height: clamp(590px, 78dvh, 760px);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(48px, 7.4vh, 82px) clamp(28px, 5vw, 88px);
  border: 1px solid var(--border);
  border-radius: clamp(26px, 3vw, 44px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(104, 179, 248, .092), transparent 34%),
    radial-gradient(circle at 54% -12%, rgba(1, 167, 251, .105), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    linear-gradient(180deg, rgba(8, 18, 38, .72), rgba(3, 8, 20, .82));
  box-shadow:
    0 34px 110px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(104,179,248,.08);
  backdrop-filter: blur(17px) saturate(126%);
  transform: translateZ(0);
}

.coming-card::before,
.coming-card::after,
.card-glow {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.coming-card::before {
  inset: 0;
  background:
    linear-gradient(112deg, transparent 6%, rgba(255,255,255,.032) 18%, transparent 33%),
    radial-gradient(circle at 18% 22%, rgba(104,179,248,.07), transparent 25%);
  opacity: .55;
}

.coming-card::after {
  width: 58%;
  height: 1px;
  top: 0;
  left: 21%;
  background: linear-gradient(90deg, transparent, rgba(1,167,251,.82), transparent);
  opacity: .34;
  animation: topSignal 7.2s ease-in-out infinite;
}

.card-glow {
  width: 430px;
  height: 430px;
  left: calc(var(--glow-x) - 215px);
  top: calc(var(--glow-y) - 215px);
  border-radius: 999px;
  opacity: .34;
  background: radial-gradient(circle, rgba(1, 167, 251, .13), transparent 68%);
  transition: opacity .8s ease;
}

.brand-logo {
  display: block;
  width: clamp(145px, min(15vw, 17vh), 208px);
  height: auto;
  margin: 0 auto clamp(30px, 5vh, 46px);
  filter: drop-shadow(0 0 16px rgba(1, 167, 251, .14));
  animation: logoBreath 7.5s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 clamp(22px, 3.2vh, 32px);
  color: var(--blue-light);
  font-family: var(--font-title);
  font-size: clamp(.64rem, min(1vw, 1.5vh), .78rem);
  font-weight: 800;
  letter-spacing: clamp(.18em, .42vw, .34em);
  line-height: 1.42;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(1, 167, 251, .22);
}

.title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: clamp(8px, 1.2vw, 16px);
  margin: 0;
  padding: .02em .035em .18em;
  font-family: var(--font-title);
  font-size: clamp(3.6rem, min(9vw, 13vh), 7.1rem);
  line-height: 1.06;
  letter-spacing: -.064em;
  text-transform: lowercase;
}

.title span {
  color: rgba(255,255,255,.97);
  font-weight: 900;
}

.title strong {
  display: inline-block;
  padding-right: .075em;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(100deg, var(--blue), var(--blue-light), var(--blue-soft), var(--blue));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textFlow 7s ease-in-out infinite;
}

.subtitle {
  max-width: 700px;
  margin: clamp(10px, 1.7vh, 18px) auto 0;
  color: var(--muted);
  font-size: clamp(.88rem, min(1.03vw, 1.74vh), 1rem);
  line-height: 1.64;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vh, 22px);
  margin-top: clamp(34px, 5.5vh, 52px);
}

.whatsapp-button,
.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, background .32s ease, color .32s ease, box-shadow .32s ease, opacity .32s ease;
}

.whatsapp-button svg,
.social-link svg {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  flex: 0 0 auto;
}

.whatsapp-button {
  min-height: 54px;
  min-width: 248px;
  padding: 0 clamp(26px, 3.2vw, 38px);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  box-shadow: 0 18px 38px rgba(0, 96, 251, .22), inset 0 1px 0 rgba(255,255,255,.24);
}

.whatsapp-button::before,
.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.24) 44%, transparent 70%);
  transform: translateX(-135%) skewX(-16deg);
  transition: transform .84s cubic-bezier(.2,.8,.2,1);
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 52px rgba(1, 167, 251, .28), inset 0 1px 0 rgba(255,255,255,.28);
}

.whatsapp-button:hover::before,
.whatsapp-button:focus-visible::before,
.social-link:hover::before,
.social-link:focus-visible::before {
  transform: translateX(135%) skewX(-16deg);
}

.social-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -2px;
  color: var(--muted-soft);
}

.social-link {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(104,179,248,.13);
  color: rgba(248,250,255,.62);
  background: rgba(255,255,255,.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}

.social-link span {
  font-size: .82rem;
  font-weight: 700;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-1px);
  color: rgba(255,255,255,.92);
  border-color: rgba(1,167,251,.30);
  background: rgba(1,167,251,.055);
  box-shadow: 0 12px 26px rgba(0,0,0,.16), 0 0 24px rgba(1,167,251,.08);
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: revealUp .76s cubic-bezier(.2,.8,.2,1) forwards;
}

.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .25s; }
.delay-4 { animation-delay: .35s; }

@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes textFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes gridDrift { to { transform: translate3d(92px, 92px, 0); } }
@keyframes nebulaFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-20px, 18px, 0) scale(1.07); } }
@keyframes topSignal { 0%,100% { opacity: .20; transform: scaleX(.66); } 50% { opacity: .52; transform: scaleX(1); } }
@keyframes logoBreath { 0%,100% { transform: translateY(0); filter: drop-shadow(0 0 14px rgba(1,167,251,.12)); } 50% { transform: translateY(-3px); filter: drop-shadow(0 0 21px rgba(1,167,251,.21)); } }

@media (max-width: 760px) {
  .page { padding: 12px; }
  .coming-card {
    width: 100%;
    min-height: calc(100dvh - 24px);
    padding: clamp(28px, 5vh, 42px) 18px;
    border-radius: 28px;
  }
  .brand-logo { width: clamp(136px, 42vw, 176px); margin-bottom: 26px; }
  .eyebrow { max-width: 320px; letter-spacing: .20em; margin-bottom: 16px; }
  .title { font-size: clamp(3.2rem, 17vw, 5.8rem); gap: 8px; letter-spacing: -.07em; }
  .subtitle { max-width: 34rem; line-height: 1.58; }
  .actions { width: 100%; gap: 15px; margin-top: 30px; }
  .whatsapp-button { width: min(360px, 100%); }
  .social-area { width: 100%; gap: 8px; }
  .social-link { min-height: 38px; padding-inline: 13px; }
}

@media (max-width: 430px) {
  .coming-card { padding-inline: 15px; }
  .brand-logo { width: clamp(126px, 46vw, 156px); }
  .title { font-size: clamp(2.9rem, 16vw, 4.8rem); letter-spacing: -.075em; }
  .subtitle { font-size: .88rem; }
  .social-link span { display: none; }
  .social-link { width: 42px; padding: 0; }
  .social-link svg { width: 1.15em; height: 1.15em; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .page { padding: 24px; }
  .coming-card {
    min-height: calc(100dvh - 48px);
    width: min(930px, 100%);
    padding-block: 36px;
  }
  .brand-logo { width: 154px; margin-bottom: 24px; }
  .eyebrow { margin-bottom: 16px; }
  .title { font-size: clamp(3.7rem, min(7.8vw, 13vh), 6.2rem); }
  .subtitle { margin-top: 6px; max-width: 660px; line-height: 1.50; }
  .actions { margin-top: 28px; gap: 13px; }
  .whatsapp-button { min-height: 48px; }
  .social-link { min-height: 36px; }
}

@media (max-height: 620px) and (min-width: 761px) {
  .page { padding: 16px; }
  .coming-card { min-height: calc(100dvh - 32px); padding-block: 26px; }
  .brand-logo { width: 126px; margin-bottom: 14px; }
  .eyebrow { margin-bottom: 8px; }
  .title { font-size: clamp(3rem, min(7vw, 12vh), 5.1rem); }
  .subtitle { margin-top: 4px; line-height: 1.38; }
  .actions { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  #spaceCanvas { display: none; }
}