/* ============================================================
   dbfam digital HUB — Shared Tool System  ·  hub.css
   DARK PREMIUM · mobile-first · English-first · self-contained
   ------------------------------------------------------------
   Design language: deep navy / midnight command-center.
   Quiet, structured, trustworthy, technological — never neon,
   never gaming-dark, never cheap-SaaS.
   Page = dark.  Tool canvases (inputs/results) = light/elevated
   for maximum readability.  Warm SAND is the only non-blue
   accent, used sparingly.
   ------------------------------------------------------------
   Load this ONCE per page. Every class is prefixed `db-`.
   To retheme the whole HUB, edit the TOKENS block only.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
/* ============================================================
   TOKENS  — the only place you edit to retheme
   ============================================================ */
:root {
  /* --- Dark surfaces (page) --- */
  --db-bg:        #10243A;   /* page base — deep navy midnight */
  --db-bg-deep:   #0C1B2C;   /* hero / footer / deepest */
  --db-bg-raise:  #132B44;   /* raised band */
  --db-card:      #172F49;   /* category / dark card */
  --db-card-2:    #1B3654;   /* card hover */
  --db-elevated:  #203D5F;   /* elevated card / premium */
  --db-well:      #1B3654;   /* dark input well (rare) */

  /* --- Lines --- */
  --db-border:    rgba(255,255,255,.10);
  --db-border-2:  rgba(255,255,255,.18);
  --db-glow-line: rgba(111,160,208,.42);

  /* --- Text on dark --- */
  --db-text:      #F5F7FA;   /* offwhite, strong */
  --db-text-2:    #B8C4D2;   /* muted body — still high contrast */
  --db-text-3:    #8A9AAA;   /* soft blue-grey, captions only (>=12px) */

  /* --- Accent (brightened dbfam blue, legible on navy) --- */
  --db-accent:    #6FA0D0;
  --db-accent-2:  #9CC0E4;
  --db-accent-dim:rgba(111,160,208,.14);
  --db-accent-line:rgba(111,160,208,.30);

  /* --- Sand: the only warm highlight, used sparingly --- */
  --db-sand:      #D8C7A3;
  --db-sand-2:    #E6D9BD;
  --db-sand-dim:  rgba(216,199,163,.13);
  --db-sand-line: rgba(216,199,163,.34);

  /* --- Primary CTA: lighter blue on dark (never green/sale) --- */
  --db-cta:       #3D72AE;
  --db-cta-hover: #4A82C2;

  /* --- Brand anchors (reference) --- */
  --db-navy:      #315D8A;
  --db-navy-dark: #2A4F7A;

  /* --- Muted status (small indicators only, not buttons) --- */
  --db-ok:   #6FB39A;
  --db-warn: #D8B06A;
  --db-bad:  #D08C72;

  /* --- Shadows / glow --- */
  --db-shadow:    0 14px 40px rgba(4,12,22,.55);
  --db-shadow-sm: 0 6px 18px rgba(4,12,22,.40);
  --db-glow:      0 0 0 1px rgba(111,160,208,.22), 0 12px 30px rgba(30,72,128,.42);

  /* --- Type --- */
  --db-font-head: system-ui, system-ui, -apple-system, "Segoe UI", sans-serif;
  --db-font-body: system-ui, system-ui, -apple-system, "Segoe UI", sans-serif;
  --db-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* --- Radii --- */
  --db-r-sm: 10px;  --db-r-md: 14px;  --db-r-lg: 18px;  --db-r-xl: 24px;  --db-r-pill: 999px;

  /* --- Rhythm --- */
  --db-maxw: 1120px;
  --db-gutter: 18px;
  --db-header-h: 62px;

  /* --- Light tool-canvas palette (inputs/results need crisp readability) --- */
  --tc-surface:  #FFFFFF;   /* input pane */
  --tc-field:    #F5F7FA;   /* field fill */
  --tc-ink:      #15314E;   /* navy ink text */
  --tc-ink-2:    #44586E;   /* labels */
  --tc-ink-3:    #6B7C8F;   /* hints */
  --tc-line:     #DCE4EC;
  --tc-line-2:   #C6D2DE;
  --tc-accent:   #315D8A;   /* brand navy on light */
}

/* ============================================================
   BASE  (mobile-first)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--db-bg);
  color: var(--db-text);
  font-family: var(--db-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* hard guarantee: never scroll sideways on mobile */
}
img { max-width: 100%; display: block; }
a { color: var(--db-accent); text-decoration: none; }
a:hover { color: var(--db-accent-2); }
button { font-family: inherit; }
::selection { background: rgba(111,160,208,.32); }
:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout primitives ---------- */
.db-wrap   { width: 100%; max-width: var(--db-maxw); margin-inline: auto; padding-inline: var(--db-gutter); }
.db-narrow { max-width: 760px; }
.db-section{ padding-block: 40px; }
.db-stack > * + * { margin-top: 14px; }

/* Textures (hero / bands) — very subtle, structural not decorative */
.db-grid {
  background-image:
    linear-gradient(rgba(111,160,208,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,160,208,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
.db-dotgrid {
  background-image: radial-gradient(rgba(111,160,208,.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.db-eyebrow {
  font-family: var(--db-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--db-accent);
}
.db-h1 { font-family: var(--db-font-head); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.08; font-size: clamp(30px, 7vw, 56px); margin: 0; }
.db-h2 { font-family: var(--db-font-head); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.18; font-size: clamp(24px, 5vw, 32px); margin: 0; }
.db-h3 { font-family: var(--db-font-head); font-weight: 600; line-height: 1.25;
  font-size: clamp(19px, 4vw, 22px); margin: 0; }
.db-lead { font-size: clamp(16px, 4vw, 19px); line-height: 1.55; color: var(--db-text-2); margin: 0; }
.db-muted { color: var(--db-text-2); }
.db-mono { font-family: var(--db-font-mono); }
.db-sand-text { color: var(--db-sand); }

/* ============================================================
   HEADER  +  MOBILE DRAWER
   ============================================================ */
.db-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(16,36,58,.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--db-border);
}
.db-header__bar {
  display: flex; align-items: center; gap: 12px; height: var(--db-header-h);
  max-width: var(--db-maxw); margin-inline: auto; padding-inline: var(--db-gutter);
}
.db-logo { display: flex; align-items: center; padding: 8px 0; }
.db-logo img { height: 34px; width: auto; }
.db-header__spacer { flex: 1; }
.db-nav { display: none; align-items: center; gap: 2px; }
.db-nav a {
  font-family: var(--db-font-head); font-weight: 500; font-size: 14px;
  color: var(--db-text-2); padding: 8px 13px; border-radius: var(--db-r-pill);
}
.db-nav a:hover, .db-nav a[aria-current="page"] { color: var(--db-text); background: rgba(255,255,255,.06); }
.db-header__cta { display: none; }

.db-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  border: none; background: transparent; cursor: pointer; color: var(--db-text);
}
.db-drawer { display: none; background: var(--db-bg-deep); border-bottom: 1px solid var(--db-border); }
.db-drawer.is-open { display: block; }
.db-drawer__inner { max-width: var(--db-maxw); margin-inline: auto; padding: 6px var(--db-gutter) 16px; }
.db-drawer a {
  display: block; font-family: var(--db-font-head); font-weight: 500; font-size: 16px;
  color: var(--db-text); padding: 14px 6px; border-bottom: 1px solid var(--db-border);
}
.db-drawer a:last-of-type { border-bottom: none; }
.db-drawer .db-btn { margin-top: 14px; width: 100%; }

@media (min-width: 860px) {
  .db-nav { display: flex; }
  .db-header__cta { display: inline-flex; }
  .db-burger { display: none; }
  .db-drawer { display: none !important; }
  .db-header__bar { height: 72px; }
  .db-logo img { height: 40px; }
}

/* ============================================================
   BUTTONS   (min 48px hit target) — blue & sand only, no green
   ============================================================ */
.db-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--db-r-pill);
  font-family: var(--db-font-head); font-weight: 600; font-size: 15px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
}
.db-btn:active { transform: translateY(1px); }
.db-btn--primary { background: var(--db-cta); color: #fff; box-shadow: var(--db-glow); }
.db-btn--primary:hover { background: var(--db-cta-hover); color:#fff; }
.db-btn--secondary { background: transparent; color: var(--db-text); border-color: var(--db-border-2); }
.db-btn--secondary:hover { border-color: var(--db-accent); color: var(--db-accent-2); background: var(--db-accent-dim); }
.db-btn--sand { background: transparent; color: var(--db-sand-2); border-color: var(--db-sand-line); }
.db-btn--sand:hover { background: var(--db-sand-dim); color: var(--db-sand-2); }
.db-btn--ghost { background: transparent; color: var(--db-accent); min-height: 40px; padding: 0 8px; }
.db-btn--ghost:hover { color: var(--db-accent-2); }
.db-btn--sm { min-height: 40px; font-size: 14px; padding: 0 16px; }
.db-btn--block { width: 100%; }
.db-btn svg { width: 18px; height: 18px; }

/* ============================================================
   BADGES  (sand + blue, no green)
   ============================================================ */
.db-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--db-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; padding: 5px 10px; border-radius: var(--db-r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.db-badge--free,.db-badge--nosignup { color: var(--db-sand-2); background: var(--db-sand-dim); border-color: var(--db-sand-line); }
.db-badge--new  { color: var(--db-accent-2); background: var(--db-accent-dim); border-color: var(--db-accent-line); }
.db-badge--light,.db-badge--premium { color: var(--db-text); background: var(--db-elevated); border-color: var(--db-border-2); }
.db-badge--soon { color: var(--db-text-3); background: rgba(255,255,255,.05); border-color: var(--db-border-2); }

/* ============================================================
   CARDS  +  ICON WELL
   ============================================================ */
.db-card {
  background: var(--db-card); border: 1px solid var(--db-border);
  border-radius: var(--db-r-lg); box-shadow: var(--db-shadow-sm);
}
.db-card--elevated { background: var(--db-elevated); }
.db-iconwell {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--db-accent-dim); border: 1px solid var(--db-accent-line);
  color: var(--db-accent-2); border-radius: var(--db-r-md);
}
.db-iconwell--sand { background: var(--db-sand-dim); border-color: var(--db-sand-line); color: var(--db-sand-2); }
.db-iconwell svg { width: 56%; height: 56%; }

/* ============================================================
   HERO  (with db monogram watermark)
   ============================================================ */
.db-hero { position: relative; background: var(--db-bg-deep); border-bottom: 1px solid var(--db-border); overflow: visible; }
.db-hero__glow {
  position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
  width: min(720px, 120%); height: 400px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(61,114,174,.26), transparent 66%);
}
.db-hero__mark {
  position: absolute; top: 40%; left: 66%; transform: translate(-50%, -58%);
  width: min(520px, 92%); height: auto; opacity: .05;
  pointer-events: none; user-select: none;
}
.db-hero__inner { position: relative; padding: 50px 0 30px; text-align: center; }
.db-hero .db-h1 { margin-top: 16px; }
.db-hero .db-lead { margin: 16px auto 0; max-width: 480px; }

/* trust row */
.db-trust { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; margin-top: 22px; }
.db-trust span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--db-font-mono); font-size: 12.5px; color: var(--db-text-2);
}
.db-trust svg { width: 15px; height: 15px; color: var(--db-sand); }

@media (min-width: 720px) { .db-hero__inner { padding: 70px 0 40px; } }

/* ============================================================
   TOOL WIDGET  (the interactive component)
   White input pane + deep-navy result pane on the dark page.
   Stacks on mobile, 2-pane on desktop.
   ============================================================ */
.db-tool {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--tc-surface); border: 1px solid var(--db-border-2);
  border-radius: var(--db-r-xl); box-shadow: var(--db-shadow);
}

/* INPUT pane = light canvas (crisp + readable). Local --in-* vars
   re-theme the field components below to light. */
.db-tool__inputs {
  padding: 22px 18px; background: var(--tc-surface);
  --in-bg: var(--tc-field); --in-text: var(--tc-ink); --in-label: var(--tc-ink-2);
  --in-hint: var(--tc-ink-3); --in-border: var(--tc-line-2); --in-accent: var(--tc-accent);
  --in-accent-dim: rgba(49,93,138,.10); --in-seg-idle: var(--tc-ink-2);
}
.db-tool__paneTitle {
  font-family: var(--db-font-head); font-weight: 600; font-size: 15px;
  color: var(--tc-ink); margin: 0 0 18px;
}

/* RESULT pane = deep navy (results must be unmistakable) */
.db-tool__result {
  padding: 24px 18px; background: var(--db-bg-deep);
  border-top: 1px solid var(--db-border); color: var(--db-text);
}
.db-tool__resultLabel {
  font-family: var(--db-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--db-accent-2); margin: 0 0 16px;
}
@media (min-width: 760px) {
  .db-tool { grid-template-columns: 1.05fr 1fr; }
  .db-tool__inputs { padding: 30px 32px; }
  .db-tool__result { padding: 30px 32px; border-top: none; border-left: 1px solid var(--db-border); }
}

/* ---------- Form rows (themed via --in-* ; light inside tool) ---------- */
.db-field { margin-bottom: 20px; }
.db-field:last-child { margin-bottom: 0; }
.db-field__label {
  display: block; font-family: var(--db-font-body); font-size: 13.5px; font-weight: 600;
  color: var(--in-label, var(--db-text-2)); margin-bottom: 9px;
}
.db-field__hint { font-size: 12.5px; color: var(--in-hint, var(--db-text-3)); margin: 7px 0 0; }

/* text / number / select / textarea */
.db-input {
  width: 100%; min-height: 50px; padding: 0 14px;
  background: var(--in-bg, var(--db-well)); border: 1.5px solid var(--in-border, var(--db-border-2));
  border-radius: var(--db-r-md); color: var(--in-text, var(--db-text));
  font-family: var(--db-font-body); font-size: 16px; outline: 0;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.db-input::placeholder { color: var(--in-hint, var(--db-text-3)); }
.db-input:focus { border-color: var(--in-accent, var(--db-accent)); box-shadow: 0 0 0 3px var(--in-accent-dim, var(--db-accent-dim)); }
textarea.db-input { padding: 12px 14px; min-height: 96px; line-height: 1.5; resize: vertical; }
select.db-input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23315D8A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

/* stepper */
.db-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.db-stepper__btn {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--db-r-md);
  border: 1.5px solid var(--in-border, var(--db-border-2)); background: var(--in-bg, var(--db-well));
  color: var(--in-accent, var(--db-text)); font-family: var(--db-font-head); font-size: 24px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .14s ease, background .14s ease;
}
.db-stepper__btn:hover { border-color: var(--in-accent, var(--db-accent)); }
.db-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.db-stepper__val {
  flex: 1; text-align: center; font-family: var(--db-font-head); font-weight: 600;
  font-size: 18px; color: var(--in-text, var(--db-text)); min-width: 0;
}

/* segmented control */
.db-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.db-seg__opt {
  flex: 1 1 0; min-width: 84px; min-height: 46px; padding: 0 10px; border-radius: var(--db-r-md); cursor: pointer;
  font-family: var(--db-font-body); font-weight: 600; font-size: 13.5px;
  border: 1.5px solid var(--in-border, var(--db-border-2)); background: transparent; color: var(--in-seg-idle, var(--db-text-2));
  transition: all .14s ease;
}
.db-seg__opt:hover { border-color: var(--in-accent, var(--db-accent-line)); }
.db-seg__opt.is-active { border-color: var(--in-accent, var(--db-accent)); background: var(--in-accent-dim, var(--db-accent-dim)); color: var(--in-accent, var(--db-accent-2)); }

/* slider */
.db-slider-row { display: flex; align-items: center; gap: 14px; }
.db-slider {
  -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 999px;
  background: var(--in-border, var(--db-well)); outline: 0; cursor: pointer;
}
.db-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--in-accent, var(--db-accent)); border: 4px solid var(--in-bg, var(--db-bg-deep)); cursor: pointer;
  box-shadow: 0 0 0 1px var(--in-border, var(--db-accent-line));
}
.db-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--in-accent, var(--db-accent));
  border: 4px solid var(--in-bg, var(--db-bg-deep)); cursor: pointer;
}
.db-slider__val {
  min-width: 60px; text-align: right; font-family: var(--db-font-head);
  font-weight: 600; font-size: 16px; color: var(--in-text, var(--db-text));
}

/* toggle */
.db-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.db-toggle { position: relative; width: 52px; height: 30px; flex: 0 0 auto; cursor: pointer; }
.db-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.db-toggle__track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--in-border, var(--db-well));
  transition: all .16s ease;
}
.db-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: all .16s ease;
}
.db-toggle input:checked + .db-toggle__track { background: var(--in-accent, var(--db-accent)); }
.db-toggle input:checked + .db-toggle__track::after { left: 25px; }

/* ---------- Result panel ---------- */
.db-result__head { display: flex; align-items: center; gap: 20px; }
.db-ring {
  width: 108px; height: 108px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background .5s ease;
}
.db-ring__inner {
  width: 82px; height: 82px; border-radius: 50%; background: var(--db-bg-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.db-ring__num { font-family: var(--db-font-head); font-weight: 700; font-size: 30px; color: var(--db-text); line-height: 1; }
.db-ring__cap { font-family: var(--db-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--db-text-3); margin-top: 2px; }
.db-stat { font-family: var(--db-font-head); font-weight: 800; font-size: clamp(42px, 12vw, 56px); line-height: 1; color: var(--db-text); letter-spacing: -.02em; }
.db-stat__cap { font-family: var(--db-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--db-text-3); margin-top: 6px; }
.db-verdict { font-family: var(--db-font-head); font-weight: 600; font-size: 18px; }
.db-result__note { font-family: var(--db-font-body); font-size: 13.5px; color: var(--db-text-2); margin: 6px 0 0; line-height: 1.5; max-width: 250px; }
.db-metrics { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.db-metric__top { display: flex; justify-content: space-between; font-family: var(--db-font-body); font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--db-text-2); }
.db-metric__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.db-metric__fill { height: 100%; border-radius: 999px; background: var(--db-accent); width: 0; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.db-empty { color: var(--db-text-3); }

/* ============================================================
   BELOW-THE-FOLD  (explainer / FAQ / related)
   ============================================================ */
.db-belowgrid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 820px) { .db-belowgrid { grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; } }

.db-prose p { color: var(--db-text-2); margin: 0 0 14px; }
.db-prose p:last-child { margin-bottom: 0; }

.db-faq { border-bottom: 1px solid var(--db-border); }
.db-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--db-font-body); font-weight: 600; font-size: 15.5px; color: var(--db-text);
}
.db-faq__q svg { width: 18px; height: 18px; color: var(--db-accent); transition: transform .2s ease; flex: 0 0 auto; }
.db-faq.is-open .db-faq__q svg { transform: rotate(180deg); }
.db-faq__a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.db-faq.is-open .db-faq__a { max-height: 1200px; }
.db-faq__a p { font-size: 14.5px; line-height: 1.6; color: var(--db-text-2); margin: 0 0 16px; }

/* related list */
.db-related { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--db-border); }
.db-related:last-child { border-bottom: none; }
.db-related__well { width: 40px; height: 40px; border-radius: 11px; }
.db-related__name { font-family: var(--db-font-head); font-weight: 600; font-size: 14px; color: var(--db-text); }
.db-related__cat { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-3); letter-spacing: .04em; }
.db-related svg { width: 16px; height: 16px; color: var(--db-accent); flex: 0 0 auto; }

/* ============================================================
   TOOLS INDEX  (grid of tool cards)
   ============================================================ */
.db-toolgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .db-toolgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .db-toolgrid { grid-template-columns: repeat(3, 1fr); } }

.db-toolcard {
  position: relative; display: block; padding: 20px;
  background: var(--db-card); border: 1px solid var(--db-border); border-radius: var(--db-r-md);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; overflow: hidden;
}
.db-toolcard:hover { background: var(--db-card-2); border-color: var(--db-glow-line); transform: translateY(-3px); box-shadow: var(--db-shadow); }
.db-toolcard::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--db-accent), transparent); transition: opacity .2s ease;
}
.db-toolcard:hover::before { opacity: 1; }
.db-toolcard__well { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 15px; }
.db-toolcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-toolcard__name { font-family: var(--db-font-head); font-weight: 600; font-size: 16px; color: var(--db-text); }
.db-toolcard__desc { font-family: var(--db-font-body); font-size: 13.5px; color: var(--db-text-2); line-height: 1.5; margin: 7px 0 0; }

/* section heading row */
.db-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }

/* ============================================================
   FOOTER
   ============================================================ */
.db-footer { background: var(--db-bg-deep); border-top: 1px solid var(--db-border); margin-top: 56px; }
.db-footer__inner { padding-block: 36px; display: flex; flex-direction: column; gap: 22px; }
.db-footer__cols { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.db-footer__col h4 { font-family: var(--db-font-head); font-weight: 600; font-size: 13px; color: var(--db-text); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; }
.db-footer__col a { display: block; font-size: 14px; color: var(--db-text-2); padding: 5px 0; }
.db-footer__col a:hover { color: var(--db-accent-2); }
.db-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--db-border); }
.db-footer__bottom span { font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-3); }

/* ============================================================
   UTILITIES
   ============================================================ */
.db-flush-top { margin-top: -34px; }   /* pull tool widget up into hero */
.db-relative { position: relative; }
.db-center { text-align: center; }
.db-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.db-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .db-reveal { opacity: 1; transform: none; }
}

.db-textarea{min-height:120px;resize:vertical;line-height:1.45;}