@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");
/* =========================================================
   AQUASPHERE — THE ART OF AQUASCAPING
   Complete replacement for css/landing.css
========================================================= */

:root {
  --art-white: #ffffff;
  --art-black: #171717;
  --art-blue: #155fbc;
  --art-blue-bright: #0f73df;
  --art-blue-soft: #dcecff;
  --art-blue-pale: #f2f8ff;
  --art-line: rgba(20, 92, 177, 0.36);
  --art-muted: #4f5f73;
  --art-serif: "Cormorant Garamond", "Times New Roman", serif;
  --art-sans: "Montserrat", "Poppins", Arial, sans-serif;
}

/* =========================================================
   PAGE RESET
========================================================= */

html {
  scroll-behavior: smooth;
}

body.aquasphere-landing-page {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--art-white);
  color: var(--art-black);
  font-family: var(--art-sans);
}

.aquasphere-landing-page *,
.aquasphere-landing-page *::before,
.aquasphere-landing-page *::after {
  box-sizing: border-box;
}

.aquasphere-landing-page button,
.aquasphere-landing-page a {
  -webkit-tap-highlight-color: transparent;
}

.aquasphere-landing-page button {
  font: inherit;
}

.art-main {
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   AQUASPHERE — MINIMAL LANDING PAGE
   HEADER + HERO
========================================================= */

:root {
  --aqua-navy: #0b2239;
  --aqua-navy-soft: #24415d;
  --aqua-white: #ffffff;

  --aqua-font:
    "Montserrat",
    "Poppins",
    Arial,
    sans-serif;

  --aqua-brand-font:
    "Dune Rise",
    "Michroma",
    "Montserrat",
    sans-serif;
}


/* =========================================================
   PAGE
========================================================= */

html {
  scroll-behavior: smooth;
}

body.aquasphere-landing-page {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  background: #dcebf4;

  color: var(--aqua-navy);

  font-family: var(--aqua-font);
}

.aquasphere-landing-page *,
.aquasphere-landing-page *::before,
.aquasphere-landing-page *::after {
  box-sizing: border-box;
}

.aquasphere-landing-page button,
.aquasphere-landing-page a {
  -webkit-tap-highlight-color: transparent;
}

.aquasphere-landing-page button {
  font: inherit;
}

.aqua-landing-main {
  width: 100%;
}


/* =========================================================
   AQUASPHERE — MINIMAL HOME NAVIGATION
========================================================= */

.aqua-header {
  position: absolute;

  top: 0;
  left: 50%;

  z-index: 1000;

  width:
    min(
      calc(100% - 120px),
      1380px
    );

  height: 100px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  transform:
    translateX(-50%);

  background: transparent;
}


/* =========================================================
   BRAND
========================================================= */

.aqua-home-brand {
  justify-self: start;

  color: #1c2f41;

  font-family:
    var(--aqua-brand-font);

  font-size:
    17px;

  font-weight: 400;

  letter-spacing:
    0.25em;

  line-height: 1;

  text-decoration: none;

  transform: translateX(-120px);
}


/* =========================================================
   NAVIGATION
========================================================= */

.aqua-top-navigation {
  grid-column: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(
      35px,
      4vw,
      68px
    );
}


.aqua-nav-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #52606c;

  font-size:
    clamp(
      10px,
      0.72vw,
      13px
    );

  font-weight: 400;

  letter-spacing:
    0.02em;

  text-decoration: none;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}


.aqua-nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  top: calc(100% + 11px);

  width: 0;
  height: 1px;

  background: #24394c;

  transform:
    translateX(-50%);

  transition:
    width 0.25s ease;
}


.aqua-nav-link:hover,
.aqua-nav-link.active {
  color: #172d40;
}


.aqua-nav-link:hover::after,
.aqua-nav-link.active::after {
  width: 31px;
}


/* =========================================================
   NAV RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .aqua-header {
    width:
      calc(100% - 40px);

    height: 82px;

    grid-template-columns:
      auto
      1fr;
  }

  .aqua-home-brand {
    font-size: 13px;
  }

  .aqua-top-navigation {
    justify-self: end;

    gap: 22px;
  }

  .aqua-nav-link {
    font-size: 9px;
  }

}


@media (max-width: 650px) {

  .aqua-header {
    width:
      calc(100% - 28px);

    height: 68px;

    display: flex;

    justify-content: center;
  }

  .aqua-home-brand {
    display: none;
  }

  .aqua-top-navigation {
    width: 100%;

    justify-content: space-between;

    gap: 10px;
  }

  .aqua-nav-link {
    font-size: 8px;
  }

}

/* =========================================================
   AQUASPHERE — ULTRA MINIMAL HOME
========================================================= */

.aqua-minimal-home {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7fafc;
  color: #1c2f41;
}

/* =========================================================
   LIGHT WATER BACKGROUND
========================================================= */

.aqua-minimal-home-background {
  position: absolute;
  inset: 0;
  z-index: -3;

  background-image: url("../assets/images/home-bg-elegant-bw.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;

  transform: none;
  opacity: 1;
  filter: none;
}

/* =========================================================
   SOFT WHITE OVERLAY
========================================================= */

.aqua-minimal-home-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.36) 16%,
      rgba(248, 250, 252, 0.60) 38%,
      rgba(245, 248, 250, 0.82) 62%,
      rgba(242, 246, 249, 0.96) 100%
    ),
    radial-gradient(
      circle at 50% 62%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0) 55%
    );
}

/* =========================================================
   CENTER CONTENT
========================================================= */

.aqua-minimal-home-content {
  position: relative;
  z-index: 10;
  width: min(calc(100% - 80px), 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* =========================================================
   SMALL TOP TEXT
========================================================= */

.aqua-minimal-home-kicker {
  margin-bottom: 24px;
  color: rgba(28, 47, 65, 0.58);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* =========================================================
   MAIN AQUASPHERE WORDMARK
========================================================= */

.aqua-minimal-home-title {
  margin: 0;
  color: #162b3d;
  font-family: var(--aqua-brand-font);
  font-size: clamp(58px, 8vw, 122px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 0.95;
  text-shadow: 0 8px 24px rgba(255, 255, 255, 0.28);
}

/* =========================================================
   SMALL LINE
========================================================= */

.aqua-minimal-home-line {
  width: 52px;
  height: 1px;
  display: block;
  margin: 28px auto 0;
  background: rgba(28, 47, 65, 0.44);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.aqua-minimal-home-description {
  margin: 18px 0 0;
  color: rgba(28, 47, 65, 0.72);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   SINGLE MINIMAL BUTTON
========================================================= */

.aqua-minimal-home-button {
  min-width: 145px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding: 0 18px;
  border: 1px solid rgba(28, 47, 65, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #162b3d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(28, 47, 65, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.aqua-minimal-home-button svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.5;
  transition: transform 0.22s ease;
}

.aqua-minimal-home-button:hover {
  transform: translateY(-2px);
  border-color: #162b3d;
  background: #162b3d;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(22, 43, 61, 0.16);
}

.aqua-minimal-home-button:hover svg {
  transform: translateX(3px);
}

/* =========================================================
   SOFT ENTRANCE
========================================================= */

@keyframes aquaMinimalHomeReveal {

  from {
    opacity: 0;

    transform:
      translateY(16px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.aqua-minimal-home-content {
  animation:
    aquaMinimalHomeReveal
    0.9s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aqua-minimal-home {
    min-height:
      680px;
  }


  .aqua-minimal-home-content {
    width:
      calc(
        100% - 50px
      );
  }


  .aqua-minimal-home-title {
    font-size:
      clamp(
        52px,
        10vw,
        90px
      );

    letter-spacing:
      0.12em;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .aqua-minimal-home {
    min-height:
      640px;
  }


  .aqua-minimal-home-background {
    background-position:
      67%
      top;
  }


  .aqua-minimal-home-content {
    width:
      calc(
        100% - 28px
      );
  }


  .aqua-minimal-home-kicker {
    margin-bottom:
      20px;

    font-size:
      7px;
  }


  .aqua-minimal-home-title {
    font-size:
      clamp(
        38px,
        11vw,
        58px
      );

    letter-spacing:
      0.09em;
  }


  .aqua-minimal-home-line {
    margin-top:
      22px;
  }


  .aqua-minimal-home-description {
    font-size:
      8px;
  }


  .aqua-minimal-home-button {
    min-width:
      135px;

    height:
      40px;

    margin-top:
      25px;

    font-size:
      8px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aqua-minimal-home-content {
    animation:
      none;
  }


  .aqua-minimal-home-button,
  .aqua-minimal-home-button svg {
    transition:
      none;
  }

}
/* =========================================================
   AUTH MODALS ABOVE LANDING PAGE
========================================================= */

.login-modal,
.signup-modal {
  z-index: 5000;
}
/* =========================================================
   AQUASPHERE — MINIMAL FEATURES SECTION
========================================================= */

.aqua-features-section {
  width: 100%;

  padding:
    110px
    0;

  background:
    #f7f8f9;

  color:
    #1f3040;

  scroll-margin-top: 0;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.aqua-features-layout {
  width:
    min(
      calc(100% - 120px),
      1380px
    );

  margin:
    0
    auto;

  display:
    block;
}



/* =========================================================
   MAIN CONTENT
========================================================= */

.aqua-features-main {
  min-width: 0;
}


/* =========================================================
   HEADING
========================================================= */

.aqua-features-heading {
  margin-bottom:
    55px;

  text-align:
    center;
}


.aqua-features-heading > span:first-child {
  display: block;

  margin-bottom:
    13px;

  color:
    #7b8790;

  font-size:
  9px;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.aqua-features-heading h2 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

font-size:
  clamp(
    34px,
    3.5vw,
    52px
  );

  font-weight:
    400;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}


.aqua-features-heading-line {
  width: 42px;
  height: 1px;

  display: block;

margin:
  20px
  auto
  0;

  background:
    #263b4d;
}

.aqua-features-heading-description {
  max-width:
    520px;

  margin:
    18px
    auto
    0;

  color:
    #7b8790;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    11px;

  font-weight:
    400;

  line-height:
    1.7;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.aqua-features-grid {
  display: grid;

  grid-template-columns:
    1.3fr
    0.8fr;

  grid-template-areas:
    "one two"
    "three four";

  gap:
    16px;
}


.aqua-feature-card:nth-child(1) {
  grid-area:
    one;
}


.aqua-feature-card:nth-child(2) {
  grid-area:
    two;
}


.aqua-feature-card:nth-child(3) {
  grid-area:
    three;
}


.aqua-feature-card:nth-child(4) {
  grid-area:
    four;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.aqua-feature-card {
  min-height:
    225px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    30px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.07
    );

  border-radius:
    10px;

  background:
    #eef0f1;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}


.aqua-feature-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(
      31,
      48,
      64,
      0.13
    );

  background:
    #ffffff;
}


/* =========================================================
   CARD TOP
========================================================= */

.aqua-feature-card-top {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


.aqua-feature-number {
  color:
    #7f8991;

  font-size:
    11px;

  font-weight:
    500;

  letter-spacing:
    0.1em;
}


.aqua-feature-card-top svg {
width:
  22px;

height:
  22px;

  color:
    #536574;

  stroke-width:
    1.4;
}


/* =========================================================
   FEATURE PREVIEWS
========================================================= */

.aqua-feature-preview {
  position: relative;
  flex: 0 0 102px;
  min-width: 0;
  height: 102px;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid rgba(94, 144, 159, 0.18);
  border-radius: 9px;
  color: #35536a;
  background: linear-gradient(135deg, #f5fbfc, #e5f3f5);
}

.aqua-feature-preview-designer {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 34%, rgba(255,255,255,.7) 0 2px, transparent 3px),
    linear-gradient(180deg, #b6e6eb 0%, #d9f0e9 70%, #a79b79 71%, #756c53 100%);
}

.aqua-preview-tank {
  position: absolute;
  inset: 10px 13% 15px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.84);
  border-bottom-width: 5px;
  border-radius: 5px 5px 8px 8px;
  box-shadow: 0 5px 16px rgba(25, 76, 91, .14);
}

.aqua-preview-plant {
  position: absolute;
  bottom: 1px;
  width: 32px;
  height: 62px;
  background: repeating-linear-gradient(78deg, transparent 0 7px, rgba(28, 116, 91, .88) 8px 10px, transparent 11px 15px);
  transform-origin: bottom;
}

.aqua-preview-plant-one { left: 13%; }
.aqua-preview-plant-two { right: 12%; height: 48px; transform: scaleX(-1); }

.aqua-preview-rock {
  position: absolute;
  bottom: 2px;
  left: 42%;
  width: 38px;
  height: 20px;
  border-radius: 60% 50% 12% 14%;
  background: linear-gradient(145deg, #9c9888, #5e665e);
}

.aqua-preview-fish {
  position: absolute;
  top: 42%;
  left: 43%;
  width: 27px;
  height: 13px;
  border-radius: 55% 45% 45% 55%;
  background: #ed9c51;
  clip-path: polygon(0 50%, 18% 23%, 65% 18%, 100% 0, 88% 50%, 100% 100%, 65% 82%, 18% 77%);
  filter: drop-shadow(0 2px 2px rgba(20, 56, 65, .2));
}

.aqua-preview-caption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #fff;
  font-size: 9px;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(22, 48, 57, .55);
}

.aqua-preview-caption b {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(22, 83, 101, .58);
}

.aqua-feature-preview-compatibility {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
  background: linear-gradient(115deg, #e8f8f5, #f3fbfc 52%, #e4f4f8);
}

.aqua-preview-species {
  display: grid;
  width: 61px;
  height: 45px;
  place-items: center;
  border: 1px solid rgba(36, 151, 169, .22);
  border-radius: 8px;
  color: #176f83;
  background: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 700;
}

.aqua-preview-versus {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1ba4bd;
  font-size: 8px;
  font-weight: 800;
}

.aqua-preview-status {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: #34836e;
  font-size: 8px;
}

.aqua-preview-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: #4bb88b;
}

.aqua-feature-preview-health {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(120deg, #f7fcfc, #e8f7f3);
}

.aqua-preview-metric {
  display: grid;
  grid-template-columns: 58px minmax(20px, 1fr) 38px;
  align-items: center;
  gap: 9px;
  color: #587185;
  font-size: 8px;
}

.aqua-preview-metric > b { font-size: 9px; }
.aqua-preview-metric > strong { color: #234c61; font-size: 9px; text-align: right; }

.aqua-preview-metric > i {
  height: 5px;
  overflow: hidden;
  border-radius: 6px;
  background: #d6e8eb;
}

.aqua-preview-metric > i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27aec1, #60c6a0);
}

.aqua-preview-metric > .aqua-preview-good {
  grid-column: 2 / 4;
  justify-self: end;
  color: #28846a;
}

.aqua-feature-preview-guidance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  background: linear-gradient(120deg, #f8fcfa, #e8f6ef);
}

.aqua-feature-preview-guidance > span {
  color: #426a64;
  font-size: 9px;
  font-weight: 600;
}

.aqua-feature-preview-guidance > span > i {
  display: inline-grid;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #55b58d;
  font-size: 9px;
  font-style: normal;
}

.aqua-feature-preview-guidance .aqua-preview-guidance-note {
  color: #79928c;
  font-size: 8px;
  font-weight: 400;
}


/* =========================================================
   CARD COPY
========================================================= */

.aqua-feature-card-copy h3 {
margin:
  0
  0
  10px;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    19px;

  font-weight:
    500;

  letter-spacing:
    -0.025em;
}


.aqua-feature-card-copy p {
  max-width:
    440px;

  margin:
    0;

  color:
    #7b8790;

  font-size:
    11px;

line-height:
  1.65;
}


/* =========================================================
   DESKTOP ASYMMETRY
========================================================= */

.aqua-feature-card:nth-child(1),
.aqua-feature-card:nth-child(4) {
  min-height:
    260px;
}


.aqua-feature-card:nth-child(2),
.aqua-feature-card:nth-child(3) {
  min-height:
    225px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .aqua-features-layout {
    width:
      calc(
        100% - 50px
      );

    grid-template-columns:
      170px
      minmax(0, 1fr);

    gap:
      40px;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 760px) {

  .aqua-features-section {
    padding:
      80px
      0;
  }


  .aqua-features-layout {
    width:
      calc(
        100% - 32px
      );

    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .aqua-features-intro p {
    max-width:
      350px;
  }


  .aqua-features-grid {
    grid-template-columns:
      1fr
      1fr;

    grid-template-areas:
      "one two"
      "three four";
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 540px) {

  .aqua-features-section {
    padding:
      68px
      0;
  }


  .aqua-features-layout {
    width:
      calc(
        100% - 24px
      );
  }


  .aqua-features-heading {
    margin-bottom:
      28px;
  }


  .aqua-features-heading h2 {
    font-size:
      30px;
  }


  .aqua-features-grid {
    grid-template-columns:
      1fr;

    grid-template-areas:
      "one"
      "two"
      "three"
      "four";

    gap:
      10px;
  }


  .aqua-feature-card,
  .aqua-feature-card:nth-child(1),
  .aqua-feature-card:nth-child(2),
  .aqua-feature-card:nth-child(3),
  .aqua-feature-card:nth-child(4) {
    min-height:
      210px;
  }

  .aqua-feature-preview {
    flex-basis: 82px;
    height: 82px;
    margin: 7px 0;
  }

}
/* =========================================================
   AQUASPHERE — MINIMAL TEMPLATES SECTION
========================================================= */

.aqua-templates-section {
  width: 100%;

  padding:
    110px
    0
    120px;

  background:
    #ffffff;

  color:
    #1f3040;

  scroll-margin-top:
    0;
}


/* =========================================================
   CONTAINER
========================================================= */

.aqua-templates-container {
  width:
    min(
      calc(100% - 120px),
      1380px
    );

  margin:
    0
    auto;
}


/* =========================================================
   HEADING
========================================================= */

.aqua-templates-heading {
  margin-bottom:
    55px;

  text-align:
    center;
}


.aqua-templates-heading > span:first-child {
  display:
    block;

  margin-bottom:
    13px;

  color:
    #7b8790;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.aqua-templates-heading h2 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

font-size:
  clamp(
    34px,
    3.5vw,
    52px
  );

  font-weight:
    400;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}


.aqua-templates-heading-line {
  width:
    42px;

  height:
    1px;

  display:
    block;

  margin:
    20px
    auto
    0;

  background:
    #263b4d;
}

.aqua-templates-heading-description {
  max-width:
    520px;

  margin:
    18px
    auto
    0;

  color:
    #7b8790;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    11px;

  font-weight:
    400;

  line-height:
    1.7;
}

/* =========================================================
   TEMPLATE CAROUSEL GRID
========================================================= */

.aqua-templates-grid {
  --aqua-template-card-height:
    330px;

  --aqua-template-track-gap:
    16px;

  --aqua-template-loop-shift:
    -1730px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


/* =========================================================
   COLUMN VIEWPORT
   ONLY ONE FULL CARD IS VISIBLE
========================================================= */

.aqua-template-column {
  position:
    relative;

  min-width:
    0;

height:
  465px;

  overflow:
    hidden;

  border-radius:
    10px;

  contain:
    paint;
}


/* =========================================================
   MOVING VERTICAL TRACK
========================================================= */

.aqua-template-track {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--aqua-template-track-gap);

  width:
    100%;

  will-change:
    transform;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  animation:
    aquaTemplateVerticalLoop
    30s
    linear
    infinite;
}


/* COLUMN 01 + 03
   MOVE UPWARD
*/

.aqua-template-column-up
.aqua-template-track {
  animation-direction:
    normal;
}


/* COLUMN 02 + 04
   MOVE DOWNWARD
*/

.aqua-template-column-down
.aqua-template-track {
  animation-direction:
    reverse;
}


/* =========================================================
   TEMPLATE CARD
========================================================= */

.aqua-template-card {
  flex:
    0
    0
    var(--aqua-template-card-height);

  width:
    100%;

  height:
    var(--aqua-template-card-height);

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    30px;

  border:
    1px
    solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius:
    10px;

  background:
    #f1f3f4;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.aqua-template-card::before {
  content: "";
  display: block;
  flex: 0 0 126px;
  height: 126px;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 7px;
  background-color: #b9dfe4;
  background-image:
    radial-gradient(ellipse at 50% 105%, rgba(34, 87, 67, .78) 0 17%, transparent 18%),
    radial-gradient(ellipse at 20% 94%, rgba(97, 105, 81, .86) 0 9%, transparent 10%),
    radial-gradient(ellipse at 78% 96%, rgba(111, 111, 87, .82) 0 11%, transparent 12%),
    repeating-linear-gradient(78deg, transparent 0 27px, rgba(44, 121, 91, .68) 28px 30px, transparent 31px 40px),
    linear-gradient(180deg, #a9d8e4 0%, #d7eee3 70%, #d2bf96 71%, #aa966e 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .17), 0 5px 14px rgba(31, 70, 81, .08);
}

.aqua-template-column-up .aqua-template-card:nth-child(2)::before,
.aqua-template-column-down .aqua-template-card:nth-child(3)::before {
  background-image:
    radial-gradient(ellipse at 51% 104%, rgba(49, 85, 70, .86) 0 21%, transparent 22%),
    radial-gradient(ellipse at 26% 92%, rgba(102, 99, 79, .92) 0 13%, transparent 14%),
    radial-gradient(ellipse at 76% 95%, rgba(96, 101, 83, .85) 0 12%, transparent 13%),
    repeating-linear-gradient(104deg, transparent 0 37px, rgba(51, 119, 89, .66) 38px 40px, transparent 41px 51px),
    linear-gradient(180deg, #9fcbd4 0%, #d4e6d8 70%, #bba77d 71%, #95835f 100%);
}

.aqua-template-column-up .aqua-template-card:nth-child(3)::before,
.aqua-template-column-down .aqua-template-card:nth-child(2)::before {
  background-image:
    radial-gradient(ellipse at 50% 108%, rgba(47, 104, 78, .78) 0 12%, transparent 13%),
    radial-gradient(ellipse at 31% 93%, rgba(115, 113, 91, .85) 0 10%, transparent 11%),
    radial-gradient(ellipse at 72% 94%, rgba(118, 111, 84, .86) 0 13%, transparent 14%),
    repeating-linear-gradient(68deg, transparent 0 32px, rgba(68, 143, 100, .72) 33px 36px, transparent 37px 46px),
    linear-gradient(180deg, #b5e0e5 0%, #e3f1df 69%, #cfbf98 70%, #a08e68 100%);
}

.aqua-template-column-up .aqua-template-card:nth-child(4)::before,
.aqua-template-column-down .aqua-template-card:nth-child(4)::before {
  background-image:
    radial-gradient(ellipse at 54% 105%, rgba(63, 91, 72, .8) 0 15%, transparent 16%),
    radial-gradient(ellipse at 19% 95%, rgba(126, 125, 103, .9) 0 12%, transparent 13%),
    radial-gradient(ellipse at 81% 96%, rgba(115, 112, 91, .88) 0 10%, transparent 11%),
    repeating-linear-gradient(88deg, transparent 0 40px, rgba(56, 130, 99, .62) 41px 43px, transparent 44px 53px),
    linear-gradient(180deg, #acd7e3 0%, #d7e9e7 70%, #c7b78e 71%, #9f8a65 100%);
}


/*
  HOVER DOES NOT MOVE THE CARD.

  Important:
  The vertical carousel already controls
  movement, so we avoid translateY hover
  to keep the loop perfectly smooth.
*/

.aqua-template-card:hover {
  background:
    #ffffff;

  border-color:
    rgba(
      31,
      48,
      64,
      0.16
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      31,
      48,
      64,
      0.05
    );
}


/* DUPLICATE CARD USED ONLY
   FOR THE SEAMLESS LOOP
*/

.aqua-template-card-clone {
  pointer-events:
    none;
}


/* =========================================================
   CARD TOP
========================================================= */

.aqua-template-card-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}


.aqua-template-card-top span {
  color:
    #89939b;

  font-size:
    11px;

  font-weight:
    500;

  letter-spacing:
    0.1em;
}


.aqua-template-card-top svg {
  width:
    22px;

  height:
    22px;

  color:
    #536574;

  stroke-width:
    1.4;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.aqua-template-card-copy small {
  display:
    block;

  margin-bottom:
    10px;

  color:
    #919aa1;

  font-size:
    8px;

  font-weight:
    500;

  letter-spacing:
    0.14em;
}


.aqua-template-card-copy h3 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    19px;

  font-weight:
    500;

  letter-spacing:
    -0.025em;

  line-height:
    1.3;
}


.aqua-template-card-copy p {
  margin:
    9px
    0
    0;

  color:
    #7b8790;

  font-size:
    11px;

  line-height:
    1.7;
}


/* =========================================================
   CONTINUOUS VERTICAL LOOP

   330px card
   +
   16px gap
   =
   346px per step

   346px × 5 transitions
   =
   1730px total movement
========================================================= */

@keyframes aquaTemplateVerticalLoop {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }


  to {
    transform:
      translate3d(
        0,
        var(--aqua-template-loop-shift),
        0
      );
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aqua-templates-container {
    width:
      calc(
        100% - 50px
      );
  }


  .aqua-templates-grid {
    --aqua-template-card-height:
      300px;

    --aqua-template-track-gap:
      14px;

    /*
      300 + 14 = 314
      314 × 5 = 1570
    */

    --aqua-template-loop-shift:
      -1570px;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      14px;
  }

  .aqua-template-column {
  height:
    420px;
}

  .aqua-template-card::before {
    flex-basis: 104px;
    height: 104px;
    margin-block: 8px;
  }



}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .aqua-templates-section {
    padding:
      75px
      0;
  }


  .aqua-templates-container {
    width:
      calc(
        100% - 24px
      );
  }


  .aqua-templates-heading {
    margin-bottom:
      36px;
  }


  .aqua-templates-heading h2 {
    font-size:
      30px;
  }


  .aqua-templates-heading-description {
    max-width:
      330px;

    font-size:
      10px;
  }


  .aqua-templates-grid {
    --aqua-template-card-height:
      230px;

    --aqua-template-track-gap:
      10px;

    /*
      230 + 10 = 240
      240 × 5 = 1200
    */

    --aqua-template-loop-shift:
      -1200px;

    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .aqua-template-column {
  height:
    330px;
}


  .aqua-template-card {
    padding:
      24px;
  }

  .aqua-template-card::before {
    flex-basis: 66px;
    height: 66px;
    margin-block: 5px;
  }


  .aqua-template-card-copy h3 {
    font-size:
      17px;
  }


  .aqua-template-card-copy p {
    font-size:
      10px;
  }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aqua-template-track {
    animation:
      none;

    transform:
      none;
  }

}

/* =========================================================
   AQUASPHERE — HOBBYIST REVIEWS
========================================================= */

.aqua-reviews-section {
  position: relative;

  width: 100%;

  padding:
    90px
    0
    100px;

  background:
    #f7f8f9;

  color:
    #1f3040;

  scroll-margin-top:
    0;
}


.aqua-reviews-anchor {
  position: absolute;

  top: 0;
  left: 0;

  width: 1px;
  height: 1px;

  pointer-events: none;
}


/* =========================================================
   MAIN WIREFRAME CONTAINER
========================================================= */

.aqua-reviews-shell {
  width:
    min(
      calc(100% - 120px),
      1380px
    );

  margin:
    0
    auto;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}

/* =========================================================
   TITLE
========================================================= */

.aqua-reviews-heading {
  margin-bottom:
    28px;

  text-align:
    center;
}


.aqua-reviews-heading > span:first-child {
  display:
    block;

  margin-bottom:
    13px;

  color:
    #7b8790;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}

.aqua-reviews-heading h2 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      34px,
      3.5vw,
      52px
    );

  font-weight:
    400;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}

.aqua-reviews-heading-line {
  width:
    42px;

  height:
    1px;

  display:
    block;

  margin:
    20px
    auto
    0;

  background:
    #263b4d;
}


.aqua-reviews-heading-description {
  max-width:
    520px;

  margin:
    18px
    auto
    0;

  color:
    #7b8790;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    11px;

  font-weight:
    400;

  line-height:
    1.7;
}

/* =========================================================
   CAROUSEL RADIO CONTROLS
========================================================= */

.aqua-reviews-carousel > input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

/* =========================================================
   REVIEW CATEGORY TABS
========================================================= */

.aqua-review-categories {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    42px;
}


.aqua-review-category-tab {
  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    15px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.58
    );

  color:
    #77838c;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.03em;

  cursor:
    pointer;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}


.aqua-review-category-tab:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(
      31,
      48,
      64,
      0.16
    );

  color:
    #263b4d;
}


#aquaReview01:checked
~ .aqua-review-categories
label[for="aquaReview01"],

#aquaReview02:checked
~ .aqua-review-categories
label[for="aquaReview02"],

#aquaReview03:checked
~ .aqua-review-categories
label[for="aquaReview03"],

#aquaReview04:checked
~ .aqua-review-categories
label[for="aquaReview04"],

#aquaReview05:checked
~ .aqua-review-categories
label[for="aquaReview05"],

#aquaReview06:checked
~ .aqua-review-categories
label[for="aquaReview06"] {
  border-color:
    #172b3d;

  background:
    #172b3d;

  color:
    #ffffff;
}


/* =========================================================
   SLIDES
========================================================= */

.aqua-reviews-slides {
  position: relative;

min-height:
  420px;
}


.aqua-review-slide {
  position: absolute;

  inset: 0;

  display:
    grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items:
    center;

  gap:
  95px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateX(18px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}


#aquaReview01:checked
~ .aqua-reviews-slides
.aqua-review-slide-01,

#aquaReview02:checked
~ .aqua-reviews-slides
.aqua-review-slide-02,

#aquaReview03:checked
~ .aqua-reviews-slides
.aqua-review-slide-03,

#aquaReview04:checked
~ .aqua-reviews-slides
.aqua-review-slide-04,

#aquaReview05:checked
~ .aqua-reviews-slides
.aqua-review-slide-05,

#aquaReview06:checked
~ .aqua-reviews-slides
.aqua-review-slide-06 {
  position:
    relative;

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateX(0);
}


/* =========================================================
   LEFT — STACKED IMAGE CARDS
========================================================= */

.aqua-review-images {
  position: relative;

  width: 100%;
max-width: 520px;

height:
  320px;

  margin:
    0
    auto;

    cursor:
  grab;

user-select:
  none;

-webkit-user-select:
  none;

touch-action:
  pan-y;

transition:
  transform 0.22s ease;
}
.aqua-review-images.is-review-dragging {
  cursor:
    grabbing;

  transition:
    none;
}


.aqua-review-image-card {
  position: absolute;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    10px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.07
    );

  border-radius:
    8px;

  background:
    #e1e4e6;

  color:
    #737f88;
}


.aqua-review-image-back {
  top:
    18px;

  left:
    0;
width:
  245px;

height:
  195px;

  background:
    #d8dcdf;
}


.aqua-review-image-front {
  right:
    5px;

  bottom:
    0;

width:
  360px;

height:
  255px;

  background:
    #cfd4d7;
}


.aqua-review-image-card svg {
  width:
    25px;

  height:
    25px;

  stroke-width:
    1.4;
}


.aqua-review-image-card span {
  color:
    #727e86;

  font-size:
    8px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   USER PROFILE PREVIEW CARDS
========================================================= */

.aqua-review-profile-preview {
  padding:
    24px;

  justify-content:
    center;

  align-items:
    center;

  gap:
    15px;

  text-align:
    center;

    will-change:
  transform,
  opacity;

backface-visibility:
  hidden;

-webkit-backface-visibility:
  hidden;

transform:
  translateZ(0);
}


/* CURRENT USER — FRONT CARD */

.aqua-review-profile-preview.aqua-review-image-front {
  background:
    #ffffff;

  border-color:
    rgba(
      31,
      48,
      64,
      0.09
    );

  box-shadow:
    0
    18px
    45px
    rgba(
      31,
      48,
      64,
      0.08
    );
}


/* NEXT USER — BACK CARD */

.aqua-review-profile-preview.aqua-review-image-back {
  background:
    #e9ecee;

  border-color:
    rgba(
      31,
      48,
      64,
      0.06
    );
}


/* =========================================================
   PROFILE AVATAR
========================================================= */

.aqua-review-profile-avatar {
  width:
    76px;

  height:
    76px;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    auto;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius:
    50%;

  background:
    #f4f6f7;

  color:
    #506474;
}


.aqua-review-profile-current
.aqua-review-profile-avatar {
  width:
    88px;

  height:
    88px;

  background:
    #eef1f3;
}


.aqua-review-profile-avatar svg {
  width:
    27px;

  height:
    27px;

  stroke-width:
    1.35;
}


/* READY FOR REAL USER PROFILE IMAGES */

.aqua-review-profile-avatar img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


/* =========================================================
   PROFILE TEXT
========================================================= */

.aqua-review-profile-copy {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    4px;
}


.aqua-review-profile-copy small {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #929ba2;

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.aqua-review-profile-copy strong {
  display:
    block;

  color:
    #263b4b;

  font-size:
    15px;

  font-weight:
    600;

  letter-spacing:
    -0.02em;

  line-height:
    1.25;
}


.aqua-review-profile-copy > span {
  color:
    #89949c;

  font-size:
    8px;

  font-weight:
    400;

  letter-spacing:
    0.02em;

  line-height:
    1.4;

  text-transform:
    none;
}


/* Front / current profile is slightly stronger */

.aqua-review-profile-current
.aqua-review-profile-copy strong {
  font-size:
    17px;
}


/* Back / next profile stays visually secondary */

.aqua-review-image-back
.aqua-review-profile-copy {
  opacity:
    0.78;
}


/* READY FOR REAL IMAGES LATER */

.aqua-review-image-card img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


/* =========================================================
   RIGHT — REVIEW CARD
========================================================= */

.aqua-review-content {
  width:
    100%;

min-height:
  300px;

  display:
    flex;

  flex-direction:
    column;

padding:
  34px
  36px
  28px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.06
    );

  border-radius:
    8px;

  background:
    #ffffff;
}

.aqua-review-category-tag {
  align-self:
    flex-start;

  margin-bottom:
    14px;

  padding:
    6px
    9px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius:
    999px;

  background:
    #f4f6f7;

  color:
    #71808a;

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


/* =========================================================
   USER
========================================================= */

.aqua-review-user {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.aqua-review-avatar {
width:
  44px;

height:
  44px;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    auto;

  border-radius:
    50%;

  background:
    #eceff1;

  color:
    #596c7a;
}


.aqua-review-avatar svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    1.4;
}


.aqua-review-user strong,
.aqua-review-user small {
  display:
    block;
}


.aqua-review-user strong {
  color:
    #273b4b;

  font-size:
    12px;

  font-weight:
    600;
}


.aqua-review-user small {
  margin-top:
    2px;

  color:
    #939ba1;

  font-size:
    7px;
}


/* =========================================================
   STARS
========================================================= */

.aqua-review-stars {
  margin-top:
    9px;

  color:
    #354958;

  font-size:
    10px;

  letter-spacing:
    0.09em;
}


/* =========================================================
   REVIEW MESSAGE
========================================================= */

.aqua-review-message {
  margin:
    20px
    0
    24px;

  color:
    #78858e;

font-size:
  12px;

  font-weight:
    400;

  line-height:
    1.75;
}


/* =========================================================
   SEE MORE / NEXT REVIEW
========================================================= */

.aqua-review-next {
  width:
    100%;

  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    auto;

  border-radius:
    999px;

  background:
    #172b3d;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.aqua-review-next svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    1.5;
}


.aqua-review-next:hover {
  transform:
    translateY(-2px);

  background:
    #0e2233;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aqua-reviews-shell {
    width:
      calc(
        100% - 50px
      );

    padding:
      34px
      30px
      40px;
  }


  .aqua-review-slide {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .aqua-reviews-slides {
    min-height:
      600px;
  }


  .aqua-review-images {
    max-width:
      500px;
  }


  .aqua-review-content {
    max-width:
      500px;

    margin:
      0
      auto;
  }

  .aqua-review-categories {
  max-width:
    620px;

  margin:
    0
    auto
    35px;
}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .aqua-reviews-section {
    padding:
      75px
      0;
  }


  .aqua-reviews-shell {
    width:
      calc(
        100% - 24px
      );

    padding:
      27px
      16px
      30px;

    border-radius:
      20px;
  }


.aqua-reviews-heading {
  margin-bottom:
    28px;
}


 .aqua-reviews-heading h2 {
  font-size:
    30px;
}

.aqua-reviews-heading-description {
  max-width:
    330px;

  font-size:
    10px;
}


  .aqua-reviews-slides {
    min-height:
      545px;
  }


  .aqua-review-images {
    max-width:
      330px;

    height:
      225px;
  }


  .aqua-review-image-back {
    width:
      160px;

    height:
      130px;
  }


  .aqua-review-image-front {
    width:
      235px;

    height:
      175px;
  }


  .aqua-review-content {
    min-height:
      230px;

    padding:
      22px
      20px
      18px;
  }


  .aqua-review-categories {
  width:
    100%;

  justify-content:
    flex-start;

  flex-wrap:
    nowrap;

  gap:
    7px;

  margin-bottom:
    28px;

  padding-bottom:
    5px;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.aqua-review-categories::-webkit-scrollbar {
  display:
    none;
}


.aqua-review-category-tab {
  flex:
    0
    0
    auto;

  min-height:
    32px;

  padding:
    0
    12px;

  font-size:
    8px;
}

}

/* =========================================================
   AQUASPHERE — MINIMAL COMMUNITY SECTION
========================================================= */

.aqua-community-section {
  width: 100%;

  padding:
    110px
    0
    120px;

  background:
    #ffffff;

  color:
    #1f3040;

  scroll-margin-top:
    0;
}


/* =========================================================
   CONTAINER
========================================================= */

.aqua-community-container {
  width:
    min(
      calc(100% - 120px),
      1380px
    );

  margin:
    0
    auto;
}


/* =========================================================
   HEADING
========================================================= */

.aqua-community-heading {
  margin-bottom:
    55px;

  text-align:
    center;
}


.aqua-community-heading > span:first-child {
  display:
    block;

  margin-bottom:
    13px;

  color:
    #7b8790;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.aqua-community-heading h2 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

font-size:
  clamp(
    34px,
    3.5vw,
    52px
  );

  font-weight:
    400;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}


.aqua-community-heading-line {
  width:
    42px;

  height:
    1px;

  display:
    block;

  margin:
    20px
    auto
    0;

  background:
    #263b4d;
}

.aqua-community-heading-description {
  max-width: 520px;

  margin:
    18px
    auto
    0;

  color:
    #7b8790;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

font-size:
  11px;

  font-weight:
    400;

  line-height:
    1.7;
}


.aqua-community-card-copy small {
  display: block;

  margin-bottom: 8px;

  color:
    #929aa0;

  font-size:
    7px;

  font-weight:
    500;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   GRID
========================================================= */

.aqua-community-grid {
  position: relative;

  width: 100vw;

  margin-left:
    calc(
      50% - 50vw
    );

  height: 440px;

  display: block;

  overflow: hidden;

  cursor: grab;

  user-select: none;
  -webkit-user-select: none;

  touch-action: pan-y;

  --aqua-community-gap:
    16px;

  --aqua-community-card-width:
    clamp(
      320px,
      21.5vw,
      390px
    );
}


.aqua-community-grid.is-dragging {
  cursor: grabbing;
}
/* =========================================================
   COMMUNITY CARD
========================================================= */

.aqua-community-card {
  position: absolute;

  top: 0;
  left: 0;

  width: var(--aqua-community-card-width);
  min-height: 440px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius: 10px;

  background: #ffffff;

  transition:
    border-color 0.25s ease,
    background 0.25s ease;

will-change: transform;
}

.aqua-community-card:hover {
  border-color:
    rgba(
      31,
      48,
      64,
      0.16
    );

  background:
    #fafbfb;
}




/* =========================================================
   TOP ROW
========================================================= */

.aqua-community-card-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;
}


.aqua-community-card-top span {
  color:
    #8b959d;

  font-size:
    8px;

  font-weight:
    500;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.aqua-community-card-top svg {
  width:
    16px;

  height:
    16px;

  color:
    #60717f;

  stroke-width:
    1.4;
}


/* =========================================================
   IMAGE PREVIEW
========================================================= */

.aqua-community-card-image {
  width: 100%;
  height: 170px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin-top: 18px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  border-radius:
    10px;

  background:
    linear-gradient(
      180deg,
      #f7f9fb 0%,
      #eef3f6 100%
    );

  color:
    #7c8994;

  overflow: hidden;
}


.aqua-community-card-image svg {
width: 27px;
height: 27px;

  color:
    #647786;

  stroke-width:
    1.5;
}


.aqua-community-card-image span {
  color:
    #8d98a0;

font-size:
  9px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.aqua-community-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   CARD COPY
========================================================= */

.aqua-community-card-copy {
  margin-top:
    18px;
}


.aqua-community-card-copy small {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #929aa0;

  font-size:
  9px;

  font-weight:
    500;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.aqua-community-card-copy h3 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

 font-size:
  18px;

  font-weight:
    500;

  letter-spacing:
    -0.025em;

  line-height:
    1.35;
}


.aqua-community-card-copy p {
  margin:
    9px
    0
    0;

  color:
    #7b8790;

 font-size:
  10px;

  line-height:
    1.7;
}


/* =========================================================
   AUTHOR
========================================================= */

.aqua-community-author {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    auto;

  padding-top:
    22px;
}


.aqua-community-avatar {
width:
  36px;

height:
  36px;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    auto;

  border-radius:
    50%;

  background:
    #eef1f2;

  color:
    #536574;
}


.aqua-community-avatar svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    1.4;
}


.aqua-community-author div {
  min-width:
    0;
}


.aqua-community-author strong,
.aqua-community-author small {
  display:
    block;
}


.aqua-community-author strong {
  color:
    #344858;

 font-size:
  10px;

  font-weight:
    500;
}


.aqua-community-author small {
  margin-top:
    2px;

  color:
    #929aa0;

  font-size:
  8px;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aqua-community-container {
    width:
      calc(
        100% - 50px
      );
  }


.aqua-community-grid {

  height: 440px;

  --aqua-community-visible-cards: 2;

}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .aqua-community-section {
    padding:
      75px
      0;
  }


  .aqua-community-container {
    width:
      calc(
        100% - 24px
      );
  }


  .aqua-community-heading {
    margin-bottom:
      36px;
  }


  .aqua-community-heading h2 {
    font-size:
      30px;
  }

.aqua-community-grid {
  height: 340px;
}


.aqua-community-grid {

  height: 340px;

  --aqua-community-visible-cards: 1;

}

.aqua-community-card-image {
  height:
    120px;
}

.aqua-community-card-copy {
  margin-top:
    16px;
}

}
/* =========================================================
   AQUASPHERE — MINIMAL FINAL CTA + FOOTER
========================================================= */

.aqua-final-section {
  width: 100%;

  background:
    #eceeef;

  color:
    #1f3040;
}


/* =========================================================
   FINAL CTA
========================================================= */

.aqua-final-cta {
  width: 100%;

  padding:
    95px
    0
    70px;

  background:
    #ffffff;
}


.aqua-final-cta-shape {
  position: relative;

  width:
    min(
      calc(100% - 120px),
      1180px
    );

  min-height:
    360px;

  margin:
    0
    auto;

  overflow:
    hidden;

  border-radius:
    24px;

  background:
    #eceeef;
}


/* =========================================================
   CTA COPY
========================================================= */

.aqua-final-cta-copy {
  position: relative;

  z-index: 3;

  width:
    52%;

  padding:
    70px
    0
    70px
    65px;
}


.aqua-final-cta-label {
  display: block;

  margin-bottom:
    16px;

  color:
    #7c878f;

  font-size:
    8px;

  font-weight:
    500;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.aqua-final-cta-copy h2 {
  margin:
    0;

  color:
    #1f3040;

  font-family:
    "Montserrat",
    "Poppins",
    sans-serif;

  font-size:
    clamp(
      34px,
      3.6vw,
      54px
    );

  font-weight:
    600;

  letter-spacing:
    -0.045em;

  line-height:
    1.05;
}


.aqua-final-cta-line {
  width:
    88px;

  height:
    1px;

  display:
    block;

  margin:
    24px
    0
    18px;

  background:
    #9ca5ab;
}


.aqua-final-cta-copy p {
  max-width:
    430px;

  margin:
    0;

  color:
    #737f87;

  font-size:
    10px;

  line-height:
    1.7;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.aqua-final-cta-button {
  min-width:
    115px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    27px;

  padding:
    0
    16px;

  border:
    0;

  border-radius:
    999px;

  background:
    #172b3d;

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.aqua-final-cta-button svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    1.5;
}


.aqua-final-cta-button:hover {
  transform:
    translateY(-2px);

  background:
    #0e2233;
}


/* =========================================================
   CTA RIGHT SHAPES
========================================================= */

.aqua-final-cta-visual {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width: 52%;

  pointer-events: none;
}


/* =========================================================
   FIRST WHITE CARD
   Continuous upward elevator loop
========================================================= */

.aqua-final-visual-tall {
  position: absolute;

  left: 16%;

  top: 100%;
  bottom: auto;

  width: 38%;
  height: 68%;

  overflow: hidden;

border-radius: 20px;

  background: #ffffff;

  backface-visibility: hidden;

  will-change: top;

  animation:
    aquaFinalTallContinuousLoop
    8s
    linear
    infinite;
}


/* =========================================================
   SECOND WHITE CARD
   Continuous downward elevator loop
========================================================= */

.aqua-final-visual-small {
  position: absolute;

  top: -68%;
  bottom: auto;

  right: 6%;

  width: 38%;
  height: 68%;

  overflow: hidden;

border-radius: 20px;

  background: #ffffff;

  backface-visibility: hidden;

  will-change: top;

  animation:
    aquaFinalSmallContinuousLoop
    8s
    linear
    infinite;
}


/* =========================================================
   TALL CARD LOOP
   Completely below -> moves upward ->
   completely above -> starts again below
========================================================= */

@keyframes aquaFinalTallContinuousLoop {

  0% {
    top: 100%;
  }

  100% {
    top: -68%;
  }

}


/* =========================================================
   SMALL CARD LOOP
   Completely above -> moves downward ->
   completely below -> starts again above
========================================================= */

@keyframes aquaFinalSmallContinuousLoop {

  0% {
    top: -68%;
  }

  100% {
    top: 100%;
  }

}


/* =========================================================
   IMAGE AREA INSIDE BOTH MOVING CARDS
========================================================= */

.aqua-final-card-image {
  width: 100%;
  height: 100%;

  background-color:
    #ffffff;

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    cover;

  pointer-events:
    none;
}

/* =========================================================
   FOOTER
========================================================= */

.aqua-minimal-footer {
  width:
    100%;

  background:
    #eceeef;
}


.aqua-minimal-footer-container {
  width:
    min(
      calc(100% - 120px),
      1180px
    );

  display:
    grid;

  grid-template-columns:
    minmax(300px, 1.5fr)
    repeat(
      3,
      minmax(120px, 0.65fr)
    );

  gap:
    60px;

  margin:
    0
    auto;

  padding:
    65px
    0
    55px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.aqua-minimal-footer-brand {
  max-width:
    390px;
}


.aqua-minimal-footer-logo {
  display:
    inline-block;

  color:
    #1f3040;

  font-family:
    var(--aqua-brand-font);

  font-size:
    16px;

  font-weight:
    400;

  letter-spacing:
    0.16em;

  text-decoration:
    none;
}


.aqua-minimal-footer-brand > p {
  max-width:
    350px;

  margin:
    20px
    0
    0;

  color:
    #7a858d;

  font-size:
    9px;

  line-height:
    1.7;
}


/* =========================================================
   FOOTER ACTION
========================================================= */

.aqua-minimal-footer-action {
  max-width:
    340px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-top:
    25px;

  padding:
    7px
    7px
    7px
    14px;

  border:
    1px solid
    rgba(
      31,
      48,
      64,
      0.1
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );
}


.aqua-minimal-footer-action span {
  color:
    #879198;

  font-size:
    8px;
}


.aqua-minimal-footer-action button {
  min-width:
    88px;

  height:
    31px;

  border:
    0;

  border-radius:
    999px;

  background:
    #172b3d;

  color:
    #ffffff;

  font-size:
    8px;

  cursor:
    pointer;
}


/* =========================================================
   FOOTER LINK COLUMNS
========================================================= */

.aqua-minimal-footer-column {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.aqua-minimal-footer-column h3 {
  margin:
    0
    0
    20px;

  color:
    #273b4b;

  font-size:
    10px;

  font-weight:
    600;
}


.aqua-minimal-footer-column a {
  margin-bottom:
    12px;

  color:
    #7e8991;

  font-size:
    9px;

  text-decoration:
    none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.aqua-minimal-footer-column a:hover {
  color:
    #1f3040;

  transform:
    translateX(3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.aqua-minimal-footer-bottom {
  width:
    min(
      calc(100% - 120px),
      1180px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  margin:
    0
    auto;

  padding:
    20px
    0
    30px;

  border-top:
    1px solid
    rgba(
      31,
      48,
      64,
      0.08
    );

  color:
    #949ca2;

  font-size:
    8px;
}


/* =========================================================
   FOOTER READABILITY POLISH
========================================================= */

.aqua-minimal-footer-logo {
  font-size:
    18px;
}


.aqua-minimal-footer-brand > p {
  color:
    #68757e;

  font-size:
    11px;

  line-height:
    1.75;
}


.aqua-minimal-footer-action span {
  color:
    #707b83;

  font-size:
    9px;
}


.aqua-minimal-footer-action button {
  font-size:
    9px;
}


.aqua-minimal-footer-column h3 {
  color:
    #1f3040;

  font-size:
    12px;
}


.aqua-minimal-footer-column a {
  color:
    #69767f;

  font-size:
    10px;

  line-height:
    1.5;
}


.aqua-minimal-footer-bottom {
  color:
    #7d888f;

  font-size:
    9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aqua-final-cta-shape,
  .aqua-minimal-footer-container,
  .aqua-minimal-footer-bottom {
    width:
      calc(
        100% - 50px
      );
  }


  .aqua-final-cta-copy {
    width:
      65%;

    padding-left:
      45px;
  }


  .aqua-final-cta-visual {
    width:
      38%;
  }


  .aqua-minimal-footer-container {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      45px
      35px;
  }


  .aqua-minimal-footer-brand {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .aqua-final-cta {
    padding:
      65px
      0
      50px;
  }


  .aqua-final-cta-shape {
    width:
      calc(
        100% - 24px
      );

    min-height:
      360px;
  }


  .aqua-final-cta-copy {
    width:
      100%;

    padding:
      50px
      28px
      165px;
  }


  .aqua-final-cta-copy h2 {
    font-size:
      34px;
  }


  .aqua-final-cta-visual {
    width:
      100%;
  }


  .aqua-final-visual-tall {
    top:
      auto;

    right:
      50px;

    bottom:
      -120px;

    width:
      125px;

    height:
      215px;
  }


  .aqua-final-visual-small {
    top:
      auto;

    right:
      -35px;

    bottom:
      -70px;

    width:
      140px;

    height:
      155px;
  }


  .aqua-minimal-footer-container {
    width:
      calc(
        100% - 28px
      );

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      38px
      22px;

    padding:
      50px
      0
      40px;
  }


  .aqua-minimal-footer-brand {
    grid-column:
      1 / -1;
  }


  .aqua-minimal-footer-action {
    max-width:
      100%;
  }


  .aqua-minimal-footer-bottom {
    width:
      calc(
        100% - 28px
      );

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      8px;
  }

}
/* =========================================================
   FINAL HERO TITLE SIZE / ALIGNMENT
   Keeps Dune Rise font but restores the old proportions
========================================================= */

.art-title-first {
  font-size: clamp(58px, 5vw, 92px) !important;
  white-space: nowrap !important;
}

.art-title-middle {
  font-size: clamp(36px, 3.2vw, 58px) !important;

  margin-top:
    clamp(8px, 0.9vh, 14px) !important;

  gap:
    clamp(18px, 1.5vw, 30px) !important;
}

.art-title-accent {
  font-size: clamp(60px, 5vw, 92px) !important;

  margin-top:
    clamp(10px, 1.2vh, 18px) !important;
}
/* =========================================
   NAVBAR — MINIMALISTIC SIZE
   ========================================= */

.navbar nav a,
.navbar .nav-links a,
nav a {
    font-size: 12px !important;
    letter-spacing: 2px;
    line-height: 1;
}

/* Keep the navbar clean and readable */
.navbar .nav-links,
.navbar nav {
    gap: 42px;
}

/* =========================================================
   ABOUT AQUASPHERE
========================================================= */

.aqua-about-section {
  position: relative;
  width: 100%;
  padding: 100px 0 110px;
  background: #f5f8f9;
  color: #1f3040;
  scroll-margin-top: 0;
}

.aqua-about-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.aqua-about-container {
  width: min(calc(100% - 120px), 1240px);
  margin: 0 auto;
}

.aqua-about-heading {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.aqua-about-heading > span,
.aqua-about-kicker {
  display: block;
  margin-bottom: 14px;
  color: #728797;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.aqua-about-heading h2 {
  margin: 0;
  color: #1f3040;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.aqua-about-heading p {
  max-width: 650px;
  margin: 20px auto 0;
  color: #728393;
  font-size: 14px;
  line-height: 1.8;
}

.aqua-about-content {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 20px;
}

.aqua-about-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 390px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #dce9ed;
  border-top: 3px solid #1ba5b9;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 15%, #edf8f8 100%);
  box-shadow: 0 18px 42px rgba(42, 79, 91, .06);
}

.aqua-about-story .aqua-about-kicker {
  margin-bottom: 18px;
  color: #1598ad;
}

.aqua-about-story h3 {
  max-width: 430px;
  margin: 0;
  color: #1f4053;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.25;
}

.aqua-about-story > p {
  margin: 18px 0 0;
  color: #637a8b;
  font-size: 13px;
  line-height: 1.8;
}

.aqua-about-story > p.aqua-about-note {
  margin-top: 13px;
  padding: 12px 14px;
  border-left: 2px solid #7ac9c9;
  border-radius: 0 8px 8px 0;
  background: rgba(224, 243, 242, .7);
  color: #668078;
  font-size: 11px;
}

.aqua-about-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  color: #087f99;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.aqua-about-link svg {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}

.aqua-about-link:hover svg { transform: translateX(3px); }

.aqua-about-steps {
  display: grid;
  align-content: stretch;
  gap: 12px;
}

.aqua-about-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 16px;
  min-height: 120px;
  padding: 20px 24px;
  border: 1px solid #e0e9ed;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(42, 79, 91, .035);
}

.aqua-about-step > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #078aa3;
  background: #e5f6f8;
  font-size: 11px;
  font-weight: 700;
}

.aqua-about-step h3 {
  margin: 0;
  color: #24475a;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.aqua-about-step p {
  margin: 7px 0 0;
  color: #748797;
  font-size: 11px;
  line-height: 1.65;
}

.aqua-about-step > svg {
  width: 22px;
  height: 22px;
  justify-self: end;
  color: #48a9b3;
  stroke-width: 1.6;
}

@media (max-width: 900px) {
  .aqua-about-container { width: calc(100% - 50px); }
  .aqua-about-content { grid-template-columns: 1fr; }
  .aqua-about-story { min-height: 0; }
  .aqua-about-link { margin-top: 8px; }
}

@media (max-width: 560px) {
  .aqua-about-section { padding: 72px 0 78px; }
  .aqua-about-container { width: calc(100% - 28px); }
  .aqua-about-heading { margin-bottom: 30px; }
  .aqua-about-heading h2 { font-size: 32px; }
  .aqua-about-heading p { margin-top: 14px; font-size: 12px; }
  .aqua-about-story { padding: 25px 22px; border-radius: 13px; }
  .aqua-about-story h3 { font-size: 24px; }
  .aqua-about-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 17px; }
  .aqua-about-step > span { width: 36px; height: 36px; }
  .aqua-about-step > svg { display: none; }
}

/* Aquarium imagery and clearer landing page content */
.aqua-features-section {
  background: linear-gradient(180deg, #f1f7f7 0%, #f8faf9 45%, #edf5f5 100%);
}

.aqua-features-heading > span:first-child,
.aqua-templates-heading > span:first-child,
.aqua-about-heading > span {
  color: #168b98;
}

.aqua-features-heading-description,
.aqua-feature-card-copy p {
  color: #607988;
  font-size: 13px;
}

.aqua-feature-card {
  border-color: rgba(22, 98, 112, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 34px rgba(27, 73, 83, .055);
}

.aqua-feature-card:hover {
  border-color: rgba(19, 148, 163, .34);
  box-shadow: 0 20px 42px rgba(27, 73, 83, .1);
}

.aqua-feature-preview {
  height: 150px;
  flex-basis: 150px;
  border: 0;
  border-radius: 12px;
  background-position: center 54%;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.aqua-feature-preview::after {
  position: absolute;
  inset: auto 0 0;
  padding: 25px 14px 11px;
  color: #fff;
  background: linear-gradient(transparent, rgba(5, 32, 43, .68));
  content: "";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.aqua-feature-preview > * { display: none !important; }
.aqua-feature-preview-designer { background-image: url("../assets/landing/aquascape-planted-tank.png"); }
.aqua-feature-preview-designer::after { content: "Natural planted aquascape · 3D planning"; }
.aqua-feature-preview-compatibility { background-image: url("../assets/landing/aquascape-planted-tank.png"); background-position: center 42%; }
.aqua-feature-preview-compatibility::after { content: "Compare species needs before adding tankmates"; }
.aqua-feature-preview-health { background-image: url("../assets/landing/aquascape-planted-tank.png"); background-position: center 35%; }
.aqua-feature-preview-health::after { content: "Track water readings and care ranges"; }
.aqua-feature-preview-guidance { background-image: url("../assets/landing/amazon-blackwater-tank.png"); }
.aqua-feature-preview-guidance::after { content: "Guidance informed by your aquarium details"; }

.aqua-template-card {
  overflow: hidden;
  border-color: rgba(31, 75, 87, .14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 75, 87, .06);
}

.aqua-template-card::before {
  flex-basis: 150px;
  height: 150px;
  margin: 0 0 13px;
  border: 0;
  border-radius: 9px;
  background-image: url("../assets/landing/aquascape-planted-tank.png") !important;
  background-position: center 55%;
  background-size: cover;
  box-shadow: inset 0 -22px 28px rgba(4, 34, 44, .12);
}

.aqua-template-column:nth-child(2) .aqua-template-card::before { background-image: url("../assets/landing/amazon-blackwater-tank.png") !important; }
.aqua-template-column:nth-child(3) .aqua-template-card::before { background-image: url("../assets/landing/reef-aquarium.png") !important; }
.aqua-template-column:nth-child(4) .aqua-template-card::before { background-image: url("../assets/landing/aquascape-planted-tank.png") !important; }
.aqua-template-card-copy h3 { color: #19394a; }
.aqua-template-card-copy p { color: #667d89; font-size: 12px; line-height: 1.65; }

/* Carry the landing hero's soft water artwork through these sections. */
.aqua-features-section,
.aqua-templates-section,
.aqua-about-section {
  background-image:
    linear-gradient(180deg, rgba(247, 250, 252, .78), rgba(243, 248, 250, .91)),
    url("../assets/images/home-bg-elegant-bw.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.aqua-feature-card,
.aqua-template-card,
.aqua-about-step {
  background-color: rgba(255, 255, 255, .86);
  backdrop-filter: blur(5px);
}

.aqua-about-section {
  overflow: hidden;
}

.aqua-about-heading { max-width: 850px; }
.aqua-about-heading h2 { color: #19394a; }
.aqua-about-heading p { color: #5e7784; font-size: 15px; }

.aqua-about-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(187, 226, 226, .28);
  border-top: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(7, 42, 56, .36) 0%, rgba(5, 35, 48, .9) 100%),
    url("../assets/landing/aquascape-planted-tank.png") center / cover;
  box-shadow: 0 22px 52px rgba(15, 59, 70, .18);
}

.aqua-about-story .aqua-about-kicker { color: #8be1db; }
.aqua-about-story h3 { color: #fff; }
.aqua-about-story > p { color: rgba(237, 249, 249, .85); }
.aqua-about-story > p.aqua-about-note {
  border-left-color: #65d1cc;
  background: rgba(220, 249, 246, .13);
  color: rgba(239, 252, 251, .88);
}
.aqua-about-link { color: #8de5df; }

.aqua-about-step {
  border-color: rgba(65, 133, 143, .15);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 28px rgba(27, 73, 83, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.aqua-about-step:hover { transform: translateX(4px); box-shadow: 0 17px 32px rgba(27, 73, 83, .1); }
.aqua-about-step > span { color: #087f8e; background: #def3f1; }
.aqua-about-step h3 { color: #193f51; }
.aqua-about-step p { color: #607987; font-size: 12px; }

/* The animated CTA cards were empty white blocks; give each a real scene. */
.aqua-final-card-image-one {
  background-image: url("../assets/landing/aquascape-planted-tank.png");
}
.aqua-final-card-image-two {
  background-image: url("../assets/landing/reef-aquarium.png");
}

@media (max-width: 760px) {
  .aqua-feature-preview { height: 128px; flex-basis: 128px; }
  .aqua-template-card::before { flex-basis: 132px; height: 132px; }
}