/* ===== HOME PAGE LP STYLES ===== */
/* Homepage-specific overrides on top of _shared.css */

/* Hero section */
.hero {
  min-height: 760px;
  isolation: isolate;
  background: var(--navy);
  color: white;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b1736 0%, rgba(11,23,54,.86) 42%, rgba(11,23,54,.2) 100%);
  z-index: -1;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: .72;
}
.hero__grid {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    linear-gradient(rgba(34,211,238,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(60deg);
  transform-origin: center bottom;
}
.hero .wrap {
  min-height: 760px;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.25;
  margin: 16px 0;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--cyan), #75a7ff);
  -webkit-background-clip: text;
  color: transparent;
}
.hero p { max-width: 34em; }
.hero__note { font-size: 13px; color: #c9d8ff; }

/* Vortex decorative ring */
.vortex-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vw;
  height: 120vw;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  opacity: .42;
  pointer-events: none;
}
.vortex-ring span {
  font: 900 clamp(42px,8vw,130px)/1 'Space Grotesk', sans-serif;
  letter-spacing: .38em;
  white-space: nowrap;
  color: rgba(255,255,255,.25);
}
.j .vortex-ring { animation: vortex-spin 25s linear infinite; }
@keyframes vortex-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .j .vortex-ring { animation: none; } }

/* INTRO section */
.intro { background: white; }
.intro__big {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(64px, 13vw, 176px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  margin: 46px 0 24px;
  white-space: nowrap;
}

/* PROMISE section */
.promise { background: var(--navy); color: white; }
.promise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.promise__grid img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.promise .rule-list { border-top-color: rgba(255,255,255,.25); }
.promise .rule-list div { border-bottom-color: rgba(255,255,255,.25); }
.promise .rule-list b { color: var(--cyan); }

/* SERVICES bento */
.services { background: #EAF1FF; }

/* Editorial big text */
.editorial {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(70px, 13vw, 190px);
  font-weight: 700;
  color: var(--blue);
  line-height: .8;
}

/* Section spacing variants (homepage) */
.section--compact-bottom { padding-bottom: 48px; }
.section--process { padding-top: 64px; padding-bottom: 64px; }
.section--after-process { padding-top: 72px; }

/* Decor image blend */
.decor { mix-blend-mode: multiply; }

/* Homepage responsive */
@media (max-width: 768px) {
  .hero, .hero .wrap { min-height: 680px; }
  .hero .wrap {
    display: block;
    padding-top: 170px;
  }
  .hero::after {
    background: linear-gradient(0deg, #0b1736 5%, rgba(11,23,54,.62) 100%);
  }
  .promise__grid { grid-template-columns: 1fr; gap: 28px; }
  .intro__big { font-size: 78px; }
}