/* ==========================================================================
   NEXTBOLT — FORGED TORSION
   Design system. One stylesheet, no framework, no external requests.

   Grounded in NextBolt_Brand_Guide.pdf + DESIGN_PHILOSOPHY.md:
     · 60% INK ground · 25% BONE/STEEL · 12% BLAZE · 3% AMBER
     · three type roles: Archivo Expanded display (900 for the accent word),
       IBM Plex Mono technical, Work Sans body
       (Big Shoulders is wordmark-only and never sets running text)
     · the plane is a workbench: hard edges, honest seams, nothing floats
     · every layout is a schematic — reference markers, rules, index numbers
     · threefold rhythm; symmetry broken on purpose at a single joint

   Sections
     01 TOKENS      02 RESET       03 TYPE        04 GRID + SCHEMATIC
     05 CONTROLS    06 HEADER      07 HERO        08 INDEX (industries)
     09 SEQUENCE    10 RELIC       11 PRICING     12 DEMO
     13 CONTACT + FOOTER           14 ASSIST      15 MOTION
     16 RESPONSIVE
   ========================================================================== */

@import url("fonts.css");

/* ---------- 01 TOKENS ---------------------------------------------------- */
:root {
  /* Brand guide, page 4. Do not introduce colours outside this set. */
  --ink:      #0E1330;
  --void:     #080B1C;
  --steel:    #29324E;
  --concrete: #9AA2B1;
  --bone:     #F3EFE7;
  --blaze:    #E8641E;
  --ember:    #BF3D0A;
  --flare:    #F7862F;
  --amber:    #F4A62A;

  --forged: linear-gradient(135deg, var(--ember) 0%, var(--blaze) 52%, var(--flare) 100%);

  /* Structural derivatives — rules, seams and recesses. */
  --pan:          #121838;
  --rule:         rgba(243, 239, 231, .14);
  --rule-strong:  rgba(243, 239, 231, .30);
  --rule-blaze:   rgba(232, 100, 30, .42);
  --text:         var(--bone);
  --text-dim:     var(--concrete);

  /* Display is Archivo pinned to its 125% width. The face only ever carries
     weight 600-900; anything lighter would be synthesised. */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-accent:  "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-tech:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --f-body:    "Work Sans", system-ui, -apple-system, sans-serif;
  --f-mark:    "Big Shoulders", "Arial Narrow", sans-serif;

  /* One modular unit. Every gap, pad and offset is a multiple of it. */
  --u: 8px;
  --gut: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --bar: 64px;           /* header height */

  --t: .18s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 02 RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

::selection { background: var(--blaze); color: var(--void); }

/* Scrollbars belong to the system, not to the OS. Left alone, the industry
   list and the page itself hand back a white native bar with rounded arrows,
   which is the one surface on the page that ignores every rule above.
   Firefox takes the standard two-value property, which inherits from :root
   and so covers every nested scroller; Blink and WebKit take the pseudo-
   elements. Square, 10px, steel that lights blaze on hover. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--void);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--steel);
  border: 1px solid var(--rule);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--blaze); }
::-webkit-scrollbar-corner { background: var(--void); }

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

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hide { display: none !important; }

/* ---------- 03 TYPE ------------------------------------------------------ */
/* Maximalism lives in the collision of scales: a beam-height headline set
   against annotation the size of a stamped serial number. */

.d1, .d2, .d3 {
  font-family: var(--f-display); font-stretch: 125%;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.9rem, 7.4vw, 6.6rem); font-weight: 800; }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.d3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.04; }

/* Single monumental word, set at the top of the weight axis. Never more
   than a few — at 900 expanded it stops being type and becomes a slab. */
.accent {
  font-family: var(--f-accent); font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

.forged-text {
  background: var(--forged);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* TECHNICAL role: labels, data, specs, coordinates. */
.tech {
  font-family: var(--f-tech);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tech-lg { font-size: 12px; letter-spacing: .12em; }
.tech b { font-weight: 600; color: var(--bone); }
/* Live indicator. Drawn in CSS, not typed as a glyph: square, like every
   other corner in the system, and it inherits the pulse the hero uses. */
.tech .on {
  display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: 3px;
  background: var(--blaze);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .tech .on { animation: none; } }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0;
}

.num {
  font-family: var(--f-display); font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------- 04 GRID + SCHEMATIC ------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.band {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: clamp(64px, 9vw, 132px);
  scroll-margin-top: var(--bar);   /* sticky header must not eat the heading */
}
.band--tight { padding-block: clamp(48px, 6vw, 84px); }
.band--bone { background: var(--bone); color: var(--ink); }
.band--void { background: var(--void); }

/* Section header: index number, label, rule. Documented like a drawing. */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 5);
}
.sec-head::after {
  content: "";
  height: 1px;
  background: var(--rule);
}
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-family: var(--f-tech);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blaze);
}
.sec-tag::before {
  content: attr(data-idx);
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding-inline: 6px;
  border: 1px solid var(--rule-blaze);
  color: var(--flare);
  letter-spacing: .06em;
}
.band--bone .sec-head::after { background: rgba(14, 19, 48, .16); }
.band--bone .sec-tag { color: var(--ember); }
.band--bone .sec-tag::before { border-color: rgba(191, 61, 10, .4); color: var(--ember); }

/* Threefold rhythm — the default group is three. */
.rhythm-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.rhythm-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }

/* A block that sits with mass: hard seams, no radius, no shadow. */
.block {
  position: relative;
  background: var(--pan);
  border: 1px solid var(--rule);
  padding: calc(var(--u) * 4);
}
.block--flush { margin: -.5px; }

/* Corner ticks — the right-angle rules from the reference spread. */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
}
.ticked::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ticked::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.ticked--blaze::before, .ticked--blaze::after { border-color: var(--blaze); }

/* Dimension line: a measured span with end serifs. */
.dim {
  display: flex;
  align-items: center;
  gap: var(--u);
  font-family: var(--f-tech);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dim::before, .dim::after { content: ""; height: 1px; background: var(--rule); flex: 1; }

/* Node array — repetition until the page reads as a shop drawing. */
.nodes {
  display: flex;
  gap: 5px;
  align-items: center;
}
.nodes i {
  width: 4px; height: 4px;
  background: var(--steel);
  display: block;
}
.nodes i.on { background: var(--blaze); }

/* Icons: brand-guide geometry — 100U grid, 5U stroke, round caps. */
.ico {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}
.ico-lg { width: 28px; height: 28px; }
.ico-sm { width: 14px; height: 14px; stroke-width: 7; }

/* The mark itself — the 3D forged trefoil render, never redrawn or recoloured. */
.nb-mark { width: 34px; height: 34px; flex: none; object-fit: contain; }

/* ---------- 05 CONTROLS -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.25);
  padding: 15px 26px;
  font-family: var(--f-tech);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn--blaze { background: var(--forged); color: var(--void); }
.btn--blaze:hover { background: var(--flare); }
.btn--ghost { border-color: var(--rule-strong); color: var(--bone); }
.btn--ghost:hover { border-color: var(--blaze); color: var(--blaze); }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--steel); }
.btn--block { width: 100%; }
.btn .ico { width: 14px; height: 14px; stroke-width: 7; }

.field {
  width: 100%;
  padding: 14px 16px;
  background: rgba(8, 11, 28, .55);
  border: 1px solid var(--rule);
  color: var(--bone);
  font-size: 15px;
  transition: border-color var(--t), background var(--t);
}
.field::placeholder { color: rgba(154, 162, 177, .78); }
.field:focus {
  outline: none;
  border-color: var(--blaze);
  background: rgba(8, 11, 28, .8);
}
select.field {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--concrete) 50%),
    linear-gradient(135deg, var(--concrete) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
select.field option { background: var(--ink); color: var(--bone); }

.field-row { display: grid; gap: calc(var(--u) * 1.5); }

/* Spec list. The tick is drawn, never a character. */
.spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.spec li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.spec li .ico { width: 13px; height: 13px; stroke-width: 8; margin-top: 5px; color: var(--blaze); }
.spec li b { color: var(--bone); font-weight: 600; }
.band--bone .spec li { color: var(--steel); }
.band--bone .spec li b { color: var(--ink); }

/* ---------- 06 HEADER ---------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--bar);
  background: rgba(14, 19, 48, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.lockup { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.lockup .nb-mark { width: 30px; height: 30px; }
.lockup__name {
  font-family: var(--f-mark);   /* wordmark role — logo lockup only */
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.lockup__rule { width: 1px; height: 22px; background: var(--rule); }
.lockup__tag {
  font-family: var(--f-tech);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  max-width: 92px;
  line-height: 1.25;
}

.nav { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.nav a {
  font-family: var(--f-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--t);
}
.nav a:hover { color: var(--bone); }

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  font-family: var(--f-tech);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
}
.lang button { padding: 6px 10px; color: var(--text-dim); transition: color var(--t), background var(--t); }
.lang button[aria-pressed="true"] { background: var(--blaze); color: var(--void); }

.burger { display: none; padding: 8px; color: var(--bone); }

/* ---------- 07 HERO ------------------------------------------------------ */
/* Composition from the reference spread: the artwork is the ground, bleeding
   off the right edge of the viewport, and the type sits on the ink half.
   Symmetry is load-bearing and then broken at one joint — the seam where the
   figure emerges sits at 54/46, not 50/50. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  background: var(--void);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54fr 46fr;
  align-items: stretch;
  min-height: min(86vh, 860px);
}
.hero__l {
  padding: clamp(44px, 6vw, 92px) clamp(28px, 4vw, 68px) clamp(44px, 6vw, 76px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 3);
}
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 7px 13px;
  border: 1px solid var(--rule-blaze);
  font-family: var(--f-tech);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flare);
}
.pulse {
  width: 6px; height: 6px;
  background: var(--blaze);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.hero h1 .l2 { color: var(--text-dim); }
.hero h1 .l3 { display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--u) * 2);
}
.hero__specs div {
  flex: 1 1 33%;
  padding: 14px 16px 0 0;
}
.hero__specs .k { display: block; font-family: var(--f-tech); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.hero__specs .v { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }

/* The brand spread is the ground the section is built on. It is pinned to the
   right edge of the viewport, not to the 1320px wrap, so it bleeds off-screen
   the way it bleeds off the page in the artwork. Width is capped: past ~900px
   the head grows past the headline and the balance inverts. */
.hero__figure {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(320px, 46%, 900px);
  height: 100%;
  object-fit: cover;
  object-position: 62% 0;
  pointer-events: none;
  user-select: none;
  /* The left edge of the crop is a hard vertical cut against the ink. Fading
     the image itself, rather than laying more scrim over it, dissolves that
     edge without dimming the head — the amber field simply runs out. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 16%,
                                             #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 16%,
                                     #000 40%);
}
/* Two gradients doing two jobs. Across: ink holds solid under the headline and
   releases before the figure, so there is no cut line where the image starts.
   Down: the bottom is pulled under so the spec row and the section border read
   against it. The head and the amber field stay open at the top right. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 11, 28, .55) 0%, rgba(8, 11, 28, .30) 52%,
                           rgba(8, 11, 28, 0) 70%),
    linear-gradient(180deg, rgba(8, 11, 28, 0) 46%, rgba(8, 11, 28, .58) 100%);
}

/* ---------- 08 INDEX (industries) ---------------------------------------- */
.idx { display: grid; grid-template-columns: 340px 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.idx__list { background: var(--ink); max-height: 520px; overflow-y: auto; }
.idx__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  color: var(--text-dim);
  transition: background var(--t), color var(--t);
}
.idx__item:last-child { border-bottom: 0; }
.idx__item .n { font-family: var(--f-tech); font-size: 10px; letter-spacing: .1em; color: var(--steel); }
.idx__item .t { font-size: 14.5px; font-weight: 500; }
.idx__item:hover { background: rgba(41, 50, 78, .34); color: var(--bone); }
.idx__item[aria-selected="true"] { background: var(--pan); color: var(--bone); box-shadow: inset 3px 0 0 var(--blaze); }
.idx__item[aria-selected="true"] .n { color: var(--flare); }

.idx__panel { background: var(--pan); padding: clamp(24px, 3.4vw, 44px); display: grid; gap: calc(var(--u) * 3); align-content: start; }
.idx__biz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.idx__quote {
  font-family: var(--f-display); font-stretch: 125%;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  /* 600 is the bottom of the shipped axis; anything lighter is synthesised. */
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.01em;
  border-left: 2px solid var(--blaze);
  padding-left: calc(var(--u) * 2.5);
  margin: 0;
}

/* ---------- 09 SEQUENCE (how it works) ----------------------------------- */
.step { position: relative; background: var(--ink); padding: calc(var(--u) * 4); border: 1px solid var(--rule); margin: -.5px; }
.step__n {
  font-family: var(--f-display); font-stretch: 125%;
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 800;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1px var(--steel);
  margin-bottom: calc(var(--u) * 2);
}
.step:hover .step__n { -webkit-text-stroke-color: var(--blaze); }
.step__n, .step h3, .step p { transition: color var(--t), -webkit-text-stroke-color var(--t); }
.step h3 { margin: 0 0 10px; }
.step p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ---------- 10 RELIC (interstitial plate) -------------------------------- */
/* The hero puts art on the right, so this one puts it on the left. Same two
   columns, flipped, and the page never repeats a composition. Built like
   .demo: one hairline frame, a 1px seam, no radius. */
.relic {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.relic__plate {
  position: relative;
  margin: 0;
  background: var(--void);
  overflow: hidden;
  min-height: clamp(340px, 40vw, 560px);
}
/* Absolute rather than height:100%: the row is sized by the type column, and
   a percentage height against an implicit track is not resolvable. */
.relic__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;   /* holds the handset and the deck face in frame */
}
.relic__say {
  background: var(--pan);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  gap: calc(var(--u) * 3);
  align-content: center;
}
/* .d2 is sized for a full-width section head. In a half column it runs to six
   lines and swallows the plate, so it steps down one notch here. */
.relic__say h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.7rem); }
.relic__say .lede { margin: 0; }

/* ---------- 11 PRICING --------------------------------------------------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--rule);
  margin: -.5px;
  padding: calc(var(--u) * 4) calc(var(--u) * 3.5);
}
.plan--lead { background: var(--pan); border-color: var(--rule-blaze); z-index: 1; }
.plan__flag {
  position: absolute;
  top: -1px; right: -1px;
  padding: 5px 11px;
  background: var(--forged);
  color: var(--void);
  font-family: var(--f-tech);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.plan__name { font-family: var(--f-display); font-stretch: 125%; font-size: 1.32rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 4px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: calc(var(--u) * 2); }
.plan__price .num { font-size: clamp(2.5rem, 4vw, 3.2rem); line-height: 1; }
.plan__price .per { font-family: var(--f-tech); font-size: 12px; letter-spacing: .1em; color: var(--text-dim); }
.plan__alt { font-family: var(--f-tech); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-top: 7px; }
.plan__setup {
  margin: calc(var(--u) * 2) 0;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--f-tech); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.plan__setup b { font-family: var(--f-display); font-stretch: 125%; font-size: 17px; letter-spacing: 0; color: var(--bone); }
.plan__setup .free { color: var(--amber); }
.plan__spec { margin-top: calc(var(--u) * 2.5); flex: 1; }
.plan__buy { margin-top: calc(var(--u) * 3); display: grid; gap: 8px; }
.plan__addon {
  margin-top: calc(var(--u) * 2.5);
  padding: 13px;
  border: 1px dashed var(--rule-strong);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.plan__addon .h { display: block; font-family: var(--f-tech); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 5px; }

.pricing__note {
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--rule);
  font-family: var(--f-tech);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.pricing__note b { color: var(--amber); font-weight: 600; }

/* ---------- 12 DEMO ------------------------------------------------------ */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.demo__l { background: var(--ink); padding: clamp(28px, 4vw, 56px); display: grid; gap: calc(var(--u) * 3); align-content: center; }
.demo__r { background: var(--pan); padding: clamp(28px, 4vw, 56px); }
.demo__reach { display: grid; gap: 10px; }
.demo__reach a { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-tech); font-size: 12px; letter-spacing: .1em; color: var(--text-dim); transition: color var(--t); }
.demo__reach a:hover { color: var(--blaze); }
.form-note { font-family: var(--f-tech); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.thanks { display: grid; gap: 14px; place-items: center; text-align: center; padding: calc(var(--u) * 4) 0; }
.thanks .nb-mark { width: 64px; height: 64px; }

/* ---------- 13 CONTACT + FOOTER ------------------------------------------ */
.card {
  display: grid;
  gap: 8px;
  padding: calc(var(--u) * 3.5);
  background: var(--ink);
  border: 1px solid var(--rule);
  margin: -.5px;
  transition: border-color var(--t), background var(--t);
}
.card:hover { border-color: var(--rule-blaze); background: var(--pan); }
.card .ico { color: var(--blaze); }
.card .k { font-family: var(--f-tech); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.card .v { font-size: 16px; font-weight: 500; }

.foot { border-top: 1px solid var(--rule); background: var(--void); padding-block: calc(var(--u) * 6) calc(var(--u) * 4); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: calc(var(--u) * 5); align-items: start; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col a, .foot__col span { font-size: 14px; color: var(--text-dim); transition: color var(--t); }
.foot__col a:hover { color: var(--blaze); }
.foot__bar {
  margin-top: calc(var(--u) * 5);
  padding-top: calc(var(--u) * 2.5);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}

/* ---------- 14 ASSIST (chat) --------------------------------------------- */
.assist { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; justify-items: end; gap: 12px; }
.assist__btn {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--forged);
  color: var(--void);
  border: 1px solid var(--rule-blaze);
  transition: transform var(--t);
}
.assist__btn:hover { transform: translateY(-2px); }
.assist__panel {
  width: min(348px, calc(100vw - 44px));
  height: 460px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--ink);
  border: 1px solid var(--rule-strong);
}
.assist__head { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; }
.assist__head .nb-mark { width: 22px; height: 22px; }
.assist__log { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 84%; padding: 10px 13px; font-size: 13.5px; line-height: 1.48; white-space: pre-wrap; border: 1px solid var(--rule); }
.msg--bot { align-self: flex-start; background: var(--pan); border-left: 2px solid var(--blaze); }
.msg--you { align-self: flex-end; background: var(--forged); color: var(--void); border-color: transparent; font-weight: 500; }
.assist__bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid var(--rule); }
.assist__bar .field { padding: 10px 12px; font-size: 14px; }
.assist__send { width: 42px; display: grid; place-items: center; background: var(--forged); color: var(--void); }

/* ---------- 15 MOTION ---------------------------------------------------- */
/* Gated on html.js so a script failure can never leave the page blank:
   without JS the reveal never runs, so the content must start visible. */
html.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
html.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rise { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
}

/* ---------- 16 RESPONSIVE ------------------------------------------------ */
@media (max-width: 1080px) {
  .rhythm-4 { grid-template-columns: repeat(2, 1fr); }
  .idx { grid-template-columns: 260px 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --bar: 58px; }
  .nav { display: none; }
  .burger { display: grid; place-items: center; }
  .hdr__in { gap: calc(var(--u) * 1.5); }
  .lockup__rule, .lockup__tag { display: none; }

  .nav--open {
    display: grid;
    position: fixed;
    inset: var(--bar) 0 auto 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: calc(var(--u) * 2) var(--gut) calc(var(--u) * 3);
    gap: calc(var(--u) * 2);
    z-index: 59;
  }

  .hero__grid { grid-template-columns: 1fr; min-height: 76vh; }
  .hero__l { padding: calc(var(--u) * 7) 0; }
  /* One column: the figure runs the full width behind the type, so the scrim
     flips from a side wash to a straight veil or the headline stops reading.
     Nothing left to dissolve either — the mask would eat the half the
     headline sits on, so it comes off. */
  .hero__figure {
    width: 100%;
    object-position: 64% 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8, 11, 28, .62) 0%, rgba(8, 11, 28, .82) 46%,
                              rgba(8, 11, 28, .94) 100%);
  }
  .rhythm-3, .rhythm-4 { grid-template-columns: 1fr; }
  .idx { grid-template-columns: 1fr; }
  .idx__list { max-height: 264px; }
  .demo { grid-template-columns: 1fr; }
  /* Stacked, the plate stops being a column and becomes a band, so it takes a
     landscape crop instead of the tall one. */
  .relic { grid-template-columns: 1fr; }
  .relic__plate { min-height: 0; aspect-ratio: 5 / 4; }
  .sec-head { grid-template-columns: 1fr; gap: var(--u); }
  .sec-head::after { display: none; }
  .foot__grid { grid-template-columns: 1fr; gap: calc(var(--u) * 3); }
  .assist { right: 14px; bottom: 14px; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .hero__specs div { flex: 1 1 50%; }
  .block, .step, .plan { padding: calc(var(--u) * 3); }
}