/* ==========================================================================
   M8KE - Coming Soon
   Brand: navy #212C65 / grey #898D8E
   ========================================================================== */

:root{
  --navy:#212C65;
  --navy-600:#1a2350;
  --navy-400:#39468f;
  --grey:#898D8E;
  --grey-300:#c6c9cb;

  --ink:#151a2e;
  --ink-soft:#525a72;

  --bg:#eef1f7;
  --card:rgba(255,255,255,.72);
  --line:rgba(33,44,101,.10);

  --radius:28px;

  --shadow-lg:0 30px 80px -30px rgba(21,26,46,.38), 0 8px 24px -12px rgba(21,26,46,.16);
  --shadow-btn:0 12px 24px -10px rgba(33,44,101,.65);

  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; color-scheme:light }

body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -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;
}

/* ---------- ambient background ------------------------------------------ */

.bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%, #ffffff 0%, #f3f5fa 45%, #e7ebf4 100%);
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.orb--1{
  width:46vmax;height:46vmax; top:-16vmax; left:-12vmax;
  background:radial-gradient(circle at 30% 30%, rgba(57,70,143,.55), rgba(33,44,101,0) 68%);
  animation:drift1 22s var(--ease) infinite alternate;
}
.orb--2{
  width:40vmax;height:40vmax; bottom:-16vmax; right:-10vmax;
  background:radial-gradient(circle at 60% 40%, rgba(137,141,142,.55), rgba(137,141,142,0) 70%);
  animation:drift2 26s var(--ease) infinite alternate;
}
.orb--3{
  width:32vmax;height:32vmax; top:38%; left:52%;
  background:radial-gradient(circle at 50% 50%, rgba(33,44,101,.32), rgba(33,44,101,0) 70%);
  animation:drift3 30s var(--ease) infinite alternate;
}

@keyframes drift1{ to{ transform:translate3d(9vmax,6vmax,0) scale(1.12) } }
@keyframes drift2{ to{ transform:translate3d(-8vmax,-5vmax,0) scale(1.08) } }
@keyframes drift3{ to{ transform:translate3d(-10vmax,7vmax,0) scale(.9) } }

.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(33,44,101,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33,44,101,.055) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
}

.noise{
  position:absolute; inset:0; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

/* ---------- layout ------------------------------------------------------ */

.shell{
  position:relative; z-index:1;
  width:100%;
  max-width:760px;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(14px,2.4vw,20px);
  padding:clamp(30px,5.4vw,60px) clamp(20px,5vw,64px) clamp(24px,4vw,40px);
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
          backdrop-filter:blur(22px) saturate(160%);
  overflow:hidden;
  animation:rise .9s var(--ease) both;
}

/* hairline sheen around the glass edge */
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,0) 34%, rgba(33,44,101,.14) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(26px) scale(.985) }
  to  { opacity:1; transform:none }
}

/* stagger the children in */
.card > *{ animation:fadeUp .7s var(--ease) both }
.card > .badge   { animation-delay:.06s }
.card > .headline{ animation-delay:.22s }
.card > .copy    { animation-delay:.30s }
.card > .form    { animation-delay:.38s }
.card > .hint    { animation-delay:.46s }
.card > .foot    { animation-delay:.54s }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

/* ---------- badge ------------------------------------------------------- */

.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy);
  background:rgba(33,44,101,.06);
  border:1px solid rgba(33,44,101,.12);
}
.badge__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--navy);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(33,44,101,.45) }
  70% { box-shadow:0 0 0 10px rgba(33,44,101,0) }
  100%{ box-shadow:0 0 0 0 rgba(33,44,101,0) }
}

/* ---------- logo -------------------------------------------------------- */

.logo{
  width:min(340px,72%);
  height:auto;
  margin:clamp(4px,1.5vw,10px) 0 0;
  animation:fadeUp .7s var(--ease) .14s both, float 7s ease-in-out 1s infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-7px) }
}

/* ---------- headline ---------------------------------------------------- */

.headline{
  position:relative;
  margin:0;
  font-size:clamp(38px,8.2vw,68px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.4;
  background-image:linear-gradient(100deg,var(--navy) 0%,var(--navy-400) 38%,var(--grey) 78%,var(--navy) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:fadeUp .7s var(--ease) .22s both, sheen 7s linear 1s infinite;
}
@keyframes sheen{ to{ background-position:220% 0 } }

.headline__mark{ -webkit-text-fill-color:var(--navy); color:var(--navy) }

/* ---------- copy -------------------------------------------------------- */

.copy{
  max-width:46ch;
  margin:0;
  display:grid;
  gap:6px;
}
.copy p{
  margin:0;
  font-size:clamp(15px,2.4vw,18px);
  line-height:1.65;
  color:var(--ink-soft);
  font-weight:500;
}
.copy p:first-child{ color:var(--ink); font-weight:600 }

/* ---------- form -------------------------------------------------------- */

.form{
  width:100%;
  max-width:520px;
  margin-top:clamp(4px,1.4vw,10px);
}

.field{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 7px 7px 16px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(21,26,46,.4);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.field:focus-within{
  border-color:rgba(33,44,101,.5);
  box-shadow:0 0 0 4px rgba(33,44,101,.10), 0 14px 34px -20px rgba(21,26,46,.5);
}
.field.is-invalid{
  border-color:#e0525c;
  box-shadow:0 0 0 4px rgba(224,82,92,.12);
  animation:shake .38s var(--ease);
}
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-6px) }
  50%{ transform:translateX(5px) }
  75%{ transform:translateX(-3px) }
}

.field__icon{
  display:grid; place-items:center;
  width:20px; height:20px; flex:none;
  color:var(--grey);
  transition:color .25s var(--ease);
}
.field__icon svg{ width:20px; height:20px }
.field:focus-within .field__icon{ color:var(--navy) }

.field__input{
  flex:1 1 auto;
  min-width:0;
  border:0; outline:0; background:transparent;
  padding:12px 2px;
  font:inherit;
  font-size:16px;              /* 16px stops iOS Safari zooming on focus */
  font-weight:500;
  color:var(--ink);
}
.field__input::placeholder{ color:#9aa1b1 }

/* honeypot - hidden from people, filled by bots */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0 }

/* ---------- button ------------------------------------------------------ */

.btn{
  position:relative;
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:132px;
  padding:14px 26px;
  border:0; border-radius:999px;
  font:inherit; font-size:14px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  background-image:linear-gradient(135deg,var(--navy-400) 0%,var(--navy) 55%,var(--navy-600) 100%);
  background-size:180% 180%;
  box-shadow:var(--shadow-btn);
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-position .5s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn::after{                    /* shine sweep on hover */
  content:"";
  position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);
  transition:left .65s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  background-position:100% 0;
  box-shadow:0 18px 34px -12px rgba(33,44,101,.7);
}
.btn:hover::after{ left:130% }
.btn:active{ transform:translateY(0) scale(.985) }
.btn:focus-visible{ outline:3px solid rgba(33,44,101,.35); outline-offset:3px }

.btn__spinner{
  position:absolute;
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  opacity:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.btn.is-loading{ pointer-events:none }
.btn.is-loading .btn__label{ opacity:0 }
.btn.is-loading .btn__spinner{ opacity:1 }

/* ---------- status ------------------------------------------------------ */

.status{
  margin:14px 2px 0;
  min-height:20px;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.status.is-visible{ opacity:1; transform:none }
.status.is-error{ color:#c8323d }
.status.is-success{ color:#12795a }

/* after a successful send the field is replaced by the message */
.form.is-done .field{ display:none }
.form.is-done .status{ font-size:16px; margin-top:0 }

.hint{
  margin:0;
  font-size:12.5px;
  font-weight:500;
  color:#8b93a6;
}
.form.is-done ~ .hint{ display:none }

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

.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 14px;
  margin-top:clamp(8px,2vw,16px);
  padding-top:clamp(16px,2.6vw,22px);
  width:100%;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink-soft);
}
.foot__link{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--navy);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .22s var(--ease);
}
.foot__link svg{ width:16px; height:16px }
.foot__link:hover{ border-bottom-color:currentColor }
.foot__sep{ width:4px; height:4px; border-radius:50%; background:var(--grey-300) }
.foot__copy{ font-weight:500 }

/* ---------- responsive -------------------------------------------------- */

@media (max-width:560px){
  .field{
    flex-wrap:wrap;
    border-radius:22px;
    padding:6px;
    row-gap:6px;
  }
  .field__icon{ margin-left:12px }
  .field__input{
    flex:1 1 calc(100% - 44px);
    padding:13px 8px;
  }
  .btn{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    border-radius:16px;
    padding:16px 20px;
  }
  .logo{ width:min(260px,78%) }
  .foot{ flex-direction:column; gap:8px }
  .foot__sep{ display:none }
}

@media (max-width:380px){
  .card{ padding-left:16px; padding-right:16px }
  .badge{ font-size:11px; letter-spacing:.1em }
  .field__icon{ margin-left:6px }
  .field__input{ padding-left:0; padding-right:0 }
}

/* short landscape phones - let the page scroll instead of squashing */
@media (max-height:520px) and (orientation:landscape){
  body{ place-items:start center }
  .logo{ width:min(200px,44%) }
  .card{ gap:12px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}