@charset "UTF-8";

    /* =========================================================
      ROOT
    ========================================================== */
    :root{
      --pm-bg:#f5fbff;
      --pm-bg-2:#e8f6ff;
      --pm-bg-3:#ffffff;
      --pm-panel:rgba(255,255,255,.90);
      --pm-line:rgba(15,55,84,.08);
      --pm-text:#10293d;
      --pm-muted:#4d677b;
      --pm-cyan:#62ddff;
      --pm-ice:#dff7ff;
      --pm-blue:#149dff;
      --pm-shadow:0 20px 60px rgba(16,79,120,.12);
      --pm-shadow-soft:0 14px 32px rgba(20,157,255,.10);
      --pm-radius:26px;
      --pm-max:1240px;
    }

    /* =========================================================
      RESET / BASE
    ========================================================== */
    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--pm-text);
  background:
    radial-gradient(circle at top left, rgba(115,236,255,.18), transparent 24%),
    radial-gradient(circle at 84% 8%, rgba(29,161,255,.10), transparent 24%),
    linear-gradient(180deg, var(--pm-bg) 0%, var(--pm-bg-2) 48%, var(--pm-bg-3) 100%);
  overflow-x:hidden;
}

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      max-width:100%;
      display:block;
    }

    button,
    input,
    select,
    textarea{
      font:inherit;
    }

    /* =========================================================
      GLOBAL LAYOUT
    ========================================================== */
    .wrap{
      width:min(calc(100% - 32px), var(--pm-max));
      margin:0 auto;
    }

    .section{
      position:relative;
      padding:92px 0;
    }

    .section--alt{
      background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(232,246,255,.50));
    }
	  
	.section--alt2{
  background:
    linear-gradient(180deg, rgba(7,16,30,.98), rgba(4,10,20,1));
  border-top:1px solid rgba(124,240,255,.14);
  border-bottom:1px solid rgba(20,157,255,.10);
  box-shadow:inset 0 30px 80px rgba(255,255,255,.30);
}

    .sectionHead{
      max-width:760px;
      margin:0 0 30px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(20,157,255,.14);
      background:rgba(255,255,255,.70);
      color:#0d7fd6;
      box-shadow:var(--pm-shadow-soft);
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:12px;
      font-weight:800;
    }

    .eyebrow::before{
      content:'';
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--pm-cyan),var(--pm-blue));
      box-shadow:0 0 14px rgba(98,221,255,.65);
      flex:none;
    }

    .sectionHead h2,
    .hero__title,
    .cta__title{
      margin:14px 0;
      line-height:.96;
      letter-spacing:-.045em;
    }

    .hero__title{
      font-size:clamp(50px,9vw,104px);
      max-width:860px;
    }

    .hero__title .accent{
      display:block;
      color:#0d7fd6;
    }

    .h2{
      font-size:clamp(36px,5vw,64px);
    }

    .h3{
      margin:0 0 12px;
      font-size:24px;
      letter-spacing:-.02em;
    }

    .copy,
    .lead{
      color:var(--pm-muted);
      line-height:1.78;
      font-size:18px;
    }

    .lead{
      max-width:720px;
      font-size:20px;
    }

    /* =========================================================
      BUTTONS
    ========================================================== */
    .btn{
      appearance:none;
      border:0;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:52px;
      padding:0 22px;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    .btn--primary{
      color:#fff;
      background:linear-gradient(135deg,#7be6ff,#2fbfff 46%,#1f7dff);
      box-shadow:0 18px 36px rgba(20,157,255,.20), inset 0 1px 0 rgba(255,255,255,.22);
    }

    .btn--ghost{
      color:#143149;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.62);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 12px 26px rgba(20,157,255,.06);
      backdrop-filter:blur(12px);
    }

    .btn--full{
      width:100%;
    }

    /* =========================================================
      TOPBAR / NAV
    ========================================================== */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(16px);
      background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(15,55,84,.10);
    }

    .topbar__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      min-height:84px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand__logo{
      width:54px;
      height:54px;
      object-fit:contain;
      filter:drop-shadow(0 10px 22px rgba(20,157,255,.20));
    }

    .nav{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .nav a:not(.btn){
      color:#173047;
      font-weight:600;
    }

    .nav a:not(.btn):hover{
      color:#0d7fd6;
    }

    .mobileToggle{
      display:none;
      width:52px;
      height:52px;
      border-radius:16px;
      border:1px solid rgba(20,157,255,.12);
      background:rgba(255,255,255,.92);
      padding:0;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:5px;
    }

    .mobileToggle span{
      width:22px;
      height:2px;
      background:#0d7fd6;
      border-radius:999px;
    }

    .mobileNav{
      display:none;
      padding:0 16px 18px;
      border-top:1px solid rgba(15,55,84,.06);
    }

    .mobileNav.is-open{
      display:grid;
      gap:10px;
    }

    .mobileNav a,
    .mobileNav button{
      width:100%;
    }

    /* =========================================================
      HERO
    ========================================================== */
    .hero{
      position:relative;
      min-height:100svh;
      display:flex;
      align-items:center;
      padding:48px 0 36px;
      overflow:hidden;
    }

    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(
        115deg,
        rgba(245,251,255,.58) 6%,
        rgba(245,251,255,.34) 36%,
        rgba(255,255,255,.18) 60%,
        rgba(255,255,255,.46) 100%
      );
      z-index:-3;
      pointer-events:none;
    }

    .hero::after{
      content:'';
      position:absolute;
      right:-8%;
      top:-14%;
      width:42vw;
      height:42vw;
      max-width:560px;
      max-height:560px;
      background:radial-gradient(circle, rgba(255,255,255,.34), rgba(98,221,255,.10) 42%, transparent 70%);
      filter:blur(24px);
      z-index:-2;
      pointer-events:none;
    }

    .hero__poster{
      position:absolute;
      inset:0;
      z-index:-5;
      background:
        linear-gradient(
          120deg,
          rgba(245,251,255,.52) 10%,
          rgba(245,251,255,.22) 44%,
          rgba(255,255,255,.14) 68%,
          rgba(255,255,255,.28) 100%
        ),
        url('assets/img/polar-mist-hero.png') center/cover no-repeat;
      pointer-events:none;
    }

    .hero__video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:-4;
      filter:brightness(.96) saturate(.88) contrast(1.02);
      transform:scale(1.04) translate3d(0,0,0);
      transform-origin:center center;
      animation:heroVideoDrift 18s ease-in-out infinite alternate;
      will-change:transform;
    }

    .hero.is-video-paused .hero__video,
    .hero.is-video-hidden .hero__video{
      animation:none;
      transform:scale(1.01);
    }

    .hero.is-video-hidden .hero__video{
      display:none;
    }

    .hero__grid{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
      gap:28px;
      align-items:end;
    }

    .hero__copy{
      padding:68px 0 24px;
    }

    .hero__stats{
      margin-top:28px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      max-width:780px;
    }

    .hero__actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:28px;
    }

    .mist-haze{
      position:absolute;
      top:0;
      bottom:0;
      width:220px;
      background:radial-gradient(circle at left center, rgba(255,255,255,.26), rgba(98,221,255,.09) 36%, rgba(98,221,255,0) 72%);
      filter:blur(10px);
      animation:hazeBreath 4.2s ease-in-out infinite;
    }

    .mist-left{
      left:0;
    }

    .mist-right{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      width:220px;
      pointer-events:none;
    }

    .mist-right .mist-haze{
      right:0;
      left:auto;
      transform:scaleX(-1);
    }

    .stat{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.56);
      border-radius:20px;
      padding:18px;
      box-shadow:0 18px 40px rgba(16,79,120,.10);
      backdrop-filter:blur(10px);
    }

    .stat strong{
      display:block;
      font-size:28px;
      color:#0d7fd6;
      margin-bottom:6px;
    }

    .stat span{
      color:#4f697e;
      font-size:14px;
      line-height:1.55;
    }

    /* =========================================================
      PANELS / CARDS
    ========================================================== */
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
      border:1px solid rgba(255,255,255,.52);
      border-radius:var(--pm-radius);
      box-shadow:
        0 24px 70px rgba(16,79,120,.16),
        inset 0 1px 0 rgba(255,255,255,.72);
      position:relative;
      overflow:hidden;
      backdrop-filter:blur(18px);
    }

    .panel::before{
      content:'';
      position:absolute;
      inset:0 0 auto 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    }

    .panel--hero{
      padding:30px;
    }

    .panel__kicker{
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#0d7fd6;
      font-weight:800;
    }

    .panel__h{
      font-size:34px;
      line-height:1.02;
      margin:12px 0 10px;
      font-weight:800;
      letter-spacing:-.04em;
    }

    .panel__p{
      color:#526b7f;
      line-height:1.72;
      margin:0 0 20px;
    }

    .heroCardList{
      display:grid;
      gap:12px;
      margin:18px 0 22px;
    }

    .heroCardItem{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.42);
      border:1px solid rgba(255,255,255,.52);
      backdrop-filter:blur(10px);
    }

    .heroCardItem i{
      width:34px;
      height:34px;
      flex:0 0 34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-style:normal;
      font-weight:800;
      background:linear-gradient(135deg, rgba(98,221,255,.18), rgba(20,157,255,.18));
      color:#0d7fd6;
    }

    .card{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,251,255,.90));
  border:1px solid rgba(20,157,255,.10);
  border-radius:24px;
  padding:24px;
  box-shadow:
    0 18px 46px rgba(16,79,120,.10),
    0 0 18px rgba(29,161,255,.04),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
}

    .card--tall{
      padding:28px;
    }

    .iconOrb{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(98,221,255,.16), rgba(20,157,255,.16));
      border:1px solid rgba(20,157,255,.10);
      margin-bottom:16px;
      color:#0d7fd6;
      font-size:22px;
    }

    /* =========================================================
      RIBBON
    ========================================================== */
    .mistRibbon{
      padding:16px 0;
      background:linear-gradient(90deg, rgba(98,221,255,.18), rgba(255,255,255,.95), rgba(98,221,255,.18));
      border-top:1px solid rgba(20,157,255,.08);
      border-bottom:1px solid rgba(20,157,255,.08);
      overflow:hidden;
    }

    .mistRibbon__track{
      display:flex;
      gap:44px;
      min-width:max-content;
      animation:marquee 24s linear infinite;
      color:#0d7fd6;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-size:13px;
    }

    /* =========================================================
      GRID SYSTEMS
    ========================================================== */
    .grid2,
    .grid3,
    .coolingGrid,
    .stepsGrid,
    .galleryGrid,
    .perfectForGrid,
    .testimonialGrid{
      display:grid;
      gap:18px;
    }

    .grid2{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .grid3{
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .coolingGrid{
      grid-template-columns:1.05fr .95fr;
      align-items:center;
    }

    .perfectForGrid{
      grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .testimonialGrid{
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .stepsGrid{
      grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .galleryGrid{
      grid-template-columns:1.15fr .85fr .85fr;
    }

    /* =========================================================
      SYSTEM VISUAL
    ========================================================== */
    .splitVisual{
      min-height:540px;
      border-radius:30px;
      overflow:hidden;
      position:relative;
      background:
        linear-gradient(180deg, rgba(16,41,61,.12), rgba(16,41,61,.42)),
        url('../assets/img/polar-mist-install.jpg') center/cover no-repeat;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--pm-shadow);
    }

    .splitVisual__glass{
      position:absolute;
      right:24px;
      bottom:24px;
      left:24px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .glassStat{
      padding:18px;
      border-radius:20px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(20,157,255,.10);
      backdrop-filter:blur(10px);
    }

    .glassStat strong{
      display:block;
      font-size:22px;
      color:#0d7fd6;
      margin-bottom:6px;
    }

    .glassStat span{
      color:#466279;
      font-size:14px;
    }

 /* =========================================================
  COMPARISON — TRUE OVERLAY / NO SCALING
========================================================= */

.comparison{
  --split: 50%;
  --handle-size: 78px;
  --divider-w: 3px;

  position:relative;
  min-height:560px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(20,157,255,.14);
  box-shadow:0 24px 70px rgba(16,79,120,.14);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(180deg, #eaf7ff 0%, #dff3fb 100%);
  isolation:isolate;
}

/* full-size layers */
.comparison__layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  will-change:clip-path, transform;
}

/* before image */
.comparison__layer--before{
  z-index:1;
  background-image:url('../assets/img/patio-before.png');
  transform:scale(1.01);
}

/* after image */
.comparison__layer--after{
  z-index:2;
  background-image:url('../assets/img/patio-after.png');
  transform:scale(1.01);
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
}

/* subtle polish */
.comparison:hover .comparison__layer{
  transform:scale(1.02);
}

/* glass wash */
.comparison::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%, rgba(255,255,255,.04) 65%, rgba(255,255,255,.10) 100%);
}

.comparison::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(16,41,61,.10);
}

/* divider line */
.comparison__shine{
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:var(--split);
  width:120px;
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.45) 50%,
      rgba(255,255,255,.10) 80%,
      rgba(255,255,255,0) 100%
    );
  filter:blur(8px);
  opacity:.8;
}

.comparison__shine::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:var(--divider-w);
  transform:translateX(-50%);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 28px rgba(98,221,255,.35);
}

/* handle */
.comparison__handle{
  position:absolute;
  top:50%;
  left:var(--split);
  transform:translate(-50%,-50%);
  width:var(--handle-size);
  height:var(--handle-size);
  border-radius:50%;
  z-index:6;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#03111a;
  font-size:28px;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.92), rgba(255,255,255,.55) 32%, rgba(255,255,255,.18) 33%),
    linear-gradient(135deg,var(--pm-ice),var(--pm-blue));
  box-shadow:
    0 16px 36px rgba(20,157,255,.34),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .14s ease, box-shadow .2s ease;
}

.comparison__handle::before{
  content:'↔';
  line-height:1;
}

.comparison__handle::after{
  content:'';
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  opacity:.75;
}

.comparison.is-dragging .comparison__handle{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:
    0 18px 44px rgba(20,157,255,.42),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* labels */
.comparison__label{
  position:absolute;
  top:18px;
  z-index:5;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(20,157,255,.12);
  color:#173047;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(16,79,120,.10);
  backdrop-filter:blur(12px);
}

.comparison__label--left{ left:18px; }
.comparison__label--right{ right:18px; }

.comparison__readout{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(20,157,255,.12);
  color:#173047;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(16,79,120,.10);
  backdrop-filter:blur(12px);
  white-space:nowrap;
}

.comparison__hint{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, calc(-50% + 78px));
  z-index:5;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(20,157,255,.12);
  color:#4a657b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(16,79,120,.10);
  backdrop-filter:blur(10px);
  animation:compareHintPulse 2.2s ease-in-out infinite;
  transition:opacity .3s ease, transform .3s ease;
}

.comparison.has-user-interacted .comparison__hint{
  opacity:0;
  transform:translate(-50%, calc(-50% + 88px));
  pointer-events:none;
}

.comparison__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:7;
  cursor:ew-resize;
}

.comparison.is-dragging .comparison__range{
  cursor:grabbing;
}

@keyframes compareHintPulse{
  0%,100%{opacity:.78}
  50%{opacity:1}
}

@media (max-width:920px){
  .comparison{
    min-height:400px;
    border-radius:24px;
    --handle-size:64px;
  }

  .comparison__label{
    top:14px;
    padding:9px 12px;
    font-size:11px;
  }

  .comparison__readout{
    bottom:14px;
    font-size:11px;
    padding:9px 12px;
  }

  .comparison__hint{
    font-size:10px;
    transform:translate(-50%, calc(-50% + 64px));
  }
}
    /* =========================================================
      QUOTE STRIP
    ========================================================== */
    .quoteStrip{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
      align-items:center;
      padding:30px;
      border-radius:32px;
      background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(234,247,255,.76));
      border:1px solid rgba(255,255,255,.60);
      box-shadow:0 24px 70px rgba(16,79,120,.14);
      backdrop-filter:blur(16px);
    }

    .quoteStrip__title{
      font-size:clamp(28px,4vw,48px);
      line-height:.98;
      letter-spacing:-.04em;
      margin:12px 0;
    }

    .quoteStrip__card{
      padding:22px;
      border-radius:24px;
      background:rgba(255,255,255,.58);
      border:1px solid rgba(255,255,255,.62);
      backdrop-filter:blur(12px);
    }

    /* =========================================================
      PERFECT FOR CARDS
    ========================================================== */
    .perfectForCard{
      position:relative;
      min-height:270px;
      border-radius:28px;
      overflow:hidden;
      border:1px solid rgba(20,157,255,.10);
      box-shadow:var(--pm-shadow);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,248,255,.92));
    }

    .perfectForCard__media{
      height:152px;
      background-size:cover;
      background-position:center;
      position:relative;
    }

    .perfectForCard__media::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(13,127,214,.08), rgba(13,127,214,.22));
    }

    .perfectForCard__body{
      padding:20px;
    }

    .perfectForCard__tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#0d7fd6;
      margin-bottom:10px;
    }

    .perfectForCard__tag::before{
      content:'';
      width:8px;
      height:8px;
      border-radius:50%;
      background:#62ddff;
      box-shadow:0 0 14px rgba(98,221,255,.55);
    }

    .perfectForCard p{
      margin:0;
      color:#466279;
      line-height:1.7;
    }

    /* =========================================================
      GALLERY
    ========================================================== */
    .galleryCard{
      min-height:280px;
      border-radius:26px;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--pm-shadow);
      background-size:cover;
      background-position:center;
    }

    .galleryCard::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(16,50,74,.04), rgba(16,50,74,.58));
    }

    .galleryCard__copy{
      position:absolute;
      left:20px;
      right:20px;
      bottom:20px;
      z-index:2;
      color:#fff;
    }

    .galleryCard__copy strong{
      display:block;
      font-size:24px;
      margin-bottom:8px;
    }

    .galleryCard__copy span{
      color:var(--pm-ice);
    }

    /* =========================================================
      TESTIMONIALS
    ========================================================== */
    .testimonialLuxury{
      position:relative;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,249,255,.82));
      border:1px solid rgba(255,255,255,.66);
      border-radius:28px;
      padding:24px;
      box-shadow:
        0 20px 48px rgba(16,79,120,.10),
        inset 0 1px 0 rgba(255,255,255,.74);
    }

    .testimonialLuxury::before{
      content:'“';
      position:absolute;
      top:14px;
      right:18px;
      font-size:64px;
      line-height:1;
      color:rgba(13,127,214,.10);
      font-weight:800;
    }

    .testimonialLuxury__stars{
      font-size:18px;
      letter-spacing:3px;
      color:#0d7fd6;
      margin-bottom:14px;
    }

    .testimonialLuxury__text{
      color:#355066;
      line-height:1.8;
      margin:0 0 18px;
    }

    .testimonialLuxury__meta{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .testimonialLuxury__avatar{
      width:46px;
      height:46px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,#62ddff,#149dff);
      color:#fff;
      font-weight:800;
      box-shadow:0 12px 20px rgba(20,157,255,.20);
    }

    .testimonialLuxury__name{
      font-weight:800;
      color:#173047;
    }

    .testimonialLuxury__role{
      font-size:13px;
      color:#5a7288;
    }

    /* =========================================================
      STEPS
    ========================================================== */
    .stepsCard{
      position:relative;
      padding-top:74px;
    }

    .stepNo{
      position:absolute;
      top:20px;
      left:20px;
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:800;
      color:#04111d;
      background:linear-gradient(135deg,var(--pm-ice),var(--pm-cyan));
    }

    /* =========================================================
      CTA
    ========================================================== */
    .cta{
      padding:92px 0 110px;
      position:relative;
      overflow:hidden;
    }

    .cta::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 32%, rgba(98,221,255,.24), transparent 24%),
        radial-gradient(circle at 82% 38%, rgba(26,77,255,.08), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.16));
      pointer-events:none;
    }

    .cta__panel{
      position:relative;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:center;
      padding:36px;
      border-radius:36px;
      background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(234,247,255,.80));
      border:1px solid rgba(255,255,255,.62);
      box-shadow:0 24px 70px rgba(16,79,120,.14);
      backdrop-filter:blur(16px);
    }

    .cta__title{
      font-size:clamp(36px,5vw,70px);
    }

    /* =========================================================
  FOOTER
========================================================= */
.footer{
  padding:34px 0 48px;
  background:
    linear-gradient(180deg, rgba(7,16,30,.98), rgba(4,10,20,1));
  border-top:1px solid rgba(124,240,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 -10px 30px rgba(0,0,0,.18);
}

.footer__inner{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.footer__brandBlock{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer__logo{
  width:auto;
  max-width:180px;
  height:auto;
  margin-bottom:4px;
}

.footer__brand{
  font-size:20px;
  font-weight:800;
  letter-spacing:.24em;
  color:#f4fdff;
}

.footer__sub{
  color:#9fc4da;
}

.footer__fine{
  color:#7fa5bc;
}

.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.footer__links a{
  color:#e9fbff;
  font-weight:600;
  transition:color .2s ease, text-shadow .2s ease, opacity .2s ease;
}

.footer__links a:hover{
  color:#7cf0ff;
  text-shadow:0 0 14px rgba(124,240,255,.22);
}

@media (max-width:920px){
  .footer__inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer__logo{
    max-width:150px;
  }
}

    /* =========================================================
      MODAL / FORM
    ========================================================== */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:100;
    }

    .modal[aria-hidden="false"]{
      display:flex;
    }

    .modal__backdrop{
      position:absolute;
      inset:0;
      background:rgba(160,210,235,.38);
      backdrop-filter:blur(8px);
    }

    .modal__card{
      position:relative;
      width:min(100%,680px);
      max-height:min(92vh,920px);
      overflow:auto;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,250,255,.98));
      border:1px solid rgba(20,157,255,.10);
      border-radius:28px;
      box-shadow:var(--pm-shadow);
    }

    .modal__head{
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:24px 24px 12px;
    }

    .modal__close{
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(20,157,255,.10);
      background:rgba(255,255,255,.92);
      color:#0d7fd6;
      cursor:pointer;
      font-size:24px;
    }

    .modal__body{
      padding:0 24px 24px;
    }

    .form{
      display:grid;
      gap:14px;
    }

    .form label{
      display:grid;
      gap:8px;
    }

    .form span{
      font-size:14px;
      font-weight:700;
      color:#0d7fd6;
    }

    .form input,
    .form select,
    .form textarea{
      width:100%;
      min-height:56px;
      padding:0 16px;
      border-radius:18px;
      border:1px solid rgba(20,157,255,.12);
      background:rgba(255,255,255,.96);
      color:#173047;
      outline:none;
    }

    .form textarea{
      min-height:120px;
      padding:16px;
      resize:vertical;
    }

    .form input::placeholder,
    .form textarea::placeholder{
      color:rgba(23,48,71,.42);
    }

    .form .row{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .formNote{
      color:var(--pm-muted);
      font-size:14px;
      line-height:1.6;
    }

    /* =========================================================
      ANIMATIONS
    ========================================================== */
    @keyframes heroVideoDrift{
      0%{
        transform:scale(1.04) translate3d(0,0,0);
      }
      100%{
        transform:scale(1.10) translate3d(-1.2%,-1%,0);
      }
    }

    @keyframes hazeBreath{
      0%,100%{
        opacity:.42;
        transform:translateX(0) scale(1);
      }
      50%{
        opacity:.82;
        transform:translateX(12px) scale(1.08);
      }
    }

    @keyframes marquee{
      from{
        transform:translateX(0);
      }
      to{
        transform:translateX(-50%);
      }
    }

    /* =========================================================
      RESPONSIVE
    ========================================================== */
    @media (max-width:1120px){
      .hero__grid,
      .coolingGrid,
      .quoteStrip,
      .cta__panel,
      .galleryGrid,
      .stepsGrid{
        grid-template-columns:1fr;
      }

      .perfectForGrid,
      .testimonialGrid{
        grid-template-columns:1fr 1fr;
      }

      .grid3{
        grid-template-columns:1fr 1fr;
      }

      .hero__stats{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:920px){
      .nav{
        display:none;
      }

      .mobileToggle{
        display:flex;
      }

      .hero{
        min-height:auto;
        padding-top:24px;
      }

      .hero__grid,
      .grid2,
      .grid3,
      .perfectForGrid,
      .testimonialGrid{
        grid-template-columns:1fr;
      }

      .section{
        padding:72px 0;
      }

      .comparison{
        min-height:380px;
      }

      .splitVisual{
        min-height:420px;
      }

      .cta__panel,
      .quoteStrip{
        padding:22px;
      }

      .form .row{
        grid-template-columns:1fr;
      }
    }
	  
	  /* =========================================================
  BANNER IMAGE SECTION
========================================================= */
.pmBanner{
  position:relative;
  padding:0;
}

.pmBanner__image{
  position:relative;
  min-height:520px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.pmBanner__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,20,34,.72) 0%, rgba(8,20,34,.44) 42%, rgba(8,20,34,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 100%);
}

.pmBanner__content{
  position:relative;
  z-index:2;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  max-width:760px;
  padding:80px 0;
  color:#fff;
}

.pmBanner__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#dff7ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.pmBanner__title{
  margin:18px 0 14px;
  font-size:clamp(38px,5vw,72px);
  line-height:.95;
  letter-spacing:-.045em;
  color:#fff;
  max-width:760px;
}

.pmBanner__text{
  margin:0;
  max-width:640px;
  font-size:19px;
  line-height:1.8;
  color:rgba(255,255,255,.88);
}

@media (max-width:920px){
  .pmBanner__image,
  .pmBanner__content{
    min-height:420px;
  }
}
	  
	  .btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#7ef0ff,#3fc9ff 48%,#1d84ff);
  box-shadow:
    0 16px 36px rgba(29,161,255,.20),
    0 0 18px rgba(82,223,255,.12),
    inset 0 1px 0 rgba(255,255,255,.30);
}
	  
	 /* =========================================================
  TESTIMONIALS + IPHONE VIDEO
========================================================= */
.testimonialsSplit{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:34px;
  align-items:start;
}

.testimonialsSplit__left{
  min-width:0;
}

.testimonialsSplit__right{
  position:relative;
}

.phoneShowcase{
  position:sticky;
  top:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  perspective:1400px;
}

.phoneGlow{
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(82,223,255,.24), rgba(29,161,255,.14) 42%, rgba(29,161,255,0) 72%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
  animation:phoneGlowPulse 4.6s ease-in-out infinite;
}

.iphoneMockup{
  position:relative;
  z-index:2;
  width:min(100%, 360px);
  transform-style:preserve-3d;
  will-change:transform;
  animation:phoneIdleFloat 5.4s ease-in-out infinite;
  transition:transform .35s ease;
}

.iphoneMockup.is-tilting{
  animation:none;
  transition:none;
}

.iphoneMockup__bezel{
  position:relative;
  padding:14px;
  border-radius:42px;
  background:
    linear-gradient(180deg, #111722, #05070b);
  box-shadow:
    0 30px 70px rgba(16,79,120,.24),
    0 0 30px rgba(82,223,255,.12),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.65);
  transform:translateZ(0);
  transition:box-shadow .35s ease, transform .35s ease;
}

.iphoneMockup__bezel::before{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:39px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.iphoneMockup__bezel::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:42px;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(82,223,255,.08),
    0 0 24px rgba(82,223,255,.10);
  opacity:.85;
}

.iphoneMockup__notch{
  position:absolute;
  top:9px;
  left:50%;
  transform:translateX(-50%);
  width:38%;
  height:28px;
  border-radius:0 0 18px 18px;
  background:#020304;
  z-index:6;
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}

.iphoneMockup__screen{
  position:relative;
  aspect-ratio:9 / 19.5;
  border-radius:32px;
  overflow:hidden;
  background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 60px rgba(0,0,0,.18);
  transform:translateZ(24px);
}

.iphoneMockup__screen::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 70%, rgba(0,0,0,.12) 100%);
}

.iphoneMockup__screen::after{
  content:'';
  position:absolute;
  inset:-20% -40%;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 26%,
    rgba(255,255,255,.18) 36%,
    rgba(255,255,255,.04) 46%,
    rgba(255,255,255,0) 58%
  );
  transform:translateX(-55%) rotate(8deg);
  animation:phoneReflectionSweep 5.2s ease-in-out infinite;
}

.iphoneMockup__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.05);
  transform:scale(1.01);
}

.iphoneMockup__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 16px 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,.30) 100%);
  pointer-events:none;
  z-index:6;
}

.iphoneMockup__badge{
  align-self:flex-start;
  margin-top:24px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,20,34,.52);
  color:#eafcff;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(82,223,255,.10);
  animation:phoneBadgePulse 3.4s ease-in-out infinite;
}

.iphoneMockup__caption{
  align-self:flex-start;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(8,20,34,.48);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transform:translateZ(30px);
}

.phoneNote{
  max-width:320px;
  text-align:center;
  color:var(--pm-muted);
  font-size:15px;
  line-height:1.7;
  position:relative;
  z-index:2;
}

/* hover boost */
.iphoneMockup:hover .iphoneMockup__bezel{
  box-shadow:
    0 42px 100px rgba(16,79,120,.30),
    0 0 42px rgba(82,223,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.70);
}

.iphoneMockup:hover + .phoneNote{
  color:var(--pm-text);
}

/* scrolling testimonials */
.testimonialScroller{
  position:relative;
  height:760px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
}

.testimonialTrack{
  display:flex;
  flex-direction:column;
  gap:18px;
  animation:testimonialScroll 26s linear infinite;
}

.testimonialScroller:hover .testimonialTrack{
  animation-play-state:paused;
}

@keyframes testimonialScroll{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(calc(-50% - 9px)); }
}

@keyframes phoneIdleFloat{
  0%,100%{
    transform:perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0);
  }
  50%{
    transform:perspective(1400px) rotateX(1.6deg) rotateY(-2.2deg) translateY(-8px);
  }
}

@keyframes phoneGlowPulse{
  0%,100%{
    transform:scale(1);
    opacity:.82;
  }
  50%{
    transform:scale(1.08);
    opacity:1;
  }
}

@keyframes phoneReflectionSweep{
  0%,100%{
    transform:translateX(-55%) rotate(8deg);
    opacity:.55;
  }
  50%{
    transform:translateX(55%) rotate(8deg);
    opacity:.85;
  }
}

@keyframes phoneBadgePulse{
  0%,100%{
    box-shadow:0 0 18px rgba(82,223,255,.10);
  }
  50%{
    box-shadow:0 0 26px rgba(82,223,255,.18);
  }
}

@media (max-width:1120px){
  .testimonialsSplit{
    grid-template-columns:1fr;
  }

  .testimonialsSplit__right{
    order:-1;
  }

  .phoneShowcase{
    position:relative;
    top:auto;
  }

  .testimonialScroller{
    height:620px;
  }
}

@media (max-width:920px){
  .iphoneMockup{
    width:min(100%, 300px);
    animation:none;
  }

  .phoneGlow{
    width:240px;
    height:240px;
  }

  .testimonialScroller{
    height:540px;
  }

  .iphoneMockup__screen::after{
    animation:none;
    opacity:.45;
  }
}
	  
	  /* =========================================================
  SOCIAL REEL PLAYER — INSTAGRAM STYLE
========================================================= */
.reelPlayer{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}

.reelClip{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease, transform .8s ease;
  transform:scale(1.02);
  pointer-events:none;
}

.reelClip.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.reelPlayer__overlay{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 16px 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,.32) 100%);
  pointer-events:none;
}

.reelProgress{
  position:absolute;
  top:14px;
  left:12px;
  right:12px;
  z-index:8;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
}

.reelProgress__item{
  position:relative;
  height:4px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:999px;
  overflow:hidden;
}

.reelProgress__track,
.reelProgress__fill{
  position:absolute;
  inset:0;
  border-radius:999px;
}

.reelProgress__track{
  background:rgba(255,255,255,.28);
}

.reelProgress__fill{
  width:0%;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 12px rgba(255,255,255,.18);
}

.reelProgress__item.is-complete .reelProgress__fill{
  width:100%;
}

.reelProgress__item.is-active .reelProgress__fill{
  width:0%;
}

.iphoneMockup__badge{
  align-self:flex-start;
  margin-top:28px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,20,34,.52);
  color:#eafcff;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(82,223,255,.10);
  animation:phoneBadgePulse 3.4s ease-in-out infinite;
}

.iphoneMockup__caption{
  align-self:flex-start;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(8,20,34,.48);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transform:translateZ(30px);
}
	  @media (max-width:920px){
  .hero{
    min-height:auto;
    padding:18px 0 28px;
  }

  .hero::before{
    background:linear-gradient(
      180deg,
      rgba(245,251,255,.62) 0%,
      rgba(245,251,255,.42) 30%,
      rgba(255,255,255,.22) 58%,
      rgba(255,255,255,.52) 100%
    );
  }

  .hero__grid{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }

  .hero__copy{
    padding:34px 0 8px;
  }

  .hero__title{
    font-size:clamp(38px, 12vw, 58px);
    line-height:.98;
    max-width:100%;
  }

  .lead{
    font-size:17px;
    line-height:1.7;
    max-width:100%;
  }

  .hero__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:22px;
  }

  .hero__actions .btn{
    width:100%;
  }

  .hero__stats{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
  }

  .stat{
    padding:14px 16px;
    border-radius:18px;
  }

  .stat strong{
    font-size:22px;
  }

  .panel--hero{
    padding:22px;
    border-radius:22px;
  }

  .panel__h{
    font-size:28px;
  }

  .heroCardList{
    gap:10px;
    margin:16px 0 18px;
  }

  .heroCardItem{
    padding:12px;
    border-radius:16px;
  }

  .mist-left,
  .mist-right{
    width:140px;
  }
}
	  @media (max-width:920px){
  .splitVisual{
    min-height:auto;
    padding:220px 16px 16px;
    background-position:center;
  }

  .splitVisual__glass{
    position:relative;
    right:auto;
    bottom:auto;
    left:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .glassStat{
    padding:16px;
    border-radius:18px;
  }

  .glassStat strong{
    font-size:18px;
  }

  .glassStat span{
    font-size:14px;
    line-height:1.6;
  }
}
	  .formMessage{
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.6;
  border:1px solid transparent;
}

.formMessage.is-success{
  background:rgba(70, 190, 120, .12);
  color:#0f6b34;
  border-color:rgba(70, 190, 120, .22);
}

.formMessage.is-error{
  background:rgba(220, 70, 70, .10);
  color:#9f1f1f;
  border-color:rgba(220, 70, 70, .18);
}
	  
	/* ======================================================
   HOW IT WORKS — INSANE LUXURY VERSION
====================================================== */
.howWorksLuxury{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(114,200,255,.10), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(180deg, #09111f 0%, #0a1424 48%, #09101d 100%);
}

.howWorksLuxury::before{
  content:"";
  position:absolute;
  inset:-10% -5%;
  background:
    radial-gradient(circle at 20% 30%, rgba(138,220,255,.08), transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(138,220,255,.06), transparent 18%);
  pointer-events:none;
  animation: pmAmbientFloat 16s ease-in-out infinite alternate;
}

.howWorksLuxury::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.03) 48%,
      rgba(150,220,255,.05) 50%,
      rgba(255,255,255,.03) 52%,
      transparent 100%);
  opacity:.35;
  pointer-events:none;
  mix-blend-mode:screen;
}

.howWorksLuxury .wrap{
  position:relative;
  z-index:2;
}

.sectionHead--center{
  text-align:center;
}

.howWorksLuxury .sectionHead{
  position:relative;
  z-index:3;
}

.howWorksLuxury .sectionHead .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}

.howWorksLuxury .h2{
  margin:18px 0 0;
  font-size:clamp(34px, 5vw, 62px);
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:700;
  position:relative;
  z-index:3;
}

.howWorksLuxury .sectionIntro{
  max-width:760px;
  margin:18px auto 0;
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1.75;
  position:relative;
  z-index:3;
}

.stepsGrid--luxury{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  margin-top:56px;
}

.stepsConnector{
  position:absolute;
  left:6%;
  right:6%;
  top:calc(50% + 70px);
  height:2px;
  z-index:1;
  pointer-events:none;
  opacity:.9;
}

.stepsConnector::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(110,200,255,.00) 0%,
    rgba(110,200,255,.35) 15%,
    rgba(180,235,255,.75) 50%,
    rgba(110,200,255,.35) 85%,
    rgba(110,200,255,.00) 100%
  );
  box-shadow:
    0 0 10px rgba(120,210,255,.28),
    0 0 24px rgba(120,210,255,.18);
}

.stepsConnector::after{
  content:"";
  position:absolute;
  top:50%;
  left:-10%;
  width:24%;
  height:10px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(220,248,255,.95), transparent);
  filter:blur(6px);
  animation: pmTravelGlow 5s linear infinite;
}

.stepsCard--luxury{
  position:relative;
  z-index:2;
  min-height:100%;
  padding:28px 24px 26px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transition:
    transform .4s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.stepsCard--luxury::before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -30%;
  width:60%;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.02) 25%,
    rgba(180,235,255,.18) 50%,
    rgba(255,255,255,.02) 75%,
    transparent 100%
  );
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}

.stepsCard--luxury:hover::before{
  opacity:1;
  animation: pmShimmer 1.25s ease forwards;
}

.stepsCard--luxury:hover{
  transform:translateY(-10px);
  border-color:rgba(118,203,255,.28);
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(118,203,255,.08) inset,
    0 0 28px rgba(118,203,255,.10);
}

.stepsTop{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.stepsCard--luxury .stepNo{
  position:relative;
  z-index:5;
  width:62px;
  height:62px;
  min-width:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  letter-spacing:.14em;
  color:#fff;
  background:linear-gradient(135deg, rgba(116,205,255,.26), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 24px rgba(0,0,0,.20),
    0 0 18px rgba(116,205,255,.14);
  flex:0 0 62px;
}

	  /* NEW badge (cleaner + centered) */
.stepBadge{
  position:relative;
  z-index:5;
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg, rgba(120,205,255,.22), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 20px rgba(0,0,0,.25);
}

.stepBadge span{
  font-size:14px;
  font-weight:800;
  letter-spacing:.18em;
  color:#fff;
}
	  
/* FIXED line */
.stepLine{
  height:1px;
  flex:1;
  opacity:.6;
  background:linear-gradient(
    90deg,
    rgba(120,205,255,.5),
    rgba(255,255,255,.05)
  );
}

.stepsCard--luxury .h3{
  position:relative;
  z-index:4;
  margin:0 0 12px;
  color:#fff;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.stepsCard--luxury .copy{
  position:relative;
  z-index:4;
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:16px;
  line-height:1.8;
}

/* Reveal */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0s);
}

.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Animation keyframes */
@keyframes pmTravelGlow{
  0%{ left:-15%; opacity:0; }
  8%{ opacity:1; }
  50%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

@keyframes pmShimmer{
  0%{
    transform:translateX(-180%) rotate(18deg);
  }
  100%{
    transform:translateX(420%) rotate(18deg);
  }
}

@keyframes pmAmbientFloat{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    transform:translate3d(0,-12px,0) scale(1.03);
  }
}

/* Responsive */
@media (max-width: 1100px){
  .stepsGrid--luxury{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stepsConnector{
    display:none;
  }
}

@media (max-width: 680px){
  .stepsGrid--luxury{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:34px;
  }

  .stepsCard--luxury{
    padding:22px 18px 20px;
    border-radius:22px;
  }

  .howWorksLuxury .sectionIntro{
    font-size:16px;
  }

  .stepsCard--luxury .h3{
    font-size:22px;
  }

  .stepsCard--luxury .stepNo{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:16px;
    font-size:15px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .howWorksLuxury::before,
  .stepsConnector::after,
  .stepsCard--luxury::before{
    animation:none !important;
  }

  .reveal-up{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
	  
	  .stepsCard--luxury .h3{
  margin-top:4px; /* was too tight before */
}
	  .stepBadge::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:20px;
  background:radial-gradient(circle, rgba(120,205,255,.25), transparent 70%);
  opacity:.6;
  z-index:-1;
}
	  
/* ======================================================
   WHY POLAR MIST — FULL INSANE STYLE BLOCK
====================================================== */
.whyLuxury{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(90,180,255,.16), transparent 24%),
    radial-gradient(circle at 85% 78%, rgba(255,255,255,.06), transparent 20%),
    linear-gradient(180deg, #07101d 0%, #091425 45%, #08111e 100%);
}

.whyLuxury::before{
  content:"";
  position:absolute;
  inset:-10% -6%;
  background:
    radial-gradient(circle at 18% 28%, rgba(150,225,255,.11), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(150,225,255,.08), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(70,150,255,.08), transparent 34%);
  animation: whyAmbientFloat 14s ease-in-out infinite alternate;
  pointer-events:none;
}

.whyLuxury::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.02) 46%,
      rgba(120,210,255,.07) 50%,
      rgba(255,255,255,.02) 54%,
      transparent 100%
    );
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:screen;
}

.whyLuxury .wrap{
  position:relative;
  z-index:2;
}

.whyLuxury .sectionHead{
  position:relative;
  z-index:3;
}

.sectionHead--center{
  text-align:center;
}

.whyLuxury .sectionHead .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.18);
}

.whyLuxury .h2{
  margin:18px auto 0;
  max-width:1020px;
  color:#fff;
  font-size:clamp(38px, 5.4vw, 68px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:800;
  text-shadow:
    0 8px 30px rgba(0,0,0,.28),
    0 0 24px rgba(130,210,255,.08);
}

.whyLuxury .sectionLead{
  max-width:860px;
  margin:22px auto 0;
  color:rgba(255,255,255,.80);
  font-size:18px;
  line-height:1.85;
}

.whyGrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin-top:60px;
}

.whyGrid::before{
  content:"";
  position:absolute;
  left:50%;
  top:42%;
  width:420px;
  height:420px;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle, rgba(120,205,255,.10), transparent 68%);
  pointer-events:none;
  filter:blur(10px);
  z-index:0;
}

.whyCard{
  position:relative;
  z-index:1;
  min-height:100%;
  padding:30px 26px 28px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 22px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:
    transform .4s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.whyCard::before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -30%;
  width:58%;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.02) 24%,
    rgba(180,235,255,.18) 50%,
    rgba(255,255,255,.02) 76%,
    transparent 100%
  );
  opacity:0;
  pointer-events:none;
}

.whyCard::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:-40px;
  height:120px;
  background:radial-gradient(circle, rgba(145,220,255,.18), transparent 70%);
  pointer-events:none;
  opacity:.9;
}

.whyCard:hover::before{
  opacity:1;
  animation: whyShimmer 1.2s ease forwards;
}

.whyCard:hover{
  transform:translateY(-12px) scale(1.01);
  border-color:rgba(118,203,255,.34);
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(118,203,255,.10) inset,
    0 0 34px rgba(118,203,255,.14);
}

.whyCard__top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.whyIconOrb{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  min-width:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  background:linear-gradient(135deg, rgba(116,205,255,.30), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 28px rgba(0,0,0,.22),
    0 0 22px rgba(116,205,255,.16);
}

.whyIconOrb::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:24px;
  background:radial-gradient(circle, rgba(120,205,255,.28), transparent 72%);
  z-index:-1;
}

.whyLine{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(118,203,255,.62), rgba(255,255,255,.08));
  opacity:.9;
}

.whyCard .h3{
  position:relative;
  z-index:2;
  margin:0 0 14px;
  color:#fff;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.whyCard .copy{
  position:relative;
  z-index:2;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.85;
}

/* reveal */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0s);
}

.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* animations */
@keyframes whyShimmer{
  0%{
    transform:translateX(-180%) rotate(18deg);
  }
  100%{
    transform:translateX(420%) rotate(18deg);
  }
}

@keyframes whyAmbientFloat{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    transform:translate3d(0,-10px,0) scale(1.03);
  }
}

/* responsive */
@media (max-width: 1100px){
  .whyGrid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .whyGrid::before{
    width:320px;
    height:320px;
    top:30%;
  }
}

@media (max-width: 680px){
  .whyLuxury .h2{
    font-size:clamp(34px, 10vw, 48px);
  }

  .whyLuxury .sectionLead{
    font-size:16px;
    line-height:1.75;
  }

  .whyCard{
    padding:22px 18px 20px;
    border-radius:22px;
  }

  .whyCard .h3{
    font-size:24px;
  }

  .whyIconOrb{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:16px;
    font-size:21px;
  }
}

@media (prefers-reduced-motion: reduce){
  .whyLuxury::before,
  .whyCard::before{
    animation:none !important;
  }

  .reveal-up{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}