/* =========================================================================
   TMG Real Estate, Zoning & Land Development Solutions — Promo Kit
   real-estate-solutions.techmaven.net
   Design system aligned with the VoltGrid promo kit (Tech Maven Geospatial).
   Vanilla CSS, no build step. Shared by all pages.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --navy:      #0A1628;
  --navy-2:    #0F1F38;
  --navy-3:    #16294A;
  --ink:       #0F172A;
  --cyan:      #22D3EE;
  --cyan-deep: #0E7490;
  --green:     #16A34A;
  --green-soft:#4ADE80;
  --amber:     #F59E0B;
  --rose:      #FB7185;
  --violet:    #6366F1;
  --mist:      #F8FAFC;
  --mist-2:    #EEF2F7;
  --slate:     #475569;
  --slate-2:   #64748B;
  --line:      rgba(148, 163, 184, 0.22);
  --line-dark: rgba(34, 211, 238, 0.18);

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shadow:    0 10px 30px -12px rgba(2, 8, 23, 0.45);
  --shadow-lg: 0 30px 70px -24px rgba(2, 8, 23, 0.6);

  --container: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans); color: var(--ink); background: var(--mist);
  line-height: 1.6; font-size: 16.5px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(34, 211, 238, .3); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cyan); color: #04121F; padding: 10px 18px;
  border-radius: var(--radius-sm); font-weight: 700; transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container--wide { max-width: 1320px; }
.container--narrow { max-width: 840px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--navy); color: #E2E8F0; }
.section--grad {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(22, 163, 74, 0.16), transparent 55%),
    var(--navy);
  color: #E2E8F0;
}
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* A `1fr` track resolves its minimum to the item's min-content width, so one
   wide descendant — a code line, a nowrap button, a table — stretches the whole
   track and scrolls the entire page sideways. The scroll containers inside
   (.terminal pre, .table-wrap) then never get the chance to do their job.
   Flooring every grid item at zero lets the track shrink and hands the overflow
   back to the element that is meant to own it. */
.grid > *, .split > *, .feature-row > *, .hero-grid > *, .feature-list > * { min-width: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.section--dark h1, .section--grad h1, .section--dark h2, .section--grad h2,
.section--dark h3, .section--grad h3, .section--dark h4, .section--grad h4 { color: #fff; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--slate); }
.section--dark .lead, .section--grad .lead { color: #94A3B8; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan-deep); background: rgba(34, 211, 238, 0.1); border: 1px solid var(--line-dark);
  padding: 6px 12px; border-radius: 999px;
  /* On narrow viewports a long eyebrow wraps; centring keeps it looking
     deliberate rather than broken. */
  text-align: center; line-height: 1.5;
}
.section--dark .eyebrow, .section--grad .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--cyan); }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head .lead { margin-top: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 22, 40, 0.86); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container { display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; }
.brand span { font-size: 1.02rem; }
.brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links a { color: #CBD5E1; font-size: .94rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.nav-links a.active { color: var(--cyan); }
.nav-links a.btn { color: #04121F; }
.nav-links a.btn:hover { color: #04121F; background: linear-gradient(135deg, var(--cyan), var(--green)); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-dark);
  border-radius: 9px; color: #fff; padding: 8px 10px; cursor: pointer;
}
/* The nav lists sections, not solutions — at five solutions the inline nav could
   not hold them without wrapping labels onto two lines inside a fixed-height
   header. With three items 900px is comfortable again. The `white-space: nowrap`
   on .nav-links a above is what guarantees a label never breaks mid-word. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--navy); padding: 14px; border-bottom: 1px solid var(--line-dark);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-130%); transition: transform .28s var(--ease);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 12px; }
  .nav-links a.btn { justify-content: center; margin-top: 6px; }
}
@media (max-width: 420px) { .brand small { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .98rem;
  padding: 13px 22px; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn--primary { background: linear-gradient(135deg, var(--cyan), var(--green)); color: #04121F; box-shadow: 0 12px 28px -10px rgba(34, 211, 238, .55); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn--light:hover { border-color: rgba(34,211,238,.5); }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--sm { padding: 9px 15px; font-size: .86rem; border-radius: 9px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(680px 460px at 78% 8%, rgba(34, 211, 238, 0.22), transparent 60%),
    radial-gradient(620px 460px at 4% 100%, rgba(22, 163, 74, 0.2), transparent 55%),
    linear-gradient(180deg, #0A1628 0%, #0C1B30 60%, #0A1628 100%);
  color: #E2E8F0; padding: 92px 0 96px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none;
  background-image: linear-gradient(rgba(34,211,238,.12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34,211,238,.12) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
}
.hero .container { position: relative; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--cyan), var(--green-soft) 60%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: #9FB3C8; margin-top: 20px; max-width: 62ch; }
.hero .btn-row { margin-top: 30px; }
.hero-meta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; color: #94A3B8; font-size: .9rem; }
.hero-meta b { color: #fff; font-family: var(--font-mono); }

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-art { position: relative; }
.globe-card {
  position: relative; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg); padding: 18px; backdrop-filter: blur(6px); overflow: hidden;
}
.globe-card img { border-radius: var(--radius); width: 100%; }
.globe-card .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(10,22,40,.75); border: 1px solid var(--line-dark);
  padding: 5px 10px; border-radius: 999px;
}
.globe-card .pulse {
  position: absolute; bottom: 30px; right: 30px; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%; background: var(--green-soft);
  box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  70%  { box-shadow: 0 0 0 16px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero { background: var(--navy); color: #E2E8F0; padding: 72px 0 56px; position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: linear-gradient(rgba(34,211,238,.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34,211,238,.1) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-top: 16px; }
.page-hero .lead { color: #9FB3C8; max-width: 66ch; margin-top: 16px; }
.page-hero .btn-row { margin-top: 28px; }
.breadcrumb { font-family: var(--font-mono); font-size: .8rem; color: var(--slate-2); margin-bottom: 14px; }
.breadcrumb a { color: var(--cyan); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(34,211,238,.4); }
.card .ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(22,163,74,.16)); color: var(--cyan-deep); font-size: 1.4rem;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--slate); }
.card--dark { background: var(--navy-3); border-color: var(--line-dark); color: #CBD5E1; }
.card--dark h3 { color: #fff; }
.card--dark p { color: #94A3B8; }
.card--dark:hover { border-color: rgba(34,211,238,.5); }
.card--feature { display: flex; flex-direction: column; height: 100%; }
.card--feature .more { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: .9rem; }
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }
a.card h3 { color: var(--ink); }
a.card--dark h3 { color: #fff; }

.badge-new {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #04121F; background: linear-gradient(135deg, var(--amber), #FBBF24);
  padding: 4px 10px; border-radius: 999px; font-weight: 800;
}
.badge-sdk { background: linear-gradient(135deg, var(--cyan), var(--green-soft)); }

/* ---------- Feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.feature-row + .feature-row { margin-top: 72px; }
.feature-row.flip .feature-text { order: 2; }
@media (max-width: 880px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row.flip .feature-text { order: initial; }
}
.feature-text h2 { margin-bottom: 14px; margin-top: 16px; }
.feature-text .lead { margin-bottom: 22px; }
.feature-list { list-style: none; padding: 0; display: grid; gap: 12px; }
/* The marker is absolutely positioned rather than a flex child, so inline
   <strong> and the text that follows it stay on one continuous line. */
.feature-list li { position: relative; padding-left: 22px; color: var(--slate); }
.feature-list li::before { content: "▸"; position: absolute; left: 0; top: 0; color: var(--cyan-deep); font-weight: 800; }
.section--dark .feature-list li, .section--grad .feature-list li { color: #CBD5E1; }
.section--dark .feature-list li::before, .section--grad .feature-list li::before { color: var(--cyan); }
.feature-art {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: radial-gradient(420px 300px at 80% 0%, rgba(34,211,238,.12), transparent 60%), var(--mist-2);
  padding: 22px; position: relative; overflow: hidden;
}
.section--dark .feature-art, .section--grad .feature-art {
  border-color: var(--line-dark);
  background: radial-gradient(420px 300px at 80% 0%, rgba(34,211,238,.16), transparent 60%), rgba(255,255,255,.03);
}
.feature-art--bare { background: none; border: 0; padding: 0; }

/* ---------- Terminal / code ---------- */
.terminal { background: #07101F; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.terminal .bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line-dark); background: #0B1626; }
.terminal .bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.terminal .bar i:nth-child(1) { background: #FB7185; }
.terminal .bar i:nth-child(2) { background: var(--amber); }
.terminal .bar i:nth-child(3) { background: var(--green-soft); }
.terminal .bar .path { margin-left: auto; color: #64748B; font-family: var(--font-mono); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal .bar .copy {
  margin-left: 10px; flex: none; background: none; border: 1px solid var(--line-dark); color: #64748B;
  font-family: var(--font-mono); font-size: .68rem; padding: 4px 9px; border-radius: 7px; cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.terminal .bar .copy:hover { color: var(--cyan); border-color: rgba(34,211,238,.45); }
.terminal pre { margin: 0; padding: 18px 20px; color: #CBD5E1; font-family: var(--font-mono); font-size: .82rem; line-height: 1.7; overflow-x: auto; }
.terminal .k { color: var(--cyan); }
.terminal .s { color: var(--green-soft); }
.terminal .c { color: #64748B; font-style: italic; }
.terminal .n { color: var(--amber); }
.terminal .f { color: #93C5FD; }
.terminal .p { color: #C4B5FD; }
code.mono, p code, li code, td code {
  font-family: var(--font-mono); font-size: .84em;
  background: var(--mist-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; color: var(--cyan-deep);
}
.section--dark code.mono, .section--dark p code, .section--dark li code, .section--dark td code,
.section--grad code.mono, .section--grad li code {
  background: rgba(255,255,255,.06); border-color: var(--line-dark); color: var(--cyan);
}

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--mist-2); border: 1px solid var(--line); color: var(--slate);
  transition: all .16s var(--ease);
}
.tab:hover { color: var(--ink); border-color: rgba(34,211,238,.4); }
.tab[aria-selected="true"] { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.5); color: var(--cyan-deep); font-weight: 700; }
.section--dark .tab, .section--grad .tab { background: rgba(255,255,255,.05); border-color: var(--line-dark); color: #94A3B8; }
.section--dark .tab:hover, .section--grad .tab:hover { color: #fff; }
.section--dark .tab[aria-selected="true"], .section--grad .tab[aria-selected="true"] { background: rgba(34,211,238,.15); color: var(--cyan); }
.panel[hidden] { display: none; }

/* ---------- Stats ---------- */
.stat-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
@media (max-width: 1040px) { .stat-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .stat-band { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; }
.stat .num {
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--cyan), var(--green-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .label { color: #94A3B8; font-size: .88rem; margin-top: 4px; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { font-family: var(--font-mono); font-size: .78rem; padding: 6px 12px; border-radius: 999px; background: var(--mist-2); border: 1px solid var(--line); color: var(--slate); }
.section--dark .chip, .section--grad .chip, .hero .chip { background: rgba(255,255,255,.05); border-color: var(--line-dark); color: #CBD5E1; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
table.cmp { width: 100%; border-collapse: collapse; background: #fff; min-width: 620px; }
table.cmp th, table.cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { background: var(--navy); color: #fff; font-size: .88rem; letter-spacing: .02em; white-space: nowrap; }
table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp tbody td { color: var(--slate); font-size: .94rem; }
table.cmp tbody td:first-child { color: var(--ink); font-weight: 600; }
table.cmp tbody tr:hover { background: rgba(34,211,238,.05); }
table.cmp td.num { font-family: var(--font-mono); font-weight: 700; }

/* ---------- Screenshot frames & galleries ---------- */
.diagram-frame {
  border-radius: var(--radius-lg); border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg); overflow: hidden; background: var(--navy);
}
.diagram-frame img { width: 100%; display: block; }
.diagram-caption { font-family: var(--font-mono); font-size: .78rem; color: var(--slate-2); text-align: center; margin-top: 12px; }
.section--dark .diagram-caption, .section--grad .diagram-caption { color: #64748B; }

.screen { border-radius: var(--radius); border: 1px solid var(--line-dark); overflow: hidden; background: #0B1626; box-shadow: var(--shadow-lg); }
.screen .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line-dark); background: #0B1626; }
.screen .bar i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.screen .bar i:nth-child(1) { background: #FB7185; }
.screen .bar i:nth-child(2) { background: var(--amber); }
.screen .bar i:nth-child(3) { background: var(--green-soft); }
.screen .bar .path { margin-left: 8px; font-family: var(--font-mono); font-size: .72rem; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen img { width: 100%; }
.screen figcaption { padding: 13px 16px; font-size: .84rem; color: #94A3B8; border-top: 1px solid var(--line-dark); }
.screen figcaption b { display: block; color: #fff; font-size: .92rem; margin-bottom: 3px; }

.shot-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.shot { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.shot:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.4); }
.shot img { width: 100%; border-bottom: 1px solid var(--line); }
/* Inside a gallery the captures have wildly different aspect ratios, which
   leaves dead space under the shorter cards in a row. Crop them to a common
   ratio from the top, where the interesting part of a UI screenshot lives. */
.shot-grid .shot { display: flex; flex-direction: column; }
.shot-grid .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.shot-grid .shot figcaption { flex: 1; }
/* Opt out for captures much wider than the gallery ratio — a Swagger route list
   is ~3.3:1, and cropping it to 16:10 slices the method and path off both ends.
   These keep their own proportions, so the grid must stop stretching cards to a
   common height or the shorter one gains a block of empty space under its
   caption. Uneven card bottoms are the better trade here. */
.shot-grid .shot--wide img { aspect-ratio: auto; object-fit: fill; }
.shot-grid--wide { align-items: start; }
.shot-grid--wide .shot figcaption { flex: 0 1 auto; }
.shot figcaption { padding: 14px 17px; font-size: .88rem; color: var(--slate); }
.shot figcaption b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: 3px; }
.section--dark .shot, .section--grad .shot { background: var(--navy-3); border-color: var(--line-dark); }
.section--dark .shot img, .section--grad .shot img { border-bottom-color: var(--line-dark); }
.section--dark .shot figcaption, .section--grad .shot figcaption { color: #94A3B8; }
.section--dark .shot figcaption b, .section--grad .shot figcaption b { color: #fff; }

/* ---------- Click-to-load demo media ---------- */
.demo { border-radius: var(--radius); border: 1px solid var(--line-dark); overflow: hidden; background: #0B1626; box-shadow: var(--shadow-lg); }
.demo-poster { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.demo-poster img { width: 100%; opacity: .5; transition: opacity .25s var(--ease); }
.demo-poster:hover img { opacity: .7; }
.demo-play {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(10,22,40,.4), rgba(10,22,40,.78)); color: #fff; padding: 20px;
}
.demo-play i {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: linear-gradient(135deg, var(--cyan), var(--green)); color: #04121F; font-size: 1.5rem;
  box-shadow: 0 12px 32px -8px rgba(34,211,238,.7); transition: transform .2s var(--ease);
}
.demo-poster:hover .demo-play i { transform: scale(1.08); }
.demo-play b { font-size: .98rem; text-align: center; }
.demo-play small { font-family: var(--font-mono); font-size: .74rem; color: #94A3B8; }
.demo-cap { padding: 13px 16px; font-size: .84rem; color: #94A3B8; border-top: 1px solid var(--line-dark); }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  background: radial-gradient(600px 360px at 80% 0%, rgba(34,211,238,.2), transparent 60%), linear-gradient(135deg, var(--navy), #0C1B30);
  color: #fff; border-radius: var(--radius-lg); padding: 56px 40px; text-align: center;
}
.cta h2 { color: #fff; margin-top: 16px; }
.cta .lead { color: #9FB3C8; max-width: 60ch; margin: 14px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 28px; }
.cta-fine { margin-top: 20px; font-family: var(--font-mono); font-size: .78rem; color: #64748B; }
@media (max-width: 600px) { .cta { padding: 36px 22px; } }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.field label .req { color: var(--rose); margin-left: 2px; }
.field-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.input, .select, .textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  background: var(--mist); border: 1px solid var(--line); color: var(--ink); font-size: .95rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #94A3B8; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cyan); background: #fff;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}
.textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.hint { font-size: .8rem; color: var(--slate-2); margin-top: 7px; }
.checks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--mist);
  font-size: .9rem; color: var(--slate); transition: all .16s var(--ease);
}
.check:hover { border-color: rgba(34,211,238,.45); color: var(--ink); }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--cyan-deep); flex: none; cursor: pointer; }
.check:has(input:checked) { border-color: var(--cyan); background: rgba(34,211,238,.08); color: var(--ink); font-weight: 600; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .9rem; display: none; }
.form-status[data-state="ok"]   { display: block; background: rgba(22,163,74,.09);  border: 1px solid rgba(22,163,74,.35);  color: #14532D; }
.form-status[data-state="err"]  { display: block; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.4); color: #9F1239; }
.form-status[data-state="busy"] { display: block; background: rgba(34,211,238,.1);  border: 1px solid rgba(34,211,238,.4);  color: var(--cyan-deep); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact layout ---------- */
.contact-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Split / sticky ---------- */
.split { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; }
}

/* ---------- Notes ---------- */
.note { font-size: .92rem; padding: 15px 18px; border-radius: var(--radius-sm); background: rgba(245, 158, 11, .08); border: 1px solid rgba(245,158,11,.3); color: #92400E; }
.note b { color: #78350F; }
.note--cyan { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.35); color: #155E75; }
.note--cyan b { color: #0E7490; }
.section--dark .note, .section--grad .note { background: rgba(245,158,11,.1); color: #FDE68A; border-color: rgba(245,158,11,.3); }
.section--dark .note b, .section--grad .note b { color: #FEF3C7; }
.claims-note { font-size: .82rem; color: var(--slate-2); font-style: italic; border-top: 1px dashed var(--line); margin-top: 28px; padding-top: 16px; }
.section--dark .claims-note, .section--grad .claims-note { border-top-color: var(--line-dark); color: #64748B; }

/* ---------- Flow / steps ---------- */
.flow { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.flow-node { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px; box-shadow: var(--shadow); }
.flow-node .step { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: var(--cyan-deep); display: block; margin-bottom: 10px; }
.flow-node b { display: block; font-size: 1.02rem; margin-bottom: 7px; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.flow-node p { font-size: .89rem; color: var(--slate); line-height: 1.55; }
.section--dark .flow-node, .section--grad .flow-node { background: var(--navy-3); border-color: var(--line-dark); }
.section--dark .flow-node b, .section--grad .flow-node b { color: #fff; }
.section--dark .flow-node p, .section--grad .flow-node p { color: #94A3B8; }
.section--dark .flow-node .step, .section--grad .flow-node .step { color: var(--cyan); }

/* ---------- Footer ---------- */
.site-footer { background: #07101F; color: #94A3B8; padding: 56px 0 32px; border-top: 1px solid var(--line-dark); }
.site-footer .grid-4 { gap: 36px; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #94A3B8; display: block; padding: 4px 0; font-size: .92rem; }
.site-footer a:hover { color: var(--cyan); text-decoration: none; }
.site-footer p { font-size: .9rem; }
.footer-address {
  font-style: normal; font-size: .86rem; line-height: 1.7;
  color: #64748B; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-dark);
}
.card-address {
  font-style: normal; font-size: .88rem; line-height: 1.65; color: var(--slate);
  padding-top: 14px; border-top: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 36px; }
.footer-brand b { color: #fff; }
.footer-disclaimer { font-size: .78rem; color: #64748B; font-style: italic; border-top: 1px solid var(--line-dark); margin-top: 36px; padding-top: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 18px; font-size: .82rem; }

/* ---------- Reveal ----------
   Gated on html.js, which site.js sets before first paint. If the script fails
   to load or is blocked, .reveal content simply renders — it is never hidden
   by CSS alone. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.center{margin-inline:auto}.flex{display:flex}.between{justify-content:space-between}.items-center{align-items:center}.gap-2{gap:12px}
hr.rule{border:none;border-top:1px solid var(--line);margin:40px 0}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .demo, .btn-row { display: none !important; }
  body { background: #fff; }
  .section--dark, .section--grad, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .section--dark h3, .hero h1 { color: #000 !important; }
}