/* ============================================
   CABO YACHT RENTAL
   Ultra-Luxury Dark Palette
   Inspired by: Aman Resorts, Rolls-Royce, VIP Lounges
   ============================================ */

/* ============================================
   DESIGN TOKENS — DARK LUXURY
   ============================================ */
:root {
  /* Backgrounds — rich darkness, no white */
  --bg: #0a0a0a;
  --bg-elevated: #111111;
  --bg-card: #161616;
  --bg-card-hover: #1a1a1a;
  --bg-subtle: #0d0d0d;
  --bg-header: rgba(10,10,10,0.92);

  /* Accent — champagne gold */
  --gold: #c9a96e;
  --gold-light: #dbc08a;
  --gold-dim: rgba(201,169,110,0.12);
  --gold-border: rgba(201,169,110,0.18);
  --gold-glow: rgba(201,169,110,0.15);

  /* Bronze / warm metallic */
  --bronze: #8b7355;
  --bronze-light: #a68b6b;

  /* Text — warm cream on dark */
  --text: #f0ede8;
  --text-secondary: #9e978d;
  --text-muted: #6b655d;
  --text-dim: #4a4540;

  /* Borders — subtle warmth */
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(201,169,110,0.25);
  --border-gold: rgba(201,169,110,0.2);

  /* Shadows — depth without blue */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 30px rgba(201,169,110,0.1);
  --shadow-gold-lg: 0 0 50px rgba(201,169,110,0.18);

  /* Radii */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 100px;

  /* Transitions */
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);
  --duration: 0.35s;

  /* Layout */
  --header-height: 86px;
  --container: 1280px;

  /* Fonts */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.65; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:var(--duration) var(--ease); }
ul { list-style:none; }
button { font-family:var(--font-body); cursor:pointer; background:none; border:none; }

/* ============================================
   TYPOGRAPHY — warm cream on dark
   ============================================ */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:500; line-height:1.2; color:var(--text); letter-spacing:-0.01em; }
h1 { font-size:clamp(2.2rem,5.5vw,4rem); }
h2 { font-size:clamp(1.7rem,4vw,2.6rem); }
h3 { font-size:clamp(1.15rem,2.5vw,1.4rem); }
h4 { font-size:1.05rem; font-family:var(--font-body); font-weight:600; }
p { color:var(--text-secondary); line-height:1.75; font-size:0.95rem; }

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

/* ============================================
   TOP BAR — dark, minimal
   ============================================ */
.top-bar { background:var(--bg-elevated); border-bottom:1px solid var(--border); padding:10px 0; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; }
.top-bar-info { display:flex; gap:24px; align-items:center; }
.top-bar-info a { color:var(--text-muted); font-size:0.78rem; font-weight:500; display:flex; align-items:center; gap:6px; letter-spacing:0.02em; transition:var(--duration) var(--ease); }
.top-bar-info a:hover { color:var(--gold); }
.top-bar-info i { color:var(--gold); font-size:0.75rem; }
.top-bar-social { display:flex; gap:14px; }
.top-bar-social a { color:var(--text-muted); font-size:0.85rem; transition:var(--duration) var(--ease); }
.top-bar-social a:hover { color:var(--gold); transform:translateY(-2px); }
@media(max-width:768px){ .top-bar .container { flex-direction:column; gap:5px; } .top-bar-info { gap:12px; flex-wrap:wrap; justify-content:center; } }

/* ============================================
   HEADER — dark glass
   ============================================ */
header { position:sticky; top:0; z-index:1000; background:var(--bg-header); backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px) saturate(1.2); border-bottom:1px solid transparent; transition:var(--duration) var(--ease); }
header.scrolled { border-bottom-color:var(--border); }
nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo img { height:70px; width:auto; display:block; }

/* Nav */
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { font-size:0.84rem; font-weight:500; color:var(--text-secondary); padding:8px 14px; border-radius:var(--radius-sm); position:relative; letter-spacing:0.01em; transition:var(--duration) var(--ease); }
.nav-links a::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%) scaleX(0); width:16px; height:1.5px; background:var(--gold); border-radius:1px; transition:transform var(--duration) var(--ease); }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform:translateX(-50%) scaleX(1); }

/* Nav CTA */
.nav-cta { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--gold),var(--bronze)); color:#0a0a0a; font-weight:600; font-size:0.8rem; padding:10px 22px; border-radius:var(--radius-pill); transition:var(--duration) var(--ease); box-shadow:var(--shadow-gold); }
.nav-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold-lg); }

/* Mobile */
.mobile-menu-btn { display:none; background:none; border:none; font-size:1.3rem; color:var(--text); cursor:pointer; padding:8px; z-index:1001; }
@media(max-width:1024px){ .nav-links { position:fixed; top:0; right:-100%; width:min(320px,85vw); height:100vh; background:var(--bg-elevated); flex-direction:column; padding:calc(var(--header-height) + 24px) 28px 28px; gap:2px; transition:right 0.4s var(--ease-smooth); box-shadow:var(--shadow-xl); z-index:999; } .nav-links.mobile-open { right:0; } .nav-links a { padding:14px 16px; width:100%; font-size:0.95rem; } .nav-links a:hover { background:var(--bg-card); } .mobile-menu-btn { display:block; } .nav-cta { display:none; } }
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); opacity:0; visibility:hidden; transition:var(--duration) var(--ease); z-index:998; }
.mobile-overlay.active { opacity:1; visibility:visible; }

/* ============================================
   HERO — cinematic dark
   ============================================ */
.hero { position:relative; height:100vh; min-height:600px; max-height:900px; overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background-size:cover; background-position:center; }
.hero-slide.active { opacity:1; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%); }
.hero-content { position:absolute; bottom:0; left:0; right:0; padding:clamp(2rem,8vh,5rem) clamp(1.25rem,4vw,3rem); max-width:var(--container); margin:0 auto; z-index:2; animation:heroFadeUp 1s ease 0.3s both; }
@keyframes heroFadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.hero-subtitle { font-family:var(--font-body); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--gold); margin-bottom:16px; }
.hero h1 { color:var(--text); font-size:clamp(2.2rem,5.5vw,4.2rem); margin-bottom:10px; }
.hero h2 { color:var(--text-secondary); font-size:clamp(1.2rem,2.8vw,1.7rem); font-weight:400; margin-bottom:24px; font-family:var(--font-body); }
.hero p { color:var(--text-muted); max-width:520px; font-size:1rem; line-height:1.7; margin-bottom:36px; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }

.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.06); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); color:var(--text); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.85rem; transition:var(--duration) var(--ease); z-index:10; }
.hero-arrow:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); }
.hero-prev { left:24px; } .hero-next { right:24px; }
.hero-dots { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }
.hero-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); border:none; cursor:pointer; transition:var(--duration) var(--ease); }
.hero-dot.active { background:var(--gold); width:28px; border-radius:4px; }
@media(max-width:768px){ .hero { min-height:500px; } .hero-arrow { width:38px; height:38px; } .hero-prev{left:12px} .hero-next{right:12px} }

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--gold),var(--bronze)); color:#0a0a0a; font-family:var(--font-body); font-weight:600; font-size:0.85rem; padding:14px 30px; border-radius:var(--radius-pill); border:none; cursor:pointer; transition:var(--duration) var(--ease); box-shadow:var(--shadow-gold); letter-spacing:0.01em; white-space:nowrap; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold-lg); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:transparent; color:var(--text); font-weight:500; font-size:0.85rem; padding:13px 28px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.15); transition:var(--duration) var(--ease); }
.btn-secondary:hover { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.3); }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--text-secondary); font-weight:600; font-size:0.82rem; padding:11px 22px; border-radius:var(--radius-pill); border:1px solid var(--border); transition:var(--duration) var(--ease); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

/* ============================================
   SECTIONS — all dark
   ============================================ */
.section { padding:clamp(50px,6vw,85px) 0; }
.section-header { text-align:center; max-width:680px; margin:0 auto clamp(32px,4vw,48px); }
.section-subtitle { font-family:var(--font-body); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.22em; color:var(--gold); margin-bottom:16px; display:block; }
.section-header h2 { margin-bottom:18px; }
.section-header p { color:var(--text-muted); font-size:1rem; }

/* Background variations — ALL dark */
.bg-elevated { background:var(--bg-elevated); }
.bg-card { background:var(--bg-card); }
.bg-gradient-warm { background:linear-gradient(180deg,var(--bg) 0%,var(--bg-elevated) 100%); }
.bg-gradient-gold { background:linear-gradient(135deg,#0f0d0a 0%,#1a1610 50%,#0f0d0a 100%); }
.bg-warm-dark { background:linear-gradient(180deg,var(--bg-elevated) 0%,#0f0c08 100%); }

/* Intro */
.intro-section { padding:clamp(45px,6vw,70px) clamp(1.25rem,4vw,3rem); max-width:760px; margin:0 auto; text-align:center; }
.intro-section h2 { margin-bottom:24px; }

/* ============================================
   YACHT CARDS — dark luxury
   ============================================ */
.fleet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:24px; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.yacht-card { background:var(--bg-card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); transition:all var(--duration) var(--ease); border:1px solid var(--border); position:relative; opacity:1; transform:translateY(0); }
.yacht-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none; z-index:10; border:1px solid transparent; transition:all var(--duration) var(--ease); }
.yacht-card:hover::before { border-color:var(--gold-border); box-shadow:inset 0 0 0 1px var(--gold-border), var(--shadow-gold); }
.yacht-card.fade-in { opacity:1; transform:translateY(0); transition:opacity 0.6s ease,transform 0.6s ease; }
.yacht-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--border-hover); }
.yacht-image { position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; }
.yacht-image img,.card-slide { width:100%; height:100%; object-fit:cover; transition:transform var(--duration) var(--ease); }
.yacht-card:hover .yacht-image img,.yacht-card:hover .card-slide.active { transform:scale(1.05); }
.card-slider { position:relative; width:100%; height:100%; }
.card-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.5s ease; }
.card-slide.active { opacity:1; }
.card-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); border:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.75rem; color:var(--text); opacity:0; transition:var(--duration) var(--ease); z-index:5; }
.yacht-card:hover .card-arrow { opacity:1; }
.card-prev { left:10px; } .card-next { right:10px; }
.yacht-price { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,var(--gold),var(--bronze)); color:#0a0a0a; font-weight:700; font-size:0.78rem; padding:7px 14px; border-radius:var(--radius-pill); z-index:5; box-shadow:var(--shadow-sm); }
.yacht-type { position:absolute; bottom:14px; left:14px; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); color:var(--text-secondary); font-size:0.72rem; font-weight:500; padding:5px 12px; border-radius:var(--radius-pill); z-index:5; }
.yacht-content { padding:24px; }
.yacht-content h3 { font-size:1.15rem; margin-bottom:12px; color:var(--text); }
.yacht-specs { display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.yacht-specs span { font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.yacht-specs i { color:var(--gold); font-size:0.8rem; }
.yacht-description { font-size:0.85rem; color:var(--text-secondary); line-height:1.65; margin-bottom:16px; }
.amenity-icons { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.amenity-icons i { width:32px; height:32px; background:var(--bg-elevated); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--text-muted); transition:var(--duration) var(--ease); border:1px solid var(--border); }
.amenity-icons i:hover { background:var(--gold-dim); color:var(--gold); border-color:var(--gold-border); }
.yacht-content .btn-primary { width:100%; padding:12px; font-size:0.82rem; }
@media(max-width:768px){ .fleet-grid { grid-template-columns:1fr; gap:24px; } }

/* ============================================
   EXPERIENCE CARDS — dark
   ============================================ */
.experience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.experience-card { text-align:center; padding:36px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); transition:all var(--duration) var(--ease); opacity:1; transform:translateY(0); }
.experience-card.fade-in { opacity:1; transform:translateY(0); }
.experience-card:hover { background:var(--bg-card-hover); border-color:var(--gold-border); box-shadow:var(--shadow-gold); transform:translateY(-4px); }
.experience-icon { width:52px; height:52px; background:linear-gradient(135deg,var(--gold),var(--bronze)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.2rem; color:#0a0a0a; }
.experience-card h3 { color:var(--text); font-size:1.05rem; margin-bottom:8px; font-family:var(--font-body); font-weight:600; }
.experience-card p { color:var(--text-muted); font-size:0.85rem; line-height:1.65; }

/* ============================================
   REVIEW CARDS — dark luxury
   ============================================ */
.review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; }
.review-card { background:var(--bg-card); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:all var(--duration) var(--ease); position:relative; overflow:hidden; }
.review-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity var(--duration) var(--ease); }
.review-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--border-hover); }
.review-card:hover::after { opacity:1; }
.review-badge { width:44px; height:44px; background:var(--gold-dim); border:1px solid var(--gold-border); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1rem; color:var(--gold); }
.review-stars { color:#d4a843; font-size:0.78rem; margin-bottom:14px; letter-spacing:2px; }
.review-text { color:var(--text-secondary); font-size:0.88rem; line-height:1.75; margin-bottom:18px; font-style:italic; }
.review-author { font-weight:600; font-size:0.9rem; color:var(--text); margin-bottom:2px; }
.review-location { font-size:0.78rem; color:var(--text-muted); }
.review-event { font-size:0.7rem; color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; }

/* Rating bar */
.rating-bar { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:32px; }
.rating-bar .score { font-family:var(--font-display); font-size:2.2rem; font-weight:600; color:var(--text); }
.rating-bar .stars { color:var(--gold); font-size:1.1rem; letter-spacing:3px; }
.rating-bar .count { color:var(--text-muted); font-size:0.88rem; }
.rating-bar .divider { width:1px; height:20px; background:var(--border); }

/* ============================================
   PAGE HERO
   ============================================ */
.page-hero { position:relative; height:55vh; min-height:380px; max-height:520px; background-size:cover; background-position:center; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); }
.page-hero-content { position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem) clamp(40px,5vh,60px); width:100%; }
.page-hero-content .hero-subtitle { margin-bottom:10px; }
.page-hero-content h1 { color:var(--text); font-size:clamp(1.8rem,4.5vw,3rem); }

/* ============================================
   DESTINATION CARDS
   ============================================ */
.destinations-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.destination-card { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; cursor:pointer; opacity:1; transform:translateY(0); transition:all var(--duration) var(--ease); border:1px solid var(--border); }
.destination-card.fade-in { opacity:1; transform:translateY(0); transition:opacity 0.6s ease,transform 0.6s ease; }
.destination-card.large { grid-column:span 2; aspect-ratio:16/7; }
.destination-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border-hover); }
.destination-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.destination-card:hover img { transform:scale(1.08); }
.destination-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.35) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,3vw,32px); transition:var(--duration) var(--ease); }
.destination-card:hover .destination-overlay { background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.45) 70%,rgba(0,0,0,0.1) 100%); }
.destination-overlay h3 { color:var(--text); font-size:1.3rem; margin-bottom:10px; }
.destination-overlay p { color:var(--text-muted); font-size:0.85rem; line-height:1.6; margin-bottom:16px; max-width:480px; }
@media(max-width:1024px){ .destinations-grid { grid-template-columns:repeat(2,1fr); } .destination-card.large { grid-column:span 2; } }
@media(max-width:640px){ .destinations-grid { grid-template-columns:1fr; } .destination-card.large { grid-column:span 1; aspect-ratio:4/3; } }

/* ============================================
   SERVICE ITEMS
   ============================================ */
.services-list { display:flex; flex-direction:column; gap:44px; }
.service-item { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; opacity:1; transform:translateY(0); transition:all var(--duration) var(--ease); }
.service-item.fade-in { opacity:1; transform:translateY(0); }
.service-item:nth-child(even) { direction:rtl; }
.service-item:nth-child(even) > * { direction:ltr; }
.service-image { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow-md); border:1px solid rgba(201,169,110,0.28); transition:all var(--duration) var(--ease); }
.service-item:hover .service-image { border-color:rgba(201,169,110,0.65); box-shadow:var(--shadow-gold); }
.service-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration) var(--ease); }
.service-item:hover .service-image img { transform:scale(1.04); }
.service-icon { position:absolute; bottom:18px; right:24px; width:56px; height:56px; background:linear-gradient(135deg,var(--gold),var(--bronze)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#0a0a0a; box-shadow:var(--shadow-gold); }
.service-content h3 { margin-bottom:14px; font-size:1.4rem; color:var(--text); }
.service-content p { margin-bottom:20px; font-size:0.92rem; line-height:1.75; color:var(--text-secondary); }
@media(max-width:768px){ .service-item { grid-template-columns:1fr; gap:28px; } .service-item:nth-child(even) { direction:ltr; } }

/* ============================================
   NAVIGATION CARDS
   ============================================ */
.nav-cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.nav-card { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; cursor:pointer; box-shadow:var(--shadow-md); transition:all var(--duration) var(--ease); border:1px solid var(--border); }
.nav-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); border-color:var(--gold-border); }
.nav-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.nav-card:hover img { transform:scale(1.1); }
.nav-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.4) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; z-index:2; }
.nav-card-overlay h4 { color:var(--text); font-size:1.1rem; margin-bottom:6px; }
.nav-card-overlay p { color:var(--text-muted); font-size:0.75rem; margin-bottom:14px; line-height:1.5; }
@media(max-width:1024px){ .nav-cards-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .nav-cards-grid { grid-template-columns:1fr; } .nav-card { aspect-ratio:16/9; } }

/* ============================================
   VIDEO SECTION
   ============================================ */
.video-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; }
.video-container { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.video-container iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.video-content h2 { margin-bottom:16px; color:var(--text); }
.video-content p { margin-bottom:14px; font-size:0.95rem; line-height:1.75; color:var(--text-secondary); }
@media(max-width:768px){ .video-grid { grid-template-columns:1fr; gap:28px; } }

/* ============================================
   CLOSING CTA — dark bronze gradient
   ============================================ */
.closing-section { background:linear-gradient(135deg,#0f0c08 0%,#1a1410 50%,#0f0c08 100%); padding:clamp(50px,6vw,85px) clamp(1.25rem,4vw,3rem); text-align:center; border-top:1px solid var(--gold-border); border-bottom:1px solid var(--gold-border); position:relative; }
.closing-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0.3; }
.closing-section .container { max-width:760px; margin:0 auto; }
.closing-section h2 { color:var(--text); margin-bottom:20px; font-size:clamp(1.6rem,4vw,2.4rem); }
.closing-section p { color:var(--text-secondary); margin-bottom:16px; font-size:1rem; line-height:1.75; }
.closing-section a { color:var(--gold); font-weight:600; border-bottom:1px solid transparent; }
.closing-section a:hover { border-bottom-color:var(--gold); }

/* ============================================
   FAQ — dark
   ============================================ */
.faq-section { max-width:800px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.faq-item { border-bottom:1px solid var(--border); opacity:1; transform:translateY(0); transition:all var(--duration) var(--ease); }
.faq-item.fade-in { opacity:1; transform:translateY(0); transition:opacity 0.5s ease,transform 0.5s ease; }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:24px 0; background:none; border:none; cursor:pointer; text-align:left; gap:16px; }
.faq-question h4 { font-family:var(--font-body); font-weight:600; font-size:0.95rem; color:var(--text); flex:1; }
.faq-icon { width:30px; height:30px; min-width:30px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:var(--text-muted); transition:all var(--duration) var(--ease); }
.faq-item.active .faq-icon { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease,padding 0.4s ease; }
.faq-item.active .faq-answer { max-height:500px; padding-bottom:24px; }
.faq-answer p { color:var(--text-secondary); font-size:0.9rem; line-height:1.7; padding-right:48px; }

/* ============================================
   CONTACT — dark
   ============================================ */
.contact-wrapper { display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:start; }
.contact-form-container { background:var(--bg-card); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-md); border:1px solid var(--border); }
.contact-form-container h3 { margin-bottom:8px; font-size:1.3rem; color:var(--text); }
.contact-form-container > p { color:var(--text-muted); margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:0.78rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.05em; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:0.9rem; color:var(--text); background:var(--bg-elevated); transition:var(--duration) var(--ease); -webkit-appearance:none; appearance:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
.form-group textarea { resize:vertical; min-height:120px; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b655d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.submit-btn { width:100%; padding:16px; font-size:0.95rem; }

/* Success */
.success-message { text-align:center; padding:40px 20px; }
.success-message i { font-size:4rem; color:var(--gold); margin-bottom:20px; }
.success-message h3 { font-size:1.8rem; margin-bottom:12px; color:var(--text); }
.success-message p { color:var(--text-secondary); margin-bottom:28px; }

/* Contact Info */
.contact-info-container { display:flex; flex-direction:column; gap:24px; }
.contact-info-card { background:var(--bg-card); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:var(--duration) var(--ease); }
.contact-info-card:hover { border-color:var(--border-hover); }
.contact-info-card h3 { margin-bottom:24px; font-size:1.15rem; color:var(--text); }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-info-item:last-child { border-bottom:none; }
.contact-icon { width:44px; height:44px; min-width:44px; background:linear-gradient(135deg,var(--gold),var(--bronze)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1rem; color:#0a0a0a; }
.contact-details h4 { font-weight:600; font-size:0.9rem; color:var(--text); margin-bottom:4px; }
.contact-details p { font-size:0.88rem; color:var(--text-secondary); }
.contact-details a { color:var(--text-secondary); font-weight:500; }
.contact-details a:hover { color:var(--gold); }
.map-container { border-radius:var(--radius-sm); overflow:hidden; margin-top:8px; aspect-ratio:16/10; border:1px solid var(--border); }
.map-container iframe { width:100%; height:100%; border:none; }

/* ============================================
   FLOATING BUTTONS
   ============================================ */
.whatsapp-float { position:fixed; bottom:24px; right:24px; width:54px; height:54px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem; box-shadow:0 4px 20px rgba(37,211,102,0.35); z-index:999; transition:var(--duration) var(--ease); animation:whatsappPulse 2s infinite; }
@keyframes whatsappPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.35)} 50%{box-shadow:0 4px 30px rgba(37,211,102,0.5)} }
.whatsapp-float:hover { transform:scale(1.1); }
.phone-float { display:none; position:fixed; bottom:24px; left:24px; width:48px; height:48px; background:var(--gold); border-radius:50%; align-items:center; justify-content:center; color:#0a0a0a; font-size:1.2rem; box-shadow:var(--shadow-md); z-index:999; transition:var(--duration) var(--ease); }
.phone-float:hover { transform:scale(1.1); }
@media(max-width:768px){ .phone-float { display:flex; } .contact-wrapper { grid-template-columns:1fr; } .contact-form-container { padding:28px; } .form-row { grid-template-columns:1fr; } }

/* ============================================
   FOOTER — dark, premium
   ============================================ */
footer { background:var(--bg-elevated); padding:clamp(45px,6vw,70px) 0 0; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:36px; padding-bottom:36px; }
.footer-brand .logo { margin-bottom:20px; display:block; }
.footer-brand p { color:var(--text-muted); font-size:0.88rem; line-height:1.75; max-width:360px; margin-bottom:24px; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px; height:38px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.9rem; transition:var(--duration) var(--ease); }
.footer-social a:hover { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); transform:translateY(-2px); }
.footer-links h4,.footer-contact h4 { color:var(--text); font-family:var(--font-body); font-weight:600; font-size:0.95rem; margin-bottom:20px; letter-spacing:0.02em; }
.footer-links ul { display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:var(--text-muted); font-size:0.85rem; transition:var(--duration) var(--ease); display:inline-flex; }
.footer-links a:hover { color:var(--gold); padding-left:4px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.footer-contact-item i { color:var(--gold); font-size:0.85rem; margin-top:3px; width:18px; }
.footer-contact-item p { color:var(--text-muted); font-size:0.85rem; line-height:1.6; }
.footer-contact-item a { color:var(--text-secondary); }
.footer-contact-item a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border); padding:24px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.footer-bottom p { color:var(--text-dim); font-size:0.78rem; }
@media(max-width:1024px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .footer-grid { grid-template-columns:1fr; gap:36px; } .footer-bottom { flex-direction:column; text-align:center; } }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:10000; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; animation:lightboxFade 0.3s ease forwards; }
@keyframes lightboxFade { to{opacity:1} }
.lightbox-overlay img { max-width:92%; max-height:92%; object-fit:contain; border-radius:var(--radius-sm); }
.lightbox-close { position:absolute; top:24px; right:24px; color:var(--text); font-size:1.6rem; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border-radius:50%; border:1px solid var(--border); transition:var(--duration) var(--ease); }
.lightbox-close:hover { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); }

/* ============================================
   STICKY CTA BAR — mobile
   ============================================ */
.sticky-cta-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:998; background:rgba(10,10,10,0.95); padding:10px 16px; gap:10px; border-top:1px solid var(--border); backdrop-filter:blur(10px); }
.sticky-cta-bar .btn-primary { flex:1; padding:12px; font-size:0.82rem; }
.sticky-cta-bar .btn-whatsapp { background:#25D366; color:white; padding:12px 16px; border-radius:var(--radius-pill); font-size:1.2rem; display:flex; align-items:center; justify-content:center; }
@media(max-width:768px){ .sticky-cta-bar { display:flex; } body { padding-bottom:60px; } }

/* ============================================
   TESTIMONIAL CAROUSEL
   ============================================ */
.review-carousel { position:relative; overflow:hidden; padding:0 48px; max-width:var(--container); margin:0 auto; }
.review-track { display:flex; transition:transform 0.5s var(--ease-smooth); gap:20px; }
.review-carousel .review-card { flex:0 0 calc(33.333% - 14px); min-width:0; }
.review-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border-gold); color:var(--gold); font-size:0.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--duration) var(--ease); z-index:5; }
.review-arrow:hover { background:var(--gold-dim); border-color:var(--gold); }
.review-arrow.prev { left:0; }
.review-arrow.next { right:0; }
.review-arrow:disabled { opacity:0.3; cursor:not-allowed; }
@media(max-width:1024px){ .review-carousel .review-card { flex:0 0 calc(50% - 10px); } }
@media(max-width:640px){ .review-carousel { padding:0 36px; } .review-carousel .review-card { flex:0 0 100%; } .review-arrow { width:36px; height:36px; } }

/* ============================================
   PARTNER CARDS
   ============================================ */
.partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.partner-card { background:#1c1814; border-radius:var(--radius); padding:28px; border:1px solid rgba(201,169,110,0.3); box-shadow:0 2px 16px rgba(0,0,0,0.5); transition:all var(--duration) var(--ease); display:flex; flex-direction:column; gap:10px; }
.partner-card:hover { border-color:rgba(201,169,110,0.7); box-shadow:0 0 30px rgba(201,169,110,0.1); transform:translateY(-4px); background:#222018; }
.partner-card i { font-size:1.2rem; color:var(--gold); margin-bottom:4px; width:40px; height:40px; background:var(--gold-dim); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.partner-card h4 { color:var(--text); font-size:1rem; font-family:var(--font-body); font-weight:600; margin-bottom:4px; }
.partner-card p { color:var(--text-muted); font-size:0.82rem; line-height:1.6; margin-bottom:4px; }
.partner-card a { align-self:flex-start; font-size:0.78rem; font-weight:600; color:var(--gold); margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid transparent; transition:var(--duration) var(--ease); }
.partner-card a:hover { border-bottom-color:var(--gold); }
@media(max-width:1024px){ .partner-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .partner-grid { grid-template-columns:1fr; gap:16px; } }

/* ============================================
   GLOBAL GOLD CARD BORDERS
   ============================================ */
.yacht-card, .review-card, .destination-card, .experience-card,
.contact-form-container, .contact-info-card, .nav-card {
  border:1px solid var(--border-gold);
  box-shadow:var(--shadow-sm);
  transition:all var(--duration) var(--ease);
}
.yacht-card:hover, .review-card:hover, .destination-card:hover,
.experience-card:hover, .contact-form-container:hover, .contact-info-card:hover,
.nav-card:hover {
  border-color:rgba(201,169,110,0.55);
  box-shadow:var(--shadow-gold);
}
.faq-item { border-bottom:1px solid var(--border-gold); }
.service-image { border:1px solid var(--border-gold); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.yacht-card,.experience-card,.review-card,.service-item,.destination-card,.faq-item { opacity:1; transform:translateY(0); transition:opacity 0.6s ease,transform 0.6s ease; }
/* Animation enhancement when JS adds fade-in class — elements already visible, animation is enhancement only */
.fade-in { opacity:1; transform:translateY(0); }

/* ============================================
   SCROLLBAR — gold
   ============================================ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bronze); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
*:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important} html{scroll-behavior:auto} }
@media print{header,footer,.hero-arrow,.hero-dots,.whatsapp-float,.phone-float,.mobile-menu-btn,.sticky-cta-bar{display:none!important} .hero{height:auto;min-height:auto} .hero-content{position:relative} }