/* Shared optical finish: clear depth, concentrated light and deliberate scale. */
:root { --optical-ice: #a9daff; --optical-violet: #b89bff; --optical-warm: #ffc6ae; }
body { background: radial-gradient(ellipse at 81% 4%, #111e3652, transparent 27%), #040912; }
.scene-aura { background: radial-gradient(ellipse at 58% 35%, #1b4a9b24, transparent 44%), radial-gradient(ellipse at 65% 72%, #6040a81f, transparent 38%); }
.light-ribbon,.ribbon-glint { display: none; }
.atmosphere { inset: -4%; width: 108%; height: 108%; opacity: 1; transform: translate3d(var(--ambient-x, 0px), calc(var(--ambient-y, 0px) + var(--ribbon-y, 0px) * .16), 0); transition: opacity .8s; }
.atmosphere .silk-volume { fill: url(#silk-volume); stroke: none; opacity: .66; }
.atmosphere .silk-fold { fill: url(#silk-fold); stroke: none; opacity: .55; }
.atmosphere .silk-bloom { fill: none; stroke: url(#silk-spectrum); stroke-width: 18; opacity: .055; }
.atmosphere .silk-halo { fill: none; stroke: url(#silk-spectrum); stroke-width: 5; opacity: .16; }
.atmosphere .silk-contour { fill: none; stroke: url(#silk-spectrum); stroke-width: 1.3; opacity: 1; }
.atmosphere .silk-echo { fill: none; stroke: url(#silk-spectrum); stroke-width: .6; opacity: .28; }
.atmosphere-flow { animation-duration: 34s; }.atmosphere-flow--far { animation-duration: 43s; animation-delay: -19s; }
body[data-scene=workflow] .atmosphere,body[data-scene=interface] .atmosphere { opacity: .52; }
body[data-scene=capabilities] .atmosphere,body[data-scene=results] .atmosphere { opacity: .7; }
body[data-scene=cta] .atmosphere { opacity: 1; }.connection-art .atmosphere { opacity: .9; }

/* A light rim and interior caustic replace a uniform grey border. */
.glass:not(.footer-panel):not(.connection-field):not(.connection-submit):not(dialog) {
  border-color: #c4ddff48;
  background: radial-gradient(ellipse at 0 0, #b2dbff14, transparent 44%), radial-gradient(ellipse at 100% 100%, #a18bff18, transparent 49%), linear-gradient(115deg, #111e2f59, #080f1b79 46%, #171c343d);
  box-shadow: inset 0 1px 1px #e7f5ff78, inset 0 -1px 1px #b4b8ff59, inset 1px 0 1px #b6dfff20, 0 20px 58px -24px #000c;
}
.glass > .glass-edge { padding: 1px; opacity: 1; }
.glass > .glass-depth { border: 0; background: radial-gradient(145px 19px at 25% 0, #afd6ff26, transparent 85%), radial-gradient(150px 26px at 86% 100%, #b09cff1e, transparent 86%); }
.glass > .glass-optics { padding: 2px; opacity: .4; }.glass > .glass-shimmer { opacity: .65; }
.hero-orbit-card strong { font-size: 15px; }.hero-orbit-card div > span { font-size: 11px; }
.hero-orbit-card .icon-box { border-color: #d1dfff50; box-shadow: inset 0 1px 2px #ecf7ff59, inset 0 -1px 1px #b2a1ff3b; background: linear-gradient(135deg, #b8dfff15, #9084e010); }
.desktop-nav a { font-size: 13px; }.header-actions .button { font-size: 12px; }

/* Controls react under the pointer; specular light never sweeps across all text. */
.button:not(.glass),.footer-github,.feature-tab { --mx: 50%; --my: 35%; --spec-opacity: 0; position: relative; isolation: isolate; overflow: hidden; }
.button:not(.glass)::before,.footer-github::before,.feature-tab::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: 0; right: auto; bottom: auto; width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(ellipse, #f7fcff70, #b7d8ff29 20%, #b99fff0c 42%, transparent 67%);
  transform: translate3d(calc(var(--mx) - 130px), calc(var(--my) - 130px), 0); opacity: calc(var(--spec-opacity) * .75); transition: opacity .25s;
}
.button:not(.glass):hover::before { transform: translate3d(calc(var(--mx) - 130px), calc(var(--my) - 130px), 0); }
.button:not(.glass)::after,.footer-github::after {
  content: ''; pointer-events: none; position: absolute; z-index: 3; inset: 0; padding: 1px; border-radius: inherit;
  background: radial-gradient(125px 10px at 52% 0, #fff, #d3eaff 20%, #b5a7ff63 53%, transparent 90%), radial-gradient(145px 10px at 88% 100%, #d7c8ffa1, transparent 90%), radial-gradient(90px 90px at var(--mx) var(--my), #fff, #d9e9ffa3 25%, transparent 80%), linear-gradient(115deg, #d2ecffb3, #a9baff59 35%, #a89bfd75 80%, #e1d9ffc2);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
.button:not(.button--outline):not(.button--glass):not(.connection-submit) {
  border-color: #e5f4ffbd;
  background: radial-gradient(ellipse at 13% 0, #f1ffffc2, transparent 64%), radial-gradient(ellipse at 100% 100%, #dcc9ff9c, transparent 64%), linear-gradient(110deg, #a0d3ff, #9eaeff 56%, #ac89f0);
  box-shadow: inset 0 2px 3px #fff9, inset 0 -2px 4px #dbd4ffa3, 0 2px 21px -9px #9db9ffb3;
}
.button:not(.button--outline):not(.button--glass):not(.connection-submit):hover { box-shadow: inset 0 2px 4px #fff9, inset 0 -2px 4px #e0d7ffb3, 0 3px 28px -8px #9db9ffc2; }
.button.button--glass {
  color: #f6f8ff; border-color: #c8e3ffa1;
  background: radial-gradient(ellipse at 0 0, #b7ddff44, transparent 65%), radial-gradient(ellipse at 100% 100%, #9569ff9c, transparent 70%), linear-gradient(110deg, #5984b940, #15213c9c 44%, #7559d240);
  box-shadow: inset 0 2px 3px #ebf8ffd1, inset 1px 0 4px #a9ddff6b, inset -1px -2px 5px #c6afffe6, 0 0 22px -10px #a2bfff99;
  backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); text-shadow: 0 1px 8px #060d229c;
}
.button.button--glass:hover { border-color: #e5f3ffed; box-shadow: inset 0 2px 4px #f1fbff, inset 1px 0 4px #b3e4ff9c, inset -1px -2px 6px #ddcaff, 0 0 27px -8px #a9c5ffbf; }
.button.button--outline { border-color: #b9cfff61; background: radial-gradient(ellipse at 0 0, #c4e5ff12, transparent 70%), linear-gradient(120deg, #15213d47, #10162670); box-shadow: inset 0 1px 1px #e1f0ff3d, inset 0 -1px 1px #b2a7ff29; }
.button:focus-visible,.footer-github:focus-visible,.feature-tab:focus-visible { outline: 2px solid #d1ebff; outline-offset: 5px; }
.feature-tab > span { position: relative; z-index: 1; }
.feature-tab[aria-selected=true] { background: radial-gradient(ellipse at 0 0, #a9d4ff25, transparent 73%), linear-gradient(130deg, #112039ad, #37365f7a); border-color: #c5dcff98; box-shadow: inset 0 1px 1px #e7f6ff8c, inset 0 -1px 1px #ab95ff50; }
.hero-actions .button { font-size: 14px; min-height: 58px; }
.fallback-band { background: conic-gradient(from -25deg, #4289ff13, #b3e7ffbf 7%, #86a8ff1f 20%, #8551ec45 32%, #75b6ff23 47%, #ffd6bad1 52%, #b697ff6b 58%, #173e8b19 69%, #92d9ffb0 79%, #b3a4ff4d 92%, #4289ff13); box-shadow: inset 1px 2px 3px #e3f5ffe0, inset 0 0 21px #738cff38, 0 0 40px #639dff17; }

/* One invitation composition around the ring, as in the reference. */
.cta-section { min-height: 820px; min-height: max(820px, 94svh); padding: 215px 0 140px; }
.cta-copy h2 { font-size: clamp(58px, 6.1vw, 94px); line-height: 1.08; text-wrap: balance; letter-spacing: -.045em; text-shadow: 0 2px 30px #03071080; }
.cta-copy p { font-size: clamp(18px, 1.6vw, 27px); line-height: 1.55; margin: 27px auto 49px; max-width: 1100px; color: #bec6d8; text-wrap: balance; }
.cta-section .button--glass { min-height: 83px; min-width: 390px; padding: 20px 42px; font-size: 25px; gap: 32px; font-weight: 550; }
.cta-section .button--glass .icon { width: 27px; height: 27px; stroke-width: 1.5; }
@media (max-width: 1100px) { .cta-copy h2 { font-size: 66px; }.cta-copy p { font-size: 21px; max-width: 780px; }.cta-section .button--glass { min-height: 74px; min-width: 340px; font-size: 22px; } }
@media (max-width: 700px) {
  .atmosphere { inset: -7% -42%; width: 184%; height: 114%; }
  .hero-orbit-card strong { font-size: 12px; }.hero-orbit-card div > span { font-size: 9px; }
  .desktop-nav a { font-size: 12px; }.header-actions .button { font-size: 10px; }.hero-actions .button { font-size: 12px; min-height: 54px; }
  .cta-section { min-height: 750px; padding: 185px 0 125px; }
  .cta-copy h2 { font-size: clamp(42px, 11vw, 64px); line-height: 1.13; }
  .cta-copy p { margin: 25px auto 36px; max-width: 380px; font-size: 16px; line-height: 1.75; }
  .cta-section .button--glass { min-width: 0; width: min(100%, 340px); min-height: 67px; padding: 17px 24px; font-size: 20px; gap: 24px; }
  .cta-section .button--glass .icon { width: 24px; height: 24px; }.glass > .glass-optics { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .atmosphere { transform: none; }.button:not(.glass)::before,.feature-tab::before,.footer-github::before { opacity: 0; }.button:hover,.button:active { transform: none; } }
@supports not (backdrop-filter: blur(1px)) { .glass:not(.footer-panel):not(.connection-field):not(.connection-submit):not(dialog),.button.button--glass { background-color: #101a2ce8; } }