/* ==========================================================================
   Prinevo "awesome" layer — motion, depth and finish on top of the existing
   light theme. Content and palette are unchanged; this file only adds polish.
   Every effect degrades to the original design without JS or with
   prefers-reduced-motion.
   ========================================================================== */

@property --fx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --fx-ink: #111111;
  --fx-ease: cubic-bezier(.2, .75, .15, 1);
  --fx-ease-spring: cubic-bezier(.34, 1.45, .5, 1);
  --fx-blue: 61, 91, 255;
  --fx-green: 63, 200, 150;
}

html { scroll-behavior: smooth; }
::selection { background: #111; color: #fff; }

/* ---------- Scroll progress ---------- */
.fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1000;
  transform-origin: 0 50%; transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, #111 0%, #555 55%, rgb(var(--fx-blue)) 100%);
  pointer-events: none;
}

/* ---------- Nav: glass + underline ---------- */
html[data-theme="light"] .nav {
  background: rgb(255 255 255 / 70%) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
  transition: box-shadow .4s ease, background .4s ease, border-color .4s ease;
}
html[data-theme="light"] .nav.fx-scrolled {
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: 0 1px 0 rgb(0 0 0 / 4%), 0 10px 30px -12px rgb(0 0 0 / 12%);
}
html[data-theme="light"] .nav-links a:not(.btn) { position: relative; transition: color .25s ease; }
html[data-theme="light"] .nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform .35s var(--fx-ease);
}
html[data-theme="light"] .nav-links a:not(.btn):hover::after { transform: scaleX(1); }
html[data-theme="light"] .logo-mark svg { transition: transform .6s var(--fx-ease-spring); }
html[data-theme="light"] .logo:hover .logo-mark svg { transform: rotate(-8deg) scale(1.08); }

/* ---------- Buttons: sheen + lift ---------- */
html[data-theme="light"] .btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), background .25s ease, border-color .25s ease, color .25s ease !important;
  will-change: transform;
}
html[data-theme="light"] .btn-primary {
  background: linear-gradient(180deg, #2a2a2a 0%, #0b0b0b 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 1px 2px rgb(0 0 0 / 20%), 0 8px 20px -6px rgb(0 0 0 / 35%) !important;
}
html[data-theme="light"] .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 28%) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s var(--fx-ease);
}
html[data-theme="light"] .btn-primary:hover::after { transform: translateX(120%); }
html[data-theme="light"] .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 2px 4px rgb(0 0 0 / 18%), 0 18px 40px -10px rgb(0 0 0 / 45%) !important;
}
html[data-theme="light"] .btn-ghost {
  background: rgb(255 255 255 / 70%) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-theme="light"] .btn-ghost:hover { border-color: #111 !important; box-shadow: 0 10px 26px -10px rgb(0 0 0 / 25%) !important; }
html[data-theme="light"] .btn:active { transform: scale(.97) !important; }

/* ---------- Hero ---------- */
html[data-theme="light"] .hero { position: relative; isolation: isolate; }
html[data-theme="light"] .hero > .container { position: relative; z-index: 2; }
html[data-theme="light"] .hero .grid-bg {
  opacity: .55 !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
  animation: fxGridPan 40s linear infinite;
}
@keyframes fxGridPan { to { background-position: 64px 64px, 64px 64px; } }

.fx-aurora { position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-aurora i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: multiply;
  animation: fxDrift 22s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: 4%; top: -8%;
  background: radial-gradient(circle, rgb(var(--fx-blue) / 18%), transparent 65%); }
.fx-aurora i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: 2%; top: 10%;
  background: radial-gradient(circle, rgb(var(--fx-green) / 16%), transparent 65%); animation-duration: 28s; animation-delay: -6s; }
.fx-aurora i:nth-child(3) { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; left: 34%; top: 38%;
  background: radial-gradient(circle, rgb(0 0 0 / 7%), transparent 65%); animation-duration: 34s; animation-delay: -12s; }
@keyframes fxDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, 8%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, 3%, 0) scale(.94); }
}

.fx-net {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, transparent 35%, #000 85%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, transparent 35%, #000 85%);
  opacity: 0; transition: opacity 1.6s ease .4s;
}
.fx-ready .fx-net { opacity: 1; }

.fx-cursor-glow {
  position: absolute; z-index: 1; width: 520px; height: 520px; left: 0; top: 0; pointer-events: none;
  border-radius: 50%; transform: translate3d(calc(var(--hx, -999px) - 260px), calc(var(--hy, -999px) - 260px), 0);
  background: radial-gradient(circle, rgb(var(--fx-blue) / 9%), transparent 60%);
  transition: opacity .5s ease; opacity: 0;
}
.hero:hover .fx-cursor-glow { opacity: 1; }

/* Eyebrow pill: rotating hairline border + live dot */
html[data-theme="light"] .hero .eyebrow {
  position: relative; background: rgb(255 255 255 / 80%) !important; border-color: transparent !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-theme="light"] .hero .eyebrow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle), #e3e3e3 0deg, #e3e3e3 250deg, #111 300deg, rgb(var(--fx-blue)) 330deg, #e3e3e3 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxSpin 5s linear infinite;
}
@keyframes fxSpin { to { --fx-angle: 360deg; } }
html[data-theme="light"] .hero .eyebrow .dot {
  position: relative; background: rgb(var(--fx-green)) !important; box-shadow: none !important; animation: none !important;
}
html[data-theme="light"] .hero .eyebrow .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgb(var(--fx-green));
  animation: fxPing 2s var(--fx-ease) infinite;
}
@keyframes fxPing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* Headline */
html[data-theme="light"] .hero h1 { color: #0b0b0b; }
html[data-theme="light"] .hero h1 .grad {
  background: linear-gradient(100deg, #4b4b4b 0%, #4b4b4b 38%, #a4a4a4 50%, #4b4b4b 62%, #4b4b4b 100%) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: fxShimmer 7s ease-in-out 2.2s infinite;
  background-position: 100% 0;
}
@keyframes fxShimmer { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }

/* Intro choreography (classes added by JS only) */
html.fx-intro .fx-w {
  display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.4em) rotate(2deg);
  animation: fxWord 1s var(--fx-ease) forwards; animation-delay: calc(var(--i) * 60ms + 150ms);
}
@keyframes fxWord { to { opacity: 1; filter: blur(0); transform: none; } }
html.fx-intro[data-theme] body#top .hero h1 .grad {
  opacity: 0; filter: blur(12px); transform: translateY(14px);
  animation: fxRise 1.1s var(--fx-ease) var(--fx-grad-delay, .55s) forwards, fxShimmer 7s ease-in-out 2.6s infinite;
}
html.fx-intro[data-theme] body#top .hero .eyebrow,
html.fx-intro[data-theme] body#top .hero .lede,
html.fx-intro[data-theme] body#top .hero .hero-ctas,
html.fx-intro[data-theme] body#top .hero .hero-credit-note,
html.fx-intro[data-theme] body#top .hero .works-with {
  opacity: 0; transform: translateY(16px); filter: blur(6px);
  animation: fxRise 1s var(--fx-ease) forwards;
}
html.fx-intro[data-theme] body#top .hero .eyebrow { animation-delay: 0s; }
html.fx-intro[data-theme] body#top .hero .lede { animation-delay: .85s; }
html.fx-intro[data-theme] body#top .hero .hero-ctas { animation-delay: 1s; }
html.fx-intro[data-theme] body#top .hero .hero-credit-note {
  animation: fxRise 1s var(--fx-ease) 1.12s forwards, hero-credit-blink 2.6s ease-in-out 2.4s infinite;
}
html.fx-intro[data-theme] body#top .hero .works-with { animation-delay: 1.22s; }
@keyframes fxRise { to { opacity: 1; transform: none; filter: blur(0); } }

/* Credit note: live availability dot */
html[data-theme="light"] .hero-credit-note strong:first-child { position: relative; padding-left: 15px; }
html[data-theme="light"] .hero-credit-note strong:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: rgb(var(--fx-green)); box-shadow: 0 0 0 0 rgb(var(--fx-green) / 50%);
  animation: fxBeat 2s ease-out infinite;
}
@keyframes fxBeat { 0% { box-shadow: 0 0 0 0 rgb(var(--fx-green) / 55%); } 80%, 100% { box-shadow: 0 0 0 9px rgb(var(--fx-green) / 0%); } }

/* Works-with chips */
html[data-theme="light"] .works-with .chip {
  border-radius: 999px; transition: background .25s ease, color .25s ease, transform .35s var(--fx-ease-spring);
}
html[data-theme="light"] .works-with .chip:hover { background: #111 !important; color: #fff !important; transform: translateY(-2px); }

/* ---------- Trust band ---------- */
html[data-theme="light"] .trust-logo { transition: transform .35s var(--fx-ease-spring); display: inline-block; }
html[data-theme="light"] .trust-logo:hover { transform: translateY(-3px) scale(1.04); }
html[data-theme="light"] .startup-grid-proof img { transition: transform .5s var(--fx-ease); }
html[data-theme="light"] .startup-grid-proof:hover img { transform: scale(1.03); }

/* ---------- Section typography ---------- */
html[data-theme="light"] .sec-title,
html[data-theme="light"] section h2 {
  background: linear-gradient(180deg, #0b0b0b 30%, #4a4a4a 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .kicker { display: flex; width: fit-content; align-items: center; gap: 10px; }
html[data-theme="light"] .kicker::before {
  content: ""; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; flex: none;
  transform-origin: 0 50%; transition: transform .8s var(--fx-ease) .2s;
}
html[data-theme="light"] .fx-in.kicker::before { transform: scaleX(0); }
html[data-theme="light"] .fx-in.fx-on.kicker::before { transform: scaleX(1); }

html[data-theme="light"] .divider {
  background: linear-gradient(90deg, transparent, #dcdcd8 20%, #dcdcd8 80%, transparent) !important;
}

/* ---------- Scroll reveal (classes added by JS only) ---------- */
.fx-in {
  opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px);
  transition: opacity .9s var(--fx-ease), transform 1s var(--fx-ease), filter .9s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
}
.fx-in.fx-on { opacity: 1; transform: none; filter: none; }
.fx-in-scale { transform: translate3d(0, 34px, 0) scale(.965); }

/* ---------- Spotlight cards ---------- */
.fx-card { transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease), border-color .3s ease, background-color .3s ease; }
.fx-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .4s ease;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--fx-blue) / 7%), transparent 45%),
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(0 0 0 / 3.5%), transparent 60%);
}
.fx-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(0 0 0 / 55%), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-card:hover > .fx-spot { opacity: 1; }
.fx-card > *:not(.fx-spot) { position: relative; z-index: 1; }
.fx-lift:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 22px 48px -18px rgb(0 0 0 / 22%) !important; }

/* Impact strip accent rule */
html[data-theme="light"] .impact-stat { position: relative; }
html[data-theme="light"] .impact-stat::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, #111, rgb(var(--fx-blue)));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--fx-ease); z-index: 2;
}
html[data-theme="light"] .impact-stat:hover::after { transform: scaleX(1); }

/* ---------- Media: depth + tilt ---------- */
.fx-tilt {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .6s var(--fx-ease), box-shadow .6s var(--fx-ease);
  transform-style: preserve-3d; will-change: transform;
}
.fx-tilt.fx-tilting { transition: transform .12s linear, box-shadow .6s var(--fx-ease); }
.fx-tilt:hover { box-shadow: 0 2px 6px rgb(0 0 0 / 5%), 0 40px 80px -30px rgb(0 0 0 / 30%) !important; }
html[data-theme="light"] .developer-feature-media img { transition: transform .8s var(--fx-ease); }
html[data-theme="light"] .developer-feature:hover .developer-feature-media img { transform: scale(1.015); }

/* Agent board: subtle breathing status */
html[data-theme="light"] .developer-agent-node { transition: transform .35s var(--fx-ease-spring), box-shadow .35s ease, border-color .3s ease; }
html[data-theme="light"] .developer-agent-node:hover { transform: translateY(-3px); border-color: var(--node-accent) !important; box-shadow: 0 14px 30px -14px rgb(0 0 0 / 25%) !important; }

/* Context flow: active verify stage glows */
html[data-theme="light"] .context-stage-verify { animation: fxGlow 3.2s ease-in-out infinite; }
@keyframes fxGlow {
  0%, 100% { box-shadow: 0 10px 30px -12px rgb(0 0 0 / 40%); }
  50% { box-shadow: 0 10px 34px -8px rgb(0 0 0 / 45%), 0 0 0 6px rgb(0 0 0 / 5%); }
}
html[data-theme="light"] .context-stage { transition: transform .4s var(--fx-ease-spring); }
html[data-theme="light"] .context-stage:hover { transform: translateY(-4px); }

/* ---------- Metrics ---------- */
html[data-theme="light"] .metric-number { font-variant-numeric: tabular-nums; }

/* ---------- Comparison table ---------- */
html[data-theme="light"] .compare-row { transition: background-color .25s ease; }
html[data-theme="light"] .compare-row:not(.compare-head):hover { background: #fafaf9; }
html[data-theme="light"] .compare-row:not(.compare-head):hover .factory { background: #f1f1ee; }
html[data-theme="light"] .compare-row .factory { transition: background-color .25s ease; }
html[data-theme="light"] .compare-row .factory .nm { transition: transform .35s var(--fx-ease); display: inline-block; }
html[data-theme="light"] .compare-row:hover .factory .nm { transform: translateX(4px); }

/* ---------- Integrations ---------- */
html[data-theme="light"] .int .icon { transition: transform .5s var(--fx-ease-spring), box-shadow .4s ease, background .3s ease; }
html[data-theme="light"] .int:hover .icon { transform: scale(1.12) rotate(-6deg); box-shadow: 0 10px 22px -8px rgb(0 0 0 / 30%); background: #fff; }

/* ---------- Final CTA ---------- */
html[data-theme="light"] #join { position: relative; isolation: isolate; overflow: hidden; }
html[data-theme="light"] #join::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#ececea 1px, transparent 1px), linear-gradient(90deg, #ececea 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000, transparent 75%);
}
html[data-theme="light"] #join::after {
  content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: 2%; top: 50%; margin-top: -280px;
  border-radius: 50%; filter: blur(60px); pointer-events: none;
  background: radial-gradient(circle, rgb(var(--fx-blue) / 12%), rgb(var(--fx-green) / 6%) 45%, transparent 70%);
  animation: fxDrift 24s ease-in-out infinite alternate;
}
html[data-theme="light"] .cta-wrap .form {
  position: relative; padding: 22px; border-radius: 14px; background: rgb(255 255 255 / 72%);
  border: 1px solid #e6e6e3; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 30px 60px -30px rgb(0 0 0 / 25%);
}
html[data-theme="light"] .cta-wrap .form input { transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--fx-ease); }
html[data-theme="light"] .cta-wrap .form input:focus {
  outline: none; border-color: #111 !important; box-shadow: 0 0 0 4px rgb(var(--fx-blue) / 12%) !important;
}

/* ---------- Footer wordmark ---------- */
html[data-theme="light"] footer { position: relative; overflow: hidden; }
.fx-wordmark {
  display: block; text-align: center; font-weight: 800; line-height: .8; user-select: none; pointer-events: none;
  font-size: clamp(80px, 19vw, 280px); margin: 36px 0 -0.14em; letter-spacing: -.04em !important;
  background: linear-gradient(180deg, #e9e9e6 0%, rgb(250 250 248 / 0%) 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-in, .fx-w, .hero .grad, .hero .eyebrow, .hero .lede, .hero .hero-ctas, .hero .works-with, .fx-tilt { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .fx-aurora i, .hero .grid-bg, .hero .eyebrow::before, .hero h1 .grad, .context-stage-verify, #join::after { animation: none !important; }
  .fx-net, .fx-cursor-glow { display: none; }
}
@media (max-width: 760px), (hover: none) {
  .fx-cursor-glow { display: none; }
  .fx-wordmark { margin-top: 24px; }
}
@media (max-width: 760px) {
  html[data-theme="light"] .cta-wrap .form { padding: 16px; }
  html[data-theme="light"] .cta-wrap .form input,
  html[data-theme="light"] .cta-wrap .form .btn { width: 100%; max-width: none; }
}

/* ==========================================================================
   Subpages (html.fx-sub is set by awesome.js on every page except the home)
   ========================================================================== */
html.fx-sub body .topbar,
html.fx-sub body .answer-topbar {
  background: rgb(255 255 255 / 72%) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(16px) !important; backdrop-filter: saturate(1.8) blur(16px) !important;
  transition: box-shadow .4s ease, background .4s ease;
}
html.fx-sub body .topbar.fx-scrolled,
html.fx-sub body .answer-topbar.fx-scrolled {
  background: rgb(255 255 255 / 84%) !important;
  box-shadow: 0 1px 0 rgb(0 0 0 / 4%), 0 10px 30px -12px rgb(0 0 0 / 12%) !important;
}
html.fx-sub .primary-nav a:not(:last-child),
html.fx-sub .answer-nav a,
html.fx-sub nav.nav a:not(.button) { position: relative; }
html.fx-sub .primary-nav a:not(:last-child)::after,
html.fx-sub .answer-nav a::after,
html.fx-sub nav.nav a:not(.button)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transition: transform .35s var(--fx-ease);
}
html.fx-sub .primary-nav a:not(:last-child):hover::after,
html.fx-sub .answer-nav a:hover::after,
html.fx-sub nav.nav a:not(.button):hover::after { transform: scaleX(1); }
html.fx-sub .mark svg { transition: transform .6s var(--fx-ease-spring); }
html.fx-sub .brand:hover .mark svg { transform: rotate(-8deg) scale(1.08); }

/* Buttons */
html.fx-sub body .button,
html.fx-sub body .primary-nav a:last-child { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease) !important; }
html.fx-sub body .button:not(.secondary),
html.fx-sub body .primary-nav a:last-child:not([aria-current]) {
  background: linear-gradient(180deg, #2a2a2a 0%, #0b0b0b 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 1px 2px rgb(0 0 0 / 20%), 0 8px 20px -6px rgb(0 0 0 / 35%) !important;
}
html.fx-sub body .button:not(.secondary)::after,
html.fx-sub body .primary-nav a:last-child:not([aria-current])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 28%) 45%, transparent 60%);
  transition: transform .8s var(--fx-ease);
}
html.fx-sub body .button:not(.secondary):hover::after,
html.fx-sub body .primary-nav a:last-child:not([aria-current]):hover::after { transform: translateX(120%); }
html.fx-sub body .button:active { transform: scale(.97) !important; }

/* Hero */
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) {
  position: relative; isolation: isolate; overflow: hidden;
}
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) > :not(.fx-aurora):not(.fx-net):not(.fx-cursor-glow) {
  position: relative; z-index: 2;
}
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgb(0 0 0 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 4%) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 75%);
  animation: fxGridPan2 40s linear infinite;
}
@keyframes fxGridPan2 { to { background-position: 64px 64px, 64px 64px; } }
html.fx-sub .fx-aurora i { opacity: .45; }
html.fx-sub .fx-net { opacity: 0; }
html.fx-sub.fx-ready .fx-net { opacity: .75; }
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) h1 {
  background: linear-gradient(180deg, #0b0b0b 35%, #4a4a4a 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.fx-sub.fx-intro :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) h1 .fx-w {
  background: inherit; -webkit-background-clip: text; background-clip: text;
}
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .faq-hero, .architecture-hero) .eyebrow { position: relative; }
html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .faq-hero, .architecture-hero) .eyebrow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle), transparent 0deg, transparent 250deg, #111 300deg, rgb(var(--fx-blue)) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxSpin 5s linear infinite;
}
html.fx-sub.fx-intro :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) > :not(.fx-aurora):not(.fx-net):not(.fx-cursor-glow) > :not(h1),
html.fx-sub.fx-intro :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) > :is(p, .eyebrow, .meta, a, div):not(.fx-aurora):not(.fx-cursor-glow) {
  opacity: 0; transform: translateY(14px); filter: blur(5px);
  animation: fxRise .9s var(--fx-ease) .55s forwards;
}

/* Section headings */
html.fx-sub :is(.section-h2, .article-body > h2) {
  background: linear-gradient(180deg, #0b0b0b 30%, #4a4a4a 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.fx-sub .section-tag { display: inline-flex; align-items: center; gap: 8px; }

/* FAQ items */
html.fx-sub .faq-item { transition: border-color .3s ease, box-shadow .4s var(--fx-ease), transform .4s var(--fx-ease); }
html.fx-sub .faq-item:hover { border-color: #cfcfca !important; }
html.fx-sub .faq-item[open] { box-shadow: 0 18px 40px -22px rgb(0 0 0 / 22%) !important; }
html.fx-sub .faq-item summary { cursor: pointer; }

/* Comparison rows / architecture rows */
html.fx-sub :is(.comparison-row, .architecture-row) { transition: background-color .25s ease; }
html.fx-sub :is(.comparison-row, .architecture-row):hover { background-color: #fafaf9; }

/* Article figures + tables */
html.fx-sub .article-body figure img { transition: transform .8s var(--fx-ease); }
html.fx-sub .article-body a:not(.button) { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--fx-ease); }
html.fx-sub .article-body a:not(.button):hover { background-size: 100% 1.5px; }

/* Footer wordmark on light subpage footers */
html.fx-sub .site-footer { position: relative; overflow: hidden; }
html.fx-sub .site-footer .fx-wordmark { font-size: clamp(64px, 15vw, 220px); margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero)::before,
  html.fx-sub .eyebrow::after { animation: none !important; }
  html.fx-sub :is(.hero, .article-hero, .blog-index-hero, .answer-hero, .faq-hero, .architecture-hero) * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

/* Subpage footer: keep the wordmark on its own row whatever the footer layout */
html.fx-sub .site-footer { flex-wrap: wrap !important; }
html.fx-sub .site-footer > .fx-wordmark { flex: 0 0 100% !important; width: 100% !important; grid-column: 1 / -1 !important; order: 99; }

/* ==========================================================================
   Homepage "pro" layer (awesome-pro.js)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Context globe */
.fx-globe {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transform: translateY(40px); transition: opacity 1.8s ease .6s, transform 2.2s var(--fx-ease) .6s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.fx-ready .fx-globe { opacity: 1; transform: none; }
html:not(.fx-sub) .hero .fx-net { display: none; }
html[data-theme="light"] body#top .hero { min-height: min(100vh, 980px); padding-bottom: 180px !important; }
html[data-theme="light"] body#top .hero > .container { will-change: transform, opacity; }

/* "verified" stroke */
.fx-verified { position: relative; display: inline-block; -webkit-text-fill-color: #161616 !important; color: #161616; background: none; }
.fx-verified svg {
  position: absolute; left: -2%; right: -2%; bottom: -.08em; width: 104%; height: .32em; overflow: visible; pointer-events: none;
}
.fx-verified path {
  fill: none; stroke: rgb(var(--fx-green)); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: fxDraw 1.2s var(--fx-ease) 2.1s forwards;
}
@keyframes fxDraw { to { stroke-dashoffset: 0; } }

/* Kinetic headings */
.fx-kinetic { -webkit-text-fill-color: #0b0b0b !important; background: none !important; }
.fx-lw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.fx-lw > span {
  display: inline-block; transform: translate3d(0, 105%, 0) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1s var(--fx-ease); transition-delay: calc(var(--i) * 45ms);
}
.fx-kin-on .fx-lw > span { transform: none; }

/* Live delivery run */
.context-stages { position: relative; }
html[data-theme="light"] .context-stage { transition: transform .5s var(--fx-ease-spring), box-shadow .5s ease, border-color .4s ease, background-color .4s ease; }
html[data-theme="light"] .context-stage.fx-live:not(.context-stage-verify) {
  transform: translateY(-8px); border-color: #111 !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgb(var(--fx-blue) / 10%), 0 18px 34px -14px rgb(0 0 0 / 30%) !important;
}
html[data-theme="light"] .context-stage-verify.fx-live { transform: translateY(-8px); box-shadow: 0 0 0 4px rgb(var(--fx-green) / 25%), 0 18px 34px -12px rgb(0 0 0 / 45%) !important; }
html[data-theme="light"] .context-stage.fx-live::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--fx-blue)), rgb(var(--fx-green)));
  transform-origin: 0 50%; animation: fxFill 1.6s linear forwards;
}
html[data-theme="light"] .context-stage { position: relative; }
@keyframes fxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fx-run-beam {
  position: absolute; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: rgb(var(--fx-green)); box-shadow: 0 0 0 4px rgb(var(--fx-green) / 22%), 0 0 18px rgb(var(--fx-green) / 70%);
  transition: transform .7s var(--fx-ease), top .7s var(--fx-ease);
}

/* Agent board states */
html[data-theme="light"] .developer-agent-node.fx-flip em { animation: fxFlip .45s var(--fx-ease); }
@keyframes fxFlip { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
html[data-theme="light"] .developer-agent-node[data-state="working"] { border-color: var(--node-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-accent) 14%, transparent), 0 8px 20px -10px rgb(0 0 0 / 25%) !important; }
html[data-theme="light"] .developer-agent-node[data-state="working"] em::before { animation: fxBlink .7s ease-in-out infinite alternate; }
html[data-theme="light"] .developer-agent-node[data-state="ready"] em { color: #1f7a57 !important; }
@keyframes fxBlink { to { opacity: .2; transform: scale(1.6); } }

/* Cursor ring */
.fx-ring, .fx-dot { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.fx-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid rgb(17 17 17 / 55%);
}
.fx-ring::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; transition: transform .35s var(--fx-ease), background .3s ease, border-color .3s ease; }
.fx-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #111; }
.fx-cursor-on .fx-ring, .fx-cursor-on .fx-dot { opacity: 1; }
.fx-ring { transition: opacity .3s ease, width .35s var(--fx-ease), height .35s var(--fx-ease), margin .35s var(--fx-ease), background-color .3s ease, border-color .3s ease; }
.fx-cursor-hover .fx-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-color: rgb(var(--fx-blue) / 7%); border-color: rgb(var(--fx-blue) / 55%); }
.fx-cursor-hover .fx-dot { opacity: 0; }
.fx-cursor-text .fx-ring { width: 4px; height: 26px; margin: -13px 0 0 -2px; border-radius: 2px; }
.fx-cursor-down .fx-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* Film grain for depth */
html:not(.fx-sub) body::after {
  content: ""; position: fixed; inset: 0; z-index: 1500; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  .fx-globe, .fx-ring, .fx-dot, .fx-run-beam { display: none !important; }
  .fx-lw > span { transform: none !important; }
  .fx-verified path { stroke-dashoffset: 0; animation: none; }
}
@media (max-width: 760px) {
  html[data-theme="light"] body#top .hero { min-height: 0; padding-bottom: 150px !important; }
}

/* ==========================================================================
   WOW moment: the ask bar quietly runs a change (one object, no clutter)
   ========================================================================== */
.fx-run {
  position: absolute; left: 50%; bottom: 56px; z-index: 5; width: min(640px, calc(100% - 32px));
  transform: translateX(-50%); display: grid; gap: 10px; justify-items: center;
  opacity: 0; translate: 0 16px; transition: opacity 1s ease 1.6s, translate 1.2s var(--fx-ease) 1.6s;
}
.fx-ready .fx-run { opacity: 1; translate: 0 0; }
.fx-run-bar {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; overflow: hidden;
  padding: 8px 8px 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 86%);
  border: 1px solid #e3e3e0; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 24px 50px -26px rgb(0 0 0 / 32%);
  font-size: 14px; color: #1a1a1a; text-align: left; transition: box-shadow .8s var(--fx-ease), border-color .6s ease;
}
.fx-run.is-done .fx-run-bar { border-color: rgb(var(--fx-green) / 55%); box-shadow: 0 0 0 6px rgb(var(--fx-green) / 10%), 0 24px 50px -26px rgb(0 0 0 / 32%); }
.fx-run-orb {
  position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #111; transition: background .5s ease, transform .5s var(--fx-ease-spring);
}
.fx-run-orb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 85%); border-top-color: transparent; opacity: 0; }
.fx-run.is-running .fx-run-orb::after { opacity: 1; animation: fxSpinRot .8s linear infinite; }
@keyframes fxSpinRot { to { transform: rotate(360deg); } }
.fx-run-orb svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.fx-run.is-done .fx-run-orb { background: rgb(var(--fx-green)); transform: scale(1.08); }
.fx-run.is-done .fx-run-orb svg { animation: fxDraw .5s var(--fx-ease) .1s forwards; }
.fx-run-label {
  flex: none; min-width: 108px; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; color: #8a8a85; letter-spacing: .06em !important; transition: color .4s ease;
}
.fx-run.is-done .fx-run-label { color: #1f7a57; }
.fx-run-stage { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
.fx-run-text {
  position: absolute; inset: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 22px; font-weight: 500;
  transition: transform .5s var(--fx-ease), opacity .4s ease, filter .4s ease;
}
.fx-run-text.is-enter { transform: translateY(100%); opacity: 0; filter: blur(4px); }
.fx-run-text.is-leave { transform: translateY(-100%); opacity: 0; filter: blur(4px); }
.fx-run-text.is-final { color: #111; font-weight: 600; }
.fx-run-go {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 16px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #2a2a2a, #0b0b0b); color: #fff; font: 600 13px/1 var(--sans, inherit); cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 6px 16px -6px rgb(0 0 0 / 45%);
  transition: transform .3s var(--fx-ease-spring), opacity .3s ease;
}
.fx-run-go:hover { transform: translateY(-1px) scale(1.03); }
.fx-run-go:active { transform: scale(.96); }
.fx-run-go kbd { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: rgb(255 255 255 / 14%); font: 600 12px/1 var(--mono, monospace); }
.fx-run.is-running .fx-run-go { opacity: .4; pointer-events: none; }
.fx-run-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--fx-prog, 0)); transition: transform 1.1s var(--fx-ease);
  background: linear-gradient(90deg, rgb(var(--fx-blue)), rgb(var(--fx-green)));
}
.fx-run-note {
  margin: 0; font: 600 9.5px/1 var(--mono, monospace); text-transform: uppercase; letter-spacing: .08em !important; color: #a3a39e;
  opacity: 0; transition: opacity .5s ease;
}
.fx-run.is-running .fx-run-note, .fx-run.is-done .fx-run-note { opacity: 1; }

html[data-theme="light"] body#top .hero { padding-bottom: 220px !important; }
@media (max-width: 760px) {
  html[data-theme="light"] body#top .hero { padding-bottom: 170px !important; }
  .fx-run { bottom: 26px; }
  .fx-run-label { display: none; }
  .fx-run-bar { font-size: 13px; gap: 10px; }
  .fx-run-go kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-run { display: none; } }