:root{
  --bg: #0b1220;
  --pagebg: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --muted2: rgba(15,23,42,.62);
  --card: #ffffff;
  --border: rgba(15,23,42,.10);
  --shadow: 0 18px 60px rgba(2,6,23,0.18);
  --shadow2: 0 14px 40px rgba(2,6,23,0.12);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--pagebg);
}

/* ---------- SPLASH (navy <-> teal, swirly) ---------- */
.splash{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  z-index: 9999;

  background: linear-gradient(
    115deg,
    #05070e,
    #061630,
    #08324a,
    #0c6a78,
    #7fe9f0,
    #071a36
  );
  background-size: 420% 420%;
  opacity: 1;
  transition: opacity .42s ease;

  animation:
    gradientShift 8s ease-in-out infinite,
    lightPulse 3.4s ease-in-out infinite;
}
.splash.hide{ opacity: 0; }

@keyframes gradientShift{
  0%   { background-position: 0% 45%; }
  50%  { background-position: 100% 55%; }
  100% { background-position: 0% 45%; }
}

@keyframes lightPulse{
  0%   { filter: brightness(0.90) saturate(1.05); }
  50%  { filter: brightness(1.10) saturate(1.18); }
  100% { filter: brightness(0.90) saturate(1.05); }
}

/* Soft bloom */
.splash::before{
  content:"";
  position:absolute;
  inset:-28%;
  background:
    radial-gradient(circle at 18% 22%, rgba(140, 240, 255, .22), transparent 50%),
    radial-gradient(circle at 78% 18%, rgba(60, 190, 255, .16), transparent 52%),
    radial-gradient(circle at 55% 82%, rgba(0,0,0,.26), transparent 56%);
  filter: blur(44px);
  opacity: .98;
  pointer-events:none;
  animation: bloomDrift 3.2s ease-in-out infinite alternate;
}

@keyframes bloomDrift{
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); }
  to   { transform: translate3d( 2.5%,  1.5%, 0) scale(1.06); }
}

/* Extra teal wash */
.splash::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 30% 60%, rgba(120, 255, 245, .18), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(70, 220, 255, .16), transparent 52%),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.10), transparent 55%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: .60;
  pointer-events:none;
  animation: washSpin 4.6s ease-in-out infinite alternate;
}

@keyframes washSpin{
  from { transform: translate3d(-1%, 1%, 0) rotate(-2deg) scale(1.02); }
  to   { transform: translate3d( 1%, -1%, 0) rotate( 2deg) scale(1.07); }
}

/* Grain overlay (requires <div class="grain"></div> inside #splash) */
.grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .18;
  animation: noiseMove 3.1s linear infinite;
}

@keyframes noiseMove{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-90px, 60px, 0); }
}

/* ensure content is above pseudo-layers */
.splash-inner{
  position: relative;
  z-index: 2;
  width: min(1100px, 92vw);
  display: flex;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

/* ✅ LOGO BOX FLOAT (30% darker than prior) */
.splash-card{
  width: min(360px, 70vw);
  height: auto;
  border-radius: 18px;
  display: block;

  box-shadow:
    0 90px 180px rgba(0,0,0,.91),
    0 26px 70px rgba(0,0,0,.57),
    0 10px 24px rgba(0,0,0,.42);

  outline: 1px solid rgba(255,255,255,.24);
  outline-offset: -1px;

  transform: translateY(-2px);
}

.splash-card:hover{
  box-shadow:
    0 110px 210px rgba(0,0,0,.98),
    0 32px 82px rgba(0,0,0,.65),
    0 12px 30px rgba(0,0,0,.47);
  transform: translateY(-4px);
  transition: box-shadow .25s ease, transform .25s ease;
}

.splash-copy h1{
  margin: 0 0 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 2.7vw, 2.8rem);
  line-height: 1.12;
  color: rgba(255,255,255,.92);
}
.splash-copy p{
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

.splash-fine{
  margin-top: 16px;
  font-size: .95rem;
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,.72);
}

.linklike{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.90);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* ---------- Progress bar + EKG double-beat heartbeat yellow box ---------- */
.bar{
  width: min(420px, 100%);
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  margin-top: 14px;
}

.bar > span{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  position: relative;
  background: rgba(255,255,255,.55);
  animation: fill 10s linear forwards;
}

.bar > span::after{
  content:"";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #f5c542;
  box-shadow: 0 0 16px rgba(245,197,66,.65);
  animation: heartbeatDouble 1.1s ease-in-out infinite;
}

@keyframes fill { to { width: 100%; } }

@keyframes heartbeatDouble{
  0%   { opacity:.18; transform: translateY(-50%) scale(.90); }
  10%  { opacity:1;   transform: translateY(-50%) scale(1.14); }
  18%  { opacity:.35; transform: translateY(-50%) scale(.95); }
  30%  { opacity:1;   transform: translateY(-50%) scale(1.10); }
  38%  { opacity:.28; transform: translateY(-50%) scale(.94); }
  100% { opacity:.18; transform: translateY(-50%) scale(.90); }
}

/* ---------- INVESTOR + THANK YOU (dark outside stage + floating card) ---------- */
.page{
  min-height: 100%;
  padding: 28px;
  display: grid;
  place-items: start center;
  position: relative;

  background: linear-gradient(
    120deg,
    #dfe5ee,
    #cfd7e3,
    #d8e0ea,
    #e5ebf3
  );
  background-size: 320% 320%;
  animation: pondDrift 16s ease-in-out infinite;
}

.page::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 18% 28%, rgba(15,23,42,.12), transparent 46%),
    radial-gradient(circle at 18% 28%, rgba(15,23,42,.08), transparent 56%),
    radial-gradient(circle at 78% 35%, rgba(15,23,42,.10), transparent 48%),
    radial-gradient(circle at 78% 35%, rgba(15,23,42,.07), transparent 58%),
    radial-gradient(circle at 48% 82%, rgba(15,23,42,.09), transparent 50%),
    radial-gradient(circle at 48% 82%, rgba(15,23,42,.06), transparent 62%);
  filter: blur(16px);
  opacity: .70;
  pointer-events:none;
  animation: rippleFlow 9s ease-in-out infinite alternate;
}

.page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 36%,
      rgba(0,0,0,0.26) 70%,
      rgba(0,0,0,0.42) 100%
    );
  opacity: .95;
}

@keyframes pondDrift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rippleFlow{
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.00); opacity: .62; }
  to   { transform: translate3d( 1.5%,  1%, 0) scale(1.06); opacity: .82; }
}

.header, .card{
  position: relative;
  z-index: 2;
}

.header{
  width: min(980px, 92vw);
  margin: 18px auto 18px;
}

.brand{
  display: flex;
  gap: 18px;
  align-items: center;
}

.brand-logo{
  width: 140px;
  max-width: 40vw;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 18px 50px rgba(2,6,23,0.16);
  display: block;
}

.brand-title{
  font-weight: 760;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}
.brand-subtitle{
  color: var(--muted);
  font-size: 1rem;
  margin-top: 2px;
}

.card{
  width: min(980px, 92vw);
  background: var(--card);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    0 80px 160px rgba(2,6,23,0.26),
    0 26px 60px rgba(2,6,23,0.14);
  transform: translateY(-2px);
  padding: 24px;
}

h2{
  margin: 0 0 8px;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.muted{
  margin: 0 0 16px;
  color: var(--muted);
}

.leadcopy{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.6;
}
.leadcopy--spaced{ margin-top: 10px; }

.grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0 14px;
}
.grid .full{ grid-column: 1 / -1; }

label{
  display: grid;
  gap: 6px;
  font-size: .95rem;
  color: rgba(15,23,42,.82);
}
input, textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  padding: 12px 12px;
  font: inherit;
  outline: none;
}
input:focus, textarea:focus{
  border-color: rgba(15,23,42,.35);
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
}

.btn{
  appearance: none;
  border: none;
  background: var(--bg);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 650;
  cursor: pointer;
}
.btn:hover{ filter: brightness(1.05); }

.fineprint{
  margin-top: 12px;
  color: rgba(15,23,42,.55);
  font-size: .9rem;
}

.hidden{ display: none; }

@media (max-width: 820px){
  .splash-inner{ flex-direction: column; align-items: flex-start; }
  .splash-card{ width: min(420px, 88vw); }
}

@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .brand{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand-logo{ width: min(240px, 70vw); }
}