/* =========================================================
HERO SECTION
========================================================= */

.hero {
  position: relative;
  min-height: 97vh;
  display: flex;
  align-items: center;
  overflow: clip;
  color: #fff;
  isolation: isolate;
  background: #101820;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);

}

/* =========================================================
BACKGROUND ROTATOR
========================================================= */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: opacity, transform;
  transition:
    opacity 1.8s cubic-bezier(.22, .61, .36, 1),
    transform 8s ease-out;
}

.hero-bg.is-visible {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(16, 24, 32, 0.82) 0%,
      rgba(16, 24, 32, 0.76) 35%,
      rgba(16, 24, 32, 0.72) 100%
    );
}

/* =========================================================
LAYOUT
========================================================= */

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* =========================================================
SHOWCASE
========================================================= */

.hero-showcase {
  position: relative;
  width: 100%;
  height: min(70vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  will-change: transform, opacity;
  opacity: 0;
  animation: heroShowcaseReveal 1s cubic-bezier(.22, .61, .36, 1) .12s forwards;
}

.hero-showcase::before {
  content: "";
  position: absolute;
  inset: auto 8% 4% 8%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.16) 45%,
    rgba(0, 0, 0, 0) 75%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
SLIDES
========================================================= */

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate3d(0, 0, 0) scale(0.985);
  filter: drop-shadow(0 28px 72px rgba(0, 0, 0, 0.52));

  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Visible states only */
.hero-slide.is-active,
.hero-slide.is-entering,
.hero-slide.is-leaving {
  visibility: visible;
}

.hero-slide.is-active {
  z-index: 3;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* =========================================================
ENTER STATES
========================================================= */

.hero-slide.is-entering {
  z-index: 4;
}

.hero-slide.is-entering.from-right {
  opacity: 0;
  transform: translate3d(7%, 0, 0) scale(0.985);
}

.hero-slide.is-entering.from-left {
  opacity: 0;
  transform: translate3d(-7%, 0, 0) scale(0.985);
}

.hero-slide.is-entering.from-bottom {
  opacity: 0;
  transform: translate3d(0, 7%, 0) scale(0.982);
}

.hero-slide.is-entering.gentle-zoom {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.04);
}

/* Active state applied to incoming slide */
.hero-slide.is-entering.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 1.08s cubic-bezier(.22, .61, .36, 1),
    opacity 0.92s ease;
}

/* =========================================================
LEAVE STATES
========================================================= */

.hero-slide.is-leaving {
  z-index: 2;
  opacity: 0;
  transition:
    transform 1.08s cubic-bezier(.22, .61, .36, 1),
    opacity 0.82s ease;
}

.hero-slide.is-leaving.to-left {
  transform: translate3d(-5%, 0, 0) scale(0.988);
}

.hero-slide.is-leaving.to-right {
  transform: translate3d(5%, 0, 0) scale(0.988);
}

.hero-slide.is-leaving.to-top {
  transform: translate3d(0, -5%, 0) scale(0.988);
}

.hero-slide.is-leaving.soft-fade {
  transform: translate3d(0, 0, 0) scale(0.992);
}

/* =========================================================
CONTENT
========================================================= */

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  right: 5%;
}

.hero-title {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 3.2vw, 3.35rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;

  opacity: 0;
  transform: translateY(26px);
  animation: heroTextRise 0.9s cubic-bezier(.22, .61, .36, 1) 0.45s forwards;
}

.hero-description {
  margin: 0 0 30px;
  max-width: 60ch;
  font-size: 1.08rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.92);

  opacity: 0;
  transform: translateY(22px);
  animation: heroTextRise 0.9s cubic-bezier(.22, .61, .36, 1) 0.62s forwards;
}

.hero-actions {
  opacity: 0;
  transform: translateY(18px);
  animation: heroTextRise 0.9s cubic-bezier(.22, .61, .36, 1) 0.78s forwards;

}

/* =========================================================
BUTTON
========================================================= */

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 32px;
  border-radius: 10px;

  background: linear-gradient(
    135deg, dodgerblue, mediumblue
  );
  border: 1px solid rgba(0,0,0,0.08);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.12);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg, dodgerblue, mediumblue
  );
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.26),
    0 4px 12px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(30, 144, 255, 0.35),
    0 0 48px rgba(0, 0, 205, 0.22);
}

.btn-primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* =========================================================
KEYFRAMES
========================================================= */

@keyframes heroShowcaseReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroTextRise {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .hero-inner {
    gap: 3rem;
  }

  .hero-showcase {
    height: min(62vh, 500px);
  }
}

@media (max-width: 950px) {
  .hero {
    min-height: auto;
    padding: 4.5rem 0 3.5rem;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(16, 24, 32, 0.78) 0%,
        rgba(16, 24, 32, 0.72) 45%,
        rgba(16, 24, 32, 0.76) 100%
      );
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }

  .hero-content {
    margin: 0 auto;
    max-width: 760px;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-showcase {
    order: -1;
    height: min(52vh, 420px);
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 4rem 0 3rem;
  }

  .hero-showcase {
    height: 300px;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.45rem);
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.68;
  }

  .btn-primary {
    width: 100%;
    max-width: 320px;
  }
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-slide,
  .hero-title,
  .hero-description,
  .hero-actions,
  .hero-showcase,
  .btn-primary {
    animation: none !important;
    transition: none !important;
  }

  .hero-showcase,
  .hero-title,
  .hero-description,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-slide {
    opacity: 0;
    visibility: hidden;
    transform: none !important;
  }

  .hero-slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .hero-bg {
    transform: none !important;
  }

  .hero-bg.is-visible {
    opacity: 1;
  }
}



/* =========================================================
   HERO RESPONSIVE ENHANCEMENTS
   Append below existing hero CSS
   - Refines spacing, symmetry, and scaling
   - Covers small phones through large TVs
   ========================================================= */

/* Shared sizing rhythm */
.hero {
  padding-inline: 0;
}

.hero-inner {
  min-height: clamp(620px, 92vh, 980px);
  padding-top: clamp(5.5rem, 9vw, 8rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* More balanced content block */
.hero-content {
  right: auto;
  justify-self: end;
  width: min(100%, 620px);
}

.hero-showcase {
  justify-self: start;
  width: min(100%, 760px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.hero-actions .btn-primary {
  width: auto;
  min-width: 220px;
}

/* Better optical balance and cleaner text measure */
.hero-title {
  max-width: 11ch;
  text-wrap: balance;
}

.hero-description {
  max-width: 58ch;
  text-wrap: pretty;
}

/* Slightly cleaner desktop composition */
.hero-showcase::after {
  content: "";
  position: absolute;
  inset: 8% 10% 10% 10%;
  z-index: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  pointer-events: none;
  filter: blur(10px);
}

.hero-slide {
  max-width: 100%;
  max-height: 100%;
}

/* Taller displays / newer laptops */
@media (min-height: 900px) and (min-width: 1000px) {
  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    min-height: clamp(760px, 94svh, 1060px);
    align-items: center;
  }

  .hero-showcase {
    height: min(72vh, 640px);
  }
}

/* Wide desktop tuning */
@media (min-width: 1200px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    gap: clamp(3rem, 5vw, 5.5rem);
  }

  .hero-content {
    padding-right: clamp(0rem, 1vw, 0.75rem);
  }

  .hero-title {
    font-size: clamp(2.65rem, 2.35vw, 3.7rem);
    line-height: 1.06;
  }

  .hero-description {
    font-size: clamp(1.04rem, 0.28vw + 0.96rem, 1.16rem);
  }

  .hero-showcase {
    height: min(70vh, 610px);
  }
}

/* Larger desktop / ultrawide */
@media (min-width: 1440px) {
  .hero-inner {
    min-height: clamp(760px, 92vh, 1100px);
    gap: clamp(3.5rem, 5vw, 6.5rem);
  }

  .hero-content {
    width: min(100%, 680px);
  }

  .hero-title {
    max-width: 12ch;
    font-size: clamp(3rem, 2.4vw, 4.25rem);
  }

  .hero-description {
    max-width: 60ch;
    font-size: 1.12rem;
    line-height: 1.78;
  }

  .hero-showcase {
    width: min(100%, 840px);
    height: min(72vh, 680px);
  }

  .hero-slide {
    filter: drop-shadow(0 36px 84px rgba(0, 0, 0, 0.5));
  }
}

/* TV / very large displays */
@media (min-width: 1920px) {
  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    min-height: min(100svh, 1180px);
    max-width: 1800px;
    margin-inline: auto;
    gap: 7rem;
    padding-top: 8.5rem;
    padding-bottom: 6rem;
  }

  .hero-content {
    width: min(100%, 760px);
  }

  .hero-title {
    font-size: clamp(3.5rem, 2.2vw, 5rem);
    line-height: 1.04;
  }

  .hero-description {
    font-size: 1.2rem;
    line-height: 1.82;
    max-width: 62ch;
  }

  .hero-showcase {
    width: min(100%, 920px);
    height: min(74vh, 760px);
  }

  .hero-actions .btn-primary {
    min-width: 250px;
    min-height: 58px;
    padding: 16px 36px;
    font-size: 1rem;
  }
}

/* Standard laptop refinement */
@media (max-width: 1199px) {
  .hero-inner {
    min-height: clamp(620px, 88vh, 900px);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .hero-content {
    width: min(100%, 580px);
  }

  .hero-showcase {
    width: min(100%, 680px);
  }
}

/* Tablet landscape / smaller laptop */
@media (max-width: 950px) {
  .hero {
    min-height: auto;
    padding: 0;
  }

  .hero-inner {
    min-height: unset;
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 5vw, 2.8rem);
    padding-top: clamp(6.5rem, 11vw, 8rem);
    padding-bottom: clamp(3.25rem, 7vw, 4.5rem);
    justify-items: center;
    text-align: center;
  }

  .hero-content {
    order: 2;
    justify-self: center;
    width: min(100%, 760px);
    padding-inline: 0.25rem;
  }

  .hero-showcase {
    order: 1;
    justify-self: center;
    width: min(100%, 620px);
    height: min(48vh, 430px);
    margin-inline: auto;
  }

  .hero-showcase::before {
    inset: auto 10% 4% 10%;
    height: 13%;
  }

  .hero-title {
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.2rem, 5.6vw, 3rem);
  }

  .hero-description {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-actions .btn-primary {
    min-width: 240px;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .hero-inner {
    padding-top: clamp(6rem, 14vw, 7.25rem);
    padding-bottom: clamp(3rem, 8vw, 4rem);
    gap: 1.9rem;
  }

  .hero-showcase {
    width: min(100%, 560px);
    height: min(42vh, 360px);
  }

  .hero-title {
    font-size: clamp(2rem, 7vw, 2.7rem);
    line-height: 1.08;
    margin-bottom: 0.95rem;
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.72;
    margin-bottom: 1.4rem;
  }
}

/* Large phones */
@media (max-width: 600px) {
  .hero-inner {
    padding-top: max(5.75rem, calc(env(safe-area-inset-top) + 4.8rem));
    padding-bottom: 2.9rem;
    gap: 1.4rem;
  }

  .hero-showcase {
    width: min(100%, 460px);
    height: clamp(235px, 45vw, 300px);
  }

  .hero-showcase::before {
    inset: auto 11% 2.5% 11%;
    height: 12%;
    filter: blur(14px);
  }

  .hero-showcase::after {
    inset: 10% 8% 12% 8%;
    border-radius: 22px;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .hero-title {
    max-width: 13ch;
    font-size: clamp(1.95rem, 8vw, 2.35rem);
    margin-bottom: 0.8rem;
  }

  .hero-description {
    max-width: 34rem;
    font-size: 0.99rem;
    line-height: 1.68;
    margin-bottom: 1.2rem;
  }

  .hero-actions {
    width: 100%;
    gap: 0.75rem;
  }

  .hero-actions .btn-primary {
    width: min(100%, 320px);
    min-width: 0;
    margin-inline: auto;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-inner {
    padding-top: max(5.4rem, calc(env(safe-area-inset-top) + 4.4rem));
    padding-bottom: 2.6rem;
    gap: 1.15rem;
  }

  .hero-showcase {
    width: min(100%, 390px);
    height: clamp(220px, 62vw, 280px);
  }

  .hero-slide {
    object-position: center center;
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.42));
  }

  .hero-title {
    font-size: clamp(1.78rem, 8.6vw, 2.08rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .hero-description {
    font-size: 0.96rem;
    line-height: 1.64;
    margin-bottom: 1.05rem;
  }

  .hero-actions .btn-primary {
    min-height: 50px;
    padding: 13px 20px;
    border-radius: 10px;
    font-size: 0.96rem;
  }
}

/* Very small phones */
@media (max-width: 359px) {
  .hero-inner {
    padding-top: max(5.1rem, calc(env(safe-area-inset-top) + 4rem));
    padding-bottom: 2.3rem;
  }

  .hero-showcase {
    height: 210px;
  }

  .hero-title {
    font-size: 1.62rem;
  }

  .hero-description {
    font-size: 0.92rem;
  }

  .hero-actions .btn-primary {
    min-height: 48px;
    padding-inline: 16px;
    font-size: 0.93rem;
  }
}

/* Short viewports */
@media (max-height: 760px) and (min-width: 951px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    min-height: unset;
    padding-top: 6.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-showcase {
    height: min(62vh, 520px);
  }


  .hero-description {
    font-size: 1.02rem;
    line-height: 1.66;
  }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: unset;
    gap: 1.5rem;
    padding-top: max(5rem, calc(env(safe-area-inset-top) + 3.8rem));
    padding-bottom: 2rem;
    text-align: left;
  }

  .hero-showcase {
    order: 1;
    height: min(72vh, 260px);
    width: 100%;
  }

  .hero-content {
    order: 2;
    justify-self: end;
    width: min(100%, 520px);
    text-align: left;
  }

  .hero-title,
  .hero-description {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-actions .btn-primary {
    width: auto;
    min-width: 210px;
    margin-inline: 0;
  }
}

/* Better focus on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover {
    transform: none;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.18),
      0 2px 8px rgba(0, 0, 0, 0.12);
  }

  .btn-primary:active {
    transform: translateY(1px) scale(0.995);
  }
}

/* Reduced motion refinement */
@media (prefers-reduced-motion: reduce) {
  .hero-showcase::after {
    display: none;
  }

  .hero-slide.is-active {
    transform: none !important;
  }
}








/* =========================================================
   HERO MOBILE REFINEMENT
   Append below existing page-index-hero.css
   Focused on iPhones down to iPhone SE
   ========================================================= */

   @media (max-width: 768px) {
    .hero {
      min-height: auto;
      padding: 0;
    }
  
    .hero-overlay {
      background:
        linear-gradient(
          180deg,
          rgba(16, 24, 32, 0.72) 0%,
          rgba(16, 24, 32, 0.76) 42%,
          rgba(16, 24, 32, 0.84) 100%
        );
    }
  
    .hero-inner {
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
      text-align: center;
      gap: 1.5rem;
      min-height: unset;
      padding-top: max(6.1rem, calc(env(safe-area-inset-top) + 5rem));
      padding-bottom: max(2.8rem, calc(env(safe-area-inset-bottom) + 2.2rem));
    }
  
    .hero-showcase {
      order: 1;
      width: min(100%, 460px);
      height: clamp(240px, 52vw, 340px);
      margin-inline: auto;
    }
  
    .hero-showcase::before {
      inset: auto 12% 3% 12%;
      height: 12%;
      filter: blur(14px);
    }
  
    .hero-content {
      order: 2;
      right: auto;
      width: min(100%, 560px);
      max-width: 100%;
      margin: 0 auto;
      padding-inline: 0.4rem;
    }
  
    .hero-title {
      max-width: 11.5ch;
      margin: 0 auto 0.85rem;
      font-size: clamp(2rem, 7.4vw, 2.65rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }
  
    .hero-description {
      max-width: 34rem;
      margin: 0 auto 1.35rem;
      font-size: 1rem;
      line-height: 1.68;
      color: rgba(255, 255, 255, 0.92);
      text-wrap: pretty;
    }
  
    .hero-actions {
      display: flex;
      justify-content: center;
      width: 100%;
    }
  
    .hero-actions .btn-primary {
      width: min(100%, 320px);
      max-width: 100%;
      min-height: 52px;
      padding: 14px 22px;
      margin-inline: auto;
      border-radius: 12px;
    }
  }
  
  @media (max-width: 600px) {
    .hero-inner {
      gap: 1.2rem;
      padding-top: max(5.8rem, calc(env(safe-area-inset-top) + 4.7rem));
      padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.9rem));
    }
  
    .hero-showcase {
      width: min(100%, 400px);
      height: clamp(220px, 60vw, 300px);
    }
  
    .hero-slide {
      filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.44));
    }
  
    .hero-title {
      max-width: 11ch;
      font-size: clamp(1.82rem, 8vw, 2.2rem);
      margin-bottom: 0.75rem;
    }
  
    .hero-description {
      font-size: 0.97rem;
      line-height: 1.62;
      margin-bottom: 1.15rem;
    }
  
    .hero-actions .btn-primary {
      min-height: 50px;
      font-size: 0.96rem;
    }
  }
  
  @media (max-width: 430px) {
    .hero-inner {
      padding-top: max(5.55rem, calc(env(safe-area-inset-top) + 4.4rem));
      padding-bottom: max(2.35rem, calc(env(safe-area-inset-bottom) + 1.7rem));
    }
  
    .hero-showcase {
      width: min(100%, 360px);
      height: clamp(205px, 63vw, 270px);
    }
  
    .hero-content {
      padding-inline: 0.15rem;
    }
  
    .hero-title {
      max-width: 10.5ch;
      font-size: clamp(1.68rem, 8.6vw, 1.98rem);
      line-height: 1.1;
    }
  
    .hero-description {
      max-width: 30rem;
      font-size: 0.94rem;
      line-height: 1.58;
      margin-bottom: 1rem;
    }
  
    .hero-actions .btn-primary {
      width: min(100%, 300px);
      padding: 13px 18px;
    }
  }
  
  @media (max-width: 375px) {
    .hero-inner {
      gap: 1rem;
      padding-top: max(5.2rem, calc(env(safe-area-inset-top) + 4.1rem));
      padding-bottom: max(2.15rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    }
  
    .hero-showcase {
      width: min(100%, 320px);
      height: clamp(190px, 64vw, 235px);
    }
  
    .hero-title {
      font-size: clamp(1.54rem, 8.8vw, 1.8rem);
      margin-bottom: 0.68rem;
    }
  
    .hero-description {
      font-size: 0.91rem;
      line-height: 1.54;
      margin-bottom: 0.95rem;
    }
  
    .hero-actions .btn-primary {
      min-height: 48px;
      font-size: 0.93rem;
      border-radius: 11px;
    }
  }
  
  @media (max-width: 320px) {
    .hero-inner {
      padding-top: max(5rem, calc(env(safe-area-inset-top) + 3.95rem));
      padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.35rem));
    }
  
    .hero-showcase {
      width: min(100%, 288px);
      height: 182px;
    }
  
    .hero-title {
      max-width: 10ch;
      font-size: 1.42rem;
      line-height: 1.12;
    }
  
    .hero-description {
      font-size: 0.87rem;
      line-height: 1.5;
    }
  
    .hero-actions .btn-primary {
      width: 100%;
      min-height: 46px;
      padding: 12px 16px;
      font-size: 0.9rem;
    }
  }
  
  @media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    .hero-inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      text-align: left;
      justify-items: stretch;
      gap: 1.25rem;
      padding-top: max(4.9rem, calc(env(safe-area-inset-top) + 3.8rem));
      padding-bottom: 1.8rem;
    }
  
    .hero-showcase {
      order: 1;
      width: 100%;
      height: min(72vh, 240px);
    }
  
    .hero-content {
      order: 2;
      width: 100%;
      margin: 0;
      text-align: left;
      padding-inline: 0;
    }
  
    .hero-title,
    .hero-description {
      margin-left: 0;
      margin-right: 0;
    }
  
    .hero-actions {
      justify-content: flex-start;
    }
  
    .hero-actions .btn-primary {
      width: auto;
      min-width: 210px;
      margin-inline: 0;
    }
  }
  
  @media (hover: none) and (pointer: coarse) {
    .hero-actions .btn-primary:hover {
      transform: none;
      box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.12);
    }
  
    .hero-actions .btn-primary:active {
      transform: translateY(1px);
    }
  }





  /* =========================================================
   HERO FULL-VIEWPORT FIX
   Append at very bottom of page-index-hero.css
   Ensures the hero background fills the full initial screen
   on all devices with no white space underneath
   ========================================================= */

/* Let viewport math work correctly */
html,
body {
  min-height: 100%;
}

body {
  margin: 0;
}

/* Hero must always fill the first screen */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Make the content wrapper match hero height */
.hero-inner {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

/* Background layers must fully cover */
.hero-bg,
.hero-overlay {
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg {
  background-size: cover;
  background-position: center center;
}

/* Desktop / laptop */
@media (min-width: 951px) {
  .hero-inner {
    padding-top: clamp(6.5rem, 8vw, 8.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
  }

  .hero-showcase {
    height: min(74vh, 700px);
  }
}

/* Tablet and below: keep full first-screen height */
@media (max-width: 950px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
  }

  .hero-inner {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    padding-top: max(6.4rem, calc(env(safe-area-inset-top) + 4.9rem));
    padding-bottom: max(2.2rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  }

  .hero-content {
    justify-self: center;
    width: min(100%, 760px);
    margin: 0 auto;
    right: auto;
  }

  .hero-showcase {
    width: min(100%, 620px);
    height: clamp(220px, 38vh, 430px);
    max-height: 42dvh;
    margin-inline: auto;
  }
}

/* Phones */
@media (max-width: 600px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero-inner {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    gap: 1.15rem;
    padding-top: max(5.8rem, calc(env(safe-area-inset-top) + 4.5rem));
    padding-bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 1.15rem));
  }

  .hero-showcase {
    width: min(100%, 420px);
    height: clamp(190px, 34vh, 290px);
    max-height: 36dvh;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    padding-inline: 0.2rem;
  }

  .hero-title {
    margin-bottom: 0.7rem;
  }

  .hero-description {
    margin-bottom: 1rem;
  }
}

/* Small phones like iPhone SE */
@media (max-width: 375px) {
  .hero-inner {
    padding-top: max(5.35rem, calc(env(safe-area-inset-top) + 4rem));
    padding-bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + 1rem));
  }

  .hero-showcase {
    width: min(100%, 320px);
    height: clamp(170px, 31vh, 235px);
    max-height: 33dvh;
  }

  .hero-title {
    font-size: clamp(1.5rem, 8.2vw, 1.85rem);
  }

  .hero-description {
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

/* Very short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero-inner {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    gap: 1.5rem;
    padding-top: max(4.9rem, calc(env(safe-area-inset-top) + 3.6rem));
    padding-bottom: max(1.2rem, calc(env(safe-area-inset-bottom) + 0.8rem));
    text-align: left;
  }

  .hero-showcase {
    height: min(60vh, 240px);
    max-height: none;
  }

  .hero-content {
    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start;
  }
}



.hero-showcase::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(88px, 10vw, 144px);
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(16, 24, 32, 0) 0%,
      rgba(16, 24, 32, 0.16) 38%,
      rgba(237, 244, 248, 0.72) 100%
    );
}