/* Homepage: a research workspace arriving along Algoagent's signal curve.
   The approved Huly reference owns the dark stage and light-to-window gesture.
   The app, content, identity and typography remain Algoagent's own. */
.home { --nav-h: 72px; }
.home .nav { background: #080a10; border-bottom-color: transparent; }
.home .nav.scrolled { border-bottom-color: rgb(255 255 255 / .12); }
.home .nav-in, .hero .wrap { width: min(100% - 2 * var(--gutter), 1240px); }
.home .brand { font-size: 1.15rem; }
.home .nav .btn-1 { --bg-b: #e9edf8; --fg-b: #111727; --bd-b: #e9edf8; border-radius: 8px; }
.home .nav .btn-1:hover { --bg-b: #fff; --bd-b: #fff; }
.home .progress { z-index: 101; }

.hero {
  --hero-bg: #080a10;
  --hero-ink: #f2f4fc;
  --hero-muted: #a6b0c6;
  position: relative;
  padding: 108px 0 0;
  isolation: isolate;
  overflow: clip;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.hero::before, .hero::after { content: none; }
.hero-stage { position: relative; }
.hero-reveal {
  position: absolute;
  z-index: 0;
  top: -64px;
  left: -60px;
  right: -60px;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .24s ease-out;
  -webkit-mask-image: radial-gradient(circle at var(--mx, -9999px) var(--my, -9999px), #000 0, rgb(0 0 0 / .95) 60px, rgb(0 0 0 / .6) 140px, rgb(0 0 0 / .2) 230px, transparent 330px);
  mask-image: radial-gradient(circle at var(--mx, -9999px) var(--my, -9999px), #000 0, rgb(0 0 0 / .95) 60px, rgb(0 0 0 / .6) 140px, rgb(0 0 0 / .2) 230px, transparent 330px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-reveal img { position: absolute; top: 74px; left: 37%; width: 1100px; max-width: none; height: auto; opacity: .44; filter: saturate(.7); transform: perspective(1200px) rotateY(-13deg) rotateZ(-5deg); transform-origin: 20% 40%; }
.hero-intro { position: relative; padding-bottom: 64px; }
.hero-copy { position: relative; z-index: 2; max-width: 810px; }
.hero h1 {
  max-width: 810px;
  font-size: clamp(3rem, 5.15vw, 4.65rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: initial;
}
.hero h1 span { display: block; }
.hero .lead { max-width: 590px; margin-top: 18px; color: #b8c1d6; font-size: 1.1rem; line-height: 1.55; }
.hero .cta-row { margin-top: 22px; gap: 12px; }
.hero .btn { min-height: 48px; border-radius: 8px; padding: 12px 21px; font-size: .9375rem; }
.hero-cta {
  position: relative;
  color: #111727;
  background: #edf1fc;
  border-color: #edf1fc;
  box-shadow: 0 6px 32px -8px rgb(149 176 255 / .6);
  overflow: hidden;
}
.hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .85) 52%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.hero-cta:hover { color: #111727; background: #fff; border-color: #fff; }
.hero .btn-2 { --bg-b: rgb(8 10 16 / .6); --fg-b: #d7deed; --bd-b: #606c87; }
.hero .btn-2:hover { --bg-b: #151c2c; --fg-b: #fff; --bd-b: #a4b7de; }
.hero-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 17px; font-size: .8125rem; color: var(--hero-muted); }
.hero-availability span + span::before { content: "·"; margin-right: 8px; color: #7d8ca8; }
.hero-availability a { color: #c5cfe4; text-decoration-color: #596680; text-underline-offset: 3px; }
.hero :where(a, button):focus-visible { outline-color: #bdcfff; outline-offset: 5px; }

/* The canvas continues below the rim so its bloom is never cut off. The SVG
   remains the resting scene for no JS and unavailable WebGL. The opaque black
   canvas uses screen compositing at the atmosphere's stacking boundary, so its
   black pixels blend with the hero background instead of covering it. */
.hero-atmosphere { --flow-bleed: 100px; position: absolute; z-index: 0; inset: -160px -40px calc(-1 * var(--flow-bleed)); pointer-events: none; mix-blend-mode: screen; }
.hero-energy { display: block; width: 100%; height: calc(100% - var(--flow-bleed)); overflow: visible; }
.hero-flow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.hero-atmosphere.flow-ready .hero-flow { opacity: 1; }
.hero-atmosphere.flow-ready .hero-energy { visibility: hidden; }
@media (min-width: 881px) {
  .hero-flow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
.energy-haze { fill: none; stroke: #9b48ee; stroke-width: 74; opacity: .4; filter: url(#energy-soft); }
.energy-bloom { fill: none; stroke: #b871ff; stroke-width: 10; opacity: .72; filter: url(#energy-blur); }
.energy-edge { fill: none; stroke: #e1c2ff; stroke-width: 2; filter: url(#energy-edge); }
.energy-core { fill: none; stroke: #f8f1ff; stroke-width: .9; opacity: .88; }
.hero-signal { position: absolute; left: 79%; top: 24%; display: flex; flex-direction: column; gap: 30px; color: #889bbd; font: 500 .6875rem/1.5 var(--font-mono); letter-spacing: .08em; }
.hero-signal span { display: flex; align-items: center; gap: 9px; }
.hero-signal i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #d6adff; box-shadow: 0 0 12px #b677f4; }

.hero-showcase { position: relative; z-index: 3; scroll-margin-top: 136px; }
.showcase-energy { position: absolute; z-index: 0; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; fill: none; }
.rim-aura { stroke: url(#rim-color); stroke-width: 10px; filter: url(#rim-bloom); opacity: .65; }
.rim-edge { stroke: url(#rim-color); stroke-width: 1.2px; opacity: .85; }
.rim-flow { stroke: #f0e8ff; stroke-width: 1.7px; stroke-linecap: round; opacity: 0; }
.rim-flow use { stroke-dasharray: 100 var(--rim-length, 1600); stroke-dashoffset: 100; }
.hero-showcase::before, .hero-showcase::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .24s ease-out; }
.hero-showcase::before { background: radial-gradient(360px circle at var(--px, 50%) var(--py, 0px), rgb(192 129 255 / .09), transparent 80%); mix-blend-mode: screen; }
.hero-showcase::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(300px circle at var(--px, 50%) var(--py, 0px), #f3ebff, #cd9aff 30%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hero-showcase:focus-within { outline: 1px solid rgb(162 185 244 / .4); outline-offset: 3px; border-radius: 12px; }
.hero-showcase .bench {
  position: relative;
  z-index: 1;
  background: #0e1018;
  border: 1px solid #394760;
  border-top-color: #d0b0ef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 32px 100px -28px rgb(0 0 0 / .9), 0 -12px 64px -36px #c68dff;
}
.hero-showcase .bench-view {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0e1018;
  box-shadow: none;
}
.hero-showcase .bench-frame iframe { height: 620px; background: #0e0f17; }
.hero-showcase .frame-skel { min-height: 620px; }
.hero-showcase .frame-badge { display: none; }
.hero-showcase .bench-acts { gap: 12px; padding: 16px 20px; border-top: 1px solid #2d3444; }
.hero-showcase .bench-acts .fine { color: #a6b0c6; font: 400 .8125rem/1.6 var(--font-ui); }
.hero-showcase .bench-acts .fine a { color: #d3dcf1; }
.hero-showcase .bench-acts .btn { min-height: 44px; font-size: .8125rem; padding: 10px 15px; }
.hero-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px; padding: 46px 0 48px; color: #a6b0c6; font-size: .875rem; }
.hero-pillars span { display: flex; align-items: center; gap: 9px; }
.hero-pillars svg { width: 16px; height: 16px; stroke: #a8bfea; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* A legible product excerpt for failed embeds and browsers without JS.
   All displayed figures are the same fictional ACME fixture as /demo. */
.preview-chrome { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #2d3444; background: #10141d; color: #bcc7de; font-size: .8125rem; }
.preview-lights { display: flex; gap: 6px; }
.preview-lights i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.preview-lights i:nth-child(2) { background: #febc2e; }
.preview-lights i:nth-child(3) { background: #28c840; }
.preview-chrome > span:last-child { margin-left: auto; font: 400 .6875rem/1.4 var(--font-mono); color: #a6b0c6; }
.preview-dossier { padding: 22px; }
.preview-subject { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-subject b { color: #eef3ff; font: 700 1.2rem/1.2 var(--font-display); }
.preview-subject span { color: #bdcbe3; font-size: .75rem; }
.preview-status { display: flex; align-items: center; gap: 7px; color: #99d4be; font-size: .75rem; margin-top: 9px; }
.preview-status i { width: 5px; height: 5px; border-radius: 50%; background: #50c79b; }
.preview-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-bottom: 22px; border-bottom: 1px solid #2d3444; }
.preview-scores dt { color: #a6b0c6; font-size: .75rem; }
.preview-scores dd { margin-top: 7px; color: #e9eefb; font: 700 1.45rem/1 var(--font-display); }
.preview-scores small { color: #a6b0c6; font-size: .75rem; font-weight: 400; }
.preview-evidence { margin-top: 21px; color: #b7c5e1; font-size: .8125rem; line-height: 1.7; }
.preview-evidence strong { color: #e3ebfb; font-weight: 600; }
.preview-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 14px; color: #9eb1d3; font: 400 .6875rem/1.5 var(--font-mono); }
.preview-source span:last-child { color: #9bd3bc; }
.hero-showcase .bench-still[data-view="dossier"] { padding: 0; }
.hero-showcase .bench-still { background: #10151f; }
.hero-showcase .still-note { color: #a6b0c6; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.proof-grid > * { min-width: 0; }
.proof-copy h2 { font: 800 clamp(2rem, 3.4vw, 3.15rem)/1.06 var(--font-display); letter-spacing: -.035em; max-width: 520px; }
.proof-copy .lead { margin-top: 24px; font-size: 1.0625rem; }
.proof-copy .limit { margin-top: 22px; }
.proof-copy .sec-link { font-size: .9375rem; }
.proof-grid .doss { position: static; }
.home .rule-layout > * { min-width: 0; }

/* The travelling rim light is part of the flow, so it runs regardless of the
   OS motion preference. Only the one-shot arrival transitions stay gated. */
.rim-flow use { animation: rim-travel var(--rim-duration, 10s) linear infinite; animation-play-state: paused; }
.hero-stage[data-motion="running"] .rim-flow { opacity: .9; }
.hero-stage[data-motion="running"] .rim-flow use { animation-play-state: running; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: hero-copy-arrive .85s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-atmosphere { animation: energy-arrive 1.35s ease-out both; }
  .hero-cta:hover::after { transition: transform .65s ease; transform: translateX(130%); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 881px) {
  .hero-stage[data-pointer="active"] .hero-reveal[data-loaded="true"] { opacity: 1; }
  .hero-stage[data-pointer="active"] .hero-showcase::before, .hero-stage[data-pointer="active"] .hero-showcase::after { opacity: 1; }
}
@keyframes rim-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: calc(-1 * var(--rim-length, 1600)); } }
@keyframes hero-copy-arrive { from { opacity: .6; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes energy-arrive { from { opacity: .25; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .hero { padding-top: 120px; }
  .hero h1 { font-size: clamp(3rem, 5.45vw, 3.85rem); }
  .hero-signal { display: none; }
  .hero-intro { padding-bottom: 64px; }
  .hero-atmosphere { left: 0; right: -100px; }
}
@media (max-width: 880px) {
  .home .nav-right { margin-left: auto; }
  .hero { padding-top: 112px; }
  .hero-intro { --beam-space: 176px; padding-bottom: var(--beam-space); }
  .hero h1 { max-width: 660px; font-size: clamp(2.65rem, 6.4vw, 3.8rem); }
  .hero .lead { max-width: 440px; font-size: 1rem; }
  .hero-atmosphere {
    --flow-bleed: 80px;
    inset: calc(100% - var(--beam-space)) -24px calc(-1 * var(--flow-bleed));
    -webkit-mask-image: linear-gradient(transparent, #000 32px);
    mask-image: linear-gradient(transparent, #000 32px);
  }
  .hero-showcase .bench { border: 1px solid #56688b; border-top-color: #b3c7ef; border-radius: 12px; overflow: hidden; background: #10151f; }
  .hero-showcase .bench-view { border: 0; border-radius: 0; box-shadow: none; }
  .hero-showcase .bench-frame iframe { height: clamp(560px, 78svh, 760px); scroll-margin-top: calc(var(--nav-h) + 12px); }
  .hero-showcase .frame-skel { min-height: 100%; grid-template-columns: 1fr; }
  .hero-showcase { scroll-margin-top: 84px; }
  .hero-showcase .bench-acts { padding: 16px 20px 20px; border-top: 1px solid #2d3444; }
  .hero-showcase .bench-acts .fine { flex-basis: 100%; }
  .hero-pillars { padding-block: 30px 36px; gap: 14px 26px; font-size: .8125rem; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .proof-grid .paper-head { flex-wrap: wrap; }
  .proof-copy { max-width: 620px; }
}
@media (max-width: 540px) {
  .home .gv-head { flex-wrap: wrap; }
  .home { --nav-h: 66px; }
  .home .brand { font-size: 1rem; }
  .home .nav-right { gap: 0; margin-left: auto; }
  .home .btn-nav { display: none; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(2.15rem, 10.4vw, 3.25rem); line-height: 1.04; }
  .hero h1 span { max-width: 10em; }
  .hero .lead { max-width: 36ch; margin-top: 20px; font-size: 1rem; }
  .hero .cta-row { gap: 9px; margin-top: 22px; }
  .hero .cta-row .btn { padding: 12px 14px; font-size: .8125rem; }
  .hero-availability { gap: 6px; margin-top: 16px; font-size: .75rem; }
  .hero-availability span + span::before { margin-right: 6px; }
  .hero-atmosphere { --flow-bleed: 72px; }
  .preview-dossier { padding: 19px 18px 22px; }
  .preview-scores { gap: 8px; }
  .hero-pillars { align-items: flex-start; flex-direction: column; gap: 13px; padding-left: 3px; }
}
@media (max-width: 360px) {
  .hero { padding-top: 96px; }
  .hero h1 { font-size: 9vw; }
  .hero .cta-row .btn { width: 100%; min-height: 44px; }
  .hero-availability span:last-child { flex-basis: 100%; }
  .hero-availability span:last-child::before { content: none; }
}

@media print {
  .hero { background: #fff; color: #000; padding-top: 20px; }
  .hero-atmosphere, .hero-signal, .hero-reveal, .showcase-energy { display: none; }
  .hero .lead, .hero-availability, .hero-pillars { color: #333; }
}