/* Neuralmex — neuralmex.com
   Built on the Neuralmex Design System. Rules applied here:
   stone page + ink bands (never more than two grounds), vermilion as
   punctuation only, squared corners, hairlines for structure,
   shadows only for things that float. */

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

body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font:var(--weight-regular) var(--size-body)/var(--leading-normal) var(--font-text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--text-strong)}
p{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-strong)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}

.wrap{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{
  font:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);
}
.on-ink .eyebrow{color:var(--stone-400)}

/* ---------- nav: the only fixed element, the only blur ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(11,11,12,.86);backdrop-filter:blur(12px);
  border-bottom:var(--border-hairline) solid var(--line-on-ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);height:64px}
.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{color:var(--stone-300);font-size:var(--size-body-sm)}
.nav-links a:hover{color:#fff}
@media(max-width:720px){.nav-links .opt{display:none}}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;color:inherit}
.logo svg{height:22px;width:auto;flex:none}
.logo .word{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:20px;
  letter-spacing:var(--track-heading);line-height:1}
.on-ink .logo,.nav .logo{color:var(--stone-050)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--control-lg);
  padding:0 var(--space-5);border:var(--border-hairline) solid transparent;border-radius:var(--radius-sm);
  font:var(--weight-medium) var(--size-body)/1 var(--font-text);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-control) var(--ease-in),border-color var(--dur-control) var(--ease-in),transform var(--dur-instant) var(--ease-in)}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--surface-accent);color:var(--text-on-accent)}
.btn-accent:hover{background:var(--vermilion-600);color:var(--text-on-accent)}
.btn-inverse{background:transparent;color:var(--stone-050);border-color:var(--line-on-ink)}
.btn-inverse:hover{background:#fff;color:var(--ink-900);border-color:#fff}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--stone-200)}

/* ---------- bands ---------- */
.band-ink{background:var(--surface-inverse);color:var(--stone-300);position:relative;overflow:hidden}
.band-ink h1,.band-ink h2,.band-ink h3{color:#fff}
.section{padding:var(--space-9) 0;scroll-margin-top:64px}
.section-tight{padding:var(--space-8) 0;scroll-margin-top:64px}

/* ---------- hero ---------- */
.hero{padding:var(--space-10) 0 var(--space-9)}
.hero-inner{position:relative;z-index:1;max-width:900px}
.hero h1{font:var(--weight-medium) var(--size-display-2)/var(--leading-tight) var(--font-display);
  letter-spacing:var(--track-display)}
.hero-lede{margin-top:var(--space-5);max-width:58ch;
  font:var(--weight-regular) var(--size-body-lg)/var(--leading-loose) var(--font-text);color:var(--stone-300)}
.hero-cta{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* the one decorative move in the system */
.watermark{position:absolute;right:-140px;top:50%;transform:translateY(-50%);
  width:760px;opacity:.04;pointer-events:none;z-index:0}
@media(max-width:900px){.watermark{right:-260px;width:620px;opacity:.05}}

/* ---------- spec row: real facts, mono, tabular ---------- */
.spec{border-top:var(--border-hairline) solid var(--line-on-ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.spec div{padding:var(--space-5) var(--space-5) var(--space-5) 0}
.spec dt{font:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--stone-500)}
.spec dd{margin:var(--space-2) 0 0;font-family:var(--font-mono);font-size:var(--size-body-sm);
  color:var(--stone-100);font-variant-numeric:tabular-nums}

/* ---------- headings block ---------- */
.head h2{font:var(--weight-medium) var(--size-h2)/var(--leading-snug) var(--font-display);
  letter-spacing:var(--track-heading);margin-top:var(--space-3)}
.head p{margin-top:var(--space-4);max-width:var(--measure);color:var(--text-muted)}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--space-4);margin-top:var(--space-7)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-2 .grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface-card);border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);
  transition:border-color var(--dur-control) var(--ease-in),box-shadow var(--dur-control) var(--ease-in)}
.card h3{font:var(--weight-medium) var(--size-h4)/1.2 var(--font-display)}
.card p{color:var(--text-muted);font-size:var(--size-body-sm);line-height:var(--leading-normal)}
.card .ico{color:var(--text-strong)}
.card .ico svg{width:20px;height:20px}
.card-link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.card-ink{background:var(--surface-inverse);border-color:var(--ink-900)}
.card-ink h3{color:#fff}
.card-ink p{color:var(--stone-400)}
.card-ink .ico{color:var(--vermilion-500)}
.card .foot{margin-top:auto;padding-top:var(--space-4);
  font:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-faint)}
.card-ink .foot{color:var(--stone-500)}

/* ---------- plans ---------- */
.plans{margin-top:var(--space-5);border:var(--border-hairline) solid var(--line-hairline);
  border-radius:var(--radius-md);overflow:hidden}
.plan{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);background:var(--surface-card)}
.plan+.plan{border-top:var(--border-hairline) solid var(--line-hairline)}
.plan .n{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-body)}
.plan .v{font-family:var(--font-mono);font-size:var(--size-body-sm);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
/* the one accent rule on the page */
.rule-accent{border:0;border-top:var(--border-heavy) solid var(--surface-accent);width:48px;margin:0 0 var(--space-5)}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-4);
  margin-top:var(--space-7)}
.facts div{border-top:var(--border-hairline) solid var(--line-strong);padding-top:var(--space-4)}
.facts dt{font:var(--weight-medium) var(--size-micro)/1.2 var(--font-mono);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--text-faint)}
.facts dd{margin:var(--space-2) 0 0;font-size:var(--size-body-sm);color:var(--text-strong)}
.facts .mono{font-family:var(--font-mono)}

/* ---------- cta ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-7);align-items:center}
@media(max-width:760px){.cta{grid-template-columns:1fr}}
.note{margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--size-micro);
  color:var(--vermilion-300)}

/* ---------- footer ---------- */
.foot-band{border-top:var(--border-hairline) solid var(--line-on-ink);padding:var(--space-7) 0 var(--space-8)}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);justify-content:space-between}
.foot-grid p,.foot-grid a{font-size:var(--size-body-sm);color:var(--stone-500)}
.foot-grid a:hover{color:var(--stone-100)}
.foot-links{display:flex;gap:var(--space-5);flex-wrap:wrap}