/* =====================================================================
   ITHVARAA — NEXT-GEN LAYER (LIGHT FUTURISTIC EDITION)
   Loaded after style.css. Adds aurora fields, glassmorphism, colour glow,
   gradient text, magnetic buttons, 3D tilt cards, animated route lines.
   Palette reworked to a light, colour-mixed futuristic look — no dark
   neon panels anywhere on the site.
   ===================================================================== */

:root{
  --neon-teal:   #21C7A8;  /* mint */
  --neon-gold:   #F5A623;  /* amber */
  --neon-violet: #7C6FE0;  /* soft indigo */
  --neon-sky:    #2FA8E0;  /* sky blue — extra mix-in accent */
  --glass-bg:     rgba(255,255,255,0.62);
  --glass-border: rgba(10,33,28,0.10);
  --glow-teal:  0 0 22px rgba(33,199,168,.28);
  --glow-gold:  0 0 22px rgba(245,166,35,.28);
  --text-soft:  #3E524B;   /* secondary text on light panels */
  --text-mute:  #5C766D;   /* tertiary/muted text on light panels */
}

/* ---------- Splash / loader ---------- */
#ithSplash{
  position:fixed; inset:0; z-index:9999; background:radial-gradient(circle at 50% 40%, #F5FBF9, #E4F3ED 75%);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#ithSplash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#ithSplash .splash-ring{ width:88px; height:88px; border-radius:50%; padding:5px; background:conic-gradient(from 0deg, var(--neon-teal), var(--gold), var(--neon-violet), var(--neon-teal)); animation:spinRing 1.6s linear infinite; }
#ithSplash .splash-ring img{ width:100%; height:100%; border-radius:50%; display:block; background:#fff; }
@keyframes spinRing{ to{ transform:rotate(360deg); } }
#ithSplash .splash-text{ font-family:var(--font-mono); letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color:var(--ink); text-shadow:0 0 10px rgba(33,199,168,.25); }

/* ---------- Aurora canvas backdrop ---------- */
/* multiply (not screen) so the colour blobs tint a light page instead of washing out to white */
#auroraCanvas{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4; mix-blend-mode:multiply; }
.hero{ isolation:isolate; }

/* Grain/noise pattern removed per request — background stays clean gradients only */
.site-mist::after{ content:none; }

/* ---------- Custom cursor glow ---------- */
#cursorGlow{ position:fixed; width:26px; height:26px; border-radius:50%; pointer-events:none; z-index:9998;
  background:radial-gradient(circle, rgba(33,199,168,.45), rgba(33,199,168,0) 70%); transform:translate(-50%,-50%);
  transition:opacity .3s; opacity:0; mix-blend-mode:multiply; }
@media (hover:hover) and (pointer:fine){ #cursorGlow.active{ opacity:1; } }

/* ---------- Gradient / shimmer text ---------- */
.grad-text{
  background:linear-gradient(100deg, var(--neon-teal), var(--gold-soft) 45%, var(--neon-violet) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% auto; animation:shimmerText 6s linear infinite;
}
@keyframes shimmerText{ to{ background-position:220% center; } }

/* ---------- Glass panels (light frosted glass) ---------- */
.glass{
  background:var(--glass-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border); position:relative; transition:transform .3s ease, box-shadow .3s ease;
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(33,199,168,.45), rgba(245,166,35,.15) 40%, rgba(124,111,224,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6;
}

/* Hero aurora tint — soft glow, tuned for a light hero */
.hero-kicker{ text-shadow:0 0 10px rgba(245,166,35,.2); }
.hero h1{ color:var(--ink); text-shadow:0 0 30px rgba(33,199,168,.10); }

.hero-visual .frame{ border-radius:24px; box-shadow:0 30px 80px rgba(10,33,28,.18), 0 0 0 1px rgba(10,33,28,.06), var(--glow-teal); }

/* ---------- Magnetic glow buttons ---------- */
.btn-primary{
  background:linear-gradient(120deg, var(--neon-teal), var(--gold) 60%, var(--neon-gold));
  color:#0A211C; box-shadow:0 10px 26px rgba(33,199,168,.28), 0 0 0 1px rgba(255,255,255,.4) inset;
  position:relative; overflow:hidden;
}
.btn-primary::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-primary:hover{ box-shadow:0 14px 34px rgba(33,199,168,.4), 0 0 0 1px rgba(255,255,255,.5) inset; }
.btn-outline{ border-color:rgba(33,199,168,.4); color:var(--ink); }
.btn-outline:hover{ border-color:var(--neon-teal); color:var(--neon-teal); box-shadow:var(--glow-teal); }

/* ---------- 3D tilt cards (light glass) ---------- */
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .12s ease-out, box-shadow .3s ease; }
.pkg-card, .fleet-card{
  background:linear-gradient(165deg, rgba(255,255,255,.92), rgba(224,250,244,.82));
  backdrop-filter:blur(14px); border:1px solid rgba(33,199,168,.22); color:var(--ink);
  position:relative; isolation:isolate;
}
.pkg-card::before, .fleet-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--rot,0deg), var(--neon-teal), var(--neon-violet), var(--neon-gold), var(--neon-teal));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; animation:rotBorder 4s linear infinite paused;
}
.pkg-card:hover::before, .fleet-card:hover::before{ opacity:1; animation-play-state:running; }
@property --rot{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes rotBorder{ to{ --rot:360deg; } }

.pkg-card .pkg-body p, .pkg-card .pkg-meta{ color:var(--text-soft); }
.pkg-card .pkg-meta{ border-top-color:rgba(10,33,28,.12); }
.pkg-card h3{ color:var(--ink); }
.pkg-card:hover, .fleet-card:hover{ box-shadow:0 30px 70px rgba(10,33,28,.16), var(--glow-teal); transform:translateY(-8px); }
.pkg-price strong{ color:var(--neon-gold); text-shadow:0 0 10px rgba(245,166,35,.3); }
.pkg-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,17,13,.85)); pointer-events:none; }
.pkg-region{ box-shadow:var(--glow-teal); border:1px solid rgba(33,199,168,.4); }

/* Shine sweep across card on hover */
.pkg-card::after, .fleet-card::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 62%);
  transform:translateX(-140%); transition:transform .8s ease;
}
.pkg-card:hover::after, .fleet-card:hover::after{ transform:translateX(140%); }

.fleet-card .fleet-feat li{ color:var(--text-soft); }
.fleet-card .fleet-cat{ text-shadow:0 0 8px rgba(245,166,35,.2); }
.fleet-card .fleet-rate{ border-top-color:rgba(10,33,28,.12); color:var(--text-soft); }
.fleet-card h3{ color:var(--ink); }

/* Colourful wash on light sections — the "mix-up" of colour lives here */
.section{ position:relative; background:var(--paper); isolation:isolate; }
.section::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(33,199,168,.12), transparent 60%),
    radial-gradient(50% 45% at 95% 100%, rgba(124,111,224,.12), transparent 60%),
    radial-gradient(40% 40% at 60% 40%, rgba(245,166,35,.08), transparent 60%);
}
.section-dark::before{ opacity:1; }

/* Testimonial / route nodes glow */
.route-step .node{ box-shadow:0 0 0 1px var(--glass-border), var(--glow-teal); }

.testi-card{
  background:linear-gradient(165deg, rgba(255,255,255,.92), rgba(224,250,244,.82));
  backdrop-filter:blur(14px); border:1px solid rgba(33,199,168,.22); color:var(--ink);
  position:relative; isolation:isolate; overflow:hidden;
}
.testi-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--rot,0deg), var(--neon-teal), var(--neon-violet), var(--neon-gold), var(--neon-teal));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; animation:rotBorder 4s linear infinite paused;
}
.testi-card:hover::before{ opacity:1; animation-play-state:running; }
.testi-card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(10,33,28,.14), var(--glow-teal); }
.testi-card p{ color:var(--text-soft); }
.testi-name{ color:var(--ink); font-weight:600; }
.testi-name span{ color:var(--text-mute); }

/* Section heading polish — now on a light section-dark panel */
.section-dark h2{ color:var(--ink); text-shadow:0 0 20px rgba(33,199,168,.12); }
.section-dark::before{
  opacity:1;
  background:
    radial-gradient(55% 45% at 10% 0%, rgba(33,199,168,.16), transparent 60%),
    radial-gradient(50% 45% at 92% 100%, rgba(124,111,224,.16), transparent 60%),
    radial-gradient(35% 40% at 55% 50%, rgba(245,166,35,.10), transparent 60%);
}
.section-dark .section-head p{ color:var(--text-soft); }
.section-dark .route-step p{ color:var(--text-soft); }
.section-dark .route-step h4{ color:var(--ink); }
.section-dark .route-step .node{ background:#fff; color:var(--teal); border-color:rgba(10,33,28,.12); }
/* Why-choose-us feature copy uses inline colours meant for a dark panel — override for the light one */
.feature-item h3{ color:var(--ink) !important; }
.feature-item p{ color:var(--text-soft) !important; }

/* CTA band — light colour-mix gradient instead of a dark ink panel */
.cta-band{
  background:linear-gradient(120deg, rgba(33,199,168,.16), rgba(255,255,255,.94) 55%, rgba(124,111,224,.16));
  border:1px solid var(--glass-border); box-shadow:0 24px 60px rgba(10,33,28,.10);
  color:var(--ink);
}

/* Why Choose Us features — plain, no background box */
.a-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 30px; }
.feature-item{ padding:4px 2px; transition:transform .3s ease; }
.feature-item:hover{ transform:translateY(-4px); }
.feature-item svg{ filter:drop-shadow(0 0 6px currentColor); }
@media (max-width:1080px){ .a-features-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .a-features-grid{ grid-template-columns:1fr; } }

/* ---------- Animated SVG route line (draws on scroll) ---------- */
.route-svg-wrap{ position:relative; height:2px; margin:10px 0 40px; }
.route-svg-wrap svg{ width:100%; overflow:visible; }
.route-svg-wrap path{ stroke:url(#routeGrad); stroke-width:2; fill:none; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.6s ease; }
.route-svg-wrap.in path{ stroke-dashoffset:0; }

/* ---------- Logo animation upgrade ---------- */
.logo-anim{ box-shadow:0 0 0 2px rgba(33,199,168,.25); border-radius:50%; }
@keyframes logoBreathe{
  0%,100%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 0 rgba(33,199,168,0)); }
  50%{ transform:scale(1.07) rotate(-3deg); filter:drop-shadow(0 0 12px rgba(33,199,168,.55)); }
}

/* =====================================================================
   CHATBOT — LIGHT, COLOUR-MIXED ASSISTANT SKIN
   ===================================================================== */
.ibot-launcher{
  background:linear-gradient(135deg, var(--neon-teal), var(--neon-violet));
  box-shadow:0 14px 30px rgba(33,199,168,.35), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.ibot-ping{ border-color:var(--neon-teal); }

.ibot-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(228,250,243,.94));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(33,199,168,.22); box-shadow:0 34px 80px rgba(10,33,28,.16), var(--glow-teal);
  color:var(--ink);
}
.ibot-header{ background:linear-gradient(120deg, rgba(33,199,168,.14), rgba(124,111,224,.10)); border-bottom:1px solid rgba(10,33,28,.08); color:var(--ink); }
.ibot-avatar{ background:conic-gradient(from 0deg, var(--neon-teal), var(--neon-violet), var(--gold), var(--neon-teal)); padding:2px; }
.ibot-avatar img, .ibot-avatar svg{ background:#F2FBF8; border-radius:50%; padding:5px; }
.ibot-heading strong{ color:var(--ink); }
.ibot-dot{ background:var(--neon-teal); box-shadow:0 0 0 3px rgba(33,199,168,.25); }

.ibot-messages{ background:transparent; }
.ibot-msg.bot{ background:rgba(10,33,28,.05); border:1px solid rgba(10,33,28,.08); color:var(--ink); }
.ibot-msg.bot strong{ color:var(--neon-teal); }
.ibot-msg.visitor{ background:linear-gradient(120deg, var(--neon-teal), var(--neon-violet)); color:#0A211C; font-weight:500; }

.ibot-typing{ background:rgba(10,33,28,.05); border:1px solid rgba(10,33,28,.08); }
.ibot-typing span{ background:var(--neon-teal); }

.ibot-chip{ border-color:rgba(33,199,168,.5); color:var(--neon-teal); background:rgba(33,199,168,.07); }
.ibot-chip:hover{ background:var(--neon-teal); color:#0A211C; box-shadow:var(--glow-teal); }

.ibot-inputrow{ background:rgba(10,33,28,.03); border-top:1px solid rgba(10,33,28,.08); }
.ibot-inputrow input{ background:#fff; border:1px solid rgba(10,33,28,.14); color:var(--ink); }
.ibot-inputrow input::placeholder{ color:var(--fog); }
.ibot-inputrow button{ background:linear-gradient(120deg, var(--neon-teal), var(--gold)); box-shadow:var(--glow-teal); }

.ibot-badge-ai{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--neon-teal); background:rgba(33,199,168,.1); border:1px solid rgba(33,199,168,.3);
  padding:2px 8px; border-radius:999px; margin-left:6px;
}

@media (prefers-reduced-motion: reduce){
  .grad-text, .logo-anim, #ithSplash .splash-ring{ animation:none !important; }
}

/* ---------- Hero FX: clean ambient glow only, no pattern lines ---------- */
/* Forced hide with !important as a safety net — in case any leftover
   old markup (from an earlier manual file edit) still exists in the
   live HTML, this guarantees it can never render regardless of
   CSS load order or specificity. */
.cloud-layer, .cloud-1, .cloud-2, .cloud-layer svg{ display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; }

.hero-fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:none !important; border:none !important; }

/* Extra safety net: guarantee the skip-link can never render as a visible box */
.skip-link{ position:absolute !important; left:-999px !important; top:0 !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.skip-link:focus{ left:12px !important; top:12px !important; width:auto !important; height:auto !important; }

.glow-particle{
  position:absolute; border-radius:50%; filter:blur(2px);
  background:radial-gradient(circle, rgba(33,199,168,.85), rgba(33,199,168,0) 70%);
  animation:particleFloat 7s ease-in-out infinite;
}
.glow-particle.p1{ width:10px; height:10px; top:22%; left:34%; animation-delay:0s; }
.glow-particle.p2{ width:7px; height:7px; top:62%; left:14%; background:radial-gradient(circle, rgba(245,166,35,.85), rgba(245,166,35,0) 70%); animation-delay:1.4s; }
.glow-particle.p3{ width:8px; height:8px; top:74%; left:46%; background:radial-gradient(circle, rgba(124,111,224,.85), rgba(124,111,224,0) 70%); animation-delay:2.6s; }
.glow-particle.p4{ width:5px; height:5px; top:38%; left:6%; animation-delay:3.8s; }
@keyframes particleFloat{
  0%,100%{ transform:translateY(0) scale(1); opacity:.55; }
  50%{ transform:translateY(-26px) scale(1.4); opacity:1; }
}

/* ---------- Hero image: glow frame + scanline sweep ---------- */
.hero-visual{ position:relative; }
.frame-glow{
  position:absolute; inset:-18px; z-index:0; border-radius:32px; opacity:.55;
  background:conic-gradient(from 0deg, var(--neon-teal), var(--neon-violet), var(--neon-gold), var(--neon-teal));
  filter:blur(28px); animation:orbitSpin 8s linear infinite;
}
.hero-visual .frame{ position:relative; z-index:1; }
.frame-scanline{
  position:absolute; left:0; right:0; height:36%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(33,199,168,0) 0%, rgba(33,199,168,.16) 45%, rgba(33,199,168,0) 100%);
  animation:scanSweep 4.5s ease-in-out infinite;
}
@keyframes scanSweep{ 0%{ top:-40%; } 100%{ top:100%; } }

.hero-badge{
  position:absolute; right:-22px; bottom:-26px; left:auto; z-index:3;
  background:linear-gradient(165deg, rgba(255,255,255,.94), rgba(228,250,243,.9));
  color:var(--ink); border:1px solid rgba(33,199,168,.28); border-radius:18px; padding:16px 20px;
  box-shadow:0 20px 44px rgba(10,33,28,.16), var(--glow-teal); display:flex; gap:12px; align-items:center; max-width:250px;
  animation:float 7s ease-in-out infinite reverse; backdrop-filter:blur(14px);
}
.hero-badge-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#0A211C; background:linear-gradient(135deg, var(--neon-teal), var(--neon-gold));
}
.hero-badge strong{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--ink); }
.hero-badge span{ font-size:.78rem; color:var(--text-mute); }

@media (max-width:760px){
  .hero-badge{ right:0; left:0; bottom:-20px; max-width:none; width:calc(100% - 8px); margin:0 auto; }
}

/* =====================================================================
   FULL-PAGE ANIMATED WATERFALL BACKDROP (brightened, light veil)
   A blurred, slowly drifting waterfall photo lives behind the entire
   site. Section panels are translucent so it glows through everywhere,
   now tinted light with a soft colour-mix instead of a dark wash.
   ===================================================================== */
html, body{ background:transparent; overflow-x:hidden; max-width:100%; }
/* Ensure no child ever causes horizontal scroll on small screens */
* { min-width: 0; }

/* Chatbot: guarantee it always stays inside the visible viewport on mobile,
   even if something upstream causes horizontal overflow, and never sits
   under a phone's home-indicator / gesture bar. */
.ibot{
  right:max(16px, env(safe-area-inset-right)) !important;
  bottom:max(16px, env(safe-area-inset-bottom)) !important;
  z-index:2147483647 !important;
}
@media (max-width:480px){
  .ibot-panel{ right:-6px; }
}
#waterfallBg{ position:fixed; inset:0; z-index:-3; overflow:hidden; background:var(--paper); }
.wf-image{
  position:absolute; inset:-8%; z-index:1;
  background-image:url('../images/gallery/seven-sisters-falls.jpg');
  background-size:cover; background-position:center;
  filter:blur(30px) saturate(112%) brightness(1.08);
  animation:wfKenBurns 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes wfKenBurns{
  0%{ transform:scale(1.06) translate(0,0); }
  50%{ transform:scale(1.16) translate(-2.5%,-2%); }
  100%{ transform:scale(1.1) translate(1.5%,-3.5%); }
}
.wf-streaks{ display:none !important; }
.wf-veil{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.4) 40%, rgba(255,255,255,.68) 100%),
    radial-gradient(60% 50% at 15% 0%, rgba(33,199,168,.12), transparent 60%),
    radial-gradient(50% 45% at 95% 100%, rgba(124,111,224,.12), transparent 60%);
}
@media (prefers-reduced-motion: reduce){ .wf-image{ animation:none; } }

/* Let the waterfall glow bleed through section panels instead of solid colour */
.section{ background:rgba(247,248,243,.90); backdrop-filter:blur(6px); }
.section-dark{ background:linear-gradient(135deg, rgba(224,250,244,.90), rgba(232,228,255,.85)); backdrop-filter:blur(6px); }
.site-header{
  background:rgba(255,255,255,.72); border-bottom-color:rgba(10,33,28,.08);
}
/* Fix: sticky + backdrop-filter can leave a stray "ghost" rectangle
   repaint artifact in some Chromium browsers on scroll. Forcing the
   header onto its own compositor layer prevents that.
   IMPORTANT: kept desktop-only. transform / will-change:transform on
   .site-header creates a new CSS containing block for any position:fixed
   descendant -- and .main-nav (the mobile slide-in menu) is fixed and
   lives inside .site-header. On mobile that turned the menu's "fixed to
   viewport" box into "fixed to the ~74px header bar", squashing the
   panel and letting the translucent header show through instead of the
   opaque menu background. Scoping to min-width keeps the repaint fix
   without breaking the mobile nav. */
@media (min-width:761px){
  .site-header{ transform:translateZ(0); will-change:transform; isolation:isolate; }
}
.site-footer{ background:linear-gradient(160deg, rgba(224,250,244,.94), rgba(232,228,255,.9)); backdrop-filter:blur(8px); }
.hero{
  color:var(--ink);
  background:
    radial-gradient(120% 100% at 15% -10%, rgba(33,199,168,.16), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(245,166,35,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(240,250,247,.68) 100%);
}
.hero-kicker{ color:#8A6D14; }
.hero p.lede{ color:var(--text-soft); }
.hero-stats strong{ color:var(--teal); }
.hero-stats span{ color:var(--text-mute); }
.hero h1 em{ color:var(--clay); }

/* ---------- Header text on the now-light header ---------- */
.header-inner, .brand{ color:var(--ink); }
.brand-sub{ color:var(--text-mute); }
.main-nav-desktop a{ color:var(--ink); opacity:.82; }
.phone-pill{ color:var(--teal); }
.header-cta .btn-outline{ color:var(--ink); border-color:rgba(10,33,28,.22); }
.nav-toggle span{ background:var(--ink); }
@media (max-width:760px){
  /* ---- Mobile nav: fully opaque light panel, dark readable text ---- */
  .main-nav{
    background: #f8faf9 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 40px rgba(10,33,28,.30), -4px 0 24px rgba(10,33,28,.18) !important;
    z-index: 9500 !important;
    isolation: isolate;
    border-left: 3px solid var(--neon-teal);
  }
  .main-nav a{
    color: #0A211C !important;
    opacity: 1 !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(10,33,28,.08) !important;
    display: block !important;
    background: transparent !important;
    letter-spacing: .01em;
  }
  .main-nav a:last-child { border-bottom: none !important; }
  .main-nav a:hover {
    color: #1a9e82 !important;
    background: rgba(33,199,168,.10) !important;
    border-radius: 8px;
    padding-left: 22px !important;
    border-bottom-color: transparent !important;
  }

  /* Hamburger bars: dark so they show on the light header */
  .nav-toggle span { background: #0A211C !important; }

  /* Hero stats: always 2-col grid on mobile, no overlap */
  .hero-stats { display:grid; grid-template-columns: 1fr 1fr; gap:16px 24px; flex-wrap:unset; }

  /* Footer: add bottom padding so FABs never block content */
  .site-footer { padding-bottom: 100px; }

  /* WhatsApp FAB: keep it visible but raise it above gesture bar */
  .whatsapp-fab {
    bottom: max(80px, calc(16px + env(safe-area-inset-bottom))) !important;
    left: 16px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8000 !important;
  }

  /* AI chat launcher: also lifted so it doesn't cover CTA buttons */
  .ibot {
    bottom: max(80px, calc(16px + env(safe-area-inset-bottom))) !important;
    right: 16px !important;
    z-index: 8001 !important;
  }

  /* Prevent section content from hiding behind fixed FABs */
  .cta-band, .section:last-of-type { margin-bottom: 24px; }
}

/* ---------- Footer text on the now-light footer ---------- */
.site-footer{ color:var(--text-soft); }
.footer-col h4{ color:var(--ink); }
.footer-col a{ color:var(--text-soft); }
.footer-col a:hover{ color:var(--teal); }
.brand-sub-inline{ color:var(--text-mute); }
.footer-social a{ border-color:rgba(10,33,28,.16); color:var(--ink); }
.footer-grid{ border-bottom-color:rgba(10,33,28,.12); }

/* ---------- Hamburger → X animation on mobile toggle ---------- */
.nav-toggle { position: relative; width: 42px; height: 42px; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; border-radius: 8px; transition: background .2s; }
.nav-toggle:hover { background: rgba(10,33,28,.06); }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #0A211C; transform-origin: center; transition: transform .3s ease, opacity .3s ease, background .2s; }
/* X state */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  /* Slide-in menu: refined spacing & typography */
  .main-nav {
    padding: 20px 16px 32px !important;
    gap: 0 !important;
  }
  .main-nav a {
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
  }

  /* Ensure header-cta CTA button doesn't overflow on tiny screens */
  .header-cta .btn { white-space: nowrap; }
}