/* ══ DESIGN TOKENS ══════════════════════════ */
:root {
  --bg: #050505; --bg2: #0A0A0B; --bg3: #111113; --bg4: #1A1A1C;
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.04);
  --text: #F5F0EB; --muted: rgba(245,240,235,0.50); --faint: rgba(245,240,235,0.20);
  --blue: #F04E23; --blue2: #FF6B3D; --purple: #C43B17;
  --grad: linear-gradient(135deg,#F04E23 0%,#C43B17 100%);
  --glass: rgba(255,255,255,0.025); --glass-b: rgba(255,255,255,0.06);
  --shadow: 0 2px 40px rgba(0,0,0,.55);
  --r: 12px; --r2: 20px; --nav-h: 68px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg: #FBF8F5; --bg2: #F3EDE7; --bg3: #EAE2DA; --bg4: #DED4CA;
  --border: rgba(26,18,12,0.08); --border2: rgba(26,18,12,0.04);
  --text: #1A1210; --muted: rgba(26,18,16,0.55); --faint: rgba(26,18,16,0.22);
  --glass: rgba(255,255,255,0.6); --glass-b: rgba(26,18,12,0.08);
  --shadow: 0 2px 40px rgba(26,18,12,.10);
}

/* ══ RESET ═══════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif; font-weight:400; line-height:1.6; overflow-x:hidden; transition:background var(--transition),color var(--transition); }
a { color:inherit; text-decoration:none }
img,svg { display:block; max-width:100% }
ul { list-style:none }
button { border:none; background:none; cursor:pointer; font:inherit; color:inherit }

/* ══ NAV ═════════════════════════════════════ */
#nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; transition:all var(--transition); }
#nav.scrolled { background:rgba(5,5,5,.88); backdrop-filter:blur(24px); border-bottom:1px solid var(--border2); }
[data-theme="light"] #nav.scrolled { background:rgba(251,248,245,.88); }
.nav-inner { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.logo-mark { display:flex; align-items:center; width:90px; height:auto; flex-shrink:0; }
.logo-mark img { width:100%; height:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-links a { padding:.45rem .85rem; border-radius:.5rem; font-size:.875rem; font-weight:500; color:var(--muted); transition:all var(--transition); }
.nav-links a:hover { color:var(--text); background:var(--glass); }
.nav-right { display:flex; align-items:center; gap:.6rem; }
.toggle-btn { width:38px; height:38px; border-radius:.5rem; border:1px solid var(--border); background:var(--glass); font-size:.8rem; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.toggle-btn:hover { color:var(--text); border-color:var(--border); background:var(--glass-b); }

/* ══ BUTTONS ═════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.5rem; border-radius:100px; font-size:.9rem; font-weight:600; transition:all var(--transition); position:relative; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 0 24px rgba(240,78,35,.25); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 36px rgba(240,78,35,.4); }
.btn-ghost { background:transparent; border:1px solid var(--glass-b); color:var(--text); overflow:hidden; }
.btn-ghost::before { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--grad); opacity:0; transition:opacity .3s ease; }
.btn-ghost span { position:relative; z-index:1; }
.btn-ghost:hover { border-color:rgba(240,78,35,.3); color:#fff; }
.btn-ghost:hover::before { opacity:.15; }
[data-theme="light"] .btn-ghost:hover { color:var(--text); }
.btn-lg { padding:.9rem 2.2rem; font-size:.95rem; }

/* ══ UTILITIES ═══════════════════════════════ */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.h2 { font-family:'Outfit',sans-serif; font-size:clamp(1.6rem,3vw,2.8rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.label { font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue2); }

/* ══ FOOTER ══════════════════════════════════ */
#footer { background:var(--bg2); border-top:1px solid var(--border); padding:0 0 2rem; position:relative; }
#footer::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.02; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand p { color:var(--muted); font-size:.9rem; line-height:1.7; max-width:260px; margin-bottom:1.5rem; }
.social-row { display:flex; gap:.6rem; }
.social-btn { width:36px; height:36px; border-radius:.5rem; border:1px solid var(--border); background:var(--glass); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all var(--transition); }
.social-btn:hover { color:var(--text); border-color:var(--blue2); background:rgba(240,78,35,.08); }
.footer-col .footer-col-title { font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul a { font-size:.9rem; color:var(--muted); transition:color var(--transition); }
.footer-col ul a:hover { color:var(--text); }
.footer-col ul a.footer-current { color:var(--blue2); font-weight:600; }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:.82rem; color:var(--faint); }
.footer-sig { font-size:.82rem; color:var(--faint); font-family:'Outfit',sans-serif; letter-spacing:.04em; }

/* ══ FOOTER CTA ══════════════════════════════ */
.footer-cta { padding:4rem 0; text-align:center; position:relative; overflow:hidden; }
.footer-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(240,78,35,.06) 0%,transparent 70%); pointer-events:none; }
.footer-cta-inner { position:relative; z-index:1; }
.footer-cta .label { margin-bottom:.75rem; }
.footer-cta .h2 { margin-bottom:.75rem; }
.footer-cta p { color:var(--muted); font-size:1rem; max-width:480px; margin:0 auto 2rem; line-height:1.7; }
.footer-cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.footer-divider { width:100%; height:1px; background:linear-gradient(90deg,transparent 5%,var(--border) 30%,var(--border) 70%,transparent 95%); }
.footer-main { padding:4rem 0 0; }

/* ══ SECTION BACKGROUND ═════════════════════ */
.sec-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sec-bg img { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.sec-bg.revealed img { opacity:1; }
.sec-bg::after { content:''; position:absolute; inset:0; z-index:1; }
.footer-cta .sec-bg img { opacity:0; filter:saturate(.25) brightness(.3); }
.footer-cta .sec-bg.revealed img { opacity:.26; }
.footer-cta .sec-bg::after { background:radial-gradient(ellipse at center,transparent 40%,var(--bg) 85%); }
[data-theme="light"] .footer-cta .sec-bg img { filter:saturate(.35) brightness(.9) !important; }
[data-theme="light"] .footer-cta .sec-bg.revealed img { opacity:.14; }

/* ══ RESPONSIVE ══════════════════════════════ */
@media(max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .nav-links { display:none; }
  .footer-brand { grid-column:1/-1; }
  .footer-cta { padding:3rem 0; }
}
@media(max-width:600px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:.75rem; text-align:center; }
  .footer-cta { padding:2.5rem 0; }
  .footer-cta .h2 { font-size:clamp(1.3rem,5vw,1.8rem); }
  .footer-cta p { font-size:.9rem; }
  .footer-main { padding:2.5rem 0 0; }
  .footer-cta-actions { flex-direction:column; align-items:stretch; }
  .footer-cta-actions .btn { justify-content:center; }
  .btn-lg { padding:.75rem 1.5rem; font-size:.9rem; }
}
