/* secureamericafirst.org — Visual mirror AFCU
 * Anti-fingerprint vs alliantfcu.org:
 *  - Inter body / Source Serif Pro display (vs system + Georgia on alliant)
 *  - Navy #062f5a + gold #d4a017 accents (vs green + navy on alliant)
 *  - Sticky-top mega-menu (vs classic top-bar)
 *  - 4-col footer stacked (vs 5-col corporate)
 *  - Numbered list with circle counters + stat-strip + key-facts (vs pull-quote+callout+content-img)
 *  - 2-col Q&A grid FAQ (vs accordion)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+Pro:wght@600;700&display=swap');

:root{
  --navy:#062f5a;
  --navy-deep:#031a36;
  --navy-light:#1b4a7a;
  --gold:#d4a017;
  --gold-dark:#a87c0d;
  --slate:#5a6677;
  --bg:#fbfbfd;
  --surface:#ffffff;
  --line:#e3e7ee;
  --text:#1c2433;
  --text-muted:#5a6677;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

a{color:var(--navy-light);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:'Source Serif Pro','Source Serif 4',Georgia,serif;color:var(--navy-deep);font-weight:700;line-height:1.25;margin:0 0 12px}
h1{font-size:2.4rem;letter-spacing:-0.01em}
h2{font-size:1.55rem;margin-top:32px}
h3{font-size:1.2rem;margin-top:24px}
p{margin:0 0 14px}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ========== STICKY-TOP MEGA-MENU HEADER ========== */
.site-header{position:sticky;top:0;z-index:1000;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.site-header-top{display:flex;align-items:center;justify-content:space-between;padding:14px 0;max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px}
.brand-wordmark{font-family:'Source Serif Pro',serif;font-size:1.45rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-wordmark .brand-mark{display:inline-block;width:32px;height:32px;background:var(--gold);border-radius:4px;position:relative}
.brand-wordmark .brand-mark::after{content:'AF';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy-deep)}
.brand-wordmark:hover{text-decoration:none;color:#fff}

.mega-nav{display:flex;align-items:center;gap:2px}
.mega-nav-item{position:relative;padding:14px 16px;color:#fff;font-weight:600;font-size:.93rem;cursor:pointer;text-transform:none;letter-spacing:0.01em}
.mega-nav-item:hover{background:rgba(255,255,255,0.08);text-decoration:none}
.mega-panel{display:none;position:absolute;top:100%;left:0;background:#fff;color:var(--text);min-width:480px;box-shadow:0 8px 24px rgba(0,0,0,0.18);border-radius:0 0 6px 6px;padding:20px 24px;z-index:1001}
.mega-nav-item:hover .mega-panel{display:block}
.mega-panel h4{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--slate);text-transform:uppercase;letter-spacing:.12em;margin:0 0 8px}
.mega-panel ul{list-style:none;margin:0 0 14px;padding:0}
.mega-panel li{margin:4px 0}
.mega-panel a{display:block;padding:6px 0;color:var(--navy);font-size:.92rem;font-weight:500}
.mega-panel a:hover{color:var(--gold-dark)}
.mega-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.header-cta{display:flex;align-items:center;gap:10px}
.login-btn{background:var(--gold);color:var(--navy-deep);padding:9px 22px;border-radius:4px;font-weight:700;font-size:.92rem;letter-spacing:0.03em;text-transform:uppercase;border:0;cursor:pointer}
.login-btn:hover{background:#e6b837;text-decoration:none;color:var(--navy-deep)}

/* ========== HERO ========== */
.hero{padding:56px 0 48px;background:linear-gradient(180deg,#f6f9fd 0%,var(--bg) 100%)}
.hero-inner{max-width:var(--max);margin:0 auto;padding:0 24px;text-align:center}
.hero-badge{display:inline-block;background:#fff;color:var(--navy);padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;border:1px solid var(--gold);margin-bottom:18px}
.hero h1{font-size:2.8rem;max-width:820px;margin:0 auto 18px}
.hero-tagline{font-size:1.15rem;color:var(--text-muted);max-width:680px;margin:0 auto 28px}
.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-primary{background:var(--navy);color:#fff;padding:14px 32px;border-radius:4px;font-weight:600;font-size:1rem;border:0}
.cta-primary:hover{background:var(--navy-deep);text-decoration:none;color:#fff}
.cta-secondary{background:transparent;border:2px solid var(--navy);color:var(--navy);padding:12px 30px;border-radius:4px;font-weight:600;font-size:1rem}
.cta-secondary:hover{background:var(--navy);color:#fff;text-decoration:none}

/* ========== LEAD-DEF ========== */
.lead-def{font-size:1.08rem;line-height:1.7;color:var(--text);background:#fff;border-left:4px solid var(--gold);padding:18px 24px;border-radius:0 6px 6px 0;margin:24px 0 28px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.lead-def strong{color:var(--navy-deep)}

/* ========== CONTENT ========== */
.content{padding:48px 0}
.content .container{max-width:var(--max)}

/* ========== VARIETY BLOCK 1: NUMBERED LIST WITH CIRCLE COUNTERS ========== */
.num-list{list-style:none;counter-reset:step;padding:0;margin:32px 0}
.num-list li{counter-increment:step;position:relative;padding:18px 18px 18px 72px;margin-bottom:14px;background:#fff;border-radius:6px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.num-list li::before{content:counter(step);position:absolute;left:18px;top:18px;width:40px;height:40px;background:var(--navy);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Source Serif Pro',serif;font-weight:700;font-size:1.15rem}
.num-list li strong{display:block;color:var(--navy-deep);font-size:1.02rem;margin-bottom:4px}

/* ========== VARIETY BLOCK 2: STAT-STRIP ========== */
.stat-strip{background:var(--navy);color:#fff;padding:46px 0;margin:48px 0;border-radius:0;text-align:center}
.stat-strip-grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.stat-strip-item{padding:0 12px}
.stat-strip-num{font-family:'Source Serif Pro',serif;font-size:2.6rem;font-weight:700;color:var(--gold);display:block;line-height:1}
.stat-strip-lbl{font-size:.85rem;font-weight:500;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.06em;margin-top:6px;display:block}

/* ========== VARIETY BLOCK 3: KEY-FACTS GRID (2x2 or 3-col) ========== */
.key-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:32px 0}
.key-fact{background:#fff;padding:22px;border-radius:6px;border-top:3px solid var(--gold);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.key-fact-label{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate);margin-bottom:6px}
.key-fact-value{font-family:'Source Serif Pro',serif;font-size:1.5rem;font-weight:700;color:var(--navy-deep);line-height:1.2;margin-bottom:6px}
.key-fact-meta{font-size:.85rem;color:var(--text-muted);line-height:1.45}

/* ========== COPILOT BLOCK ========== */
.copilot-block{margin:40px 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.copilot-block h2{margin-top:0;color:var(--navy-deep)}
.copilot-block .overview{font-size:1.05rem;color:var(--text);margin-bottom:18px;line-height:1.7}
.copilot-block ul{padding-left:22px}
.copilot-block li{margin-bottom:10px;line-height:1.55}
.copilot-block li strong{color:var(--navy-deep)}

/* ========== PAA BLOCK ========== */
.paa-block{background:#f6f9fd;border-radius:8px;padding:32px;margin:40px 0}
.paa-block h2{margin-top:0;color:var(--navy-deep)}
.paa-block h3{font-size:1.05rem;color:var(--navy);margin-top:18px}
.paa-block h3:first-of-type{margin-top:14px}
.paa-block p{margin:6px 0 0;color:var(--text);font-size:.96rem}

/* ========== FAQ 2-COL GRID (vs accordion on alliant) ========== */
.faq-section{padding:40px 0;background:var(--bg)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.faq-card{background:#fff;border-radius:6px;padding:22px;border-left:3px solid var(--gold);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.faq-card h3{font-size:1.02rem;color:var(--navy-deep);margin:0 0 8px}
.faq-card p{font-size:.93rem;color:var(--text);margin:0;line-height:1.55}

/* ========== PRODUCT CARDS ========== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:30px 0}
.product-card{background:#fff;padding:26px;border-radius:6px;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:box-shadow 0.2s}
.product-card:hover{box-shadow:0 4px 12px rgba(6,47,90,0.10)}
.product-card h3{margin:0 0 10px;font-size:1.18rem;color:var(--navy-deep)}
.product-card p{color:var(--text-muted);font-size:.93rem;margin-bottom:12px}
.product-card a.product-link{font-weight:600;color:var(--navy-light);font-size:.92rem}
.product-card a.product-link::after{content:' →';color:var(--gold-dark)}

/* ========== CONTENT IMAGES + CAPTIONS ========== */
.content-img-block{margin:32px 0;text-align:center}
.content-img-block img{border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.content-img-caption{font-size:.85rem;color:var(--slate);margin-top:8px;font-style:italic}

/* ========== FOOTER 4-COL STACKED ========== */
.site-footer{background:var(--navy-deep);color:#cfd6e3;padding:54px 0 20px;margin-top:60px}
.footer-grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;align-items:start}
.footer-brand-col h3{color:#fff;font-family:'Source Serif Pro',serif;font-size:1.35rem;margin:0 0 12px}
.footer-brand-col p{font-size:.88rem;line-height:1.55;color:#9aa6bb;margin-bottom:12px}
.footer-brand-col .footer-disclaimer{font-size:.78rem;color:#7e8aa0;margin-top:18px;line-height:1.5}
.footer-col h4{color:#fff;font-family:'Inter',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 14px;font-weight:600}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:8px}
.footer-col a{color:#cfd6e3;font-size:.88rem;font-weight:400}
.footer-col a:hover{color:var(--gold);text-decoration:none}
.footer-bottom{max-width:var(--max);margin:38px auto 0;padding:18px 24px 0;border-top:1px solid rgba(255,255,255,0.08);text-align:center;font-size:.8rem;color:#7e8aa0}

/* ========== RESPONSIVE ========== */
@media(max-width:980px){
  .mega-nav{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .faq-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .stat-strip-num{font-size:2rem}
  h1{font-size:1.8rem}
}