/* ════════════════════════════════════════════════════════════════════
   Oncology Bridge — Coming Soon
   Navy immersive · molecular constellation · 60-day countdown
   Libre Baskerville (headings) · Montserrat (body/UI)
   ════════════════════════════════════════════════════════════════════ */

:root{
  --teal:#039588; --teal-light:#1BAB9F; --teal-300:#7ACAC2;
  --lime:#B1C900; --lime-dark:#9DB400;
  --navy:#012C55; --navy-deep:#011d3a; --navy-soft:#0a3d6e;
  --tint:#E5F4F3;
  --white:#FFFFFF;
  --ink:#012C55; --ink-2:#3a5a7a;
  --line-navy:rgba(255,255,255,.14);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  background:var(--navy-deep);
  color:#fff;
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-family:'Libre Baskerville',Georgia,serif; font-weight:700; line-height:1.12; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button,input,textarea{font-family:inherit;}

/* ── background canvas + glows ───────────────────────────────────────── */
.stage{position:relative; min-height:100vh; isolation:isolate;}
#net{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.glow{position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(8px);}
.glow.g1{width:760px; height:760px; right:-220px; top:-260px;
  background:radial-gradient(circle,rgba(3,149,136,.34),transparent 62%);}
.glow.g2{width:620px; height:620px; left:-200px; bottom:-240px;
  background:radial-gradient(circle,rgba(1,44,85,.9),rgba(27,171,159,.18) 55%,transparent 72%);}
.grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 120% at 70% 0%, transparent 40%, rgba(1,18,38,.55) 100%);}

/* ── layout shell ────────────────────────────────────────────────────── */
.shell{position:relative; z-index:2; max-width:1240px; margin:0 auto;
  padding:34px 48px 56px; min-height:100vh; display:flex; flex-direction:column;}

/* ── top bar ─────────────────────────────────────────────────────────── */
.top{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center;}
.brand .logo{height:42px; width:auto; display:block;}
.status{display:inline-flex; align-items:center; gap:9px; font-family:'Montserrat'; font-weight:600;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7);
  border:1px solid var(--line-navy); border-radius:999px; padding:9px 16px; background:rgba(255,255,255,.03); backdrop-filter:blur(6px);}
.status .dot{width:8px; height:8px; border-radius:50%; background:var(--lime); position:relative;}
.status .dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--lime); animation:ping 2.4s var(--ease-out) infinite;}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.8);opacity:0}}

/* ── main grid ───────────────────────────────────────────────────────── */
.main{flex:1; display:grid; grid-template-columns:1.04fr .96fr; gap:72px; align-items:center; padding:56px 0 24px;}

/* ── left: message ───────────────────────────────────────────────────── */
.eyebrow{font-family:'Montserrat'; font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lime); display:inline-flex; align-items:center; gap:12px; margin-bottom:26px;}
.eyebrow::before{content:""; width:30px; height:2px; background:var(--lime);}
.headline{font-size:clamp(40px,5.2vw,68px); line-height:1.03; letter-spacing:-.02em;}
.headline em{font-style:italic; color:var(--teal-300);}
.lede{font-family:'Montserrat'; font-size:18px; line-height:1.72; color:rgba(255,255,255,.8); max-width:50ch; margin-top:26px; font-weight:400;}
.lede strong{color:#fff; font-weight:600;}

.focus-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px;}
.focus{font-family:'Montserrat'; font-weight:600; font-size:12.5px; letter-spacing:.04em;
  padding:8px 16px; border:1.5px solid var(--line-navy); border-radius:999px; color:rgba(255,255,255,.82);
  display:inline-flex; align-items:center; gap:9px;}
.focus i{width:7px; height:7px; border-radius:50%; background:var(--teal); display:block;}
.focus:nth-child(2) i{background:var(--lime);}
.focus:nth-child(3) i{background:var(--teal-300);}

/* ── countdown ───────────────────────────────────────────────────────── */
.count-wrap{margin-top:44px;}
.count-label{font-family:'Montserrat'; font-weight:600; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.count-label .bars{display:flex; align-items:flex-end; gap:3px; height:14px;}
.count-label .bars span{width:4px; border-radius:1.5px; background:var(--teal); display:block;}
.count-label .bars span:nth-child(3n){background:var(--lime);}
.countdown{display:flex; gap:14px;}
.unit{position:relative; flex:1; max-width:118px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line-navy); border-radius:12px; padding:20px 8px 14px; text-align:center; overflow:hidden;}
.unit::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--lime));}
.unit .num{font-family:'Libre Baskerville',serif; font-weight:700; font-size:clamp(34px,4.4vw,52px);
  line-height:1; color:#fff; letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums;}
.unit .num.tick{animation:tick .5s var(--ease-out);}
@keyframes tick{0%{transform:translateY(-44%);opacity:0;filter:blur(3px);}100%{transform:none;opacity:1;filter:none;}}
.unit .u{font-family:'Montserrat'; font-weight:600; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:11px; display:block;}

/* ── social ──────────────────────────────────────────────────────────── */
.social{display:flex; align-items:center; gap:14px; margin-top:40px;}
.social .lab{font-family:'Montserrat'; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45);}
.social a{width:40px; height:40px; border-radius:10px; border:1px solid var(--line-navy);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.78);
  transition:all .2s var(--ease); background:rgba(255,255,255,.02);}
.social a:hover{color:var(--navy); background:var(--lime); border-color:var(--lime); transform:translateY(-3px);}
.social a svg{width:18px; height:18px;}

/* ── right: inquiry form ─────────────────────────────────────────────── */
.form-card{position:relative; background:#fff; color:var(--ink); border-radius:16px;
  padding:38px 36px 34px; box-shadow:0 40px 90px rgba(1,18,38,.55); overflow:hidden;}
.form-card .corner{position:absolute; top:-1px; right:-1px; z-index:1;}
.form-card .strip{display:flex; align-items:flex-end; gap:4px; height:20px; margin-bottom:22px;}
.form-card .strip span{flex:1; border-radius:2px 2px 0 0; background:var(--teal); opacity:.9;}
.form-card .strip span:nth-child(3n){background:var(--lime);}
.form-card .strip span:nth-child(4n){opacity:.5;}
.form-eyebrow{font-family:'Montserrat'; font-weight:600; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:10px;}
.form-eyebrow::before{content:""; width:22px; height:2px; background:var(--teal);}
.form-card h3{font-family:'Libre Baskerville',serif; font-size:25px; color:var(--ink); margin:14px 0 6px;}
.form-card .sub{font-family:'Montserrat'; font-size:14px; color:var(--ink-2); line-height:1.55; margin-bottom:24px;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:'Montserrat'; font-weight:600; font-size:12px;
  letter-spacing:.02em; color:var(--ink); margin-bottom:7px;}
.field label .req{color:var(--teal);}
.field input,.field textarea{width:100%; font-size:14.5px; color:var(--ink);
  background:#F8FAFC; border:1.5px solid #E2E8F0; border-radius:8px; padding:12px 14px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s;}
.field textarea{resize:vertical; min-height:96px; line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:#94A3B8;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--teal); background:#fff;
  box-shadow:0 0 0 4px rgba(3,149,136,.13);}

.submit{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Montserrat'; font-weight:600; font-size:15px; color:var(--navy);
  background:var(--lime); border:0; border-radius:8px; padding:15px 24px; cursor:pointer;
  transition:all .18s var(--ease); margin-top:4px;}
.submit svg{width:18px; height:18px;}
.submit:hover{background:var(--lime-dark); box-shadow:0 14px 30px rgba(177,201,0,.4);}
.submit:active{transform:translateY(1px);}
.submit:disabled{opacity:.7; cursor:default;}
.form-note{font-family:'Montserrat'; font-size:11.5px; color:#64748B; text-align:center; margin-top:14px; line-height:1.5;}

/* success state */
.form-success{display:none; flex-direction:column; align-items:center; text-align:center; padding:30px 8px 18px;}
.form-card.sent .form-body{display:none;}
.form-card.sent .form-success{display:flex;}
.form-success .ck{width:64px; height:64px; border-radius:50%; background:var(--tint); border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center; color:var(--teal); margin-bottom:20px; animation:pop .5s var(--ease-out);}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.form-success .ck svg{width:32px; height:32px;}
.form-success h3{margin-bottom:8px;}
.form-success p{font-family:'Montserrat'; font-size:14px; color:var(--ink-2); max-width:34ch;}

/* ── bottom bar ──────────────────────────────────────────────────────── */
.footbar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:30px; margin-top:8px; border-top:1px solid var(--line-navy);
  font-family:'Montserrat'; font-size:12.5px; color:rgba(255,255,255,.5);}
.footbar .badges{display:flex; gap:8px; flex-wrap:wrap;}
.footbar .badges span{font-size:10.5px; letter-spacing:.1em; color:rgba(255,255,255,.55);
  border:1px solid var(--line-navy); border-radius:999px; padding:5px 12px;}

/* ── entrance ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .anim{opacity:0; transform:translateY(22px);}
  .anim.in{opacity:1; transform:none; transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:1040px){
  .main{grid-template-columns:1fr; gap:52px; padding-top:40px;}
  .form-card{max-width:560px;}
}
@media(max-width:680px){
  .shell{padding:24px 22px 40px;}
  .brand .logo{height:34px;}
  .main{padding-top:28px;}
  .countdown{gap:9px;}
  .unit{padding:16px 4px 11px; border-radius:10px;}
  .form-card{padding:30px 24px 28px;}
  .field-row{grid-template-columns:1fr;}
  .footbar{flex-direction:column; align-items:flex-start; gap:14px;}
}
@media(max-width:380px){
  .unit .u{font-size:9px; letter-spacing:.1em;}
}