/* ═══════════════════════════════════════
   SHARED DESIGN SYSTEM — Hot Chocolate Island Tours
   Extracted from inline styles for browser caching
   ═══════════════════════════════════════ */

:root {
  --sun: #F9EB2A; --sun-deep: #E6D500; --ocean: #0077B6; --ocean-deep: #005A8C;
  --sky: #00B4D8; --coral: #E63946; --coral-soft: #FF6B6B; --palm: #2D6A4F;
  --palm-light: #40916C; --sand: #FFFCF2; --sand-warm: #FFF5E1; --night: #0B1D26;
  --drift: #264653; --white: #FFFFFF; --glass: rgba(255,255,255,0.08);
  --font-display: 'Syne', sans-serif; --font-body: 'Outfit', sans-serif;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px;
  --shadow-card: 0 8px 30px rgba(11,29,38,0.12);
  --ease-out: cubic-bezier(0.22,1,0.36,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--night); background:var(--sand); overflow-x:hidden; line-height:1.6; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:700; line-height:1.1; }

/* Nav */
.site-nav { position:sticky; top:0; z-index:1000; background:rgba(11,29,38,0.97); backdrop-filter:blur(12px); padding:0.9rem 2.5rem; display:flex; align-items:center; justify-content:space-between; box-shadow:0 4px 30px rgba(0,0,0,0.25); }
.site-nav-logo { display:flex; align-items:center; gap:0.75rem; }
.site-nav-logo img { height:45px; width:auto; }
.site-nav-logo-text { font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff; line-height:1.2; }
.site-nav-logo-text span { color:var(--sun); }
.site-nav-links { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.site-nav-links a { font-weight:500; font-size:0.95rem; color:#fff; transition:color 0.3s; }
.site-nav-links a:hover, .site-nav-links a.active { color:var(--sun); }
.site-nav-cta { background:linear-gradient(135deg,var(--sun),var(--sun-deep)); color:var(--night)!important; font-weight:700!important; padding:0.6rem 1.6rem; border-radius:var(--radius-full); box-shadow:0 4px 15px rgba(249,235,42,0.3); transition:transform 0.3s, box-shadow 0.3s; display:inline-block; }
.site-nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(249,235,42,0.5); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:26px; height:2.5px; background:#fff; border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
.mobile-nav { display:none; position:fixed; inset:0; background:rgba(11,29,38,0.98); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.mobile-nav.active { display:flex; }
.mobile-nav a { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:#fff; }

/* Page Header */
.page-hero { padding:8rem 2rem 4rem; text-align:center; background:linear-gradient(135deg, var(--night) 0%, var(--drift) 100%); color:#fff; position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px; background:var(--sand); clip-path:ellipse(55% 100% at 50% 100%); }
.page-hero h1 { font-size:clamp(2.4rem,5vw,4rem); margin-bottom:1rem; }
.page-hero h1 em { font-style:normal; color:var(--sun); }
.page-hero p { font-size:1.15rem; opacity:0.85; max-width:600px; margin:0 auto; }

/* Footer */
.site-footer { background:var(--night); color:rgba(255,255,255,0.7); padding:4rem 2rem 2rem; }
.site-footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.site-footer-brand img { height:60px; margin-bottom:1rem; }
.site-footer-brand p { font-size:0.95rem; line-height:1.7; max-width:350px; }
.site-footer h5 { font-family:var(--font-display); color:#fff; margin-bottom:1rem; font-size:1rem; }
.site-footer ul { list-style:none; }
.site-footer li { margin-bottom:0.5rem; }
.site-footer a:hover { color:var(--sun); }
.site-footer-bottom { max-width:1200px; margin:2rem auto 0; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; font-size:0.85rem; }

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:25px; right:25px; z-index:900; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:transform 0.3s; }
.whatsapp-float:hover { transform:scale(1.1); }
.whatsapp-float svg { width:32px; height:32px; fill:#fff; }

/* Utility */
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.section-label { font-family:var(--font-display); font-size:0.8rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--sun); margin-bottom:0.5rem; display:inline-block; }
.btn-primary { display:inline-flex; align-items:center; gap:0.5rem; background:var(--sun); color:var(--night); font-family:var(--font-display); font-weight:700; font-size:1rem; padding:1rem 2.2rem; border-radius:var(--radius-full); box-shadow:0 6px 20px rgba(249,235,42,0.3); transition:transform 0.3s, box-shadow 0.3s; border:none; cursor:pointer; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(249,235,42,0.5); }
.btn-ocean { background:var(--ocean); color:#fff; box-shadow:0 6px 20px rgba(0,119,182,0.3); }
.btn-ocean:hover { box-shadow:0 10px 30px rgba(0,119,182,0.5); }

@media (max-width:768px) {
  .site-nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .site-footer-inner { grid-template-columns:1fr; gap:2rem; }
  .site-footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}