/* Script accent (uses the file already on their site) */
 

  /* Override the theme’s variables so every place that uses them picks up the new fonts */
  :root{
    --headerFont: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bodyFont: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* Hard-apply just in case any components bypass the variables */
  body { font-family: var(--bodyFont); }
  h1, h2, h3, h4, h5, h6 { font-family: var(--headerFont); font-weight: 900; }
  .neon span { font-family: "Yellowtail", cursive; }

  .cs-card-group .cs-img {
  width: 100%;
  aspect-ratio: 413 / 270;      /* same as your old thumbnails */
  object-fit: cover;
}

.cs-picture { display:block; width:100%; }
.cs-picture img { width:100%; height:auto; display:block; }

/* Custom styles only for the Mako Pool image */
/* Desktop / default */
.cs-picture.mako-image {
  overflow: visible !important;   /* allow image to spill outside */
}

.cs-picture.mako-image img {
  width: 180% !important;         /* make image larger than container */
  height: auto !important;
  position: relative !important;
  left: -80px !important;         /* push further left */
  max-width: none !important;
}

/* Mobile: keep it safe */
@media (max-width: 768px) {
  .cs-picture.mako-image img {
    width: 100% !important;       /* normal on mobile */
    left: 0 !important;
  }
}

/* ===== MODAL OVERLAY ===== */
.custom-modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* ===== MODAL CONTENT BOX ===== */
.modal-content {
  position: relative;
  background: #fff;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.25);
  animation: fadeIn 0.25s ease-out;
}

.modal-content h2 {
  margin-top: 0;
}

.close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

/* ===== BOTTOM PROGRESS BAR ===== */
.modal-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 100%;              /* start full */
  background: #2563eb;      /* brand color */
  transform-origin: right;  /* shrink from right side */
}

/* ===== ANIMATIONS ===== */
@keyframes shrink {
  from { width: 100%; }
  to   { width: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
  to { transform: translateY(20px); opacity: 0; }
}

.modal-content.closing {
  animation: slideDown 220ms ease-in forwards;
}

/* ===== MODAL TEXT ===== */
.modal-content h2 {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827; /* dark gray */
  letter-spacing: -0.5px;
}

.modal-content p {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563; /* softer gray for readability */
}

/* emphasize important words */
.modal-content p strong {
  color: #2563eb; /* brand blue highlight */
  font-weight: 600;
}

.modal-content p {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563;
  font-family: 'Poppins', sans-serif; /* new font */
}

/* Backdrop blur for the overlay */
.custom-modal {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Animated gradient border glow around the modal */
.modal-content {
  position: relative;
  overflow: hidden; /* keeps glow edges tidy */
}
.modal-content::before {
  content: "";
  position: absolute;
  inset: -2px;              /* slightly outside to avoid clipping */
  border-radius: 14px;      /* a touch larger than modal radius */
  background: linear-gradient(120deg, #2563eb, #9333ea, #06b6d4, #2563eb);
  background-size: 300% 300%;
  z-index: -1;
  animation: borderFlow 6s linear infinite;
  filter: blur(8px) opacity(0.7);
}
/* mask so only the border glows, not the center */
.modal-content::after {
  content: "";
  position: absolute;
  inset: 2px;               /* inner cut-out */
  border-radius: 12px;
  background: #fff;         /* same as modal background */
  z-index: -1;
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Heading sheen sweep */
.modal-content h2 {
  position: relative;
  overflow: hidden;
}
.modal-content h2::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  animation: sheen 3.5s ease-in-out infinite 0.6s;
}
@keyframes sheen {
  0%   { left: -120%; }
  35%  { left: 120%; }
  100% { left: 120%; }
}


@keyframes floatUp {
  from { transform: translateY(20px); opacity: 0.9; }
  to   { transform: translateY(-80px); opacity: 0; }
}

/* Import Montserrat in your <head> if not already */


/* Only apply to pricing card feature lists */
.montserrat-list,
.montserrat-list .cs-li {
  font-family: 'Montserrat', sans-serif;
}


/* Pricing features styling */
.pricing-features {
  font-family: 'Poppins', sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-features .cs-li {
  display: flex;
  align-items: center;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 2 !important;
  margin-bottom: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.2s ease, padding-left 0.2s ease;
}


.pricing-features .cs-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

.pricing-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}


@media only screen and (min-width: 0rem) {
    #pricing-1690 {
        padding: var(--sectionPadding);
        padding-top: 40px !important;
    }
}

@media screen and (min-width: 1024px) {
  .cs-picture.mako-image img {
    width: 95% !important;
    height: auto !important;
    position: relative !important;
    left: 15px !important;
    max-width: none !important;
  }
}

.pricing-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.plan-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #e6e6e6;border-radius:999px;overflow:hidden}
.plan-toggle input{display:none}
.plan-toggle label{padding:10px 12px;text-align:center;font-weight:700;cursor:pointer;font-size:13px}
.plan-toggle .pill{position:absolute;top:2px;left:2px;height:calc(100% - 4px);width:0;background:#fff;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:transform .25s,width .25s}
.plan-toggle input:checked + label{color:#635bff}

 
    .cs-button-solid {
        z-index: 1;
        position: relative;
        display: inline-block;
        border-radius: 3.75rem;
        margin: 0;
        background-color: var(--primary);
        min-width: 9rem !important;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0 2rem !important;
        text-decoration: none;
        text-transform: uppercase;
        font-family: var(--headerFont);
        font-size: 1rem;
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        font-weight: 700;
        color: #fff;
        transition: box-shadow 0.3s, color 0.3s, background-color 0.3s;
        text-align: center;
        white-space: nowrap;
    }



/* outline style to complement your .cs-button-solid */
.cs-button-outline{
  display:inline-block;
  padding:10px 18px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  border:2px solid #06b6d4;        /* teal outline to contrast your blue */
  color:#06b6d4;
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cs-button-outline:hover{
  background:#06b6d4;
  color:#fff;
  border-color:#0891b2;
}

/* optional: make it match your secondary if used with .cs-popular */
.cs-item.cs-popular .cs-button-outline{
  border-color:#2563eb;
  color:#2563eb;
}
.cs-item.cs-popular .cs-button-outline:hover{
  background:#2563eb;
  color:#fff;
}
/* use only ONE #imgPreview block — this replaces your final one */
#imgPreview{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  max-height:64px !important;     /* a little taller than 48 */
  overflow:auto !important;
  padding:10px 2px 2px !important; /* add top padding so badges aren’t clipped */
}

#imgPreview .thumb{
  width:20px !important;
  height:20px !important;
  position:relative !important;
  border:1px solid #e5e7eb !important;
  border-radius:4px !important;
  background:#f8fafc !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;     /* allow the badge to overflow the thumb */
}

/* if you use a div.tile, give it the rounding */
#imgPreview .thumb .tile{
  width:100% !important; height:100% !important;
  border-radius:4px !important; overflow:hidden !important;
}

#imgPreview .thumb button{
  position:absolute !important;
  top:-5px !important; right:-6px !important;
  width:12px !important; height:12px !important; line-height:12px !important;
  font-size:9px !important; padding:0 !important; border:0 !important;
  border-radius:50% !important; background:#ef4444 !important; color:#fff !important;
  cursor:pointer !important; z-index:2 !important; box-shadow:0 0 0 2px #fff !important;
}

/* make room so the outside-corner badge isn't clipped */
#imgPreview{
  /* keep your other props (flex, gap, max-height, etc.) */
  padding:12px 12px 2px 2px !important; /* top=12, right=12 */
}

#imgPreview .thumb{
  position:relative !important;
  overflow:visible !important;          /* allow the badge to hang out */
}

#imgPreview .thumb button{
  position:absolute !important;
  top:-6px !important;
  right:-6px !important;
  width:12px !important;
  height:12px !important;
  line-height:12px !important;
  font-size:9px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#fff !important;
  box-shadow:0 0 0 2px #fff !important;
  z-index:2 !important;
}

#imgPreview .thumb button{ top:2px !important; right:2px !important; }


/* Put "Get Started" and "Buy" side-by-side inside pricing cards */
.cs-item .pricing-actions{
  display:flex;
  gap:10px;
  justify-content:center;   /* or flex-start */
  align-items:center;
  flex-wrap:wrap;           /* change to nowrap if you never want wrap */
  margin-top:12px;
}

/* Kill the block/100% width rules on buttons inside the row */
.cs-item .pricing-actions .cs-button-solid,
.cs-item .pricing-actions .cs-button-outline,
.cs-item .pricing-actions .btn-quick-buy{
  display:inline-flex !important;
  width:auto !important;
  margin:0 !important;
  white-space:nowrap;
}

/* non-interactive tick list */
.tick-list{ list-style:none; padding:0; margin:6px 0 0; }
.tick{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; }
.tick svg{ width:16px; height:16px; color:#22c55e; flex-shrink:0; margin-top:2px; }

html {
  scroll-behavior: smooth;
}

/* galexy */
/* ========= DARK MODE GALAXY BACKGROUND ========= */
body.dark-mode #hero-855 {
  position: relative;
  isolation: isolate;          /* keeps z-index layers separate */
  overflow: visible;           /* let wave SVGs show */
  padding-bottom: 6rem;        /* give breathing room for trees */
}

/* Remove the old stars/ufo wrappers completely */
body.dark-mode .universe,
body.dark-mode .cs-ufo-wrapper {
  display: none !important;
}

/* Galaxy background wrapper */
body.dark-mode .galaxy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;            /* prevent bleed into next section */
  pointer-events: none;        /* no interaction */
  background: radial-gradient(ellipse at center, #0a0a2a 0%, #000010 100%);
}

/* Star canvas */
.galaxy-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Nebula clouds */
body.dark-mode .nebula {
  position: absolute;
  inset: -8% -4% -4% -4%;     /* tighter than before to avoid overlap */
  background: radial-gradient(circle at 30% 40%, rgba(123, 97, 255, 0.3), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(0, 200, 255, 0.25), transparent 70%),
              radial-gradient(circle at 50% 80%, rgba(255, 80, 200, 0.2), transparent 80%);
  filter: blur(36px) saturate(115%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: floatNebula 20s ease-in-out infinite alternate;
}

/* Nebula movement */
@keyframes floatNebula {
  from { transform: translate(-3%, 2%) scale(1); }
  to   { transform: translate(3%, -2%) scale(1.05); }
}

/* Make sure hero content & waves sit above background */
/* Anchor the wave to the hero bottom; show only in dark mode */
#hero-855 { position: relative; isolation: isolate; }

#hero-855 .dark-wave { display: none; }
body.dark-mode #hero-855 .dark-wave {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1px;   /* -1px hides any hairline seam */
  z-index: 2;                         /* above galaxy bg, below content if needed */
  pointer-events: none;
  background: transparent;
}

#hero-855 .dark-wave-svg {
  width: 100%;
  height: 180px;                      /* tweak to taste */
  display: block;
}

/* Keep next section flush so no “bars” appear */
#hero-855 { padding-bottom: 0; }
#hero-855 + section { margin-top: 0; }


/* Set the two colors once; tweak to your palette */
body.dark-mode { 
  --dw-hero: #0b0f2c;   /* bottom color of your hero/galaxy */
}
/* Make --dw-next exactly the background of the section after the hero */
body.dark-mode #services-966 { 
  --dw-next: #0a131a;   /* <-- change to your real section color */
  background-color: var(--dw-next);  /* ensure the section uses it */
}

/* Position the wave and prevent seams */
#hero-855 { position: relative; isolation: isolate; }
#hero-855 .dark-wave { display: none; }
body.dark-mode #hero-855 .dark-wave {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1px;   /* -1px hides any hairline gap */
  z-index: 2;
  pointer-events: none;
}
#hero-855 .dark-wave-svg { width: 100%; height: 180px; display: block; }

/* Make sections meet flush */
#hero-855 { padding-bottom: 0; }
#hero-855 + section { margin-top: 0; }

/* create a stacking context for the hero */
#hero-855 {
  position: relative;
  isolation: isolate;
}

/* the wave sits behind */
body.dark-mode #hero-855 .dark-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 1;
  pointer-events: none;
}

/* raise the laptop (and its wrapper) above the wave */
#hero-855 .mako-image,
#hero-855 .cs-picture {
  position: relative;
  z-index: 5;   /* on top of the wave */
}

/* 1) Undo the wrapper positioning that caused the shift */
#hero-855 .cs-picture,
#hero-855 .mako-image {
  position: static !important;
  z-index: auto !important;
}

/* 2) Normal stacking context for the hero */
#hero-855 {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* 3) Galaxy behind everything */
body.dark-mode #hero-855 .galaxy-bg {
  position: absolute;
  inset: 0;
  z-index: -1;                 /* far back */
  pointer-events: none;
}

/* 4) Wave behind content and a bit lower (visual shift only) */
body.dark-mode #hero-855 .dark-wave {
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  z-index: 0;                   /* below content, above galaxy */
  pointer-events: none;
  transform: translateY(48px);  /* lower the wave without affecting layout */
}

/* size of the curve */
body.dark-mode #hero-855 .dark-wave-svg {
  width: 100%;
  height: 200px;
  display: block;
}

/* 5) Raise only the actual image above the wave */
#hero-855 .mako-image img {
  position: relative;           /* safe: doesn't change its size/flow */
  z-index: 2;                   /* in front of the wave */
}

/* Grow the laptop image visually (doesn't affect layout) */
:root{
  --laptop-scale: 1.18;      /* bigger = larger; try 1.25, 1.35, etc. */
  --laptop-shift-x: 0px;     /* optional nudge */
  --laptop-shift-y: 0px;     /* optional nudge */
}

#hero-855 .mako-image { overflow: visible; } /* allow overhang if it grows */

#hero-855 .mako-image img{
  position: relative;        /* keeps current placement */
  z-index: 2;                /* above the wave */
  transform-origin: bottom right;
  transform:
    translate(var(--laptop-shift-x), var(--laptop-shift-y))
    scale(var(--laptop-scale));
  will-change: transform;
}

/* keep it reasonable on smaller screens */
@media (max-width: 900px){
  :root{ --laptop-scale: 1.5; }  /* or 1.05 if you still want it bigger */
}

/* Base (mobile/tablet): keep normal size */
:root {
  --laptop-scale: 1.00;
  --laptop-shift-x: 0px;
  --laptop-shift-y: 0px;
}

/* Desktop: make it bigger */
@media (min-width: 1024px) {
  :root {
    --laptop-scale: 1.28;    /* bump this up/down to taste */
    --laptop-shift-x: 0px;   /* nudge if needed after scaling */
    --laptop-shift-y: 0px;
  }
}

/* Large desktop/hi-res */
@media (min-width: 1440px) {
  :root {
    --laptop-scale: 1.38;    /* even larger on big screens */
    /* --laptop-shift-x: -8px;  // optional left nudge */
  }
}

/* Dark hero base (subtle deep space) */
body.dark-mode #hero-855{
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #060914 0%, #030612 100%);
}

/* Starfield layer behind content and wave */
body.dark-mode .sky-bg{
  position: absolute;
  inset: 0;
  z-index: 0;          /* behind content & wave */
  pointer-events: none;
  overflow: hidden;
}

.stars-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Safety: hide any leftover dark-mode wave IMGs */
body.dark-mode #hero-855 .cs-wave.cs-dark{ display:none !important; }

/* ====== Services (remade): layout + styling, no hover effects ====== */

/* Tokens (scoped to the section) */
#services-966{
  --svc-card-bg: #f3f5f7;
  --svc-border: rgba(0,0,0,.06);
  --svc-text: #1f3446;
  --svc-title: #0f2435;
  --svc-badge: #0b2740;   /* navy tile */
  --svc-focus: #60a5fa;
}
body.dark-mode #services-966{
  --svc-card-bg: #0f1626;
  --svc-border: rgba(255,255,255,.08);
  --svc-text: #cfe0ff;
  --svc-title: #e7eef9;
  --svc-badge: #0a2240;
}

/* Grid */
#services-966 .svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

/* Card shell */
#services-966 .svc-card{ list-style:none; }
#services-966 .svc-link{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--svc-text);
  background:var(--svc-card-bg);
  border:1px solid var(--svc-border);
  border-radius:16px;
  padding:44px 26px 24px;     /* space for the badge */
  box-shadow:none;
  transition:none !important; /* no animation */
}

/* Floating icon badge (top-left) */
#services-966 .svc-badge{
  position:absolute;
  top:-22px; left:26px;
  width:68px; height:68px;
  border-radius:16px;
  background:var(--svc-badge);
  display:flex; align-items:center; justify-content:center;
}
#services-966 .svc-ico{
  width:36px; height:36px;
  stroke:#fff; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Typography */
#services-966 .svc-title{
  margin:6px 0 12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:1.55rem;
  color:var(--svc-title);
}
#services-966 .svc-text{
  margin:0;
  line-height:1.6;
  color:var(--svc-text);
}
#services-966 .svc-cta{
  display:inline-block;
  margin-top:18px;
  font-weight:700;
  color:var(--svc-text);
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}

/* Kill ALL hover changes (keep dark-mode static) */
#services-966 .svc-card:hover,
#services-966 .svc-link:hover,
#services-966 .svc-link:active,
#services-966 .svc-link:focus{
  background:var(--svc-card-bg) !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

/* Accessible focus outline for keyboard users */
#services-966 .svc-link:focus-visible{
  outline:2px solid var(--svc-focus);
  outline-offset:3px;
}

/* Small screens */
@media (max-width:480px){
  #services-966 .svc-title{ font-size:1.3rem; }
  #services-966 .svc-badge{ width:60px; height:60px; top:-20px; }
}

/* File-based badge icon */
#services-966 .svc-ico-img{
  width: 36px;
  height: 36px;
  display: block;
  /* If your source SVGs are dark on transparent, this makes them appear white */

}

/* If your SVGs are already white, you can remove the filter: */
/* #services-966 .svc-ico-img{ filter: none; } */

/* whatsapp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}
.whatsapp-float:hover {
  transform: scale(1.05);
}

/* Default (mobile first, so smaller devices like iPhone) */
.cs-logo img {
  width: 90 !important;   /* adjust to fit mobile */
  height: auto;
}

/* Desktop screens */
@media screen and (min-width: 1024px) {
  .cs-logo img {
    width: auto !important;  /* adjust to make bigger on desktop */
    height: 90px !important;
  }
}

@media only screen and (max-width: 1023px) {
    #cs-navigation .cs-logo img {
        height: 75px;
        width: auto;
        object-fit: contain;
    }
}

@media only screen and (min-width: 1024px) {
    #cs-navigation .cs-logo .cs-onscroll {
        
        position: relative;
        
    }
}

/* --- Bubbles host -------------------------------------------------------- */
.aa-bubbles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  isolation:isolate;
}

/* Theme variables */
:root{
  --bub-fill: rgba(255,255,255,.28);
  --bub-shine: rgba(255,255,255,.65);
  --bub-ring: rgba(0,70,130,.35);
  --bub-glow: rgba(30,120,210,.18);
}
body.dark-mode{
  --bub-fill: rgba(9,28,45,.70);
  --bub-shine: rgba(160,210,255,.14);
  --bub-ring: rgba(220,240,255,.55);
  --bub-glow: rgba(0,170,255,.22);
}

/* Generic bubble/ring */
.aa-bubbles .bubble,
.aa-bubbles .ring{
  position:absolute;
  border-radius:50%;
  will-change: transform, opacity;
  animation: bub-bob var(--dur,16s) ease-in-out var(--delay,0s) infinite alternate;
  opacity:var(--alpha,.85);
}

/* Filled gradient bubble */
.aa-bubbles .bubble{
  background:
    radial-gradient(60% 60% at 30% 30%, var(--bub-shine) 0 40%, transparent 60%),
    var(--bub-fill);
  box-shadow:
    inset 0 0 0 1.25px color-mix(in srgb, var(--bub-ring) 70%, transparent),
    0 18px 90px var(--bub-glow);
}

/* Stroke-only ring */
.aa-bubbles .ring{
  background:transparent;
  border:2px solid var(--bub-ring);
  box-shadow: 0 0 90px var(--bub-glow);
}

/* Bobbing motion */
@keyframes bub-bob{
  0%   { transform: translate(calc(var(--sway,8px) * -1), calc(var(--amp,18) * -1px)); }
  100% { transform: translate(calc(var(--sway,8px)),       calc(var(--amp,18) *  1px)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aa-bubbles .bubble,
  .aa-bubbles .ring{ animation:none; }
}


/* Hero stacking so wave sits behind content */
#hero-855 { position: relative; isolation: isolate; }
#hero-855 .cs-container,
#hero-855 .cs-content,
#hero-855 .cs-picture,
#hero-855 .mako-image { position: relative; z-index: 2; }

/* Bubbles stay at the very back */
#hero-855 .aa-bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Wave element (between bubbles and content) */
#hero-855 .blend-wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  z-index: 1; /* above bubbles, below content */
  pointer-events: none;
}
#hero-855 .blend-wave-svg { width: 100%; height: 180px; display: block; }

/* ---------- Theme colors for the wave blend ---------- */
/* Light mode defaults */
:root{
  /* bottom color of the hero (light) */
  --bw-hero: #f6f9ff;   /* tweak to match your hero light bg */
  /* background color of the NEXT section in light mode */
  --bw-next: #ffffff;   /* make this EXACTLY the next section bg */
}

/* Dark mode overrides */
body.dark-mode{
  --bw-hero: #0b0f2c;   /* your galaxy/hero bottom color */
  --bw-next: #0a131a;   /* your next section dark bg */
}

/* Ensure the next section actually uses --bw-next */
#services-966 { background: var(--bw-next); }

* ---- spacing between hero content and the wave ---- */
:root{
  /* base sizes for light mode */
  --bw-wave-h: 180px;   /* height of the SVG wave */
  --bw-gap:    40px;    /* extra space ABOVE the wave */
}
@media (min-width: 1024px){
  :root{
    --bw-wave-h: 200px;
    --bw-gap:    64px;
  }
}

/* Hero gets bottom padding = wave height + gap */
#hero-855{
  padding-bottom: calc(var(--bw-wave-h) + var(--bw-gap));
}

/* Wave stays pinned to the very bottom */
#hero-855 .blend-wave{
  bottom: -1px;               /* avoid hairline seam */
}
#hero-855 .blend-wave-svg{
  height: var(--bw-wave-h);
  width: 100%;
  display: block;
}

/* Keep next section tight to the wave (no extra white bar) */
#hero-855 + section{
  margin-top: 0;
}

#hero-855 .cs-wave,
#hero-855 .cs-dark,
#hero-855 .universe,
#hero-855 .shooting-star,
#hero-855 .satellite {
  display: none !important;
}

/* If any <img> tags are still there, hard-target the filenames */
#hero-855 img[src*="hero-dark.svg"],
#hero-855 img[src*="mobile-trees.svg"] {
  display: none !important;
}

/* Clip anything else that might overflow the hero edges */
#hero-855 { overflow: hidden; }

/* ---- spacing between hero content and the wave ---- */
:root{
  /* base sizes for light mode */
  --bw-wave-h: 180px;   /* height of the SVG wave */
  --bw-gap:    rem;    /* extra space ABOVE the wave */
}
@media (min-width: 1024px){
  :root{
    --bw-wave-h: 200px;
    --bw-gap:    px;
  }
}

/* Hero gets bottom padding = wave height + gap */
#hero-855{
  padding-bottom: calc(var(--bw-wave-h) + var(--bw-gap));
}

/* Wave stays pinned to the very bottom */
#hero-855 .blend-wave{
  bottom: -1px;               /* avoid hairline seam */
}
#hero-855 .blend-wave-svg{
  height: var(--bw-wave-h);
  width: 100%;
  display: block;
}

/* Keep next section tight to the wave (no extra white bar) */
#hero-855 + section{
  margin-top: 0;
}

.svc-title{
  
    padding-top: 10px;

}