/* ── Background ── */
    .page-bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 70% 45% at 15% -5%,  rgba(194, 78, 44, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 55% 35% at 88%  8%,  rgba(157, 51, 119, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(74, 137, 199, 0.12) 0%, transparent 65%);
    }

    /* ── Hero ── */
    .sdp-hero { position: relative; z-index: 10; padding: 3rem 2rem 4rem; }
    .sdp-hero-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; gap: 4rem;
    }
    .sdp-hero-left  { flex: 1; min-width: 0; }
    .sdp-hero-right { flex: 0 0 480px; }

    /* Breadcrumb */
    .srv-breadcrumb {
      display: flex; align-items: center; gap: 0.45rem;
      font-family: 'Inter', sans-serif; font-size: 0.72rem;
      color: rgba(197,197,214,0.4); margin-bottom: 1.5rem;
    }
    .srv-breadcrumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; transition: color 0.2s; }
    .srv-breadcrumb a:hover { color: rgba(197,197,214,0.75); }
    .srv-breadcrumb .crumb-sep { opacity: 0.35; }
    .srv-breadcrumb .crumb-current { color: rgba(197,197,214,0.65); font-weight: 500; }

    /* Category badge */
    .sdp-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem;
      font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
      color: rgba(197, 197, 214, 0.5);
      border: 1px solid rgba(194, 78, 44, 0.25);
      background: rgba(194, 78, 44, 0.07);
      border-radius: 9999px; padding: 0.35rem 0.85rem;
      margin-bottom: 1.25rem;
    }
    .sdp-badge::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: linear-gradient(135deg, #C24E2C, #4A89C7);
    }

    /* Title */
    .sdp-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 800; color: #fff;
      line-height: 1.08; letter-spacing: -0.03em;
      margin: 0 0 1.25rem;
    }
    .sdp-title em {
      font-style: italic; font-weight: 300;
      background: linear-gradient(90deg, #C24E2C 0%, #9D3377 50%, #4A89C7 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    /* Description */
    .sdp-desc {
      font-family: 'Inter', sans-serif; font-size: 0.9rem;
      line-height: 1.75; color: rgba(197,197,214,0.6);
      margin: 0 0 1.75rem; max-width: 480px;
    }

    /* Stat chips */
    .sdp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
    .sdp-chip {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem;
      font-weight: 600; letter-spacing: 0.04em;
      color: rgba(197,197,214,0.7);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9999px; padding: 0.35rem 0.8rem;
    }

    /* CTAs */
    .sdp-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; }

    /* ── Dashboard mockup ── */
    .sdp-dash {
      background: rgba(10,10,14,0.85);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 1.25rem; overflow: hidden;
      position: relative;
      box-shadow: 0 32px 80px -20px rgba(0,0,0,0.55), 0 12px 32px -8px rgba(194, 78, 44, 0.15);
    }
    .sdp-dash::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 25%, transparent 55%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
    }
    /* Chrome bar */
    .sdp-dash-chrome {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.65rem 1rem;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sdp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .sdp-url {
      margin-left: 0.75rem; flex: 1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 5px; padding: 0.2rem 0.65rem;
      font-family: 'Inter', monospace; font-size: 0.6rem;
      color: rgba(197,197,214,0.4); letter-spacing: 0.01em;
    }
    /* Nav tabs */
    .sdp-dash-tabs {
      display: flex; gap: 0;
      padding: 0 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.015);
    }
    .sdp-dash-tab {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; font-weight: 600;
      color: rgba(197,197,214,0.4); padding: 0.55rem 0.85rem;
      border-bottom: 1.5px solid transparent; cursor: default;
      letter-spacing: 0.02em;
    }
    .sdp-tab-active { color: rgba(197,197,214,0.85); border-bottom-color: #C24E2C; }
    /* Metrics row */
    .sdp-metrics {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0; padding: 0;
    }
    .sdp-metric {
      display: flex; flex-direction: column; padding: 0.85rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sdp-metric:last-child { border-right: none; }
    .sdp-metric-lbl { font-family: 'Inter', sans-serif; font-size: 0.58rem; color: rgba(197,197,214,0.4); margin-bottom: 0.25rem; }
    .sdp-metric-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.2rem; }
    .sdp-metric-delta { font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem; font-weight: 600; }
    .sdp-delta-up   { color: #4ade80; }
    .sdp-delta-down { color: #4ade80; } /* churn going DOWN is good */
    /* Chart */
    .sdp-chart-wrap { padding: 0.85rem 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .sdp-chart-label { font-family: 'Inter', sans-serif; font-size: 0.58rem; color: rgba(197,197,214,0.35); margin-bottom: 0.5rem; }
    .sdp-chart-svg { width: 100%; height: 65px; display: block; }
    /* Table */
    .sdp-table { padding: 0 0 0.25rem; }
    .sdp-table-head {
      display: grid; grid-template-columns: 1.8fr 1fr 0.8fr 0.8fr;
      padding: 0.5rem 1rem;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem;
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(197,197,214,0.3);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sdp-table-row {
      display: grid; grid-template-columns: 1.8fr 1fr 0.8fr 0.8fr;
      align-items: center; padding: 0.5rem 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.035);
      transition: background 0.2s;
    }
    .sdp-table-row:last-child { border-bottom: none; }
    .sdp-table-row:hover { background: rgba(255,255,255,0.02); }
    .sdp-user { display: flex; align-items: center; gap: 0.45rem; font-family: 'Inter', sans-serif; font-size: 0.65rem; color: rgba(229,225,229,0.8); }
    .sdp-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
    .sdp-plan { font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 4px; width: fit-content; }
    .sdp-plan-pro { background: rgba(194, 78, 44, 0.15); color: #C24E2C; }
    .sdp-plan-enterprise { background: rgba(157, 51, 119, 0.15); color: #9D3377; }
    .sdp-mrr { font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 600; color: rgba(197,197,214,0.7); }
    .sdp-status { font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; }
    .sdp-status-active { color: #4ade80; }
    .sdp-status-trial  { color: #f59e0b; }

    /* ── Shared section wrapper ── */
    .sdp-section {
      position: relative; z-index: 10;
      max-width: 1160px; margin: 0 auto;
      padding: 5rem 2rem;
    }
    .sdp-section-header { text-align: center; margin-bottom: 3rem; }
    .sdp-eyebrow {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem;
      font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(197, 197, 214, 0.5); margin-bottom: 0.65rem;
    }
    .sdp-section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(1.5rem, 2.5vw, 2.1rem);
      font-weight: 700; color: #fff; letter-spacing: -0.02em;
      line-height: 1.2; margin: 0 0 0.75rem;
    }
    .sdp-section-desc {
      font-family: 'Inter', sans-serif; font-size: 0.875rem;
      color: rgba(197,197,214,0.5); max-width: 520px; margin: 0 auto; line-height: 1.7;
    }

    /* ── About / description prose ── */
    .service-content {
      max-width: 860px;
      margin: 0 auto;
      color: rgba(197, 197, 214, 0.7);
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      line-height: 1.85;
      position: relative; z-index: 1;
    }
    .service-content p { margin-bottom: 1.35rem; }
    .service-content p:last-child { margin-bottom: 0; }
    .service-content h2 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1.3rem; font-weight: 700;
      color: #fff; letter-spacing: -0.02em;
      margin: 2rem 0 1rem;
      padding-bottom: 0.75rem;
      position: relative;
    }
    .service-content h2::after {
      content: '';
      position: absolute; left: 0; bottom: 0;
      width: 2rem; height: 2px;
      background: linear-gradient(90deg, #C24E2C, #9D3377, #4A89C7);
      border-radius: 2px;
    }
    .service-content h3 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1.05rem; font-weight: 700;
      color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
      margin: 1.75rem 0 0.875rem;
      padding-left: 0.875rem;
      border-left: 3px solid #9D3377;
    }
    .service-content h4 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.9375rem; font-weight: 700;
      color: rgba(255,255,255,0.85);
      margin: 1.25rem 0 0.625rem;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .service-content h4::before {
      content: '';
      display: inline-block; width: 8px; height: 8px;
      border-radius: 2px;
      background: linear-gradient(135deg, #C24E2C, #9D3377);
      box-shadow: 0 0 8px rgba(194,78,44,0.35);
      flex-shrink: 0;
    }
    .service-content strong {
      color: rgba(255,255,255,0.92); font-weight: 700;
    }
    .service-content em {
      font-style: italic; color: rgba(197,197,214,0.9);
    }
    .service-content strong em,
    .service-content em strong {
      background: linear-gradient(90deg, #C24E2C 0%, #9D3377 50%, #4A89C7 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      font-style: italic;
    }
    .service-content a {
      color: #4A89C7; text-decoration: none;
      border-bottom: 1px solid rgba(74,137,199,0.3);
      transition: color 0.2s, border-color 0.2s;
    }
    .service-content a:hover { color: #C24E2C; border-bottom-color: #C24E2C; }
    .service-content ul {
      padding-left: 0; list-style: none; margin-bottom: 1.35rem;
    }
    .service-content ul li {
      position: relative; padding-left: 1.5rem;
      margin-bottom: 0.65rem; line-height: 1.78;
    }
    .service-content ul li::before {
      content: '';
      position: absolute; left: 0; top: 0.57em;
      width: 6px; height: 6px; border-radius: 50%;
      background: linear-gradient(135deg, #C24E2C, #9D3377);
      box-shadow: 0 0 6px rgba(194,78,44,0.3);
    }
    .service-content ol {
      padding-left: 0; list-style: none;
      counter-reset: svc-ol; margin-bottom: 1.35rem;
    }
    .service-content ol li {
      position: relative; padding-left: 2.1rem;
      margin-bottom: 0.65rem; counter-increment: svc-ol; line-height: 1.78;
    }
    .service-content ol li::before {
      content: counter(svc-ol);
      position: absolute; left: 0; top: 0.08em;
      width: 1.5rem; height: 1.5rem; border-radius: 50%;
      background: linear-gradient(135deg, rgba(194,78,44,0.15), rgba(157,51,119,0.15));
      border: 1px solid rgba(194,78,44,0.3);
      font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700;
      color: rgba(197,197,214,0.7);
      display: flex; align-items: center; justify-content: center;
    }
    .service-content blockquote {
      position: relative;
      margin: 1.75rem 0; padding: 1.25rem 1.5rem 1.25rem 1.75rem;
      background: linear-gradient(115deg, rgba(157,51,119,0.07) 0%, rgba(194,78,44,0.04) 100%);
      border-left: 3px solid #9D3377;
      border-radius: 0 0.75rem 0.75rem 0;
    }
    .service-content blockquote p {
      margin: 0; font-size: 1rem; font-style: italic;
      color: rgba(197,197,214,0.85); line-height: 1.8;
    }

    /* ── Feature cards (inherits srv-card fading pattern) ── */
    .sdp-features-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    }
    .sdp-feat-card {
      position: relative;
      background: linear-gradient(to bottom, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 45%, transparent 100%);
      border-radius: 1.25rem; padding: 1.75rem 1.6rem 2.25rem;
      overflow: hidden;
      transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), box-shadow 0.42s cubic-bezier(0.22,1,0.36,1);
    }
    .sdp-feat-card::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.02) 50%, transparent 65%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
    }
    /* Glass reflection */
    .sdp-feat-card::after { display: none; }
    .sdp-feat-card {
      background: #0a0a0c linear-gradient(138deg, transparent 0%, transparent 24%, rgba(0,0,0,0.009) 24%, rgba(0,0,0,0.009) 27%, rgba(255,255,255,0.011) 27%, rgba(255,255,255,0.011) 40%, rgba(0,0,0,0.007) 40%, rgba(0,0,0,0.007) 43%, transparent 43%);
    }
    @media (hover: hover) { .sdp-feat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 52px -12px rgba(194, 78, 44, 0.12), 0 10px 28px -8px rgba(157, 51, 119, 0.08), 0 4px 14px rgba(74, 137, 199, 0.06); } }
    /* Center card — same look as regular cards */
    .sdp-feat-card.sdp-feat-featured {
      background: linear-gradient(to bottom, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 45%, transparent 100%);
    }
    .sdp-feat-card.sdp-feat-featured::after {
      display: none;
    }
    .sdp-feat-icon {
      width: 40px; height: 40px; border-radius: 0.75rem;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
      display: flex; align-items: center; justify-content: center;
      color: rgba(197,197,214,0.7); margin-bottom: 1.25rem;
      position: relative; z-index: 3;
    }
    .sdp-feat-featured .sdp-feat-icon { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); color: rgba(197,197,214,0.7); }
    .sdp-feat-title {
      font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem;
      font-weight: 700; color: #fff; line-height: 1.3;
      margin: 0 0 0.6rem; position: relative; z-index: 3;
    }
    .sdp-feat-desc {
      font-family: 'Inter', sans-serif; font-size: 0.775rem;
      color: rgba(197,197,214,0.55); line-height: 1.7;
      margin: 0; position: relative; z-index: 3;
    }

    /* ── Process strip (same as services page) ── */
    .sdp-process {
      position: relative; z-index: 10;
      border-top: 1px solid rgba(255,255,255,0.07);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.015);
      padding: 5rem 2rem;
    }
    .sdp-process-inner { max-width: 1160px; margin: 0 auto; }
    .sdp-process-header { text-align: center; margin-bottom: 3rem; }
    .sdp-steps {
      display: grid; grid-template-columns: repeat(4, 1fr);
      position: relative;
    }
    .sdp-steps::before {
      content: ''; position: absolute;
      top: 24px; left: calc(12.5% + 24px); right: calc(12.5% + 24px);
      height: 1px; background: linear-gradient(90deg, rgba(194, 78, 44, 0.35), rgba(157, 51, 119, 0.35));
    }
    .sdp-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem; position: relative; }
    .sdp-step-num {
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 700;
      color: rgba(197,197,214,0.6); margin-bottom: 1.25rem; position: relative; z-index: 1;
    }
    .sdp-step:first-child .sdp-step-num,
    .sdp-step:last-child  .sdp-step-num { background: rgba(194, 78, 44, 0.1); border-color: rgba(194, 78, 44, 0.3); color: #C24E2C; }
    .sdp-step-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
    .sdp-step-desc  { font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(197,197,214,0.5); line-height: 1.65; }

    /* ── Tech stack ── */
    .sdp-stack-wrap { max-width: 1160px; margin: 0 auto; padding: 5rem 2rem; position: relative; z-index: 10; }
    .sdp-stack-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
    .sdp-stack-group-lbl {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem;
      font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(197,197,214,0.35); margin-bottom: 0.85rem;
    }
    .sdp-tech-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .sdp-tech-badge {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem;
      font-weight: 600; letter-spacing: 0.03em;
      color: rgba(197,197,214,0.75);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 7px; padding: 0.3rem 0.7rem;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .sdp-tech-badge:hover { border-color: rgba(194, 78, 44, 0.35); color: #C24E2C; background: rgba(194, 78, 44, 0.06); }

    /* ── Why DiGiT ── */
    .sdp-why-section {
      position: relative; z-index: 10;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 5rem 2rem;
      background: rgba(255,255,255,0.012);
    }
    .sdp-why-inner { max-width: 1160px; margin: 0 auto; }
    .sdp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .sdp-why-card {
      position: relative;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0.055) 0%,
        rgba(255,255,255,0.018) 45%,
        transparent 100%);
      border-radius: 1.25rem;
      padding: 2rem 1.75rem 2.5rem;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.42s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.42s cubic-bezier(0.22,1,0.36,1);
    }
    .sdp-why-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.10) 20%,
        rgba(255,255,255,0.03) 48%,
        transparent 62%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    .sdp-why-card {
      cursor: pointer;
      background: #0a0a0c linear-gradient(
        136deg,
        transparent              0%,
        transparent              22%,
        rgba(0,0,0,0.009)        22%,
        rgba(0,0,0,0.009)        25%,
        rgba(255,255,255,0.012)  25%,
        rgba(255,255,255,0.012)  38%,
        rgba(0,0,0,0.007)        38%,
        rgba(0,0,0,0.007)        41%,
        transparent              41%,
        transparent             100%
      );
    }
    @media (hover: hover) {
      .sdp-why-card:hover {
        transform: translateY(-4px);
        box-shadow:
          0 18px 52px -12px rgba(194, 78, 44, 0.18),
          0 10px 28px -8px rgba(157, 51, 119, 0.12),
          0 4px 14px -4px rgba(74, 137, 199, 0.10),
          inset 0 1px 0 rgba(255,255,255,0.09);
      }
    }

    .sdp-why-card-mid {
      border: 1.5px solid transparent;
      background-image:
        /* diagonal glass reflection stripe — same as base card */
        linear-gradient(
          136deg,
          transparent 0%, transparent 22%,
          rgba(0,0,0,0.009) 22%, rgba(0,0,0,0.009) 25%,
          rgba(255,255,255,0.012) 25%, rgba(255,255,255,0.012) 38%,
          rgba(0,0,0,0.007) 38%, rgba(0,0,0,0.007) 41%,
          transparent 41%, transparent 100%
        ),
        /* top-to-bottom white linear glow */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 0%, transparent 55%),
        /* bottom fade */
        linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, 0.28) 100%),
        /* solid dark fill for interior */
        linear-gradient(#0a0a0c, #0a0a0c),
        /* border: white at top, fades to transparent at bottom */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.0) 100%);
      background-origin: padding-box, padding-box, padding-box, border-box, border-box;
      background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }
    .sdp-why-card-mid::before,
    .sdp-why-card-mid::after {
      display: none;
    }

    .sdp-why-icon {
      width: 40px; height: 40px; border-radius: 0.75rem;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.25rem; color: rgba(197,197,214,0.7);
      flex-shrink: 0; position: relative; z-index: 4;
    }
    .sdp-why-card-mid .sdp-why-icon {
      background: rgba(194, 78, 44, 0.12); border-color: rgba(194, 78, 44, 0.25); color: #C24E2C;
    }
    .sdp-why-tag {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(197, 197, 214, 0.5); margin-bottom: 0.5rem; position: relative; z-index: 4;
    }
    .sdp-why-num {
      font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem;
      font-weight: 700; color: #fff; line-height: 1.3;
      margin: 0 0 0.75rem; position: relative; z-index: 4;
    }
    /* highlighting the number part specifically if it contains text */
    .sdp-why-num em {
      font-style: normal;
      background: linear-gradient(90deg, #C24E2C 0%, #9D3377 50%, #4A89C7 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .sdp-why-desc {
      font-family: 'Inter', sans-serif; font-size: 0.775rem; color: rgba(197,197,214,0.55);
      line-height: 1.7; margin: 0 0 1.25rem; flex: 1; position: relative; z-index: 4;
    }
    .sdp-why-list {
      list-style: none; padding: 0; margin: 0 0 1.5rem;
      display: flex; flex-direction: column; gap: 0.45rem; position: relative; z-index: 4;
    }
    .sdp-why-item {
      font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(197,197,214,0.5);
      display: flex; align-items: center; gap: 0.5rem;
    }
    .sdp-why-item::before {
      content: ''; width: 4px; height: 4px; border-radius: 50%;
      background: linear-gradient(135deg, #C24E2C, #4A89C7); flex-shrink: 0;
    }
    .sdp-why-link {
      font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: rgba(197, 197, 214, 0.5);
      text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
      transition: color 0.2s, gap 0.2s; position: relative; z-index: 4;
    }
    .sdp-why-link:hover { color: #4A89C7; gap: 0.6rem; }

    /* ── Related services ── */
    .sdp-related { position: relative; z-index: 10; max-width: 1160px; margin: 0 auto; padding: 5rem 2rem; }
    .sdp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .sdp-rel-card {
      position: relative; border-radius: 1.25rem; padding: 0;
      display: flex; flex-direction: column;
      background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, transparent 100%);
      overflow: hidden;
      transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), box-shadow 0.42s cubic-bezier(0.22,1,0.36,1);
      text-decoration: none;
    }

    .sdp-rel-img {
      width: 100%; height: 160px; overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sdp-rel-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.5s ease;
    }
    .sdp-rel-card:hover .sdp-rel-img img { transform: scale(1.08); }
    .sdp-rel-img-placeholder {
      width: 100%; height: 100%; background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
    }

    .sdp-rel-content {
      padding: 1.25rem 1.4rem 1.75rem;
      flex: 1; display: flex; flex-direction: column;
    }

    .sdp-rel-card::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.02) 50%, transparent 65%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
    }
    @media (hover: hover) { .sdp-rel-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px -12px rgba(194, 78, 44, 0.18), 0 8px 24px -8px rgba(157, 51, 119, 0.12); } }
    
    .sdp-rel-cat { font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(197, 197, 214, 0.5); margin-bottom: 0.4rem; position: relative; z-index: 3; }
    .sdp-rel-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 0.5rem; position: relative; z-index: 3; }
    .sdp-rel-desc { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: rgba(197,197,214,0.5); line-height: 1.65; margin: 0 0 1rem; position: relative; z-index: 3; }
    
    .sdp-rel-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; position: relative; z-index: 3; }
    .sdp-rel-item { font-family: 'Inter', sans-serif; font-size: 0.68rem; color: rgba(197, 197, 214, 0.4); display: flex; align-items: center; gap: 0.45rem; line-height: 1.3; }
    .sdp-rel-item::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: linear-gradient(135deg, #C24E2C, #4A89C7); flex-shrink: 0; }
    
    .sdp-rel-link { font-family: 'Space Grotesk', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(197, 197, 214, 0.5); display: inline-flex; align-items: center; gap: 0.4rem; position: relative; z-index: 3; transition: color 0.2s, gap 0.2s; }
    @media (hover: hover) { .sdp-rel-card:hover .sdp-rel-link { color: #C24E2C; gap: 0.6rem; } }

    /* ── Bottom CTA ── */
    .sdp-cta { position: relative; z-index: 10; text-align: center; padding: 5rem 2rem 6rem; max-width: 680px; margin: 0 auto; }
    .sdp-cta-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; }
    .sdp-cta-title em { font-style: italic; font-weight: 300; background: linear-gradient(90deg, #C24E2C 0%, #9D3377 50%, #4A89C7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sdp-cta-desc { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: rgba(197,197,214,0.55); line-height: 1.7; margin-bottom: 2rem; }
    .sdp-cta-actions { display: flex; gap: 0.875rem; justify-content: center; flex-wrap: wrap; }

    /* ── Divider ── */
    .sdp-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0; }

    /* ── Section background alternation (service single page only) ──
       1. How it works   → light  (sdp-process   — unchanged)
       2. Why The DiGiT  → dark   (override background to transparent)
       3. Explore more   → light  (sdp-related-section wrapper)
       4. Ready to start → dark   (sdp-cta       — unchanged)
    ── */
    .page-service-single .sdp-why-section {
      background: transparent;
      border-top: none;
    }

    /* Full-width wrapper that gives "Explore more" its light background */
    .sdp-related-section {
      position: relative; z-index: 10;
      border-top: 1px solid rgba(255,255,255,0.07);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.015);
    }
    /* Inner content keeps its own max-width centering; lift position off it */
    .sdp-related-section .sdp-related {
      position: static;
      z-index: auto;
    }

    /* ── FAQ accordion ── */
    .sdp-faq-list {
      max-width: 760px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 0;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 1.25rem; overflow: hidden;
    }
    .sdp-faq-item {
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
    }
    .sdp-faq-item:last-child { border-bottom: none; }
    .sdp-faq-q {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding: 1.25rem 1.5rem;
      background: none; border: none; cursor: pointer; text-align: left;
      font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem;
      font-weight: 600; color: rgba(229,225,229,0.9);
      transition: color 0.2s;
    }
    .sdp-faq-q:hover { color: #fff; }
    .sdp-faq-q[aria-expanded="true"] { color: #fff; }
    .sdp-faq-icon { flex-shrink: 0; color: rgba(197,197,214,0.45); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
    .sdp-faq-q[aria-expanded="true"] .sdp-faq-icon { color: #C24E2C; }
    .sdp-faq-a {
      padding: 0 1.5rem 1.25rem;
      font-family: 'Inter', sans-serif; font-size: 0.85rem;
      color: rgba(197,197,214,0.6); line-height: 1.8;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .sdp-faq-a p { margin-top: 0.75rem; }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .sdp-hero-right { flex: 0 0 420px; }
      .sdp-stack-groups { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .sdp-hero-inner { flex-direction: column; gap: 2.5rem; }
      .sdp-hero-right { flex: unset; width: 100%; }
      .sdp-features-grid { grid-template-columns: repeat(2, 1fr); }
      .sdp-why-grid { grid-template-columns: repeat(2, 1fr); }
      .sdp-steps { grid-template-columns: repeat(2, 1fr); }
      .sdp-steps::before { display: none; }
      .sdp-related-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .sdp-hero { padding: 3rem 1.25rem 3rem; }
      .sdp-section { padding: 3.5rem 1.25rem; }
      .sdp-features-grid { grid-template-columns: 1fr; }
      .sdp-why-grid { grid-template-columns: 1fr; }
      .sdp-steps { grid-template-columns: 1fr; }
      .sdp-stack-groups { grid-template-columns: 1fr; }
      .sdp-process { padding: 3.5rem 1.25rem; }
      .sdp-why-section { padding: 3.5rem 1.25rem; }
      .sdp-stack-wrap { padding: 3.5rem 1.25rem; }
      .sdp-related { padding: 3.5rem 1.25rem; }
    }
    @media (max-width: 480px) {
      .sdp-hero { padding: 2.5rem 1rem; }
      .sdp-section,
      .sdp-process,
      .sdp-why-section,
      .sdp-stack-wrap,
      .sdp-related { padding: 3rem 1rem; }
      .sdp-hero-title { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; }
      .sdp-why-card { padding: 1.25rem; }
      .sdp-step { padding: 1.25rem; }
      .sdp-feature-card { padding: 1.25rem; }
    }