/* ==========================================================================
   ATHERION - HOMEPAGE
   Composed against references-design/selected-homepage-reference.png.

   Scoped to index.html only. The other pages keep pages.css untouched, so
   nothing here can regress them.

   LAWS OF THIS PAGE
     1. One ground. Black, lifted only by #0129E5 at low alpha. Sections are
        separated by a hairline, never by a different colour block.
     2. One dominant object - the hero component. Everything else is type,
        hairlines and a very small amount of drafting linework.
     3. Palette is the seven approved values. Nothing here mixes a new hue;
        every blue is #0129E5 or #1739E5, at full strength or at alpha.
     4. CONTRAST LAW, kept from tokens.css: #0129E5 on #000000 is 1.9:1, so
        blue is a LINE, FILL and MARK colour here. It carries text in exactly
        one place - the large display accent, at 50px+ - where the reference
        puts it and where thin blue type is still comfortably readable.
        Small "blue" labels are grey type behind a blue rule instead.
     5. It has to look expensive frozen. Motion is a vertical text reveal.
   ========================================================================== */

/* ==========================================================================
   0 · THE GRID
   One 12-column grid and one vertical scale for the whole page. Every
   section's columns start on the same lines, so the eye reads a single
   rhythm down the page rather than five unrelated layouts.

   Before this pass the "second column" of each band started at a different
   x: value strip 501.1, MecAI proofs 489.3, workflow routes 447.5. Now they
   all land on a grid line.
   ========================================================================== */

:root {
  --gap: clamp(16px, 1.7vw, 26px);      /* one column gap, everywhere */
  --rgap: clamp(8px, 1vw, 20px);        /* gap between workflow stations */
  /* #FFFFFF at ~2% over #000000, resolved to a solid so the workflow rail's
     break-chips can match the panel exactly. No new hue. */
  --panel-bg: #070707;
  --sec-tight: var(--section-pad-tight);  /* compact band (value strip)   */
  --sec:       var(--section-pad);        /* standard band (MecAI, flow)  */
  --sec-loose: var(--section-pad-loose);  /* terminal band (close)        */
}

/* Contained panel. --panel-pad is clamped below the gutter so the rounded
   edge never touches the viewport on small screens. */
.panel {
  --panel-pad: min(clamp(18px, 2.2vw, 34px), calc(var(--gut) - 10px));
  margin-inline: calc(-1 * var(--panel-pad));
  padding: var(--panel-pad);
  background: var(--panel-bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
}

/* The one row primitive. Children opt in with grid-column. */
.row12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s5);
  align-items: center;
}

@media (max-width: 900px) {
  .row12 { grid-template-columns: 1fr; row-gap: var(--s4); }
  .row12 > * { grid-column: 1 / -1 !important; }
}

/* A divider that sits exactly halfway across the gutter rather than on the
   column line. Combined with zero horizontal padding on the columns this is
   what makes every column's inner rhythm identical - the old first-child
   padding-inline:0 exception is gone. */
.col-rule { position: relative; }
.col-rule::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gap) / -2); width: 1px;
  background: var(--rule-2);
}

/* The wordmark carries padding-bottom for gradient-clipped descenders. The
   nav wordmark has none, and the padding pushed it ~1.4px below the optical
   centre of the bar. */
.nav-mark { padding-bottom: 0; line-height: 1; }

/* ==========================================================================
   1 · SHARED PIECES
   ========================================================================== */

/* Small lead-in above a headline. Blue reads as a rule, the words stay grey. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: var(--w-md);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--blue-2); flex: none; }

/* Line-break wrapper for display type. It must NEVER clip: no overflow:hidden,
   no mask, no clip-path. The padding guarantees room for a descender at the
   sub-1.2 line-heights used below. */
.ln { display: block; overflow: visible; padding-bottom: .10em; }
.accent { color: var(--blue-2); }

.cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Bands share one ground; the contained panels provide the separation. */
.band { position: relative; }

/* ==========================================================================
   2 · HERO

   WHY THE COMPONENT IS A STILL, NOT VIDEO
   The only source is 720p-class (1470x630 master). At hero scale a moving
   frame cannot hold an edge, and the page has to look expensive standing
   still. assets/img/hero-part.jpg is cropped to the component, resampled 2x
   with Lanczos and lightly unsharpened at build time, with the floor
   reflection composited in and the edges feathered to true black. It renders
   at roughly 1.2x in CSS px, so the browser is never asked to invent detail.
   Nothing here applies a filter, a blur or a transform to it.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;          /* opens the blend group: the component's
                                  mix-blend-mode resolves against this
                                  section's own background, not the page's */
  overflow: clip;
  display: grid; align-items: center;
  min-height: min(94svh, 900px);
  padding-block: calc(var(--nav-h) + var(--sec)) var(--sec);
  border-bottom: 1px solid var(--rule-2);
  background:
    radial-gradient(ellipse 44% 56% at 70% 46%, rgba(1,41,229,.12), rgba(1,41,229,0) 72%),
    radial-gradient(ellipse 86% 44% at 62% 100%, rgba(1,41,229,.06), rgba(1,41,229,0) 76%),
    var(--black);
}

/* One faint construction grid, dissolved before it becomes wallpaper.
   z-index:-1 keeps it above the section background and below the type, and
   inside the blend group so the component reads over it. */
/* The construction grid that used to run across the hero is gone - it was
   the faint linework showing through behind the plot. The section is one
   clean ground now. */

.hero-in { position: relative; }   /* no z-index - a stacking context here
                                      would cut the component off from the
                                      background it has to blend with */
/* text on columns 1–5, component on 6–12 */
.hero-col { grid-column: 1 / 6; min-width: 0; }
.hero-fig { grid-column: 6 / 13; }

.hero-h1 {
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.07; letter-spacing: -.038em; font-weight: var(--w-lt);
  margin-block: var(--s4);
}
.hero-lede {
  font-size: clamp(15px, 1.12vw, 17px); line-height: 1.62;
  font-weight: var(--w-lt); color: var(--ink-3);
  max-width: 42ch; margin-bottom: var(--s5);
}

/* ---- The technical plot -----------------------------------------------
   Every raster on this page is gone. The mechanical visuals are now
   generated point-cloud plots (tools/build_plots.py) in the language of
   references-design/style-ref-*.png: #FAFAFA ground, brand blue at varying
   alpha, stippled surfaces, crisp edges only on the defining sections,
   dashed construction planes and corner registration marks.

   They sit on light drawing-sheet panels inset into the dark page - which is
   also what lets blue carry the callout text, since #0129E5 is a legal text
   colour on a light ground and not on black.
   ------------------------------------------------------------------------ */
.hero-fig {
  position: relative; width: 100%;
  max-width: 820px; margin-left: auto;
}
.plot { position: relative; }        /* no sheet, no card - the linework
                                          sits directly on the page ground */
.plot-art { display: block; width: 100%; height: auto; }

/* A plotter drawing the sheet top to bottom. One 1.5s pass on load, then it
   is finished and the page is static - the composition carries it. */
@keyframes plot-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.js .plot-art { animation: plot-in 1.5s cubic-bezier(.22,.61,.36,1) .15s both; }

.co-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co-line { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.co-dot  { fill: var(--blue); }

.co-set { position: absolute; inset: 0; pointer-events: none; }
.co {
  position: absolute; left: var(--x); top: var(--y);
  transform: translateY(-50%); white-space: nowrap;
}
.co b {
  display: block; font-size: clamp(9px, .72vw, 10.5px); font-weight: var(--w-md);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);                  /* #0129E5 is 1.9:1 on black - the
                                           label is grey, the mark is blue */
}
.co i {
  display: block; font-style: normal; font-size: clamp(10px, .78vw, 11.5px);
  color: var(--ink-4); margin-top: 4px; letter-spacing: .01em;
}
/* the annotations settle after the plot has drawn */
.js .co { opacity: 0; animation: co-in .7s var(--ease) forwards; }
.js .co:nth-child(1) { animation-delay: 1.15s; }
.js .co:nth-child(2) { animation-delay: 1.28s; }
.js .co:nth-child(3) { animation-delay: 1.41s; }
.js .co:nth-child(4) { animation-delay: 1.54s; }
@keyframes co-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .plot-art { animation: none; clip-path: none; }
  .js .co { opacity: 1; animation: none; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: calc(var(--nav-h) + var(--sec)) var(--sec); }
  .hero-row { grid-template-columns: 1fr; row-gap: var(--s5); }
  .hero-col, .hero-fig { grid-column: 1 / -1; }
  .hero-fig { max-width: 620px; margin-inline: auto; }
}
/* Below tablet the annotations stop being legible. Drop them rather than
   shrink them into noise - the component itself stays full size and crisp. */
@media (max-width: 760px) {
  .hero { padding-block: calc(var(--nav-h) + var(--s5)) var(--s5); }
  .hero-row { row-gap: var(--s4); }
  .co-svg, .co-set { display: none; }
  .hero-fig { max-width: 460px; }
}

/* ==========================================================================
   3 · THREE-VALUE STRIP
   Three columns, hairline dividers, an outline mark and two lines each.
   No cards, no boxes, no glow.
   ========================================================================== */

.vstrip {
  padding-block: var(--sec-tight);
}
/* four grid columns each: 1–4, 5–8, 9–12 */
.vstrip-row { align-items: stretch; }  /* full-height columns so every gutter
                                          rule is the same length; contents
                                          stay top-aligned so the three
                                          headings share one baseline */
.vitem { display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 18px); min-width: 0; }
.vitem:nth-child(1) { grid-column: 1 / 5; }
.vitem:nth-child(2) { grid-column: 5 / 9; }
.vitem:nth-child(3) { grid-column: 9 / 13; }
/* The icon's cap-height is optically matched to the heading's, not merely
   top-aligned to its box - a 34px square next to 17px type reads low if you
   align the boxes. */
.vicon { flex: none; width: clamp(28px, 2.4vw, 34px); color: var(--blue-2); margin-top: -3px; }
.vicon svg { width: 100%; height: auto; display: block; }

/* ONE stroke weight for every icon on the page. non-scaling-stroke means a
   26px workflow mark and a 40px MecAI mark carry the identical 1.25px
   hairline - matching the callout leader lines in the hero. */
.vicon svg *, .ricon svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.vitem h2 {
  font-size: clamp(15px, 1.12vw, 17px); font-weight: var(--w-md);
  letter-spacing: -.006em; color: var(--white); margin-bottom: 9px;
}
.vitem p { font-size: clamp(13px, .98vw, 14px); line-height: 1.55; color: var(--ink-4); max-width: 34ch; }

@media (max-width: 900px) {
  .vitem, .vitem:nth-child(1), .vitem:nth-child(2), .vitem:nth-child(3) { grid-column: 1 / -1; }
  .vitem::before { content: none; }
  .vitem + .vitem { border-top: 1px solid var(--rule-2); padding-top: var(--s4); margin-top: var(--s4); }
}

/* ==========================================================================
   4 · MECAI - the flagship product, held to one band
   Name, one paragraph, three proof points, one link. No metrics: the
   reference's 10x / 90% / 100% are mockup fiction and are not replaced with
   invented numbers of our own.
   ========================================================================== */

.mec {
  overflow: clip;
  padding-block: var(--sec);
  background: radial-gradient(ellipse 54% 130% at 84% 50%, rgba(1,41,229,.07), rgba(1,41,229,0) 70%);
  isolation: isolate;
}
/* name 1–4, proofs 5–9, component 10–12 */
.mec-col  { grid-column: 1 / 5;  min-width: 0; }
.proofs   { grid-column: 5 / 10; min-width: 0; }
.mec-vis  { grid-column: 10 / 13; }
.mec-name {
  font-size: clamp(38px, 3.6vw, 56px); line-height: 1;
  letter-spacing: -.045em; font-weight: var(--w-lt); color: var(--white);
  margin-block: var(--s2) var(--s3); padding-bottom: .04em;
}
/* Scoped to the AI span itself (not the whole word) so it always shows the
   full fade across just those two characters, independent of "Mec"'s
   rendered width. Colors match the approved logo lockup exactly - a soft
   white-to-periwinkle fade, not the saturated brand blue. */
.mec-name .ai {
  background: linear-gradient(100deg, var(--white) 0%, #E4F0FF 22%, #9DB6F7 56%, #5C75D1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mec-desc { font-size: clamp(14px, 1.02vw, 15.5px); line-height: 1.6; color: var(--ink-3); max-width: 40ch; }
.mec-link { margin-top: var(--s3); }
.mec-link .lnk { font-size: 14px; }

.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.proof-item { min-width: 0; }
.proof-item b {
  display: block; font-size: clamp(16px, 1.38vw, 21px); line-height: 1.16;
  font-weight: var(--w-lt); letter-spacing: -.022em; color: var(--white);
  margin-bottom: 11px;
  min-height: calc(2.32em + 15px);     /* two lines + the tick, so every
                                          sub-line starts on the same baseline */
}
.proof-item b::before {
  content: ''; display: block; width: 22px; height: 1px;
  background: var(--blue-2); margin-bottom: 14px;
}
.proof-item span { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-4); }

.mec-vis { position: relative; }


@media (max-width: 1080px) {
  .mec-col { grid-column: 1 / 7; }
  .proofs  { grid-column: 7 / 13; }
  .mec-vis { grid-column: 1 / -1; order: -1; max-width: 360px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .mec-col, .proofs, .mec-vis { grid-column: 1 / -1; }
  .proofs { grid-template-columns: 1fr; }
  .proof-item::before { content: none; }
  .proof-item + .proof-item { border-top: 1px solid var(--rule-2); padding-top: var(--s3); margin-top: var(--s3); }
}

/* ==========================================================================
   5 · WORKFLOW
   Two routes stacked. The traditional one is annotation scale and grey; the
   MecAI one is statement scale and blue, and terminates on the real
   component instead of another symbol. No numbering, no spec sheet.
   ========================================================================== */

.flow { padding-block: var(--sec); isolation: isolate; }
.flow-head { grid-column: 1 / 4; min-width: 0; }
.routes    { grid-column: 4 / 13; min-width: 0; }
.flow-h {
  font-size: clamp(28px, 3.3vw, 50px); line-height: 1.08;
  letter-spacing: -.035em; font-weight: var(--w-lt);
  margin-top: var(--s2); padding-bottom: .06em;
}

.routes { display: grid; gap: clamp(40px, 4vw, 56px); min-width: 0; }
.route-lab {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 10px; font-weight: var(--w-md); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-5); margin-bottom: var(--s3);
}
.route--traditional .route-lab {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--ink-3);
}
.route--mec .route-lab { color: var(--ink-3); }
.route--mec .route-lab::before { content: ''; width: 20px; height: 1px; background: var(--blue-2); flex: none; }

/* Six stations on the traditional route; the MecAI route keeps the same six
   columns but occupies three of them, so the two rows read as the same
   distance travelled with the middle deleted. */
/* A single rail runs the length of the row and the stations sit on it, so
   IDEA → SKETCH reads as one continuous process rather than six unrelated
   marks with gaps between them. The rail is drawn behind; each icon carries
   a ground-coloured chip that breaks it cleanly. */
.route-line {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--rgap); min-width: 0;
}
/* Spans icon-centre to icon-centre: one column-width minus half a glyph at
   each end, so it terminates on the outer stations instead of the panel edge. */
.route-line::before {
  content: ''; position: absolute; z-index: 0;
  left: 15px; right: calc((100% - 5 * var(--rgap)) / 6 - 15px);
  top: 15px; height: 1px;
  background: rgba(255,255,255,.13);
}
.route--mec .route-line::before { top: 39px; background: var(--blue); opacity: .55; }
.rnode { position: relative; z-index: 1; min-width: 0; }

/* The chevron is hung in the gutter to the left of the station it introduces,
   so it survives any column placement without needing a separate element. */
.rnode:not(:first-child)::before {
  content: ''; position: absolute; top: 12px;          /* centred on the rail */
  left: calc(-1 * (clamp(8px, 1vw, 20px) / 2) - 3px);
  width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
  color: rgba(223,223,223,.34);
}

/* A fixed icon band keeps every label on one baseline, whatever sits above it. */
.ricon {
  display: flex; align-items: center;
  height: 30px; color: rgba(223,223,223,.46); margin-bottom: 13px;
  /* fit-content, or the flex box stretches across the whole grid cell and the
     chip becomes a wide block instead of a break in the rail */
  width: fit-content; padding-right: 13px;
  background: var(--panel-bg);
  position: relative; z-index: 1;
}
.ricon svg { width: 26px; height: 26px; display: block; }
.rnode b {
  display: block; font-size: 11px; font-weight: var(--w-md);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4);
}

.route--mec .ricon { height: 78px; color: var(--blue-2); margin-bottom: 14px; padding-right: 16px; }
.route--mec .ricon svg { width: 40px; height: 40px; }
.route--mec .ricon--brand { height: 78px; padding-right: 16px; }
.route--mec .ricon--brand img { width: 56px; height: 56px; object-fit: contain; }
.route--mec .rnode b { font-size: clamp(12px, 1.05vw, 14px); letter-spacing: .1em; color: var(--white); }
.route--mec .rnode::before { top: 35px; width: 8px; height: 8px; color: var(--blue-2); }

/* The route ends on the component, so PART is an object rather than a word. */
.ricon--img { justify-content: flex-start; padding-right: 0; }
.ricon--img img { width: auto; height: 62px; object-fit: contain; }
.route--mec .ricon--img img { height: 74px; }

@media (max-width: 1080px) { .flow-head, .routes { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .route-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
  .route-line::before { display: none; }
  .rnode::before { content: none; }
  .rnode { grid-column: auto !important; }
  .ricon { height: 24px; margin-bottom: 10px; }
  .ricon svg { width: 22px; height: 22px; }
  .rnode b { font-size: 10px; letter-spacing: .07em; }
  .route--mec .ricon { height: 46px; }
  .route--mec .ricon svg { width: 30px; height: 30px; }
  .route--mec .ricon--brand img { width: 42px; height: 42px; }
  .route--mec .ricon--img { height: 46px; }
}

@media (max-width: 520px) {
  .route-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .route-line { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ==========================================================================
   6 · CLOSE
   ========================================================================== */

.close {
  position: relative; overflow: clip;
  padding-block: var(--sec-loose);
  background: radial-gradient(ellipse 66% 100% at 24% 110%, rgba(1,41,229,.13), rgba(1,41,229,0) 68%);
}
.close-h {
  font-size: clamp(36px, 5.2vw, 84px); line-height: 1.06;
  letter-spacing: -.04em; font-weight: var(--w-lt);
  margin-block: var(--s4);
}
.close-lede {
  font-size: clamp(15px, 1.12vw, 17px); line-height: 1.62; font-weight: var(--w-lt);
  color: var(--ink-3); max-width: 46ch; margin-bottom: var(--s5);
}

/* ==========================================================================
   7 · FOOTER SIGNPOST  (pages.css is not loaded on this page)
   ========================================================================== */

.foot-faq {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule-2);
}
.foot-faq p { font-size: var(--t-cap); color: var(--ink-4); max-width: 58ch; }
.foot-faq h2 { font-size: clamp(19px, 2vw, 26px); font-weight: var(--w-lt); letter-spacing: -.02em; margin-bottom: 8px; }