/* =============================================
   TACTICAL MANHOOD v3
   ============================================= */

/* Self-hosted fonts (Brave/privacy browsers block CDN fonts) */
@font-face {
  font-family: 'Clash Display';
  src: url('./assets/fonts/clash-display-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('./assets/fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('./assets/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('./assets/fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/satoshi-300.woff2') format('woff2');
  font-weight: 300; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}

:root {
  --font-display: 'Clash Display', 'Impact', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  --text-2xl: clamp(2.2rem, 1.2rem + 3.5vw, 4.5rem);
  --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --c-bg: #0b0b0b;
  --c-surface: #111;
  --c-surface2: #161616;
  --c-border: rgba(255,255,255,0.07);
  --c-text: #e5e3de;
  --c-muted: #8a8984;
  --c-faint: #555;
  --c-primary: #5a7247;
  --c-primary-h: #6b8a54;
  --c-gold: #c8a45e;
  --c-gold-m: rgba(200,164,94,0.12);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --t-fast: 180ms cubic-bezier(0.16,1,0.3,1);
}

/* VISUALLY HIDDEN (honeypot) */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;color:var(--c-text);background:var(--c-bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input{font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}

/* SHARED */
.label{font-size:var(--text-xs);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--sp-4)}
.label--center{text-align:center}
.label--gold{color:var(--c-gold)}
h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.15;margin-bottom:var(--sp-6)}
.text-center{text-align:center}
.lead{font-size:var(--text-lg);color:var(--c-text);font-weight:500;margin-bottom:var(--sp-6)}
.muted-sm{font-size:var(--text-sm);color:var(--c-muted);margin-bottom:var(--sp-4)}
.muted-xs{font-size:var(--text-xs);color:var(--c-faint);margin-top:var(--sp-3)}

.btn{display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.85em 2em;transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast)}
.btn:active{transform:scale(0.97)}
.btn--primary{background:var(--c-primary);color:#fff;border:none}
.btn--primary:hover{background:var(--c-primary-h)}
.btn--ghost{background:transparent;border:1px solid var(--c-border);color:var(--c-text)}
.btn--ghost:hover{border-color:var(--c-primary);color:var(--c-primary)}
.btn--gold{background:var(--c-gold);color:#111;border:none}
.btn--gold:hover{background:#d4b06a}
.btn--sm{padding:0.65em 1.4em}

.badge{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-primary);border:1px solid rgba(90,114,71,0.3);padding:0.3em 0.9em;margin-bottom:var(--sp-4)}
.badge--gold{color:var(--c-gold);border-color:var(--c-gold-m)}

.inline-form{display:flex;gap:var(--sp-3);max-width:440px;margin-bottom:var(--sp-3)}
.inline-form input{flex:1;padding:0.65em 1em;background:rgba(255,255,255,0.04);border:1px solid var(--c-border);color:var(--c-text);font-size:var(--text-sm)}
.inline-form input::placeholder{color:var(--c-faint)}
.inline-form input:focus{outline:none;border-color:var(--c-primary)}
.inline-form .input--gold:focus{border-color:var(--c-gold)}
.form-success{font-size:var(--text-sm);color:var(--c-primary);font-weight:500;padding:0.6em 0;animation:fadeUp 0.4s var(--ease)}
.form-success--gold{color:var(--c-gold)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.check-list{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-8)}
.check-list li{padding-left:var(--sp-6);position:relative;color:var(--c-muted);font-size:var(--text-sm)}
.check-list li::before{content:'';position:absolute;left:0;top:0.6em;width:8px;height:1px;background:var(--c-primary)}

.tag-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-8)}
.tag-row span{font-size:var(--text-xs);font-weight:500;letter-spacing:0.03em;color:var(--c-muted);padding:0.4em 0.9em;border:1px solid var(--c-border)}


/* ==================
   NAV
   ================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,11,11,0.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--c-border)}
.nav__inner{max-width:1200px;margin:0 auto;padding:0 var(--sp-6);display:flex;align-items:center;justify-content:space-between;height:60px}
.nav__brand{display:flex;align-items:center;gap:var(--sp-3)}
.nav__logo{width:36px;height:36px;border-radius:50%;object-fit:cover}
.nav__wordmark{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap}
.nav__right{display:flex;align-items:center;gap:var(--sp-8)}
.nav__links{display:none;gap:var(--sp-6)}
@media(min-width:900px){.nav__links{display:flex}}
.nav__links a{font-size:var(--text-xs);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-muted);transition:color var(--t-fast)}
.nav__links a:hover{color:var(--c-text)}
.nav__cta{display:none;font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.5em 1.2em;background:var(--c-primary);color:#fff;transition:background var(--t-fast)}
@media(min-width:900px){.nav__cta{display:block}}
.nav__cta:hover{background:var(--c-primary-h)}
.nav__hamburger{display:flex;flex-direction:column;gap:5px;padding:8px}
@media(min-width:900px){.nav__hamburger{display:none}}
.nav__hamburger span{display:block;width:22px;height:2px;background:var(--c-text);transition:transform 0.3s var(--ease),opacity 0.3s var(--ease)}
.nav__hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburger.active span:nth-child(2){opacity:0}
.nav__hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:60px;left:0;right:0;bottom:0;z-index:99;background:var(--c-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-6);opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease)}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-muted)}
.mobile-menu a:hover{color:var(--c-text)}


/* ==================
   HERO
   ================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(60px + var(--sp-16)) var(--sp-6) var(--sp-16);overflow:hidden}
.hero__bg{position:absolute;inset:0;background:url('./assets/hero-bg.jpg') center/cover no-repeat;opacity:0.45}
.hero__content{position:relative;max-width:720px;text-align:center}
.hero__eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--sp-6)}
.hero__h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;line-height:1.05;margin-bottom:var(--sp-6)}
.hero__body{font-size:var(--text-base);color:var(--c-muted);margin-bottom:var(--sp-8);max-width:50ch;margin-inline:auto}
.hero__actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap}


/* ==================
   ABOUT — only headshot on the whole page
   ================== */
.about{padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0}
.about__wrap{max-width:1000px;margin:0 auto;padding:0 var(--sp-6);display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}
@media(min-width:768px){.about__wrap{grid-template-columns:280px 1fr;gap:var(--sp-12)}}
.about__photo img{width:100%;max-width:280px;aspect-ratio:1/1;object-fit:cover;object-position:center 20%;border-radius:50%;filter:grayscale(15%)}
.about__text p{color:var(--c-muted);margin-bottom:var(--sp-4)}
.about__text a{color:var(--c-primary);text-decoration:underline;text-decoration-color:rgba(90,114,71,0.3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.about__text a:hover{text-decoration-color:var(--c-primary)}
.about__links{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--c-border)}
.about__links a{font-size:var(--text-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--c-muted);text-decoration:none;transition:color var(--t-fast)}
.about__links a:hover{color:var(--c-primary)}


/* ==================
   DIVIDER IMAGE
   ================== */
.divider-img{width:100%;height:clamp(200px,30vw,360px);overflow:hidden}
.divider-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:0.7}


/* ==================
   PILLARS — text-only, no cards
   ================== */
.pillars{padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0}
.pillars__wrap{max-width:960px;margin:0 auto;padding:0 var(--sp-6)}
.pillars__wrap>h2{margin-bottom:var(--sp-12)}
.pillars__row{display:grid;grid-template-columns:1fr;gap:var(--sp-10)}
@media(min-width:640px){.pillars__row{grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}}
.pillar{}
.pillar__num{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:0.15em;color:var(--c-primary);display:block;margin-bottom:var(--sp-2)}
.pillar h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--sp-3)}
.pillar p{color:var(--c-muted);font-size:var(--text-sm);line-height:1.7}


/* ==================
   COMMUNITY — free FB group funnel
   ================== */
.community{padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0;background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.community__wrap{max-width:600px;margin:0 auto;padding:0 var(--sp-6)}
.community__body{color:var(--c-muted);font-size:var(--text-base);line-height:1.7;margin-bottom:var(--sp-8);max-width:52ch;margin-inline:auto}
.community__cta{text-align:center}
.btn--community{display:inline-flex;align-items:center;gap:var(--sp-3);background:#1877F2;color:#fff;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:0.9em 2.2em;transition:background var(--t-fast),transform var(--t-fast)}
.btn--community:hover{background:#1565c0}
.btn--community:active{transform:scale(0.97)}
.btn__icon{width:18px;height:18px;flex-shrink:0}


/* ==================
   MASTERMIND — brotherhood bg
   ================== */
.mastermind{position:relative;padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0;overflow:hidden}
.mastermind__bg{position:absolute;inset:0;background:url('./assets/brotherhood.jpg') center/cover no-repeat;opacity:0.2}
.mastermind__wrap{position:relative;max-width:640px;margin:0 auto;padding:0 var(--sp-6)}
.mastermind__wrap p{color:var(--c-muted);margin-bottom:var(--sp-4)}


/* ==================
   COACHING — subtle texture bg
   ================== */
.coaching{position:relative;padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0;background:var(--c-surface)}
.coaching__wrap{max-width:640px;margin:0 auto;padding:0 var(--sp-6)}
.coaching__wrap>p{color:var(--c-muted);margin-bottom:var(--sp-4)}


/* ==================
   EVENTS
   ================== */
.events{padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0}
.events__wrap{max-width:560px;margin:0 auto;padding:0 var(--sp-6)}
.events__wrap>p{color:var(--c-muted);margin-bottom:var(--sp-6)}


/* ==================
   STILL CHOOSING US — rings bg
   ================== */
.scu{position:relative;padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0;overflow:hidden;text-align:center}
.scu__bg{position:absolute;inset:0;background:url('./assets/rings.jpg') center/cover no-repeat;opacity:0.15}
.scu__wrap{position:relative;max-width:580px;margin:0 auto;padding:0 var(--sp-6)}
.scu__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--c-gold);margin-bottom:var(--sp-2)}
.scu__sub{font-size:var(--text-base);color:var(--c-muted);margin-bottom:var(--sp-6)}
.scu__rule{width:48px;height:2px;background:var(--c-gold);margin:0 auto var(--sp-6)}
.scu__wrap>p{color:var(--c-muted);margin-bottom:var(--sp-6)}
.scu .inline-form{margin-inline:auto}


/* ==================
   NEWSLETTER
   ================== */
.newsletter{padding:clamp(var(--sp-16),8vw,var(--sp-24)) 0;border-top:1px solid var(--c-border)}
.newsletter__wrap{max-width:520px;margin:0 auto;padding:0 var(--sp-6)}
.newsletter__wrap>p{color:var(--c-muted);margin-bottom:var(--sp-8)}


/* ==================
   FOOTER
   ================== */
.footer{padding:var(--sp-12) 0 var(--sp-8);border-top:1px solid var(--c-border)}
.footer__inner{max-width:1200px;margin:0 auto;padding:0 var(--sp-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
@media(min-width:768px){.footer__inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-6)}}
.footer__brand{grid-column:1/-1}
@media(min-width:768px){.footer__brand{grid-column:auto}}
.footer__logo{border-radius:4px;margin-bottom:var(--sp-3)}
.footer__name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:var(--sp-2)}
.footer__tag{font-size:var(--text-xs);color:var(--c-muted)}
.footer__col h4,.footer__heading{font-size:var(--text-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.footer__col a{display:block;font-size:var(--text-sm);color:var(--c-muted);margin-bottom:var(--sp-2);transition:color var(--t-fast)}
.footer__col a:hover{color:var(--c-text)}
.footer__bottom{max-width:1200px;margin:var(--sp-10) auto 0;padding:var(--sp-6) var(--sp-6) 0;border-top:1px solid var(--c-border)}
.footer__bottom p{font-size:var(--text-xs);color:#888}