:root {
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --motion-duration: 820ms;
  --hero-shift: 0px;
}

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Progress and page-level motion */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #7859ff, #40d4df 65%, #79edc9);
  box-shadow: 0 0 18px rgba(64, 212, 223, .45);
  transform: scaleX(0);
  transform-origin: left center;
}

.motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 34px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease-out),
    filter var(--motion-duration) var(--motion-ease-out),
    transform var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal[data-motion="left"] {
  transform: translate3d(-38px, 0, 0);
}

.motion-ready .motion-reveal[data-motion="right"] {
  transform: translate3d(38px, 0, 0);
}

.motion-ready .motion-reveal[data-motion="scale"] {
  transform: scale(.965) translate3d(0, 18px, 0);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Hero depth remains deliberately subtle. */
.ai-hero > video,
.about-hero-overlay {
  transform: translate3d(0, var(--hero-shift), 0) scale(1.06);
  transform-origin: center;
  will-change: transform;
}

.hero-shade,
.ai-hero-wash,
.about-hero-overlay {
  transition: opacity 900ms var(--motion-ease-soft);
}

.hero-video video {
  z-index: 0;
  transform-origin: center;
  will-change: transform, filter;
  animation: hero-cinematic 16s ease-in-out infinite alternate;
}

.hero-video .hero-shade {
  z-index: 1;
  background:
    radial-gradient(circle at 74% 34%, rgba(72, 99, 235, .12), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.29), rgba(0,0,0,.04));
}

.hero-video::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 25% 48%, rgba(68, 216, 224, .2), transparent 18%),
    radial-gradient(circle at 74% 35%, rgba(124, 81, 255, .18), transparent 20%);
  mix-blend-mode: screen;
  animation: hero-aurora 12s ease-in-out infinite alternate;
}

.hero-video .hero-content {
  z-index: 2;
}

.motion-ready .hero-logo.motion-reveal.is-visible {
  animation: hero-logo-float 6s ease-in-out 1.2s infinite alternate;
}

.hero-content h1 {
  position: relative;
}

.hero-content h1::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, #59d8e3, #8b6cff);
  box-shadow: 0 0 18px rgba(89, 216, 227, .46);
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-accent-in 900ms var(--motion-ease-out) 1.05s forwards;
}

/* Header turns into a calm glass bar after the first scroll. */
.about-header,
.ai-header {
  position: fixed;
  transition:
    height 360ms var(--motion-ease-out),
    background-color 360ms ease,
    box-shadow 360ms ease,
    border-color 360ms ease;
}

.about-header.is-scrolled,
.ai-header.is-scrolled {
  height: 76px;
  background: rgba(7, 11, 24, .78);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 14px 38px rgba(3, 8, 20, .2);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.ai-header.is-scrolled {
  width: 100%;
  padding-inline: max(32px, calc((100% - var(--ai-max)) / 2));
}

.about-logo img,
.ai-brand img {
  transition: transform 420ms var(--motion-ease-out), opacity 300ms ease;
}

.about-logo:hover img,
.ai-brand:hover img {
  opacity: .92;
  transform: translateY(-2px) scale(1.015);
}

.about-menu-button {
  width: 46px;
  height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 240ms ease, transform 240ms var(--motion-ease-out);
}

.about-menu-button span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  transform-origin: center;
  transition: transform 300ms var(--motion-ease-out), opacity 220ms ease;
}

.about-menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.about-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.2);
}

.about-menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Buttons: lift, light sweep and tactile press state. */
.button,
.ai-button,
.contact-card-form button,
.about-contact button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 300ms var(--motion-ease-out),
    box-shadow 300ms ease,
    border-color 300ms ease,
    background-color 300ms ease,
    background-position 520ms var(--motion-ease-out),
    color 260ms ease;
}

.button-light {
  color: #12151b;
  border-color: rgba(255,255,255,.82);
  background-image: linear-gradient(115deg, #fff 0%, #fff 42%, #7357ed 58%, #289fc0 100%);
  background-size: 250% 100%;
  background-position: 0% 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.button-light:hover,
.button-light:focus-visible {
  color: #fff;
  border-color: rgba(122, 225, 234, .7);
  background-position: 100% 50%;
  box-shadow: 0 18px 42px rgba(55, 71, 188, .3), 0 0 0 1px rgba(255,255,255,.16);
  outline: none;
}

.button-outline-purple:hover,
.button-outline-purple:focus-visible {
  color: #fff;
  border-color: #7357ed;
  background: linear-gradient(135deg, #7357ed, #4f72e8 58%, #289fc0);
  box-shadow: 0 18px 42px rgba(74, 62, 210, .28), 0 0 0 1px rgba(115, 87, 237, .12);
  outline: none;
}

.button::after,
.ai-button::after,
.contact-card-form button::after,
.about-contact button::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.36) 45%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 650ms var(--motion-ease-out);
}

.button:hover,
.ai-button:hover,
.contact-card-form button:hover,
.about-contact button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(36, 30, 90, .18);
}

.button:hover::after,
.ai-button:hover::after,
.contact-card-form button:hover::after,
.about-contact button:hover::after {
  transform: translateX(130%);
}

.button:active,
.ai-button:active,
.contact-card-form button:active,
.about-contact button:active {
  transform: translateY(0) scale(.985);
  transition-duration: 100ms;
}

/* Cards gain depth without changing the page's visual language. */
.service-grid article,
.product-cards article,
.adaquote-card,
.about-values article,
.contact-details article,
.contact-card-form,
.ai-risk-grid article,
.ai-use-grid article,
.ai-compliance-list article,
.renew-three article,
.renew-steps article,
.renew-spec-grid article,
.renew-tech article,
.fit-contact-card {
  transition:
    transform 380ms var(--motion-ease-out),
    box-shadow 380ms ease,
    border-color 380ms ease,
    background-color 380ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-grid article:hover,
  .about-values article:hover,
  .contact-details article:hover,
  .ai-risk-grid article:hover,
  .ai-use-grid article:hover,
  .ai-compliance-list article:hover,
  .renew-three article:hover,
  .renew-steps article:hover,
  .renew-spec-grid article:hover,
  .renew-tech article:hover {
    transform: translateY(-7px);
  }

  .product-cards article:hover,
  .adaquote-card:hover,
  .contact-card-form:hover,
  .fit-contact-card:hover {
    border-color: rgba(107, 101, 246, .35);
    box-shadow: 0 28px 64px rgba(25, 30, 65, .18);
    transform: translateY(-9px);
  }

  .ai-page .ai-risk-grid article:hover,
  .ai-page .ai-use-grid article:hover,
  .ai-page .ai-compliance-list article:hover,
  .ai-page .renew-three article:hover,
  .ai-page .renew-steps article:hover,
  .ai-page .renew-spec-grid article:hover,
  .ai-page .renew-tech article:hover {
    border-color: rgba(54, 217, 230, .32);
    background-color: rgba(76, 112, 190, .07);
  }

  .motion-ready .service-grid article.motion-reveal.is-visible:hover,
  .motion-ready .about-values article.motion-reveal.is-visible:hover,
  .motion-ready .contact-details article.motion-reveal.is-visible:hover,
  .motion-ready .ai-risk-grid article.motion-reveal.is-visible:hover,
  .motion-ready .ai-use-grid article.motion-reveal.is-visible:hover,
  .motion-ready .ai-compliance-list article.motion-reveal.is-visible:hover,
  .motion-ready .renew-three article.motion-reveal.is-visible:hover,
  .motion-ready .renew-steps article.motion-reveal.is-visible:hover,
  .motion-ready .renew-spec-grid article.motion-reveal.is-visible:hover,
  .motion-ready .renew-tech article.motion-reveal.is-visible:hover {
    transform: translateY(-7px);
  }

  .motion-ready .product-cards article.motion-reveal.is-visible:hover,
  .motion-ready .adaquote-card.motion-reveal.is-visible:hover,
  .motion-ready .contact-card-form.motion-reveal.is-visible:hover,
  .motion-ready .fit-contact-card.motion-reveal.is-visible:hover {
    transform: translateY(-9px);
  }

  .motion-ready .trust-section img.motion-reveal.is-visible:hover,
  .motion-ready .portrait-collage img.motion-reveal.is-visible:hover,
  .motion-ready .quote-card > img.motion-reveal.is-visible:hover {
    transform: scale(1.025);
  }
}

/* Images and line art become active as their section enters the viewport. */
.mission-visual img,
.trust-section img,
.portrait-collage img,
.quote-card > img,
.about-quote img {
  transition: transform 900ms var(--motion-ease-out), filter 600ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .mission-visual:hover img,
  .trust-section img:hover,
  .portrait-collage img:hover,
  .quote-card:hover > img {
    transform: scale(1.025);
  }
}

.motion-ready .line-icon path,
.motion-ready .line-icon rect,
.motion-ready .about-icon path,
.motion-ready .about-icon rect,
.motion-ready .about-icon circle {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  transition: stroke-dashoffset 1100ms var(--motion-ease-soft) 180ms;
}

.motion-ready .is-visible .line-icon path,
.motion-ready .is-visible .line-icon rect,
.motion-ready .is-visible .about-icon path,
.motion-ready .is-visible .about-icon rect,
.motion-ready .is-visible .about-icon circle {
  stroke-dashoffset: 0;
}

.status-dot,
.machine-lights i {
  animation: status-breathe 2.8s ease-in-out infinite;
}

.machine-lights i:nth-child(2) { animation-delay: 360ms; }
.machine-lights i:nth-child(3) { animation-delay: 720ms; }

.ai-scroll span {
  animation: scroll-cue 1.8s var(--motion-ease-soft) infinite;
  transform-origin: top;
}

.to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.92);
  transition: opacity 260ms ease, transform 360ms var(--motion-ease-out), background 260ms ease;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.to-top:hover {
  background: rgba(62, 71, 95, .78);
  transform: translateY(-3px) scale(1.04);
}

.tech-track.is-auto-loop {
  scroll-behavior: auto;
  cursor: grab;
}

.tech-track.is-auto-loop:active {
  cursor: grabbing;
}

.tech-track.is-auto-loop img[aria-hidden="true"] {
  pointer-events: none;
}

.about-menu a,
.ai-nav a,
.footer a,
.ai-footer a,
.service-grid article > p + p a,
.ai-contact-details a {
  transition: color 240ms ease, opacity 240ms ease, transform 240ms var(--motion-ease-out);
}

.footer a:hover,
.ai-footer a:hover,
.service-grid article > p + p a:hover,
.ai-contact-details a:hover {
  color: #66dce3;
}

@keyframes status-breathe {
  0%, 100% { opacity: .65; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes hero-cinematic {
  0% {
    filter: saturate(1) brightness(.94);
    transform: translate3d(-1.2%, var(--hero-shift), 0) scale(1.085);
  }
  48% {
    filter: saturate(1.1) brightness(1);
    transform: translate3d(.7%, calc(var(--hero-shift) - 1.2%), 0) scale(1.115);
  }
  100% {
    filter: saturate(1.04) brightness(.96);
    transform: translate3d(1.25%, var(--hero-shift), 0) scale(1.095);
  }
}

@keyframes hero-aurora {
  0% { opacity: .22; transform: translate3d(-3%, 1%, 0) scale(.96); }
  50% { opacity: .38; }
  100% { opacity: .26; transform: translate3d(4%, -2%, 0) scale(1.05); }
}

@keyframes hero-logo-float {
  0% { transform: translate3d(0, 0, 0); filter: drop-shadow(0 0 0 rgba(91, 211, 225, 0)); }
  100% { transform: translate3d(0, -7px, 0); filter: drop-shadow(0 9px 18px rgba(91, 211, 225, .16)); }
}

@keyframes hero-accent-in {
  to { transform: scaleX(1); }
}

@keyframes scroll-cue {
  0% { opacity: 0; transform: scaleY(.15); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); }
}

@media (max-width: 760px) {
  .scroll-progress { height: 2px; }

  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal[data-motion="left"],
  .motion-ready .motion-reveal[data-motion="right"] {
    transform: translate3d(0, 24px, 0);
  }

  .motion-ready .motion-reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .about-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 240ms ease, transform 320ms var(--motion-ease-out), visibility 240ms;
  }

  .about-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  .portrait-collage {
    width: min(270px, 100%);
    margin-inline: auto;
    grid-template-columns: 1.08fr .92fr;
    gap: 10px;
  }

  .portrait-collage .ada {
    grid-row: span 2;
    height: 280px;
  }

  .portrait-collage .byron,
  .portrait-collage .babbage {
    height: 135px;
  }

  .portrait-collage img {
    object-fit: cover;
    object-position: top center;
  }
}

@media (max-width: 980px) {
  .ai-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 240ms ease, transform 320ms var(--motion-ease-out), visibility 240ms;
  }

  .ai-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-progress { display: none; }

  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal[data-motion] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .hero-video video,
  .ai-hero > video,
  .about-hero-overlay,
  .mission-visual img,
  .trust-section img,
  .portrait-collage img,
  .quote-card > img,
  .about-quote img,
  .button,
  .ai-button,
  .contact-card-form button,
  .about-contact button,
  .to-top {
    animation: none;
    transition: none;
    transform: none;
  }

  .hero-video::after,
  .motion-ready .hero-logo.motion-reveal.is-visible,
  .hero-content h1::after {
    animation: none;
  }

  .hero-content h1::after { transform: scaleX(1); }

  .motion-ready .line-icon path,
  .motion-ready .line-icon rect,
  .motion-ready .about-icon path,
  .motion-ready .about-icon rect,
  .motion-ready .about-icon circle {
    stroke-dashoffset: 0;
    transition: none;
  }

  .status-dot,
  .machine-lights i,
  .ai-scroll span { animation: none; }
}