/* ================================================================
   DPD TRUST — HOMEPAGE GLOBAL STYLESHEET
   Covers: Hero · Impact · Tabs · Integrations · Pricing · FAQ · CTA
   One file. No per-section <style> blocks needed.
================================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --dpd-navy:       #0A2540;
  --dpd-dark:       #071A2E;
  --dpd-aurora:     #15C6E2;
  --dpd-yellow:     #FED303;
  --dpd-orange:     #FFA800;
  --dpd-green:      #0D9E6E;
  --dpd-accent:     #1A6EFF;
  --dpd-text:       #34405A;
  --dpd-muted:      #526174;
  --dpd-white:      #ffffff;
  --dpd-white-66:   rgba(255,255,255,.66);
  --dpd-white-08:   rgba(255,255,255,.08);
  --dpd-navy-08:    rgba(10,37,64,.08);
  --dpd-aurora-10:  rgba(21,198,226,.10);
  --dpd-aurora-18:  rgba(21,198,226,.18);
}

/* ── 2. SHARED UTILITIES ──────────────────────────────────────── */

/* Badge pill — used across all sections */
.dpd-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--dpd-aurora-10);
  color: var(--dpd-navy);
  border: 1px solid var(--dpd-aurora-18);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.dpd-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dpd-aurora);
  box-shadow: 0 0 0 6px rgba(21,198,226,.14);
}

/* Buttons — shared across hero, CTA */
.dpd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: .25s ease;
}
.dpd-btn-primary {
  background: var(--dpd-accent);
  color: #fff;
  box-shadow: 0 12px 28px rgba(26,110,255,.34);
}
.dpd-btn-primary:hover {
  background: #155bdc;
  color: #fff;
  transform: translateY(-2px);
}
.dpd-btn-secondary {
  background: var(--dpd-aurora);
  border: 1px solid var(--dpd-aurora);
  color: var(--dpd-navy);
  box-shadow: 0 12px 28px rgba(21,198,226,.30);
}
.dpd-btn-secondary:hover {
  background: #11b7d0;
  border-color: #11b7d0;
  color: var(--dpd-navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(21,198,226,.40);
}

/* Accent word highlight (Damages, Phone Check) */
.dpd-accent-word {
  color: var(--dpd-yellow);
  position: relative;
  display: inline-block;
  font-weight: 900;
}


/* ================================================================
   SECTION 1 — HERO
================================================================ */
.dpd-home-hero {
  position: relative;
  overflow: hidden;
  background: var(--dpd-navy);
  padding: 70px 18px;
  min-height: 720px;
  display: flex;
  align-items: center;
}
.dpd-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,37,64,.86), rgba(10,37,64,.86)),
    url("https://dpd.ma/wp-content/uploads/2026/04/dpd-morocco-pattern.webp");
  background-size: 360px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: .24;
  pointer-events: none;
}
.dpd-hero-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.dpd-hero-content { max-width: 560px; }
.dpd-hero-content h1 {
  margin: 0;
  color: var(--dpd-white);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 900;
}
.dpd-hero-content p {
  margin: 22px 0 0;
  color: var(--dpd-white-66);
  font-size: 18px;
  line-height: 1.8;
  max-width: 520px;
}
.dpd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
/* Hero-specific button overrides */
.dpd-home-hero .dpd-btn-primary {
  background: var(--dpd-yellow);
  color: var(--dpd-navy);
  box-shadow: 0 12px 28px rgba(255,168,0,.34);
}
.dpd-home-hero .dpd-btn-primary:hover {
  background: #f59b00;
  color: var(--dpd-navy);
}
.dpd-home-hero .dpd-btn-secondary {
  background: var(--dpd-aurora);
  color: var(--dpd-navy);
}
.dpd-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 28px;
  color: rgba(255,255,255,.56);
  font-size: 13px;
  line-height: 1.5;
}
.dpd-hero-trust span {
  position: relative;
  padding-left: 18px;
}
.dpd-hero-trust span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 900;
}
.dpd-hero-visual {
  position: relative;
  min-height: 430px;
}
.dpd-dashboard-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--dpd-white-08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  transform: rotate(1.2deg);
}
.dpd-dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 2;
}
.dpd-dashboard-card img {
  width: 100%;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.dpd-floating-card {
  position: absolute;
  z-index: 3;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-radius: 15px;
  padding: 15px 18px;
  box-shadow: 0 18px 42px rgba(2,6,23,.20);
  border: 1px solid rgba(255,255,255,.55);
}
.dpd-floating-card strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
}
.dpd-floating-card span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.dpd-floating-score { left: -88px; bottom: 90px; }
.dpd-floating-score strong { color: var(--dpd-orange); }
.dpd-floating-risk { right: -94px; top: 33px; }
.dpd-floating-risk strong { color: #d97706; font-size: 18px; }


/* ================================================================
   SECTION 2 — IMPACT CAROUSEL
================================================================ */
.dpd-impact-carousel-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(21,198,226,.08), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(255,168,0,.10), transparent 24%),
    #ffffff;
  padding: 70px 18px;
  overflow: hidden;
  outline: none;
}
.dpd-impact-container {
  max-width: 1250px;
  width: 100%;
  margin: 0 auto;
}
.dpd-impact-container h2 {
  margin: 0;
  color: var(--dpd-navy);
  text-align: center;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 900;
}
.dpd-impact-container > p {
  margin: 18px auto 44px;
  max-width: 780px;
  color: var(--dpd-text);
  font-size: 17px;
  line-height: 1.8;
}
.dpd-impact-window {
  overflow: hidden;
  padding: 10px 2px 18px;
}
.dpd-impact-track {
  display: flex;
  gap: 18px;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.dpd-impact-card {
  flex: 0 0 calc((100% - 54px) / 4);
  min-height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 26px 22px;
  background:
    radial-gradient(circle at 85% 0%, rgba(21,198,226,.18), transparent 34%),
    linear-gradient(180deg, var(--dpd-navy) 0%, var(--dpd-dark) 100%);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dpd-impact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(10,37,64,.22);
  border-color: rgba(21,198,226,.30);
}
.dpd-impact-benefit {
  background:
    radial-gradient(circle at 88% 0%, rgba(255,168,0,.28), transparent 36%),
    linear-gradient(180deg, var(--dpd-orange) 0%, #D98700 100%);
  color: var(--dpd-navy);
}
.dpd-impact-benefit h3,
.dpd-impact-benefit p { color: var(--dpd-navy); }
.dpd-impact-benefit p { opacity: .78; }
.dpd-impact-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 22px;
}
.dpd-impact-benefit .dpd-impact-icon {
  background: rgba(10,37,64,.10);
  border-color: rgba(10,37,64,.16);
}
.dpd-impact-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--dpd-aurora);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dpd-impact-benefit .dpd-impact-icon svg { stroke: var(--dpd-navy); }
.dpd-impact-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #fff;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -.02em;
  font-weight: 850;
}
.dpd-impact-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.72;
}
.dpd-impact-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.dpd-mini-nav {
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: .25s ease;
}
.dpd-mini-nav svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
}
.dpd-mini-nav svg path {
  fill: none;
  stroke: var(--dpd-navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dpd-mini-nav:hover { background: rgba(10,37,64,.06); transform: translateY(-2px); }
.dpd-mini-nav:hover svg path { stroke: var(--dpd-aurora); }
.dpd-impact-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.dpd-impact-dot {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(10,37,64,.25);
  cursor: pointer;
  transition: .25s ease;
  padding: 0;
}
.dpd-impact-dot.is-active { width: 16px; background: var(--dpd-navy); }


/* ================================================================
   SECTION 3 — TABS
================================================================ */
.dpd-tabs-section {
  background: linear-gradient(180deg, #f8fbff 0%, #f2f8fc 100%);
  padding: 70px 18px;
  overflow: hidden;
}
.dpd-tabs-wrap { max-width: 1250px; margin: 0 auto; }
.dpd-tabs-wrap > h2 {
  margin: 0 0 18px;
  color: var(--dpd-navy);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
  text-align: center;
  max-width: 850px;
  margin-inline: auto;
}
.dpd-tabs-wrap > h2 span {
  color: var(--dpd-yellow);
  position: relative;
  display: inline-block;
}
.dpd-tabs-wrap > h2 span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 10px;
  background: rgba(254,211,3,.20);
  border-radius: 999px;
  z-index: -1;
}
.dpd-tabs-wrap > p {
  margin: 0 auto 46px;
  max-width: 760px;
  color: var(--dpd-text);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
}
.dpd-tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-bottom: 70px;
  padding-bottom: 28px;
}
.dpd-tabs-nav:before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(10,37,64,.12);
  border-radius: 999px;
}
.dpd-tabs-nav:after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dpd-aurora) 0%, var(--dpd-yellow) 50%, var(--dpd-navy) 100%);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
.dpd-tabs-nav.dpd-progress-check:after  { width: 25%; }
.dpd-tabs-nav.dpd-progress-analyze:after { width: 50%; }
.dpd-tabs-nav.dpd-progress-score:after  { width: 75%; }
.dpd-tabs-nav.dpd-progress-decide:after { width: 100%; }
.dpd-tab-btn {
  border: 0;
  background: transparent;
  padding: 0 10px;
  color: #748596;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.dpd-tab-btn:hover,
.dpd-tab-btn:focus,
.dpd-tab-btn:active { color: var(--dpd-dark); background: transparent; outline: none; box-shadow: none; }
.dpd-tab-btn.is-active { color: var(--dpd-dark); }
.dpd-tab-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  animation: dpdFade .35s ease both;
}
.dpd-tab-panel.is-active { display: grid; }
@keyframes dpdFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dpd-tab-visual { position: relative; }
.dpd-ui-bg {
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  padding: 44px;
  overflow: visible;
  background:
    radial-gradient(circle at 18% 20%, rgba(21,198,226,.35), transparent 34%),
    linear-gradient(135deg, rgba(21,198,226,.34), rgba(10,37,64,.62)), #dff8fb;
}
.dpd-ui-bg-analyze {
  background:
    radial-gradient(circle at 18% 20%, rgba(21,198,226,.38), transparent 34%),
    linear-gradient(135deg, rgba(21,198,226,.28), rgba(254,211,3,.30)), #eefcff;
}
.dpd-ui-bg-score {
  background:
    radial-gradient(circle at 18% 20%, rgba(254,211,3,.35), transparent 34%),
    linear-gradient(135deg, rgba(21,198,226,.30), rgba(10,37,64,.55)), #effbff;
}
.dpd-ui-bg-decide {
  background:
    radial-gradient(circle at 18% 20%, rgba(254,211,3,.34), transparent 34%),
    linear-gradient(135deg, rgba(10,37,64,.62), rgba(21,198,226,.28)), #eefcff;
}
.dpd-ui-window {
  background: #fff;
  border-radius: 24px;
  padding: 26px;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 22px 55px rgba(10,37,64,.12);
}
.dpd-ui-top { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; }
.dpd-ui-top span { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.dpd-ui-top small {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 900;
  color: #7a8499;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dpd-phone-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: #f6fbff;
  margin-bottom: 18px;
}
.dpd-phone-card label { display: block; color: #7a8499; font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.dpd-phone-card strong { display: block; font-size: 20px; color: var(--dpd-navy); }
.dpd-phone-card small { display: block; margin-top: 5px; color: #6b7280; }
.dpd-chip {
  background: rgba(21,198,226,.12);
  color: var(--dpd-navy);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}
.dpd-search-bar {
  padding: 16px;
  border-radius: 16px;
  background: #f1f5f9;
  color: #7a8499;
  font-size: 14px;
  margin-bottom: 18px;
}
.dpd-search-bar span {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dpd-aurora);
  margin-right: 8px;
}
.dpd-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.dpd-mini-grid div { background: #f8fafc; border-radius: 14px; padding: 14px; text-align: center; }
.dpd-mini-grid strong { display: block; color: var(--dpd-navy); font-size: 18px; }
.dpd-mini-grid small { display: block; margin-top: 4px; color: #7a8499; font-size: 11px; }
.dpd-signal-lines { display: grid; gap: 14px; margin-bottom: 24px; }
.dpd-signal-lines div { background: #f8fafc; border-radius: 14px; padding: 15px; }
.dpd-signal-lines b { display: block; color: var(--dpd-navy); margin-bottom: 10px; }
.dpd-signal-lines span { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--dpd-aurora), var(--dpd-yellow)); }
.dpd-chart-card { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding: 18px; background: #f1f5f9; border-radius: 18px; }
.dpd-chart-card .bar { flex: 1; border-radius: 999px 999px 8px 8px; background: var(--dpd-aurora); }
.dpd-chart-card .one  { height: 45%; }
.dpd-chart-card .two  { height: 78%; background: var(--dpd-yellow); }
.dpd-chart-card .three { height: 58%; }
.dpd-chart-card .four { height: 92%; background: var(--dpd-navy); }
.dpd-score-area { display: flex; gap: 24px; align-items: center; margin-bottom: 22px; }
.dpd-score-circle {
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 8px solid var(--dpd-aurora);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.dpd-score-circle strong { font-size: 38px; color: var(--dpd-navy); }
.dpd-score-circle small { font-weight: 900; color: var(--dpd-navy); }
.dpd-score-copy h4 { margin: 0 0 8px; font-size: 24px; color: var(--dpd-navy); }
.dpd-score-copy p { margin: 0; color: #6b7280; line-height: 1.6; }
.dpd-risk-pills { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dpd-risk-pills span { text-align: center; padding: 13px; border-radius: 14px; background: #f1f5f9; font-weight: 900; color: #64748b; }
.dpd-risk-pills .active { background: #fff1bf; color: #9a6700; }
.dpd-decision-list { display: grid; gap: 12px; margin-bottom: 22px; }
.dpd-decision-list div { padding: 15px; border-radius: 14px; background: #f8fafc; color: var(--dpd-navy); font-weight: 900; }
.dpd-decision-list .highlight { background: #fff1bf; color: #9a6700; }
.dpd-final-box { background: var(--dpd-navy); color: #fff; padding: 18px; border-radius: 18px; font-weight: 900; }
.dpd-float {
  position: absolute;
  z-index: 3;
  background: #fff;
  color: var(--dpd-navy);
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(10,37,64,.14);
}
.dpd-float-1 { right: -45px; top: 90px; }
.dpd-float-2 { left: -50px; bottom: 120px; }
.dpd-tab-content h3 {
  margin: 0 0 18px;
  color: var(--dpd-navy);
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 900;
}
.dpd-tab-content p { margin: 0 0 28px; color: var(--dpd-text); font-size: 17px; line-height: 1.8; max-width: 580px; }
.dpd-tab-content ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.dpd-tab-content li {
  position: relative;
  padding-left: 44px;
  color: var(--dpd-navy);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 700;
}
.dpd-tab-content li:before {
  content: "✓";
  position: absolute;
  left: 0; top: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--dpd-aurora);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}


/* ================================================================
   SECTION 4 — INTEGRATIONS
================================================================ */
.dpd-integrations-section {
  padding: 70px 18px;
  background: #fff;
}
.dpd-int-wrap {
  max-width: 1250px;
  margin: auto;
}
.dpd-int-wrap h2 {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--dpd-navy);
  margin: 0 0 70px;
  text-align: center;
}
.dpd-plugin-slider-wrap { position: relative; margin-bottom: 80px; }
.dpd-plugin-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.dpd-plugin-card {
  background: #fff;
  border: 1px solid var(--dpd-navy-08);
  border-radius: 24px;
  padding: 34px 28px;
  text-decoration: none;
  text-align: center;
  transition: .35s;
  box-shadow: 0 8px 28px rgba(10,37,64,.04);
}
.dpd-plugin-card:hover {
  transform: translateY(-8px);
  border-color: var(--dpd-aurora);
  box-shadow: 0 18px 45px rgba(10,37,64,.10);
}
.dpd-logo-wrap {
  height: 72px;
  width: 190px;
  margin: auto auto 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dpd-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.dpd-youcan-logo  { height: 96px; width: 200px; }
.dpd-youcan-logo img { transform: scale(1.38); transform-origin: center; }
.dpd-customapi-logo { height: 96px; width: 200px; }
.dpd-customapi-logo img { transform: scale(1.38); transform-origin: center; }
.dpd-plugin-meta h4 { margin: 0 0 8px; font-size: 22px; color: var(--dpd-navy); }
.dpd-plugin-meta p  { margin: 0; color: #667489; font-size: 15px; }
.dpd-slider-nav { display: none; }
.dpd-connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.dpd-engine-card {
  background: linear-gradient(135deg, var(--dpd-dark), var(--dpd-navy));
  border-radius: 34px;
  padding: 70px;
  color: #fff;
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dpd-engine-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px; height: 220px;
  flex-shrink: 0;
}
.dpd-logo-circle {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 6px rgba(21,198,226,.12), 0 20px 60px rgba(0,0,0,.35);
}
.dpd-logo-circle svg { width: 100%; height: 100%; display: block; }
.dpd-svg-1 { fill: #00a2dd; }
.dpd-svg-2 { fill: var(--dpd-dark); }
.dpd-svg-3 { fill: #1f3f59; }
.dpd-radar-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: dpdRadar 5.5s cubic-bezier(.22,.61,.36,1) infinite;
}
.r1 { border: 1.5px solid rgba(21,198,226,.75); animation-delay: 0s; }
.r2 { border: 1.5px solid rgba(21,198,226,.55); animation-delay: 1.375s; }
.r3 { border: 1px   solid rgba(21,198,226,.38); animation-delay: 2.75s; }
.r4 { border: 1px   solid rgba(254,211,3,.28);  animation-delay: 4.125s; }
@keyframes dpdRadar {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0;  }
}
.signal-node {
  position: absolute;
  background: #fff;
  color: var(--dpd-navy);
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 14px;
}
.left1 { left: 40px;  top: 80px; }
.left2 { left: 30px;  bottom: 90px; }
.right1 { right: 35px; top: 110px; }
.right2 { right: 30px; bottom: 90px; }
.dpd-benefits { display: grid; }
.benefit {
  display: flex;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--dpd-navy-08);
}
.benefit span { font-weight: 900; color: var(--dpd-aurora); font-size: 18px; }
.benefit h4   { margin: 0 0 10px; font-size: 28px; color: var(--dpd-navy); }
.benefit p    { margin: 0; line-height: 1.8; color: #5e6d82; }


/* ================================================================
   SECTION 6 — FAQ
================================================================ */
.dpd-faq-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(21,198,226,.08), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(254,211,3,.10), transparent 28%),
    #ffffff;
  padding: 70px 18px;
  overflow: hidden;
}
.dpd-faq-wrap {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.dpd-faq-left h3 {
  margin: 0;
  color: var(--dpd-navy);
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 900;
}
.dpd-faq-left p {
  margin: 22px 0 32px;
  color: var(--dpd-text);
  font-size: 17px;
  line-height: 1.8;
  max-width: 520px;
}
.dpd-faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--dpd-navy);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  transition: .25s ease;
}
.dpd-faq-btn:hover { background: var(--dpd-dark); color: #fff; transform: translateY(-2px); }
.dpd-faq-accordion { display: grid; gap: 14px; }
.dpd-faq-item {
  background: #fff;
  border: 1px solid var(--dpd-navy-08);
  border-radius: 22px;
  overflow: hidden;
  transition: .25s ease;
}
.dpd-faq-item:hover   { border-color: rgba(21,198,226,.32); }
.dpd-faq-item.active  { border-color: rgba(21,198,226,.36); box-shadow: 0 22px 55px rgba(10,37,64,.08); }
.dpd-faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--dpd-navy);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.dpd-faq-question:hover,
.dpd-faq-question:focus { background: transparent; outline: none; color: var(--dpd-navy); }
.dpd-faq-question span {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dpd-aurora-10);
  position: relative;
}
.dpd-faq-question span:before,
.dpd-faq-question span:after {
  content: "";
  position: absolute;
  background: var(--dpd-aurora);
  border-radius: 999px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.dpd-faq-question span:before { width: 14px; height: 2px; }
.dpd-faq-question span:after  { width: 2px; height: 14px; transition: .25s ease; }
.dpd-faq-item.active .dpd-faq-question span:after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.dpd-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dpd-faq-item.active .dpd-faq-answer { max-height: 180px; }
.dpd-faq-answer p { margin: 0; padding: 0 26px 24px; color: #5C6A7E; font-size: 15.5px; line-height: 1.75; }


/* ================================================================
   SECTION 7 — FINAL CTA
================================================================ */
.dpd-final-cta {
  padding: 70px 18px;
  background: #fff;
  overflow: hidden;
}
.dpd-final-wrap { max-width: 1250px; margin: auto; }
.dpd-cta-panel {
  position: relative;
  overflow: hidden;
  padding: 95px 60px;
  border-radius: 42px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(21,198,226,.24), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(254,211,3,.18), transparent 30%),
    linear-gradient(135deg, var(--dpd-dark) 0%, var(--dpd-navy) 100%);
}
.dpd-cta-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 42px 42px;
}
.dpd-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .4;
}
.glow-1 { width: 280px; height: 280px; background: var(--dpd-aurora); left: -60px; top: -60px; }
.glow-2 { width: 260px; height: 260px; background: var(--dpd-yellow); right: -40px; bottom: -50px; }
.dpd-cta-panel h2 {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(35px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 950;
  max-width: 900px;
}
.dpd-cta-panel h2 span { display: block; color: var(--dpd-yellow); }
.dpd-cta-panel p {
  position: relative;
  z-index: 2;
  margin: 28px auto 42px;
  max-width: 760px;
  color: rgba(255,255,255,.75);
  font-size: 18px;
  line-height: 1.85;
}
.dpd-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.dpd-cta-actions a {
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 16px;
  font-weight: 900;
  transition: .3s;
}
.dpd-cta-actions a:hover { transform: translateY(-3px); }
.dpd-cta-actions .primary-btn   { background: var(--dpd-orange); color: var(--dpd-dark); }
.dpd-cta-actions .secondary-btn { background: var(--dpd-aurora); color: var(--dpd-dark); }


/* ================================================================
   RESPONSIVE — TABLET  ≤ 1024px
================================================================ */
@media (max-width: 1024px) {

  /* Hero */
  .dpd-home-hero { min-height: auto; padding: 78px 18px; }
  .dpd-hero-container { grid-template-columns: 1fr; gap: 44px; }
  .dpd-hero-content { max-width: 760px; text-align: center; margin: 0 auto; }
  .dpd-hero-content p { margin-left: auto; margin-right: auto; }
  .dpd-hero-actions, .dpd-hero-trust { justify-content: center; }
  .dpd-hero-visual { max-width: 780px; margin: 0 auto; min-height: auto; }

  /* Impact */
  .dpd-impact-carousel-section { padding: 60px 18px; }
  .dpd-impact-card { flex-basis: calc((100% - 18px) / 2); }

  /* Tabs */
  .dpd-tabs-section { padding: 60px 18px; }
  .dpd-tab-panel { grid-template-columns: 1fr; gap: 44px; }
  .dpd-tabs-nav { margin-bottom: 46px; }
  .dpd-tab-btn { font-size: 26px; }
  .dpd-float { display: none; }

  /* Integrations */
  .dpd-plugin-slider-wrap { overflow: hidden; padding-bottom: 2px; }
  .dpd-plugin-track { display: flex; gap: 20px; transition: transform .48s cubic-bezier(.25,.46,.45,.94); will-change: transform; }
  .dpd-plugin-card { flex: 0 0 calc(50% - 10px); min-width: calc(50% - 10px); transform: none !important; }
  .dpd-slider-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; margin-top: 30px;
  }
  .dpd-slider-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid rgba(10,37,64,.14);
    background: #fff; color: var(--dpd-navy);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .28s;
    box-shadow: 0 4px 16px rgba(10,37,64,.07); padding: 0;
  }
  .dpd-slider-arrow:hover { border-color: var(--dpd-aurora); color: var(--dpd-aurora); box-shadow: 0 6px 22px rgba(21,198,226,.18); }
  .dpd-slider-arrow:disabled { opacity: .3; cursor: default; box-shadow: none; }
  .dpd-slider-dots { display: flex; align-items: center; gap: 8px; }
  .dpd-slider-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(10,37,64,.18); border: none; padding: 0; cursor: pointer; transition: .3s;
  }
  .dpd-slider-dot.active { background: var(--dpd-aurora); width: 26px; border-radius: 4px; }
  .dpd-connect-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .dpd-faq-section { padding: 60px 18px; }
  .dpd-faq-wrap { grid-template-columns: 1fr; gap: 44px; }
  .dpd-faq-left { max-width: 760px; }

  /* CTA */
  .dpd-cta-panel { padding: 75px 38px; }
}


/* ================================================================
   RESPONSIVE — MOBILE  ≤ 767px
================================================================ */
@media (max-width: 767px) {

  /* Hero */
  .dpd-home-hero { padding: 64px 16px; }
  .dpd-hero-pattern { background-size: 300px auto; opacity: .18; }
  .dpd-hero-content h1 { font-size: 39px; line-height: 1.08; }
  .dpd-hero-content p  { font-size: 15.5px; line-height: 1.75; }
  .dpd-hero-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .dpd-btn { width: 100%; }
  .dpd-home-hero .dpd-btn-secondary { display: none; }
  .dpd-hero-trust { display: grid; gap: 8px; justify-content: center; text-align: left; font-size: 12.5px; }
  .dpd-hero-visual { display: none; }

  /* Impact */
  .dpd-impact-carousel-section { padding: 60px 18px; }
  .dpd-impact-container { text-align: left; }
  .dpd-impact-container h2 { font-size: 34px; line-height: 1.15; }
  .dpd-impact-container > p { font-size: 15.5px; line-height: 1.75; margin-bottom: 28px; }
  .dpd-impact-window { overflow: visible; padding: 0; }
  .dpd-impact-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; -webkit-overflow-scrolling: touch; transform: none !important; }
  .dpd-impact-card { flex: 0 0 84%; min-height: 292px; border-radius: 22px; padding: 24px 20px; scroll-snap-align: start; }
  .dpd-impact-controls { display: none; }

  /* Tabs */
  .dpd-tabs-section { padding: 60px 18px; }
  .dpd-tabs-wrap > h2 { font-size: 34px; line-height: 1.15; text-align: left; margin-bottom: 34px; }
  .dpd-tabs-wrap > p  { font-size: 15.5px; line-height: 1.75; text-align: left; }
  .dpd-tabs-nav { display: flex; overflow-x: auto; gap: 26px; padding-bottom: 18px; margin-bottom: 36px; -webkit-overflow-scrolling: touch; }
  .dpd-tabs-nav::-webkit-scrollbar { display: none; }
  .dpd-tab-btn { flex: 0 0 auto; font-size: 18px; padding: 0; }
  .dpd-tab-panel { gap: 34px; }
  .dpd-ui-bg { min-height: auto; padding: 18px; border-radius: 22px; }
  .dpd-ui-window { padding: 20px; border-radius: 20px; }
  .dpd-phone-card { flex-direction: column; align-items: flex-start; }
  .dpd-mini-grid, .dpd-risk-pills { grid-template-columns: 1fr; }
  .dpd-score-area { flex-direction: column; align-items: flex-start; }
  .dpd-tab-content h3 { font-size: 28px; }
  .dpd-tab-content p  { font-size: 15.5px; }
  .dpd-tab-content li { font-size: 15.5px; padding-left: 38px; }

  /* Integrations */
  .dpd-integrations-section { padding: 75px 16px; }
  .dpd-plugin-card { flex: 0 0 100%; min-width: 100%; }
  .dpd-logo-wrap { width: 160px; height: 60px; }
  .dpd-youcan-logo { height: 78px; width: 175px; }
  .dpd-engine-card { padding: 50px 30px; min-height: auto; }
  .dpd-engine-center, .dpd-logo-circle, .dpd-radar-ring { width: 160px; height: 160px; }
  .dpd-logo-circle { padding: 26px; }
  .signal-node { display: none; }
  .benefit h4 { font-size: 22px; }

  /* FAQ */
  .dpd-faq-section { padding: 60px 18px; }
  .dpd-faq-left h3 { font-size: 36px; }
  .dpd-faq-left p   { font-size: 15.5px; }
  .dpd-faq-question { padding: 20px 18px; font-size: 16px; }
  .dpd-faq-question span { width: 30px; height: 30px; }
  .dpd-faq-answer p { padding: 0 18px 20px; font-size: 14.5px; }

  /* CTA */
  .dpd-final-cta { padding: 40px 16px; }
  .dpd-cta-panel { padding: 54px 24px; border-radius: 30px; }
  .dpd-cta-panel h2 { font-size: 38px; line-height: 1.08; }
  .dpd-cta-panel p  { font-size: 15.5px; line-height: 1.75; }
  .dpd-cta-actions { flex-direction: column; }
  .dpd-cta-actions a { width: 100%; }
}


/* ================================================================
   DARK THEME OVERRIDES
   Converts all white/light sections to near-black palette.
   Inspired by: auraguardian.co
   Base dark:  #0E0E10  (near-black, slightly warm)
   Card dark:  #161618  (lifted surface)
   Card alt:   #1C1C1F  (secondary surface)
   Border:     rgba(255,255,255,.08)
   Text body:  rgba(255,255,255,.70)
   Text muted: rgba(255,255,255,.44)
================================================================ */

:root {
  --dpd-bg:          #0E0E10;
  --dpd-surface:     #161618;
  --dpd-surface-alt: #1C1C1F;
  --dpd-border:      rgba(255,255,255,.08);
  --dpd-border-hover:rgba(21,198,226,.28);
  --dpd-body-text:   rgba(255,255,255,.70);
  --dpd-muted-text:  rgba(255,255,255,.44);
}

/* ── Page body base ──────────────────────────────────────────── */
body {
  background: var(--dpd-bg);
}

/* ── Section backgrounds ─────────────────────────────────────── */

/* Impact: was white with faint aurora/orange radials */
.dpd-impact-carousel-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(21,198,226,.06), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,168,0,.07), transparent 26%),
    var(--dpd-bg);
}

/* Impact heading/text on dark bg */
.dpd-impact-container h2 { color: #fff; }
.dpd-impact-container > p { color: var(--dpd-body-text); }

/* Tabs: was light blue-grey gradient */
.dpd-tabs-section {
  background:
    radial-gradient(circle at 80% 0%, rgba(21,198,226,.05), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(254,211,3,.04), transparent 30%),
    var(--dpd-bg);
}
.dpd-tabs-wrap > h2  { color: #fff; }
.dpd-tabs-wrap > p   { color: var(--dpd-body-text); }
.dpd-tab-btn         { color: rgba(255,255,255,.38); }
.dpd-tab-btn:hover,
.dpd-tab-btn:focus,
.dpd-tab-btn.is-active { color: #fff; }
.dpd-tabs-nav:before { background: rgba(255,255,255,.10); }

/* Integrations: was plain white */
.dpd-integrations-section { background: var(--dpd-bg); }
.dpd-int-wrap h2           { color: #fff; }

/* FAQ: was white with faint radials */
.dpd-faq-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(21,198,226,.05), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(254,211,3,.06), transparent 28%),
    var(--dpd-bg);
}
.dpd-faq-left h3 { color: #fff; }
.dpd-faq-left p  { color: var(--dpd-body-text); }

/* CTA: was white wrapper around dark panel — just darken wrapper */
.dpd-final-cta { background: var(--dpd-bg); }


/* ── Impact carousel cards ───────────────────────────────────── */
/* Cards already dark (dpd-navy/dark gradient) — they work fine on dark bg */
/* Just adjust dot controls */
.dpd-mini-nav svg path          { stroke: rgba(255,255,255,.50); }
.dpd-mini-nav:hover svg path    { stroke: var(--dpd-aurora); }
.dpd-impact-dot                 { background: rgba(255,255,255,.20); }
.dpd-impact-dot.is-active       { background: var(--dpd-aurora); }


/* ── Tabs UI window (light card inside dark section) ─────────── */
/* Keep the UI mockup white — it's meant to look like a product screenshot */
/* Only adjust the tab content text */
.dpd-tab-content h3 { color: #fff; }
.dpd-tab-content p  { color: var(--dpd-body-text); }
.dpd-tab-content li { color: rgba(255,255,255,.88); }
.dpd-tab-content li:before { background: var(--dpd-aurora); }


/* ── Integration cards ───────────────────────────────────────── */
.dpd-plugin-card {
  background: var(--dpd-surface);
  border-color: var(--dpd-border);
  box-shadow: none;
}
.dpd-plugin-card:hover {
  background: var(--dpd-surface-alt);
  border-color: var(--dpd-aurora);
  box-shadow: 0 18px 45px rgba(21,198,226,.10);
  transform: translateY(-6px);
}
.dpd-plugin-meta h4 { color: #fff; }
.dpd-plugin-meta p  { color: var(--dpd-muted-text); }

/* Benefits list */
.benefit { border-bottom-color: var(--dpd-border); }
.benefit h4 { color: #fff; }
.benefit p  { color: var(--dpd-body-text); }

/* Slider arrows on dark bg */
.dpd-slider-arrow {
  background: var(--dpd-surface);
  border-color: var(--dpd-border);
  color: rgba(255,255,255,.70);
}
.dpd-slider-arrow:hover {
  background: var(--dpd-surface-alt);
  border-color: var(--dpd-aurora);
  color: var(--dpd-aurora);
}
.dpd-slider-dot         { background: rgba(255,255,255,.18); }
.dpd-slider-dot.active  { background: var(--dpd-aurora); }


/* ── FAQ accordion ───────────────────────────────────────────── */
.dpd-faq-item {
  background: var(--dpd-surface);
  border-color: var(--dpd-border);
}
.dpd-faq-item:hover  { border-color: var(--dpd-border-hover); }
.dpd-faq-item.active {
  border-color: rgba(21,198,226,.30);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
}
.dpd-faq-question            { color: #fff; }
.dpd-faq-question:hover,
.dpd-faq-question:focus      { color: #fff; }
.dpd-faq-question span       { background: rgba(21,198,226,.12); }
.dpd-faq-answer p            { color: var(--dpd-body-text); }
.dpd-faq-btn                 { background: var(--dpd-surface-alt); border: 1px solid var(--dpd-border); }
.dpd-faq-btn:hover           { background: var(--dpd-aurora); color: var(--dpd-navy); border-color: var(--dpd-aurora); }


/* ── Mini nav prev/next on dark ─────────────────────────────── */
.dpd-mini-nav:hover { background: rgba(255,255,255,.06); }


/* ── Responsive: keep dark on mobile too ────────────────────── */
@media (max-width: 1024px) {
  .dpd-slider-arrow {
    background: var(--dpd-surface);
    border-color: var(--dpd-border);
  }
}