/* Hero atmosphere: reference motion, Fish.in navy/orange palette. */
.hero { background: #0D141F; }
.hero-ambient { background: #0D141F; }
.hero-ambient i {
  inset: auto; border-radius: 50%; filter: blur(120px); opacity: .5;
  animation: var(--drift) var(--duration) ease-in-out infinite;
}
.hero-ambient i:nth-child(1) {
  width: 50vw; height: 50vw; top: -16%; left: -14%;
  background: radial-gradient(circle, #284769, transparent 70%);
  --drift: fish-drift-one; --duration: 28s;
}
.hero-ambient i:nth-child(2) {
  width: 42vw; height: 42vw; top: 4%; right: -16%; left: auto;
  background: radial-gradient(circle, rgba(215,144,68,.45), transparent 70%);
  --drift: fish-drift-two; --duration: 32s; animation-direction: normal;
}
.hero-ambient i:nth-child(3) {
  width: 46vw; height: 46vw; bottom: -18%; left: 8%;
  background: radial-gradient(circle, rgba(233,133,34,.4), transparent 70%);
  --drift: fish-drift-three; --duration: 36s;
}
.hero-ambient i:nth-child(4) {
  width: 32vw; height: 32vw; bottom: 6%; right: 6%;
  background: radial-gradient(circle, rgba(32,55,83,.7), transparent 70%);
  --drift: fish-drift-one; --duration: 24s; animation-direction: reverse;
}
@keyframes fish-drift-one { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,6%) scale(1.08); } }
@keyframes fish-drift-two { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,4%) scale(1.1); } }
@keyframes fish-drift-three { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%,-5%) scale(1.06); } }
.hero-grain { position: absolute; inset: 0; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.hero .hero-particles span {
  top: auto; bottom: -10px; left: var(--x); width: 3px; height: 3px;
  opacity: 0; background: #D79044; border-radius: 50%;
  animation: fish-particle var(--duration) linear var(--delay) infinite;
}
@keyframes fish-particle {
  0% { transform: translate(0,0); opacity: 0; }
  10% { opacity: .6; } 90% { opacity: .4; }
  100% { transform: translate(20px,-90vh); opacity: 0; }
}
.hero h1 { font-weight: 700; line-height: 1.09; letter-spacing: -.045em; }
.hero h1 strong { font-weight: 800; color: #D79044; text-shadow: 0 6px 36px #d7904414; }
.hero-copy .hero-kicker { font-size: .75rem; }
.hero-copy > p:not(.hero-kicker) { color: #C3CBD6; }
.hero-benefits { color: #B7C0CD; }
.site-header { background: #0d141fd9; border-color: #ffffff20; box-shadow: 0 12px 40px #030a1540; }
.site-header nav a { font-size: .8125rem; }
.form-panel {
  padding: 34px; border-radius: 28px; border-color: #ffffff33;
  background: linear-gradient(145deg, #ffffff07, #ffffff02), #111b29ba;
  backdrop-filter: blur(24px);
  box-shadow: 0 40px 100px #030a1580, inset 0 1px 0 #ffffff09;
}
.form-intro h2 { font-size: 1.6rem; font-weight: 600; }
.form-intro p { font-size: .875rem; }
.form-panel input,.form-panel select { background: #ffffff05; border-color: #ffffff25; font-size: .875rem; }
.form-panel input:hover,.form-panel select:hover { border-color: #ffffff45; }
.form-note { font-size: .6875rem; color: #AEB7C3; }

/* One readable CTA treatment, including navbar, form and closing section. */
.button,.form-panel .button,.closing-cta .button,.tailored .button {
  border-radius: 999px; min-height: 56px; padding: 16px 30px;
  font-size: 1rem; font-weight: 700; letter-spacing: -.015em;
  background: linear-gradient(90deg, #D79044 0%, #D79044 35%, #E98522 100%);
  color: #0D141F; box-shadow: 0 8px 30px #e9852240;
  transition: transform .3s var(--motion-ease), box-shadow .3s ease;
}
.button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; clip-path: inset(0 round 999px);
  background: linear-gradient(120deg, transparent 30%, #ffffff59 50%, transparent 70%) 160% 0 / 250% 100% no-repeat;
  transition: background-position .7s ease;
}
.site-header .nav-cta { font-size: .875rem; min-height: 46px; padding: 12px 22px; }
.button span { font-size: 1.25rem; line-height: 1; }
.form-panel .button { margin-top: 12px; }
.closing-cta .button { box-shadow: 0 0 0 7px #d7904417, 0 8px 30px #e9852240; }
.button:focus-visible { outline: 3px solid #F5F7FA; outline-offset: 5px; }
@media (hover:hover) {
  .button:hover,.form-panel .button:hover,.tailored .button:hover,.closing-cta .button:hover {
    transform: translateY(-3px); filter: none; box-shadow: 0 16px 42px #e9852266;
  }
  .button:hover::after { background-position: -160% 0; }
}
.button:active { transform: translateY(0); }
@media (max-width:1050px) { .form-panel { padding: 26px; } }
@media (max-width:850px) {
  .hero-ambient i { min-width: 480px; min-height: 480px; filter: blur(80px); }
  .hero-ambient i:nth-child(2) { right: -60%; }
  .hero-ambient i:nth-child(3) { bottom: 10%; left: -45%; }
  .hero h1 { font-size: clamp(2.1rem,6.4vw,3.3rem); }
}
@media (max-width:480px) {
  .site-header { padding-inline: 14px; gap: 10px; }
  .site-header .nav-cta { font-size: .875rem; min-height: 42px; padding: 10px 14px; gap: 8px; }
  .site-header .nav-cta span { display: none; }
  .hero-copy .hero-kicker { font-size: .625rem; }
  .form-panel { padding: 24px 20px; border-radius: 22px; }
  .hero h1 { font-size: clamp(2.1rem,8.8vw,2.65rem); }
  .button,.form-panel .button,.closing-cta .button,.tailored .button { font-size: 1rem; padding-inline: 22px; }
}
@media (prefers-reduced-motion:reduce) {
  html:not(.motion-preview) .hero-ambient * { animation: none!important; }
  html:not(.motion-preview) .button,html:not(.motion-preview) .button::after { transition: none!important; }
  html:not(.motion-preview) .button:hover { transform: none!important; }
}
/* Explicit local preview: retain the same timing even when the OS reduces motion. */
.motion-preview .hero .hero-ambient i { animation: var(--drift) var(--duration) ease-in-out infinite!important; }
.motion-preview .hero .hero-ambient i:nth-child(4) { animation-direction: reverse!important; }
.motion-preview .hero .hero-particles span { animation: fish-particle var(--duration) linear var(--delay) infinite!important; }
.motion-preview .button { transition: transform .3s var(--motion-ease), box-shadow .3s ease!important; }
.motion-preview .button::after { transition: background-position .7s ease!important; }
.hero.motion-paused .hero-ambient *, .motion-preview .hero.motion-paused .hero-ambient * { animation-play-state: paused!important; }
