/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  min-height: min(100vh, 720px);
  background-color: var(--navy);
  background-image: linear-gradient(135deg, rgba(30,54,88,0.80) 0%, rgba(36,66,106,0.74) 45%, rgba(38,110,74,0.76) 100%), url('../assets/hero/hero-building.webp');
  background-size: cover, 132% 132%;
  background-position: center, center 78%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
}

.blob1 {
  width: 700px; height: 700px;
  background: var(--teal);
  top: -250px; right: -150px;
  animation: blobFloat 5s ease-in-out infinite;
}

.blob2 {
  width: 500px; height: 500px;
  background: #0D5C2A;
  bottom: -150px; left: -100px;
  animation: blobFloat 5s ease-in-out infinite reverse;
}

.blob3 {
  width: 300px; height: 300px;
  background: var(--teal2);
  top: 40%; left: 35%;
  opacity: 0.08;
  animation: blobFloat 5s 2s ease-in-out infinite;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.08); }
}

/* ── Hero split layout ── */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 112px 24px 64px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.hero-left {
  flex: 1;
  min-width: 0;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 800;
  color: white;
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  animation: fadeUp 0.6s 0.1s ease both;
}

.gradient-text {
  background: linear-gradient(90deg, var(--teal2) 0%, #A5D6A7 60%, #52d68a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.75;
  animation: fadeUp 0.6s 0.2s ease both;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}

/* ── Hero visual (right side floating cards) ── */
.hero-visual {
  position: relative;
  width: 480px;
  height: 500px;
  flex-shrink: 0;
  animation: fadeUp 0.8s 0.4s ease both;
}

.hv-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(46,204,113,0.22);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-breathe 5s ease-in-out infinite;
}

/* r1 → teal-green (pairs with hvc-a) */
.hv-ring.r1 { width: 180px; height: 180px; border-color: rgba(46,204,113,0.5); animation-delay: 0s; }
/* r2 → sky blue (pairs with hvc-b) */
.hv-ring.r2 { width: 320px; height: 320px; border-color: rgba(96,185,255,0.38); animation-delay: 1s; }
/* r3 → warm gold (pairs with hvc-c) */
.hv-ring.r3 { width: 460px; height: 460px; border-color: rgba(255,196,87,0.3); animation-delay: 2s; }

@keyframes ring-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

.hv-card {
  position: absolute;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: card-float 5s ease-in-out infinite;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Portfolio card doubles as a link to the Catalog section. Sits inside
   aria-hidden="true" .hero-visual (decorative, the same link already
   exists in the main nav), so tabindex="-1" keeps it mouse/touch
   clickable without creating a hidden-but-focusable keyboard stop. */
.hvc-link { cursor: pointer; text-decoration: none; color: inherit; }

.hvc-link:hover {
  border-color: var(--teal);
  box-shadow: 0 10px 30px rgba(0,0,0,0.32), 0 0 22px rgba(46,204,113,0.4);
}

.hvc-more,
.hvc-cta {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.hvc-more {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.hvc-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.hvc-link:hover .hvc-more,
.hvc-link:hover .hvc-cta {
  max-height: 18px;
  margin-top: 4px;
  opacity: 1;
}

/* hvc-a → teal-green, on r1 */
.hvc-a {
  top: 18%; left: 2%; animation-delay: 0s;
  border-color: rgba(46,204,113,0.55);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 0 16px rgba(46,204,113,0.2);
}
/* hvc-b → sky blue, on r2 */
.hvc-b {
  top: 50%; right: 0; transform: translateY(-50%); animation-delay: 1.7s;
  border-color: rgba(96,185,255,0.55);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 0 16px rgba(96,185,255,0.2);
}
/* hvc-c → warm gold, on r3 */
.hvc-c {
  bottom: 18%; left: 4%; animation-delay: 3.3s;
  border-color: rgba(255,196,87,0.55);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 0 16px rgba(255,196,87,0.2);
}

.hvc-b { animation: card-float-mid 5s 1.7s ease-in-out infinite; }
@keyframes card-float-mid {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 8px)); }
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hvc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.hvc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal2);
  box-shadow: 0 0 6px var(--teal2);
  animation: dot-pulse 5s ease-in-out infinite;
}
.hvc-a .hvc-dot { background: #2ECC71; box-shadow: 0 0 6px #2ECC71; }
.hvc-b .hvc-dot { background: #60B9FF; box-shadow: 0 0 6px #60B9FF; }
.hvc-c .hvc-dot { background: #FFC457; box-shadow: 0 0 6px #FFC457; }

.hvc-val {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}

.hvc-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* ── Orbit icons (product categories) ──
   Each icon circles its own paired ring (r1/r2/r3) as a fixed hub, offset
   ~15-18px beyond that ring's own radius so the ring reads as the axis it
   swings around rather than the icon riding along the ring's own line.
   Durations (14s/24s/32s, double the original 7/12/16s pass) are
   proportional to each icon's orbit radius (105/178/248px) so all three
   move at the same linear (px/sec) speed even though their rotation
   periods differ; the slower pace and softened fill/shadow below keep the
   motion ambient rather than competing with the headline for attention.
   Start angles are staggered 120deg apart so they open in an even
   triangle; they'll still drift out of that formation over time since the
   periods aren't equal, that's expected (matched linear speed was
   prioritized over held formation). */
.hv-orbit-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
}

.hv-orbit-icon {
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: rgba(18,40,72,0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 2;

  /* Two-layer mask: layer 1 is the full icon at full opacity, layer 2 is
     the current overlap rectangle with whichever hero card it's passing
     behind, sized and positioned every frame by hero-orbit.js. Layer 2's
     alpha (0.6) controls how much shows through the overlap once
     composited: since layer 1 is fully opaque, the resulting visible
     opacity there is (1 - layer 2 alpha), so 0.6 leaves the icon about 40%
     visible behind a card instead of fully hidden. Grows and shrinks
     smoothly as the overlap changes instead of popping between states. */
  --hole-x: 0px; --hole-y: 0px; --hole-w: 0px; --hole-h: 0px;
  -webkit-mask-image: linear-gradient(#000,#000), linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
  -webkit-mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  -webkit-mask-position: 0 0, var(--hole-x) var(--hole-y);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: destination-out;
  mask-image: linear-gradient(#000,#000), linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
  mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  mask-position: 0 0, var(--hole-x) var(--hole-y);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
}

.ho-1 { animation: orbit-spin-1 14s linear infinite; }
.ho-1 .hv-orbit-icon { top: -105px; border: 1.5px solid rgba(46,204,113,0.45); animation: orbit-counter-1 14s linear infinite; }

.ho-2 { animation: orbit-spin-2 24s linear infinite; }
.ho-2 .hv-orbit-icon { top: -178px; border: 1.5px solid rgba(96,185,255,0.45); animation: orbit-counter-2 24s linear infinite; }

.ho-3 { animation: orbit-spin-3 32s linear infinite; }
.ho-3 .hv-orbit-icon { top: -248px; border: 1.5px solid rgba(255,196,87,0.45); animation: orbit-counter-3 32s linear infinite; }

@keyframes orbit-spin-1 { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes orbit-counter-1 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@keyframes orbit-spin-2 { from { transform: translate(-50%,-50%) rotate(120deg); } to { transform: translate(-50%,-50%) rotate(480deg); } }
@keyframes orbit-counter-2 { from { transform: rotate(-120deg); } to { transform: rotate(-480deg); } }

@keyframes orbit-spin-3 { from { transform: translate(-50%,-50%) rotate(240deg); } to { transform: translate(-50%,-50%) rotate(600deg); } }
@keyframes orbit-counter-3 { from { transform: rotate(-240deg); } to { transform: rotate(-600deg); } }

/* ── Hero stats bar ── */
.hero-stats-row {
  position: relative;
  z-index: 1;
  padding: 0 24px 80px;
}

.hero-stats {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 40px;
  backdrop-filter: blur(12px);
  animation: fadeUp 0.6s 0.5s ease both;
  width: fit-content;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 36px;
}

.stat-number {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.stat-unit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal2);
  line-height: 1;
}

.stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.1);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  z-index: 1;
  transition: color 0.2s ease;
}

.hero-scroll-hint:hover { color: rgba(255,255,255,0.65); }

.scroll-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid rgba(255,255,255,0.25);
  border-bottom: 2px solid rgba(255,255,255,0.25);
  transform: rotate(45deg);
  animation: bounce 5s infinite;
  transition: border-color 0.2s ease;
}

.hero-scroll-hint:hover .scroll-arrow {
  border-color: rgba(255,255,255,0.65);
}

@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(6px); }
}

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

@media (max-width: 1024px) {
  /* Fixed 720px cap was sized around the two-column layout's 500px-tall
     ring visual; single-column stacked content needs to size to itself
     instead, or long subhead/CTA content collides with the scroll hint. */
  .hero { min-height: 0; }
  .hero-visual { display: none; }
  .hero-inner { justify-content: center; padding-bottom: 88px; }
  .hero-left { text-align: center; }
  .hero-cta { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-stats { margin: 0 auto; }
}

@media (max-width: 900px) {
  .hero-stats-row { padding: 0 16px 60px; }
  .hero-stats { padding: 20px 24px; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .stat { padding: 0 16px; }
}

@media (max-width: 600px) {
  .hero-stats .stat-divider { display: none; }
}