/* ============================================= */
/* PageForge Shared CSS — V4 Light Theme         */
/* Single source of truth for all site pages     */
/* ============================================= */

/* ============================================= */
/* RESET + VARIABLES                             */
/* ============================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Brand — V4 Orange */
  --primary:#ea580c;
  --primary-rgb:234,88,12;
  --secondary:#c2410c;
  --secondary-rgb:194,65,12;
  --accent:#fb923c;
  --accent-rgb:251,146,60;
  --cta:#ea580c;
  --cta-rgb:234,88,12;
  --cta-btn:#c2410c; /* WCAG AA compliant on white (4.61:1) */
  --orange:#ea580c;

  /* Surfaces — light mode */
  --bg:#ffffff;
  --bg-alt:#fafaf8;
  --surface:#f5f4f0;
  --surface-light:#ede9e0;
  --border:#e5e7eb;
  --border-hover:#d1d5db;
  --border-warm:#ede9e0;

  /* Ink (dark) — for special sections, footer */
  --ink:#111008;
  --ink-soft:#1a1a14;

  /* Text */
  --text:#374151;
  --text-muted:#6b7280;
  --text-bright:#111008;

  /* Fluid type */
  --hero-h1:clamp(2.75rem, 4vw + 1rem, 5.5rem);
  --section-h2:clamp(2rem, 3vw + 0.5rem, 3.5rem);
  --sub-h3:clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --overline:clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
  --body:clamp(0.9375rem, 0.5vw + 0.5rem, 1.0625rem);

  /* Shadow scale — warm-tinted */
  --shadow-xs:0 1px 3px rgba(234,88,12,0.04),0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:0 2px 8px rgba(234,88,12,0.06),0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:0 4px 16px rgba(234,88,12,0.08),0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(234,88,12,0.12),0 4px 12px rgba(0,0,0,0.1);
  --shadow-hover:0 12px 40px rgba(234,88,12,0.18),0 6px 16px rgba(0,0,0,0.1);
  --shadow-glow:0 4px 20px rgba(234,88,12,0.3),0 0 40px rgba(251,146,60,0.15);

  /* Easing */
  --spring:cubic-bezier(0.16,1,0.3,1);
  --smooth:cubic-bezier(0.4,0,0.2,1);
}

html{background:var(--bg);color:var(--text)}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ============================================= */
/* UTILITIES                                      */
/* ============================================= */
/* Focus styles (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* Skip-to-content */
.skip-link{
  position:absolute;top:-100%;left:16px;
  background:var(--primary);color:#fff;
  padding:12px 24px;border-radius:8px;
  font-size:0.9375rem;font-weight:600;
  z-index:200;
  transition:top 0.2s ease;
}
.skip-link:focus{top:16px}

.container{max-width:1200px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.container{padding:0 24px}}

.gradient-text{
  background:linear-gradient(135deg,var(--orange),#fb923c,#c2410c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* .serif now maps to V4 display font — Bricolage Grotesque */
.serif{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--spring),transform 0.6s var(--spring);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0);will-change:auto}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--spring),transform 0.6s var(--spring);will-change:opacity,transform}
.stagger>*.visible{opacity:1;transform:translateY(0);will-change:auto}

/* ============================================= */
/* BUTTONS                                        */
/* ============================================= */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary);color:#fff;
  padding:14px 32px;border-radius:9999px;
  font-size:1rem;font-weight:600;
  transition:background 0.2s ease,box-shadow 0.3s ease,transform 0.2s ease;
}
.btn-primary:hover{background:var(--cta-btn);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--text-bright);
  padding:14px 32px;border-radius:9999px;
  border:1.5px solid var(--border-warm);
  font-size:1rem;font-weight:500;
  transition:border-color 0.2s ease,color 0.2s ease,background 0.2s ease,transform 0.2s ease;
}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:rgba(234,88,12,0.04);transform:translateY(-2px)}

/* ============================================= */
/* SECTION HEADINGS                               */
/* ============================================= */
.section-header{text-align:center;max-width:640px;margin:0 auto 56px}
.section-overline{
  font-size:var(--overline);text-transform:uppercase;
  letter-spacing:0.08em;font-weight:600;
  color:var(--cta);margin-bottom:16px;
}
.section-title{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:var(--section-h2);font-weight:700;
  color:var(--text-bright);line-height:1.1;
  letter-spacing:-0.03em;text-wrap:balance;
  margin-bottom:16px;
}
.section-subtitle{font-size:var(--body);color:var(--text-muted);line-height:1.65}

/* ============================================= */
/* NAVIGATION                                     */
/* ============================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 48px;
  transition:background 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--border-warm);
  box-shadow:0 1px 16px rgba(0,0,0,0.05);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:1.125rem;
  display:flex;align-items:center;gap:0;
  text-decoration:none;
}
.nav-logo .logo-page{
  font-weight:500;color:var(--text-bright);
  letter-spacing:-0.04em;
}
.nav-logo .logo-forge{
  font-weight:800;color:var(--orange);
  letter-spacing:-0.05em;
}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{
  font-size:0.9375rem;color:var(--text-muted);
  transition:color 0.2s ease;font-weight:500;
}
.nav-links a:hover{color:var(--text-bright)}
.nav-links a.nav-current{color:var(--text-bright)}
.nav-cta{
  background:var(--primary);color:#fff;
  padding:10px 24px;border-radius:9999px;
  font-size:0.9375rem;font-weight:600;
  transition:background 0.2s ease,box-shadow 0.3s ease,transform 0.2s ease;
}
.nav-cta:hover{background:var(--cta-btn);box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.nav-hamburger span{width:22px;height:2px;background:var(--text-bright);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}

/* Mobile menu */
.mobile-menu{
  display:none;position:fixed;top:0;right:-100%;width:280px;height:100vh;
  background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:101;padding:80px 32px 32px;
  transition:right 0.4s var(--spring);
  border-left:1px solid var(--border-warm);
}
.mobile-menu.open{right:0}
.mobile-menu a{
  display:block;padding:16px 0;font-size:1.125rem;color:var(--text);
  border-bottom:1px solid var(--border-warm);font-weight:500;
}
.mobile-menu .nav-cta{display:block;text-align:center;margin-top:24px;padding:14px 24px;border-bottom:none}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.2);z-index:100}
.mobile-overlay.open{display:block}

@media(max-width:768px){
  .nav{padding:14px 24px}
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .mobile-menu{display:block}
}

/* ============================================= */
/* CTA SECTION — Orange bleed                    */
/* ============================================= */
.cta-section{
  padding:96px 48px;
  text-align:center;
  position:relative;
  background:var(--orange);
}
.cta-section .section-overline{color:rgba(255,255,255,0.6)}
.cta-section .section-title{color:#fff}
.cta-section .section-subtitle{margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,0.75)}
.cta-section .btn-primary{background:#fff;color:var(--orange)}
.cta-section .btn-primary:hover{background:#fafaf8;box-shadow:0 8px 32px rgba(0,0,0,0.12);transform:translateY(-2px)}
.cta-friction{
  font-size:0.8125rem;color:rgba(255,255,255,0.6);
  text-align:center;margin-top:16px;
}
@media(max-width:768px){
  .cta-section{padding:64px 24px}
}

/* ============================================= */
/* FOOTER — Always ink dark                      */
/* ============================================= */
.footer{
  padding:64px 48px 32px;
  background:var(--ink);
  border-top:none;
}
.footer-grid{
  display:grid;grid-template-columns:2fr repeat(3,1fr);
  gap:48px;max-width:1200px;margin:0 auto;
}
.footer-brand{max-width:280px}
.footer-brand .nav-logo{margin-bottom:16px}
.footer-brand .nav-logo .logo-page{color:rgba(255,255,255,0.55)}
.footer-brand p{font-size:0.875rem;color:rgba(255,255,255,0.4);line-height:1.6}
.footer-col h3{
  font-size:0.8125rem;font-weight:600;color:rgba(255,255,255,0.85);
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:16px;
}
.footer-col a{
  display:block;font-size:0.875rem;color:rgba(255,255,255,0.4);
  padding:4px 0;transition:color 0.2s ease;
}
.footer-col a:hover{color:#fff}
.footer-bottom{
  max-width:1200px;margin:48px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.8125rem;color:rgba(255,255,255,0.3);
}
.footer-bottom-links{display:flex;gap:24px}
.footer-bottom-links a{color:rgba(255,255,255,0.3);transition:color 0.2s ease}
.footer-bottom-links a:hover{color:#fff}
@media(max-width:768px){
  .footer{padding:48px 24px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:span 2}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}

/* ============================================= */
/* FAQ                                            */
/* ============================================= */
.faq{padding:96px 48px;background:var(--bg-alt)}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color 0.3s ease,box-shadow 0.3s ease;
}
.faq-item.open{border-color:var(--border-hover);box-shadow:var(--shadow-xs)}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;cursor:pointer;
  font-size:1rem;font-weight:500;color:var(--text-bright);
  background:var(--surface);
  transition:background 0.2s ease;
}
.faq-question:hover{background:var(--surface-light)}
.faq-icon{
  width:24px;height:24px;flex-shrink:0;
  stroke:var(--text-muted);fill:none;stroke-width:1.5;
  transition:transform 0.3s var(--spring);
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.faq-answer-inner{
  padding:0 24px 20px;
  font-size:0.9375rem;color:var(--text-muted);line-height:1.7;
}
@media(max-width:768px){.faq{padding:64px 24px}}

/* ============================================= */
/* KEYFRAMES                                      */
/* ============================================= */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================= */
/* REDUCED MOTION                                 */
/* ============================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .stagger>*{opacity:1;transform:none}
}