@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* ── Backgrounds ── */
  --pitch:        #161310;
  --pitch-2:      #221E1A;
  --pitch-3:      #2E2822;

  /* ── Neutrals ── */
  --stone:        #8A8378;
  --stone-light:  #C0B8B0;
  --parchment:    #F0E9DC;
  --parchment-dark: #E0D8C8;

  /* ── Primary accent ── */
  --horizon:      #60C4E0;
  --horizon-dim:  rgba(96,196,224,0.12);

  /* ── Semantic accents ── */
  --ember:        #E8703C;
  --ember-dim:    rgba(232,112,60,0.12);
  --teal:         #00B8A0;
  --teal-dim:     rgba(0,184,160,0.12);
  --headlamp:     #F0A020;
  --headlamp-dim: rgba(240,160,32,0.12);

  /* ── State ── */
  --error:        #ff5f5f;

  /* ── Borders ── */
  --border-subtle: rgba(138,131,120,0.15);
  --border-medium: rgba(138,131,120,0.25);

  /* ── Layout ── */
  --radius: 16px;

  /* ── Typography ── */
  --syne: 'Syne', sans-serif;
  --fig:  'Figtree', sans-serif;

  /* ── Legacy aliases (maps old var names → new brand tokens) ── */
  --lime:           var(--horizon);
  --lime-dark:      var(--horizon);
  --black:          var(--pitch);
  --dark:           var(--pitch-2);
  --card:           var(--pitch-2);
  --card-2:         var(--pitch-2);
  --card-border:    var(--border-subtle);
  --border:         var(--border-subtle);
  --border-2:       var(--border-medium);
  --muted:          var(--stone);
  --text:           var(--parchment);
  --text-secondary: var(--stone-light);
  --text-2:         var(--stone-light);
  --text-3:         var(--stone);
  --font-display:   var(--syne);
  --font-body:      var(--fig);
}

/* ── SITE FOOTER ── */
.site-footer{background:var(--pitch);border-top:1px solid var(--border-subtle);padding:60px 32px 32px;font-family:var(--fig);color:var(--stone-light);position:relative;z-index:10}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.footer-brand .footer-logo{font-family:var(--syne);font-weight:800;font-size:28px;color:var(--parchment);text-decoration:none;display:inline-block;margin-bottom:12px}
.footer-brand .footer-logo span{color:var(--horizon)}
.footer-brand p{font-size:13px;line-height:1.6;color:var(--stone);max-width:260px;margin-bottom:20px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:34px;height:34px;border-radius:8px;border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--stone);transition:all .2s;text-decoration:none}
.footer-social a:hover{color:var(--parchment);border-color:var(--stone)}
.footer-col h4{font-family:var(--syne);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--parchment);margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--stone);font-size:13px;text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--parchment)}
.footer-bottom{max-width:1100px;margin:40px auto 0;padding-top:24px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:var(--stone);margin:0}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:12px;color:var(--stone);text-decoration:none;transition:color .2s}
.footer-bottom-links a:hover{color:var(--parchment)}
@media(max-width:767px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-brand{grid-column:1/-1}
  .site-footer{padding:40px 16px 24px}
}
@media(max-width:480px){
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}