/* TheraVital Welcome — premium landing */
:root{
  --leaf:#1FA84F;
  --leaf-deep:#1B7A3D;
  --leaf-soft:#E4F5E8;
  --blue:#0E7AD9;
  --blue-soft:#E4F0FF;
  --orange:#F26522;
  --orange-soft:#FFF0E6;
  --ink:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
}
*{scroll-behavior:smooth}
body.welcome-body{
  font-family:'Geist',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#F8FAFC;
  overflow-x:hidden;
}

/* NAV */
.w-nav{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(226,232,240,.9);
  transition:all .25s ease;
}
.w-nav.scrolled{ box-shadow:0 10px 30px rgba(15,23,42,.06); background:rgba(255,255,255,.96) }
.w-nav-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.w-brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.w-brand img{ height:58px; width:auto; max-width:280px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.06)); background:#fff; padding:4px 8px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.06) }
.w-brand-text small{ display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; line-height:1 }
.w-brand-text strong{ font-size:.95rem; color:var(--ink); letter-spacing:-.02em }
.w-nav-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.w-link{ font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:999px; transition:all .2s }
.w-link:hover{ color:var(--ink); background:#F1F5F9 }
.btn-pill{
  border-radius:999px; font-weight:700; padding:10px 18px; font-size:.9rem;
  transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid transparent; line-height:1;
}
.btn-pill-primary{ background:linear-gradient(135deg,var(--leaf) 0%, #1B7A3D 100%); color:#fff; border-color:transparent; box-shadow:0 10px 18px rgba(31,168,79,.25) }
.btn-pill-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(31,168,79,.32); color:#fff }
.btn-pill-ghost{ background:#fff; color:var(--ink); border-color:var(--line) }
.btn-pill-ghost:hover{ border-color:var(--leaf); color:var(--leaf-deep); transform:translateY(-1px) }
.btn-pill-blue{ background:linear-gradient(135deg,var(--blue) 0%, #0A5FA3 100%); color:#fff; box-shadow:0 10px 18px rgba(14,122,217,.22) }
.btn-pill-blue:hover{ transform:translateY(-1px); color:#fff }
.btn-pill-orange{ background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 10px 18px rgba(242,101,34,.22) }
.btn-pill-orange:hover{ background:#E05A1D; color:#fff; transform:translateY(-1px) }
.w-hero-ghost{ background:rgba(255,255,255,.95) !important; color:var(--ink) !important; border-color:rgba(255,255,255,.95) !important }

/* HERO */
.w-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #1FA84F 0%, #0E7AD9 55%, #F26522 100%);
  color:#fff;
}
.w-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 85% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(600px 300px at 10% 90%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.w-hero-inner{ max-width:1200px; margin:0 auto; padding:56px 16px 48px; position:relative; z-index:1 }
.w-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center }
.w-kicker{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px;
}
.w-hero h1{
  font-size:clamp(28px, 4.2vw, 44px); line-height:1.05; letter-spacing:-.03em; font-weight:900;
  margin:14px 0 12px; color:#fff;
}
.w-hero h1 span{ background:linear-gradient(90deg,#fff 0%, #FFE9D6 55%, #FFF7ED 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.w-hero p.lead{ color:rgba(255,255,255,.88); font-size:clamp(15px,1.5vw,17px); line-height:1.6; max-width:560px }
.w-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 18px }
.w-hero-meta{ display:flex; flex-wrap:wrap; gap:10px }
.w-meta-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:.8rem; font-weight:600; padding:8px 12px; border-radius:999px; backdrop-filter:blur(8px)
}
.w-meta-pill i{ font-size:1rem }

/* hero visual */
.w-visual{ position:relative; display:flex; justify-content:center; align-items:center }
.w-phone{
  width:min(360px, 92%); background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.6); transform:rotate(-1deg);
  animation:float 6s ease-in-out infinite;
}
.w-phone-header{
  background:linear-gradient(135deg,#1FA84F 0%, #0E7AD9 60%, #F26522 100%);
  color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center;
}
.w-phone-header img{ height:28px; background:#fff; padding:4px 8px; border-radius:8px }
.w-phone-body{ padding:14px; display:grid; gap:12px }
.w-stat{
  display:flex; gap:10px; align-items:center; padding:12px; border-radius:16px; border:1px solid #EEF2F0; background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.04); transition:transform .2s;
}
.w-stat:hover{ transform:translateY(-2px) }
.w-stat-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0 }
.w-stat strong{ font-size:1.15rem; line-height:1 }
.w-float{
  position:absolute; background:#fff; border-radius:16px; padding:10px 12px; box-shadow:0 12px 32px rgba(0,0,0,.14);
  border:1px solid #EEF2F0; display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:700;
  animation:float2 5s ease-in-out infinite;
}
.w-float.a{ top:6%; right:-6px; animation-delay:.2s }
.w-float.b{ bottom:10%; left:-10px; animation-delay:1s }
.w-float i{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff }
@keyframes float{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(-1deg)} }
@keyframes float2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* SECTIONS */
.w-section{ max-width:1200px; margin:0 auto; padding:48px 16px }
.w-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--leaf-deep); background:var(--leaf-soft); border:1px solid #D6E9DA; padding:6px 10px; border-radius:999px;
}
.w-title{ font-size:clamp(22px,3vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:10px 0 10px }
.w-sub{ color:var(--muted); max-width:680px; line-height:1.6 }
.w-grid{ display:grid; gap:16px }
.w-grid-3{ grid-template-columns:repeat(3,1fr) }
.w-grid-4{ grid-template-columns:repeat(4,1fr) }
.w-card{
  background:#fff; border:1px solid #EEF2F0; border-radius:20px; padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.05); transition:all .25s; position:relative; overflow:hidden;
}
.w-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent, var(--leaf)); opacity:0; transition:opacity .25s }
.w-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.10) }
.w-card:hover::before{ opacity:1 }
.w-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:12px;
  border:1px solid transparent;
}
.w-card h3{ font-size:1.02rem; font-weight:800; margin:4px 0 6px }
.w-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 }
.w-badge{ font-size:.70rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid #E5E7EB }

/* Benefits */
.benefit-icon-leaf{ background:#E4F5E8; color:#1B7A3D; border-color:#C6E6CB }
.benefit-icon-blue{ background:#E6F0FF; color:#0E7AD9; border-color:#C7DEFF }
.benefit-icon-orange{ background:#FFF0E6; color:#F26522; border-color:#FFDCC3 }

/* Role tabs */
.w-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 14px }
.w-tab{
  padding:10px 16px; border-radius:999px; font-weight:700; font-size:.9rem;
  background:#fff; border:1px solid #E5E7EB; color:var(--muted); cursor:pointer; transition:all .2s;
}
.w-tab.active{ background:var(--leaf); border-color:var(--leaf); color:#fff; box-shadow:0 8px 18px rgba(31,168,79,.22) }
.w-tab.blue.active{ background:var(--blue); border-color:var(--blue); box-shadow:0 8px 18px rgba(14,122,217,.22) }
.w-tab.orange.active{ background:var(--orange); border-color:var(--orange) }
.w-pane{ display:none; animation:fadeUp .4s ease }
.w-pane.active{ display:block }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* Steps */
.w-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.w-step{
  background:#fff; border:1px solid #EEF2F0; border-radius:20px; padding:20px; position:relative; overflow:hidden;
}
.w-step-num{
  width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--leaf); color:#fff; font-weight:800; margin-bottom:12px;
}
.w-step:nth-child(2) .w-step-num{ background:var(--blue) }
.w-step:nth-child(3) .w-step-num{ background:var(--orange) }

/* Stats */
.w-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.w-stat-card{
  background:linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border:1px solid #EEF2F0; border-radius:18px; padding:16px; text-align:center;
}
.w-stat-card strong{ font-size:1.6rem; font-weight:900; letter-spacing:-.02em; color:var(--ink) }
.w-stat-card span{ display:block; font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px }

/* CTA */
.w-cta{
  background:linear-gradient(135deg,#1FA84F 0%, #0E7AD9 52%, #F26522 100%);
  border-radius:28px; color:#fff; padding:28px; position:relative; overflow:hidden;
}
.w-cta::after{ content:''; position:absolute; inset:0; background:radial-gradient(600px 280px at 85% 15%, rgba(255,255,255,.15), transparent); pointer-events:none }
.w-cta-inner{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px }

/* Reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:all .6s cubic-bezier(.16,1,.3,1) }
.reveal.in{ opacity:1; transform:translateY(0) }
.reveal-delay-1{ transition-delay:80ms }
.reveal-delay-2{ transition-delay:160ms }
.reveal-delay-3{ transition-delay:240ms }
.animate-delay-80{ animation-delay:80ms }
.animate-delay-120{ animation-delay:120ms }
.animate-delay-160{ animation-delay:160ms }
.animate-delay-200{ animation-delay:200ms }
.animate-delay-240{ animation-delay:240ms }

/* Footer */
.w-footer{
  border-top:1px solid #E2E8F0; background:#fff; padding:18px 16px; margin-top:24px;
}
.w-footer-inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:.85rem }
.w-footer-links{ display:flex; gap:14px; flex-wrap:wrap }
.w-footer-links a{ color:var(--muted); text-decoration:none; font-weight:600 }
.w-footer-links a:hover{ color:var(--ink) }

/* Responsive */
@media(max-width:992px){
  .w-hero-grid{ grid-template-columns:1fr; }
  .w-visual{ order:-1 }
  .w-phone{ transform:none }
  .w-float.a{ right:6px } .w-float.b{ left:6px }
  .w-grid-3,.w-grid-4,.w-steps,.w-stats{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:640px){
  .w-nav-inner{ padding:10px 12px }
  .w-brand img{ height:46px; max-width:220px }
  .w-hero-inner{ padding:32px 14px 28px }
  .w-grid-3,.w-grid-4,.w-steps,.w-stats{ grid-template-columns:1fr }
  .w-card{ padding:16px }
}
@media(min-width:641px) and (max-width:992px){
  .w-brand img{ height:52px; max-width:250px }
}