/* ---------- THEME / PALETTE ---------- */
    :root{
      --bg-color: #ffffff;            /* entire page white per request */
      --surface: #ffffff;             /* card surfaces */
      --text-color: #0f1720;
      --muted-color: #6c757d;
      --btn-primary-bg: #00ABD3;
      --btn-primary-color: #ffffff;
      --accent-color: #FFD81A;
      --shadow: 0 8px 30px rgba(5,40,43,0.08);
    }

    html[data-theme='dark'] {
      /* keep dark theme available but not the default - unchanged from earlier */
      --bg-color: #0b1220;
      --surface: #0f1720;
      --text-color: #e6eef0;
      --muted-color: #98a3ab;
      --btn-primary-bg: #00ABD3;
      --btn-primary-color: #fff;
      --accent-color: #FFD81A;
      --shadow: 0 6px 18px rgba(0,0,0,0.6);
    }

    /* ---------- GLOBAL ---------- */
    html,body { height:100%; }
    body{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color .25s ease, color .25s ease;
      overflow-x: hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    a { text-decoration: none; }
    .text-muted { color: var(--muted-color) !important; }

    /* ---------- NAVBAR ---------- */
    nav.navbar {
      background-color: #000000 !important;
    }
    nav.navbar .navbar-brand,
    nav.navbar .nav-link,
    nav.navbar .btn-outline-primary {
      color: #ffffff !important;
    }
    /*nav.navbar .navbar-toggler { border-color: rgba(255,255,255,0.12); }*/
    /*nav.navbar .navbar-toggler-icon { filter: invert(1) brightness(2); }*/

    .brand-logo{height:56px;width:auto;border-radius:8px;transition:transform .2s ease}
    .brand-logo:hover{transform:scale(1.06)}

    /* ---------- HERO ---------- */
    .hero{
      padding:4.5rem 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
    }
    .hero .eyebrow{ color: var(--btn-primary-bg); font-weight:600; }

    /* ---------- CARDS / SURFACES ---------- */
    .card, .product-highlights .card {
      background: var(--surface);
      box-shadow: var(--shadow);
      border-radius: 14px;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .card:hover { transform: translateY(-6px); }

    /* ---------- 'Classic Pack' full-width highlight ---------- */
    .classic-hero {
      display:block;
      width:100%;
      border-radius: 16px;
      padding: 1.25rem;
      overflow: hidden;
    }
    .classic-hero .inner {
      display:flex;
      gap: 1.5rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .classic-hero .left {
      flex: 1 1 320px;
      min-width: 240px;
      text-align:center;
    }
    .classic-hero .left img { max-width: 100%; height: auto; }
    .classic-hero .right {
      flex: 1 1 420px;
      min-width: 260px;
    }
    .classic-hero h2 { margin:0 0 .35rem 0; font-size:1.6rem; }
    .classic-hero .badge-feature {
      background: rgba(0,171,211,0.10);
      color: var(--btn-primary-bg);
      font-weight:700;
      padding:.4rem .8rem;
      border-radius:999px;
      display:inline-block;
      margin-bottom:.6rem;
    }
    .classic-hero p.lead { margin: .6rem 0 1.1rem; color:var(--muted-color); }

    /* CTA group inside classic */
    .classic-hero .ctas { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
    .classic-hero .price { font-weight:800; font-size:1.1rem; margin-left:.6rem; color:var(--text-color); }

/* Mobile view: stack vertically or adjust width */
@media (max-width: 768px) {
  .ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .ctas a {
    width: 100%;
    text-align: center;
  }
}

    /* small responsive tweak */
    @media (max-width: 767px){
      .classic-hero .inner { flex-direction:column-reverse; gap: 1rem; margin-bottom: -130px;}
      .classic-hero .left, .classic-hero .right { text-align:left; width:100%; }
    }

    /* ---------- small product cards underneath ---------- */
    .product-thumbnail-small{height:88px;object-fit:contain}
    .badge-feature { background: rgba(0,171,211,0.08); color: var(--btn-primary-bg); border-radius:999px; padding:.35rem .6rem; font-weight:600; }

    /* footer keep dark look */
    footer.footer-section{
      background:#0f1720;color:#e6eef0;padding:3rem 0;
    }
    footer .footer-logo{font-weight:700;color:#fff}

    /* Canvas overlay */
    #cursor-canvas{
      position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:9999;mix-blend-mode:screen;
    }



/* --- Dissolve Effectiveness section --- */
.dissolve-section{
  position: relative;
  padding: 4rem 0;
  background: linear-gradient(180deg, rgba(0,171,211,0.06), rgba(0,171,211,0.02));
}
.dissolve-card{
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
  height: 100%;
}
.dissolve-badge{
  display:inline-block;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .7rem;
  background: rgba(0,171,211,.12);
  color: var(--btn-primary-bg);
  font-size:.85rem;
}
.dissolve-meter{
  position: relative;
  height: 12px;
  background: rgba(0,171,211,.15);
  border-radius: 999px;
  overflow: hidden;
  margin-top: .75rem;
}
.dissolve-meter .fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #19C4E0, #00ABD3 60%, #007EA1);
  animation: fillBar 4s ease-out forwards;
}
@keyframes fillBar{ to { width: 100%; } }

.dissolve-pill{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  margin-top:.5rem;
  color: var(--text-color);
}
.dissolve-pill i{ color:#00ABD3; }

/* --- How-to video section --- */
.howto-section{
  padding: 4rem 0;
  background: linear-gradient(180deg, rgba(255,216,26,.06), rgba(255,216,26,.02));
}
.video-card{
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;            /* keeps it responsive without JS */
  background: #0f1720;
}
.video-wrap video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display:block;
}
.video-caption{
  padding: 1rem 1.25rem;
}
.video-bullets li{ margin-bottom:.35rem; }


/* visually-hidden helper (Bootstrap includes .visually-hidden, but provide fallback) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* blue strap */
/* -------- Diagonal S-strap (fixed, full page) -------- */
.diagonal-s-strap {
  position: fixed;
  top: -10vh;               /* nudge so wave starts slightly above viewport */
  left: -10vw;              /* extend beyond left so diagonal covers corners */
  width: 140vw;             /* wide so it spans full diagonal */
  height: 120vh;            /* tall so wave covers entire viewport area */
  transform: rotate(-45deg) translateZ(0); /* rotate to run TL -> BR */
  transform-origin: center center;
  pointer-events: none;     /* clickable elements won't be blocked */
  z-index: 0;               /* behind your content; raise content z-index */
  mix-blend-mode: normal;   /* change to 'screen' or 'overlay' if you want blending */
  opacity: 0.98;
  will-change: transform, opacity;
}

/* make svg fill the strap container */
.diagonal-s-strap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure key content is above the wave */
nav, header, .hero, section, main, footer, .container {
  position: relative;
  z-index: 2;
}

/* Responsive tweaks so diagonal doesn't overwhelm mobile */
@media (max-width: 1200px) {
  .diagonal-s-strap { top: -8vh; left: -14vw; width: 160vw; height: 140vh; transform: rotate(-48deg); opacity: 0.96; }
}
@media (max-width: 768px) {
  .diagonal-s-strap { top: -6vh; left: -20vw; width: 200vw; height: 190vh; transform: rotate(-52deg); opacity: 0.92; }
}
@media (max-width: 420px) {
  /* lighten effect on small screens */
  .diagonal-s-strap { opacity: 0.88; filter: blur(0.6px); transform: rotate(-55deg); }
}

/* Static 3D product image (replaces carousel) */
.product-3d { text-align: center; }

.product-3d-img {
  width: 100%; /* Make sure it takes up full width */
  max-width: 600px; /* Adjust to your desired max width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the image is contained in its container */
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(5, 40, 43, 0.06);
  /* Force landscape aspect ratio */
  aspect-ratio: 16 / 9; /* 16:9 ratio for landscape */
}

@media (max-width: 576px) {
  .product-3d-img {
    width: 90%; /* Reduce size for smaller screens */
    max-width: 500px; /* Max width for smaller screens */
  }
}

/* Dissolve video section (reuses existing video-card/video-wrap) */
.dissolve-video-section{
  padding: 4rem 0;
  background: linear-gradient(180deg, rgba(0,171,211,.06), rgba(0,171,211,.02));
}


/* --- Reviews --- */
/* --- Reviews (marquee) --- */
.reviews-section { background: linear-gradient(180deg, rgba(0,171,211,.05), rgba(0,171,211,.02)); }
.reviews-marquee{
  position: relative;
  overflow: hidden;
}
.reviews-track{
  display: flex;
  gap: 16px;
  will-change: transform;
}
.review-card{
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 360px);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.review-avatar{
  width: 40px; height: 40px; border-radius: 999px; object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.verify-badge{
  background: rgba(0,171,211,.12);
  color: var(--btn-primary-bg);
  border-radius: 999px;
  padding: .2rem .5rem;
  font-weight: 700;
}
.tiny{ font-size: .8rem; }
.stars{ display: inline-flex; gap: 2px; }
.stars svg{ width: 16px; height: 16px; }

.source-badge{
  background: rgba(15,23,32,.06);
  border-radius: 999px;
  padding: .15rem .5rem;
}

/* Edge fade masks for a premium look */
.edge-fade{
  position: absolute; top: 88px; bottom: 0; width: 48px; pointer-events: none; z-index: 2;
  background: linear-gradient(to right, var(--bg-color), rgba(255,255,255,0));
}
.edge-fade.right{ right: 0; transform: scaleX(-1); }
.edge-fade.left{ left: 0; }

/* Pause on hover/focus */
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reviews-track{ transition: none !important; }
}


/* Mr.Sheet mini slider */
.ms-slider{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio: 4 / 2;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(5,40,43,0.08);
  background:#f8fafc;
  touch-action: pan-y;
}
.ms-track,.ms-slide{width:100%;height:100%}
.ms-track{position:relative}
.ms-slide{
  position:absolute; inset:0;
  object-fit:contain;
  opacity:0; transform:scale(1.02);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.9,.25,1);
  background:#fff;
}
.ms-slide.is-active{opacity:1; transform:scale(1)}

.ms-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:38px; height:38px; border-radius:50%;
  background:rgba(15,23,32,0.72); color:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:20px; line-height:1;
}
.ms-prev{left:10px}
.ms-next{right:10px}
.ms-arrow:focus{outline:3px solid rgba(0,171,211,0.25); outline-offset:2px}

.ms-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.ms-dot{
  width:8px; height:8px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(0,0,0,0.22);
}
.ms-dot.is-active{background:#00ABD3}
@media (max-width:680px){
  .ms-slider{aspect-ratio: 16 / 8;}
}


    /* ---------- S-wave strap (SVG sits fixed, behind content) ---------- */
    .s-wave {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.18; /* subtle */
      mix-blend-mode: multiply;
      filter: blur(8px) saturate(1.05);
    }

    /* place content above wave */
    .page-wrap { position: relative; z-index: 2; }

    /* ---------- Hero ---------- */
    .hero {
      padding: 5.5rem 0 3rem;
      display: flex;
      align-items: center;
      min-height: 56vh;
    }
    .hero .eyebrow { color: color: #2cd3f8; font-weight: 700; }
    .hero h1 { font-size: 2.25rem; margin-top:.25rem; }
    .hero p.lead { color: var(--muted); margin-top:.9rem; }

    /* floating product */
    .product-wrap { position: relative; }
    .product-mock {
      max-width: 520px;
      transform-origin: center;
      animation: floaty 6s ease-in-out infinite;
      transition: transform .25s ease;
      will-change: transform;
      margin: 0 auto;
    }
    @keyframes floaty {
      0% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-10px) rotate(1deg); }
      100% { transform: translateY(0) rotate(-1deg); }
    }

    /* soft wash-swirl behind the product (subtle) */
    .wash-swirl {
      position: absolute;
      inset: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-55%);
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(0,171,211,0.06), transparent 35%),
                  radial-gradient(circle at 70% 70%, rgba(255,216,26,0.03), transparent 30%);
      filter: blur(18px);
      z-index: 0;
      pointer-events: none;
      opacity: .95;
    }