/* =========================================================
   MAGC WELLNESS SOLUTIONS — SHARED DESIGN SYSTEM
   Mobile-first · WCAG AA · performance-conscious
   ========================================================= */

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --grey:#F0F0EE;
  --grey-border:#E1E0DB;
  --charcoal-soft:#5C5C57;
  --gold:#B8860B;      /* darkened from #F0B429 for 4.5:1 text contrast on white */
  --gold-bg:#F0B429;    /* original brand gold, safe for large/decorative use only */
  --radius:20px;
  --radius-sm:12px;
  --pill:999px;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --focus-ring: 3px solid #1A73E8;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; color:var(--black); line-height:1.1; margin:0;}
p{margin:0;}
a{text-decoration:none; color:inherit;}
img{display:block; max-width:100%; height:auto;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:16px;} /* 16px prevents iOS zoom-on-focus */

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--black); color:var(--white); padding:14px 22px; border-radius:0 0 8px 0;
  font-weight:600; font-size:14px;
}
.skip-link:focus{left:0;}
:focus-visible{outline:var(--focus-ring); outline-offset:3px;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container); margin:0 auto; padding:0 20px;}
@media(min-width:768px){ .wrap{padding:0 32px;} }
section{padding:56px 0;}
@media(min-width:768px){ section{padding:100px 0;} }
.bg-white{background:var(--white);}
.bg-grey{background:var(--grey);}
.bg-black{background:var(--black); color:var(--white);}
.bg-black h1,.bg-black h2,.bg-black h3{color:var(--white);}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-group.in > *{transition-delay:calc(var(--i, 0) * 80ms);}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grey-border);
  transition:box-shadow .2s ease;
}
header.scrolled{box-shadow:0 4px 20px -8px rgba(10,10,10,0.15);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{width:40px; height:40px; border-radius:50%; flex-shrink:0;}
.logo-word{font-weight:800; font-size:15px; letter-spacing:-0.01em;}
.nav-links{display:none; gap:28px; font-size:14.5px; font-weight:500; color:var(--charcoal-soft);}
.nav-links a{position:relative; padding:6px 0;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--black); transition:width .2s ease;}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{width:100%;}
.nav-links a[aria-current="page"]{color:var(--black); font-weight:600;}
.nav-ctas{display:none; gap:10px; align-items:center;}
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--grey-border); border-radius:10px; background:var(--white);
}
@media(min-width:960px){
  .nav-links{display:flex;}
  .nav-ctas{display:flex;}
  .nav-toggle{display:none;}
}
.mobile-menu{
  display:none; flex-direction:column; gap:4px; padding:12px 0 20px; border-top:1px solid var(--grey-border);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:14px 4px; font-weight:600; font-size:15px; border-bottom:1px solid var(--grey-border);}
.mobile-menu .mm-ctas{display:flex; flex-direction:column; gap:10px; padding-top:14px;}
@media(min-width:960px){ .mobile-menu{display:none !important;} }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--charcoal-soft); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-bg); flex-shrink:0;}
.bg-black .eyebrow{color:#C9C9C4;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--pill); font-size:14.5px; font-weight:600;
  cursor:pointer; border:1.5px solid transparent; transition:all .2s ease; white-space:nowrap;
  min-height:44px; /* touch target */
}
.btn-primary{background:var(--black); color:var(--white);}
.btn-primary:hover{background:#222;}
.btn-secondary{background:transparent; color:var(--black); border-color:var(--black);}
.btn-secondary:hover{background:var(--black); color:var(--white);}
.btn-white{background:var(--white); color:var(--black);}
.btn-white:hover{background:var(--grey);}
.btn-sm{padding:11px 20px; font-size:13.5px; min-height:38px;}
.btn-block{width:100%;}

/* ---------- Cards ---------- */
.card{background:var(--white); border:1px solid var(--grey-border); border-radius:16px; padding:26px 22px; transition:transform .2s ease, box-shadow .2s ease;}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(10,10,10,0.25);}
.card .icn{width:30px; height:30px; margin-bottom:16px;}
.card h3{font-size:16.5px; margin-bottom:8px;}
.card p{font-size:13.5px; color:var(--charcoal-soft);}
.card .link{font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; margin-top:12px;}

.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
.grid-5{grid-template-columns:1fr;}
@media(min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-5{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-5{grid-template-columns:repeat(5,1fr);} }

/* ---------- Forms ---------- */
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;}
.form-field .required{color:#B3261E;}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--grey-border); border-radius:10px;
  background:var(--white); transition:border-color .15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--black); outline:none;}
.form-field .hint{font-size:12.5px; color:var(--charcoal-soft); margin-top:6px;}
.form-field textarea{resize:vertical; min-height:120px;}
fieldset{border:none; padding:0; margin:0 0 20px;}
fieldset legend{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; padding:0;}
.radio-row,.check-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:14.5px;}
.radio-row input,.check-row input{width:auto; accent-color:var(--black);}
.form-success{display:none; background:var(--grey); border-radius:14px; padding:28px; text-align:center;}
.form-success.show{display:block;}
.form-note{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--charcoal-soft); margin-top:18px;}

/* ---------- Sections shared ---------- */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:30px;}
@media(min-width:768px){ .section-head h2{font-size:38px;} }

/* ---------- Stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; text-align:left;}
@media(min-width:768px){ .stats-grid{grid-template-columns:repeat(4,1fr);} }
.stat-num{font-size:34px; font-weight:800; margin-bottom:6px;}
@media(min-width:768px){ .stat-num{font-size:42px;} }
.stat-label{font-size:13px; color:#B8B8B3;}

/* ---------- Trust / reviews strip ---------- */
.trust-bar{padding:28px 0; border-top:1px solid var(--grey-border); border-bottom:1px solid var(--grey-border);}
.trust-row{display:flex; flex-direction:column; gap:16px;}
@media(min-width:768px){ .trust-row{flex-direction:row; align-items:center; justify-content:space-between;} }
.trust-label{font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--charcoal-soft);}
.trust-marks{display:flex; gap:24px; flex-wrap:wrap; align-items:center; opacity:0.85;}
.trust-mark{font-weight:700; font-size:14px;}

.reviews-strip{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.stars{color:var(--gold); font-size:16px; letter-spacing:2px;}
.reviews-score{font-weight:800; font-size:20px;}
.reviews-count{font-size:13px; color:var(--charcoal-soft);}

/* ---------- Footer ---------- */
footer{background:var(--black); color:#B8B8B3; padding:56px 0 22px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media(min-width:640px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr;} }
@media(min-width:900px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.foot-logo{font-weight:800; font-size:16px; color:var(--white);}
.foot-col h4{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-bg); margin-bottom:14px; font-weight:700;}
.foot-col a{display:block; margin-bottom:10px; color:#B8B8B3; min-height:22px;}
.foot-col a:hover{color:var(--white);}
.foot-bottom{display:flex; flex-direction:column; gap:10px; justify-content:space-between; padding-top:22px; font-size:12.5px; opacity:0.75;}
@media(min-width:768px){ .foot-bottom{flex-direction:row;} }

/* ---------- WhatsApp floating action button ---------- */
.wa-fab{
  position:fixed; right:18px; bottom:18px; z-index:150;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -6px rgba(37,211,102,0.55);
  transition:transform .2s ease;
}
.wa-fab:hover{transform:scale(1.06);}
.wa-fab svg{width:28px; height:28px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:13px; color:var(--charcoal-soft); margin-bottom:18px;}
.breadcrumb a{text-decoration:underline;}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.max-w-sm{max-width:520px;}
.max-w-md{max-width:640px;}
.flex{display:flex;}
.gap-10{gap:10px;} .gap-14{gap:14px;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}

/* ---------- Lazy-loaded image fade ---------- */
img[loading="lazy"]{transition:opacity .3s ease;}

/* Print: hide nav/footer chrome */
@media print{
  header, footer, .wa-fab{display:none;}
}