/* =====================================================
   CAST Clinical — Landing Page Styles (landing.html)
   ===================================================== */

/* ── THEME TOKENS ─────────────────────────────────── */
:root {
  --teal:    #2A9CC8;
  --teal2:   #0ECFCF;
  --sage:    #5B8C7A;

  --lp-bg:          #F0F7FB;
  --lp-text-head:   #0F172A;
  --lp-text-body:   #4A5D6E;
  --lp-text-muted:  #8A9BAB;
  --lp-border:      rgba(0,0,0,.08);

  --rp-bg:          #0D1829;
  --rp-border:      rgba(255,255,255,.07);
  --rp-card-bg:     rgba(255,255,255,.04);
  --rp-card-hover:  rgba(42,156,200,.10);
  --rp-card-border: rgba(255,255,255,.07);
  --rp-card-b-hover:rgba(42,156,200,.25);

  --hdr-bg:         rgba(240,247,251,.88);
  --hdr-border:     rgba(0,0,0,.08);

  --eyebrow-bg:     rgba(42,156,200,.09);
  --eyebrow-border: rgba(42,156,200,.22);
  --eyebrow-color:  #2A9CC8;

  --head-grad: linear-gradient(120deg, #0F172A 0%, #1A7FAB 60%, var(--teal2) 100%);

  --price-bg:     rgba(42,156,200,.07);
  --price-border: rgba(42,156,200,.18);
  --price-fund:   var(--teal);

  --cta-grad:   linear-gradient(135deg, var(--teal), var(--teal2));
  --cta-shadow: rgba(42,156,200,.35);

  --toggle-bg:  rgba(42,156,200,.10);
  --toggle-bdr: rgba(42,156,200,.28);

  --badge-bg:  rgba(42,156,200,.10);
  --badge-bdr: rgba(42,156,200,.25);
  --badge-clr: var(--teal);

  --orb1: rgba(42,156,200,.15);
  --orb2: rgba(139,92,246,.10);
  --orb3: rgba(14,207,207,.08);

  --transition: .45s ease;
}

/* ── DARK MODE ─────────────────────────────────────── */
body.dark {
  --lp-bg:         #080F1A;
  --lp-text-head:  #FFFFFF;
  --lp-text-body:  #7A90A8;
  --lp-text-muted: #4A5E70;
  --lp-border:     rgba(255,255,255,.08);

  --rp-bg:          #0A1420;
  --rp-border:      rgba(255,255,255,.05);
  --rp-card-bg:     rgba(255,255,255,.03);
  --rp-card-hover:  rgba(42,156,200,.12);
  --rp-card-border: rgba(255,255,255,.06);
  --rp-card-b-hover:rgba(42,156,200,.28);

  --hdr-bg:    rgba(8,15,26,.85);
  --hdr-border:rgba(255,255,255,.07);

  --head-grad: linear-gradient(100deg, #FFFFFF 0%, #2A9CC8 60%, var(--teal2) 100%);

  --price-bg:    rgba(255,255,255,.05);
  --price-border:rgba(255,255,255,.10);
  --price-fund:  var(--teal2);

  --badge-bg:  rgba(42,156,200,.12);
  --badge-bdr: rgba(42,156,200,.32);
  --badge-clr: var(--teal);

  --orb1: rgba(42,156,200,.22);
  --orb2: rgba(139,92,246,.14);
  --orb3: rgba(14,207,207,.11);
}

/* ── BASE ──────────────────────────────────────────── */
html { height: 100%; }

body {
  transition: background var(--transition), color var(--transition);
}

/* ── AURORA ORBS ───────────────────────────────────── */
.aurora-layer {
  position: fixed;
  top: 0; left: 0;
  width: 50%;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
}

.orb-1 {
  top: -180px; right: -80px;
  width: 680px; height: 680px;
  background: radial-gradient(ellipse, var(--orb1) 0%, transparent 65%);
  animation: drift1 14s ease-in-out infinite alternate;
}

.orb-2 {
  bottom: -100px; left: -80px;
  width: 580px; height: 580px;
  background: radial-gradient(ellipse, var(--orb2) 0%, transparent 65%);
  animation: drift2 18s ease-in-out infinite alternate;
}

.orb-3 {
  top: 40%; left: 40%;
  width: 420px; height: 420px;
  background: radial-gradient(ellipse, var(--orb3) 0%, transparent 65%);
  animation: drift3 11s ease-in-out infinite alternate;
  transform: translate(-50%, -50%);
}

@keyframes drift1 { from { transform: translate(0,0) scale(1); }   to { transform: translate(-55px,40px) scale(1.1); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); }   to { transform: translate(40px,-30px) scale(1.08); } }
@keyframes drift3 { from { transform: translate(-50%,-50%); }      to { transform: translate(-50%,-50%) scale(1.14); } }

/* ── HEADER ────────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: var(--hdr-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--hdr-border);
  transition: background var(--transition), border-color var(--transition);
}

.logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  box-shadow: 0 4px 14px var(--cta-shadow);
}

.logo-title {
  color: var(--lp-text-head);
  transition: color var(--transition);
}

.header-right { display: flex; align-items: center; gap: 12px; }

.header-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 5px 13px;
  border-radius: 20px;
  color: var(--badge-clr);
  background: var(--badge-bg);
  border: 1px solid var(--badge-bdr);
  transition: all var(--transition);
}

.theme-toggle {
  background: var(--toggle-bg);
  border: 1.5px solid var(--toggle-bdr);
}

.header-cta {
  background: var(--cta-grad);
  color: white; border: none; cursor: pointer;
  padding: 10px 22px; border-radius: 22px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  transition: all .25s; box-shadow: 0 4px 16px var(--cta-shadow);
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 26px var(--cta-shadow); }

/* ── SPLIT LAYOUT ──────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ── LEFT PANEL ────────────────────────────────────── */
.panel-left {
  background: var(--lp-bg);
  padding: 140px 64px 80px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  border-right: 1px solid var(--lp-border);
  transition: background var(--transition), border-color var(--transition);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px; border-radius: 24px;
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-border);
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--eyebrow-color);
  margin-bottom: 28px; width: fit-content;
  transition: all var(--transition);
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.6); }
}

.headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.3px;
  margin-bottom: 20px;
  background: var(--head-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background var(--transition);
}
.headline em { font-style: italic; font-weight: 400; }

.subhead {
  font-size: 16.5px;
  color: var(--lp-text-body);
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 40px;
  font-weight: 400;
  transition: color var(--transition);
}

.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn-primary {
  background: var(--cta-grad);
  color: white; border: none; cursor: pointer;
  padding: 15px 32px; border-radius: 50px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  transition: all .28s; box-shadow: 0 8px 26px var(--cta-shadow);
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--cta-shadow); }
.btn-primary svg { width: 15px; height: 15px; }

.btn-outline {
  background: transparent;
  color: var(--lp-text-body);
  border: 1.5px solid var(--lp-border);
  cursor: pointer;
  padding: 14px 26px; border-radius: 50px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  transition: all .25s;
}
.btn-outline:hover { border-color: var(--teal); color: var(--lp-text-head); }

.trust-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 28px;
}
.trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--lp-text-muted);
  transition: color var(--transition);
}
.trust-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--lp-text-muted); flex-shrink: 0; }

.price-pill {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--price-bg);
  border: 1px solid var(--price-border);
  border-radius: 14px; padding: 16px 20px; margin-top: 28px;
  width: fit-content;
  transition: all var(--transition);
}
.price-num  { font-size: 32px; font-weight: 800; color: var(--lp-text-head); line-height: 1; transition: color var(--transition); }
.price-sub  { font-size: 11px; color: var(--lp-text-muted); margin-top: 4px; transition: color var(--transition); }
.price-rule { width: 1px; align-self: stretch; background: var(--lp-border); }
.price-fund { font-size: 12.5px; color: var(--price-fund); font-weight: 500; line-height: 1.6; transition: color var(--transition); }

.proof-strip {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--lp-border);
  transition: border-color var(--transition);
}
.proof-val {
  font-size: 26px; font-weight: 800; color: var(--lp-text-head); line-height: 1;
  transition: color var(--transition);
}
.proof-val span { color: var(--teal); }
.proof-desc {
  font-size: 11px; color: var(--lp-text-muted); margin-top: 5px;
  font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  transition: color var(--transition);
}

/* ── RIGHT PANEL ───────────────────────────────────── */
.panel-right {
  background: var(--rp-bg);
  padding: 130px 56px 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: background var(--transition);
}

.panel-right::before {
  content: '';
  position: absolute; bottom: -80px; right: -80px;
  width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,156,200,.18) 0%, transparent 65%);
  pointer-events: none;
}
.panel-right::after {
  content: '';
  position: absolute; top: -40px; left: -40px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,207,207,.07) 0%, transparent 65%);
  pointer-events: none;
}

.panel-label {
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255,255,255,.28);
  margin-bottom: 28px; position: relative; z-index: 1;
}

.step-cards { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }

.step-card {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; border-radius: 14px;
  background: var(--rp-card-bg);
  border: 1px solid var(--rp-card-border);
  transition: background .25s ease, border-color .25s ease, transform .22s ease;
  cursor: default;
}
.step-card:hover {
  background: var(--rp-card-hover);
  border-color: var(--rp-card-b-hover);
  transform: translateX(5px);
}

.sc-num {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(42,156,200,.16);
  border: 1px solid rgba(42,156,200,.32);
  color: var(--teal);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.sc-title { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.sc-desc  { font-size: 12px; color: rgba(255,255,255,.42); margin-top: 3px; line-height: 1.5; }

.result-card {
  margin-top: 12px;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 20px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(42,156,200,.22), rgba(14,207,207,.09));
  border: 1px solid rgba(42,156,200,.35);
  position: relative; z-index: 1;
}
.rc-icon { font-size: 28px; flex-shrink: 0; }
.rc-title { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.rc-desc  { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 5px; line-height: 1.6; }

.panel-trust {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; gap: 20px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.pt-item { font-size: 12px; color: rgba(255,255,255,.35); font-weight: 500; }
.pt-item strong { color: rgba(255,255,255,.65); }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
  .panel-left  { padding: 110px 28px 60px; border-right: none; border-bottom: 1px solid var(--lp-border); }
  .panel-right { padding: 56px 28px 80px; }
  .aurora-layer { width: 100%; }
  header { padding: 0 24px; }
}

@media (max-width: 480px) {
  .headline { font-size: 34px; }
  .proof-strip { gap: 20px; }
  .trust-sep { display: none; }
}