/* EVA optical system. Clear core, thick bevel, separate reflected light.
   This layer replaces material only; layout and product content stay intact. */
:root {
  --bg: #050a13;
  --bg-soft: #0a1323;
  --glass-core: rgba(7, 16, 31, .36);
  --glass-cold: #99d9ff;
  --glass-violet: #b7a0ff;
  --glass-peach: #ffd0b4;
}
body {
  background:
    radial-gradient(ellipse at 80% 4%, #14244250, transparent 29%),
    radial-gradient(ellipse at 12% 32%, #0c1c342b, transparent 37%),
    #050a13;
}
.glass-filter-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* A quiet light field keeps the clear panels legible without washing the page. */
.scene-aura {
  inset: -16% -15% -14% 20%; height: auto;
  background: radial-gradient(ellipse at 58% 36%, #2859a024, transparent 44%), radial-gradient(ellipse at 64% 72%, #6847a71c, transparent 38%);
  transform: translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0);
}
.ambient-fold { display: none; }
.atmosphere { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; transform: translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0); }
.atmosphere path { fill: none; vector-effect: non-scaling-stroke; }
.atmosphere .ribbon-volume { fill: url(#eva-atmosphere-volume); stroke: none; opacity: .78; }
.atmosphere .trail-soft { stroke: url(#eva-atmosphere-line); stroke-width: 9; opacity: .07; }
.atmosphere .trail-edge { stroke: url(#eva-atmosphere-line); stroke-width: 1; opacity: .58; }
.atmosphere .trail-echo { stroke: url(#eva-atmosphere-line); stroke-width: .55; opacity: .22; }
.atmosphere .trail-light { stroke: url(#eva-atmosphere-white); stroke-width: 1.65; opacity: .72; }
.atmosphere-flow { transform-origin: 70% 50%; animation: eva-atmosphere-drift 32s ease-in-out infinite alternate; }
.atmosphere-flow--far { transform-origin: 20% 80%; animation-duration: 41s; animation-delay: -17s; }
.atmosphere-flow--far .trail-edge { opacity: .38; }
.light-ribbon { opacity: .7; filter: none; }
.ribbon-glint { width: 310px; height: 120px; background: radial-gradient(ellipse, #a4ceff28, transparent 65%); }
@keyframes eva-atmosphere-drift {
  from { transform: translate3d(-5px, -7px, 0) rotate(-.6deg); opacity: .63; }
  to { transform: translate3d(8px, 10px, 0) rotate(.6deg); opacity: 1; }
}

/* Transparent centre. No grey wash and no full-card glow. */
.glass {
  border: 1px solid #a8cfff35;
  background:
    radial-gradient(ellipse at 0% 0%, #bbddff18, transparent 42%),
    radial-gradient(ellipse at 100% 100%, #8771eb0c, transparent 48%),
    linear-gradient(132deg, #c3e3ff0b, #1b325508 42%, #080f1d05 64%, #b49bff09),
    var(--glass-core);
  backdrop-filter: blur(8px) saturate(1.42) brightness(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(1.42) brightness(1.06);
  box-shadow:
    inset 0 1px 1px #f2fbff8a,
    inset 1px 0 1px #c1e4ff22,
    inset -1px 0 1px #cab5ff1f,
    inset 0 -1px 1px #a4b9ff60,
    0 1px 0 #02040b,
    0 6px 0 -4px #94b8fb10,
    0 24px 65px -16px #000a,
    0 0 28px -24px #bcdfff88;
}
.glass::before {
  width: 340px; height: 340px; inset: 0 auto auto 0; z-index: 2;
  background: radial-gradient(ellipse, #f1faff63 0%, #b2dbff24 12%, #9bbaff0e 32%, transparent 66%);
  transform: translate3d(calc(var(--mx) - 170px), calc(var(--my) - 170px), 0);
  opacity: calc(var(--spec-opacity) * .75); mix-blend-mode: screen;
}
.glass::after {
  inset: -65%; z-index: -1;
  background: linear-gradient(116deg, transparent 38%, #cceaff05 45%, #edf7ff16 48%, #94bcff05 50%, transparent 56%);
  opacity: calc(.4 + var(--spec-opacity) * .28);
  transform: translate3d(var(--sheen-x), var(--sheen-y), 0) rotate(-3deg);
}
.glass-optics, .glass-depth, .glass-edge, .glass-shimmer { position: absolute; pointer-events: none; border-radius: inherit; }
.glass-optics {
  inset: 4px; z-index: -2;
  /* A neutral displacement map bends only the perimeter. Unsupported engines
     retain the base material above; text and controls never enter this filter. */
  backdrop-filter: url('#eva-glass-refraction');
  -webkit-backdrop-filter: url('#eva-glass-refraction');
}
.glass-depth {
  inset: 3px; z-index: -1;
  border: 1px solid transparent;
  border-top-color: #d2eaff17; border-bottom-color: #b8a7ff1a;
  background: radial-gradient(120px 13px at 25% 0%, #d5edff3b, transparent 90%), linear-gradient(180deg, #d6eeff04, transparent 16%, transparent 78%, #9d91ed05);
  box-shadow: inset 0 4px 10px -7px #d5ebff85, inset 0 -4px 8px -8px #a4b5ff;
}
.glass-edge {
  inset: 0; z-index: 3; padding: 1.3px;
  background:
    radial-gradient(115px 13px at 25% 0%, #fff 8%, #e5f5ffed 23%, #8ebeff80 48%, transparent 92%),
    radial-gradient(95px 11px at 86% 100%, #e8dcffed 2%, #aa9cff7a 34%, transparent 94%),
    radial-gradient(10px 70px at 100% 24%, #ffd9c3c2, #ffc5ab45 28%, transparent 95%),
    radial-gradient(9px 60px at 0% 80%, #d9f8ffc9, #88caff60 30%, transparent 95%),
    linear-gradient(118deg, #e4f4ff6b, #a4ccff18 26%, #b7a4ff16 68%, #c6c0ff57);
  -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;
}
.glass-edge::after {
  content: ''; position: absolute; left: 0; top: 0; width: 260px; height: 260px;
  background: radial-gradient(circle, #fff 0%, #d4effff2 9%, #a2cfff7d 27%, transparent 61%);
  opacity: var(--spec-opacity); transform: translate3d(calc(var(--mx) - 130px), calc(var(--my) - 130px), 0);
}
.glass-shimmer {
  inset: -1px; z-index: 3; padding: 1px; overflow: hidden;
  -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;
}
.glass-shimmer::before {
  content: ''; position: absolute; inset: -100%;
  background: conic-gradient(from 20deg, transparent 0 28%, #abdcff70 31%, #fff9 32%, transparent 35% 68%, #ffcaae64 70%, transparent 73%);
  animation: eva-edge-reflection 28s linear infinite;
  animation-play-state: paused;
}
.glass-in-view > .glass-shimmer::before { animation-play-state: running; }
.glass:nth-child(2n) .glass-shimmer::before { animation-delay: -9s; }
.glass:nth-child(3n) .glass-shimmer::before { animation-delay: -19s; }
@keyframes eva-edge-reflection { to { transform: rotate(360deg); } }
.glass:focus-within { border-color: #b4deff9e; }

/* Large slabs and small objects share the optics, with different depth. */
.hero-orbit-card { --glass-core: #09182a47; }
.hero-glass-rail { --glass-core: #0b172a40; }
.hero-size .glass-edge { transform: rotate(180deg); }
.hero-order .glass-edge { transform: scaleX(-1); }
.hero-orbit-card .icon-box, .icon-box {
  background: linear-gradient(130deg, #c6e4ff13, #7166e207);
  border-color: #b9d8ff57;
  box-shadow: inset 0 1px 1px #effaff4f, inset 0 -1px 1px #c1adff38, 0 4px 14px #0003;
}
.workbench { --glass-core: #08152865; }
.feature-demo { --glass-core: #09152852; }
.night-clock-panel { --glass-core: #0a14254f; }
.results-panel { --glass-core: #0a15264f; }
.resources-banner { --glass-core: #0b162949; }
.footer-panel { --glass-core: #0813225e; }
.connect-dialog, .video-dialog, .mobile-menu { --glass-core: #071322eb; }
.hero-orbit-card strong { color: #f0f7ff; }
.hero-orbit-card div > span { color: #a8bdd9; }
.workbench-halo { filter: none; background: radial-gradient(ellipse at 10% 40%, #376ec220, transparent 57%), radial-gradient(ellipse at 95% 75%, #9361d51a, transparent 45%); }
.workbench-top { background: linear-gradient(110deg, #d4edff05, transparent 70%); border-bottom-color: #a8caff29; }
.workbench-sidebar { background: #0b182b32; }
.scenario-message, .preview-bubble {
  background: linear-gradient(125deg, #b0d3ff13, #759ad008 48%, #7895d60b);
  border-color: #b9dbff3f;
  box-shadow: inset 0 1px 0 #e4f5ff27, inset 0 -1px 0 #9fc4ff10, 0 5px 15px #0000000c;
}
.scenario-out, .preview-bubble.out { background: linear-gradient(125deg, #9273ea27, #6478d213); border-color: #bcabff5c; }
.scenario-order { background: linear-gradient(112deg, #6fdcbb18, #6dacc707); border-color: #a5e5cf4d; }
.scenario-shipping { background: linear-gradient(112deg, #a8cfff15, #8278d80a); border-color: #b3cfff43; }
.scenario-order, .scenario-shipping { box-shadow: inset 0 1px 0 #edfff529, inset 0 -1px 0 #c3cdff11; }
.workflow-tab[aria-current=step] { background: linear-gradient(120deg, #afdcff23, #a794ef0d); box-shadow: inset 0 1px 1px #effbff65, inset 0 -1px 1px #b19fff48, 0 2px 10px #0003; }
.size-options > .chosen, .glass-size-token { background: linear-gradient(135deg, #b8e3ff20, #9d95ef0c); box-shadow: inset 0 1px 1px #f4fbff47, inset 0 -1px 1px #baa7ff28; }
.button { box-shadow: inset 0 1px 2px #fff, inset 0 -2px 3px #6254ad55, 0 5px 15px #0004, 0 0 22px -14px #b6dfffbb; }
.button--outline { background: linear-gradient(125deg, #abcfff12, #a18ed309), #0a142a38; box-shadow: inset 0 1px 1px #d4ebff3d, inset 0 -1px 0 #a296d735, 0 4px 12px #0002; }
.connect-dialog input, .connect-dialog textarea { background: #040c1985; box-shadow: inset 0 2px 5px #0005, 0 1px 0 #bcd9ff16; }
.connect-dialog input:focus, .connect-dialog textarea:focus { border-color: #b0dcff99; background: #081627c2; }
.interface-frame { --glass-core: #0915285e; }
.real-ui-viewport { border-radius: 8px; }
.ui-callout { background: #0a1933c4; border-color: #a7d3ff69; box-shadow: inset 0 1px 0 #d4efff4d, 0 8px 20px #0004; }
.docs-page { background: radial-gradient(ellipse at 85% 0%, #19335935, transparent 45%), #050a13; }
.docs-note { background: linear-gradient(120deg, #9bcfff10, #9f87e507), #0a152680; border-color: #b1d6ff36; box-shadow: inset 0 1px 0 #e3f5ff32, inset 0 -1px 0 #b4a3fa24; }

/* Hero proof strip: one thin polished lens, four aligned typographic groups.
   Its contour is deliberately lighter than the larger workspace panels. */
.hero-glass-rail.glass {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  min-height: 108px; padding: 12px 18px; border-radius: 56px;
  border: 1px solid #bddbff58;
  background: radial-gradient(ellipse at 14% -30%, #b5d5ff19, transparent 48%), radial-gradient(ellipse at 92% 110%, #8d7fe723, transparent 48%), linear-gradient(125deg, #18253b52, #09132173 49%, #1b20434d);
  backdrop-filter: blur(7px) saturate(1.35); -webkit-backdrop-filter: blur(7px) saturate(1.35);
  box-shadow: inset 0 1px 0 #eef8ff24, inset 0 -1px 0 #b6abff1f, 0 12px 30px -22px #000c;
}
.hero-glass-rail > .glass-depth { inset: 1px; border: 0; background: linear-gradient(180deg, #d5e9ff04, transparent 24% 82%, #b0a3ff04); box-shadow: none; }
.hero-glass-rail > .glass-optics { display: none; }
.hero-glass-rail > .glass-edge {
  padding: .75px;
  background: radial-gradient(96px 9px at 13% 0%, #fff, #b4d7ff95 28%, transparent 90%), radial-gradient(85px 8px at 57% 0%, #fff2dd, #ffc5a46b 26%, transparent 95%), radial-gradient(112px 9px at 66% 100%, #e8f6ff, #98c7ff7a 30%, transparent 91%), linear-gradient(115deg, #d1ecff73, #a4c2ff12 33% 63%, #ad9ff263);
}
.hero-glass-rail > .glass-shimmer { inset: 0; padding: .7px; opacity: .45; }
.hero-glass-rail::after { opacity: .22; }
.hero-bottom::before, .hero-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 13px; pointer-events: none; z-index: 5; }
.hero-bottom::before { top: -6px; background: radial-gradient(65px 7px at 13% 50%, #f0faffb3, #99c9ff47 20%, transparent 88%), radial-gradient(55px 6px at 57% 50%, #ffe9d6a1, #ffc2a142 20%, transparent 90%); }
.hero-bottom::after { top: calc(100% - 7px); background: radial-gradient(75px 7px at 66% 50%, #d4efffa1, #82b9ff3d 26%, transparent 93%); }
.rail-edge-light {
  pointer-events: none; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  background: radial-gradient(54px 8px at 13% 0%, #d7efffb3, #82b4ff35 36%, transparent 92%), radial-gradient(48px 6px at 57% 0%, #ffe5cebf, #ffb6992b 37%, transparent 92%), radial-gradient(70px 9px at 66% 100%, #c0e4ffc4, #83aeff2a 40%, transparent 95%);
}
.hero-proof { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 9px 21px; min-width: 0; min-height: 75px; border-radius: 16px; }
.hero-proof + .hero-proof::before { content: ''; position: absolute; left: 0; top: 18%; width: 1px; height: 64%; background: linear-gradient(transparent, #a4c5fb46 25% 75%, transparent); }
.hero-proof > .icon { width: 37px; height: 37px; color: #f0f5ff; stroke-width: 1.4; transition: color .3s, transform .5s var(--ease); filter: drop-shadow(0 1px 4px #b0c9ff12); }
.hero-proof-copy { display: flex; flex-direction: column; gap: 4px; }
.hero-proof-copy strong { display: flex; align-items: center; gap: 9px; font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #f4f7ff; }
.hero-proof-copy > span { font-size: 12px; line-height: 1.5; letter-spacing: -.015em; color: #c3cfe3; white-space: nowrap; }
.hero-proof-copy i { font-style: normal; color: #a1bce3; display: inline-block; transition: transform .3s; }
.proof-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #a3e9cb; box-shadow: 0 0 8px #8ee6c033; }
.hero-proof:hover > .icon { color: #c4e5ff; transform: translate3d(0, -2px, 0); }
.hero-proof:hover .hero-proof-copy > span { color: #edf5ff; }
.hero-proof:hover .hero-proof-copy i { transform: translate(2px, -2px); }
.hero-proof:active { background: #c0dcff07; }
.hero-proof:focus-visible { outline-offset: -2px; }
.hero-proof-source { position: absolute; top: calc(100% + 18px); right: 18px; font-size: 8px; letter-spacing: .015em; color: #8294b0; transition: color .2s; }
.hero-proof-source:hover { color: #c4d5ed; }
@media (max-width: 1150px) {
  .hero-glass-rail.glass { min-height: 100px; padding: 10px 12px; }
  .hero-proof { gap: 16px; padding: 9px 13px; }
  .hero-proof > .icon { width: 29px; height: 29px; }
  .hero-proof-copy strong { font-size: 26px; }
  .hero-proof-copy > span { font-size: 10px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero-glass-rail.glass { min-height: 94px; padding-inline: 10px; }
  .hero-proof { gap: 10px; padding-inline: 8px; min-height: 70px; }
  .hero-proof > .icon { width: 25px; height: 25px; }
  .hero-proof-copy strong { font-size: 23px; }
  .hero-proof-copy > span { font-size: 8px; }
  .hero-proof-source { top: calc(100% + 13px); right: 14px; font-size: 7px; }
}
@media (max-width: 700px) {
  .hero-glass-rail.glass { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 168px; padding: 9px 12px; border-radius: 28px; }
  .hero-proof { justify-content: flex-start; min-height: 74px; gap: 13px; padding: 10px 12px; }
  .hero-proof > .icon { width: 26px; height: 26px; }
  .hero-proof-copy strong { font-size: 25px; }
  .hero-proof-copy > span { font-size: 9px; }
  .hero-proof:nth-of-type(3)::before { display: none; }
  .hero-proof:nth-of-type(n+3)::after { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, #b2caff24, transparent); }
  .hero-proof-source { top: calc(100% + 12px); left: 0; right: 0; text-align: center; font-size: 7px; }
  .hero-bottom .scroll-cue { top: calc(100% + 33px); }
}
@media (max-width: 360px) {
  .hero-glass-rail.glass { padding-inline: 7px; }
  .hero-proof { gap: 10px; padding-inline: 9px; }
  .hero-proof > .icon { width: 23px; height: 23px; }
  .hero-proof-copy strong { font-size: 23px; }
  .hero-proof-copy > span { font-size: 8px; }
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { --glass-core: #0a172be8; }
}
@media (max-width: 700px) {
  .glass { backdrop-filter: blur(6px) saturate(1.35); -webkit-backdrop-filter: blur(6px) saturate(1.35); }
  .glass-optics { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-edge { padding: 1.2px; }
  .atmosphere { inset: -10% -38%; width: 176%; height: 120%; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-flow, .glass-shimmer::before { animation: none; }
  .atmosphere, .scene-aura { transform: none; }
  .glass::before, .glass-edge::after { opacity: 0; }
}
.motion-paused .atmosphere, .motion-paused .scene-aura { transform: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@media print { .atmosphere, .glass-optics, .glass-shimmer { display: none; } }