:root {
  --ink: #16222A;
  --navy-deep: #0C1620;
  --navy-mid: #12232A;
  --muted: #5B6B76;
  --muted-light: #A9B7BE;
  --accent: #EF9D3B;
  --accent-dark: #D9822A;
  --accent-soft: #FDEEDA;
  --teal: #0F6E5D;
  --teal-dark: #0B564A;
  --teal-soft: #E4F2EF;
  --bg: #F4F6F8;
  --panel: #FFFFFF;
  --border: #DEE4E8;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ============ NAVBAR ============ */
.nav { position: sticky; top: 0; z-index: 500; background: rgba(12, 22, 32, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 54px; height: 54px; border-radius: 12px; background: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; color: #fff; }
.brand-text strong { font-size: 22px; letter-spacing: 0.01em; }
.brand-text small { font-size: 11.5px; color: var(--muted-light); letter-spacing: 0.07em; text-transform: uppercase; }

.nav-center { display: flex; flex-direction: column; gap: 12px; }
.nav-links { display: flex; justify-content: center; gap: 34px; }
.nav-links a { color: #C7D1D6; font-size: 13.5px; font-weight: 500; }
.nav-links a:hover { color: #fff; }

.nav-cta-col { display: flex; align-items: center; }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 5px; white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .nav-grid { grid-template-columns: auto auto; gap: 14px; justify-content: space-between; }
  .nav-center { display: none; }
  .nav-cta-col { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 901px) {
  .nav-burger { display: none; }
  .nav-mobile-panel { display: none; }
}

.nav-burger {
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer; padding: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  /* A real, confirmed bug found by directly checking the deployed
     site: this used the dark --ink color (#16222A), meant for a
     light background -- but the header itself has a dark background
     (rgba(12, 22, 32, 0.92)), nearly identical in darkness. Dark
     lines on a near-identical dark background genuinely are almost
     invisible, not a z-index/stacking issue at all despite how it
     looks. White matches what the 16 tool pages' equivalent burger
     already correctly uses against the same dark navbar gradient.
  */
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
  max-height: 0; overflow: hidden; background: #fff;
  border-top: 1px solid var(--border, #E2E5E8);
  transition: max-height 0.25s ease;
}
.nav-mobile-panel.is-open { max-height: 480px; }
.nav-mobile-links { display: flex; flex-direction: column; padding: 8px 20px 16px; }
.nav-mobile-links a {
  padding: 12px 4px; font-size: 15px; color: var(--ink, #1E2A32); text-decoration: none;
  border-bottom: 1px solid var(--border, #F0F2F4);
}
.nav-mobile-links a:last-child { border-bottom: none; }
.nav-mobile-cta {
  margin-top: 10px; text-align: center; background: var(--accent, #EF9D3B); color: #fff !important;
  border-radius: 6px; font-weight: 700;
}
@media (max-width: 480px) {
  .brand-mark { width: 40px; height: 40px; border-radius: 9px; }
  .brand-text strong { font-size: 17px; }
  .brand-text small { font-size: 9.5px; }
  .btn-ghost { font-size: 11.5px; padding: 7px 11px; }
}

/* ---------- Header stats bar (merged into the header, not a separate strip) ---------- */
.header-stats {
  display: flex; justify-content: center; gap: 56px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.hstat { text-align: center; }
.hstat strong {
  display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: var(--accent); animation: stat-glow 3.6s ease-in-out infinite;
}
.hstat span { font-size: 10.5px; color: var(--muted-light); text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes stat-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(239,157,59,0); }
  50% { text-shadow: 0 0 14px rgba(239,157,59,0.55); }
}

/* ============ HERO ============ */
.hero { position: relative; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%); overflow: hidden; padding: 96px 0 72px; }
.hero-field { position: absolute; inset: 0; }
.hero-contours, .hero-graticule { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-graticule { pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 760px; pointer-events: none; }
.hero-content .hero-search, .hero-content .hero-actions, .hero-content a, .hero-content input, .hero-content button {
  pointer-events: auto;
}

/* Per-line contour hover: highlight just the hovered line, show its
   elevation at both edges — the actual behavior of a real topographic
   map, not generic decoration. */
.contour-line { fill: none; stroke: #ffffff; stroke-opacity: 0.11; stroke-width: 1; transition: stroke 0.15s, stroke-opacity 0.15s, stroke-width 0.15s; }
.contour-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: crosshair; pointer-events: stroke; }
.contour-line { pointer-events: none; }
.contour-label { font-family: var(--font-mono); font-size: 12px; fill: var(--accent); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.contour-group:hover .contour-line { stroke: #EF9D3B; stroke-opacity: 0.75; stroke-width: 1.6; }
.contour-group:hover .contour-label { opacity: 1; }
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.eyebrow--light { color: var(--accent); }
.hero h1 { color: #fff; font-size: 50px; line-height: 1.1; margin-bottom: 20px; }
.hero-accent-word { color: var(--accent); position: relative; }
.hero-sub { color: #B9C4CA; font-size: 17px; max-width: 560px; margin-bottom: 34px; }

.hero-search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 6px 6px 6px 16px; max-width: 560px; margin-bottom: 26px; }
.hero-search svg { color: var(--muted-light); flex-shrink: 0; }
.hero-search input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 14.5px; padding: 10px 0; }
.hero-search input::placeholder { color: #7C8B93; }
.hero-search button { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.hero-search button:hover { background: var(--accent-dark); }

.hero-actions { display: flex; justify-content: center; margin-bottom: 40px; }
.hero-actions .btn-primary { padding: 15px 40px; font-size: 15px; }
.btn-primary { background: var(--accent); color: #fff; font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: 6px; display: inline-block; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-secondary { border: 1px solid rgba(255,255,255,0.25); color: #fff; font-weight: 600; font-size: 14.5px; padding: 13px 26px; border-radius: 6px; display: inline-block; }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.hero-readout { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; color: #8FA6AC; min-height: 20px; margin-bottom: 40px; }
.hero-readout .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); animation: pulse-dot 2s ease-in-out infinite; }
.readout-line { transition: opacity 0.28s ease; }
.hero-readout b { color: var(--accent); font-weight: 600; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.trust-indicators { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
.trust-indicators span { font-size: 12px; color: #9FB0B6; font-family: var(--font-mono); }

.hstat-word { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); }
.hstat-plus { font-size: 12px; color: var(--teal); font-weight: 700; margin-left: 3px; vertical-align: super; }

.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 40px; }
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat strong {
  font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: #fff;
  text-shadow: 0 0 18px rgba(239,157,59,0.45), 0 0 36px rgba(239,157,59,0.2);
  animation: glow-breathe 3.6s ease-in-out infinite;
}
.hero-stat:nth-child(2) strong { animation-delay: 0.3s; }
.hero-stat:nth-child(3) strong { animation-delay: 0.6s; }
.hero-stat:nth-child(4) strong { animation-delay: 0.9s; }
.hero-stat-word { color: var(--accent) !important; }
.hero-stat span { font-family: var(--font-mono); font-size: 10.5px; color: #7C8B93; text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes glow-breathe {
  0%, 100% { text-shadow: 0 0 18px rgba(239,157,59,0.45), 0 0 36px rgba(239,157,59,0.2); }
  50% { text-shadow: 0 0 26px rgba(239,157,59,0.7), 0 0 50px rgba(239,157,59,0.35); }
}
@media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, auto); gap: 24px 32px; } }

@media (max-width: 640px) {
  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 36px; }
  .hero-search { flex-wrap: wrap; padding: 12px; }
  .hero-search button { width: 100%; }
}

/* ============ SECTION SHARED ============ */
.section { padding: 84px 0; }
.section--tint { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section h2 { font-size: 34px; color: var(--ink); margin-bottom: 12px; max-width: 640px; }
.section-sub { color: var(--muted); font-size: 15.5px; max-width: 560px; margin-bottom: 48px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; }
.section-head-row h2 { margin-bottom: 0; }
.link-more { color: var(--accent-dark); font-weight: 600; font-size: 14px; }
.link-more:hover { color: var(--accent); }

/* ============ TOOL GRID ============ */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-grid-more { display: flex; justify-content: center; margin-top: 24px; }
.tool-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.tool-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,30,35,0.1); }
.tool-card-arrow { position: absolute; top: 24px; right: 22px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.2s, transform 0.2s; color: var(--accent); }
.tool-card:hover .tool-card-arrow, .article-card:hover .tool-card-arrow { opacity: 1; transform: translate(0, 0); }
.tool-card--wide { grid-column: span 2; }
.tool-ico { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.tool-ico--a { background: var(--accent-soft); color: var(--accent-dark); }
.tool-ico--b { background: var(--teal-soft); color: var(--teal-dark); }
.tool-card h3 { font-size: 16px; }
.tool-card p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 980px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } .tool-card--wide { grid-column: span 2; } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: 1fr; } .tool-card--wide { grid-column: span 1; } }

/* ============ HOW IT WORKS ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 12px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 12px; }
.why-item h3 { font-size: 15.5px; margin-bottom: 6px; color: var(--ink); }
.why-item p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 780px) { .why-grid { grid-template-columns: 1fr; gap: 22px; } }
.step { position: relative; padding-top: 8px; }
.step-no { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 700; display: block; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* ============ ARTICLE GRID ============ */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color 0.15s, transform 0.15s; }
.article-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.article-card .tool-card-arrow { color: var(--teal); }
.article-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-dark); background: var(--teal-soft); border-radius: 4px; padding: 3px 8px; width: fit-content; }
.article-card h3 { font-size: 16px; line-height: 1.35; }
.article-card p { color: var(--muted); font-size: 13.5px; }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }

/* ============ ABOUT + PROJECTS ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.about-text h2 { font-size: 28px; margin: 10px 0 16px; max-width: 420px; }
.about-text p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 460px; }
.capability-list { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.capability-item { border-left: 2px solid var(--teal); padding-left: 16px; }
.capability-item h3 { font-size: 15.5px; margin-bottom: 4px; }
.capability-item p { color: var(--muted); font-size: 13.5px; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ============ SERVICES ============ */
.services { background: var(--navy-deep); padding: 84px 0; }
.services-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.services h2 { color: #fff; font-size: 30px; margin: 10px 0 16px; }
.services p { color: #B9C4CA; font-size: 15px; margin-bottom: 26px; max-width: 460px; }
.services-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.services-list li { color: #E3E9EB; font-size: 14.5px; padding-left: 22px; position: relative; }
.services-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 800px) { .services-inner { grid-template-columns: 1fr; gap: 32px; } }

/* ============ TRUST STRIP ============ */
.trust { background: var(--panel); border-bottom: 1px solid var(--border); padding: 22px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.trust-label { font-size: 12px; letter-spacing: 0.03em; }
.trust-item { display: flex; align-items: center; gap: 7px; color: var(--teal-dark); }
.trust-item strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.trust-inner .sep { color: var(--border); }

/* ============ FOOTER ============ */
.footer { background: var(--navy-deep); padding: 56px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr 0.8fr 0.8fr; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.footer-col a { color: #9FB0B6; font-size: 13.5px; }
.footer-col a:hover { color: var(--accent); }
.footer-brand p { color: #8FA0A6; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.footer-legal { color: #6E7E84; font-size: 12px; text-align: center; padding: 22px 24px; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

/* ============ ASSISTANT WIDGET ============ */
.assistant-widget { position: fixed; bottom: 24px; right: 24px; z-index: 600; width: 54px; height: 54px; transition: transform 0.35s ease, opacity 0.35s ease; }
.assistant-widget.is-hidden { transform: translateY(120px); opacity: 0; pointer-events: none; }

.assistant-bubble { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(217,130,42,0.4); cursor: pointer; transition: transform 0.15s, background 0.15s; flex-shrink: 0; }
.assistant-bubble:hover { transform: scale(1.06); background: var(--accent-dark); }

/* Taken OUT of the widget's normal layout flow entirely (position:
   absolute, anchored above the bubble) rather than a flex sibling —
   this means the closed panel's 300x600-ish box no longer occupies
   any real space in the widget container at all, so it can never
   sit on top of page content underneath it. Previously this relied
   solely on pointer-events:none to stay non-interactive while
   closed; now it structurally can't overlap anything else in the
   first place, regardless of that rule. */
.assistant-panel {
  position: absolute; bottom: 68px; right: 0;
  width: 300px; background: var(--panel); border-radius: 14px; box-shadow: 0 16px 44px rgba(10,20,25,0.28);
  overflow: hidden; transform-origin: bottom right;
  transform: scale(0.9) translateY(12px); opacity: 0; pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.18s ease;
}
.assistant-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

.assistant-panel-head { background: var(--navy-deep); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.assistant-panel-head button { background: none; border: none; color: #9FB0B6; cursor: pointer; padding: 2px; display: flex; }
.assistant-panel-head button:hover { color: #fff; }

.assistant-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.assistant-msg { background: var(--bg); border-radius: 10px 10px 10px 3px; padding: 10px 13px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.assistant-options { display: flex; flex-direction: column; gap: 7px; }
.assistant-opt { text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--teal-dark); font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.assistant-opt:hover { border-color: var(--teal); background: var(--teal-soft); }

.assistant-cta {
  display: block; text-align: center; background: var(--accent); color: #fff; font-weight: 700;
  font-size: 13px; padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.assistant-cta:hover { background: var(--accent-dark); color: #fff; }
.assistant-restart {
  background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer; padding: 4px 0; align-self: center;
}
.assistant-restart:hover { color: var(--ink); }

@media (max-width: 480px) { .assistant-panel { width: calc(100vw - 48px); } }