/* NatureAlpha site additions, loaded after naturealpha.css (the Webflow stylesheet).
   Only what Webflow did not provide: the AlphaX nav button, the cookie banner, the homepage
   hero carousel and its AlphaX slide, keyboard focus styles and a few heading fixes. */

/* AlphaX button in the nav, beside Try Explorer: the AlphaX wordmark on AlphaX navy (#0d1b26), as on
   alphax.ai. Collapsed at the top of the page; site.js adds .is-visible once the visitor scrolls down,
   and Try Explorer slides left to make room. Without script it is simply always shown.
   Both buttons sit in .nav-actions, which reserves room for the pair, so Webflow's space-between nav
   keeps its menu in place whether or not the AlphaX button is showing. */
.nav-actions { display: flex; align-items: center; justify-content: flex-end; min-width: 18.5rem; }
.nav-alphax {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  max-width: 0;
  min-height: 2.5rem;
  margin-left: 0;
  padding: 0;
  border-radius: var(--_ui-styles---radius--small, .5rem);
  background-color: #0d1b26;
  opacity: 0;
  visibility: hidden;
  transition: max-width 240ms cubic-bezier(0.4, 0, 0.2, 1), padding 240ms cubic-bezier(0.4, 0, 0.2, 1),
              margin 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
              background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 320ms;
}
.nav-alphax.is-visible {
  max-width: 12rem;
  margin-left: .75rem;
  padding: 0 1.25rem;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s, 80ms, 0s, 0s;
}
@media (scripting: none) {
  .nav-alphax { max-width: 12rem; margin-left: .75rem; padding: 0 1.25rem; opacity: 1; visibility: visible; }
}
.nav-alphax img { display: block; width: 120px; max-width: none; height: auto; }   /* the wordmark's minimum width */
.nav-alphax:hover { background-color: #162d40; }
.nav-alphax:focus-visible { outline: 2px solid #46f8ce; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-alphax, .nav-alphax.is-visible { transition: none; }
}
/* Below 992px Webflow hides Try Explorer; the AlphaX button sits just left of the menu button.
   Below 480px there isn't room for it beside the logo at the wordmark's 120px minimum, so phones
   reach AlphaX through the About menu instead. */
@media screen and (max-width: 991px) {
  .nav-actions { order: 1; min-width: 0; margin-left: auto; margin-right: 1rem; }
  .navbar1_menu-button { order: 2; }
}
@media screen and (max-width: 479px) {
  .nav-actions { display: none; }
}

/* Cookie consent banner */
#cookie-banner {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 1.25rem 2rem;
  background-color: var(--_primitives---colors--white, #fff);
  border-top: 1px solid var(--_primitives---opacity--neutral-darkest-15, #00000026);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: Roboto, sans-serif;
}
#cookie-banner.is-open { display: flex; }
#cookie-banner p { margin: 0; flex: 1; min-width: 220px; font-size: .875rem; line-height: 1.6; color: var(--_primitives---colors--neutral-darker, #222); }
#cookie-banner a { color: inherit; text-decoration: underline; }
#cookie-banner .cookie-btns { display: flex; gap: .75rem; flex-shrink: 0; }
@media (max-width: 479px) { #cookie-banner { padding: 1rem; } }

/* Homepage hero carousel (site.js, [data-hero-carousel]): the AlphaX slide first, then Webflow's hero.
   Both slide wrappers are display: contents, so the hero keeps exactly the layout Webflow gave it; the
   AlphaX slide is a full-bleed layer above it that fades in and out. */
.hero-carousel { position: relative; }
.hero-carousel__slide--base, .hero-carousel__slide--alphax { display: contents; }
.alphax-slide {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; visibility: hidden;
  /* AlphaX motion: 240ms, standard easing */
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms;
}
.hero-carousel__slide--alphax.is-active .alphax-slide { opacity: 1; visibility: visible; transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Controls: 24px targets (WCAG 2.5.8) drawing a 10px dot, and a pause/play button. */
.hero-carousel__dots {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .25rem; z-index: 3;
}
.hero-carousel__dots button {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; color: #fff;
}
.hero-carousel__dot::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.hero-carousel__dot[aria-current="true"]::before { background: #fff; }
/* Pause: two bars; when paused, a play triangle. */
.hero-carousel__pause::before, .hero-carousel__pause::after {
  content: ""; position: absolute; top: 7px; width: 3px; height: 10px; background: #fff; border-radius: 1px;
}
.hero-carousel__pause::before { left: 8px; }
.hero-carousel__pause::after { left: 13px; }
.hero-carousel__pause.is-paused::after { display: none; }
.hero-carousel__pause.is-paused::before {
  left: 9px; top: 6px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff;
}
.hero-carousel__dots button:focus-visible { outline: 2px solid #46f8ce; outline-offset: 0; }

/* The AlphaX slide uses AlphaX's own look (alphax-design): navy, Helvetica Neue with Inter as the
   fallback, Bold title, mint call to action. */
.alphax-slide {
  display: flex; align-items: center; overflow: hidden;
  background: #0d1b26; color: #fff; text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
}
/* The AlphaX brand waves behind the slide, placed exactly as alphax.ai's hero does
   (alphax-brand hero-waves-flow.svg, stretched to the full slide, anchored to the bottom). */
.alphax-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/media/alphax-waves.svg") center bottom / 100% 100% no-repeat;
}
.alphax-slide__device { z-index: 1; }
.alphax-slide > .padding-global { position: relative; z-index: 1; width: 100%; }
/* The AlphaX app in a device frame, bleeding off the right edge like the Geoverse tablet in the
   hero it replaces. The frame is a darker step of the navy, no outline or shadow. Portfolio details in
   the screenshot are blurred at source (holdings, alert, counts, avatar). */
.alphax-slide__device {
  position: absolute; top: 50%; right: -7%; transform: translateY(-50%);
  width: 60%; padding: 14px; border-radius: 28px; background: #050b10; pointer-events: none;
}
.alphax-slide__app { display: block; width: 100%; height: auto; border-radius: 16px; }
.alphax-slide__copy { max-width: 44%; }
/* The approved white wordmark for dark surfaces (alphax-brand existing-wordmark-dark).
   Never narrower than 120px, and nothing behind it. */
.alphax-slide__logo { display: block; width: 200px; min-width: 120px; height: auto; margin-bottom: 2rem; }
.alphax-slide__title {
  margin: 0 0 2.5rem; font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1.05;
  font-weight: 700; letter-spacing: -.025em; color: #fff;
}
/* What AlphaX is, and how it grew from NatureAlpha: AlphaX body style (Light 300, 18px, 1.55),
   text-secondary on navy (about 12:1). */
.alphax-slide__text {
  margin: -1rem 0 2.25rem; max-width: 32rem; font-size: 1.125rem; line-height: 1.55;
  font-weight: 300; color: #d6d3d1;
}
.alphax-slide__cta {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: .75rem 1.75rem;
  border-radius: 999px; background: #46f8ce; color: #0d1b26; font-size: 1rem; font-weight: 500;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.alphax-slide:hover .alphax-slide__cta, .alphax-slide:focus-visible .alphax-slide__cta { background: #a7fce8; }
.alphax-slide:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; box-shadow: inset 0 0 0 6px #c8c8c880; }
@media (max-width: 991px) {
  .alphax-slide__device { right: -18%; width: 66%; padding: 10px; border-radius: 22px; }
  .alphax-slide__app { border-radius: 12px; }
  .alphax-slide__copy { max-width: 46%; }
  .alphax-slide__logo { width: 160px; margin-bottom: 1.25rem; }
  .alphax-slide__title { margin-bottom: 1.75rem; }
  .alphax-slide__text { margin: -.75rem 0 1.75rem; font-size: 1rem; }
}
@media (max-width: 767px) {
  /* Phones: copy at the top, the app straight under it in the flow (the hero's height varies a lot
     here), nothing behind the wordmark. */
  /* The nav is fixed over the hero's top here; start level with the hero's own headline. */
  .alphax-slide { flex-direction: column; align-items: stretch; padding-top: 7rem; }
  .alphax-slide__device { position: static; order: 2; transform: none; align-self: flex-start;
    width: 118%; margin: 2rem 0 0 5%; padding: 8px; border-radius: 18px; flex-shrink: 0; }
  .alphax-slide__app { border-radius: 10px; }
  .alphax-slide__copy { max-width: 100%; }
  .alphax-slide__logo { width: 136px; }
  .alphax-slide__title { font-size: 2rem; margin-bottom: 1.25rem; }
  .alphax-slide__text { margin: -.5rem 0 1.25rem; font-size: 1rem; }
  .alphax-slide__cta { min-height: 44px; padding: .6rem 1.4rem; font-size: .9375rem; }
}
@media (max-width: 479px) {
  .alphax-slide__logo { width: 120px; margin-bottom: 1rem; }
  .alphax-slide__title { font-size: 1.75rem; }
  .alphax-slide__text { font-size: .9375rem; line-height: 1.5; }
  .hero-carousel__dots { bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .alphax-slide, .alphax-slide.is-active { transition: none; }
}

/* A heading promoted to h1 for document structure but sized as Webflow's h3 (404 page). */
.heading-as-h3 { font-size: 2.5rem; line-height: 1.2; }
@media screen and (max-width: 991px) { .heading-as-h3 { font-size: 2.25rem; } }
@media screen and (max-width: 767px) { .heading-as-h3 { font-size: 2rem; } }

/* Keyboard focus. Webflow's stylesheet removes the outline from nav dropdowns and the mobile menu
   button (.w-dropdown-toggle:focus, .w-nav-button:focus { outline: 0 }); bring it back for keyboard
   users only. */
.w-dropdown-toggle:focus-visible, .w-dropdown-link:focus-visible, .w-nav-button:focus-visible,
.w-nav-link:focus-visible, .w-nav-brand:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}