/* ============================================================
   DEX Demo Landing — design tokens
   ============================================================ */
:root {
  /* DEX brand palette */
  --dex-orange:        #DD4814;
  --dex-orange-hover:  #B83A0F;
  --dex-orange-soft:   #FDECE5;
  --dex-orange-ring:   rgba(221, 72, 20, 0.22);
  --dex-orange-border: #F8C5B0;
  --dex-navy:          #0F172A;
  --dex-navy-2:        #1E293B;
  --dex-slate:         #64748B;
  --dex-slate-2:       #475569;
  --dex-bg-soft:       #F8FAFC;

  /* Semantic */
  --dex-bg:            #F8FAFC;
  --dex-bg-grid:       #E2E8F0;
  --dex-surface:       #FFFFFF;
  --dex-surface-soft:  #F1F5F9;
  --dex-surface-sunken:#E2E8F0;

  --dex-text:          var(--dex-navy);
  --dex-text-2:        var(--dex-navy-2);
  --dex-muted:         var(--dex-slate);
  --dex-muted-2:       #94A3B8;

  --dex-border:        #E2E8F0;
  --dex-border-strong: #CBD5E1;

  --dex-primary:       var(--dex-orange);
  --dex-primary-hover: var(--dex-orange-hover);
  --dex-primary-soft:  var(--dex-orange-soft);
  --dex-primary-ring:  var(--dex-orange-ring);

  --dex-accent:        var(--dex-navy);
  --dex-accent-soft:   #EEF2F7;

  --dex-success:       #16A34A;
  --dex-success-soft:  #ECFDF5;
  --dex-warning:       #CA8A04;
  --dex-warning-soft:  #FEFCE8;
  --dex-danger:        #DC2626;
  --dex-danger-soft:   #FEF2F2;
  --dex-info:          #0284C7;
  --dex-info-soft:     #F0F9FF;

  --dex-radius-sm: 8px;
  --dex-radius:    12px;
  --dex-radius-lg: 18px;
  --dex-radius-xl: 24px;

  --dex-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --dex-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -14px rgba(15, 23, 42, .18);
  --dex-shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 28px 56px -22px rgba(15, 23, 42, .22);

  --dex-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dex-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --dex-content-w: 1200px;

  /* Section rhythm */
  --dex-section-y:   120px;
  --dex-section-y-sm: 72px;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--dex-font-sans);
  font-feature-settings: "cv11", "ss01";
  color: var(--dex-text);
  background: var(--dex-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

a { color: var(--dex-primary); text-decoration: none; }
a:hover { color: var(--dex-primary-hover); }

h1, h2, h3, h4 {
  letter-spacing: -0.025em;
  color: var(--dex-navy);
  text-wrap: balance;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-weight: 700; line-height: 1.1;  letter-spacing: -0.025em; }
h3 { font-weight: 600; letter-spacing: -0.015em; }

p {
  color: var(--dex-slate-2);
  text-wrap: pretty;
  font-size: 1rem;
  line-height: 1.65;
}

.container { max-width: var(--dex-content-w); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 600 12px/1 var(--dex-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dex-primary);
  padding: .55rem .75rem;
  border-radius: 999px;
  background: var(--dex-primary-soft);
  border: 1px solid var(--dex-primary-ring);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dex-primary);
  box-shadow: 0 0 0 4px var(--dex-primary-ring);
}

.muted { color: var(--dex-muted); }
.mono  { font-family: var(--dex-font-mono); }

section {
  padding-top: var(--dex-section-y);
  padding-bottom: var(--dex-section-y);
}
.dex-hero { padding-top: 30px; padding-bottom: var(--dex-section-y); }

@media (max-width: 991.98px) {
  :root { --dex-section-y: 88px; }
}
@media (max-width: 575.98px) {
  :root { --dex-section-y: var(--dex-section-y-sm); }
  .dex-hero { padding-top: 0px; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-dex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  padding: 0.85rem 1.35rem;
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-dex-sm {
  padding: 0.55rem 0.9rem;
  min-height: 38px;
  font-size: 0.875rem;
}
.btn-dex:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--dex-primary-ring);
}

.btn-dex-primary {
  background: var(--dex-primary);
  color: #fff;
  box-shadow: var(--dex-shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-dex-primary:hover {
  background: var(--dex-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--dex-shadow);
}

.btn-dex-secondary {
  background: var(--dex-surface);
  color: var(--dex-text);
  border-color: var(--dex-border-strong);
}
.btn-dex-secondary:hover {
  background: var(--dex-surface-soft);
  color: var(--dex-text);
  border-color: var(--dex-text);
}

.btn-dex-ghost {
  background: transparent;
  color: var(--dex-text-2);
}
.btn-dex-ghost:hover {
  background: var(--dex-surface-soft);
  color: var(--dex-text);
}

.btn-dex .arrow {
  transition: transform .2s ease;
}
.btn-dex:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Navigation
   ============================================================ */
.dex-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dex-nav.is-scrolled {
  border-bottom-color: var(--dex-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.dex-nav .navbar { padding: 16px 0; }

.dex-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 700;
  color: var(--dex-text);
  letter-spacing: -0.01em;
}
.dex-brand:hover { color: var(--dex-text); }

.dex-brand .logo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--dex-orange);
}
.dex-brand .tag {
  margin-left: -10px;
  border-radius: 6px;
  font: 600 11px/1.4 var(--dex-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dex-muted);
}

.dex-nav .nav-link {
  color: var(--dex-slate-2);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.dex-nav .nav-link:hover { color: var(--dex-text); background: var(--dex-surface-soft); }
.dex-nav .btn-dex { margin-left: .25rem; }

/* ============================================================
   Hero
   ============================================================ */
.dex-hero {
  position: relative;
  overflow: hidden;
}
.dex-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--dex-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dex-bg-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: .8;
  pointer-events: none;
}
.dex-hero > .container { position: relative; z-index: 1; }

.dex-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3rem);
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}
.dex-hero h1 .accent {
  color: var(--dex-orange);
  position: relative;
  white-space: nowrap;
}
.dex-hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.20em;
  background: var(--dex-orange-soft);
  border-radius: 3px;
  z-index: -1;
}
.dex-hero .lede {
  font-size: 1.18rem;
  color: var(--dex-slate);
  max-width: 36rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.dex-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.dex-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .65rem;
  margin-top: 2rem;
}
.dex-trust .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font: 500 12px/1 var(--dex-font-mono);
  color: var(--dex-muted);
  background: var(--dex-surface);
  border: 1px solid var(--dex-border);
  border-radius: 999px;
}
.dex-trust .chip svg { color: var(--dex-success); }

/* Hero preview frame (browser chrome) */
.dex-frame {
  background: var(--dex-surface);
  border: 1px solid var(--dex-border);
  border-radius: var(--dex-radius-lg);
  box-shadow: var(--dex-shadow-lg);
  overflow: hidden;
}
.dex-frame__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 10px 14px;
  background: var(--dex-surface-soft);
  border-bottom: 1px solid var(--dex-border);
}
.dex-frame__dots {
  display: inline-flex; gap: 6px;
}
.dex-frame__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #d6d3d1;
  display: inline-block;
}
.dex-frame__dots i:nth-child(1){ background:#fb7185; }
.dex-frame__dots i:nth-child(2){ background:#fbbf24; }
.dex-frame__dots i:nth-child(3){ background:#34d399; }
.dex-frame__url {
  flex: 1;
  font: 500 12px/1 var(--dex-font-mono);
  color: var(--dex-muted);
  background: var(--dex-surface);
  padding: 6px 10px;
  border: 1px solid var(--dex-border);
  border-radius: 6px;
}

/* Hero issue preview body */
.dex-issue {
  padding: 20px;
}
.dex-issue__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 14px;
}
.dex-issue__title {
  font: 600 1.05rem/1.3 var(--dex-font-sans);
  margin: 0 0 4px;
}
.dex-issue__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem;
  font: 500 12px/1 var(--dex-font-mono);
  color: var(--dex-muted);
}
.dex-issue__meta .sep { color: var(--dex-border-strong); }

.dex-issue__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 14px 0 4px;
}
.dex-issue__stat {
  background: var(--dex-surface-soft);
  border: 1px solid var(--dex-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.dex-issue__stat .k {
  font: 500 11px/1 var(--dex-font-mono);
  color: var(--dex-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dex-issue__stat .v {
  font: 600 1rem/1.3 var(--dex-font-sans);
  margin-top: 4px;
  color: var(--dex-text);
}

/* ============================================================
   Status / method badges (shared)
   ============================================================ */
.badge-dex {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 600 11px/1 var(--dex-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .4rem .55rem;
  border-radius: 6px;
  background: var(--dex-surface-soft);
  color: var(--dex-muted);
  border: 1px solid var(--dex-border);
}
.badge-dex.is-open       { background: var(--dex-danger-soft); color: var(--dex-danger); border-color: #fecaca; }
.badge-dex.is-regressed  { background: var(--dex-warning-soft); color: #a16207; border-color: #fde68a; }
.badge-dex.is-resolved   { background: var(--dex-success-soft); color: var(--dex-success); border-color: #bbf7d0; }
.badge-dex.is-method     { background: var(--dex-orange-soft); color: var(--dex-orange-hover); border-color: var(--dex-orange-border); }
.badge-dex.is-500        { background: var(--dex-danger-soft); color: var(--dex-danger); border-color: #fecaca; }
.badge-dex.is-429        { background: var(--dex-warning-soft); color: #a16207; border-color: #fde68a; }
.badge-dex.is-401        { background: #EEF2F7; color: var(--dex-navy); border-color: #CBD5E1; }

.badge-dex.is-dot::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Scenario cards
   ============================================================ */
.dex-section-head {
  max-width: 40rem;
  margin: 0 auto 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.dex-section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin: 0;
}
.dex-section-head p {
  color: var(--dex-slate);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

.scenario-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--dex-surface);
  border: 1px solid var(--dex-border);
  border-radius: var(--dex-radius-lg);
  padding: 24px;
  box-shadow: var(--dex-shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
}
.scenario-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dex-shadow);
  border-color: var(--dex-border-strong);
  color: inherit;
}
.scenario-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--dex-primary-ring);
  border-color: var(--dex-primary);
}

.scenario-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.scenario-card__industry {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  font: 600 11px/1 var(--dex-font-mono);
  color: var(--dex-text-2);
  background: var(--dex-surface-soft);
  border: 1px solid var(--dex-border);
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.scenario-card__industry .swatch {
  width: 8px; height: 8px; border-radius: 50%;
}
.scenario-card[data-cat="ecommerce"] .swatch { background: var(--dex-orange); }
.scenario-card[data-cat="api"]       .swatch { background: #0284C7; }
.scenario-card[data-cat="texting"]   .swatch { background: #16A34A; }
.scenario-card[data-cat="email"]     .swatch { background: #7C3AED; }
.scenario-card[data-cat="reports"]   .swatch { background: #A16207; }
.scenario-card[data-cat="inventory"] .swatch { background: var(--dex-navy); }

.scenario-card h3 {
  font-size: 1.3rem;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.scenario-card__desc {
  color: var(--dex-slate);
  margin: 0 0 18px;
  font-size: 0.97rem;
  line-height: 1.55;
}

.scenario-card__kv {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 6px 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px dashed var(--dex-border-strong);
  border-radius: 10px;
  background: var(--dex-surface-soft);
}
.scenario-card__kv dt {
  font: 600 11px/1.6 var(--dex-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dex-muted);
}
.scenario-card__kv dd {
  margin: 0;
  font: 500 13px/1.5 var(--dex-font-mono);
  color: var(--dex-text);
  word-break: break-all;
}
.scenario-card__kv dd .ex { color: var(--dex-danger); }

.scenario-card__lifecycle {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-card__lifecycle li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  color: var(--dex-text-2);
  line-height: 1.45;
}
.scenario-card__lifecycle li::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dex-border-strong);
}
.scenario-card__lifecycle li::after {
  content: "";
  position: absolute;
  left: 8.5px; top: 14px;
  bottom: -8px;
  width: 1px;
  background: var(--dex-border);
}
.scenario-card__lifecycle li:last-child::after { display: none; }
.scenario-card__lifecycle li.is-fail { color: var(--dex-text); font-weight: 500; }
.scenario-card__lifecycle li.is-fail::before {
  background: var(--dex-danger);
  box-shadow: 0 0 0 4px var(--dex-danger-soft);
}

.scenario-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--dex-border);
}
.scenario-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--dex-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.scenario-card__cta .arrow { transition: transform .2s ease; }
.scenario-card:hover .scenario-card__cta .arrow { transform: translateX(4px); }

/* ============================================================
   Section: Controlled Demo (3 blocks)
   ============================================================ */
.dex-section--controlled {
  background: var(--dex-surface);
  border-top: 1px solid var(--dex-border);
  border-bottom: 1px solid var(--dex-border);
}

.feature-block {
  height: 100%;
  padding: 28px 26px;
  background: var(--dex-bg);
  border: 1px solid var(--dex-border);
  border-radius: var(--dex-radius-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-block:hover {
  border-color: var(--dex-border-strong);
  box-shadow: var(--dex-shadow-sm);
  transform: translateY(-2px);
}
.feature-block__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--dex-orange-soft);
  color: var(--dex-orange-hover);
  border: 1px solid var(--dex-orange-border);
  margin-bottom: 20px;
  font-size: 1.2rem;
}
.feature-block h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.feature-block p {
  color: var(--dex-slate);
  font-size: 0.985rem;
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   Section: Lifecycle Preview
   ============================================================ */
.lifecycle {
  background: var(--dex-surface);
  border: 1px solid var(--dex-border);
  border-radius: var(--dex-radius-lg);
  box-shadow: var(--dex-shadow);
  overflow: hidden;
}
.lifecycle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 22px;
  background: var(--dex-surface-soft);
  border-bottom: 1px solid var(--dex-border);
}
.lifecycle__head .label {
  font: 600 11px/1 var(--dex-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dex-muted);
}
.lifecycle__head .req {
  font: 500 13px/1 var(--dex-font-mono);
  color: var(--dex-text);
}

.lifecycle__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.lifecycle__list li {
  display: grid;
  grid-template-columns: 90px 24px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--dex-border);
  font-size: 0.95rem;
}
.lifecycle__list li:last-child { border-bottom: none; }
.lifecycle__list .t {
  font: 500 13px/1 var(--dex-font-mono);
  color: var(--dex-muted);
  text-align: right;
}
.lifecycle__list .dot {
  position: relative;
  width: 10px; height: 10px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--dex-border-strong);
}
.lifecycle__list .dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: -22px;
  width: 1px;
  background: var(--dex-border);
  transform: translateX(-50%);
}
.lifecycle__list li:last-child .dot::after { display: none; }
.lifecycle__list .label {
  font-family: var(--dex-font-sans);
  color: var(--dex-text-2);
}
.lifecycle__list .label .mono { color: var(--dex-text); font-size: 0.85em; }
.lifecycle__list .tag {
  font: 600 10px/1 var(--dex-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--dex-surface-soft);
  color: var(--dex-muted);
  border: 1px solid var(--dex-border);
  white-space: nowrap;
}
.lifecycle__list .tag.is-span { color: var(--dex-info); background: var(--dex-info-soft); border-color: #bae6fd; }
.lifecycle__list .tag.is-db   { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.lifecycle__list .tag.is-bc   { color: var(--dex-success); background: var(--dex-success-soft); border-color: #bbf7d0; }
.lifecycle__list .tag.is-route{ color: var(--dex-muted); }
.lifecycle__list .tag.is-resp { color: var(--dex-danger); background: var(--dex-danger-soft); border-color: #fecaca; }
.lifecycle__list .tag.is-exc  { color: #fff; background: var(--dex-danger); border-color: var(--dex-danger); }

.lifecycle__list li.is-fail {
  background: linear-gradient(90deg, var(--dex-danger-soft), transparent 80%);
}
.lifecycle__list li.is-fail .dot {
  background: var(--dex-danger);
  box-shadow: 0 0 0 4px var(--dex-danger-soft);
}
.lifecycle__list li.is-fail .label { color: var(--dex-danger); font-weight: 600; }

.lifecycle-aside h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.lifecycle-aside p { color: var(--dex-muted); font-size: 1.02rem; }
.lifecycle-aside ul.checks {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; gap: 10px;
}
.lifecycle-aside ul.checks li {
  display: flex; align-items: flex-start; gap: .65rem;
  color: var(--dex-text-2);
}
.lifecycle-aside ul.checks li svg { flex: 0 0 18px; color: var(--dex-success); margin-top: 2px; }

/* ============================================================
   Dashboard CTA
   ============================================================ */
.dex-cta-panel {
  position: relative;
  background: var(--dex-navy);
  color: #F8FAFC;
  border-radius: var(--dex-radius-xl);
  padding: 72px clamp(28px, 5vw, 80px);
  overflow: hidden;
}
.dex-cta-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%);
  pointer-events: none;
}
.dex-cta-panel::after {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(221, 72, 20, 0.32), transparent 65%);
  pointer-events: none;
  filter: blur(6px);
}
.dex-cta-panel > * { position: relative; }
.dex-cta-panel .eyebrow {
  background: rgba(221, 72, 20, .14);
  border-color: rgba(221, 72, 20, .35);
  color: #FBB28E;
}
.dex-cta-panel .eyebrow .dot { background: var(--dex-orange); box-shadow: 0 0 0 4px rgba(221, 72, 20, .25); }
.dex-cta-panel h2 {
  color: #F8FAFC;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  margin: 1rem 0 .8rem;
}
.dex-cta-panel p {
  color: #CBD5E1;
  font-size: 1.1rem;
  max-width: 36rem;
  margin: 0;
  line-height: 1.6;
}
.dex-cta-panel .btn-dex-primary {
  background: var(--dex-orange);
  border-color: var(--dex-orange);
  box-shadow: 0 0 0 0 rgba(221, 72, 20, 0), 0 8px 24px -8px rgba(221, 72, 20, .65);
}
.dex-cta-panel .btn-dex-primary:hover {
  background: var(--dex-orange-hover);
  border-color: var(--dex-orange-hover);
}
.dex-cta-panel .btn-dex-secondary {
  background: transparent;
  color: #F8FAFC;
  border-color: rgba(255,255,255,.22);
}
.dex-cta-panel .btn-dex-secondary:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.dex-cta-panel .btn-dex-ghost {
  color: #CBD5E1;
}
.dex-cta-panel .btn-dex-ghost:hover {
  color: #fff; background: rgba(255,255,255,.06);
}

.copy-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 6px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  font: 500 13px/1 var(--dex-font-mono);
  color: #E2E8F0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  width: 100%;
  max-width: 380px;
}
.copy-link:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.copy-link .label {
  color: #94A3B8;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.copy-link .url { color: #F8FAFC; }
.copy-link .check { color: #34D399; opacity: 0; margin-left: auto; transition: opacity .15s ease; }
.copy-link.is-copied .check { opacity: 1; }
.copy-link.is-copied .copy-icon { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.dex-footer {
  border-top: 1px solid var(--dex-border);
  padding: 72px 0 40px;
  background: var(--dex-surface);
}
.dex-footer .row { gap: 32px 0; }
.dex-footer h4 {
  font: 600 11px/1 var(--dex-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dex-muted);
  margin-bottom: 16px;
}
.dex-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dex-footer ul a { color: var(--dex-text-2); font-size: 0.95rem; }
.dex-footer ul a:hover { color: var(--dex-primary); }
.dex-footer__tagline {
  color: var(--dex-muted);
  margin: 12px 0 0;
  max-width: 24rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.dex-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--dex-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--dex-muted);
  font-size: 0.875rem;
}

/* ============================================================
   Responsive niceties
   ============================================================ */
@media (max-width: 991.98px) {
  .dex-hero .hero-visual { margin-top: 48px; }
  .dex-cta-panel { padding: 56px 36px; }
}

@media (max-width: 575.98px) {
  .dex-issue__stats { grid-template-columns: repeat(2, 1fr); }
  .lifecycle__list li { grid-template-columns: 60px 16px 1fr auto; gap: 8px; padding: 12px 16px; font-size: 0.875rem; }
  .lifecycle__head { padding: 14px 16px; flex-wrap: wrap; }
  .scenario-card { padding: 20px; }
  .scenario-card__kv { grid-template-columns: 72px 1fr; }
  .dex-cta-panel { padding: 40px 24px; border-radius: var(--dex-radius-lg); }
  .btn-dex { width: 100%; }
  .dex-cta-row { width: 100%; }
}


/* Active nav link */
.dex-nav .nav-link.is-active {
  color: var(--dex-primary);
  background: var(--dex-primary-soft);
}