/* ============================================================
   FABRHANA — Home hero: Rising Skyline (light, scroll-parallax)
   ============================================================ */

.hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 80% -10%, #ffffff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(178deg, #f7fbf8 0%, #ecf6ef 46%, #dcefe2 78%, #cfe7d6 100%);
}

/* soft drifting light bloom for movement */
.hero-bloom {
  position: absolute; width: 760px; height: 760px; border-radius: 50%; top: -240px; right: -120px;
  background: radial-gradient(circle, rgba(10,163,83,0.14), rgba(10,163,83,0) 62%);
  filter: blur(14px); z-index: 1; animation: bloomDrift 18s var(--ease-inout) infinite alternate;
}
.hero-bloom.two { left: -200px; top: auto; bottom: -260px; right: auto; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(0,100,58,0.10), rgba(0,100,58,0) 64%); animation-duration: 22s; }
@keyframes bloomDrift { to { transform: translate(-90px, 70px) scale(1.18); } }

/* faint architectural grid for depth */
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0,80,49,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,49,0.05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---- skyline ---- */
.hero-skyline { position: absolute; left: 0; right: 0; bottom: -2px; height: min(70vh, 620px); z-index: 2; pointer-events: none; }
.hero-skyline svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.sky-layer { transform-origin: bottom; will-change: transform; }
/* entrance — transform only, so towers are never hidden if the timeline stalls */
.sky-layer { animation: skyRise 1.4s var(--ease-out) both; }
.sky-l1 { animation-delay: .1s; } .sky-l2 { animation-delay: .26s; } .sky-l3 { animation-delay: .42s; }
@keyframes skyRise { from { transform: translateY(86px); } to { transform: translateY(0); } }

/* subtle sheen sweeping the front towers */
.sky-sheen { mix-blend-mode: overlay; opacity: .0; animation: sheen 7s ease-in-out 1.6s infinite; }
@keyframes sheen { 0%,100%{opacity:0;transform:translateX(-30%);} 50%{opacity:.5;transform:translateX(30%);} }

/* ---- content ---- */
.hero-content { position: relative; z-index: 10; padding-top: var(--nav-h); }
.hero h1 { color: var(--green-3); margin-top: 24px; }
.hero h1 .grad-word { background: linear-gradient(120deg, #0aa353, #058342 60%, #00643a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { max-width: 540px; margin-top: 26px; }
.hero-cta { display: flex; gap: 14px; align-items: center; margin-top: 38px; flex-wrap: wrap; }

/* floating trust line */
.hero-trust { display: flex; gap: 40px; margin-top: 54px; flex-wrap: wrap; }
.hero-trust .stat .n { font-weight: 900; font-size: clamp(30px,3.4vw,42px); letter-spacing: -0.03em; line-height: 1; color: var(--green-2); font-variant-numeric: tabular-nums; }
.hero-trust .stat .l { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-muted); margin-top: 9px; }

/* scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 11; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--green-2); }
.scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid var(--green-2); border-radius: 13px; position: relative; opacity: .7; }
.scroll-cue .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 4px; height: 7px; background: var(--green-2); border-radius: 3px; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:1;transform:translate(-50%,0);} 70%{opacity:0;transform:translate(-50%,12px);} 100%{opacity:0;} }
.scroll-cue span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .65; }

@media (max-width: 880px) {
  .hero-skyline { height: 42vh; opacity: .9; }
  .hero-trust { gap: 26px; }
  .scroll-cue { display: none; }
}