/* Home-only material: one seamless matte surface, light moving beneath a quiet veil. */
body .site-header { background: #fafbf9; border-bottom: 0; box-shadow: none; }
body .site-header .header-inner { border-bottom-color: transparent; }
.hero.hero-evolution {
  padding: clamp(83px, 7.25vw, 108px) 0 clamp(137px, 11.5vw, 166px);
  background: #fafbf9;
}
.hero.hero-evolution::before,
.hero.hero-evolution::after { display: none; }
.hero-evolution .hero-copy { position: relative; z-index: 2; }
.hero-material {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 63% at 50% 15%, #739bed1c, transparent 77%),
    linear-gradient(180deg, #fafbf9 0%, #fafbf9 48%, #f7faf8 84%, #f4f7f8 100%);
}
.hero-material::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #fafbf9 0%, #fafbf900 13%, #f4f7f800 79%, #f4f7f8 100%);
}
.hero-evolution .hero-material-light {
  position: absolute; inset: 0; overflow: hidden; background: none; opacity: 1;
  contain: paint;
}
.hero-evolution .hero-material-light::before,
.hero-evolution .hero-material-light::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero-evolution .hero-material-light::before {
  width: 66%; height: 63%; left: -5%; top: 29%;
  background: radial-gradient(ellipse, #6c99ed50 0%, #8db4f536 29%, #c0d4f417 52%, transparent 72%);
  transform: translate3d(-8%, 2%, 0) rotate(-9deg);
}
.hero-evolution .hero-material-light::after {
  width: 57%; height: 52%; right: -3%; top: 42%;
  background: radial-gradient(ellipse, #76c7b33b 0%, #a1dbc62c 33%, #d5eee310 57%, transparent 76%);
  transform: translate3d(9%, -2%, 0) rotate(8deg);
}
/* A narrow traveling refraction makes the movement visible, without drawing an object edge. */
.hero-evolution .hero-material-sheen {
  position: absolute; left: -7%; top: 49%; width: 52%; height: 38%;
  background:
    radial-gradient(ellipse 50% 8% at 50% 50%, #eef7ffff 0%, #94b9fa8c 17%, #a9ccf445 39%, #c3dcf81a 59%, transparent 81%);
  filter: blur(3px);
  transform: translate3d(32%, 0, 0) rotate(-11deg);
  opacity: .92;
}
.hero-material-dots {
  position: absolute; inset: 1% 0 9%;
  background-image: radial-gradient(circle, #40547430 .8px, transparent 1.05px);
  background-size: 22px 22px; background-position: center 11px;
  -webkit-mask-image: radial-gradient(ellipse 61% 62% at 50% 32%, #000 9%, #0009 38%, transparent 77%);
  mask-image: radial-gradient(ellipse 61% 62% at 50% 32%, #000 9%, #0009 38%, transparent 77%);
}
.hero-material-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 34% at 50% 48%, #fafbf921 0%, #ffffff0a 57%, transparent 100%),
    linear-gradient(180deg, #ffffff10 0%, #ffffff20 56%, #ffffff2b 76%, #ffffff00 100%);
}
.hero-material-grain {
  position: absolute; inset: 0; opacity: .027;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2375889a' d='M0 0h180v180H0z' filter='url(%23grain)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 38%, #000, transparent);
  mask-image: radial-gradient(ellipse 68% 62% at 50% 38%, #000, transparent);
}

.hero-evolution .hero-label {
  display: block; padding: 0; border: 0; background: transparent; box-shadow: none;
  color: #557085; font-size: 12px; line-height: 1.7; letter-spacing: .13em;
}
.hero-evolution .hero-label::before { display: none; }
.hero.hero-evolution h1 {
  max-width: 1180px; margin: 29px auto 29px;
  color: #152a40; font-size: clamp(43px, 5.8vw, 80px); font-weight: 740;
  line-height: 1.06; letter-spacing: -.062em; text-shadow: 0 2px 0 #ffffffb3;
}
.hero-evolution h1 span {
  margin-top: 4px; color: #2464e7; font-weight: 700; font-style: italic;
  line-height: 1.13; letter-spacing: -.065em;
}
.hero.hero-evolution p {
  max-width: 660px; margin: auto; color: #52667a; font-size: 19px; line-height: 1.7;
}
.hero-evolution p strong { color: #223e56; font-weight: 600; }
.hero-evolution .hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 38px;
}
.hero-evolution .hero-actions .button {
  gap: 15px; min-height: 56px; margin-top: 0; padding-inline: 24px;
  border-radius: 13px; font-size: 15px; transform: none;
}
.hero-evolution .hero-check-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 56px; padding: 13px 21px;
  border: 1px solid #c6deda; border-top-color: #fff; border-radius: 13px;
  background: linear-gradient(125deg, #f7fcf8b8, #f3f9ffd9);
  box-shadow: 0 3px 6px #173e2d06, 0 11px 22px -14px #508d8552, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #286358; font-size: 14px; font-weight: 600; transform: none;
}
.hero-check-cta svg { width: 18px; height: 18px; flex: 0 0 18px; }
.hero-evolution .hero-check-cta:hover { background: #edf7f2; border-color: #a8cec0; }
.hero-evolution .hero-note { margin-top: 18px; color: #5b7180; font-size: 12px; }


/* CSS motion runs only once its pause control and lifecycle guards are installed. */
@media (prefers-reduced-motion: no-preference) {
  .hero-evolution[data-hero-motion-ready] .hero-material-light::before {
    animation: hero-blue-refraction 18s ease-in-out -5s infinite alternate both;
    animation-play-state: paused;
  }
  .hero-evolution[data-hero-motion-ready] .hero-material-light::after {
    animation: hero-mint-refraction 23s ease-in-out -8s infinite alternate both;
    animation-play-state: paused;
  }
  .hero-evolution[data-hero-motion-ready] .hero-material-sheen {
    animation: hero-reflection-pass 14s linear -3s infinite both;
    animation-play-state: paused;
  }
  .hero-evolution[data-hero-motion='running'] .hero-material-light::before,
  .hero-evolution[data-hero-motion='running'] .hero-material-light::after,
  .hero-evolution[data-hero-motion='running'] .hero-material-sheen { animation-play-state: running; }
}
@keyframes hero-blue-refraction {
  from { transform: translate3d(-8%, 2%, 0) rotate(-9deg); opacity: .85; }
  to { transform: translate3d(14%, -7%, 0) rotate(3deg); opacity: 1; }
}
@keyframes hero-mint-refraction {
  from { transform: translate3d(9%, -2%, 0) rotate(8deg); opacity: 1; }
  to { transform: translate3d(-16%, 5%, 0) rotate(-4deg); opacity: .82; }
}
@keyframes hero-reflection-pass {
  0% { transform: translate3d(-42%, 28%, 0) rotate(-11deg); opacity: 0; }
  13% { opacity: .92; }
  78% { opacity: .92; }
  100% { transform: translate3d(213%, -22%, 0) rotate(-11deg); opacity: 0; }
}
.hero-evolution .hero-motion-control {
  position: absolute; right: max(20px, calc((100vw - 1200px) / 2)); bottom: 18px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid #c8d5dd80; border-radius: 50%;
  background: #ffffff70; color: #61768a;
  box-shadow: inset 0 1px 0 #ffffffcc;
  cursor: pointer; transform: none;
}
.hero-evolution .hero-motion-control:hover { background: #ffffffd9; color: #294e73; border-color: #a4b9ca; transform: none; }
.hero-evolution .hero-motion-control:focus-visible { outline: 3px solid #2464e7; outline-offset: 4px; }
.hero-evolution .hero-motion-control[hidden] { display: none; }
.hero-motion-control .hero-motion-play { display: none; }
.hero-motion-control[data-user-paused='true'] .hero-motion-pause { display: none; }
.hero-motion-control[data-user-paused='true'] .hero-motion-play { display: inline; }
@media (max-width: 1000px) {
  .hero.hero-evolution { padding: 76px 0 130px; }
  .hero.hero-evolution h1 { font-size: clamp(45px, 5.7vw, 70px); }
}
@media (max-width: 760px) {
  .hero.hero-evolution { padding: 54px 0 111px; }
  .hero-evolution .hero-label { max-width: 310px; margin-inline: auto; font-size: 10px; line-height: 1.8; letter-spacing: .075em; }
  .hero.hero-evolution h1 { max-width: 560px; margin: 24px auto 27px; font-size: clamp(37px, 8.8vw, 59px); line-height: 1.1; letter-spacing: -.055em; }
  .hero-evolution h1 span { margin-top: 9px; line-height: 1.12; }
  .hero.hero-evolution p { max-width: 460px; font-size: 16px; line-height: 1.7; }
  .hero-evolution .hero-actions { flex-direction: column; gap: 12px; margin-top: 32px; }
  .hero-evolution .hero-actions .button,
  .hero-evolution .hero-check-cta { width: min(100%, 350px); min-height: 53px; font-size: 14px; }
  .hero-evolution .hero-actions .button { padding-inline: 17px; gap: 12px; }
  .hero-evolution .hero-note { margin-top: 16px; font-size: 12px; }
  .hero-material { background: radial-gradient(ellipse 65% 49% at 50% 17%, #739bed16, transparent 82%), linear-gradient(180deg,#fafbf9 0%,#fafbf9 50%,#f4f7f8 100%); }
  .hero-material-dots {
    background-image: radial-gradient(circle, #40547426 .7px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 69% 56% at 50% 32%, #000b 6%, #0005 41%, transparent 83%);
    mask-image: radial-gradient(ellipse 69% 56% at 50% 32%, #000b 6%, #0005 41%, transparent 83%);
  }
  .hero-evolution .hero-material-light::before { width: 118%; height: 53%; left: -29%; top: 34%; }
  .hero-evolution .hero-material-light::after { width: 108%; height: 47%; right: -32%; top: 48%; }
  .hero-evolution .hero-material-sheen { width: 88%; height: 32%; top: 66%; left: -15%; }
  .hero-evolution .hero-motion-control { right: 20px; bottom: 14px; }
  .hero-material-grain { opacity: .02; }
}
@media (max-width: 360px) {
  .hero.hero-evolution { padding: 46px 0 97px; }
  .hero.hero-evolution h1 { font-size: 34px; }
  .hero.hero-evolution p { font-size: 15px; }
  .hero-evolution .hero-actions .button { padding-inline: 12px; font-size: 13px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-evolution .hero-material-light::before,
  .hero-evolution .hero-material-light::after,
  .hero-evolution .hero-material-sheen { animation: none !important; }
  .hero-evolution .hero-motion-control { display: none; }
}
@media (forced-colors: active) {
  .hero-material, .hero-evolution .hero-motion-control { display: none; }
}