/* DIFWEB-298 (home half) — home page (/) redesign to Figma YHP2SMNoNGEJZJGN16fI3Z,
   frame 22470:15662 (desktop 1830 canvas, 1:1 on the site's 1300 column; the
   1024/768/375 layouts are derived). Build spec: ~/Documents/diffco-case-research/
   home-page/SPEC.md (D1–D16).

   Loaded only by app/page.tsx, after sv2-blocks.css (the v2 tokens, pill,
   Methodology and How-we-build rules, keyed to `.page.-home-v5` too; home does
   not load the rest of service-v2.css). Not purged (only styles.min.css is).
   Every rule is scoped under `.page.-home-v5`. */

/* ---- 1. Hero (22476:24679) ---------------------------------------------- */
/* The comp's overlay: the video fades to the warm near-black #100502 at the
   bottom (the live hero had none). The comp states 40% black at the top, but
   its video frame is brighter than our (DIF-630) grade, and 40% on this footage
   renders the top of the hero near-black (mean luma 8 vs the comp's 18). This
   lighter ramp matches the comp's measured brightness band by band. */
.page.-home-v5 .intro.-v2 { background: #100502; }
/* The legacy `.intro { min-height: 100vh }` (styles.min.css) stretched the hero
   past its content on tall viewports (~4:3, e.g. 1600x1200), leaving an empty
   band under the logo strip. The content sets the height now. */
@media (min-width: 640px) {
  .page.-home-v5 .intro.-v2 { min-height: 0; }
}
/* Same gradient as the live site's hero h1 span (styles.min.css
   `.intro .cover__text h1 span`). */
.page.-home-v5 .home-hero__gradient {
  background: linear-gradient(90deg, #ffbd12 0, #e03d3d 53.72%, #cd21e9 101.11%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Play/pause for the background video (WCAG 2.2.2), bottom-right of the hero.
   Rendered only where the video loads (desktop). */
.page.-home-v5 .home-hero__video-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(16, 5, 2, 0.4);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.page.-home-v5 .home-hero__video-toggle:hover { border-color: rgba(255, 255, 255, 0.56); background-color: rgba(16, 5, 2, 0.64); }
.page.-home-v5 .home-hero__video-toggle:focus-visible { outline: 2px solid var(--sv2-primary); outline-offset: 3px; }
.page.-home-v5 .intro.-v2 .intro__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 5, 2, 0) 0%, rgba(16, 5, 2, 0.25) 50%, #100502 100%);
}
/* The header overlays the hero; the comp puts the h1 324px from the top. */
.page.-home-v5 .home-hero { padding: 324px 0 44px; color: #fff; }
.page.-home-v5 .home-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.page.-home-v5 .home-hero__head h1 {
  max-width: 1000px;
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 84px;
  line-height: 1.1;
  letter-spacing: -3.36px;
  color: #fff;
  text-shadow: 0 0 64px rgba(0, 0, 0, 0.25);
}
/* "Production-ready." never splits at its hyphen (it did at 375). */
.page.-home-v5 .home-hero__nowrap { white-space: nowrap; }
/* Comp 22565:13448: a solid #F8B000 pill, 180×56, 11px side padding. */
.page.-home-v5 .home-hero__head .sv2-pill {
  min-width: 180px;
  justify-content: space-between;
  padding: 10px 10px 10px 11px;
  background: var(--sv2-primary);
}
.page.-home-v5 .home-hero__head .sv2-pill:focus-visible { outline-color: #fff; }

.page.-home-v5 .home-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}
.page.-home-v5 .home-hero__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 256px;
  padding: 40px 40px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(35, 32, 31, 0.04);
  -webkit-backdrop-filter: blur(27px);
  backdrop-filter: blur(27px);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.page.-home-v5 .home-hero__card:hover { border-color: rgba(255, 255, 255, 0.32); background-color: rgba(255, 255, 255, 0.06); }
.page.-home-v5 .home-hero__card:focus-visible { outline: 2px solid var(--sv2-primary); outline-offset: 3px; }
.page.-home-v5 .home-hero__card-text { display: flex; flex-direction: column; gap: 20px; }
.page.-home-v5 .home-hero__card-title {
  font-family: Gilroy, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  color: #fff;
}
.page.-home-v5 .home-hero__card p {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #fff;
}
.page.-home-v5 .home-hero__card-arrow {
  align-self: flex-end;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease;
}
.page.-home-v5 .home-hero__card:hover .home-hero__card-arrow { transform: translateX(3px); }

.page.-home-v5 .home-hero__trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
}
.page.-home-v5 .home-hero__trusted-label {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.64);
}
/* Comp: six 147–161px cells spread over the 1000px between its 200px pads. */
.page.-home-v5 .home-hero__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The logo SVGs carry the comp's 64% opacity themselves; no extra dimming here. */
.page.-home-v5 .home-hero__logos li { display: flex; }
.page.-home-v5 .home-hero__logos img { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; }
/* >=1280 (the comp's layout): the comp's row is 1020 wide and the Starbucks
   mark sits centred in a 147px cell like its neighbours. With the bare 60px
   SVG as its cell, space-between pushed Mars 39px and Hilton 25px left. */
@media (min-width: 1280px) {
  .page.-home-v5 .home-hero__logos { max-width: 1020px; }
  .page.-home-v5 .home-hero__logos li.-wide-cell { justify-content: center; width: 147px; }
}

@media (max-width: 1279px) {
  .page.-home-v5 .home-hero { padding-top: 200px; }
  .page.-home-v5 .home-hero__head h1 { font-size: 64px; letter-spacing: -2.56px; }
  .page.-home-v5 .home-hero__cards { gap: 16px; margin-top: 56px; }
  .page.-home-v5 .home-hero__card { min-height: 240px; padding: 32px 32px 24px; }
  .page.-home-v5 .home-hero__logos { max-width: 860px; }
  .page.-home-v5 .home-hero__logos img { height: 48px; }
}
@media (max-width: 1023px) {
  .page.-home-v5 .home-hero { padding-top: 168px; }
  .page.-home-v5 .home-hero__head h1 { font-size: 56px; letter-spacing: -2.24px; }
  .page.-home-v5 .home-hero__cards { grid-template-columns: 1fr; gap: 8px; }
  /* One card per row: text left, arrow bottom-right. */
  .page.-home-v5 .home-hero__card { flex-direction: row; align-items: flex-end; gap: 24px; min-height: 0; }
  /* Three per row (3 + 3) once the 1000px row no longer fits. */
  .page.-home-v5 .home-hero__logos { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 16px 24px; max-width: 560px; }
}
@media (max-width: 767px) {
  .page.-home-v5 .home-hero { padding: 120px 0 32px; }
  .page.-home-v5 .home-hero__head { gap: 32px; }
  .page.-home-v5 .home-hero__head h1 { font-size: 40px; letter-spacing: -1.6px; }
  .page.-home-v5 .home-hero__cards { margin-top: 48px; }
  .page.-home-v5 .home-hero__card { gap: 16px; padding: 24px 20px 20px 24px; }
  .page.-home-v5 .home-hero__card-text { gap: 12px; }
  .page.-home-v5 .home-hero__card-title { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
  .page.-home-v5 .home-hero__card p { font-size: 14px; line-height: 22px; letter-spacing: -0.28px; }
  .page.-home-v5 .home-hero__trusted { margin-top: 48px; }
  .page.-home-v5 .home-hero__logos { gap: 8px; }
  .page.-home-v5 .home-hero__logos img { height: 40px; }
}
@media (max-width: 400px) {
  .page.-home-v5 .home-hero__head h1 { font-size: 36px; letter-spacing: -1.44px; }
}

/* ---- 4. Diffco AI Methodology (22664:7823) ------------------------------ */
/* Default variant; sv2-blocks.css's 40px section padding and #F5F5FB ground
   are the comp's, so nothing to add here. */

/* ---- 6. How Diffco helps: DIFWEB-312 ------------------------------------ */
/* The theme was written for three cards; with four in one unwrapped flex row
   (min-content ≈ 814px, "Product‑Oriented" is one unbreakable word) the row
   overflowed the 688–748px column at 768–830 and the page scrolled sideways.
   768–1023: a 2×2 grid. 1024–1279: the row stays, but cards may shrink. */
@media (max-width: 1279px) {
  .page.-home-v5 .best-results .items .item { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page.-home-v5 .best-results .items { flex-wrap: wrap; }
  .page.-home-v5 .best-results .items .item { flex: 1 1 calc(50% - 4px); }
}

/* ---- 7. How we build (22530:13582): HowWeBuildV2 on white, 88/48 -------- */
/* Same rhythm as About (about-v2.css §5). */
.page.-home-v5 .sv2-hwb { padding: 88px 0 48px; background: #fff; }
@media (max-width: 1279px) {
  .page.-home-v5 .sv2-hwb { padding: 64px 0 40px; }
}
@media (max-width: 767px) {
  .page.-home-v5 .sv2-hwb { padding: 40px 0 24px; }
}

/* ---- 12. Our partners (OurPartnersSection) ------------------------------ */
/* Below 768 the theme makes the eight logos a scrollbar-less nowrap rail
   with two 180px cells in view and no cue that six more exist. Home only:
   wrap them into two columns so all eight show. */
@media (max-width: 767px) {
  .page.-home-v5 .g-our-partners__items { flex-wrap: wrap; overflow-x: visible; justify-content: center; }
  .page.-home-v5 .g-our-partners__items .item { flex: 0 0 calc(50% - 4px); }
}