p {
  text-align: justify;
}

/* ── HERO: breeze background, no 3D ── */
    .products-hero {
      position: relative;
      min-height: 72vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(180deg,
        #a8dff7 0%,
        #c6ecf9 28%,
        #e8f8e0 55%,
        #b8e8c0 75%,
        #7ecf96 100%);
      animation: skyShift 14s ease-in-out infinite alternate;
    }

    @keyframes skyShift {
      0%   { filter: hue-rotate(0deg)   brightness(1.0); }
      50%  { filter: hue-rotate(6deg)   brightness(1.05); }
      100% { filter: hue-rotate(-5deg)  brightness(0.97); }
    }

    /* Soft animated wave layers at bottom */
    .hero-waves {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      height: 38%;
    }
    .hero-waves svg { position: absolute; bottom: 0; width: 200%; height: 100%; }
    .wave1 { animation: waveMove1 10s linear infinite; opacity: 0.5; }
    .wave2 { animation: waveMove2 14s linear infinite; opacity: 0.3; }
    .wave3 { animation: waveMove3 8s  linear infinite; opacity: 0.18; }
    @keyframes waveMove1 { 0% { transform: translateX(0);    } 100% { transform: translateX(-50%); } }
    @keyframes waveMove2 { 0% { transform: translateX(-50%); } 100% { transform: translateX(0);    } }
    @keyframes waveMove3 { 0% { transform: translateX(0);    } 100% { transform: translateX(-50%); } }

    /* Pollen dots */
    .hero-pollen {
      position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
    }
    .pollen-dot {
      position: absolute;
      border-radius: 50%;
      animation: pollenFloat linear infinite;
    }
    @keyframes pollenFloat {
      0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 0.6; }
      100% { transform: translateY(-90px) translateX(25px) scale(0.5); opacity: 0; }
    }

    /* Hero content */
    .hero-content-wrap {
      position: relative;
      z-index: 5;
      text-align: center;
      padding: clamp(2rem, 5vw, 4rem) 1.5rem clamp(6rem, 12vw, 10rem);
      max-width: 780px;
      margin: 0 auto;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(10, 60, 90, 0.75);
      margin-bottom: 1rem;
    }
    .hero-eyebrow::before, .hero-eyebrow::after {
      content: ''; display: block;
      width: 22px; height: 1px;
      background: rgba(10, 60, 90, 0.4);
    }

    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.4rem, 5.5vw, 4rem);
      font-weight: 700;
      color: rgba(8, 40, 65, 0.92);
      line-height: 1.1;
      margin-bottom: 0.7rem;
    }
    .hero-title em {
      font-style: italic;
      background: linear-gradient(108deg, #1a7fa0 0%, #3aaccc 50%, #2a9ab8 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero-sub {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 300;
      color: rgba(10, 55, 80, 0.70);
      line-height: 1.7;
      max-width: 420px;
      margin: 0 auto;
    }

    /* ── PRODUCTS LISTING SECTION ── */
    .products-listing {
      padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
      background: #fff;
      position: relative;
    }
    .products-listing::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(90,200,232,0.07) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none; opacity: 0.5;
    }

    .listing-header {
      text-align: center;
      margin-bottom: clamp(3rem, 5vw, 4.5rem);
      position: relative; z-index: 1;
    }
    .listing-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.9rem;
    }
    .listing-eyebrow::before, .listing-eyebrow::after {
      content: ''; display: block;
      width: 22px; height: 1px;
      background: var(--teal); opacity: 0.5;
    }
    .listing-title {
      font-family: var(--font-serif);
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 600;
      color: var(--text-dark);
      line-height: 1.1;
      margin-bottom: 0.7rem;
    }
    .listing-title em {
      font-style: italic;
      background: linear-gradient(108deg, var(--teal) 0%, var(--sky) 50%, var(--blue) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .listing-sub {
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 300;
      color: var(--text-light);
      max-width: 450px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── PRODUCT CARDS AREA ── */
    .prod-cards-area {
      position: relative; z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(2rem, 4vw, 3rem);
    }

    /* ── THE BIG PRODUCT CARD ── */
    .big-prod-card {
      width: 100%;
      max-width: 780px;
      background: linear-gradient(135deg, #f0faff 0%, #e8f7f0 50%, #f3fbff 100%);
      border: 1px solid rgba(90, 200, 232, 0.3);
      border-radius: 20px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-shadow:
        0 2px 0 rgba(90,200,232,0.12),
        0 12px 40px rgba(20, 60, 100, 0.09),
        0 32px 64px rgba(20, 60, 100, 0.05);
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), box-shadow 0.38s ease, border-color 0.3s ease;
      opacity: 0;
      transform: translateY(32px);
    }
    .big-prod-card.is-visible {
      animation: bigCardReveal 0.7s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes bigCardReveal {
      to { opacity: 1; transform: translateY(0); }
    }
    .big-prod-card:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow:
        0 2px 0 rgba(90,200,232,0.2),
        0 20px 60px rgba(20, 60, 100, 0.14),
        0 40px 80px rgba(20, 60, 100, 0.07);
      border-color: rgba(90, 200, 232, 0.55);
    }

    /* Image side */
    .bpc-img-side {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #c8eef8, #d8f2e8);
      min-height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bpc-img-side img {
      width: 130%; height: 130%;
      object-fit: contain; display: block;
      transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease;
    }
    .big-prod-card:hover .bpc-img-side img {
      transform: scale(1.07);
      filter: brightness(0.88) saturate(1.2);
    }

    /* image placeholder when no img */
    .bpc-img-ph {
      width: 100%; height: 100%; min-height: 320px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0.5rem;
      font-size: 5rem;
      color: rgba(10,70,110,0.15);
      background: linear-gradient(135deg, #cef2ff, #d8f5e8);
    }
    .bpc-img-ph span { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(10,70,110,0.3); font-family: var(--font-mono); }

    /* tricolor accent on image side */
    .bpc-img-side::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #5ac8e8, #a8e4f5, #7dd4ee);
    }

    /* hover overlay */
    .bpc-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(10,50,90,0.82) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex; align-items: flex-end;
      padding: 1.4rem;
      z-index: 2;
    }
    .big-prod-card:hover .bpc-img-overlay { opacity: 1; }
    .bpc-ov-cta {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: 1.5px solid rgba(255,255,255,0.5);
      border-radius: 100px;
      padding: 0.42rem 1rem;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(6px);
    }

    /* Info side */
    .bpc-info {
      padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 2.5vw, 2.2rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.2rem;
    }

    .bpc-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 0.2rem 0.7rem;
      background: rgba(90,200,232,0.12);
      border: 1px solid rgba(90,200,232,0.3);
      border-radius: 100px;
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--teal);
      width: fit-content;
    }
    .bpc-badge::before {
      content: '';
      width: 5px; height: 5px;
      background: var(--teal);
      border-radius: 50%;
    }

    .bpc-name {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.15;
    }

    .bpc-tagline {
      font-family: var(--font-sans);
      font-size: 0.83rem;
      font-weight: 300;
      color: var(--text-mid, #6b7280);
      line-height: 1.65;
      font-style: italic;
    }

    .bpc-rule {
      width: 36px; height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--sky));
      border-radius: 2px;
    }

    .bpc-specs {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .bpc-spec {
      display: flex; align-items: baseline; gap: 0.5rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      color: var(--text-mid, #6b7280);
    }
    .bpc-spec::before {
      content: '';
      display: inline-block;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--teal); flex-shrink: 0;
    }
    .bpc-spec-k {
      font-weight: 600;
      color: var(--text-dark);
      white-space: nowrap;
    }

    .bpc-footer {
      display: flex; align-items: center; gap: 1rem;
      flex-wrap: wrap;
      padding-top: 1rem;
      border-top: 1px solid rgba(90,200,232,0.18);
    }

    .bpc-cta {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0.6rem 1.4rem;
      background: linear-gradient(108deg, var(--teal), var(--sky));
      color: #fff;
      border-radius: 100px;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.2s;
      box-shadow: 0 4px 16px rgba(90,200,232,0.3);
    }
    .bpc-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(90,200,232,0.42);
      opacity: 0.92;
    }
    .bpc-cta-arrow {
      transition: transform 0.2s ease;
    }
    .bpc-cta:hover .bpc-cta-arrow { transform: translateX(3px); }

    .bpc-models-count {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-light, #9ca3af);
    }

    /* "More products coming soon" teaser */
    .coming-soon-row {
      position: relative; z-index: 1;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 0.5rem;
    }
    .cs-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0.5rem 1.1rem;
      background: rgba(90,200,232,0.06);
      border: 1px dashed rgba(90,200,232,0.3);
      border-radius: 100px;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--text-light, #9ca3af);
      letter-spacing: 0.02em;
      opacity: 0.75;
    }
    .cs-pill-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(90,200,232,0.4);
    }
    .social-dock__btn--tw {
  background-color: #000000; /* Black for X */
  color: #ffffff;
  }
    .brochure-bar { display:flex; justify-content:center; gap:12px; margin:18px 0 10px; }
    .brochure-bar__btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.82rem; font-weight:600; text-decoration:none; transition:all 0.2s; }
    .brochure-bar__btn svg { width:16px; height:16px; fill:currentColor; }
    .brochure-bar__btn--view { background:#fff; color:#1a7aaa; border:1.5px solid rgba(42,154,191,0.5); }
    .brochure-bar__btn--view:hover { background:rgba(42,154,191,0.08); }
    .brochure-bar__btn--dl { background:#1a7aaa; color:#fff; border:1.5px solid #1a7aaa; }
    .brochure-bar__btn--dl:hover { background:#145f88; }
    /* ── CTA STRIP ── */
    .cta-strip { background: var(--off-white); border-top: 1px solid var(--border); padding: clamp(3rem,6vw,5rem) 0; }
    .cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
    .cta-strip-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); margin-bottom: 0.4rem; }
    .cta-strip-title { font-family: var(--font-serif); font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 600; color: var(--text-dark); line-height: 1.2; }
    .cta-strip-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; }

    @media (max-width: 640px) {
      .big-prod-card { grid-template-columns: 1fr; }
      .bpc-img-side { min-height: 220px; }
      .bpc-img-ph { min-height: 220px; }
    }

    .reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-up.in-view{
  opacity: 1;
  transform: translateY(0);
}