/* ==========================================================================
   FIRST OWNER MEDIA — SERVICE DETAIL PAGES

   Paanchon service pages yahi ek file use karti hain. Har page apna rang
   body par --sv me deta hai, aur wahi rang icon, checks, steps aur buttons
   me chala jaata hai — isliye paanch page alag mehsoos hote hain bina
   paanch design banaye.

   Brand tokens styles.css se aate hain; yahan sirf in pages ka layer hai.
   ========================================================================== */

.service-page {
  --dt: var(--color-blue-primary);

  --dt-ink: #05060A;
  --dt-paper: #FBFBFD;
  --dt-paper-2: #F3F6FB;
  --dt-line: rgba(5, 6, 10, 0.10);
  --dt-muted: #6B7280;

  --dt-dark: #07080C;
  --dt-dark-2: #101725;

  /* Jod ka raaz: hero yahan aa ke rukta hai aur stats patti yahin se
     shuru hoti hai. Dono ek hi rang — isliye seam dikhta hi nahi. */
  --dt-floor: #090C14;
  --dt-floor-2: #070A11;

  --dt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--dt-paper);
}

.service-page .bg-dotted-texture { opacity: 0.3; }

.service-page .header {
  position: sticky;
  top: 0;
  background: rgba(251, 251, 253, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dt-line);
}

.service-page .nav-link.is-current { position: relative; color: var(--color-blue-primary); }
.service-page .nav-link.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-blue-primary);
}

.dt-shell { width: min(92%, 1180px); margin: 0 auto; position: relative; z-index: 2; }

/* ==========================================================================
   HERO — gehra panel jo apni marzi se khatam hota hai

   Teen cheezein pehle kharab thi:
     1. Saara likha baayen 60% me, daayi aadhi taraf khaali
     2. Panel ki dhaar stat cards ko beech se kaat rahi thi
     3. Panel bilkul sapaat — ek gradient ke alawa kuch nahi

   Seam ka ilaaj naap se nahi, RANG se kiya hai. Panel ka neeche ka
   hissa ek pakke rang (--dt-floor) par aa ke rukta hai, aur stats wali
   patti wahi rang dobara shuru karti hai. Dono ek hi rang hain, isliye
   jod dikhta hi nahi — aur card ki oonchai badle (720px par, 400px par)
   tab bhi kuch nahi tootta, kyunki yahan koi jaadui number hai hi nahi.
   ========================================================================== */

.dt-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(40px, 4.5vw, 64px) 0 clamp(34px, 3.2vw, 48px);
  color: #FFFFFF;

  /* Sabse neeche wali layer sapaat --dt-floor par khatam hoti hai.
     Radial accent upar hi rehte hain (62% tak), taaki neeche ka rang
     har chaudai par bilkul ek jaisa rahe. */
  background:
    linear-gradient(180deg, transparent 54%, var(--dt-floor) 92%),
    radial-gradient(72% 56% at 4% 2%, color-mix(in srgb, var(--dt) 34%, transparent), transparent 62%),
    radial-gradient(56% 46% at 92% 8%, color-mix(in srgb, var(--dt) 22%, transparent), transparent 66%),
    linear-gradient(180deg, #121A2D 0%, #0C111D 46%, var(--dt-floor) 100%);
}

/* ---- Gehrai ki tehen: jaali + halka andhera kinaron par --------------
   Dono ko neeche se pehle hi khatam kar dete hain, warna wo sapaat
   rang ko ganda karte hain aur jod dikhne lagta hai. */
.dt-hero::before,
.dt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dt-hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 76%);
}

.dt-hero::after {
  background: radial-gradient(120% 82% at 50% 24%, transparent 42%, rgba(0, 0, 0, 0.38) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 84%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 84%);
}

.dt-hero > * { position: relative; z-index: 1; }

/* Do khaane: baayen baat, daayen paanchon service ki soochi */
.dt-hero .dt-shell {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 1000px) {
  .dt-hero .dt-shell { grid-template-columns: minmax(0, 1fr) 248px; }
}

.dt-copy { min-width: 0; }

.dt-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.dt-crumb a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.dt-crumb a:hover { color: #FFFFFF; }
.dt-crumb b { color: #FFFFFF; font-weight: 700; }
.dt-crumb span { opacity: 0.4; }

.dt-ico {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-top: 30px;
  border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--dt) 92%, #FFFFFF), var(--dt));
  color: #FFFFFF;
  box-shadow:
    0 18px 34px -18px color-mix(in srgb, var(--dt) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.dt-ico svg { width: 28px; height: 28px; }

.dt-eyebrow {
  display: block;
  margin-top: 22px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dt) 42%, #FFFFFF);
}

.dt-title {
  margin: 10px 0 0;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #FFFFFF;
}

.dt-tagline {
  margin: 12px 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: color-mix(in srgb, var(--dt) 30%, #FFFFFF);
}

.dt-intro {
  max-width: 62ch;
  margin: 22px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.82);
}

.dt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.dt-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.4s var(--dt-ease),
    box-shadow 0.4s var(--dt-ease),
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.dt-btn svg { width: 17px; height: 17px; }
.dt-btn:hover { transform: translateY(-2px); }

.dt-btn-solid {
  background: #FFFFFF;
  color: var(--dt-ink);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.9);
}
.dt-btn-solid:hover { background: color-mix(in srgb, var(--dt) 12%, #FFFFFF); }

.dt-btn-line,
.dt-btn-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}
.dt-btn-line:hover,
.dt-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   SERVICE INDEX — daayen khaane me paanchon service

   Pehle yahan sirf ek dhundhla sa bada number tha, jo jagah ghere rakhta
   tha par kaam kuch nahi karta. Ab wahi jagah asli kaam karti hai:
   paanchon service ek saath, jispar ho wo chamakti hui, baaki par ek
   click me pahunch jao. Paanch alag page ek set jaise padhte hain.
   ========================================================================== */

.dt-index {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 14px;
}
@media (min-width: 1000px) { .dt-index { margin-top: 64px; } }

.dt-index-title {
  display: block;
  margin-bottom: 6px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.dt-index a {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: background 0.3s var(--dt-ease), color 0.3s var(--dt-ease);
}
.dt-index a .n {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.34);
}
.dt-index a .go { opacity: 0; transform: translateX(-4px); transition: all 0.3s var(--dt-ease); }
.dt-index a .go svg { width: 15px; height: 15px; }

.dt-index a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}
.dt-index a:hover .go { opacity: 0.7; transform: none; }

/* Jis page par ho — uska apna rang, aur baayen kinare par ek patti */
.dt-index a[aria-current="page"] {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dt) 26%, transparent), transparent 78%);
  color: #FFFFFF;
  font-weight: 700;
}
.dt-index a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--dt);
}
.dt-index a[aria-current="page"] .n { color: color-mix(in srgb, var(--dt) 40%, #FFFFFF); }

/* ==========================================================================
   STATS — gehre panel ki aakhri patti

   Cards ab dhaar par latakte nahi. Ye patti wahi rang (--dt-floor) se
   shuru hoti hai jispar hero khatam hua, isliye jod dikhta hi nahi —
   aur poora gehra block neeche ek seedhi, roshan lakeer par khatam hota
   hai. Cards us patti par kaanch ki tikiyon jaisi baithi hain.
   ========================================================================== */

.dt-stats-wrap {
  position: relative;
  margin-top: 0;
  padding: clamp(18px, 2vw, 26px) 0 clamp(34px, 3.6vw, 48px);
  background: linear-gradient(180deg, var(--dt-floor) 0%, var(--dt-floor-2) 100%);
}

/* Panel ki aakhri lakeer — beech me roshan, kinaron par gayab */
.dt-stats-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--dt) 70%, transparent) 26%,
    color-mix(in srgb, var(--dt) 85%, #FFFFFF) 50%,
    color-mix(in srgb, var(--dt) 70%, transparent) 74%,
    transparent
  );
  opacity: 0.95;
}

/* Lakeer ke upar chaudi, halki roshni — panel band hota hua lagta hai */
.dt-stats-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  pointer-events: none;
  background: radial-gradient(
    68% 120px at 50% 100%,
    color-mix(in srgb, var(--dt) 26%, transparent),
    transparent 70%
  );
}

.dt-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Teeno ke peeche ek hairline — gutters me se jhaankti hai aur teen
   alag dabbon ko ek hi patti bana deti hai */
.dt-stats::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.dt-stat {
  position: relative;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)),
    var(--dt-floor);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.45s var(--dt-ease), border-color 0.45s var(--dt-ease), background 0.45s var(--dt-ease);
}
.dt-stat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--dt) 55%, transparent);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)),
    var(--dt-floor);
}

.dt-stat strong {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #FFFFFF;
}

.dt-stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Chhoti screen ---- */

@media (max-width: 999px) {
  .dt-index { margin-top: 30px; }
  .dt-index a { padding: 9px 10px; }
}

@media (max-width: 720px) {
  .dt-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dt-stats::before { display: none; }
  .dt-ico { width: 54px; height: 54px; margin-top: 24px; }
  .dt-ico svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-btn:hover,
  .dt-stat:hover { transform: none; }
  .dt-index a,
  .dt-index a .go { transition: none; }
}

/* ==========================================================================
   GOOD FIT
   ========================================================================== */
.dt-fit { padding: 60px 0; }

.dt-h2 {
  margin: 0 0 22px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dt-ink);
}

.dt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--dt-line);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dt-ink);
  transition: border-color 0.35s ease, transform 0.4s var(--dt-ease);
}
.dt-chips li svg { width: 15px; height: 15px; color: var(--dt); stroke-width: 3; }
.dt-chips li:hover { border-color: color-mix(in srgb, var(--dt) 40%, transparent); transform: translateY(-2px); }

/* ==========================================================================
   BAKI SERVICES
   ========================================================================== */
.dt-more {
  padding: 66px 0;
  background: var(--dt-paper-2);
  border-top: 1px solid var(--dt-line);
  border-bottom: 1px solid var(--dt-line);
}

.dt-more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dt-more-head .dt-h2 { margin-bottom: 0; }

.dt-more-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-blue-primary);
  text-decoration: none;
}
.dt-more-link svg { width: 15px; height: 15px; }
.dt-more-link:hover { gap: 11px; }

.dt-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.dt-more-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 24px 20px 20px;
  border: 1px solid var(--dt-line);
  border-radius: 18px;
  background: #FFFFFF;
  text-decoration: none;
  transition: transform 0.45s var(--dt-ease), box-shadow 0.45s var(--dt-ease), border-color 0.4s ease;
}
.dt-more-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--dt), transparent);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 0.5s var(--dt-ease);
}
.dt-more-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--dt) 34%, transparent);
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--dt) 70%, rgba(5, 6, 10, 0.5));
}
.dt-more-card:hover::after { transform: scaleX(1); }

.dt-more-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--dt) 12%, #FFFFFF);
  color: var(--dt);
}
.dt-more-ico svg { width: 20px; height: 20px; }

.dt-more-n {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #94A3B8;
}

.dt-more-card h3 {
  margin: 16px 0 0;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dt-ink);
}
.dt-more-card p {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--dt-muted);
}

.dt-more-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dt);
}
.dt-more-go svg { width: 14px; height: 14px; transition: transform 0.4s var(--dt-ease); }
.dt-more-card:hover .dt-more-go svg { transform: translateX(4px); }

/* ==========================================================================
   CTA
   ========================================================================== */
.dt-cta { padding: 74px 0; }

.dt-cta-in {
  padding: 54px 46px;
  border-radius: 26px;
  text-align: center;
  color: #FFFFFF;
  background:
    radial-gradient(85% 120% at 14% 0%, color-mix(in srgb, var(--dt) 40%, transparent), transparent 58%),
    linear-gradient(160deg, var(--dt-dark) 0%, var(--dt-dark-2) 100%);
}
.dt-cta-in h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.dt-cta-in p {
  max-width: 58ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.7);
}
.dt-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ==========================================================================
   REVEAL
   `translate` par — `transform` par nahi, warna hover ki lift mar jaati hai.
   ========================================================================== */
.dt-stat, .dt-list li, .dt-steps li, .dt-chips li, .dt-more-card, .dt-cta-in {
  opacity: 0;
  translate: 0 16px;
}

.is-in .dt-stat,
.is-in .dt-list li,
.is-in .dt-steps li,
.is-in .dt-chips li,
.is-in .dt-more-card {
  animation: svIn 0.55s var(--dt-ease) calc(0.04s + var(--i, 0) * 0.07s) both;
}
.is-in .dt-cta-in { animation: svIn 0.65s var(--dt-ease) 0.05s both; }

@keyframes svIn { to { opacity: 1; translate: 0 0; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .dt-cols { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .dt-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .dt-hero { padding: 42px 0 84px; }
  .dt-body { padding: 52px 0 0; }
  .dt-fit, .dt-more { padding: 48px 0; }
  .dt-cta { padding: 52px 0; }
  .dt-cta-in { padding: 38px 22px; }
  .dt-stats { grid-template-columns: minmax(0, 1fr); }
  .dt-stats-wrap { margin-top: -62px; }
  .dt-actions .dt-btn,
  .dt-cta-actions .dt-btn { width: 100%; justify-content: center; }
}

@media (max-width: 460px) {
  .dt-more-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dt-stat, .dt-list li, .dt-steps li, .dt-chips li, .dt-more-card, .dt-cta-in {
    opacity: 1;
    translate: none;
    animation: none;
  }
  .dt-btn:hover, .dt-stat:hover, .dt-more-card:hover, .dt-chips li:hover { transform: none; }
}

/* ==========================================================================
   HERO — ab site ke apne rang me
   Gehra panel akela padta tha: baaki har page halka hai, sirf yahi kaala.
   Wahi teen layer rehti hain (grid, glow, floor) par halke roop me, isliye
   dhaancha waisa hi hai — sirf rang badla hai.
   ========================================================================== */

.dt-hero {
  color: var(--dt-ink);
  background:
    radial-gradient(64% 52% at 88% 0%, color-mix(in srgb, var(--dt) 13%, transparent), transparent 66%),
    radial-gradient(52% 44% at 2% 8%, color-mix(in srgb, var(--dt) 8%, transparent), transparent 70%),
    var(--dt-paper);
}

/* Grid ab kaali lakeeron ka, bahut halka */
.dt-hero::before {
  background-image:
    linear-gradient(rgba(5, 6, 10, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 6, 10, 0.032) 1px, transparent 1px);
}

/* Gehre panel wala vignette halke par gandagi lagta hai */
.dt-hero::after { display: none; }

.dt-crumb { color: var(--dt-muted); }
.dt-crumb a { color: var(--dt-muted); }
.dt-crumb a:hover { color: var(--dt); }
.dt-crumb b { color: var(--dt-ink); }

/* Neeli tile halke par bhi utni hi achhi lagti hai — wahi rehne do */
.dt-eyebrow { color: var(--dt-muted); }
.dt-title { color: var(--dt-ink); }
.dt-tagline { color: var(--dt); }
.dt-intro { color: var(--dt-muted); }

.dt-btn-solid {
  background: var(--dt);
  color: #FFFFFF;
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--dt) 80%, transparent);
}
.dt-btn-solid:hover { background: color-mix(in srgb, var(--dt) 86%, #000000); }

.dt-btn-line,
.dt-btn-ghost {
  border-color: var(--dt-line);
  background: #FFFFFF;
  color: var(--dt-ink);
}
.dt-btn-line:hover,
.dt-btn-ghost:hover {
  background: var(--dt-ink);
  border-color: var(--dt-ink);
  color: #FFFFFF;
}

/* ---- Service index ---- */
.dt-index { border-top-color: var(--dt-line); }
.dt-index-title { color: var(--dt-muted); }
.dt-index a { color: var(--dt-muted); }
.dt-index a .n { color: var(--dt-muted); opacity: 0.6; }
.dt-index a:hover { background: var(--dt-paper-2); color: var(--dt-ink); }

.dt-index a[aria-current="page"] {
  background: color-mix(in srgb, var(--dt) 9%, transparent);
  color: var(--dt-ink);
}
.dt-index a[aria-current="page"] .n { color: var(--dt); }

/* ---- Stats patti ---- */
.dt-stats-wrap {
  background: var(--dt-paper-2);
  border-top: 1px solid var(--dt-line);
}

/* Roshan lakeer gehre panel ke liye thi — ab seedhi hairline */
.dt-stats-wrap::after {
  height: 1px;
  background: var(--dt-line);
  opacity: 1;
}

.dt-stat {
  background: #FFFFFF;
  border: 1px solid var(--dt-line);
  box-shadow: 0 10px 26px rgba(5, 6, 10, 0.05);
  color: var(--dt-ink);
}
.dt-stat strong { color: var(--dt); }
.dt-stat span { color: var(--dt-muted); }

/* ==========================================================================
   BODY — "What you get" aur "How we do it"

   In dono ke liye CSS likha hi nahi gaya tha: list default bullets par
   chal rahi thi aur steps me browser ka apna number span wale number ke
   upar chhap raha tha ("1Audit"). Paanchon service page par yahi haal tha.
   ========================================================================== */

.dt-body { padding: clamp(52px, 5vw, 76px) 0; }

.dt-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 56px);
}

.dt-col { min-width: 0; }

.dt-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dt-ink);
}

.dt-col-title svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--dt);
}

/* ---- Checklist ---- */
.dt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dt-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--dt-line);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #334155;
}

.dt-list li svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--dt);
  stroke-width: 3;
}

/* ---- Numbered steps ---- */
.dt-steps {
  list-style: none;   /* warna browser ka number dt-step-n ke saath dikhta hai */
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.dt-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--dt-line);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #334155;
}

.dt-step-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dt) 12%, transparent);
  color: var(--dt);
  font-size: 0.76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .dt-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ACCENT KO PADHNE LAAYAK BANAO
   Wahi baat jo services.css me — sky aur indigo safed par 2.77 tak gir
   jaate hain. Sirf text aur bhare hue button gehre kiye hain.
   ========================================================================== */

.detail-page,
.dt-svc { --dt-ink-a: color-mix(in srgb, var(--dt) 74%, #000000); }

.dt-tagline,
.dt-stat strong,
.dt-more-go,
.dt-list-title { color: var(--dt-ink-a); }

.dt-btn-solid { background: var(--dt-ink-a); }