/* SteelFabSolutions — site stylesheet
   Brand tokens locked from the logo/card work: ink #091B34, mid #33526E, accent #4C72A1
   Dark-mode-forward marketing site, derived from that same navy family (not a separate palette). */

@font-face {
  font-family: 'Inter';
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/plexmono.woff2') format('woff2');
}

:root {
  --bg: #060d16;
  --panel: #091b34;
  --panel-2: #0e2338;
  --panel-3: #133055;
  --line: rgba(140, 168, 197, 0.16);
  --line-bright: rgba(140, 168, 197, 0.32);
  --text: #f3f5f7;
  --text-soft: #a9bacb;
  --text-faint: #6d8099;
  --mid: #33526e;
  --accent: #4c72a1;
  --accent-bright: #86aad9;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  /* Defensive: the fixed hero-structure art sits partly off the right edge
     by design (`right: -8%`) — this guarantees that can never cause a
     horizontal scrollbar/rubber-band on any device, iOS included. */
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* iOS shows a gray flash box on tap by default since there's no real
     :hover state on touch — kill it and lean on each element's own :active/
     :hover styling (buttons and navlinks already have explicit hover states
     below) instead of the browser's default highlight rectangle. */
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #060d16; }

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

/* ---------- type ---------- */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1.5px;
  background: var(--accent);
  display: inline-block;
}
h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
p { color: var(--text-soft); margin: 0; }
p.lede { font-size: 19px; line-height: 1.6; color: var(--text-soft); max-width: 62ch; }

/* ---------- nav ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 13, 22, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  /* Clears the Dynamic Island / notch / rounded-corner safe area in landscape
     on iPhone — env() resolves to 0 on every device without one, so this is
     a no-op everywhere else. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 30px; height: 30px; }
.brand .word { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.brand .word .steel { color: var(--text-soft); }
.brand .word .fab { color: var(--text); }
nav.links { display: flex; align-items: center; gap: 32px; }
nav.links a.navlink {
  font-size: 14px;
  color: var(--text-soft);
  transition: color 0.15s ease;
}
nav.links a.navlink:hover { color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 3px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn.primary {
  background: var(--accent);
  color: #060d16;
}
.btn.primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.btn.ghost {
  border: 1px solid var(--line-bright);
  color: var(--text);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ---------- hero ---------- */
.hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background: radial-gradient(ellipse at 50% 0%, rgba(76, 114, 161, 0.22) 0%, rgba(76, 114, 161, 0) 62%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 168, 197, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 168, 197, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 92%);
  mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
.hero-structure {
  /* Fixed to the viewport (not .hero) so it can persist and parallax past the hero
     section as the user scrolls — see the second IIFE in script.js. It lives as a
     direct child of <body>, before <header>, so .hero's overflow: hidden can't clip it.

     top is a fixed px offset, not a percentage, and deliberately NOT negative.
     The old `top: -8%` pushed the box's top edge above y:0 — meaning the
     roofline/gridline-bubble annotations at the top of the structure art were
     clipped off-screen at page load (scrollY: 0) on every viewport, which is
     exactly the "doesn't start in full view at the top of the page" bug. 62px
     just clears the 72px sticky header (allowed to tuck slightly behind it —
     header has its own background and a higher z-index, so this reads as the
     structure "entering from behind" the nav bar, not a hard cutoff).
     Sized and verified against a pixel-accurate mockup at 1440x900 and a
     shorter 1440x760 laptop viewport before landing on these numbers — full
     structure visible, no clipping, headline column still clear. */
  position: fixed;
  top: 62px;
  right: -1%;
  width: 100%;
  max-width: 1320px;
  /* Resting opacity is NOT set here — it's controlled by BASE_OPACITY in script.js,
     which sets it via inline style on load. Edit the value there, not here, or the
     two will silently desync. */
  pointer-events: none;
  /* No other element in this stylesheet uses a negative or zero z-index outside of
     .hero's own internal layers (checked: header.site is 40, .hero::before/::after
     and .hero .wrap are 0/1, both scoped inside .hero's own stacking context). Body
     has no explicit background-establishing stacking context of its own, and body's
     background color propagates to the canvas (painted at the very bottom, below any
     negative z-index content) — so z-index: -1 here sits above the page background
     but behind every other real element on the page, including the sticky header. */
  z-index: -1;
  will-change: transform, opacity;
  /* No CSS mask-image here anymore — the 4-edge feather (fades to transparent on
     all sides, not just left-to-right) is now baked directly into the PNG's own
     alpha channel, along with a recolor from neutral gray into the site's blue
     accent family (--panel-2 -> --accent-bright duotone). See
     _hero_asset_redesign.py (site history) for how it was generated. Baking it in
     beats a CSS mask for two reasons: (1) it feathers top/bottom too, which a
     single linear-gradient mask direction can't do without stacking multiple
     mask layers and mask-composite, which iOS Safari has historically had bugs
     with; (2) it's the actual color source, not just the alpha shape, so the
     recolor and the fade are guaranteed to travel together as one asset. */
}
.hero .wrap { z-index: 1; }
.hero .wrap { position: relative; }
.hero h1 { max-width: 15ch; }
.hero .actions { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero p.lede { margin-top: 22px; }
.hero-meta {
  margin-top: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ---------- pipeline diagram ---------- */
.pipeline {
  margin-top: 64px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: 4px;
  padding: 34px 30px 30px;
  overflow-x: auto;
}
.pipeline-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 780px;
}
.p-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px;
  position: relative;
}
.p-step:first-child { padding-left: 0; }
.p-step:last-child { padding-right: 0; }
.p-step .n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
}
.p-step .t {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.p-step .d {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.5;
}
.p-arrow {
  align-self: center;
  color: var(--text-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  padding: 0 4px;
  flex: none;
}
.p-step.future { opacity: 0.55; }
.p-step.future .t::after {
  content: "IN DEVELOPMENT";
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 6px;
}

/* ---------- sections ---------- */
section.block { padding: 92px 0; border-bottom: 1px solid var(--line); }
section.block:last-of-type { border-bottom: none; }
.block-head { max-width: 62ch; margin-bottom: 44px; }
.block-head h2 { margin-top: 14px; }
.block-head p { margin-top: 14px; font-size: 16.5px; }

/* problem list */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.problem-card {
  background: var(--bg);
  padding: 28px 26px;
}
.problem-card .stat {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 30px;
  color: var(--accent-bright);
  letter-spacing: -0.01em;
}
.problem-card .label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
}

.steps-list { margin-top: 40px; display: flex; flex-direction: column; }
.step-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.step-row:last-child { border-bottom: 1px solid var(--line); }
.step-row .num { font-family: 'IBM Plex Mono', monospace; color: var(--text-faint); font-size: 13px; padding-top: 2px; }
.step-row .txt { color: var(--text-soft); font-size: 15px; }
.step-row .txt b { color: var(--text); font-weight: 600; }

/* golden rule */
.rule-panel {
  border: 1px solid var(--line-bright);
  background: var(--panel);
  border-radius: 4px;
  padding: 44px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.rule-panel h3 { font-size: 15px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'IBM Plex Mono', monospace; font-weight: 500; margin-bottom: 14px; }
.rule-panel .no-trust, .rule-panel .yes-trust { display: flex; flex-direction: column; gap: 10px; }
.rule-panel .item { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--text-soft); }
.rule-panel .item .mark { font-family: 'IBM Plex Mono', monospace; font-size: 13px; flex: none; }
.rule-panel .no .mark { color: #c97a6e; }
.rule-panel .yes .mark { color: var(--accent-bright); }
.rule-quote {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.55;
}
.rule-quote .from { display: block; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-faint); font-weight: 400; }

/* stat compare */
.compare-row { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.compare-cell { flex: 1; min-width: 220px; }
.compare-cell .big { font-family: 'IBM Plex Mono', monospace; font-size: 44px; font-weight: 500; letter-spacing: -0.01em; }
.compare-cell.good .big { color: var(--accent-bright); }
.compare-cell.bad .big { color: var(--text-faint); }
.compare-cell .cap { margin-top: 6px; font-size: 13.5px; color: var(--text-faint); }

/* how you talk to it */
.terminal {
  border: 1px solid var(--line-bright);
  background: #04090f;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.terminal .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.terminal .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-bright); }
.terminal .label { margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--text-faint); }
.terminal .body { padding: 24px 26px; font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; line-height: 1.9; }
.terminal .u { color: var(--text-soft); }
.terminal .u::before { content: "› "; color: var(--accent-bright); }
.terminal .r { color: var(--accent-bright); margin: 6px 0 18px; white-space: pre-wrap; }

/* template system */
.two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.tmpl-card { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 26px; }
.tmpl-card .row { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tmpl-card .row:last-child { border-bottom: none; }
.tmpl-card .row .k { color: var(--text-faint); }
.tmpl-card .row .v { color: var(--accent-bright); }

/* cta band */
.cta-band {
  padding: 90px 0;
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--panel) 140%);
}
.cta-band h2 { max-width: 20ch; margin: 0 auto; }
.cta-band p.lede { margin: 18px auto 0; text-align: center; }
.cta-band .actions { justify-content: center; margin-top: 30px; }

/* footer */
footer.site {
  padding: 48px 0 56px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Home-indicator clearance on iPhone in standalone/home-screen mode. */
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
footer.site .wrap { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
footer.site .f-brand { display: flex; align-items: center; gap: 10px; }
footer.site .f-brand svg { width: 22px; height: 22px; }
footer.site .f-brand .word { font-weight: 800; font-size: 14px; }
footer.site .f-contact { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--text-faint); display: flex; flex-direction: column; gap: 5px; }
footer.site .f-contact a:hover { color: var(--accent-bright); }
footer.site .f-note { font-size: 12px; color: var(--text-faint); margin-top: 18px; }

/* ---------- demo page ---------- */
.demo-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 72px 0; align-items: start; }
.demo-why { display: flex; flex-direction: column; gap: 22px; }
.demo-why .item { display: flex; gap: 14px; }
.demo-why .item .ix { font-family: 'IBM Plex Mono', monospace; color: var(--accent-bright); font-size: 13px; flex: none; padding-top: 3px; }
.demo-why .item .tx b { color: var(--text); display: block; margin-bottom: 4px; font-size: 15px; }
.demo-why .item .tx p { font-size: 14.5px; }

form.demo-form { display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--line-bright); background: var(--panel); border-radius: 6px; padding: 32px; }
form.demo-form label { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; display: block; }
form.demo-form .field { display: flex; flex-direction: column; }
form.demo-form input, form.demo-form textarea, form.demo-form select {
  background: var(--bg);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  padding: 11px 13px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  /* 16px, not 14.5px: iOS Safari auto-zooms the whole page on focus for any
     input with a computed font-size under 16px. This is the fix, not a
     workaround — there's no other way to disable that behavior. */
  font-size: 16px;
}
form.demo-form input:focus, form.demo-form textarea:focus, form.demo-form select:focus {
  outline: none;
  border-color: var(--accent);
}
form.demo-form textarea { resize: vertical; min-height: 90px; }
form.demo-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.demo-form .submit-note { font-size: 12.5px; color: var(--text-faint); margin-top: -4px; }
form.demo-form button.btn { margin-top: 6px; width: 100%; justify-content: center; cursor: pointer; border: none; font-size: 15px; padding: 13px 20px; }

@media (max-width: 480px) {
  header.site .brand .word { display: none; }
  header.site .btn.primary { padding: 9px 14px; font-size: 13.5px; }
}

@media (max-width: 860px) {
  nav.links a.navlink { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .rule-panel { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .demo-layout { grid-template-columns: 1fr; gap: 40px; }
  form.demo-form .row2 { grid-template-columns: 1fr; }
  /* At phone widths the headline column takes up nearly the full viewport,
     so anchoring hard to the right (like desktop) either pushes most of the
     structure off-canvas or crams it behind the text. Full width, no left/
     right clip, sitting just under the header — reads as a wide atmosphere
     band instead of competing with the copy. Also fixes the old version's
     mobile bug: `right: -18%` at narrow widths pushed the box's LEFT edge
     off-screen too, clipping a chunk of the structure that was never visible
     on any phone. */
  .hero-structure { width: 100%; max-width: none; right: 0; top: 66px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.6s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
  .reveal-on-scroll.d1 { transition-delay: 0.08s; }
  .reveal-on-scroll.d2 { transition-delay: 0.16s; }
  .reveal-on-scroll.d3 { transition-delay: 0.24s; }
  .reveal-on-scroll.d4 { transition-delay: 0.32s; }
}

/* ---------- bento capability grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(178px, auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bento-cell {
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.bento-cell:hover { background: var(--panel); }
.bento-cell.wide { grid-column: span 2; }
.bento-cell .bi {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  text-transform: uppercase;
}
.bento-cell .bt { font-weight: 700; font-size: 16px; color: var(--text); margin-top: 10px; }
.bento-cell .bd { font-size: 13.5px; color: var(--text-faint); line-height: 1.5; margin-top: 6px; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-cell.wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell.wide { grid-column: span 1; }
}