/* ═══════════════════════════════════════════
   APOPHERO HEALTH — GLOBAL STYLES
   Palette: #DEE3DF | #161919 | #09C8B8 | #705C52 | #A06046 | #848B8C
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --teal:        #09C8B8;
  --teal-dark:   #07a89a;
  --teal-light:  #e3f8f7;
  --black:       #161919;
  --charcoal:    #2a2e2e;
  --warm-brown:  #705C52;
  --terracotta:  #A06046;
  --slate:       #848B8C;
  --sage:        #DEE3DF;
  --sage-dark:   #c8d0cb;
  --white:       #ffffff;
  --off-white:   #f7f8f7;
  --border:      #d0d8d2;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 2px 8px rgba(22,25,25,.06);
  --shadow-md:  0 6px 24px rgba(22,25,25,.10);
  --shadow-lg:  0 16px 48px rgba(22,25,25,.14);

  --transition: .25s cubic-bezier(.4,0,.2,1);
  --nav-h:      72px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:var(--font-body); cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:var(--font-body); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--sage); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius:3px; }

/* ══════════════════════════════
   NAVIGATION
══════════════════════════════ */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--nav-h);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 5%;
  background: rgba(222,227,223,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#navbar.scrolled {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--black); letter-spacing:-.3px;
  display:flex; align-items:center; gap:.3rem;
}
.nav-logo span { color: var(--teal); }
.nav-links {
  display:flex; align-items:center; gap:2.2rem;
}
.nav-links a {
  font-size:.88rem; font-weight:500; color:var(--warm-brown);
  letter-spacing:.2px;
  position:relative; padding-bottom:2px;
  transition: color var(--transition);
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1.5px; background:var(--teal);
  transition: width var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--black); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:1rem; }
.btn-nav {
  padding:.5rem 1.3rem; border-radius:var(--radius-sm);
  font-size:.85rem; font-weight:600;
  background:var(--black); color:var(--white);
  transition: background var(--transition), transform var(--transition);
}
.btn-nav:hover { background:var(--teal); transform:translateY(-1px); }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  width:32px; height:32px; justify-content:center;
  cursor:pointer;
}
.hamburger span {
  display:block; height:2px; background:var(--black);
  border-radius:2px; transition:var(--transition);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:var(--sage);
  flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  opacity:0; transform:translateY(-20px);
  transition: opacity .3s, transform .3s;
  pointer-events:none;
}
.mobile-menu.open { opacity:1; transform:none; pointer-events:all; }
.mobile-menu a {
  font-family:var(--font-display); font-size:2.2rem; font-weight:600;
  color:var(--black); transition: color var(--transition);
}
.mobile-menu a:hover { color:var(--teal); }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.8rem; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:600; letter-spacing:.2px;
  transition: all var(--transition); cursor:pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background:var(--teal); color:var(--white);
  box-shadow: 0 4px 16px rgba(9,200,184,.3);
}
.btn-primary:hover {
  background:var(--teal-dark); transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(9,200,184,.4);
}
.btn-dark {
  background:var(--black); color:var(--white);
}
.btn-dark:hover { background:var(--charcoal); transform:translateY(-2px); }
.btn-outline {
  background:transparent; color:var(--black);
  border-color:var(--black);
}
.btn-outline:hover { background:var(--black); color:var(--white); }
.btn-outline-white {
  background:transparent; color:var(--white);
  border-color:rgba(255,255,255,.5);
}
.btn-outline-white:hover { background:var(--white); color:var(--black); }
.btn-sm { padding:.5rem 1.1rem; font-size:.8rem; }
.btn-lg { padding:1rem 2.4rem; font-size:1rem; }
.btn-arrow::after { content:'→'; transition:transform var(--transition); }
.btn-arrow:hover::after { transform:translateX(5px); }

/* ══════════════════════════════
   TYPOGRAPHY UTILITIES
══════════════════════════════ */
.display-xl {
  font-family:var(--font-display); font-size:clamp(3rem,6vw,5.5rem);
  font-weight:700; line-height:1.05; letter-spacing:-.5px;
}
.display-lg {
  font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.8rem);
  font-weight:700; line-height:1.1; letter-spacing:-.3px;
}
.display-md {
  font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.6rem);
  font-weight:600; line-height:1.2;
}
.display-sm {
  font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.7rem);
  font-weight:600; line-height:1.3;
}
.eyebrow {
  font-size:.72rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--teal);
}
.lead { font-size:1.05rem; line-height:1.75; color:var(--warm-brown); font-weight:400; }
.muted { color:var(--slate); font-size:.85rem; }

/* ══════════════════════════════
   LAYOUT
══════════════════════════════ */
.container { max-width:1200px; margin:0 auto; padding:0 5%; }
.container-sm { max-width:780px; margin:0 auto; padding:0 5%; }
.section-pad { padding:6rem 0; }
.section-pad-sm { padding:4rem 0; }

/* ══════════════════════════════
   PRODUCT CARD
══════════════════════════════ */
.prod-card {
  background:var(--white); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.prod-card:hover {
  transform:translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.prod-card-img {
  width:100%; height:200px;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative; overflow:hidden;
}
.prod-card-img .badge {
  position:absolute; top:12px; right:12px;
  background:var(--teal); color:var(--white);
  font-size:.65rem; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; padding:.3rem .7rem;
  border-radius:100px;
}
.prod-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.prod-card-cat {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--teal); margin-bottom:.5rem;
}
.prod-card-title {
  font-family:var(--font-display); font-size:1.15rem; font-weight:600;
  line-height:1.3; color:var(--black); margin-bottom:.6rem; flex:1;
}
.prod-card-desc {
  font-size:.82rem; color:var(--slate); line-height:1.6; margin-bottom:1.2rem;
}
.prod-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto;
}
.prod-price { font-weight:700; color:var(--teal); font-size:.95rem; }

/* ══════════════════════════════
   SECTION HEADERS
══════════════════════════════ */
.section-header { margin-bottom:3.5rem; }
.section-header.center { text-align:center; }
.section-header.center .lead { max-width:560px; margin:1rem auto 0; }
.section-header .lead { margin-top:.8rem; max-width:520px; }

/* ══════════════════════════════
   TAG / BADGE
══════════════════════════════ */
.tag {
  display:inline-flex; align-items:center;
  padding:.3rem .85rem; border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.4px;
}
.tag-teal { background:var(--teal-light); color:var(--teal-dark); }
.tag-warm { background:#f4ede8; color:var(--terracotta); }
.tag-sage { background:var(--sage); color:var(--warm-brown); }

/* ══════════════════════════════
   FORM ELEMENTS
══════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.form-label { font-size:.82rem; font-weight:600; color:var(--black); }
.form-input, .form-textarea, .form-select {
  padding:.78rem 1rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--white);
  font-size:.9rem; color:var(--black);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline:none; width:100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--teal);
  box-shadow: 0 0 0 3px rgba(9,200,184,.12);
}
.form-textarea { resize:vertical; min-height:130px; }

/* ══════════════════════════════
   WHATSAPP WIDGET
══════════════════════════════ */
#wa-widget {
  position:fixed; bottom:2rem; right:2rem; z-index:900;
  display:flex; flex-direction:column; align-items:flex-end; gap:.8rem;
}
.wa-btn {
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(37,211,102,.4);
  font-size:1.5rem; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: waPulse 2.5s ease infinite;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,.5); }
.wa-tooltip {
  background:var(--black); color:var(--white);
  padding:.5rem 1rem; border-radius:var(--radius-sm);
  font-size:.78rem; font-weight:500; white-space:nowrap;
  opacity:0; transform:translateX(10px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
#wa-widget:hover .wa-tooltip { opacity:1; transform:none; }
@keyframes waPulse {
  0%,100% { box-shadow:0 6px 20px rgba(37,211,102,.4); }
  50%      { box-shadow:0 6px 28px rgba(37,211,102,.65); }
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
#footer {
  background:var(--black); color:var(--white);
  padding:5rem 5% 2.5rem;
}
.footer-grid {
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:4rem;
}
.footer-brand-col .nav-logo { color:var(--white); margin-bottom:1rem; }
.footer-brand-col p { font-size:.84rem; color:rgba(255,255,255,.45); line-height:1.7; max-width:280px; }
.footer-social { display:flex; gap:.7rem; margin-top:1.5rem; }
.footer-social a {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:var(--transition);
}
.footer-social a:hover { background:var(--teal); color:#fff; }
.footer-col h4 { font-size:.82rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.2rem; }
.footer-col ul li { margin-bottom:.65rem; }
.footer-col ul a { font-size:.85rem; color:rgba(255,255,255,.5); transition:color var(--transition); }
.footer-col ul a:hover { color:var(--teal); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:2rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.25); }
.footer-bottom a { color:rgba(255,255,255,.4); font-size:.78rem; transition:color var(--transition); }
.footer-bottom a:hover { color:var(--teal); }

/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
.reveal {
  opacity:0; transform:translateY(24px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ══════════════════════════════
   NEWSLETTER STRIP
══════════════════════════════ */
.newsletter-strip {
  background:var(--teal);
  padding:4.5rem 5%;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:3rem;
}
.newsletter-strip h2 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:var(--white); line-height:1.2; }
.newsletter-strip p { color:rgba(255,255,255,.75); margin-top:.6rem; font-size:.92rem; }
.newsletter-form { display:flex; gap:.8rem; flex-wrap:wrap; }
.newsletter-form input {
  flex:1; min-width:200px;
  padding:.82rem 1.1rem; border-radius:var(--radius-sm);
  border:none; font-size:.9rem; outline:none;
  transition: box-shadow .2s;
}
.newsletter-form input:focus { box-shadow:0 0 0 3px rgba(255,255,255,.4); }
.newsletter-form button {
  padding:.82rem 1.6rem; border-radius:var(--radius-sm);
  background:var(--black); color:var(--white);
  font-size:.9rem; font-weight:600; cursor:pointer;
  border:none; transition:background var(--transition), transform var(--transition);
  font-family:var(--font-body);
}
.newsletter-form button:hover { background:var(--charcoal); transform:translateY(-1px); }

/* ══════════════════════════════
   PAGE HERO (reusable inner-page)
══════════════════════════════ */
.page-hero {
  padding: calc(var(--nav-h) + 4rem) 5% 4rem;
  background: linear-gradient(135deg, var(--sage) 0%, #c8d0cb 100%);
  text-align:center;
}
.page-hero .eyebrow { margin-bottom:.8rem; display:block; }
.page-hero h1 { margin-bottom:1rem; }
.page-hero .lead { max-width:600px; margin:0 auto; }

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
#toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--black); color:var(--white);
  padding:.85rem 2rem; border-radius:var(--radius-md);
  font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:9999;
  opacity:0; transition:opacity .3s, transform .3s;
  pointer-events:none; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.success::before { content:'✓ '; color:var(--teal); font-weight:700; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:960px) {
  .nav-links, .nav-actions .btn-nav { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .newsletter-strip { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .footer-grid { grid-template-columns:1fr; }
  .section-pad { padding:4rem 0; }
  .page-hero { padding:calc(var(--nav-h) + 2.5rem) 5% 2.5rem; }
}