/* ═══════════════════════════════════════════════════════════════
   DATING APP DEVELOPMENT — landing page theme
   Loads AFTER css/base-styles.css. The shared header, mobile menu
   and .footer-min come from the base file; this sheet re-tints them
   and styles the whole dating middle (everything prefixed .dt-).

   Design language: one Poppins face, 600-weight headings, mostly
   left-aligned section heads, rounded cards (16px) on a two-tier radius
   scale, full-bleed
   deep-berry bands and a magenta-pink primary.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Base-file hooks (header CTA, footer accents) */
  --primary: #E4006B;
  --primary-dark: #C2005B;
  --accent: #3E0A26;
  --accent2: #FFB3D1;
  --secondary: #2E061C;
  --gradient-dark-card: linear-gradient(135deg, #3E0A26 0%, #2E061C 100%);
  --gradient-cta: linear-gradient(135deg, #E4006B 0%, #C2005B 100%);
  --shadow-cta: 0 10px 26px rgba(228, 0, 107, 0.28);

  /* Page palette */
  --cb-pink: #E4006B;         /* buttons, primary marks */
  --cb-pink-2: #FF3D8A;       /* accent word inside a heading */
  --cb-neon: #FF6BA8;          /* bright accent on dark */
  --cb-blush: #FFB3D1;         /* eyebrow on dark */
  --cb-dark: #3E0A26;          /* deep-berry bands */
  --cb-dark-2: #2E061C;
  --cb-slate: #141414;         /* charcoal services band */
  --cb-ink: #000000;           /* headings */
  --cb-body: #6B626E;          /* body copy */
  --cb-muted: #948C97;
  --cb-line: #EDE5EB;
  --cb-soft: #F8F2F6;          /* light section fill */
  --cb-soft-2: #F7F1F5;
  --cb-tint: #FDECF4;         /* soft pink wash */
  --cb-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cb-radius: 8px;         /* controls: buttons, tabs, chips, icon tiles */
  --cb-radius-card: 16px;   /* cards, panels, media and other surfaces */
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: var(--cb-font);
  color: var(--cb-body);
  background: #fff;
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font);
  color: var(--cb-ink);
  font-weight: 600;
}
p, li, a, span, strong, small, button, input, textarea, summary { font-family: var(--cb-font); }

/* Code Brew runs a ~1360px content column; the shared 1600px container is
   capped here so header, sections and footer all sit on the same rails. */
.container { max-width: 1400px; padding: 0 24px; }

/* ── HEADER CTA ───────────────────────────────────────────── */
.nav-cta {
  gap: 10px;
  padding: 9px 9px 9px 20px;
  border-radius: var(--cb-radius);
  font-family: var(--cb-font);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--cb-pink);
  color: #fff !important;
  box-shadow: none;
}
.nav-cta::after {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #fff;
  color: var(--cb-ink);
  font-size: 0.8rem;
  font-weight: 700;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(228, 0, 107, 0.3); }
.nav-cta:focus-visible { outline: 3px solid rgba(228, 0, 107, 0.45); }

.mobile-menu .nav-cta {
  background: var(--cb-pink);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(228, 0, 107, 0.26);
}
.mobile-menu .nav-cta:hover { box-shadow: 0 12px 26px rgba(228, 0, 107, 0.36); }

/* ── ACTIVE NAV ITEM (.selected, set by the scrollspy in js/dating.js) ──
   :not(.nav-cta) throughout — the CTA is a filled pink button and must not
   pick up the link treatment if it ever ends up marked. */
.nav-links a:not(.nav-cta).selected { position: relative; color: var(--cb-pink); }
/* Underline grows from the centre so arriving at a section reads as a move,
   not a repaint. Sits on the nav's own baseline, clear of the descenders. */
.nav-links a:not(.nav-cta).selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--cb-pink);
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
  animation: dtNavMark 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dtNavMark { from { transform: translateX(-50%) scaleX(0); } }
/* No room for an underline in the stacked sheet — the row is marked with a
   pink rule down its left edge instead. */
.mobile-menu a:not(.nav-cta).selected {
  color: var(--cb-pink);
  box-shadow: inset 3px 0 0 var(--cb-pink);
  padding-left: 14px;
  transition: padding-left 0.22s, color 0.22s;
}

/* Base only swaps to the hamburger at 768px, so between 769–940 the desktop
   nav ran past the viewport and clipped the CTA. Tighten it there. */
@media (min-width: 769px) and (max-width: 940px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.86rem; }
  .nav-cta { padding: 8px 8px 8px 15px; font-size: 0.82rem; gap: 7px; }
  .nav-cta::after { width: 23px; height: 23px; font-size: 0.74rem; }
}

/* ── SECTION SHELL ────────────────────────────────────────── */
/* Section rhythm — the page runs long, so the light sections alternate on a
   three-tone scale instead of one flat white: plain, --soft (flat blush) and
   --wash (blush that fades out into white, used where the next section is
   white so the seam disappears). Never two identical tones back to back. */
.dt-sec { padding: clamp(54px, 2.6rem + 3vw, 94px) 0; background: #fff; }
.dt-sec--soft { background: var(--cb-soft); }
.dt-sec--wash { background: linear-gradient(180deg, #FCF3F8 0%, #FDF7FA 46%, #fff 100%); }
/* Berry variant. With the cost band gone the page tail ran seven pale
   sections without a break, so one of them carries the dark treatment. */
.dt-sec--dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #4B0F31 0%, var(--cb-dark) 52%, #2C061B 100%);
}
.dt-sec--dark::before {
  content: "";
  position: absolute;
  top: -230px;
  right: -150px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.28), transparent 66%);
  pointer-events: none;
}
.dt-sec--dark > .container { position: relative; z-index: 1; }
.dt-sec--dark .dt-head h2 { color: #fff; }
.dt-sec--dark .dt-head p { color: rgba(255, 255, 255, 0.66); }
.dt-sec--flush { padding-top: 0; }

.dt-head { max-width: 780px; margin: 0 0 clamp(30px, 2rem + 2vw, 58px); }
.dt-head--center { margin-left: auto; margin-right: auto; text-align: center; max-width: 880px; }
.dt-head--wide { max-width: 980px; }
.dt-head h2 {
  font-size: clamp(1.55rem, 1.32rem + 1.3vw, 2.5rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.dt-head p {
  font-size: clamp(0.95rem, 0.77rem + 0.4vw, 1.06rem);
  line-height: 1.67;
  color: var(--cb-body);
  margin: 0;
}
.dt-head p b { color: var(--cb-ink); font-weight: 600; }
.dt-head--light h2 { color: #fff; }
.dt-head--light p { color: rgba(255, 255, 255, 0.72); }

/* The pink half of a two-tone heading */
.dt-hl { color: var(--cb-pink-2); }
.dt-head--light .dt-hl { color: var(--cb-blush); }

.dt-tag {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--cb-ink);
  margin-bottom: 4px;
}
.dt-tag em { font-style: normal; color: var(--cb-pink-2); }
.dt-tag--light { color: var(--cb-blush); }

.dt-br { display: none; }
@media (min-width: 992px) { .dt-br { display: inline; } }

/* ── BUTTONS ──────────────────────────────────────────────── */
/* Buttons size to their label. A min-width was tried to even them up and it
   just parked the arrow tile in a pocket of empty pink — the short CTA got a
   longer label instead. */
.dt-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--cb-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 12px 12px 12px 20px;
  border-radius: var(--cb-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s, background 0.22s, color 0.22s, border-color 0.22s;
}
.dt-btn__ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  transition: transform 0.22s;
}
.dt-btn__ico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--cb-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-btn:hover .dt-btn__ico { transform: translateX(3px); }

.dt-btn--primary { background: var(--cb-pink); color: #fff; }
.dt-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(228, 0, 107, 0.32); }

.dt-btn--dark { background: var(--cb-dark); color: #fff; }
.dt-btn--dark .dt-btn__ico { background: var(--cb-neon); }
.dt-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(62, 10, 38, 0.3); }

.dt-btn--light { background: #fff; color: var(--cb-ink); }
.dt-btn--light .dt-btn__ico { background: var(--cb-pink); }
.dt-btn--light .dt-btn__ico svg { stroke: #fff; }
.dt-btn--light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18); }

.dt-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.34); padding: 12px 22px; }
.dt-btn--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-2px); }

/* ── HERO ─────────────────────────────────────────────────── */
/* Full-size on roomy screens. On short laptop viewports the hero used to run
   746px tall and push the CTA below the fold, so the compact treatment lives
   in the (max-height: 800px) block near the responsive rules rather than being
   applied to everyone. */
.dt-hero {
  position: relative;
  padding: 128px 0 clamp(38px, 2rem + 2vw, 62px);
  background: #fff;
  overflow: hidden;
}
.dt-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
}
.dt-hero__label {
  display: block;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.32rem);
  font-weight: 600;
  color: var(--cb-ink);
  margin-bottom: 4px;
}
.dt-hero__title {
  font-size: clamp(1.85rem, 1.6rem + 1.9vw, 3.3rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.dt-hero__title .dt-hl { color: var(--cb-pink-2); }
.dt-hero__sub {
  font-size: clamp(0.98rem, 0.85rem + 0.4vw, 1.1rem);
  line-height: 1.7;
  color: var(--cb-body);
  max-width: 560px;
  margin: 0 0 26px;
}

/* Dashed pills — the three USP rows under the hero copy */
.dt-hero__usps { display: grid; gap: 12px; margin: 0 0 30px; max-width: 100%; }
.dt-hero__usps li {
  display: flex;
  align-items: start;
  gap: 6px;
  padding:12px 16px;
  border: 1px dashed #E2CBD8;
  border-radius: 100px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cb-body);
}
.dt-hero__usps li b { color: var(--cb-ink); font-weight: 600; }
.dt-hero__usps svg { width: 20px; height: 20px; flex-shrink: 0; fill: var(--cb-pink); }

.dt-hero__visual { position: relative; display: flex; justify-content: center; }
.dt-hero__img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  height: auto;
}

/* ── DEMO ─────────────────────────────────────────────────── */
/* Tinted so the hero → demo → rank run does not read as one long white block */
.dt-demo { padding: clamp(46px, 2rem + 3vw, 86px) 0; background: var(--cb-soft); text-align: center; }
.dt-demo__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cb-ink);
  margin-bottom: 14px;
}
.dt-demo__pill i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 21px;
  border-radius: 5px;
  background: #E1352C;
}
.dt-demo__pill i::after {
  content: "";
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}
.dt-demo h2 {
  font-size: clamp(1.5rem, 1.32rem + 1.3vw, 2.4rem);
  line-height: 1.24;
  margin: 0 auto clamp(28px, 2rem + 1.6vw, 50px);
  max-width: 760px;
}
.dt-demo__panel {
  position: relative;
  border-radius: var(--cb-radius-card);
  /* Deeper than the blush section behind it, or the panel edge disappears */
  /* background: linear-gradient(150deg, #FBE3EF 0%, #FDECF4 60%, #FFF4F9 100%);
  border: 1px solid rgba(228, 0, 107, 0.1); */
  box-shadow: 0 20px 46px rgba(62, 10, 38, 0.08);
  /* padding: clamp(18px, 1rem + 2vw, 42px); */
  overflow: hidden;
  width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
}
.dt-demo__panel img { display: block; width: 100%; height: auto; border-radius: var(--cb-radius-card); }
.dt-demo__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(84px, 6vw, 118px);
  height: clamp(84px, 6vw, 118px);
  border-radius: 50%;
  background: var(--cb-pink);
  box-shadow: 0 16px 40px rgba(228, 0, 107, 0.35);
  cursor: pointer;
  transition: transform 0.24s;
}
.dt-demo__ring:hover { transform: translate(-50%, -50%) scale(1.06); }
/* Two rings pushing out of the button on a stagger, plus a slow breath on the
   button itself — a static play mark on a still image gave no signal that it
   was clickable. Both pseudo-elements sit under the black play token
   (z-index/pointer-events) so they never eat the click. */
.dt-demo__ring::before,
.dt-demo__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cb-pink);
  pointer-events: none;
  animation: dtRingPulse 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.dt-demo__ring::after { animation-delay: 1.4s; }
.dt-demo__ring span { position: relative; z-index: 1; animation: dtRingBeat 2.8s ease-in-out infinite; }
/* Rings freeze on hover so the scale-up reads as a response, not more motion */
.dt-demo__ring:hover::before,
.dt-demo__ring:hover::after,
.dt-demo__ring:hover span { animation-play-state: paused; }
@keyframes dtRingPulse {
  0% { transform: scale(1); opacity: 0.7; }
  60% { opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes dtRingBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.dt-demo__ring span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: #000;
}
.dt-demo__ring span::after {
  content: "";
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* ── RANK + STATS ─────────────────────────────────────────── */
.dt-rank { padding: clamp(46px, 2rem + 3vw, 86px) 0 0; background: #fff; }
.dt-rank__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 26px;
}
.dt-rank__top h2 { font-size: clamp(1.5rem, 1.32rem + 1.3vw, 2.4rem); line-height: 1.24; margin: 0 0 14px; }
.dt-rank__top p { font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.04rem); line-height: 1.7; margin: 0; }

/* Deep berry, not the old --cb-yellow: the pale yellow was the one colour on
   the page outside the pink/berry system and read as a stray note card. On
   berry it becomes the anchor of the stats row — the gold coins in the art
   stay, so it still reads as money. */
.dt-fund {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(140deg, #4B0F31 0%, var(--cb-dark) 52%, #2C061B 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--cb-radius-card);
  padding: 30px 34px;
  min-height: 168px;
}
.dt-fund::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.3), transparent 68%);
  pointer-events: none;
}
.dt-fund > * { position: relative; z-index: 1; }
.dt-fund strong {
  display: block;
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.24;
}
.dt-fund small { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.66); margin-top: 10px; }
.dt-fund svg { width: clamp(72px, 8vw, 118px); height: auto; flex-shrink: 0; }

/* Three equal cards. The 80+ tile used to be half of a 1.62fr lead block whose
   other half was a photo, which made the row read 1½ + 1 + 1 and left the two
   plain stats looking like an afterthought. Each card now carries an icon and
   the numbers sit on one baseline. */
.dt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: clamp(46px, 2rem + 3vw, 86px); }
.dt-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 30px;
  border-radius: var(--cb-radius-card);
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  min-height: 212px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
}
.dt-stat:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(62, 10, 38, 0.1); border-color: rgba(228, 0, 107, 0.28); }
.dt-stat__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cb-line);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-stat:hover .dt-stat__ico { transform: translateY(-2px) rotate(-5deg); }
.dt-stat__ico svg { width: 25px; height: 25px; fill: none; stroke: var(--cb-pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-stat strong {
  display: block;
  font-size: clamp(2.05rem, 1.4rem + 2vw, 3.3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--cb-dark);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.dt-stat span { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.22rem); line-height: 1.35; color: var(--cb-dark); }

/* The one filled card — the accent of the row */
.dt-stat--fill {
  background: linear-gradient(150deg, var(--cb-pink) 0%, #FF2D86 100%);
  border-color: var(--cb-pink);
  box-shadow: 0 18px 40px rgba(228, 0, 107, 0.22);
}
.dt-stat--fill::before {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 66%);
  pointer-events: none;
}
.dt-stat--fill > * { position: relative; z-index: 1; }
.dt-stat--fill:hover { border-color: var(--cb-pink); box-shadow: 0 26px 54px rgba(228, 0, 107, 0.3); }
.dt-stat--fill .dt-stat__ico { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.26); }
.dt-stat--fill .dt-stat__ico svg { stroke: #fff; }
/* Declared after the two rules above so the white text actually wins */
.dt-stat--fill strong, .dt-stat--fill span { color: #fff; }

/* ── FULL-BLEED BAND ──────────────────────────────────────── */
.dt-band {
  position: relative;
  overflow: hidden;
  background: var(--cb-dark);
  color: #fff;
  padding: clamp(38px, 2rem + 2vw, 62px) 0;
}
/* Warms the flat berry so the band is not one dead rectangle of colour */
.dt-band::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -140px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.3), transparent 66%);
  pointer-events: none;
}
.dt-band > .container { position: relative; z-index: 1; }

/* Proof chips between the heading and the CTA — the copy column was a
   headline floating over empty berry, and these carry claims the page
   already makes elsewhere. */
.dt-band__points { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.dt-band__points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.24s, border-color 0.24s, transform 0.24s;
}
.dt-band__points li:hover { background: rgba(255, 107, 168, 0.14); border-color: rgba(255, 107, 168, 0.34); transform: translateY(-2px); }
.dt-band__points i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(228, 0, 107, 0.34);
  flex-shrink: 0;
}
.dt-band__points i svg { width: 16px; height: 16px; fill: none; stroke: var(--cb-blush); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dt-band__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(26px, 2rem + 2vw, 62px);
  align-items: center;
}
.dt-band__media { border-radius: var(--cb-radius-card); overflow: hidden; }
.dt-band__media img { display: block; width: 100%; height: auto; }
.dt-band__copy h2 {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.28;
  color: #fff;
  margin: 0 0 12px;
}

/* ── MARKET (why build a dating app) ──────────────────────── */
.dt-market__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dt-mcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--cb-radius-card);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cb-line);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s;
}
.dt-mcard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(62, 10, 38, 0.1); }
.dt-mcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 30px;
  background: linear-gradient(120deg, #FDECF4 0%, #F8E4F5 100%);
}
.dt-mcard__top h3 { font-size: 1.14rem; line-height: 1.32; margin: 0; color: var(--cb-dark); }
.dt-mcard__top i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(62, 10, 38, 0.08);
  flex-shrink: 0;
}
.dt-mcard__top i svg { width: 23px; height: 23px; fill: none; stroke: var(--cb-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-mcard p {
  flex: 1;
  margin: 0;
  padding: 24px 26px 28px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cb-body);
  border-left: 1px dashed #DFCFDA;
}
.dt-mcard p b { color: var(--cb-ink); font-weight: 600; }

/* ── PILLARS (seamless / smarter / secure) ──────────────────
   Was: flat blush card, a big pink word, then a pedestal illustration
   parked at the bottom. The illustration carried all the visual weight
   while saying nothing the copy didn't, so the card now leads with a
   gradient icon tile, demotes the lead word to an eyebrow and closes on
   two concrete tags. The ghost index echoes the process panels. */
.dt-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dt-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, var(--cb-soft-2) 100%);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  padding: 32px 28px;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
}
/* Accent rule that draws across the top edge on hover */
.dt-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--cb-pink), var(--cb-neon));
  transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-pillar:hover::before { width: 100%; }
.dt-pillar::after {
  content: attr(data-idx);
  position: absolute;
  top: 4px;
  right: 16px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(243 35 125 / 14%);
  pointer-events: none;
}
.dt-pillar:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(62, 10, 38, 0.1); border-color: rgba(228, 0, 107, 0.3); }
.dt-pillar__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--cb-pink) 0%, #FF3D8A 100%);
  box-shadow: 0 12px 26px rgba(228, 0, 107, 0.26);
  margin-bottom: 20px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-pillar:hover .dt-pillar__ico { transform: translateY(-3px) rotate(-5deg); }
.dt-pillar__ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-pillar__lead { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cb-pink-2); margin-bottom: 8px; }
.dt-pillar h3 { font-size: 1.16rem; font-weight: 600; line-height: 1.36; color: var(--cb-ink); margin: 0 0 12px; }
.dt-pillar p { font-size: 0.9rem; line-height: 1.62; color: var(--cb-body); margin: 0 0 24px; }
.dt-pillar__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.dt-pillar__tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cb-line);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cb-body);
  transition: border-color 0.24s, color 0.24s;
}
.dt-pillar__tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cb-pink); flex-shrink: 0; }
.dt-pillar:hover .dt-pillar__tags li { border-color: rgba(228, 0, 107, 0.28); color: var(--cb-ink); }

/* ── SOLUTIONS (dark cards) ───────────────────────────────── */
/* The photo used to sit inset on all four sides, which read as a picture
   dropped onto the card rather than part of it, and the icon tile was a
   translucent blush square that all but vanished against the berry. The
   photo now runs to the card edge under a scrim, and the tile carries the
   same pink gradient as the pillar cards. */
.dt-sol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dt-sol {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(158deg, #4B0F31 0%, var(--cb-dark) 46%, #2C061B 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--cb-radius-card);
  padding:24px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
}
/* Bloom behind the icon corner so the fill is not one flat berry rectangle */
.dt-sol::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.32), transparent 68%);
  pointer-events: none;
}
.dt-sol > * { position: relative; z-index: 1; }
.dt-sol:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(46, 6, 28, 0.28); border-color: rgba(255, 107, 168, 0.28); }

/* Icon and title on one line — stacked, the 42px tile burned a whole row of
   vertical space and pushed the photo down. */
.dt-sol__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.dt-sol__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--cb-pink) 0%, #FF3D8A 100%);
  box-shadow: 0 12px 26px rgba(228, 0, 107, 0.3);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-sol:hover .dt-sol__ico { transform: translateY(-2px) rotate(-5deg); }
.dt-sol__ico svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-sol h3 { font-size: 1.2rem; line-height: 1.3; color: #fff; margin: 0; }
.dt-sol p { font-size: 0.9rem; line-height: 1.62; color: rgba(255, 255, 255, 0.72); margin: 0 0 26px; }
/* margin-top:auto pins the photo to the bottom so cards with shorter copy
   still line their images up across the row */
.dt-sol figure { position: relative; margin:0; overflow: hidden; border-radius: var(--cb-radius-card); margin-top:auto; }
.dt-sol figure::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 90px;
  background: linear-gradient(180deg, rgba(53, 8, 33, 0.92) 0%, rgba(53, 8, 33, 0.42) 42%, transparent 100%);
  pointer-events: none;
  display: none;
}
.dt-sol figure img { display: block; width: 100%; height: 320px; object-fit: cover; object-position: top; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.dt-sol:hover figure img { transform: scale(1.05); }

/* ── IDEA STRIP ───────────────────────────────────────────── */
.dt-idea__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.46fr 1fr;
  gap: clamp(24px, 2rem + 2vw, 54px);
  align-items: center;
  /* White, not --cb-soft-2: the strip now sits on a --soft section and the two
     blush tones were close enough that the card lost its edge entirely. */
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  padding: 0;   /* the media panel bleeds to the card edge */
}
/* The device art floated on white and read as a screenshot pasted onto the
   card; it now sits on its own tinted panel that runs to three card edges. */
.dt-idea__media {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: clamp(26px, 1.4rem + 2vw, 44px);
  background: linear-gradient(150deg, #FDECF4 0%, #FBE3EF 54%, #F6E2F3 100%);
}
.dt-idea__media::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -70px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.14), transparent 68%);
  pointer-events: none;
}
/* The asset ships on a white background, so it is framed as a floating
   screenshot rather than left as a bare white block on the tint. */
.dt-idea__media img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(62, 10, 38, 0.14);
}
.dt-idea__copy { padding: clamp(30px, 1.6rem + 2vw, 48px) clamp(30px, 1.6rem + 2vw, 48px) clamp(30px, 1.6rem + 2vw, 48px) 0; }
.dt-idea__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cb-pink);
  background: var(--cb-tint);
  border: 1px solid rgba(228, 0, 107, 0.16);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.dt-idea__tag svg { width: 14px; height: 14px; fill: none; stroke: var(--cb-pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-idea__copy h2 { font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); line-height: 1.26; margin: 0 0 12px; }
.dt-idea__copy p { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.04rem); line-height: 1.7; margin: 0 0 26px; max-width: 60ch; }
/* Button plus reassurance on one line — the space to the right of the CTA was
   the emptiest part of the card. */
.dt-idea__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.dt-idea__notes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.dt-idea__notes li { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 500; color: var(--cb-body); }
.dt-idea__notes li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(228, 0, 107, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4006B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── SERVICES (charcoal band) ─────────────────────────────── */
.dt-services { background: var(--cb-slate); padding: clamp(54px, 2.6rem + 3vw, 94px) 0; }
.dt-services .dt-head h2 { color: #fff; }
.dt-services .dt-head p { color: rgba(255, 255, 255, 0.62); }
.dt-serv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 2rem + 2vw, 54px) 40px; }
.dt-serv__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}
.dt-serv__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--cb-blush); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt-serv h3 { font-size: 1.3rem; line-height: 1.3; color: #fff; margin: 0 0 12px; }
.dt-serv p { font-size: 0.88rem; line-height: 1.66; color: rgba(255, 255, 255, 0.6); margin: 0; }

/* ── FEATURES (sticky head + card/art rows) ───────────────── */
.dt-features__grid { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: clamp(24px, 2rem + 2vw, 50px); align-items: start; }
.dt-features__head { position: sticky; top: 108px; }
/* Narrower column than the other section heads, so the scale tops out lower —
   at 2.4rem "Power Your Dating App" alone spilled onto two lines. */
.dt-features__head h2 { font-size: clamp(1.42rem, 1.1rem + 1.05vw, 2.05rem); line-height: 1.26; margin: 0 0 14px; }
.dt-features__head p { font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.04rem); line-height: 1.7; margin: 0; }
.dt-features__list { display: grid; gap: 26px; }
.dt-feat { display: grid; grid-template-columns: 1fr 0.78fr; gap: 22px; align-items: stretch; }
.dt-feat__copy {
  display: flex;
  flex-direction: column;
  background: var(--cb-soft-2);
  border-radius: var(--cb-radius-card);
  padding: 26px 28px;
  min-height: 216px;
  transition: background 0.28s;
}
.dt-feat:hover .dt-feat__copy { background: #F0E7ED; }
.dt-feat h3 { font-size: 1.26rem; line-height: 1.32; margin: 0 0 10px; }
.dt-feat p { font-size: 0.9rem; line-height: 1.62; margin: 0 0 20px; color: var(--cb-body); }
.dt-feat p b { color: var(--cb-pink); font-weight: 500; }
.dt-feat__go {
  margin-top: auto;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cb-pink);
  transition: transform 0.24s;
}
.dt-feat__go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dt-feat__go:hover { transform: translateX(4px); }
.dt-feat figure {
  margin: 0;
  border-radius: var(--cb-radius-card);
  overflow: hidden;
  background:#ffffff;
  display: grid;
  place-items: center;
  padding: 0px;
  border:1px solid var(--cb-line);
}
.dt-feat figure img { display: block; width: 100%; height: auto;height: 230px; object-fit: contain; object-position: top; }

/* ── COMPARISON TABLE ─────────────────────────────────────── */
.dt-compare__grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(24px, 2rem + 2vw, 46px); align-items: start; }
.dt-compare__head { position: sticky; top: 108px; }
.dt-compare__head h2 { font-size: clamp(1.5rem, 1.32rem + 1.3vw, 2.4rem); line-height: 1.24; margin: 0 0 14px; }
.dt-compare__head p { font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.04rem); line-height: 1.7; margin: 0; }
.dt-compare__head p b { color: var(--cb-pink); font-weight: 500; }

/* The OnGraph column used to be marked only by a 1.5px pink outline, which
   read as a stray rectangle floating over the table. It is now a capped,
   filled column: a gradient header sits flush on the body and names it, and
   the ticks inside are solid rather than tinted. */
.dt-table__cols { display: grid; grid-template-columns: 1fr 150px 150px; align-items: end; }
.dt-table__cols > span { text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--cb-ink); padding-bottom: 14px; }
.dt-table__cols > span:first-child { text-align: left; }
/* Gradient cap — no bottom padding so it docks onto the table body */
.dt-table__us {
  display: grid;
  gap: 1px;
  padding: 11px 8px 13px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(150deg, var(--cb-pink) 0%, #FF2D86 100%);
  color: #fff;
  box-shadow: 0 -8px 22px rgba(228, 0, 107, 0.2);
}
.dt-table__cols > span.dt-table__us { padding-bottom: 13px; color: #fff; }
.dt-table__us em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.dt-table__body { border: 1px solid var(--cb-line); border-radius: var(--cb-radius-card); background: #fff; overflow: hidden; }
.dt-row { display: grid; grid-template-columns: 1fr 150px 150px; align-items: stretch; border-bottom: 1px dashed var(--cb-line); transition: background 0.22s; }
.dt-row:last-child { border-bottom: 0; }
.dt-row:hover { background: #FCFAFC; }
.dt-row__copy { display: flex; gap: 16px; padding: 22px 24px; }
.dt-row__copy i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cb-soft);
  flex-shrink: 0;
}
.dt-row__copy i svg { width: 19px; height: 19px; fill: none; stroke: var(--cb-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dt-row__copy h3 { font-size: 1rem; margin: 0 0 5px; }
.dt-row__copy p { font-size: 0.85rem; line-height: 1.55; margin: 0; color: var(--cb-body); }
.dt-cell { display: grid; place-items: center; padding: 22px 0; }
/* Continuous tinted strip; the cap above supplies the top edge and radius */
.dt-cell--us {
  background: linear-gradient(180deg, #FFEFF6 0%, #FEF6FA 100%);
  border-left: 1.5px solid rgba(228, 0, 107, 0.55);
  border-right: 1.5px solid rgba(228, 0, 107, 0.55);
}
.dt-row:last-child .dt-cell--us { border-bottom: 1.5px solid rgba(228, 0, 107, 0.55); border-radius: 0 0 12px 12px; }
.dt-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
/* Solid, not a 12% tint — the winning column should be unmistakable */
.dt-mark--yes { background: linear-gradient(150deg, var(--cb-pink) 0%, #FF2D86 100%); box-shadow: 0 6px 14px rgba(228, 0, 107, 0.3); }
.dt-mark--no { background: #EDF0F3; }
.dt-mark svg { width: 18px; height: 18px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dt-mark--yes svg { stroke: #fff; }
.dt-mark--no svg { stroke: #A2ACB6; }

/* ── PROCESS (vertical tabs) ──────────────────────────────────
   The rail used to be tucked under the stage panel by a -34px margin,
   which read as clipping rather than as an overlap, and the six pills
   gave no sense of order. It is now a timeline: a connector line threads
   the icon tokens, each pill carries its own number plus a one-line
   descriptor, and the active one points into the panel so the
   tab-to-content link is explicit. The CTA and the prev/next controls
   live once in the stage foot instead of being repeated in all six
   panels — the stage keeps a fixed action row while only the copy swaps. */
.dt-process__grid { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: stretch; }

/* 1fr rows: the six pills divide the full column height, so the rail ends
   level with the stage instead of stopping a couple of hundred pixels short.
   The 10px gap is kept fixed because the connector segments are drawn to it. */
.dt-steps { display: grid; grid-auto-rows: 1fr; gap: 10px; position: relative; z-index: 2; counter-reset: dtstep; }

.dt-step {
  position: relative;
  counter-increment: dtstep;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  font-family: var(--cb-font);
  color: var(--cb-ink);
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  padding: 11px 16px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(62, 10, 38, 0.06);
  transition: background 0.24s, color 0.24s, border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}
/* Two-line label: the pills were 60% empty space with the name alone,
   and the name on its own never said what the step actually delivers. */
.dt-step__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt-step__txt b { font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
.dt-step__txt small { font-size: 0.73rem; font-weight: 500; line-height: 1.3; color: var(--cb-muted); transition: color 0.24s; }

/* Chevron badge — hangs on .dt-step__txt::after because both pseudos on
   .dt-step itself are taken (::before = connector, ::after = step number).
   Hidden by default, previewed at low opacity on hover, and on the active
   pill it sits in the 27px overhang so the tab visibly points into the
   stage instead of relying on the docked edge alone. */
.dt-step__txt::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(228, 0, 107, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4006B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(-7px, -50%);
  transition: opacity 0.24s, transform 0.24s;
  pointer-events: none;
}
/* Preview on hover: the number slides left to clear the badge */
.dt-step:hover:not(.is-active) .dt-step__txt::after { opacity: 0.5; transform: translate(0, -50%); }
.dt-step:hover:not(.is-active)::after { margin-right: 32px; }
/* The bare 22px glyph read as an afterthought; a token anchors it to the line */
.dt-step svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cb-tint);
  fill: none;
  stroke: var(--cb-pink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background 0.24s, stroke 0.24s;
}
/* Step ordinal, right-aligned so it never crowds the icon or the label */
.dt-step::after {
  content: counter(dtstep, decimal-leading-zero);
  margin-left: auto;
  padding-left: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--cb-muted);
  transition: color 0.24s, margin-right 0.24s;
}
.dt-step:hover { transform: translateX(3px); border-color: rgba(228, 0, 107, 0.4); box-shadow: 0 12px 26px rgba(62, 10, 38, 0.1); }

/* Pink, not --cb-dark: the berry pill sat against the charcoal stage panel and
   the two read as one block, losing the pill's edge entirely. */
.dt-step.is-active {
  background: linear-gradient(120deg, var(--cb-pink) 0%, #FF2D86 100%);
  border-color: var(--cb-pink);
  color: #fff;
  box-shadow: 0 14px 30px rgba(228, 0, 107, 0.32);
}
.dt-step.is-active svg { background: rgba(255, 255, 255, 0.22); stroke: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.dt-step.is-active::after { color: rgba(255, 255, 255, 0.72); }
.dt-step.is-active .dt-step__txt small { color: rgba(255, 255, 255, 0.78); }
/* White on the pink pill, and it nudges toward the panel it opens */
.dt-step.is-active .dt-step__txt::after {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  animation: dtNudge 1.9s ease-in-out infinite;
}
@keyframes dtNudge {
  0%, 100% { transform: translate(0, -50%); }
  50% { transform: translate(4px, -50%); }
}
/* Same width as every other pill — the active one used to stretch across the
   gutter to dock onto the stage, which left the rail visibly ragged. It is now
   carried by colour, the ring and the chevron instead of by size. */
.dt-step.is-active { width: 100%; }
/* Ordinal steps aside for the chevron, exactly as it does on hover */
.dt-step.is-active::after { margin-right: 32px; }

/* Connector segments, drawn per step so the run above the current one can be
   filled in — it reads as "you are here" rather than as decoration. */
.dt-step::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 100%;
  width: 2px;
  height: 10px;
  background: var(--cb-line);
  transition: background 0.24s;
}
.dt-step:last-child::before { display: none; }
.dt-step:has(~ .dt-step.is-active)::before { background: var(--cb-pink); }
/* Every step before the active one also carries a filled token */
.dt-step:has(~ .dt-step.is-active) svg { background: rgba(228, 0, 107, 0.16); }
.dt-step:has(~ .dt-step.is-active)::after { color: var(--cb-pink); }

.dt-process__stage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(152deg, #352C3B 0%, #2B2430 46%, #221B27 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--cb-radius-card);
  padding: clamp(30px, 2rem + 2vw, 52px) clamp(26px, 2rem + 2vw, 50px);
  box-shadow: 0 26px 60px rgba(62, 10, 38, 0.16);
}
/* Warms the flat charcoal and pulls the eye to the step heading */
.dt-process__stage::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -110px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 107, 0.26), transparent 68%);
  pointer-events: none;
}
/* Second, cooler bloom so the lower half of a tall panel isn't dead charcoal */
.dt-process__stage::after {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -170px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 168, 0.13), transparent 70%);
  pointer-events: none;
}
.dt-process__stage > * { position: relative; z-index: 1; }
.dt-panel { display: none; }
.dt-panel.is-active { display: block; animation: dtFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dtFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The six process panels all sit in the same grid cell rather than being
   display:none'd, so the stage is always as tall as its longest step. Without
   this the stage resized on every tab click and the stretched rail resized
   with it. Scoped to [data-step] — the tech-stack tabs share .dt-panel and
   still use the plain show/hide above. */
.dt-process__stage { display: grid; align-content: start; }
.dt-process__stage > .dt-panel[data-step] {
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;   /* also drops it from the tab order and a11y tree */
  opacity: 0;
}
.dt-process__stage > .dt-panel[data-step].is-active { visibility: visible; opacity: 1; }

/* Oversized ghost ordinal. z-index:-1 keeps it inside the panel's own
   stacking context, i.e. behind the copy but still over the stage fill. */
.dt-panel[data-step].is-active::before {
  content: attr(data-step);
  position: absolute;
  top: -50px;
  right: -12px;
  font-size: clamp(104px, 11vw, 100px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color:rgb(0 0 0 / 28%);
  pointer-events: none;
  z-index: -1;
  
}

/* Badge, not loose text — the eyebrow now reads as the step marker it is */
.dt-panel__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-blush);
  background: rgba(228, 0, 107, 0.18);
  border: 1px solid rgba(255, 107, 168, 0.26);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.dt-panel__num em { font-style: normal; color: rgba(255, 255, 255, 0.4); }
.dt-panel h3 { font-size: clamp(1.22rem, 1rem + 1vw, 1.75rem); line-height: 1.3; color: #fff; margin: 0 0 14px; max-width: 90%; }
.dt-panel > p { font-size: 0.96rem; line-height: 1.75; color: rgba(255, 255, 255, 0.68); margin: 0 0 24px; max-width: 62ch; }
.dt-panel > p b { color: #fff; font-weight: 600; }
/* Names the chips below, so they stop reading as four stray tags */
.dt-panel__lbl {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 14px;
}
.dt-panel__lbl::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent); }
.dt-panel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.dt-panel__list li {
  position: relative;
  padding: 11px 16px 11px 46px;
  border-radius: var(--cb-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.24s, border-color 0.24s, transform 0.24s;
}
/* Tick sits in its own token — a bare stroke floated in the padding */
.dt-panel__list li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(255, 107, 168, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6BA8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.24s;
}
.dt-panel__list li:hover { background: rgba(255, 107, 168, 0.12); border-color: rgba(255, 107, 168, 0.3); transform: translateX(3px); }
.dt-panel__list li:hover::before { background-color: rgba(255, 107, 168, 0.3); }

/* ── Stage foot: one CTA + step pager for all six panels ─────── */
.dt-stage__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.dt-stage__nav { display: flex; align-items: center; gap: 14px; }
.dt-stage__nav .dt-prog { width: 96px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); overflow: hidden; }
.dt-stage__nav .dt-prog i { display: block; height: 100%; width: 16.6667%; border-radius: 999px; background: linear-gradient(90deg, var(--cb-pink), var(--cb-neon)); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dt-navbtn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, opacity 0.22s;
}
.dt-navbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dt-navbtn:hover:not(:disabled) { background: var(--cb-pink); border-color: var(--cb-pink); transform: translateY(-2px); }
.dt-navbtn:disabled { opacity: 0.28; cursor: default; }

/* ── REVENUE ──────────────────────────────────────────────── */
.dt-rev__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dt-rev {
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  padding: 30px 26px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
}
.dt-rev:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(62, 10, 38, 0.1); border-color: rgba(228, 0, 107, 0.3); }
.dt-rev__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--cb-tint);
  margin-bottom: 18px;
}
.dt-rev__ico svg { width: 24px; height: 24px; fill: none; stroke: var(--cb-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dt-rev h3 { font-size: 1.1rem; margin: 0 0 10px; }
.dt-rev p { font-size: 0.88rem; line-height: 1.66; margin: 0; color: var(--cb-body); }

/* ── TECH STACK (tabs) ────────────────────────────────────── */
/* Its own band. Sitting on plain white between two white sections, the block
   read as a stray row of boxes with no section around them. */
.dt-tech { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #FDF3F8 38%, #FCF0F6 100%); }
.dt-tech::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  width: 980px;
  height: 980px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(228, 0, 107, 0.10), transparent 62%);
  pointer-events: none;
  display: none;
}
.dt-tech > .container { position: relative; z-index: 1; }
/* Narrower than the page rails: 1400px stretched six tiles into letterboxes */
.dt-tech__wrap { max-width: 1180px; margin: 0 auto; }

/* One segmented control instead of four loose pills — the categories read as
   a switch, and the active tab has a track to sit in. */
.dt-tabs__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  padding: 6px;
  margin: 0 0 18px;
  box-shadow: 0 14px 34px rgba(62, 10, 38, 0.06);
}
.dt-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: var(--cb-font);
  color: var(--cb-ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.24s, color 0.24s, box-shadow 0.24s;
}
/* Two-line label: the descriptor says what the tab actually covers, so the
   nav carries information instead of four bare category words. */
.dt-tab > span { display: flex; flex-direction: column; gap: 2px; font-size: 0.94rem; font-weight: 600; line-height: 1.25; }
.dt-tab em { font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--cb-muted); }
.dt-tab svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--cb-pink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.24s; }
.dt-tab:hover { background: var(--cb-tint); }
.dt-tab.is-active { background: var(--cb-dark); color: #fff; box-shadow: 0 12px 24px rgba(62, 10, 38, 0.22); }
.dt-tab.is-active em { color: rgba(255, 255, 255, 0.58); }
.dt-tab.is-active svg { stroke: var(--cb-neon); }

/* White card on the tinted band — the inverse of the old soft-on-white, so
   the panel now reads as the surface and the tiles as objects on it. */
.dt-tech__panels {
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  padding: clamp(24px, 1.5rem + 1.6vw, 34px);
  box-shadow: 0 18px 44px rgba(62, 10, 38, 0.06);
}
/* Scoped past `.dt-panel > p`, which is written for the dark process stage
   and would paint this lead white on white. */
.dt-tech__panels .dt-tech__lead {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--cb-body);
  max-width: 96ch;
  margin: 0 0 22px;
  padding: 0 0 20px;
  border-bottom: 1px dashed var(--cb-line);
}
.dt-tech__panels .dt-tech__lead b { color: var(--cb-ink); font-weight: 600; }

/* 3 × 2 rather than 6 × 1: six names in one row left every tile a letterbox
   with no room for the line that says what we use it for. */
.dt-chipwrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dt-chipwrap span {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-content: center;
  overflow: hidden;
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  padding: 15px 18px;
  transition: transform 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
/* The one place a tech's own colour reaches the card edge — kept to a hover
   hairline so six brand colours never fight the pink at rest. */
.dt-chipwrap span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c, var(--cb-pink));
  opacity: 0;
  transition: opacity 0.22s;
}
/* Monogram tile tinted from the tech's own --c, set inline per chip */
.dt-chipwrap span i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c, var(--cb-pink));
  border: 1px solid transparent;
  background: var(--cb-tint);
  background: color-mix(in srgb, var(--c, #E4006B) 13%, #fff);
  border-color: color-mix(in srgb, var(--c, #E4006B) 20%, #fff);
}
.dt-chipwrap span b { grid-column: 2; align-self: end; font-size: 0.97rem; font-weight: 600; line-height: 1.2; color: var(--cb-ink); }
.dt-chipwrap span small { grid-column: 2; align-self: start; margin-top: 4px; font-size: 0.78rem; line-height: 1.35; color: var(--cb-muted); }
.dt-chipwrap span:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: color-mix(in srgb, var(--c, #E4006B) 34%, #fff);
  box-shadow: 0 16px 32px rgba(62, 10, 38, 0.10);
}

/* Closes the block with the answer to "so which of these do I get?" */
.dt-tech__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cb-body);
}
/* The sentence and its link share one wrapper, so a wrap keeps the shield
   pinned beside the copy instead of stranding it on a line of its own. */
.dt-tech__note > span { flex: 1; }
.dt-tech__note > svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; fill: none; stroke: var(--cb-pink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dt-tech__note a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cb-pink); text-decoration: none; }
.dt-tech__note a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s; }
.dt-tech__note a:hover { color: var(--cb-pink-2); }
.dt-tech__note a:hover svg { transform: translateX(3px); }

/* Tech-stack breakpoints. The shared 640px block later in this sheet drops
   .dt-chipwrap to a single column and still wins over these. */
@media (max-width: 1080px) {
  .dt-tabs__nav { grid-template-columns: repeat(2, 1fr); }
  .dt-chipwrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dt-tabs__nav { grid-template-columns: 1fr; border-radius: 12px; }
  .dt-tab { padding: 12px 14px; }
  .dt-tech__note { align-items: flex-start; }
  .dt-band__points li{
    width: 100%;
  }

  .dt-stat{
    gap: 16px;
    padding: 24px;
  }

  .dt-fund{
    min-height: initial;
        gap: 16px;
    padding:24px;
  }

  .dt-idea__cta{
    width: 100%;

  }

  .dt-idea__copy{
    padding: 24px;
  }
}

/* ── AWARDS ───────────────────────────────────────────────── */
.dt-awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dt-award {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  padding: 24px 26px;
  transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
}
.dt-award:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(62, 10, 38, 0.1); border-color: rgba(228, 0, 107, 0.3); }
.dt-award i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cb-tint);
  flex-shrink: 0;
}
.dt-award i svg { width: 26px; height: 26px; fill: none; stroke: var(--cb-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dt-award strong { display: block; font-size: 0.96rem; font-weight: 600; color: var(--cb-ink); line-height: 1.4; }
.dt-award small { display: block; font-size: 0.83rem; color: var(--cb-pink); margin-top: 3px; }

/* ── CLIENT LOGOS ─────────────────────────────────────────── */
.dt-clients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--cb-line);
  border-right: 0;
  border-bottom: 0;
  background: #fff;
  border-radius: var(--cb-radius-card);
  overflow: hidden;
}
.dt-clients__grid li {
  display: grid;
  place-items: center;
  height: 124px;
  padding: 20px;
  border-right: 1px solid var(--cb-line);
  border-bottom: 1px solid var(--cb-line);
  transition: background 0.24s;
}
.dt-clients__grid li:hover { background: var(--cb-soft); }
.dt-clients__grid img { max-width: min(140px, 100%); max-height: 52px; width: auto; height: auto; object-fit: contain; transition: transform 0.4s; }
.dt-clients__grid li:hover img { transform: scale(1.05); }

/* ── FAQ ──────────────────────────────────────────────────── */
.dt-faq__list { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 22px; }
.dt-faq__col { display: flex; flex-direction: column; gap: 16px; }
.dt-faq__item {
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-card);
  overflow: hidden;
  transition: border-color 0.26s, box-shadow 0.26s;
}
.dt-faq__item[open] { border-color: rgba(228, 0, 107, 0.36); box-shadow: 0 16px 38px rgba(62, 10, 38, 0.08); }
.dt-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--cb-ink);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color 0.22s;
}
.dt-faq__item summary::-webkit-details-marker { display: none; }
.dt-faq__item summary:hover { color: var(--cb-pink); }
.dt-faq__sign {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cb-tint);
  transition: background 0.26s;
}
.dt-faq__sign::before, .dt-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cb-pink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.26s;
}
.dt-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.dt-faq__item[open] .dt-faq__sign { background: var(--cb-pink); }
.dt-faq__item[open] .dt-faq__sign::before,
.dt-faq__item[open] .dt-faq__sign::after { background: #fff; }
.dt-faq__item[open] .dt-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Height is animated from js/dating.js. Padding lives on the children so the
   body can actually collapse to 0 without a jump at the end of the close. */
.dt-faq__body { padding: 0; overflow: hidden; transition: height 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.dt-faq__body > * { padding: 0 24px; margin: 0; }
.dt-faq__body > *:last-child { padding-bottom: 22px; }
.dt-faq__body p { font-size: 0.94rem; line-height: 1.78; color: var(--cb-body); }
.dt-faq__body b { color: var(--cb-ink); font-weight: 600; }

/* ── FINAL CTA ────────────────────────────────────────────── */
.dt-final {
  position: relative;
  background: linear-gradient(140deg, #4A0D2E 0%, #2E061C 62%, #280519 100%);
  padding: clamp(54px, 2.6rem + 3vw, 94px) 0;
  overflow: hidden;
}
.dt-final::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 168, 0.16), transparent 68%);
  top: -180px;
  right: -100px;
  pointer-events: none;
}
.dt-final__inner { position: relative; z-index: 1; text-align: center; max-width: 820px; margin: 0 auto; }
.dt-final h2 { font-size: clamp(1.55rem, 1rem + 2vw, 2.55rem); line-height: 1.24; color: #fff; margin: 8px 0 14px; }
.dt-final__inner > p { font-size: clamp(0.98rem, 0.85rem + 0.4vw, 1.08rem); line-height: 1.72; color: rgba(255, 255, 255, 0.74); margin: 0 auto 30px; max-width: 660px; }
.dt-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 30px; }
.dt-final__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.dt-final__points li { position: relative; padding-left: 24px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.dt-final__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6BA8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ── FOOTER TINT (base .footer-min) ───────────────────────── */
.footer-min { background: var(--cb-soft); border-top-color: var(--cb-line); }
.footer-copy span { color: var(--cb-pink); }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.09s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.27s; }

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

/* Short viewports only — 768p and 900p laptops, where the full-size hero runs
   746px and buries the CTA. A 1080p desktop (~900px of viewport) is above the
   threshold and keeps the hero at full size. Gated on min-width so the tablet
   and phone layouts, which are short but stack, are left to their own rules. */
@media (min-width: 1025px) and (max-height: 800px) {
  .dt-hero { padding: clamp(96px, 5.5rem + 1vw, 112px) 0 clamp(34px, 1.6rem + 2vw, 54px); }
  .dt-hero__title { font-size: clamp(1.85rem, 1.6rem + 1.75vw, 3.05rem); line-height: 1.16; margin: 0 0 14px; }
  /* Wider measure drops the paragraph and each USP pill to fewer lines */
  .dt-hero__sub { max-width: 620px; margin: 0 0 22px; }
  .dt-hero__usps { gap: 10px; margin: 0 0 24px; max-width: 100%; }
  .dt-hero__usps li { padding: 9px 18px; }
  /* Stops the artwork from setting the fold */
  .dt-hero__img { max-height: clamp(340px, 70vh, 480px); object-fit: contain; }
}

@media (max-width: 1200px) {
  .dt-features__grid { grid-template-columns: 1fr; }
  .dt-features__head { position: static; }
  .dt-compare__grid { grid-template-columns: 1fr; }
  .dt-compare__head { position: static; }
  .dt-process__grid { grid-template-columns: 278px 1fr; }
}

@media (max-width: 1024px) {
  .dt-hero { padding-top: 112px; }
  .dt-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .dt-hero__visual { order: -1; }
  .dt-hero__img { max-width: 520px; }
  /* Centred once stacked. The copy kept the left rail it needs beside the
     artwork, so on a tablet the block sat off-axis under centred art. */
  .dt-hero__copy { text-align: center; }
  .dt-hero__sub, .dt-hero__usps { margin-left: auto; margin-right: auto; }
  .dt-hero__usps li { justify-content: center; text-align: left; }
  .dt-rank__top { grid-template-columns: 1fr; }
  /* Two-up on tablets. These two went straight from three columns to one,
     unlike every other 3-col grid here, so a 25-word card stretched the full
     768px and the section read as a stack of near-empty bands. */
  .dt-market__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-serv__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-chipwrap { grid-template-columns: repeat(2, 1fr); }
  .dt-rev__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-awards__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked: the tinted panel becomes the card's header strip */
  .dt-idea__inner { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .dt-idea__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(28px, 1.6rem + 2vw, 44px);
  }
  .dt-idea__cta { justify-content: center; }
  .dt-idea__notes { justify-content: center; }
  /* Same as the hero: art and copy centre on the stacked axis instead of
     both hugging the left edge of a full-width berry band. */
  .dt-band__grid { grid-template-columns: 1fr; justify-items: center; }
  .dt-band__media { max-width: 420px; }
  .dt-band__copy { text-align: center; max-width: 640px; }
  .dt-band__points { justify-content: center; }
  .dt-process__grid { grid-template-columns: 1fr; }
  /* 3 across × 2 rows — six steps fill both rows exactly, no ragged tail */
  .dt-steps { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
  .dt-step { justify-content: flex-start; }
  .dt-step::before { display: none; }
  /* Three across leaves no room for the descriptor line or the chevron;
     with the badge gone the ordinal returns to the pill edge. */
  .dt-step__txt small { display: none; }
  .dt-step__txt::after { display: none; }
  .dt-step:hover:not(.is-active)::after,
  .dt-step.is-active::after { margin-right: 0; }
  .dt-process__stage { padding: clamp(26px, 2rem + 2vw, 44px); }
  .dt-panel h3 { max-width: 100%; }
  .dt-faq__list { grid-template-columns: 1fr; max-width: 820px; }
}

@media (max-width: 860px) {
  .dt-sol__grid { grid-template-columns: 1fr; }
  /* Stays two-up on tablets. Stacking here split every feature into a tall
     copy card with an empty bottom half plus a 230px white panel holding a
     small piece of art — two disconnected boxes where the pair still fits
     side by side. It stacks at 640 instead, as one merged card. */
  .dt-feat { gap: 16px; }
  .dt-feat__copy { padding: 22px 20px; min-height: 200px; }
  .dt-feat h3 { font-size: 1.14rem; }
  .dt-feat figure img { height: 200px; }
  .dt-panel__list { grid-template-columns: 1fr; }
  /* 118px, not 92px: "OnGraph" is ~94px on its own, so the gradient cap was
     wider than its column and collided with the label beside it. */
  .dt-table__cols, .dt-row { grid-template-columns: 1fr 118px 118px; }
  .dt-table__cols > span { font-size: 0.8rem; line-height: 1.25; padding-bottom: 12px; }
  .dt-table__us { padding: 10px 6px 11px; }
  .dt-table__cols > span.dt-table__us { padding-bottom: 11px; }
  /* 106px is too narrow for the sub-label */
  .dt-table__us em { display: none; }
}

/* Ten logos: 5 across (2 full rows) down to 700px, then 2 across (5 full rows).
   The 4- and 3-column steps in between left a half-empty trailing row. */
@media (max-width: 900px) {
  .dt-clients__grid li { padding: 14px; height: 108px; }
}
@media (max-width: 700px) {
  .dt-clients__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .dt-hero { padding-top: 100px; }
  .dt-hero__usps li { font-size: 0.86rem; padding: 10px 16px; border-radius: 14px; }
  .dt-stats { grid-template-columns: 1fr; }
  .dt-stat { min-height: 0; }
  .dt-fund { flex-direction: column; align-items: flex-start; }
  .dt-serv__grid { grid-template-columns: 1fr; }
  /* Six services in one column on charcoal ran together as a single wall */
  .dt-serv { padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .dt-serv:last-child { padding-bottom: 0; border-bottom: 0; }
  .dt-market__grid { grid-template-columns: 1fr; }
  .dt-pillars__grid { grid-template-columns: 1fr; }
  .dt-chipwrap { grid-template-columns: 1fr; }
  .dt-rev__grid { grid-template-columns: 1fr; }
  .dt-awards__grid { grid-template-columns: 1fr; }
  .dt-clients__grid { grid-template-columns: repeat(2, 1fr); }
  .dt-clients__grid li { height: 100px; }
  .dt-mcard p { border-left: 0; border-top: 1px dashed #DFCFDA; }
  /* One card per feature, not two. Copy and art are stacked inside a single
     surface — a tinted copy block over a white media strip — so the pair
     still reads as one object once the columns collapse. */
  .dt-feat {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--cb-soft-2);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius-card);
    overflow: hidden;
  }
  .dt-feat__copy,
  .dt-feat:hover .dt-feat__copy { background: transparent; }
  .dt-feat__copy { min-height: 0; border-radius: 0; padding: 22px 20px 18px; }
  .dt-feat p { margin-bottom: 0; }
  /* No empty card bottom to park against, so it follows the copy */
  .dt-feat__go { margin-top: 14px; }
  .dt-feat figure { border: 0; border-radius: 0; border-top: 1px solid var(--cb-line); padding: 16px 20px; }
  .dt-feat figure img { height: 190px; max-width: 380px; margin: 0 auto; }
  /* Stacked comparison rows. Three columns left the copy ~150px wide and the
     descriptions wrapped to three or four words a line; the copy now spans the
     row and the two verdicts sit beneath it, each carrying its own label since
     the column header is gone. */
  .dt-table__cols { display: none; }
  .dt-row { grid-template-columns: 1fr 1fr; }
  .dt-row__copy { grid-column: 1 / -1; padding: 18px 18px 4px; gap: 12px; }
  .dt-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 0 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cb-muted);
  }
  .dt-cell::before { content: "Other Solutions"; }
  .dt-cell--us {
    border: 0;
    border-radius: 10px;
    margin: 0 10px 12px;
    padding: 10px 0;
    color: var(--cb-pink);
  }
  .dt-cell--us::before { content: "OnGraph"; }
  .dt-row:last-child .dt-cell--us { border: 0; border-radius: 10px; }
  .dt-mark { width: 28px; height: 28px; }
  .dt-mark svg { width: 15px; height: 15px; }
  .dt-steps { grid-template-columns: repeat(2, 1fr); }
  .dt-step { padding: 11px 14px; gap: 10px; }
  .dt-step__txt b { font-size: 0.88rem; }
  .dt-panel[data-step].is-active::before { font-size: 88px; top: -30px; right: -6px; }
  .dt-stage__foot { flex-direction: column; align-items: stretch; }
  .dt-stage__foot .dt-btn { justify-content: center; }
  .dt-stage__nav { justify-content: space-between; }
  .dt-faq__item summary { font-size: 0.95rem; padding: 18px; }
  .dt-faq__body > * { padding: 0 18px; }
  .dt-faq__body > *:last-child { padding-bottom: 18px; }
  /* Full-width CTAs on phones. Sized to their label they read as small tabs
     adrift in a full-width column, and the tap target was under half the
     screen. The label and its arrow tile stay centred as one group. */
  .dt-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
    padding: 13px 16px;
  }
  .dt-btn--outline { padding: 14px 16px; }
  /* Button owns the row, so its two reassurance notes drop beneath it */
  .dt-idea__cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .dt-final__actions { flex-direction: column; align-items: stretch; }
  .dt-final__actions .dt-btn { justify-content: center; }
  .dt-final__points { flex-direction: column; align-items: center; gap: 10px; }
}

/* Small phones (360px and down). Two step pills per row cannot hold a word as
   long as "Development" — the grid track was forced to its min-content width
   and pushed the whole page 50px wider than the viewport. */
@media (max-width: 430px) {
  .dt-steps { grid-template-columns: 1fr; }
}

/* 320px: the copy needs the full row width for its longest word. The two
   58px mark columns that used to be set here predate the stacked rows above
   and fought them — the row went back to three columns while the copy still
   spanned all three, so both verdicts crushed into the left half. */
@media (max-width: 380px) {
  .dt-row__copy { padding: 16px 12px; gap: 10px; }
  /* "Transparency" alone is ~110px; without this its min-content contribution
     re-widens the track no matter how small the mark columns get. */
  .dt-row__copy h3, .dt-row__copy p { overflow-wrap: anywhere; }
  .dt-row__copy h3 { font-size: 0.92rem; }
  .dt-row__copy p { font-size: 0.8rem; }
  .dt-row__copy i { width: 32px; height: 32px; }
  .dt-row__copy i svg { width: 17px; height: 17px; }
  .dt-mark { width: 30px; height: 30px; }
  .dt-mark svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dt-panel { animation: none; }
  .dt-faq__body { transition: none; }
  /* Still shown, just not nudging */
  .dt-step.is-active .dt-step__txt::after { animation: none; }
  /* Ring stays as a static outline rather than pulsing */
  .dt-demo__ring::before, .dt-demo__ring span { animation: none; }
  .dt-demo__ring::after { display: none; }
  /* Underline appears at full width instead of sweeping out */
  .nav-links a:not(.nav-cta).selected::after { animation: none; }
}


@media screen and (min-width: 1500px) {
   .dt-demo__panel{
    max-width: 1400px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LAPTOP SCREENS ONLY — short desktop viewports (≈1366×768 / 1536×864)
   Scoped by viewport HEIGHT, so 1080p+ and any tall monitor is
   completely unaffected. Light trim to pull the hero back inside a
   ~640px laptop viewport.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-height: 820px) {
  /* Full-screen hero — header is fixed and overlays the hero, so 100vh here
     makes header + hero exactly one laptop screen. */
  .dt-hero {
    padding: 94px 0 22px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

 


  .dt-hero__grid { gap: 40px; }
  .dt-hero__label { margin-bottom: 2px; }
  .dt-hero__title { margin: 0 0 15px; }
  .dt-hero__sub { margin: 0 0 20px; }
  .dt-hero__usps { gap: 10px; margin: 0 0 22px; }
  .dt-hero__usps li { padding: 10px 15px; }
  .dt-hero__img { max-width: 520px; }
}
/* ── intl-tel-input country dropdown ────────────────────────────────────────
   The list is rendered with `dropdownContainer: document.body`, so it lives
   OUTSIDE the lead modal's stacking context. The library's own z-index is
   1060, which is *below* .lead-modal-overlay (z-index 9999) — the list opened
   but was painted behind the popup, which reads as "the country list does not
   open at all". Being on <body> it also inherits the page's text colour, so
   the colours are pinned here instead of trusting whatever theme is around it. */
html .iti--container { z-index: 10050; }
html .iti__country-list,
html .iti__dropdown-content { background: #FFFFFF; color: #1A1A1A; }
html .iti__country { color: #1A1A1A; }
html .iti__country-name { color: #1A1A1A; }
html .iti__dial-code { color: #6B6B6B; }
html .iti__country.iti__highlight,
html .iti__country:hover { background: #F1F1F1; }
html .iti__search-input { color: #1A1A1A; background: #FFFFFF; }