/* =========================================================
   AquaVista — tokens
========================================================= */
:root{
  /* Palette sampled directly from the Siyane Aquatic logo */
  --deep:      #0B1E42;   /* logo droplet top — deep navy */
  --teal:      #12437A;   /* mid-tone navy/teal */
  --teal-2:    #176E93;   /* transition tone */
  --aqua:      #41BAD2;   /* logo droplet bottom — bright cyan */
  --aqua-light:#8FE0EC;   /* light cyan highlight */
  --coral:     #41BAD2;   /* accent alias, kept for compatibility — same as --aqua */
  --sand:      #EAF7FA;   /* pale cyan-tinted section bg */
  --paper:     #F4FBFC;
  --ink:       #0B1E2E;
  --ink-soft:  #4F6B7C;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Outfit', 'Segoe UI', sans-serif;

  --radius: 18px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  margin:0;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--deep); margin:0;}
em{font-style:italic; color:var(--aqua);}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
img{max-width:100%; display:block;}

::selection{background:var(--aqua); color:var(--deep);}

/* =========================================================
   Loader
========================================================= */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.hide{opacity:0; visibility:hidden;}
.loader-ripple{
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(79,216,196,.25);
  border-top-color:var(--aqua);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* =========================================================
   Ambient bubbles
========================================================= */
.bubble-field{
  position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden;
}
.bubble{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(79,216,196,.08));
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.6;}
  100%{transform:translateY(-110vh) translateX(20px); opacity:0;}
}

/* =========================================================
   Navbar
========================================================= */
#mainNav{
  padding:18px 0;
  transition:all .4s var(--ease);
  z-index:1000;
}
#mainNav.scrolled{
  padding:10px 0;
  background:rgba(11,30,66,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}
.brand-badge{
  width:46px; height:46px; min-width:46px; border-radius:50%;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  padding:5px;
  transition:transform .35s var(--ease);
}
.navbar-brand:hover .brand-badge{transform:rotate(-6deg) scale(1.05);}
.brand-badge img{width:100%; height:100%; object-fit:contain;}
.brand-text-group{display:flex; flex-direction:column; line-height:1.15;}
.brand-text{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  color:var(--paper); letter-spacing:.2px;
}
.brand-text em{color:var(--aqua); font-style:normal;}
.brand-tagline{
  font-size:.66rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--aqua-light); opacity:.85; margin-top:1px;
}
.nav-link{
    font-weight: 500;
    color: var(--paper) !important;
    opacity: .85;
    padding: 8px 4px !important;
    margin: 0 6px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.nav-link::after{
  content:''; position:absolute; left:4px; right:4px; bottom:2px; height:2px;
  background:var(--aqua); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-link:hover{opacity:1;}
.nav-link:hover::after{transform:scaleX(1);}
.toggler-bar{display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; transition:.3s;}
.navbar-toggler{border:none; background:none; padding:0;}
.navbar-toggler:focus{box-shadow:none;}

.btn-cta{
  background:linear-gradient(135deg, var(--aqua), var(--aqua-light)); color:var(--deep) !important; font-weight:600;
  padding:10px 20px; border:1px solid rgba(143,224,236,.45); border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap;
  box-shadow:0 8px 18px rgba(65,186,210,.16);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-cta:hover{background:var(--paper); transform:translateY(-3px); box-shadow:0 12px 26px rgba(65,186,210,.35);}
.btn-cta:focus-visible{outline:3px solid rgba(143,224,236,.75); outline-offset:3px;}
.btn-cta i{transition:transform .3s var(--ease);}
.btn-cta:hover i{transform:translateX(3px);}
.btn-ghost{
  border:1.5px solid rgba(244,251,252,.5); color:var(--paper); font-weight:500;
  padding:10px 22px; border-radius:100px; transition:.3s var(--ease);
}
.btn-ghost:hover{background:rgba(244,251,252,.1); border-color:var(--paper);}
.btn-cta-light{
  background:var(--paper); color:var(--deep); font-weight:600;
  padding:12px 30px; border-radius:100px; display:inline-block;
  transition:transform .3s var(--ease);
}
.btn-cta-light:hover{transform:translateY(-3px);}

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding-top:90px;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  z-index:0;
  transform:scale(1.04);
  animation:heroPan 18s ease-in-out infinite alternate;
}
@keyframes heroPan{
  0%{transform:scale(1.04) translateX(0);}
  100%{transform:scale(1.1) translateX(-1.5%);}
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(11,30,66,.92) 0%, rgba(11,30,66,.72) 32%, rgba(11,30,66,.35) 58%, rgba(11,30,66,.15) 100%),
    linear-gradient(0deg, rgba(11,30,66,.55), transparent 40%);
}
.hero-inner{position:relative; z-index:3;}
.hero-eyebrow{
  color:var(--aqua); font-weight:600; letter-spacing:.3px; margin-bottom:14px; font-size:.95rem;
}
.hero-title{
  font-size:clamp(2.4rem, 6vw, 3.4rem); line-height:1.05; color:var(--paper); font-weight:600;
}
.hero-title-accent{color:var(--coral);}
.hero-sub{
  color:rgba(244,251,252,.78); font-size:1.1rem; max-width:520px; margin:22px 0 32px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px;}

.hero-wave{position:absolute; left:0; bottom:-2px; width:100%; height:90px; z-index:2;}

/* =========================================================
   Section basics
========================================================= */
.section{padding:100px 0;}
.section-kicker{
  color:var(--coral); font-weight:600; margin-bottom:10px; font-size:.95rem;
}
.section-title{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600; line-height:1.15;}
.section-text{color:var(--ink-soft); font-size:1.05rem; max-width:46ch; line-height:1.7;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s);}
.reveal.in{opacity:1; transform:translateY(0);}

/* =========================================================
   About
========================================================= */
.about{background:var(--paper);}
.about-photo-frame{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(11,30,66,.35);
}
.about-photo{
  aspect-ratio:16/10; width:100%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--aqua) 130%);
  background-size:cover; background-position:center;
}
.stat-card{
  background:var(--deep); color:var(--paper); border-radius:var(--radius);
  padding:26px 22px; height:100%; transition:transform .35s var(--ease);
}
.stat-card:hover{transform:translateY(-6px);}
.stat-alt{background:var(--teal);}
.stat-num{font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--aqua);}
.stat-suffix{font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--aqua);}
.stat-card p{margin:6px 0 0; color:rgba(244,251,252,.75); font-size:.95rem;}

/* =========================================================
   Collections
========================================================= */
.collections{background:var(--sand);}
.cat-card{
  background:var(--paper); border-radius:var(--radius); padding:34px 26px; height:100%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  border:1px solid rgba(11,32,39,.06);
}
.cat-card:hover{transform:translateY(-8px); box-shadow:0 24px 40px -18px rgba(11,30,66,.25);}
.cat-card-alt{background:var(--deep); border-color:transparent;}
.cat-card-alt h3, .cat-card-alt p{color:var(--paper);}
.cat-card-alt p{color:rgba(244,251,252,.7);}
.cat-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--aqua), var(--teal)); color:var(--deep); font-size:1.3rem; margin-bottom:18px;
}
.cat-card h3{font-size:1.2rem; margin-bottom:8px;}
.cat-card p{color:var(--ink-soft); font-size:.95rem; margin:0;}

/* =========================================================
   Latest products carousel
========================================================= */
.latest-products{background:var(--paper);}
.latest-products-control{
  width:46px; height:46px; border:1px solid rgba(11,30,66,.14); border-radius:50%;
  background:var(--paper); color:var(--deep); display:grid; place-items:center;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.latest-products-control:hover{background:var(--deep); color:var(--paper); border-color:var(--deep);}
.latest-product-card{
  height:100%; overflow:hidden; border:1px solid rgba(11,30,66,.1); border-radius:16px;
  background:#fff; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.latest-product-card:hover{transform:translateY(-5px); box-shadow:0 18px 34px -22px rgba(11,30,66,.38);}
.latest-product-image{
  position:relative; aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--sand),#d8f2f4);
}
.latest-product-image img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.latest-product-card:hover .latest-product-image img{transform:scale(1.04);}
.latest-product-image > i{font-size:2rem; color:var(--teal-2);}
.latest-product-stock{
  position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:30px;
  font-size:.68rem; font-weight:700; text-transform:uppercase;
}
.latest-product-stock.in{background:#ddf5eb; color:#146348;}
.latest-product-stock.out{background:#fde5e2; color:#a83228;}
.latest-product-details{padding:16px;}
.latest-product-category{margin:0 0 6px; color:var(--teal-2); font-size:.72rem; font-weight:700; text-transform:uppercase;}
.latest-product-details h3{min-height:2.6em; font-size:1.08rem; line-height:1.3; overflow-wrap:anywhere;}
.latest-product-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:12px; font-weight:700; color:var(--ink);}
.latest-product-price del{font-size:.82rem; color:var(--ink-soft); font-weight:400;}
.latest-products-empty{padding:28px; border:1px dashed rgba(11,30,66,.2); border-radius:14px; text-align:center; color:var(--ink-soft);}

/* =========================================================
   Why us
========================================================= */
.why{background:var(--paper);}
.feature-row{display:flex; gap:16px; align-items:flex-start;}
.feature-row i{
  width:44px; height:44px; min-width:44px; border-radius:12px; background:var(--sand);
  display:flex; align-items:center; justify-content:center; color:var(--coral); font-size:1.05rem;
}
.feature-row h4{font-size:1.05rem; margin-bottom:4px;}
.feature-row p{color:var(--ink-soft); font-size:.92rem; margin:0;}

/* =========================================================
   Gallery
========================================================= */
.gallery{background:var(--deep);}
.gallery .section-title, .gallery .section-kicker{color:var(--paper);}
.gallery .section-kicker{color:var(--coral);}
.tank-tile{
  position:relative; border-radius:14px; overflow:hidden; height:220px;
  background:linear-gradient(150deg, var(--teal), var(--aqua) 140%);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; transition:transform .4s var(--ease);
}
.tank-tall{height:300px;}
.tank-tile:hover{transform:scale(1.03);}
.tank-tile span{
  color:#fff; font-weight:500; padding:16px; font-size:.9rem;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent); width:100%;
}

/* =========================================================
   CTA banner
========================================================= */
.cta-banner{
  background:linear-gradient(120deg, var(--teal) 0%, var(--deep) 100%);
  padding:90px 0; text-align:center;
}
.cta-banner h2{color:var(--paper); font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:12px;}
.cta-banner p{color:rgba(244,251,252,.75); max-width:52ch; margin:0 auto 30px;}

/* =========================================================
   Contact
========================================================= */
.contact{background:var(--sand);}
.contact-list{margin:26px 0;}
.contact-list li{display:flex; align-items:center; gap:14px; margin-bottom:16px; color:var(--ink-soft); font-size:.98rem;}
.contact-list i{color:var(--coral); width:20px;}
.social-row{display:flex; gap:12px;}
.social-row a{
  width:42px; height:42px; border-radius:50%; background:var(--deep); color:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.social-row a:hover{transform:translateY(-4px); background:var(--coral); color:var(--deep);}

.contact-form{
  background:var(--paper); border-radius:var(--radius); padding:34px;
  box-shadow:0 30px 60px -24px rgba(11,30,66,.25);
}
.form-control{
  border:1.5px solid rgba(11,32,39,.12); border-radius:12px; padding:13px 16px; font-family:var(--sans);
}
.form-control:focus{border-color:var(--aqua); box-shadow:0 0 0 4px rgba(79,216,196,.15);}
.form-note{margin-left:14px; color:var(--teal); font-size:.9rem; font-weight:500;}

/* =========================================================
   Footer
========================================================= */
.footer{background:var(--deep); color:rgba(244,251,252,.7); padding:80px 0 0;}
.footer h5{color:var(--paper); font-family:var(--sans); font-weight:600; margin-bottom:16px; font-size:1rem;}
.footer ul li{margin-bottom:10px;}
.footer ul li a{transition:color .3s;}
.footer ul li a:hover{color:var(--aqua);}
.footer p{font-size:.92rem; line-height:1.6;}
.newsletter-form{display:flex; gap:0; max-width:320px;}
.newsletter-form input{
  flex:1; padding:12px 14px; border:none; border-radius:100px 0 0 100px; font-family:var(--sans);
}
.newsletter-form button{
  background:var(--coral); border:none; padding:0 18px; border-radius:0 100px 100px 0; color:var(--deep);
  cursor:pointer;
}
.footer-bottom{
  border-top:1px solid rgba(244,251,252,.1); margin-top:60px; padding:22px 0; text-align:center; font-size:.85rem;
}

/* =========================================================
   Back to top
========================================================= */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--coral); color:var(--deep); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.35s var(--ease); z-index:900;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{transform:translateY(-4px);}

/* =========================================================
   Responsive
========================================================= */
@media (max-width:991px){
  .navbar-collapse{
    background:var(--deep); margin-top:16px; padding:20px; border-radius:16px;
  }
  .hero{text-align:center;}
  .hero-actions{justify-content:center;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-fish{display:none;}
  .section{padding:70px 0;}
}
@media (max-width:575px){
  .hero-title{font-size:2.3rem;}
  .contact-form{padding:24px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}