/* ============================================================
   HumanTrans AI — Global Stylesheet
   humantrans.ai
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080c14;
  --bg2:       #0d1220;
  --card:      #111827;
  --card2:     #131c2e;
  --border:    rgba(99,179,237,0.11);
  --border2:   rgba(99,179,237,0.2);
  --accent:    #3b9eff;
  --accent2:   #00e5c0;
  --danger:    #ff6b6b;
  --warn:      #fbbf24;
  --purple:    #a855f7;
  --text:      #e8f0fe;
  --text2:     #8aa4c8;
  --text3:     #4a6080;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 0 60px rgba(0,0,0,0.5);
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-h:     68px;
}

html  { scroll-behavior: smooth; }

body {
  background:    var(--bg);
  color:         var(--text);
  font-family:   var(--font-body);
  font-size:     16px;
  line-height:   1.65;
  overflow-x:    hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font-body); }

/* ── Background decorations ───────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(59,158,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,158,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.bg-orb-1 {
  top: -220px; left: -180px; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(59,158,255,0.07) 0%, transparent 70%);
}
.bg-orb-2 {
  bottom: -200px; right: -120px; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(0,229,192,0.055) 0%, transparent 70%);
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position:       sticky;
  top:            0;
  z-index:        200;
  height:         var(--nav-h);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        0 48px;
  background:     rgba(8,12,20,0.88);
  backdrop-filter: blur(20px);
  border-bottom:  1px solid var(--border);
}
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--font-head);
  font-size:   1.35rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color:       var(--text);
}
.nav-logo-icon {
  width:         34px;
  height:        34px;
  border-radius: 9px;
  background:    linear-gradient(135deg, var(--accent), var(--accent2));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.85rem;
  font-weight:   800;
  color:         #fff;
  flex-shrink:   0;
}
.nav-links {
  display:     flex;
  gap:         32px;
  list-style:  none;
}
.nav-links a {
  color:       var(--text2);
  font-size:   0.9rem;
  font-weight: 500;
  transition:  color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  border-radius: var(--radius);
  font-weight:   600;
  font-size:     0.9rem;
  padding:       10px 22px;
  transition:    all 0.2s;
  border:        none;
  white-space:   nowrap;
}
.btn-primary {
  background:  linear-gradient(135deg, var(--accent), #2563eb);
  color:       #fff;
  box-shadow:  0 0 22px rgba(59,158,255,0.28);
}
.btn-primary:hover {
  transform:   translateY(-2px);
  box-shadow:  0 0 36px rgba(59,158,255,0.45);
}
.btn-ghost {
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--text2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

.btn-accent2 {
  background:  linear-gradient(135deg, var(--accent), var(--accent2));
  color:       #080c14;
  font-weight: 700;
  font-family: var(--font-head);
  box-shadow:  0 0 24px rgba(59,158,255,0.28);
}
.btn-accent2:hover {
  transform:   translateY(-2px);
  box-shadow:  0 0 40px rgba(59,158,255,0.45);
}
.btn-danger {
  background:  linear-gradient(135deg, var(--danger), #dc2626);
  color:       #fff;
  box-shadow:  0 0 22px rgba(255,107,107,0.28);
}
.btn-danger:hover {
  transform:   translateY(-2px);
  box-shadow:  0 0 38px rgba(255,107,107,0.45);
}
.btn-lg  { padding: 13px 36px; font-size: 1rem; border-radius: 14px; }
.btn-sm  { padding: 7px  16px; font-size: 0.82rem; border-radius: 8px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.card:hover {
  border-color:  var(--border2);
}

/* ── Section wrapper ──────────────────────────────────────── */
.section {
  position:   relative;
  z-index:    1;
  padding:    80px 48px;
  max-width:  1120px;
  margin:     0 auto;
}
.section-sm { padding: 56px 48px; }

.section-label {
  font-size:      0.74rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--accent);
  margin-bottom:  12px;
}
.section-label-danger { color: var(--danger); }
.section-label-teal   { color: var(--accent2); }

.section-title {
  font-family:    var(--font-head);
  font-size:      clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight:    800;
  letter-spacing: -0.8px;
  line-height:    1.15;
  margin-bottom:  14px;
}
.section-sub {
  color:         var(--text2);
  font-size:     1rem;
  max-width:     520px;
  margin-bottom: 44px;
  font-weight:   300;
  line-height:   1.75;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position:   relative;
  z-index:    1;
  padding:    88px 48px 56px;
  text-align: center;
  max-width:  900px;
  margin:     0 auto;
}
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    rgba(59,158,255,0.09);
  border:        1px solid rgba(59,158,255,0.22);
  border-radius: 100px;
  padding:       6px 18px;
  font-size:     0.8rem;
  color:         var(--accent);
  margin-bottom: 28px;
  font-weight:   500;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.hero-title {
  font-family:    var(--font-head);
  font-size:      clamp(2.6rem, 5.5vw, 4rem);
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -1.8px;
  margin-bottom:  22px;
}
.grad-blue {
  background:              linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}
.grad-red {
  background:              linear-gradient(135deg, var(--danger) 0%, var(--warn) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}
.grad-purple {
  background:              linear-gradient(135deg, var(--purple) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.hero-sub {
  font-size:     1.1rem;
  color:         var(--text2);
  max-width:     580px;
  margin:        0 auto 40px;
  font-weight:   300;
  line-height:   1.75;
}
.hero-stats {
  display:         flex;
  gap:             44px;
  justify-content: center;
  flex-wrap:       wrap;
  margin-bottom:   52px;
}
.stat-num {
  font-family:    var(--font-head);
  font-size:      1.7rem;
  font-weight:    800;
  color:          var(--text);
  line-height:    1;
}
.stat-label {
  font-size:  0.76rem;
  color:      var(--text3);
  margin-top: 4px;
}

/* ── Tool card wrapper ────────────────────────────────────── */
.tool-wrap {
  position:   relative;
  z-index:    1;
  max-width:  960px;
  margin:     0 auto 64px;
  padding:    0 24px;
}
.tool-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow), 0 0 0 1px rgba(59,158,255,0.04);
}
.tool-card-header {
  padding:         18px 28px;
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}
.tool-card-title {
  font-family: var(--font-head);
  font-size:   0.95rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         8px;
}
.dot-green  { width:8px; height:8px; border-radius:50%; background:var(--accent2); }
.dot-blue   { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.dot-red    { width:8px; height:8px; border-radius:50%; background:var(--danger); }
.dot-purple { width:8px; height:8px; border-radius:50%; background:var(--purple); }
.dot-warn   { width:8px; height:8px; border-radius:50%; background:var(--warn); }

/* ── Tabs (mode/tone switchers) ───────────────────────────── */
.tab-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  padding:       6px 14px;
  border-radius: 8px;
  font-size:     0.8rem;
  font-weight:   500;
  cursor:        pointer;
  border:        1px solid var(--border);
  background:    none;
  color:         var(--text3);
  transition:    all 0.2s;
}
.tab:hover { color: var(--text2); border-color: var(--border2); }
.tab.active {
  background:    rgba(59,158,255,0.13);
  border-color:  rgba(59,158,255,0.38);
  color:         var(--accent);
}
.tab.active-teal {
  background:    rgba(0,229,192,0.1);
  border-color:  rgba(0,229,192,0.35);
  color:         var(--accent2);
}

/* ── Textarea & output ────────────────────────────────────── */
.tool-body-split {
  display:             grid;
  grid-template-columns: 1fr 1fr;
  min-height:          300px;
}
.tool-pane {
  padding:        24px 28px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.tool-pane:first-child { border-right: 1px solid var(--border); }

.pane-label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--text3);
}
textarea {
  flex:         1;
  min-height:   210px;
  background:   rgba(255,255,255,0.018);
  border:       1px solid transparent;
  border-radius: 10px;
  padding:      16px;
  color:        var(--text);
  font-family:  var(--font-body);
  font-size:    0.92rem;
  line-height:  1.7;
  resize:       none;
  outline:      none;
  transition:   border 0.2s;
}
textarea:focus { border-color: rgba(59,158,255,0.28); }
textarea::placeholder { color: var(--text3); }

.output-box {
  flex:          1;
  min-height:    210px;
  background:    rgba(255,255,255,0.018);
  border:        1px solid transparent;
  border-radius: 10px;
  padding:       16px;
  font-size:     0.92rem;
  line-height:   1.7;
  color:         var(--text);
  overflow-y:    auto;
  white-space:   pre-wrap;
  word-break:    break-word;
}

.pane-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         8px;
}
.word-count { font-size: 0.76rem; color: var(--text3); }

/* Copy button */
.copy-btn {
  background:    rgba(59,158,255,0.1);
  border:        1px solid rgba(59,158,255,0.22);
  color:         var(--accent);
  padding:       5px 12px;
  border-radius: 6px;
  font-size:     0.74rem;
  cursor:        pointer;
  transition:    all 0.2s;
  display:       none;
}
.copy-btn.show { display: inline-flex; align-items: center; gap: 5px; }
.copy-btn:hover { background: rgba(59,158,255,0.2); }

/* Score badges */
.score-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     0.76rem;
  font-weight:   600;
  padding:       4px 10px;
  border-radius: 6px;
}
.score-ai    { background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.22); color:var(--danger); }
.score-human { background:rgba(0,229,192,0.09);  border:1px solid rgba(0,229,192,0.22);  color:var(--accent2); }

/* ── Tool footer (action bar) ─────────────────────────────── */
.tool-card-footer {
  padding:         18px 28px;
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             14px;
}
.tone-group {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.tone-label { font-size: 0.78rem; color: var(--text3); font-weight: 500; }

/* ── Loading dots ─────────────────────────────────────────── */
.loading-dots {
  display:     none;
  align-items: center;
  gap:         6px;
  padding:     12px 0 4px;
}
.loading-dots.show { display: flex; }
.ld {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: ldpulse 1.2s infinite;
}
.ld:nth-child(2) { animation-delay: 0.18s; }
.ld:nth-child(3) { animation-delay: 0.36s; }
@keyframes ldpulse { 0%,80%,100%{transform:scale(0.55);opacity:0.35;} 40%{transform:scale(1);opacity:1;} }

.spinner {
  width:         15px;
  height:        15px;
  border:        2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     spin 0.65s linear infinite;
  display:       none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tools grid ───────────────────────────────────────────── */
.tools-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:                   16px;
}
.tool-item {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       26px 22px;
  transition:    all 0.25s;
  display:       block;
  color:         inherit;
}
.tool-item:hover {
  border-color: var(--border2);
  transform:    translateY(-4px);
  box-shadow:   0 10px 32px rgba(0,0,0,0.35);
}
.tool-item-icon {
  width:         44px;
  height:        44px;
  border-radius: 12px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.15rem;
  margin-bottom: 16px;
}
.tool-item-name {
  font-family:   var(--font-head);
  font-size:     0.97rem;
  font-weight:   700;
  margin-bottom: 6px;
}
.tool-item-desc { font-size: 0.82rem; color: var(--text2); line-height: 1.65; }

/* ── Steps grid ───────────────────────────────────────────── */
.steps-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:                   20px;
}
.step-card { text-align: center; padding: 28px 16px; }
.step-num {
  width:         50px;
  height:        50px;
  border-radius: 14px;
  background:    rgba(59,158,255,0.09);
  border:        1px solid rgba(59,158,255,0.2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-head);
  font-size:     1.15rem;
  font-weight:   800;
  color:         var(--accent);
  margin:        0 auto 18px;
}
.step-title {
  font-family:   var(--font-head);
  font-size:     0.97rem;
  font-weight:   700;
  margin-bottom: 8px;
}
.step-desc { font-size: 0.83rem; color: var(--text2); line-height: 1.7; }

/* ── Pricing ──────────────────────────────────────────────── */
.pricing-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   20px;
}
.pricing-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       36px 28px;
  position:      relative;
  transition:    all 0.25s;
}
.pricing-card:hover { transform: translateY(-3px); }
.pricing-card.popular {
  border-color: rgba(59,158,255,0.45);
  box-shadow:   0 0 44px rgba(59,158,255,0.1);
}
.popular-tag {
  position:      absolute;
  top:           -12px;
  left:          50%;
  transform:     translateX(-50%);
  background:    linear-gradient(135deg, var(--accent), var(--accent2));
  color:         #080c14;
  font-size:     0.7rem;
  font-weight:   800;
  padding:       4px 16px;
  border-radius: 100px;
  white-space:   nowrap;
  font-family:   var(--font-head);
  letter-spacing: 0.06em;
}
.plan-name {
  font-family:    var(--font-head);
  font-size:      0.78rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--text2);
  margin-bottom:  10px;
}
.plan-price {
  font-family:    var(--font-head);
  font-size:      2.7rem;
  font-weight:    800;
  letter-spacing: -1.5px;
  margin-bottom:  4px;
  line-height:    1;
}
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--text2); }
.plan-desc  { font-size: 0.82rem; color: var(--text3); margin-bottom: 22px; }
.plan-features {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  28px;
}
.plan-features li {
  font-size:   0.85rem;
  color:       var(--text2);
  display:     flex;
  gap:         10px;
  align-items: flex-start;
}
.feat-check { color: var(--accent2); flex-shrink: 0; margin-top: 2px; }
.feat-no    { color: var(--text3);   flex-shrink: 0; margin-top: 2px; }

.btn-plan {
  width:         100%;
  padding:       12px;
  border-radius: 10px;
  font-size:     0.9rem;
  font-weight:   700;
  font-family:   var(--font-head);
  cursor:        pointer;
  transition:    all 0.2s;
  letter-spacing: 0.02em;
  border:        none;
}
.btn-plan-outline {
  background:  none;
  border:      1px solid var(--border);
  color:       var(--text);
}
.btn-plan-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-plan-filled {
  background:  linear-gradient(135deg, var(--accent), #2563eb);
  color:       #fff;
  box-shadow:  0 0 22px rgba(59,158,255,0.28);
}
.btn-plan-filled:hover { box-shadow: 0 0 38px rgba(59,158,255,0.5); transform: translateY(-1px); }

/* ── Notice banner ────────────────────────────────────────── */
.setup-notice {
  background:    rgba(251,191,36,0.07);
  border:        1px solid rgba(251,191,36,0.2);
  border-radius: var(--radius);
  padding:       12px 18px;
  font-size:     0.82rem;
  color:         var(--warn);
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  position:      relative;
  z-index:       1;
  max-width:     960px;
  margin:        0 auto 20px;
}

/* ── Payment Modal ────────────────────────────────────────── */
.modal-backdrop {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999;
  background:      rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background:    var(--card2);
  border:        1px solid var(--border2);
  border-radius: 24px;
  padding:       40px 36px;
  max-width:     420px;
  width:         100%;
  box-shadow:    0 32px 80px rgba(0,0,0,0.55);
  animation:     modalIn 0.24s ease;
}
@keyframes modalIn { from{transform:scale(0.93);opacity:0;} to{transform:scale(1);opacity:1;} }
.modal-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   6px;
}
.modal-title { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; }
.modal-close {
  background: none; border: none; color: var(--text3);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: color 0.2s;
}
.modal-close:hover { color: var(--text); }
.modal-plan-row {
  background:    rgba(59,158,255,0.07);
  border:        1px solid rgba(59,158,255,0.14);
  border-radius: var(--radius);
  padding:       14px 18px;
  margin:        20px 0;
  display:       flex;
  justify-content: space-between;
  align-items:   center;
}
.modal-plan-label { font-size: 0.8rem; color: var(--text3); }
.modal-plan-name  { font-family: var(--font-head); font-size: 1rem; font-weight: 700; }
.modal-plan-price { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.modal-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      22px 0 18px;
  color:       var(--text3);
  font-size:   0.78rem;
}
.modal-divider::before, .modal-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.btn-paypal {
  width:         100%;
  padding:       14px;
  border-radius: 12px;
  border:        none;
  background:    #FFC439;
  color:         #003087;
  font-size:     0.97rem;
  font-weight:   800;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           10px;
  transition:    all 0.2s;
  font-family:   var(--font-head);
  margin-bottom: 10px;
}
.btn-paypal:hover { background: #f0b429; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,196,57,0.3); }
.modal-note {
  font-size:   0.74rem;
  color:       var(--text3);
  text-align:  center;
  margin-top:  16px;
  line-height: 1.6;
}
.modal-note a { color: var(--text2); }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  position:        relative;
  z-index:         1;
  border-top:      1px solid var(--border);
  padding:         52px 48px 32px;
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             40px;
  max-width:       1120px;
  margin:          0 auto;
}
.footer-brand { max-width: 260px; }
.footer-logo  {
  font-family:   var(--font-head);
  font-size:     1.15rem;
  font-weight:   800;
  margin-bottom: 12px;
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.footer-tagline { font-size: 0.82rem; color: var(--text3); line-height: 1.7; }
.footer-col h4  {
  font-family:    var(--font-head);
  font-size:      0.82rem;
  font-weight:    700;
  color:          var(--text2);
  margin-bottom:  14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a   { font-size: 0.83rem; color: var(--text3); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom  {
  position:    relative;
  z-index:     1;
  text-align:  center;
  padding:     18px 48px 28px;
  font-size:   0.77rem;
  color:       var(--text3);
  border-top:  1px solid var(--border);
}

/* ── Utilities ────────────────────────────────────────────── */
.z1 { position: relative; z-index: 1; }
.text-center { text-align: center; }
.text-accent  { color: var(--accent); }
.text-accent2 { color: var(--accent2); }
.text-danger  { color: var(--danger); }
.text-muted   { color: var(--text3); }
.mt-4  { margin-top:  4px; }
.mt-8  { margin-top:  8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom:  8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero  { padding: 64px 20px 44px; }
  .section, .section-sm { padding: 60px 20px; }
  .tool-wrap { padding: 0 16px; }
  .tool-body-split { grid-template-columns: 1fr; }
  .tool-pane:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .footer { padding: 44px 20px 28px; }
  .footer-bottom { padding: 16px 20px 24px; }
  .hero-stats { gap: 28px; }
  .modal { padding: 32px 24px; }
}