/* ══════════════════════════════════════════════════════════════════
   QIUPID — Hero + Cupid Plan  (Elementor widget stylesheet)
   Scoped to .qiupid-blk and forced with !important so no theme /
   Elementor / plugin CSS can overwrite it.
   All tunable values are CSS variables — the widget overrides them
   per instance from the Elementor controls.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- HARD RESET: strips every inherited theme style ---------- */
.qiupid-blk,
.qiupid-blk *,
.qiupid-blk *::before,
.qiupid-blk *::after{
  all:unset;
  display:revert;
  box-sizing:border-box !important;
  -webkit-font-smoothing:antialiased !important;
}

/* ---------- TOKENS + wrapper ---------- */
.qiupid-blk{
  /* Brand (overridden by Elementor Colors controls) */
  --pink:#ea1a7f;
  --pink-hover:#c8146a;
  --white:#ffffff;
  --page:#ffffff;
  --ink:#1b1b1f;
  --ink-soft:#6f6f76;

  /* Layout (overridden by Elementor Layout controls) */
  --container:1140px;
  --gutter:20px;
  --overhang:110px;   /* how far the pink bar hangs below the photo */
  --tail:40px;
  --hero-pos-y:22%;   /* vertical focus of the hero photo */

  /* Font family — set by Elementor Typography control, falls back to Poppins */
  --qp-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-family:var(--qp-font) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  color:var(--ink) !important;
  text-align:left !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  background:transparent !important;
}

/* ---------- SVG: presentation attributes get wiped by the reset,
              so stroke/fill must be re-declared here ---------- */
.qiupid-blk svg{
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.6px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  overflow:visible !important;
}

/* ══════════════ SECTION 1 — HERO ══════════════ */

.qiupid-blk .qp-hero{
  position:relative !important;
  display:block !important;
  background:var(--page) !important;
  padding:0 0 var(--tail) 0 !important;
  margin:0 !important;
  overflow:hidden !important;

  /* Full-bleed, so it stretches past the Elementor container.
     If this creates a horizontal scrollbar, set the section/container
     to Full Width in Elementor and it will still behave. */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
}

.qiupid-blk .qp-hero__media{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  bottom:calc(var(--overhang) + var(--tail)) !important;
  z-index:0 !important;
  background-color:#4a3340 !important;
  background-size:cover !important;
  background-position:center var(--hero-pos-y) !important;
  background-repeat:no-repeat !important;
}
.qiupid-blk .qp-hero__media::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  display:block !important;
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(18,10,16,.55) 0%, rgba(18,10,16,.30) 45%, rgba(18,10,16,.60) 100%) !important;
}

.qiupid-blk .qp-hero__inner{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  max-width:var(--container) !important;
  margin:0 auto !important;
  padding:180px var(--gutter) 0 var(--gutter) !important;
}

.qiupid-blk .qp-hero__content{
  display:block !important;
  max-width:720px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.qiupid-blk .qp-hero__title{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--white) !important;
  font-size:var(--hero-title-size, clamp(2.25rem, 5.2vw, 4rem)) !important;
  line-height:1.14 !important;
  letter-spacing:-.5px !important;
  text-transform:none !important;
}
.qiupid-blk .qp-hero__title span{ display:block !important; }
.qiupid-blk .qp-hero__title .l1{ font-weight:700 !important; }
.qiupid-blk .qp-hero__title .l2{ font-weight:400 !important; }

.qiupid-blk .qp-hero__text{
  display:block !important;
  max-width:480px !important;
  margin:26px auto 0 auto !important;
  padding:0 !important;
  color:rgba(255,255,255,.86) !important;
  font-size:.9375rem !important;
  font-weight:300 !important;
  line-height:1.75 !important;
}

.qiupid-blk .qp-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:34px 0 0 0 !important;
  padding:15px 34px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--pink) !important;
  color:var(--white) !important;
  font-size:.8125rem !important;
  font-weight:600 !important;
  letter-spacing:.4px !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-transform:none !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .28s ease, transform .28s ease, box-shadow .28s ease !important;
}
.qiupid-blk .qp-btn svg{
  width:16px !important;
  height:16px !important;
  flex:0 0 auto !important;
  stroke-width:2px !important;
}
.qiupid-blk .qp-btn:hover,
.qiupid-blk .qp-btn:focus-visible{
  background:var(--pink-hover) !important;
  color:var(--white) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 26px rgba(234,26,127,.35) !important;
}
.qiupid-blk .qp-btn:focus-visible{
  outline:2px solid #fff !important;
  outline-offset:3px !important;
}

/* ---------- Pink feature bar ---------- */
.qiupid-blk .qp-features{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:38px 46px !important;
  margin:120px 0 0 0 !important;
  padding:52px 56px !important;
  background:var(--pink) !important;
}
.qiupid-blk .qp-feature{
  display:flex !important;
  align-items:flex-start !important;
  gap:22px !important;
}
.qiupid-blk .qp-ic{
  display:block !important;
  flex:0 0 auto !important;
  width:46px !important;
  height:46px !important;
  color:var(--white) !important;
}
.qiupid-blk .qp-ic img,
.qiupid-blk .qp-ic svg{
  width:100% !important;
  height:100% !important;
  position:relative !important;
  object-fit:contain !important;
}
.qiupid-blk .qp-feature__title{
  display:block !important;
  margin:2px 0 8px 0 !important;
  padding:0 !important;
  color:var(--white) !important;
  font-size:1.125rem !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  text-transform:none !important;
}
.qiupid-blk .qp-feature__text{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:rgba(255,255,255,.85) !important;
  font-size:.8125rem !important;
  font-weight:300 !important;
  line-height:1.7 !important;
}

/* ══════════════ SECTION 2 — CUPID PLAN ══════════════ */

.qiupid-blk .qp-plan{
  display:block !important;
  background:var(--page) !important;
  padding:100px 0 110px 0 !important;
  margin:0 !important;
}
.qiupid-blk .qp-plan__inner{
  display:block !important;
  max-width:var(--container) !important;
  margin:0 auto !important;
  padding:0 var(--gutter) !important;
}
.qiupid-blk .qp-plan__head{
  display:grid !important;
  grid-template-columns:1fr 1.2fr !important;
  gap:44px !important;
  align-items:start !important;
  margin:0 0 54px 0 !important;
}
.qiupid-blk .qp-plan__title{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--ink) !important;
  font-size:var(--plan-title-size, clamp(1.5rem, 2.6vw, 2.125rem)) !important;
  line-height:1.28 !important;
  letter-spacing:-.2px !important;
  text-transform:none !important;
}
.qiupid-blk .qp-plan__title span{ display:block !important; }
.qiupid-blk .qp-plan__title .l1{ font-weight:700 !important; }
.qiupid-blk .qp-plan__title .l2{ font-weight:400 !important; }

.qiupid-blk .qp-plan__text{
  display:block !important;
  margin:4px 0 0 0 !important;
  padding:0 !important;
  color:var(--ink-soft) !important;
  font-size:.9375rem !important;
  font-weight:300 !important;
  line-height:1.85 !important;
}

.qiupid-blk .qp-cards{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:30px !important;
  margin:0 !important;
  padding:0 !important;
}
.qiupid-blk .qp-card{
  display:flex !important;
  flex-direction:column !important;
  background:var(--pink) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
.qiupid-blk .qp-card__media{
  display:block !important;
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  background-color:#cfc7cc !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.qiupid-blk .qp-card__body{
  display:block !important;
  padding:26px 26px 32px 26px !important;
}
.qiupid-blk .qp-card__title{
  display:block !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
  color:var(--white) !important;
  font-size:1.0625rem !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  text-transform:none !important;
}
.qiupid-blk .qp-card__text{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:rgba(255,255,255,.85) !important;
  font-size:.8125rem !important;
  font-weight:300 !important;
  line-height:1.7 !important;
}

/* ══════════════ RESPONSIVE ══════════════ */

@media (max-width:1024px){
  .qiupid-blk{ --overhang:80px; }
  .qiupid-blk .qp-hero__inner{ padding-top:140px !important; }
  .qiupid-blk .qp-features{ padding:44px 40px !important; gap:32px 34px !important; }
  .qiupid-blk .qp-feature{ gap:18px !important; }
  .qiupid-blk .qp-plan{ padding:80px 0 90px 0 !important; }
  .qiupid-blk .qp-plan__head{ grid-template-columns:1fr !important; gap:18px !important; margin-bottom:40px !important; }
  .qiupid-blk .qp-cards{ gap:22px !important; }
  .qiupid-blk .qp-card__body{ padding:22px 20px 26px 20px !important; }
}

@media (max-width:767px){
  .qiupid-blk{ --overhang:60px; --tail:30px; }
  .qiupid-blk .qp-hero__inner{ padding-top:110px !important; }
  .qiupid-blk .qp-hero__media{ background-position:center 25% !important; }
  .qiupid-blk .qp-features{
    grid-template-columns:1fr !important;
    margin-top:80px !important;
    padding:36px 28px !important;
    gap:30px !important;
  }
  .qiupid-blk .qp-plan{ padding:60px 0 70px 0 !important; }
  .qiupid-blk .qp-cards{ grid-template-columns:1fr !important; gap:26px !important; }
  .qiupid-blk .qp-card__media{ aspect-ratio:16 / 10 !important; }
}

@media (max-width:480px){
  .qiupid-blk .qp-hero__text{ font-size:.875rem !important; }
  .qiupid-blk .qp-feature{ gap:16px !important; }
  .qiupid-blk .qp-ic{ width:40px !important; height:40px !important; }
}

@media (prefers-reduced-motion:reduce){
  .qiupid-blk .qp-btn{ transition:none !important; }
  .qiupid-blk .qp-btn:hover{ transform:none !important; }
}