@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --sp-forest-dark: #071209;
  --sp-forest: #0F1F12;
  --sp-forest-mid: #192E1D;
  --sp-forest-light: #2A5035;
  --sp-orange: #E8601C;
  --sp-orange-light: #F07A38;
  --sp-sand: #C9A660;
  --sp-cream: #F5ECD6;
  --sp-white: #FFFFFF;
  --sp-fn-d: 'Bebas Neue', sans-serif;
  --sp-fn-h: 'Oswald', sans-serif;
  --sp-fn-u: 'DM Sans', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--sp-forest-dark);color:var(--sp-white);font-family:var(--sp-fn-u)}

/* Page fade */
#page-fade{position:fixed;inset:0;background:#0a1a10;z-index:9999;pointer-events:none;transition:opacity .5s ease .1s}
#page-fade.out{opacity:0}

/* ─── CONTAINER ─── */
.sp-con{max-width:1160px;margin:0 auto;padding:0 24px}

/* ─── NAV ─── */
#sp-nav{position:sticky;top:0;z-index:1000;background:rgba(7,18,9,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);padding:0 24px;height:64px;display:flex;align-items:center}
.sp-nav-in{display:flex;align-items:center;justify-content:space-between;width:100%}
.sp-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.sp-nav-logo-img{width:44px;height:44px;object-fit:contain}
.sp-nav-logo-txt{font-family:var(--sp-fn-h);font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}
.sp-nav-logo-txt span{color:var(--sp-orange)}

/* ─── BUTTONS ─── */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sp-fn-h);font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:4px;transition:all .25s ease;cursor:pointer;padding:13px 28px;font-size:14px}
.sp-btn-orange{background:var(--sp-orange);color:#fff;border:2px solid var(--sp-orange)}
.sp-btn-orange:hover{background:var(--sp-orange-light);border-color:var(--sp-orange-light)}
.sp-btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}
.sp-btn-ghost:hover{background:rgba(255,255,255,.08)}
.sp-btn-sm{padding:9px 18px;font-size:12px}
.sp-btn-lg{padding:16px 36px;font-size:16px}

/* ─── HERO ─── */
#sp-hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden}
.sp-hero-bg{position:absolute;inset:0;background:url('https://islandhikers.com/wp-content/uploads/2026/04/hero-hiker-action-2-Large.jpeg') center/cover no-repeat;transform:scale(1.05);animation:sp-hzoom 20s ease-in-out infinite alternate}
@keyframes sp-hzoom{0%{transform:scale(1.05) translateX(0)}100%{transform:scale(1.12) translateX(-2%)}}
.sp-hero-ov{position:absolute;inset:0;background:linear-gradient(105deg,rgba(7,18,9,.88) 40%,rgba(7,18,9,.45) 100%)}
.sp-hero-c{position:relative;z-index:2;padding:120px 24px 80px}
.sp-hero-text{max-width:680px}
.sp-hero-title{font-family:var(--sp-fn-d);font-size:clamp(52px,9vw,110px);line-height:.9;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:12px 0 20px}
.sp-hero-title span{color:var(--sp-orange)}
.sp-soundbite{font-family:var(--sp-fn-h);font-size:clamp(16px,2.2vw,22px);letter-spacing:2px;text-transform:uppercase;color:rgba(245,236,214,0.75);line-height:1.4}

/* ─── SECTION LABELS / TITLES ─── */
.sp-lbl{font-family:var(--sp-fn-u);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--sp-orange);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sp-lbl::before{content:'';width:28px;height:1px;background:var(--sp-orange)}
.sp-section-label{font-family:var(--sp-fn-u);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--sp-orange);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sp-section-label::before{content:'';width:28px;height:1px;background:var(--sp-orange)}
.sp-section-title{font-family:var(--sp-fn-h);font-size:clamp(32px,4.5vw,52px);font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.05;color:#fff;margin-bottom:20px}
.sp-section-title span{color:var(--sp-orange)}
.sp-section-sub{font-family:var(--sp-fn-u);font-size:17px;color:rgba(245,236,214,0.65);line-height:1.75;max-width:720px}

/* ─── STATS GRID ─── */
.sp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.sp-stat-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:28px 20px;text-align:center}
.sp-stat-num{display:block;font-family:var(--sp-fn-d);font-size:clamp(42px,5vw,62px);color:var(--sp-orange);line-height:1;margin-bottom:10px}
.sp-stat-lbl{font-family:var(--sp-fn-u);font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.55);text-transform:uppercase}

/* ─── WHY GRID ─── */
.sp-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.sp-why-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:32px 28px}
.sp-why-icon{font-size:32px;display:block;margin-bottom:14px}
.sp-why-card h3{font-family:var(--sp-fn-h);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:10px}
.sp-why-card p{font-family:var(--sp-fn-u);font-size:15px;color:rgba(245,236,214,0.6);line-height:1.7}

/* ─── TIERS GRID ─── */
.sp-tiers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.sp-tier-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:32px 28px;display:flex;flex-direction:column;gap:14px;position:relative}
.sp-tier-title{border-color:var(--sp-orange);background:rgba(232,96,28,.07)}
.sp-tier-badge{display:inline-block;font-family:var(--sp-fn-u);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:var(--sp-orange);color:#fff;width:fit-content}
.sp-tier-badge-blue{background:#1575A8}
.sp-tier-badge-gold{background:#C9A660;color:#071209}
.sp-tier-name{font-family:var(--sp-fn-h);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff}
.sp-tier-tagline{font-family:var(--sp-fn-u);font-size:14px;font-style:italic;color:rgba(245,236,214,0.55);margin-top:-6px}
.sp-tier-list{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0}
.sp-tier-list li{font-family:var(--sp-fn-u);font-size:14px;color:rgba(245,236,214,0.7);padding-left:18px;position:relative;line-height:1.5}
.sp-tier-list li::before{content:'→';position:absolute;left:0;color:var(--sp-orange);font-weight:700}
.sp-tier-list em{color:rgba(245,236,214,0.5)}

/* ─── WHATSAPP CTA ─── */
.sp-whatsapp-btn{display:inline-flex;align-items:center;gap:14px;background:#25D366;color:#fff;font-family:var(--sp-fn-h);font-size:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:18px 36px;border-radius:8px;margin-top:32px;transition:all .25s ease}
.sp-whatsapp-btn:hover{background:#1ebe5d;transform:translateY(-2px)}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .sp-stats-grid{grid-template-columns:repeat(2,1fr)}
  .sp-why-grid{grid-template-columns:1fr}
  .sp-tiers-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .sp-stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sp-stat-card{padding:20px 14px}
  #sp-nav .sp-btn-ghost{display:none}
}