/* ==========================================================================
   Marlac Health / AndreaCares — Design System
   Deep Blue + Teal + Soft Green, warm-serif headlines, mono data accents
   ========================================================================== */

:root{
  /* --- Color tokens --- */
  --mh-deep-blue:      #0A3D62;
  --mh-deep-blue-700:  #0C4A75;
  --mh-deep-blue-900:  #082C48;
  --mh-teal:           #12877F;
  --mh-teal-600:       #0F726B;
  --mh-soft-green:     #8FD3A6;
  --mh-soft-green-600: #6FBE8C;
  --mh-ink:            #10222E;
  --mh-ink-soft:       #45606E;
  --mh-bg:             #FFFFFF;
  --mh-bg-mist:        #F4F8F9;
  --mh-bg-mist-2:      #EEF4F5;
  --mh-line:           #DEE9EA;
  --mh-amber:          #E7A93B;
  --mh-red:            #D9614F;

  /* --- Type tokens --- */
  --mh-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mh-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Elevation / radius --- */
  --mh-radius-sm: 10px;
  --mh-radius-md: 18px;
  --mh-radius-lg: 28px;
  --mh-shadow-sm: 0 2px 10px rgba(10,61,98,0.06);
  --mh-shadow-md: 0 12px 32px rgba(10,61,98,0.10);
  --mh-shadow-lg: 0 24px 60px rgba(10,61,98,0.16);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--mh-font-body);
  color: var(--mh-ink);
  background: var(--mh-bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--mh-font-display);
  color: var(--mh-deep-blue-900);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
h1{ font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight:560; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3{ font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
p.lead-text{ font-size: 1.2rem; color: var(--mh-ink-soft); font-weight:400; }

.eyebrow{
  font-family: var(--mh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--mh-teal-600);
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background: var(--mh-soft-green-600);
  display:inline-block;
}

a{ color: var(--mh-teal-600); text-decoration:none; }
a:hover{ color: var(--mh-deep-blue); }

/* --- Buttons --- */
.btn-mh-primary, .btn-mh-secondary, .btn-mh-ghost{
  font-family: var(--mh-font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: all .22s ease;
  white-space: nowrap;
}
.btn-mh-primary{
  background: linear-gradient(135deg, var(--mh-deep-blue) 0%, var(--mh-teal) 130%);
  color: #fff;
  box-shadow: var(--mh-shadow-sm);
}
.btn-mh-primary:hover{ transform: translateY(-2px); box-shadow: var(--mh-shadow-md); color:#fff; }
.btn-mh-secondary{
  background: transparent;
  border-color: var(--mh-deep-blue);
  color: var(--mh-deep-blue);
}
.btn-mh-secondary:hover{ background: var(--mh-deep-blue); color:#fff; transform: translateY(-2px); }
.btn-mh-ghost{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.5);
  color:#fff;
}
.btn-mh-ghost:hover{ background:#fff; color: var(--mh-deep-blue); }

/* --- Nav --- */
.mh-nav{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mh-line);
}
.mh-nav .navbar-brand{
  font-family: var(--mh-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--mh-deep-blue-900);
  display:flex; align-items:center; gap:.55rem;
}
.mh-nav .brand-mark{
  width: 34px; height:34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--mh-deep-blue), var(--mh-teal) 60%, var(--mh-soft-green));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family: var(--mh-font-mono); font-size:.85rem; font-weight:700;
}
.mh-nav .nav-link{
  font-weight: 500; color: var(--mh-ink); font-size:.98rem;
  padding: .5rem .9rem !important;
}
.mh-nav .nav-link.active, .mh-nav .nav-link:hover{ color: var(--mh-deep-blue); }

/* --- Sections --- */
.section{ padding: 6.5rem 0; }
.section-tight{ padding: 4rem 0; }
.section-mist{ background: var(--mh-bg-mist); }
.section-deep{
  background: radial-gradient(120% 140% at 10% 0%, var(--mh-deep-blue-700) 0%, var(--mh-deep-blue-900) 60%, #071F33 100%);
  color: #EAF3F4;
}
.section-deep h2, .section-deep h3{ color:#fff; }
.section-deep p{ color: #C7DCE0; }

/* --- Hero --- */
.hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFEFE 0%, var(--mh-bg-mist) 100%);
  padding-top: 5.5rem;
  padding-bottom: 3rem;
}
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto auto;
  width:640px; height:640px;
  background: radial-gradient(circle, rgba(143,211,166,0.28), transparent 65%);
  filter: blur(10px);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--mh-line);
  padding:.4rem .9rem; border-radius:999px;
  font-size:.82rem; font-weight:600; color: var(--mh-teal-600);
  box-shadow: var(--mh-shadow-sm);
}
.hero-badge .dot{ width:7px;height:7px;border-radius:50%; background: var(--mh-soft-green-600); }

/* --- Pathway signature graphic --- */
.pathway-wrap{ position:relative; }
.pathway-node{
  background:#fff; border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-line);
  box-shadow: var(--mh-shadow-md);
  padding: 1.1rem 1.3rem;
}
.pathway-node .node-label{
  font-family: var(--mh-font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; color: var(--mh-ink-soft);
}
.pathway-node .node-title{ font-weight:700; color: var(--mh-deep-blue-900); font-size:1rem; }

/* --- Cards --- */
.mh-card{
  background:#fff; border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-line);
  padding: 2rem;
  box-shadow: var(--mh-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.mh-card:hover{ transform: translateY(-6px); box-shadow: var(--mh-shadow-md); }
.mh-card .icon-tile{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.1rem; font-size:1.4rem;
}
.icon-tile.blue{ background:#E5EFF5; color: var(--mh-deep-blue); }
.icon-tile.teal{ background:#E1F3F1; color: var(--mh-teal-600); }
.icon-tile.green{ background:#E7F7EC; color: var(--mh-soft-green-600); }

/* --- Comparison table --- */
.compare-table{ width:100%; border-collapse: separate; border-spacing:0; background:#fff; border-radius: var(--mh-radius-md); overflow:hidden; box-shadow: var(--mh-shadow-sm); border: 1px solid var(--mh-line);}
.compare-table th{
  font-family: var(--mh-font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.76rem;
  padding: 1.1rem 1.4rem; text-align:left; color: var(--mh-ink-soft); background: var(--mh-bg-mist);
  border-bottom: 1px solid var(--mh-line);
}
.compare-table th.col-andrea{ color:#fff; background: linear-gradient(135deg, var(--mh-deep-blue), var(--mh-teal)); }
.compare-table td{ padding: 1rem 1.4rem; border-bottom: 1px solid var(--mh-line); vertical-align: top; font-size:.96rem; }
.compare-table td.col-andrea{ background: #F3FBF8; font-weight:600; color: var(--mh-deep-blue-900); }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table .x-mark{ color:#C4CBD0; }
.compare-table .check-mark{ color: var(--mh-soft-green-600); font-weight:700; }

/* --- Steps / timeline --- */
.step-row{ display:flex; gap: 1.6rem; align-items:flex-start; }
.step-index{
  font-family: var(--mh-font-mono); font-weight:700; font-size:1rem;
  width:52px; height:52px; flex:0 0 52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--mh-deep-blue); color:#fff;
  box-shadow: var(--mh-shadow-sm);
}
.step-connector{
  width:2px; flex:1; background: repeating-linear-gradient(180deg, var(--mh-line) 0 6px, transparent 6px 12px);
  margin: 0 auto;
}

/* --- Status badges --- */
.status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--mh-font-mono); font-size:.72rem; font-weight:700;
  padding: .28rem .65rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; }
.status-green{ background:#E7F7EC; color:#22824A; }
.status-green .dot{ background:#2FAE64; }
.status-yellow{ background:#FCF3DF; color:#96700F; }
.status-yellow .dot{ background: var(--mh-amber); }
.status-red{ background:#FBE9E6; color:#B23F2C; }
.status-red .dot{ background: var(--mh-red); }

/* --- Dashboard mockup --- */
.dash-mock{
  background:#fff; border-radius: var(--mh-radius-lg);
  border:1px solid var(--mh-line); box-shadow: var(--mh-shadow-lg);
  overflow:hidden;
}
.dash-mock .dash-topbar{
  background: var(--mh-deep-blue-900); color:#fff;
  padding: .8rem 1.3rem; display:flex; align-items:center; gap:.5rem;
  font-family: var(--mh-font-mono); font-size:.78rem;
}
.dash-mock .dash-topbar .win-dot{ width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,0.35); }
.dash-table{ width:100%; font-size:.88rem; border-collapse:collapse; }
.dash-table th{
  text-align:left; padding: .8rem 1.1rem; background: var(--mh-bg-mist);
  font-family: var(--mh-font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--mh-ink-soft);
  border-bottom:1px solid var(--mh-line);
}
.dash-table td{ padding: .85rem 1.1rem; border-bottom:1px solid var(--mh-line); vertical-align:middle; }
.dash-table tr:last-child td{ border-bottom:none; }
.dash-table tr:hover td{ background: #FAFDFD; }
.avatar-chip{
  width:30px;height:30px;border-radius:50%;
  background: linear-gradient(135deg, var(--mh-teal), var(--mh-soft-green));
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.72rem;
}

/* --- Phone mockup --- */
.phone-mock{
  width: 250px; border-radius: 34px; background: var(--mh-deep-blue-900);
  padding: 10px; box-shadow: var(--mh-shadow-lg);
}
.phone-mock .phone-screen{
  background:#fff; border-radius: 26px; overflow:hidden; min-height:460px;
  display:flex; flex-direction:column;
}
.phone-mock .phone-header{
  background: linear-gradient(135deg, var(--mh-deep-blue), var(--mh-teal));
  color:#fff; padding: 1.6rem 1.1rem 1.1rem; font-family: var(--mh-font-mono); font-size:.74rem;
}
.phone-mock .phone-body{ padding: 1rem; flex:1; }
.phone-chip{ background: var(--mh-bg-mist); border-radius:12px; padding:.7rem .8rem; margin-bottom:.6rem; font-size:.82rem; }

/* --- Footer --- */
.mh-footer{ background: var(--mh-deep-blue-900); color:#B9CDD3; padding: 4rem 0 2rem; }
.mh-footer h6{ color:#fff; font-family: var(--mh-font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; margin-bottom:1rem; }
.mh-footer a{ color:#B9CDD3; }
.mh-footer a:hover{ color:#fff; }
.social-chip{
  width:36px;height:36px;border-radius:50%; background: rgba(255,255,255,0.08);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:.5rem;
}

/* --- Forms --- */
.mh-form label{ font-weight:600; font-size:.88rem; color: var(--mh-deep-blue-900); margin-bottom:.35rem; }
.mh-form .form-control, .mh-form .form-select{
  border-radius: var(--mh-radius-sm); border:1.5px solid var(--mh-line); padding:.7rem .9rem;
}
.mh-form .form-control:focus, .mh-form .form-select:focus{
  border-color: var(--mh-teal); box-shadow: 0 0 0 4px rgba(18,135,127,0.12);
}

/* --- Utility --- */
.text-teal{ color: var(--mh-teal-600) !important; }
.text-deep{ color: var(--mh-deep-blue) !important; }
.bg-mist{ background: var(--mh-bg-mist) !important; }
.divider-dot{ width:5px;height:5px;border-radius:50%; background: var(--mh-line); display:inline-block; }

@media (max-width: 767.98px){
  .section{ padding: 4rem 0; }
  .step-row{ flex-direction:row; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Reveal-on-scroll --- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }