:root{
    --bg:#ea1bb2;                /* page background */
    --aqua:#42c6e9;              /* text color */
    --panel-w:min(92vw, 1312px); /* main panel width */
    --panel-h:clamp(300px, 48vw, 453px);
    --radius:10px;
    --edge:rgba(255,255,255,.65);
    --blur:10px;
  }

  html,body{height:100%; margin:0; font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg);}
  .spacer{height:100vh; display:grid; place-items:center; color:#fff; font-weight:700; letter-spacing:.12em}

  .slider-sec{
    height:100vh; display:flex; align-items:center; justify-content:center;
    overscroll-behavior:contain;
  }
  .deck{ position:relative; width:var(--panel-w); height:var(--panel-h); }

  /* frosted glass card */
  .why_were_different_section .card{
    position:absolute; inset:0; margin:auto; width:1312px; height:453px;
    border:1px solid var(--edge);
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.75));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    box-shadow:0 16px 34px rgba(0,0,0,.18);
    -webkit-mask-image: radial-gradient(120% 140% at 50% 50%, #000 68%, rgba(0,0,0,.28) 82%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(120% 140% at 50% 50%, #000 68%, rgba(0,0,0,.28) 82%, rgba(0,0,0,0) 100%);
    display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(16px,4vw,60px);
    padding: clamp(22px,3.6vw,100px) clamp(22px,4.2vw,100px);
    color:var(--aqua);
    opacity:.90; z-index:1;
    will-change: transform, opacity;
    transition: transform 0.75s cubic-bezier(.22,.61,.36,1), opacity 0.75s cubic-bezier(.22,.61,.36,1);
    align-items: center;
  }

  /* states */
  .why_were_different_section .card[data-pos="0"]{ opacity:1; transform:translateY(0) scale(1); z-index:3; }
  .why_were_different_section .card[data-pos="1"]{ opacity:0.6; transform:translateY(-60px) scale(0.92); z-index:2; }
  .why_were_different_section .card[data-pos="out"]{ opacity:0; transform:translateY(80px) scale(0.85); z-index:1; }

  .hero-title{
    color: #E914C4;
    font-size: 36px; font-weight: 300;
    letter-spacing: 12px; text-transform: uppercase;
    margin:0;
  }
  .hero-title strong{ font-weight:800; }

  .points{
    align-self:center; margin:0; padding-left: 1.2em; list-style: disc;
    color: var(--aqua);
    font-size: clamp(15px, 1.2vw, 17px);
    letter-spacing: 1.5px;
  }
  .points li{
    margin: 0 0 16px 0;
    font-size: 17px; font-weight: 500; line-height: 32px;
    letter-spacing: 1.5px; color:#E914C4;
  }
  .points li::marker{ color: #E914C4; }

  @media (max-width: 1380px){
     .deck{ width:100%; }
     .why_were_different_section .card{ width:90%; }
  }
  @media (max-width: 780px){
    .why_were_different_section .card{
      grid-template-columns: 1fr;
      width:90%; height:auto;
    }
    .deck { width: 100%; height: 75%; }
    .hero-title{ font-size: 20px; letter-spacing: 4.6px; text-align: center; }
    .points li{ font-size: 16px; font-weight: 400; line-height: 32px; }
    .points{ padding-left: 0; }
  }