@font-face{font-family:LucaSans;src:local('Inter'),local('Arial');font-display:swap}
:root{
  --ink:#0B0E14;
  --muted:#666666;
  --muted-on-dark:#a3a3a3;
  --blue:#3B82F6;
  --line:#E2E6ED;
  --black:#000;
  --pad:clamp(24px,6vw,100px);
  --surface-0:#FCFCFD;
  --surface-1:#F7F8FA;
  --surface-2:#EEF1F5;
  --deep-0:#000000;
  --deep-1:#000000;
  --deep-2:#000000;
  --deep-3:#000000;
  --deep-4:#000000;
  --accent:#3B82F6;
  --accent-dim:#60A5FA;
  --transition-quick:.15s cubic-bezier(.4,0,.2,1);
  --transition-smooth:.3s cubic-bezier(.4,0,.2,1);
  --transition-ease:.45s cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;
  font-family:LucaSans,'Noto Sans CJK SC','Microsoft YaHei',Arial,sans-serif;
  color:var(--ink);
  background:var(--surface-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;transition:var(--transition-quick)}
button:disabled{cursor:default;opacity:.38}
a{color:inherit;text-decoration:none;transition:var(--transition-quick)}
button{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
button{border:0;background:none}
a,button,input,summary{outline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[v-cloak]{display:none}
::selection{background:var(--accent);color:white}
.skip-link{position:fixed;z-index:200;top:-80px;left:24px;background:white;color:#111;padding:14px;border-radius:6px}.skip-link:focus{top:15px}
.header{
  height:64px;
  padding:0 clamp(24px,4%,80px);
  background:rgba(252,252,253,.85);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(226,230,237,.6);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background var(--transition-quick);
}
.header.header-hidden{transform:translateY(-110%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.header{transition:none}}
.brand{
  display:inline-flex;
  flex-direction:column;
  font:900 34px/.92 Arial,sans-serif;
  letter-spacing:-2.2px;
  flex:none;
  transition:transform var(--transition-quick);
}
.brand:hover{transform:scale(1.02)}
.brand span{
  font-size:8.5px;
  letter-spacing:3.2px;
  margin-top:8px;
  padding-left:2px;
  font-weight:600;
  opacity:.8;
}
.header nav{display:flex;gap:38px;align-items:center}
.header nav a{
  font-size:15px;
  position:relative;
  padding:20px 0;
  font-weight:500;
}
.header nav a:after{
  content:'';
  height:2px;
  background:var(--ink);
  position:absolute;
  bottom:10px;
  left:0;
  right:100%;
  transition:right var(--transition-smooth);
}
.header nav a:hover:after{right:0}
.header-contact{
  font-size:14px;
  border:1px solid rgba(155,160,168,.5);
  padding:9px 20px;
  display:flex;
  gap:32px;
  border-radius:24px;
  transition:all var(--transition-smooth);
}
.header-contact:hover{
  background:var(--deep-1);
  color:white;
  border-color:var(--deep-2);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.menu-toggle{display:none}
.eyebrow{
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:2.8px;
  font-weight:600;
  text-transform:uppercase;
}
.blue{color:var(--accent)}
.section-pad{padding:120px var(--pad)}
h2{
  font-size:clamp(38px,4.5vw,68px);
  line-height:1.2;
  letter-spacing:-2.5px;
  font-weight:650;
}
p{line-height:1.95;letter-spacing:.01em}
.button{
  height:52px;
  min-width:200px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  transition:all var(--transition-smooth);
  position:relative;
  overflow:hidden;
}
.button:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  opacity:0;
  transition:opacity var(--transition-smooth);
}
.button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.button:hover:before{opacity:1}
.button.white{background:white;color:var(--deep-1)}
.button.white:hover{background:rgba(255,255,255,.95)}
.button.glass{
  color:#fff;
  border:1px solid rgba(212,216,223,.3);
  background:rgba(255,255,255,.05);
  gap:18px;
}
.button.glass:hover{background:rgba(255,255,255,.12)}
.button.black{background:var(--deep-1);color:white}
.button.black:hover{background:var(--accent)}
.play-icon{font-size:22px;line-height:1}.hero{
  position:relative;
  height:calc(100svh - 64px);
  min-height:680px;
  max-height:1200px;
  background:var(--deep-0);
  color:#fff;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 12%;
  animation:hero-zoom 20s ease-out infinite alternate;
}
@keyframes hero-zoom{
  0%{transform:scale(1)}
  100%{transform:scale(1.05)}
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 35%,transparent 62%,rgba(0,0,0,.85));
}
.hero-copy{
  position:relative;
  text-align:center;
  padding:32px 28px 0;
  z-index:1;
  animation:hero-fade-in 1.2s cubic-bezier(.22,1,.36,1);
}
@keyframes hero-fade-in{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-copy .eyebrow{
  color:#B7C9E3;
  font-size:10.5px;
  letter-spacing:4.2px;
}
.hero h1{
  font:800 clamp(48px,6.4vw,108px)/1.08 Arial,sans-serif;
  letter-spacing:-3.5px;
  margin:18px 0 14px;
  white-space:nowrap;
  animation:hero-title 1.4s cubic-bezier(.22,1,.36,1);
}
@keyframes hero-title{
  from{opacity:0;transform:translateY(20px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.hero h1 span{
  font-weight:300;
  letter-spacing:-4.5px;
}
.hero h2{
  font-size:clamp(22px,2.4vw,34px);
  font-weight:500;
  letter-spacing:3.5px;
  white-space:pre-line;
  line-height:1.6;
}
.hero-description{
  font-size:14px;
  color:#C2CFE0;
  max-width:700px;
  margin:20px auto 0;
  line-height:2;
  letter-spacing:.02em;
}
.hero-actions{
  position:absolute;
  bottom:110px;
  left:28px;
  right:28px;
  display:flex;
  justify-content:center;
  gap:24px;
  animation:hero-actions 1.6s cubic-bezier(.22,1,.36,1);
}
@keyframes hero-actions{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-baseline{
  position:absolute;
  bottom:32px;
  left:clamp(24px,4%,80px);
  right:clamp(24px,4%,80px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10.5px;
  color:#A8B8CE;
  letter-spacing:.8px;
}
.hero-baseline>a{
  font-size:9.5px;
  letter-spacing:2.2px;
  display:flex;
  gap:22px;
  align-items:center;
  transition:color var(--transition-quick);
}
.hero-baseline>a:hover{color:#fff}
.hero-baseline>a span{
  font-size:22px;
  color:#fff;
  transition:transform var(--transition-quick);
}
.hero-baseline>a:hover span{
  transform:translateY(3px);
  animation:bounce 1s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(3px)}
  50%{transform:translateY(7px)}
}
.hero-baseline button{
  border:1px solid rgba(105,114,125,.6);
  border-radius:50%;
  height:36px;
  width:36px;
  color:#fff;
  font-size:14px;
  transition:all var(--transition-smooth);
}
.hero-baseline button:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.4);
  transform:scale(1.05);
}
.hero-baseline button span{
  position:absolute;
  clip:rect(0,0,0,0);
  width:1px;
  height:1px;
  overflow:hidden;
}.center-heading{
  text-align:center;
  max-width:900px;
  margin:0 auto 55px;
  animation:fade-up .8s cubic-bezier(.22,1,.36,1);
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.center-heading h2{margin:24px 0 30px}
.center-heading>p:last-child{
  color:var(--muted);
  font-size:17px;
  line-height:2.1;
  letter-spacing:.015em;
}
.product-panorama{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1100px;
  margin:40px auto;
}
.product-kit{
  min-width:0;
  margin:0;
  padding:20px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-1);
}
/* Each view shows one complete kit from the original panorama. */
.product-kit svg{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  mix-blend-mode:multiply;
  filter:saturate(.2) contrast(1.05);
}
.product-kit figcaption{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:18px 8px 0;
  font-size:12px;
  color:var(--muted);
}
.product-kit figcaption strong{font-size:16px;color:var(--ink);font-weight:550}
.image-note{
  position:absolute;
  font-size:11px;
  letter-spacing:1.2px;
  left:30px;
  bottom:26px;
  z-index:2;
  color:rgba(196,204,216,.85);
  line-height:1.7;
  backdrop-filter:blur(4px);
  padding:4px 8px;
  border-radius:4px;
  background:rgba(0,0,0,.15);
}
.product-panorama .image-note{
  position:static;
  grid-column:1/-1;
  padding:0;
  text-align:center;
  color:rgba(138,143,152,.9);
  background:none;
  backdrop-filter:none;
}
.key-specs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  max-width:1100px;
  margin:60px auto 0;
  gap:4px;
}
.key-specs>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:28px 16px;
  border-radius:12px;
  transition:all var(--transition-smooth);
  position:relative;
}
.key-specs>div:not(:last-child):after{
  content:'';
  position:absolute;
  right:0;
  top:20%;
  bottom:20%;
  width:1px;
  background:var(--line);
}
.key-specs>div:hover{
  background:var(--surface-1);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.key-specs strong{
  font-size:clamp(28px,3.2vw,46px);
  font-weight:550;
  letter-spacing:-1.2px;
}
.key-specs span{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.01em;
}.immersive-feature{
  height:720px;
  max-height:90vh;
  min-height:520px;
  position:relative;
  color:#fff;
  overflow:hidden;
  background:var(--deep-0);
}
.immersive-feature>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:saturate(.6) brightness(.78);
  transition:transform 8s ease-out;
}
.immersive-feature:hover>img{
  transform:scale(1.08);
}
.feature-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.6) 58%,transparent);
}
.feature-copy{
  position:absolute;
  top:20%;
  left:var(--pad);
  max-width:540px;
  animation:fade-in-left 1s cubic-bezier(.22,1,.36,1);
}
@keyframes fade-in-left{
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
.feature-copy .eyebrow{
  font-size:9.5px;
  color:#B5C7E5;
  letter-spacing:3.5px;
}
.feature-copy h2{
  font-size:clamp(46px,5.8vw,86px);
  margin:28px 0 36px;
  line-height:1.15;
}
.feature-copy p{
  font-size:19px;
  color:#DCE3EE;
  line-height:2;
  letter-spacing:.02em;
}
.text-link{
  display:inline-flex;
  gap:48px;
  align-items:center;
  margin-top:40px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(131,144,159,.5);
  font-size:14px;
  transition:all var(--transition-smooth);
}
.text-link:hover{
  border-color:#fff;
  transform:translateX(4px);
}
.immersive-feature>.image-note{
  left:auto;
  right:var(--pad);
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  margin-bottom:60px;
}
.section-heading h2{margin-top:22px}
.section-heading>p{
  font-size:16px;
  color:var(--muted);
  max-width:460px;
  line-height:2.1;
  letter-spacing:.015em;
}
.experience{
  background:var(--deep-1);
  color:#F8F9FB;
}
.experience .section-heading>p{color:#C5CED9}
.muted{color:#8290A2}
.experience-shell{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  border-top:1px solid rgba(51,59,70,.8);
  border-bottom:1px solid rgba(51,59,70,.8);
  min-height:520px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.viewer-panel{
  position:relative;
  background:var(--deep-0);
  min-width:0;
}
.viewer-top{
  position:absolute;
  top:28px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  font-size:9.5px;
  letter-spacing:1.6px;
  color:#9DB2CE;
}
.viewer-top i{
  display:inline-block;
  width:6px;
  height:6px;
  background:#5D91FF;
  margin-right:10px;
  border-radius:50%;
  box-shadow:0 0 12px rgba(84,143,255,.8);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.7;transform:scale(.95)}
}
.scene-canvas{
  width:100%;
  height:460px;
  display:block;
  touch-action:pan-y;
}
.viewer-angle{
  position:absolute;
  left:30px;
  bottom:115px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.viewer-angle b{
  font-size:28px;
  font-weight:400;
}
.viewer-angle span{
  font-size:10.5px;
  color:#8DA6BF;
}
.viewer-controls{
  display:flex;
  gap:18px;
  align-items:center;
  padding:20px 30px;
  font-size:10.5px;
  color:#AAB9CE;
  border-top:1px solid rgba(36,49,66,.8);
  height:64px;
  background:#000000;
}
.viewer-controls button{
  color:white;
  width:32px;
  font-size:20px;
  transition:transform var(--transition-quick);
}
.viewer-controls button:hover{
  transform:scale(1.1);
}
.viewer-controls input{flex:1;min-width:30px}
input[type=range]{
  accent-color:#4B82FF;
  height:4px;
  cursor:pointer;
  transition:var(--transition-quick);
}
input[type=range]:hover{accent-color:#60A5FA}.experience-copy{border-left:1px solid #333b46;padding:26px 36px;display:flex;flex-direction:column;justify-content:center}.mode-tabs{display:flex;gap:20px;border-bottom:1px solid #3a424e}.mode-tabs button{font-size:11px;white-space:nowrap;padding:0 0 15px;color:#8391a4;border-bottom:2px solid transparent}.mode-tabs button.active{color:white;border-color:#5b8fff}.mode-number{font:300 70px/1.1 Arial,sans-serif;margin:30px 0 14px;letter-spacing:-3px}.mode-number span{font-size:40px;color:#5c8dff;margin-left:12px;letter-spacing:0}.experience-copy h3{font-size:20px;line-height:1.5;font-weight:500}.experience-copy>p{font-size:12px;color:#a0adbf;line-height:1.9;margin:12px 0 20px}.capability{display:flex;justify-content:space-between;font-size:11px;padding:12px 0;border-bottom:1px solid #242e3b;color:#8b98aa}.capability b{font-weight:400;color:#e5eaf2}.angle-control{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:10px;margin-top:24px;color:#a1b1c7;gap:13px}.angle-control input{width:100%}.footnote{
  font-size:11px;
  color:#909AA8;
  line-height:2;
  margin-top:28px;
  letter-spacing:.01em;
}
.experience>.footnote{color:#8295AC}.technology-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:64px;
  margin-top:75px;
}
.technology-grid article{
  transition:transform var(--transition-smooth);
  padding:24px;
  border-radius:12px;
}
.technology-grid article:hover{
  background:rgba(255,255,255,.03);
  transform:translateY(-6px);
}
.technology-grid article>span{
  font-size:9.5px;
  letter-spacing:2px;
  color:#7C9ABF;
}
.technology-grid h3{
  font-size:22px;
  font-weight:550;
  margin:24px 0 16px;
  letter-spacing:-.5px;
}
.technology-grid p{
  font-size:13px;
  line-height:2.1;
  color:#9FAEC4;
  letter-spacing:.01em;
}
.research-links{
  margin-top:45px;
  display:flex;
  align-items:center;
  gap:30px;
  font-size:11px;
  color:#A8BFE5;
}
.research-links>span{
  color:#6E8199;
  font-size:11.5px;
}
.research-links a{
  border-bottom:1px solid rgba(60,83,117,.6);
  padding-bottom:5px;
  transition:all var(--transition-quick);
}
.research-links a:hover{
  border-color:#A8BFE5;
  color:#fff;
}
.history-tabs{display:grid;grid-template-columns:repeat(6,1fr);margin:65px 0 38px;border-bottom:1px solid var(--line)}.history-tabs button{text-align:left;display:flex;flex-direction:column;gap:14px;padding:0 15px 22px 0;font-size:14px;position:relative;color:#808690}.history-tabs button span{font-size:10px;letter-spacing:1px}.history-tabs button:after{content:'';position:absolute;left:0;bottom:-1px;height:2px;background:var(--blue);width:0;transition:.2s}.history-tabs button.active{color:#171e29}.history-tabs button.active:after{width:85%}.history-tabs button.active span{color:var(--blue)}.history-stage{display:grid;grid-template-columns:1fr 1fr;background:#f3f4f6;min-height:440px}.history-image{position:relative;min-width:0;overflow:hidden;background:#000}.history-image>img{width:100%;height:440px;object-fit:cover;object-position:center 50%;animation:fade-in .4s ease}.history-image .image-note{background:#0007;padding:3px 7px;left:18px;bottom:18px}.history-copy{padding:45px 50px;display:flex;flex-direction:column}.history-count{font:300 43px Arial,sans-serif;color:#171c24;margin-bottom:38px}.history-count i{font-size:14px;color:#969da6;font-style:normal}.history-copy .eyebrow{font-size:9px;letter-spacing:1.7px}.history-copy h3{font-size:26px;font-weight:550;margin:16px 0 19px;letter-spacing:-1px}.history-copy>p:last-of-type{font-size:13px;line-height:2;color:#676f7b;max-width:370px}.history-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:28px;font-size:11px;color:#747e8c}.history-bottom button{border:1px solid #c4c9d1;width:42px;height:42px;border-radius:50%;color:#111;font-size:20px}.history-digital{height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;position:relative;background:#000}.history-digital>span{font-size:9px;letter-spacing:4px;color:#8eadd9;margin-top:20px}.digital-globe{width:260px;height:260px;position:relative;border:1px solid #6490cf66;border-radius:50%;box-shadow:inset 0 0 40px #2b69cc22,0 0 40px #2b69cc22;display:grid;place-items:center}.digital-globe:before,.digital-globe:after{content:'';position:absolute;inset:20% 0;border:1px solid #6490cf55;border-radius:50%;transform:rotate(-30deg)}.digital-globe:after{transform:rotate(60deg)}.digital-globe b{font:200 90px Arial;color:#d2e4ff}.digital-globe i{position:absolute;background:#86b1ff;border-radius:50%;box-shadow:0 0 8px #437dff}
.workflow-section{display:grid;grid-template-columns:1.05fr 1fr;background:#f2f3f5}.workflow-photo{position:relative;min-height:750px;overflow:hidden;background:#d2d6dc}.workflow-photo>img{width:100%;height:100%;object-fit:cover;object-position:62% center;filter:saturate(.12)}.workflow-photo .image-note{color:#454e5b;background:#ffffffc9;padding:5px 8px}.workflow-copy{padding:80px max(35px,5vw)}.workflow-copy .eyebrow{font-size:9px;letter-spacing:1.5px}.workflow-copy h2{font-size:clamp(32px,3.7vw,52px);margin:20px 0}.intro-text{font-size:13px;color:#697281}.workflow article{display:flex;gap:22px;padding:25px 0;border-bottom:1px solid #d7dce4}.workflow article:first-child{margin-top:15px}.workflow article>span{font-size:10px;color:#8793a5;padding-top:4px}.workflow h3{font-size:17px;font-weight:550}.workflow p{font-size:12px;line-height:1.9;color:#6d7787;margin-top:8px;max-width:340px}.workflow-copy>small{display:block;font-size:10px;color:#9298a2;margin-top:20px}.application-visual{height:640px;max-height:85vh;min-height:500px;position:relative;color:white;background:#000;overflow:hidden}.application-visual>img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.5) brightness(.8);animation:fade-in .45s ease}.application-copy{position:absolute;left:var(--pad);top:24%;max-width:580px}.application-copy .eyebrow{font-size:9px;color:#c4d1e5}.application-copy h2{font-size:clamp(36px,4.6vw,66px);line-height:1.35;margin:20px 0 25px;max-width:580px}.application-copy>p:last-child{max-width:400px;color:#d0d8e5;font-size:14px;line-height:2}.application-visual>.image-note{left:auto;right:var(--pad)}.application-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#000;color:#838d9c;padding:0 var(--pad)}.application-tabs button{display:flex;gap:20px;align-items:center;padding:30px 25px 30px 0;border-bottom:2px solid transparent}.application-tabs button>span{font-size:10px}.application-tabs button strong{font-size:15px;font-weight:500}.application-tabs button i{font-style:normal;margin-left:auto;margin-right:30px;opacity:0}.application-tabs button.active{border-color:#5284ff;color:#fff}.application-tabs button.active i{opacity:1}
.films{
  background:var(--deep-1);
  color:white;
}
.films .section-heading>p{color:#99A6BA}
.film-filter{
  display:flex;
  gap:32px;
  margin:40px 0;
}
.film-filter button{
  color:#8291A5;
  padding:0 0 12px;
  font-size:13px;
  border-bottom:2px solid transparent;
  transition:all var(--transition-smooth);
  letter-spacing:.02em;
}
.film-filter button.active{
  color:#fff;
  border-color:#A5BECF;
}
.film-filter button:hover{color:#fff}
.film-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.film-grid>*{
  opacity:1;
  transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}
/* Stagger film cards as they load */
.film-grid>:nth-child(1){transition-delay:.05s}
.film-grid>:nth-child(2){transition-delay:.1s}
.film-grid>:nth-child(3){transition-delay:.15s}
.film-grid>:nth-child(4){transition-delay:.2s}
.film-grid>:nth-child(5){transition-delay:.25s}
.film-grid>:nth-child(6){transition-delay:.3s}
.film-grid>:nth-child(7){transition-delay:.35s}
.film-grid>:nth-child(8){transition-delay:.4s}
.film-grid>:nth-child(9){transition-delay:.45s}
.film-card{text-align:left;padding:0;color:white}.film-poster{aspect-ratio:16/10;position:relative;background:#000;overflow:hidden}.film-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .5s;opacity:.85}.film-card:hover .film-poster img{transform:scale(1.045);opacity:1}.film-play{position:absolute;left:24px;bottom:24px;font-size:30px;display:grid;place-items:center;height:45px;width:45px;background:#ffffff14;border:1px solid #ffffff95;border-radius:50%;padding-left:3px;backdrop-filter:blur(8px)}.film-duration{position:absolute;right:16px;bottom:18px;font-size:10px;letter-spacing:1px;color:#fff;background:#0009;padding:4px 6px}.film-meta{display:flex;justify-content:space-between;color:#8899b2;font-size:10px;letter-spacing:1px;margin:24px 0 10px}.film-meta>span:last-child{font-size:20px;color:#dbe4f2}.film-card h3{font-size:19px;font-weight:500;line-height:1.5}.film-card>p{font-size:11px;line-height:1.9;color:#7c8a9e;margin-top:12px}.films .footnote{color:#657287;margin-top:35px}.empty-box{
  padding:48px 20px;
  background:rgba(139,150,163,.08);
  font-size:15px;
  color:#93A5BA;
  border-radius:12px;
  border:1px solid rgba(139,150,163,.15);
}
.empty-box button{
  border-bottom:1px solid;
  margin-left:16px;
  padding:6px;
  transition:color var(--transition-quick);
}
.empty-box button:hover{color:#fff}.kit-tabs{display:flex;justify-content:center;margin:55px auto 40px;gap:70px;border-bottom:1px solid var(--line)}.kit-tabs button{display:flex;flex-direction:column;gap:8px;padding:0 18px 25px;font-size:23px;letter-spacing:-.5px;color:#9bA1ab;border-bottom:2px solid transparent}.kit-tabs button span{font-size:9px;letter-spacing:2px}.kit-tabs button.active{color:#111;border-color:#111}.kit-tabs button.active span{color:var(--blue)}.spec-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}.spec-image{position:relative;min-width:0}.spec-image img{filter:saturate(.15);mix-blend-mode:multiply;width:100%;min-height:360px;object-fit:contain}.spec-image .image-note{color:#8a929d;bottom:0;left:0;right:0;text-align:center;font-size:9px}.spec-title{display:flex;justify-content:space-between;align-items:center;gap:20px}.spec-title>div>span{font-size:8px;letter-spacing:2px;color:#818b9a}.spec-title h3{font-size:37px;font-weight:450;margin-top:9px;letter-spacing:-1px}.spec-title>strong{font:300 64px/1 Arial;display:flex;align-items:baseline;gap:10px;color:#1f3f77}.spec-title>strong small{font-size:11px;color:#798496}.spec-details dl{margin:28px 0}.spec-details dl>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:12px}.spec-details dt{color:#808a98}.spec-details dd{margin:0;text-align:right;color:#313c4c}.spec-details dd.price{font-size:22px;font-weight:500;color:#111;letter-spacing:-.5px}.spec-details .button{min-width:210px}.specs>.footnote{margin-top:50px}.resources{background:var(--surface-1)}
.resources .section-heading h2{font-size:clamp(34px,3.8vw,54px)}
.resource-list a{
  display:flex;
  align-items:center;
  gap:35px;
  padding:34px 0;
  border-top:1px solid rgba(214,219,227,.7);
  transition:all var(--transition-smooth);
  border-radius:4px;
}
.resource-list a:last-child{border-bottom:1px solid rgba(214,219,227,.7)}
.resource-list a:hover{
  color:var(--accent);
  transform:translateX(6px);
  padding-left:12px;
}
.resource-kind{
  font-size:11.5px;
  letter-spacing:1.2px;
  width:50px;
  color:#869AB3;
  font-weight:600;
}
.resource-list h3{
  font-size:19px;
  font-weight:550;
  letter-spacing:-.3px;
}
.resource-list p{
  font-size:12px;
  color:#8A96A8;
  margin-top:7px;
  line-height:1.9;
}
.resource-arrow{
  font-size:28px;
  margin-left:auto;
  transition:transform var(--transition-quick);
}
.resource-list a:hover .resource-arrow{
  transform:translateY(2px);
}
.faq{
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:90px;
  margin-top:100px;
}
.faq>h3{
  font-size:30px;
  line-height:1.5;
  letter-spacing:-1.2px;
  font-weight:550;
}
.faq details{
  border-top:1px solid rgba(214,219,227,.7);
  transition:background var(--transition-smooth);
}
.faq details:last-child{border-bottom:1px solid rgba(214,219,227,.7)}
.faq details:hover{background:rgba(255,255,255,.3)}
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:26px 0;
  font-size:14px;
  line-height:1.8;
  font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{
  font-size:24px;
  line-height:1;
  font-weight:300;
  color:#748AA5;
  transition:transform var(--transition-smooth);
}
.faq details[open] summary>span{transform:rotate(45deg)}
.faq details>p{
  font-size:13px;
  color:#829AB0;
  line-height:2.1;
  padding:0 40px 28px 0;
  letter-spacing:.01em;
}.contact{
  position:relative;
  overflow:hidden;
  min-height:680px;
  background:var(--deep-1);
  color:#fff;
  padding:100px var(--pad) 130px;
  text-align:center;
}
.contact>.eyebrow{
  position:relative;
  font-size:10px;
  letter-spacing:3.5px;
  color:#95B2D9;
}
.contact h2{
  position:relative;
  font-size:clamp(38px,4.8vw,72px);
  margin:30px 0 24px;
  line-height:1.25;
}
.contact>p:not(.eyebrow){
  position:relative;
  color:#8FA4BE;
  font-size:14px;
  line-height:2.1;
  margin-bottom:36px;
  letter-spacing:.02em;
}
.contact .button{
  position:relative;
  z-index:2;
}
.contact-grid{
  position:absolute;
  inset:0;
  opacity:.45;
  background:none;
  background-size:95px 95px,95px 95px,100% 100%;
  mask-image:linear-gradient(transparent,#000 65%);
}
.contact-word{
  position:absolute;
  font:900 clamp(160px,32vw,520px)/.75 Arial;
  letter-spacing:-.09em;
  bottom:-.18em;
  left:0;
  right:0;
  color:rgba(194,212,252,.025);
  pointer-events:none;
}
footer{
  background:var(--deep-0);
  color:#92A0B6;
  padding:50px var(--pad) 28px;
}
.footer-top{
  display:flex;
  align-items:center;
  gap:40px;
  padding-bottom:45px;
}
.footer-top .brand{
  color:white;
  font-size:34px;
}
.footer-top>p{
  font-size:11.5px;
  color:#6A7A94;
}
.footer-top>div{
  display:flex;
  gap:36px;
  font-size:11.5px;
  margin-left:auto;
}
.footer-top a{
  transition:color var(--transition-quick);
}
.footer-top a:hover{color:white}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:28px;
  border-top:1px solid rgba(32,39,50,.8);
  padding-top:28px;
  font-size:9.5px;
  line-height:2;
  color:#6E7E95;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px;
  overflow:auto;
  animation:modal-fade-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-fade-in{
  from{opacity:0}
  to{opacity:1}
}
.contact-modal{
  position:relative;
  background:white;
  padding:60px;
  max-width:560px;
  width:100%;
  box-shadow:0 40px 120px rgba(0,0,0,.2);
  border-radius:16px;
  animation:modal-slide-up .4s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-slide-up{
  from{opacity:0;transform:translateY(30px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-close{
  position:absolute;
  right:18px;
  top:18px;
  z-index:3;
  background:rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
  width:40px;
  height:40px;
  color:var(--ink);
  font-size:28px;
  line-height:1;
  transition:all var(--transition-smooth);
}
.modal-close:hover{
  background:rgba(0,0,0,.15);
  transform:rotate(90deg);
}
.contact-modal h2{
  font-size:34px;
  margin:24px 0;
  letter-spacing:-1.2px;
}
.contact-modal>p:not(.eyebrow){
  font-size:13px;
  color:#82919D;
  letter-spacing:.01em;
}
.contact-person{
  display:flex;
  flex-direction:column;
  gap:16px;
  border-top:1px solid rgba(212,218,227,.8);
  border-bottom:1px solid rgba(212,218,227,.8);
  padding:28px 0;
  margin:28px 0;
}
.contact-person span{
  font-size:14px;
  color:#748596;
}
.contact-person a{
  font-size:28px;
  letter-spacing:-.8px;
  font-weight:500;
}
.contact-modal .footnote{margin-top:24px}
.toast{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  color:#1F2E42;
  padding:16px 28px;
  box-shadow:0 6px 40px rgba(0,0,0,.15);
  z-index:150;
  font-size:14px;
  max-width:90vw;
  border-radius:999px;
  animation:toast-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,20px)}
  to{opacity:1;transform:translate(-50%,0)}
}
/* Scroll-triggered reveal animations with multiple variants and stagger support */
.reveal,.reveal-up,.reveal-fade,.reveal-scale,.reveal-left,.reveal-right{
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal.pending{
  opacity:0;
  transform:translateY(28px);
}
.reveal-up.pending{
  opacity:0;
  transform:translateY(40px);
}
.reveal-fade.pending{
  opacity:0;
  transform:none;
}
.reveal-scale.pending{
  opacity:0;
  transform:scale(.94);
}
.reveal-left.pending{
  opacity:0;
  transform:translateX(-32px);
}
.reveal-right.pending{
  opacity:0;
  transform:translateX(32px);
}
/* Stagger children when container gets .reveal-stagger */
.reveal-stagger>*{
  transition:opacity .75s cubic-bezier(.22,1,.36,1),
             transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.pending>*{
  opacity:0;
  transform:translateY(24px);
}
.reveal-stagger.pending>:nth-child(1){transition-delay:.05s}
.reveal-stagger.pending>:nth-child(2){transition-delay:.1s}
.reveal-stagger.pending>:nth-child(3){transition-delay:.15s}
.reveal-stagger.pending>:nth-child(4){transition-delay:.2s}
.reveal-stagger.pending>:nth-child(5){transition-delay:.25s}
.reveal-stagger.pending>:nth-child(6){transition-delay:.3s}
.reveal-stagger.pending>:nth-child(7){transition-delay:.35s}
.reveal-stagger.pending>:nth-child(8){transition-delay:.4s}
.reveal-stagger.pending>:nth-child(9){transition-delay:.45s}
.reveal-stagger.pending>:nth-child(10){transition-delay:.5s}
.reveal-stagger.pending>:nth-child(n+11){transition-delay:.55s}
@keyframes fade-in{
  from{opacity:.25;transform:scale(.98)}
  to{opacity:1;transform:scale(1)}
}
@media(min-width:1700px){.hero-copy{padding-top:65px}.hero-description{font-size:16px;margin-top:20px}.hero-actions{bottom:120px}.hero h1{font-size:110px}}
@media(max-width:1100px){.header nav{gap:24px}.section-pad{padding:85px var(--pad)}.hero{min-height:620px}.hero-copy{padding-top:36px}.hero-description{max-width:540px}.experience-shell{grid-template-columns:1.1fr 1fr}.experience-copy{padding:25px}.mode-tabs{gap:12px}.mode-tabs button{font-size:10px}.history-copy{padding:34px}.history-copy h3{font-size:23px}.workflow-copy{padding:60px 35px}.workflow-photo{min-height:690px}.spec-layout{gap:35px}.faq{gap:40px}.film-grid{gap:18px}.film-card h3{font-size:17px}.hero-baseline>a{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}}
@media(max-width:800px){
  html{scroll-padding-top:60px}
  .header{
    height:58px;
    padding:0 24px;
  }
  .brand{font-size:30px}
  .brand span{
    font-size:7.5px;
    letter-spacing:2.8px;
  }
  .header-contact{
    margin-left:auto;
    font-size:12px;
    padding:9px 15px;
    gap:18px;
  }
  .header nav{
    display:none;
    position:absolute;
    top:58px;
    left:0;
    right:0;
    padding:20px 24px;
    background:rgba(252,252,253,.95);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(226,230,237,.6);
    box-shadow:0 24px 40px rgba(0,0,0,.08);
  }
  .header nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .header nav a{
    padding:16px 0;
    font-size:15px;
  }
  .header nav a:after{display:none}
  .menu-toggle{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    padding:10px 0;
  }
  .menu-toggle span{font-size:22px}
  .hero{
    height:calc(92svh - 58px);
    min-height:640px;
    max-height:900px;
  }
  .hero-media{
    object-position:50% 60%;
    object-fit:cover;
  }
  .hero-copy{padding:45px 24px 0}
  .hero-copy .eyebrow{
    font-size:9px;
    letter-spacing:2.5px;
  }
  .hero h1{
    font-size:clamp(38px,7.5vw,60px);
    letter-spacing:-2.5px;
    margin-top:22px;
  }
  .hero h1 span{letter-spacing:-2.5px}
  .hero h2{
    font-size:24px;
    letter-spacing:1.5px;
    margin-top:16px;
  }
  .hero-description{
    font-size:12px;
    max-width:460px;
    padding:0 12px;
  }
  .hero-actions{
    bottom:100px;
    gap:16px;
  }
  .button{
    min-width:170px;
    gap:24px;
    height:48px;
    font-size:13px;
  }
  .hero-baseline{
    left:24px;
    right:24px;
    bottom:28px;
  }
  .hero-baseline>a{display:none}
  .hero-baseline>span{font-size:9.5px}
  .section-pad{padding:80px 24px}
  .center-heading{margin-bottom:40px}
  h2{
    font-size:42px;
    letter-spacing:-1.8px;
  }
  .center-heading .eyebrow{
    font-size:10px;
    letter-spacing:2.5px;
  }
  .center-heading>p:last-child{font-size:14px}
  .center-heading h2{margin:18px 0 26px}
  .product-panorama{margin:35px auto;gap:16px}
  .product-kit{padding:16px 10px}
  .product-kit figcaption{flex-direction:column;gap:6px;padding:14px 6px 0}
  .product-panorama .image-note{
    font-size:9px;
  }
  .key-specs{margin-top:48px;gap:0}
  .key-specs>div{padding:20px 12px;gap:10px}
  .key-specs>div:hover{
    transform:none;
    background:none;
    box-shadow:none;
  }
  .key-specs strong{
    font-size:27px;
    letter-spacing:-1.2px;
  }
  .key-specs span{
    font-size:10px;
    text-align:center;
  }
  .immersive-feature{
    height:600px;
    min-height:500px;
  }
  .feature-copy{
    left:24px;
    top:19%;
  }
  .feature-copy h2{font-size:56px}
  .feature-copy p{font-size:16px}
  .feature-copy .eyebrow{
    font-size:9px;
    letter-spacing:1.8px;
  }
  .section-heading{
    gap:28px;
    margin-bottom:40px;
  }
  .section-heading>.eyebrow{font-size:10px}
  .section-heading>p{
    font-size:13px;
    max-width:280px;
  }
  .section-heading h2{font-size:42px}
  .section-heading .eyebrow{
    font-size:9px;
    letter-spacing:2px;
  }
.experience-shell{grid-template-columns:1fr}.experience-copy{border:0;border-top:1px solid #333b46;padding:25px 22px 30px}.scene-canvas{height:400px}.viewer-controls{height:60px}.mode-tabs{gap:0;justify-content:space-between}.mode-tabs button{font-size:12px}.mode-number{font-size:58px;margin-top:26px}.mode-number span{font-size:34px}.technology-grid{gap:25px}.technology-grid h3{font-size:16px}.technology-grid article>span{font-size:8px;letter-spacing:1px}.technology-grid p{font-size:11px}.research-links{font-size:9px;gap:18px;flex-wrap:wrap}.history-tabs{margin:40px 0 25px;grid-template-columns:repeat(3,1fr);row-gap:22px;border:0}.history-tabs button{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:15px;gap:8px}.history-stage{grid-template-columns:1fr 1fr;min-height:360px}.history-image>img,.history-digital{height:100%;min-height:380px}.history-copy{padding:28px 25px}.history-count{font-size:35px;margin-bottom:25px}.history-copy h3{font-size:21px}.history-copy>p:last-of-type{font-size:11px}.digital-globe{width:190px;height:190px}.digital-globe b{font-size:65px}.history-digital>span{font-size:7px;letter-spacing:2px}.workflow-section{grid-template-columns:1fr}.workflow-photo{height:410px;min-height:0}.workflow-photo>img{object-fit:cover;object-position:center 65%}.workflow-copy{padding:60px 24px}.workflow-copy h2{font-size:40px}.workflow{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.workflow article:first-child{margin-top:0}.workflow p{font-size:12px}.workflow{margin-top:20px}.application-visual{height:560px;min-height:460px}.application-copy{left:24px;right:24px;top:20%}.application-copy h2{font-size:44px;max-width:460px}.application-copy>p:last-child{font-size:13px;max-width:330px}.application-tabs{padding:0 24px}.application-tabs button{padding:24px 15px 24px 0;gap:13px}.application-tabs button strong{font-size:12px}.application-tabs button i{display:none}.film-grid{grid-template-columns:1fr;gap:40px}.film-poster{aspect-ratio:16/9}.film-meta{margin-top:17px}.film-card h3{font-size:21px}.film-card>p{font-size:12px}.film-filter{gap:24px}.film-filter button{font-size:11px}.spec-layout{grid-template-columns:1fr}.spec-image img{min-height:230px;max-height:330px;object-fit:contain}.spec-details{max-width:600px;width:100%;margin:auto}.spec-image .image-note{bottom:-5px}.kit-tabs{margin-top:35px;gap:45px}.kit-tabs button{font-size:21px;padding:0 0 20px}.kit-tabs button span{font-size:8px;letter-spacing:1px}.spec-title h3{font-size:34px}.spec-title>strong{font-size:55px}.spec-details dl>div{font-size:12px}.specs>.footnote{margin-top:35px}.resources .section-heading{display:block}.resources .section-heading>p{margin-top:18px;max-width:none}.resource-list a{gap:15px}.resource-list h3{font-size:16px}.resource-list p{font-size:10px}.resource-kind{font-size:9px;width:37px}.faq{grid-template-columns:1fr;gap:25px;margin-top:65px}.faq>h3{font-size:28px}.faq summary{font-size:12px}.contact{padding:70px 24px 85px;min-height:540px}.contact h2{font-size:43px}.footer-top{flex-wrap:wrap;gap:25px}.footer-top>div{width:100%;margin:0;gap:28px}.footer-top>p{font-size:10px}.footer-bottom{flex-wrap:wrap;gap:15px}.footer-bottom>span:nth-child(2){order:3;width:100%}.footer-bottom>a{margin-left:auto}.modal-backdrop{padding:16px}.film-modal-copy{padding:22px}.film-modal-copy h2{font-size:23px}.contact-modal{padding:42px 25px}.contact-modal h2{font-size:28px}}
@media(max-width:480px){.header{gap:18px}.header-contact{padding:8px 10px;gap:10px}.hero{min-height:620px;max-height:780px}.hero-media{object-fit:contain;object-position:50% 60%;transform:scale(1.3);width:100%;height:100%}.hero-shade{background:linear-gradient(180deg,#00000077,transparent 45%,transparent 65%,#00000088)}.hero-copy{padding-top:32px}.hero h1{font-size:35px;letter-spacing:-1.6px}.hero h1 span{letter-spacing:-1.8px}.hero h2{font-size:20px;margin-top:14px}.hero-description{font-size:11px;margin-top:13px;max-width:330px;padding:0}.hero-actions{bottom:76px;left:20px;right:20px;gap:12px}.hero-actions .button{min-width:0;flex:1;max-width:170px;height:43px;font-size:11px;gap:12px}.hero-baseline>span{font-size:8px;letter-spacing:0}.section-pad{padding:60px 22px}.center-heading h2{font-size:34px}.center-heading>p:last-child{font-size:11px}.key-specs strong{font-size:21px}.key-specs>div:nth-child(3) strong{font-size:18px}.key-specs span{font-size:8px}.image-note{font-size:8px}.immersive-feature{height:510px;min-height:460px}.feature-copy h2{font-size:47px}.feature-copy .eyebrow{max-width:260px;line-height:1.8}.immersive-feature>img{object-position:57% center}.feature-shade{background:linear-gradient(90deg,#000000dd,#00000066 76%,#00000033)}.section-heading{flex-direction:column;align-items:flex-start;gap:22px}.section-heading h2{font-size:36px}.section-heading>p{font-size:12px;max-width:none}.scene-canvas{height:350px}.viewer-top{left:15px;right:15px;font-size:8px}.viewer-angle{left:17px;bottom:100px}.viewer-angle b{font-size:20px}.viewer-angle span{font-size:8px}.viewer-controls{padding:18px 15px;gap:12px;font-size:9px}.experience-copy{padding:25px 18px 30px}.experience-copy h3{font-size:19px}.mode-tabs button{font-size:11px}.technology-grid{grid-template-columns:1fr;gap:30px;margin-top:40px}.technology-grid article{position:relative;padding-left:0}.technology-grid h3{margin:10px 0;font-size:19px}.technology-grid p{font-size:12px}.research-links{gap:16px;font-size:9px}.research-links>span{width:100%}.history-stage{grid-template-columns:1fr}.history-image>img,.history-digital{height:250px;min-height:0;object-position:center 45%}.history-copy{padding:30px 25px}.history-count{position:absolute;right:25px;top:25px;font-size:30px}.history-copy{position:relative;min-height:285px}.history-copy .eyebrow{max-width:190px;font-size:8px;padding-right:22px;min-height:30px;display:flex;align-items:center}.history-copy h3{font-size:23px;margin-top:12px}.history-copy>p:last-of-type{font-size:12px;max-width:100%}.history-bottom{padding-top:20px}.digital-globe{width:160px;height:160px}.digital-globe b{font-size:55px}.history-digital>span{font-size:8px}.history-tabs button{font-size:12px}.workflow-photo{height:320px}.workflow-copy{padding:45px 22px}.workflow-copy h2{font-size:36px}.workflow-copy .eyebrow{font-size:8px;letter-spacing:1px}.workflow{display:block}.workflow article{gap:22px;padding:22px 0}.workflow h3{font-size:17px}.workflow p{font-size:12px}.application-visual{height:490px;min-height:450px}.application-visual>img{object-position:60% center}.application-copy{left:22px;top:18%}.application-copy .eyebrow{font-size:8px;max-width:240px;line-height:2}.application-copy h2{font-size:38px;max-width:330px}.application-copy>p:last-child{max-width:280px;font-size:12px}.application-tabs{padding:0 22px;gap:15px}.application-tabs button{flex-direction:column;align-items:flex-start;gap:10px;padding:23px 0}.application-tabs button strong{font-size:11px}.film-filter{gap:21px;flex-wrap:wrap}.film-filter button{font-size:10px}.film-card h3{font-size:19px}.film-poster{aspect-ratio:16/10}.film-play{height:37px;width:37px;font-size:26px;left:18px;bottom:18px}.kit-tabs{gap:0;justify-content:space-between}.kit-tabs button{font-size:19px}.kit-tabs button span{font-size:7px}.spec-image img{min-height:200px}.spec-title h3{font-size:31px}.spec-title>strong{font-size:51px}.spec-details dl>div{font-size:11px}.spec-details dd.price{font-size:20px}.spec-details .button{width:100%}.resources .section-heading h2{font-size:29px}.resource-list h3{font-size:14px}.resource-list a{gap:12px;padding:24px 0}.resource-kind{font-size:9px;width:30px;flex:none}.resource-list p{font-size:10px;line-height:1.8}.faq summary{font-size:12px}.faq details>p{font-size:12px}.contact h2{font-size:35px}.contact>.eyebrow{font-size:8px;letter-spacing:1.6px}.contact{min-height:500px}.contact>p:not(.eyebrow){font-size:12px}.footer-top>div{gap:25px;font-size:10px}.footer-top>.brand{font-size:29px}.footer-bottom{font-size:8px}.contact-person a{font-size:24px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal,.reveal-up,.reveal-fade,.reveal-scale,.reveal-left,.reveal-right,.reveal-stagger>*{
    opacity:1!important;
    transform:none!important;
  }
  .reveal.pending,.reveal-up.pending,.reveal-fade.pending,.reveal-scale.pending,
  .reveal-left.pending,.reveal-right.pending,.reveal-stagger.pending>*{
    opacity:1!important;
    transform:none!important;
  }
  .hero-media{animation:none}
  .immersive-feature>img{transition:none}
  .button:hover{transform:none}
}
@media(max-width:480px){.hero-media{transform:none;object-position:50% 64%;mask-image:linear-gradient(transparent 30%,#000 52%,#000 73%,transparent 88%)}.hero-actions{bottom:76px}}

/* Compact, single-row navigation. */
.header .brand{font-size:26px}.header .brand span{font-size:6px;letter-spacing:2.5px;margin-top:4px}
@media(max-width:800px){.header .brand{font-size:25px}}

/* Play films inside their original poster frame; fullscreen uses native video controls. */
.film-cover{display:block;position:relative;width:100%;height:100%;padding:0;color:inherit;text-align:left}
.film-cover:focus-visible{outline-offset:-3px}
.film-poster video{width:100%;height:100%;object-fit:contain;background:#000}
.film-poster video:fullscreen{width:100%;height:100%;object-fit:contain}
.film-meta a{font-size:10px;color:inherit}

/* Both players stay in their original page positions throughout playback. */
.film-poster video,.film-cover{position:absolute;inset:0;width:100%;height:100%}

/* In-page Gaussian sample viewer with refined controls */
.sample-shell{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  align-items:start;
  gap:clamp(36px,5vw,80px);
}
.sample-panel{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--deep-0);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.sample-stage{
  position:relative;
  height:500px;
  min-height:300px;
  flex:1;
  overflow:hidden;
  touch-action:none;
  background:var(--deep-1);
}
.sample-stage canvas{
  display:block;
  width:100%;
  height:100%;
  cursor:grab;
}
.sample-stage canvas:active{cursor:grabbing}
.sample-stage:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-3px;
}
.sample-status{
  position:absolute;
  inset:48px 0 64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  text-align:center;
  padding:28px;
}
.sample-status strong{
  font-size:16px;
  font-weight:550;
}
.sample-status p{
  font-size:13px;
  color:#95A7BD;
}
.sample-status button{
  padding:12px 24px;
  background:var(--accent);
  color:white;
  border-radius:999px;
  transition:all var(--transition-smooth);
}
.sample-status button:hover{
  background:var(--accent-dim);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(59,130,246,.3);
}
.sample-spinner{
  width:28px;
  height:28px;
  border:2.5px solid rgba(65,83,107,.6);
  border-top-color:#7DA5FF;
  border-radius:50%;
  animation:sample-spin 1s linear infinite;
}
@keyframes sample-spin{
  to{transform:rotate(360deg)}
}
.sample-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  border-top:1px solid rgba(48,56,70,.9);
  background:#000000;
  min-height:64px;
}
.sample-controls>div{display:flex;gap:3px}
.sample-controls button{
  color:#CCD8EC;
  padding:8px 10px;
  font-size:11.5px;
  white-space:nowrap;
  border-radius:6px;
  transition:all var(--transition-quick);
}
.sample-controls button:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.sample-controls>div button{
  font-size:21px;
  width:36px;
  line-height:26px;
  padding:0;
}
.sample-copy{
  padding:20px 0 0;
  min-width:0;
}
.sample-copy .eyebrow{
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:26px;
}
.sample-copy h3{
  font-size:34px;
  line-height:1.35;
  font-weight:550;
  letter-spacing:-1.2px;
  margin-bottom:26px;
}
.sample-copy>p:not(.eyebrow){
  font-size:14px;
  line-height:2.1;
  color:#A5B6CD;
  letter-spacing:.015em;
}
.sample-facts{margin:30px 0}
.sample-facts>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.sample-facts span{
  color:#8796AC;
  font-weight:500;
}
.sample-facts b{
  font-weight:550;
  color:#DEE9F8;
  text-align:right;
}
.sample-copy .sample-note{
  font-size:11.5px;
  color:#8796AC;
  line-height:1.9;
}
.sample-download{
  display:flex;
  justify-content:space-between;
  margin-top:28px;
  color:#AEC5F1;
  font-size:13px;
  padding:10px 0;
  gap:18px;
  transition:color var(--transition-quick);
}
.sample-download:hover{
  color:#fff;
  transform:translateX(2px);
}
.sample-panel:fullscreen{
  width:100vw;
  height:100vh;
  background:var(--deep-0);
}
.sample-panel:fullscreen .sample-stage{
  height:auto;
  min-height:0;
}
.sample-panel:fullscreen .viewer-top{flex-shrink:0}
@media(max-width:900px){
  .sample-shell{
    grid-template-columns:1fr;
    gap:42px;
  }
  .sample-copy{
    padding:0;
    max-width:680px;
  }
  .sample-stage{
    height:450px;
    flex:auto;
  }
  .sample-panel:fullscreen .sample-stage{flex:1}
  .sample-copy h3{font-size:30px}
  .sample-facts{max-width:560px}
}
@media(max-width:480px){
  .sample-stage{height:400px}
  .sample-controls{
    padding:12px 8px;
    gap:3px;
  }
  .sample-controls button{padding:8px 7px}
  .sample-controls>div button{width:32px}
  .sample-panel .viewer-top{
    font-size:9px;
    letter-spacing:0;
    gap:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .sample-spinner{animation:none}
  .sample-status button:hover{transform:none}
}

/* Film cards: Enhanced visual hierarchy with smooth interactions */
.films .film-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  max-width:1320px;
  margin-inline:auto;
  align-items:stretch;
}
.films .film-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--deep-2);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  transition:all var(--transition-smooth);
  position:relative;
}
.films .film-card:hover,.films .film-card:focus-within{
  border-color:rgba(255,255,255,.3);
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,.3);
}
.films .film-poster{
  flex:0 0 auto;
  min-height:0;
  aspect-ratio:16/9;
  background:var(--deep-0);
  isolation:isolate;
  position:relative;
  overflow:hidden;
}
.films .film-poster img{
  object-fit:cover;
  opacity:1;
  transform:none;
  transition:all var(--transition-ease);
}
.films .film-card:hover .film-poster img{
  transform:scale(1.05);
  filter:brightness(1.08);
}
.films .film-info{
  padding:26px 22px;
  flex-shrink:0;
  background:var(--deep-2);
}
.films .film-title-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.films .film-title-row h3{
  flex:1;
  min-width:0;
  font-size:17px;
  line-height:26px;
  font-weight:550;
  letter-spacing:-.2px;
}
.films .film-info>p{
  font-size:14.5px;
  line-height:22px;
  color:rgba(255,255,255,.55);
  margin-top:6px;
  overflow-wrap:anywhere;
}
.films .film-info .film-error{color:#FFB8AE}
.films .film-download{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:rgba(255,255,255,.6);
  font-size:18px;
  line-height:1;
  border-radius:50%;
  transition:all var(--transition-smooth);
}
.films .film-download:hover{
  color:#fff;
  background:rgba(255,255,255,.15);
  transform:scale(1.1);
}
.films .film-play{
  left:20px;
  bottom:18px;
  width:44px;
  height:44px;
  font-size:26px;
  border-color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
.films .film-duration{
  right:18px;
  bottom:20px;
  font-size:10.5px;
  border-radius:5px;
  padding:4px 7px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
}
@media(max-width:1000px) and (min-width:701px){
  .films .film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .films .film-grid{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
}
@media(max-width:600px){
  .product-panorama{grid-template-columns:minmax(0,1fr);max-width:400px;gap:20px}
  .product-kit{padding:20px}
  .product-kit figcaption{flex-direction:row;padding-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .films .film-card,.films .film-poster img,.films .film-download{
    transition:none;
  }
  .films .film-card:hover{transform:none}
}

/* The poster remains the landing screen; the featured player follows below it. */
.spatial-showcase{
  position:relative;
  height:100svh;
  height:100dvh;
  scroll-margin-top:-64px;
  overflow:hidden;
  background:#000;
  color:#fff;
}
@media(max-width:800px){
  .spatial-showcase{scroll-margin-top:-60px}
}
/* Streamed native 4DGS, shared by the showcase and experience section. */
.native-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;font-size:9px;letter-spacing:1px;color:#aac0df;background:#000;min-height:49px}
.native-title i{display:inline-block;width:5px;height:5px;background:#69a0ff;border-radius:50%;margin-right:8px}
.native-timeline{display:flex;align-items:center;gap:14px;padding:16px 20px;color:#acbdd7;font-size:11px;background:#000;border-top:1px solid #303846;min-height:54px}
.native-timeline button{font-size:22px;color:#fff;width:28px;flex-shrink:0}.native-timeline input{flex:1;min-width:25px}.native-buffer{width:62px;font-size:10px;color:#7d91af;text-align:right}
.native-player{background:#000}.native-player .sample-stage{background:transparent}.native-player .sample-status{inset:49px 0 114px}.native-player:fullscreen .sample-stage{flex:1;min-height:0;height:auto}
.hero-spatial{position:relative;height:100%;width:100%;background:#000}.hero-spatial>.native-player{height:100%;width:100%}.native-hero .sample-stage{height:auto;flex:1;min-height:0}.native-hero .native-title{min-height:58px}
@media(max-width:600px){.native-title{padding:14px 12px;font-size:8px;letter-spacing:0}.native-title>span:last-child{font-size:7px}.native-timeline{padding:14px 12px;gap:8px}.native-buffer{width:48px;font-size:8px}.native-hero .native-title{min-height:62px}.native-hero .native-title>span:last-child{display:none}.native-player .sample-status{inset:49px 0 114px}}

.scene-heading{white-space:pre-line}.spatial-empty{padding:70px 24px;text-align:center;border:1px solid #303846;background:#000}.spatial-empty h3{font-size:24px;margin-bottom:15px}.spatial-empty p{font-size:13px;color:#9cabbf}.spatial-empty button{margin-top:20px;background:#326bff;color:#fff;padding:12px 24px}

.gaussian-scene-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 28px;
}
.gaussian-scene-tabs button{
  color:#B5C5DC;
  border:1px solid rgba(53,69,92,.8);
  padding:16px 24px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:15px;
  border-radius:8px;
  transition:all var(--transition-smooth);
  font-weight:500;
}
.gaussian-scene-tabs button:hover{
  border-color:rgba(101,144,229,.5);
  background:rgba(255,255,255,.03);
}
.gaussian-scene-tabs button span{
  font-size:10px;
  color:#8BA4CB;
  letter-spacing:1.2px;
}
.gaussian-scene-tabs button.active{
  background:var(--deep-0);
  border-color:#6590E5;
  color:white;
  box-shadow:0 4px 16px rgba(59,130,246,.2);
}
.gaussian-scene-tabs button.active span{
  color:#91B1FF;
}
.hero-spatial{
  display:flex;
  flex-direction:column;
}
.hero-spatial>.native-player{
  flex:1;
  min-height:0;
  height:auto;
}
.hero-scene-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 22px;
  background:var(--deep-0);
  border-bottom:1px solid rgba(48,56,70,.8);
  min-height:56px;
}
.hero-scene-tabs button{
  color:#A8BDDA;
  border:1px solid rgba(52,67,90,.9);
  font-size:12px;
  padding:8px 15px;
  border-radius:5px;
  transition:all var(--transition-smooth);
}
.hero-scene-tabs button:hover{
  border-color:rgba(102,142,224,.5);
  background:rgba(255,255,255,.05);
}
.hero-scene-tabs button.active{
  color:#fff;
  border-color:#668EE0;
  background:var(--deep-1);
}
.hero-scene-tabs~.native-player .native-title{
  padding-right:22px;
  min-height:52px;
}
@media(max-width:600px){
  .gaussian-scene-tabs{gap:10px}
  .gaussian-scene-tabs button{
    padding:14px 16px;
    font-size:13px;
    gap:12px;
  }
  .hero-scene-tabs{
    padding-left:14px;
    padding-right:14px;
    gap:6px;
  }
  .hero-scene-tabs button{
    font-size:11px;
    padding:8px 10px;
  }
}
/* History: synchronized crossfade, with a visible six-second reading timer. */
.history-carousel .history-tabs{margin-bottom:20px}
.history-tabs button{transition:color .35s ease}
.history-tabs button:after{background:#dce4f1;transition:width .5s ease}
.history-tabs .history-progress{position:absolute;left:0;bottom:-1px;width:85%;height:2px;background:var(--blue);transform-origin:left;transition:transform .1s linear;z-index:1}
.history-tabs button:not(.active) .history-progress{transition:none}
.history-playback{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-bottom:18px;color:#808690;font-size:11px}
.history-playback button{color:#536177;min-height:32px;padding:5px 0 5px 12px}
.history-carousel .history-stage{position:relative;grid-template-columns:1fr;overflow:hidden}
.history-slide{grid-area:1 / 1;display:grid;grid-template-columns:1fr 1fr;min-width:0;height:clamp(440px,36vw,520px);min-height:0;background:#f3f4f6}
/* Every era shares one frame: the image fills the slot instead of using its own aspect ratio. */
.history-slide .history-image{height:100%}
.history-slide .history-image>img{animation:none;display:block;position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 50%}
.history-slide .history-digital{height:100%;min-height:0}
.history-slide .history-copy{min-height:0;overflow:hidden}
.history-copy .eyebrow{font-size:11px;letter-spacing:2px}
.history-copy>p:last-of-type{font-size:15px;line-height:2;max-width:400px}
.history-bottom{font-size:13px}
.history-playback{font-size:13px}
.history-slide .history-bottom{min-height:70px;padding-right:60px}
.history-next{position:absolute;right:50px;bottom:45px;z-index:3;border:1px solid #c4c9d1;width:42px;height:42px;border-radius:50%;color:#111;font-size:20px;background:#f3f4f6;transition:background .3s,transform .3s}
.history-next:hover{background:#e2e7ef;transform:translateX(3px)}
.era-enter-active{z-index:1;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
.era-leave-active{pointer-events:none;transition:opacity .65s ease}
.era-enter-from,.era-leave-to{opacity:0}
.era-enter-active .history-image>img,.era-enter-active .history-digital{transition:transform 1.15s cubic-bezier(.22,1,.36,1)}
.era-enter-from .history-image>img,.era-enter-from .history-digital{transform:scale(1.06)}
.era-enter-active .history-copy{transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .7s ease}
.era-enter-from .history-copy{transform:translateY(22px);opacity:0}
@media(max-width:1100px){.history-next{right:34px;bottom:34px}}
@media(max-width:800px){.history-slide{height:400px}.history-copy>p:last-of-type{font-size:14px}.history-next{right:25px;bottom:28px}}
@media(max-width:480px){.history-slide{grid-template-columns:1fr;grid-template-rows:250px auto;height:auto}.history-slide .history-image,.history-slide .history-digital{height:250px}.history-slide .history-copy{overflow:visible}.history-copy>p:last-of-type{font-size:14px}.history-playback{justify-content:space-between;gap:10px;font-size:10px}.history-next{bottom:30px}.history-slide .history-bottom{min-height:62px}.era-enter-from .history-copy{transform:translateY(14px)}}

/* An open layout lets the fourth-dimension experience breathe with the page. */
.experience .section-heading{margin-bottom:52px}
.experience .gaussian-scene-tabs{
  gap:36px;
  margin-bottom:32px;
}
.experience .gaussian-scene-tabs button{
  position:relative;
  gap:12px;
  border:0;
  border-radius:0;
  padding:14px 0 18px;
  background:transparent;
  color:#A0B1C8;
  transition:color var(--transition-smooth);
}
.experience .gaussian-scene-tabs button::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.5px;
  background:linear-gradient(90deg,#729AFF,#60A5FA);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-smooth);
  border-radius:2px;
}
.experience .gaussian-scene-tabs button.active{
  color:#fff;
  background:transparent;
}
.experience .gaussian-scene-tabs button.active::after{
  transform:scaleX(1);
}
.experience .gaussian-scene-tabs button:hover{
  color:#E8EDF5;
}
.experience .gaussian-scene-tabs button.active span{
  color:#9AB9FF;
}
.experience .sample-panel:not(:fullscreen){
  background:transparent;
  box-shadow:none;
}
.experience .sample-panel:not(:fullscreen) .native-title{
  background:transparent;
  padding:0 0 20px;
  gap:18px;
  min-height:44px;
}
.experience .sample-panel:not(:fullscreen) .native-timeline{
  background:transparent;
  border:0;
  padding:22px 0 14px;
}
.experience .sample-panel:not(:fullscreen) .sample-controls{
  background:transparent;
  border:0;
  padding:0;
  min-height:48px;
}
.experience .sample-panel:not(:fullscreen) .sample-controls button{
  border-radius:6px;
  transition:color var(--transition-smooth),background var(--transition-smooth);
}
.experience .sample-panel:not(:fullscreen) .sample-status{
  inset:44px 0 116px;
}
.experience .technology-grid{
  margin-top:96px;
  gap:clamp(32px,5vw,80px);
}
.experience .spatial-empty{
  border:0;
  background:transparent;
  padding:90px 0;
}
@media(max-width:600px){
  .experience .section-heading{
    gap:28px;
    margin-bottom:36px;
  }
  .experience .gaussian-scene-tabs{
    gap:28px;
    margin-bottom:28px;
  }
  .experience .gaussian-scene-tabs button{
    font-size:14px;
    gap:10px;
  }
  .experience .sample-panel:not(:fullscreen) .native-title{
    font-size:9px;
    letter-spacing:0;
  }
  .experience .sample-panel:not(:fullscreen) .native-title>span:last-child{
    font-size:8px;
  }
  .experience .sample-panel:not(:fullscreen) .native-timeline{gap:10px}
  .experience .technology-grid{margin-top:64px}
  .experience .research-links{
    flex-wrap:wrap;
    gap:18px 28px;
  }
  .experience .research-links>span{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .experience .gaussian-scene-tabs button,
  .experience .gaussian-scene-tabs button::after,
  .experience .sample-controls button{
    transition:none;
  }
}

/* Keep a larger scene library usable at every screen size. */
.scene-picker{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 0 32px;color:#a6a6a6;font-size:12px}
.scene-picker label{display:flex;align-items:center;gap:16px;color:#ccc}
.scene-picker select{color:#fff;background:#000000;border:1px solid #444;border-radius:5px;padding:12px 36px 12px 14px;font:inherit;font-size:14px;min-width:230px;max-width:100%;cursor:pointer}
.hero-scene-picker{padding:12px 22px;margin:0;border-bottom:1px solid #333;background:#000000;flex-shrink:0}
@media(max-width:600px){.scene-picker{gap:10px}.scene-picker label{width:100%;justify-content:space-between;gap:10px}.scene-picker select{min-width:0;width:65%;font-size:13px}.hero-scene-picker{padding:12px 16px}.hero-scene-picker>span{display:none}}
/* Keep the existing right-side reveal animation inside its section. */
.workflow-section{overflow:hidden}


/* Featured 4DGS fills the viewport while the navigation slides away. */
.spatial-showcase .native-hero{
  display:block;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
  isolation:isolate;
}
.native-player.native-hero .sample-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
}
.native-hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.65),transparent 25%,transparent 65%,rgba(0,0,0,.7));
}
.native-hero .hero-scene-picker,.native-hero .hero-scene-tabs{
  position:absolute;
  top:24px;
  left:clamp(16px,3vw,48px);
  right:clamp(16px,3vw,48px);
  z-index:3;
  width:fit-content;
  max-width:calc(100% - 32px);
  margin:0;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(16px);
  gap:16px;
}
.native-hero .hero-scene-picker select{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}
.native-hero .hero-scene-picker option{background:#000000}
.native-hero .native-title{
  position:absolute;
  top:102px;
  left:clamp(16px,3vw,48px);
  right:clamp(16px,3vw,48px);
  z-index:2;
  padding:0;
  min-height:0;
  background:transparent;
  color:#e2eaf6;
  text-shadow:0 1px 5px #000;
  pointer-events:none;
}
.native-control-bar{display:contents}
.native-hero .native-control-bar{
  position:absolute;
  left:clamp(16px,3vw,48px);
  right:clamp(16px,3vw,48px);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
}
.native-hero .native-timeline,.native-hero .sample-controls{
  position:static;
  min-width:0;
  min-height:48px;
  padding:6px 0;
  background:transparent;
  border:0;
  border-radius:0;
  backdrop-filter:none;
}
.native-hero .native-timeline{flex:1;color:#fff}
.native-hero .native-buffer{display:none}
.native-hero .sample-controls{
  flex:none;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.18);
}
.native-hero .sample-status{
  inset:0;
  z-index:2;
  color:#fff;
  pointer-events:none;
}
.native-hero .sample-status button{pointer-events:auto}
@media(max-width:600px){
  .native-hero .hero-scene-picker,.native-hero .hero-scene-tabs{
    top:16px;
    width:calc(100% - 32px);
    gap:8px;
    padding:8px 10px;
  }
  .native-hero .hero-scene-picker select{padding:9px 24px 9px 10px}
  .native-hero .native-title{top:86px;font-size:9px}
  .native-hero .native-control-bar{flex-wrap:wrap;gap:0;padding:4px 10px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .native-hero .native-timeline{flex-basis:100%;padding:4px 0;gap:8px;min-height:44px}
  .native-hero .sample-controls{width:100%;padding:4px 0;gap:4px;border:0;min-height:40px}
  .native-hero .sample-controls button{padding:7px;font-size:11px}
  .native-hero .sample-controls>div button{width:30px;font-size:20px;padding:0}
}
@media(max-height:500px) and (min-width:601px){
  .native-hero .hero-scene-picker,.native-hero .hero-scene-tabs{top:12px;padding:6px 10px}
  .native-hero .hero-scene-picker select{padding:7px 30px 7px 10px}
  .native-hero .native-title{top:74px}
  .native-hero .native-control-bar{bottom:12px}
  .native-hero .native-timeline,.native-hero .sample-controls{min-height:40px}
}

/* Stop the document itself while the featured scene is docked. */
html{scrollbar-gutter:stable}
html.showcase-scroll-active{overflow:hidden;overscroll-behavior:none;background:#000}
.showcase-browse{
  position:absolute;
  top:24px;
  right:clamp(16px,3vw,48px);
  z-index:3;
  display:flex;
  gap:8px;
}
.showcase-browse a{
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:#e2eaf6;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(16px);
  font-size:12px;
}
.showcase-browse a:hover{background:rgba(0,0,0,.85);color:#fff}
@media(max-width:800px){
  .showcase-browse{top:112px;right:16px;gap:6px}
  .showcase-browse a{padding:9px 12px;font-size:11px}
}

/* Secondary descriptions and notes use neutral gray on each surface. */
.product-panorama .image-note,
.spec-image .image-note,
.workflow-photo .image-note,
.footnote,
.intro-text,
.workflow p,
.workflow-copy>small,
.history-copy>p:last-of-type,
.resource-list p,
.faq details>p,
.contact-modal>p:not(.eyebrow){color:var(--muted)}

.hero-description,
.hero-baseline>span,
.image-note,
.feature-copy>p:not(.eyebrow),
.application-copy>p:last-child,
.experience .section-heading>p,
.experience .muted,
.experience-copy>p,
.sample-copy>p:not(.eyebrow),
.sample-copy .sample-note,
.technology-grid p,
.experience>.footnote,
.films .section-heading>p,
.films .film-info>p:not(.film-error),
.films .footnote,
.contact>p:not(.eyebrow),
.footer-top>p,
.footer-bottom{color:var(--muted-on-dark)}