/* V3 material system. Detailed content and real app captures stay opaque. */
:root {
  --bg:#edf2f1; --surface:#e5eeec;
  --glass:linear-gradient(145deg,#ffffffe8,#ffffffa6 48%,#eef7f4bb);
  --glass-edge:#ffffffd9;
  --glass-shadow:0 24px 64px -32px #193b3a45,0 5px 16px -10px #12363438,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff6b;
  --glass-blur:blur(24px) saturate(145%);
}
body {background:radial-gradient(ellipse at 0 22%,#c8e7de80,transparent 37%),radial-gradient(ellipse at 100% 49%,#d3ddf58c,transparent 34%),var(--bg)}
.nav,.nav.solid,.nav.open {
  border:1px solid #ffffff94;border-radius:32px;
  background:linear-gradient(120deg,#ffffff38,#ffffff14);
  -webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
  box-shadow:0 12px 34px -18px #07182055,inset 0 1px 0 #ffffff70;
}
.nav.solid,.nav.open {background:linear-gradient(120deg,#ffffffe6,#f3f8f6cf)}
.nav-in {height:66px}
.nav-links .nav-demo,.nav.solid .nav-links .nav-demo {
  border:1px solid #ffffff50;background:linear-gradient(150deg,#183e3be8,#0e1a24ed);color:white;
  box-shadow:inset 0 1px 0 #ffffff45,0 4px 9px #0e1a241a;
}
.nav-links a:not(.nav-demo) {transition:color .2s,opacity .2s}
.nav-links a:not(.nav-demo):hover {opacity:.65}
.hero-fragment {
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:28px;
}
.hero-device {
  background:linear-gradient(140deg,#ffffffaa,#dbeae32b 45%,#ffffffa8);border-color:#e5f1eb8c;
  box-shadow:0 35px 65px -18px #061c2b8c,inset 0 1px 3px #fff;
}
.hero .btn-primary {
  background:linear-gradient(145deg,#eef784,#ddeb5a 75%);border:1px solid #f4fbb9;
  box-shadow:0 10px 30px -12px #091f2873,inset 0 1px 0 #fff9;
}
.hero .hero-pause,.plan-controls button {
  background:#ffffffb8;border:1px solid #ffffffd4;color:var(--ink);
  box-shadow:inset 0 1px 0 white,0 4px 12px #173c3214;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hero-info.wrap {
  background:radial-gradient(ellipse at 0 0,#23574c,transparent 70%),#102e2d;
  border:1px solid #ffffff8c;border-radius:36px;box-shadow:var(--glass-shadow);
}
.onb-workspace {
  background:radial-gradient(ellipse at 8% 0,#a3d9ce73,transparent 54%),radial-gradient(ellipse at 100% 90%,#aebce260,transparent 56%),linear-gradient(130deg,#ffffff6b,#ffffff30);
  border:1px solid #fffffff0;border-radius:36px;box-shadow:var(--glass-shadow);
}
.onb-card,.onb-learn,.feature-0 .tslot,.feature-3 .feature-visual,.roi-stat,.roi-calc,.roi-rep {
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:28px;
}
.onb-top {background:#ffffff4d;border-color:#aec4bd55}
.onb-chat .om.q {background:#d4e5df91}
.onb-learn {background:#ffffffad}
.onb-workspace .property-map {border-radius:14px;border-color:#fff;box-shadow:0 16px 36px -18px #24443c52,0 1px 2px #163e3626}
.feature-0,.feature-2,.feature-3,.roi {background:transparent}
.feature-0 .feature-visual {
  background:radial-gradient(ellipse at 15% 30%,#b6ddcd99,transparent 60%),radial-gradient(ellipse at 90% 75%,#bacce491,transparent 55%);border-radius:42px;
}
.feature-0 .tslot {background:linear-gradient(130deg,#ffffffdc,#ffffff9c)}
.feature-0 .t-wx {background:linear-gradient(130deg,#e4f3ecc9,#eef5edc7);border-radius:20px}
.feature-0 .t-up,.feature-0 .t-open {border-radius:18px}
.feature-1 {
  background:radial-gradient(ellipse at 15% 0,#517fe0a6,transparent 55%),radial-gradient(ellipse at 95% 95%,#21898580,transparent 58%),#213987;
}
.source-sheet {
  background:linear-gradient(140deg,#fffffff5,#eaf0f8e6);border:1px solid #fff;border-radius:22px;
  box-shadow:0 25px 55px -25px #06193c70,inset 0 1px 0 white;
}
.department-card {
  background:linear-gradient(130deg,#ffffffed,#e5ecf8d9);border:1px solid #ffffffb3;border-radius:18px;
  box-shadow:0 9px 25px -16px #04112f8c,inset 0 1px 0 #fff;
}
.feature-2 {background:radial-gradient(ellipse at 25% 60%,#b0dcd699,transparent 43%),radial-gradient(ellipse at 80% 10%,#d1d9f078,transparent 50%)}
.ask-device {
  background:linear-gradient(145deg,#ffffffd4,#b2cbc36b 50%,#fff9);border-color:#ffffffcc;
  box-shadow:0 38px 75px -30px #18443d66,inset 0 1px 2px white;
}
.ask-device .tscreen {background:#f8faf7}
.t-chips button {background:linear-gradient(150deg,#fff,#ecf2ef);border-color:#ccd9d3;box-shadow:0 2px 4px #173e3310,inset 0 1px 0 #fff}
.feature-3 .feature-visual {background:radial-gradient(ellipse at 90% 0,#cee4ddbf,transparent 65%),var(--glass);border-radius:36px}
.t-th .tm-msg,.t-th .t-card,.t-th .t-push,.t-th .t-acks {border-radius:18px;box-shadow:0 8px 24px -19px #163e3666,inset 0 1px 0 #fff8}
.feature-4 {background:radial-gradient(ellipse at 85% 20%,#24655e80,transparent 60%),radial-gradient(ellipse at 0 100%,#233858a3,transparent 55%),#0e1a24}
.feature-4 .t-al {background:linear-gradient(130deg,#ffffff1f,#ffffff0d);border:1px solid #d9fff42e;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff24,0 12px 30px -20px #0008}
.feature-4 .t-al.resolved {background:#335d4c94}
.roi {background:radial-gradient(ellipse at 100% 35%,#d6e6f196,transparent 55%)}
.roi-stat {border:1px solid #ffffffe6!important}
.roi-stat:first-child {background:radial-gradient(ellipse at 0 0,#f8ffc9,transparent 75%),linear-gradient(130deg,#e3ef87cf,#e0f1bac9)}
.roi-rep {background:linear-gradient(130deg,#cbe3dc9c,#ffffffb3)}
.roi-rep .rep {border-radius:12px}
.roi-out {background:radial-gradient(ellipse at 0 0,#2d6057,transparent 75%),#102c2b;box-shadow:inset 0 1px 0 #ffffff40}
.statement {background:radial-gradient(ellipse at 85% 10%,#307c6c,transparent 62%),linear-gradient(145deg,#153e3b,#0c292c)}
.demo {background:radial-gradient(ellipse at 50% 100%,#c0dacf91,transparent 68%),var(--bg)}
.demo-dialog {
  background:linear-gradient(145deg,#fffffff5,#f1f8f2e8);border:1px solid #fff;border-radius:32px;
  -webkit-backdrop-filter:blur(32px) saturate(140%);backdrop-filter:blur(32px) saturate(140%);
  box-shadow:0 40px 120px #061b2952,inset 0 1px 0 #fff;
}
.demo-dialog::backdrop {background:#102b354f;backdrop-filter:blur(14px)}
.demo-close {background:#e3ede7b3;border:1px solid white}
.demo-dialog input,.demo-dialog textarea {background:#ffffffd9;border-color:#bfcfc7;border-radius:12px;box-shadow:inset 0 2px 3px #143b3010}
footer {background:#f5f8f4}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .nav {background:#17312ef5}
  .nav.solid,.nav.open {background:#f5f8f4fa}
  .hero-fragment,.onb-card,.onb-learn {background:#f2f7f3f5}
}
@media (prefers-reduced-transparency:reduce) {
  :root {--glass:#f7faf6;--glass-blur:none}
  .nav {background:#17312e;backdrop-filter:none}
  .nav.solid,.nav.open {background:#f5f8f4}
  .demo-dialog {background:#f7faf6;backdrop-filter:none}
  .demo-dialog::backdrop {backdrop-filter:none}
}
@media (max-width:700px) {
  :root {--glass-blur:blur(12px) saturate(125%)}
  .nav,.nav.solid,.nav.open {border-radius:26px}
  .nav-in {height:56px}
  .hero-fragment {border-radius:20px}
  .hero-info.wrap,.onb-workspace,.feature-3 .feature-visual {border-radius:26px}
  .onb-card,.onb-learn,.feature-0 .tslot,.roi-stat,.roi-calc,.roi-rep {border-radius:22px}
  .onb-card,.onb-learn,.feature-0 .tslot,.feature-3 .feature-visual,.roi-stat,.roi-calc,.roi-rep {-webkit-backdrop-filter:none;backdrop-filter:none}
  .source-sheet {border-radius:16px}
  .department-card {border-radius:14px}
  .demo-dialog {border-radius:26px}
}
.hero-device {background:none;box-shadow:none}
.hero-device-frame {background:linear-gradient(145deg,#dce9e9,#7b9996);border-color:#eef7f5b3;box-shadow:0 35px 65px -18px #061c2b8c,inset 0 1px 3px #fff}
.hero .hero-pause {border-radius:50%}

/* Keep each Alerts action on its own line at every viewport. */
.feature-4 .tc h2 .solve-phrase { white-space: nowrap; }

/* Blender-authored geometry with a static app fallback until WebGL is ready. */
.hero { --hero-motion-state: paused; }
.device-stage { position:relative; width:100%; aspect-ratio:7.4/15.8; }
.device-stage canvas { position:absolute; inset:-3% -12%; width:124%; height:106%; display:block; opacity:0; transition:opacity .35s; }
.device-stage .hero-device-frame {position:absolute;inset:0;padding:5px;border:1px solid #d9dfe2;border-radius:32px;background:#171c20;box-shadow:inset 0 0 0 2px #98a2a7;transition:opacity .35s;}
.device-stage .hero-device-frame img {width:100%;height:100%;border-radius:26px;object-fit:cover;}
.device-stage.model-ready canvas {opacity:1;}
.device-stage.model-ready .hero-device-frame {opacity:0;}
.hero-fragment {
  animation:card-drift 7s ease-in-out infinite;
  animation-play-state:var(--hero-motion-state);
}
.fragment-update {animation-name:card-drift-other;animation-duration:8.5s;}
.fragment-track i {transform-origin:left;animation:card-progress 7s ease-in-out infinite;animation-play-state:var(--hero-motion-state);}
.fragment-check {animation:card-check 8.5s ease-in-out infinite;animation-play-state:var(--hero-motion-state);}
@keyframes card-drift {0%,100% {translate:0 0;rotate:0deg;}50% {translate:0 -12px;rotate:1.5deg;}}
@keyframes card-drift-other {0%,100% {translate:0 0;rotate:0deg;}50% {translate:0 10px;rotate:-1.5deg;}}
@keyframes card-progress {0%,100% {scale:.82 1;}50%,80% {scale:1 1;}}
@keyframes card-check {0%,65%,100% {scale:1;}74% {scale:1.1;}84% {scale:1;}}
@media(max-width:600px) {
  .device-stage .hero-device-frame {border-radius:27px;}
  .hero .hero-device-frame img {border-radius:24px;}

  .hero-fragment {animation-name:card-drift-mobile;}
  .fragment-update {animation-direction:reverse;}
  @keyframes card-drift-mobile {0%,100% {translate:0 0;}50% {translate:0 -6px;}}
}
@media(prefers-reduced-motion:reduce) {
  .hero-fragment,.fragment-track i,.fragment-check {animation:none!important;}

}


/* Team messages and receipt cards: readable content inside the glass shell. */
.feature-3 .t-th .tm-msg { color: #0e1a24; }
.feature-3 .t-th .tm-msg.q { background: #e0eeeb; color: #0e1a24; }
.feature-3 .t-th .tm-msg small { color: #375b55; opacity: 1; }
.feature-3 .t-th .t-acks {
  padding: 14px;
  gap: 10px;
  align-content: start;
  align-items: stretch;
}
.feature-3 .t-acks .ack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 88px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #d5e2dd;
  background: #f5f8f6;
  color: #0e1a24;
  line-height: 1.25;
}
.feature-3 .t-acks .ack span { font-size: 13px; padding-right: 10px; }
.feature-3 .t-acks .ack em {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  color: #375b55;
}
.feature-3 .t-acks .ack.ok { background: #edf5f1; border-color: #cfdfd6; }
.feature-3 .t-acks .ack.wait { background: #f4f6df; border-color: #e0e6b8; color: #3f4b21; }
.feature-3 .t-acks .ack.wait em { color: #52602b; }
.feature-3 .t-acks .ack::after {
  content: ''; position: absolute; right: 12px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: #a4b6ad;
}
.feature-3 .t-acks .ack.ok::after { background: #0f6e6a; }
.feature-3 .t-acks .ack.wait::after { background: #7e8734; }
@media (max-width: 600px) {
  .feature-3 .t-th .tm-msg { font-size: 14px; line-height: 1.55; }
  .feature-3 .t-th .tm-msg small { font-size: 10px; margin-bottom: 8px; }
  .feature-3 .t-th .t-acks { padding: 12px; gap: 8px; }
  .feature-3 .t-acks .ack { padding: 14px 12px; min-height: 86px; }
}

/* Keep every rotating phrase inside the courtyard's central opening. */
.hero h1 { font-size: clamp(58px, 5.7vw, 92px); }
.hero .rot {
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.1;
  height: 1.25em;
  margin-top: 12px;
  letter-spacing: -.045em;
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .hero .rot { font-size: clamp(27px, 7.4vw, 38px); margin-top: 10px; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .hero h1 { font-size: 64px; }
  .hero .rot { font-size: 44px; margin-top: 8px; }
}


/* Custom relay: two offset open enclosures pass one detail between them. */
.relay-mark {
  display:inline-block;width:28px;height:28px;flex:0 0 auto;
  vertical-align:middle;overflow:visible;color:inherit;
}
.relay-mark path {stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
.relay-mark .relay-link {stroke-width:1.25;opacity:.45;}
.relay-mark .relay-packet {fill:currentColor;stroke:none;}
.relay-origin,.relay-destination,.relay-packet {transition:transform .35s cubic-bezier(.2,.7,.2,1);}
:is(a,button,summary,.hero-fragment):is(:hover,:focus-visible) .relay-packet {transform:translateX(8px);}
:is(a,button,summary,.hero-fragment):is(:hover,:focus-visible) .relay-destination {transform:translateX(1.5px);}
:is(a,button,summary,.hero-fragment):is(:hover,:focus-visible) .relay-origin {transform:translateX(-1px);}
.nav-demo .relay-mark {width:22px;height:22px;}
.fragment-icon {line-height:1;}
.fragment-icon .relay-mark {width:30px;height:30px;}
.source-line i .relay-mark {width:18px;height:18px;}
.beo-explorer summary .relay-mark {width:20px;height:20px;}
.btn::after,.cta .lbl::after,.statement::after {content:none;}
.statement {position:relative;overflow:hidden;}
.statement-relay {position:absolute;right:5%;bottom:6%;width:clamp(160px,27vw,380px);color:#ffffff10;pointer-events:none;}
.statement-relay .relay-mark {width:100%;height:auto;}
@media(prefers-reduced-motion:reduce) {
  .relay-origin,.relay-destination,.relay-packet {transition:none;transform:none!important;}
}