/* ==========================================================================
   JAHFORGE — SHARED DESIGN SYSTEM
   Concept: "Blued Steel" — the dark oxide-blue finish smiths temper into
   tool steel. Brand blue stays, read through a fabrication lens instead
   of a generic dark-SaaS lens. Sharp/cut corners, spec-sheet framing,
   one warm "weld seam" accent used only in the signature detail.
   ========================================================================== */

:root {
  /* ---- Color: named + hex, 6 total ---- */
  --steel-black: #0a0e15;   /* page base */
  --blued-navy: #121a26;    /* raised surface / cards */
  --blued-navy-2: #1b2532;  /* hover surface / stronger border */
  --forge-blue: #0e7ad5;    /* primary accent — exact hex from the Jahforge logo mark */
  --steel-silver: #9fb0c4;  /* secondary text on dark */
  --paper: #f2f4f7;         /* light surface + text on dark */
  --ember: #f3800b;         /* signature-only warm accent — exact hex from the logo mark */

  --ink: #0c1017;           /* text on light surfaces */
  --line: rgba(159, 176, 196, 0.14);
  --line-strong: rgba(159, 176, 196, 0.28);

  /* ---- Type ---- */
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Radius: fabricated edges stay near-square; only small parts get eased ----
     Cut steel doesn't round over. Radius is reserved for pills (tags/buttons)
     and never applied to structural cards/panels. */
  --radius-cut: 2px;
  --radius-pill: 999px;

  /* ---- Elevation: beveled-edge highlight, not colored glow blobs ---- */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(159, 176, 196, 0.08);
  --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease-forge: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--steel-black);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--forge-blue); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--forge-blue);
  outline-offset: 3px;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
}

/* ---- Type scale ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-weight: 800; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forge-blue);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}

p { margin: 0; }

.text-silver { color: var(--steel-silver); }

/* ==========================================================================
   SPEC-SHEET FRAMING
   This is a fabrication studio — sections read like drawing sheets:
   a sheet index in the corner, crop-mark corners on cards. Functional
   signage, not decoration.
   ========================================================================== */

.sheet {
  position: relative;
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--line);
}

.sheet::before {
  content: attr(data-sheet);
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--steel-silver);
  letter-spacing: 0.08em;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .sheet { padding: var(--sp-16) 0; }
  .sheet::before { display: none; }
}

/* Crop-mark card: corner brackets like a technical drawing register mark */
.crop {
  position: relative;
}

.crop::before,
.crop::after,
.crop > .crop-tl,
.crop > .crop-br {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.5;
}

.crop::before {
  content: "";
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--forge-blue);
  border-left: 1.5px solid var(--forge-blue);
}

.crop::after {
  content: "";
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--forge-blue);
  border-right: 1.5px solid var(--forge-blue);
}

/* ==========================================================================
   SIGNATURE ELEMENT — THE WELD SEAM
   A hairline that runs along a card/panel edge, dark by default. On
   hover/focus it lights the way a fresh weld glows: a bright point of
   heat sweeps along the seam and fades behind it.
   ========================================================================== */

.seam {
  position: relative;
  background: var(--blued-navy);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-cut);
  box-shadow: var(--bevel);
  overflow: hidden;
}

.seam::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 40%, var(--forge-blue) 70%, transparent);
  filter: blur(0.5px);
  transition: left var(--dur-slow) var(--ease-forge);
}

.seam:hover::after,
.seam:focus-within::after {
  left: 100%;
}

/* Cursor-aware glint: JS sets --mx/--my (0-100) per card */
.seam.glint {
  --mx: 50%;
  --my: 0%;
}

.seam.glint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(47, 111, 237, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-forge);
  pointer-events: none;
}

.seam.glint:hover::before { opacity: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-forge), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--forge-blue);
  color: var(--paper);
  box-shadow: 0 10px 30px -12px rgba(47, 111, 237, 0.65);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(47, 111, 237, 0.8); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-strong);
}

.btn-ghost:hover { border-color: var(--forge-blue); background: rgba(47, 111, 237, 0.08); transform: translateY(-2px); }

.btn-dark {
  background: var(--steel-black);
  color: var(--paper);
  border-color: var(--line-strong);
}
.btn-dark:hover { border-color: var(--forge-blue); transform: translateY(-2px); }

/* ---- Nav ---- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(10, 14, 21, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-nav .container {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header, mobile default: logo centered, brand name pinned left, burger right.
   Desktop (see grid media query below) rearranges the same elements:
   logo far left, services centered, brand name + CTA far right. */
.nav-zone-left {
  display: flex;
  align-items: center;
}

.logo-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.brand-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}

.nav-logo {
  height: 42px;
  width: auto;
  display: block;
}

@media (max-width: 460px) {
  .nav-logo { height: 34px; }
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.wordmark .mark {
  width: 9px;
  height: 9px;
  background: var(--forge-blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.wordmark .logo-icon {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.wordmark span.accent { color: var(--forge-blue); }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav-center, .nav-util { display: none; }

/* ---- Desktop: Cloudflare-style layout — logo left, services centered, brand + CTA right.
   Container stays flex + space-between (same as mobile); nav-center is absolute-centered
   on the container so it sits at the true page midpoint regardless of how wide the logo
   or the right-hand cluster are — a grid 1fr/auto/1fr track does NOT give this (each 1fr
   track reserves its own content's minimum width first, so unequal side content skews
   the "centered" column off true center). Held off until 1220px: below that, the centered
   service row and the right-hand cluster don't have room to both fit without crowding, so
   the layout falls back to the mobile bar (logo centered, name left, burger menu). ---- */
@media (min-width: 1220px) {
  .logo-link { position: static; transform: none; }

  .nav-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .nav-center a, .nav-util {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--steel-silver);
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
    transition: color var(--dur-fast);
  }

  .nav-center a:hover, .nav-util:hover { color: var(--paper); }

  .nav-center a::after, .nav-util::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px;
    width: 0;
    background: var(--forge-blue);
    transition: width var(--dur-fast) var(--ease-forge);
  }

  .nav-center a:hover::after, .nav-util:hover::after { width: 100%; }

  .nav-center a.is-active, .nav-util.is-active { color: var(--paper); }
  .nav-center a.is-active::after, .nav-util.is-active::after { width: 100%; }

  .nav-util { display: inline-flex; }

  .brand-text { position: static; transform: none; }
}

.nav-burger {
  width: 40px; height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
}
@media (min-width: 1220px) { .nav-burger { display: none; } }

.nav-burger span {
  width: 20px; height: 1.5px; background: var(--paper);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}

.mobile-menu {
  position: fixed;
  inset: 76px 0 auto 0;
  background: var(--steel-black);
  border-bottom: 1px solid var(--line-strong);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-med) var(--ease-forge), opacity var(--dur-med);
  z-index: 99;
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu .container {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  gap: var(--sp-6);
}

.mobile-menu a {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-16) 0 var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-8);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-silver);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.footer-grid a, .footer-grid p { color: var(--steel-silver); font-size: 0.9rem; }
.footer-grid a { display: block; margin-bottom: var(--sp-2); transition: color var(--dur-fast); }
.footer-grid a:hover { color: var(--paper); }

.footer-bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--steel-silver);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-forge), transform var(--dur-slow) var(--ease-forge);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Blueprint grid backdrop ---- */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(159, 176, 196, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 176, 196, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}