/* RentHub homepage — vibrant super-app landing (page-home only) */

body.page-home {
  --home-ink: #14110f;
  --home-muted: #5a534c;
  --home-canvas: #fff8f2;
  --home-panel: #ffffff;
  --home-line: rgba(20, 17, 15, 0.08);
  --home-orange: #ff6b35;
  --home-orange-deep: #e24a12;
  --home-teal: #0d9488;
  --home-jacaranda: #7c3aed;
  --home-sun: #fbbf24;
  --home-max: 1180px;
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(255, 107, 53, 0.12), transparent 60%),
    radial-gradient(900px 500px at 92% 8%, rgba(124, 58, 237, 0.08), transparent 55%),
    var(--home-canvas);
  color: var(--home-ink);
}

/* :not(.nav-inner) — the nav bar opts out of the site-wide .wrap width via a
   more specific rule (.site-nav .nav-inner), but this selector's extra
   specificity (element + 2 classes) was winning anyway and clipping the nav
   row to 1180px, pushing "Home" back onto the logo instead of after it. */
body.page-home .wrap:not(.nav-inner) {
  width: min(100% - 2rem, var(--home-max));
}

/* —— Nav over bright hero —— */
/* Fixed, not sticky: the hero photo starts at the very top of the window
   under the nav. (A negative margin sized to --nav-height left a strip of
   page background whenever the real nav was taller.) site.js keeps
   --nav-actual equal to the nav's real height for the hero padding. */
body.page-home .site-nav {
  position: fixed;
  left: 0;
  right: 0;
}

body.page-home .site-nav:not(.is-scrolled)::before {
  opacity: 0;
}

body.page-home .site-nav:not(.is-scrolled) {
  background: linear-gradient(
    180deg,
    rgba(3, 22, 20, 0.55) 0%,
    rgba(3, 22, 20, 0.16) 70%,
    transparent 100%
  );
}

body.page-home .site-nav:not(.is-scrolled) .logo,
body.page-home .site-nav:not(.is-scrolled) .logo:hover,
body.page-home .site-nav:not(.is-scrolled) .logo:focus,
body.page-home .site-nav:not(.is-scrolled) .logo .brand-word {
  color: #fff;
}

body.page-home .site-nav:not(.is-scrolled) .logo .brand-word span,
body.page-home .site-nav:not(.is-scrolled) .logo:hover .brand-word span {
  color: var(--home-orange);
}

body.page-home .site-nav:not(.is-scrolled) .nav-links a {
  color: rgba(255, 255, 255, 0.92);
}

body.page-home .site-nav:not(.is-scrolled) .nav-links a:hover,
body.page-home .site-nav:not(.is-scrolled) .nav-links a[aria-current="page"] {
  color: #fff;
}

body.page-home .site-nav:not(.is-scrolled) .nav-toggle {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Drawer open — site.css already solids the header to --canvas and darkens
   its logo/toggle for this exact case, but only for pages using the shared
   .hero class. The home page's hero is .home-hero, so body:has(.hero) never
   matched here and the white-on-dark-photo colors above stayed active over
   the now-light, solid header — "Rent" (white) on cream is what that looks
   like. Mirror site.css's override, scoped to the home page. */
body.page-home.nav-open .site-nav:not(.is-scrolled) .logo,
body.page-home.nav-open .site-nav:not(.is-scrolled) .logo:hover,
body.page-home.nav-open .site-nav:not(.is-scrolled) .logo:focus,
body.page-home.nav-open .site-nav:not(.is-scrolled) .logo .brand-word {
  color: var(--ink);
}

body.page-home.nav-open .site-nav:not(.is-scrolled) .logo .brand-word span,
body.page-home.nav-open .site-nav:not(.is-scrolled) .logo:hover .brand-word span {
  color: var(--home-orange);
}

body.page-home.nav-open .site-nav:not(.is-scrolled) .nav-toggle {
  background: var(--white);
  border-color: var(--line);
}

body.page-home.nav-open .site-nav:not(.is-scrolled) .nav-toggle span::before,
body.page-home.nav-open .site-nav:not(.is-scrolled) .nav-toggle span::after {
  background: var(--ink);
}

body.page-home .site-nav:not(.is-scrolled) .nav-toggle span,
body.page-home .site-nav:not(.is-scrolled) .nav-toggle span::before,
body.page-home .site-nav:not(.is-scrolled) .nav-toggle span::after {
  background: #fff;
}

/* —— Hero: one composition —— */
/* Real photo (Harare jacaranda street — genuinely vibrant, not a dark, generic
   stock shot) with a teal-tinted scrim instead of the old near-black one.
   The scrim is strongest behind the headline (left) and fades toward the
   photo's own colour on the right, so the picture still reads as vibrant
   while the text stays unmistakably legible. */
.home-hero {
  position: relative;
  isolation: isolate;
  /* No min-height on purpose — a forced tall box + align-items:center was
     exactly what created the blank space above/below the content whenever
     the copy+phone were shorter than that forced height. Let the section
     size to its own content; .home-hero__inner's padding is the only
     breathing room. */
  display: flex;
  overflow: hidden;
  color: #fff;
  background-color: #0b2a26;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 40%;
  transform: scale(1.06);
  animation: homeKen 30s ease-in-out alternate infinite;
  filter: saturate(1.15) contrast(1.03) brightness(1.02);
}

.home-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(3, 20, 18, 0.82) 0%,
      rgba(3, 20, 18, 0.6) 22%,
      rgba(3, 20, 18, 0.28) 42%,
      rgba(3, 20, 18, 0.06) 60%,
      rgba(6, 30, 27, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 20, 18, 0.55) 0%,
      rgba(3, 20, 18, 0.02) 28%,
      rgba(3, 20, 18, 0.04) 62%,
      rgba(3, 20, 18, 0.4) 100%
    );
  pointer-events: none;
}

.home-hero__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.home-hero__bloom--teal {
  inset: auto -10% -26% auto;
  width: min(58vw, 600px);
  height: min(58vw, 600px);
  background: radial-gradient(circle, rgba(45, 212, 191, 0.6), transparent 68%);
  animation: homeBloom 11s ease-in-out infinite alternate;
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2rem, var(--home-max));
  margin: 0 auto;
  padding:
    calc(1.35rem + var(--nav-actual, 5.2rem))
    0
    calc(2.5rem + var(--safe-bottom));
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.home-hero__copy {
  max-width: 34rem;
  animation: homeRise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero__brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 6.5rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.home-hero__brand span {
  color: var(--home-orange);
}

.home-hero__headline {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 18ch;
}

.home-hero__lede {
  margin: 0.85rem 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 32ch;
}

.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.15rem;
  animation: homeRise 1s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero__stage {
  justify-self: center;
  width: min(100%, 17rem);
  animation: homeRise 1.1s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero__phone {
  /* This screenshot already renders its own device frame, shadow and
     reflection — no second CSS-drawn bezel/notch on top of it. */
  margin: 0;
  position: relative;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.4));
  transform: rotate(-2.5deg);
  animation: homeFloat 5.5s ease-in-out infinite;
}

.home-hero__phone img {
  width: 100%;
  aspect-ratio: 620 / 1270;
  object-fit: contain;
  display: block;
}

/* Laptop/desktop: the hero is exactly one screen. Type and the phone are
   sized from the window height as well as its width, so short laptop
   screens (≈650–800px tall) still show everything — headline, store
   badges and the whole phone — without scrolling. */
@media (min-width: 900px) {
  .home-hero {
    height: 100vh;
    height: 100svh;
    min-height: 34rem;
    max-height: 68rem;
  }

  .home-hero__inner {
    --hero-room: calc(100svh - var(--nav-actual, 5.2rem) - 3.5rem);
    width: min(100% - 4rem, var(--home-max));
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "copy stage"
      "cta stage";
    align-content: center;
    align-items: center;
    gap: clamp(1rem, 3svh, 1.75rem) clamp(2rem, 5vw, 4.5rem);
    padding-top: calc(var(--nav-actual, 5.2rem) + 1.25rem);
    padding-bottom: 2.25rem;
  }

  .home-hero__copy {
    grid-area: copy;
    align-self: end;
  }

  .home-hero__cta {
    grid-area: cta;
    align-self: start;
    margin-top: 0;
  }

  .home-hero__brand {
    font-size: clamp(3.25rem, min(8.5vw, 12.5svh), 6.5rem);
  }

  .home-hero__headline {
    margin-top: clamp(0.6rem, 1.8svh, 1rem);
    font-size: clamp(1.3rem, min(2.6vw, 4.2svh), 2rem);
  }

  .home-hero__lede {
    margin-top: clamp(0.5rem, 1.4svh, 0.85rem);
    font-size: clamp(1rem, min(1.5vw, 2.4svh), 1.18rem);
  }

  /* The phone fills the height left under the nav (620×1270 image). */
  .home-hero__stage {
    grid-area: stage;
    width: auto;
    max-width: none;
    min-width: 0;
    justify-self: end;
    align-self: center;
  }

  .home-hero__phone img {
    height: min(var(--hero-room), 44rem);
    width: auto;
  }

  .home-hero__phone {
    transform: rotate(-3deg);
  }
}

@media (max-width: 899px) {
  .home-hero {
    min-height: 0;
    align-items: stretch;
  }

  .home-hero__photo {
    object-position: 48% 34%;
  }

  .home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.25rem, 6.25rem);
    grid-template-areas:
      "copy stage"
      "cta cta";
    align-items: end;
    column-gap: 0.85rem;
    row-gap: 1.1rem;
    padding-top: calc(0.75rem + var(--nav-height) + var(--safe-top));
    padding-bottom: calc(1.35rem + var(--safe-bottom));
  }

  .home-hero__copy {
    grid-area: copy;
    max-width: none;
  }

  .home-hero__cta {
    grid-area: cta;
    margin-top: 0;
  }

  .home-hero__stage {
    grid-area: stage;
    width: 100%;
    max-width: 6.25rem;
    margin: 0;
    align-self: end;
  }

  .home-hero__phone {
    animation: none;
    transform: rotate(-5deg);
  }

  .home-hero__phone img {
    aspect-ratio: 620 / 1270;
    max-height: 15.5rem;
    width: 100%;
    object-fit: contain;
  }

  .home-hero__brand {
    font-size: clamp(1.8rem, 8.4vw, 3.4rem);
  }

  .home-hero__headline {
    max-width: 14ch;
    font-size: clamp(1.1rem, 4vw, 1.35rem);
  }

  .home-hero__lede {
    max-width: 24ch;
    font-size: 0.95rem;
  }

  .home-hero__cta .store-badge img {
    width: 124px;
    height: auto;
  }
}

@keyframes homeKen {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.13) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes homeBloom {
  from {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.9;
    transform: translate3d(-6%, -4%, 0) scale(1.08);
  }
}

@keyframes homeRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes homeFloat {
  0%,
  100% {
    transform: rotate(-2.5deg) translateY(0);
  }
  50% {
    transform: rotate(-2.5deg) translateY(-12px);
  }
}

/* —— Motivating strip (replaces hub marquee) —— */
.home-motivate {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem) 0;
  background:
    linear-gradient(90deg, rgba(255, 107, 53, 0.07), rgba(13, 148, 136, 0.06)),
    var(--home-canvas);
  color: var(--home-ink);
  border-block: 1px solid rgba(255, 107, 53, 0.16);
}

.home-motivate__grid {
  display: grid;
  gap: 1.15rem 1.75rem;
}

@media (min-width: 780px) {
  .home-motivate__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }
}

.home-motivate__grid p {
  margin: 0;
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.45;
  color: var(--home-muted);
}

.home-motivate__grid strong {
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--home-ink);
}

/* —— Sections —— */
.home-section {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}

.home-section--tight {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.home-eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-orange-deep);
}

.home-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  max-width: 16ch;
}

.home-sub {
  margin: 0.85rem 0 0;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--home-muted);
  max-width: 38rem;
}

.home-head {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* —— Hub mosaic —— */
.home-hubs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .home-hubs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }
}

@media (min-width: 1040px) {
  .home-hubs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.home-hub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 10.5rem;
  padding: 1.1rem 1rem 1.15rem;
  border-radius: 1.15rem;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-color: #1a1410;
}

.home-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hub-photo);
  background-size: cover;
  background-position: center;
  transition: transform 0.45s ease;
}

.home-hub::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(12, 8, 6, 0.88) 0%,
      rgba(12, 8, 6, 0.42) 48%,
      rgba(12, 8, 6, 0.12) 100%
    ),
    var(--hub-wash, transparent);
  pointer-events: none;
}

.home-hub:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(20, 17, 15, 0.22);
  color: #fff;
}

.home-hub:hover::before {
  transform: scale(1.07);
}

.home-hub h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.home-hub p {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.home-hub--properties {
  --hub-photo: url("/assets/hubs/properties.jpg");
  --hub-wash: linear-gradient(145deg, rgba(13, 148, 136, 0.28), transparent 60%);
}
.home-hub--hubride {
  --hub-photo: url("/assets/hubs/hubride.jpg");
  --hub-wash: linear-gradient(145deg, rgba(234, 88, 12, 0.32), transparent 60%);
}
.home-hub--hubmall {
  --hub-photo: url("/assets/hubs/hubmall.jpg");
  --hub-wash: linear-gradient(145deg, rgba(219, 39, 119, 0.3), transparent 60%);
}
.home-hub--hubfood {
  --hub-photo: url("/assets/hubs/hubfood.jpg");
  --hub-wash: linear-gradient(145deg, rgba(132, 204, 22, 0.28), transparent 60%);
}
.home-hub--services {
  --hub-photo: url("/assets/hubs/services.jpg");
  --hub-wash: linear-gradient(145deg, rgba(37, 99, 235, 0.3), transparent 60%);
}
.home-hub--hubjobs {
  --hub-photo: url("/assets/hubs/hubjobs.jpg");
  --hub-wash: linear-gradient(145deg, rgba(124, 58, 237, 0.3), transparent 60%);
}
.home-hub--hubfresh {
  --hub-photo: url("/assets/hubs/hubfresh.jpg");
  --hub-wash: linear-gradient(145deg, rgba(34, 197, 94, 0.28), transparent 60%);
}
.home-hub--hubbeauty {
  --hub-photo: url("/assets/hubs/hubbeauty.jpg");
  --hub-wash: linear-gradient(145deg, rgba(190, 24, 93, 0.3), transparent 60%);
}
.home-hub--hubparts {
  --hub-photo: url("/assets/hubs/hubparts.jpg");
  --hub-wash: linear-gradient(145deg, rgba(55, 65, 81, 0.35), transparent 60%);
}
.home-hub--hubcare {
  --hub-photo: url("/assets/hubs/hubcare.jpg");
  --hub-wash: linear-gradient(145deg, rgba(8, 145, 178, 0.3), transparent 60%);
}

@media (min-width: 1040px) {
  .home-hub--featured {
    grid-column: span 2;
    min-height: 11rem;
  }
}

/* —— Story band —— */
.home-story {
  display: grid;
  gap: 1rem;
}

@media (min-width: 860px) {
  .home-story {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.home-story__item {
  position: relative;
  padding: 1.5rem 1.25rem 1.6rem;
  border-radius: 1.25rem;
  background: var(--home-panel);
  border: 1px solid var(--home-line);
  overflow: hidden;
}

.home-story__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--story-accent, var(--home-orange));
}

.home-story__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--story-accent, var(--home-orange));
  opacity: 0.85;
}

.home-story__item h3 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.home-story__item p {
  margin: 0.55rem 0 0;
  color: var(--home-muted);
  font-size: 0.98rem;
}

.home-story__item a {
  display: inline-flex;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--home-orange-deep);
}

.home-story__item--seek {
  --story-accent: #0d9488;
}
.home-story__item--move {
  --story-accent: #ff6b35;
}
.home-story__item--earn {
  --story-accent: #7c3aed;
}

/* —— Cinema product proof —— */
.home-cinema {
  position: relative;
  border-radius: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(800px 320px at 10% 0%, rgba(255, 107, 53, 0.2), transparent 55%),
    radial-gradient(700px 300px at 90% 100%, rgba(124, 58, 237, 0.16), transparent 50%),
    #161210;
  color: #fff;
}

.home-cinema .home-eyebrow {
  color: #fdba74;
}

.home-cinema .home-title {
  color: #fff;
  max-width: 14ch;
}

.home-cinema .home-sub {
  color: rgba(255, 255, 255, 0.72);
}

.home-cinema__fan {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1rem;
  margin: 1.75rem -0.25rem 0;
  padding: 0.75rem 0.25rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.home-cinema__fan::-webkit-scrollbar {
  height: 6px;
}

.home-cinema__fan::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.home-cinema__shot {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  width: min(44vw, 11rem);
  scroll-snap-align: start;
}

.home-cinema__shot .phone-frame {
  width: 100%;
}

.home-cinema__shot figcaption {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 900px) {
  .home-cinema__fan {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    margin: 2.25rem 0 0;
    padding: 0 clamp(0rem, 2vw, 1.5rem) 1.5rem;
    overflow: visible;
    align-items: end;
  }

  .home-cinema__shot {
    width: auto;
    transition: z-index 0s 0.45s;
  }

  .home-cinema__shot:hover {
    z-index: 4;
    transition: none;
  }

  /* Small on the fan, so hovering lifts a phone to near full size */
  .home-cinema__shot .phone-frame {
    --phone-zoom: 1.55;
    transform-origin: 50% 62%;
  }

  .home-cinema__shot--1 {
    transform: rotate(-6deg) translateY(18px);
  }
  .home-cinema__shot--2 {
    transform: rotate(-3deg) translateY(8px);
  }
  .home-cinema__shot--3 {
    transform: translateY(-6px);
    z-index: 2;
  }
  .home-cinema__shot--3 .phone-frame {
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
      inset 0 0 0 3px #050506,
      0 0 0 1px rgba(255, 107, 53, 0.45),
      0 36px 70px -12px rgba(0, 0, 0, 0.55);
  }
  .home-cinema__shot--4 {
    transform: rotate(3deg) translateY(8px);
  }
  .home-cinema__shot--5 {
    transform: rotate(6deg) translateY(18px);
  }
}

/* —— Trust strip —— */
.home-trust {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .home-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-trust__item {
  padding: 1.15rem 1.05rem;
  border-radius: 1.1rem;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.14);
}

.home-trust__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.home-trust__item span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--home-muted);
  line-height: 1.4;
}

/* —— Download —— */
.home-download {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 1.75rem;
  background:
    linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(124, 58, 237, 0.08)),
    var(--home-panel);
  border: 1px solid var(--home-line);
}

@media (min-width: 860px) {
  .home-download {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
  }
}

.home-download__qr {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.35rem;
}

.home-download__qr img {
  width: 112px;
  height: 112px;
  border-radius: 0.85rem;
  background: #fff;
  padding: 0.4rem;
  border: 1px solid var(--home-line);
}

.home-download__qr p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--home-muted);
  max-width: 18rem;
}

.home-download__phone {
  margin: 0 auto;
  width: min(72vw, 15.5rem);
  rotate: 3deg;
}

@media (min-width: 860px) {
  .home-download__phone {
    --phone-zoom: 1.25;
  }
}

/* —— Reveal —— */
body.page-home [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

body.page-home [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__photo,
  .home-hero__bloom,
  .home-hero__phone,
  .home-hero__copy,
  .home-hero__stage {
    animation: none !important;
  }

  body.page-home [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}