/* ==========================================================================
   Nimbirium Stack — Stylesheet
   Premium IT/software palette: warm light surfaces + deep charcoal dark
   surfaces with an amber accent (used deliberately — dark = emphasis: hero,
   CTAs, featured plan, footer). Type: Fraunces (display serif) + Inter
   (body) + IBM Plex Mono (data / tags).
   ========================================================================== */

:root{
  /* light surfaces (warm, not cool-grey) */
  --bg:        #FFFFFF;
  --bg-alt:    #F4F2EE;
  --surface:   #FFFFFF;
  --surface-2: #FAF8F5;
  --border:    #E7E2D9;
  --border-soft: #EFEBE4;

  /* text on light */
  --text:       #1C1A17;
  --text-muted: #6B6459;
  --text-dim:   #9A9285;

  /* accent (warm amber/copper — reads on both light and dark) */
  --accent:      #B8763A;
  --accent-soft: #D9A468;
  --accent-dim:  rgba(184,118,58,0.12);

  /* dark surfaces (neutral charcoal, not blue-leaning) */
  --navy:   #1B1915;
  --navy-2: #24211C;
  --navy-border: #3A362E;
  --cream:  #F5F1EA;

  /* status */
  --online: #3F8F5F;
  --warn:   #A6841F;
  --off:    #B3453B;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --max: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

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

img{ max-width: 100%; display: block; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; color: var(--text); }
h1 em, h2 em, h3 em{ font-style: normal; color: var(--accent); font-weight: 600; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section{ padding: 104px 0; border-top: 1px solid var(--border-soft); overflow: hidden; }
.section--alt{ background: var(--bg-alt); }
.section--tight{ padding: 76px 0; }
.section:first-child{ border-top: none; }

.section-head{ max-width: 660px; margin-bottom: 56px; }
.kicker{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--accent);
  margin-bottom: 16px; letter-spacing: 0.06em; text-transform: uppercase;
}
.kicker::before{ content: ""; width: 16px; height: 1px; background: var(--accent); display: inline-block; flex: none; }
.section-head h2{ font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 16px; }
.section-head p{ color: var(--text-muted); font-size: 17px; max-width: 62ch; }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 3px; font-size: 14.5px; font-weight: 500;
  font-family: var(--font-body); border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap; letter-spacing: 0.01em;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--navy); color: #fff; }
.btn-primary:hover{ background: #050810; }
.btn-ghost{ border-color: var(--border); color: var(--text); background: transparent; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: #2B506F; }
.btn-block{ width: 100%; justify-content: center; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

/* ---------- employee login: header link + nav menu link ---------- */
.employee-login-link{ font-size: 13.5px; color: var(--text-muted); margin-right: 6px; }
.employee-login-link:hover{ color: var(--accent); }
.nav-login-link{ color: var(--text-muted); }
.nav-login-link:hover{ color: var(--accent); }
@media (min-width: 761px){
  .nav-login-link{ padding-left: 20px; margin-left: 6px; border-left: 1px solid var(--border); }
}

/* ---------- employee login: full-screen elegant overlay, hidden until triggered ---------- */
.login-overlay{
  position: fixed; inset: 0; background: rgba(15,13,10,0.72); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.login-overlay.is-open{ opacity: 1; visibility: visible; transition: opacity .2s ease; }
.login-panel{
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; width: 100%; max-width: 840px; max-height: 92vh; position: relative;
  box-shadow: 0 40px 90px -28px rgba(10,8,6,0.55);
}
.login-close{
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none;
  background: rgba(255,255,255,0.08); border-radius: 50%; color: rgba(255,255,255,0.72);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
.login-close:hover{ color: #fff; background: rgba(255,255,255,0.18); }

.login-brand{
  flex: 1 1 42%; background: var(--navy); color: #fff; padding: 44px 40px; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-brand .logo-mark{ width: 34px; height: 34px; margin-bottom: 30px; }
.login-brand-text h4{ font-family: var(--font-display); font-size: 21px; margin-bottom: 12px; }
.login-brand-text p{ font-size: 13.5px; color: rgba(245,241,234,0.6); line-height: 1.7; }
.login-brand-text a{ color: var(--accent-soft); }
.login-brand-foot{ font-size: 12.5px; color: rgba(245,241,234,0.45); padding-top: 22px; border-top: 1px solid var(--navy-border); margin-top: 22px; }
.login-brand-foot a{ color: rgba(245,241,234,0.75); }

.login-form-side{
  flex: 1 1 58%; padding: 44px 40px; min-width: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.login-form-side h3{ font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; }
.login-sub{ font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.login-forgot{ margin-top: 18px; text-align: center; font-size: 13px; }
.login-forgot a{ color: var(--text-muted); }
.login-forgot a:hover{ color: var(--accent); }

@media (max-width: 700px){
  .login-panel{ flex-direction: column; max-height: 94vh; overflow-y: auto; }
  .login-brand, .login-form-side{ flex-basis: auto; }
  .login-brand{ padding: 32px 28px 24px; }
  .login-brand-foot{ display: none; }
  .login-form-side{ padding: 28px; overflow-y: visible; }
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo{ display: flex; align-items: center; gap: 12px; }
.logo-mark{ width: 38px; height: 38px; flex: none; }
.logo-word{ display: flex; flex-direction: column; line-height: 1; }
.logo-word b{ font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text); }
.logo-word span{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--accent); margin-top: 3px; }

.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-links a{ font-size: 14.5px; color: var(--text-muted); transition: color .15s ease; position: relative; padding: 4px 0; }
.nav-links a:hover{ color: var(--text); }
.nav-links a.is-active{ color: var(--text); }
.nav-links a.is-active::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--accent); }

.header-actions{ display: flex; align-items: center; gap: 14px; }
.nav-toggle{
  display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text);
}
.nav-toggle svg{ width: 18px; height: 18px; }

/* ---------- breadcrumb / page header ---------- */
.breadcrumb{ font-size: 13px; color: var(--text-dim); margin-bottom: 20px; font-family: var(--font-mono); }
.breadcrumb a{ color: var(--text-muted); }
.breadcrumb a:hover{ color: var(--accent); }
.page-header{ padding: 56px 0 8px; }
.page-header h1{ font-size: clamp(28px, 3.6vw, 42px); max-width: 20ch; margin-bottom: 18px; }
.page-header p{ color: var(--text-muted); font-size: 18px; max-width: 62ch; }
.page-header-meta{ display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.page-stat b{ display: block; font-family: var(--font-display); font-size: 26px; }
.page-stat span{ font-size: 13px; color: var(--text-muted); }

/* ---------- hero (home) — DARK, the site's first emphasis moment ---------- */
.hero{
  padding: 56px 0 80px; position: relative;
  background: var(--navy); border-bottom: 1px solid var(--navy-border);
}
.hero-grid{ display: flex; flex-wrap: wrap; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-grid > div{ min-width: 0; }
.hero-grid > div:first-child{ flex: 1.12 1 420px; }
.hero-grid > div:last-child{ flex: 0.88 1 360px; }
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px;
  color: rgba(245,241,234,0.72); border: 1px solid rgba(245,241,234,0.16); padding: 6px 12px; border-radius: var(--radius-sm);
  margin-bottom: 24px; background: rgba(245,241,234,0.04);
}
.hero-eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: #3ED28A; box-shadow: 0 0 0 3px rgba(62,210,138,0.2); }
.hero h1{ font-size: clamp(32px, 4vw, 46px); max-width: 15ch; color: #fff; }
.hero h1 em{ color: var(--accent-soft); }
.hero-sub{ margin-top: 22px; font-size: 17px; color: rgba(245,241,234,0.66); max-width: 48ch; }
.hero-cta{ margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-primary{ background: var(--accent); }
.hero .btn-primary:hover{ background: var(--accent-soft); }
.hero .btn-ghost{ border-color: rgba(245,241,234,0.28); color: #fff; }
.hero .btn-ghost:hover{ border-color: #fff; }
.hero-note{ margin-top: 28px; font-size: 13px; color: rgba(245,241,234,0.4); }

/* ---------- live pulse dashboard (white card — contrast against dark hero) ---------- */
.pulse-panel{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px; box-shadow: 0 12px 28px -18px rgba(10,8,6,0.28);
}
.pulse-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pulse-head span{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.06em; }
.pulse-head .live{ display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--online); font-family: var(--font-mono); letter-spacing: 0.04em; }
.pulse-head .live i{ width: 6px; height: 6px; border-radius: 50%; background: var(--online); display: inline-block; animation: pulse 2s ease-in-out infinite; }

.pulse-stats{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
.pulse-stats > div{ flex: 1 1 40%; min-width: 0; }
.pulse-stats.cols-3 > div{ flex-basis: 28%; }
.pulse-stat b{ display: block; font-family: var(--font-display); font-size: 28px; color: var(--text); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.pulse-stat span{ font-size: 12.5px; color: var(--text-muted); }

.sparkline-wrap{ border-top: 1px solid var(--border); padding-top: 18px; margin-bottom: 18px; }
.sparkline-label{ display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 8px; }
.sparkline-label b{ color: var(--accent); font-weight: 500; }
.sparkline{ width: 100%; height: 46px; display: block; }
.sparkline path.fill{ fill: rgba(184,118,58,0.08); stroke: none; }
.sparkline path.line{ fill: none; stroke: var(--accent); stroke-width: 1.6; }

.pulse-feed{ border-top: 1px solid var(--border); padding-top: 16px; }
.pulse-feed-row{ display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.pulse-feed-row .loc{ display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.pulse-feed-row .loc i{ width: 5px; height: 5px; border-radius: 50%; background: var(--online); flex: none; }
.pulse-feed-row .ping{ font-family: var(--font-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }

@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
@keyframes valueFlash{ 0%{ background: rgba(184,118,58,0.14); } 100%{ background: transparent; } }
.flash{ animation: valueFlash 1.1s ease-out; }

/* ---------- trust bar ---------- */
.trust{ padding: 36px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.trust .wrap{ display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.trust-label{ font-size: 12.5px; color: var(--text-dim); font-family: var(--font-mono); flex: none; letter-spacing: 0.04em; }
.trust-marks{ display: flex; gap: 38px; flex-wrap: wrap; align-items: center; }
.trust-marks span{ font-family: var(--font-display); font-size: 16px; color: var(--text-dim); font-style: normal; }

/* ---------- stat strip ---------- */
.about-grid{ display: flex; flex-wrap: wrap; gap: 68px; }
.about-grid > div{ min-width: 0; }
.about-grid > div:first-child{ flex: 0.95 1 380px; }
.about-grid > div:last-child{ flex: 1.05 1 380px; }
.about-copy p{ color: var(--text-muted); font-size: 17px; max-width: 54ch; }
.about-copy p + p{ margin-top: 16px; }
.stat-strip{ border-top: 1px solid var(--border); }
.stat-row{ display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--border); gap: 20px; }
.stat-row .label{ color: var(--text-muted); font-size: 15px; }
.stat-row .value{ font-family: var(--font-display); font-size: 27px; color: var(--text); text-align: right; }
.stat-row .value small{ font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-left: 6px; }

/* ---------- icon badge: small, outlined — a restrained corporate mark, not a big tile ---------- */
.icon-badge{
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: transparent; border: 1.4px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.icon-badge svg{ width: 17px; height: 17px; stroke: var(--navy); }
.icon-badge.lg{ width: 46px; height: 46px; }
.icon-badge.lg svg{ width: 20px; height: 20px; }
.icon-badge.on-dark{ border-color: rgba(245,241,234,0.55); }
.icon-badge.on-dark svg{ stroke: #fff; }

.layer-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--accent);
  letter-spacing: 0.05em; margin-bottom: 14px;
}

/* ---------- services (single-topic dedicated page) ---------- */
.service-block{ display: flex; flex-wrap: wrap; gap: 40px; padding: 56px 0; border-bottom: 1px solid var(--border-soft); }
.service-block:first-of-type{ padding-top: 0; }
.service-block:last-of-type{ border-bottom: none; }
.service-block > div:last-child{ flex: 1 1 480px; min-width: 0; }
.service-icon-col{ display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 64px; }
.service-meta{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); text-align: center; line-height: 1.5; }
.service-title{ font-size: 27px; margin-bottom: 16px; }
.service-body p{ color: var(--text-muted); font-size: 16.5px; max-width: 68ch; }
.service-list{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 11px 26px; }
.service-list li{ flex: 1 1 260px; }
.service-list li{ font-size: 14.5px; color: var(--text-muted); padding-left: 20px; position: relative; }
.service-list li::before{ content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 1px; background: var(--accent); }

.service-index{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 60px; }
.service-index a{
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 100px; font-size: 13.5px; color: var(--text-muted); background: var(--surface);
}
.service-index a:hover{ border-color: var(--accent); color: var(--accent); }
.service-index a b{ font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 500; }

/* ---------- pillar grid (home / about teasers) ---------- */
.pillar-grid{ display: flex; flex-wrap: wrap; gap: 24px; }
.pillar-card{
  flex: 1 1 280px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 30px; background: var(--surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pillar-card:hover{ border-color: var(--accent); box-shadow: 0 8px 20px -16px rgba(27,25,21,0.3); }
.pillar-card h3{ font-size: 19px; margin: 18px 0 8px; }
.pillar-card p{ font-size: 14.5px; color: var(--text-muted); margin-bottom: 16px; }
.pillar-card .go{ font-size: 13px; color: var(--accent); font-family: var(--font-mono); }

/* ---------- lore block (dark feature card) ---------- */
.lore-block{
  border-radius: var(--radius-lg); padding: 48px; background: var(--navy);
  display: flex; flex-wrap: wrap; gap: 36px; align-items: center;
}
.lore-block > *:last-child{ flex: 1 1 400px; min-width: 0; }
.lore-block .lore-title{ font-family: var(--font-display); font-size: 24px; margin-bottom: 14px; color: #fff; }
.lore-block p{ color: rgba(245,241,234,0.68); font-size: 16px; max-width: 62ch; }
.lore-block p + p{ margin-top: 12px; }
.lore-block .btn-ghost{ border-color: rgba(245,241,234,0.28); color: #fff; margin-top: 18px; }
.lore-block .btn-ghost:hover{ border-color: #fff; background: rgba(245,241,234,0.06); }

/* ---------- stack diagram (about.html — alternating light/dark layers) ---------- */
.stack-diagram{ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.stack-layer{
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  padding: 30px 36px; border-bottom: 1px solid var(--border);
}
.stack-layer-index{ flex: none; width: 60px; }
.stack-layer-body{ flex: 1 1 320px; min-width: 0; }
.stack-layer .go{ flex: none; }
.stack-layer:last-child{ border-bottom: none; }
.stack-layer-index{ font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.stack-layer h3{ font-size: 19px; margin-bottom: 4px; }
.stack-layer p{ font-size: 14px; color: var(--text-muted); }
.stack-layer .go{ font-size: 13px; color: var(--accent); font-family: var(--font-mono); white-space: nowrap; }
.stack-layer--dark{ background: var(--navy); border-bottom-color: var(--navy-border); }
.stack-layer--dark .stack-layer-index{ color: rgba(245,241,234,0.4); }
.stack-layer--dark h3{ color: #fff; }
.stack-layer--dark p{ color: rgba(245,241,234,0.62); }
.stack-layer--dark .go{ color: var(--accent-soft); }

/* ---------- network / live servers ---------- */
.network-toolbar{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.network-filters{ display: flex; gap: 10px; flex-wrap: wrap; }
.field-inline{ position: relative; }
.field-inline input[type="search"]{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px 10px 34px; color: var(--text); width: 230px; font-size: 14px;
}
.field-inline svg{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-dim); }
select.filter-select{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 30px 10px 12px; color: var(--text-muted); font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A93A8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
table.server-table{ width: 100%; border-collapse: collapse; min-width: 780px; }
.server-table thead th{
  text-align: left; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim);
  padding: 15px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-weight: 400;
  white-space: nowrap; letter-spacing: 0.03em;
}
.server-table tbody td{ padding: 13px 16px; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--text); white-space: nowrap; }
.server-table tbody tr:last-child td{ border-bottom: none; }
.server-table tbody tr:hover{ background: var(--surface-2); }
.server-table .mono{ font-family: var(--font-mono); color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.status-pill{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-family: var(--font-mono); }
.status-pill i{ width: 6px; height: 6px; border-radius: 50%; }
.status-pill.online i{ background: var(--online); }
.status-pill.online{ color: var(--online); }
.status-pill.maintenance i{ background: var(--warn); }
.status-pill.maintenance{ color: var(--warn); }
.status-pill.high-load i{ background: var(--off); }
.status-pill.high-load{ color: var(--off); }

.network-footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; gap: 16px; }
.network-count{ font-size: 13.5px; color: var(--text-dim); }
.network-more{ text-align: center; margin-top: 34px; }

.pagination{ display: flex; align-items: center; gap: 6px; }
.pagination button{
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 13px; font-family: var(--font-mono);
}
.pagination button.is-active{ border-color: var(--accent); color: var(--accent); }
.pagination button:hover:not(.is-active):not([disabled]){ border-color: var(--text-dim); color: var(--text); }
.pagination button[disabled]{ opacity: .4; cursor: not-allowed; }

.pulse-dash{ display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 40px; }
.pulse-dash-cell{ background: var(--surface); padding: 24px 26px; min-width: 0; flex: 1 1 200px; }
.pulse-dash-cell span{ display: block; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 8px; }
.pulse-dash-cell b{ font-family: var(--font-display); font-size: 28px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- spec sheet ---------- */
.spec-sheet{ border-top: 1px solid var(--border); max-width: 900px; }
.spec-row{ display: flex; flex-wrap: wrap; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.spec-row dt{ flex: 0 0 300px; font-family: var(--font-display); font-size: 18px; color: var(--text); margin: 0; }
.spec-row dd{ flex: 1 1 300px; min-width: 0; margin: 0; color: var(--text-muted); font-size: 15.5px; max-width: 58ch; }

/* ---------- process ---------- */
.process-grid{ display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.process-step{ background: var(--surface); padding: 32px 26px; min-width: 0; flex: 1 1 220px; }
.process-tag{ font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 18px; }
.process-step h3{ font-size: 18px; margin-bottom: 10px; }
.process-step p{ font-size: 14.5px; color: var(--text-muted); }

/* ---------- testimonials ---------- */
.quote-grid{ display: flex; flex-wrap: wrap; gap: 28px; }
.quote-card{ flex: 1 1 280px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.quote-card blockquote{ margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--text); line-height: 1.5; font-weight: 500; }
.quote-by{ display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.quote-by b{ font-size: 14px; font-weight: 600; font-family: var(--font-body); }
.quote-by span{ font-size: 12.5px; color: var(--text-dim); }

/* ---------- comparison table (pricing) ---------- */
.compare-table{ width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td{ padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14.5px; text-align: left; }
.compare-table thead th{ font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); font-weight: 400; letter-spacing: 0.03em; background: var(--surface-2); }
.compare-table th:not(:first-child), .compare-table td:not(:first-child){ text-align: center; }
.compare-table tbody th{ font-weight: 500; color: var(--text); }
.compare-table td{ color: var(--text-muted); font-variant-numeric: tabular-nums; }
.compare-table .yes{ color: var(--online); font-weight: 600; }
.compare-table .no{ color: var(--text-dim); }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th{ border-bottom: none; }

/* ---------- FAQ (native details/summary — no JS needed) ---------- */
.faq-list{ max-width: 840px; border-top: 1px solid var(--border); }
.faq-list details{ border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-list summary{
  cursor: pointer; font-family: var(--font-display); font-size: 16.5px; font-weight: 500; color: var(--text);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq-list summary::-webkit-details-marker{ display: none; }
.faq-list summary::after{ content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 18px; flex: none; }
.faq-list details[open] summary::after{ content: "\2212"; }
.faq-list p{ margin-top: 12px; color: var(--text-muted); font-size: 15px; max-width: 70ch; }

/* ---------- pricing ---------- */
.pricing-grid{ display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.plan-card{ flex: 1 1 280px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; display: flex; flex-direction: column; }
.plan-name{ font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.plan-desc{ font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.plan-price{ font-family: var(--font-display); font-size: 40px; color: var(--text); margin-bottom: 4px; }
.plan-price span{ font-family: var(--font-body); font-size: 14px; color: var(--text-dim); font-weight: 400; }
.plan-period{ font-size: 13px; color: var(--text-dim); margin-bottom: 28px; }
.plan-features{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.plan-features li{ font-size: 14.5px; color: var(--text-muted); padding-left: 22px; position: relative; }
.plan-features li::before{ content: "+"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); }

.plan-card.is-featured{
  position: relative; background: var(--navy); border-color: var(--navy);
  box-shadow: 0 14px 32px -20px rgba(27,25,21,0.4);
}
.plan-flag{ position: absolute; top: -13px; left: 34px; background: var(--accent); color: #fff; font-size: 11.5px; font-family: var(--font-mono); padding: 4px 12px; border-radius: 100px; letter-spacing: 0.04em; }
.plan-card.is-featured .plan-name, .plan-card.is-featured .plan-price{ color: #fff; }
.plan-card.is-featured .plan-desc, .plan-card.is-featured .plan-period{ color: rgba(245,241,234,0.55); }
.plan-card.is-featured .plan-price span{ color: rgba(245,241,234,0.5); }
.plan-card.is-featured .plan-features li{ color: rgba(245,241,234,0.78); }
.plan-card.is-featured .plan-features li::before{ color: var(--accent-soft); }
.plan-card.is-featured .btn-primary{ background: var(--accent); }
.plan-card.is-featured .btn-primary:hover{ background: var(--accent-soft); }

/* ---------- offices (contact page — two locations) ---------- */
.office-grid{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.office-card{ flex: 1 1 280px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; background: var(--surface); }
.office-card h4{ font-family: var(--font-display); font-size: 17px; margin-bottom: 2px; }
.office-card .office-kind{ font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 10px; }
.office-card address{ font-style: normal; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
.office-card a.office-phone{ font-size: 14.5px; color: var(--text); display: inline-block; margin-bottom: 14px; }
.office-card a.office-phone:hover{ color: var(--accent); }
.office-card .map-frame{ margin-top: 0; }
.office-card .map-frame iframe{ height: 160px; }

/* ---------- contact ---------- */
.contact-grid{ display: flex; flex-wrap: wrap; gap: 64px; }
.contact-grid > div:first-child{ flex: 0.85 1 360px; min-width: 0; }
.contact-grid > div:last-child{ flex: 1.15 1 420px; min-width: 0; }
.contact-info-block{ margin-bottom: 30px; }
.contact-info-block h3{ font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 10px; font-weight: 400; letter-spacing: 0.04em; }
.contact-info-block p, .contact-info-block a{ font-size: 16px; color: var(--text); }
.contact-info-block a:hover{ color: var(--accent); }
.contact-info-block address{ font-style: normal; color: var(--text); line-height: 1.75; }

.map-frame{ border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 10px; }
.map-frame iframe{ width: 100%; height: 220px; border: 0; display: block; filter: grayscale(0.3) contrast(0.96); }

.form-grid{ display: flex; flex-wrap: wrap; gap: 18px; }
.field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 240px; }
.field.full{ flex-basis: 100%; }
.field label{ font-size: 13.5px; color: var(--text-muted); }
.field input, .field select, .field textarea{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-size: 15px; width: 100%;
}
.field select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A93A8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
.field-hint{ font-size: 12.5px; color: var(--text-dim); }
.hp-field{ position: absolute; left: -9999px; opacity: 0; }

.form-msg{ display: none; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; }
.form-msg.is-visible{ display: block; }
.form-msg.success{ background: rgba(27,143,99,0.08); color: var(--online); border: 1px solid rgba(27,143,99,0.25); }
.form-msg.error{ background: rgba(179,69,59,0.08); color: var(--off); border: 1px solid rgba(179,69,59,0.25); }

.form-actions{ display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-basis: 100%; flex-wrap: wrap; }
.form-actions .field-hint{ margin: 0; }

/* ---------- CTA band — DARK, sitewide conversion moments ---------- */
.cta-band{ padding: 88px 0; overflow: hidden; }
.cta-band-inner{
  border-radius: var(--radius-lg); padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  background: var(--navy);
}
.cta-band h2{ font-size: clamp(24px, 3vw, 32px); max-width: 22ch; color: #fff; }
.cta-band p{ color: rgba(245,241,234,0.62); margin-top: 10px; max-width: 48ch; }
.cta-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.cta-band .btn-primary{ background: var(--accent); }
.cta-band .btn-primary:hover{ background: var(--accent-soft); }
.cta-band .btn-ghost{ border-color: rgba(245,241,234,0.25); color: #fff; }
.cta-band .btn-ghost:hover{ border-color: #fff; }

/* ---------- footer (dark, matches hero for a coherent bookend) ---------- */
.site-footer{ background: var(--navy); color: var(--cream); padding: 72px 0 32px; }
.site-footer .logo-word b{ color: var(--cream); }
.footer-grid{ display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 56px; }
.footer-about{ flex: 1.4 1 260px; min-width: 0; }
.footer-col{ flex: 1 1 160px; min-width: 0; }
.footer-about p{ color: rgba(245,241,234,0.62); font-size: 14.5px; margin-top: 16px; max-width: 34ch; }
.footer-col h4{ font-size: 12.5px; color: rgba(245,241,234,0.45); font-family: var(--font-mono); font-weight: 400; margin-bottom: 18px; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ font-size: 14.5px; color: rgba(245,241,234,0.78); }
.footer-col a:hover{ color: var(--accent-soft); }
.footer-social{ display: flex; gap: 12px; margin-top: 20px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid rgba(245,241,234,0.22); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: rgba(245,241,234,0.8); font-size: 12px; font-family: var(--font-mono);
}
.footer-social a:hover{ border-color: var(--accent-soft); color: var(--accent-soft); }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(245,241,234,0.14); flex-wrap: wrap; gap: 12px; }
.footer-bottom p{ font-size: 13px; color: rgba(245,241,234,0.5); }
.footer-legal{ display: flex; gap: 22px; }
.footer-legal a{ font-size: 13px; color: rgba(245,241,234,0.5); }
.footer-legal a:hover{ color: var(--accent-soft); }

/* ---------- legal page ---------- */
.legal-copy{ max-width: 74ch; }
.legal-copy h2{ font-size: 24px; margin: 48px 0 14px; }
.legal-copy h2:first-child{ margin-top: 0; }
.legal-copy p{ color: var(--text-muted); font-size: 15.5px; margin-bottom: 14px; }
.legal-copy ul{ margin: 0 0 14px; padding-left: 20px; list-style: disc; color: var(--text-muted); font-size: 15.5px; }
.legal-copy li{ margin-bottom: 8px; }
.legal-updated{ font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid > div{ flex-basis: 100% !important; }
  .about-grid > div{ flex-basis: 100% !important; }
  .service-block{ flex-direction: column; gap: 20px; }
  .service-block > div:last-child{ flex-basis: auto; }
  .service-icon-col{ flex-direction: row; align-items: center; width: auto; }
  .contact-grid > div{ flex-basis: 100% !important; }
  .quote-card{ flex-basis: 100%; }
  .plan-card{ flex-basis: 100%; }
  .spec-row{ flex-direction: column; gap: 8px; }
  .spec-row dt, .spec-row dd{ flex-basis: auto; }
  .lore-block{ flex-direction: column; text-align: left; }
  .lore-block > *:last-child{ flex-basis: auto; }
  .stack-layer-body{ flex-basis: 100%; order: 3; }
  .stack-layer .go{ order: 4; }
}

@media (max-width: 760px){
  .nav-links{
    position: fixed; inset: 84px 0 auto 0; background: var(--bg);
    flex-direction: column; align-items: flex-start; gap: 0;
    border-bottom: 1px solid var(--border-soft);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
    padding: 8px var(--gutter) 20px;
  }
  .nav-links.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a{ padding: 13px 0; width: 100%; border-bottom: 1px solid var(--border-soft); }
  .header-actions .btn-primary{ display: none; }
  .nav-toggle{ display: flex; }
  .section{ padding: 76px 0; }
  .field{ flex-basis: 100%; }
  .footer-about, .footer-col{ flex-basis: 100%; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
  .cta-band-inner{ flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .service-list li{ flex-basis: 100%; }
  .network-toolbar{ flex-direction: column; align-items: stretch; }
  .network-filters{ flex-direction: column; }
  .field-inline input[type="search"]{ width: 100%; }
  .trust .wrap{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .pulse-dash-cell{ flex-basis: 100%; }
  .pillar-card{ flex-basis: 100%; }
  .stack-layer-index{ display: none; }
  .lore-block{ padding: 32px; }
}

@media (max-width: 560px){
  .pulse-stat, .pulse-stats.cols-3 > div{ flex-basis: 100%; }
  .process-step{ flex-basis: 100%; }
  .service-index{ flex-direction: column; align-items: flex-start; }
}