/* Home hero (2026 redesign). Prefix: agh-hero-. Tokens: css/site/tokens.css
   Background = soft aurora glows + thin solid swoosh lines; depth comes from glow, glass and motion, not texture. */
.agh-hero {
  --agh-hero-glass: rgba(255, 255, 255, .72);
  --agh-hero-glass-line: rgba(5, 102, 79, .14);
  --agh-hero-ring: rgba(5, 102, 79, .2);
  --agh-hero-sheen-tail: rgba(18, 163, 122, .3);
  --agh-hero-sheen-head: #12A37A;
  --agh-hero-line-a: #12A37A;
  --agh-hero-line-b: #05664F;
  --agh-hero-cap: #0D0F10;
  --agh-hero-cut: #FFFFFF;
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: center;
  padding: clamp(40px, 7vw, 72px) 0 clamp(72px, 9vw, 96px);
  font-family: var(--ag-font); color: var(--ag-text);
  background:
    radial-gradient(70% 60% at 6% 0%, #DCF6EA 0%, rgba(220, 246, 234, 0) 70%),
    radial-gradient(55% 55% at 96% 12%, #E4F8EF 0%, rgba(228, 248, 239, 0) 70%),
    linear-gradient(180deg, #EFFAF5 0%, #F6FCF9 58%, var(--ag-bg) 100%);
}
html[data-theme="dark"] .agh-hero {
  --agh-hero-glass: rgba(17, 34, 29, .62);
  --agh-hero-glass-line: rgba(110, 231, 183, .18);
  --agh-hero-ring: rgba(110, 231, 183, .18);
  --agh-hero-sheen-tail: rgba(52, 211, 153, .3);
  --agh-hero-sheen-head: #6EE7B7;
  --agh-hero-line-a: #6EE7B7;
  --agh-hero-line-b: #34D399;
  --agh-hero-cap: #ECF7F2;
  --agh-hero-cut: #0B1A15;
  background:
    radial-gradient(60% 55% at 8% 2%, rgba(16, 185, 129, .16) 0%, rgba(16, 185, 129, 0) 70%),
    radial-gradient(50% 50% at 92% 18%, rgba(52, 211, 153, .1) 0%, rgba(52, 211, 153, 0) 70%),
    linear-gradient(180deg, #04100C 0%, #061410 60%, var(--ag-bg) 100%);
}
@media (min-width: 992px) { .agh-hero { min-height: min(92vh, 860px); } }

/* ---------- Background: aurora glows + swoosh lines ---------- */
.agh-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.agh-hero-bg::after { /* soft hand-off into the next section */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6%;
  background: linear-gradient(180deg, transparent, var(--ag-bg));
}

/* Aurora: very large, heavily blurred glows that drift and morph (transform only) */
.agh-hero-aurora { position: absolute; inset: 0; }
.agh-hero-glow {
  position: absolute; display: block; border-radius: 50%; filter: blur(44px);
  animation: agh-hero-aurora-a 26s ease-in-out infinite alternate;
}
.agh-hero-glow--1 {
  width: max(60vw, 460px); aspect-ratio: 1.45; left: -16%; top: -26%;
  background: radial-gradient(closest-side, rgba(167, 243, 208, .92), rgba(167, 243, 208, .36) 55%, rgba(167, 243, 208, 0));
}
.agh-hero-glow--2 {
  width: max(50vw, 400px); aspect-ratio: 1.1; right: -14%; top: -6%;
  background: radial-gradient(closest-side, rgba(110, 231, 183, .48), rgba(110, 231, 183, .16) 55%, rgba(110, 231, 183, 0));
  animation-name: agh-hero-aurora-b; animation-duration: 32s; animation-delay: -6s;
}
.agh-hero-glow--3 {
  width: max(38vw, 320px); aspect-ratio: 1.6; left: 34%; bottom: -12%;
  background: radial-gradient(closest-side, rgba(245, 181, 63, .24), rgba(245, 181, 63, .08) 55%, rgba(245, 181, 63, 0));
  animation-name: agh-hero-aurora-c; animation-duration: 38s; animation-delay: -12s;
}
html[data-theme="dark"] .agh-hero-glow { mix-blend-mode: screen; }
html[data-theme="dark"] .agh-hero-glow--1 { background: radial-gradient(closest-side, rgba(16, 185, 129, .42), rgba(16, 185, 129, .14) 55%, rgba(16, 185, 129, 0)); }
html[data-theme="dark"] .agh-hero-glow--2 { background: radial-gradient(closest-side, rgba(52, 211, 153, .3), rgba(52, 211, 153, .1) 55%, rgba(52, 211, 153, 0)); }
html[data-theme="dark"] .agh-hero-glow--3 { background: radial-gradient(closest-side, rgba(245, 181, 63, .1), rgba(245, 181, 63, .03) 55%, rgba(245, 181, 63, 0)); }
@keyframes agh-hero-aurora-a {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
  50% { transform: translate3d(8%, 6%, 0) rotate(10deg) scale(1.12, .9); }
  100% { transform: translate3d(-4%, 10%, 0) rotate(-6deg) scale(.94, 1.08); }
}
@keyframes agh-hero-aurora-b {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
  50% { transform: translate3d(-10%, 8%, 0) rotate(-12deg) scale(.9, 1.1); }
  100% { transform: translate3d(-4%, -6%, 0) rotate(8deg) scale(1.1, .94); }
}
@keyframes agh-hero-aurora-c {
  0% { transform: translate3d(0, 0, 0) scale(1, 1); }
  50% { transform: translate3d(14%, -10%, 0) scale(1.15, .9); }
  100% { transform: translate3d(-8%, -4%, 0) scale(.92, 1.06); }
}

/* Swoosh lines: thin solid curves with a green gradient stroke, fading in and drifting slowly */
.agh-hero-lines { position: absolute; inset: 0; }
.agh-hero-line {
  position: absolute; left: -5%; top: 0; width: 110%; height: 100%; overflow: visible; opacity: .3;
  animation: agh-hero-line-in 2.2s var(--ag-ease) .2s both, agh-hero-drift-a 24s ease-in-out infinite alternate;
}
.agh-hero-line path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.agh-hero-line--2 { opacity: .22; animation-name: agh-hero-line-in, agh-hero-drift-b; animation-duration: 2.2s, 30s; animation-delay: .45s, -8s; }
.agh-hero-line--3 { opacity: .18; animation-name: agh-hero-line-in, agh-hero-drift-c; animation-duration: 2.2s, 36s; animation-delay: .7s, -16s; }
.agh-hero-line--2 path, .agh-hero-line--3 path { stroke-width: 1.5; }
.agh-hero-ls-fade { stop-color: var(--agh-hero-line-a); stop-opacity: 0; }
.agh-hero-ls-a { stop-color: var(--agh-hero-line-a); }
.agh-hero-ls-b { stop-color: var(--agh-hero-line-b); }
html[data-theme="dark"] .agh-hero-line { opacity: .35; filter: drop-shadow(0 0 5px rgba(52, 211, 153, .45)); }
html[data-theme="dark"] .agh-hero-line--2 { opacity: .28; }
html[data-theme="dark"] .agh-hero-line--3 { opacity: .25; }
@keyframes agh-hero-line-in { from { opacity: 0; } }
@keyframes agh-hero-drift-a { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-2%, 3%, 0) rotate(-1.2deg); } }
@keyframes agh-hero-drift-b { from { transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1); } to { transform: translate3d(2%, -2.5%, 0) rotate(1deg) scaleY(1.08); } }
@keyframes agh-hero-drift-c { from { transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1); } to { transform: translate3d(-1.5%, -3%, 0) rotate(1.5deg) scaleY(.92); } }

/* ---------- Copy ---------- */
.agh-hero-inner { position: relative; z-index: 1; }
.agh-hero-badge {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--ag-ink);
  background: var(--agh-hero-glass); border: 1px solid var(--agh-hero-glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(2, 44, 34, .06);
}
.agh-hero-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: agh-hero-sheen 6s ease-in-out infinite 2s;
}
html[data-theme="dark"] .agh-hero-badge::after { background: linear-gradient(90deg, transparent, rgba(110, 231, 183, .18), transparent); }
.agh-hero-badge-ico {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ag-gold); background: rgba(245, 181, 63, .16); font-size: .9rem;
}

.agh-hero .agh-hero-title {
  font-family: var(--ag-font); font-weight: 800; color: var(--ag-ink);
  font-size: clamp(1.85rem, 1rem + 4.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.028em;
  margin: 0 0 18px;
}
@media (min-width: 768px) { .agh-hero .agh-hero-title { font-size: 3.1rem; } }
@media (min-width: 992px) { .agh-hero .agh-hero-title { font-size: 2.7rem; } }
@media (min-width: 1200px) { .agh-hero .agh-hero-title { font-size: 3.2rem; } }
@media (min-width: 1400px) { .agh-hero .agh-hero-title { font-size: 3.55rem; } }

/* Typed word: the longest word reserves the width so the line never jumps */
.agh-hero-typed-wrap { display: grid; justify-items: start; } /* own line: no gap or jump while words are typed */
.agh-hero-typed-wrap::before { content: "Engineering"; grid-area: 1 / 1; visibility: hidden; padding-right: .16em; }
.agh-hero-typed { grid-area: 1 / 1; color: var(--ag-brand); white-space: nowrap; }
.agh-hero-typed.ag-typing::after {
  content: ""; display: inline-block; width: max(3px, .07em); height: .82em; margin-left: .06em;
  vertical-align: -.04em; border-radius: 2px; background: var(--ag-brand-mid);
  animation: agh-hero-caret 1s step-end infinite;
}
@keyframes agh-hero-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.agh-hero-mark { position: relative; display: inline-block; white-space: nowrap; }
.agh-hero-swoosh {
  position: absolute; left: 0; bottom: -.16em; width: 100%; height: .3em; overflow: visible;
  transform-origin: 0 50%; transform: scaleX(0); animation: agh-hero-draw 1.1s var(--ag-ease) .9s forwards;
}
.agh-hero-swoosh path { fill: none; stroke: var(--ag-brand-mid); stroke-width: 7; stroke-linecap: round; opacity: .55; }
@keyframes agh-hero-draw { to { transform: scaleX(1); } }

.agh-hero-sub { font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.75; color: var(--ag-text); max-width: 34rem; margin: 0 0 28px; }

.agh-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.agh-hero .agh-hero-btn { padding: 15px 28px; font-size: 1rem; }
.agh-hero-btn-main { position: relative; overflow: hidden; }
.agh-hero-btn-main::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: agh-hero-sheen 4.5s ease-in-out infinite 1.6s;
}
.agh-hero-btn-main i { transition: transform .3s var(--ag-ease); }
.agh-hero-btn-main:hover i { transform: translateX(4px); }
@keyframes agh-hero-sheen { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }

.agh-hero .agh-hero-btn-glass {
  color: var(--ag-ink); background: var(--agh-hero-glass); border-color: var(--agh-hero-glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(2, 44, 34, .06);
}
.agh-hero .agh-hero-btn-glass i { color: var(--ag-brand); }
.agh-hero .agh-hero-btn-glass:hover { color: var(--ag-brand); border-color: var(--ag-brand); }
.agh-hero .agh-hero-btn-glass:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }

.agh-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 30px; }
.agh-hero-chips-label { font-size: .82rem; font-weight: 500; color: var(--ag-muted); margin-right: 2px; }
.agh-hero .agh-hero-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--ag-brand); text-decoration: none;
  background: var(--ag-brand-soft); border: 1px solid transparent;
  transition: transform .3s var(--ag-ease), background-color .3s, border-color .3s, color .3s;
}
.agh-hero .agh-hero-chip:hover { transform: translateY(-2px); border-color: var(--ag-brand); color: var(--ag-brand-strong); }
.agh-hero .agh-hero-chip:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 2px; }

.agh-hero-stats {
  position: relative; list-style: none; margin: 0; padding: 20px 0 0;
  display: flex; flex-wrap: wrap; gap: 14px 28px; max-width: 36rem;
}
.agh-hero-stats::before { /* solid hairline with a short brand accent */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--ag-brand-mid) 0%, var(--ag-line) 32%, var(--ag-line) 78%, transparent 100%);
}
.agh-hero-stat { display: flex; align-items: center; gap: 10px; }
.agh-hero-stat-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--ag-brand); background: var(--ag-brand-soft); font-size: 1.05rem;
}
.agh-hero-stat-txt { display: flex; flex-direction: column; line-height: 1.2; }
.agh-hero-stat-txt strong { font-size: 1.25rem; font-weight: 700; color: var(--ag-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.agh-hero-stat-txt small { font-size: .78rem; color: var(--ag-muted); font-weight: 500; }

/* ---------- Visual ---------- */
.agh-hero-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.agh-hero-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; container-type: inline-size; }

.agh-hero-orbit { position: absolute; left: 14%; top: 4%; width: 80%; aspect-ratio: 1; }
.agh-hero-ring { position: absolute; border-radius: 50%; border: 1px solid var(--agh-hero-ring); }
/* Light travelling around a ring: a conic sheen masked to a thin band over the 1px line */
.agh-hero-ring::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 190deg, var(--agh-hero-sheen-tail) 290deg, var(--agh-hero-sheen-head) 346deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.4px), #000 calc(100% - .8px), transparent);
  mask: radial-gradient(closest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.4px), #000 calc(100% - .8px), transparent);
  animation: ag-spin-slow 12s linear infinite;
}
.agh-hero-ring--outer { inset: 0; animation: ag-spin-slow 60s linear infinite; }
.agh-hero-ring--inner {
  inset: 19%;
  background: radial-gradient(circle, rgba(18, 163, 122, .10), rgba(18, 163, 122, 0) 70%);
}
.agh-hero-ring--inner::before { /* mirrored sheen, travelling the other way */
  background: conic-gradient(from 0deg, transparent 0deg, var(--agh-hero-sheen-head) 14deg, var(--agh-hero-sheen-tail) 70deg, transparent 170deg 360deg);
  opacity: .75; animation-duration: 16s; animation-direction: reverse;
}
.agh-hero-orb {
  position: absolute; left: calc(50% + 50% * sin(var(--a))); top: calc(50% - 50% * cos(var(--a)));
  translate: -50% -50%; display: grid; place-items: center;
  width: 11.5cqi; height: 11.5cqi; min-width: 38px; min-height: 38px; border-radius: 30%;
  font-size: max(15px, 4.4cqi); color: var(--ag-brand);
  background: var(--ag-surface); border: 1px solid var(--agh-hero-glass-line);
  box-shadow: 0 10px 24px rgba(2, 44, 34, .10);
  animation: ag-spin-slow 60s linear infinite reverse;
}
html[data-theme="dark"] .agh-hero-orb { background: #10221C; box-shadow: 0 0 22px rgba(52, 211, 153, .14); }

.agh-hero-emblem {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #FFFFFF 0%, #EEF9F4 60%, #DDF3E9 100%);
  border: 1px solid var(--agh-hero-glass-line);
  box-shadow: 0 24px 60px rgba(5, 102, 79, .22), inset 0 2px 0 #fff;
  animation: ag-float 7s ease-in-out infinite;
}
.agh-hero-emblem::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  animation: ag-pulse-ring 3.2s ease-out infinite;
}
html[data-theme="dark"] .agh-hero-emblem {
  background: radial-gradient(circle at 32% 26%, #1C3D33 0%, #0F241E 60%, #0B1A15 100%);
  box-shadow: 0 0 70px rgba(52, 211, 153, .28), inset 0 1px 0 rgba(110, 231, 183, .25);
}
.agh-hero-cap { width: 74%; height: 74%; overflow: visible; }
.agh-hero-cap-fill { fill: var(--agh-hero-cap); }
.agh-hero-cap-cut { fill: var(--agh-hero-cut); }
.agh-hero-cap-tassel { fill: none; stroke: var(--agh-hero-cap); stroke-width: 2.4; stroke-linecap: round; }
.agh-hero-cap-swoosh { fill: none; stroke: url(#agh-hero-sw); stroke-width: 6; stroke-linecap: round; }
html[data-theme="dark"] .agh-hero-cap-swoosh { stroke: #34D399; }

/* Journey card */
.agh-hero-card {
  position: absolute; left: 0; bottom: 3%; width: 60%; z-index: 2;
  padding: max(14px, 3.6cqi); border-radius: var(--ag-radius);
  background: var(--agh-hero-glass); border: 1px solid var(--agh-hero-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--ag-shadow-lg); overflow: hidden;
}
.agh-hero-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: radial-gradient(260px circle at var(--ag-mx, 80%) var(--ag-my, 0%), var(--ag-glow), transparent 55%);
}
.agh-hero-card > * { position: relative; }
.agh-hero-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: max(10px, 2.6cqi); }
.agh-hero-card-ico {
  flex: none; display: grid; place-items: center; width: max(32px, 7.4cqi); height: max(32px, 7.4cqi); border-radius: 12px;
  color: #fff; background: var(--ag-grad); font-size: max(14px, 3.4cqi); box-shadow: 0 8px 18px rgba(5, 102, 79, .3);
}
.agh-hero-card-titles { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.agh-hero-card-title { font-weight: 700; color: var(--ag-ink); font-size: max(12.5px, 2.9cqi); }
.agh-hero-card-sub { font-size: max(11px, 2.25cqi); color: var(--ag-muted); }
.agh-hero-steps { list-style: none; margin: 0 0 max(10px, 2.6cqi); padding: 0; display: grid; gap: max(6px, 1.6cqi); }
.agh-hero-step {
  display: flex; align-items: center; gap: 9px; font-size: max(11.5px, 2.5cqi); font-weight: 600; color: var(--ag-ink);
  opacity: 0; transform: translateX(-10px); animation: agh-hero-in .6s var(--ag-ease) forwards;
}
.agh-hero-step:nth-child(1) { animation-delay: .9s; }
.agh-hero-step:nth-child(2) { animation-delay: 1.1s; }
.agh-hero-step:nth-child(3) { animation-delay: 1.3s; }
.agh-hero-step-mark {
  flex: none; display: grid; place-items: center; width: max(20px, 4.4cqi); height: max(20px, 4.4cqi); border-radius: 50%;
  font-size: max(11px, 2.4cqi); color: #fff; background: var(--ag-brand-mid);
}
.agh-hero-step.is-active { color: var(--ag-brand); }
.agh-hero-step.is-active .agh-hero-step-mark { color: var(--ag-brand); background: var(--ag-brand-soft); border: 1.5px solid var(--ag-brand-mid); animation: ag-pulse-ring 2.4s ease-out infinite; }
html[data-theme="dark"] .agh-hero-step-mark { color: #04221A; }
html[data-theme="dark"] .agh-hero-step.is-active .agh-hero-step-mark { color: var(--ag-brand); }
@keyframes agh-hero-in { to { opacity: 1; transform: none; } }

.agh-hero-progress { position: relative; height: 8px; border-radius: 999px; background: var(--ag-brand-soft); overflow: hidden; }
.agh-hero-progress-bar {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, #05664F, #12A37A, #6EE7B7);
  transform-origin: 0 50%; transform: scaleX(.04); animation: agh-hero-fill 1.8s var(--ag-ease) 1.2s forwards;
}
.agh-hero-progress::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: agh-hero-sheen 3.6s ease-in-out infinite 3s;
}
@keyframes agh-hero-fill { to { transform: scaleX(.72); } }
.agh-hero-progress-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: max(10.5px, 2.1cqi); font-weight: 500; color: var(--ag-muted); }

/* Floating chips */
.agh-hero-float-wrap { position: absolute; z-index: 3; }
.agh-hero-float-wrap--1 { left: 0; top: 7%; }
.agh-hero-float-wrap--2 { right: 0; top: 44%; }
.agh-hero-float-wrap--3 { right: 4%; bottom: 7%; }
.agh-hero-float {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: max(6px, 1.4cqi) max(12px, 2.6cqi) max(6px, 1.4cqi) max(6px, 1.4cqi); border-radius: 999px;
  font-size: max(11.5px, 2.45cqi); font-weight: 600; color: var(--ag-ink);
  background: var(--agh-hero-glass); border: 1px solid var(--agh-hero-glass-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(2, 44, 34, .12);
  animation: ag-float 6s ease-in-out infinite;
}
.agh-hero-float-wrap--2 .agh-hero-float { animation-delay: -2s; animation-duration: 7s; }
.agh-hero-float-wrap--3 .agh-hero-float { animation-delay: -4s; animation-duration: 6.5s; }
.agh-hero-float-ico {
  display: grid; place-items: center; width: max(24px, 5.4cqi); height: max(24px, 5.4cqi); border-radius: 50%;
  color: #fff; background: var(--ag-grad); font-size: max(11px, 2.5cqi);
}
.agh-hero-float-ico--gold { background: linear-gradient(135deg, #F5B53F, #E08E0B); }
html[data-theme="dark"] .agh-hero-float, html[data-theme="dark"] .agh-hero-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(110, 231, 183, .04); }

/* Scroll cue: a hairline with light flowing down it */
.agh-hero-scroll {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 64px; border-radius: 12px; text-decoration: none;
}
.agh-hero-scroll:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 2px; }
.agh-hero-scroll-line {
  position: relative; display: block; width: 1.5px; height: 46px; border-radius: 2px; overflow: hidden;
  background: var(--agh-hero-ring); transition: background-color .3s;
}
.agh-hero-scroll-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit;
  background: linear-gradient(180deg, transparent, var(--ag-brand));
  transform: translateY(-100%); animation: agh-hero-flow 2.4s var(--ag-ease) infinite;
}
.agh-hero-scroll:hover .agh-hero-scroll-line { background: var(--agh-hero-sheen-tail); }
@keyframes agh-hero-flow { 0% { transform: translateY(-100%); } 75%, 100% { transform: translateY(190%); } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .agh-hero-copy { text-align: center; }
  .agh-hero-typed-wrap { justify-items: center; }
  .agh-hero-sub, .agh-hero-stats { margin-inline: auto; }
  .agh-hero-ctas, .agh-hero-chips, .agh-hero-stats { justify-content: center; }
  .agh-hero-stats::before { background: linear-gradient(90deg, transparent, var(--ag-line) 18%, var(--ag-brand-mid) 50%, var(--ag-line) 82%, transparent); }
  .agh-hero-visual { max-width: 460px; }
  .agh-hero-scroll { display: none; }
  .agh-hero-glow--2 { top: 46%; right: -30%; }
  .agh-hero-line { left: -60%; width: 220%; } /* keep the curves' natural proportions on tall, narrow screens */
}
@media (max-width: 575.98px) {
  .agh-hero-ctas .agh-hero-btn { flex: 1 1 100%; }
  .agh-hero-stats { gap: 12px 18px; }
  .agh-hero-stat { flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 88px; }
  .agh-hero-stat-txt { align-items: center; }
  .agh-hero-stat-txt strong { font-size: 1.1rem; }
  .agh-hero-card { width: 74%; bottom: 2%; }
  .agh-hero-orbit { left: 10%; top: 2%; width: 84%; }
  .agh-hero-float-wrap--1 { top: 2%; }
  .agh-hero-float-wrap--2 { top: 40%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .agh-hero *, .agh-hero *::before, .agh-hero *::after { animation: none !important; transition: none !important; }
  .agh-hero-swoosh { transform: none; }
  .agh-hero-step { opacity: 1; transform: none; }
  .agh-hero-progress-bar { transform: scaleX(.72); }
  .agh-hero-scroll-line::after { transform: translateY(45%); }
}

/* Older browsers without CSS trig functions (sin/cos) cannot place the orbit icons: hide them instead of piling them up */
@supports not (left: calc(1px * sin(1deg))) { .agh-hero-orb { display: none; } }

/* Browsers without container query units (Safari < 16, Chrome < 105) drop every rule that uses cqi:
   give them the same layout at fixed sizes (the minimums used in the max() expressions above). */
@supports not (width: 1cqi) {
  .agh-hero-card { padding: 16px; }
  .agh-hero-card-head { margin-bottom: 12px; }
  .agh-hero-card-ico { width: 36px; height: 36px; font-size: 15px; }
  .agh-hero-card-title { font-size: 14px; }
  .agh-hero-card-sub { font-size: 11.5px; }
  .agh-hero-steps { margin: 0 0 12px; gap: 8px; }
  .agh-hero-step { font-size: 12.5px; }
  .agh-hero-step-mark { width: 22px; height: 22px; font-size: 11.5px; }
  .agh-hero-progress-meta { font-size: 11px; }
  .agh-hero-float { padding: 7px 14px 7px 7px; font-size: 12.5px; }
  .agh-hero-float-ico { width: 26px; height: 26px; font-size: 12px; }
}