/* ============================================================================
   COMING SOON — simple / professional
   Palette taken directly from the brand mark:
     navy #1D366F · white #FBFCFC · gold #F6C018
   ========================================================================== */

:root{
  --navy-deep:#0C1836;
  --navy:#16284F;
  --navy-brand:#1D366F;

  --white:#FBFCFC;
  --white-70:rgba(251,252,252,.70);
  --white-55:rgba(251,252,252,.55);
  --white-45:rgba(251,252,252,.45);
  --line:rgba(251,252,252,.20);

  --gold:#F6C018;
  --gold-light:#FFD45E;
  --gold-deep:#D9A40C;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;

  --mark:clamp(126px, 18vmin, 196px);   /* displayed size of the mark */
  --ring-span:calc(var(--mark) * 3.2);
  --gap:clamp(14px, 2.2vh, 26px);
}

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

html{ -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  padding:0 clamp(20px,5vw,56px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(16px,2.6vh,34px);
  font-family:var(--font);
  color:var(--white);
  background:
    radial-gradient(58% 40% at 50% 34%, rgba(36,67,127,.55) 0%, rgba(22,40,79,0) 72%),
    linear-gradient(180deg,#0C1836 0%, var(--navy) 52%, #0E1B3A 100%);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- rings */
.rings{                              /* concentric with the mark, always */
  position:absolute; top:50%; left:50%;
  width:var(--ring-span); height:var(--ring-span);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ring--inner{ animation:spin 240s linear infinite; }
.ring--outer{ animation:spin 320s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------------- masthead */
.masthead{
  position:relative; z-index:2;
  padding-top:clamp(18px,3vh,30px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.lockup{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.lockup__mark{ position:relative; display:block; width:30px; height:30px; flex:0 0 auto; }
.lockup__ink{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.lockup__name{
  font-size:.75rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--white-70);
}
.lockup__name:empty{ display:none; }

.masthead__note{
  margin:0;
  font-size:.6875rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--white-45);
}

/* ----------------------------------------------------------------- hero */
.hero{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:var(--gap);
  padding:clamp(8px,1.6vh,20px) 0;
}

.mark{
  position:relative;
  width:var(--mark); height:var(--mark);
  flex:0 0 auto;
}
.mark::before{                      /* soft pool of light behind the mark */
  content:"";
  position:absolute; top:50%; left:50%;
  width:260%; height:260%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(246,192,24,.13) 0%, rgba(246,192,24,.04) 38%, rgba(246,192,24,0) 66%);
}
.mark__ink{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
.mark__ink--gold{ filter:drop-shadow(0 0 14px rgba(246,192,24,.28)); }

.headline{
  margin:0;
  font-size:clamp(2rem, 6vw, 3.5rem);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.024em;
  max-width:16ch;
}
.accent{ color:var(--gold); font-weight:400; }

.lede{
  margin:0;
  max-width:46ch;
  font-size:clamp(.9375rem, 2.2vw, 1.0625rem);
  font-weight:300;
  line-height:1.68;
  color:var(--white-70);
}

/* -------------------------------------------------------------- contact */
.contact{
  width:100%;
  max-width:460px;
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
}

.whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  gap:11px;
  height:56px;
  padding:0 34px;
  border-radius:10px;
  background:#25D366;
  color:#062A12;
  font-size:.9375rem; font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 12px 30px -12px rgba(37,211,102,.55);
  transition:background-color .25s ease, transform .15s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.whatsapp:hover{
  background:#2BE070;
  box-shadow:0 16px 38px -12px rgba(37,211,102,.7);
}
.whatsapp:active{ transform:translateY(1px); }
.whatsapp__icon{ width:22px; height:22px; flex:0 0 auto; }

.contact__alt{
  margin:0;
  font-size:.8125rem; font-weight:300;
  color:var(--white-55);
}
.contact__alt a{
  color:var(--white-70);
  text-decoration:none;
  border-bottom:1px solid rgba(251,252,252,.28);
  transition:color .25s ease, border-color .25s ease;
}
.contact__alt a:hover{ color:var(--gold); border-color:var(--gold); }

/* ------------------------------------------------------------- footer */
.footer{
  position:relative; z-index:2;
  padding-bottom:clamp(18px,3vh,30px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,1.5vh,16px);
  font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,252,252,.50);
}
.footer__legal{
  margin:0;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; column-gap:12px; row-gap:6px;
}

.credit{
  margin:0;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; column-gap:9px; row-gap:7px;
  color:rgba(251,252,252,.38);
}
.credit__link{
  display:inline-flex; align-items:center;
  border-radius:5px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.credit__link:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
}
.credit__logo{ display:block; height:24px; width:auto; }
.footer a{ color:var(--white-55); text-decoration:none; transition:color .25s ease; }
.footer a:hover{ color:var(--gold); }
.footer__sep{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }

/* ----------------------------------------------------------- entrance */
.masthead, .mark, .headline, .lede, .contact, .footer{
  opacity:0;
  animation:fade .8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.masthead{ animation-delay:.05s; }
.mark    { animation-delay:.15s; }
.headline{ animation-delay:.25s; }
.lede    { animation-delay:.35s; }
.contact { animation-delay:.45s; }
.footer  { animation-delay:.55s; }

/* ------------------------------------------------------- responsive */
@media (max-width:560px){
  .lockup__name{ font-size:.625rem; letter-spacing:.16em; }
  .footer__place, .footer__sep--place{ display:none; }
  .footer__legal{ column-gap:10px; }
  .credit__logo{ height:21px; }
  .contact{ max-width:400px; }
  .whatsapp{ width:100%; height:54px; padding:0 20px; }
  .masthead__note{ display:none; }
  .headline{ font-size:clamp(1.875rem, 8.4vw, 2.5rem); max-width:14ch; }
}

@media (max-height:680px) and (min-width:561px){
  :root{ --mark:clamp(96px, 12vmin, 132px); --gap:13px; }
  .headline{ font-size:clamp(1.75rem, 4.4vw, 2.5rem); }
  .lede{ font-size:.875rem; }
}

/* ---------------------------------------------------- accessibility */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .masthead,.mark,.headline,.lede,.contact,.footer{ opacity:1 !important; transform:none !important; }
}