/* Final polish pass — Mattia portfolio targeted fixes */
:root {
  --wp-panel-bg: linear-gradient(180deg, rgba(49, 56, 66, 0.92), rgba(33, 39, 49, 0.95));
  --wp-panel-border: rgba(118, 189, 255, 0.18);
  --wp-panel-shadow: 0 20px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.05);
  --wp-panel-shadow-strong: 0 26px 56px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  --wp-pill-bg: linear-gradient(180deg, rgba(13, 19, 28, 0.78), rgba(18, 26, 34, 0.94));
  --wp-pill-border: rgba(88, 194, 255, 0.42);
}

html, body {
  overflow-x: clip;
}

body {
  background-color: #081019;
}

/* ---------- Home hero polish ---------- */
.home-hero.section {
  min-height: auto;
  padding-block: clamp(0.8rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem);
}

.home-hero .hero-overlay {
  width: min(100%, 1110px) !important;
  max-width: 1110px !important;
  min-height: clamp(700px, 78vh, 860px);
  margin-inline: auto;
  padding: clamp(1.25rem, 2vw, 1.8rem) clamp(1rem, 2.4vw, 1.95rem) clamp(1.25rem, 2.1vw, 1.8rem) !important;
  border-radius: 34px !important;
  overflow: hidden;
}

.home-hero .hero-text--widget {
  gap: clamp(0.65rem, 1.3vw, 0.95rem);
  min-height: 100%;
  padding-block: 0.15rem;
}

.home-hero .hero-text h1.hero-brand {
  margin-bottom: 0.2rem !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.75rem, 6vw, 5.25rem) !important;
  line-height: 0.9 !important;
}

.hero-byline.hero-byline--brand {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2em;
  align-self: center;
  margin: 0 auto 0.2rem !important;
  max-width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2vw, 1.62rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.12em !important;
  text-indent: 0.12em !important;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,0.34)) drop-shadow(0 10px 13px rgba(0,0,0,0.42));
}

.hero-byline.hero-byline--brand .brand-letter {
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 20%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(243,248,252,0.98) 0%, color-mix(in srgb, var(--hero-mode-color, #44d9ff) 50%, white 50%) 38%, color-mix(in srgb, var(--hero-mode-color, #44d9ff) 78%, #1b2f3f 22%) 70%, rgba(30, 43, 59, 0.98) 100%) !important;
  background-size: 220% 100%, 100% 100% !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 900 !important;
}

.home-hero .hero-radial-widget {
  margin: 0.15rem auto 0.1rem !important;
  --widget-size: min(61vw, 486px);
  --core-size: min(23vw, 190px);
  --line-distance: calc(var(--widget-size) * 0.31);
}

.home-hero .hero-radial-widget__core {
  box-shadow:
    inset 0 0 24px rgba(255,255,255,0.10),
    inset 0 0 42px rgba(var(--hero-mode-rgb),0.12),
    0 0 0 1px rgba(255,255,255,0.20),
    0 18px 42px rgba(0,0,0,0.40) !important;
}

.home-hero .hero-radial-widget__energy-line {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(var(--hero-mode-rgb), 0.02), rgba(var(--hero-mode-rgb), 0.82) 52%, rgba(var(--hero-mode-rgb), 0.1)) !important;
  box-shadow: 0 0 12px rgba(var(--hero-mode-rgb), 0.22) !important;
  opacity: 0.92;
  border-radius: 999px;
}
.home-hero .hero-radial-widget__energy-line::before,
.home-hero .hero-radial-widget__energy-line::after {
  content: none !important;
}

.hero-radial-widget__tooltip {
  opacity: 0 !important;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.92) !important;
  transition: opacity 180ms ease, transform 180ms ease;
  padding: 0.42rem 0.78rem !important;
  border-radius: 999px !important;
  background: rgba(10, 16, 24, 0.88) !important;
  border: 1px solid color-mix(in srgb, var(--dot-color) 38%, white 10%) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.home-hero .hero-radial-widget__dot:hover .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot:focus-visible .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__tooltip {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

.home-hero .hero-radial-widget__dot {
  --size: clamp(20px, 1.56vw, 26px) !important;
}

.home-hero .hero-radial-widget__dot::before {
  opacity: 0.5;
}

.home-hero .hero-radial-widget__dot::after {
  opacity: 0.16;
}

.home-hero .hero-mode-readout {
  min-height: 4.6rem !important;
  max-width: min(100%, 38rem);
  margin-inline: auto;
}

.home-hero .hero-actions {
  margin-top: 0.35rem;
}

/* Clean panel underneath hero / remove overbearing layered noise */
.home-foundations.section,
.services.section,
.about-journey-section,
.work-vibes-section,
.tools-section {
  position: relative;
  z-index: 1;
}

/* ---------- Feature cards ---------- */
.feature-grid {
  align-items: stretch;
}

.feature-panel {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  min-height: 100%;
  border: 1px solid var(--wp-panel-border) !important;
  background: linear-gradient(180deg, rgba(55, 63, 74, 0.92), rgba(35, 42, 53, 0.95)) !important;
  box-shadow: var(--wp-panel-shadow) !important;
  overflow: hidden;
}

.feature-panel::before {
  opacity: 0.42 !important;
  background: radial-gradient(circle at 18% 16%, rgba(64, 203, 255, 0.14), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

.feature-panel .panel-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(75, 112, 142, 0.22), rgba(44, 67, 92, 0.12)) !important;
  border: 1px solid rgba(92, 207, 255, 0.18) !important;
  color: #44d9ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 28px rgba(0, 0, 0, 0.18);
}

.feature-panel .panel-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.85;
}

.feature-panel p {
  margin-bottom: 0;
}

.feature-panel .panel-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(9, 17, 26, 0.68), rgba(19, 28, 39, 0.92));
  border: 1px solid rgba(69, 199, 255, 0.35);
  color: #4bdcff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Service cards ---------- */
.services-matrix {
  align-items: stretch;
}

.service-card-button {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.82rem;
  min-height: 100%;
  border: 1px solid var(--wp-panel-border) !important;
  background: var(--wp-panel-bg) !important;
  box-shadow: var(--wp-panel-shadow) !important;
  overflow: hidden;
}

.service-card-button::before {
  opacity: 0.28 !important;
}

.service-card-button .panel-icon {
  width: 66px !important;
  height: 66px !important;
  border-radius: 22px !important;
  color: #44d9ff !important;
  background: linear-gradient(180deg, rgba(74, 112, 140, 0.20), rgba(32, 55, 76, 0.10)) !important;
  border: 1px solid rgba(84, 196, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 24px rgba(0,0,0,0.16);
}

.service-card-button h3,
.feature-panel h3 {
  margin-bottom: 0 !important;
}

.service-card-button p {
  margin-bottom: 0 !important;
}

.service-card-button ul {
  margin: 0;
  padding-left: 1.1rem;
}

.service-card-button li:last-child {
  margin-bottom: 0;
}

.service-card-button .tag {
  margin-top: auto !important;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.66rem 0.95rem;
  border-radius: 999px;
  background: var(--wp-pill-bg) !important;
  border: 1px solid var(--wp-pill-border) !important;
  color: rgba(247, 252, 255, 0.92) !important;
  font-size: 0.95rem;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.service-card-button .panel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.15rem 0;
  margin-top: 0 !important;
  color: #4bdcff !important;
  font-weight: 700;
}

.service-card-button .panel-link::after,
.feature-panel .panel-link::after {
  content: "→";
  font-weight: 700;
}

/* ---------- About timeline sticky panel ---------- */
.timeline-container {
  align-items: start !important;
}

.timeline-support {
  position: sticky !important;
  top: 1.35rem !important;
  align-self: start !important;
  max-height: calc(100svh - 2.6rem) !important;
  overflow: auto !important;
}

/* Remove redundant section spacing gap after qualifications removal */
.about-journey-section {
  margin-bottom: 0.35rem;
}

/* ---------- Responsive fixes ---------- */
@media (max-width: 992px) {
  .home-hero .hero-overlay {
    min-height: clamp(640px, 72vh, 760px);
  }
  .home-hero .hero-radial-widget {
    --widget-size: min(72vw, 430px);
    --core-size: min(26vw, 170px);
  }
}

@media (max-width: 768px) {
  .content {
    padding-bottom: calc(var(--nav-height-mobile) + 1.2rem) !important;
  }

  .home-hero.section {
    min-height: auto !important;
    padding-top: 0.25rem !important;
    padding-bottom: 1.2rem !important;
    margin-bottom: 0.2rem;
  }

  .home-hero .hero-overlay {
    width: min(100%, 100%) !important;
    min-height: auto !important;
    padding: 1rem 0.88rem 1.2rem !important;
    border-radius: 28px !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.78rem;
    justify-content: flex-start;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.25rem, 9vw, 3.1rem) !important;
    letter-spacing: 0.09em !important;
    text-indent: 0.09em !important;
  }

  .hero-byline.hero-byline--brand {
    font-size: clamp(0.82rem, 3.9vw, 1.05rem) !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
    line-height: 1.06 !important;
    max-width: 100%;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(82vw, 340px) !important;
    --core-size: min(42vw, 144px) !important;
    margin-top: 0.1rem !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(18px, 4.7vw, 22px) !important;
  }

  .hero-radial-widget__tooltip {
    font-size: 0.76rem !important;
    padding: 0.36rem 0.62rem !important;
  }

  .home-hero .hero-mode-readout {
    min-height: 4rem !important;
    width: min(100%, 22rem);
    padding-inline: 0.25rem;
  }

  .home-hero .hero-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
  }

  .home-hero .hero-actions .btn {
    width: min(100%, 240px) !important;
    min-width: 0 !important;
  }

  .timeline-support {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

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

  .home-foundations.section,
  .services.section,
  .about-journey-section,
  .work-vibes-section,
  .tools-section {
    margin-top: 0;
  }

  .feature-panel,
  .service-card-button {
    border-radius: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-radial-widget__tooltip,
  .feature-panel,
  .service-card-button {
    transition: none !important;
  }
}


/* Final background cleanup — remove extra decorative layers while preserving dark premium panels */
html,
body {
  background: #071018 !important;
}

.app,
.content,
.stage,
.scene {
  background: transparent !important;
}

.content::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(31, 83, 103, 0.16), transparent 34%),
    linear-gradient(180deg, #071018 0%, #09151f 46%, #071018 100%);
}

.home-scene::before,
.home-scene::after,
.about-scene::before,
.about-scene::after,
.process-scene::before,
.process-scene::after,
.portfolio-scene::before,
.portfolio-scene::after,
.contact-scene::before,
.contact-scene::after {
  display: none !important;
  content: none !important;
}

.home-hero .hero-overlay::before,
.home-hero .hero-overlay::after,
.process-hero .hero-overlay::before,
.process-hero .hero-overlay::after,
.feature-panel::before,
.feature-panel::after,
.service-card-button::before,
.service-card-button::after,
.home-case-card::before,
.home-case-card::after,
.about-panel::before,
.about-panel::after,
.values-card::before,
.values-card::after,
.stack-card::before,
.stack-card::after,
.vibe-card::before,
.vibe-card::after,
.portfolio-panel::before,
.portfolio-panel::after,
.concept-card::before,
.concept-card::after,
.contact-hero__shell::before,
.contact-hero__shell::after,
.contact-panel::before,
.contact-panel::after,
.light-sweep::before,
.light-sweep::after,
.card-3d::before,
.card-3d::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.home-hero .hero-overlay {
  background:
    radial-gradient(circle at 50% 24%, rgba(var(--hero-mode-rgb, 68,217,255), 0.12), transparent 48%),
    linear-gradient(180deg, rgba(46, 55, 68, 0.82), rgba(19, 27, 38, 0.88)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.feature-panel,
.service-card-button,
.about-panel,
.timeline-entry,
.timeline-inline-panel,
.timeline-support,
.work-vibes-carousel,
.vibe-card,
.stack-card,
.values-card,
.portfolio-panel,
.concept-card,
.contact-card,
.contact-hero__shell {
  background: linear-gradient(180deg, rgba(46, 55, 66, 0.88), rgba(25, 32, 42, 0.94)) !important;
  border-color: rgba(98, 184, 231, 0.18) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.23), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.home-hero .hero-radial-widget::after {
  opacity: 0.08 !important;
  animation: none !important;
  filter: blur(8px) !important;
}

.home-hero .hero-radial-widget::before {
  opacity: 0.42 !important;
  box-shadow: none !important;
}

.hero-radial-widget__core::after {
  opacity: 0.34 !important;
  filter: blur(5px) !important;
}

.hero-radial-widget__dot.is-active {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.12),
    0 0 18px color-mix(in srgb, var(--dot-color) 72%, transparent),
    0 0 30px color-mix(in srgb, var(--dot-color) 24%, transparent) !important;
}

.hero-mode-readout,
.service-card-button .tag,
.feature-panel .panel-link {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Hero widget refinement pass — harmonious motion, fitting, and hover polish */
.home-hero.section {
  padding-block: clamp(1rem, 2vw, 1.6rem) clamp(1.35rem, 2.4vw, 2rem);
}

.home-hero .hero-overlay {
  width: min(100%, 1140px) !important;
  max-width: 1140px !important;
  min-height: clamp(760px, 84vh, 920px) !important;
  padding: clamp(1.35rem, 2.1vw, 1.95rem) clamp(1.05rem, 2.6vw, 2rem) clamp(1.7rem, 3vw, 2.35rem) !important;
  background: linear-gradient(180deg, rgba(61, 68, 84, 0.82), rgba(40, 46, 60, 0.88)) !important;
  border: 1px solid rgba(138, 198, 255, 0.18) !important;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.home-hero .hero-text--widget {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.4vw, 1rem);
  min-height: 100%;
}

.home-hero .hero-brand {
  margin-bottom: 0.1rem !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.85rem, 6vw, 5.3rem) !important;
}

.hero-byline.hero-byline--brand {
  margin: 0 auto 0.15rem !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.36)) drop-shadow(0 14px 18px rgba(0,0,0,0.46));
}

.home-hero .hero-radial-widget {
  --widget-size: min(58vw, 470px) !important;
  --core-size: min(22vw, 182px) !important;
  --orbit: calc(var(--widget-size) / 2 - 21px) !important;
  margin: 0.2rem auto 0.2rem !important;
  transform: none !important;
  animation: heroWidgetFloat 7.5s ease-in-out infinite;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.28));
}

.home-hero .hero-radial-widget::before {
  inset: 8.5% !important;
  border-radius: 50%;
  border: 1px solid rgba(var(--hero-mode-rgb), 0.16) !important;
  background: radial-gradient(circle, rgba(8, 12, 18, 0.26) 0 39%, transparent 40%), conic-gradient(from calc(var(--active-line-angle) - 8deg), rgba(var(--hero-mode-rgb), 0.28) 0 10%, rgba(var(--hero-mode-rgb), 0.1) 10% 16%, transparent 16% 100%) !important;
  box-shadow: inset 0 0 34px rgba(0,0,0,0.28), inset 0 0 72px rgba(var(--hero-mode-rgb),0.06), 0 0 24px rgba(var(--hero-mode-rgb),0.09) !important;
  opacity: 0.96;
  animation: none !important;
}

.home-hero .hero-radial-widget::after {
  inset: 16% !important;
  background: radial-gradient(circle, rgba(var(--hero-mode-rgb), 0.18), rgba(var(--hero-mode-rgb), 0.05) 45%, transparent 72%) !important;
  filter: blur(16px) !important;
  opacity: 0.58 !important;
  animation: heroHubHalo 7s ease-in-out infinite !important;
}

.home-hero .hero-radial-widget__core {
  box-shadow: inset 0 0 20px rgba(255,255,255,0.08), inset 0 0 36px rgba(var(--hero-mode-rgb),0.08), 0 0 0 1px rgba(255,255,255,0.18), 0 16px 36px rgba(0,0,0,0.36) !important;
}

.home-hero .hero-radial-widget__core::before {
  opacity: 0.5 !important;
}

.home-hero .hero-radial-widget__core::after {
  opacity: 0.68 !important;
}

.home-hero .hero-radial-widget__label {
  text-shadow: 0 1px 0 rgba(255,255,255,0.34), 0 10px 22px rgba(0,0,0,0.26) !important;
}

.home-hero .hero-radial-widget__energy-line,
.home-hero .hero-radial-widget__energy-line::before,
.home-hero .hero-radial-widget__energy-line::after {
  display: none !important;
}

.home-hero .hero-radial-widget__dot {
  --size: clamp(20px, 1.46vw, 24px) !important;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1), filter 240ms ease, opacity 240ms ease !important;
}

.home-hero .hero-radial-widget__dot::before {
  opacity: 0.34 !important;
}

.home-hero .hero-radial-widget__dot::after {
  opacity: 0.13 !important;
}

.hero-radial-widget__tooltip {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  padding: 0.42rem 0.74rem !important;
  font-size: 0.74rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  transform: translate(-50%, 8px) rotate(calc(var(--i) * -30deg)) scale(0.94) !important;
}

.home-hero .hero-radial-widget__dot:hover,
.home-hero .hero-radial-widget__dot:focus-visible,
.home-hero .hero-radial-widget__dot.is-active {
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc((var(--orbit) - 2px) * -1)) scale(1.09) !important;
  filter: brightness(1.08) saturate(1.08);
}

.home-hero .hero-radial-widget__dot:hover .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot:focus-visible .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__tooltip {
  transform: translate(-50%, 0) rotate(calc(var(--i) * -30deg)) scale(1) !important;
}

.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__bead {
  animation: heroActiveBead 3.4s ease-in-out infinite;
}

.home-hero .hero-mode-readout {
  position: relative;
  z-index: 2;
  gap: 0.36rem;
  min-height: 5rem !important;
  max-width: min(100%, 38rem);
  margin-top: 0.28rem !important;
}

.home-hero .hero-mode-readout__kicker {
  color: rgba(227, 240, 250, 0.58) !important;
}

.home-hero .hero-mode-readout strong {
  letter-spacing: 0.01em;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  max-width: 36rem;
}

.home-hero .hero-actions {
  width: min(560px, 100%) !important;
  margin-top: 0.55rem !important;
}

.home-hero .hero-actions .btn {
  position: relative;
  overflow: hidden;
}

.home-hero .hero-actions .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 26%, transparent 52%);
  opacity: 0;
  transform: translateX(-120%);
  transition: transform 320ms ease, opacity 220ms ease;
  pointer-events: none;
}

.home-hero .hero-actions .btn:hover,
.home-hero .hero-actions .btn:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.28), 0 0 0 1px rgba(var(--hero-mode-rgb),0.16), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.home-hero .hero-actions .btn:hover::before,
.home-hero .hero-actions .btn:focus-visible::before {
  opacity: 1;
  transform: translateX(120%);
}

@keyframes heroWidgetFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 992px) {
  .home-hero .hero-overlay {
    min-height: clamp(700px, 80vh, 820px) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(68vw, 420px) !important;
    --core-size: min(25vw, 164px) !important;
  }
}

@media (max-width: 768px) {
  .home-hero.section {
    padding-top: 0.25rem !important;
    padding-bottom: 1.35rem !important;
  }

  .home-hero .hero-overlay {
    min-height: auto !important;
    padding: 1rem 0.82rem calc(1.55rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 26px !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.82rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(82vw, 320px) !important;
    --core-size: min(38vw, 134px) !important;
    margin: 0.15rem auto 0.05rem !important;
    animation: heroWidgetFloat 8s ease-in-out infinite;
  }

  .home-hero .hero-radial-widget::before {
    inset: 10% !important;
  }

  .home-hero .hero-radial-widget::after {
    inset: 19% !important;
    opacity: 0.46 !important;
  }

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

  .home-hero .hero-mode-readout {
    width: min(100%, 21rem) !important;
    min-height: auto !important;
    gap: 0.28rem;
    margin-top: 0.15rem !important;
  }

  .home-hero .hero-mode-readout strong {
    font-size: clamp(1rem, 5vw, 1.32rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  .home-hero .hero-actions {
    margin-top: 0.35rem !important;
    gap: 0.7rem !important;
  }
}

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

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.1rem, 11vw, 2.8rem) !important;
  }

  .hero-byline.hero-byline--brand {
    font-size: clamp(0.78rem, 4vw, 0.98rem) !important;
  }
}

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

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative;
  z-index: 2;
}

/* Remove the active/pie effect inside the circular widget itself */
.home-hero .hero-radial-widget::before {
  background:
    radial-gradient(circle, rgba(8, 12, 18, 0.30) 0 39%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), rgba(255,255,255,0.005) 56%, rgba(255,255,255,0.015) 72%, transparent 74%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,0.30),
    inset 0 0 72px rgba(255,255,255,0.02),
    0 0 20px rgba(0,0,0,0.12) !important;
  animation: none !important;
}

.home-hero .hero-radial-widget::after {
  background: radial-gradient(circle, rgba(var(--hero-mode-rgb), 0.12), rgba(var(--hero-mode-rgb), 0.03) 44%, transparent 72%) !important;
  opacity: 0.42 !important;
}

@media (max-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* Micro-pass: subtitle alignment and hero vertical fitting */
.home-hero .hero-overlay {
  min-height: clamp(800px, 86vh, 940px) !important;
  padding-bottom: clamp(2rem, 3.2vw, 2.8rem) !important;
}

.home-hero .hero-text--widget {
  justify-content: flex-start !important;
  gap: clamp(0.95rem, 1.8vw, 1.3rem) !important;
}

.home-hero .hero-brand {
  margin-bottom: 0.1rem !important;
}

.hero-byline.hero-byline--brand {
  align-self: center !important;
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto 0.45rem !important;
  padding-inline: 0.45rem;
  text-align: center;
  text-wrap: balance;
  line-height: 1.08 !important;
  letter-spacing: 0.105em !important;
  text-indent: 0.105em !important;
  font-size: clamp(0.98rem, 1.7vw, 1.38rem) !important;
}

.home-hero .hero-radial-widget {
  margin-top: 0.35rem !important;
  margin-bottom: 0.65rem !important;
}

.home-hero .hero-mode-readout {
  width: min(100%, 42rem) !important;
  min-height: 5.4rem !important;
  margin-top: 0.15rem !important;
  margin-bottom: 0.1rem !important;
  padding-inline: 0.5rem;
}

.home-hero .hero-mode-readout__kicker {
  margin-bottom: 0.08rem;
}

.home-hero .hero-actions {
  margin-top: 0.85rem !important;
  padding-bottom: 0.15rem;
}

@media (max-width: 992px) {
  .home-hero .hero-overlay {
    min-height: clamp(760px, 84vh, 860px) !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 860px);
    font-size: clamp(0.92rem, 1.9vw, 1.18rem) !important;
  }
}

@media (max-width: 768px) {
  .home-hero .hero-overlay {
    min-height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.72rem !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 24rem);
    margin-bottom: 0.25rem !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
    font-size: clamp(0.78rem, 3.7vw, 0.98rem) !important;
  }

  .home-hero .hero-radial-widget {
    margin-top: 0.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 21.5rem) !important;
    margin-top: 0.05rem !important;
    padding-inline: 0.2rem;
  }

  .home-hero .hero-actions {
    margin-top: 0.55rem !important;
  }
}

@media (max-width: 480px) {
  .hero-byline.hero-byline--brand {
    width: min(100%, 20rem);
    font-size: clamp(0.74rem, 3.9vw, 0.9rem) !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 19.5rem) !important;
  }
}


/* Ultra-fine pass: mobile hero proportions + remove orbit dot label text */
.hero-radial-widget__tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.home-hero .hero-radial-widget__dot:hover .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot:focus-visible .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}

.home-hero .hero-radial-widget {
  margin-bottom: 0.8rem !important;
}

.home-hero .hero-mode-readout {
  width: min(100%, 40rem) !important;
}

/* Keep desktop hero breathing space consistent */
.home-hero .hero-actions {
  padding-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .home-hero.section {
    padding-top: 0.15rem !important;
    padding-bottom: 1.45rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1rem)) !important;
    padding: 0.9rem 0.72rem calc(2.1rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 24px !important;
    min-height: auto !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.62rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2rem, 10vw, 2.7rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.085em !important;
    text-indent: 0.085em !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 19.5rem) !important;
    margin-bottom: 0.18rem !important;
    padding-inline: 0.15rem !important;
    font-size: clamp(0.72rem, 3.6vw, 0.9rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.07em !important;
    text-indent: 0.07em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(80vw, 308px) !important;
    --core-size: min(36vw, 128px) !important;
    --orbit: calc(var(--widget-size) / 2 - 19px) !important;
    margin-top: 0.02rem !important;
    margin-bottom: 0.32rem !important;
  }

  .home-hero .hero-radial-widget::before {
    inset: 10.5% !important;
  }

  .home-hero .hero-radial-widget::after {
    inset: 20% !important;
    opacity: 0.34 !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(16px, 4.3vw, 20px) !important;
  }

  .home-hero .hero-radial-widget__dot:hover,
  .home-hero .hero-radial-widget__dot:focus-visible,
  .home-hero .hero-radial-widget__dot.is-active {
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc((var(--orbit) - 1px) * -1)) scale(1.05) !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 18.8rem) !important;
    min-height: auto !important;
    gap: 0.22rem !important;
    margin-top: 0.02rem !important;
    margin-bottom: 0 !important;
    padding-inline: 0.05rem !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.73rem !important;
    letter-spacing: 0.12em !important;
  }

  .home-hero .hero-mode-readout strong {
    font-size: clamp(0.98rem, 4.7vw, 1.22rem) !important;
    line-height: 1.04 !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.84rem !important;
    line-height: 1.32 !important;
    max-width: 19rem !important;
  }

  .home-hero .hero-actions {
    width: min(100%, 18.8rem) !important;
    margin-top: 0.45rem !important;
    gap: 0.62rem !important;
    padding-bottom: 0 !important;
  }

  .home-hero .hero-actions .btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0.82rem 1rem !important;
    font-size: 0.92rem !important;
  }
}

@media (max-width: 480px) {
  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.8rem)) !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.88rem, 10.4vw, 2.45rem) !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 18rem) !important;
    font-size: clamp(0.68rem, 3.8vw, 0.84rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(78vw, 290px) !important;
    --core-size: min(35vw, 120px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 17.8rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-radial-widget__tooltip {
    display: none !important;
  }
}

/* Final hero QA pass: remove all orbit labels, rebalance hero fitting, restore coherent rounded panel shape */
.home-hero.section {
  padding-block: clamp(0.85rem, 1.8vw, 1.4rem) clamp(1.2rem, 2.2vw, 1.8rem) !important;
}

.home-hero .hero-overlay {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  min-height: clamp(840px, 88vh, 940px) !important;
  padding: clamp(1.35rem, 2vw, 1.8rem) clamp(1rem, 2.4vw, 1.8rem) clamp(2.2rem, 3vw, 2.8rem) !important;
  border-radius: clamp(28px, 2.8vw, 40px) !important;
  background:
    linear-gradient(180deg, rgba(57, 64, 78, 0.90), rgba(39, 46, 59, 0.92)) !important;
  border: 1px solid rgba(145, 201, 255, 0.14) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(255,255,255,0.02) !important;
}

.home-hero .hero-overlay::before,
.home-hero .hero-overlay::after {
  opacity: 0.35 !important;
}

.home-hero .hero-text--widget {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.4vw, 1rem) !important;
}

.home-hero .hero-brand {
  margin-bottom: 0 !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.6rem, 5.7vw, 5rem) !important;
}

.hero-byline.hero-byline--brand {
  width: min(100%, 920px) !important;
  margin: 0 auto 0.18rem !important;
  padding-inline: 0.25rem !important;
  font-size: clamp(0.92rem, 1.55vw, 1.26rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.095em !important;
  text-indent: 0.095em !important;
}

.home-hero .hero-radial-widget {
  --widget-size: min(50vw, 420px) !important;
  --core-size: min(20vw, 172px) !important;
  --orbit: calc(var(--widget-size) / 2 - 20px) !important;
  margin: 0.15rem auto 0.25rem !important;
}

.home-hero .hero-radial-widget::before {
  inset: 9.5% !important;
}

.home-hero .hero-radial-widget::after {
  inset: 18% !important;
  opacity: 0.28 !important;
}

.home-hero .hero-radial-widget__dot {
  --size: clamp(18px, 1.3vw, 22px) !important;
}

.hero-radial-widget__tooltip,
.hero-radial-widget__tooltip::before,
.hero-radial-widget__tooltip::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  content: none !important;
  pointer-events: none !important;
}

.home-hero .hero-radial-widget__dot:hover .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot:focus-visible .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}

.home-hero .hero-mode-readout {
  align-self: center !important;
  width: min(100%, 34rem) !important;
  min-height: auto !important;
  margin-top: 0 !important;
  gap: 0.24rem !important;
  text-align: center !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  max-width: 32rem !important;
}

.home-hero .hero-actions {
  align-self: center !important;
  width: min(100%, 34rem) !important;
  margin-top: 0.45rem !important;
  justify-content: center !important;
  gap: 0.8rem !important;
}

.home-hero .hero-actions .btn {
  min-width: 210px !important;
}

@media (max-width: 992px) {
  .home-hero .hero-overlay {
    width: min(100%, 1000px) !important;
    min-height: clamp(780px, 84vh, 860px) !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(3rem, 7vw, 4.4rem) !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 760px) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(58vw, 390px) !important;
    --core-size: min(23vw, 160px) !important;
  }
}

@media (max-width: 768px) {
  .home-hero.section {
    padding-top: 0.1rem !important;
    padding-bottom: 1.3rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1rem)) !important;
    max-width: none !important;
    min-height: auto !important;
    padding: 0.9rem 0.75rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 26px !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.58rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2rem, 9.7vw, 2.65rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.075em !important;
    text-indent: 0.075em !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 19rem) !important;
    margin-bottom: 0.12rem !important;
    font-size: clamp(0.7rem, 3.45vw, 0.86rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.065em !important;
    text-indent: 0.065em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(77vw, 296px) !important;
    --core-size: min(35vw, 124px) !important;
    --orbit: calc(var(--widget-size) / 2 - 18px) !important;
    margin: 0.05rem auto 0.22rem !important;
  }

  .home-hero .hero-radial-widget::before {
    inset: 11% !important;
  }

  .home-hero .hero-radial-widget::after {
    inset: 20.5% !important;
    opacity: 0.22 !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(15px, 4vw, 19px) !important;
  }

  .home-hero .hero-radial-widget__dot:hover,
  .home-hero .hero-radial-widget__dot:focus-visible,
  .home-hero .hero-radial-widget__dot.is-active {
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc((var(--orbit) - 1px) * -1)) scale(1.04) !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 18.2rem) !important;
    gap: 0.18rem !important;
    margin-top: 0 !important;
    padding-inline: 0 !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.72rem !important;
    letter-spacing: 0.11em !important;
  }

  .home-hero .hero-mode-readout strong {
    font-size: clamp(0.96rem, 4.3vw, 1.14rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.82rem !important;
    line-height: 1.28 !important;
    max-width: 18rem !important;
  }

  .home-hero .hero-actions {
    width: min(100%, 18.2rem) !important;
    margin-top: 0.42rem !important;
    gap: 0.58rem !important;
  }

  .home-hero .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0.8rem 0.95rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.7rem)) !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    border-radius: 24px !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.84rem, 10vw, 2.34rem) !important;
  }

  .hero-byline.hero-byline--brand {
    width: min(100%, 17.8rem) !important;
    font-size: clamp(0.66rem, 3.6vw, 0.8rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(76vw, 282px) !important;
    --core-size: min(34vw, 116px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 17.2rem) !important;
  }
}


/* =========================================================
   Hero atmosphere enhancement pass — refined hover theme FX
   ========================================================= */

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

/* Remove any remaining internal circle activity while keeping the outer ambience lively */
.home-hero .hero-radial-widget::before {
  background:
    radial-gradient(circle, rgba(8, 12, 18, 0.34) 0 39%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02), rgba(255,255,255,0.01) 54%, transparent 74%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,0.30),
    inset 0 0 72px rgba(255,255,255,0.02),
    0 0 18px rgba(0,0,0,0.10) !important;
  animation: none !important;
}

.home-hero .hero-radial-widget__energy-line,
.home-hero .hero-radial-widget__energy-line::before,
.home-hero .hero-radial-widget__energy-line::after {
  display: none !important;
}

@keyframes heroAuraDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0.4%, -1.2%, 0) scale(1.03); }
}

@keyframes heroElectricArcSweep {
  0%,100% { transform: rotate(0deg) scale(0.98); filter: blur(2px) brightness(1); }
  50% { transform: rotate(5deg) scale(1.02); filter: blur(1px) brightness(1.08); }
}

@keyframes heroElectricThreads {
  from { background-position: 0 0, 0 0; }
  to { background-position: 180px -140px, -120px 180px; }
}

@keyframes heroFireShimmer {
  0%,100% { transform: translateY(0) scale(1); filter: blur(7px) brightness(0.96); }
  50% { transform: translateY(-1.2%) scale(1.03); filter: blur(5px) brightness(1.05); }
}

@keyframes heroEmberLift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 -180px, 32px -120px; }
}

@keyframes heroRainSheen {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 200px, 0 0; }
}

@keyframes heroWaterDrift {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-1.2%, 1%, 0); }
}

@keyframes heroWarmDraft {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(1.2%, -0.8%, 0); }
}

@keyframes heroLeafDriftSoft {
  0% { transform: translate3d(0,-1%,0) rotate(0deg); background-position: 0 0, 0 0; }
  50% { transform: translate3d(1.4%, 1%,0) rotate(2deg); }
  100% { transform: translate3d(-1%, 2%,0) rotate(-2deg); background-position: 28px 160px, -24px 120px; }
}

@keyframes heroNebulaMist {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0.8%, -1.4%, 0) scale(1.05); }
}

@keyframes heroStellarFloat {
  from { background-position: 0 0, 0 0; }
  to { background-position: -44px -120px, 34px -160px; }
}

@keyframes heroOrganicWave {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(1%, -0.8%, 0) scale(1.03); }
}

@keyframes heroGrowthBreath {
  0%,100% { transform: scale(1); opacity: 0.16; }
  50% { transform: scale(1.02); opacity: 0.24; }
}

@keyframes heroSignalRingExpand {
  0% { transform: scale(0.96); opacity: 0.12; }
  50% { transform: scale(1.02); opacity: 0.28; }
  100% { transform: scale(1.06); opacity: 0.10; }
}

@keyframes heroClarityScan {
  0%,100% { background-position: 0 42%, 62% 0; }
  50% { background-position: 0 60%, 44% 0; }
}

@keyframes heroLiquidRibbon {
  0%,100% { background-position: 0 0, 0 0; transform: translate3d(0,0,0); }
  50% { background-position: 100px -20px, -80px 20px; transform: translate3d(-0.8%, 0.8%, 0); }
}

@keyframes heroLiquidThreads {
  from { background-position: 0 0; }
  to { background-position: 160px -140px; }
}

@keyframes heroGridMeasure {
  0%,100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.015); opacity: 0.26; }
}

@keyframes heroPrecisionScan {
  0%,100% { background-position: 0 0; opacity: 0.12; }
  50% { background-position: 0 100%; opacity: 0.22; }
}

@keyframes heroCreativeBloomSoft {
  0%,100% { transform: scale(0.98); opacity: 0.18; }
  50% { transform: scale(1.04); opacity: 0.28; }
}

@keyframes heroCreativeFloat {
  from { background-position: 0 0, 0 0; }
  to { background-position: -40px -140px, 34px -180px; }
}

@keyframes heroPulseGrowthLight {
  0% { transform: scale(0.95); opacity: 0.12; }
  50% { transform: scale(1.02); opacity: 0.28; }
  100% { transform: scale(1.08); opacity: 0.08; }
}

@keyframes heroKineticDots {
  from { background-position: 0 0, 0 0; }
  to { background-position: 40px -100px, -30px -140px; }
}

@keyframes heroImpactDiffuse {
  0%,100% { transform: scale(0.98); opacity: 0.20; }
  50% { transform: scale(1.04); opacity: 0.30; }
}

@keyframes heroRadiantDust {
  from { background-position: 0 0, 0 0; }
  to { background-position: -30px -100px, 20px -140px; }
}

@media (max-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* =========================================================
   HERO LAYOUT REPAIR PASS — desktop/mobile alignment polish
   Moves readout and actions into balanced bottom glass panels,
   keeps the orbit hub centered, removes orbit text labels,
   and stabilizes vertical rhythm across desktop/mobile.
   ========================================================= */

.home-hero.section {
  min-height: clamp(760px, 92svh, 920px) !important;
  padding-block: clamp(0.6rem, 1.2vw, 1rem) !important;
}

.home-hero .hero-overlay {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(1080px, 100%) !important;
  min-height: clamp(720px, 84svh, 860px) !important;
  margin-inline: auto !important;
  padding: clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.25rem, 2vw, 1.8rem) clamp(1.7rem, 2.8vw, 2.3rem) !important;
}

.home-hero .hero-text--widget {
  width: min(100%, 980px) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(360px, 430px) minmax(210px, 1fr) !important;
  grid-template-areas:
    "brand brand brand"
    "byline byline byline"
    ". widget ."
    "readout . actions" !important;
  align-items: end !important;
  justify-items: center !important;
  gap: clamp(0.7rem, 1.35vw, 1.1rem) clamp(1rem, 2vw, 1.6rem) !important;
}

.home-hero .hero-brand {
  grid-area: brand;
  width: 100%;
  text-align: center;
  margin-bottom: 0 !important;
}

.home-hero .hero-byline {
  grid-area: byline;
  width: 100%;
  text-align: center;
  margin: 0 !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.15rem, 6vw, 5.45rem) !important;
  line-height: 0.9 !important;
}

.home-hero .hero-radial-widget {
  grid-area: widget;
  --widget-size: clamp(320px, 29vw, 390px) !important;
  --core-size: clamp(156px, 14.2vw, 188px) !important;
  justify-self: center !important;
  align-self: center !important;
  margin-top: clamp(0.2rem, 1vw, 0.6rem) !important;
  transform: translateY(0) !important;
}

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

.home-hero .hero-mode-readout,
.home-hero .hero-actions {
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 24px !important;
  border: 1px solid rgba(232, 243, 255, 0.12) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035) 38%, rgba(255,255,255,0.02) 100%),
    rgba(14, 19, 28, 0.34) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.home-hero .hero-mode-readout {
  grid-area: readout;
  justify-self: stretch !important;
  align-self: end !important;
  justify-items: start !important;
  text-align: left !important;
  gap: 0.32rem !important;
  padding: 1rem 1.05rem 1rem !important;
}

.home-hero .hero-mode-readout__kicker,
.home-hero .hero-mode-readout strong,
.home-hero .hero-mode-readout span[data-hero-mode-description] {
  text-align: left !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  max-width: 24ch !important;
}

.home-hero .hero-actions {
  grid-area: actions;
  justify-self: stretch !important;
  align-self: end !important;
  margin-top: 0 !important;
  padding: 0.9rem !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

.home-hero .hero-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
}

/* Keep the center hub visually neutral while allowing the background
   hover animation system to carry the thematic color shifts. */
.home-hero .hero-radial-widget::before {
  background:
    radial-gradient(circle, rgba(7, 11, 17, 0.36) 0 39%, transparent 40%),
    conic-gradient(from var(--active-line-angle), rgba(170, 186, 205, 0.24), rgba(255,255,255,0.07) 9%, transparent 15% 100%) !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,0.34),
    0 0 20px rgba(160, 176, 195, 0.12) !important;
}

.home-hero .hero-radial-widget::after {
  background: radial-gradient(circle, rgba(165, 180, 198, 0.12), rgba(165, 180, 198, 0.03) 42%, transparent 74%) !important;
}

.home-hero .hero-radial-widget__core {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.24) 0%, rgba(130,142,158,0.38) 18%, rgba(53,60,72,0.96) 46%, rgba(17,21,28,1) 74%, rgba(8,11,16,1) 100%),
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02) 44%, rgba(132,146,165,0.06) 68%, rgba(255,255,255,0.02)) !important;
  box-shadow:
    0 0 0 11px rgba(255,255,255,0.018),
    0 28px 58px rgba(0,0,0,0.48),
    0 0 26px rgba(155,171,191,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -20px 36px rgba(0,0,0,0.36) !important;
}

.home-hero .hero-radial-widget__core::before {
  background:
    radial-gradient(circle at 36% 21%, rgba(255,255,255,0.28), rgba(255,255,255,0.045) 33%, transparent 54%),
    repeating-conic-gradient(from 0deg, rgba(168,182,201,0.08) 0deg 10deg, transparent 10deg 26deg) !important;
}

.home-hero .hero-radial-widget__label {
  background-image:
    linear-gradient(118deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 16%, rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #ffffff 0%, #e8eef5 42%, #8f9db0 72%, #1b2430 100%) !important;
}

.home-hero .hero-radial-widget__energy-line {
  background: linear-gradient(90deg, transparent, rgba(170,186,205,0.44), transparent) !important;
  box-shadow: 0 0 12px rgba(170,186,205,0.16) !important;
}

/* Mobile and tablet stacking */
@media (max-width: 980px) {
  .home-hero .hero-overlay {
    width: min(960px, 100%) !important;
    min-height: auto !important;
  }

  .home-hero .hero-text--widget {
    width: min(100%, 760px) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "byline"
      "widget"
      "readout"
      "actions" !important;
    gap: 0.75rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(78vw, 360px) !important;
    --core-size: min(41vw, 174px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    justify-self: stretch !important;
    width: min(100%, 32rem) !important;
    margin-inline: auto !important;
  }

  .home-hero .hero-mode-readout {
    justify-items: center !important;
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker,
  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    text-align: center !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 32ch !important;
  }
}

@media (max-width: 640px) {
  .home-hero.section {
    min-height: auto !important;
    padding-top: 0.35rem !important;
    padding-bottom: 1rem !important;
  }

  .home-hero .hero-overlay {
    width: 100% !important;
    margin-top: 0.35rem !important;
    border-radius: 24px !important;
    min-height: auto !important;
    padding: 1.05rem 0.95rem 1.2rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.86rem, 10vw, 2.7rem) !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
  }

  .home-hero .hero-byline {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin-top: 0.05rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(82vw, 320px) !important;
    --core-size: min(40vw, 146px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: 100% !important;
    border-radius: 20px !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.85rem 0.8rem !important;
  }

  .home-hero .hero-actions {
    padding: 0.75rem !important;
    gap: 0.62rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 46px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 420px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.68rem, 9.3vw, 2.35rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(84vw, 304px) !important;
    --core-size: min(40vw, 140px) !important;
  }
}

/* =========================================================
   HERO VISUAL QA FIX — v3 viewport fitting + alignment pass
   Corrects the last desktop/mobile screenshots: no cropped
   brand, no oversized mobile widget, cleaner lower panels, and
   central orbit balanced between the header and bottom controls.
   ========================================================= */

.home-hero .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot > span:not(.hero-radial-widget__bead) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.home-hero .hero-overlay,
.home-hero .hero-text--widget,
.home-hero .hero-brand,
.home-hero .hero-byline,
.home-hero .hero-radial-widget,
.home-hero .hero-mode-readout,
.home-hero .hero-actions {
  box-sizing: border-box !important;
}

.home-hero .hero-mode-readout,
.home-hero .hero-actions {
  position: relative !important;
  z-index: 8 !important;
  isolation: isolate !important;
}

.home-hero .hero-mode-readout {
  overflow: hidden !important;
}

.home-hero .hero-mode-readout strong[data-hero-mode-word] {
  line-height: 1.05 !important;
  margin: 0 !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  display: block !important;
  line-height: 1.38 !important;
  margin-top: 0.18rem !important;
}

@media (min-width: 981px) {
  .home-hero.section {
    min-height: 100svh !important;
    padding-block: clamp(0.45rem, 1svh, 0.85rem) !important;
    display: grid !important;
    align-items: center !important;
  }

  .home-hero .hero-overlay {
    width: min(1040px, calc(100vw - 9rem)) !important;
    min-height: min(760px, calc(100svh - 1.6rem)) !important;
    max-height: calc(100svh - 1.6rem) !important;
    margin-inline: auto !important;
    padding: clamp(1rem, 1.75svh, 1.45rem) clamp(1.15rem, 2.2vw, 2rem) clamp(1rem, 1.8svh, 1.45rem) !important;
    overflow: hidden !important;
    border-radius: clamp(32px, 3vw, 44px) !important;
  }

  .home-hero .hero-text--widget {
    width: min(100%, 955px) !important;
    min-height: calc(min(760px, calc(100svh - 1.6rem)) - clamp(2rem, 3.6svh, 2.9rem)) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 265px) minmax(320px, 1fr) minmax(220px, 265px) !important;
    grid-template-rows: auto auto minmax(300px, 1fr) auto !important;
    grid-template-areas:
      "brand brand brand"
      "byline byline byline"
      ". widget ."
      "readout . actions" !important;
    align-content: space-between !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(0.38rem, 0.9svh, 0.72rem) clamp(0.85rem, 1.6vw, 1.35rem) !important;
    margin: 0 auto !important;
  }

  .home-hero .hero-brand {
    grid-area: brand !important;
    align-self: start !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(3.25rem, 4.85vw, 4.8rem) !important;
    line-height: 0.88 !important;
    letter-spacing: 0.12em !important;
    text-indent: 0.12em !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .home-hero .hero-byline {
    grid-area: byline !important;
    align-self: start !important;
    margin: 0 auto !important;
    font-size: clamp(0.9rem, 1.22vw, 1.08rem) !important;
    line-height: 1 !important;
    letter-spacing: clamp(0.22em, 0.58vw, 0.42em) !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .home-hero .hero-radial-widget {
    grid-area: widget !important;
    --widget-size: clamp(330px, 42svh, 385px) !important;
    --core-size: clamp(150px, 18svh, 178px) !important;
    --orbit: calc(var(--widget-size) / 2 - 20px) !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
    transform: translateY(clamp(0px, 0.6svh, 8px)) !important;
  }

  .home-hero .hero-mode-readout {
    grid-area: readout !important;
    justify-self: stretch !important;
    align-self: end !important;
    width: 100% !important;
    min-height: 112px !important;
    padding: 0.95rem 1rem 0.95rem !important;
    border-radius: 24px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.64rem !important;
    letter-spacing: 0.12em !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word] {
    font-size: clamp(1.45rem, 1.85vw, 2rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 22ch !important;
    font-size: 0.88rem !important;
  }

  .home-hero .hero-actions {
    grid-area: actions !important;
    justify-self: stretch !important;
    align-self: end !important;
    width: 100% !important;
    min-height: 112px !important;
    padding: 0.82rem !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 0.62rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 45px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.72rem 1rem !important;
    font-size: 0.92rem !important;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .home-hero .hero-overlay {
    width: min(1010px, calc(100vw - 9rem)) !important;
    min-height: calc(100svh - 1rem) !important;
    max-height: calc(100svh - 1rem) !important;
    padding-block: 0.82rem !important;
  }

  .home-hero .hero-text--widget {
    min-height: calc(100svh - 2.64rem) !important;
    grid-template-rows: auto auto minmax(270px, 1fr) auto !important;
    gap: 0.42rem 1.1rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.85rem, 4.55vw, 4.25rem) !important;
  }

  .home-hero .hero-byline {
    font-size: clamp(0.78rem, 1.08vw, 0.95rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: clamp(292px, 39svh, 340px) !important;
    --core-size: clamp(136px, 17svh, 160px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    min-height: 96px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 7.75rem)) !important;
  }
}

@media (max-width: 980px) {
  .home-hero.section {
    min-height: auto !important;
    padding-top: clamp(0.45rem, 2vw, 0.8rem) !important;
    padding-bottom: calc(var(--nav-height-mobile, 70px) + 1.15rem) !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1.5rem)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: clamp(0.9rem, 3vw, 1.12rem) clamp(0.72rem, 3vw, 1rem) clamp(0.92rem, 3vw, 1.08rem) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    display: block !important;
  }

  .home-hero .hero-text--widget {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas:
      "brand"
      "byline"
      "widget"
      "readout"
      "actions" !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: start !important;
    gap: clamp(0.46rem, 1.8vw, 0.68rem) !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .home-hero .hero-brand {
    grid-area: brand !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.58rem, 7.65vw, 2.52rem) !important;
    line-height: 0.94 !important;
    letter-spacing: 0.06em !important;
    text-indent: 0.06em !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .home-hero .hero-byline {
    grid-area: byline !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(0.55rem, 2.45vw, 0.72rem) !important;
    line-height: 1.08 !important;
    letter-spacing: clamp(0.18em, 1vw, 0.34em) !important;
    white-space: nowrap !important;
    text-align: center !important;
    transform: none !important;
  }

  .home-hero .hero-radial-widget {
    grid-area: widget !important;
    --widget-size: min(72vw, 294px) !important;
    --core-size: min(34vw, 132px) !important;
    --orbit: calc(var(--widget-size) / 2 - 18px) !important;
    margin: 0.05rem auto 0 !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .home-hero .hero-mode-readout {
    grid-area: readout !important;
    width: min(100%, 31rem) !important;
    min-height: 0 !important;
    padding: 0.78rem 0.88rem !important;
    border-radius: 22px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker,
  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.6rem !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word] {
    font-size: clamp(1.15rem, 5.5vw, 1.55rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 26ch !important;
    font-size: clamp(0.74rem, 3.5vw, 0.9rem) !important;
  }

  .home-hero .hero-actions {
    grid-area: actions !important;
    width: min(100%, 22rem) !important;
    min-height: 0 !important;
    padding: 0.74rem !important;
    border-radius: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.58rem !important;
  }

  .home-hero .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 0.68rem 0.85rem !important;
    font-size: 0.88rem !important;
  }
}

@media (max-width: 520px) {
  .home-hero.section {
    padding-top: 0.42rem !important;
    padding-bottom: calc(var(--nav-height-mobile, 70px) + 0.9rem) !important;
  }

  .home-hero .hero-overlay {
    width: calc(100vw - 1.25rem) !important;
    border-radius: 22px !important;
    padding: 0.82rem 0.62rem 0.9rem !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.42rem !important;
  }

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

  .home-hero .hero-byline {
    font-size: clamp(0.5rem, 2.16vw, 0.62rem) !important;
    letter-spacing: 0.2em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(70vw, 268px) !important;
    --core-size: min(32vw, 120px) !important;
    --orbit: calc(var(--widget-size) / 2 - 17px) !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(14px, 4vw, 17px) !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 28rem) !important;
    padding: 0.68rem 0.7rem !important;
  }

  .home-hero .hero-actions {
    width: min(100%, 19.6rem) !important;
    padding: 0.62rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 42px !important;
  }
}

@media (max-width: 380px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.36rem, 6.75vw, 1.82rem) !important;
  }

  .home-hero .hero-byline {
    font-size: 0.48rem !important;
    letter-spacing: 0.16em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(68vw, 244px) !important;
    --core-size: min(31vw, 112px) !important;
  }
}

/* =========================================================
   HERO QA FIX v4 — screenshot-specific layout, clean orbit dots,
   and stronger state-based premium background FX.
   ========================================================= */

/* Keep decorative layers behind the content and never interactive. */
.home-hero .hero-overlay {
  position: relative !important;
  isolation: isolate !important;
  transform: none !important;
}

.home-hero .hero-overlay:hover,
.home-hero .hero-overlay:focus-within {
  transform: translate3d(0, -2px, 0) !important;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), border-color 420ms ease, box-shadow 420ms ease !important;
}

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative !important;
  z-index: 3 !important;
}

/* Clean the orbit: no extra visible hit-area circles, no connector rays, only luminous colored beads. */
.home-hero .hero-radial-widget::after,
.home-hero .hero-radial-widget__energy-line,
.home-hero .hero-radial-widget__energy-line::before,
.home-hero .hero-radial-widget__energy-line::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.home-hero .hero-radial-widget::before {
  content: "" !important;
  inset: 17% !important;
  border: 1px solid rgba(235,247,255,0.045) !important;
  background: radial-gradient(circle, rgba(6,10,15,0.16) 0 42%, transparent 43% 100%) !important;
  box-shadow: inset 0 0 42px rgba(0,0,0,0.25) !important;
  filter: none !important;
  opacity: 0.56 !important;
  animation: none !important;
}

.home-hero .hero-radial-widget__dot {
  width: 42px !important;
  height: 42px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
}

.home-hero .hero-radial-widget__dot::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.home-hero .hero-radial-widget__dot::after {
  content: attr(data-word) !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 0.2rem) !important;
  width: max-content !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0.26rem 0.48rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(235,247,255,0.16) !important;
  background: rgba(8, 12, 18, 0.76) !important;
  color: rgba(248,252,255,0.94) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25), 0 0 18px rgba(var(--hero-mode-rgb),0.16) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 6px) rotate(calc(var(--i) * -30deg)) scale(0.96) !important;
  transition: opacity 160ms ease, transform 180ms ease !important;
  z-index: 7 !important;
}

.home-hero .hero-radial-widget__dot:hover::after,
.home-hero .hero-radial-widget__dot:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) rotate(calc(var(--i) * -30deg)) scale(1) !important;
}

.home-hero .hero-radial-widget__dot.is-active::after {
  opacity: 0 !important;
}

.home-hero .hero-radial-widget__dot.is-active:focus-visible::after,
.home-hero .hero-radial-widget__dot.is-active:hover::after {
  opacity: 1 !important;
}

.home-hero .hero-radial-widget__bead {
  display: block !important;
  width: var(--size) !important;
  height: var(--size) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.66) 16%, color-mix(in srgb, var(--dot-color) 90%, white 10%) 40%, var(--dot-color) 70%, color-mix(in srgb, var(--dot-color) 70%, black 30%) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -4px 7px rgba(0,0,0,0.20),
    0 0 0 1px rgba(255,255,255,0.16),
    0 0 16px color-mix(in srgb, var(--dot-color) 78%, transparent),
    0 0 34px color-mix(in srgb, var(--dot-color) 34%, transparent) !important;
}

.home-hero .hero-radial-widget__dot:hover .hero-radial-widget__bead,
.home-hero .hero-radial-widget__dot:focus-visible .hero-radial-widget__bead,
.home-hero .hero-radial-widget__dot.is-active .hero-radial-widget__bead {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -4px 8px rgba(0,0,0,0.22),
    0 0 0 2px rgba(255,255,255,0.20),
    0 0 20px color-mix(in srgb, var(--dot-color) 92%, transparent),
    0 0 48px color-mix(in srgb, var(--dot-color) 54%, transparent),
    0 0 78px color-mix(in srgb, var(--dot-color) 24%, transparent) !important;
}

.home-hero .hero-radial-widget__dot:focus-visible {
  outline: 2px solid rgba(255,255,255,0.86) !important;
  outline-offset: 4px !important;
}

/* Desktop: fit the panel in the opening viewport and lift bottom controls out of the crop zone. */
@media (min-width: 981px) {
  .content:has(.home-hero) {
    padding-top: clamp(0.45rem, 1.2svh, 0.95rem) !important;
  }

  .home-hero.section {
    min-height: calc(100svh - clamp(0.9rem, 2.4svh, 1.9rem)) !important;
    padding-block: 0 !important;
    align-items: start !important;
  }

  .home-hero .hero-overlay {
    width: min(1100px, calc(100vw - 9.25rem)) !important;
    min-height: min(700px, calc(100svh - 2.65rem)) !important;
    max-height: calc(100svh - 2.65rem) !important;
    padding: clamp(0.85rem, 1.55svh, 1.2rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.25rem, 2.8svh, 2.15rem) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: clamp(32px, 2.75vw, 42px) !important;
  }

  .home-hero .hero-text--widget {
    width: min(100%, 940px) !important;
    min-height: calc(min(700px, calc(100svh - 2.65rem)) - clamp(2.1rem, 4.35svh, 3.35rem)) !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 280px) minmax(300px, 1fr) minmax(220px, 280px) !important;
    grid-template-rows: auto auto minmax(260px, 1fr) minmax(118px, auto) !important;
    grid-template-areas:
      "brand brand brand"
      "byline byline byline"
      ". widget ."
      "readout . actions" !important;
    align-content: start !important;
    gap: clamp(0.34rem, 0.78svh, 0.62rem) clamp(0.9rem, 1.5vw, 1.25rem) !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(3rem, 4.55vw, 4.55rem) !important;
    line-height: 0.88 !important;
  }

  .home-hero .hero-byline {
    font-size: clamp(0.8rem, 1.08vw, 1rem) !important;
    letter-spacing: clamp(0.20em, 0.52vw, 0.38em) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: clamp(310px, 38svh, 360px) !important;
    --core-size: clamp(138px, 16.5svh, 162px) !important;
    --orbit: calc(var(--widget-size) / 2 - 17px) !important;
    align-self: center !important;
    margin-top: clamp(0.15rem, 0.9svh, 0.6rem) !important;
    margin-bottom: clamp(0.25rem, 1svh, 0.8rem) !important;
    transform: none !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    align-self: start !important;
    min-height: 104px !important;
    transform: translateY(clamp(-1.1rem, -1.6svh, -0.35rem)) !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.82rem 0.95rem !important;
  }

  .home-hero .hero-actions {
    padding: 0.72rem !important;
    gap: 0.55rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 42px !important;
    padding-block: 0.62rem !important;
  }
}

@media (min-width: 981px) and (max-height: 790px) {
  .home-hero .hero-overlay {
    width: min(1040px, calc(100vw - 9.5rem)) !important;
    min-height: calc(100svh - 2.2rem) !important;
    max-height: calc(100svh - 2.2rem) !important;
    padding-block: 0.68rem 1.28rem !important;
  }

  .home-hero .hero-text--widget {
    min-height: calc(100svh - 3.95rem) !important;
    grid-template-rows: auto auto minmax(240px, 1fr) minmax(100px, auto) !important;
    gap: 0.28rem 1rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.75rem, 4.3vw, 4.05rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: clamp(286px, 36.5svh, 330px) !important;
    --core-size: clamp(130px, 15.5svh, 150px) !important;
  }
}

/* Mobile: preserve top brand/byline, avoid cropped hero, and keep bottom nav from competing. */
@media (max-width: 980px) {
  .content:has(.home-hero) {
    padding-top: 0.65rem !important;
  }

  .home-hero.section {
    padding-top: 0 !important;
    padding-bottom: 0.7rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1.55rem)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(0.82rem, 2.8vw, 1.1rem) clamp(0.62rem, 2.6vw, 0.9rem) clamp(0.86rem, 2.8vw, 1.05rem) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .home-hero .hero-text--widget {
    grid-template-rows: auto auto auto auto auto !important;
    gap: clamp(0.38rem, 1.45vw, 0.56rem) !important;
  }

  .home-hero .hero-brand {
    align-self: start !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.42rem, 6.4vw, 2.2rem) !important;
    letter-spacing: 0.045em !important;
    text-indent: 0.045em !important;
    line-height: 0.9 !important;
  }

  .home-hero .hero-byline {
    font-size: clamp(0.48rem, 2vw, 0.64rem) !important;
    letter-spacing: clamp(0.14em, 0.7vw, 0.25em) !important;
    line-height: 1.05 !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(63vw, 246px) !important;
    --core-size: min(29vw, 106px) !important;
    --orbit: calc(var(--widget-size) / 2 - 15px) !important;
    margin: 0.05rem auto !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(13px, 3.4vw, 16px) !important;
    width: 34px !important;
    height: 34px !important;
  }

  .home-hero .hero-mode-readout {
    width: min(100%, 28rem) !important;
    padding: 0.68rem 0.7rem !important;
    border-radius: 21px !important;
  }

  .home-hero .hero-actions {
    width: min(100%, 21rem) !important;
    padding: 0.58rem !important;
    border-radius: 21px !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 40px !important;
    font-size: 0.86rem !important;
  }
}

@media (max-width: 520px) {
  .content:has(.home-hero) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .home-hero .hero-overlay {
    width: calc(100vw - 1.5rem) !important;
    padding: 0.74rem 0.52rem 0.84rem !important;
    border-radius: 20px !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(61vw, 232px) !important;
    --core-size: min(28vw, 98px) !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word] {
    font-size: clamp(1.05rem, 5vw, 1.42rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: clamp(0.72rem, 3.2vw, 0.84rem) !important;
    max-width: 24ch !important;
  }

  .home-foundations {
    padding-top: clamp(0.95rem, 3vw, 1.25rem) !important;
  }
}

@media (max-width: 768px) {
  .home-hero .hero-radial-widget__dot::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-overlay:hover,
  .home-hero .hero-overlay:focus-within {
    transform: none !important;
  }
}

/* === Refining pass v5: section card balance, process packages, about journey === */

.section-heading {
  gap: 0.8rem;
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}

.section-heading .section-intro {
  max-width: 820px;
}

/* Home: foundations */
.home-foundations .feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.2rem);
  align-items: stretch;
}

.feature-panel {
  min-height: clamp(290px, 24vw, 350px) !important;
  padding: 1.35rem 1.25rem 1.2rem !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.82rem !important;
  align-content: start;
}

.feature-panel .panel-icon {
  justify-self: center;
  align-self: start;
  width: 66px;
  height: 66px;
  border-radius: 22px;
}

.feature-panel h3 {
  max-width: 12ch;
}

.feature-panel p {
  max-width: 29ch;
  line-height: 1.58;
}

.feature-panel .panel-link {
  margin-top: 0.2rem;
}

/* Home: service cards */
.services-matrix {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 1.35vw, 1.2rem);
  align-items: start;
}

.service-card-button {
  min-height: clamp(332px, 26vw, 388px) !important;
  padding: 1.35rem 1.22rem 1.18rem !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr auto auto;
  gap: 0.78rem !important;
  align-content: start;
}

.service-card-button .panel-icon {
  align-self: start;
  justify-self: start;
}

.service-card-button h3 {
  font-size: clamp(1.55rem, 1.8vw, 2rem);
  max-width: 14ch;
}

.service-card-button p {
  line-height: 1.58;
}

.service-card-button ul {
  margin: 0.1rem 0 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.45rem;
}

.service-card-button li {
  margin: 0;
  line-height: 1.45;
}

.service-card-button .tag {
  margin-top: auto !important;
  min-height: 40px;
  padding: 0.56rem 0.95rem;
  font-size: 0.94rem;
  line-height: 1.2;
}

.service-card-button .panel-link {
  margin-top: 0.05rem;
}

/* Process: packages section */
.process-scene .packages-section .section-heading,
.process-scene .faq .section-heading {
  margin-bottom: clamp(1.15rem, 2vw, 1.6rem);
}

.process-scene .packages,
.packages-section .packages,
.packages {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.process-scene .package-card,
.package-card {
  min-height: 0 !important;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1.42rem 1.35rem 1.28rem !important;
}

.process-scene .package-card h3,
.package-card h3 {
  margin: 0 !important;
  font-size: clamp(1.85rem, 2.1vw, 2.45rem);
  line-height: 1.02;
  max-width: 12ch;
}

.process-scene .package-card p,
.package-card p {
  margin: 0 !important;
  max-width: 34ch;
  line-height: 1.62;
}

.process-scene .package-card ul,
.package-card ul {
  margin: 0.05rem 0 0 !important;
  padding-left: 1.1rem;
  gap: 0.58rem !important;
}

.process-scene .package-card li,
.package-card li {
  margin: 0 !important;
  line-height: 1.48;
}

/* About: journey timeline */
.about-journey-section .timeline-container,
.timeline-container {
  align-items: start !important;
}

.about-journey-section .timeline-container {
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.96fr);
  gap: 1.2rem;
}

.timeline-list {
  position: relative;
  z-index: 1;
  gap: 0.9rem;
}

.timeline-entry {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: 1.1rem 1.12rem !important;
}

.timeline-year {
  line-height: 1.32;
}

.timeline-detail {
  max-width: 60ch;
  line-height: 1.62;
}

.timeline-support {
  top: 1rem !important;
  min-height: 0 !important;
  max-height: calc(100vh - 2rem) !important;
  padding: 1.35rem !important;
  gap: 1rem;
}

.timeline-support__top {
  align-items: start;
}

.timeline-support__copy,
.timeline-support__box p,
.timeline-support__box ul {
  line-height: 1.62;
}

.timeline-support__grid {
  align-items: stretch;
}

.timeline-support__box {
  height: 100%;
}

@media (max-width: 1440px) {
  .services-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .home-foundations .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-journey-section .timeline-container {
    grid-template-columns: 1fr;
  }

  .timeline-support {
    position: relative;
    top: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 900px) {
  .services-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-panel,
  .service-card-button,
  .package-card {
    min-height: 0 !important;
  }

  .timeline-support__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-foundations .feature-grid,
  .services-matrix,
  .packages {
    grid-template-columns: 1fr !important;
  }

  .feature-panel,
  .service-card-button,
  .package-card {
    padding: 1.2rem 1.05rem 1.08rem !important;
  }

  .timeline-entry {
    padding: 0.98rem 1rem !important;
  }

  .timeline-support {
    padding: 1.05rem !important;
  }
}

/* === Hero responsive stability + color FX v6 ===
   Fixes mobile top cropping, stops hover states from changing panel size,
   enlarges the central widget slightly, and re-normalizes the 12 premium
   background atmospheres behind the hero content. */
.home-hero.section {
  min-height: auto !important;
  padding-block: clamp(0.7rem, 1.4vw, 1.15rem) clamp(1rem, 1.8vw, 1.35rem) !important;
  display: grid !important;
  place-items: start center !important;
}

.home-hero .hero-overlay {
  position: relative !important;
  width: min(1240px, calc(100vw - var(--nav-width-desktop, 72px) - 2.5rem)) !important;
  height: clamp(720px, 84svh, 850px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: clamp(1.55rem, 2.4vw, 2.1rem) clamp(1.25rem, 2.4vw, 2.2rem) clamp(1.35rem, 2vw, 1.85rem) !important;
  overflow: hidden !important;
  border-radius: clamp(30px, 3.1vw, 42px) !important;
  contain: layout paint !important;
}

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative !important;
  z-index: 2 !important;
}

.home-hero .hero-text--widget {
  width: min(100%, 1120px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 330px) minmax(390px, 1fr) minmax(250px, 330px) !important;
  grid-template-rows: auto auto minmax(0, 1fr) 150px !important;
  grid-template-areas:
    "brand brand brand"
    "byline byline byline"
    ". widget ."
    "readout . actions" !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(0.42rem, 0.75vw, 0.72rem) clamp(1rem, 2.2vw, 1.75rem) !important;
}

.home-hero .hero-brand {
  grid-area: brand !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

.home-hero .hero-byline,
.home-hero .hero-byline--brand {
  grid-area: byline !important;
  align-self: start !important;
  justify-self: center !important;
  width: min(100%, 900px) !important;
  margin: 0 !important;
  transform: none !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.2rem, 5.4vw, 5.1rem) !important;
  line-height: 0.9 !important;
}

.home-hero .hero-radial-widget {
  grid-area: widget !important;
  align-self: center !important;
  justify-self: center !important;
  --widget-size: clamp(405px, 30vw, 505px) !important;
  --core-size: clamp(168px, 13.2vw, 210px) !important;
  --orbit: calc(var(--widget-size) / 2 - 24px) !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  contain: layout paint !important;
}

.home-hero .hero-radial-widget__dot {
  --size: clamp(18px, 1.25vw, 23px) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.home-hero .hero-radial-widget__dot:hover,
.home-hero .hero-radial-widget__dot:focus-visible,
.home-hero .hero-radial-widget__dot.is-active {
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(calc((var(--orbit) + 1px) * -1)) scale(1.1) !important;
}

.home-hero .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__tooltip::before,
.home-hero .hero-radial-widget__tooltip::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  content: none !important;
}

.home-hero .hero-radial-widget__energy-line,
.home-hero .hero-radial-widget__energy-line::before,
.home-hero .hero-radial-widget__energy-line::after {
  display: none !important;
}

.home-hero .hero-radial-widget::before {
  background:
    radial-gradient(circle, rgba(7, 10, 16, 0.38) 0 40%, transparent 41%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.025), rgba(255,255,255,0.008) 52%, transparent 72%) !important;
  border: 1px solid rgba(222, 236, 255, 0.055) !important;
  box-shadow: inset 0 0 32px rgba(0,0,0,0.35), 0 0 20px rgba(150,170,195,0.09) !important;
  animation: none !important;
}

.home-hero .hero-radial-widget::after {
  background: radial-gradient(circle, rgba(170,188,210,0.12), rgba(170,188,210,0.035) 44%, transparent 74%) !important;
  opacity: 0.32 !important;
  animation: none !important;
}

.home-hero .hero-mode-readout,
.home-hero .hero-actions {
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  transform: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.home-hero .hero-mode-readout {
  grid-area: readout !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 0.22rem !important;
  padding: 1rem 1.1rem !important;
  text-align: left !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.055)),
    rgba(15,20,29,0.34) !important;
  border: 1px solid rgba(230, 242, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.20) !important;
}

.home-hero .hero-mode-readout__kicker,
.home-hero .hero-mode-readout strong,
.home-hero .hero-mode-readout span[data-hero-mode-description] {
  text-align: left !important;
  margin: 0 !important;
}

.home-hero .hero-mode-readout strong {
  min-height: 1.12em !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  display: block !important;
  min-height: 3.4em !important;
  max-width: 24ch !important;
  overflow: hidden !important;
  line-height: 1.32 !important;
}

.home-hero .hero-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0.72rem !important;
  align-content: center !important;
  padding: 0.9rem !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.055)),
    rgba(15,20,29,0.34) !important;
  border: 1px solid rgba(230, 242, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 36px rgba(0,0,0,0.20) !important;
}

.home-hero .hero-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.7rem 1rem !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@keyframes wjpHeroAuraFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0.5%,-1%,0) scale(1.025); } }
@keyframes wjpFxElectric { from { background-position: 0 0, 0 0; transform: rotate(0deg) scale(1); } to { background-position: 180px -130px, 120px -180px; transform: rotate(2deg) scale(1.01); } }
@keyframes wjpFxThreads { from { background-position: 0 0; } to { background-position: -180px 220px; } }
@keyframes wjpFxFire { 0%,100% { transform: translateY(0) scale(1); filter: blur(7px) brightness(0.98); } 50% { transform: translateY(-1.2%) scale(1.025); filter: blur(5px) brightness(1.05); } }
@keyframes wjpFxEmber { from { background-position: 0 0, 0 0; } to { background-position: 0 -180px, 34px -130px; } }
@keyframes wjpFxRain { from { background-position: 0 0, 0 0; } to { background-position: 0 220px, 0 0; } }
@keyframes wjpFxDrops { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-1%,1%,0); } }
@keyframes wjpFxWarmDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(1.2%,-0.8%,0); } }
@keyframes wjpFxLeaf { 0% { transform: translate3d(0,-1%,0) rotate(0deg); background-position: 0 0, 0 0; } 100% { transform: translate3d(-1%,2%,0) rotate(-2deg); background-position: 30px 170px, -26px 130px; } }
@keyframes wjpFxNebula { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0.8%,-1.4%,0) scale(1.04); } }
@keyframes wjpFxStars { from { background-position: 0 0, 0 0; } to { background-position: -46px -130px, 36px -170px; } }
@keyframes wjpFxGrowth { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0.9%,-0.8%,0) scale(1.025); } }
@keyframes wjpFxGrowthRings { 0%,100% { transform: scale(1); opacity: 0.14; } 50% { transform: scale(1.035); opacity: 0.20; } }
@keyframes wjpFxSignal { 0% { transform: scale(0.96); opacity: 0.12; } 50% { transform: scale(1.02); opacity: 0.24; } 100% { transform: scale(1.06); opacity: 0.10; } }
@keyframes wjpFxScan { 0%,100% { background-position: 0 40%, 62% 0; } 50% { background-position: 0 60%, 44% 0; } }
@keyframes wjpFxLiquid { 0%,100% { background-position: 0 0, 0 0; transform: translate3d(0,0,0); } 50% { background-position: 100px -20px, -80px 20px; transform: translate3d(-0.8%,0.8%,0); } }
@keyframes wjpFxLiquidThreads { from { background-position: 0 0; } to { background-position: 170px -150px; } }
@keyframes wjpFxGrid { 0%,100% { transform: scale(1); opacity: 0.16; } 50% { transform: scale(1.015); opacity: 0.22; } }
@keyframes wjpFxGridScan { 0%,100% { background-position: 0 0; opacity: 0.11; } 50% { background-position: 0 100%; opacity: 0.18; } }
@keyframes wjpFxBurst { 0%,100% { transform: scale(0.985); opacity: 0.17; } 50% { transform: scale(1.035); opacity: 0.23; } }
@keyframes wjpFxCreativeFloat { from { background-position: 0 0, 0 0; } to { background-position: -42px -145px, 36px -185px; } }
@keyframes wjpFxLimePulse { 0% { transform: scale(0.95); opacity: 0.12; } 50% { transform: scale(1.02); opacity: 0.23; } 100% { transform: scale(1.08); opacity: 0.08; } }
@keyframes wjpFxKineticDots { from { background-position: 0 0, 0 0; } to { background-position: 42px -110px, -34px -150px; } }
@keyframes wjpFxGoldGlow { 0%,100% { transform: scale(0.985); opacity: 0.19; } 50% { transform: scale(1.035); opacity: 0.26; } }
@keyframes wjpFxRadiantDust { from { background-position: 0 0, 0 0; } to { background-position: -32px -110px, 22px -150px; } }

@media (max-width: 980px) {
  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1.5rem)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 1.25rem 1rem 1.3rem !important;
  }

  .home-hero .hero-text--widget {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas: "brand" "byline" "widget" "readout" "actions" !important;
    gap: 0.7rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(72vw, 340px) !important;
    --core-size: min(35vw, 155px) !important;
    --orbit: calc(var(--widget-size) / 2 - 19px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    justify-self: center !important;
  }

  .home-hero .hero-mode-readout {
    justify-items: center !important;
    text-align: center !important;
    padding: 0.92rem 0.9rem !important;
  }

  .home-hero .hero-mode-readout__kicker,
  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    text-align: center !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    min-height: 0 !important;
    max-width: 32ch !important;
  }

  .home-hero .hero-actions {
    height: auto !important;
    grid-template-rows: none !important;
    padding: 0.8rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 46px !important;
  }
}

@media (max-width: 640px) {
  .home-hero.section {
    padding-top: 0.55rem !important;
    padding-bottom: 1rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.75rem)) !important;
    margin-top: 0 !important;
    border-radius: 24px !important;
    padding: 0.9rem 0.7rem 1rem !important;
  }

  .home-hero .hero-text--widget {
    gap: 0.52rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.62rem, 8.3vw, 2.25rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.065em !important;
    text-indent: 0.065em !important;
  }

  .home-hero .hero-byline,
  .home-hero .hero-byline--brand {
    width: min(100%, 19rem) !important;
    font-size: clamp(0.58rem, 2.9vw, 0.72rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(69vw, 282px) !important;
    --core-size: min(33vw, 130px) !important;
    --orbit: calc(var(--widget-size) / 2 - 17px) !important;
  }

  .home-hero .hero-radial-widget__dot { --size: clamp(14px, 3.8vw, 18px) !important; }

  .home-hero .hero-mode-readout {
    width: min(100%, 34rem) !important;
    border-radius: 20px !important;
    padding: 0.78rem 0.75rem !important;
  }

  .home-hero .hero-mode-readout__kicker { font-size: 0.68rem !important; }
  .home-hero .hero-mode-readout strong { font-size: clamp(1.2rem, 5.8vw, 1.65rem) !important; }
  .home-hero .hero-mode-readout span[data-hero-mode-description] { font-size: 0.86rem !important; line-height: 1.24 !important; }

  .home-hero .hero-actions {
    width: min(100%, 26rem) !important;
    border-radius: 20px !important;
    padding: 0.7rem !important;
    gap: 0.6rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 44px !important;
    font-size: 0.88rem !important;
    border-radius: 14px !important;
  }

  .home-foundations.section {
    margin-top: clamp(1.55rem, 6vw, 2.25rem) !important;
  }
}

@media (max-width: 390px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label { font-size: clamp(1.44rem, 7.9vw, 2rem) !important; }
  .home-hero .hero-radial-widget { --widget-size: min(66vw, 250px) !important; --core-size: min(31vw, 112px) !important; }
  .home-hero .hero-actions .btn { min-height: 42px !important; }
}

@media (prefers-reduced-motion: reduce) {

  .home-hero .hero-radial-widget__dot,
  .home-hero .hero-actions .btn {
    transition: none !important;
  }
}


/* === v7 refinement pass: hero readout visibility + service card alignment === */
.home-hero .hero-overlay {
  min-height: clamp(720px, 84vh, 860px) !important;
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.home-hero .hero-text--widget {
  grid-template-rows: auto auto minmax(300px, 1fr) auto !important;
  row-gap: clamp(0.48rem, 0.95vw, 0.82rem) !important;
}

.home-hero .hero-mode-readout,
.home-hero .hero-actions {
  height: auto !important;
  min-height: 156px !important;
  max-height: none !important;
}

.home-hero .hero-mode-readout {
  padding: 1.02rem 1.12rem 1.08rem !important;
}

.home-hero .hero-mode-readout__kicker {
  display: block !important;
  margin-bottom: 0.12rem !important;
}

.home-hero .hero-mode-readout strong[data-hero-mode-word],
.home-hero .hero-mode-readout strong {
  min-height: 1.16em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  min-height: 0 !important;
  max-width: 25ch !important;
  overflow: visible !important;
}

.home-hero .hero-actions {
  gap: 0.68rem !important;
  padding: 0.92rem !important;
}

.home-hero .hero-actions .btn {
  min-height: 52px !important;
}

.services-matrix {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

.service-card-button {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: clamp(346px, 27vw, 404px) !important;
  padding: 1.38rem 1.24rem 1.2rem !important;
  gap: 0.78rem !important;
  overflow: hidden !important;
}

.service-card-button::before {
  content: "";
  position: absolute;
  inset: auto -10% -14% auto;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(68, 217, 255, 0.14), rgba(68, 217, 255, 0.05) 42%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 62%);
  filter: blur(2px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.service-card-button > * {
  position: relative;
  z-index: 1;
}

.service-card-button .panel-icon {
  margin-bottom: 0.05rem !important;
}

.service-card-button h3 {
  min-height: 2.45em;
  line-height: 1.03;
  max-width: 10ch;
}

.service-card-button p {
  min-height: 4.95em;
  margin-bottom: 0 !important;
}

.service-card-button ul {
  min-height: 4.8em;
  margin-bottom: 0 !important;
}

.service-card-button .tag {
  margin-top: auto !important;
  align-self: flex-start !important;
}

.service-card-button .panel-link {
  margin-top: 0.1rem !important;
  align-self: flex-start !important;
}

.feature-grid {
  align-items: stretch !important;
}

.feature-panel {
  position: relative;
  overflow: hidden !important;
}

.feature-panel::before {
  content: "";
  position: absolute;
  inset: auto -8% -12% auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(68, 217, 255, 0.12), rgba(68, 217, 255, 0.04) 45%, transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 980px) {
  .home-hero .hero-overlay {
    min-height: 0 !important;
    padding-bottom: 1.35rem !important;
  }

  .home-hero .hero-text--widget {
    grid-template-rows: auto auto auto auto auto !important;
    row-gap: 0.72rem !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 440px) !important;
    min-height: 0 !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.92rem 0.92rem 1rem !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 30ch !important;
  }

  .service-card-button {
    min-height: 0 !important;
  }

  .service-card-button h3,
  .service-card-button p,
  .service-card-button ul {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  .home-hero.section {
    padding-bottom: 1.1rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.75rem)) !important;
    padding: 0.92rem 0.72rem 1.18rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(68vw, 276px) !important;
    --core-size: min(32vw, 126px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 100%) !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.82rem 0.76rem 0.9rem !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.67rem !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word],
  .home-hero .hero-mode-readout strong {
    font-size: clamp(1.16rem, 5.7vw, 1.56rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.85rem !important;
    line-height: 1.26 !important;
  }

  .home-hero .hero-actions {
    padding: 0.72rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 44px !important;
  }
}


/* === v8 hero integrity pass: fit all hero content cleanly across breakpoints === */
.home-hero.section {
  min-height: auto !important;
  padding-top: clamp(0.35rem, 0.9vw, 0.85rem) !important;
  padding-bottom: clamp(2.1rem, 4.2vw, 3.15rem) !important;
  margin-bottom: 0 !important;
}

.home-hero .hero-overlay {
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
  min-height: auto !important;
  height: auto !important;
  padding: clamp(1rem, 1.7vw, 1.45rem) clamp(0.95rem, 1.8vw, 1.45rem) clamp(1.35rem, 2.1vw, 1.65rem) !important;
  border-radius: 32px !important;
  overflow: clip !important;
}

.home-hero .hero-text--widget {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) !important;
  grid-template-areas:
    "brand brand"
    "byline byline"
    "widget widget"
    "readout actions" !important;
  align-items: start !important;
  justify-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  row-gap: clamp(0.5rem, 1vw, 0.9rem) !important;
  column-gap: clamp(1rem, 2vw, 2.4rem) !important;
  padding: 0 !important;
}

.home-hero .hero-text h1.hero-brand {
  grid-area: brand !important;
  margin: 0 auto !important;
}

.home-hero .hero-byline.hero-byline--brand {
  grid-area: byline !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto 0.05rem !important;
  white-space: nowrap !important;
  font-size: clamp(0.96rem, 1.45vw, 1.28rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.13em !important;
  text-indent: 0.13em !important;
  text-align: center !important;
}

.home-hero .hero-radial-widget {
  grid-area: widget !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0.05rem auto 0.25rem !important;
  --widget-size: min(42vw, 392px) !important;
  --core-size: min(18vw, 156px) !important;
  --line-distance: calc(var(--widget-size) * 0.295) !important;
}

.home-hero .hero-radial-widget__dot {
  --size: clamp(16px, 1.08vw, 20px) !important;
  width: 36px !important;
  height: 36px !important;
}

.home-hero .hero-radial-widget__dot::after,
.home-hero .hero-radial-widget__tooltip {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.home-hero .hero-mode-readout {
  grid-area: readout !important;
  justify-self: start !important;
  align-self: end !important;
  width: min(100%, 366px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.95rem 1rem 0.98rem !important;
  border-radius: 22px !important;
}

.home-hero .hero-mode-readout__kicker {
  display: block !important;
  margin-bottom: 0.08rem !important;
}

.home-hero .hero-mode-readout strong[data-hero-mode-word],
.home-hero .hero-mode-readout strong {
  display: block !important;
  margin-bottom: 0.16rem !important;
  min-height: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: clamp(1.2rem, 2.35vw, 1.95rem) !important;
  line-height: 1.02 !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  display: block !important;
  max-width: 24ch !important;
  font-size: 0.98rem !important;
  line-height: 1.25 !important;
}

.home-hero .hero-actions {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: end !important;
  width: min(100%, 332px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.8rem !important;
  border-radius: 22px !important;
  gap: 0.62rem !important;
}

.home-hero .hero-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  border-radius: 16px !important;
}

.home-foundations.section {
  margin-top: clamp(2rem, 4.5vw, 3rem) !important;
  padding-top: 0 !important;
}

@media (max-width: 1100px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(3rem, 5vw, 4.35rem) !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(46vw, 364px) !important;
    --core-size: min(20vw, 150px) !important;
  }
}

@media (max-width: 900px) {
  .home-hero.section {
    padding-bottom: 2rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, 100%) !important;
    padding: 0.95rem 0.92rem 1.3rem !important;
  }

  .home-hero .hero-text--widget {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "byline"
      "widget"
      "readout"
      "actions" !important;
    row-gap: 0.72rem !important;
  }

  .home-hero .hero-byline.hero-byline--brand {
    font-size: clamp(0.82rem, 2.35vw, 0.98rem) !important;
    letter-spacing: 0.1em !important;
    text-indent: 0.1em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(56vw, 330px) !important;
    --core-size: min(23vw, 142px) !important;
    margin-bottom: 0.1rem !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    justify-self: center !important;
    width: min(100%, 430px) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 30ch !important;
  }

  .home-foundations.section {
    margin-top: clamp(2rem, 6vw, 2.75rem) !important;
  }
}

@media (max-width: 768px) {
  .home-hero.section {
    min-height: auto !important;
    padding-top: 0.2rem !important;
    padding-bottom: 1.9rem !important;
  }

  .home-hero .hero-overlay {
    min-height: auto !important;
    padding: 0.86rem 0.76rem 1.18rem !important;
    border-radius: 28px !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.15rem, 8vw, 2.95rem) !important;
    letter-spacing: 0.07em !important;
    text-indent: 0.07em !important;
  }

  .home-hero .hero-byline.hero-byline--brand {
    font-size: clamp(0.7rem, 2.75vw, 0.84rem) !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(62vw, 288px) !important;
    --core-size: min(30vw, 128px) !important;
    --line-distance: calc(var(--widget-size) * 0.285) !important;
  }

  .home-hero .hero-radial-widget__dot {
    --size: clamp(16px, 4.2vw, 19px) !important;
    width: 32px !important;
    height: 32px !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: min(100%, 100%) !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.84rem 0.8rem 0.92rem !important;
    border-radius: 20px !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word],
  .home-hero .hero-mode-readout strong {
    font-size: clamp(1.1rem, 5.3vw, 1.55rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.88rem !important;
    line-height: 1.24 !important;
  }

  .home-hero .hero-actions {
    padding: 0.72rem !important;
    border-radius: 20px !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 44px !important;
  }

  .home-foundations.section {
    margin-top: 1.85rem !important;
  }
}

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

  .home-hero .hero-byline.hero-byline--brand {
    font-size: clamp(0.62rem, 2.9vw, 0.74rem) !important;
    letter-spacing: 0.06em !important;
    text-indent: 0.06em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(66vw, 266px) !important;
    --core-size: min(32vw, 118px) !important;
  }
}


/* === v9 global heading typography pass: Montserrat-style geometric heading system === */
:root {
  --font-heading: "Montserrat", "Sora", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-weight: 800;
  --heading-weight-strong: 900;
  --heading-tracking-tight: 0.045em;
  --heading-tracking: 0.075em;
  --heading-tracking-wide: 0.115em;
  --heading-line-height: 0.98;
  --heading-line-height-relaxed: 1.08;
}

/* Keep paragraphs readable; only title/label systems receive the geometric uppercase language. */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-brand,
.brand-label,
.hero-byline.hero-byline--brand,
.section-heading h1,
.section-heading h2,
.section-title,
.page-title,
.page-hero h1,
.about-hero h1,
.process-hero h1,
.portfolio-hero h1,
.contact-hero h1,
.card-title,
.card-3d h3,
.feature-panel h3,
.service-card-button h3,
.package-card h3,
.home-case-card h3,
.concept-card h3,
.about-foundation-card h3,
.vibe-card h3,
.timeline-support__title,
.timeline-support h3,
.dialog-title,
.modal-title,
.faq-question,
.cta-panel h2,
.cta-panel h3,
.cta-block h2,
.cta-block h3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  line-height: var(--heading-line-height-relaxed) !important;
  letter-spacing: var(--heading-tracking-tight) !important;
}

h1,
.page-title,
.page-hero h1,
.about-hero h1,
.process-hero h1,
.portfolio-hero h1,
.contact-hero h1,
.section-heading h1 {
  font-weight: var(--heading-weight-strong) !important;
  text-transform: uppercase !important;
  letter-spacing: clamp(0.035em, 0.7vw, 0.105em) !important;
  line-height: 0.94 !important;
}

h2,
.section-heading h2,
.section-title,
.cta-panel h2,
.cta-block h2 {
  font-weight: var(--heading-weight-strong) !important;
  text-transform: uppercase !important;
  letter-spacing: clamp(0.04em, 0.55vw, 0.095em) !important;
  line-height: 0.98 !important;
}

h3,
.card-title,
.card-3d h3,
.feature-panel h3,
.service-card-button h3,
.package-card h3,
.home-case-card h3,
.concept-card h3,
.about-foundation-card h3,
.vibe-card h3,
.timeline-support__title,
.timeline-support h3,
.dialog-title,
.modal-title {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  line-height: 1.02 !important;
}

/* Small uppercase labels: match the “DESIGN WITH” micro-label style. */
.hero-mode-readout__kicker,
.eyebrow,
.section-eyebrow,
.panel-eyebrow,
.card-kicker,
.kicker,
.timeline-kicker,
.timeline-support__kicker,
.timeline-year,
.vibe-card__chip,
.about-foundation-pill,
.service-card-button .tag,
.package-card .tag,
.badge,
.chip,
.pill,
.form-label,
label,
.legend-label,
.footer-heading,
.dialog-kicker,
.modal-kicker,
.cc-title {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.05 !important;
}

/* Hero title and subtitle: preserve metallic treatment but normalize the family and geometry. */
.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label,
.home-hero .brand-letter,
.home-hero .hero-brand .brand-letter,
.home-hero .brand-label .brand-letter,
.hero-byline.hero-byline--brand,
.hero-byline.hero-byline--brand .brand-letter {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: 0.9 !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  letter-spacing: 0.12em !important;
  text-indent: 0.12em !important;
}

.hero-byline.hero-byline--brand {
  letter-spacing: 0.16em !important;
  text-indent: 0.16em !important;
}

.hero-mode-readout strong[data-hero-mode-word],
.hero-mode-readout strong {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  line-height: 0.98 !important;
}

/* Preserve paragraph/body reading rhythm and avoid accidental all-caps in long text. */
p,
li,
.section-intro,
.hero-mode-readout span[data-hero-mode-description],
.timeline-detail,
.timeline-support__copy,
.timeline-support__box p,
.feature-panel p,
.service-card-button p,
.package-card p,
.concept-card p,
.home-case-card p,
.about-foundation-card p,
.vibe-card p,
.form-help,
.footer-copy,
.cc-text {
  text-transform: none !important;
  letter-spacing: normal;
}

/* Compact responsive heading rhythm so the uppercase system stays clean on mobile. */
@media (max-width: 768px) {
  h1,
  .page-title,
  .page-hero h1,
  .about-hero h1,
  .process-hero h1,
  .portfolio-hero h1,
  .contact-hero h1 {
    letter-spacing: 0.055em !important;
    line-height: 0.98 !important;
  }

  h2,
  .section-heading h2,
  .section-title {
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
  }

  h3,
  .feature-panel h3,
  .service-card-button h3,
  .package-card h3,
  .card-3d h3 {
    letter-spacing: 0.04em !important;
    line-height: 1.03 !important;
  }

  .hero-byline.hero-byline--brand {
    letter-spacing: 0.09em !important;
    text-indent: 0.09em !important;
  }
}


/* === v10 focused hero/typography/ambient pass === */
:root {
  --font-heading: "Montserrat", "Sora", "Inter", "Segoe UI", system-ui, sans-serif;
  --heading-track-tight: 0.032em;
  --heading-track: 0.045em;
  --heading-track-wide: 0.075em;
}

/* Tighten oversized heading letter spacing without changing body text. */
h1,
h2,
h3,
.page-title,
.page-hero h1,
.section-heading h2,
.section-title,
.feature-panel h3,
.service-card-button h3,
.package-card h3,
.card-3d h3,
.modal-panel h2,
.cta-panel h2,
.cta h2,
.hero-mode-readout strong[data-hero-mode-word] {
  font-family: var(--font-heading) !important;
  font-weight: 850 !important;
  letter-spacing: var(--heading-track-tight) !important;
  line-height: 1.02 !important;
}

.section-heading h2,
.section-title,
.home-foundations .section-heading h2 {
  font-size: clamp(2rem, 4.4vw, 4rem) !important;
  letter-spacing: 0.028em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

.panel-kicker,
.section-kicker,
.eyebrow,
.card-kicker,
.hero-mode-readout__kicker,
.timeline-support__eyebrow,
.timeline-year,
.principle-label,
.mini-label,
.nav-label {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--heading-track-wide) !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-family: var(--font-heading) !important;
  font-size: clamp(3rem, 5.15vw, 4.95rem) !important;
  letter-spacing: 0.06em !important;
  text-indent: 0.06em !important;
  line-height: 0.88 !important;
}

.home-hero .hero-byline.hero-byline--brand {
  font-family: var(--font-heading) !important;
  font-size: clamp(0.88rem, 1.18vw, 1.08rem) !important;
  letter-spacing: 0.09em !important;
  text-indent: 0.09em !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
}

/* Hero panel: prevent clipped bottom modules and create clear separation below. */
.home-hero.section {
  min-height: auto !important;
  padding-top: clamp(0.4rem, 1vw, 0.9rem) !important;
  padding-bottom: clamp(2.2rem, 4.2vw, 3.4rem) !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.home-hero .hero-overlay {
  overflow: hidden !important;
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  min-height: auto !important;
  height: auto !important;
  padding: clamp(1rem, 1.6vw, 1.42rem) clamp(1rem, 1.8vw, 1.55rem) clamp(1.6rem, 2.4vw, 2.05rem) !important;
  border-radius: clamp(26px, 3vw, 38px) !important;
}

.home-hero .hero-text--widget {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) !important;
  grid-template-areas:
    "brand brand"
    "byline byline"
    "widget widget"
    "readout actions" !important;
  align-items: start !important;
  justify-items: center !important;
  gap: clamp(0.52rem, 0.95vw, 0.8rem) clamp(1rem, 2.2vw, 2.4rem) !important;
  min-height: 0 !important;
  height: auto !important;
}

.home-hero .hero-brand { grid-area: brand !important; margin: 0 auto !important; }
.home-hero .hero-byline { grid-area: byline !important; margin: 0 auto !important; }

.home-hero .hero-radial-widget {
  grid-area: widget !important;
  --widget-size: min(39vw, 368px) !important;
  --core-size: min(16vw, 146px) !important;
  --line-distance: calc(var(--widget-size) * 0.288) !important;
  margin: 0.05rem auto 0.16rem !important;
}

.home-hero .hero-radial-widget__dot {
  width: 34px !important;
  height: 34px !important;
  --size: clamp(15px, 1vw, 19px) !important;
}

.home-hero .hero-radial-widget__dot::before,
.home-hero .hero-radial-widget__dot::after,
.home-hero .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot [class*="word"],
.home-hero .hero-radial-widget__dot [class*="label"]:not(.hero-radial-widget__bead) {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.home-hero .hero-mode-readout {
  grid-area: readout !important;
  justify-self: start !important;
  align-self: end !important;
  width: min(100%, 360px) !important;
  min-height: 128px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.9rem 1rem !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.home-hero .hero-mode-readout strong[data-hero-mode-word] {
  display: block !important;
  font-size: clamp(1.18rem, 2.2vw, 1.75rem) !important;
  letter-spacing: 0.025em !important;
  line-height: 0.98 !important;
  margin: 0.08rem 0 0.2rem !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  display: block !important;
  max-width: 26ch !important;
  font-size: 0.92rem !important;
  line-height: 1.28 !important;
  overflow: visible !important;
}

.home-hero .hero-actions {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: end !important;
  width: min(100%, 330px) !important;
  min-height: 128px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.76rem !important;
  border-radius: 22px !important;
  gap: 0.58rem !important;
  overflow: visible !important;
}

.home-hero .hero-actions .btn {
  min-height: 46px !important;
  width: 100% !important;
  min-width: 0 !important;
  letter-spacing: 0.015em !important;
}

.home-foundations.section {
  margin-top: clamp(2rem, 4.2vw, 3.2rem) !important;
  padding-top: 0 !important;
  clear: both;
}

/* Advanced color-reactive hero ambient system */
.home-hero .hero-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  contain: paint;
}

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative;
  z-index: 2;
}

.home-hero .ambient-layer {
  position: absolute;
  inset: -7%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, filter 500ms ease, transform 700ms ease;
  transform: translate3d(0,0,0) scale(1.015);
  filter: saturate(1.04);
  mix-blend-mode: screen;
}

.home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-active-effect="red"] .ambient-layer--red,
.home-hero[data-preview-effect="red"] .ambient-layer--red,
.home-hero[data-active-effect="blue"] .ambient-layer--blue,
.home-hero[data-preview-effect="blue"] .ambient-layer--blue,
.home-hero[data-active-effect="orange"] .ambient-layer--orange,
.home-hero[data-preview-effect="orange"] .ambient-layer--orange,
.home-hero[data-active-effect="purple"] .ambient-layer--purple,
.home-hero[data-preview-effect="purple"] .ambient-layer--purple,
.home-hero[data-active-effect="green"] .ambient-layer--green,
.home-hero[data-preview-effect="green"] .ambient-layer--green,
.home-hero[data-active-effect="teal"] .ambient-layer--teal,
.home-hero[data-preview-effect="teal"] .ambient-layer--teal,
.home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-active-effect="lime"] .ambient-layer--lime,
.home-hero[data-preview-effect="lime"] .ambient-layer--lime,
.home-hero[data-active-effect="gold"] .ambient-layer--gold,
.home-hero[data-preview-effect="gold"] .ambient-layer--gold {
  opacity: 1;
}

.ambient-layer::before,
.ambient-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-layer--yellow::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,217,80,.18), transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 60px, rgba(255,235,150,.22) 62px 64px, transparent 66px 150px),
    conic-gradient(from 24deg at 50% 48%, transparent 0 8%, rgba(255,246,190,.18) 11% 13%, transparent 16% 43%, rgba(255,206,74,.12) 45% 47%, transparent 49% 100%);
  filter: blur(.6px);
  animation: ambientElectricThreads 7s linear infinite;
}
.ambient-layer--yellow::after {
  background: radial-gradient(circle at 52% 45%, transparent 0 18%, rgba(255,220,78,.14) 19%, transparent 22% 100%);
  animation: ambientPulse 4.8s ease-out infinite;
}

.ambient-layer--red::before {
  background:
    radial-gradient(circle at 28% 82%, rgba(255,91,48,.26), transparent 34%),
    radial-gradient(circle at 72% 72%, rgba(185,24,34,.22), transparent 40%),
    radial-gradient(circle at 50% 55%, rgba(255,132,64,.10), transparent 48%);
  filter: blur(18px);
  animation: ambientFireGlow 8s ease-in-out infinite alternate;
}
.ambient-layer--red::after { background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,180,120,.055) 31px 33px, transparent 35px 76px); animation: ambientHeat 5.5s ease-in-out infinite; }

.ambient-layer--blue::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 18px, rgba(135,205,255,.22) 19px, transparent 22px 48px),
    radial-gradient(circle at 54% 48%, rgba(64,150,255,.13), transparent 46%);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: ambientRain 9s linear infinite;
}
.ambient-layer--blue::after { background: radial-gradient(circle at 30% 34%, transparent 0 2%, rgba(130,210,255,.16) 2.4%, transparent 4%), radial-gradient(circle at 73% 72%, transparent 0 1.6%, rgba(130,210,255,.12) 2%, transparent 3.8%); animation: ambientRipple 7s ease-out infinite; }

.ambient-layer--orange::before { background: radial-gradient(circle at 48% 70%, rgba(255,139,50,.18), transparent 44%), linear-gradient(124deg, transparent, rgba(255,170,86,.14), transparent 58%); animation: ambientWarmDrift 9s ease-in-out infinite; }
.ambient-layer--orange::after { background: repeating-linear-gradient(135deg, transparent 0 84px, rgba(255,178,92,.13) 86px 92px, transparent 96px 180px); animation: ambientLeafTrails 12s ease-in-out infinite; }

.ambient-layer--purple::before { background: radial-gradient(circle at 32% 42%, rgba(150,87,255,.20), transparent 26%), radial-gradient(circle at 70% 58%, rgba(206,150,255,.12), transparent 24%), radial-gradient(circle at 50% 72%, rgba(84,42,158,.18), transparent 42%); filter: blur(14px); animation: ambientNebula 13s ease-in-out infinite; }
.ambient-layer--purple::after { background-image: radial-gradient(circle, rgba(220,200,255,.20) 0 1px, transparent 2px), radial-gradient(circle, rgba(150,87,255,.25) 0 1px, transparent 2px); background-size: 70px 88px, 118px 134px; animation: ambientStars 14s linear infinite; }

.ambient-layer--green::before { background: repeating-radial-gradient(circle at 50% 52%, transparent 0 44px, rgba(87,223,120,.15) 46px 48px, transparent 50px 84px), radial-gradient(circle at 42% 58%, rgba(87,223,120,.13), transparent 42%); animation: ambientGrowth 8s ease-in-out infinite; }
.ambient-layer--green::after { background: linear-gradient(115deg, transparent 0 22%, rgba(120,255,170,.12) 35%, transparent 48% 100%); animation: ambientOrganicLines 9s ease-in-out infinite; }

.ambient-layer--teal::before { background: repeating-radial-gradient(circle at 50% 48%, transparent 0 50px, rgba(46,208,187,.16) 52px 54px, transparent 57px 96px); animation: ambientSignal 6.2s ease-out infinite; }
.ambient-layer--teal::after { background: repeating-linear-gradient(0deg, transparent 0 42px, rgba(120,255,235,.10) 43px, transparent 45px 96px); animation: ambientWaveScan 8s ease-in-out infinite; }

.ambient-layer--cyan::before { background: linear-gradient(112deg, transparent 0 20%, rgba(68,217,255,.16) 32%, transparent 46% 100%), linear-gradient(58deg, transparent 0 44%, rgba(220,255,255,.10) 52%, transparent 62% 100%); animation: ambientLiquid 8s cubic-bezier(.45,0,.2,1) infinite; }
.ambient-layer--cyan::after { background: repeating-linear-gradient(106deg, transparent 0 72px, rgba(68,217,255,.14) 74px 76px, transparent 80px 156px); animation: ambientCyanThreads 8.8s linear infinite; }

.ambient-layer--indigo::before { background: linear-gradient(rgba(120,132,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(120,132,255,.08) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(107,115,255,.10), transparent 52%); background-size: 58px 58px, 58px 58px, 100% 100%; animation: ambientGrid 6.8s ease-in-out infinite; }
.ambient-layer--indigo::after { background: linear-gradient(90deg, transparent, rgba(170,180,255,.20), transparent); transform: translateY(-45%); animation: ambientScan 7s ease-in-out infinite; }

.ambient-layer--magenta::before { background: conic-gradient(from 16deg at 50% 50%, transparent 0 8%, rgba(255,60,165,.16) 10% 13%, transparent 15% 42%, rgba(255,200,235,.10) 44% 47%, transparent 49% 100%), radial-gradient(circle at 50% 52%, rgba(255,60,165,.12), transparent 52%); animation: ambientCreativeBloom 8s ease-in-out infinite; }
.ambient-layer--magenta::after { background-image: radial-gradient(circle, rgba(255,60,165,.25) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px); background-size: 72px 76px, 122px 138px; animation: ambientCreativeFloat 13s linear infinite; }

.ambient-layer--lime::before { background: radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(200,239,68,.16) 19%, transparent 21% 100%), radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(200,239,68,.10) 35%, transparent 37% 100%); animation: ambientFuturePulse 5.2s ease-out infinite; }
.ambient-layer--lime::after { background-image: radial-gradient(circle, rgba(200,239,68,.26) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px); background-size: 62px 62px, 100px 100px; animation: ambientFutureDots 10s linear infinite; }

.ambient-layer--gold::before { background: radial-gradient(circle at 50% 54%, rgba(255,182,46,.20), transparent 50%), radial-gradient(circle at 50% 24%, rgba(255,255,255,.11), transparent 28%); filter: blur(8px); animation: ambientGoldBreath 6s ease-in-out infinite; }
.ambient-layer--gold::after { background: linear-gradient(110deg, transparent 0%, rgba(255,224,150,.18) 45%, transparent 70%); animation: ambientGoldShimmer 9s ease-in-out infinite; }

.ambient-particle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 999px; opacity: .58; animation-duration: var(--duration); animation-delay: var(--delay); animation-iteration-count: infinite; animation-timing-function: ease-in-out; pointer-events: none; }
.ambient-particle--ember { background: rgba(255,170,100,.7); box-shadow: 0 0 10px rgba(255,100,50,.45); animation-name: particleRise; }
.ambient-particle--drop { background: rgba(150,220,255,.28); box-shadow: inset 0 0 4px rgba(255,255,255,.3); animation-name: particleDrop; }
.ambient-particle--leaf { border-radius: 60% 40% 60% 40%; background: rgba(255,150,65,.34); animation-name: particleLeaf; }
.ambient-particle--nebula, .ambient-particle--creative, .ambient-particle--dust { background: rgba(255,255,255,.28); box-shadow: 0 0 10px currentColor; animation-name: particleFloat; }
.ambient-particle--node, .ambient-particle--future, .ambient-particle--stream { background: rgba(120,255,210,.26); box-shadow: 0 0 10px currentColor; animation-name: particleFloat; }
.ambient-layer--purple .ambient-particle { color: #9657ff; }
.ambient-layer--magenta .ambient-particle { color: #ff3ca5; }
.ambient-layer--gold .ambient-particle { color: #ffb62e; }
.ambient-layer--lime .ambient-particle { color: #c8ef44; }
.ambient-layer--cyan .ambient-particle { color: #44d9ff; }
.ambient-layer--green .ambient-particle { color: #57df78; }

@keyframes ambientElectricThreads { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 180px -140px, -160px 140px, 0 0; } }
@keyframes ambientPulse { 0% { transform: scale(.94); opacity: .16; } 60% { transform: scale(1.04); opacity: .36; } 100% { transform: scale(1.1); opacity: .08; } }
@keyframes ambientFireGlow { from { transform: translate3d(-1%,1%,0) scale(1); } to { transform: translate3d(1%,-1%,0) scale(1.04); } }
@keyframes ambientHeat { 0%,100% { transform: skewX(-2deg) translateX(0); opacity: .18; } 50% { transform: skewX(2deg) translateX(12px); opacity: .28; } }
@keyframes ambientRain { from { background-position: 0 0, 0 0; } to { background-position: 0 220px, 0 0; } }
@keyframes ambientRipple { 0%,100% { transform: scale(.96); opacity: .14; } 50% { transform: scale(1.06); opacity: .28; } }
@keyframes ambientWarmDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(1.2%,-.8%,0); } }
@keyframes ambientLeafTrails { from { background-position: 0 0; } to { background-position: -80px 180px; } }
@keyframes ambientNebula { 0%,100% { transform: scale(1) translate3d(0,0,0); } 50% { transform: scale(1.04) translate3d(1%,-1%,0); } }
@keyframes ambientStars { from { background-position: 0 0, 0 0; } to { background-position: -44px -120px, 34px -160px; } }
@keyframes ambientGrowth { 0% { transform: scale(.96); opacity: .18; } 55% { transform: scale(1.04); opacity: .36; } 100% { transform: scale(1.08); opacity: .12; } }
@keyframes ambientOrganicLines { 0%,100% { background-position: 0 0; } 50% { background-position: 80px -40px; } }
@keyframes ambientSignal { 0% { transform: scale(.94); opacity: .16; } 60% { transform: scale(1.04); opacity: .34; } 100% { transform: scale(1.09); opacity: .10; } }
@keyframes ambientWaveScan { 0%,100% { background-position: 0 0; } 50% { background-position: 0 80px; } }
@keyframes ambientLiquid { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 110px -22px, -86px 24px; } }
@keyframes ambientCyanThreads { from { background-position: 0 0; } to { background-position: 170px -145px; } }
@keyframes ambientGrid { 0%,100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.015); opacity: .30; } }
@keyframes ambientScan { 0%,100% { transform: translateY(-45%); opacity: .06; } 50% { transform: translateY(45%); opacity: .24; } }
@keyframes ambientCreativeBloom { 0%,100% { transform: scale(.98); opacity: .18; } 50% { transform: scale(1.04); opacity: .34; } }
@keyframes ambientCreativeFloat { from { background-position: 0 0, 0 0; } to { background-position: -40px -140px, 34px -180px; } }
@keyframes ambientFuturePulse { 0% { transform: scale(.94); opacity: .12; } 55% { transform: scale(1.03); opacity: .32; } 100% { transform: scale(1.08); opacity: .08; } }
@keyframes ambientFutureDots { from { background-position: 0 0, 0 0; } to { background-position: 42px -100px, -32px -140px; } }
@keyframes ambientGoldBreath { 0%,100% { transform: scale(.98); opacity: .20; } 50% { transform: scale(1.04); opacity: .34; } }
@keyframes ambientGoldShimmer { 0%,30% { transform: translateX(-80%); opacity: 0; } 50% { opacity: .35; } 80%,100% { transform: translateX(80%); opacity: 0; } }
@keyframes particleRise { from { transform: translate3d(0, 50px, 0) scale(.75); opacity: 0; } 35% { opacity: .7; } to { transform: translate3d(var(--drift), -120px, 0) scale(1.05); opacity: 0; } }
@keyframes particleDrop { from { transform: translate3d(0, -60px, 0); opacity: 0; } 30% { opacity: .45; } to { transform: translate3d(var(--drift), 120px, 0); opacity: 0; } }
@keyframes particleLeaf { from { transform: translate3d(0,-60px,0) rotate(0deg); opacity: 0; } 35% { opacity: .45; } to { transform: translate3d(var(--drift),120px,0) rotate(160deg); opacity: 0; } }
@keyframes particleFloat { 0%,100% { transform: translate3d(0,0,0) scale(.8); opacity: .08; } 50% { transform: translate3d(var(--drift), -38px,0) scale(1.08); opacity: .55; } }

@media (max-width: 768px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.05rem, 9vw, 2.75rem) !important;
    letter-spacing: 0.045em !important;
    text-indent: 0.045em !important;
  }

  .home-hero .hero-byline.hero-byline--brand {
    white-space: normal !important;
    max-width: 23ch !important;
    font-size: clamp(0.66rem, 2.8vw, 0.82rem) !important;
    letter-spacing: 0.055em !important;
    text-indent: 0.055em !important;
  }

  .home-hero .hero-text--widget {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "byline"
      "widget"
      "readout"
      "actions" !important;
    gap: 0.62rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(64vw, 272px) !important;
    --core-size: min(31vw, 124px) !important;
    --line-distance: calc(var(--widget-size) * 0.28) !important;
    margin-bottom: 0.05rem !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    justify-self: center !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.8rem 0.75rem !important;
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker,
  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout span[data-hero-mode-description] { text-align: center !important; }
  .home-hero .hero-mode-readout span[data-hero-mode-description] { max-width: 30ch !important; margin-inline: auto; }
  .home-hero .hero-actions { padding: 0.7rem !important; }
  .home-foundations.section { margin-top: 2rem !important; }
}

@media (max-width: 520px) {
  .home-hero .hero-overlay {
    padding: 0.82rem 0.68rem 1rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(62vw, 246px) !important;
    --core-size: min(30vw, 112px) !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word] {
    font-size: clamp(1.08rem, 5.2vw, 1.42rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.82rem !important;
    line-height: 1.23 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-layer,
  .ambient-layer::before,
  .ambient-layer::after,
  .ambient-particle {
    animation-duration: 30s !important;
    animation-iteration-count: 1 !important;
    transform: none !important;
  }
  .ambient-particle { display: none !important; }
}

/* =========================================================
   v11 focused fix: proportional headings + hero crop/spacing repair
   ========================================================= */
:root {
  --font-heading: "Montserrat", "Sora", "Inter", "Segoe UI", system-ui, sans-serif;
  --heading-tracking-main: 0.035em;
  --heading-tracking-small: 0.055em;
}

/* Reduce oversized heading system while preserving the bold geometric style. */
h1,
h2,
h3,
.page-title,
.section-title,
.section-heading h2,
.home-foundations .section-title,
.services .section-title,
.process-scene .section-title,
.about-scene .section-title,
.portfolio-scene .section-title,
.contact-scene .section-title {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: var(--heading-tracking-main) !important;
  line-height: 1.02 !important;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-title,
.section-heading h2,
.home-foundations .section-title,
.services .section-title {
  font-size: clamp(2.15rem, 4.4vw, 4.2rem) !important;
  max-width: 17ch;
}

.page-title,
.hero-title {
  font-size: clamp(2.25rem, 4.8vw, 4.45rem) !important;
  letter-spacing: 0.032em !important;
}

.feature-panel h3,
.service-card-button h3,
.package-card h3,
.card-title,
.panel-title,
.cta-panel h2,
.cta-panel h3 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.026em !important;
  line-height: 1.03 !important;
}

.feature-panel h3 {
  font-size: clamp(1.45rem, 2.15vw, 2.15rem) !important;
}

.service-card-button h3,
.package-card h3 {
  font-size: clamp(1.35rem, 1.9vw, 2rem) !important;
}

.kicker,
.eyebrow,
.panel-kicker,
.feature-panel .panel-kicker,
.hero-mode-readout__kicker,
.timeline-support__eyebrow,
.timeline-year {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: var(--heading-tracking-small) !important;
}

/* Hero panel must contain all modules; no bottom clipping, no label badges near dots. */
.home-hero.section {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding-top: clamp(0.55rem, 1.1vw, 0.95rem) !important;
  padding-bottom: clamp(3.25rem, 5.5vw, 4.8rem) !important;
  margin-bottom: 0 !important;
}

.home-hero .hero-overlay {
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: clamp(1rem, 1.65vw, 1.45rem) clamp(0.95rem, 1.8vw, 1.45rem) clamp(1.2rem, 2vw, 1.65rem) !important;
  margin-inline: auto !important;
  border-radius: clamp(26px, 2.4vw, 36px) !important;
}

.home-hero .hero-text--widget {
  width: min(100%, 980px) !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) !important;
  grid-template-areas:
    "brand brand"
    "byline byline"
    "widget widget"
    "readout actions" !important;
  align-items: start !important;
  justify-items: center !important;
  row-gap: clamp(0.45rem, 0.82vw, 0.74rem) !important;
  column-gap: clamp(1rem, 2vw, 2.2rem) !important;
  padding: 0 !important;
}

.home-hero .hero-brand {
  grid-area: brand !important;
  margin: 0 auto !important;
}

.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-family: var(--font-heading) !important;
  font-size: clamp(3rem, 5.15vw, 4.75rem) !important;
  letter-spacing: 0.062em !important;
  text-indent: 0.062em !important;
  line-height: 0.9 !important;
}

.home-hero .brand-letter,
.home-hero .brand-label .brand-letter {
  margin-inline: 0 !important;
}

.home-hero .hero-byline.hero-byline--brand {
  grid-area: byline !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  margin: 0 auto 0.05rem !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.82rem, 1.2vw, 1.08rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.075em !important;
  text-indent: 0.075em !important;
  text-align: center !important;
}

.home-hero .hero-radial-widget {
  grid-area: widget !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto 0.15rem !important;
  --widget-size: clamp(286px, 25.5vw, 350px) !important;
  --core-size: clamp(132px, 12vw, 150px) !important;
  --line-distance: calc(var(--widget-size) * 0.287) !important;
}

.home-hero .hero-radial-widget__dot {
  width: 34px !important;
  height: 34px !important;
  --size: clamp(15px, 1vw, 19px) !important;
}

.home-hero .hero-radial-widget__dot::after,
.home-hero .hero-radial-widget__tooltip,
.home-hero .dot-word,
.home-hero .hero-radial-widget__word {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.home-hero .hero-mode-readout {
  grid-area: readout !important;
  justify-self: start !important;
  align-self: end !important;
  width: min(100%, 340px) !important;
  min-height: 116px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.82rem 0.95rem 0.9rem !important;
  border-radius: 21px !important;
  text-align: left !important;
}

.home-hero .hero-mode-readout__kicker {
  display: block !important;
  margin-bottom: 0.08rem !important;
  font-size: 0.72rem !important;
}

.home-hero .hero-mode-readout strong,
.home-hero .hero-mode-readout strong[data-hero-mode-word] {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 0.16rem !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.18rem, 2vw, 1.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.02em !important;
}

.home-hero .hero-mode-readout span[data-hero-mode-description] {
  display: block !important;
  max-width: 26ch !important;
  overflow: visible !important;
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
}

.home-hero .hero-actions {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: end !important;
  width: min(100%, 310px) !important;
  min-height: 116px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.72rem !important;
  border-radius: 21px !important;
  gap: 0.56rem !important;
}

.home-hero .hero-actions .btn {
  min-height: 44px !important;
  border-radius: 15px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
}

.home-foundations.section {
  clear: both !important;
  margin-top: clamp(2.75rem, 5.2vw, 4.25rem) !important;
  padding-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 1100px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.75rem, 5vw, 4.1rem) !important;
    letter-spacing: 0.052em !important;
    text-indent: 0.052em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: clamp(270px, 30vw, 330px) !important;
    --core-size: clamp(124px, 14vw, 144px) !important;
  }
}

@media (max-width: 820px) {
  .section-title,
  .section-heading h2,
  .home-foundations .section-title,
  .services .section-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    letter-spacing: 0.03em !important;
    max-width: 13ch;
  }

  .home-hero.section {
    padding-top: 0.25rem !important;
    padding-bottom: 2.4rem !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 1rem)) !important;
    padding: 0.88rem 0.72rem 1.05rem !important;
    border-radius: 26px !important;
  }

  .home-hero .hero-text--widget {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "byline"
      "widget"
      "readout"
      "actions" !important;
    row-gap: 0.58rem !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2rem, 7.8vw, 2.72rem) !important;
    letter-spacing: 0.042em !important;
    text-indent: 0.042em !important;
  }

  .home-hero .hero-byline.hero-byline--brand {
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: clamp(0.56rem, 2.25vw, 0.74rem) !important;
    letter-spacing: 0.045em !important;
    text-indent: 0.045em !important;
    line-height: 1.04 !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(58vw, 250px) !important;
    --core-size: min(29vw, 112px) !important;
    --line-distance: calc(var(--widget-size) * 0.28) !important;
    margin: 0 auto 0.05rem !important;
  }

  .home-hero .hero-radial-widget__dot {
    width: 30px !important;
    height: 30px !important;
    --size: clamp(14px, 3.7vw, 17px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    justify-self: center !important;
    width: min(100%, 100%) !important;
    min-height: 0 !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.74rem 0.72rem 0.8rem !important;
    border-radius: 18px !important;
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker,
  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    text-align: center !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.64rem !important;
  }

  .home-hero .hero-mode-readout strong,
  .home-hero .hero-mode-readout strong[data-hero-mode-word] {
    font-size: clamp(1rem, 4.65vw, 1.35rem) !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    max-width: 30ch !important;
    margin-inline: auto !important;
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
  }

  .home-hero .hero-actions {
    padding: 0.62rem !important;
    gap: 0.5rem !important;
    border-radius: 18px !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 40px !important;
    font-size: 0.84rem !important;
  }

  .home-foundations.section {
    margin-top: 2.35rem !important;
  }
}

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

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

  .home-hero .hero-byline.hero-byline--brand {
    font-size: clamp(0.5rem, 2.1vw, 0.66rem) !important;
    letter-spacing: 0.035em !important;
    text-indent: 0.035em !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(54vw, 220px) !important;
    --core-size: min(27vw, 98px) !important;
  }

  .section-title,
  .section-heading h2,
  .home-foundations .section-title,
  .services .section-title {
    font-size: clamp(1.78rem, 8.4vw, 2.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.025em !important;
  }

  .feature-panel h3,
  .service-card-button h3,
  .package-card h3 {
    font-size: clamp(1.22rem, 6.2vw, 1.65rem) !important;
    letter-spacing: 0.018em !important;
  }
}

.home-hero .hero-overlay {
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(53, 61, 77, 0.92), rgba(37, 45, 59, 0.91) 56%, rgba(29, 37, 49, 0.94)),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06), transparent 42%) !important;
}

.home-hero .hero-ambient {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  contain: paint !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,0.035), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%, rgba(0,0,0,0.08));
}

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative !important;
  z-index: 2 !important;
}

.home-hero .ambient-layer {
  position: absolute !important;
  inset: -10% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0,0,0) scale(1.02) !important;
  transition: opacity 560ms ease, transform 760ms cubic-bezier(.22,.61,.36,1), filter 560ms ease !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.08) brightness(1.02) !important;
  will-change: opacity, transform, filter;
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-active-effect="red"] .ambient-layer--red,
.home-hero[data-preview-effect="red"] .ambient-layer--red,
.home-hero[data-active-effect="blue"] .ambient-layer--blue,
.home-hero[data-preview-effect="blue"] .ambient-layer--blue,
.home-hero[data-active-effect="orange"] .ambient-layer--orange,
.home-hero[data-preview-effect="orange"] .ambient-layer--orange,
.home-hero[data-active-effect="purple"] .ambient-layer--purple,
.home-hero[data-preview-effect="purple"] .ambient-layer--purple,
.home-hero[data-active-effect="green"] .ambient-layer--green,
.home-hero[data-preview-effect="green"] .ambient-layer--green,
.home-hero[data-active-effect="teal"] .ambient-layer--teal,
.home-hero[data-preview-effect="teal"] .ambient-layer--teal,
.home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-active-effect="lime"] .ambient-layer--lime,
.home-hero[data-preview-effect="lime"] .ambient-layer--lime,
.home-hero[data-active-effect="gold"] .ambient-layer--gold,
.home-hero[data-preview-effect="gold"] .ambient-layer--gold {
  opacity: 0.96 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

.home-hero .hero-radial-widget__tooltip,
.home-hero .hero-radial-widget__dot::after,
.home-hero .hero-radial-widget__dot [class*="word"],
.home-hero .hero-radial-widget__dot [class*="label"]:not(.hero-radial-widget__bead) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Yellow / Spark — intelligent electric field */
.home-hero .ambient-layer--yellow::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 95, .28), transparent 30%),
    radial-gradient(circle at 36% 60%, rgba(255, 244, 172, .16), transparent 24%),
    conic-gradient(from 18deg at 50% 50%, transparent 0 5%, rgba(255, 229, 112, .36) 7% 8%, transparent 10% 24%, rgba(255,255,225,.22) 26% 27%, transparent 30% 56%, rgba(255,210,76,.28) 59% 60%, transparent 63% 100%),
    repeating-linear-gradient(122deg, transparent 0 54px, rgba(255,236,150,.26) 56px 58px, transparent 61px 150px);
  filter: blur(.35px) drop-shadow(0 0 12px rgba(255,207,75,.28));
  animation: v12ElectricField 5.8s linear infinite;
}
.home-hero .ambient-layer--yellow::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255,219,74,.26) 23%, transparent 25% 100%),
    repeating-linear-gradient(68deg, transparent 0 92px, rgba(255,255,220,.18) 94px 95px, transparent 98px 190px);
  opacity: .82;
  animation: v12ElectricPulse 4.2s ease-out infinite;
}
.home-hero .ambient-layer--yellow .ambient-particle { color:#ffd94f; }

/* Red / Drive — ember light behind glass */
.home-hero .ambient-layer--red::before {
  background:
    radial-gradient(circle at 26% 82%, rgba(255,86,44,.40), transparent 31%),
    radial-gradient(circle at 68% 74%, rgba(199,35,35,.34), transparent 38%),
    radial-gradient(circle at 48% 52%, rgba(255,158,84,.14), transparent 48%),
    linear-gradient(180deg, transparent 0 34%, rgba(120,8,12,.24) 100%);
  filter: blur(17px) saturate(1.18);
  animation: v12FireGlow 7.6s ease-in-out infinite alternate;
}
.home-hero .ambient-layer--red::after {
  background:
    repeating-linear-gradient(86deg, transparent 0 26px, rgba(255,185,120,.085) 28px 30px, transparent 34px 88px),
    radial-gradient(ellipse at 50% 92%, rgba(255,107,55,.24), transparent 42%);
  opacity: .74;
  animation: v12HeatShimmer 5.6s ease-in-out infinite;
}
.home-hero .ambient-layer--red .ambient-particle { color:#ff6b45; }

/* Blue / Flow — cinematic wet glass */
.home-hero .ambient-layer--blue::before {
  background:
    repeating-linear-gradient(104deg, transparent 0 24px, rgba(147,215,255,.28) 25px 27px, transparent 30px 72px),
    linear-gradient(104deg, transparent 0 34%, rgba(94,172,255,.13) 48%, transparent 62% 100%),
    radial-gradient(circle at 50% 48%, rgba(42,138,255,.18), transparent 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  animation: v12RainSlide 8.8s linear infinite;
}
.home-hero .ambient-layer--blue::after {
  background:
    radial-gradient(circle at 30% 40%, transparent 0 4%, rgba(135,215,255,.25) 4.5%, transparent 7%),
    radial-gradient(circle at 72% 70%, transparent 0 3%, rgba(130,205,255,.18) 3.6%, transparent 6.5%),
    radial-gradient(circle at 50% 55%, transparent 0 19%, rgba(100,190,255,.16) 20%, transparent 23% 100%);
  animation: v12WaterRipple 7.6s ease-out infinite;
}
.home-hero .ambient-layer--blue .ambient-particle { color:#56b8ff; }

/* Orange / Momentum — stylised warm organic drift */
.home-hero .ambient-layer--orange::before {
  background:
    radial-gradient(circle at 44% 68%, rgba(255,137,48,.28), transparent 42%),
    linear-gradient(126deg, transparent 0 16%, rgba(255,162,70,.18) 28%, transparent 40% 100%),
    repeating-linear-gradient(140deg, transparent 0 70px, rgba(255,176,86,.16) 73px 80px, transparent 86px 176px);
  animation: v12WarmMomentum 9.2s ease-in-out infinite;
}
.home-hero .ambient-layer--orange::after {
  background:
    radial-gradient(ellipse at 18% 78%, rgba(255,111,34,.20), transparent 34%),
    radial-gradient(ellipse at 82% 35%, rgba(255,201,96,.14), transparent 30%);
  filter: blur(8px);
  animation: v12LeafParallax 10.8s ease-in-out infinite;
}
.home-hero .ambient-layer--orange .ambient-particle { color:#ff9a3d; }

/* Purple / Vision — premium nebula depth */
.home-hero .ambient-layer--purple::before {
  background:
    radial-gradient(circle at 28% 38%, rgba(145,82,255,.32), transparent 27%),
    radial-gradient(circle at 72% 52%, rgba(214,150,255,.18), transparent 24%),
    radial-gradient(circle at 52% 72%, rgba(75,32,150,.28), transparent 46%),
    radial-gradient(circle at 45% 45%, rgba(255,255,255,.08), transparent 34%);
  filter: blur(14px) saturate(1.16);
  animation: v12NebulaMist 13.5s ease-in-out infinite;
}
.home-hero .ambient-layer--purple::after {
  background-image:
    radial-gradient(circle, rgba(235,225,255,.28) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(154,94,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px);
  background-size: 64px 76px, 112px 132px, 176px 190px;
  animation: v12StarDepth 15s linear infinite;
}
.home-hero .ambient-layer--purple .ambient-particle { color:#9d6cff; }

/* Green / Growth — abstract organic expansion */
.home-hero .ambient-layer--green::before {
  background:
    repeating-radial-gradient(circle at 50% 54%, transparent 0 42px, rgba(86,224,127,.20) 44px 46px, transparent 49px 90px),
    radial-gradient(circle at 42% 58%, rgba(90,230,130,.19), transparent 42%),
    linear-gradient(115deg, transparent 0 24%, rgba(102,255,158,.13) 36%, transparent 52% 100%);
  animation: v12GrowthRings 8.4s ease-out infinite;
}
.home-hero .ambient-layer--green::after {
  background:
    repeating-linear-gradient(25deg, transparent 0 76px, rgba(120,255,170,.12) 78px 80px, transparent 84px 162px),
    radial-gradient(circle at 60% 38%, rgba(102,255,166,.13), transparent 28%);
  animation: v12OrganicFlow 11s ease-in-out infinite;
}
.home-hero .ambient-layer--green .ambient-particle { color:#58e684; }

/* Teal / Clarity — clean signal waves */
.home-hero .ambient-layer--teal::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(67,231,214,.24) 48px 50px, transparent 53px 94px),
    radial-gradient(circle at 50% 48%, rgba(46,208,187,.16), transparent 46%);
  animation: v12SignalRings 6.4s ease-out infinite;
}
.home-hero .ambient-layer--teal::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(116,255,236,.12) 48px 49px, transparent 52px 110px),
    linear-gradient(90deg, transparent, rgba(71,245,223,.16), transparent);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  animation: v12ClarityWave 8.2s ease-in-out infinite;
}
.home-hero .ambient-layer--teal .ambient-particle { color:#39e3d1; }

/* Cyan / Agility — liquid light flow */
.home-hero .ambient-layer--cyan::before {
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(77,224,255,.30) 31%, transparent 44% 100%),
    linear-gradient(58deg, transparent 0 42%, rgba(220,255,255,.18) 52%, transparent 64% 100%),
    radial-gradient(circle at 58% 52%, rgba(68,217,255,.18), transparent 42%);
  filter: blur(.35px) saturate(1.15);
  animation: v12LiquidRibbon 8.6s cubic-bezier(.45,0,.2,1) infinite;
}
.home-hero .ambient-layer--cyan::after {
  background:
    repeating-linear-gradient(106deg, transparent 0 70px, rgba(81,226,255,.24) 72px 74px, transparent 78px 158px),
    radial-gradient(ellipse at 28% 76%, rgba(38,210,255,.18), transparent 35%);
  animation: v12LiquidThreads 9.2s linear infinite;
}
.home-hero .ambient-layer--cyan .ambient-particle { color:#48ddff; }

/* Indigo / Precision — measured grid and nodes */
.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(130,142,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,142,255,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(103,112,255,.14), transparent 56%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  animation: v12GridMeasure 7.2s ease-in-out infinite;
}
.home-hero .ambient-layer--indigo::after {
  background:
    linear-gradient(90deg, transparent, rgba(180,190,255,.32), transparent),
    radial-gradient(circle, rgba(165,174,255,.28) 0 1px, transparent 2px);
  background-size: 100% 2px, 84px 84px;
  animation: v12PrecisionScan 7.6s ease-in-out infinite;
}
.home-hero .ambient-layer--indigo .ambient-particle { color:#7a82ff; }

/* Magenta / Create — refined chromatic bloom */
.home-hero .ambient-layer--magenta::before {
  background:
    conic-gradient(from 12deg at 50% 50%, transparent 0 7%, rgba(255,62,170,.28) 10% 14%, transparent 17% 38%, rgba(255,210,238,.16) 42% 46%, transparent 50% 100%),
    radial-gradient(circle at 32% 76%, rgba(255,62,170,.24), transparent 32%),
    radial-gradient(circle at 72% 38%, rgba(255,142,220,.14), transparent 30%);
  animation: v12CreativeBloom 8.5s ease-in-out infinite;
}
.home-hero .ambient-layer--magenta::after {
  background-image:
    radial-gradient(circle, rgba(255,70,180,.30) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.15) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255,80,190,.18), transparent 46%);
  background-size: 64px 82px, 122px 146px, 100% 100%;
  animation: v12CreativeParticles 12.5s linear infinite;
}
.home-hero .ambient-layer--magenta .ambient-particle { color:#ff44ad; }

/* Lime / Future — kinetic optimism */
.home-hero .ambient-layer--lime::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(203,242,70,.26) 19%, transparent 22% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(203,242,70,.15) 35%, transparent 38% 100%),
    radial-gradient(circle at 50% 50%, rgba(203,242,70,.13), transparent 42%);
  animation: v12FuturePulse 5.4s ease-out infinite;
}
.home-hero .ambient-layer--lime::after {
  background-image:
    radial-gradient(circle, rgba(205,245,80,.32) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px),
    linear-gradient(108deg, transparent, rgba(210,255,88,.13), transparent 62%);
  background-size: 54px 54px, 104px 104px, 100% 100%;
  animation: v12KineticDots 9.5s linear infinite;
}
.home-hero .ambient-layer--lime .ambient-particle { color:#cff448; }

/* Gold / Impact — premium aura and shimmer */
.home-hero .ambient-layer--gold::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,184,52,.32), transparent 42%),
    radial-gradient(circle at 25% 78%, rgba(255,202,92,.18), transparent 30%),
    radial-gradient(circle at 82% 34%, rgba(255,232,156,.14), transparent 32%),
    linear-gradient(110deg, transparent 0 18%, rgba(255,184,52,.18) 36%, transparent 54% 100%);
  filter: blur(9px) saturate(1.12);
  animation: v12ImpactGlow 6.4s ease-in-out infinite;
}
.home-hero .ambient-layer--gold::after {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255,228,160,.32) 47%, transparent 60% 100%),
    radial-gradient(circle, rgba(255,204,100,.22) 0 1px, transparent 2px);
  background-size: 100% 100%, 80px 92px;
  animation: v12GoldShimmer 9.6s ease-in-out infinite;
}
.home-hero .ambient-layer--gold .ambient-particle { color:#ffbd3a; }

.home-hero .ambient-particle {
  position: absolute !important;
  left: var(--x) !important;
  top: var(--y) !important;
  width: var(--size) !important;
  height: var(--size) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: 999px;
  filter: blur(var(--blur, 0px));
  animation-duration: var(--duration) !important;
  animation-delay: var(--delay) !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: ease-in-out !important;
  will-change: transform, opacity;
}
.home-hero .ambient-particle--spark { background: rgba(255,238,150,.82); box-shadow: 0 0 10px currentColor, 0 0 22px rgba(255,225,90,.28); animation-name: v12ParticleSpark !important; }
.home-hero .ambient-particle--ember { background: rgba(255,138,74,.76); box-shadow: 0 0 12px rgba(255,80,40,.48); animation-name: v12ParticleRise !important; }
.home-hero .ambient-particle--drop { background: rgba(150,222,255,.30); box-shadow: inset 0 0 5px rgba(255,255,255,.34), 0 0 10px rgba(110,200,255,.26); animation-name: v12ParticleDrop !important; }
.home-hero .ambient-particle--leaf { border-radius: 60% 40% 62% 38%; background: rgba(255,158,68,.38); box-shadow: 0 0 12px rgba(255,130,50,.22); animation-name: v12ParticleLeaf !important; }
.home-hero .ambient-particle--nebula { background: rgba(226,208,255,.38); box-shadow: 0 0 12px currentColor; animation-name: v12ParticleFloat !important; }
.home-hero .ambient-particle--node { background: rgba(96,240,138,.38); box-shadow: 0 0 12px currentColor; animation-name: v12ParticleNode !important; }
.home-hero .ambient-particle--signal { background: rgba(85,244,225,.30); box-shadow: 0 0 12px currentColor; animation-name: v12ParticleSignal !important; }
.home-hero .ambient-particle--stream { background: rgba(80,225,255,.36); box-shadow: 0 0 14px currentColor; animation-name: v12ParticleStream !important; }
.home-hero .ambient-particle--grid-node { background: rgba(150,160,255,.34); box-shadow: 0 0 12px currentColor; animation-name: v12ParticleGrid !important; }
.home-hero .ambient-particle--creative { background: rgba(255,78,180,.38); box-shadow: 0 0 14px currentColor; animation-name: v12ParticleBurst !important; }
.home-hero .ambient-particle--future { background: rgba(210,245,80,.42); box-shadow: 0 0 14px currentColor; animation-name: v12ParticleFuture !important; }
.home-hero .ambient-particle--dust { background: rgba(255,205,96,.42); box-shadow: 0 0 12px currentColor; animation-name: v12ParticleDust !important; }

@keyframes v12ElectricField { 0% { background-position: 0 0, 0 0, 0 0, 0 0; filter: blur(.35px) brightness(1); } 50% { background-position: 0 0, 0 0, 0 0, 90px -64px; filter: blur(.2px) brightness(1.18); } 100% { background-position: 0 0, 0 0, 0 0, 180px -130px; filter: blur(.35px) brightness(1); } }
@keyframes v12ElectricPulse { 0% { transform: scale(.94); opacity: .18; } 50% { transform: scale(1.04); opacity: .58; } 100% { transform: scale(1.14); opacity: .08; } }
@keyframes v12FireGlow { from { transform: translate3d(-1.4%,1.2%,0) scale(1); } to { transform: translate3d(1.4%,-1.2%,0) scale(1.06); } }
@keyframes v12HeatShimmer { 0%,100% { transform: skewX(-2deg) translateX(0); opacity: .42; } 50% { transform: skewX(2deg) translateX(18px); opacity: .68; } }
@keyframes v12RainSlide { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 240px, 80px 0, 0 0; } }
@keyframes v12WaterRipple { 0% { transform: scale(.96); opacity: .18; } 56% { transform: scale(1.08); opacity: .48; } 100% { transform: scale(1.14); opacity: .1; } }
@keyframes v12WarmMomentum { 0%,100% { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0); } 50% { background-position: 40px -20px, 80px -30px, -80px 120px; transform: translate3d(1.2%,-.8%,0); } }
@keyframes v12LeafParallax { 0%,100% { transform: translate3d(-.8%, .6%,0) scale(1); } 50% { transform: translate3d(1.2%, -.7%,0) scale(1.04); } }
@keyframes v12NebulaMist { 0%,100% { transform: scale(1) translate3d(0,0,0); } 50% { transform: scale(1.05) translate3d(.8%,-1.1%,0); } }
@keyframes v12StarDepth { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -50px -110px, 42px -160px, 20px -80px; } }
@keyframes v12GrowthRings { 0% { transform: scale(.96); opacity: .2; } 55% { transform: scale(1.04); opacity: .56; } 100% { transform: scale(1.10); opacity: .12; } }
@keyframes v12OrganicFlow { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 110px -42px, 0 0; } }
@keyframes v12SignalRings { 0% { transform: scale(.94); opacity: .18; } 62% { transform: scale(1.04); opacity: .52; } 100% { transform: scale(1.1); opacity: .1; } }
@keyframes v12ClarityWave { 0%,100% { background-position: 0 0, -100% 0; } 50% { background-position: 0 90px, 100% 0; } }
@keyframes v12LiquidRibbon { 0%,100% { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0); } 50% { background-position: 150px -40px, -120px 36px, 0 0; transform: translate3d(-1%,.8%,0); } }
@keyframes v12LiquidThreads { from { background-position: 0 0, 0 0; } to { background-position: 180px -150px, 0 0; } }
@keyframes v12GridMeasure { 0%,100% { background-position: 0 0, 0 0, 0 0; opacity: .78; } 50% { background-position: 18px 18px, 18px 18px, 0 0; opacity: .98; } }
@keyframes v12PrecisionScan { 0%,100% { background-position: 0 -20%, 0 0; opacity: .22; } 50% { background-position: 0 120%, 40px 40px; opacity: .62; } }
@keyframes v12CreativeBloom { 0%,100% { transform: scale(.98) rotate(0deg); opacity: .36; } 50% { transform: scale(1.05) rotate(2deg); opacity: .68; } }
@keyframes v12CreativeParticles { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -52px -130px, 48px -170px, 0 0; } }
@keyframes v12FuturePulse { 0% { transform: scale(.94); opacity: .16; } 55% { transform: scale(1.04); opacity: .58; } 100% { transform: scale(1.12); opacity: .10; } }
@keyframes v12KineticDots { from { background-position: 0 0, 0 0, -100px 0; } to { background-position: 48px -120px, -36px -150px, 140px 0; } }
@keyframes v12ImpactGlow { 0%,100% { transform: scale(.98); opacity: .42; } 50% { transform: scale(1.05); opacity: .72; } }
@keyframes v12GoldShimmer { 0%,24% { transform: translateX(-75%); opacity: .05; } 50% { opacity: .55; } 76%,100% { transform: translateX(75%); opacity: .08; } }
@keyframes v12ParticleSpark { 0%,100% { transform: translate3d(0,0,0) scale(.7); opacity: 0; } 28% { opacity: .75; } 62% { transform: translate3d(var(--drift-x), calc(var(--drift-y) * .5),0) scale(1.12); opacity: .18; } }
@keyframes v12ParticleRise { 0% { transform: translate3d(0,70px,0) scale(.72); opacity: 0; } 30% { opacity: .75; } 100% { transform: translate3d(var(--drift-x), -145px, 0) scale(1.04); opacity: 0; } }
@keyframes v12ParticleDrop { 0% { transform: translate3d(0,-75px,0); opacity: 0; } 28% { opacity: .5; } 100% { transform: translate3d(calc(var(--drift-x) * .4), 150px,0); opacity: 0; } }
@keyframes v12ParticleLeaf { 0% { transform: translate3d(0,-85px,0) rotate(var(--rotate)) scale(.7); opacity: 0; } 32% { opacity: .46; } 100% { transform: translate3d(var(--drift-x), 150px,0) rotate(calc(var(--rotate) + 170deg)) scale(1.02); opacity: 0; } }
@keyframes v12ParticleFloat { 0%,100% { transform: translate3d(0,0,0) scale(.72); opacity: .05; } 50% { transform: translate3d(var(--drift-x), var(--drift-y),0) scale(1.08); opacity: .58; } }
@keyframes v12ParticleNode { 0%,100% { transform: scale(.62); opacity: 0; } 46% { transform: scale(1.15); opacity: .55; } }
@keyframes v12ParticleSignal { 0%,100% { transform: translate3d(-40px,0,0) scale(.8); opacity: 0; } 44% { opacity: .45; } 90% { transform: translate3d(60px,0,0) scale(1.05); opacity: .1; } }
@keyframes v12ParticleStream { 0% { transform: translate3d(-70px,40px,0) scale(.72); opacity: 0; } 36% { opacity: .52; } 100% { transform: translate3d(120px,-70px,0) scale(1.05); opacity: 0; } }
@keyframes v12ParticleGrid { 0%,100% { transform: scale(.7); opacity: .05; } 50% { transform: scale(1.1); opacity: .5; } }
@keyframes v12ParticleBurst { 0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; } 32% { opacity: .64; } 100% { transform: translate3d(var(--drift-x), var(--drift-y),0) scale(1.2); opacity: 0; } }
@keyframes v12ParticleFuture { 0% { transform: scale(.6); opacity: 0; } 42% { transform: scale(1.12); opacity: .62; } 100% { transform: translate3d(calc(var(--drift-x) * .7), calc(var(--drift-y) * .7),0) scale(.82); opacity: 0; } }
@keyframes v12ParticleDust { 0%,100% { transform: translate3d(0,0,0) scale(.7); opacity: .06; } 50% { transform: translate3d(var(--drift-x), -42px,0) scale(1.08); opacity: .56; } }

@media (max-width: 820px) {
  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.9rem)) !important;
    padding-top: 0.78rem !important;
    padding-bottom: 0.92rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(57vw, 250px) !important;
    --core-size: min(28vw, 110px) !important;
  }

  .home-hero .ambient-layer {
    inset: -8% !important;
    filter: saturate(1.02) brightness(.96) !important;
  }

  .home-hero[data-active-effect] .ambient-layer,
  .home-hero[data-preview-effect] .ambient-layer {
    opacity: 0 !important;
  }

  .home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
  .home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
  .home-hero[data-active-effect="red"] .ambient-layer--red,
  .home-hero[data-preview-effect="red"] .ambient-layer--red,
  .home-hero[data-active-effect="blue"] .ambient-layer--blue,
  .home-hero[data-preview-effect="blue"] .ambient-layer--blue,
  .home-hero[data-active-effect="orange"] .ambient-layer--orange,
  .home-hero[data-preview-effect="orange"] .ambient-layer--orange,
  .home-hero[data-active-effect="purple"] .ambient-layer--purple,
  .home-hero[data-preview-effect="purple"] .ambient-layer--purple,
  .home-hero[data-active-effect="green"] .ambient-layer--green,
  .home-hero[data-preview-effect="green"] .ambient-layer--green,
  .home-hero[data-active-effect="teal"] .ambient-layer--teal,
  .home-hero[data-preview-effect="teal"] .ambient-layer--teal,
  .home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
  .home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
  .home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
  .home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
  .home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
  .home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
  .home-hero[data-active-effect="lime"] .ambient-layer--lime,
  .home-hero[data-preview-effect="lime"] .ambient-layer--lime,
  .home-hero[data-active-effect="gold"] .ambient-layer--gold,
  .home-hero[data-preview-effect="gold"] .ambient-layer--gold {
    opacity: 0.72 !important;
  }

  .home-hero .ambient-particle:nth-of-type(n+18) {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .home-hero .hero-overlay {
    border-radius: 24px !important;
    padding-inline: 0.58rem !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(56vw, 224px) !important;
    --core-size: min(27vw, 98px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .ambient-layer,
  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after,
  .home-hero .ambient-particle {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  .home-hero .ambient-particle {
    display: none !important;
  }
}

/* =========================================================
   v13 — hero ambient render + mobile fit correction
   Scope: homepage hero panel only. Restores visible coded effects,
   keeps desktop layout stable, enlarges/moves central widget slightly,
   and makes the mobile hero fit cleanly above the bottom navigation.
   ========================================================= */
.home-hero .hero-overlay {
  isolation: isolate !important;
  overflow: hidden !important;
}

.home-hero .hero-ambient {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  contain: paint !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--hero-mode-rgb,68,217,255),0.12), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,0.045), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.05)) !important;
}

.home-hero .hero-overlay > :not(.hero-ambient) {
  position: relative !important;
  z-index: 2 !important;
}

.home-hero .ambient-layer {
  display: block !important;
  position: absolute !important;
  inset: -12% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0,0,0) scale(1.02) !important;
  transition: opacity 560ms ease, filter 560ms ease, transform 760ms cubic-bezier(.22,.61,.36,1) !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.14) brightness(1.04) !important;
  will-change: opacity, transform, filter, background-position !important;
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-active-effect="red"] .ambient-layer--red,
.home-hero[data-preview-effect="red"] .ambient-layer--red,
.home-hero[data-active-effect="blue"] .ambient-layer--blue,
.home-hero[data-preview-effect="blue"] .ambient-layer--blue,
.home-hero[data-active-effect="orange"] .ambient-layer--orange,
.home-hero[data-preview-effect="orange"] .ambient-layer--orange,
.home-hero[data-active-effect="purple"] .ambient-layer--purple,
.home-hero[data-preview-effect="purple"] .ambient-layer--purple,
.home-hero[data-active-effect="green"] .ambient-layer--green,
.home-hero[data-preview-effect="green"] .ambient-layer--green,
.home-hero[data-active-effect="teal"] .ambient-layer--teal,
.home-hero[data-preview-effect="teal"] .ambient-layer--teal,
.home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-active-effect="lime"] .ambient-layer--lime,
.home-hero[data-preview-effect="lime"] .ambient-layer--lime,
.home-hero[data-active-effect="gold"] .ambient-layer--gold,
.home-hero[data-preview-effect="gold"] .ambient-layer--gold {
  opacity: 0.95 !important;
}

/* Stronger visible coded atmospheres */
.home-hero .ambient-layer--yellow::before {
  background:
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(255,236,130,.34) 44px 46px, transparent 49px 118px),
    repeating-linear-gradient(64deg, transparent 0 92px, rgba(255,255,255,.18) 94px 95px, transparent 98px 185px),
    radial-gradient(circle at 50% 46%, rgba(255,212,74,.24), transparent 38%) !important;
  animation: v13ElectricThreads 6.2s linear infinite !important;
}
.home-hero .ambient-layer--yellow::after {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(255,225,92,.28) 19% 20%, transparent 22% 100%),
    conic-gradient(from 22deg at 50% 50%, transparent 0 8%, rgba(255,245,170,.30) 10% 12%, transparent 14% 33%, rgba(255,214,84,.20) 35% 37%, transparent 40% 100%) !important;
  filter: blur(1px) !important;
  animation: v13PulseSweep 4.6s ease-in-out infinite !important;
}

.home-hero .ambient-layer--red::before {
  background:
    radial-gradient(circle at 28% 82%, rgba(255,74,42,.38), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(255,142,62,.22), transparent 38%),
    radial-gradient(circle at 54% 48%, rgba(150,18,24,.24), transparent 48%) !important;
  filter: blur(14px) !important;
  animation: v13FireBreath 6.8s ease-in-out infinite alternate !important;
}
.home-hero .ambient-layer--red::after {
  background-image:
    radial-gradient(circle, rgba(255,142,74,.46) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,80,54,.26) 0 1px, transparent 2px) !important;
  background-size: 74px 104px, 122px 150px !important;
  animation: v13Embers 7.4s linear infinite !important;
}

.home-hero .ambient-layer--blue::before {
  background:
    repeating-linear-gradient(102deg, transparent 0 22px, rgba(130,210,255,.26) 24px 25px, transparent 28px 62px),
    radial-gradient(circle at 50% 52%, rgba(47,133,255,.18), transparent 46%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  animation: v13RainSlide 7s linear infinite !important;
}
.home-hero .ambient-layer--blue::after {
  background:
    radial-gradient(circle at 34% 76%, transparent 0 12%, rgba(120,210,255,.22) 13% 14%, transparent 16% 100%),
    radial-gradient(circle at 70% 72%, transparent 0 9%, rgba(170,230,255,.18) 10% 11%, transparent 13% 100%) !important;
  animation: v13Ripple 5.8s ease-out infinite !important;
}

.home-hero .ambient-layer--orange::before {
  background:
    radial-gradient(ellipse at 30% 72%, rgba(255,145,55,.28), transparent 36%),
    repeating-linear-gradient(130deg, transparent 0 70px, rgba(255,152,60,.20) 72px 76px, transparent 82px 150px) !important;
  animation: v13WarmDrift 8.5s ease-in-out infinite !important;
}
.home-hero .ambient-layer--orange::after {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,160,62,.34) 0 2px, transparent 5px),
    radial-gradient(ellipse at 50% 50%, rgba(255,214,130,.18) 0 2px, transparent 5px) !important;
  background-size: 92px 120px, 150px 180px !important;
  animation: v13LeafFloat 9.8s ease-in-out infinite !important;
}

.home-hero .ambient-layer--purple::before {
  background:
    radial-gradient(circle at 30% 66%, rgba(150,87,255,.36), transparent 34%),
    radial-gradient(circle at 72% 40%, rgba(220,188,255,.18), transparent 28%),
    radial-gradient(circle at 52% 52%, rgba(88,48,160,.28), transparent 50%) !important;
  filter: blur(10px) !important;
  animation: v13Nebula 12s ease-in-out infinite !important;
}
.home-hero .ambient-layer--purple::after {
  background-image:
    radial-gradient(circle, rgba(210,188,255,.28) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(150,87,255,.25) 0 1px, transparent 2px) !important;
  background-size: 68px 82px, 132px 150px !important;
  animation: v13Stars 14s linear infinite !important;
}

.home-hero .ambient-layer--green::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(93,225,124,.24) 40px 42px, transparent 44px 82px),
    radial-gradient(circle at 50% 52%, rgba(80,225,128,.18), transparent 44%) !important;
  animation: v13GrowthRings 7.8s ease-out infinite !important;
}
.home-hero .ambient-layer--green::after {
  background:
    repeating-linear-gradient(32deg, transparent 0 76px, rgba(120,255,170,.16) 78px 80px, transparent 84px 160px) !important;
  animation: v13Organic 9.8s ease-in-out infinite !important;
}

.home-hero .ambient-layer--teal::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 44px, rgba(64,238,220,.28) 46px 48px, transparent 50px 92px),
    radial-gradient(circle at 50% 48%, rgba(46,208,187,.20), transparent 44%) !important;
  animation: v13Signal 6.2s ease-out infinite !important;
}
.home-hero .ambient-layer--teal::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(116,255,236,.15) 50px 51px, transparent 54px 110px) !important;
  animation: v13WaveScan 8s ease-in-out infinite !important;
}

.home-hero .ambient-layer--cyan::before {
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(77,224,255,.34) 32%, transparent 46% 100%),
    linear-gradient(58deg, transparent 0 40%, rgba(220,255,255,.20) 52%, transparent 64% 100%),
    radial-gradient(circle at 56% 54%, rgba(68,217,255,.24), transparent 42%) !important;
  animation: v13Liquid 8s cubic-bezier(.45,0,.2,1) infinite !important;
}
.home-hero .ambient-layer--cyan::after {
  background:
    repeating-linear-gradient(105deg, transparent 0 70px, rgba(81,226,255,.26) 72px 74px, transparent 78px 158px) !important;
  animation: v13LiquidThreads 8.6s linear infinite !important;
}

.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(130,142,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,142,255,.14) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(103,112,255,.18), transparent 55%) !important;
  background-size: 58px 58px, 58px 58px, 100% 100% !important;
  animation: v13Grid 7s ease-in-out infinite !important;
}
.home-hero .ambient-layer--indigo::after {
  background:
    linear-gradient(90deg, transparent, rgba(180,190,255,.35), transparent),
    radial-gradient(circle, rgba(165,174,255,.30) 0 1px, transparent 2px) !important;
  background-size: 100% 2px, 84px 84px !important;
  animation: v13Scan 7.4s ease-in-out infinite !important;
}

.home-hero .ambient-layer--magenta::before {
  background:
    conic-gradient(from 12deg at 50% 50%, transparent 0 7%, rgba(255,62,170,.34) 10% 14%, transparent 17% 38%, rgba(255,210,238,.18) 42% 46%, transparent 50% 100%),
    radial-gradient(circle at 32% 76%, rgba(255,62,170,.30), transparent 34%) !important;
  animation: v13Creative 8s ease-in-out infinite !important;
}
.home-hero .ambient-layer--magenta::after {
  background-image:
    radial-gradient(circle, rgba(255,70,180,.34) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 2px) !important;
  background-size: 64px 82px, 122px 146px !important;
  animation: v13CreativeDust 12s linear infinite !important;
}

.home-hero .ambient-layer--lime::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(203,242,70,.30) 19% 20%, transparent 23% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(203,242,70,.18) 35% 37%, transparent 39% 100%) !important;
  animation: v13Future 5.2s ease-out infinite !important;
}
.home-hero .ambient-layer--lime::after {
  background-image:
    radial-gradient(circle, rgba(205,245,80,.36) 0 1px, transparent 2px),
    linear-gradient(108deg, transparent, rgba(210,255,88,.16), transparent 62%) !important;
  background-size: 54px 54px, 100% 100% !important;
  animation: v13Kinetic 9s linear infinite !important;
}

.home-hero .ambient-layer--gold::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,184,52,.38), transparent 42%),
    radial-gradient(circle at 25% 78%, rgba(255,202,92,.22), transparent 30%),
    radial-gradient(circle at 82% 34%, rgba(255,232,156,.17), transparent 32%) !important;
  filter: blur(10px) saturate(1.15) !important;
  animation: v13Impact 6.2s ease-in-out infinite !important;
}
.home-hero .ambient-layer--gold::after {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255,228,160,.38) 47%, transparent 60% 100%),
    radial-gradient(circle, rgba(255,204,100,.26) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 80px 92px !important;
  animation: v13Shimmer 9s ease-in-out infinite !important;
}

@keyframes v13ElectricThreads { from { background-position:0 0,0 0,0 0; } to { background-position:180px -132px,-120px 180px,0 0; } }
@keyframes v13PulseSweep { 0%,100% { transform:scale(.96) rotate(0deg); opacity:.65; } 50% { transform:scale(1.08) rotate(4deg); opacity:1; } }
@keyframes v13FireBreath { from { transform:translate3d(-1%,1%,0) scale(1); } to { transform:translate3d(1%,-1%,0) scale(1.07); } }
@keyframes v13Embers { from { background-position:0 120px,0 160px; } to { background-position:30px -140px,-20px -110px; } }
@keyframes v13RainSlide { from { background-position:0 0,0 0; } to { background-position:0 250px,0 0; } }
@keyframes v13Ripple { 0% { transform:scale(.96); opacity:.35; } 70% { transform:scale(1.12); opacity:.9; } 100% { transform:scale(1.18); opacity:.28; } }
@keyframes v13WarmDrift { 0%,100% { background-position:0 0,0 0; transform:translate3d(0,0,0); } 50% { background-position:50px -30px,80px -45px; transform:translate3d(1%,-.6%,0); } }
@keyframes v13LeafFloat { from { background-position:0 -90px,0 -140px; transform:rotate(0deg); } to { background-position:80px 180px,-60px 140px; transform:rotate(2deg); } }
@keyframes v13Nebula { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06) translate3d(.8%,-1%,0); } }
@keyframes v13Stars { from { background-position:0 0,0 0; } to { background-position:-50px -120px,42px -160px; } }
@keyframes v13GrowthRings { 0% { transform:scale(.96); opacity:.45; } 70% { transform:scale(1.09); opacity:.9; } 100% { transform:scale(1.15); opacity:.32; } }
@keyframes v13Organic { from { background-position:0 0; } to { background-position:140px -60px; } }
@keyframes v13Signal { 0% { transform:scale(.94); opacity:.42; } 65% { transform:scale(1.07); opacity:1; } 100% { transform:scale(1.12); opacity:.32; } }
@keyframes v13WaveScan { 0%,100% { background-position:0 0; } 50% { background-position:0 100px; } }
@keyframes v13Liquid { 0%,100% { background-position:0 0,0 0,0 0; transform:translate3d(0,0,0); } 50% { background-position:150px -40px,-120px 36px,0 0; transform:translate3d(-1%,.8%,0); } }
@keyframes v13LiquidThreads { from { background-position:0 0; } to { background-position:190px -150px; } }
@keyframes v13Grid { 0%,100% { background-position:0 0,0 0,0 0; } 50% { background-position:18px 18px,18px 18px,0 0; } }
@keyframes v13Scan { 0%,100% { background-position:0 -20%,0 0; opacity:.48; } 50% { background-position:0 120%,40px 40px; opacity:1; } }
@keyframes v13Creative { 0%,100% { transform:scale(.98) rotate(0deg); opacity:.65; } 50% { transform:scale(1.06) rotate(2deg); opacity:1; } }
@keyframes v13CreativeDust { from { background-position:0 0,0 0; } to { background-position:-52px -130px,48px -170px; } }
@keyframes v13Future { 0% { transform:scale(.94); opacity:.38; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1.14); opacity:.28; } }
@keyframes v13Kinetic { from { background-position:0 0,-100px 0; } to { background-position:48px -120px,140px 0; } }
@keyframes v13Impact { 0%,100% { transform:scale(.98); opacity:.62; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes v13Shimmer { 0%,20% { transform:translateX(-75%); opacity:.1; } 50% { opacity:.9; } 80%,100% { transform:translateX(75%); opacity:.14; } }

@media (min-width: 821px) {
  .home-hero .hero-radial-widget {
    --widget-size: min(31vw, 405px) !important;
    --core-size: min(15.4vw, 190px) !important;
    transform: translateY(8px) !important;
  }
}

@media (max-width: 820px) {
  .home-hero.section {
    min-height: calc(100svh - 84px) !important;
    padding: 0.35rem 0.28rem calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .home-hero .hero-overlay {
    width: min(100%, calc(100vw - 0.75rem)) !important;
    height: calc(100svh - 104px) !important;
    min-height: 620px !important;
    max-height: calc(100svh - 84px) !important;
    padding: 0.7rem 0.62rem 0.72rem !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .home-hero .hero-text--widget {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    align-content: stretch !important;
    justify-items: center !important;
    gap: clamp(0.35rem, 1.2vh, 0.58rem) !important;
  }

  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(1.85rem, 8.4vw, 2.55rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.045em !important;
    text-indent: 0.045em !important;
  }

  .home-hero .hero-byline.hero-byline--brand {
    font-size: clamp(0.58rem, 2.4vw, 0.74rem) !important;
    letter-spacing: 0.075em !important;
    text-indent: 0.075em !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
  }

  .home-hero .hero-radial-widget {
    --widget-size: min(58vw, 248px) !important;
    --core-size: min(28vw, 110px) !important;
    align-self: center !important;
    margin: 0 auto !important;
    transform: translateY(2px) !important;
  }

  .home-hero .hero-mode-readout,
  .home-hero .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  .home-hero .hero-mode-readout {
    padding: 0.68rem 0.7rem 0.72rem !important;
  }

  .home-hero .hero-mode-readout__kicker {
    font-size: 0.62rem !important;
    line-height: 1 !important;
    margin-bottom: 0.12rem !important;
  }

  .home-hero .hero-mode-readout strong[data-hero-mode-word],
  .home-hero .hero-mode-readout strong {
    font-size: clamp(1.05rem, 5vw, 1.42rem) !important;
    line-height: 1 !important;
    margin: 0.02rem 0 0.14rem !important;
  }

  .home-hero .hero-mode-readout span[data-hero-mode-description] {
    font-size: 0.82rem !important;
    line-height: 1.22 !important;
    max-width: 30ch !important;
  }

  .home-hero .hero-actions {
    padding: 0.58rem !important;
    gap: 0.42rem !important;
  }

  .home-hero .hero-actions .btn {
    min-height: 40px !important;
    padding: 0.68rem 0.8rem !important;
    font-size: 0.86rem !important;
    border-radius: 14px !important;
  }

  .home-hero .ambient-layer {
    inset: -8% !important;
    filter: saturate(1.02) brightness(.95) !important;
  }

  .home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
  .home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
  .home-hero[data-active-effect="red"] .ambient-layer--red,
  .home-hero[data-preview-effect="red"] .ambient-layer--red,
  .home-hero[data-active-effect="blue"] .ambient-layer--blue,
  .home-hero[data-preview-effect="blue"] .ambient-layer--blue,
  .home-hero[data-active-effect="orange"] .ambient-layer--orange,
  .home-hero[data-preview-effect="orange"] .ambient-layer--orange,
  .home-hero[data-active-effect="purple"] .ambient-layer--purple,
  .home-hero[data-preview-effect="purple"] .ambient-layer--purple,
  .home-hero[data-active-effect="green"] .ambient-layer--green,
  .home-hero[data-preview-effect="green"] .ambient-layer--green,
  .home-hero[data-active-effect="teal"] .ambient-layer--teal,
  .home-hero[data-preview-effect="teal"] .ambient-layer--teal,
  .home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
  .home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
  .home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
  .home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
  .home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
  .home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
  .home-hero[data-active-effect="lime"] .ambient-layer--lime,
  .home-hero[data-preview-effect="lime"] .ambient-layer--lime,
  .home-hero[data-active-effect="gold"] .ambient-layer--gold,
  .home-hero[data-preview-effect="gold"] .ambient-layer--gold {
    opacity: 0.68 !important;
  }

  .home-foundations.section {
    margin-top: 1rem !important;
  }
}

@media (max-width: 430px) {
  .home-hero .hero-overlay {
    min-height: 590px !important;
  }
  .home-hero .hero-radial-widget {
    --widget-size: min(56vw, 226px) !important;
    --core-size: min(27vw, 102px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .ambient-layer,
  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after {
    animation: none !important;
    transition: opacity 0.01ms linear !important;
  }
}

/* ===== v14 hero ambient visibility pass: stronger visible coded effects only ===== */
.home-hero .hero-ambient {
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--hero-mode-rgb,68,217,255),0.14), transparent 30%),
    radial-gradient(circle at 50% 66%, rgba(255,255,255,0.035), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(7,12,24,0.10)) !important;
}

.home-hero .ambient-layer {
  mix-blend-mode: screen !important;
  filter: saturate(1.26) brightness(1.12) !important;
}

.home-hero[data-active-effect] .ambient-layer,
.home-hero[data-preview-effect] .ambient-layer {
  opacity: 0 !important;
}

.home-hero[data-active-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-preview-effect="yellow"] .ambient-layer--yellow,
.home-hero[data-active-effect="red"] .ambient-layer--red,
.home-hero[data-preview-effect="red"] .ambient-layer--red,
.home-hero[data-active-effect="blue"] .ambient-layer--blue,
.home-hero[data-preview-effect="blue"] .ambient-layer--blue,
.home-hero[data-active-effect="orange"] .ambient-layer--orange,
.home-hero[data-preview-effect="orange"] .ambient-layer--orange,
.home-hero[data-active-effect="purple"] .ambient-layer--purple,
.home-hero[data-preview-effect="purple"] .ambient-layer--purple,
.home-hero[data-active-effect="green"] .ambient-layer--green,
.home-hero[data-preview-effect="green"] .ambient-layer--green,
.home-hero[data-active-effect="teal"] .ambient-layer--teal,
.home-hero[data-preview-effect="teal"] .ambient-layer--teal,
.home-hero[data-active-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-preview-effect="cyan"] .ambient-layer--cyan,
.home-hero[data-active-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-preview-effect="indigo"] .ambient-layer--indigo,
.home-hero[data-active-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-preview-effect="magenta"] .ambient-layer--magenta,
.home-hero[data-active-effect="lime"] .ambient-layer--lime,
.home-hero[data-preview-effect="lime"] .ambient-layer--lime,
.home-hero[data-active-effect="gold"] .ambient-layer--gold,
.home-hero[data-preview-effect="gold"] .ambient-layer--gold {
  opacity: 1 !important;
}

.home-hero .ambient-particle {
  opacity: 0.88 !important;
  filter: blur(var(--blur, 0px)) !important;
  transform: translate3d(0,0,0);
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after {
  inset: -2% !important;
}

/* Yellow — Spark */
.home-hero .ambient-layer--yellow::before {
  background:
    repeating-linear-gradient(118deg, transparent 0 54px, rgba(255,243,160,.28) 56px 58px, transparent 62px 122px),
    repeating-linear-gradient(58deg, transparent 0 86px, rgba(255,220,90,.20) 88px 90px, transparent 94px 170px),
    radial-gradient(circle at 50% 48%, rgba(255,214,74,.28), transparent 30%),
    radial-gradient(circle at 34% 68%, rgba(255,232,116,.22), transparent 18%) !important;
  animation: v14ElectricField 5.8s linear infinite !important;
}
.home-hero .ambient-layer--yellow::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(255,236,118,.30) 15% 16%, transparent 18% 100%),
    radial-gradient(circle at 66% 38%, transparent 0 10%, rgba(255,250,190,.22) 11% 12%, transparent 14% 100%) !important;
  animation: v14PulseRings 4.5s ease-out infinite !important;
}

/* Red — Drive */
.home-hero .ambient-layer--red::before {
  background:
    radial-gradient(circle at 26% 80%, rgba(255,82,46,.42), transparent 24%),
    radial-gradient(circle at 68% 72%, rgba(255,136,60,.28), transparent 26%),
    radial-gradient(circle at 52% 52%, rgba(162,18,30,.26), transparent 42%) !important;
  filter: blur(18px) !important;
  animation: v14FireBreath 6.5s ease-in-out infinite alternate !important;
}
.home-hero .ambient-layer--red::after {
  background:
    linear-gradient(180deg, transparent, rgba(255,122,66,.06), transparent),
    radial-gradient(circle, rgba(255,168,94,.34) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,82,50,.24) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 80px 120px, 122px 158px !important;
  animation: v14Embers 8s linear infinite !important;
}

/* Blue — Flow */
.home-hero .ambient-layer--blue::before {
  background:
    repeating-linear-gradient(103deg, transparent 0 18px, rgba(142,214,255,.25) 20px 21px, transparent 23px 54px),
    radial-gradient(circle at 48% 54%, rgba(64,128,255,.16), transparent 34%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%) !important;
  animation: v14Rain 6.8s linear infinite !important;
}
.home-hero .ambient-layer--blue::after {
  background:
    radial-gradient(circle at 30% 72%, transparent 0 10%, rgba(155,226,255,.22) 11% 12%, transparent 14% 100%),
    radial-gradient(circle at 72% 64%, transparent 0 12%, rgba(155,226,255,.18) 13% 14%, transparent 16% 100%) !important;
  animation: v14RippleRings 6.2s ease-out infinite !important;
}

/* Orange — Momentum */
.home-hero .ambient-layer--orange::before {
  background:
    radial-gradient(ellipse at 26% 76%, rgba(255,153,62,.26), transparent 20%),
    radial-gradient(ellipse at 74% 34%, rgba(255,196,112,.14), transparent 20%),
    repeating-linear-gradient(132deg, transparent 0 76px, rgba(255,158,58,.18) 79px 84px, transparent 88px 160px) !important;
  animation: v14Momentum 8.4s ease-in-out infinite !important;
}
.home-hero .ambient-layer--orange::after {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(255,188,126,.18) 0 4px, transparent 5px),
    radial-gradient(ellipse at 72% 56%, rgba(255,146,52,.22) 0 4px, transparent 5px),
    radial-gradient(ellipse at 54% 84%, rgba(255,176,82,.18) 0 4px, transparent 5px) !important;
  background-size: 180px 220px, 200px 240px, 160px 190px !important;
  animation: v14LeafDrift 9.6s ease-in-out infinite !important;
}

/* Purple — Vision */
.home-hero .ambient-layer--purple::before {
  background:
    radial-gradient(circle at 28% 66%, rgba(158,96,255,.36), transparent 20%),
    radial-gradient(circle at 70% 40%, rgba(212,176,255,.20), transparent 18%),
    radial-gradient(circle at 52% 54%, rgba(82,48,160,.32), transparent 38%) !important;
  filter: blur(14px) !important;
  animation: v14Nebula 12s ease-in-out infinite !important;
}
.home-hero .ambient-layer--purple::after {
  background-image:
    radial-gradient(circle, rgba(218,190,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(148,90,255,.22) 0 1px, transparent 2px) !important;
  background-size: 72px 92px, 126px 152px !important;
  animation: v14StarDrift 15s linear infinite !important;
}

/* Green — Growth */
.home-hero .ambient-layer--green::before {
  background:
    repeating-radial-gradient(circle at 50% 52%, transparent 0 34px, rgba(98,230,128,.22) 36px 38px, transparent 40px 74px),
    radial-gradient(circle at 50% 54%, rgba(78,220,128,.18), transparent 34%) !important;
  animation: v14Growth 7.6s ease-out infinite !important;
}
.home-hero .ambient-layer--green::after {
  background:
    repeating-linear-gradient(30deg, transparent 0 84px, rgba(120,255,170,.15) 86px 89px, transparent 92px 168px),
    repeating-linear-gradient(150deg, transparent 0 120px, rgba(96,240,140,.11) 122px 124px, transparent 126px 220px) !important;
  animation: v14OrganicSweep 10s ease-in-out infinite !important;
}

/* Teal — Clarity */
.home-hero .ambient-layer--teal::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(62,232,210,.26) 44px 46px, transparent 48px 88px),
    radial-gradient(circle at 50% 48%, rgba(46,208,187,.18), transparent 34%) !important;
  animation: v14ClarityRings 6s ease-out infinite !important;
}
.home-hero .ambient-layer--teal::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(116,255,236,.14) 48px 49px, transparent 52px 108px),
    linear-gradient(90deg, transparent, rgba(140,255,240,.10), transparent) !important;
  animation: v14WavePass 8.4s ease-in-out infinite !important;
}

/* Cyan — Agility */
.home-hero .ambient-layer--cyan::before {
  background:
    linear-gradient(112deg, transparent 0 16%, rgba(78,228,255,.34) 30%, transparent 44% 100%),
    linear-gradient(58deg, transparent 0 38%, rgba(228,255,255,.16) 52%, transparent 66% 100%),
    radial-gradient(circle at 56% 54%, rgba(68,217,255,.22), transparent 30%) !important;
  animation: v14LiquidFlow 7.8s cubic-bezier(.45,0,.2,1) infinite !important;
}
.home-hero .ambient-layer--cyan::after {
  background:
    repeating-linear-gradient(106deg, transparent 0 66px, rgba(74,226,255,.24) 69px 72px, transparent 75px 146px),
    repeating-linear-gradient(70deg, transparent 0 112px, rgba(220,255,255,.12) 115px 116px, transparent 120px 210px) !important;
  animation: v14LiquidThread 9s linear infinite !important;
}

/* Indigo — Precision */
.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(132,144,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132,144,255,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(100,112,255,.16), transparent 40%) !important;
  background-size: 56px 56px, 56px 56px, 100% 100% !important;
  animation: v14GridShift 7.2s ease-in-out infinite !important;
}
.home-hero .ambient-layer--indigo::after {
  background:
    linear-gradient(90deg, transparent, rgba(180,190,255,.34), transparent),
    radial-gradient(circle, rgba(165,174,255,.24) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 84px 84px !important;
  animation: v14Scanline 7.2s ease-in-out infinite !important;
}

/* Magenta — Create */
.home-hero .ambient-layer--magenta::before {
  background:
    conic-gradient(from 18deg at 50% 50%, transparent 0 8%, rgba(255,66,176,.28) 10% 14%, transparent 18% 42%, rgba(255,220,242,.14) 45% 48%, transparent 52% 100%),
    radial-gradient(circle at 34% 74%, rgba(255,66,176,.24), transparent 22%),
    radial-gradient(circle at 68% 38%, rgba(255,196,230,.14), transparent 18%) !important;
  animation: v14CreativeBloom 8.2s ease-in-out infinite !important;
}
.home-hero .ambient-layer--magenta::after {
  background-image:
    radial-gradient(circle, rgba(255,72,182,.34) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px) !important;
  background-size: 68px 84px, 126px 150px !important;
  animation: v14CreativeFloat 12s linear infinite !important;
}

/* Lime — Future */
.home-hero .ambient-layer--lime::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(206,244,74,.30) 17% 18%, transparent 20% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(206,244,74,.16) 33% 34%, transparent 36% 100%) !important;
  animation: v14FuturePulse 5.4s ease-out infinite !important;
}
.home-hero .ambient-layer--lime::after {
  background:
    radial-gradient(circle, rgba(210,245,80,.34) 0 1px, transparent 2px),
    linear-gradient(108deg, transparent, rgba(210,255,88,.14), transparent 62%) !important;
  background-size: 58px 58px, 100% 100% !important;
  animation: v14FutureDots 9s linear infinite !important;
}

/* Gold — Impact */
.home-hero .ambient-layer--gold::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(255,186,58,.34), transparent 28%),
    radial-gradient(circle at 24% 76%, rgba(255,202,98,.18), transparent 18%),
    radial-gradient(circle at 80% 34%, rgba(255,232,156,.14), transparent 20%) !important;
  filter: blur(12px) saturate(1.12) !important;
  animation: v14ImpactGlow 6.4s ease-in-out infinite !important;
}
.home-hero .ambient-layer--gold::after {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255,226,160,.36) 47%, transparent 60% 100%),
    radial-gradient(circle, rgba(255,206,110,.24) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 82px 96px !important;
  animation: v14GoldShimmer 9.4s ease-in-out infinite !important;
}

@keyframes v14ElectricField { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 180px -140px, -120px 180px, 0 0, 32px -24px; } }
@keyframes v14PulseRings { 0% { transform: scale(.94); opacity: .34; } 65% { transform: scale(1.08); opacity: .94; } 100% { transform: scale(1.16); opacity: .22; } }
@keyframes v14FireBreath { from { transform: translate3d(-1%,1%,0) scale(1); } to { transform: translate3d(1%,-1%,0) scale(1.08); } }
@keyframes v14Embers { from { background-position: 0 0, 0 120px, 0 160px; } to { background-position: 0 0, 36px -150px, -24px -120px; } }
@keyframes v14Rain { from { background-position: 0 0, 0 0; } to { background-position: 0 260px, 0 0; } }
@keyframes v14RippleRings { 0% { transform: scale(.95); opacity: .36; } 70% { transform: scale(1.12); opacity: .88; } 100% { transform: scale(1.2); opacity: .18; } }
@keyframes v14Momentum { 0%,100% { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0); } 50% { background-position: 26px -18px, -18px 18px, 92px -44px; transform: translate3d(1%,-.8%,0); } }
@keyframes v14LeafDrift { from { background-position: 0 -30px, 0 -60px, 0 -20px; } to { background-position: 60px 160px, -60px 120px, 48px 140px; } }
@keyframes v14Nebula { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07) translate3d(1%,-1%,0); } }
@keyframes v14StarDrift { from { background-position: 0 0, 0 0; } to { background-position: -44px -132px, 40px -170px; } }
@keyframes v14Growth { 0% { transform: scale(.95); opacity: .36; } 72% { transform: scale(1.08); opacity: .84; } 100% { transform: scale(1.16); opacity: .20; } }
@keyframes v14OrganicSweep { from { background-position: 0 0, 0 0; } to { background-position: 120px -64px, -80px 54px; } }
@keyframes v14ClarityRings { 0% { transform: scale(.95); opacity: .34; } 72% { transform: scale(1.09); opacity: .92; } 100% { transform: scale(1.16); opacity: .20; } }
@keyframes v14WavePass { 0%,100% { background-position: 0 0, -100% 0; } 50% { background-position: 0 96px, 100% 0; } }
@keyframes v14LiquidFlow { 0%,100% { background-position: 0 0, 0 0, 0 0; transform: translate3d(0,0,0); } 50% { background-position: 150px -40px, -120px 40px, 0 0; transform: translate3d(-1%,.8%,0); } }
@keyframes v14LiquidThread { from { background-position: 0 0, 0 0; } to { background-position: 190px -150px, -120px 120px; } }
@keyframes v14GridShift { 0%,100% { background-position: 0 0, 0 0, 0 0; } 50% { background-position: 18px 18px, 18px 18px, 0 0; } }
@keyframes v14Scanline { 0%,100% { background-position: 0 -120%, 0 0; opacity: .36; } 50% { background-position: 0 120%, 36px 36px; opacity: .94; } }
@keyframes v14CreativeBloom { 0%,100% { transform: scale(.98) rotate(0deg); opacity: .54; } 50% { transform: scale(1.08) rotate(2deg); opacity: .94; } }
@keyframes v14CreativeFloat { from { background-position: 0 0, 0 0; } to { background-position: -50px -132px, 44px -168px; } }
@keyframes v14FuturePulse { 0% { transform: scale(.94); opacity: .34; } 60% { transform: scale(1.08); opacity: .92; } 100% { transform: scale(1.16); opacity: .18; } }
@keyframes v14FutureDots { from { background-position: 0 0, -120px 0; } to { background-position: 46px -124px, 120px 0; } }
@keyframes v14ImpactGlow { 0%,100% { transform: scale(.98); opacity: .52; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes v14GoldShimmer { 0%,16% { transform: translateX(-72%); opacity: .10; } 50% { opacity: .82; } 82%,100% { transform: translateX(72%); opacity: .12; } }

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