/* =========================================================================
   Jardinero — landing page
   Values mirror the Figma source (file fBpkm3mtplOtyFtFcJEynP, node 737:137).
   Design canvas: 1440 × 6773.
   ========================================================================= */

/* ----------------------------------- tokens ----------------------------------- */
:root {
  --navy:        #001d62;
  --blue:        #145eee;
  --green:       #5bd200;
  --red:         #ff0000;
  --tint:        #f0f4f9;  /* chips, panels */
  --tint-green:  #f0f9f0;  /* successful log cards */
  --tint-red:    #ffebeb;  /* Figma's rgba(255,0,0,.08) flattened over white */
  --hairline:    #d9d9d9;

  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist Pixel', 'Geist', monospace;

  /* Figma tracking: −3% on the display sizes, −2% on the body sizes */
  --ls-64: -1.92px;
  --ls-48: -1.44px;
  --ls-32: -.96px;
  --ls-24: -.72px;
  --ls-18: -.36px;
  --ls-16: -.32px;
  --ls-14: -.28px;
  --ls-12: -.24px;

  --r-8:  8px;
  --r-16: 16px;
  --r-24: 24px;
  --r-48: 48px;

  --shadow-btn:  0 4px 7px rgba(0, 0, 0, .15);
  --inset-light: inset 0 -2px 1px rgba(255, 255, 255, .25);
  --inset-dark:  inset 0 -2px 1px rgba(25, 25, 25, .25);

  --page:    1440px;
  --wrap:    1215px;  /* main content column */
  --col-889: 889px;   /* centred narrow sections */
  --col-782: 782px;   /* factory overview */
  --col-596: 596px;   /* hero + footer CTA copy */

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Anchor landing offset. The solid bar is 65-69px tall (its height comes from
     the 40px Github button, not the logo), so 92px lands a section clear of it
     with air to spare above the badge. */
  --anchor-offset: 92px;
}

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

/* Anchor scrolling is handled by the JS smooth-scroll so both share one easing. */
html { -webkit-text-size-adjust: 100%; }
/* Both paths (the JS handler and a native #hash load) read this offset, so the
   fixed nav never sits on top of the section it just scrolled to. */
section[id] { scroll-margin-top: var(--anchor-offset); }

body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: var(--ls-18);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* --------------------------------- typography -------------------------------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: .9;
  letter-spacing: var(--ls-48);
  text-align: center;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: .9;
  letter-spacing: var(--ls-32);
}

.sec-head__sub {
  width: 760px;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: var(--ls-18);
  text-align: center;
}
.sec-head__sub a { text-decoration: underline; text-underline-position: from-font; }

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sec-head--889 { width: var(--col-889); max-width: 100%; margin-inline: auto; }

.wrap { width: var(--wrap); max-width: calc(100% - 48px); margin-inline: auto; }

/* ----------------------------------- icons -----------------------------------
   Every icon SVG is exported at its own intrinsic size and centred inside the
   box the design gives it. Boxes and leaves are sized separately so bleed
   (the dot's glow, the log glyph's mask padding) is preserved.
   ------------------------------------------------------------------------- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
}
.ico img { max-width: none; }

.ico--24    { width: 24px; height: 24px; }
.ico--24 img{ width: 24px; height: 24px; }

.ico--16    { width: 16px; height: 16px; }
.ico--16 img{ width: 16px; height: 16px; }

/* 16px box, 12.667 × 14.667 artwork */
.ico--log     { width: 16px; height: 16px; }
.ico--log img { width: 12.6667px; height: 14.6667px; }

/* 16px box, 14px artwork */
.ico--gitreq     { width: 16px; height: 16px; }
.ico--gitreq img { width: 14px; height: 14px; }

.avatar { width: 40px; height: 40px; flex: none; }

/* ---------------------------------- buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-8);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-btn), var(--inset-light); }
.btn--white   { background: #fff; color: var(--navy); box-shadow: var(--shadow-btn), var(--inset-dark); }
.hero__actions .btn--white { color: #000; }

.btn:hover  { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 6px 14px rgba(0, 0, 0, .18), var(--inset-light); }
.btn--white:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), var(--inset-dark); }
.btn:active { transform: translateY(0); }

/* ---------------------------- badges, chips, tags ---------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-8);
  background: var(--tint);
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  white-space: nowrap;
}
/* Sits on a --tint panel in the design, so it reads as plain text */
.badge--flat  { background: transparent; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-8);
  background: var(--tint);
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-8);
  background: #fff;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  white-space: nowrap;
}

.pill-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border-radius: var(--r-8);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  white-space: nowrap;
}

/* =============================================================================
   HERO — 1440 × 1100 in Figma, stretched to fill the viewport.
   Vertical anchors are kept as percentages of the design height so the
   composition (copy at 12.2%, dashboard flush to the bottom edge) survives
   any viewport size.
   ============================================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 780px;
  overflow: hidden;
  isolation: isolate;
}

/* The extra 60px above gives the parallax room to drift without exposing an edge. */
.hero__bg {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__bg img,
.hero__bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma shows the full image height at 1100px; a 100vh hero has to crop,
     so keep the sky the white copy sits on. */
  object-position: center top;
  will-change: transform;
}

/* --- nav ---
   Figma places it at y 28 over the hero; it stays with you as you scroll and
   picks up a white bar once you leave the hero. Padding reproduces the design's
   28 / 78 / 71 offsets. */
.nav {
  --nav-pad: 28px;
  --nav-x-l: 78px;
  --nav-x-r: 71px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Padding, never left/right — the bar itself must stay full-bleed so its
     white background reaches both edges at every width. */
  padding: var(--nav-pad) var(--nav-x-r) var(--nav-pad) var(--nav-x-l);
  transition:
    background-color .32s var(--ease),
    box-shadow .32s var(--ease),
    padding .32s var(--ease);
}
/* tighter, square, full-bleed bar once it goes solid — a crisp hairline rather
   than a soft halo, which reads as rounded corners at the edges */
.nav.is-solid {
  --nav-pad: 14px;
  background: #fff;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 29, 98, .08);
  box-shadow: none;
}

.nav__logo { display: block; line-height: 0; }
/* White over the dark hero, navy once the white bar appears. Each wordmark
   path carries its own fill attribute, so the paths must be targeted directly —
   a fill on the parent <g> would be overridden. */
.logo__word path, .logo__mark { fill: #fff; transition: fill .32s var(--ease); }
.nav.is-solid .logo__word path { fill: var(--navy); }
.nav__logo .logo { display: block; width: 166.999px; height: 31.3384px; }

.nav.is-solid .logo__mark { fill: var(--blue); }

.nav__links { color: #fff; transition: color .32s var(--ease); }
.nav.is-solid .nav__links { color: var(--navy); }

.nav__links {
  position: absolute;
  /* Figma's link baseline (28 + 9.2), kept centred as the bar shrinks */
  top: calc(var(--nav-pad) + 9.2px);
  left: 50%;
  transform: translateX(-50%);
  transition: top .32s var(--ease);
  display: flex;
  align-items: center;
  gap: 65px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: var(--ls-18);
  white-space: nowrap;
}
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* --- hero copy --- */
.hero__copy {
  position: absolute;
  top: 13.09%;              /* 144 / 1100 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: var(--col-596);
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  will-change: transform, opacity;
}

.hero__title {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 400;
  font-size: 64px;
  line-height: .9;
  letter-spacing: var(--ls-64);
  text-align: center;
}

.hero__sub {
  width: 535px;
  color: #fff;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ls-18);
  text-align: center;
}

.hero__pron {
  font-weight: 200;
  color: #fff;         /* Geist UltraLight */
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: var(--ls-12);
  text-align: center;
}

.hero__actions { display: flex; align-items: center; gap: 9px; margin-top: 0; }

/* --- dashboard screenshot: 1159 × 547, flush with the hero's bottom edge --- */
.hero__shot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  /* 1159/1440 of the frame — exactly Figma's width at the design size, and it
     keeps that proportion as the viewport grows, stopping at the screenshot's
     native 2037px so it is never upscaled into softness. */
  width: min(80.486%, 2037px);
  /* The dashboard is UI — it must never be cropped left/right. Locking the box
     to the screenshot's own proportions and capping it at Figma's 547/1100 slot
     means the width is always what drives object-fit, so only the bottom is
     ever trimmed, however tall the viewport gets. */
  aspect-ratio: 2037 / 1200;
  max-height: 49.7273%;     /* 547 / 1100 */
  border: 5px solid #fff;
  border-bottom: 0;
  border-radius: var(--r-16) var(--r-16) 0 0;
  overflow: hidden;
}
.hero__shot picture { display: block; width: 100%; height: 100%; }
.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* =============================== FACTORY OVERVIEW =============================== */
.factory { padding-top: 88px; }
.factory__inner {
  width: var(--col-782);
  max-width: calc(100% - 48px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.factory__text {
  width: 535px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  text-align: center;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
/* 3 + 2 rows on desktop; the zero-height break line means the visual row
   spacing is two row-gaps, hence 4px */
.chips__break { display: none; }
@media (min-width: 761px) {
  .chips { row-gap: 4px; }
  .chips__break { display: block; flex-basis: 100%; height: 0; }
}

/* ============================ ONE GARDENER, THREE JOBS ============================ */
.jobs { margin-top: 224px; }
.jobs .sec-head { margin-bottom: 32px; }

.jobs__grid { display: flex; align-items: stretch; gap: 24px; }

/* outer card: 16px of landscape photo framing a white panel */
.jobcard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-16);
  overflow: hidden;
  isolation: isolate;
}
.jobcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../assets/bg-hero-1280.webp') center / cover no-repeat;
  border-radius: var(--r-16);
}
.jobcard__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 418px;
  padding: 24px;
  border-radius: var(--r-8);
  background: #fff;
}
.jobcard__copy { display: flex; flex-direction: column; gap: 12px; }
.jobcard__copy p { font-size: 16px; line-height: 1.4; letter-spacing: var(--ls-16); }
.jobcard__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* two chips must share a row inside the 309px card body */
.jobcard__tags .chip { padding: 8px 10px; font-size: 13px; }

/* =============================== 4:03 A.M. LOG FEED ===============================
   Plain Figma column: heading, then the five report cards 32px below it, then
   the closing note 24px under those. Cards just fade up on scroll.
   ================================================================================ */
.logs { margin-top: 212px; }

.logs__pin {
  width: var(--col-889);
  max-width: calc(100% - 48px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.logs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.logs__stage { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.logs__note {
  width: 535px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-14);
  text-align: center;
}

.logcard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r-24);
  background: var(--tint-green);
}
.logcard--alert { background: var(--tint-red); }

.logcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logcard__id   { display: flex; align-items: center; gap: 8px; }
.logcard__name { font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); white-space: nowrap; }
.logcard__time { font-size: 14px; line-height: 1.2; letter-spacing: var(--ls-14); text-align: right; white-space: nowrap; }

.logcard__body   { display: flex; flex-direction: column; gap: 8px; }
.logcard__status { font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); color: var(--green); }
.logcard--alert .logcard__status { color: var(--red); }
.logcard__text   { font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); }

/* ============================ PLANT IT ONCE (STEPS) ============================ */
.steps { margin-top: 190px; }
.steps__panel {
  position: relative;
  margin-inline: 24px;
  min-height: 736px;
  padding: 72px 0 119px;
  border-radius: var(--r-48);
  overflow: hidden;
  isolation: isolate;
}
/* Parallax: the image is 120px taller than its frame and drifts within that
   slack. Anchored to the top so the sky — and therefore the heading — is never
   the part that gets cropped away on wide viewports. */
.steps__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--r-48);
  pointer-events: none;
}
.steps__bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
  will-change: transform;
}

/* Figma layers a 50% black scrim over the panel artwork so the white heading
   holds up against the foliage. */
.steps__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  border-radius: var(--r-48);
  pointer-events: none;
}

.steps__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: var(--col-889);
  max-width: calc(100% - 48px);
  margin: 0 auto 32px;
}
.steps__head .h2 { color: #fff; }
.steps__head .badge { background: #fff; border: 1px solid #fff; }
.steps__title { width: 755px; max-width: 100%; }

.steps__grid {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 1103px;
  max-width: calc(100% - 96px);
  margin-inline: auto;
}
.stepcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
  height: 418px;
  padding: 24px;
  border-radius: var(--r-8);
  background: #fff;
}
.stepcard__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.stepcard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: .9;
  letter-spacing: var(--ls-24);
}
.stepcard p { font-size: 14px; line-height: 1.4; letter-spacing: var(--ls-14); }

/* ============================= YOURS, ROOT AND STEM ============================= */
.os { margin-top: 208px; }
.os__grid {
  display: grid;
  grid-template-columns: 647fr 552fr;
  gap: 16px;
  align-items: start;
  margin-top: 56px;
}
.os__list { display: flex; flex-direction: column; gap: 8px; }

.oscard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-24);
  background: #fff;
}
.oscard__head  { display: flex; align-items: center; gap: 8px; }
.oscard__title { font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: var(--ls-18); white-space: nowrap; }
.oscard p      { font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); }

.tickbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--green);
  border-radius: var(--r-8);
  background: var(--tint-green);
}

/* repo card — 552 × 457 in the design */
.repo {
  display: flex;
  flex-direction: column;
  min-height: 457px;
  padding: 24px 24px 25px;
  border-radius: var(--r-24);
  background: var(--tint);
}
.repo__content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1 1 auto;
  width: 492px;
  max-width: 100%;
  margin-bottom: 16px;
}
.repo__id   { display: flex; align-items: center; gap: 8px; }
.repo__name { font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); white-space: nowrap; }
.repo__desc { flex: 1 1 auto; font-size: 18px; line-height: 1.4; letter-spacing: var(--ls-18); }
.repo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.repo__cta  { width: 100%; }

/* ================================ GROWN AT TENKI ================================ */
.tenki { margin-top: 150px; }
.tenki__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 404px;
  padding: 40px 24px;
  border-radius: var(--r-24);
  background: var(--tint);
}
.tenki__actions { display: flex; align-items: center; gap: 9px; }

/* ==================================== FOOTER ====================================
   Figma: a blurred white → #eef4f2 band at y 5828 (h 360) sitting above the
   landscape panel at y 6126 (h 647).
   ================================================================================ */
.foot { position: relative; margin-top: 190px; }

.foot__panel {
  position: relative;
  z-index: 1;
  height: clamp(765px, 53vw, 1040px);   /* 765 at 1440; grows so wide screens
                                           keep showing garden, not just sky */
  overflow: hidden;
  isolation: isolate;
}
.foot__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }

/* white at the top fading out by 68.85% of the panel — the design's own
   gradient, which is what dissolves the artwork into the page */
.foot__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 76.86%);
  pointer-events: none;
}
.foot__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  will-change: transform;
}

.foot__cta {
  position: relative;
  z-index: 1;
  margin: 162px auto 0;     /* 6081 − 5919 */
  width: var(--col-596);
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.foot__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 88px;
  line-height: .9;
  letter-spacing: -2.64px;
  text-align: center;
  white-space: nowrap;
}
.foot__sub {
  width: 535px;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ls-18);
  text-align: center;
}

.foot__bar {
  position: relative;
  z-index: 2;
  height: 89px;
  padding: 0 68px 0 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  color: var(--navy);
}
.foot__logo img { width: 166.999px; height: 31.3384px; }
.foot__legal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ls-18);
  text-align: center;
  white-space: nowrap;
}
.foot__links { display: flex; align-items: center; gap: 37px; }
.foot__links a {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ls-18);
  white-space: nowrap;
  transition: opacity .25s var(--ease);
}
.foot__legal a { text-decoration: underline; text-underline-offset: 3px; transition: opacity .25s var(--ease); }
.foot__legal a:hover { opacity: .7; }
.foot__links a:hover { opacity: .7; }
.foot__x { display: flex; }
.foot__x img { display: block; width: 18px; height: 18px; }

/* ================================== ANIMATION ==================================
   Reveal-on-scroll and hero-on-appear. Both share one transition so the motion
   language is consistent; --d staggers siblings.
   ================================================================================ */
[data-reveal],
[data-hero] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .85s var(--ease) calc(var(--d, 0) * 90ms),
    transform .85s var(--ease) calc(var(--d, 0) * 90ms);
}
[data-reveal].is-visible,
.is-loaded [data-hero] { opacity: 1; transform: none; }

/* the dashboard rises a little further and settles from a slight scale-down */
.hero__shot[data-hero] { transform: translateX(-50%) translateY(48px) scale(.99); }
.is-loaded .hero__shot[data-hero] { transform: translateX(-50%); }

/* stagger children of a revealed group */
.jobs__grid [data-reveal],
.steps__grid [data-reveal],
.os__list [data-reveal] { transition-delay: calc(var(--d, 0) * 110ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-hero],
  .hero__shot[data-hero] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__shot[data-hero] { transform: translateX(-50%) !important; }
  .btn { transition: none; }
}

/* ================================= RESPONSIVE ================================= */
/* Large displays: give the dashboard more vertical presence than the 547/1100
   slot allows, so it doesn't sit marooned in the middle of a tall hero. */
@media (min-width: 1700px) {
  .hero__shot { max-height: 56%; }
}

@media (min-width: 2200px) {
  .hero__shot { max-height: 60%; }
}

@media (max-width: 1320px) {
  .nav { --nav-x-l: 40px; --nav-x-r: 32px; }
  .nav__links { gap: 40px; }
  .foot__bar { padding: 0 40px; }
  .steps__grid { max-width: calc(100% - 64px); }
}

/* ------------------------------ nav: small screens ------------------------------
   The centred links can't coexist with the logo and CTA below 1100px, so they
   drop out and the bar becomes logo-left / Github-right.
   ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav {
    --nav-pad: 18px;
    --nav-x-l: 24px;
    --nav-x-r: 24px;
    align-items: center;
  }
  .nav.is-solid { --nav-pad: 12px; }
  .nav__links { display: none; }

  .hero { min-height: 720px; }
  /* two-column dashboard — box follows its proportions so width keeps driving
     object-fit and the UI is never trimmed left/right */
  .hero__shot { width: calc(100% - 80px); aspect-ratio: 1867 / 1401; }

  .jobs__grid { flex-wrap: wrap; }
  .jobcard { flex: 1 1 320px; }

  .steps__grid { flex-wrap: wrap; }
  .stepcard { flex: 1 1 300px; height: auto; min-height: 320px; }

  .os__grid { grid-template-columns: 1fr; }
  .repo { min-height: 0; }
  .repo__content { width: 100%; }

  .foot__title { font-size: 52px; white-space: normal; }
  .foot__legal { position: static; transform: none; white-space: normal; }
  .foot__bar {
    height: auto;
    padding: 24px;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .nav { --nav-x-l: 16px; --nav-x-r: 16px; }
  .nav__logo .logo { width: 132px; height: 24.765px; }   /* 0.79×, ratio kept */

  .hero { min-height: 640px; }
  .hero__title { font-size: 40px; }
  .hero__sub { font-size: 16px; }
  .hero__actions { flex-wrap: wrap; justify-content: center; }
  /* single-column dashboard: portrait, so it only ever loses height */
  .hero__shot { width: calc(100% - 32px); aspect-ratio: 1149 / 2136; }

  .h2 { font-size: 34px; }
  .h3 { font-size: 26px; }
  .sec-head__sub, .factory__text, .logs__note { width: 100%; }

  .steps__panel { margin-inline: 12px; padding: 48px 0 56px; border-radius: 28px; }
  .steps__bg img { border-radius: 28px; }

  .logcard { padding: 24px; }
  .logcard__status, .logcard__text { font-size: 16px; }

  .oscard, .repo, .tenki__panel { padding: 24px; }
  .oscard__title { white-space: normal; }
  .repo__meta { flex-wrap: nowrap; }
  .repo__meta .tag { height: 34px; padding: 6px 10px; font-size: 12px; }
  .tenki__actions { flex-wrap: wrap; justify-content: center; }

  .foot__title { font-size: 34px; }
  .factory { padding-top: 48px; }
  .jobs { margin-top: 96px; }
  .logs { margin-top: 96px; }
  .steps { margin-top: 96px; }
  .os { margin-top: 96px; }
}