@property --boost {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* ==========================================
   HERO
   ========================================== */
.hero-section {
  --hero-pad: clamp(20px, 5.5vw, 96px);
  position: relative;
  z-index: 1000;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--darker-green);
  color: var(--white);
  overflow: hidden;
}

.hero-section::before {
  content: '';
  flex: 0 0 104px;
}

/* ---------- Background ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 62% at 76% 58%, rgba(198, 221, 83, 0.55) 0%, rgba(86, 150, 60, 0.38) 38%, rgba(4, 68, 52, 0) 72%),
    radial-gradient(60% 70% at 8% 100%, rgba(4, 68, 52, 0.9) 0%, rgba(4, 68, 52, 0) 70%),
    radial-gradient(40% 50% at 18% 6%, rgba(24, 104, 62, 0.45) 0%, rgba(24, 104, 62, 0) 70%),
    var(--darker-green);
}

.hero-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-bg-canvas.is-live {
  opacity: 1;
}

.hero-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: blur(13px);
  opacity: 0.62;
  translate: calc(var(--mx, 0) * var(--depth, 20) * 1px) calc(var(--my, 0) * var(--depth, 20) * 0.7px);
}

.hero-shape i {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, #b4d84a 0%, #6fae45 100%);
  border-radius: 6px;
}

.hero-shape i:nth-child(1) { inset: 0 0 0 38%; }
.hero-shape i:nth-child(2) { inset: 38% 0 0 0; }

.hero-shape-a {
  --depth: 34;
  width: clamp(110px, 12vw, 210px);
  aspect-ratio: 1;
  left: 64%;
  top: 9%;
  rotate: -24deg;
  animation: shapeDrift 14s ease-in-out infinite;
}

.hero-shape-b {
  --depth: 52;
  width: clamp(44px, 5vw, 84px);
  aspect-ratio: 1;
  left: 47%;
  bottom: 9%;
  rotate: 18deg;
  filter: blur(5px);
  animation: shapeDrift 11s ease-in-out -4s infinite reverse;
}

@keyframes shapeDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}

.hero-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  opacity: 0.32;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -0.55'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
  mix-blend-mode: soft-light;
  animation: grainShift 0.9s steps(5) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Copy ---------- */
.hero-inner {
  position: relative;
  z-index: 6;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--hero-pad) clamp(36px, 7dvh, 88px);
  pointer-events: none;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(780px, 54vw);
  pointer-events: none;
}

.hero-content > * {
  pointer-events: auto;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  margin-bottom: clamp(18px, 3.4dvh, 32px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.hero-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: statusPing 2.4s ease-out infinite;
}

@keyframes statusPing {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.hero-title {
  font-family: 'Clash Display Variable', 'Clash Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(40px, 6.4vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-bottom: clamp(18px, 3dvh, 30px);
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-title .letter {
  display: inline-block;
  font-variation-settings: 'wght' 260;
  animation:
    letterIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 26ms + 160ms) both,
    varWeight 11s ease-in-out calc(var(--i) * 0.34s + 0.5s) infinite;
  will-change: font-variation-settings;
}

@keyframes varWeight {
  0%, 100% { font-variation-settings: 'wght' 260; }
  50% { font-variation-settings: 'wght' 490; }
}

@keyframes letterIn {
  from { opacity: 0; transform: translateY(0.38em); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero-subtitle {
  max-width: 31em;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: clamp(28px, 5dvh, 52px);
  animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 56px;
  padding-left: 4px;
  animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ---------- CTA with halos ---------- */
.hero-cta {
  --halo-step: 11px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 9px 9px 9px 30px;
  border-radius: 999px;
  background: transparent;
  color: var(--darker-green);
  font-size: 19px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(1, 12, 5, 0.35);
  transition: box-shadow 0.6s ease;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--white);
  transition: background-color 0.35s ease;
}

.hero-cta-halos {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.hero-cta-halos span {
  position: absolute;
  inset:
    calc(var(--i) * var(--halo-step) * -1 * var(--gy, 1))
    calc(var(--i) * var(--halo-step) * -1 * var(--gx, 1));
  border-radius: 999px;
  border: 1px solid rgba(198, 221, 83, calc((0.34 - var(--i) * 0.04) * var(--boost)));
  background: linear-gradient(
    180deg,
    rgba(198, 221, 83, calc((0.2 - var(--i) * 0.024) * var(--boost))) 0%,
    rgba(120, 180, 70, calc((0.07 - var(--i) * 0.008) * var(--boost))) 100%
  );
  animation: haloBreath 5.2s ease-in-out calc(var(--i) * -0.5s) infinite;
  transition:
    inset 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 55ms),
    --boost 0.7s ease calc(var(--i) * 55ms);
}

@keyframes haloBreath {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.028); opacity: 0.6; }
}

.hero-cta-label {
  position: relative;
}

.hero-cta-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--darker-green);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, color 0.35s ease;
}

.hero-cta:hover::before,
.hero-cta:focus-visible::before {
  background: var(--accent);
}

.hero-cta:hover .hero-cta-halos span,
.hero-cta:focus-visible .hero-cta-halos span {
  --gx: 1.45;
  --gy: 3;
  --boost: 2.1;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  box-shadow: 0 0 70px rgba(198, 221, 83, 0.5), 0 14px 34px rgba(1, 12, 5, 0.35);
}

.hero-bg,
.hero-stage,
.hero-title,
.hero-subtitle,
.hero-status,
.hero-link {
  transition: filter 0.7s ease;
}

.hero-section:has(.hero-cta:hover) :is(.hero-bg, .hero-stage, .hero-title, .hero-subtitle, .hero-status, .hero-link),
.hero-section:has(.hero-cta:focus-visible) :is(.hero-bg, .hero-stage, .hero-title, .hero-subtitle, .hero-status, .hero-link) {
  filter: brightness(0.34) saturate(0.85);
}

.hero-cta:hover .hero-cta-arrow,
.hero-cta:focus-visible .hero-cta-arrow {
  background: var(--darker-green);
  color: var(--accent);
  transform: rotate(45deg);
}

.hero-cta:focus-visible,
.hero-link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 5px;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
  font-size: 17px;
  font-weight: 500;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Stage: portrait and chips ---------- */
.hero-stage {
  position: absolute;
  right: -2vw;
  bottom: 0;
  z-index: 2;
  height: min(88dvh, 66vw);
  aspect-ratio: 1358 / 1811;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  z-index: 0;
  left: 6%;
  top: 14%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(214, 236, 96, 0.95) 0%, rgba(160, 205, 72, 0.7) 34%, rgba(60, 130, 56, 0.35) 62%, rgba(4, 68, 52, 0) 72%);
  filter: blur(26px);
  opacity: 0.85;
  --depth: 14;
  translate: calc(var(--mx, 0) * var(--depth) * 1px) calc(var(--my, 0) * var(--depth) * 0.7px);
  animation: orbIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes orbIn {
  from { opacity: 0; scale: 0.82; }
  to { opacity: 0.85; scale: 1; }
}

.hero-portrait {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  --depth: -8;
  translate: calc(var(--mx, 0) * var(--depth) * 1px) calc(var(--my, 0) * var(--depth) * 0.6px);
  animation: portraitIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes portraitIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

/* Glass chips */
.hero-chip {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 12px 30px rgba(1, 12, 5, 0.28);
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--white);
  translate: calc(var(--mx, 0) * var(--depth) * 1px) calc(var(--my, 0) * var(--depth) * 0.7px);
  animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 1.2s) both;
}

.hero-chip::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
  rotate: 45deg;
  flex-shrink: 0;
}

.hero-chip-1 { --depth: 22; --delay: 1.0s; left: -20%; top: 16%; }
.hero-chip-2 { --depth: 30; --delay: 1.15s; right: 9%; top: 36%; }
.hero-chip-3 { --depth: 18; --delay: 1.3s; left: -10%; top: 56%; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-chip-1 { display: none; }
  .hero-chip-3 { left: 2%; top: 58%; }
}

@media (max-width: 860px) {
  .hero-section::before {
    flex-basis: 92px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-inner {
    align-items: flex-start;
    padding-top: clamp(8px, 2dvh, 24px);
    padding-bottom: 0;
  }

  .hero-title {
    font-size: clamp(36px, 10.6vw, 72px);
  }

  .hero-subtitle {
    max-width: 26em;
    font-size: clamp(15px, 4.1vw, 19px);
    margin-bottom: 24px;
  }

  .hero-actions {
    gap: 14px 16px;
    padding-left: 0;
  }

  .hero-cta {
    min-height: 56px;
    font-size: 16px;
    padding: 6px 6px 6px 20px;
    gap: 14px;
    --halo-step: 5px;
  }

  .hero-cta-arrow {
    width: 42px;
    height: 42px;
    font-size: 19px;
  }

  .hero-link {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  .hero-stage {
    right: -18vw;
    height: min(50dvh, 118vw);
    z-index: 1;
  }

  .hero-chip {
    padding: 7px 12px 7px 10px;
    font-size: 12px;
  }

  .hero-chip-1 { display: inline-flex; left: 0; top: 22%; }
  .hero-chip-2 { display: none; }
  .hero-chip-3 { display: none; }

}

@media (max-width: 860px) and (max-height: 700px) {
  .hero-stage { height: min(44dvh, 118vw); }
  .hero-subtitle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grain,
  .hero-shape,
  .hero-status-dot::after,
  .hero-cta-halos span,
  .hero-title .letter {
    animation: none !important;
    font-variation-settings: 'wght' 460;
  }

  .hero-status,
  .hero-subtitle,
  .hero-actions,
  .hero-title .letter,
  .hero-orb,
  .hero-portrait,
  .hero-chip {
    animation: none !important;
    opacity: 1;
    filter: none;
  }

  .hero-orb { opacity: 0.85; }
}

@media (max-width: 520px) {
  .hero-chip { display: none !important; }
}