/* ============================================================
   ARMADO ARMANO WELLNESS — Design Tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Brand palette */
  --navy: #0F2A44;
  --navy-deep: #0A1D30;
  --forest: #1E5A3A;
  --forest-light: #2C7A4F;
  --sage: #6BA4BA;
  --gold: #D4AF37;
  --gold-light: #E8C766;
  --gray: #6B6B6B;
  --ivory: #F7F7F2;
  --ivory-deep: #F0EEE5;
  --white: #FFFFFF;
  --ink: #1C2027;

  /* Type */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 50px -20px rgba(15,42,68,0.25);
  --shadow-card: 0 12px 30px -14px rgba(15,42,68,0.18);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 700;
}
p{ margin: 0 0 1em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
section{ padding: 96px 0; }
@media (max-width: 720px){ section{ padding: 64px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--forest);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:''; width: 26px; height: 1px; background: var(--gold);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-body); font-weight:600; font-size: .95rem;
  padding: 15px 30px; border-radius: 999px; cursor:pointer;
  border: 1.5px solid transparent; transition: all .3s var(--ease);
  letter-spacing: .01em;
}
.btn-primary{ background: var(--navy); color: var(--white); }
.btn-primary:hover{ background: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-gold{ background: var(--gold); color: var(--navy-deep); font-weight:700; }
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(212,175,55,.55); }
.btn-outline{ background: transparent; color: var(--navy); border-color: rgba(15,42,68,.25); }
.btn-outline:hover{ border-color: var(--navy); background: rgba(15,42,68,.05); }
.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover{ border-color: var(--gold); color: var(--gold-light); }
.btn-sm{ padding: 10px 20px; font-size: .82rem; }

/* ============== NAV ============== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(247,247,242,.97);
  border-bottom: 1px solid rgba(15,42,68,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand img{ height: 40px; width:auto; }
.nav-brand-text{ font-family: var(--font-display); font-weight:700; color: var(--navy); font-size:1.05rem; letter-spacing:.01em; }
.nav-links{ display:flex; align-items:center; }
.nav-links a{ margin-right: 34px; }
.nav-links a:last-child{ margin-right:0; }
.nav-links a{
  font-size: .88rem; font-weight:600; color: var(--ink);
  position: relative; padding: 6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--gold); transition: right .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--forest); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding: 6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--navy); margin: 5px 0; transition: .3s; }

@media (max-width: 920px){
  .nav-links{
    position: fixed; inset: 68px 0 0 0; background-color: var(--ivory); z-index: 200;
    flex-direction: column; justify-content:flex-start; align-items:flex-start;
    padding: 40px 28px; gap: 26px; transform: translateX(100%);
    transition: transform .35s var(--ease); overflow-y:auto;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size: 1.1rem; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ============== FOOTER ============== */
.site-footer{
  background: var(--navy-deep); color: rgba(255,255,255,.72);
  padding: 72px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand{ display:flex; flex-direction:column; }
.footer-brand-mark{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand-mark img{ height: 30px; width:auto; filter: brightness(0) invert(1); }
.footer-brand-mark span{ font-family: var(--font-display); font-weight:700; color:#fff; font-size:1.05rem; }
.footer-brand p{ font-size: .88rem; max-width: 300px; color: rgba(255,255,255,.55); }
.footer-col h5{
  font-family: var(--font-body); color: var(--gold-light); font-size:.78rem;
  letter-spacing:.14em; text-transform: uppercase; margin-bottom: 18px; font-weight:700;
}
.footer-col a{ display:block; font-size: .9rem; margin-bottom: 12px; color: rgba(255,255,255,.72); transition:.2s; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top: 26px;
  font-size: .8rem; color: rgba(255,255,255,.45); flex-wrap:wrap; gap:12px;
}

/* ============== HERO ============== */
.hero{
  position:relative; overflow:hidden;
  padding: 76px 0 100px;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(30,90,58,.10), transparent 60%),
    var(--ivory);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero h1{ font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.hero h1 em{ font-style: italic; color: var(--forest); }
.hero-sub{ font-size: 1.08rem; color: var(--gray); max-width: 480px; margin-bottom: 34px; }
.hero-ctas{ display:flex; gap: 16px; flex-wrap:wrap; margin-bottom: 38px; }
.hero-pillars{ display:flex; gap: 26px; flex-wrap:wrap; }
.hero-pillars span{ font-size:.78rem; font-weight:600; letter-spacing:.06em; color: var(--navy); display:flex; align-items:center; gap:8px; }
.hero-pillars span::before{ content:'✦'; color: var(--gold); }
.hero-art{ position:relative; display:flex; justify-content:center; }
.hero-art::before{
  content:''; position:absolute; width: 420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.18), transparent 70%);
  top:-40px; right:-40px; z-index:0;
}
.hero-art img{
  position:relative; z-index:1; max-width: 340px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); border: 6px solid var(--white);
}
.hero-art .ring{
  position:absolute; z-index:0; width: 92%; height: 92%; border: 1.5px dashed rgba(212,175,55,.5);
  border-radius: 50%; top:4%; left:4%;
}

/* ============== PILLAR STRIP ============== */
.pillar-strip{ background: var(--navy); padding: 30px 0; }
.pillar-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 20px; }
.pillar-row div{
  color: rgba(255,255,255,.9); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  display:flex; align-items:center; gap:10px; text-transform:uppercase;
}
.pillar-row div::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); }

/* ============== SECTION HEAD ============== */
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.section-head p{ color: var(--gray); font-size: 1.02rem; }

/* ============== PHASE CARDS ============== */
.phase-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 980px){ .phase-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .phase-grid{ grid-template-columns: 1fr; } }
.phase-card{
  background: var(--white); border-radius: var(--radius-md); padding: 32px 26px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(15,42,68,.06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.phase-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.phase-num{ font-family: var(--font-display); font-size: 2.1rem; color: var(--gold); font-weight:700; margin-bottom: 6px; }
.phase-card h4{ font-size: 1.12rem; margin-bottom:8px; }
.phase-days{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--forest); margin-bottom:14px; }
.phase-card p{ font-size:.9rem; color: var(--gray); margin-bottom:0; }

/* ============== PRODUCT CARDS ============== */
.product-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 900px){ .product-grid{ grid-template-columns: 1fr; } }
.product-card{
  background: var(--white); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(15,42,68,.06);
  display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.product-media{ background: linear-gradient(160deg, var(--navy), var(--navy-deep)); padding: 30px; display:flex; justify-content:center; }
.product-media img{ max-height: 220px; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.mini-cover{
  width: 170px; height: 230px; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; justify-content:space-between; padding: 22px 18px;
  position:relative; overflow:hidden;
}
.mini-cover::after{
  content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.12), transparent 60%);
}
.mini-cover .mc-eyebrow{ font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.7); position:relative; }
.mini-cover .mc-title{ font-family: var(--font-display); font-size: 1.5rem; line-height:1.15; color:#fff; font-weight:700; position:relative; }
.mini-cover .mc-sub{ font-size:.68rem; color: rgba(255,255,255,.85); font-weight:600; letter-spacing:.02em; position:relative; }
.mini-cover .mc-mark{ width:26px; height:26px; border-radius:50%; background: rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.7rem; color:#fff; position:relative; }
.mc-navy{ background: linear-gradient(160deg, #16324f, #0A1D30); }
.mc-forest{ background: linear-gradient(160deg, #2C7A4F, #16402A); }
.mc-sage{ background: linear-gradient(160deg, #4C8CA0, #2C5A68); }
.product-body{ padding: 28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.product-tag{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); margin-bottom:10px; }
.product-body h3{ font-size: 1.3rem; margin-bottom:10px; }
.product-body p{ color: var(--gray); font-size:.92rem; flex:1; }
.product-price{ font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); font-weight:700; margin: 14px 0; }
.product-price span{ font-family: var(--font-body); font-size:.8rem; color: var(--gray); font-weight:500; }
.product-list{ list-style:none; padding:0; margin: 0 0 18px; font-size:.86rem; color: var(--ink); }
.product-list li{ padding-left: 22px; position:relative; margin-bottom: 8px; }
.product-list li::before{ content:'✓'; position:absolute; left:0; color: var(--forest); font-weight:700; }
.bundle-banner{
  margin-top: 44px; background: linear-gradient(120deg, var(--forest), var(--navy));
  border-radius: var(--radius-lg); padding: 44px 44px; color: var(--white);
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.bundle-banner::before{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.28), transparent 70%);
}
.bundle-banner h3{ color: var(--white); font-size: 1.6rem; margin-bottom:8px; }
.bundle-banner p{ color: rgba(255,255,255,.78); margin-bottom:0; max-width: 460px; }

/* ============== QUOTE / COACH BAND ============== */
.quote-band{
  background: var(--ivory-deep); text-align:center;
  padding: 80px 0;
}
.quote-band img{ width: 70px; margin: 0 auto 26px; }
.quote-band blockquote{
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--navy); max-width: 780px; margin: 0 auto 18px; line-height:1.5;
}
.quote-band cite{ font-style:normal; font-size:.85rem; color: var(--gray); letter-spacing:.06em; text-transform:uppercase; }

/* ============== CARD / GENERIC ============== */
.card{
  background: var(--white); border-radius: var(--radius-md); padding: 32px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(15,42,68,.06);
}

/* ============== CTA BAND ============== */
.cta-band{
  background: var(--navy); color: var(--white); text-align:center; padding: 80px 0;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(700px 300px at 50% 0%, rgba(212,175,55,.16), transparent 70%);
}
.cta-band h2{ color: var(--white); position:relative; }
.cta-band p{ color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 34px; position:relative; }
.cta-band .btn{ position:relative; }

/* ============== FAQ ACCORDION ============== */
.faq-item{ border-bottom: 1px solid rgba(15,42,68,.1); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap: 20px;
  padding: 24px 0; cursor:pointer; font-weight:600; color: var(--navy); font-size: 1.02rem;
}
.faq-q .plus{ font-size: 1.4rem; color: var(--gold); transition: transform .3s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a p{ padding-bottom: 22px; color: var(--gray); margin:0; }

/* ============== BADGES ============== */
.badge-row{ display:flex; gap:14px; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--white);
  border: 1px solid rgba(15,42,68,.1); border-radius: 999px; padding: 9px 16px;
  font-size:.78rem; font-weight:600; color: var(--navy);
}

/* utility */
.text-center{ text-align:center; }
.mt-lg{ margin-top: 56px; }
.tag-gold{ color: var(--gold); }