/* ============================================================
   CARD GRID  –  replaces .dcci-buttons nav on the front page
   ============================================================ */

.dcci-card-grid-section {
  max-width: 1320px;
  margin: 0 auto 56px;
  padding: 0 24px;
  position: relative;
  /* isolation: isolate creates a new stacking context so the ::before
     pseudo at z-index:-1 sits behind this section's content but NOT
     behind the parent .dcci-portal-bg fixed background */
  isolation: isolate;
}

/* Full-width background band behind "Explore the portal" section.
   Extends upward to cover .dcci-explore-transition above it.
   Soft feathered edges via a mask so no hard top/bottom line. */
.dcci-card-grid-section::before {
  content: '';
  position: absolute;
  top: -88px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(248, 245, 255, 0.32);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.4) 20%,
    black 40%,
    black 70%,
    rgba(0,0,0,0.2) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.4) 20%,
    black 40%,
    black 70%,
    rgba(0,0,0,0.2) 90%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
}

.dcci-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  justify-content: center;
}

/* Base card */
.dcci-card {
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
.dcci-card:hover { transform: translateY(-8px); }

/* Illustration box */
.dcci-card-illo {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  border-radius: 24px 24px 0 0;
}

/* Mini laptop */
.dcci-card-laptop {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dcci-card-screen {
  width: 78px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.35);
}
.dcci-card-screen-inner {
  width: 100%;
  height: 100%;
}
.dcci-card-base {
  width: 90px;
  height: 9px;
  border-radius: 0 0 5px 5px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top: none;
}

/* Character circle (bottom-right of illo) */
.dcci-card-char {
  position: absolute;
  bottom: 10px;
  right: calc(50% - 58px);
  width: 42px;
  height: 52px;
  border-radius: 21px 21px 14px 14px;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 3;
}

/* Card text */
.dcci-card-body { padding: 16px 18px 10px; flex: 1; }

.dcci-card-title {
  font-family: var(--dcc-font, 'Montserrat', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.dcci-card-desc {
  font-size: 0.78rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
.dcci-card--pink .dcci-card-desc { line-height: 1.72 !important; }

/* CTA pill */
.dcci-card-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff !important;
  margin: 0 18px 22px;
  transition: filter 0.15s, transform 0.15s;
  box-shadow: 0 5px 14px rgba(0,0,0,0.22);
  text-decoration: none !important;
}
.dcci-card:hover .dcci-card-btn { filter: brightness(1.1); transform: scale(1.04); }

/* ── PINK ── */
.dcci-card--pink { background:#fce8f1; box-shadow:0 8px 28px rgba(232,0,111,.14); }
.dcci-card--pink:hover { box-shadow:0 20px 44px rgba(232,0,111,.24); }
.dcci-card--pink .dcci-card-illo  { background:linear-gradient(160deg,#f9c2db,#fce8f1); }
.dcci-card--pink .dcci-card-screen { background:#e8006f; }
.dcci-card--pink .dcci-card-screen-inner { background:linear-gradient(135deg,#c40060,#ff4fa0); }
.dcci-card--pink .dcci-card-base  { background:#c40060; }
.dcci-card--pink .dcci-card-char  { background:linear-gradient(145deg,#fbd5e8,#f9a8ca); }
.dcci-card--pink .dcci-card-title { color:#c40060; }
.dcci-card--pink .dcci-card-desc  { color:#8a003e; }
.dcci-card--pink .dcci-card-btn   { background:#e91e63; }

/* ── GREEN ── */
.dcci-card--green { background:#e4f8f0; box-shadow:0 8px 28px rgba(34,153,84,.14); }
.dcci-card--green:hover { box-shadow:0 20px 44px rgba(34,153,84,.24); }
.dcci-card--green .dcci-card-illo  { background:linear-gradient(160deg,#a8eacc,#e4f8f0); }
.dcci-card--green .dcci-card-screen { background:#1f8f5e; }
.dcci-card--green .dcci-card-screen-inner { background:linear-gradient(135deg,#156b46,#2db37a); }
.dcci-card--green .dcci-card-base  { background:#156b46; }
.dcci-card--green .dcci-card-char  { background:linear-gradient(145deg,#b8f0d4,#7ddbb0); }
.dcci-card--green .dcci-card-title { color:#1a7a52; }
.dcci-card--green .dcci-card-desc  { color:#0e4f34; }
.dcci-card--green .dcci-card-btn   { background:#2ecc71; }

/* ── PURPLE ── */
.dcci-card--purple { background:#eee8ff; box-shadow:0 8px 28px rgba(107,75,181,.14); }
.dcci-card--purple:hover { box-shadow:0 20px 44px rgba(107,75,181,.24); }
.dcci-card--purple .dcci-card-illo  { background:linear-gradient(160deg,#cfc0f8,#eee8ff); }
.dcci-card--purple .dcci-card-screen { background:#5a35aa; }
.dcci-card--purple .dcci-card-screen-inner { background:linear-gradient(135deg,#3f218a,#7b50cc); }
.dcci-card--purple .dcci-card-base  { background:#3f218a; }
.dcci-card--purple .dcci-card-char  { background:linear-gradient(145deg,#ddd4ff,#bbaef5); }
.dcci-card--purple .dcci-card-title { color:#5a35aa; }
.dcci-card--purple .dcci-card-desc  { color:#36207a; }
.dcci-card--purple .dcci-card-btn   { background:#9b59b6; }

/* ── BLUE ── */
.dcci-card--blue { background:#dff0f8; box-shadow:0 8px 28px rgba(26,159,192,.14); }
.dcci-card--blue:hover { box-shadow:0 20px 44px rgba(26,159,192,.24); }
.dcci-card--blue .dcci-card-illo  { background:linear-gradient(160deg,#9dd9ef,#dff0f8); }
.dcci-card--blue .dcci-card-screen { background:#0f7a96; }
.dcci-card--blue .dcci-card-screen-inner { background:linear-gradient(135deg,#0a5870,#1a9fc0); }
.dcci-card--blue .dcci-card-base  { background:#0a5870; }
.dcci-card--blue .dcci-card-char  { background:linear-gradient(145deg,#bee7f6,#88d4ed); }
.dcci-card--blue .dcci-card-title { color:#0f6e86; }
.dcci-card--blue .dcci-card-desc  { color:#0a4d60; }
.dcci-card--blue .dcci-card-btn   { background:#3498db; }

/* ── YELLOW ── */
.dcci-card--yellow { background:#fef9dc; box-shadow:0 8px 28px rgba(212,160,23,.14); }
.dcci-card--yellow:hover { box-shadow:0 20px 44px rgba(212,160,23,.24); }
.dcci-card--yellow .dcci-card-illo  { background:linear-gradient(160deg,#f7e080,#fef9dc); }
.dcci-card--yellow .dcci-card-screen { background:#a67c00; }
.dcci-card--yellow .dcci-card-screen-inner { background:linear-gradient(135deg,#7a5a00,#d4a017); }
.dcci-card--yellow .dcci-card-base  { background:#7a5a00; }
.dcci-card--yellow .dcci-card-char  { background:linear-gradient(145deg,#fef0a0,#f7dc60); }
.dcci-card--yellow .dcci-card-title { color:#8a6200; }
.dcci-card--yellow .dcci-card-desc  { color:#5a4000; }
.dcci-card--yellow .dcci-card-btn   { background:#f1c40f; color:#fff !important; }

/* Responsive */
@media (max-width: 1100px) {
  .dcci-card-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 800px) {
  .dcci-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .dcci-card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dcci-card-grid-section { padding: 0 12px; margin-bottom: 50px; }
  .dcci-card-illo { height: 108px; }
  .dcci-card-title { font-size: 0.7rem !important; }
  .dcci-card-desc  { font-size: 0.7rem !important; }
}

/* Subtitle under main welcome heading */
.dcci-subtitle-l1 { display: inline; }
.dcci-subtitle-l2 { display: inline; font-size: 0.95em; opacity: 0.93; }

.dcci-welcome-subtitle {
  max-width: 1320px;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: clamp(15.5px, 1.55vw, 18.5px);
  font-weight: 500;
  line-height: 1.44;
  color: var(--dcci-purple, #3E1E67);
  text-align: center;
  opacity: 0.85;
}

/* Hero wrapper — constrains to card grid width */
.dcci-hero-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}
/* ── Explore the portal transition heading ── */
.dcci-explore-transition {
  max-width: 1320px;
  margin: 0 auto 22px;
  padding: 0 24px;
  text-align: center;
}

.dcci-explore-label {
  display: inline-block;
  font-family: var(--dcc-font, 'Montserrat', sans-serif);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dcci-purple, #3E1E67);
  opacity: 0.80;
  position: relative;
  padding: 0 20px;
}

.dcci-explore-label::before,
.dcci-explore-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  background: var(--dcci-purple, #3E1E67);
  opacity: 0.22;
}

.dcci-explore-label::before { right: 100%; }
.dcci-explore-label::after  { left: 100%; }

@media (max-width: 768px) {
  .dcci-explore-transition { margin-bottom: 20px; }
  .dcci-explore-label::before,
  .dcci-explore-label::after { width: 30px; }
}