:root {
  /* Light Theme (Default) */
  --primary: #13b6ec;
  --primary-dark: #0d94c4;
  --bg-light: #f6f8f8;
  --bg-dark: #101d22;
  --text: #1f2937;
  --text-muted: #6b7280;
  --card-bg: #ffffff;
  --border-color: rgba(19, 182, 236, 0.2);
  --header-bg: rgba(255, 255, 255, 0.95);
  --footer-bg: #101d22;
  --footer-text: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --hover-bg: rgba(19, 182, 236, 0.08);
}

[data-theme="dark"] {
  /* Dark Theme */
  --primary: #13b6ec;
  --primary-dark: #3dc8f0;
  --bg-light: #0a1116;
  --bg-dark: #05090c;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --card-bg: #111827;
  --border-color: rgba(19, 182, 236, 0.3);
  --header-bg: rgba(17, 24, 39, 0.95);
  --footer-bg: #05090c;
  --footer-text: #d1d5db;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --input-bg: #1f2937;
  --input-border: #374151;
  --hover-bg: rgba(19, 182, 236, 0.15);
}

* { box-sizing: border-box }
html, body { height: 100%; overflow-x: hidden }
body {
  margin: 0;
  background: var(--bg-light);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 300ms ease, color 300ms ease;
}
html { -webkit-text-size-adjust: 100% }
header { padding-top: env(safe-area-inset-top); background: var(--header-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; transition: background-color 300ms ease; }
footer { padding-bottom: env(safe-area-inset-bottom); background: var(--footer-bg); color: var(--footer-text); transition: background-color 300ms ease, color 300ms ease; }
/* Header & Navigation */
.scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:.9rem;margin:6px 0 10px}
.scroll-hint .chev{font-size:1rem;animation:nudge 900ms ease-in-out infinite}
@keyframes nudge{0%{transform:translateX(0)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}
@media(min-width:768px){.scroll-hint{display:none}}
/* Feature cards */
.feature-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);padding:24px;transition:transform 200ms ease,box-shadow 200ms ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.card h3{margin:8px 0 4px}
.card p{margin:0;color:var(--text-muted)}
/* Packages carousel */
.carousel{overflow-x:auto;scroll-snap-type:x proximity;display:flex;gap:16px;padding:16px}
.carousel::-webkit-scrollbar{display:none}
.carousel-item{min-width:16rem;scroll-snap-align:start}
.packages-mobile-center #packagesScroll .flex[data-card]{scroll-snap-align:center}
@media(max-width:767px){
  #packagesScroll .flex[data-card]{min-width:100%;flex:0 0 100%;scroll-snap-align:center}
  #packagesScroll{scroll-padding-left:0;scroll-padding-right:0}
}
#packagesScroll [data-card]{scroll-snap-stop:always}
/* Ensure horizontal scrolling behavior consistently */
#packagesScroll{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:none;overscroll-behavior-y:none;scroll-padding-left:16px;scroll-padding-right:16px;display:flex;gap:16px;scroll-snap-type:x mandatory}
@media(max-width:767px){
  .packages-mobile-center #packagesScroll{padding-left:0!important;padding-right:0!important;scroll-padding-left:0;scroll-padding-right:0}
}
/* Slider cards responsive sizing and snapping */
@media(max-width:767px){
  #packagesScroll .flex[data-card]{flex:0 0 100%;width:100%;min-width:100%;scroll-snap-align:center}
}
@media(min-width:768px){
  #packagesScroll{--cards-gap:1rem}
  #packagesScroll .flex[data-card]{flex:0 0 calc((100% - (var(--cards-gap)*2))/3);width:calc((100% - (var(--cards-gap)*2))/3);min-width:calc((100% - (var(--cards-gap)*2))/3);scroll-snap-align:start}
}
/* Ensure package images follow rounded container curves */
#packagesScroll .flex[data-card] .package-img{border-radius:inherit}
@media(max-width:767px){
  .packages-mobile-center h2{text-align:center;margin-left:auto;margin-right:auto;display:block;width:100%}
  .packages-mobile-center .scroll-hint{justify-content:center}
}
/* Package images fit to viewframe */
.package-img{width:100%;height:160px;object-fit:cover;border-radius:1rem;display:block;background-color:rgba(19,182,236,.08)}
@media(min-width:640px){.package-img{height:180px}}
@media(max-width:767px){
  .package-img{width:100%;height:180px;object-fit:contain;object-position:center;margin:0 auto;display:block;background-color:transparent}
}
.package-title{font-weight:700;letter-spacing:-.015em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.package-desc{color:var(--text-muted);font-size:.875rem;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms ease,transform 600ms ease}
.reveal-in{opacity:1;transform:translateY(0)}
/* Loading Skeletons */
.skeleton{background:linear-gradient(90deg,var(--card-bg) 25%,rgba(19,182,236,0.1) 50%,var(--card-bg) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:1rem;margin-bottom:0.5rem}
.skeleton-title{height:1.5rem;margin-bottom:1rem;width:60%}
.skeleton-image{height:200px;width:100%}
.skeleton-card{padding:24px;border:1px solid var(--border-color);border-radius:12px}
/* Testimonials Carousel */
.testimonial-carousel{position:relative;overflow:hidden;padding:2rem 0}
.carousel-track{display:flex;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.testimonial-card{min-width:100%;padding:0 1rem;transition:opacity 0.3s ease}
@media(min-width:768px){.testimonial-card{min-width:50%}}
@media(min-width:1024px){.testimonial-card{min-width:33.333%}}
.testimonial-content{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center;height:100%}
.testimonial-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:3px solid var(--primary)}
.testimonial-text{font-style:italic;color:var(--text-muted);margin-bottom:1rem;line-height:1.6}
.testimonial-author{font-weight:700;color:var(--text)}
.testimonial-role{font-size:0.875rem;color:var(--text-muted)}
.carousel-nav{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.carousel-btn{background:var(--primary);color:#fff;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;transition:background 0.2s ease;display:flex;align-items:center;justify-content:center}
.carousel-btn:hover{background:var(--primary-dark)}
.carousel-btn:focus{outline:2px solid var(--primary);outline-offset:2px}
.carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1rem}
.carousel-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--primary);background:transparent;cursor:pointer;transition:background 0.2s ease}
.carousel-dot.active{background:var(--primary)}
/* Gallery */
.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery-card{position:relative;border-radius:12px;overflow:hidden;background:var(--card-bg);border:1px solid var(--border-color)}
.gallery-card img{display:block;width:100%;height:200px;object-fit:cover;transition:transform 250ms ease}
.gallery-card:hover img{transform:scale(1.03)}
.gallery-caption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;padding:10px 14px}
.gallery-caption .caption-title{font-size:1rem;font-weight:800;letter-spacing:-.015em}
.gallery-caption .caption-subtitle{font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.85)}
.package-title{font-weight:700;letter-spacing:-.015em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.package-desc{color:var(--text-muted);font-size:.875rem;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}

/* Vertical page snapping removed to restore previous behavior */

/* Scroll edges hint for horizontal lists */
.scroll-edges{display:none}
/* Base on white section to avoid cast of bg-light */
.scroll-edge-left,.scroll-edge-right{display:none}
@media(min-width:768px){.scroll-edges{display:none}}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .revealed .text{animation:none}
}

/* Package thumbnails fallback bg (when remote images blocked) */
.package-thumb{background-color:rgba(19,182,236,.08)}

.snap-container{height:calc(100vh - var(--header-h,0px));width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;display:flex;-webkit-overflow-scrolling:touch;background:#000;color:#fff;-ms-overflow-style:none;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;overscroll-behavior-y:none}
.snap-container::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;height:calc(100vh - var(--header-h,0px));scroll-snap-align:start;background-repeat:no-repeat;background-position:center;background-size:cover;background-color:transparent}
@supports (height: 100svh){
  .snap-container{height:calc(100svh - var(--header-h,0px))}
  .slide{height:calc(100svh - var(--header-h,0px))}
}
/* Mobile Gallery Fix Reverted */
@media (max-width: 1023px) {
  /* Restore snap behavior but allow vertical scroll if needed */
  .snap-container { 
    height: calc(100vh - var(--header-h,0px)); 
    display: flex !important; 
    flex-direction: row !important;
    overflow-x: auto !important; 
    overflow-y: hidden; 
    scroll-snap-type: x mandatory; 
    background: #000; 
    width: 100%;
  }
  
  .slide { 
    height: 100% !important; 
    width: 100vw !important;
    flex: 0 0 100% !important;
    display: block; 
    margin-bottom: 0; 
  }
  
  .bottom-caption { 
    bottom: calc(24px + env(safe-area-inset-bottom)); 
    left: 24px; 
    right: 24px; 
    text-align: center; 
    justify-content: center; 
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .text { 
    opacity: 0; 
    transform: translateY(18px); 
    text-align: center; 
  }
  
  .revealed .text { 
    animation: fadeInUp 700ms ease forwards; 
  }
  
  .text h1 { font-size: 2rem; }
  .text p { font-size: 1rem; }
}
.slide::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;width:100%;text-align:center;padding:0 5vw}
.bottom-caption{position:absolute;left:24px;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:1;display:flex;justify-content:center;text-align:center;padding:0 2vw;padding-bottom:env(safe-area-inset-bottom)}
.text{max-width:72ch;opacity:0;transform:translateY(18px)}
.revealed .text{animation:fadeInUp 700ms ease forwards}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px}
.lightbox .close{position:absolute;top:16px;right:16px;background:var(--card-bg);color:var(--text);border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}

#mobileMenu{opacity:0;transform:translateY(-8px);transition:opacity 200ms ease,transform 200ms ease}
#mobileMenu.mm-open{opacity:1;transform:translateY(0)}
#mobileOverlay{opacity:0;transition:opacity 200ms ease}
#mobileOverlay.mo-open{opacity:1}

/* Accessibility: Screen reader only utility */
.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}
.sr-only:focus:not(.sr-only){position:static;width:auto;height:auto;padding:0.5rem 1rem;margin:0;overflow:visible;clip:auto;white-space:normal;z-index:100}

/* Accessibility: Focus visible styles for keyboard navigation */
*:focus-visible{outline:2px solid #13b6ec;outline-offset:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #13b6ec;outline-offset:2px}

/* Accessibility: Improved focus states for interactive elements */
.feature-card:focus-within,.pkg-card:focus-within{box-shadow:0 0 0 3px rgba(19,182,236,0.4)}

/* Dark Mode Toggle Button */
.theme-toggle {
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 999px;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 200ms ease;
  min-width: 44px;
  min-height: 44px;
}
.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

/* Card hover effects with theme support */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Input styling with theme support */
input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  transition: background-color 200ms ease, border-color 200ms ease;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Ensure all input types have consistent styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="search"],
input[type="url"] {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(19, 182, 236, 0.2);
}

/* Button styling with theme support */
button, .btn {
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── No-JS Fallback: reveal elements visible without JS ──────── */
.no-js .reveal, noscript .reveal { opacity: 1 !important; transform: none !important; }

/* ── Stats Strip ─────────────────────────────────────────────── */
.stats-strip {
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.stat-item { text-align: center; }
.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

/* ── Hero Scroll Indicator ───────────────────────────────────── */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  animation: scrollBounce 2.2s ease-in-out infinite;
  cursor: pointer;
  z-index: 10;
}
.hero-scroll span {
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
}
.hero-scroll svg {
  width: 20px;
  height: 20px;
  fill: rgba(255,255,255,0.65);
  margin-bottom: 0.25rem;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ── Testimonials: hide nav at desktop (all 3 cards visible) ─── */
@media (min-width: 1024px) {
  .testimonial-carousel .carousel-nav,
  .testimonial-carousel .carousel-dots { display: none; }
  .testimonial-carousel .carousel-track { transform: none !important; }
  .testimonial-carousel { overflow: visible; padding-bottom: 0; }
}

/* ── WhatsApp Floating Button ────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
  text-decoration: none;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.60);
}
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ── Feature Card Counter Accent ─────────────────────────────── */
.feature-card-numbered {
  counter-increment: feature-counter;
  position: relative;
}
.feature-card-wrap { counter-reset: feature-counter; }
.feature-card-numbered::after {
  content: "0" counter(feature-counter);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}