/* =========================================================
   Fit4rEver — main stylesheet
   ========================================================= */

:root{
  /* colors — matched exactly to the real Fit4rEver app's design tokens */
  --c-cream:        #FAFAF8;
  --c-cream-soft:   #F5F4EF;
  --c-white:        #ffffff;
  --c-ink:          #1F2937;
  --c-body:         #5b6b72;
  --c-border:       #e7e1d4;

  --c-green-950:    #031c17;
  --c-green-900:    #0c5946;
  --c-green-800:    #0F6E56;
  --c-green-700:    #138E5B;
  --c-green-600:    #16a06a;
  --c-green-100:    #e2f0ee;
  --c-green-50:     #f0f9f7;

  --c-gold-700:     #965c0c;
  --c-gold-600:     #BA7517;
  --c-gold-500:     #E2B013;
  --c-gold-100:     #fef3e2;
  --c-gold-50:      #fffaf0;

  --c-pink-100:     #fff1f2;
  --c-pink-700:     #be123c;
  --c-blue-100:     #f0f9ff;
  --c-blue-700:     #0369a1;
  --c-purple-100:   #faf5ff;
  --c-purple-700:   #7e22ce;
  --c-orange-100:   #fffbeb;
  --c-orange-700:   #b45309;
  --c-cardio-100:   #fff7ed;
  --c-cardio-700:   #c2410c;
  --c-mint-100:     #ecfdf5;
  --c-mint-700:     #047857;
  --c-cyan-100:     #ecfeff;
  --c-cyan-700:     #0e7490;
  --c-lav-100:      #eef2ff;
  --c-lav-700:      #4338ca;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-full: 999px;

  --shadow-card: 0 4px 18px rgba(20, 40, 30, 0.06), 0 1px 3px rgba(20,40,30,.05);
  --shadow-pop:  0 18px 45px rgba(15, 40, 28, 0.14);

  /* exact 3D shadow system from the real app */
  --shadow-3d-sm: 0 2px 0 0 rgba(15, 110, 86, 0.15), 0 3px 6px rgba(0, 0, 0, 0.05);
  --shadow-3d-md: 0 4px 0 0 rgba(15, 110, 86, 0.18), 0 8px 16px -2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-3d-lg: 0 10px 0 0 rgba(15, 110, 86, 0.12), 0 20px 30px -5px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-3d-amber: 0 4px 0 0 rgba(186, 117, 23, 0.25), 0 8px 16px -2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
}

/* Floating animations — exact match to the real app */
@keyframes float3D{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-5px); }
  100%{ transform:translateY(0px); }
}
.animate-float-header{ animation:float3D 6s ease-in-out infinite; }

@keyframes floatGentle{
  0%{ transform:translate(-50%,0px); box-shadow:0 5px 0 0 #965c0c, 0 8px 18px rgba(186,117,23,.3), inset 0 1.5px 0 rgba(255,255,255,.45); }
  50%{ transform:translate(-50%,-10px); box-shadow:0 15px 0 0 #965c0c, 0 20px 30px rgba(186,117,23,.4), inset 0 1.5px 0 rgba(255,255,255,.55); }
  100%{ transform:translate(-50%,0px); box-shadow:0 5px 0 0 #965c0c, 0 8px 18px rgba(186,117,23,.3), inset 0 1.5px 0 rgba(255,255,255,.45); }
}
.animate-float-gentle{ animation:floatGentle 3.5s ease-in-out infinite; }

[data-theme="dark"]{
  --c-cream: #0b1512;
  --c-cream-soft: #0f1d18;
  --c-white: #12221c;
  --c-ink: #f1f5f9;
  --c-body: #8fa69c;
  --c-border: rgba(19, 142, 91, 0.18);
  --c-green-100: #1a3c31;
  --c-green-50: #162c23;
  --c-gold-100: #2e2818;
  --c-gold-50: #241f12;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-body);
  background:var(--c-cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--c-ink); margin:0 0 .5em; line-height:1.18; font-weight:700; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2px solid var(--c-gold-600); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.accent{ color:var(--c-gold-600); font-style:italic; font-weight:600; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--soft{ background:var(--c-cream-soft); }
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-gold-700); background:var(--c-gold-50);
  padding:6px 16px; border-radius:var(--radius-full); margin-bottom:14px;
}
.section-head{ text-align:center; max-width:680px; margin:0 auto 48px; }
.section-head .rule{ width:64px; height:3px; background:var(--c-gold-500); margin:18px auto 0; border-radius:2px; }
.section-head p{ color:var(--c-body); font-size:16px; }

/* ---------- buttons (exact 3D recipe from the real app) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:14px 28px; border-radius:var(--radius-full); font-weight:800; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; position:relative;
  transition:all .2s cubic-bezier(.2,.8,.2,1);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(to right, var(--c-green-800), var(--c-green-700), var(--c-gold-500));
  color:#fff; box-shadow:0 4px 12px rgba(15,110,86,.15);
}
.btn-primary:hover{ opacity:.95; transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0); }
.btn-solid{
  background:var(--c-green-700); color:#fff;
  box-shadow:0 6px 15px -4px rgba(19,142,91,.4), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2.5px 0 rgba(0,0,0,.15);
}
.btn-solid:hover{ background:#107c4c; transform:translateY(-2px); }
.btn-solid:active{ transform:translateY(2px); box-shadow:0 2px 6px rgba(19,142,91,.2); }
.btn-gold{
  background:linear-gradient(to bottom, var(--c-gold-500), var(--c-gold-600)); color:#fff;
  box-shadow:0 5px 0 0 var(--c-gold-700), 0 8px 18px rgba(186,117,23,.3), inset 0 1.5px 0 rgba(255,255,255,.45);
}
.btn-gold:hover{ transform:translateY(-2px); }
.btn-gold:active{ transform:translateY(2px); box-shadow:0 2px 6px rgba(186,117,23,.25); }
.btn-outline{ background:var(--c-white); border-color:var(--c-border); color:var(--c-ink); box-shadow:0 1px 2px rgba(20,40,30,.04); }
.btn-outline:hover{ border-color:var(--c-green-700); color:var(--c-green-700); transform:translateY(-2px); }
.btn-outline:active{ transform:translateY(0); }
.btn-sm{ padding:10px 20px; font-size:13px; }
.btn-block{ width:100%; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  background:var(--c-green-950); color:#cfe6da; font-size:12.5px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:10px; padding-bottom:10px; flex-wrap:wrap;
}
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.topbar-pill{
  display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.06); color:#e7f3ec; font-weight:600;
}
.topbar-pill.is-brand{ background:transparent; border:1px solid rgba(255,255,255,.18); }
.topbar-pill.is-gold{ background:var(--c-gold-600); color:#241a06; }
.topbar-pill small{ display:block; font-weight:500; color:#bcd6c8; font-size:11px; }
.topbar-pill.is-gold small{ color:#3c2c06; }
.topbar-status{ display:flex; align-items:center; gap:6px; color:#cfe6da; }
.topbar-status .dot{ width:7px; height:7px; border-radius:50%; background:#3fd17d; display:inline-block; box-shadow:0 0 0 3px rgba(63,209,125,.25); }
.topbar-stat{ color:var(--c-gold-500); font-weight:700; }
@media (max-width:780px){ .topbar-left{ display:none; } }

/* =========================================================
   MAIN NAV
   ========================================================= */
.site-header{
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(231,225,212,.7); position:sticky; top:0; z-index:50;
}
[data-theme="dark"] .site-header{ background:rgba(24,41,31,.7); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:14px; padding-bottom:14px; }

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--c-ink); flex-shrink:0; }
.brand-mark{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--c-green-700), var(--c-green-900));
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.brand-mark svg{ width:20px; height:20px; }
.brand b{ color:var(--c-green-800); }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a{ display:flex; align-items:center; gap:4px; padding:10px 16px; border-radius:var(--radius-full); font-weight:600; font-size:14.5px; color:#3a4a43; }
.main-nav a:hover{ color:var(--c-green-700); }
.main-nav li.current a, .main-nav a.is-active{ background:var(--c-green-100); color:var(--c-green-800); }
.main-nav li{ position:relative; }
.caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .2s ease; }
.has-dropdown:hover .caret, .has-dropdown.is-open .caret{ transform:rotate(225deg); margin-top:3px; }

.mega{
  position:absolute; top:calc(100% + 14px); left:0; width:420px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-md); box-shadow:0 30px 60px rgba(15,40,28,.22), 0 1px 0 rgba(255,255,255,.6) inset;
  padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; opacity:0; visibility:hidden;
  transform:translateY(10px) scale(.97); transform-origin:top left;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.3), visibility .22s; z-index:60;
}
[data-theme="dark"] .mega{ background:rgba(24,41,31,.85); border-color:rgba(255,255,255,.08); }
.has-dropdown:hover .mega, .has-dropdown.is-open .mega{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.mega-group{ display:flex; flex-direction:column; gap:4px; }
.mega-group h6{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-gold-700); font-weight:700; margin:4px 0 6px; }
.mega-item{ display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:10px; }
.mega-item:hover{ background:var(--c-green-50); }
.mega-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.mega-item strong{ display:block; font-size:13.5px; color:var(--c-ink); font-weight:700; }
.mega-item span{ display:block; font-size:11.5px; color:var(--c-body); }

.header-tools{ display:flex; align-items:center; gap:10px; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--c-cream-soft); border:1px solid var(--c-border); border-radius:var(--radius-full); padding:9px 16px; min-width:220px; }
.search-box input{ background:none; border:none; outline:none; color:var(--c-ink); width:100%; font-size:13.5px; }
.search-box svg{ width:15px; height:15px; flex-shrink:0; color:var(--c-body); }
.theme-toggle{ width:38px; height:38px; border-radius:50%; border:1px solid var(--c-border); background:var(--c-white); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.theme-toggle svg{ width:16px; height:16px; }
.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--c-border); background:none; flex-shrink:0; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--c-ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--c-ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

@media (max-width:1080px){
  .search-box{ display:none; }
}
@media (max-width:900px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:300px; height:100vh; background:var(--c-white);
    flex-direction:column; align-items:flex-start; padding:90px 22px 22px; transform:translateX(100%);
    transition:transform .25s ease; box-shadow:-10px 0 30px rgba(0,0,0,.15); overflow-y:auto; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; width:100%; gap:2px; }
  .main-nav a{ width:100%; }
  .mega{ position:static; width:100%; box-shadow:none; border:none; grid-template-columns:1fr; opacity:1; visibility:visible; transform:none; display:none; padding:6px 0 6px 14px; }
  .has-dropdown.is-open .mega{ display:grid; }
  .nav-toggle{ display:flex; }
  .header-tools .btn-primary{ display:none; }
}
@media (max-width:560px){
  .header-tools .btn-primary{ display:none; }
}

/* breadcrumb */
.breadcrumb-bar{ padding:22px 0; }
.breadcrumb{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-full); padding:14px 24px; display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--c-body); font-weight:600; }
.breadcrumb a{ display:flex; align-items:center; gap:6px; }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--c-green-700); }

/* =========================================================
   PAGE HERO (about / contact / blog)
   ========================================================= */
.page-hero{ text-align:center; padding:30px 0 10px; }
.page-hero h1{ font-size:46px; }
.page-hero p{ max-width:620px; margin:0 auto; font-size:16.5px; }

/* =========================================================
   HOME — slider
   ========================================================= */
.hero-slider{ position:relative; overflow:hidden; border-radius:0 0 var(--radius-lg) var(--radius-lg); margin:0 0 0; }
.hero-slide{ position:relative; min-height:480px; display:none; align-items:center; }
.hero-slide.is-active{ display:flex; }
.hero-slide img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0) brightness(.8); }
.hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,16,.55), rgba(10,20,16,.7)); }
.hero-card{
  position:relative; z-index:2; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-radius:var(--radius-lg); padding:38px; display:flex; align-items:center; gap:32px;
  max-width:1040px; margin:0 auto; box-shadow:var(--shadow-pop);
}
.hero-card-text{ flex:1; }
.hero-card-meta{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.03em; }
.tag.green{ background:var(--c-green-100); color:var(--c-green-800); }
.tag.pink{ background:var(--c-pink-100); color:var(--c-pink-700); }
.tag.blue{ background:var(--c-blue-100); color:var(--c-blue-700); }
.tag.purple{ background:var(--c-purple-100); color:var(--c-purple-700); }
.tag.orange{ background:var(--c-orange-100); color:var(--c-orange-700); }
.tag.mint{ background:var(--c-mint-100); color:var(--c-mint-700); }
.tag.cyan{ background:var(--c-cyan-100); color:var(--c-cyan-700); }
.tag.lav{ background:var(--c-lav-100); color:var(--c-lav-700); }
.hero-card-text .date{ color:var(--c-body); font-size:13px; }
.hero-card-text h2{ font-size:30px; margin-bottom:10px; }
.hero-card-text p{ color:var(--c-body); margin-bottom:0; }
.hero-card-img{ width:260px; height:170px; border-radius:var(--radius-md); overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-card); }
.hero-card-img img{ width:100%; height:100%; object-fit:cover; }
.slide-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; z-index:3; border:none; box-shadow:var(--shadow-card); }
.slide-arrow.prev{ left:24px; } .slide-arrow.next{ right:24px; }
.slide-dots{ position:relative; display:flex; justify-content:center; gap:8px; padding:22px 0; }
.slide-dots button{ width:9px; height:9px; border-radius:50%; background:var(--c-border); border:none; padding:0; }
.slide-dots button.is-active{ background:var(--c-green-700); width:24px; border-radius:5px; }
.scroll-cue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:20; width:48px; height:48px; }
.scroll-cue button{
  width:100%; height:100%; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(to bottom, var(--c-gold-600), var(--c-gold-700));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
}

@media (max-width:760px){
  .hero-card{ flex-direction:column; padding:24px; text-align:center; }
  .hero-card-img{ width:100%; height:180px; }
  .slide-arrow{ display:none; }
}

/* journal cards (shared: home + blog) */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.post-card-media{ position:relative; height:180px; overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; }
.post-card-media .tag{ position:absolute; top:14px; left:14px; }
.post-card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card-body h3{ font-size:19px; margin-bottom:2px; }
.post-card-body p{ color:var(--c-body); font-size:14px; margin-bottom:6px; }
.post-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--c-body); }
.post-card-foot a{ color:var(--c-green-700); font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.center-cta{ display:flex; justify-content:center; margin-top:40px; }

/* wellness / partner section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-list{ display:flex; flex-direction:column; gap:18px; margin:26px 0 30px; }
.split-list li{ display:flex; gap:14px; align-items:flex-start; }
.check{ width:26px; height:26px; border-radius:50%; background:var(--c-green-700); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }
.split-list strong{ display:block; color:var(--c-ink); font-size:15.5px; margin-bottom:2px; }
.split-list span{ font-size:14px; color:var(--c-body); }
.feature-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-pop); }
.feature-photo img{ width:100%; height:420px; object-fit:cover; }
.feature-photo .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,30,20,.05), rgba(8,20,15,.85)); }
.feature-photo .copy{ position:absolute; left:26px; right:26px; bottom:26px; color:#fff; }
.feature-photo .eyebrow{ background:rgba(255,255,255,.15); color:#fff; }
.feature-photo h3{ color:#fff; font-size:22px; }
.feature-photo .avatars{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.avatar-stack{ display:flex; }
.avatar-stack span{ width:32px; height:32px; border-radius:50%; border:2px solid #18291f; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; margin-left:-8px; }
.feature-photo .avatars small{ font-size:11.5px; color:#dce8e0; display:block; line-height:1.3; }

/* CTA banner */
.cta-banner{ background:linear-gradient(110deg, var(--c-green-900), var(--c-green-700) 55%, var(--c-gold-600)); border-radius:var(--radius-lg); padding:54px 40px; text-align:center; color:#fff; margin:0 24px; }
.cta-banner h2{ color:#fff; font-size:30px; margin-bottom:18px; }
.cta-banner p{ color:#e6f0ea; max-width:560px; margin:0 auto 26px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-banner .btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }

@media (max-width:880px){
  .journal-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--c-cream-soft); border-top:1px solid var(--c-border); padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.footer-brand p{ font-size:14px; color:var(--c-body); margin:16px 0 18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:var(--c-white); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; }
.footer-col h6{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-ink); font-weight:700; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:var(--c-body); }
.footer-col a:hover{ color:var(--c-green-700); }
.footer-news p{ font-size:14px; color:var(--c-body); margin-bottom:16px; }
.footer-news form{ display:flex; flex-direction:column; gap:10px; }
.footer-news input{ padding:13px 16px; border-radius:var(--radius-full); border:1px solid var(--c-border); background:var(--c-white); color:var(--c-ink); }
.footer-bottom{ border-top:1px solid var(--c-border); padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13px; color:var(--c-body); flex-wrap:wrap; }
.footer-bottom ul{ display:flex; gap:22px; flex-wrap:wrap; }
.back-to-top{ position:fixed; right:26px; bottom:26px; width:46px; height:46px; border-radius:50%; background:var(--c-green-800); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-pop); z-index:40; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s; }
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.mission-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.mission-photo{ background:linear-gradient(135deg, var(--c-green-800), var(--c-green-900)); border-radius:var(--radius-lg); padding:30px; color:#fff; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.mission-photo svg.deco{ position:absolute; top:30px; right:30px; width:90px; height:90px; opacity:.18; }
.mission-photo .eyebrow{ background:rgba(255,255,255,.15); color:#fff; align-self:flex-start; }
.mission-photo h4{ color:#fff; font-size:20px; margin:0; }

.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.step-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:30px; text-align:center; box-shadow:var(--shadow-card); }
.step-icon{ width:52px; height:52px; border-radius:14px; background:var(--c-green-100); color:var(--c-green-700); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.step-card h4{ font-size:17px; }
.step-card p{ font-size:14px; margin:0; }

.mini-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.mini-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:24px; display:flex; gap:16px; box-shadow:var(--shadow-card); }
.mini-card .ico{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.mini-card h5{ font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--c-ink); margin:0 0 4px; }
.mini-card p{ font-size:13.5px; margin:0; }

.credential-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; margin-top:46px; }
.credential-photo{ background:var(--c-cream-soft); border-radius:var(--radius-lg); min-height:280px; position:relative; overflow:hidden; }
.credential-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.credential-photo .badge-float{ position:absolute; left:22px; bottom:22px; background:var(--c-white); padding:14px 18px; border-radius:var(--radius-md); box-shadow:var(--shadow-pop); max-width:78%; }
.credential-photo .badge-float .eyebrow{ margin-bottom:8px; }
.credential-photo .badge-float h4{ font-size:16px; margin:0; }
.cred-list{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.cred-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--c-ink); font-weight:600; }
.cred-list li svg{ width:18px; height:18px; color:var(--c-green-700); flex-shrink:0; margin-top:2px; }

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.team-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:26px; text-align:center; box-shadow:var(--shadow-card); }
.team-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; }
.team-card h4{ font-size:15.5px; margin-bottom:2px; }
.team-card .role{ color:var(--c-gold-600); font-size:12.5px; font-weight:700; margin-bottom:12px; }
.team-card .cred{ font-size:11.5px; color:var(--c-body); border:1px solid var(--c-border); border-radius:var(--radius-full); padding:6px 10px; display:inline-block; }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-card); }
.testimonial-card p{ font-size:14.5px; color:var(--c-ink); font-style:italic; }
.testimonial-foot{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.testimonial-foot .initials{ width:38px; height:38px; border-radius:50%; background:var(--c-green-100); color:var(--c-green-800); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.testimonial-foot strong{ display:block; font-size:13.5px; color:var(--c-ink); }
.testimonial-foot span{ font-size:12px; color:var(--c-body); }

@media (max-width:980px){
  .mission-grid, .credential-row{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .steps-grid, .mini-cards, .testimonial-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; }
.contact-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-card); }
.contact-card h3{ font-size:24px; }
.contact-item{ display:flex; gap:16px; margin-top:24px; }
.contact-item .ico{ width:42px; height:42px; border-radius:12px; background:var(--c-green-100); color:var(--c-green-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-item strong{ display:block; color:var(--c-ink); font-size:15px; margin-bottom:3px; }
.contact-item span, .contact-item a{ font-size:13.5px; color:var(--c-body); }
.contact-item .email-link{ color:var(--c-green-700); font-weight:700; }
.contact-divider{ border-top:1px solid var(--c-border); margin:26px 0 20px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-body); margin-bottom:8px; }
.field input, .field select, .field textarea{ width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--c-border); background:var(--c-cream-soft); color:var(--c-ink); }
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ background:var(--c-white); border-color:var(--c-green-600); }

.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.faq-item{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:22px 24px; box-shadow:var(--shadow-card); }
.faq-q{ display:flex; gap:12px; align-items:flex-start; font-weight:700; color:var(--c-ink); font-size:15px; cursor:pointer; }
.faq-q .q-ico{ width:26px; height:26px; border-radius:50%; background:var(--c-gold-100); color:var(--c-gold-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; }
.faq-a{ padding-left:38px; font-size:14px; color:var(--c-body); margin-top:10px; }

@media (max-width:900px){ .contact-grid, .faq-grid{ grid-template-columns:1fr; } }

/* =========================================================
   BLOG ARCHIVE
   ========================================================= */
.filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:40px; flex-wrap:wrap; }
.filter-bar .label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-gold-600); font-weight:700; margin-bottom:8px; display:block; }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill{ display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-full); border:1px solid var(--c-border); font-size:13px; font-weight:700; color:var(--c-ink); }
.filter-pill.is-active{ background:var(--c-green-700); color:#fff; border-color:var(--c-green-700); }
.filter-pill em{ background:rgba(0,0,0,.08); border-radius:var(--radius-full); padding:1px 7px; font-style:normal; font-size:11px; }
.filter-pill.is-active em{ background:rgba(255,255,255,.25); }
.archive-search{ display:flex; align-items:center; gap:8px; background:var(--c-cream-soft); border:1px solid var(--c-border); border-radius:var(--radius-full); padding:11px 18px; min-width:280px; }
.archive-search input{ background:none; border:none; outline:none; width:100%; font-size:13.5px; }

.archive-layout{ display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; }
.featured-label{ display:flex; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-gold-600); font-weight:700; margin-bottom:18px; }
.featured-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:30px; }
.feature-card{ background:var(--c-white); border:1px solid var(--c-border); border-left:4px solid var(--c-green-700); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-card); }
.feature-card .meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--c-body); margin-bottom:10px; }
.feature-card h3{ font-size:19px; }
.feature-card p{ font-size:14px; color:var(--c-body); }
.feature-card .read{ color:var(--c-green-700); font-weight:700; font-size:13.5px; }

.archive-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.archive-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.archive-card-media{ height:130px; display:flex; align-items:center; padding:14px; }
.archive-card-body{ padding:20px; }
.archive-card-body .meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--c-body); margin-bottom:8px; }
.archive-card-body h3{ font-size:17px; margin-bottom:6px; }
.archive-card-body p{ font-size:13.5px; color:var(--c-body); }
.archive-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:12.5px; }
.archive-card-foot .verified{ color:var(--c-body); }
.archive-card-foot a{ color:var(--c-green-700); font-weight:700; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.pagination a, .pagination span{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--c-border); font-size:13px; font-weight:700; color:var(--c-ink); }
.pagination .current{ background:var(--c-green-700); color:#fff; border-color:var(--c-green-700); }

.widget{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:24px; margin-bottom:22px; box-shadow:var(--shadow-card); }
.widget h4{ font-size:16px; }
.widget p{ font-size:13.5px; }
.widget .more{ color:var(--c-green-700); font-weight:700; font-size:13px; }
.widget-dark{ background:var(--c-green-950); color:#dfeee5; }
.widget-dark h4{ color:#fff; }
.widget-dark p{ color:#bcd6c8; }
.widget-dark input{ width:100%; padding:12px 14px; border-radius:10px; border:none; background:rgba(255,255,255,.1); color:#fff; margin-bottom:10px; }
.widget-dark input::placeholder{ color:#9fc1ae; }
.recent-item{ padding:12px 0; border-top:1px solid var(--c-border); }
.recent-item:first-of-type{ border-top:none; padding-top:0; }
.recent-item .cat{ font-size:10.5px; text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:var(--c-gold-600); }
.recent-item h5{ font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--c-ink); margin:4px 0; }
.recent-item time{ font-size:11.5px; color:var(--c-body); }

@media (max-width:1020px){ .archive-layout{ grid-template-columns:1fr; } }
@media (max-width:760px){ .featured-grid, .archive-grid{ grid-template-columns:1fr; } .filter-bar{ flex-direction:column; align-items:stretch; } }

/* =========================================================
   CALCULATOR PAGE
   ========================================================= */
.calc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.calc-card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card); }
.calc-result{ background:var(--c-green-950); border-radius:var(--radius-lg); padding:32px; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.calc-result .figure{ font-family:var(--font-display); font-size:54px; font-weight:700; }
.calc-result .label{ color:#bcd6c8; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.calc-scale{ display:flex; height:10px; border-radius:6px; overflow:hidden; margin-top:18px; }
.calc-scale span{ flex:1; }
.radio-row{ display:flex; gap:10px; }
.radio-row label{ flex:1; text-align:center; padding:11px; border-radius:10px; border:1px solid var(--c-border); font-size:13px; font-weight:600; cursor:pointer; }
.radio-row input{ display:none; }
.radio-row input:checked + label, .radio-row label.is-checked{ background:var(--c-green-700); color:#fff; border-color:var(--c-green-700); }
@media (max-width:860px){ .calc-wrap{ grid-template-columns:1fr; } }

/* misc */
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:10px; top:10px; z-index:9999; background:#fff; padding:10px 16px; border-radius:8px; }

/* =========================================================
   3D TILT CARDS — exact technique from the real Fit4rEver app
   ========================================================= */
.post-card, .archive-card, .feature-card, .team-card, .testimonial-card,
.step-card, .mini-card, .calc-card, .widget, .contact-card, .faq-item{
  transition: transform .4s cubic-bezier(.165,.84,.44,1), box-shadow .4s cubic-bezier(.165,.84,.44,1), border-color .4s ease;
  transform-style: preserve-3d;
}
.post-card:hover, .archive-card:hover, .feature-card:hover, .team-card:hover, .testimonial-card:hover,
.step-card:hover, .mini-card:hover, .calc-card:hover, .widget:hover, .contact-card:hover, .faq-item:hover{
  transform: translateY(-8px) rotateX(3.5deg) rotateY(-1.5deg) scale(1.015);
  box-shadow:
    0 10px 0 0 rgba(15,110,86,.15),
    0 24px 45px -10px rgba(15,110,86,.15),
    0 8px 24px -4px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color: rgba(15,110,86,.15);
}
/* amber variant — used for gold-tinted cards like newsletter/mini-card accents */
.mini-card:nth-child(2):hover{
  box-shadow:
    0 10px 0 0 rgba(186,117,23,.18),
    0 24px 45px -10px rgba(186,117,23,.12),
    0 8px 24px -4px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color: rgba(186,117,23,.15);
}
[data-theme="dark"] .post-card:hover, [data-theme="dark"] .archive-card:hover, [data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .team-card:hover, [data-theme="dark"] .testimonial-card:hover, [data-theme="dark"] .step-card:hover,
[data-theme="dark"] .mini-card:hover, [data-theme="dark"] .calc-card:hover, [data-theme="dark"] .widget:hover,
[data-theme="dark"] .contact-card:hover, [data-theme="dark"] .faq-item:hover{
  background-color:#162c23;
  box-shadow:
    0 10px 0 0 rgba(19,142,91,.15),
    0 24px 45px -10px rgba(19,142,91,.15),
    0 8px 24px -4px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* glass shine sweep on primary CTA surfaces */
.cta-banner{ position:relative; overflow:hidden; }
.cta-banner::before{
  content:""; position:absolute; top:-60%; left:-20%; width:60%; height:220%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(8deg); pointer-events:none;
}

/* topbar pills get a soft glass edge */
.topbar-pill{ backdrop-filter:blur(6px); }

/* category tag — cardio gets its own distinct orange (separate from nutrition's amber) */
.tag.cardio{ background:var(--c-cardio-100); color:var(--c-cardio-700); }