.dcHero{
  padding: 24px 0 12px;
}

.dcHeroCard{
  position:relative;
  border-radius: 34px;
  overflow:hidden;
  min-height: 440px;
  background:#0b1220;

  border: 1px solid rgba(17,12,26,.12);
  box-shadow:
    0 34px 96px rgba(24,12,40,.14),
    0 0 0 1px rgba(90,46,145,.08);

  transform: translateZ(0);
}

.dcHeroMedia{
  position:absolute;
  inset:0;
}

.dcHeroMedia img{
  width:100%;
  height:100%;
  object-fit:cover;

  transform: scale(1.04);
  filter: contrast(1.06) saturate(1.06) brightness(.95);
  transition: transform 6s ease;
}

/* subtle premium motion */
.dcHeroCard:hover .dcHeroMedia img{
  transform: scale(1.08);
}

.dcHeroShade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(980px 560px at 16% 26%, rgba(123,67,196,.52), rgba(123,67,196,0) 62%),
    radial-gradient(760px 460px at 72% 18%, rgba(47,209,255,.12), rgba(47,209,255,0) 60%),
    linear-gradient(90deg,
      rgba(10,8,20,.78) 0%,
      rgba(10,8,20,.48) 42%,
      rgba(10,8,20,.18) 64%,
      rgba(10,8,20,0) 80%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.60) 100%);
}

.dcHeroContent{
  position:relative;
  z-index:2;

  padding: 54px 54px 64px;
  max-width: 820px;
  color:#fff;
}

/* Kicker -> glass pill */
.dcHeroKicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 950;

  color: rgba(255,255,255,.90);

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

/* Title */
.dcHeroTitle{
  margin: 14px 0 10px;

  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 950;

  text-shadow: 0 18px 46px rgba(0,0,0,.32);
}

/* Sub */
.dcHeroSub{
  margin: 0;
  line-height: 1.75;
  font-size: 15.8px;
  color: rgba(255,255,255,.85);
  max-width: 72ch;
}

/* CTAs */
.dcHeroCtas{
  margin-top: 20px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* Buttons — scoped so you don’t break other .btn usage */
.dcHero .btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  height: 46px;
  padding: 0 18px;
  border-radius: 999px;

  font-weight: 950;
  letter-spacing: .01em;

  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: #fff;

  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  backdrop-filter: blur(10px);
}

.dcHero .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

/* Primary */
.dcHero .btn--primary{
  background: rgba(255,255,255,.96);
  color: rgba(15,11,28,.94);
  border-color: rgba(255,255,255,.40);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

.dcHero .btn--primary:hover{
  background: #fff;
  border-color: rgba(90,46,145,.18);
}

/* Ghost */
.dcHero .btn--ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
}

.dcHero .btn--ghost:hover{
  background: rgba(255,255,255,.16);
}

/* Responsive */
@media (max-width: 980px){
  .dcHeroCard{ min-height: 520px; }
  .dcHeroContent{ padding: 40px 22px 24px; max-width: 92%; }

  /* more vertical readability on mobile */
  .dcHeroShade{
    background:
      radial-gradient(900px 520px at 50% 16%, rgba(123,67,196,.40), rgba(123,67,196,0) 60%),
      linear-gradient(180deg,
        rgba(10,8,20,.78) 0%,
        rgba(10,8,20,.48) 52%,
        rgba(10,8,20,.12) 85%,
        rgba(10,8,20,0) 96%);
  }
}

/* =========================================================
   DISCOVER CARD + CITY PASS (dc*) — SERIOUS PURPLE PREMIUM
   Brand purple: #5a2e91
   Drop-in for dcArticle page, consistent with vp pages.
   ========================================================= */

.dcArticle{
  padding: 26px 0 10px;
  position: relative;
}

.dcArticle::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 560px at 12% 0%, rgba(90,46,145,.08), transparent 60%),
    radial-gradient(720px 520px at 88% 18%, rgba(123,67,196,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(90,46,145,.02) 100%);
  opacity:.95;
}
.dcArticle > .container{ position:relative; z-index:1; }

/* -----------------------------------
   HEAD
----------------------------------- */
.dcHead{
  max-width: 980px;
  display:grid;
  gap: 8px;
  padding: 12px 0 18px;
}

.dcTitle{
  margin:0;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
  font-weight: 950;
}
.dcTitle::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
  opacity:.95;
}

.dcLead{
  margin:0;
  color: rgba(15,11,28,.70);
  line-height: 1.75;
  max-width: 78ch;
  font-size: 15.2px;
}

/* quick highlight row */
.dcHighlights{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.dcHighlight{
  border-radius: 18px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px rgba(24,12,40,.07);
  padding: 12px;
}
.dcHighlight__k{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}
.dcHighlight__t{
  margin-top: 6px;
  font-weight: 950;
  font-size: 14.8px;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcHighlight__d{
  margin-top: 6px;
  color: rgba(15,11,28,.72);
  line-height: 1.65;
  font-size: 13.8px;
}

/* -----------------------------------
   BLOCKS
----------------------------------- */
.dcBlock{
  position: relative;
  padding: 22px 0;
}
.dcBlock + .dcBlock{
  border-top: 1px solid rgba(17,12,26,.08);
}

.dcRow{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items:start;
}
.dcRow--reverse{
  grid-template-columns: .65fr 1.35fr;
}
.dcRow--reverse .dcText{ order:2; }
.dcRow--reverse .dcAside{ order:1; }

.dcH{
  margin:0;
  font-size: 16.2px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
  font-weight: 950;
}
.dcH::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
}

.dcP{
  margin: 10px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.85;
  font-size: 14.8px;
  max-width: 78ch;
}

/* feature cards */
.dcFeatures{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.dcFeature{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  padding: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcFeature:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
  border-color: rgba(90,46,145,.18);
}
.dcFeature h4{
  margin:0;
  font-size: 14.8px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcFeature p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

/* note */
.dcNote{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(90,46,145,.16);
  background: rgba(90,46,145,.06);
  color: rgba(15,11,28,.76);
  line-height: 1.75;
}

/* -----------------------------------
   ASIDE CARDS
----------------------------------- */
.dcAside{
  display:grid;
  gap: 12px;
}

.dcAsideCard{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.05), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.88);
  padding: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
}
.dcAsideCard--soft{
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(90,46,145,.04), rgba(90,46,145,0) 58%),
    rgba(255,255,255,.88);
}

.dcAsideTag{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}
.dcAsideTitle{
  margin-top: 6px;
  font-weight: 950;
  font-size: 15.8px;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcAsideCard p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

.dcAsideMeta{
  margin-top: 12px;
  border-top: 1px solid rgba(17,12,26,.08);
  padding-top: 12px;
  display:grid;
  gap: 10px;
}
.dcMetaRow{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(15,11,28,.72);
  font-size: 13.6px;
}
.dcMetaRow span{ opacity:.9; }
.dcMetaRow strong{
  color: rgba(15,11,28,.92);
  font-weight: 950;
}

.dcAsideLink{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 950;
  color: rgba(90,46,145,.98);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dcAsideLink:hover{
  transform: translateY(-1px);
  background: rgba(90,46,145,.14);
  border-color: rgba(90,46,145,.22);
  box-shadow: 0 16px 52px rgba(24,12,40,.10);
}

/* -----------------------------------
   SECTION HEAD (shared for new sections)
----------------------------------- */
.dcSectionHead{
  max-width: 980px;
  display:grid;
  gap: 8px;
  padding: 10px 0 14px;
}
.dcSectionTitle{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
}
.dcSectionTitle::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
}
.dcSectionSub{
  margin:0;
  color: rgba(15,11,28,.70);
  line-height: 1.75;
  font-size: 15.2px;
}

/* -----------------------------------
   BENEFIT TILES
----------------------------------- */
.dcTiles{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}
.dcTileGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.dcTile{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(90,46,145,.04), rgba(90,46,145,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcTile:hover{
  transform: translateY(-2px);
  border-color: rgba(90,46,145,.18);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
}
.dcTile__k{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}
.dcTile__t{
  margin: 6px 0 0;
  font-size: 15.2px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcTile__p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

/* -----------------------------------
   TIERS
----------------------------------- */
.dcTiers{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}
.dcTierGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.dcTier{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcTier:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
  border-color: rgba(90,46,145,.18);
}
.dcTier__tag{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}
.dcTier__t{
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
}
.dcTier__p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}
.dcTier__ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,11,28,.74);
  line-height: 1.8;
  font-size: 14.2px;
}
.dcTier__cta{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  width: fit-content;
  text-decoration:none;
  font-weight: 950;

  color: rgba(90,46,145,.98);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dcTier:hover .dcTier__cta{
  transform: translateY(-1px);
  background: rgba(90,46,145,.14);
  border-color: rgba(90,46,145,.22);
  box-shadow: 0 16px 52px rgba(24,12,40,.10);
}

/* featured tier */
.dcTier--featured{
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(90,46,145,.10), rgba(90,46,145,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
  border-color: rgba(90,46,145,.20);
  box-shadow: 0 26px 90px rgba(24,12,40,.14);
}

/* -----------------------------------
   STEPS
----------------------------------- */
.dcSteps{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}

.dcStepList{
  margin: 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 12px;
}

.dcStep{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.dcStep__n{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(90,46,145,.98);
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
  flex: 0 0 auto;
}
.dcStep__t{
  font-weight: 950;
  color: rgba(15,11,28,.96);
  letter-spacing: -.01em;
}
.dcStep__p{
  margin-top: 6px;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

/* -----------------------------------
   ATTRACTIONS PREVIEW
----------------------------------- */
.dcAttractions{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}

/* chips */
.dcFilters{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dcChip{
  appearance:none;
  border: 1px solid rgba(90,46,145,.16);
  background: rgba(90,46,145,.08);
  color: rgba(90,46,145,.98);
  font-weight: 950;
  font-size: 12.8px;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.dcChip:hover{
  transform: translateY(-1px);
  background: rgba(90,46,145,.12);
  border-color: rgba(90,46,145,.22);
}
.dcChip.is-active{
  background: linear-gradient(135deg, #5a2e91, #3b1b6a 58%, #24123f 100%);
  color:#fff;
  border-color: rgba(90,46,145,.28);
}

/* item cards */
.dcItemGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.dcItem{
  text-decoration:none;
  color: inherit;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(17,12,26,.10);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  display:grid;
  grid-template-rows: 160px 1fr;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcItem:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 92px rgba(24,12,40,.14);
  border-color: rgba(90,46,145,.18);
}

/* placeholder image block (swap later with real <img>) */
.dcItem__img{
  background:
    radial-gradient(820px 460px at 18% 18%, rgba(123,67,196,.22), rgba(123,67,196,0) 62%),
    linear-gradient(135deg, #0b1220, #120a22);
}

.dcItem__b{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.dcItem__k{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,46,145,.92);
  font-weight: 950;
}
.dcItem__t{
  font-weight: 950;
  font-size: 15.6px;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcItem__d{
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}
.dcItem__cta{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  width: fit-content;

  font-weight: 950;
  color: rgba(90,46,145,.98);
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dcItem:hover .dcItem__cta{
  transform: translateY(-1px);
  background: rgba(90,46,145,.14);
  border-color: rgba(90,46,145,.22);
  box-shadow: 0 16px 52px rgba(24,12,40,.10);
}

/* inline CTA */
.dcInlineCta{
  margin-top: 14px;
  border-radius: 26px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 60%),
    radial-gradient(820px 320px at 88% 30%, rgba(90,46,145,.10), rgba(90,46,145,0) 60%),
    rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(24,12,40,.10);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.dcInlineCta__t{
  font-weight: 950;
  color: rgba(15,11,28,.96);
  letter-spacing: -.01em;
}
.dcInlineCta__p{
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
  max-width: 70ch;
}
.dcInlineCta__btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, #5a2e91, #3b1b6a 58%, #24123f 100%);
  border: 1px solid rgba(90,46,145,.28);
  box-shadow: 0 18px 60px rgba(24,12,40,.16);
  transition: transform .16s ease, border-color .16s ease;
}
.dcInlineCta__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(90,46,145,.34);
}

/* -----------------------------------
   YOUR BENEFITS GRID (existing)
----------------------------------- */
.dcCards{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}
.dcCardsHead h3{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
}
.dcCardsHead h3::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #5a2e91, rgba(123,67,196,.55));
}

.dcGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.dcCard{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(90,46,145,.04), rgba(90,46,145,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(24,12,40,.10);
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcCard:hover{
  transform: translateY(-2px);
  border-color: rgba(90,46,145,.18);
  box-shadow: 0 26px 84px rgba(24,12,40,.12);
}
.dcCard h4{
  margin:0;
  font-size: 15.2px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(15,11,28,.96);
}
.dcCard p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.7;
  font-size: 14.2px;
}

/* -----------------------------------
   FAQ (details accordion)
----------------------------------- */
.dcFaq{
  padding: 22px 0 10px;
  border-top: 1px solid rgba(17,12,26,.08);
}

.dcFaqList{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}

.dcQ{
  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 58%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 44px rgba(24,12,40,.07);
  overflow:hidden;
}
.dcQ__q{
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 950;
  color: rgba(15,11,28,.96);
  letter-spacing: -.01em;
  list-style:none;
}
.dcQ__q::-webkit-details-marker{ display:none; }
.dcQ__q::after{
  content:"›";
  float:right;
  transform: rotate(90deg);
  color: rgba(90,46,145,.85);
  transition: transform .18s ease;
}
.dcQ[open] .dcQ__q::after{ transform: rotate(-90deg); }

.dcQ__a{
  padding: 0 16px 14px;
  color: rgba(15,11,28,.72);
  line-height: 1.75;
  font-size: 14.4px;
}

/* -----------------------------------
   FINAL CTA (uses your .btn classes)
----------------------------------- */
.dcFinalCta{
  padding: 22px 0 0;
}

.dcFinalCard{
  border-radius: 26px;
  border: 1px solid rgba(17,12,26,.10);
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(123,67,196,.06), rgba(123,67,196,0) 60%),
    radial-gradient(820px 320px at 88% 30%, rgba(90,46,145,.10), rgba(90,46,145,0) 60%),
    rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(24,12,40,.10);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.dcFinalCard h3{
  margin:0;
  font-size: 18.5px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(15,11,28,.96);
}
.dcFinalCard p{
  margin: 8px 0 0;
  color: rgba(15,11,28,.72);
  line-height: 1.75;
  max-width: 70ch;
  font-size: 14.8px;
}

.dcFinalActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* proof chips */
.dcFinalProof{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dcProof{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(90,46,145,.16);
  background: rgba(90,46,145,.08);
  font-weight: 900;
  color: rgba(90,46,145,.98);
  font-size: 12.8px;
  letter-spacing: .02em;
}

/* Buttons (if not already defined globally) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 950;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 999px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn--primary{
  color:#fff;
  background: linear-gradient(135deg, #5a2e91, #3b1b6a 58%, #24123f 100%);
  border: 1px solid rgba(90,46,145,.28);
  box-shadow: 0 18px 60px rgba(24,12,40,.16);
}
.btn--primary:hover{
  transform: translateY(-1px);
  border-color: rgba(90,46,145,.34);
}

.btn--ghost{
  color: rgba(90,46,145,.98);
  background: rgba(90,46,145,.10);
  border: 1px solid rgba(90,46,145,.16);
}
.btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(90,46,145,.14);
  border-color: rgba(90,46,145,.22);
  box-shadow: 0 16px 52px rgba(24,12,40,.10);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px){
  .dcRow{ grid-template-columns: 1fr; }
  .dcRow--reverse{ grid-template-columns: 1fr; }
  .dcRow--reverse .dcText{ order: 1; }
  .dcRow--reverse .dcAside{ order: 2; }

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

@media (max-width: 980px){
  .dcFeatures{ grid-template-columns: 1fr; }
  .dcTierGrid{ grid-template-columns: 1fr; }
  .dcHighlights{ grid-template-columns: 1fr; }
}

@media (max-width: 680px){
  .dcGrid{ grid-template-columns: 1fr; }
  .dcTileGrid{ grid-template-columns: 1fr; }
  .dcItemGrid{ grid-template-columns: 1fr; }
  .dcFinalCard{ flex-direction: column; align-items:flex-start; }
  .dcInlineCta{ flex-direction: column; align-items:flex-start; }
}