/* ============================================================
   ATX DECON — Design System
   Clean white + deep navy, single warm amber accent.
   Clinical, trustworthy, compassionate.
   ============================================================ */

:root {
  /* === ATX DECON BRAND PALETTE ===
     Deep Trust Blue #143D6B · Soft Clean White #F4F8FB · Action Blue #1E88E5 */

  /* Deep Trust Blue — headers, nav, key sections, dark surfaces */
  --navy-900: #0d2a4d;   /* darkest */
  --navy-800: #143D6B;   /* primary brand blue */
  --navy-700: #1c4d83;
  --navy-600: #245d9b;

  --ink:      #143D6B;   /* body headings on light */
  --slate:    #4a627e;   /* muted body text */
  --slate-2:  #7388a3;   /* faint text */

  --paper:      #ffffff;
  --paper-soft: #F4F8FB; /* Soft Clean White — section bg */
  --paper-warm: #eef4fb; /* tinted blue band (replaces warm) */
  --line:       #e2eaf3; /* hairline on light */
  --line-2:     #d0dcea;
  --line-dark:  rgba(255,255,255,.12); /* hairline on dark */

  /* Action Blue — CTAs, links, interactive, hover (tweakable) */
  --accent:        #1E88E5;
  --accent-bright: #3f9bef;  /* hover */
  --accent-deep:   #1567b4;  /* press */
  --accent-soft:   #e3f0fc;  /* tint bg on light */
  --accent-ink:    #1567b4;  /* accent text on light */

  /* Support: calm sage for "safe / restored" cues */
  --safe:      #2f8f6a;
  --safe-soft: #e3f3ec;

  /* Violet — secondary brand accent: eyebrows, CTAs, icons, step numbers */
  --violet:        #633B89;
  --violet-bright: #8a5fb0;  /* hover + on-dark contexts */
  --violet-deep:   #4a2a68;  /* press */
  --violet-soft:   #efe8f5;  /* tint bg on light */
  --violet-ink:    #51307180;

  --on-dark:        #f3f7fc;
  --on-dark-mute:   #b7c6da;
  --on-dark-faint:  #7d92ac;

  /* --- Type --- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Radius (tweakable: clinical-sharp vs soft) --- */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Spacing --- */
  --maxw: 1200px;
  --gut: 24px;

  /* --- Shadows (soft, premium, rare) --- */
  --shadow-sm: 0 1px 2px rgba(16,42,67,.06), 0 2px 8px rgba(16,42,67,.05);
  --shadow-md: 0 6px 18px rgba(16,42,67,.08), 0 2px 6px rgba(16,42,67,.05);
  --shadow-lg: 0 24px 60px rgba(16,42,67,.16), 0 8px 24px rgba(16,42,67,.08);
  --shadow-accent: 0 14px 34px rgba(30,136,229,.32);
}

* { box-sizing: border-box; }

::selection { background: var(--violet); color: #fff; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gut); }

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 760px){ .section { padding: 64px 0; } }

.bg-soft { background: var(--paper-soft); }
.bg-warm { background: var(--paper-warm); }
.bg-navy { background: var(--navy-800); color: var(--on-dark); }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4 { color: #fff; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.bg-navy .eyebrow { color: var(--violet-bright); }
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(99,59,137,.18);
}

/* ---------- Type scale ---------- */
.display { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
.h1 { font-size: clamp(34px, 4.6vw, 52px); }
.h2 { font-size: clamp(28px, 3.6vw, 40px); }
.h3 { font-size: clamp(21px, 2.4vw, 27px); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--slate); line-height: 1.55; }
.bg-navy .lead { color: var(--on-dark-mute); }
.muted { color: var(--slate); }
.bg-navy .muted { color: var(--on-dark-mute); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .005em;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .2s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn i { font-size: .95em; }
.btn-accent {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 14px 34px rgba(99,59,137,.30);
}
.btn-accent:hover { background: var(--violet-bright); transform: translateY(-1px); }
.btn-accent:active { background: var(--violet-deep); transform: translateY(0); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--violet);
}
.btn-outline:hover { border-color: var(--violet-deep); background: var(--violet-soft); }
.bg-navy .btn-outline { color: #fff; border-color: var(--violet-bright); }
.bg-navy .btn-outline:hover { background: rgba(138,95,176,.18); border-color: var(--violet-bright); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 6px; padding-right: 6px; }
.btn-ghost:hover { color: var(--accent-ink); }
.btn-lg { padding: 18px 32px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Chips / badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.chip i { color: var(--safe); font-size: 13px; }
.bg-navy .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--on-dark); }
.bg-navy .chip i { color: var(--accent-bright); }

.badge-mono {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); font-weight: 500;
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* ---------- Image placeholder ---------- */
image-slot {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(135deg, #eef3f9 0%, #e4ecf6 100%);
}
.img-ph {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 10%, #f3f7fc 0%, #e6eef7 55%, #dbe6f2 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-2);
}
.img-ph .img-ph-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 20px;
}
.img-ph .img-ph-label i { font-size: 26px; opacity: .55; }

/* ---------- Hairline divider ---------- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Utility ---------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.grid { display: grid; gap: 24px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(30,136,229,.5); }
  50% { box-shadow: 0 0 0 6px rgba(30,136,229,0); }
}