/* ============================================================
   The Thinking SME Bank — shared base
   Premium rich black & white · xfin (logo is the only colour)
   Layout per variation lives in css/layout-*.css
   ============================================================ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #060607;

  --ink-1: #F6F6F4;
  --ink-2: #A6A6AD;
  --ink-3: #6A6A73;
  --ink-4: #45454D;

  --line:    rgba(255, 255, 255, 0.10);
  --line-hi: rgba(255, 255, 255, 0.20);
  --surface: rgba(255, 255, 255, 0.035);

  --maxw: 1100px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset ──────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Sora', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink-1);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ─── Background depth ───────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 90% at 50% 6%, #1B1C20 0%, #101012 38%, #08080A 70%, #050506 100%);
}
.backdrop::before {
  content: "";
  position: absolute;
  top: 38%;
  left: 50%;
  width: 80vw;
  max-width: 980px;
  height: 60vh;
  max-height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 72%);
  filter: blur(10px);
  opacity: 0.9;
  animation: breathe 12s ease-in-out infinite alternate;
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
}
@keyframes breathe {
  from { opacity: 0.7; transform: translate(-50%, -50%) scale(0.97); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  opacity: 0.025;
}

/* slow diagonal gradient sheen drifting across the dark — subtle but visible */
.sheen {
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      transparent 38%,
      rgba(255, 255, 255, 0.10) 50%,
      transparent 62%);
  background-size: 260% 260%;
  background-repeat: no-repeat;
  animation: sheen-drift 18s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes sheen-drift {
  from { background-position: 4% 8%; }
  to   { background-position: 96% 92%; }
}

/* ─── Shell (base; variations may override alignment) ────── */
.shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(30px, 5vh, 56px) clamp(22px, 5vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ─── Brand ──────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: auto;
}
.brand img {
  height: clamp(26px, 3vw, 32px);
  width: auto;
  display: block;
}

/* ─── Capture (shared) ───────────────────────────────────── */
.capture {
  width: 100%;
  max-width: 420px;
  margin-top: clamp(34px, 5vh, 52px);
}
.field {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field:focus-within {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink-1);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 10px 13px;
  outline: none;
}
.field input::placeholder { color: var(--ink-3); }

.btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0A0A0B;
  background: linear-gradient(180deg, #FFFFFF, #E4E4E6);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
  box-shadow: 0 6px 18px -10px rgba(255, 255, 255, 0.5);
}
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 30px -10px rgba(255, 255, 255, 0.6);
}
.btn:active { transform: translateY(0); }

.note {
  margin-top: 13px;
  font-size: 0.8rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  min-height: 1.1em;
  transition: color 0.3s var(--ease);
}
.note.error { color: #E08585; }

.success {
  width: 100%;
  max-width: 500px;
  margin-top: clamp(34px, 5vh, 52px);
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.success.show { display: flex; animation: rise 0.6s var(--ease) both; }
.success .check {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0A0A0B;
  background: linear-gradient(180deg, #FFFFFF, #E4E4E6);
}
.success h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink-1); }
.success p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; max-width: 38ch; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  padding-top: clamp(28px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.footer .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; }

/* ─── Reveal ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); }
.in .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.in .reveal.d1 { transition-delay: 0.04s; }
.in .reveal.d2 { transition-delay: 0.14s; }
.in .reveal.d3 { transition-delay: 0.26s; }
.in .reveal.d4 { transition-delay: 0.38s; }
.in .reveal.d5 { transition-delay: 0.50s; }
.in .reveal.d6 { transition-delay: 0.62s; }

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

/* ─── Responsive (shared) ────────────────────────────────── */
@media (max-width: 520px) {
  .field { flex-direction: column; gap: 7px; }
  .btn { width: 100%; padding: 14px; }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .backdrop::before,
  .sheen,
  .meta-date { animation: none; }
  /* restore the static date gradient when motion is reduced */
  .meta-date { background: linear-gradient(176deg, #EDEDF0 0%, #B4B4BC 52%, #8E8E96 100%); -webkit-background-clip: text; background-clip: text; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .success.show { animation: none; }
}


/* ── 3a-1 (final) — Launch hero · Coming Soon tag, no rule ──
   Launch copy is the dominant element; headline is the supporting line. */

.shell { align-items: flex-start; text-align: left; }

.core {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: clamp(28px, 5vh, 56px) 0;
  max-width: 880px;
}

.eyebrow {
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(40px, 6vh, 64px);
}

/* label row — exactly as in 3a-3: "LAUNCHING" + "COMING SOON" chip */
.launch-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(20px, 3vh, 30px);
}
.launch-tag .chip {
  padding: 4px 12px;
  border: 1px solid var(--line-hi);
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink-2);
  letter-spacing: 0.18em;
}

/* launch date FIRST and BIGGEST — no vertical rule */
.meta-date {
  font-size: clamp(2.9rem, 7.4vw, 6.1rem);
  font-weight: 300;
  /* roomy line-height + padding so descenders (the 'g' in August) never clip
     under -webkit-background-clip: text */
  line-height: 1.12;
  letter-spacing: -0.03em;
  padding-bottom: 0.06em;
  margin-bottom: clamp(34px, 5vh, 52px);
  /* layer 1: a bright highlight band that sweeps across (shimmer)
     layer 2: a brushed-silver base so the gleam clearly reads */
  background:
    linear-gradient(100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.55) 43%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.55) 57%,
      transparent 70%),
    linear-gradient(176deg, #EDEDF0 0%, #B4B4BC 52%, #8E8E96 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: date-shimmer 4s ease-in-out 0.8s infinite;
}
/* sweep happens, then rests off-screen for the remainder of the cycle */
@keyframes date-shimmer {
  0%   { background-position: 200% 0, 0 0; }
  45%  { background-position: -140% 0, 0 0; }
  100% { background-position: -140% 0, 0 0; }
}

/* headline — supporting line, smaller than the date */
.headline {
  font-size: clamp(1.18rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--ink-2);
}
.headline .em { color: var(--ink-1); font-weight: 500; }

.capture { max-width: 420px; margin-top: clamp(40px, 6vh, 60px); }
.success { max-width: 460px; align-items: flex-start; }