/* =========================================================
   BrokerConnector · Coming soon
   One screen: the homepage's hero film behind a short tease,
   the new app's download button and QR code, and a WhatsApp call to action.
   ========================================================= */

:root {
  --ink: #090F1B;
  --teal: #19E8C9;
  --chalk: #F3F3F3;
  --gutter: 28px;
  --btn: 44px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
h1, p { margin: 0; }
svg { display: block; }

/* ---------- text roll (hover) ---------- */
.roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: top; }
.roll__in { display: flex; flex-direction: column; transition: transform .6s var(--ease); }
.roll__in > span { display: block; height: 1.2em; white-space: nowrap; }
a:hover .roll__in, a:focus-visible .roll__in { transform: translateY(-1.2em); }

/* ---------- button (same anatomy as the homepage: label block + 2px gap + icon tile) ---------- */
.ui-btn {
  display: inline-flex; gap: 2px; height: var(--btn);
  font-size: 14px; font-weight: 500; font-stretch: 80%;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.ui-btn__label {
  display: flex; align-items: center; padding: 0 20px;
  background: var(--chalk); color: #000;
  transition: background-color .45s var(--ease);
}
.ui-btn__icon {
  flex: none; width: var(--btn); display: grid; place-items: center;
  background: var(--teal); color: var(--ink);
  transition: background-color .45s var(--ease);
}
.ui-btn:hover .ui-btn__label { background: #fff; }
.ui-btn:hover .ui-btn__icon { background: #3FF0D6; }
.ui-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.soon__wa { width: 20px; height: 20px; transition: transform .6s var(--ease); }
.ui-btn:hover .soon__wa { transform: rotate(-12deg) scale(1.08); }

/* ---------- the screen ----------
   Flow layout: logo row, then the block centred in the space left. On screens too short
   to hold it all (a phone on its side) the page simply scrolls over the fixed film. */
.soon {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left));
}

.film {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(90% 60% at 60% 78%, rgba(25,232,201,.12), transparent 70%), #05080f;
}
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__labels { display: none; } /* the film still runs its matches; their labels stay under wraps */
/* the film sits back at low opacity: sharp, but only a glimpse */
.film__canvas { opacity: .4; }
/* veil: a calm pool behind the centred type, darker at the top and foot */
.film__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 50%, rgba(5,8,16,.3) 0%, rgba(5,8,16,.12) 60%, rgba(5,8,16,0) 100%),
    linear-gradient(180deg, rgba(5,8,16,.4) 0%, rgba(5,8,16,0) 28%, rgba(5,8,16,0) 72%, rgba(5,8,16,.45) 100%);
}

.soon__nav, .soon__body, .soon__foot { position: relative; z-index: 1; }
.soon__nav {
  display: flex; justify-content: center;
  padding-top: max(var(--nav-top), env(safe-area-inset-top));
}
.soon__logo { display: block; width: var(--logo-w); height: auto; }

/* centred between the logo row and the socials row */
.soon__body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gap-y) 0;
  text-align: center;
}
.soon__title {
  /* scales with width and, on short wide screens, with height */
  font-size: var(--title);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.soon__title .line { display: block; white-space: nowrap; }
.soon__title .w { display: inline-block; white-space: nowrap; }
.soon__title .ch { display: inline-block; }
.soon__copy {
  max-width: 50ch; margin-top: var(--copy-gap);
  font-size: var(--copy); line-height: 1.4; letter-spacing: -.01em;
  color: #fff;
}
.soon__copy p { margin: 0; text-wrap: pretty; }
.soon__copy p + p { margin-top: .7em; }
/* under the copy, one row: the app's QR code (with "or click here" under it) and the WhatsApp pill,
   the pill centred on the QR square. On phones the QR goes (you are already on the phone) and a
   download pill stacks above WhatsApp instead. */
.soon__actions {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--qr-gap);
  margin-top: var(--cta-gap);
}
.soon__ctas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: calc((var(--qr) - var(--btn) - 8px) / 2);
}
.soon__cta--app { display: none; }
.soon__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.soon__qr img { display: block; width: var(--qr); height: var(--qr); border-radius: 12px; background: #fff; }
.soon__qr-cap, .soon__qr-link {
  font-size: 11px; font-weight: 500; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  color: rgba(243, 243, 243, .62);
  transition: color .45s var(--ease);
}
.soon__qr-link { margin-top: -3px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.soon__qr:hover .soon__qr-link, .soon__qr:focus-visible .soon__qr-link { color: var(--teal); }
.soon__qr:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 12px; }

/* the pills: the WhatsApp one filled with the brand fluid (the same live shader as the homepage's
   sky, Free tile and pricing window, see fluid.js), the WhatsApp mark leading in a white disc; the
   app one in chalk with the download glyph in a teal disc */
.soon__cta {
  position: relative; overflow: hidden; isolation: isolate;
  align-items: center; gap: 14px;
  height: calc(var(--btn) + 8px);
  padding: 0 28px 0 5px;
  border-radius: 999px;
  /* fallback in the same colours if WebGL is unavailable */
  background: linear-gradient(115deg, #0D1C42 0%, #2E59D1 40%, #3D8CD6 70%, #66DBC4 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.soon__cta-fluid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.soon__cta .ui-btn__label { padding: 0; background: none; color: #fff; text-shadow: 0 1px 8px rgba(8, 20, 38, .45); }
.soon__cta:hover .ui-btn__label { background: none; }
.soon__cta .ui-btn__icon {
  width: calc(var(--btn) - 2px); height: calc(var(--btn) - 2px);
  border-radius: 50%;
  background: #fff; color: var(--ink);
}
/* hover: the disc slides to the far end and turns mint, the label moves into its place and rolls to
   "Get connected", and the fluid deepens a touch (distances are measured in fluid.js as --disc-x / --label-x) */
.soon__cta .ui-btn__icon, .soon__cta .ui-btn__label { position: relative; z-index: 1; transition: transform .75s var(--ease), background-color .5s var(--ease); }
.soon__cta:hover .ui-btn__icon, .soon__cta:focus-visible .ui-btn__icon { transform: translateX(var(--disc-x, 0px)); background: #66DBC4; }
.soon__cta:hover .ui-btn__label, .soon__cta:focus-visible .ui-btn__label { transform: translateX(var(--label-x, 0px)); }
.soon__cta .roll__in > span { text-align: center; } /* the shorter hover line sits centred in the label's width */
.soon__cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: rgba(8, 16, 38, .32);
  opacity: 0; transition: opacity .5s var(--ease);
}
.soon__cta:hover::before, .soon__cta:focus-visible::before { opacity: 1; }
.soon__cta:focus-visible { outline-offset: 4px; }
/* the app pill */
.soon__cta--app { background: var(--chalk); color: var(--ink); box-shadow: none; }
.soon__cta--app::before { display: none; }
.soon__cta--app:hover, .soon__cta--app:focus-visible { background: #fff; }
.soon__cta--app .ui-btn__label { color: var(--ink); text-shadow: none; }
.soon__cta--app .ui-btn__icon { background: var(--teal); color: var(--ink); }
.soon__cta--app:hover .ui-btn__icon, .soon__cta--app:focus-visible .ui-btn__icon { background: #3FF0D6; }
.soon__cta--app .roll__in > span:last-child { text-transform: none; letter-spacing: .02em; } /* the hover line is the address itself */
.soon__dl { width: 18px; height: 18px; transition: transform .6s var(--ease); }
.soon__cta--app:hover .soon__dl { transform: translateY(2px); }

/* socials: quiet rounded squares at the foot, in the button's glass tone */
.soon__foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding-bottom: calc(var(--nav-top) - 4px); }
.soon__foot[data-in] { animation-delay: 1.8s; }
.socials { display: flex; gap: 2px; }
.social {
  width: var(--social); height: var(--social); display: grid; place-items: center;
  border-radius: calc(var(--social) * .25);
  background: rgba(30, 37, 54, .62); color: var(--chalk);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.social svg { width: 18px; height: 18px; }
.social:hover { background: rgba(48, 57, 80, .85); color: var(--teal); }
.social:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: calc(var(--social) * .25); }

/* ---------- sizes ---------- */
:root {
  --nav-top: 28px;
  --logo-w: clamp(170px, 15vw, 260px);
  --title: clamp(40px, min(5.4vw, 9.5vh), 120px);
  --copy: clamp(16px, calc(.55vw + 10px), 21px);
  --copy-gap: clamp(24px, 4.4vh, 48px);
  --cta-gap: clamp(30px, 4.8vh, 48px);
  --gap-y: 40px;
  --social: 40px;
  --qr: 120px;
  --qr-gap: 28px;
}
/* big desktops */
@media (min-width: 1800px) { :root { --gutter: 48px; --btn: 52px; --nav-top: 40px; --qr: 136px; --qr-gap: 32px; } .ui-btn { font-size: 15px; } .ui-btn__label { padding: 0 24px; } }
/* large and 4K-class screens: body, button and logo keep pace with the title */
@media (min-width: 2200px) {
  :root { --gutter: 64px; --btn: 64px; --nav-top: 56px; --logo-w: 340px; --copy: 30px; --copy-gap: 40px; --cta-gap: 56px; --social: 56px; --qr: 168px; --qr-gap: 40px; }
  .social svg { width: 24px; height: 24px; }
  .ui-btn { font-size: 18px; } .ui-btn__label { padding: 0 32px; } .soon__cta { padding-right: 36px; gap: 18px; } .soon__wa { width: 26px; height: 26px; } .soon__dl { width: 24px; height: 24px; }
  .soon__ctas { gap: 16px; } .soon__qr img { border-radius: 16px; } .soon__qr-cap { font-size: 14px; }
}
/* tablets */
@media (max-width: 1024px) { :root { --title: clamp(40px, min(7vw, 9.5vh), 80px); } }
/* phones (portrait): the first line breaks so BrokerConnector gets its own line */
@media (max-width: 640px) {
  :root { --gutter: 20px; --nav-top: 22px; --logo-w: 150px; --title: clamp(28px, 9.2vw, 46px); --copy: 15.5px; --gap-y: 32px; }
  .soon__title .line { white-space: normal; }
  .soon__copy { max-width: 30ch; }
  .soon__qr { display: none; }
  .soon__cta--app { display: inline-flex; }
  .soon__ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; } /* stacked, the two pills the same width */
}
@media (max-width: 370px) {
  :root { --gutter: 16px; --btn: 42px; --copy: 16px; }
  .ui-btn { font-size: 12.5px; letter-spacing: .06em; }
  .ui-btn__label { padding: 0 14px; }
  .soon__cta { padding-right: 18px; gap: 10px; }
}
/* phones on their side and other short screens */
@media (max-height: 520px) and (min-width: 560px) {
  :root { --nav-top: 12px; --logo-w: 130px; --title: clamp(28px, 10vh, 52px); --copy: 15px; --copy-gap: 10px; --cta-gap: 16px; --gap-y: 12px; --social: 34px; --btn: 40px; }
  .soon__copy { max-width: 66ch; line-height: 1.35; }
  .soon__copy p + p { margin-top: .5em; }
  .soon__qr { display: none; }
  .soon__cta--app { display: inline-flex; }
  .soon__ctas { margin-top: 0; }
}

/* ---------- intro: no loader, the film fades up and the type settles in ---------- */
.soon__nav { animation: drop 1.4s var(--ease-out) .4s both; }
.soon__title .ch { animation: settle 1.6s var(--ease-out) calc(.6s + var(--d, 0s)) both; }
[data-in] { animation: rise 1.3s var(--ease-out) 1.4s both; }
.soon__copy[data-in] { animation-delay: 1.3s; }
.soon__actions[data-in] { animation-delay: 1.55s; }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes settle { from { opacity: 0; transform: translateY(35%); filter: blur(14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}