/* Homepage presentation only; lab controls and API behaviour stay independent. */
html { scroll-padding-top: 112px; }
:focus-visible { outline: 3px solid #335cff; outline-offset: 5px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 14px 20px; background: white; border-radius: 12px; }
.skip-link:focus { top: 16px; }
.site-header {
  position: sticky; top: 12px; min-height: 72px; margin-top: 12px;
  padding: 0 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 24px;
  background: rgba(248,250,255,.9); backdrop-filter: blur(18px);
  box-shadow: 0 8px 35px rgba(35,52,112,.07);
}
nav a { position: relative; padding-block: 12px; }
nav a::after { content: ""; position: absolute; bottom: 4px; left: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .22s ease; }
nav a:hover::after, nav a[aria-current]::after { transform: scaleX(1); }
.hero { gap: 46px; }
.hero h1 em { background: linear-gradient(110deg,#335cff,#8057da); background-clip: text; color: transparent; }
.hero-description { max-width: 490px; }
.hero-notes { color: #586580; }
.button-primary { background: linear-gradient(115deg,#335cff,#6453e5); }
.button-primary:hover { background: linear-gradient(115deg,#2346dc,#754dde); }
.button-primary span { transition: transform .2s ease; }
.button-primary:hover span { transform: translateX(4px); }
.quantum-visual {
  background: radial-gradient(ellipse at 75% 20%,#d3fff0aa,transparent 45%),
    linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px),
    linear-gradient(145deg,#e7eeff,#e5ddfa);
  background-size: auto,32px 32px,32px 32px,auto;
  box-shadow: 0 30px 65px -22px #6e65b84d;
}
.visual-label { position: absolute; top: 24px; left: 28px; right: 20px; color: #52618a; font-size: 10px; letter-spacing: .08em; }
.visual-card-one { top: 20%; }
.visual-card { animation: fq-float 6s ease-in-out infinite; }
.visual-card-two { animation-delay: -3s; }
.quantum-core { animation: fq-breathe 5s ease-in-out infinite; }
.quantum-core::after { content: ""; position: absolute; inset: -18px; border: 1px solid #7772da40; border-radius: 50%; }
.orbit i { top: auto; right: auto; offset-path: ellipse(50% 50% at 50% 50%); animation: fq-orbit 10s linear infinite; }
.orbit-two i { animation-duration: 14s; animation-delay: -4s; }
.orbit-three i { animation-duration: 18s; animation-direction: reverse; }
.motion-toggle {
  position: absolute; right: 22px; bottom: 24px; z-index: 3;
  min-height: 36px; padding: 8px 12px; border: 1px solid #7381b340;
  border-radius: 999px; background: #ffffffb8; color: #3e5078; cursor: pointer; font-size: 10px;
}
.motion-toggle[hidden] { display: none; }
.journey-card { border-radius: 26px; background: linear-gradient(110deg,#edf1ff,#fff 65%,#edfaf6); }
.journey-actions button { min-height: 42px; transition: transform .2s,box-shadow .2s; }
.journey-actions button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #335cff22; }
.lab-grid { gap: 24px; }
.lab-card {
  display: flex; flex-direction: column; background: #ffffffdb;
  border-color: #dde3f0; transition: translate .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.lab-card .lab-icon { flex-shrink: 0; transition: transform .45s ease; }
.lab-card .text-link { margin-top: auto; padding-top: 12px; min-height: 44px; }
.lab-card:focus-within { border-color: #7f97fb; box-shadow: 0 18px 40px #335cff1a; }
.lab-card h3 { line-height: 1.18; }
.lab-card:nth-child(2n) .lab-icon { background-color: #f1ecfc; }
.lab-card:nth-child(3n) .lab-icon { background-color: #e9f7f3; }
.lab-number { color: #737f99; }
.process-grid article { padding: 28px; border: 1px solid #e0e5f2; border-radius: 22px; background: #ffffffa8; }
.process-grid article > span { width: 40px; height: 40px; margin-bottom: 20px; background: linear-gradient(135deg,#e6edff,#ede5ff); }
.process-grid p { margin-bottom: 0; }
.chat-shell { border-color: #dce3f4; box-shadow: 0 28px 75px -24px #4553a14d; }
.chat-header { background: linear-gradient(105deg,#eff3ff,#faf9ff); }
.chat-messages { height: 370px; }
.message { animation: fq-message .25s ease-out; font-size: 14px; }
.suggestion-row { flex-wrap: wrap; gap: 8px; }
.suggestion-row button { min-height: 34px; font-size: 11px; transition: background .2s,border-color .2s; }
.suggestion-row button:hover { background: #eef2ff; }
.chat-form textarea { font-size: 15px; }
.chat-disclaimer { font-size: 10px; color: #68758d; line-height: 1.5; }
.reveal-ready { opacity: 0; transform: translateY(20px); }
.reveal-ready.is-visible { opacity: 1; transform: none; transition: opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1); }
@keyframes fq-float { 50% { transform: translateY(-9px); } }
@keyframes fq-breathe { 50% { transform: scale(1.055); } }
@keyframes fq-orbit { to { offset-distance: 100%; } }
@keyframes fq-message { from { opacity: 0; transform: translateY(7px); } }
@media (hover: hover) and (pointer: fine) {
  .lab-card:hover { translate: 0 -6px; border-color: #a4b5f8; box-shadow: 0 24px 48px #415bc21c; }
  .lab-card:hover .lab-icon { transform: scale(1.04); }
}
.motion-paused .quantum-visual *, .motion-paused .quantum-visual *::before, .motion-paused .quantum-visual *::after { animation-play-state: paused !important; }
.motion-paused .reveal-ready { opacity: 1; transform: none; transition: none; }
.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state: paused !important; }
@media (max-width: 680px) {
  html { scroll-padding-top: 92px; }
  .site-header { padding-inline: 13px; top: 8px; min-height: 64px; border-radius: 20px; }
  .brand { font-size: 15px; gap: 7px; }
  .language-switch button { min-height: 34px; font-size: 11px; }
  .hero { padding-top: 46px; gap: 24px; }
  .visual-label { font-size: 9px; left: 20px; }
  .visual-caption { bottom: 65px; left: 20px; }
  .motion-toggle { bottom: 18px; right: 18px; }
  .lab-card { padding: 24px; }
  .process-grid article { padding: 24px; }
  .chat-form textarea { font-size: 16px; }
  .suggestion-row { flex-wrap: nowrap; }
}
.mechanics-feature { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 54px; margin-block: 12px 10px; padding: 42px; border: 1px solid #d2e4df; border-radius: 32px; background: linear-gradient(125deg,#eaf4ef,#edf1ff); }
.mechanics-feature h2 { max-width: 470px; font-size: clamp(30px,3.5vw,46px); letter-spacing: -.05em; line-height: 1.08; margin-bottom: 18px; }
.mechanics-feature-copy > p:not(.eyebrow) { color: #5d7281; font-size: 15px; line-height: 1.7; }
.mechanics-feature .eyebrow { color: #26745e; font-size: 10px; }
.mechanics-menu { display: grid; gap: 10px; }
.mechanics-menu a { display: grid; grid-template-columns: 48px 1fr 14px; align-items: center; gap: 14px; padding: 15px; border-radius: 17px; background: #ffffffc4; border: 1px solid #ffffff; transition: transform .2s,background .2s; }
.mechanics-menu a:hover { transform: translateX(4px); background: #fff; }
.mechanics-menu a > span { display: grid; place-items: center; height: 44px; border-radius: 12px; color: #297060; background: #e4f2ec; font: 19px Georgia,serif; }
.mechanics-menu strong { display: block; font-size: 14px; margin-bottom: 4px; }
.mechanics-menu small { color: #697a90; font-size: 11px; line-height: 1.5; }
.mechanics-menu a > b { color: #5b7c95; }
@media (max-width: 980px) { .mechanics-feature { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 680px) { .mechanics-feature { padding: 24px; border-radius: 26px; } .mechanics-feature .eyebrow { justify-content: start; letter-spacing: .08em; } .mechanics-menu a { gap: 10px; padding: 12px; grid-template-columns: 38px 1fr 12px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1; transform: none; }
  .lab-card:hover { translate: none; }
}