/* AGI /index — Home page section styles.
   Ported from MainSite.dc.html + SiteFooter.dc.html design source.
   Shared components (.agi-btn, .agi-card, .site-nav, .callgate-*, etc.)
   live in site.css — not repeated here. */

/* ---- Shared section typography helpers (not in workshop.css) ---- */
.home-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.home-eyebrow--dark { color: var(--sky-200); }

.home-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}
.home-h2--dark { color: #fff; }

/* ---- 01 Hero ---- */
.home-hero {
  background: var(--navy);
  color: #fff;
  padding: 0 0 clamp(64px, 10vw, 96px);
}

/* desktop: asymmetric 3-area grid; mobile: flex column */
.home-hero__grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 32px) 0;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 5vw, 56px);
  row-gap: 24px;
  align-items: start;
}
.home-hero__a { grid-column: 1; grid-row: 1; align-self: end; }
.home-hero__b {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-bottom: clamp(-90px, -7vw, -40px);
}
.home-hero__c { grid-column: 1; grid-row: 2; }

/* The oversized "400K+" watermark that used to sit behind the photo card is
   gone. The headline occupies the only space it could have shown in, so the
   photo covered it at every viewport tested (360-1600px) and all that
   escaped were two disconnected blue fragments that read as a render bug.
   The same figure leads the stats card directly below it. */

/* photo card */
.home-hero__photo-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.38);
  z-index: 1;
}
.home-hero__photo-wrap img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Source is 1200x700 landscape in a 4:5 portrait frame, so the crop
     does real work. 58% 30% keeps Derrick whole and off-centre;
     24% 55% used to slice his head off at the right edge. */
  object-position: 58% 30%;
  display: block;
  filter: saturate(0.62) contrast(1.05);
}
.home-hero__photo-overlay-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(4, 47, 95, 0.34) 0%, rgba(4, 47, 95, 0.62) 55%, rgba(17, 98, 161, 0.5) 100%);
  mix-blend-mode: multiply;
}
.home-hero__photo-overlay-bot {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 47, 95, 0.55) 0%, transparent 45%);
}

/* headline */
.home-hero__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-200);
  margin-bottom: 20px;
}
.home-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

/* body + CTAs */
.home-hero__body {
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 34em;
  text-wrap: pretty;
}
.home-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* primary CTA */
.home-btn-primary {
  display: inline-block;
  text-align: center;
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(117, 197, 66, 0.24);
  transition: background-color var(--dur-base) var(--ease-out);
}
.home-btn-primary:hover { background: var(--green-600); }

/* ghost CTA */
.home-btn-ghost {
  display: inline-block;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.home-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
  .home-hero__grid {
    padding: 28px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  /* The photo hangs below its grid row on desktop. Once the grid is a flex
     column that same negative margin drags the body copy up underneath the
     photo — it was clipping the top of "Real proof, not guru theory". */
  .home-hero__b { margin-bottom: 0; }
  .home-hero__cta-row { flex-direction: column; align-items: stretch; }
  .home-btn-primary,
  .home-btn-ghost { display: block; width: 100%; }
}

/* ---- 02 Stats / Proof bar ---- */
.home-stats {
  background: var(--mist-100);
  padding: 0 0 56px;
}
.home-stats__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  /* The card lifts into the hero. transform alone leaves its original 46px
     of layout height behind as an empty mist band under the footnote, so
     claw that height back. A negative margin-top would collapse through
     this padding-free parent and drag the section background up with it. */
  transform: translateY(-46px);
  margin-bottom: -46px;
  /* The card is the top layer of that overlap. Without this the hero photo,
     which hangs 90px below its own row, painted over the card and sliced
     the top 5px off the fourth stat. */
  position: relative;
  z-index: 2;
}
.home-stats__card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(4, 47, 95, 0.08);
  padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 38px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}
.home-stats__item {}
.home-stats__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.home-stats__label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 10px;
}
.home-stats__footnote {
  margin: 18px 4px 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-variant: small-caps;
  color: var(--ink-muted);
}

/* ---- 03 What AGI is ---- */
.home-what {
  background: #fff;
  padding: clamp(56px, 9vw, 88px) 0;
}
.home-what__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
.home-what__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 34px;
  max-width: 44em;
  text-wrap: pretty;
}
.home-what__title { margin-bottom: 20px; }
.home-what__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.home-what-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--sky);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(4, 47, 95, 0.10);
  padding: clamp(24px, 3vw, 32px);
}
.home-what-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 20px;
}
.home-what-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  margin-bottom: 18px;
}
/* Navy to match .home-northtek__panel — the two Northtek marks on this page
   should read as the same brand, not two different grey placeholders. */
.home-what-card__avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--navy);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-what-card__avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-what-card__avatar-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.home-what-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.home-what-card__role {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.home-what-card__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- 04 Offers ---- */
.home-offers {
  background: var(--mist-100);
  padding: clamp(56px, 9vw, 88px) 0;
}
.home-offers__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
.home-offers__intro {
  max-width: 38em;
  margin-bottom: 42px;
}
.home-offers__intro .home-h2 { margin-top: 0; }
.home-offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.home-offer-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(4, 47, 95, 0.10);
  padding: clamp(24px, 3vw, 32px);
}
.home-offer-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.home-offer-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.25;
}
.home-offer-card__status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.home-offer-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 20px;
}
.home-offer-card__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ocean);
  text-decoration: none;
}
.home-offer-card__link:hover { color: var(--ocean); }

/* ---- 05 Derrick — The Proof ---- */
.home-derrick {
  background: #fff;
  padding: clamp(56px, 9vw, 88px) 0;
}
.home-derrick__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  display: grid;
  /* Fixed photo column rather than 1fr. derrick-portrait is 447x447 and no
     larger original exists, so an equal-split column rendered it at 510x638
     and it went visibly soft. 340px wide at 4/5 needs 425px of source
     height against the 447 available, which is sharp at DPR 1 with margin
     to spare, and the copy takes the width the photo gives back. */
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 760px) {
  .home-derrick__inner { grid-template-columns: minmax(0, 1fr); }
}
.home-derrick__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 18px;
  display: block;
}
.home-derrick__title { margin-bottom: 20px; }
.home-derrick__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 26px;
  /* The copy column widened when the photo column was pinned to 340px, which
     pushed the measure past 90 characters. Hold it near 70. */
  max-width: 36em;
}
.home-derrick__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ocean);
  text-decoration: none;
}
.home-derrick__link:hover { color: var(--ocean); }

/* ---- 06 Northtek — The Engine ---- */
.home-northtek {
  background: var(--mist-100);
  padding: clamp(56px, 9vw, 88px) 0;
}
.home-northtek__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.home-northtek__title { margin-bottom: 20px; }
.home-northtek__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 26px;
}
.home-northtek__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ocean);
  text-decoration: none;
}
.home-northtek__link:hover { color: var(--ocean); }
/* Brand panel, not a placeholder. This was a 3:2 flat mist box holding one
   line of navy text — lighter than the section behind it and reading as an
   asset that had not been delivered. Inverted to the hero's navy so it
   anchors the section the way the photo anchors the one above, and shortened
   so the wordmark is not floating in dead space. */
.home-northtek__panel {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
}
.home-northtek__rule {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
}
.home-northtek__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.home-northtek__place {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-200);
}

/* ---- Footer (extends .site-footer from site.css) ---- */
.home-footer {
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-body);
}
.home-footer__top {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 72px) clamp(20px, 4vw, 32px) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.home-footer__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.home-footer__sub {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 32em;
}
.home-footer__form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.home-footer__email-wrap {
  flex: 1;
  min-width: 220px;
}
.home-footer__email {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
  height: 52px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.home-footer__email::placeholder { color: rgba(255, 255, 255, 0.55); }
.home-footer__email:focus { border-color: var(--sky); }
.home-footer__subscribe {
  height: 52px;
  padding: 0 24px;
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out);
}
.home-footer__subscribe:hover { background: var(--green-600); }
.home-footer__note {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.home-footer__bottom {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 32px) 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.home-footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.home-footer__links a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--dur-base) var(--ease-out);
}
.home-footer__links a:hover { color: #fff; }
.home-footer__copy {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}