/* =============================================================
   hero.css — Home hero & compact page heroes
   ============================================================= */
.hero{
  position:relative;min-height:min(96vh,920px);display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + var(--space-48));padding-bottom:var(--space-96);
  overflow:hidden;background:var(--grad-hero);color:#fff;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,14,17,.94) 0%,rgba(11,14,17,.8) 40%,rgba(11,14,17,.5) 100%),
    linear-gradient(0deg,rgba(11,14,17,.6),transparent 60%)}
.hero__glow{position:absolute;z-index:0;width:60vw;height:60vw;max-width:820px;max-height:820px;
  right:-12vw;top:-10vw;border-radius:50%;
  background:radial-gradient(circle,rgba(36,138,84,.40),transparent 62%);
  filter:blur(20px);animation:heroGlow 14s var(--ease-in-out) infinite alternate}
/* Two-column hero: content left, animated visual right */
.hero__grid{position:relative;z-index:1;width:100%;display:grid;
  grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__content{text-align:left}
.hero__title{color:#fff;margin-block:var(--space-16);max-width:15ch}
.hero .lead{color:rgba(244,246,248,.82);max-width:52ch}

/* ---- Animated orbit visual ---- */
.hero__visual{display:flex;align-items:center;justify-content:center}
.orbit{position:relative;width:min(540px,100%);aspect-ratio:1;--r:232px}
.orbit__glow{position:absolute;inset:24%;border-radius:50%;
  background:radial-gradient(circle,rgba(36,138,84,.55),transparent 70%);
  filter:blur(38px);animation:orbitPulse 5s var(--ease-in-out) infinite}
.orbit__ring{position:absolute;border-radius:50%}
.orbit__ring--1{inset:0;border:1px dashed rgba(127,200,160,.35);animation:spin 46s linear infinite}
.orbit__ring--2{inset:16%;border:1px solid rgba(255,255,255,.09);animation:spin 34s linear infinite reverse}
.orbit__core{position:absolute;inset:33%;border-radius:28px;
  background:rgba(18,33,26,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);text-align:center}
.orbit__core svg{width:46px;height:46px;color:#7FC8A0;animation:spin 12s linear infinite}
.orbit__core-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(244,246,248,.82);line-height:1.5}
/* Chips evenly distributed on a circle via --a angle + --r radius */
.orbit__chip{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))}
.orbit__chip-in{display:inline-flex;align-items:center;gap:var(--space-8);
  padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);
  background:rgba(11,14,17,.72);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-weight:var(--fw-semibold);font-size:.82rem;box-shadow:var(--shadow-md);
  white-space:nowrap;animation:orbitFloat 5.5s var(--ease-in-out) infinite;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}
.orbit__chip:nth-child(odd) .orbit__chip-in{animation-delay:.8s}
.orbit__chip:nth-child(3n) .orbit__chip-in{animation-delay:1.6s}
.orbit__chip-in:hover{transform:scale(1.08);border-color:var(--accent-metal)}
.orbit__chip-in i{width:8px;height:8px;border-radius:50%;background:var(--accent-metal)}
.orbit__chip-in i.i-steel{background:var(--accent)}
.hero__scroll{position:absolute;left:50%;bottom:var(--space-32);transform:translateX(-50%);
  z-index:1;color:rgba(255,255,255,.6);font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:var(--space-8)}
.hero__scroll span{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:scrollHint 2.2s var(--ease-in-out) infinite}
/* Hide scroll hint when the hero is short enough that content nears the bottom */
@media (max-height:820px),(max-width:768px){.hero__scroll{display:none}}

/* Compact page hero — premium banner */
.page-hero{
  position:relative;background:var(--grad-hero);color:#fff;
  padding-top:calc(var(--nav-h) + var(--space-80));padding-bottom:var(--space-96);overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* subtle blueprint grid */
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000,transparent 75%)}
.page-hero__glow{position:absolute;right:-8vw;top:-8vw;width:46vw;height:46vw;max-width:640px;max-height:640px;
  border-radius:50%;background:radial-gradient(circle,rgba(36,138,84,.40),transparent 62%);filter:blur(20px);
  animation:heroGlow 16s var(--ease-in-out) infinite alternate}
.page-hero__inner{position:relative;z-index:1;max-width:none;text-align:left}
.page-hero .eyebrow{margin-inline:0}
.page-hero h1{color:#fff;margin-top:var(--space-12);max-width:18ch}
.page-hero .lead{color:rgba(244,246,248,.82);margin-top:var(--space-16);max-width:56ch}
/* accent underline beneath the banner heading */
.page-hero h1::after{content:"";display:block;width:64px;height:4px;margin-top:var(--space-24);
  border-radius:var(--radius-pill);background:var(--grad-steel)}

/* Inner-page banner background image */
.page-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.2}
.page-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,17,.72) 0%,rgba(11,14,17,.88) 100%)}

/* Eco/duotone hero variant */
.page-hero--eco{background:linear-gradient(160deg,#0B0E11 0%,#12211A 50%,#0F3D28 150%)}
.page-hero--eco h1::after{background:var(--grad-metal)}