/* Hero design-principles manifesto pass.
   Refines the existing circular widget and its 12 ambient states into a more distinct,
   layered and premium manifesto without rebuilding the structure from scratch. */

.home-hero {
  --hero-mode-color: #FFD76A;
  --hero-mode-rgb: 255, 215, 106;
}

.home-hero[data-hero-theme="yellow"]  { --hero-mode-color: #FFD76A; --hero-mode-rgb: 255, 215, 106; }
.home-hero[data-hero-theme="gold"]    { --hero-mode-color: #FFB84A; --hero-mode-rgb: 255, 184, 74; }
.home-hero[data-hero-theme="orange"]  { --hero-mode-color: #FF9138; --hero-mode-rgb: 255, 145, 56; }
.home-hero[data-hero-theme="red"]     { --hero-mode-color: #FF5B62; --hero-mode-rgb: 255, 91, 98; }
.home-hero[data-hero-theme="magenta"] { --hero-mode-color: #F248C7; --hero-mode-rgb: 242, 72, 199; }
.home-hero[data-hero-theme="purple"]  { --hero-mode-color: #8B63FF; --hero-mode-rgb: 139, 99, 255; }
.home-hero[data-hero-theme="indigo"]  { --hero-mode-color: #5866FF; --hero-mode-rgb: 88, 102, 255; }
.home-hero[data-hero-theme="blue"]    { --hero-mode-color: #39A0FF; --hero-mode-rgb: 57, 160, 255; }
.home-hero[data-hero-theme="cyan"]    { --hero-mode-color: #2ED8FF; --hero-mode-rgb: 46, 216, 255; }
.home-hero[data-hero-theme="teal"]    { --hero-mode-color: #28D3B5; --hero-mode-rgb: 40, 211, 181; }
.home-hero[data-hero-theme="green"]   { --hero-mode-color: #58E56F; --hero-mode-rgb: 88, 229, 111; }
.home-hero[data-hero-theme="lime"]    { --hero-mode-color: #C7F14A; --hero-mode-rgb: 199, 241, 74; }

.home-hero .ambient-layer--yellow  { --theme-rgb: 255, 215, 106; }
.home-hero .ambient-layer--gold    { --theme-rgb: 255, 184, 74; }
.home-hero .ambient-layer--orange  { --theme-rgb: 255, 145, 56; }
.home-hero .ambient-layer--red     { --theme-rgb: 255, 91, 98; }
.home-hero .ambient-layer--magenta { --theme-rgb: 242, 72, 199; }
.home-hero .ambient-layer--purple  { --theme-rgb: 139, 99, 255; }
.home-hero .ambient-layer--indigo  { --theme-rgb: 88, 102, 255; }
.home-hero .ambient-layer--blue    { --theme-rgb: 57, 160, 255; }
.home-hero .ambient-layer--cyan    { --theme-rgb: 46, 216, 255; }
.home-hero .ambient-layer--teal    { --theme-rgb: 40, 211, 181; }
.home-hero .ambient-layer--green   { --theme-rgb: 88, 229, 111; }
.home-hero .ambient-layer--lime    { --theme-rgb: 199, 241, 74; }

/* Core widget polish */
.home-hero .hero-radial-widget {
  --orbit: clamp(110px, 15.8vw, 166px) !important;
  --hub-size: clamp(130px, 14.4vw, 180px) !important;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,0.36));
}

.home-hero .hero-radial-widget__core {
  width: var(--hub-size) !important;
  min-width: var(--hub-size) !important;
  height: var(--hub-size) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: clamp(0.22rem, 0.6vw, 0.34rem) !important;
  padding: clamp(1rem, 1.5vw, 1.25rem) !important;
  text-align: center !important;
  border: 1px solid rgba(var(--hero-mode-rgb), 0.34) !important;
  background:
    radial-gradient(circle at 34% 21%, rgba(255,255,255,0.28), transparent 18%),
    radial-gradient(circle at 52% 48%, rgba(var(--hero-mode-rgb), 0.18), transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.052) 0 4deg, transparent 5deg 16deg),
    linear-gradient(145deg, rgba(38,45,56,0.96), rgba(10,14,21,0.98) 62%, rgba(34,40,50,0.92)) !important;
  box-shadow:
    0 26px 52px rgba(0,0,0,0.54),
    0 0 0 9px rgba(var(--hero-mode-rgb),0.05),
    0 0 58px rgba(var(--hero-mode-rgb),0.18),
    inset 0 1px 1px rgba(255,255,255,0.26),
    inset 0 -22px 36px rgba(0,0,0,0.42) !important;
}

.home-hero .hero-radial-widget__core::before {
  border-color: rgba(var(--hero-mode-rgb), 0.28) !important;
  box-shadow: inset 0 0 26px rgba(var(--hero-mode-rgb), 0.15) !important;
}

.home-hero .hero-radial-widget__core::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.34), transparent 18%),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,0.09) 46%, transparent 58% 100%) !important;
  opacity: 0.72 !important;
}

.home-hero .hero-radial-widget__label,
.home-hero .hero-radial-widget__word,
.home-hero .hero-radial-widget__note {
  position: relative;
  z-index: 3;
  display: block;
  margin: 0;
  max-width: 12.5ch;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.home-hero .hero-radial-widget__label {
  font-size: clamp(0.58rem, 0.85vw, 0.72rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(247,242,232,0.68) !important;
  font-weight: 800 !important;
}

.home-hero .hero-radial-widget__word {
  font-size: clamp(1.04rem, 1.42vw, 1.48rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0.015em !important;
  color: rgb(var(--hero-mode-rgb)) !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.home-hero .hero-radial-widget__note {
  font-size: clamp(0.53rem, 0.74vw, 0.68rem) !important;
  line-height: 1.24 !important;
  color: rgba(247,242,232,0.76) !important;
  font-weight: 650 !important;
}

.home-hero .hero-radial-widget__dot {
  --dot-color: var(--hero-mode-color);
  border-radius: 50% !important;
  outline: none !important;
  cursor: pointer;
  transition: transform 240ms ease, filter 240ms ease, opacity 240ms ease !important;
}

.home-hero .hero-radial-widget__dot::before {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.96), transparent 20%),
    radial-gradient(circle, color-mix(in srgb, var(--dot-color) 72%, white 18%), color-mix(in srgb, var(--dot-color) 62%, transparent) 42%, rgba(9,13,20,0.72) 73%) !important;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,0.58),
    inset 0 -7px 12px rgba(0,0,0,0.34),
    0 0 0 1px color-mix(in srgb, var(--dot-color) 76%, transparent),
    0 0 18px color-mix(in srgb, var(--dot-color) 58%, transparent),
    0 0 42px color-mix(in srgb, var(--dot-color) 20%, transparent) !important;
}

.home-hero .hero-radial-widget__dot::after {
  border-color: color-mix(in srgb, var(--dot-color) 58%, transparent) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--dot-color) 28%, transparent) !important;
}

.home-hero .hero-radial-widget__dot:hover,
.home-hero .hero-radial-widget__dot:focus-visible,
.home-hero .hero-radial-widget__dot.is-preview,
.home-hero .hero-radial-widget__dot.is-active {
  filter: saturate(1.18) brightness(1.08) !important;
}

.home-hero .hero-radial-widget__dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dot-color) 78%, white 12%) !important;
  outline-offset: 9px !important;
}

.home-hero .hero-radial-widget__dot.is-active::after,
.home-hero .hero-radial-widget__dot.is-preview::after {
  opacity: 0.85 !important;
  transform: scale(1.18) !important;
}

.home-hero .hero-mode-readout {
  border-color: rgba(var(--hero-mode-rgb), 0.28) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.28), 0 0 42px rgba(var(--hero-mode-rgb),0.12), inset 0 1px 0 rgba(255,255,255,0.11) !important;
}

.home-hero .hero-mode-readout strong[data-hero-mode-word] {
  color: rgb(var(--hero-mode-rgb)) !important;
}

/* Replace leftover generic ambience inside the existing layers. */
.home-hero .ambient-layer > .ambient-svg:not(.principle-svg),
.home-hero .ambient-layer > .atmo-item {
  display: none !important;
}

.home-hero .ambient-layer,
.home-hero .principle-field {
  overflow: hidden;
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after,
.home-hero .principle-field::before,
.home-hero .principle-field::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
}

.home-hero .principle-field,
.home-hero .principle-field * {
  pointer-events: none;
}

.home-hero .principle-field {
  --principle-color: rgb(var(--theme-rgb));
  position: absolute;
  inset: 0;
  z-index: 18;
  color: var(--principle-color);
  mix-blend-mode: screen;
}

.home-hero .principle-field span,
.home-hero .principle-field svg {
  position: absolute;
}

.home-hero .principle-svg {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.92;
}

.home-hero .principle-svg path,
.home-hero .principle-svg line,
.home-hero .principle-svg circle,
.home-hero .principle-svg polyline,
.home-hero .principle-svg polygon,
.home-hero .principle-svg rect {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== 1. Clarity ===== */
.home-hero .ambient-layer--yellow {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,215,106,0.22), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255,247,220,0.10), transparent 58%),
    linear-gradient(145deg, rgba(9,10,8,0.98), rgba(20,17,9,0.94) 54%, rgba(4,7,12,0.98)) !important;
}
.home-hero .ambient-layer--yellow::before {
  background:
    conic-gradient(from -8deg at 50% 50%, transparent 0 4%, rgba(255,236,170,0.18) 5% 6%, transparent 7% 13%, rgba(255,215,106,0.16) 14% 15%, transparent 16% 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 52px, rgba(255,215,106,0.15) 54px 55px, transparent 58px 108px) !important;
  animation: clarityRadialSpin 14s linear infinite;
}
.home-hero .ambient-layer--yellow::after {
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(255,247,219,0.24) 44%, transparent 56% 100%),
    linear-gradient(68deg, transparent 0 36%, rgba(255,215,106,0.10) 47%, transparent 58%) !important;
  animation: clarityPrismSweep 11s ease-in-out infinite;
}
.home-hero .ambient-layer--yellow .principle-field::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,210,0.12), transparent 24%) !important;
  filter: blur(22px);
  animation: clarityPulse 6.5s ease-in-out infinite;
}
.home-hero .clarity-ring {
  left: 50%; top: 50%;
  width: var(--size); height: var(--size);
  border: 1px solid rgba(255,236,170,0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: clarityRing 7.4s ease-out infinite;
  animation-delay: var(--delay);
}
.home-hero .clarity-ray {
  left: 50%; top: 50%;
  width: 1px; height: 48%;
  transform-origin: 0 0;
  transform: rotate(var(--r));
  background: linear-gradient(180deg, rgba(255,241,190,0.48), rgba(255,215,106,0.10) 46%, transparent);
  animation: clarityRay 5.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .clarity-flash {
  left: var(--x); top: var(--y);
  width: var(--w); height: 2px;
  transform: rotate(var(--r));
  background: linear-gradient(90deg, transparent, rgba(255,244,205,0.94), rgba(255,215,106,0.36), transparent);
  filter: blur(0.2px);
  animation: clarityFlash 4.5s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .clarity-prism {
  left: var(--x); top: var(--y);
  width: var(--w); height: 16px;
  border-radius: 999px;
  transform: rotate(var(--r));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), rgba(255,215,106,0.12), transparent);
  filter: blur(3px);
  animation: clarityPrism 7s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 2. Precision ===== */
.home-hero .ambient-layer--gold {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,184,74,0.16), transparent 34%),
    linear-gradient(145deg, rgba(10,8,6,0.98), rgba(19,14,8,0.95) 56%, rgba(5,8,11,0.98)) !important;
}
.home-hero .ambient-layer--gold::before {
  background:
    linear-gradient(rgba(255,184,74,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,184,74,0.12) 1px, transparent 1px),
    linear-gradient(rgba(255,214,170,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,214,170,0.06) 1px, transparent 1px) !important;
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px !important;
  animation: precisionGrid 10s ease-in-out infinite;
}
.home-hero .ambient-layer--gold::after {
  background:
    linear-gradient(180deg, transparent 0 24%, rgba(255,205,120,0.18) 42%, transparent 54% 100%),
    linear-gradient(90deg, transparent 0 38%, rgba(255,184,74,0.13) 50%, transparent 62%) !important;
  animation: precisionScan 5.6s linear infinite;
}
.home-hero .ambient-layer--gold .principle-field::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,184,74,0.08), transparent 24%) !important;
  filter: blur(10px);
}
.home-hero .precision-grid-line { stroke: rgba(255,192,110,0.18); stroke-width: 1.1; }
.home-hero .precision-crosshair { stroke: rgba(255,216,160,0.56); stroke-width: 1.2; animation: precisionCrosshair 3.8s ease-in-out infinite; }
.home-hero .precision-tick { stroke: rgba(255,184,74,0.38); stroke-width: 1; }
.home-hero .precision-pointer {
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid rgba(255,184,74,0.72);
  left: var(--x); top: var(--y);
  transform: rotate(var(--r));
  filter: drop-shadow(0 0 8px rgba(255,184,74,0.24));
  animation: precisionPointer 3.6s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .precision-scan-band {
  left: var(--x); top: 12%;
  width: 2px; height: 76%;
  background: linear-gradient(180deg, transparent, rgba(255,204,126,0.62), transparent);
  animation: precisionBand 4.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .precision-label {
  left: var(--x); top: var(--y);
  color: rgba(255,221,176,0.52);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  animation: precisionLabel 5.2s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 3. Purpose ===== */
.home-hero .ambient-layer--orange {
  background:
    radial-gradient(circle at 52% 48%, rgba(255,145,56,0.20), transparent 34%),
    linear-gradient(145deg, rgba(14,8,5,0.98), rgba(22,14,8,0.95) 55%, rgba(5,8,11,0.98)) !important;
}
.home-hero .ambient-layer--orange::before {
  background:
    linear-gradient(135deg, transparent 0 34%, rgba(255,145,56,0.10) 45%, transparent 56% 100%),
    linear-gradient(32deg, transparent 0 38%, rgba(255,186,120,0.10) 49%, transparent 61%) !important;
  animation: purposeWindField 12s linear infinite;
}
.home-hero .ambient-layer--orange::after {
  background: radial-gradient(circle at 72% 34%, rgba(255,145,56,0.18), transparent 12%), radial-gradient(circle at 78% 30%, rgba(255,223,170,0.24), transparent 4%) !important;
  animation: purposeDestination 6.2s ease-in-out infinite;
}
.home-hero .purpose-path { stroke-width: 2; stroke-dasharray: 16 20; fill: none; }
.home-hero .purpose-path--main { stroke: rgba(255,171,103,0.82); animation: purposeRoute 7.6s linear infinite; }
.home-hero .purpose-path--soft { stroke: rgba(255,145,56,0.32); stroke-dasharray: 10 22; animation: purposeRoute 9.4s linear infinite reverse; }
.home-hero .purpose-waypoint { fill: rgba(255,221,180,0.92) !important; stroke: rgba(255,145,56,0.92) !important; stroke-width: 1.1; animation: purposeWaypoint 2.8s ease-in-out infinite; }
.home-hero .purpose-arrow {
  left: var(--x); top: var(--y);
  width: 58px; height: 2px;
  background: linear-gradient(90deg, rgba(255,145,56,0.02), rgba(255,170,105,0.95), transparent);
  transform: rotate(-24deg);
  animation: purposeArrow 4.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .purpose-arrow::after {
  content: "";
  position: absolute;
  right: -2px; top: -3px;
  width: 8px; height: 8px;
  border-top: 2px solid rgba(255,213,170,0.9);
  border-right: 2px solid rgba(255,213,170,0.9);
  transform: rotate(45deg);
}
.home-hero .purpose-leaf {
  left: var(--x); top: var(--y);
  width: var(--s); height: calc(var(--s) * 0.56);
  border-radius: 62% 38% 62% 38%;
  background: radial-gradient(circle at 30% 30%, rgba(255,232,205,0.44), rgba(255,145,56,0.34) 52%, transparent 72%);
  transform: rotate(var(--r));
  filter: blur(0.2px);
  animation: purposeLeaf 7.4s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 4. Focus ===== */
.home-hero .ambient-layer--red {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,91,98,0.18), transparent 26%),
    radial-gradient(circle at 32% 36%, rgba(255,80,110,0.10), transparent 22%),
    radial-gradient(circle at 72% 60%, rgba(220,55,88,0.12), transparent 22%),
    linear-gradient(145deg, rgba(11,5,8,0.99), rgba(21,8,11,0.96) 54%, rgba(5,7,11,0.98)) !important;
}
.home-hero .ambient-layer--red::before {
  background:
    radial-gradient(circle at 34% 38%, rgba(255,91,98,0.22), transparent 18%),
    radial-gradient(circle at 74% 62%, rgba(255,91,98,0.16), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255,145,156,0.08), transparent 54%) !important;
  filter: blur(28px);
  animation: focusNebula 8.8s ease-in-out infinite;
}
.home-hero .ambient-layer--red::after {
  background: radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(255,91,98,0.18) 16% 17%, transparent 18% 100%) !important;
  animation: focusTargetField 5.4s ease-out infinite;
}
.home-hero .focus-target-ring {
  left: 50%; top: 50%; width: var(--size); height: var(--size);
  border: 1px solid rgba(255,128,134,0.26);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: focusTarget 4.8s ease-out infinite;
  animation-delay: var(--delay);
}
.home-hero .focus-dot {
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,216,220,0.95), rgba(255,91,98,0.55) 55%, transparent 72%);
  transform: rotate(var(--a)) translateX(var(--d));
  animation: focusConverge 4.4s ease-in infinite;
  animation-delay: var(--delay);
}
.home-hero .focus-ember {
  left: var(--x); top: var(--y);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,190,0.95), rgba(255,91,98,0.42) 58%, transparent 72%);
  animation: focusEmber 5.8s linear infinite;
  animation-delay: var(--delay);
}
.home-hero .focus-cloud {
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,91,98,0.16), rgba(255,91,98,0.02) 68%, transparent 76%);
  filter: blur(18px);
  animation: focusCloud 9.4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .focus-spotlight {
  left: 50%; top: 50%;
  width: 52%; height: 76%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 44%, rgba(255,180,190,0.14), transparent 54%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  animation: focusSpotlight 6.4s ease-in-out infinite;
}

/* ===== 5. Identity ===== */
.home-hero .ambient-layer--magenta {
  background:
    radial-gradient(circle at 50% 50%, rgba(242,72,199,0.18), transparent 32%),
    linear-gradient(145deg, rgba(10,6,11,0.99), rgba(24,7,22,0.95) 54%, rgba(4,6,11,0.98)) !important;
}
.home-hero .ambient-layer--magenta::before {
  background:
    radial-gradient(circle at 22% 34%, rgba(242,72,199,0.18), transparent 18%),
    radial-gradient(circle at 78% 66%, rgba(242,72,199,0.14), transparent 20%),
    linear-gradient(135deg, transparent 0 36%, rgba(242,72,199,0.06) 48%, transparent 60%) !important;
  animation: identityGlowField 10.2s ease-in-out infinite;
}
.home-hero .ambient-layer--magenta::after {
  background: radial-gradient(circle at 50% 50%, rgba(242,72,199,0.10), transparent 36%), radial-gradient(circle at 50% 50%, rgba(255,220,248,0.06), transparent 20%) !important;
  filter: blur(12px);
  animation: identityAura 7.8s ease-in-out infinite;
}
.home-hero .identity-signature { stroke-width: 2.2; stroke-dasharray: 220 240; animation: identityStroke 8.4s ease-in-out infinite; }
.home-hero .identity-signature--1 { stroke: rgba(255,166,230,0.84); }
.home-hero .identity-signature--2 { stroke: rgba(242,72,199,0.68); }
.home-hero .identity-signature--3 { stroke: rgba(255,196,240,0.56); }
.home-hero .identity-blob {
  left: var(--x); top: var(--y);
  width: 92px; height: 76px;
  border-radius: 58% 42% 48% 52%;
  background: radial-gradient(circle at 28% 30%, rgba(255,220,245,0.24), rgba(242,72,199,0.18) 44%, transparent 70%);
  filter: blur(4px);
  animation: identityBlob 8.6s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .identity-trail {
  left: var(--x); top: var(--y);
  width: var(--w); height: 20px;
  border-radius: 999px;
  transform: rotate(var(--r));
  background: linear-gradient(90deg, transparent, rgba(255,190,235,0.22), rgba(242,72,199,0.14), transparent);
  filter: blur(3px);
  animation: identityTrail 7.2s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 6. Value ===== */
.home-hero .ambient-layer--purple {
  background:
    radial-gradient(circle at 50% 50%, rgba(139,99,255,0.18), transparent 34%),
    linear-gradient(145deg, rgba(8,8,14,0.98), rgba(20,11,28,0.95) 56%, rgba(4,6,11,0.98)) !important;
}
.home-hero .ambient-layer--purple::before {
  background:
    linear-gradient(120deg, transparent 0 30%, rgba(170,130,255,0.10) 43%, transparent 56% 100%),
    linear-gradient(60deg, transparent 0 42%, rgba(220,205,255,0.08) 50%, transparent 58%) !important;
  animation: valueGlassSweep 9.8s ease-in-out infinite;
}
.home-hero .ambient-layer--purple::after {
  background: radial-gradient(circle at 50% 60%, rgba(139,99,255,0.10), transparent 38%) !important;
  filter: blur(14px);
  animation: valueDepth 8.8s ease-in-out infinite;
}
.home-hero .value-card-plane {
  left: var(--x); top: var(--y); width: var(--w); height: 84px;
  border-radius: 18px;
  border: 1px solid rgba(190,165,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(139,99,255,0.08) 40%, rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 28px rgba(139,99,255,0.06);
  backdrop-filter: blur(6px);
  animation: valueCardRise 8s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .value-facet {
  width: 220px; height: 220px;
  clip-path: polygon(50% 0, 90% 30%, 100% 70%, 56% 100%, 14% 76%, 0 28%);
  background: linear-gradient(145deg, rgba(228,220,255,0.12), rgba(139,99,255,0.02));
  border: 1px solid rgba(210,196,255,0.12);
  filter: blur(0.4px);
  animation: valueFacet 10s ease-in-out infinite;
}
.home-hero .value-facet--one { right: 8%; top: 8%; }
.home-hero .value-facet--two { left: 12%; bottom: 4%; }
.home-hero .value-orb {
  left: var(--x); top: var(--y);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,240,255,0.9), rgba(170,135,255,0.36) 58%, transparent 72%);
  animation: valueOrb 5.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 7. Hierarchy ===== */
.home-hero .ambient-layer--indigo {
  background:
    radial-gradient(circle at 50% 50%, rgba(88,102,255,0.16), transparent 34%),
    linear-gradient(145deg, rgba(6,8,15,0.99), rgba(11,14,32,0.96) 56%, rgba(4,6,11,0.98)) !important;
}
.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(120,132,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,132,255,0.10) 1px, transparent 1px) !important;
  background-size: 110px 110px !important;
  animation: hierarchyGrid 11s ease-in-out infinite;
}
.home-hero .ambient-layer--indigo::after {
  background: linear-gradient(180deg, rgba(88,102,255,0.10), transparent 18%), linear-gradient(180deg, transparent 0 76%, rgba(88,102,255,0.08) 100%) !important;
  animation: hierarchyReveal 7s ease-in-out infinite;
}
.home-hero .hierarchy-block {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 16px;
  border: 1px solid rgba(148,158,255,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(88,102,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  animation: hierarchyAssemble 6.8s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .hierarchy-band {
  left: 18%; top: var(--y); width: 58%; height: 2px;
  background: linear-gradient(90deg, rgba(88,102,255,0.02), rgba(164,176,255,0.6), transparent);
  animation: hierarchyBand 4.6s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .hierarchy-line {
  left: var(--x); top: var(--y); width: var(--w); height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(180,188,255,0.3), rgba(88,102,255,0.10));
  animation: hierarchyLine 5.2s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 8. Usability ===== */
.home-hero .ambient-layer--blue {
  background:
    radial-gradient(circle at 50% 50%, rgba(57,160,255,0.16), transparent 34%),
    linear-gradient(145deg, rgba(6,10,16,0.99), rgba(8,18,28,0.95) 56%, rgba(4,7,11,0.98)) !important;
}
.home-hero .ambient-layer--blue::before {
  background:
    linear-gradient(180deg, rgba(162,220,255,0.09) 0 1px, transparent 1px),
    linear-gradient(145deg, transparent 0 35%, rgba(57,160,255,0.08) 48%, transparent 61%) !important;
  background-size: 100% 26px, auto !important;
  animation: usabilityRain 8.6s linear infinite;
}
.home-hero .ambient-layer--blue::after {
  background: radial-gradient(circle at 50% 50%, rgba(57,160,255,0.12), transparent 42%) !important;
  filter: blur(12px);
  animation: usabilityGlow 6.8s ease-in-out infinite;
}
.home-hero .usability-route { stroke-width: 2; stroke-dasharray: 14 18; fill: none; animation: usabilityRoute 8.2s linear infinite; }
.home-hero .usability-route--one { stroke: rgba(166,223,255,0.78); }
.home-hero .usability-route--two { stroke: rgba(57,160,255,0.34); }
.home-hero .usability-node { fill: rgba(210,242,255,0.92) !important; stroke: rgba(57,160,255,0.92) !important; stroke-width: 1.1; animation: usabilityNode 3s ease-in-out infinite; }
.home-hero .usability-droplet {
  left: var(--x); top: var(--y);
  width: 12px; height: 18px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.55), rgba(120,205,255,0.55) 44%, rgba(57,160,255,0.18) 72%);
  animation: usabilityDroplet 6.4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .usability-ripple {
  left: var(--x); top: var(--y);
  width: 54px; height: 54px;
  border: 1px solid rgba(140,215,255,0.20);
  border-radius: 50%;
  animation: usabilityRipple 4.8s ease-out infinite;
  animation-delay: var(--delay);
}
.home-hero .usability-cursor-trail {
  left: 18%; top: 32%; width: 16px; height: 16px;
  border-radius: 3px 3px 10px 3px;
  border: 2px solid rgba(200,238,255,0.72);
  background: rgba(57,160,255,0.12);
  transform: rotate(-35deg);
  animation: usabilityCursor 7s ease-in-out infinite;
}

/* ===== 9. Adaptability ===== */
.home-hero .ambient-layer--cyan {
  background:
    radial-gradient(circle at 50% 50%, rgba(46,216,255,0.16), transparent 34%),
    linear-gradient(145deg, rgba(4,10,14,0.99), rgba(7,20,24,0.95) 56%, rgba(4,7,11,0.98)) !important;
}
.home-hero .ambient-layer--cyan::before {
  background:
    linear-gradient(rgba(134,235,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,235,255,0.10) 1px, transparent 1px) !important;
  background-size: 82px 82px !important;
  animation: adaptiveGrid 8.8s ease-in-out infinite;
}
.home-hero .ambient-layer--cyan::after {
  background: radial-gradient(circle at 50% 50%, rgba(46,216,255,0.12), transparent 38%) !important;
  filter: blur(8px);
  animation: adaptiveAura 7s ease-in-out infinite;
}
.home-hero .adaptive-frame {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 18px;
  border: 1px solid rgba(150,240,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(46,216,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  animation: adaptiveFrame 6.4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .adaptive-breakpoint {
  left: var(--x); top: 18%; width: 2px; height: 62%;
  background: linear-gradient(180deg, transparent, rgba(182,246,255,0.72), transparent);
  animation: adaptiveBreakpoint 4.8s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .adaptive-panel-ghost {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 16px;
  border: 1px dashed rgba(170,245,255,0.18);
  animation: adaptiveGhost 7.4s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 10. Accessibility ===== */
.home-hero .ambient-layer--teal {
  background:
    radial-gradient(circle at 50% 50%, rgba(40,211,181,0.16), transparent 34%),
    linear-gradient(145deg, rgba(4,10,11,0.99), rgba(8,22,20,0.95) 56%, rgba(4,7,11,0.98)) !important;
}
.home-hero .ambient-layer--teal::before {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(40,211,181,0.08) 22% 31%, transparent 35% 48%, rgba(160,244,228,0.08) 52% 61%, transparent 65%),
    linear-gradient(180deg, transparent 0 26%, rgba(40,211,181,0.06) 34% 42%, transparent 50% 100%) !important;
  animation: a11yZones 8.6s ease-in-out infinite;
}
.home-hero .ambient-layer--teal::after {
  background: radial-gradient(circle at 50% 50%, rgba(170,245,230,0.10), transparent 24%) !important;
  animation: a11ySonarField 6.8s ease-in-out infinite;
}
.home-hero .a11y-focus-box {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 16px;
  outline: 2px solid rgba(170,245,230,0.42);
  outline-offset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(40,211,181,0.04));
  animation: a11yFocusBox 5.4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .a11y-tab-dot {
  left: var(--x); top: var(--y);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,255,248,0.96), rgba(40,211,181,0.48) 56%, transparent 72%);
  animation: a11yTabDot 3.6s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .a11y-sonar {
  left: var(--x); top: var(--y);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(170,245,230,0.22);
  animation: a11ySonar 5.6s ease-out infinite;
  animation-delay: var(--delay);
}
.home-hero .a11y-guide {
  left: 16%; top: 70%; width: 64%; height: 2px;
  background: linear-gradient(90deg, rgba(40,211,181,0.08), rgba(170,245,230,0.6), rgba(40,211,181,0.08));
  animation: a11yGuide 4.8s ease-in-out infinite;
}

/* ===== 11. Performance ===== */
.home-hero .ambient-layer--green {
  background:
    radial-gradient(circle at 50% 50%, rgba(88,229,111,0.16), transparent 34%),
    linear-gradient(145deg, rgba(4,10,7,0.99), rgba(8,20,11,0.95) 56%, rgba(4,7,11,0.98)) !important;
}
.home-hero .ambient-layer--green::before {
  background:
    linear-gradient(90deg, rgba(88,229,111,0.00) 0, rgba(170,255,190,0.12) 40%, rgba(88,229,111,0.00) 100%),
    linear-gradient(rgba(88,229,111,0.05) 1px, transparent 1px) !important;
  background-size: 240px 100%, 100% 18px !important;
  animation: performanceField 3.4s linear infinite;
}
.home-hero .ambient-layer--green::after {
  background: linear-gradient(90deg, transparent, rgba(170,255,190,0.28), transparent) !important;
  animation: performanceSweep 4.2s ease-in-out infinite;
}
.home-hero .performance-circuit { stroke: rgba(145,255,170,0.32); stroke-width: 1.2; stroke-dasharray: 10 16; animation: performanceCircuit 5.4s linear infinite; }
.home-hero .performance-streak {
  left: var(--x); top: var(--y); width: var(--w); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(210,255,220,0.85), rgba(88,229,111,0.42), transparent);
  animation: performanceStreak 2.6s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .performance-bar {
  left: var(--x); bottom: 16%; width: 7%; height: var(--h);
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(210,255,220,0.60), rgba(88,229,111,0.14));
  animation: performanceBar 3.4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.home-hero .performance-pulse {
  left: var(--x); top: var(--y);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,255,232,0.95), rgba(88,229,111,0.45) 58%, transparent 72%);
  animation: performancePulse 2.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

/* ===== 12. Coherence ===== */
.home-hero .ambient-layer--lime {
  background:
    radial-gradient(circle at 50% 52%, rgba(199,241,74,0.18), transparent 32%),
    linear-gradient(145deg, rgba(6,10,4,0.99), rgba(12,24,8,0.95) 56%, rgba(4,7,11,0.98)) !important;
}
.home-hero .ambient-layer--lime::before {
  background:
    radial-gradient(circle, rgba(199,241,74,0.26) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(238,255,160,0.12) 0 2px, transparent 4px) !important;
  background-size: 70px 70px, 144px 144px !important;
  animation: coherenceField 8.8s ease-in-out infinite;
}
.home-hero .ambient-layer--lime::after {
  background: radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(199,241,74,0.22) 19% 20%, transparent 22% 100%) !important;
  animation: coherencePulseField 5.8s ease-out infinite;
}
.home-hero .coherence-link { stroke: rgba(218,255,120,0.42); stroke-width: 1.4; stroke-dasharray: 16 26; animation: coherenceLink 7s linear infinite; }
.home-hero .coherence-node { fill: rgba(218,255,120,0.68) !important; stroke: rgba(199,241,74,0.95) !important; stroke-width: 1.2; animation: coherenceNode 4.2s ease-in-out infinite; }
.home-hero .coherence-orbit {
  left: 50%; top: 50%; width: var(--size); height: var(--size);
  border: 1px solid rgba(199,241,74,0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: coherenceOrbit 10s linear infinite;
  animation-delay: var(--delay);
}
.home-hero .coherence-pulse-ring {
  left: 50%; top: 50%; width: var(--size); height: var(--size);
  border: 1px solid rgba(218,255,120,0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: coherencePulse 6.2s ease-out infinite;
  animation-delay: var(--delay);
}

/* ===== Keyframes ===== */
@keyframes clarityRadialSpin { to { transform: rotate(360deg); } }
@keyframes clarityPrismSweep { 0%,100%{transform:translateX(-10%) rotate(0deg);opacity:.16} 50%{transform:translateX(8%) rotate(2deg);opacity:.56} }
@keyframes clarityPulse { 0%,100%{opacity:.22;transform:scale(.96)} 50%{opacity:.56;transform:scale(1.08)} }
@keyframes clarityRing { 0%{opacity:0;transform:translate(-50%,-50%) scale(.7)} 24%{opacity:.52} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)} }
@keyframes clarityRay { 0%,100%{opacity:.06} 50%{opacity:.42} }
@keyframes clarityFlash { 0%,100%{opacity:0;transform:translateX(-18px) rotate(var(--r)) scaleX(.6)} 30%{opacity:.12} 46%{opacity:.88} 100%{opacity:0;transform:translateX(18px) rotate(var(--r)) scaleX(1.1)} }
@keyframes clarityPrism { 0%,100%{opacity:.08;transform:rotate(var(--r)) translateX(-16px)} 50%{opacity:.34;transform:rotate(var(--r)) translateX(20px)} }

@keyframes precisionGrid { 0%,100%{background-position:0 0,0 0,0 0,0 0;opacity:.36} 50%{background-position:18px 18px,18px 18px,8px 8px,8px 8px;opacity:.72} }
@keyframes precisionScan { 0%{transform:translateY(-18%);opacity:.08} 50%{opacity:.65} 100%{transform:translateY(18%);opacity:.08} }
@keyframes precisionCrosshair { 0%,100%{opacity:.26;transform:scale(.94)} 50%{opacity:.9;transform:scale(1.04)} }
@keyframes precisionPointer { 0%,100%{opacity:.2;transform:rotate(var(--r)) translateY(0)} 50%{opacity:.88;transform:rotate(calc(var(--r) + 6deg)) translateY(-6px)} }
@keyframes precisionBand { 0%,100%{opacity:.04;transform:translateY(-10%)} 50%{opacity:.84;transform:translateY(10%)} }
@keyframes precisionLabel { 0%,100%{opacity:.16;transform:translateY(8px)} 50%{opacity:.58;transform:translateY(0)} }

@keyframes purposeWindField { 0%{transform:translateX(-8%)} 100%{transform:translateX(8%)} }
@keyframes purposeDestination { 0%,100%{opacity:.22;transform:scale(.96)} 50%{opacity:.62;transform:scale(1.06)} }
@keyframes purposeRoute { to { stroke-dashoffset: -340; } }
@keyframes purposeWaypoint { 0%,100%{opacity:.28;transform:scale(.84)} 50%{opacity:1;transform:scale(1.22)} }
@keyframes purposeArrow { 0%{opacity:0;transform:translate(-64px,30px) rotate(-24deg) scaleX(.56)} 44%{opacity:.72} 100%{opacity:0;transform:translate(84px,-34px) rotate(-24deg) scaleX(1.08)} }
@keyframes purposeLeaf { 0%,100%{opacity:.12;transform:translate3d(-18px,12px,0) rotate(var(--r)) scale(.8)} 50%{opacity:.44;transform:translate3d(24px,-18px,0) rotate(calc(var(--r) + 18deg)) scale(1.08)} }

@keyframes focusNebula { 0%,100%{opacity:.38;transform:scale(.96)} 50%{opacity:.72;transform:scale(1.08)} }
@keyframes focusTargetField { 0%{opacity:.12;transform:scale(.84)} 60%{opacity:.56;transform:scale(1.08)} 100%{opacity:0;transform:scale(1.18)} }
@keyframes focusTarget { 0%{opacity:0;transform:translate(-50%,-50%) scale(.58)} 24%{opacity:.56} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)} }
@keyframes focusConverge { 0%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.5)} 40%{opacity:.82} 100%{opacity:0;transform:rotate(var(--a)) translateX(24px) scale(1.1)} }
@keyframes focusEmber { 0%{opacity:0;transform:translate(0,0) scale(.7)} 25%{opacity:.5} 100%{opacity:0;transform:translate(-80px,-48px) scale(1.05)} }
@keyframes focusCloud { 0%,100%{opacity:.18;transform:translate3d(-12px,0,0)} 50%{opacity:.44;transform:translate3d(16px,-8px,0)} }
@keyframes focusSpotlight { 0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(.96)} 50%{opacity:.42;transform:translate(-50%,-50%) scale(1.06)} }

@keyframes identityGlowField { 0%,100%{opacity:.32;transform:scale(.98) rotate(-2deg)} 50%{opacity:.68;transform:scale(1.06) rotate(2deg)} }
@keyframes identityAura { 0%,100%{opacity:.18} 50%{opacity:.54} }
@keyframes identityStroke { 0%{stroke-dashoffset:480;opacity:.18} 46%{opacity:.88} 100%{stroke-dashoffset:-480;opacity:.2} }
@keyframes identityBlob { 0%,100%{opacity:.12;transform:translate3d(-18px,14px,0) scale(.82) rotate(0deg)} 50%{opacity:.46;transform:translate3d(22px,-28px,0) scale(1.12) rotate(22deg)} }
@keyframes identityTrail { 0%,100%{opacity:.06;transform:rotate(var(--r)) translateX(-20px)} 50%{opacity:.36;transform:rotate(var(--r)) translateX(20px)} }

@keyframes valueGlassSweep { 0%,100%{background-position:-120px 0,80px 0;opacity:.28} 50%{background-position:160px -34px,-120px 34px;opacity:.74} }
@keyframes valueDepth { 0%,100%{opacity:.24;transform:scale(.98)} 50%{opacity:.54;transform:scale(1.04)} }
@keyframes valueCardRise { 0%,100%{opacity:.16;transform:translate3d(-10px,22px,0) scale(.92)} 50%{opacity:.58;transform:translate3d(10px,-16px,0) scale(1.04)} }
@keyframes valueFacet { 0%,100%{opacity:.14;transform:rotate(-8deg) translateY(0)} 50%{opacity:.44;transform:rotate(-2deg) translateY(-24px)} }
@keyframes valueOrb { 0%,100%{opacity:.16;transform:translateY(14px) scale(.72)} 50%{opacity:.74;transform:translateY(-16px) scale(1.06)} }

@keyframes hierarchyGrid { 0%,100%{background-position:0 0,0 0;opacity:.24} 50%{background-position:30px 30px,30px 30px;opacity:.56} }
@keyframes hierarchyReveal { 0%,100%{opacity:.18} 50%{opacity:.42} }
@keyframes hierarchyAssemble { 0%,100%{opacity:.12;transform:translateY(26px) scale(.94)} 50%{opacity:.58;transform:translateY(0) scale(1)} }
@keyframes hierarchyBand { 0%,100%{opacity:.08;transform:scaleX(.72)} 50%{opacity:.46;transform:scaleX(1)} }
@keyframes hierarchyLine { 0%,100%{opacity:.08;transform:translateX(-10px)} 50%{opacity:.32;transform:translateX(10px)} }

@keyframes usabilityRain { 0%{background-position:0 0,0 0} 100%{background-position:0 84px,0 0} }
@keyframes usabilityGlow { 0%,100%{opacity:.2;transform:scale(.98)} 50%{opacity:.58;transform:scale(1.04)} }
@keyframes usabilityRoute { to { stroke-dashoffset: -420; } }
@keyframes usabilityNode { 0%,100%{opacity:.24;transform:scale(.8)} 50%{opacity:.96;transform:scale(1.16)} }
@keyframes usabilityDroplet { 0%,100%{opacity:.14;transform:translateY(-10px)} 50%{opacity:.56;transform:translateY(12px)} }
@keyframes usabilityRipple { 0%{opacity:.12;transform:scale(.44)} 58%{opacity:.44} 100%{opacity:0;transform:scale(1.34)} }
@keyframes usabilityCursor { 0%,100%{opacity:.18;transform:translate3d(0,0,0) rotate(-35deg)} 50%{opacity:.56;transform:translate3d(360px,210px,0) rotate(-35deg)} }

@keyframes adaptiveGrid { 0%,100%{background-size:82px 82px;opacity:.24} 50%{background-size:62px 62px;opacity:.58} }
@keyframes adaptiveAura { 0%,100%{opacity:.18;transform:scale(.98)} 50%{opacity:.54;transform:scale(1.05)} }
@keyframes adaptiveFrame { 0%,100%{opacity:.16;transform:scaleX(.82) scaleY(1.08)} 50%{opacity:.62;transform:scaleX(1.12) scaleY(.92)} }
@keyframes adaptiveBreakpoint { 0%,100%{opacity:.08;transform:scaleY(.55)} 50%{opacity:.48;transform:scaleY(1)} }
@keyframes adaptiveGhost { 0%,100%{opacity:.08;transform:translate(-10px,10px)} 50%{opacity:.36;transform:translate(12px,-12px)} }

@keyframes a11yZones { 0%,100%{opacity:.26;transform:translateX(-2%)} 50%{opacity:.58;transform:translateX(2%)} }
@keyframes a11ySonarField { 0%,100%{opacity:.16} 50%{opacity:.48} }
@keyframes a11yFocusBox { 0%,100%{opacity:.18;outline-offset:0;transform:translateY(10px)} 50%{opacity:.78;outline-offset:7px;transform:translateY(0)} }
@keyframes a11yTabDot { 0%,100%{opacity:.18;transform:scale(.72)} 50%{opacity:.9;transform:scale(1.22)} }
@keyframes a11ySonar { 0%{opacity:.12;transform:scale(.44)} 60%{opacity:.48} 100%{opacity:0;transform:scale(1.24)} }
@keyframes a11yGuide { 0%,100%{opacity:.14;transform:scaleX(.72)} 50%{opacity:.52;transform:scaleX(1)} }

@keyframes performanceField { to { background-position:-220px 0,0 18px; } }
@keyframes performanceSweep { 0%,100%{transform:translateX(-72%);opacity:.08} 50%{transform:translateX(72%);opacity:.68} }
@keyframes performanceCircuit { to { stroke-dashoffset:-220; } }
@keyframes performanceStreak { 0%{opacity:0;transform:translateX(-120px) scaleX(.4)} 30%{opacity:.76} 100%{opacity:0;transform:translateX(240px) scaleX(1.2)} }
@keyframes performanceBar { 0%,100%{opacity:.18;transform:scaleY(.42)} 50%{opacity:.72;transform:scaleY(1)} }
@keyframes performancePulse { 0%,100%{opacity:.12;transform:scale(.72)} 50%{opacity:.82;transform:scale(1.18)} }

@keyframes coherenceField { 0%,100%{background-position:0 0,0 0;opacity:.30} 50%{background-position:36px -36px,-52px 52px;opacity:.68} }
@keyframes coherencePulseField { 0%{opacity:.10;transform:scale(.88)} 58%{opacity:.62;transform:scale(1.08)} 100%{opacity:0;transform:scale(1.18)} }
@keyframes coherenceLink { to { stroke-dashoffset:-260; } }
@keyframes coherenceNode { 0%,100%{opacity:.28;transform:scale(.76)} 50%{opacity:.98;transform:scale(1.16)} }
@keyframes coherenceOrbit { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes coherencePulse { 0%{opacity:.12;transform:translate(-50%,-50%) scale(.62)} 55%{opacity:.54} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)} }

/* Desktop process panel: keep the earlier scroll-room fix. */
@media (min-width: 981px) {
  .process-scene .deliverables-panel {
    top: clamp(0.75rem, 2svh, 1.2rem) !important;
    max-height: calc(100svh - clamp(2.25rem, 5svh, 3.8rem)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges;
    padding-bottom: clamp(2.4rem, 7svh, 5rem) !important;
    scroll-padding-bottom: clamp(3.2rem, 9svh, 6rem) !important;
  }
  .process-scene .process-detail-shell {
    min-height: 0 !important;
    padding-bottom: clamp(3.5rem, 9svh, 6.25rem) !important;
  }
  .process-scene .process-flow {
    padding-bottom: clamp(2.6rem, 8svh, 5.5rem) !important;
  }
}

@media (max-width: 820px) {
  .home-hero .hero-radial-widget {
    --orbit: clamp(88px, 33vw, 124px) !important;
    --hub-size: clamp(104px, 32vw, 132px) !important;
  }
  .home-hero .hero-radial-widget__note { display: none !important; }
  .home-hero .hero-radial-widget__word { font-size: clamp(.82rem, 3.2vw, 1.02rem) !important; }
  .home-hero .hero-radial-widget__label { font-size: .52rem !important; }
  .home-hero .principle-field { opacity: .72; }
  .home-hero .value-card-plane,
  .home-hero .hierarchy-block,
  .home-hero .adaptive-frame,
  .home-hero .a11y-focus-box { transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .principle-field *,
  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after,
  .home-hero .hero-radial-widget__dot,
  .home-hero .hero-radial-widget__core {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* Central manifesto hub: show an adaptive bold symbol instead of the full text label. */
.home-hero .hero-radial-widget__core {
  isolation: isolate;
}

.home-hero .hero-radial-widget__symbol {
  --symbol-color: var(--hero-mode-color, #FFD76A);
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(3.1rem, 5.4vw, 5.7rem);
  height: clamp(3.1rem, 5.4vw, 5.7rem);
  border-radius: 50%;
  color: var(--symbol-color);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,0.24), transparent 18%),
    radial-gradient(circle, color-mix(in srgb, var(--symbol-color) 22%, transparent), transparent 66%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--symbol-color) 38%, transparent),
    0 0 28px color-mix(in srgb, var(--symbol-color) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -12px 22px rgba(0,0,0,0.22);
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--symbol-color) 34%, transparent))
    drop-shadow(0 12px 18px rgba(0,0,0,0.34));
  transform: translateZ(0);
  transition: color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease;
  animation: manifestoSymbolBreath 4.6s ease-in-out infinite;
}

.home-hero .hero-radial-widget__symbol::before,
.home-hero .hero-radial-widget__symbol::after {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: inherit;
  pointer-events: none;
}

.home-hero .hero-radial-widget__symbol::before {
  border: 1px solid color-mix(in srgb, var(--symbol-color) 40%, transparent);
  opacity: 0.52;
  animation: manifestoSymbolHalo 3.8s ease-in-out infinite;
}

.home-hero .hero-radial-widget__symbol::after {
  background: conic-gradient(from 0deg, transparent 0 26%, color-mix(in srgb, var(--symbol-color) 26%, transparent) 32%, transparent 40% 100%);
  opacity: 0.42;
  animation: manifestoSymbolScan 7.8s linear infinite;
}

.home-hero .hero-radial-widget__symbol svg {
  position: relative;
  z-index: 2;
  width: 68%;
  height: 68%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.home-hero .hero-radial-widget__symbol svg [fill="currentColor"] {
  stroke: none;
}

.home-hero .hero-radial-widget__label,
.home-hero .hero-radial-widget__word,
.home-hero .hero-radial-widget__note {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes manifestoSymbolBreath {
  0%, 100% { transform: scale(0.96); opacity: 0.88; }
  50% { transform: scale(1.045); opacity: 1; }
}

@keyframes manifestoSymbolHalo {
  0%, 100% { transform: scale(0.92); opacity: 0.30; }
  50% { transform: scale(1.12); opacity: 0.68; }
}

@keyframes manifestoSymbolScan {
  to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
  .home-hero .hero-radial-widget__symbol {
    width: clamp(2.6rem, 13vw, 3.65rem);
    height: clamp(2.6rem, 13vw, 3.65rem);
  }
  .home-hero .hero-radial-widget__symbol svg {
    stroke-width: 2.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-radial-widget__symbol,
  .home-hero .hero-radial-widget__symbol::before,
  .home-hero .hero-radial-widget__symbol::after {
    animation: none !important;
  }
}

/* Final icon pass: one readable Lucide-inspired line symbol per design principle. */
.home-hero .hero-radial-widget__symbol {
  width: clamp(3.35rem, 5.8vw, 6.25rem);
  height: clamp(3.35rem, 5.8vw, 6.25rem);
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,0.30), transparent 17%),
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--symbol-color) 26%, transparent), transparent 66%),
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--symbol-color) 46%, transparent),
    0 0 36px color-mix(in srgb, var(--symbol-color) 30%, transparent),
    0 18px 38px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -18px 26px rgba(0,0,0,0.32);
}

.home-hero .hero-radial-widget__symbol svg {
  width: 72%;
  height: 72%;
  stroke-width: 2.35;
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--symbol-color) 42%, transparent))
    drop-shadow(0 5px 10px rgba(0,0,0,0.34));
}

.home-hero .hero-radial-widget__symbol svg path,
.home-hero .hero-radial-widget__symbol svg line,
.home-hero .hero-radial-widget__symbol svg rect,
.home-hero .hero-radial-widget__symbol svg circle,
.home-hero .hero-radial-widget__symbol svg polyline,
.home-hero .hero-radial-widget__symbol svg polygon {
  vector-effect: non-scaling-stroke;
}

.home-hero .hero-radial-widget__symbol[data-principle="clarity"] svg,
.home-hero .hero-radial-widget__symbol[data-principle="focus"] svg,
.home-hero .hero-radial-widget__symbol[data-principle="coherence"] svg {
  width: 76%;
  height: 76%;
}

.home-hero .hero-radial-widget__symbol[data-principle="identity"] svg,
.home-hero .hero-radial-widget__symbol[data-principle="purpose"] svg,
.home-hero .hero-radial-widget__symbol[data-principle="performance"] svg {
  width: 78%;
  height: 78%;
}

@media (max-width: 640px) {
  .home-hero .hero-radial-widget__symbol {
    width: clamp(2.9rem, 18vw, 4.4rem);
    height: clamp(2.9rem, 18vw, 4.4rem);
  }
}

/* Mobile-only hero rendering repair — keeps the desktop version unchanged. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* The custom cursor/orb is useful on desktop but overlaps CTAs on touch/mobile. */
  .cursor-atom,
  .cursor-atom * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
  }

  .content {
    padding-inline: clamp(0.5rem, 2.6vw, 0.9rem) !important;
    padding-top: clamp(0.45rem, 1.8vw, 0.75rem) !important;
    padding-bottom: calc(var(--nav-height-mobile, 64px) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }

  .home-hero.section {
    min-height: auto !important;
    height: auto !important;
    padding-block: 0 !important;
    margin-bottom: clamp(1rem, 4vw, 1.5rem) !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - clamp(0.7rem, 3vw, 1.2rem))) !important;
    max-width: calc(100vw - clamp(0.7rem, 3vw, 1.2rem)) !important;
    min-height: auto !important;
    height: auto !important;
    margin-inline: auto !important;
    padding:
      clamp(0.92rem, 3vw, 1.18rem)
      clamp(0.72rem, 3vw, 0.95rem)
      clamp(0.92rem, 3vw, 1.08rem) !important;
    border-radius: clamp(20px, 6vw, 30px) !important;
    display: block !important;
  }

  .home-hero .hero-text--widget {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.48rem, 2.2vw, 0.78rem) !important;
  }

  .home-hero .hero-brand {
    width: 100% !important;
    margin: 0 auto 0.05rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    max-width: 100% !important;
    font-size: clamp(1.72rem, 8.9vw, 2.52rem) !important;
    line-height: 0.9 !important;
    letter-spacing: clamp(0.035em, 1.4vw, 0.082em) !important;
    text-indent: clamp(0.035em, 1.4vw, 0.082em) !important;
    transform: none !important;
  }

  .hero-byline.hero-byline--brand {
    max-width: 100% !important;
    margin: 0 auto clamp(0.15rem, 1vw, 0.3rem) !important;
    font-size: clamp(0.66rem, 2.55vw, 0.84rem) !important;
    line-height: 1.1 !important;
    letter-spacing: clamp(0.09em, 1.3vw, 0.16em) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .home-hero .hero-radial-widget {
    /* Smaller, safer orbit so beads are never clipped by the card on mobile. */
    --widget-size: clamp(230px, 64vw, 286px) !important;
    --core-size: clamp(92px, 28vw, 122px) !important;
    --orbit: calc(var(--widget-size) / 2 - clamp(24px, 6vw, 30px)) !important;
    width: var(--widget-size) !important;
    height: var(--widget-size) !important;
    min-width: 0 !important;
    max-width: min(100%, 286px) !important;
    margin: clamp(0.16rem, 1vw, 0.34rem) auto clamp(0.28rem, 1.4vw, 0.5rem) !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,0.32)) !important;
  }

  .home-hero .hero-radial-widget::before {
    inset: 11.5% !important;
    opacity: 0.68 !important;
  }

  .home-hero .hero-radial-widget::after {
    inset: 19% !important;
    opacity: 0.42 !important;
    filter: blur(13px) !important;
  }

  .home-hero .hero-radial-widget__core {
    width: var(--core-size) !important;
    height: var(--core-size) !important;
    min-width: var(--core-size) !important;
    min-height: var(--core-size) !important;
    padding: clamp(0.42rem, 2vw, 0.65rem) !important;
  }

  .home-hero .hero-radial-widget__symbol {
    width: clamp(2.45rem, 14vw, 3.55rem) !important;
    height: clamp(2.45rem, 14vw, 3.55rem) !important;
  }

  .home-hero .hero-radial-widget__symbol svg {
    width: 72% !important;
    height: 72% !important;
    stroke-width: 2.45 !important;
  }

  .home-hero .hero-radial-widget__label,
  .home-hero .hero-radial-widget__word,
  .home-hero .hero-radial-widget__note {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(15px, 4.5vw, 19px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  .home-hero .hero-radial-widget__dot::before {
    width: calc(var(--size) + 7px) !important;
    height: calc(var(--size) + 7px) !important;
  }

  .home-hero .hero-radial-widget__dot::after {
    width: calc(var(--size) + 15px) !important;
    height: calc(var(--size) + 15px) !important;
  }

  .hero-radial-widget__tooltip {
    display: none !important;
  }

  .home-hero .hero-mode-readout {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: clamp(0.72rem, 3vw, 0.9rem) clamp(0.8rem, 4vw, 1rem) !important;
    border-radius: clamp(18px, 5vw, 26px) !important;
    gap: 0.18rem !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: clamp(0.62rem, 2.45vw, 0.72rem) !important;
    letter-spacing: 0.18em !important;
  }

  .home-hero .hero-mode-readout strong {
    font-size: clamp(1.25rem, 6.2vw, 1.72rem) !important;
    line-height: 1 !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 24ch !important;
    margin-inline: auto !important;
    font-size: clamp(0.74rem, 3.1vw, 0.88rem) !important;
    line-height: 1.2 !important;
  }

  .home-hero .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(0.45rem, 2vw, 0.65rem) auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(0.46rem, 2vw, 0.62rem) !important;
  }

  .home-hero .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0.78rem 1rem !important;
    border-radius: 16px !important;
    font-size: clamp(0.92rem, 3.85vw, 1.02rem) !important;
    line-height: 1.1 !important;
  }

  .bottom-nav {
    height: calc(var(--nav-height-mobile, 64px) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

@media (max-width: 390px) {
  .home-hero .hero-overlay {
    padding-inline: 0.62rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.55rem, 8.3vw, 2.05rem) !important;
    letter-spacing: 0.035em !important;
    text-indent: 0.035em !important;
  }

  .hero-byline.hero-byline--brand {
    font-size: 0.62rem !important;
    letter-spacing: 0.085em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: clamp(214px, 62vw, 252px) !important;
    --core-size: clamp(84px, 26vw, 106px) !important;
  }
}