:root {
  --paper:#f5f4ee;
  --ink:#242721;
  --blue:#254cfa;
  --line:#d8d9d0;
  --muted:#696d64
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,'Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.5%;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3
}
.brand {
  font-weight:800;
  letter-spacing:-2px;
  font-size:34px;
  display:flex;
  align-items:center;
  gap:13px
}
.brand small {
  font-size:9px;
  letter-spacing:2px;
  line-height:1.6;
  border-left:1px solid #aaa;
  padding-left:13px
}
.mark {
  width:26px;
  height:26px;
  border:7px solid var(--blue);
  border-radius:50%;
  position:relative
}
.mark:after {
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  background:var(--blue);
  right:-12px;
  bottom:-7px;
  border-radius:50%
}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px
}
nav a:hover {
  color:var(--blue)
}
.pill {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:35px;
  border-radius:40px;
  padding:16px 23px;
  border:1px solid var(--ink);
  font-size:13px;
  background:transparent;
  transition:.2s
}
.pill:hover {
  background:var(--ink);
  color:white
}
.pill.blue {
  background:var(--blue);
  border-color:var(--blue);
  color:white
}
.pill.blue:hover {
  background:#173acb
}
.arrow {
  font-size:20px;
  line-height:1
}
.menu {
  display:none
}
.hero-top {
  padding:64px 4.5% 42px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 24px
}
.dot {
  width:7px;
  height:7px;
  background:var(--blue);
  border-radius:50%;
  display:inline-block
}
h1 {
  font-weight:500;
  font-size:clamp(48px,6.2vw,96px);
  letter-spacing:-5px;
  line-height:1.03;
  margin:0
}
h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--blue)
}
.intro {
  max-width:280px;
  font-size:14px;
  line-height:1.9;
  margin:0 0 4px
}
.hero-image {
  margin:0 2%;
  height:590px;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  background:#d6d0c2
}
.hero-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%
}
.image-label {
  position:absolute;
  left:3%;
  top:34px;
  font-size:10px;
  letter-spacing:1.5px;
  display:flex;
  gap:8px;
  align-items:center
}
.image-label i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#627952
}
.hero-card {
  position:absolute;
  bottom:30px;
  left:3%;
  background:rgba(247,246,239,.91);
  backdrop-filter:blur(14px);
  padding:26px;
  width:310px;
  border-radius:3px
}
.hero-card small {
  font-size:10px;
  letter-spacing:2px
}
.hero-card h2 {
  font-size:35px;
  letter-spacing:-1px;
  font-weight:500;
  margin:13px 0 8px
}
.hero-card p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px;
  line-height:1.8
}
.hero-card a {
  font-size:12px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #b8bcb0;
  padding-top:17px
}
.caption {
  position:absolute;
  right:25px;
  bottom:25px;
  color:white;
  font-size:9px;
  letter-spacing:2px
}
.ticker {
  display:flex;
  justify-content:space-between;
  margin:0 4.5%;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  font-size:10px;
  letter-spacing:1.6px
}
.ticker span:first-child {
  color:var(--muted)
}
section.content {
  padding:100px 4.5%
}
.section-top {
  display:flex;
  justify-content:space-between;
  gap:45px;
  margin-bottom:48px
}
.section-top h2 {
  font-size:clamp(32px,3.4vw,53px);
  font-weight:500;
  letter-spacing:-2px;
  line-height:1.27;
  margin:0
}
.section-top>p {
  font-size:14px;
  line-height:1.9;
  max-width:320px;
  color:var(--muted);
  align-self:flex-end;
  margin:0
}
.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.feature {
  border-top:1px solid var(--line);
  padding:25px 0
}
.feature .num {
  font-size:10px;
  color:var(--blue);
  letter-spacing:2px
}
.feature h3 {
  font-weight:500;
  font-size:24px;
  letter-spacing:-.8px;
  margin:38px 0 13px
}
.feature p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  max-width:320px
}
.symbol {
  float:right;
  font-size:30px;
  color:var(--blue)
}
.product {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:560px;
  background:#e9ebe3
}
.product-photo {
  overflow:hidden;
  position:relative;
  min-height:440px
}
.product-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% center;
  position:absolute
}
.product-photo span {
  position:absolute;
  bottom:25px;
  left:30px;
  font-size:10px;
  letter-spacing:2px;
  color:white
}
.product-copy {
  padding:65px 11%
}
.product-copy h2 {
  font-size:65px;
  font-weight:500;
  letter-spacing:-3px;
  margin:0 0 18px
}
.product-copy>p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
.spec {
  margin:30px 0
}
.spec div {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #c9cdc0;
  padding:15px 0;
  font-size:12px
}
.spec dd {
  margin:0
}
.use-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 25px
}
.use-tabs button {
  padding:13px 22px;
  border:1px solid var(--line);
  border-radius:40px;
  background:transparent;
  font-size:12px
}
.use-tabs button[aria-selected=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.use-panel {
  background:#e5e8de;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:310px
}
.use-copy {
  padding:45px
}
.use-copy h3 {
  font-size:30px;
  font-weight:500;
  letter-spacing:-1px;
  margin:12px 0 20px
}
.use-copy p {
  line-height:1.9;
  color:var(--muted);
  font-size:14px;
  max-width:410px
}
.use-art {
  position:relative;
  overflow:hidden;
  background:var(--blue);
  min-height:280px;
  display:grid;
  place-items:center
}
.orbit {
  width:200px;
  height:200px;
  border:1px solid #ffffff70;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  color:white;
  font-size:68px;
  font-weight:300
}
.orbit:before,.orbit:after {
  content:'';
  position:absolute;
  border:1px solid #ffffff40;
  border-radius:50%;
  width:300px;
  height:300px
}
.orbit:after {
  width:400px;
  height:400px
}
.orbit-label {
  position:absolute;
  left:25px;
  bottom:23px;
  color:#fff;
  font-size:10px;
  letter-spacing:2px
}
.manifesto {
  padding:85px 4.5%;
  background:var(--blue);
  color:white;
  display:flex;
  gap:50px;
  align-items:flex-end;
  justify-content:space-between
}
.manifesto h2 {
  font-size:clamp(40px,5.5vw,80px);
  font-weight:400;
  letter-spacing:-3px;
  line-height:1.05;
  margin:0
}
.manifesto p {
  font-size:13px;
  line-height:1.9;
  max-width:300px
}
.manifesto .pill {
  border-color:white;
  color:white;
  margin-top:20px
}
.manifesto .pill:hover {
  background:white;
  color:var(--blue)
}
footer {
  padding:42px 4.5% 25px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:40px
}
.footer-top>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:10px;
  color:var(--muted)
}
dialog {
  border:0;
  padding:36px;
  width:min(500px,90vw);
  background:var(--paper);
  border-radius:8px
}
dialog::backdrop {
  background:#1119;
  backdrop-filter:blur(4px)
}
dialog h2 {
  font-size:27px
}
dialog p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)
}
.close {
  float:right;
  border:0;
  background:transparent;
  font-size:26px
}
label {
  display:block;
  font-size:12px;
  margin:20px 0 7px
}
input,textarea {
  width:100%;
  padding:13px;
  border:1px solid var(--line);
  border-radius:3px;
  background:white
}
textarea {
  resize:vertical;
  min-height:100px
}
form .pill {
  margin-top:20px
}
#form-status {
  color:var(--blue)
}
@media(min-width:1600px) {
  body {
    max-width:1800px;
    margin:auto
  }
  .hero-image {
    height:700px
  }
}
@media(max-width:800px) {
  header {
    height:75px
  }
  .brand {
    font-size:28px
  }
  nav {
    gap:18px
  }
  nav>a:not(.pill) {
    display:none
  }
  .hero-top {
    padding-top:45px;
    display:block
  }
  h1 {
    letter-spacing:-3px
  }
  .intro {
    margin-top:25px;
    max-width:400px
  }
  .hero-image {
    height:550px
  }
  .hero-image>img {
    object-position:65% center
  }
  .hero-card {
    width:250px;
    padding:20px;
    bottom:20px
  }
  .hero-card h2 {
    font-size:27px
  }
  .ticker {
    gap:20px;
    flex-wrap:wrap;
    font-size:9px
  }
  .ticker span:last-child {
    display:none
  }
  section.content {
    padding:65px 6%
  }
  .section-top {
    display:block
  }
  .section-top>p {
    margin-top:25px
  }
  .features {
    grid-template-columns:1fr
  }
  .feature h3 {
    margin-top:22px
  }
  .feature p {
    max-width:none
  }
  .product {
    grid-template-columns:1fr
  }
  .product-photo {
    min-height:420px
  }
  .product-copy {
    padding:45px 7%
  }
  .product-copy h2 {
    font-size:46px;
    letter-spacing:-2px
  }
  nav .pill {
    gap:12px;
    padding:12px 15px;
    white-space:nowrap
  }
  .brand small {
    font-size:8px;
    letter-spacing:1px;
    padding-left:8px
  }
  .brand {
    gap:9px
  }
  .use-panel {
    grid-template-columns:1fr
  }
  .use-copy {
    padding:30px
  }
  .manifesto {
    display:block;
    padding:60px 6%
  }
  .manifesto>div:last-child {
    margin-top:35px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column
  }
  .footer-bottom {
    flex-direction:column
  }
  .caption {
    right:15px;
    bottom:10px;
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}
/* The colored surface rotates independently of the stationary content. */
.hero-top {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:480px;
  margin:24px 2% 20px;
  padding:70px 5% 80px;
  border-radius:32px;
  background:#fff;
  align-items:center
}
.hero-top>div:not(.motion-scene),.hero-top>.intro {
  position:relative;
  z-index:1
}
.motion-scene {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden
}
.color-surface {
  position:absolute;
  width:760px;
  height:760px;
  left:-160px;
  top:-210px;
  border-radius:31% 43% 35% 24%;
  background:#ae76f4;
  transform-origin:50% 50%;
  animation:surface-turn 12s cubic-bezier(.45,0,.2,1) infinite,surface-color 12s ease-in-out infinite;
  will-change:transform
}
.color-surface:after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,#ffffff25,transparent 50%,#00000009)
}
.color-glow {
  position:absolute;
  width:440px;
  height:130px;
  left:140px;
  bottom:-70px;
  border-radius:50%;
  background:#ae76f4;
  filter:blur(45px);
  opacity:.35;
  animation:surface-color 12s ease-in-out infinite
}
.hero-top h1 {
  font-size:clamp(48px,5.8vw,88px);
  color:#202524;
  letter-spacing:-4px
}
.hero-top h1 em {
  color:inherit
}
.hero-top .eyebrow {
  letter-spacing:1.4px;
  color:#202524
}
.hero-top .intro {
  max-width:270px;
  margin-left:50px;
  background:#ffffffd9;
  padding:22px;
  border-radius:16px
}
.motion-control {
  position:absolute;
  z-index:2;
  bottom:22px;
  right:28px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #d8d9d0;
  border-radius:25px;
  background:#ffffffec;
  padding:10px 15px;
  font-size:11px;
  color:var(--ink)
}
.motion-control span {
  font-size:12px;
  min-width:12px
}
.motion-index {
  position:absolute;
  left:5%;
  bottom:28px;
  z-index:1;
  font-size:9px;
  letter-spacing:2px;
  color:#202524
}
.hero-top.motion-paused .color-surface,.hero-top.motion-paused .color-glow {
  animation-play-state:paused
}
@keyframes surface-turn {
  0%,12% {
    transform:rotate(-12deg)
  }
  33%,45% {
    transform:rotate(108deg)
  }
  66%,78% {
    transform:rotate(228deg)
  }
  100% {
    transform:rotate(348deg)
  }
}
@keyframes surface-color {
  0%,12%,100% {
    background-color:#ae76f4
  }
  33%,45% {
    background-color:#ffdf72
  }
  66%,78% {
    background-color:#55e0c4
  }
}
@media(min-width:1600px) {
  .color-surface {
    width:900px;
    height:900px;
    left:-170px;
    top:-280px
  }
}
@media(max-width:1100px) and (min-width:801px) {
  .color-surface {
    left:-260px
  }
  .hero-top h1 {
    font-size:64px
  }
}
@media(max-width:800px) {
  .hero-top {
    min-height:540px;
    margin:15px 3% 16px;
    padding:58px 7% 75px;
    border-radius:25px
  }
  .color-surface {
    width:650px;
    height:650px;
    left:-230px;
    top:-275px
  }
  .hero-top h1 {
    font-size:58px;
    letter-spacing:-3px
  }
  .hero-top .eyebrow {
    max-width:240px;
    font-size:8px;
    line-height:1.6;
    letter-spacing:1px
  }
  .hero-top .intro {
    margin:38px 0 0 auto;
    max-width:260px;
    font-size:12px;
    padding:18px
  }
  .motion-control {
    right:18px;
    bottom:18px
  }
  .motion-index {
    left:7%;
    bottom:31px;
    font-size:8px;
    letter-spacing:1px
  }
  .color-glow {
    left:20px;
    bottom:70px
  }
}
@media(prefers-reduced-motion:reduce) {
  .color-surface,.color-glow {
    animation:none!important
  }
  .color-surface {
    transform:rotate(-12deg)
  }
  .motion-control {
    display:none
  }
}
/* Synchronized product carousel: turn, slide, then dwell. */
.hero-top {
  min-height:640px;
  padding:48px 5% 80px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:8%;
  align-items:center
}
.color-surface {
  animation:none;
  transform:rotate(-12deg);
  width:830px;
  height:830px;
  left:-200px;
  top:-240px
}
.color-glow {
  animation:none
}
.hero-top .showcase-left {
  min-width:0
}
.hero-top h1 {
  font-size:clamp(40px,4.2vw,64px);
  letter-spacing:-3px
}
.hero-top .eyebrow {
  font-size:9px
}
.robot-stage {
  position:relative;
  height:290px;
  margin-top:22px;
  perspective:1000px
}
.robot-view {
  position:absolute;
  inset:0;
  margin:0;
  transform-origin:50% 60%;
  will-change:transform,opacity
}
.robot-view img {
  display:block;
  width:90%;
  height:235px;
  object-fit:cover;
  object-position:72% 40%;
  border-radius:95px 24px 80px 24px;
  box-shadow:0 22px 30px -22px #2229
}
.robot-view.face img {
  object-fit:none;
  object-position:69% 12%;
  width:90%;
  height:235px;
  /* face view uses a scaled source through its wrapper */
}
.robot-view.face img {
  object-fit:cover;
  object-position:70% 15%;
  clip-path:inset(0 round 95px 24px 80px 24px)
}
.robot-view.face,.robot-view.detail {
  overflow:hidden
}
.robot-view.face img,.robot-view.detail img {
  visibility:hidden
}
.robot-view.face:before,.robot-view.detail:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:90%;
  height:235px;
  background-image:url('assets/asset-71abe826efe4.png');
  background-repeat:no-repeat;
  border-radius:95px 24px 80px 24px;
  background-size:220%;
  background-position:73% 15%;
  box-shadow:0 22px 30px -22px #2229
}
.robot-view.detail:before {
  background-size:190%;
  background-position:77% 68%
}
.robot-view figcaption {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-top:18px;
  font-size:12px;
  font-weight:600
}
.robot-view figcaption small {
  font-size:11px;
  font-weight:400
}
.hero-top .info-window {
  position:relative;
  overflow:hidden;
  align-self:stretch;
  display:grid;
  align-items:center;
  min-width:0
}
.scene-info {
  grid-area:1/1;
  will-change:transform,opacity;
  padding:20px 3px
}
.scene-info h2 {
  font-size:clamp(25px,2.8vw,39px);
  font-weight:500;
  letter-spacing:-1.8px;
  line-height:1.35;
  margin:15px 0 20px
}
.scene-description {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  min-height:75px
}
.info-table {
  margin:30px 0
}
.table-heading,.info-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.table-heading {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  padding-bottom:13px
}
.info-row {
  font-size:12px;
  min-height:57px;
  border-top:1px solid var(--line)
}
.info-row>span:first-child {
  min-width:45px;
  color:var(--muted)
}
.info-row strong {
  font-weight:400;
  flex:1
}
.concept-note {
  font-size:10px;
  color:var(--muted);
  margin:22px 0 0
}
.scene-controls {
  position:absolute!important;
  bottom:23px;
  left:5%;
  display:flex;
  gap:7px;
  z-index:2!important
}
.scene-controls button {
  border:1px solid #20252430;
  background:#ffffff90;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:10px;
  color:#202524
}
.scene-controls button[aria-pressed=true] {
  color:#fff;
  background:#202524;
  border-color:#202524
}
.scene-controls button:hover {
  border-color:#202524
}
[hidden] {
  display:none!important
}
@media(max-width:800px) {
  .hero-top {
    display:block;
    min-height:1030px;
    padding:35px 7% 75px
  }
  .hero-top h1 {
    font-size:46px
  }
  .color-surface {
    width:710px;
    height:710px;
    left:-240px;
    top:-240px
  }
  .robot-stage {
    height:275px
  }
  .robot-view img,.robot-view.face:before,.robot-view.detail:before {
    width:100%;
    height:220px
  }
  .hero-top .info-window {
    margin-top:35px;
    min-height:390px
  }
  .scene-info {
    padding:0 2px
  }
  .scene-info h2 {
    font-size:28px
  }
  .scene-description {
    min-height:0
  }
  .info-table {
    margin:23px 0
  }
  .scene-controls {
    left:7%
  }
  .color-glow {
    bottom:450px
  }
  .scene-info .eyebrow {
    max-width:none
  }
  .info-row {
    font-size:11px
  }
  .scene-info .pill {
    padding:12px 19px
  }
  .motion-control {
    bottom:23px
  }
  .hero-top .info-window {
    background:#ffffffed;
    border-radius:18px;
    padding:20px 15px
  }
}
@media(prefers-reduced-motion:reduce) {
  .motion-control {
    display:none
  }
}
.robot-view.full img {
  object-fit:contain;
  background:#e6e0d4
}
/* Two identical groups create a seamless, right-to-left conveyor. */
.tools-section {
  padding:52px 0 28px;
  overflow:hidden;
  background:#f2efe7;
  border-bottom:1px solid var(--line);
  margin-top:26px
}
.tools-heading {
  text-align:center;
  padding:0 24px 30px
}
.tools-heading .eyebrow {
  justify-content:center;
  font-size:9px;
  color:var(--muted);
  margin-bottom:13px
}
.tools-heading h2 {
  font-size:22px;
  letter-spacing:-.8px;
  font-weight:500;
  margin:0
}
.tools-heading>p:last-child {
  font-size:12px;
  color:var(--muted);
  margin:14px 0 0
}
.tools-marquee {
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  padding:8px 0
}
.tools-track {
  display:flex;
  width:max-content;
  animation:tools-drift 36s linear infinite;
  will-change:transform
}
.tools-group {
  display:flex;
  flex-shrink:0;
  gap:18px;
  padding-right:18px
}
.tool-logo-card {
  width:276px;
  height:145px;
  flex-shrink:0;
  background:#e8e5dc;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:70px 20px 20px 70px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s
}
.tool-logo-card:nth-child(3n+2) {
  border-radius:20px 70px 20px 20px
}
.tool-logo-card:nth-child(3n) {
  border-radius:75px
}
.tool-logo-card:hover {
  background:#fff;
  border-color:#c8c6bd
}
.tool-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px
}
.tool-brand img {
  width:46px;
  height:46px;
  object-fit:contain
}
.tool-brand strong {
  display:block;
  font-size:20px;
  letter-spacing:-.5px;
  font-weight:600
}
.tool-brand span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:6px
}
.tool-logo-card>small {
  font-size:8px;
  color:#72766e;
  letter-spacing:1.3px
}
.tool-logo-card.moveit img {
  width:95px;
  height:46px
}
.tool-logo-card.moveit .tool-brand strong {
  font-size:17px
}
.tool-logo-card.nvidia strong {
  color:#426a00
}
.tool-logo-card.ros strong {
  color:#22314e
}
.tool-logo-card.blender strong {
  color:#be5900
}
.tool-logo-card.arduino strong {
  color:#00878f
}
.tool-logo-card.raspberrypi strong {
  color:#a22846
}
.tools-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:22px 4.5% 0;
  font-size:10px;
  color:var(--muted)
}
.tools-toggle {
  background:transparent;
  border:1px solid #cbc9c0;
  color:var(--muted);
  font-size:10px;
  border-radius:20px;
  padding:9px 13px;
  white-space:nowrap
}
.tools-section.is-paused .tools-track,.tools-marquee:hover .tools-track,.tools-marquee:focus-within .tools-track {
  animation-play-state:paused
}
@keyframes tools-drift {
  from {
    transform:translateX(0)
  }
  to {
    transform:translateX(-50%)
  }
}
@media(max-width:800px) {
  .tools-section {
    padding-top:35px
  }
  .tools-heading h2 {
    font-size:20px
  }
  .tool-logo-card {
    width:240px;
    height:130px
  }
  .tools-group {
    gap:12px;
    padding-right:12px
  }
  .tools-bottom>span {
    max-width:160px;
    line-height:1.7
  }
  .tools-track {
    animation-duration:30s
  }
}
@media(prefers-reduced-motion:reduce) {
  .tools-track {
    animation:none;
    transform:none
  }
  .tools-marquee {
    overflow-x:auto;
    mask-image:none
  }
  .tools-group[aria-hidden] {
    display:none
  }
  .tools-toggle {
    display:none
  }
}
.experience-section {
  padding:76px 2% 30px;
  background:var(--paper)
}
.experience-section h2 {
  text-align:center;
  font-size:clamp(32px,4vw,62px);
  font-weight:600;
  letter-spacing:-2.5px;
  line-height:1.12;
  margin:0 0 60px
}
.experience-photo {
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:58px;
  background:#171a1d;
  aspect-ratio:16/9
}
.experience-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%
}
.experience-photo figcaption {
  position:absolute;
  bottom:25px;
  left:32px;
  font-size:9px;
  letter-spacing:2px;
  color:#fff;
  text-shadow:0 1px 5px #000
}
@media(max-width:800px) {
  .experience-section {
    padding:48px 3% 15px
  }
  .experience-section h2 {
    font-size:30px;
    letter-spacing:-1.3px;
    margin-bottom:32px
  }
  .experience-photo {
    border-radius:28px;
    aspect-ratio:4/3
  }
  .experience-photo img {
    object-position:center 30%
  }
  .experience-photo figcaption {
    left:18px;
    bottom:18px;
    font-size:7px;
    letter-spacing:1.3px
  }
}
.audience-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.audience-card {
  padding:30px;
  border:1px solid #dedfd6;
  border-radius:22px;
  background:#eeefe8;
  display:flex;
  flex-direction:column
}
.audience-card:nth-child(2) {
  background:#f1ece3
}
.audience-card:nth-child(3) {
  background:#e9eeed
}
.audience-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px
}
.audience-icon {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:18px
}
.audience-icon svg {
  width:46px;
  height:46px
}
.code-icon {
  background:#e0dcf8;
  color:#6750ba
}
.business-icon {
  background:#f8dfc2;
  color:#b36826
}
.research-icon {
  background:#cde8df;
  color:#2c8068
}
.audience-number {
  font-size:11px;
  letter-spacing:1px;
  color:#777c72
}
.audience-for {
  font-size:11px;
  color:#62685d;
  margin:0 0 14px;
  font-weight:600
}
.audience-card h3 {
  font-size:clamp(22px,2.1vw,31px);
  font-weight:500;
  letter-spacing:-1.3px;
  line-height:1.45;
  margin:0 0 20px
}
.audience-description {
  font-size:13px;
  line-height:1.95;
  color:#62685d;
  margin:0 0 28px
}
.audience-tags {
  display:flex;
  gap:7px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid #ccd0c5
}
.audience-tags span {
  font-size:10px;
  color:#62685d;
  background:#ffffff80;
  border-radius:20px;
  padding:7px 11px
}
@media(max-width:800px) {
  .audience-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .audience-card {
    padding:27px
  }
  .audience-top {
    margin-bottom:24px
  }
  .audience-card h3 {
    font-size:27px
  }
  .audience-description {
    font-size:13px
  }
}
.platform-section {
  padding:75px 4.5% 80px;
  background:#eeede5
}
.platform-heading {
  text-align:center;
  max-width:820px;
  margin:0 auto 48px
}
.platform-heading .eyebrow {
  justify-content:center;
  color:var(--muted);
  font-size:10px
}
.platform-heading h2 {
  font-size:clamp(32px,3.7vw,54px);
  font-weight:500;
  letter-spacing:-2.5px;
  line-height:1.25;
  margin:0 0 23px
}
.platform-heading>p:last-child {
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}
.platform-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:20px
}
.platform-card {
  border-radius:28px;
  padding:32px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  background:#f8f7f1;
  min-width:0
}
.platform-step {
  font-size:10px;
  letter-spacing:1.2px;
  color:#687064
}
.platform-card h3 {
  font-size:clamp(23px,2.2vw,32px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-1.2px;
  margin:22px 0 15px
}
.platform-card p {
  font-size:13px;
  color:#667060;
  line-height:1.9;
  margin:0
}
.platform-foot {
  display:block;
  margin-top:auto;
  padding-top:24px;
  font-size:10px;
  color:#687064;
  line-height:1.6
}
.model-card {
  grid-column:1;
  grid-row:1;
  background:#e3e6f1
}
.bridge-card {
  grid-column:2;
  grid-row:1 / 3;
  background:#252f29;
  color:#f5f5e9
}
.bridge-card p,.bridge-card .platform-step,.bridge-card .platform-foot {
  color:#c0cdc2
}
.sim-card {
  grid-column:3;
  grid-row:1;
  background:#e0e9e0
}
.hardware-card {
  grid-column:1;
  grid-row:2;
  background:#f5dfc7
}
.practice-card {
  grid-column:3;
  grid-row:2;
  min-height:350px;
  padding:0;
  background:#242a2a
}
.model-art {
  height:168px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:1fr 1fr;
  gap:10px;
  align-items:center;
  margin-top:25px
}
.model-node {
  border:1px solid #bcc5df;
  border-radius:15px;
  padding:13px 0;
  text-align:center;
  font-size:12px;
  background:#ffffff70
}
.model-core {
  grid-column:2;
  grid-row:1/3;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:#6274c8;
  display:grid;
  place-content:center;
  text-align:center;
  color:white;
  font-size:17px;
  line-height:1.6;
  box-shadow:0 0 0 7px #6274c818
}
.model-node:nth-child(4) {
  grid-row:2
}
.model-node:nth-child(5) {
  grid-column:3;
  grid-row:2
}
.tool-connections {
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  padding:38px 0
}
.tool-connections>div {
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  column-gap:13px;
  border:1px solid #68786a;
  border-radius:18px;
  background:#fcfdf3;
  padding:24px 18px;
  color:#27372b
}
.tool-connections img {
  width:54px;
  height:45px;
  object-fit:contain;
  grid-row:1/3
}
.tool-connections span:not(.connection-line) {
  font-size:21px;
  font-weight:600
}
.tool-connections small {
  font-size:10px;
  color:#64715f;
  margin-top:6px
}
.connection-line {
  text-align:center;
  color:#a6bea9;
  font-size:25px;
  padding:15px 0
}
.sim-art {
  height:168px;
  position:relative;
  overflow:hidden;
  margin-top:25px;
  border-radius:16px;
  background:#d0dfd2;
  perspective:450px
}
.sim-grid {
  position:absolute;
  inset:-70%;
  background-image:linear-gradient(#5b866b35 1px,transparent 1px),linear-gradient(90deg,#5b866b35 1px,transparent 1px);
  background-size:28px 28px;
  transform:rotateX(55deg) rotateZ(-24deg)
}
.sim-cube {
  position:absolute;
  width:68px;
  height:68px;
  left:42%;
  top:42px;
  border:2px solid #3c7756;
  background:#60956d65;
  transform:skewY(-15deg);
  box-shadow:18px 18px 0 #5b876331
}
.sim-cube span {
  position:absolute;
  inset:13px;
  border:1px solid #3c7756
}
.sim-point {
  position:absolute;
  width:9px;
  height:9px;
  background:#4e7559;
  border:2px solid #fff;
  border-radius:50%
}
.sim-point.p1 {
  left:20%;
  top:65%
}
.sim-point.p2 {
  right:17%;
  top:25%
}
.sim-axis {
  position:absolute;
  bottom:13px;
  left:17px;
  font-size:9px;
  letter-spacing:2px;
  color:#3b664c
}
.hardware-brands {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:30px
}
.hardware-brands>span {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px
}
.hardware-brands img {
  width:28px;
  height:28px;
  object-fit:contain
}
.practice-card>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 25%
}
.practice-card:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,#13201be6)
}
.practice-copy {
  position:relative;
  z-index:1;
  margin-top:auto;
  padding:28px;
  color:white
}
.practice-copy .platform-step {
  color:#e2e6da
}
.practice-copy h3 {
  font-size:23px;
  line-height:1.4;
  letter-spacing:-1px;
  margin:17px 0 23px
}
.practice-copy .pill {
  padding:12px 14px;
  gap:12px;
  font-size:11px;
  border-color:#d1dcce;
  color:white;
  background:#19261a70
}
.practice-copy .pill:hover {
  background:white;
  color:#24382a
}
.practice-copy>small {
  display:block;
  font-size:8px;
  margin-top:18px;
  color:#d1dcce
}
@media(max-width:1000px) and (min-width:801px) {
  .platform-card {
    padding:23px
  }
  .practice-card {
    padding:0
  }
  .tool-connections>div {
    padding:20px 12px;
    grid-template-columns:43px 1fr
  }
  .tool-connections img {
    width:40px
  }
  .model-core {
    font-size:14px
  }
}
@media(max-width:800px) {
  .platform-section {
    padding:55px 6%
  }
  .platform-heading {
    margin-bottom:32px
  }
  .platform-heading h2 {
    font-size:33px;
    letter-spacing:-1.5px
  }
  .platform-heading>p:last-child {
    font-size:13px
  }
  .platform-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .platform-card {
    grid-column:auto;
    grid-row:auto;
    padding:28px
  }
  .platform-card h3 {
    font-size:27px
  }
  .practice-card {
    padding:0;
    min-height:400px
  }
  .tool-connections {
    padding:28px 0
  }
  .platform-foot {
    padding-top:15px
  }
  .practice-copy h3 {
    font-size:24px
  }
}
/* Scale this entire section to 70% and center it. */
.platform-section {
  zoom:.7;
  width:100%;
  margin-inline:auto
}
/* Narrow only the sections after the toolbox; retain their vertical space. */
.experience-section,#technology,#applications,#contact,footer {
  width:70%;
  margin-inline:auto
}
#robot {
  width:70%
}
.experience-photo {
  aspect-ratio:auto;
  height:min(54vw,972px)
}
@media(min-width:801px) {
  .experience-section {
    min-height:1073px
  }
  #technology {
    min-height:852px
  }
  #robot {
    min-height:1307px
  }
  #applications {
    min-height:787px
  }
  #contact {
    min-height:385px
  }
  #technology .audience-grid {
    gap:14px
  }
  #technology .audience-card {
    padding:23px
  }
  #technology .section-top {
    gap:25px
  }
  #technology .section-top>p {
    max-width:245px
  }
  #robot .platform-grid {
    gap:16px
  }
  #robot .platform-card {
    padding:25px
  }
  #robot .practice-card {
    padding:0
  }
  #contact {
    gap:25px
  }
  #contact h2 {
    font-size:clamp(38px,4.2vw,65px)
  }
  #contact>div:last-child {
    max-width:240px
  }
}
@media(max-width:800px) {
  .experience-photo {
    height:70.5vw
  }
  .experience-section h2 {
    font-size:24px
  }
  #technology .audience-card {
    padding:20px
  }
  #robot .platform-card {
    padding:20px
  }
  #robot .practice-card {
    padding:0
  }
  #robot .platform-heading h2 {
    font-size:28px
  }
  #robot .tool-connections>div {
    padding:17px 10px;
    grid-template-columns:42px 1fr
  }
  #robot .tool-connections img {
    width:40px
  }
  #robot .platform-heading>p:last-child br {
    display:none
  }
  #contact h2 {
    font-size:35px;
    letter-spacing:-1.5px
  }
  #applications .use-copy {
    padding:20px
  }
  .use-art .orbit {
    width:150px;
    height:150px
  }
  footer .brand {
    flex-wrap:wrap
  }
}
@media(min-width:801px) {
  #technology {
    padding-top:50px;
    padding-bottom:50px
  }
  #applications {
    padding-top:57px;
    padding-bottom:57px
  }
}
/* Navy identity: cool neutral surfaces, steel blue, precise cobalt accents. */
:root {
  --paper:#f3f5f9;
  --ink:#101e38;
  --blue:#315fbd;
  --line:#d3dbe7;
  --muted:#607089;
  --navy:#101e38
}
.experience-section,#technology,#applications,#contact,footer,#robot {
  width:80.5%;
  margin-inline:auto
}
header {
  background:#f3f5f9
}
.brand {
  color:var(--navy)
}
.mark {
  border-color:var(--navy)
}
.mark:after {
  background:var(--navy)
}
.brand small {
  border-color:#bdc8d9
}
.hero-top {
  background:#fafbfd
}
.color-surface,.color-glow {
  background:#b9c9e5
}
.hero-top h1,.hero-top .eyebrow,.hero-top .robot-view figcaption {
  color:var(--navy)
}
.hero-top .intro {
  background:#f4f7fbd9
}
.scene-controls button {
  color:var(--navy);
  border-color:#a9bbd1;
  background:#f5f8fbdc
}
.scene-controls button[aria-pressed=true] {
  background:var(--navy);
  border-color:var(--navy)
}
.scene-controls button:hover {
  border-color:var(--navy)
}
.motion-control {
  background:#f7f9fc;
  border-color:var(--line)
}
.robot-view.full img {
  background:#dce3ed
}
.tools-section {
  background:#e9eef5;
  border-color:var(--line)
}
.tool-logo-card {
  background:#dfe6f0
}
.tool-logo-card:hover {
  background:#f9fbff;
  border-color:#a8bad3
}
.tool-brand span,.tool-logo-card>small {
  color:#5c6d84
}
.tools-toggle {
  border-color:#bbc8d9
}
.audience-card,.audience-card:nth-child(2),.audience-card:nth-child(3) {
  background:#e9eef6;
  border-color:#d1dbe9
}
.audience-card:nth-child(2) {
  background:#e0e8f3
}
.audience-card:nth-child(3) {
  background:#edf1f7
}
.code-icon {
  background:#d1def4;
  color:#234e9a
}
.business-icon {
  background:#c6d5ea;
  color:#183b70
}
.research-icon {
  background:#d8e3f1;
  color:#365578
}
.audience-for,.audience-description,.audience-tags span,.audience-number {
  color:#536681
}
.audience-tags {
  border-color:#c6d2e2
}
.audience-tags span {
  background:#f7f9fc
}
.platform-section {
  background:#e9eef5
}
.platform-card {
  background:#e1e8f2
}
.model-card {
  background:#dfe7f3
}
.bridge-card {
  background:#101e38
}
.sim-card {
  background:#dbe5ee
}
.hardware-card {
  background:#e4eaf3
}
.platform-step,.platform-card p,.platform-foot {
  color:#526580
}
.bridge-card p,.bridge-card .platform-step,.bridge-card .platform-foot {
  color:#bacbe3
}
.model-node {
  background:#eef3fb;
  border-color:#b7c8e2
}
.model-core {
  background:#315f9c;
  box-shadow:0 0 0 7px #315f9c16
}
.tool-connections>div {
  background:#edf3fb;
  border-color:#6b809d;
  color:#142a48
}
.tool-connections small {
  color:#526884
}
.connection-line {
  color:#8eafd4
}
.sim-art {
  background:#c7d7e8
}
.sim-grid {
  background-image:linear-gradient(#456e9435 1px,transparent 1px),linear-gradient(90deg,#456e9435 1px,transparent 1px)
}
.sim-cube {
  border-color:#365f8b;
  background:#557dac65;
  box-shadow:18px 18px 0 #557dac31
}
.sim-cube span {
  border-color:#365f8b
}
.sim-point {
  background:#426998
}
.sim-axis {
  color:#345878
}
.practice-card:after {
  background:linear-gradient(transparent,#0c1c38ee)
}
.practice-copy .platform-step,.practice-copy>small {
  color:#d3e0f1
}
.practice-copy .pill {
  border-color:#a1b8d7;
  background:#142b4880
}
.practice-copy .pill:hover {
  background:#f4f8ff;
  color:#132948
}
.use-tabs button {
  border-color:#c4d1e3
}
.use-tabs button[aria-selected=true] {
  background:var(--navy);
  border-color:var(--navy)
}
.use-panel {
  background:#e1e8f2
}
.use-art {
  background:#1c3a67
}
.manifesto {
  background:#101e38
}
.manifesto .pill:hover {
  background:#edf3fb;
  color:#101e38
}
.footer-bottom {
  border-color:var(--line)
}
@media(max-width:800px) {
  .hero-top .info-window {
    background:#f6f8fbed
  }
}
/* Restore the full-width lower layout. */
.experience-section,#technology,#applications,#contact,footer,#robot {
  width:100%;
  margin-inline:auto
}
.audience-slider {
  display:flex;
  gap:0;
  isolation:isolate;
  min-height:440px;
  padding:18px 0 22px
}
.audience-panel {
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:420px;
  overflow:hidden;
  background:#183252;
  color:#fff;
  border-radius:22px 100px 22px 22px;
  transition:flex .65s cubic-bezier(.22,.7,.2,1),border-radius .65s;
  box-shadow:-12px 0 30px -24px #08152b80
}
.audience-panel+.audience-panel {
  margin-left:-25px
}
.audience-panel.panel-2 {
  background:#315781;
  border-radius:100px 22px 22px 22px
}
.audience-panel.panel-3 {
  background:#637f9e;
  border-radius:22px 100px 22px 22px
}
.audience-panel.is-active {
  flex:1.65 1 0;
  border-radius:22px 60px 22px 22px
}
.audience-trigger {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  text-align:left;
  padding:40px 42px 16px;
  border:0;
  background:transparent;
  color:inherit;
  min-height:207px
}
.panel-number {
  font-size:10px;
  letter-spacing:2px;
  opacity:.75;
  margin-bottom:28px
}
.panel-label {
  font-size:12px;
  margin-bottom:14px
}
.panel-title {
  font-size:clamp(23px,2.2vw,32px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-1.2px
}
.panel-open {
  position:absolute;
  right:28px;
  top:34px;
  font-size:22px;
  transition:transform .5s
}
.is-active .panel-open {
  transform:rotate(45deg)
}
.panel-detail {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transform:translateX(45px);
  transition:grid-template-rows .6s,opacity .35s,transform .6s cubic-bezier(.22,.7,.2,1);
  position:relative;
  z-index:1
}
.panel-detail-inner {
  overflow:hidden;
  padding:0 42px
}
.panel-detail p {
  font-size:13px;
  line-height:1.95;
  margin:0;
  max-width:440px;
  color:#f0f5fc
}
.panel-tags {
  display:flex;
  gap:8px;
  margin:22px 0 32px
}
.panel-tags span {
  border:1px solid #ffffff55;
  background:#ffffff10;
  border-radius:20px;
  padding:7px 12px;
  font-size:10px;
  color:#fff
}
.is-active .panel-detail {
  grid-template-rows:1fr;
  opacity:1;
  transform:translateX(0);
  transition-delay:0s,.16s,.08s
}
.panel-decoration {
  position:absolute;
  bottom:-50px;
  right:-25px;
  width:180px;
  height:180px;
  border:1px solid #ffffff20;
  border-radius:50%;
  pointer-events:none
}
.panel-decoration:after {
  content:'';
  position:absolute;
  inset:25px;
  border:1px solid #ffffff15;
  border-radius:50%
}
.panel-2 .panel-decoration {
  border-radius:28px;
  transform:rotate(35deg)
}
.panel-3 .panel-decoration {
  width:210px;
  height:120px;
  border-radius:80px;
  transform:rotate(-35deg)
}
.audience-trigger:focus-visible {
  outline:2px solid #fff;
  outline-offset:-9px;
  border-radius:20px
}
.audience-hint {
  font-size:11px;
  color:var(--muted);
  margin:0;
  text-align:right
}
@media(max-width:1000px) and (min-width:801px) {
  .audience-trigger {
    padding:35px 30px 16px
  }
  .panel-detail-inner {
    padding:0 30px
  }
  .panel-title {
    font-size:23px
  }
}
@media(max-width:800px) {
  .audience-slider {
    flex-direction:column;
    gap:12px;
    padding:0;
    min-height:0
  }
  .audience-panel,.audience-panel.is-active {
    flex:none;
    min-height:0;
    border-radius:20px 60px 20px 20px
  }
  .audience-panel+.audience-panel {
    margin-left:0
  }
  .audience-panel.panel-2,.audience-panel.panel-3 {
    border-radius:20px 60px 20px 20px
  }
  .audience-trigger {
    min-height:185px;
    padding:27px 28px 22px
  }
  .panel-number {
    margin-bottom:18px
  }
  .panel-title {
    font-size:26px
  }
  .panel-detail-inner {
    padding:0 28px
  }
  .panel-detail p {
    font-size:13px
  }
  .audience-hint {
    text-align:left;
    line-height:1.7;
    margin-top:18px
  }
  .panel-decoration {
    width:130px;
    height:130px
  }
}
@media(prefers-reduced-motion:reduce) {
  .audience-panel,.panel-detail,.panel-open {
    transition:none!important
  }
  .panel-detail {
    transform:none
  }
}
/* Modular robot housings: chamfered panels, connector pins and status lights. */
.tools-marquee {
  padding:15px 0
}
.tools-group {
  gap:22px;
  padding-right:22px
}
.tool-logo-card,.tool-logo-card:nth-child(3n+2),.tool-logo-card:nth-child(3n) {
  position:relative;
  border-radius:0;
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
  height:160px;
  background:linear-gradient(135deg,#e7edf5,#dbe4f0);
  border:0;
  gap:18px;
  box-shadow:inset 0 0 0 1px #bbcadd;
  background-image:radial-gradient(circle at 21px 21px,#879db9 2px,transparent 3px),radial-gradient(circle at calc(100% - 21px) calc(100% - 21px),#879db9 2px,transparent 3px),linear-gradient(135deg,#e7edf5,#dbe4f0)
}
.tool-logo-card:before {
  content:'';
  position:absolute;
  left:0;
  top:58px;
  width:7px;
  height:36px;
  background:repeating-linear-gradient(to bottom,#8ca4c2 0 4px,transparent 4px 8px);
  box-shadow:269px 0 0 #b8c8dc
}
.tool-logo-card:after {
  content:'';
  position:absolute;
  right:23px;
  top:19px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#337fbc;
  box-shadow:0 0 0 4px #337fbc15
}
.tool-logo-card>small {
  padding:7px 13px;
  border:1px solid #c0cede;
  border-radius:3px;
  font-size:8px;
  letter-spacing:1.2px;
  background:#f5f8fc80
}
.tool-logo-card:hover {
  background-color:#f8fbff;
  background-image:radial-gradient(circle at 21px 21px,#879db9 2px,transparent 3px),radial-gradient(circle at calc(100% - 21px) calc(100% - 21px),#879db9 2px,transparent 3px),linear-gradient(135deg,#f8fbff,#e8eff8)
}
.tool-logo-card:focus-visible {
  outline:none;
  box-shadow:inset 0 0 0 3px #315fbd
}
.tool-logo-card.unity strong {
  color:#162a46
}
@media(max-width:800px) {
  .tools-group {
    gap:16px;
    padding-right:16px
  }
  .tool-logo-card,.tool-logo-card:nth-child(3n+2),.tool-logo-card:nth-child(3n) {
    height:145px
  }
  .tool-logo-card:before {
    box-shadow:233px 0 0 #b8c8dc
  }
}
/* Compact technology panels, retaining the hover reveal. */
#technology .audience-slider {
  width:94%;
  margin-inline:auto;
  min-height:350px;
  padding:12px 0 18px
}
#technology .audience-panel {
  min-height:330px
}
#technology .audience-trigger {
  min-height:174px;
  padding:27px 34px 12px
}
#technology .panel-number {
  margin-bottom:19px
}
#technology .panel-label {
  font-size:11px;
  margin-bottom:11px
}
#technology .panel-title {
  font-size:clamp(22px,1.95vw,28px)
}
#technology .panel-detail-inner {
  padding:0 34px
}
#technology .panel-detail p {
  font-size:12px;
  line-height:1.8
}
#technology .panel-tags {
  margin:16px 0 24px
}
#technology .panel-tags span {
  padding:6px 10px
}
#technology .panel-open {
  top:25px;
  right:28px
}
#technology .panel-decoration {
  width:140px;
  height:140px
}
#technology .audience-hint {
  width:94%;
  margin-inline:auto
}
@media(min-width:801px) {
  #technology {
    min-height:740px
  }
}
@media(max-width:800px) {
  #technology .audience-slider {
    width:100%;
    min-height:0;
    padding:0
  }
  #technology .audience-panel {
    min-height:0
  }
  #technology .audience-trigger {
    min-height:160px;
    padding:23px 25px 18px
  }
  #technology .panel-title {
    font-size:24px
  }
  #technology .panel-detail-inner {
    padding:0 25px
  }
  #technology .audience-hint {
    width:100%
  }
}
/* Rounded optical glass tiles. */
.tools-section {
  background:linear-gradient(135deg,#e0e7f1 0%,#c3cede 50%,#dce4ee 100%)
}
.tools-marquee {
  padding:27px 0 32px
}
.tools-group {
  gap:25px;
  padding-right:25px
}
.tool-logo-card,.tool-logo-card:nth-child(3n+2),.tool-logo-card:nth-child(3n) {
  clip-path:none;
  border-radius:36px;
  height:160px;
  border:1px solid #ffffff65;
  background:linear-gradient(170deg,#ffffff40 0%,#e7eef726 45%,#ffffff12 72%,#eef5ff45 100%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 2px 4px #34486440,inset 2px 0 4px #ffffff45,inset -2px 0 5px #d7e6fa55,inset 0 -5px 7px #ffffffa8,0 10px 12px -5px #253e6260,0 2px 4px #23365225;
  transition:background .25s,box-shadow .25s;
  isolation:isolate
}
.tool-logo-card:before {
  content:'';
  position:absolute;
  inset:8px 10px auto;
  width:auto;
  height:48%;
  border-radius:27px 27px 45% 45%;
  background:linear-gradient(#ffffff1f,transparent);
  box-shadow:none;
  pointer-events:none;
  z-index:-1
}
.tool-logo-card:after {
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  top:auto;
  bottom:5px;
  width:auto;
  height:13px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#f4f9ffbd,transparent);
  filter:blur(4px);
  box-shadow:none;
  pointer-events:none;
  z-index:-1
}
.tool-logo-card:hover {
  background:linear-gradient(170deg,#ffffff65,#edf4ff30 65%,#ffffff55);
  box-shadow:inset 0 2px 4px #34486430,inset 0 -5px 8px #ffffffe0,0 12px 17px -6px #253e6265,0 0 0 1px #ffffff50
}
.tool-logo-card>small {
  background:transparent;
  border:0;
  padding:0;
  color:#495d79;
  letter-spacing:1.2px
}
.tool-brand span {
  color:#465b77
}
.tool-brand strong {
  position:relative
}
.tool-logo-card:focus-visible {
  outline:3px solid #315fbd;
  outline-offset:4px;
  box-shadow:inset 0 -5px 7px #ffffffa8,0 10px 12px -5px #253e6260
}
@media(max-width:800px) {
  .tools-group {
    gap:20px;
    padding-right:20px
  }
  .tool-logo-card,.tool-logo-card:nth-child(3n+2),.tool-logo-card:nth-child(3n) {
    height:145px;
    border-radius:32px
  }
  .tool-logo-card:before {
    box-shadow:none
  }
}
.results-section {
  margin:0;
  padding:70px 8%;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:60px;
  background:#101e38;
  color:#f4f7fc;
  position:relative;
  overflow:hidden
}
.results-copy .eyebrow {
  color:#a8bfdc;
  font-size:10px;
  margin-bottom:24px
}
.results-copy h2 {
  font-size:clamp(32px,3.6vw,52px);
  line-height:1.25;
  font-weight:500;
  letter-spacing:-2px;
  margin:0 0 25px
}
.results-copy>p:last-child {
  font-size:14px;
  line-height:1.95;
  color:#bdcbdf;
  margin:0
}
.results-number {
  border-left:1px solid #ffffff25;
  padding:12px 0 12px 65px
}
.results-label {
  font-size:12px;
  color:#bdcbdf;
  margin:0 0 10px
}
.results-value {
  font-size:clamp(90px,9vw,140px);
  font-weight:500;
  letter-spacing:-7px;
  line-height:1.15;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.results-value>span {
  color:#88b9ff;
  font-size:.65em;
  vertical-align:12%;
  margin-left:9px
}
.results-value small {
  font-size:20px;
  letter-spacing:0;
  margin-left:15px;
  color:#bdcbdf
}
.results-status {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #8eb5ed50;
  background:#8eb5ed12;
  border-radius:30px;
  padding:9px 16px;
  margin-top:12px;
  font-size:12px;
  color:#d6e6fc
}
.results-status>span {
  color:#9ec5ff
}
.results-note {
  font-size:10px;
  color:#9aacc5;
  margin:18px 0 0
}
@media(max-width:800px) {
  .results-section {
    padding:45px 8%;
    grid-template-columns:1fr;
    gap:30px
  }
  .results-copy h2 {
    font-size:34px
  }
  .results-copy>p:last-child {
    font-size:13px
  }
  .results-number {
    padding:25px 0 0;
    border-left:0;
    border-top:1px solid #ffffff25
  }
  .results-value {
    font-size:100px
  }
}
.brand-symbol {
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.results-number {
  position:relative;
  min-height:300px;
}
/* Results slider: 기존 글꼴/섹션 높이를 유지하고 오른쪽 내용만 전환 */
.results-slide {
  position:absolute;
  top:12px;
  right:0;
  bottom:auto;
  left:65px;
  opacity:0;
  transform:translateX(34px);
  pointer-events:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,.7,.2,1);
}
.results-slide.is-active {
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
/* BUSINESS / CERTIFICATION 정보형 레이아웃 */
.results-info {
  margin-top:24px;
  width:min(100%,540px);
}
.results-info-row {
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  column-gap:60px;
  padding:25px 0;
  border-top:1px solid #ffffff25;
}
.results-info-row:last-child {
  border-bottom:1px solid #ffffff25;
}
.results-info-row>span {
  padding-top:4px;
  font-size:9px;
  letter-spacing:1.6px;
  color:#88b9ff;
  white-space:nowrap;
}
.results-info-row strong {
  display:block;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  color:#f4f7fc;
}
.results-info-row p {
  margin:8px 0 0;
  font-size:12px;
  line-height:1.85;
  color:#9aacc5;
}
.results-list {
  line-height:2!important
}
/* 슬라이드 표시점 */
.results-dots {
  position:absolute;
  left:65px;
  bottom:0;
  z-index:5;
  display:flex;
  gap:9px;
}
.result-dot {
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#ffffff35;
  cursor:pointer;
}
.result-dot.is-active {
  background:#88b9ff
}
.result-dot:focus-visible {
  outline:2px solid #88b9ff;
  outline-offset:4px
}
@media(max-width:800px) {
  .results-number {
    min-height:300px
  }
  .results-slide {
    top:25px;
    left:0
  }
  .results-info {
    margin-top:18px;
    width:100%
  }
  .results-info-row {
    grid-template-columns:1fr;
    row-gap:7px;
    padding:17px 0
  }
  .results-dots {
    left:0
  }
}
/* FUELLOGIC responsive refinements */
.results-slide {
  transform:none!important
}
html {
  scroll-padding-top:24px
}
body {
  overflow-wrap:break-word
}
img {
  max-width:100%
}
header {
  height:auto;
  min-height:88px;
  padding-block:18px;
  flex-wrap:wrap;
  gap:20px 30px
}
.brand {
  flex:0 0 auto;
  gap:12px;
  letter-spacing:-1px;
  line-height:1.4;
  max-width:100%;
  overflow:visible
}
.brand-name {
  white-space:nowrap;
  flex-shrink:0;
  padding-block:4px
}
.brand small {
  letter-spacing:1px;
  max-width:155px;
  line-height:1.6;
  white-space:normal
}
nav {
  flex-wrap:wrap;
  gap:16px 26px
}
nav>a {
  display:inline-flex!important;
  min-height:44px;
  align-items:center
}
nav .pill {
  white-space:normal
}
.hero-top {
  min-height:680px;
  gap:5%;
  padding-bottom:96px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)
}
.hero-top h1 {
  font-size:clamp(32px,3.4vw,54px);
  letter-spacing:-2px;
  line-height:1.3;
  word-break:keep-all
}
.hero-top h1 em {
  font-family:inherit;
  font-style:normal;
  color:#183b70
}
.hero-top .eyebrow {
  font-size:12px;
  line-height:1.7;
  letter-spacing:1.2px
}
.robot-stage {
  height:320px
}
.robot-view img {
  height:245px
}
.robot-view figcaption {
  font-size:15px;
  line-height:1.5
}
.robot-view figcaption small {
  font-size:14px
}
.robot-view.supplied:before {
  content:none
}
.robot-view.supplied img {
  visibility:visible;
  width:100%;
  height:245px;
  object-fit:contain;
  object-position:center;
  clip-path:none;
  border-radius:24px;
  background:#dce5f1
}
.scene-info h2 {
  font-size:clamp(28px,2.7vw,40px);
  line-height:1.4;
  letter-spacing:-1.2px;
  word-break:keep-all
}
.scene-description {
  font-size:16px;
  line-height:1.95;
  min-height:0;
  color:#3e506a
}
.info-row {
  font-size:15px;
  line-height:1.7;
  padding:14px 0;
  min-height:58px
}
.table-heading {
  font-size:12px;
  line-height:1.6
}
.concept-note {
  font-size:12px;
  line-height:1.7
}
.scene-info .pill {
  font-size:14px
}
.scene-controls button {
  width:40px;
  height:40px
}
.motion-control {
  min-height:40px;
  font-size:12px
}
.tools-heading h2 {
  color:#102746;
  font-weight:700
}
.tools-heading .eyebrow,.tools-heading>p:last-child,.tools-bottom,.tools-toggle {
  color:#334963
}
.tool-logo-card {
  background:#f0f5fbe6!important
}
.tool-brand span,.tool-logo-card>small {
  color:#304763
}
.tools-toggle {
  min-height:44px;
  background:#f3f7fc
}
.results-section {
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:40px;
  overflow:visible
}
.results-number {
  min-width:0;
  min-height:0;
  padding:12px 0 0 36px;
  display:grid;
  grid-template-columns:minmax(0,1fr)
}
.results-slide {
  position:relative;
  inset:auto;
  grid-area:1/1;
  min-width:0;
  align-self:start;
  visibility:hidden
}
.results-slide.is-active {
  visibility:visible
}
.results-label {
  font-size:16px;
  line-height:1.6;
  font-weight:700;
  color:#dfebff
}
.results-info {
  width:100%
}
.results-info-row {
  grid-template-columns:110px minmax(0,1fr);
  gap:20px;
  padding:22px 0
}
.results-info-row>span {
  font-size:11px;
  letter-spacing:.5px;
  color:#b6d4ff;
  white-space:normal
}
.results-info-row strong {
  font-size:19px;
  font-weight:600
}
.results-info-row p {
  font-size:15px;
  color:#d6e2f3
}
.results-note {
  font-size:13px;
  line-height:1.8;
  color:#c7d7ed
}
.results-dots {
  position:static;
  grid-row:2;
  margin-top:26px;
  align-self:center
}
.result-dot {
  width:32px;
  height:32px;
  border:10px solid #101e38;
  box-sizing:content-box;
  background:#7c91ae
}
.result-dot.is-active {
  background:#eef5ff
}
.results-toggle {
  grid-row:3;
  justify-self:start;
  margin-top:14px;
  padding:10px 14px;
  min-height:44px;
  border:1px solid #7189ac;
  border-radius:24px;
  background:transparent;
  color:#e0ebfa;
  font-size:12px
}
.experience-section {
  min-height:0;
  padding-bottom:55px
}
.experience-photo {
  width:90%;
  height:auto;
  aspect-ratio:16/9;
  margin-inline:auto
}
.experience-photo img {
  height:100%
}
#technology .panel-open {
  width:20px;
  height:20px;
  border-radius:50%;
  background:#bdd1ea;
  box-shadow:0 0 0 7px #ffffff14;
  transform:none
}
.panel-2 .panel-open {
  background:#d4e2f2!important
}
.panel-3 .panel-open {
  background:#e8f0f9!important
}
#technology .is-active .panel-open {
  background:#fff;
  transform:none
}
.platform-section {
  zoom:1
}
#robot {
  min-height:0
}
.platform-grid>* {
  min-width:0
}
.video-banner {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:19px;
  padding:38px;
  color:#f4f8ff;
  background:radial-gradient(circle at 85% 20%,#506d95 0,transparent 45%),linear-gradient(145deg,#203c61,#101e38);
  min-width:0
}
.video-kicker {
  font-size:11px;
  letter-spacing:2px
}
.video-play {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #c4d4eb80;
  background:#edf4ff16;
  font-size:21px;
  padding-left:4px;
  transition:background .2s
}
.video-banner:hover .video-play {
  background:#486891
}
.video-banner strong {
  font-size:clamp(22px,2.2vw,32px);
  font-weight:500;
  line-height:1.5;
  letter-spacing:-1px
}
.video-banner>span:not(.video-play) {
  line-height:1.8
}
.video-banner #video-description {
  font-size:14px;
  color:#d2e0f2
}
.video-link {
  font-size:13px;
  border-top:1px solid #7891b4;
  padding-top:18px;
  width:100%
}
#applications,#technology {
  min-height:0
}
.footer-contact {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:30px;
  padding:30px 0;
  border-top:1px solid var(--line)
}
.footer-contact h3 {
  font-size:16px;
  margin:0 0 10px
}
.footer-contact p {
  font-size:14px;
  color:#465972;
  line-height:1.9;
  margin:0
}
.footer-contact span {
  display:block;
  font-size:13px;
  color:#465972;
  margin-bottom:10px
}
.footer-contact a {
  font-size:15px;
  overflow-wrap:anywhere
}
.footer-contact a:hover,.footer-links a:hover {
  color:var(--blue)
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:22px;
  padding:24px 0
}
.footer-links>div {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  font-size:13px
}
.footer-bottom {
  font-size:12px;
  line-height:1.7
}
.direct-contact {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:13px;
  color:#234c92
}
select {
  width:100%;
  padding:13px;
  border:1px solid var(--line);
  background:white;
  font:inherit
}
dialog {
  max-height:90dvh;
  overflow-y:auto
}
dialog p {
  font-size:14px
}
.close {
  min-width:44px;
  min-height:44px
}
@media(max-width:1100px) {
  header {
    justify-content:center
  }
  nav {
    justify-content:center
  }
  .hero-top {
    gap:4%
  }
  .results-section {
    grid-template-columns:1fr
  }
  .results-number {
    padding-left:0;
    border-left:0;
    border-top:1px solid #ffffff35;
    padding-top:28px
  }
  .footer-contact {
    grid-template-columns:1fr 1fr
  }
  .footer-contact>div:first-child {
    grid-column:1/-1
  }
}
@media(max-width:800px) {
  header {
    padding:12px 5%;
    gap:8px
  }
  .brand {
    font-size:28px
  }
  .brand-symbol {
    width:38px;
    height:38px
  }
  .brand small {
    font-size:8px;
    max-width:140px
  }
  nav {
    width:100%;
    gap:4px 18px;
    font-size:12px
  }
  nav .pill {
    padding:8px 14px;
    font-size:12px
  }
  .hero-top {
    display:block;
    min-height:0;
    padding:32px 6% 96px
  }
  .hero-top h1 {
    font-size:clamp(30px,6.2vw,46px);
    letter-spacing:-1.4px
  }
  .hero-top .eyebrow {
    font-size:11px
  }
  .robot-stage {
    height:310px
  }
  .robot-view.supplied img {
    height:235px
  }
  .hero-top .info-window {
    margin-top:12px;
    min-height:0;
    padding:23px 18px;
    overflow:hidden
  }
  .scene-info h2 {
    font-size:28px
  }
  .scene-description {
    font-size:16px
  }
  .info-row {
    font-size:14px;
    gap:8px
  }
  .scene-controls {
    left:6%;
    bottom:24px;
    gap:4px
  }
  .scene-controls button {
    width:34px;
    height:38px
  }
  .motion-control {
    right:6%;
    bottom:24px;
    padding:8px 10px;
    gap:5px
  }
  .experience-photo {
    height:auto;
    aspect-ratio:4/3;
    width:90%;
    border-radius:24px
  }
  .results-section {
    padding:42px 6%;
    gap:28px
  }
  .results-info-row {
    grid-template-columns:1fr;
    gap:10px
  }
  .results-info-row strong {
    font-size:19px
  }
  .results-info-row p {
    font-size:15px
  }
  .results-value {
    font-size:90px;
    letter-spacing:-4px
  }
  .results-dots {
    margin-top:16px
  }
  .video-banner {
    padding:30px;
    min-height:330px
  }
  .use-panel {
    grid-template-columns:1fr
  }
  .footer-contact {
    grid-template-columns:1fr
  }
  .footer-contact>div:first-child {
    grid-column:auto
  }
  .footer-top {
    gap:18px
  }
  #robot .platform-heading h2 {
    font-size:30px
  }
  #contact h2 {
    font-size:clamp(28px,6vw,42px);
    line-height:1.35
  }
  .audience-trigger {
    padding-right:55px!important
  }
  .panel-title {
    word-break:keep-all
  }
  .tools-bottom {
    flex-wrap:wrap
  }
  .tools-bottom>span {
    max-width:none
  }
  .section-top h2 {
    word-break:keep-all
  }
}
@media(max-width:380px) {
  .brand small {
    max-width:108px
  }
  .hero-top {
    padding-inline:5%
  }
  .scene-controls {
    left:5%
  }
  .motion-control {
    right:5%;
    font-size:11px
  }
  .scene-controls button {
    width:29px
  }
  .robot-stage {
    height:275px
  }
  .robot-view.supplied img {
    height:200px
  }
  .scene-info h2 {
    font-size:25px
  }
  .hero-top .info-window {
    padding:20px 14px
  }
  .results-value {
    font-size:76px
  }
  .pill {
    gap:16px
  }
  #technology .panel-title {
    font-size:22px
  }
}
@media(prefers-reduced-motion:reduce) {
  .results-slide {
    transition:none
  }
  .scene-info,.robot-view {
    will-change:auto
  }
}
body {
  font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif
}
header nav {
  font-size:17px;
  font-weight:750;
  letter-spacing:-.45px;
  gap:22px
}
header nav .pill {
  font-size:15px;
  font-weight:700
}
.brand {
  font-weight:850
}
.hero-top h1 {
  font-weight:850;
  line-height:1.28;
  letter-spacing:-2px;
  font-size:clamp(34px,3.5vw,54px);
  perspective:800px;
  min-height:2.6em
}
.hero-top h1 span,.hero-top h1 em {
  display:block
}
.hero-top h1 em {
  font-weight:850
}
.scene-info h2,.section-top h2,.platform-heading h2,.experience-section h2 {
  font-weight:750
}
.platform-card h3,.use-copy h3 {
  font-weight:700
}
.motion-control {
  width:44px;
  height:44px;
  padding:0;
  justify-content:center;
  border-color:#b4c4d9;
  background:#edf3f9;
  bottom:23px
}
.motion-control .motion-text {
  display:none
}
.tools-toggle,.results-toggle {
  font-size:0;
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center
}
.tools-toggle:before,.results-toggle:before {
  content:'■';
  font-size:13px
}
.tools-toggle[aria-pressed=true]:before,.results-toggle[aria-pressed=true]:before {
  content:'▶'
}
.results-toggle {
  background:#ffffff0c
}
.market-channels {
  display:flex;
  gap:12px;
  margin:24px 0
}
.market-channels span {
  padding:10px 21px;
  border:1px solid #96b8e3;
  border-radius:999px;
  color:#e2eeff;
  font-size:22px;
  font-weight:750
}
.market-title {
  font-size:clamp(28px,3vw,42px);
  line-height:1.35;
  letter-spacing:-1.2px;
  margin:24px 0;
  font-weight:750
}
.market-description {
  color:#d2e1f4;
  font-size:15px;
  line-height:1.9
}
.customer-chips {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:22px 0
}
.customer-chips span {
  border-radius:8px;
  border:1px solid #57769c;
  padding:9px 13px;
  font-size:14px;
  background:#ffffff08
}
.results-status {
  font-size:13px
}
.company-info {
  border-top:1px solid var(--line);
  padding:25px 0;
  color:#465972;
  font-size:13px;
  line-height:1.9
}
.company-info p {
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  margin:5px 0
}
.legal-titles button,.notice-open {
  border:0;
  background:transparent;
  color:inherit;
  font-weight:700;
  padding:10px 0;
  min-height:44px
}
.legal-titles button:hover {
  text-decoration:underline
}
.notice-open {
  display:flex;
  gap:7px;
  align-items:center;
  font:inherit
}
.notice-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#477ac7
}
.dialog-close {
  position:absolute;
  right:18px;
  top:16px;
  border:0;
  background:transparent;
  color:inherit;
  width:44px;
  height:44px;
  font-size:28px;
  border-radius:50%
}
.dialog-close:hover {
  background:#8a9db320
}
.info-dialog {
  width:min(840px,94vw);
  padding:36px;
  border-radius:24px
}
.info-dialog h2 {
  font-size:30px;
  margin-top:12px
}
.info-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
  margin-bottom:24px
}
.info-tabs button {
  border:1px solid var(--line);
  border-radius:30px;
  background:transparent;
  color:var(--ink);
  padding:12px 17px;
  font-size:14px;
  font-weight:700;
  min-height:44px
}
.info-tabs button[aria-selected=true] {
  background:var(--navy);
  color:white
}
.info-dialog h3 {
  font-size:18px;
  line-height:1.5;
  margin:28px 0 12px
}
.info-dialog p {
  font-size:15px;
  line-height:1.95;
  color:#40516a
}
.info-dialog .draft-note {
  background:#e4ebf5;
  padding:18px;
  border-radius:12px;
  font-size:13px
}
.help-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.help-cards>a {
  padding:24px;
  background:#e4ebf5;
  border-radius:16px;
  min-width:0
}
.help-cards h3 {
  margin-top:16px
}
.help-cards strong {
  font-size:14px;
  overflow-wrap:anywhere
}
.help-cards small {
  font-size:10px;
  letter-spacing:1px
}
.info-dialog details {
  border-bottom:1px solid var(--line);
  padding:17px 0
}
.info-dialog summary {
  cursor:pointer;
  line-height:1.7;
  font-weight:700;
  font-size:15px
}
.notice-dialog {
  width:min(460px,92vw);
  border-radius:24px;
  padding:34px;
  background:linear-gradient(145deg,#f3f6fb,#e3ebf7)
}
.notice-dialog .eyebrow {
  padding-right:25px;
  font-size:10px
}
.notice-art {
  display:grid;
  place-items:center;
  width:90px;
  height:90px;
  background:#173653;
  color:#c7dcf7;
  border-radius:24px 44px 24px 24px;
  font-size:50px;
  font-weight:800;
  margin:25px 0
}
.notice-dialog h2 {
  font-size:32px;
  line-height:1.35;
  font-weight:800
}
.notice-dialog p {
  line-height:1.9
}
.notice-dialog .sample-caption {
  font-size:12px;
  color:#556984
}
.notice-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:24px;
  border-top:1px solid #c6d3e4;
  padding-top:16px
}
.notice-bottom label {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12px
}
.notice-bottom input {
  width:18px;
  height:18px
}
.notice-bottom button {
  border:0;
  background:transparent;
  min-height:44px;
  padding:10px
}
#chat-launcher {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:8;
  background:#152e50;
  color:#fff;
  border:1px solid #6683aa;
  box-shadow:0 8px 30px #101e3830;
  border-radius:40px;
  padding:15px 19px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px
}
#chat-launcher small {
  font-size:9px;
  color:#c4d8f5;
  letter-spacing:1px
}
#chat-dialog {
  position:fixed;
  inset:auto 22px 22px auto;
  margin:0;
  width:min(410px,calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  height:620px;
  border-radius:24px;
  padding:0;
  overflow:hidden
}
#chat-dialog[open] {
  display:flex;
  flex-direction:column
}
.chat-heading {
  position:relative;
  padding:24px 62px 18px 23px;
  background:#152e50;
  color:white
}
.chat-heading small {
  font-size:9px;
  letter-spacing:1.6px
}
.chat-heading h2 {
  font-size:22px;
  line-height:1.4;
  margin:10px 0 0
}
.chat-mode {
  font-size:11px!important;
  background:#e4edf8;
  margin:0;
  padding:12px 20px;
  color:#3b5678!important
}
#chat-messages {
  flex:1;
  min-height:100px;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:13px
}
.chat-message {
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:93%
}
.chat-message.bot {
  background:#e1e9f4;
  align-self:flex-start
}
.chat-message.user {
  background:#183858;
  color:white;
  align-self:flex-end
}
.chat-suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 17px 12px
}
.chat-suggestions button {
  border:1px solid #b8c9df;
  background:#f6f8fc;
  border-radius:20px;
  min-height:38px;
  padding:8px 12px;
  font-size:12px
}
#chat-form {
  display:flex;
  gap:8px;
  margin:0;
  padding:0 16px
}
#chat-input {
  min-width:0;
  border-radius:12px;
  font-size:14px
}
#chat-form button {
  flex-shrink:0;
  width:44px;
  border:0;
  background:#173653;
  border-radius:12px;
  color:white;
  font-size:24px
}
#chat-form button:disabled {
  opacity:.5
}
.chat-foot {
  font-size:10px!important;
  padding:0 18px;
  margin:12px 0 18px
}
.chat-foot button {
  border:0;
  background:transparent;
  text-decoration:underline;
  font-size:11px;
  padding:8px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
@media(max-width:1100px) {
  header nav {
    gap:18px;
    font-size:16px
  }
}
@media(max-width:800px) {
  header nav {
    gap:3px 17px;
    font-size:14px
  }
  header nav .pill {
    font-size:13px
  }
  .hero-top h1 {
    font-size:clamp(29px,6.4vw,44px);
    letter-spacing:-1.3px
  }
  .scene-controls {
    gap:4px
  }
  .motion-control {
    right:6%
  }
  .help-cards {
    grid-template-columns:1fr
  }
  .info-dialog {
    padding:27px 20px
  }
  .info-tabs button {
    font-size:12px;
    padding:10px 12px
  }
  .info-dialog .eyebrow {
    font-size:9px;
    letter-spacing:1px;
    padding-right:25px
  }
  .company-info p {
    flex-direction:column;
    gap:5px
  }
  .market-title {
    font-size:30px
  }
  .market-description br {
    display:none
  }
  #chat-launcher {
    right:15px;
    bottom:16px;
    padding:12px 15px
  }
  #chat-dialog {
    right:14px;
    bottom:14px
  }
  .footer-bottom {
    padding-bottom:70px
  }
}
@media(prefers-reduced-motion:reduce) {
  #hero-headline {
    transform:none!important
  }
}
/* Brighter moving surfaces and coordinated image frames. */
.hero-top {
  background:linear-gradient(135deg,#fff,#f2f8ff)
}
.color-surface,.color-glow {
  background:#badcff
}
.color-surface:after {
  background:linear-gradient(140deg,#ffffff65,transparent 60%,#a7c9ff15)
}
.color-glow {
  opacity:.25
}
.robot-view.supplied img {
  background:linear-gradient(125deg,#edf8ff,#d3e6ff 55%,#e3eaff);
  border:1px solid #ffffffb0;
  box-shadow:0 18px 30px -20px #42679155
}
.robot-view.full img {
  background-color:#e0efff
}
.hero-top .info-window {
  border-radius:20px
}
.motion-control,.tools-toggle,.results-toggle {
  display:none!important
}
.sim-example {
  position:relative;
  margin:25px 0 0;
  border-radius:16px;
  overflow:hidden;
  background:#dceaff;
  aspect-ratio:16/10
}
.sim-example img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.sim-example figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:12px 14px;
  background:#102640dc;
  color:#fff;
  font-size:11px;
  line-height:1.6
}
.research-video {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  background:#142d4b;
  padding:24px;
  color:#fff;
  gap:16px
}
.research-video h3 {
  font-size:22px;
  line-height:1.4;
  margin:0
}
.research-video>p {
  font-size:11px;
  letter-spacing:1.5px;
  margin:0;
  color:#c3d8f5
}
.video-viewport {
  aspect-ratio:16/9;
  position:relative;
  background:#061322;
  border-radius:14px;
  overflow:hidden
}
.video-viewport iframe {
  width:100%;
  height:100%;
  border:0;
  display:block
}
.video-cover {
  width:100%;
  height:100%;
  border:0;
  background:radial-gradient(circle at 80% 20%,#6596c4,transparent 65%),linear-gradient(145deg,#315b83,#0d223d);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  font-size:14px;
  font-weight:700
}
.video-cover span {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border-radius:50%;
  background:#eef6ff;
  color:#163653;
  font-size:23px;
  padding-left:4px
}
.video-help {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
  font-size:12px;
  line-height:1.8;
  color:#c3d8f5
}
.video-help a {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px
}
.social-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px!important;
  align-items:center
}
.social-links a {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #bacbe0;
  background:#e8eff8;
  color:#142e50;
  display:grid;
  place-items:center;
  transition:background .2s,transform .2s
}
.social-links a:hover {
  background:#d1e1f4;
  transform:translateY(-2px)
}
.social-links svg {
  width:21px;
  height:21px;
  fill:currentColor
}
.social-links .naver-n {
  font-size:22px;
  font-weight:900;
  line-height:1;
  font-family:Arial,sans-serif
}
@media(max-width:800px) {
  .research-video {
    padding:22px
  }
  .research-video h3 {
    font-size:22px
  }
  .robot-view.supplied img {
    border-radius:22px
  }
}
.robot-view.supplied img {
  background:radial-gradient(ellipse at 25% 20%,#f6ecdd,#e5d4bb);
  border-color:#f8f0e4;
  box-shadow:0 18px 28px -20px #725e4560
}
.use-emphasis {
  color:#315f9a
}
.research-video {
  padding:20px 26px;
  gap:10px;
  min-height:280px
}
.research-video>p {
  display:none
}
.research-video h3 {
  font-size:16px;
  margin:0
}
.video-viewport {
  width:min(100%,360px);
  aspect-ratio:16/9;
  align-self:center;
  border-radius:12px
}
.video-cover {
  font-size:13px;
  text-align:center;
  line-height:1.7;
  gap:12px
}
.video-cover span {
  width:48px;
  height:48px;
  font-size:18px
}
.video-help {
  font-size:11px;
  justify-content:center
}
.use-panel {
  min-height:310px;
  align-items:stretch
}
.use-copy {
  min-width:0
}
@media(max-width:800px) {
  .research-video {
    padding:20px;
    min-height:280px
  }
  .video-viewport {
    width:min(100%,340px)
  }
}
/* Editorial scale: headings establish hierarchy, supporting copy remains readable. */
.robot-view.supplied {
  overflow:visible
}
.robot-view.supplied img {
  width:90%;
  height:245px;
  object-fit:cover;
  border:0;
  border-radius:78px 28px 68px 30px;
  box-shadow:0 18px 25px -12px #23354b50,0 5px 10px #6f63471a;
  background:#e4d9c9
}
.robot-view.face.supplied img {
  border-radius:32px 72px 30px 66px
}
.robot-view.supplied figcaption {
  padding-top:23px
}
.section-top>p,.platform-heading>p:last-child,.platform-card p,.use-copy p,.manifesto p {
  font-size:16px;
  line-height:1.85
}
.platform-step,.platform-foot {
  font-size:12px;
  line-height:1.7
}
.platform-card h3 {
  font-size:clamp(23px,2.1vw,29px);
  line-height:1.4
}
.tool-brand span {
  font-size:12px
}
.tool-logo-card>small {
  font-size:10px;
  letter-spacing:.7px
}
.tools-heading>p:last-child {
  font-size:14px
}
.tools-bottom {
  font-size:12px
}
.eyebrow {
  font-size:12px;
  line-height:1.7
}
.table-heading {
  font-size:12px
}
.info-row {
  font-size:15px
}
.concept-note {
  font-size:12px;
  color:#4e6076
}
.use-tabs button {
  font-size:14px;
  font-weight:650;
  min-height:44px
}
#technology .panel-label {
  font-size:13px
}
#technology .panel-detail p {
  font-size:15px;
  line-height:1.85
}
#technology .panel-tags span {
  font-size:12px
}
.audience-hint {
  font-size:12px
}
.footer-contact p,.company-info {
  font-size:14px
}
.footer-links>div {
  font-size:14px
}
.video-help {
  font-size:12px
}
.research-video h3 {
  font-size:17px
}
.sim-example figcaption {
  font-size:12px
}
@media(max-width:800px) {
  .robot-view.supplied img {
    width:100%;
    height:235px;
    border-radius:64px 24px 55px 26px
  }
  .robot-view.face.supplied img {
    border-radius:26px 58px 24px 55px
  }
  .platform-heading>p:last-child,.platform-card p,.section-top>p,.use-copy p,.manifesto p {
    font-size:15px
  }
  .platform-card h3 {
    font-size:25px
  }
  #technology .panel-detail p {
    font-size:14px
  }
  .hero-top .eyebrow {
    font-size:11px
  }
  .info-row {
    font-size:14px
  }
  .scene-description {
    font-size:16px
  }
  .use-tabs button {
    padding:11px 16px;
    font-size:13px
  }
  .tool-brand span {
    font-size:11px
  }
  .platform-foot {
    font-size:12px
  }
}
@media(max-width:380px) {
  .robot-view.supplied img {
    height:200px
  }
  .robot-view.supplied figcaption {
    padding-top:20px
  }
  .platform-card h3 {
    font-size:23px
  }
}
/* 2026-09-18: 에이전트 이미지와 시스템 통합 카드. */
.robot-view.agent-view {
  overflow:visible
}
.robot-view.agent-view:before {
  content:none
}
.robot-view.agent-view img {
  visibility:visible;
  width:90%;
  height:245px;
  object-fit:cover;
  object-position:center;
  border-radius:88px 28px 70px 30px;
  box-shadow:0 18px 25px -12px #23354b50;
  clip-path:none
}
.robot-view.agent-view figcaption {
  padding-top:23px
}
.info-row>span:first-child {
  min-width:78px;
  flex-shrink:0
}
.workflow-connections {
  padding:22px 0
}
.workflow-connections>div {
  grid-template-columns:44px minmax(0,1fr);
  padding:18px 15px;
  gap:4px 12px
}
.workflow-connections .workflow-icon {
  grid-row:1/3;
  display:block;
  color:#264f78
}
.workflow-icon svg {
  display:block;
  width:42px;
  height:42px
}
.workflow-connections span:not(.connection-line):not(.workflow-icon) {
  font-size:20px;
  font-weight:700
}
.workflow-connections small {
  font-size:12px;
  line-height:1.7
}
.company-identity-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.company-identity-row>p {
  flex:1;
  min-width:0
}
.company-identity-row .social-links {
  flex-shrink:0
}
@media(max-width:800px) {
  .robot-view.agent-view img {
    width:100%;
    height:235px;
    border-radius:64px 24px 55px 26px
  }
  .company-identity-row {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .company-identity-row>p {
    flex-basis:100%
  }
  .company-identity-row .social-links {
    margin-left:auto
  }
  .info-row>span:first-child {
    min-width:72px
  }
  .info-row strong {
    overflow-wrap:anywhere
  }
}
@media(max-width:380px) {
  .robot-view.agent-view img {
    height:200px
  }
}




/* =========================
   STORE DROPDOWN
========================= */
/* styles.css 마지막 STORE DROPDOWN 블록 전체를 이 코드로 교체 */
header:has(.nav-dropdown) {
  position: relative;
  z-index: 30;
  overflow: visible;
}
nav:has(.nav-dropdown), .nav-dropdown {
  position: static;
}
.nav-dropdown { flex-shrink: 0; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.nav-dropdown-trigger[aria-expanded="true"] {
  color: #285bd2;
  box-shadow: inset 0 -3px #285bd2;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 31;
  padding: 32px 6% 36px;
  border-top: 1px solid #dbe3ef;
  border-bottom: 1px solid #dbe3ef;
  background: rgba(252, 253, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 26px -20px #142a4655;
}
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 22px;
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: min(100%, 1020px);
  margin: auto;
}
.nav-dropdown-products a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  color: #14243c;
  text-align: center;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  transition: background .18s, color .18s;
}
.nav-dropdown-products img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .18s;
}
.nav-dropdown-products a:hover,
.nav-dropdown-products a:focus-visible {
  background: rgba(229, 238, 250, .65);
  color: #285bd2;
}
.nav-dropdown-products a:hover img { transform: translateY(-3px); }
.nav-dropdown-trigger:focus-visible,
.nav-dropdown-products a:focus-visible {
  outline: 2px solid #285bd2;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .nav-dropdown-menu { padding: 20px 4% 24px; }
  .nav-dropdown-products { gap: 8px; }
  .nav-dropdown-products a { padding: 4px; gap: 12px; font-size: 14px; }
  .nav-dropdown-products img { height: 90px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-products a, .nav-dropdown-products img { transition: none; }
}