.swp-hero-v24 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,60,255,.18), transparent 18%),
    linear-gradient(180deg, #000000 0%, #000000 100%);
  color: #fff;
  isolation: isolate;
}
.swp-hero-v24 * { box-sizing: border-box; }
.swp-hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 20%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.75) 80%, rgba(0,0,0,.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.95) 100%);
  z-index:0;
}
.swp-center-glow{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(52vw, 940px); height:min(52vw, 940px);
  border-radius:50%;
  background: radial-gradient(circle, rgba(116,82,255,.24) 0%, rgba(149,83,255,.12) 20%, rgba(255,83,136,.05) 34%, rgba(0,0,0,0) 70%);
  z-index: 1;
  filter: blur(18px);
}

.swp-phones-masonry{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}
.swp-phones-desktop{
  display:grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 38px;
  width:min(1820px, 118vw);
  left:50%; top:-7vh; transform:translateX(-50%);
  padding:0 44px;
}
.swp-col{ display:flex; flex-direction:column; gap:38px; }
.swp-col-1{ margin-top:-8vh; }
.swp-col-2{ margin-top:1vh; }
.swp-col-3{ margin-top:-3vh; }
.swp-col-4{ margin-top:6vh; }
.swp-col-5{ margin-top:-5vh; }
.swp-col-6{ margin-top:4vh; }
.swp-col-7{ margin-top:-2vh; }
.swp-col-8{ margin-top:7vh; }

.swp-phone{
  position:relative; display:block; width:100%; max-width:210px; aspect-ratio:0.53/1;
  text-decoration:none; color:inherit; pointer-events:auto; margin-inline:auto;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.46));
  transform-origin:center center;
}
.swp-phone-mod-1{ transform:rotate(-1.8deg); }
.swp-phone-mod-2{ transform:rotate(1.8deg); }
.swp-phone-mod-3{ transform:rotate(-0.8deg); }
.swp-phone-shell{
  display:block; position:relative; width:100%; height:100%;
  padding:10px; border-radius:34px;
  background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 24%, rgba(0,0,0,.16) 65%, rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 26px rgba(255,255,255,.05);
}
.swp-phone-screen{
  position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:26px;
  background:linear-gradient(180deg, #050507 0%, #020204 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.swp-notch{
  position:absolute; left:50%; top:18px; transform:translateX(-50%); width:72px; height:7px; border-radius:999px;
  background:rgba(255,255,255,.12); z-index:5;
}
.swp-top-actions{ position:absolute; top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; z-index:4; }
.swp-discount{ background:linear-gradient(135deg,#8f60ff,#cf7fff); color:#fff; font-weight:800; font-size:14px; padding:11px 13px; border-radius:999px; }
.swp-icons{ display:flex; gap:10px; }
.swp-icons span{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.95); color:#111; font-size:18px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.swp-image-wrap{ position:absolute; inset:0; }
.swp-image{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.7;
  filter: brightness(.55) contrast(1.1) saturate(.9);
}
.swp-image-wrap.is-empty .swp-image{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.7;
  filter: brightness(.55) contrast(1.1) saturate(.9);
}
.swp-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.32) 42%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.swp-content{ position:absolute; left:18px; right:18px; bottom:18px; z-index:4; }
.swp-chip{ display:inline-block; margin:0 8px 10px 0; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; }
.swp-chip-muted{ background:rgba(255,255,255,.16); color:rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.swp-chip-brand{ background:rgba(79,142,255,.88); color:#fff; }
.swp-title{ display:block; font-size:17px; font-weight:800; line-height:1.06; letter-spacing:-.03em; text-shadow:0 2px 8px rgba(0,0,0,.3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.swp-price-row{ display:flex; align-items:flex-end; gap:12px; margin-top:14px; }
.swp-price{ font-size:20px; font-weight:900; }
.swp-old-price{ font-size:12px; color:rgba(255,255,255,.68); text-decoration:line-through; padding-bottom:3px; }

.swp-hero-content {
  position: relative; z-index: 3; min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 120px 24px 80px; max-width: 720px; margin: 0 auto;
}
.swp-hero-content::before{
  content:''; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:min(56vw, 980px); height:min(36vw, 560px); border-radius:48px;
  background:radial-gradient(circle, rgba(0,0,0,.28) 0%, rgba(0,0,0,.14) 44%, rgba(0,0,0,0) 76%);
  z-index:-1;
}
.swp-hero-content h1{ margin:0 0 18px; font-size: clamp(60px, 8vw, 112px); line-height:.92; letter-spacing:-.06em; font-weight:900; color:#fff !important; }
.swp-hero-content p{ margin:0; font-size: clamp(20px, 1.8vw, 26px); line-height:1.25; color:rgba(255,255,255,.92); max-width: 760px; }
.swp-hero-buttons{ margin-top:36px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.swp-btn{ min-width: 220px; height: 78px; padding: 0 34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:900; font-size:20px; }
.swp-btn-primary{ background:linear-gradient(90deg,#ff5b74,#ff4f97); color:#fff; box-shadow:0 20px 46px rgba(255,79,151,.24), 0 0 48px rgba(111,67,255,.16); }
.swp-btn-secondary{ color:#fff; border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.swp-hero-empty{ min-height: 50vh; display:flex; align-items:center; justify-content:center; background:#050505; color:#fff; }
.swp-phones-mobile{ display:none; }

@media (max-width: 1600px){
  .swp-phones-desktop{ width:min(1600px, 120vw); grid-template-columns: repeat(7, minmax(120px, 1fr)); }
  .swp-col-8{ display:none; }
}
@media (max-width: 1320px){
  .swp-phones-desktop{ width:min(1380px, 122vw); grid-template-columns: repeat(6, minmax(120px, 1fr)); gap:30px; }
  .swp-col-7,.swp-col-8{ display:none; }
  .swp-phone{ max-width:186px; }
  .swp-hero-content{ max-width:680px; }
}
@media (max-width: 1040px){
  .swp-phones-desktop{ display:none; }
  .swp-phones-mobile{
    display:grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap:20px;
    width:116vw;
    left:50%; top:-5vh; transform:translateX(-50%);
    padding:0 8px;
  }
  .swp-col-mobile-1,.swp-col-mobile-2,.swp-col-mobile-3{ display:flex; flex-direction:column; gap:20px; }
  .swp-col-mobile-1{ margin-top:-6vh; }
  .swp-col-mobile-2{ margin-top:8vh; }
  .swp-col-mobile-3{ margin-top:-2vh; }
  .swp-phone{ max-width:180px; }
  .swp-phone-mod-1{ transform:rotate(-1.8deg); }
  .swp-phone-mod-2{ transform:rotate(1.8deg); }
  .swp-phone-mod-3{ transform:rotate(-0.8deg); }
  .swp-hero-bg{ background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.54) 52%, rgba(0,0,0,.90) 100%); }
  .swp-hero-content{ padding: 118px 22px 72px; justify-content:center; min-height:100svh; max-width:580px; }
  .swp-hero-content::before{ width:min(88vw, 620px); height:min(86vw, 520px); }
  .swp-hero-content h1{ font-size: clamp(42px, 12vw, 72px); }
  .swp-hero-content p{ font-size: 18px; max-width: 340px; }
  .swp-hero-buttons{ width:100%; gap:20px; }
  .swp-btn{ width:100%; min-width:0; height:64px; font-size:18px; }
}
@media (max-width: 640px){
  .swp-phones-mobile{ grid-template-columns: repeat(2, minmax(130px, 1fr)); width:120vw; }
  .swp-col-mobile-3{ display:none; }
  .swp-phone{ max-width:200px; }
  .swp-hero-content{ justify-content:flex-end; padding-bottom:86px; }
}


/* ===== V11 NEXT LEVEL OVERRIDES ===== */
.swp-hero-v20{
  background:
    radial-gradient(circle at 50% 44%, rgba(133,85,255,.16) 0%, rgba(133,85,255,.08) 14%, transparent 26%),
    radial-gradient(circle at 50% 56%, rgba(255,74,137,.08) 0%, transparent 18%),
    linear-gradient(180deg, #000 0%, #000 100%) !important;
}
.swp-hero-v20::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.50) 42%, rgba(0,0,0,.82) 68%, rgba(0,0,0,.96) 100%);
  z-index:2;
  pointer-events:none;
}
.swp-hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.985) 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.68) 32%, rgba(0,0,0,.68) 68%, rgba(0,0,0,.92) 86%, rgba(0,0,0,.985) 100%),
    linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.70) 18%, rgba(0,0,0,.74) 48%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.98) 100%) !important;
  z-index:1;
}
.swp-center-glow{
  width:min(54vw, 980px) !important;
  height:min(54vw, 980px) !important;
  background: radial-gradient(circle, rgba(126,79,255,.30) 0%, rgba(130,80,255,.15) 16%, rgba(255,82,141,.07) 30%, rgba(0,0,0,0) 62%) !important;
  filter: blur(32px) !important;
  opacity:.95;
  z-index:2;
}
.swp-hero-inner,
.swp-hero-content{
  position:relative;
  z-index:4 !important;
}
.swp-hero-title{
  color:#fff !important;
  text-shadow: 0 12px 42px rgba(0,0,0,.92), 0 2px 10px rgba(0,0,0,.65) !important;
  letter-spacing:-0.04em;
  line-height:.95 !important;
  font-weight:800 !important;
}
.swp-hero-subtitle{
  color:rgba(255,255,255,.90) !important;
  text-shadow: 0 8px 28px rgba(0,0,0,.85);
  max-width: 780px;
}
.swp-phone,
.swp-phone-card,
.swp-deal-phone{
  box-shadow:
    0 28px 80px rgba(0,0,0,.52),
    0 10px 28px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.swp-phone-screen{
  background:linear-gradient(180deg, #050507 0%, #010102 100%) !important;
}
.swp-image{
  opacity:.64 !important;
  filter: brightness(.48) contrast(1.14) saturate(.82) !important;
}
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 26%, rgba(0,0,0,.54) 54%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.98) 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
}
.swp-rail,
.swp-column{
  gap: 28px !important;
}
.swp-phone-mod-1{ transform: rotate(-1.4deg) !important; }
.swp-phone-mod-2{ transform: rotate(1.4deg) !important; }
.swp-phone-mod-3{ transform: rotate(-0.7deg) !important; }

.swp-primary-btn,
.swp-btn-primary,
.swp-hero-cta-primary{
  background: linear-gradient(135deg, #ff5a7c 0%, #ff4f8b 48%, #b45cff 100%) !important;
  box-shadow:
    0 12px 34px rgba(255,76,136,.24),
    0 0 0 1px rgba(255,255,255,.08) inset !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.swp-primary-btn:hover,
.swp-btn-primary:hover,
.swp-hero-cta-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 44px rgba(255,76,136,.30),
    0 0 0 1px rgba(255,255,255,.10) inset !important;
  filter: brightness(1.04);
}
.swp-secondary-btn,
.swp-btn-secondary,
.swp-hero-cta-secondary{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 32px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.swp-secondary-btn:hover,
.swp-btn-secondary:hover,
.swp-hero-cta-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.42) !important;
}
.swp-badge-discount,
.swp-discount-badge{
  box-shadow: 0 10px 26px rgba(140,90,255,.20);
}
@media (max-width: 900px){
  .swp-hero-v20::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 18%, rgba(0,0,0,.68) 48%, rgba(0,0,0,.92) 100%),
      radial-gradient(circle at center, rgba(0,0,0,.16) 0%, rgba(0,0,0,.58) 58%, rgba(0,0,0,.94) 100%);
  }
  .swp-hero-title{
    font-size: clamp(44px, 12vw, 74px) !important;
    line-height:.96 !important;
  }
  .swp-hero-subtitle{
    font-size: clamp(18px, 4.6vw, 24px) !important;
    max-width: 92vw;
  }
  .swp-image{
    opacity:.56 !important;
    filter: brightness(.42) contrast(1.12) saturate(.78) !important;
  }
}


/* ===== V12 FULL-WIDTH DARKNESS + TEXT READABILITY ===== */
.swp-hero-v20{
  position: relative;
  background:
    radial-gradient(circle at center, rgba(120,72,255,.10) 0%, rgba(120,72,255,.05) 12%, transparent 22%),
    linear-gradient(180deg, #000 0%, #000 100%) !important;
}

.swp-hero-v20::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.58) 28%,
      rgba(0,0,0,0.82) 58%,
      rgba(0,0,0,0.96) 82%,
      rgba(0,0,0,1) 100%);
  z-index:3;
  pointer-events:none;
}

.swp-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.92) 15%,
      rgba(0,0,0,0.78) 30%,
      rgba(0,0,0,0.78) 70%,
      rgba(0,0,0,0.92) 85%,
      rgba(0,0,0,1) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.78) 30%,
      rgba(0,0,0,0.84) 70%,
      rgba(0,0,0,1) 100%) !important;
  z-index:1 !important;
}

.swp-center-glow{
  z-index:2 !important;
  opacity:.70 !important;
  filter: blur(34px) !important;
}

.swp-hero-inner,
.swp-hero-content,
.swp-hero-copy,
.swp-content-center{
  position:relative;
  z-index:4 !important;
}

.swp-hero-title{
  color:#fff !important;
  text-shadow:
    0 20px 60px rgba(0,0,0,1),
    0 4px 20px rgba(0,0,0,.92) !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
}

.swp-hero-subtitle{
  color:rgba(255,255,255,.92) !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.92) !important;
}

.swp-image{
  opacity:.58 !important;
  filter: brightness(.40) contrast(1.12) saturate(.78) !important;
}

.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.60) 50%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.985) 100%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) !important;
}

@media (max-width: 900px){
  .swp-hero-v20::before{
    background:
      radial-gradient(circle at center,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,.64) 34%,
        rgba(0,0,0,.88) 62%,
        rgba(0,0,0,.98) 86%,
        rgba(0,0,0,1) 100%);
  }

  .swp-hero-bg{
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.90) 18%,
        rgba(0,0,0,.80) 50%,
        rgba(0,0,0,.90) 82%,
        rgba(0,0,0,.98) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.86) 26%,
        rgba(0,0,0,.90) 68%,
        rgba(0,0,0,1) 100%) !important;
  }

  .swp-hero-title{
    text-shadow:
      0 16px 44px rgba(0,0,0,1),
      0 4px 14px rgba(0,0,0,.95) !important;
  }

  .swp-image{
    opacity:.50 !important;
    filter: brightness(.34) contrast(1.10) saturate(.72) !important;
  }
}


/* ===== V13 UNIFORM FULL-WIDTH DARK OVERLAY ===== */
.swp-hero-v20{
  position: relative;
  background:
    radial-gradient(circle at center, rgba(123,76,255,.08) 0%, rgba(123,76,255,.03) 16%, transparent 28%),
    #000 !important;
}

.swp-hero-bg{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,0.86) !important; /* same darkness over full width */
  z-index:1 !important;
}

.swp-hero-v20::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(0,0,0,.16) 0%,
      rgba(0,0,0,.34) 26%,
      rgba(0,0,0,.56) 52%,
      rgba(0,0,0,.74) 74%,
      rgba(0,0,0,.84) 100%);
  z-index:2;
  pointer-events:none;
}

.swp-center-glow{
  z-index:2 !important;
  opacity:.82 !important;
  filter: blur(28px) !important;
}

.swp-hero-inner,
.swp-hero-content,
.swp-hero-copy,
.swp-content-center{
  position:relative;
  z-index:4 !important;
}

.swp-hero-title{
  color:#fff !important;
  text-shadow:
    0 18px 48px rgba(0,0,0,.98),
    0 4px 18px rgba(0,0,0,.92) !important;
}

.swp-hero-subtitle{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.92) !important;
}

.swp-image{
  opacity:.46 !important;
  filter: brightness(.34) contrast(1.08) saturate(.70) !important;
}

.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.32) 24%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.97) 100%),
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)) !important;
}

@media (max-width: 900px){
  .swp-hero-bg{
    background: rgba(0,0,0,0.90) !important;
  }
  .swp-hero-v20::before{
    background:
      radial-gradient(circle at center,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,.42) 26%,
        rgba(0,0,0,.64) 54%,
        rgba(0,0,0,.82) 76%,
        rgba(0,0,0,.92) 100%);
  }
  .swp-image{
    opacity:.40 !important;
    filter: brightness(.28) contrast(1.08) saturate(.66) !important;
  }
}


/* ===== V14 TRUE FULL WIDTH + EDGE DARK FIX ===== */
.swp-hero-v20{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  background: #000 !important;
}

/* HARD DARK OVERLAY EVERYWHERE */
.swp-hero-v20::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.88) !important;
  z-index:1;
}

/* extra dark edges (THIS fixes your problem) */
.swp-hero-v20::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.75) 20%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.75) 80%,
      rgba(0,0,0,0.95) 100%);
  z-index:2;
}

/* phones darker everywhere */
.swp-image{
  opacity:0.42 !important;
  filter: brightness(0.28) contrast(1.05) !important;
}

/* keep content above everything */
.swp-hero-inner,
.swp-hero-content{
  position:relative;
  z-index:5;
}


/* ===== V15 lighter overall + fix bottom leak ===== */
.swp-hero-v20{
  background:#000 !important;
  min-height:100vh !important;
}

.swp-hero-v20::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.78) !important; /* iets lichter */
  z-index:1;
}

.swp-hero-v20::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.68) 30%,
      rgba(0,0,0,0.70) 70%,
      rgba(0,0,0,0.92) 100%), /* onderaan donkerder */
    linear-gradient(90deg,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.72) 20%,
      rgba(0,0,0,0.60) 50%,
      rgba(0,0,0,0.72) 80%,
      rgba(0,0,0,0.88) 100%);
  z-index:2;
  pointer-events:none;
}

.swp-hero-bg{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.68) 30%,
      rgba(0,0,0,0.70) 68%,
      rgba(0,0,0,0.94) 100%) !important;
  z-index:1 !important;
}

.swp-image{
  opacity:0.50 !important; /* ietsje lichter */
  filter: brightness(0.38) contrast(1.06) saturate(.72) !important;
}

.swp-center-glow{
  opacity:.88 !important;
}

@media (max-width: 900px){
  .swp-hero-v20::after{
    background:rgba(0,0,0,0.82) !important;
  }
  .swp-hero-v20::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.86) 0%,
        rgba(0,0,0,0.74) 28%,
        rgba(0,0,0,0.76) 68%,
        rgba(0,0,0,0.95) 100%),
      linear-gradient(90deg,
        rgba(0,0,0,0.90) 0%,
        rgba(0,0,0,0.76) 50%,
        rgba(0,0,0,0.90) 100%);
  }
}


/* ===== V16 TRUE FULL VIEWPORT DARK BOTTOM + LIGHTER PREMIUM TONE ===== */

/* Make sure page behind the hero never shows through */
html, body{
  background:#000 !important;
}

/* Force full bleed and full viewport */
.swp-hero-v20{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  min-height:100vh !important;
  height:100vh !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at center, rgba(121,75,255,.10) 0%, rgba(121,75,255,.04) 18%, transparent 32%),
    #000 !important;
}

/* Base lighter overall darkness like reference */
.swp-hero-v20::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72) !important;
  z-index:1;
  pointer-events:none;
}

/* Strong bottom darkness + even full-width tone */
.swp-hero-v20::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.62) 38%,
      rgba(0,0,0,.68) 68%,
      rgba(0,0,0,.95) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.68) 18%,
      rgba(0,0,0,.60) 50%,
      rgba(0,0,0,.68) 82%,
      rgba(0,0,0,.76) 100%);
  z-index:2;
  pointer-events:none;
}

/* Fill full viewport too */
.swp-hero-bg{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.64) 0%,
      rgba(0,0,0,.56) 35%,
      rgba(0,0,0,.62) 70%,
      rgba(0,0,0,.96) 100%) !important;
  z-index:1 !important;
}

/* Ensure inner content sits above overlays */
.swp-hero-inner,
.swp-hero-content,
.swp-hero-copy,
.swp-content-center{
  position:relative;
  z-index:5 !important;
}

/* Lighter phones like reference */
.swp-image{
  opacity:.56 !important;
  filter: brightness(.46) contrast(1.05) saturate(.76) !important;
}

/* readable but not dead-black cards */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 26%, rgba(0,0,0,.48) 54%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.94) 100%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) !important;
}

/* slightly brighter center atmosphere */
.swp-center-glow{
  opacity:.92 !important;
  filter: blur(26px) !important;
}

/* keep text crisp */
.swp-hero-title{
  text-shadow:
    0 16px 42px rgba(0,0,0,.96),
    0 4px 16px rgba(0,0,0,.90) !important;
}
.swp-hero-subtitle{
  text-shadow: 0 8px 24px rgba(0,0,0,.88) !important;
}

/* mobile */
@media (max-width: 900px){
  html, body{
    background:#000 !important;
  }
  .swp-hero-v20{
    min-height:100vh !important;
    height:100vh !important;
  }
  .swp-hero-v20::after{
    background:rgba(0,0,0,.74) !important;
  }
  .swp-hero-v20::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.74) 0%,
        rgba(0,0,0,.64) 34%,
        rgba(0,0,0,.70) 68%,
        rgba(0,0,0,.96) 100%),
      linear-gradient(90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.66) 50%,
        rgba(0,0,0,.78) 100%);
  }
  .swp-hero-bg{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.66) 0%,
        rgba(0,0,0,.58) 36%,
        rgba(0,0,0,.64) 72%,
        rgba(0,0,0,.96) 100%) !important;
  }
  .swp-image{
    opacity:.50 !important;
    filter: brightness(.40) contrast(1.04) saturate(.72) !important;
  }
}


/* ===== V17 LIGHTER (DEALS MORE VISIBLE) ===== */

/* overall overlay lighter */
.swp-hero-v20::after{
  background: rgba(0,0,0,0.60) !important;
}

/* less heavy gradients */
.swp-hero-v20::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 40%,
      rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.88) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.50) 50%,
      rgba(0,0,0,0.60) 100%);
}

/* phones much more visible */
.swp-image{
  opacity: 0.68 !important;
  filter: brightness(0.62) contrast(1.05) saturate(.85) !important;
}

/* cards overlay lighter */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
}

/* glow a bit stronger again */
.swp-center-glow{
  opacity: 1 !important;
  filter: blur(24px) !important;
}


/* ===== V18 EVEN LIGHTER ===== */

.swp-hero-v20::after{
  background: rgba(0,0,0,0.50) !important;
}

.swp-hero-v20::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.48) 0%,
      rgba(0,0,0,0.38) 40%,
      rgba(0,0,0,0.48) 70%,
      rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.40) 50%,
      rgba(0,0,0,0.50) 100%);
}

/* phones brighter */
.swp-image{
  opacity: 0.78 !important;
  filter: brightness(0.72) contrast(1.05) saturate(.9) !important;
}

/* cards more visible */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.60) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) !important;
}

/* keep text readable */
.swp-hero-title{
  text-shadow:
    0 14px 38px rgba(0,0,0,.9),
    0 3px 12px rgba(0,0,0,.8) !important;
}

.swp-hero-subtitle{
  text-shadow: 0 6px 18px rgba(0,0,0,.75) !important;
}


/* ===== V19 FINAL LIGHT (LESS WASHY) ===== */

.swp-hero-v20::after{
  background: rgba(0,0,0,0.44) !important;
}

.swp-hero-v20::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.42) 0%,
      rgba(0,0,0,0.32) 40%,
      rgba(0,0,0,0.42) 70%,
      rgba(0,0,0,0.75) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0.44) 0%,
      rgba(0,0,0,0.34) 50%,
      rgba(0,0,0,0.44) 100%);
}

/* sharper phones (less haze) */
.swp-image{
  opacity: 0.85 !important;
  filter: brightness(0.82) contrast(1.15) saturate(1.0) !important;
}

/* cards clearer */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.50) 100%) !important;
}

/* keep text strong */
.swp-hero-title{
  text-shadow:
    0 12px 34px rgba(0,0,0,.85),
    0 2px 10px rgba(0,0,0,.75) !important;
}

.swp-hero-subtitle{
  text-shadow: 0 5px 14px rgba(0,0,0,.7) !important;
}


/* ===== V20 SHARPER + MORE PROFESSIONAL PHONES ===== */

/* sharpen visuals */
.swp-image{
  opacity: 0.88 !important;
  filter: brightness(0.9) contrast(1.2) saturate(1.05) !important;
}

/* remove slight haze from overlay */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.20) 60%, rgba(0,0,0,.45) 100%) !important;
}

/* more premium phone look */
.swp-phone,
.swp-phone-card,
.swp-deal-phone{
  box-shadow:
    0 40px 100px rgba(0,0,0,.65),
    0 15px 40px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;
  border-radius: 32px !important;
}

/* screen sharper */
.swp-phone-screen{
  border-radius: 28px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 20px rgba(0,0,0,.2) !important;
}

/* subtle hover polish */
.swp-phone:hover{
  transform: translateY(-4px) scale(1.01);
  transition: all .25s ease;
}

/* text slightly crisper */
.swp-hero-title{
  letter-spacing: -0.015em;
}

.swp-hero-subtitle{
  opacity: .95;
}


/* ===== V24 HARDER / HELDERDER / MEER ZWART DAN GRIJS ===== */
html, body{
  background:#000 !important;
}

.swp-hero-v24{
  background:
    radial-gradient(circle at 50% 46%, rgba(118,70,255,.10) 0%, rgba(118,70,255,.04) 14%, transparent 28%),
    linear-gradient(180deg, #000 0%, #000 100%) !important;
}

/* overal iets lichter, maar zonder grijze waas */
.swp-hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 20%, rgba(0,0,0,.44) 40%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.58) 80%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.46) 66%, rgba(0,0,0,.82) 100%) !important;
}

/* minder mist, meer punch */
.swp-center-glow{
  background: radial-gradient(circle, rgba(116,82,255,.20) 0%, rgba(149,83,255,.10) 18%, rgba(255,83,136,.04) 30%, rgba(0,0,0,0) 64%) !important;
  filter: blur(20px) !important;
  opacity: .92;
}

/* echte zwartwaarden + scherper */
.swp-image,
.swp-image-wrap.is-empty .swp-image{
  opacity:.90 !important;
  filter: brightness(.88) contrast(1.24) saturate(1.05) !important;
}

/* minder grijze overlay op de cards */
.swp-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.04) 24%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.46) 76%, rgba(0,0,0,.74) 100%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)) !important;
}

/* premium, harder device look */
.swp-phone{
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.62)) !important;
}
.swp-phone-shell{
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 22%, rgba(0,0,0,.14) 62%, rgba(255,255,255,.14)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 18px rgba(255,255,255,.04),
    0 20px 50px rgba(0,0,0,.22) !important;
}
.swp-phone-screen{
  background:linear-gradient(180deg, #090a0d 0%, #020204 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* iets scherpere chips en tekst */
.swp-chip-muted{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.swp-chip-brand{
  background:#4f8eff !important;
}
.swp-title{
  text-shadow:0 2px 8px rgba(0,0,0,.54) !important;
}
.swp-price{
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* hero tekst beter leesbaar, maar niet softer */
.swp-hero-title{
  text-shadow: 0 10px 28px rgba(0,0,0,.88), 0 2px 8px rgba(0,0,0,.72) !important;
}
.swp-hero-subtitle{
  text-shadow: 0 4px 12px rgba(0,0,0,.62) !important;
}

/* mobiel professioneler en helderder */
@media (max-width: 900px){
  .swp-hero-bg{
    background:
      linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.40) 64%, rgba(0,0,0,.76) 100%),
      linear-gradient(90deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.36) 100%) !important;
  }
  .swp-image,
  .swp-image-wrap.is-empty .swp-image{
    opacity:.94 !important;
    filter: brightness(.94) contrast(1.22) saturate(1.04) !important;
  }
  .swp-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.03) 24%, rgba(0,0,0,.14) 48%, rgba(0,0,0,.42) 76%, rgba(0,0,0,.70) 100%) !important;
  }
}


/* ===== V31: card in centered window with black space top/bottom ===== */

.swp-phone-screen{
  background: linear-gradient(180deg, #040611 0%, #010205 100%) !important;
  position: relative;
}

/* subtle top branding area like the reference */
.swp-phone-screen::before{
  content: "Swipio";
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 7;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* card window centered inside phone; leaves dark top & bottom */
.swp-image-wrap,
.swp-overlay{
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 22% !important;
  bottom: 15% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* stronger card edge so it reads as a separate panel */
.swp-image-wrap{
  box-shadow:
    0 12px 28px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
}

.swp-top-actions{
  position: absolute !important;
  top: calc(22% + 14px) !important;
  left: calc(8% + 14px) !important;
  right: calc(8% + 14px) !important;
  z-index: 8 !important;
}

.swp-content{
  position: absolute !important;
  left: calc(8% + 16px) !important;
  right: calc(8% + 16px) !important;
  bottom: calc(15% + 16px) !important;
  z-index: 8 !important;
}

/* make content feel centered card rather than full-screen overlay */
.swp-title{
  max-width: 100%;
}

.swp-price-row{
  margin-top: 12px;
}

/* mobile: make the card-window slightly taller but still clearly centered */
@media (max-width: 1040px){
  .swp-phone-screen::before{
    top: 14px;
    left: 18px;
    font-size: 12px;
  }

  .swp-image-wrap,
  .swp-overlay{
    left: 7% !important;
    right: 7% !important;
    top: 19% !important;
    bottom: 15% !important;
    border-radius: 18px !important;
  }

  .swp-top-actions{
    top: calc(19% + 12px) !important;
    left: calc(7% + 12px) !important;
    right: calc(7% + 12px) !important;
  }

  .swp-content{
    left: calc(7% + 12px) !important;
    right: calc(7% + 12px) !important;
    bottom: calc(15% + 12px) !important;
  }
}


/* ===== V32: more professional phones / thinner bezel ===== */

.swp-phone {
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.55)) !important;
}

.swp-phone-shell {
  padding: 6px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(52,54,74,.92) 0%, rgba(24,25,35,.96) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.22) !important;
}

.swp-phone-screen {
  border-radius: 24px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

.swp-notch {
  width: 28% !important;
  height: 6px !important;
  top: 9px !important;
  background: rgba(255,255,255,.08) !important;
}

.swp-phone-screen::before {
  top: 15px !important;
  left: 18px !important;
  font-size: 13px !important;
}

@media (max-width: 1040px){
  .swp-phone-shell {
    padding: 5px !important;
    border-radius: 24px !important;
  }

  .swp-phone-screen {
    border-radius: 19px !important;
  }

  .swp-notch {
    width: 26% !important;
    height: 5px !important;
    top: 8px !important;
  }

  .swp-phone-screen::before {
    top: 13px !important;
    left: 15px !important;
    font-size: 11px !important;
  }
}


/* ===== V34: ONLY spacing fix ===== */

.swp-masonry{
  column-gap: 6px !important;
}

.swp-phone{
  margin-bottom: 6px !important;
}

.swp-phone-wrapper{
  padding: 0 !important;
}

@media (max-width:1040px){
  .swp-masonry{
    column-gap: 4px !important;
  }
  .swp-phone{
    margin-bottom: 4px !important;
  }
}


/* ===== V42: full-screen wall again + larger phones + fixed mobile ===== */

/* Desktop: cover full width, larger phones, tighter spacing */
.swp-phones-desktop{
  width: 138vw !important;
  left: 50% !important;
  top: -5vh !important;
  transform: translateX(-50%) !important;
  padding: 0 6px !important;
  gap: 8px !important;
}
.swp-phones-desktop .swp-col{
  gap: 8px !important;
}
.swp-phone{
  max-width: 206px !important;
}

/* Mobile: keep masonry columns, make wall fill whole screen, bigger phones */
@media (max-width: 1040px){
  .swp-phones-mobile{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 148vw !important;
    left: 50% !important;
    top: -2vh !important;
    transform: translateX(-50%) !important;
    padding: 0 0 !important;
    gap: 4px !important;
  }

  .swp-phones-mobile .swp-col{
    gap: 4px !important;
  }

  .swp-phone{
    max-width: 176px !important;
  }

  .swp-col-mobile-1 { margin-top: -2vh !important; }
  .swp-col-mobile-2 { margin-top: 5vh !important; }
  .swp-col-mobile-3 { margin-top: 0 !important; }
  .swp-col-mobile-4 { margin-top: 7vh !important; }
}

/* Smaller phones: still fill the entire viewport width */
@media (max-width: 640px){
  .swp-phones-mobile{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 162vw !important;
    gap: 2px !important;
  }
  .swp-phones-mobile .swp-col{
    gap: 3px !important;
  }
  .swp-phone{
    max-width: 158px !important;
  }
}


/* ===== V46: fixed phone size + real full wall + 6px spacing everywhere ===== */

/* reset accidental spacing from prior overrides */
.swp-phone,
.swp-col,
.swp-phone-wrapper{
  margin: 0 !important;
  padding: 0 !important;
}

/* desktop wall: fixed-size columns, exact 6px gaps, centered and overflowing */
.swp-phones-desktop{
  display: flex !important;
  width: max-content !important;
  gap: 6px !important;
  left: 50% !important;
  top: -6vh !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
}

.swp-phones-desktop .swp-col{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 196px !important;
  min-width: 196px !important;
}

.swp-phones-desktop .swp-phone{
  width: 196px !important;
  max-width: 196px !important;
  margin-inline: 0 !important;
}

/* keep the stagger, but only with vertical offsets */
.swp-col-1{ margin-top:-8vh !important; }
.swp-col-2{ margin-top:1vh !important; }
.swp-col-3{ margin-top:-3vh !important; }
.swp-col-4{ margin-top:6vh !important; }
.swp-col-5{ margin-top:-5vh !important; }
.swp-col-6{ margin-top:4vh !important; }
.swp-col-7{ margin-top:-2vh !important; }
.swp-col-8{ margin-top:7vh !important; }
.swp-col-9{ margin-top:-4vh !important; display:flex !important; }
.swp-col-10{ margin-top:3vh !important; display:flex !important; }

/* tablet */
@media (max-width: 1320px){
  .swp-phones-desktop{
    gap: 6px !important;
  }
  .swp-phones-desktop .swp-col{
    width: 182px !important;
    min-width: 182px !important;
  }
  .swp-phones-desktop .swp-phone{
    width: 182px !important;
    max-width: 182px !important;
  }
}

/* mobile wall: same logic, fixed phone size + exact 6px */
@media (max-width: 1040px){
  .swp-phones-desktop{ display:none !important; }

  .swp-phones-mobile{
    display: flex !important;
    width: max-content !important;
    gap: 6px !important;
    left: 50% !important;
    top: -4vh !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
  }

  .swp-phones-mobile .swp-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 170px !important;
    min-width: 170px !important;
  }

  .swp-phones-mobile .swp-phone{
    width: 170px !important;
    max-width: 170px !important;
    margin-inline: 0 !important;
  }

  .swp-col-mobile-1{ margin-top:-5vh !important; }
  .swp-col-mobile-2{ margin-top:6vh !important; }
  .swp-col-mobile-3{ margin-top:-1vh !important; }
  .swp-col-mobile-4{ margin-top:7vh !important; display:flex !important; }
  .swp-col-mobile-5{ margin-top:1vh !important; display:flex !important; }
}

/* small phones */
@media (max-width: 640px){
  .swp-phones-mobile{
    gap: 6px !important;
    top: -3vh !important;
  }

  .swp-phones-mobile .swp-col{
    width: 154px !important;
    min-width: 154px !important;
    gap: 6px !important;
  }

  .swp-phones-mobile .swp-phone{
    width: 154px !important;
    max-width: 154px !important;
  }
}


/* ===== V49: card content update only ===== */

.swp-content-card{
  left: 22px !important;
  right: 22px !important;
  bottom: 92px !important;
}

.swp-brand-text{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  color:rgba(255,255,255,.95);
}

.swp-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.swp-fire{
  flex:0 0 auto;
  font-size:16px;
  line-height:1.15;
  transform: translateY(1px);
}

.swp-title{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  font-size:16px !important;
  line-height:1.12 !important;
  max-height: calc(1.12em * 2) !important;
}

.swp-chip-brand{
  align-self:flex-start;
  margin-top:12px !important;
  margin-bottom:0 !important;
}

.swp-price-row{
  margin-top:16px !important;
}

.swp-price{
  font-size:22px !important;
}

.swp-old-price{
  font-size:12px !important;
}

.swp-icons{
  display:flex;
  gap:10px;
}

.swp-icons span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.swp-icon-green{
  background:#22c55e;
  color:#fff;
}

.swp-icon-white{
  background:rgba(255,255,255,.94);
  color:#222;
}

.swp-bottom-actions{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  z-index:5;
  display:grid;
  grid-template-columns:56px 1fr 56px;
  gap:14px;
  align-items:center;
}

.swp-bottom-btn,
.swp-bottom-cta{
  height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.swp-bottom-btn{
  background:rgba(255,255,255,.96);
  font-size:28px;
  line-height:1;
}

.swp-bottom-x{
  color:#2591ff;
}

.swp-bottom-heart{
  color:#ff3d1f;
  font-size:24px;
}

.swp-bottom-cta{
  background: linear-gradient(135deg, #6f8bff 0%, #b567ff 100%);
  color:#fff;
  font-size:18px;
}

/* mobile scale keeps same proportions */
@media (max-width: 1040px){
  .swp-content-card{
    left:16px !important;
    right:16px !important;
    bottom:74px !important;
  }

  .swp-brand-text{
    font-size:11px;
    margin-bottom:6px;
  }

  .swp-title-row{
    gap:6px;
  }

  .swp-fire{
    font-size:13px;
  }

  .swp-title{
    font-size:12px !important;
    line-height:1.1 !important;
    max-height: calc(1.1em * 2) !important;
  }

  .swp-chip-brand{
    margin-top:10px !important;
    font-size:11px !important;
  }

  .swp-price-row{
    margin-top:12px !important;
    gap:8px !important;
  }

  .swp-price{
    font-size:17px !important;
  }

  .swp-old-price{
    font-size:10px !important;
  }

  .swp-icons{
    gap:8px;
  }

  .swp-icons span{
    width:34px;
    height:34px;
    font-size:14px;
  }

  .swp-bottom-actions{
    left:16px;
    right:16px;
    bottom:14px;
    grid-template-columns:42px 1fr 42px;
    gap:10px;
  }

  .swp-bottom-btn,
  .swp-bottom-cta{
    height:42px;
  }

  .swp-bottom-btn{
    font-size:20px;
  }

  .swp-bottom-heart{
    font-size:18px;
  }

  .swp-bottom-cta{
    font-size:14px;
  }
}


/* ===== V50: rebalance card proportions only, keep phones intact ===== */

.swp-top-actions{
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
}

.swp-icons{
  gap: 8px !important;
}

.swp-icons span{
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.14) !important;
}

.swp-icon-green{
  background:#22c55e !important;
  color:#fff !important;
}

.swp-content-card{
  left: 18px !important;
  right: 18px !important;
  bottom: 74px !important;
}

.swp-brand-text{
  margin-bottom: 6px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.95) !important;
}

.swp-title-row{
  gap: 6px !important;
  margin-top: 0 !important;
}

.swp-fire{
  font-size: 13px !important;
  line-height: 1.1 !important;
  transform: translateY(1px) !important;
}

.swp-title{
  font-size: 13px !important;
  line-height: 1.12 !important;
  max-height: calc(1.12em * 2) !important;
}

.swp-chip-brand{
  margin-top: 10px !important;
  padding: .40rem .62rem !important;
  font-size: 11px !important;
}

.swp-price-row{
  margin-top: 12px !important;
  gap: 7px !important;
  align-items: baseline !important;
}

.swp-price{
  font-size: 18px !important;
  line-height: 1 !important;
}

.swp-old-price{
  font-size: 10px !important;
  transform: none !important;
}

.swp-bottom-actions{
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
  grid-template-columns: 42px 1fr 42px !important;
  gap: 10px !important;
}

.swp-bottom-btn,
.swp-bottom-cta{
  height: 42px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}

.swp-bottom-btn{
  font-size: 20px !important;
}

.swp-bottom-x{
  color:#2591ff !important;
}

.swp-bottom-heart{
  color:#ff3d1f !important;
  font-size: 18px !important;
}

.swp-bottom-cta{
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #6f8bff 0%, #b567ff 100%) !important;
}

/* desktop proportional upscale only */
@media (min-width: 1041px){
  .swp-icons span{
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  .swp-content-card{
    left: 20px !important;
    right: 20px !important;
    bottom: 82px !important;
  }

  .swp-brand-text{
    font-size: 13px !important;
    margin-bottom: 7px !important;
  }

  .swp-fire{
    font-size: 14px !important;
  }

  .swp-title{
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  .swp-chip-brand{
    font-size: 12px !important;
    padding: .45rem .70rem !important;
  }

  .swp-price{
    font-size: 21px !important;
  }

  .swp-old-price{
    font-size: 11px !important;
  }

  .swp-bottom-actions{
    left: 20px !important;
    right: 20px !important;
    bottom: 16px !important;
    grid-template-columns: 46px 1fr 46px !important;
    gap: 12px !important;
  }

  .swp-bottom-btn,
  .swp-bottom-cta{
    height: 46px !important;
  }

  .swp-bottom-btn{
    font-size: 22px !important;
  }

  .swp-bottom-heart{
    font-size: 19px !important;
  }

  .swp-bottom-cta{
    border-radius: 18px !important;
    font-size: 15px !important;
  }
}


/* ===== V51 SAFE: halveer alleen de buttons ===== */

/* Top buttons */
.swp-icons span{
  width: 18px !important;
  height: 18px !important;
  font-size: 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}
.swp-icons{
  gap: 4px !important;
}

/* Bottom buttons */
.swp-bottom-actions{
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
  grid-template-columns: 23px 1fr 23px !important;
  gap: 5px !important;
}

.swp-bottom-btn{
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  font-size: 11px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

.swp-bottom-heart{
  font-size: 10px !important;
}

.swp-bottom-cta{
  height: 23px !important;
  min-height: 23px !important;
  font-size: 8px !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

/* Desktop proportional */
@media (min-width: 1041px){
  .swp-icons span{
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }

  .swp-bottom-actions{
    grid-template-columns: 23px 1fr 23px !important;
    gap: 6px !important;
  }

  .swp-bottom-btn{
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    font-size: 11px !important;
  }

  .swp-bottom-heart{
    font-size: 10px !important;
  }

  .swp-bottom-cta{
    height: 23px !important;
    min-height: 23px !important;
    font-size: 8px !important;
    border-radius: 9px !important;
  }
}


/* ===== V52: smaller discount pill + tighter store pill, one line only ===== */

/* percentage korting pill halveren */
.swp-discount{
  padding: .30rem .42rem !important;
  font-size: .50rem !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 10px rgba(165,108,255,.16) !important;
}

/* winkel pill compacter en nooit op 2 regels */
.swp-chip-brand{
  padding-top: .20rem !important;
  padding-bottom: .20rem !important;
  padding-left: .52rem !important;
  padding-right: .52rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 1041px){
  .swp-discount{
    padding: .34rem .48rem !important;
    font-size: .58rem !important;
  }

  .swp-chip-brand{
    padding-top: .22rem !important;
    padding-bottom: .22rem !important;
  }
}


/* ===== V57 FIX (correct way) ===== */

/* DO NOT touch image */
/* only move elements inside existing card */

/* top buttons */
.swp-top-actions{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:12px !important;
  z-index:5 !important;
}

/* bottom buttons ON image */
.swp-bottom-actions{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  z-index:5 !important;
}

/* spacing system equal */
.swp-chip-brand{
  margin-bottom:8px !important;
}

.swp-title-row{
  margin-bottom:8px !important;
}

.swp-price-row{
  margin-bottom:8px !important;
}

/* ensure card is positioning context */
.swp-card,
.swp-phone-screen{
  position:relative !important;
}

/* IMPORTANT: do NOT override image positioning */


/* ===== V58: move controls onto existing photo area, stack content tighter ===== */

/* top controls lower so they sit on the photo */
.swp-top-actions{
  top: 22% !important;
  left: 18px !important;
  right: 18px !important;
  z-index: 6 !important;
}

/* content block moves a bit down/up so everything stacks neatly */
.swp-content-card{
  left: 18px !important;
  right: 18px !important;
  bottom: 48px !important;
  z-index: 6 !important;
}

/* remove extra whitespace around store pill */
.swp-chip-brand{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* keep title and price stacked neatly */
.swp-title-row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.swp-price-row{
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* bottom buttons move upward onto the photo */
.swp-bottom-actions{
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 44px !important;
  z-index: 6 !important;
}

/* mobile proportional tweak */
@media (max-width: 1040px){
  .swp-top-actions{
    top: 20% !important;
    left: 14px !important;
    right: 14px !important;
  }

  .swp-content-card{
    left: 16px !important;
    right: 16px !important;
    bottom: 40px !important;
  }

  .swp-price-row{
    margin-top: 7px !important;
  }

  .swp-bottom-actions{
    left: 16px !important;
    right: 16px !important;
    bottom: 36px !important;
  }
}


/* ===== V59 FIXES ===== */

/* top icons slightly lower (not on edge) */
.swp-top-actions{
  top: 26% !important;
}

/* fix stacking: title -> price -> buttons */
.swp-content-card{
  bottom: 90px !important; /* push content higher */
}

.swp-price-row{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* bottom buttons slightly lower so price sits above */
.swp-bottom-actions{
  bottom: 30px !important;
}

/* mobile */
@media (max-width: 1040px){
  .swp-top-actions{
    top: 24% !important;
  }

  .swp-content-card{
    bottom: 80px !important;
  }

  .swp-price-row{
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  .swp-bottom-actions{
    bottom: 26px !important;
  }
}


/* ===== V60 fine alignment ===== */

/* move bottom buttons UP onto image */
.swp-bottom-actions{
  bottom: 52px !important;
}

/* adjust content block slightly */
.swp-content-card{
  bottom: 100px !important;
}

/* center store name between title and price */
.swp-chip-brand{
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* refine price spacing */
.swp-price-row{
  margin-top: 10px !important;
  margin-bottom: 6px !important;
}

/* mobile */
@media (max-width: 1040px){
  .swp-bottom-actions{
    bottom: 44px !important;
  }
  .swp-content-card{
    bottom: 90px !important;
  }
  .swp-chip-brand{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
}


/* ===== V61 CORRECT TEST: real 1.5x sizing + 10px spacing ===== */

/* desktop wall uses fixed-size columns, larger phones, full wall */
.swp-phones-desktop{
  display:flex !important;
  width:max-content !important;
  gap:10px !important;
  left:50% !important;
  top:-8vh !important;
  transform:translateX(-50%) !important;
  padding:0 !important;
}

.swp-phones-desktop .swp-col{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  width:300px !important;
  min-width:300px !important;
}

.swp-phones-desktop .swp-phone{
  width:300px !important;
  max-width:300px !important;
  margin-inline:0 !important;
  filter:drop-shadow(0 28px 56px rgba(0,0,0,.52)) !important;
}

/* keep stagger */
.swp-col-1{ margin-top:-10vh !important; }
.swp-col-2{ margin-top:2vh !important; }
.swp-col-3{ margin-top:-4vh !important; }
.swp-col-4{ margin-top:8vh !important; }
.swp-col-5{ margin-top:-6vh !important; }
.swp-col-6{ margin-top:5vh !important; }
.swp-col-7{ margin-top:-3vh !important; }
.swp-col-8{ margin-top:9vh !important; }

/* actual phone proportions increased */
.swp-phone-shell{
  padding:15px !important;
  border-radius:51px !important;
}
.swp-phone-screen{
  border-radius:42px !important;
}
.swp-notch{
  top:15px !important;
  height:12px !important;
}

.swp-top-actions{
  top:21px !important;
  left:21px !important;
  right:21px !important;
}
.swp-discount{
  font-size:21px !important;
  padding:16px 20px !important;
}
.swp-icons{
  gap:15px !important;
}
.swp-icons span{
  width:60px !important;
  height:60px !important;
  font-size:27px !important;
}

.swp-content-card{
  left:30px !important;
  right:30px !important;
  bottom:150px !important;
}
.swp-fire{
  font-size:24px !important;
}
.swp-title{
  font-size:25px !important;
  line-height:1.08 !important;
  max-height:calc(1.08em * 2) !important;
  -webkit-line-clamp:2 !important;
}
.swp-chip-brand{
  font-size:18px !important;
  padding:.40rem .85rem !important;
  margin-top:9px !important;
  margin-bottom:9px !important;
}
.swp-price-row{
  margin-top:15px !important;
  margin-bottom:9px !important;
  gap:18px !important;
}
.swp-price{
  font-size:30px !important;
}
.swp-old-price{
  font-size:18px !important;
}

.swp-bottom-actions{
  left:30px !important;
  right:30px !important;
  bottom:30px !important;
  grid-template-columns:34px 1fr 34px !important;
  gap:10px !important;
}
.swp-bottom-btn,
.swp-bottom-cta{
  height:34px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
.swp-bottom-btn{
  font-size:16px !important;
}
.swp-bottom-heart{
  font-size:15px !important;
}
.swp-bottom-cta{
  font-size:12px !important;
  border-radius:13px !important;
}

/* hero text slightly larger for comparison */
.swp-hero-content{
  max-width:980px !important;
}
.swp-hero-content h1{
  font-size:clamp(72px, 8vw, 132px) !important;
}
.swp-hero-content p{
  font-size:clamp(28px, 2.2vw, 34px) !important;
}

/* tablet/laptop */
@media (max-width: 1600px){
  .swp-phones-desktop .swp-col{
    width:270px !important;
    min-width:270px !important;
  }
  .swp-phones-desktop .swp-phone{
    width:270px !important;
    max-width:270px !important;
  }
}

/* mobile: real larger phones, full wall, 10px spacing */
@media (max-width: 1040px){
  .swp-phones-desktop{ display:none !important; }

  .swp-phones-mobile{
    display:flex !important;
    width:max-content !important;
    gap:10px !important;
    left:50% !important;
    top:-5vh !important;
    transform:translateX(-50%) !important;
    padding:0 !important;
  }

  .swp-phones-mobile .swp-col{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:255px !important;
    min-width:255px !important;
  }

  .swp-phones-mobile .swp-phone{
    width:255px !important;
    max-width:255px !important;
    margin-inline:0 !important;
  }

  .swp-col-mobile-1{ margin-top:-6vh !important; }
  .swp-col-mobile-2{ margin-top:7vh !important; }
  .swp-col-mobile-3{ margin-top:-1vh !important; }
  .swp-col-mobile-4{ margin-top:8vh !important; display:flex !important; }
  .swp-col-mobile-5{ margin-top:2vh !important; display:flex !important; }

  .swp-phone-shell{
    padding:13px !important;
    border-radius:44px !important;
  }
  .swp-phone-screen{
    border-radius:35px !important;
  }
  .swp-notch{
    top:12px !important;
    height:10px !important;
  }

  .swp-top-actions{
    top:18px !important;
    left:18px !important;
    right:18px !important;
  }
  .swp-discount{
    font-size:17px !important;
    padding:13px 16px !important;
  }
  .swp-icons{
    gap:12px !important;
  }
  .swp-icons span{
    width:48px !important;
    height:48px !important;
    font-size:21px !important;
  }

  .swp-content-card{
    left:24px !important;
    right:24px !important;
    bottom:120px !important;
  }
  .swp-fire{
    font-size:20px !important;
  }
  .swp-title{
    font-size:21px !important;
  }
  .swp-chip-brand{
    font-size:15px !important;
    padding:.34rem .74rem !important;
    margin-top:8px !important;
    margin-bottom:8px !important;
  }
  .swp-price-row{
    margin-top:13px !important;
    margin-bottom:8px !important;
    gap:14px !important;
  }
  .swp-price{
    font-size:26px !important;
  }
  .swp-old-price{
    font-size:15px !important;
  }

  .swp-bottom-actions{
    left:24px !important;
    right:24px !important;
    bottom:24px !important;
    grid-template-columns:30px 1fr 30px !important;
    gap:10px !important;
  }
  .swp-bottom-btn,
  .swp-bottom-cta{
    height:30px !important;
  }
  .swp-bottom-btn{
    font-size:14px !important;
  }
  .swp-bottom-heart{
    font-size:13px !important;
  }
  .swp-bottom-cta{
    font-size:11px !important;
    border-radius:12px !important;
  }

  .swp-hero-content h1{
    font-size:clamp(68px, 16vw, 118px) !important;
  }
  .swp-hero-content p{
    font-size:clamp(24px, 5vw, 30px) !important;
  }
}

@media (max-width: 640px){
  .swp-phones-mobile .swp-col{
    width:228px !important;
    min-width:228px !important;
  }
  .swp-phones-mobile .swp-phone{
    width:228px !important;
    max-width:228px !important;
  }
}


/* ===== V63: all controls on image + correct vertical flow ===== */

/* do not touch the image window itself, only place controls within it */
.swp-phone-screen{ overflow:hidden !important; }

/* TOP CONTROLS: inside image window, same scale as bottom */
.swp-top-actions{
  position:absolute !important;
  top: calc(22% + 18px) !important;
  left: calc(8% + 14px) !important;
  right: calc(8% + 14px) !important;
  z-index: 9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.swp-discount{
  height: 33px !important;
  min-height: 33px !important;
  padding: 0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}
.swp-icons{
  gap: 8px !important;
}
.swp-icons span{
  width: 33px !important;
  height: 33px !important;
  min-width: 33px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display:grid !important;
  place-items:center !important;
}

/* CONTENT FLOW: title -> winkel -> prijs -> buttons */
.swp-content-card{
  position:absolute !important;
  left: calc(8% + 16px) !important;
  right: calc(8% + 16px) !important;
  bottom: calc(15% + 58px) !important; /* leaves room for bottom controls on image */
  z-index: 8 !important;
}
.swp-title-row{
  margin: 0 0 8px 0 !important;
  gap: 8px !important;
  align-items:flex-start !important;
}
.swp-title{
  margin: 0 !important;
  -webkit-line-clamp: 2 !important;
  max-height: calc(1.08em * 2) !important;
}
.swp-chip-brand{
  margin: 0 0 8px 0 !important;
  padding-top: .20rem !important;
  padding-bottom: .20rem !important;
  line-height: 1 !important;
}
.swp-price-row{
  margin: 0 !important;
  display:flex !important;
  align-items:baseline !important;
  gap: 10px !important;
}

/* BOTTOM CONTROLS: on image, same scale as top */
.swp-bottom-actions{
  position:absolute !important;
  left: calc(8% + 16px) !important;
  right: calc(8% + 16px) !important;
  bottom: calc(15% + 16px) !important;
  z-index: 9 !important;
  display:grid !important;
  grid-template-columns: 33px 1fr 33px !important;
  gap: 10px !important;
  align-items:center !important;
}
.swp-bottom-btn{
  min-width: 33px !important;
  width: 33px !important;
  height: 33px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display:grid !important;
  place-items:center !important;
}
.swp-bottom-heart{
  font-size: 13px !important;
}
.swp-bottom-cta{
  min-height: 33px !important;
  height: 33px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
  display:grid !important;
  place-items:center !important;
  line-height: 1 !important;
}

/* MOBILE: use existing image window coordinates */
@media (max-width: 1040px){
  .swp-top-actions{
    top: calc(19% + 16px) !important;
    left: calc(7% + 12px) !important;
    right: calc(7% + 12px) !important;
  }
  .swp-discount{
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
  .swp-icons{
    gap: 7px !important;
  }
  .swp-icons span{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }

  .swp-content-card{
    left: calc(7% + 12px) !important;
    right: calc(7% + 12px) !important;
    bottom: calc(15% + 52px) !important;
  }
  .swp-title-row{
    margin: 0 0 7px 0 !important;
    gap: 7px !important;
  }
  .swp-chip-brand{
    margin: 0 0 7px 0 !important;
  }
  .swp-price-row{
    gap: 9px !important;
  }

  .swp-bottom-actions{
    left: calc(7% + 12px) !important;
    right: calc(7% + 12px) !important;
    bottom: calc(15% + 12px) !important;
    grid-template-columns: 30px 1fr 30px !important;
    gap: 9px !important;
  }
  .swp-bottom-btn{
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  .swp-bottom-heart{
    font-size: 12px !important;
  }
  .swp-bottom-cta{
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
  }
}


/* ===== V64: mobile center hero + CTA updates ===== */

.swp-hero-btn-primary,
.swp-cta-primary,
.swp-button-primary{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 768px){
  .swp-hero-content,
  .swp-hero-inner{
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .swp-hero-content h1,
  .swp-hero-title{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .swp-hero-content p,
  .swp-hero-subtitle{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .swp-hero-actions{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-wrap: nowrap !important;
  }
}


/* ===== V65: mobile CTA buttons side by side + exact primary gradient ===== */

.swp-hero-actions .swp-hero-btn-primary,
.swp-hero-actions a:first-child{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border: none !important;
}

@media (max-width: 768px){
  .swp-hero-actions{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
  }

  .swp-hero-actions .swp-hero-btn,
  .swp-hero-actions a{
    display:inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}


/* ===== V66: only CTA color + mobile buttons side by side ===== */

/* exact requested primary button gradient */
.swp-hero-actions .swp-hero-btn-primary,
.swp-hero-actions a:first-child{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border: none !important;
}

/* mobile: keep the two hero buttons next to each other */
@media (max-width: 768px){
  .swp-hero-actions{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .swp-hero-actions .swp-hero-btn,
  .swp-hero-actions a{
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
}


/* ===== V67 BEAUTY POLISH: exact CTA color + mobile side-by-side ===== */

/* Exact requested primary gradient, forced on the actual visible CTA */
.swp-hero .swp-hero-actions a:first-child,
.swp-hero .swp-hero-actions .swp-hero-btn-primary,
.swp-hero .swp-hero-actions .swp-cta-primary,
.swp-hero .swp-hero-actions .swp-button-primary{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  background-image: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 28px rgba(166, 123, 232, 0.22) !important;
  border: none !important;
  color: #fff !important;
}

/* Secondary CTA clean glass look */
.swp-hero .swp-hero-actions a:nth-child(2),
.swp-hero .swp-hero-actions .swp-hero-btn-secondary{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 28px rgba(0,0,0,0.14) !important;
  color: #fff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Desktop polish */
.swp-hero .swp-hero-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}
.swp-hero .swp-hero-actions a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width: 186px !important;
  height: 58px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration:none !important;
  white-space: nowrap !important;
}

/* Mobile: strict side-by-side layout */
@media (max-width: 768px){
  .swp-hero .swp-hero-actions{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    max-width: 360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .swp-hero .swp-hero-actions a,
  .swp-hero .swp-hero-actions .swp-hero-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: 52px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    text-align:center !important;
  }
}


/* ===== V68: hero buttons match card buttons ===== */

/* shared hero button base closer to in-card CTA feel */
.swp-hero .swp-hero-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

.swp-hero .swp-hero-actions a,
.swp-hero .swp-hero-actions .swp-hero-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:52px !important;
  min-width:186px !important;
  padding:0 24px !important;
  border-radius:16px !important;
  font-weight:800 !important;
  font-size:18px !important;
  letter-spacing:-0.01em !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* primary = same family as card CTA */
.swp-hero .swp-hero-actions a:first-child,
.swp-hero .swp-hero-actions .swp-hero-btn-primary,
.swp-hero .swp-hero-actions .swp-cta-primary,
.swp-hero .swp-hero-actions .swp-button-primary{
  color:#fff !important;
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  background-image: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  border:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 24px rgba(166,123,232,.24) !important;
}

/* secondary = same glassy feel as hero/card contrast button */
.swp-hero .swp-hero-actions a:nth-child(2),
.swp-hero .swp-hero-actions .swp-hero-btn-secondary{
  color:#fff !important;
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* subtle hover polish on desktop only */
@media (hover:hover){
  .swp-hero .swp-hero-actions a:hover,
  .swp-hero .swp-hero-actions .swp-hero-btn:hover{
    transform:translateY(-1px) !important;
  }
}

/* mobile: side-by-side and same card-like proportions */
@media (max-width: 768px){
  .swp-hero .swp-hero-actions{
    width:100% !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:10px !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }

  .swp-hero .swp-hero-actions a,
  .swp-hero .swp-hero-actions .swp-hero-btn{
    flex:1 1 0 !important;
    width:calc(50% - 5px) !important;
    max-width:calc(50% - 5px) !important;
    min-width:0 !important;
    height:48px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }
}


/* ===== V69: force correct CTA gradient + true mobile side-by-side ===== */

/* Force the exact requested primary button color */
.swp-hero .swp-hero-actions a:first-child,
.swp-hero .swp-hero-actions .swp-hero-btn-primary,
.swp-hero .swp-hero-actions .swp-cta-primary,
.swp-hero .swp-hero-actions .swp-button-primary{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  background-image: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important;
  color:#fff !important;
  border:none !important;
}

/* Mobile: hard-force 2 buttons next to each other */
@media (max-width: 768px){
  .swp-hero .swp-hero-actions{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    width:calc(100% - 16px) !important;
    max-width:420px !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  .swp-hero .swp-hero-actions > a,
  .swp-hero .swp-hero-actions > .swp-hero-btn{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
}


/* ===== V70: correct hero button selectors ===== */

/* exact requested primary color */
.swp-hero-content .swp-hero-buttons .swp-btn-primary{
  background: linear-gradient(135deg, #6f8fe8 0%, #a67be8 50%, #f09cff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  border: none !important;
}

/* keep secondary neat */
.swp-hero-content .swp-hero-buttons .swp-btn-secondary{
  color:#fff !important;
}

/* mobile: real side-by-side layout using the actual classes */
@media (max-width: 768px){
  .swp-hero-content .swp-hero-buttons{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
    width: calc(100% - 16px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .swp-hero-content .swp-hero-buttons .swp-btn{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
}


/* ===== V71: modernere telefoons + scherper contrast ===== */

/* Slankere, modernere device bezel */
.swp-phone{
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.44)) !important;
}

.swp-phone-shell{
  padding: 7px !important;                 /* dunnere rand */
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 22%, rgba(0,0,0,.20) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 10px 18px rgba(255,255,255,.03),
    0 8px 24px rgba(0,0,0,.22) !important;
}

/* Strakker scherm */
.swp-phone-screen{
  border-radius: 23px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 -24px 36px rgba(0,0,0,.10) !important;
}

/* Modernere notch / speaker */
.swp-notch{
  width: 22% !important;
  max-width: 56px !important;
  height: 5px !important;
  top: 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  opacity: .92 !important;
}

/* Scherper beeld / meer contrast zonder design te veranderen */
.swp-image{
  opacity: .78 !important;
  filter: brightness(.62) contrast(1.18) saturate(1.02) !important;
}

/* Overlay iets strakker voor leesbaarheid */
.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.08) 28%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,.44) 70%,
      rgba(0,0,0,.74) 88%,
      rgba(0,0,0,.90) 100%
    ) !important;
}

/* Mobiel ook iets slanker en moderner */
@media (max-width: 1040px){
  .swp-phone-shell{
    padding: 6px !important;
    border-radius: 24px !important;
  }

  .swp-phone-screen{
    border-radius: 20px !important;
  }

  .swp-notch{
    height: 4px !important;
    top: 8px !important;
    max-width: 46px !important;
  }

  .swp-phone{
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.40)) !important;
  }
}


/* ===== V72: betere zichtbaarheid phone rand ===== */

/* rand duidelijker maken */
.swp-phone-shell{
  padding: 7px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 30%, rgba(0,0,0,.25) 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    inset 0 10px 18px rgba(255,255,255,.05),
    0 10px 28px rgba(0,0,0,.35) !important;
}

/* extra edge highlight voor contrast */
.swp-phone-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.4);
}

/* scherm iets minder donker zodat rand zichtbaar blijft */
.swp-image{
  opacity: .82 !important;
  filter: brightness(.72) contrast(1.15) !important;
}

/* overlay iets minder zwaar */
.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.06) 30%,
      rgba(0,0,0,.14) 50%,
      rgba(0,0,0,.38) 72%,
      rgba(0,0,0,.70) 90%,
      rgba(0,0,0,.85) 100%
    ) !important;
}


/* ===== V73: Ultra minimal iPhone-style frame ===== */

/* ultra thin premium frame */
.swp-phone-shell{
  padding: 4px !important; /* dunner */
  border-radius: 26px !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.08) 8%,
      rgba(0,0,0,0.18) 100%
    ) !important;

  box-shadow:
    inset 0 0 0 0.8px rgba(255,255,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 10px 24px rgba(0,0,0,0.35) !important;
}

/* glass edge reflection */
.swp-phone-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 25%,
      rgba(255,255,255,0.02) 40%,
      transparent 60%
    );

  opacity:.6;
}

/* inner screen tighter */
.swp-phone-screen{
  border-radius: 22px !important;

  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.05),
    inset 0 -20px 30px rgba(0,0,0,0.12) !important;
}

/* refined notch */
.swp-notch{
  height:4px !important;
  max-width:42px !important;
  top:8px !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.08)
    ) !important;

  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.2) !important;
}

/* keep contrast balanced */
.swp-image{
  filter: brightness(.74) contrast(1.14) !important;
}

.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.08) 35%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,.45) 75%,
      rgba(0,0,0,.78) 92%,
      rgba(0,0,0,.9) 100%
    ) !important;
}

/* mobile scaling */
@media (max-width:1040px){
  .swp-phone-shell{
    padding:3.5px !important;
    border-radius:22px !important;
  }

  .swp-phone-screen{
    border-radius:19px !important;
  }
}


/* ===== V74: micro contrast polish only ===== */

/* iets meer brightness en leesbaarheid in de content */
.swp-image{
  filter: brightness(.82) contrast(1.12) !important;
}

/* rand scherper en beter zichtbaar */
.swp-phone-shell{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 12px 28px rgba(0,0,0,0.4) !important;
}

/* overlay iets lichter in het midden */
.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.06) 35%,
      rgba(0,0,0,.14) 55%,
      rgba(0,0,0,.42) 75%,
      rgba(0,0,0,.8) 100%
    ) !important;
}


/* ===== V76: final clean version ===== */

/* Keep the clean V74 balance, but slightly refine the image */
.swp-image{
  filter: brightness(.80) contrast(1.13) !important;
}

/* Ensure no artificial spotlight or extra visual trickery */
.swp-wall::after,
.swp-phones-wall::after{
  content: none !important;
  display: none !important;
}


/* ===== V77: lighter blacks + much stronger phone-edge contrast ===== */

/* card imagery slightly lighter, still black and premium */
.swp-image{
  opacity: .84 !important;
  filter: brightness(.86) contrast(1.18) saturate(1.02) !important;
}

/* overlay: keep black feel, but open the mids for readability */
.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.04) 24%,
      rgba(0,0,0,.10) 44%,
      rgba(0,0,0,.28) 66%,
      rgba(0,0,0,.60) 86%,
      rgba(0,0,0,.82) 100%
    ) !important;
}

/* stronger, crisper device edge */
.swp-phone{
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)) !important;
}

.swp-phone-shell{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.10) 10%,
      rgba(0,0,0,.16) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1.2px rgba(255,255,255,.48),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 12px 28px rgba(0,0,0,.34) !important;
}

/* clearer glass edge outline */
.swp-phone-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.35) !important;
  opacity:1 !important;
}

/* inner screen edge a touch more defined */
.swp-phone-screen{
  box-shadow:
    inset 0 0 0 0.6px rgba(255,255,255,.08),
    inset 0 -18px 26px rgba(0,0,0,.10) !important;
}

/* notch more visible but still minimal */
.swp-notch{
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10)) !important;
  box-shadow:
    inset 0 0 0 0.6px rgba(255,255,255,.20),
    0 0 0 0.5px rgba(0,0,0,.18) !important;
}

/* mobile keeps same edge visibility */
@media (max-width: 1040px){
  .swp-image{
    opacity: .86 !important;
    filter: brightness(.88) contrast(1.17) saturate(1.02) !important;
  }

  .swp-phone-shell{
    box-shadow:
      inset 0 0 0 1.1px rgba(255,255,255,.46),
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(0,0,0,.58),
      0 10px 22px rgba(0,0,0,.30) !important;
  }
}


/* ===== V78: HARD EDGE CONTRAST (requested) ===== */

.swp-phone{
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.6))
    drop-shadow(0 0 6px rgba(255,255,255,.12)) !important;
}

.swp-phone-shell{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.12) 8%,
    rgba(0,0,0,.18) 100%
  ) !important;

  box-shadow:
    0 0 0 1.4px rgba(255,255,255,.65),
    0 0 18px rgba(255,255,255,.08),
    0 20px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.6) !important;
}

.swp-phone-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.4) !important;
}

.swp-image{
  filter: brightness(.9) contrast(1.2) !important;
}


/* ===== V79: 10/10 hard edge separation ===== */

/* harder silhouette, less glow */
.swp-phone{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.65)) !important;
}

/* crisp black/white device edge */
.swp-phone-shell{
  box-shadow:
    0 0 0 1.6px rgba(255,255,255,.85),
    0 0 0 2.2px rgba(0,0,0,.9),
    0 18px 40px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.7) !important;
}

/* remove softer white glow feeling from previous version */
.swp-phone-shell::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.38) !important;
}

/* open the middle of cards slightly for more readable contrast */
.swp-image{
  filter: brightness(.92) contrast(1.22) !important;
}


/* ===== V80: final crisp edge separation ===== */

.swp-phone{
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.75)) !important;
}

.swp-phone-shell{
  box-shadow:
    0 0 0 1.8px rgba(255,255,255,.95),
    0 0 0 3px rgba(0,0,0,1),
    0 22px 48px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.8) !important;
}

.swp-image{
  filter: brightness(.94) contrast(1.25) !important;
}


/* ===== V81: brighter blacks + punchy contrast ===== */

/* open up the whole scene but keep it black */
.swp-image{
  opacity: .92 !important;
  filter: brightness(1.02) contrast(1.35) saturate(1.05) !important;
}

/* make phones pop harder */
.swp-phone{
  filter:
    drop-shadow(0 14px 30px rgba(0,0,0,.85))
    drop-shadow(0 0 2px rgba(255,255,255,.25)) !important;
}

/* ultra crisp edge */
.swp-phone-shell{
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 0 0 3.5px rgba(0,0,0,1),
    0 26px 55px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.9) !important;
}

/* lift mid tones of overlay (important!) */
.swp-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.08) 30%,
      rgba(0,0,0,0.18) 55%,
      rgba(0,0,0,0.45) 80%,
      rgba(0,0,0,0.75) 100%
    ) !important;
}