/* Expressive product identity: physical rental objects connected to a live workspace. */
:root {
  --canvas: #f5f2fa;
  --accent: #7755d8;
  --accent-hover: #6141bc;
  --accent-soft: #eee7fb;
  --ink: #292337;
  --muted: #655c76;
  --line: #e5dfed;
  --teal: #557335;
  --teal-soft: #edf4de;
}
:root[data-theme=dark] {
  --page: #15131b;
  --canvas: #1e1a28;
  --surface: #24202f;
  --ink: #f3effc;
  --muted: #c3b8d1;
  --subtle: #ac9ebc;
  --line: #3a3148;
  --accent: #c5a6fa;
  --accent-hover: #dcc2ff;
  --accent-soft: #3c2c55;
  --teal: #ccdf9e;
  --teal-soft: #343d27;
  --header-bg: #15131bf2;
}
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #21192d;
  --ink: #fff;
  --muted: #d1c4de;
  --subtle: #b9a9cc;
  --accent: #d3b2ff;
  --line: #ffffff26;
}
.hero-stage::before {
  content: '';
  position: absolute;
  width: 720px;
  height: 720px;
  right: -190px;
  top: -340px;
  border: 1px solid #e8d9ff12;
  border-radius: 50%;
  box-shadow: 0 0 0 80px #e8d9ff06, 0 0 0 160px #e8d9ff04;
  pointer-events: none;
  z-index: -1;
}
.hero-stage .hero {
  grid-template-columns: 1fr 1.1fr;
  min-height: 650px;
  padding-top: 76px;
  padding-bottom: 54px;
  gap: 22px;
}
.hero-stage .hero-copy {
  z-index: 2;
  position: relative;
}
.hero-stage .hero-context {
  color: #d2b9f4;
  font-size: 12px;
  margin-bottom: 26px;
}
.hero-stage .context-mark {
  background: #d7ed9d;
  box-shadow: 0 0 0 4px #d7ed9d14;
}
.hero-stage h1 {
  font-size: clamp(43px, 4.3vw, 63px);
  font-weight: 550;
  letter-spacing: -.05em;
  line-height: 1.09;
}
.hero-stage .hero-description {
  color: #d4c8e2;
  font-size: 16px;
  max-width: 440px;
  line-height: 1.85;
}
.hero-stage .hero-actions { margin-top: 32px; }
.hero-stage .button-primary {
  background: #d8eea3;
  color: #252c1b;
  font-size: 12px;
  padding-inline: 19px;
}
.hero-stage .button-primary:hover { background: #e9f7c7; }
.hero-stage .button-primary svg { fill: currentColor; width: 15px; height: 15px; }
.hero-stage .button-plain {
  color: #fff;
  background: #ffffff09;
  border-color: #ffffff35;
  font-size: 12px;
}
.hero-stage .button-plain:hover { background: #ffffff17; }
.hero-stage .hero-note { color: #bcaaca; max-width: 420px; font-size: 11px; }
.hero-universe {
  position: relative;
  min-width: 0;
  min-height: 520px;
  align-self: stretch;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.universe-art {
  position: absolute;
  width: 164%;
  max-width: none;
  height: auto;
  left: -59%;
  top: 2%;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 30px 25px #09061365);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-universe:hover .universe-art { transform: translateY(-5px) rotate(-.7deg); }
.universe-orbit {
  position: absolute;
  width: 110%;
  height: 66%;
  left: -3%;
  top: 18%;
  border: 1px dashed #d2a4f32e;
  border-radius: 50%;
  transform: rotate(-27deg);
  z-index: -2;
  pointer-events: none;
}
.orbit-two { transform: rotate(29deg); border-color: #d5ec8923; }
.universe-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: #2b2038ed;
  border: 1px solid #dbc2ff3b;
  color: #fff;
  border-radius: 13px;
  box-shadow: 0 12px 35px #08030e45;
  text-align: left;
  backdrop-filter: blur(14px);
  transition: transform .18s, border-color .18s;
}
.universe-card:hover { transform: translateY(-4px); border-color: #d6eaa5; }
.universe-card small { display: block; color: #c8b7d9; font-size: 9px; margin-bottom: 2px; }
.universe-card strong { font-size: 13px; font-weight: 500; }
.universe-card>svg { margin-left: 10px; width: 14px; height: 14px; color: #c3b2d8; }
.universe-card-icon { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; font-size: 22px; color: #d9efa7; background: #d9efa717; }
.card-estimate { left: -8%; top: 5%; }
.card-availability { right: -2%; top: 38%; }
.card-availability .universe-card-icon { background: #bfa2ff20; color: #d9c3ff; }
.card-documents { left: 10%; bottom: 6%; }
.card-documents .universe-card-icon { background: #ffc4ba1c; color: #ffc4ba; }
.universe-caption { position: absolute; right: 1%; bottom: 0; color: #b9a4c9; font-size: 9px; }
.scenario-ribbon { padding-block: 5px 32px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.scenario-ribbon>p { font-size: 11px; color: #bcaaca; max-width: 145px; }
.scenario-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario-switch button {
  border: 1px solid #ffffff25;
  background: #ffffff06;
  color: #d9d0e3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  transition: background .15s, color .15s;
}
.scenario-switch button:hover { background: #ffffff18; }
.scenario-switch button[aria-pressed=true] { color: #2a2532; background: #e5d5fa; border-color: #e5d5fa; }
.live-interface { margin-top: 0; background: var(--page); }
.workspace-navigation { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.workspace-navigation>button { color: var(--muted); font-size: 13px; padding: 11px 17px; border: 1px solid transparent; border-radius: 8px; }
.workspace-navigation>button.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.workspace-open { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 10px; }
.workspace-open svg { width: 14px; height: 14px; }
.workspace-shell { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -45px #35204855; background: var(--surface); }
.workspace-shell-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 20px; font-size: 11px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.workspace-shell-bar>span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.workspace-shell-bar i { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
.workspace-shell-bar>span:last-child { color: var(--muted); font-size: 10px; }
#live-workspace { display: block; width: 100%; height: 1050px; border: 0; background: #fff; }
.workspace-note { color: var(--subtle); font-size: 11px; margin-top: 17px; max-width: 900px; }
.screens-details { margin-top: 35px; border-block: 1px solid var(--line); }
.screens-details>summary { padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); list-style: none; }
.screens-details>summary::-webkit-details-marker { display: none; }
.screens-details>summary svg { width: 16px; height: 16px; }
.screens-details[open]>summary svg { transform: rotate(180deg); }
.screens-details>.screen-tabs { margin-top: 15px; }
.screens-details>.screen-showcase { padding-bottom: 30px; }
.features-section { border-top: 1px solid var(--line); }
.features-section .capability-heading svg { color: var(--accent); }
.configuration-section { background: #f5eef6; }
[data-theme=dark] .configuration-section { background: #261e2c; }
.feature-note { background: #eff3e5; }
[data-theme=dark] .feature-note { background: #282d21; }
.contact-section { background: #392448; position: relative; overflow: hidden; isolation: isolate; }
.contact-section::after { content:''; width: 340px; height: 340px; position: absolute; border: 1px solid #d8eaa533; border-radius: 50%; right: 60px; bottom: -230px; z-index: -1; box-shadow: 0 0 0 40px #d8eaa508, 0 0 0 80px #d8eaa506; }
.contact-section .button-white { background: #deedb4; color: #292c20; }
.contact-section .button-white:hover { background: #eef7d7; }
@media(min-width:1500px) {
  .hero-stage .hero { min-height: 690px; padding-top: 80px; padding-bottom: 60px; gap: 40px; }
  .hero-stage h1 { font-size: 66px; }
}
@media(max-width:1150px) {
  .hero-stage .hero { min-height: 620px; padding-block: 60px; gap: 25px; }
  .hero-stage h1 { font-size: 49px; }
  .hero-universe { min-height: 460px; }
  .universe-art { top: 9%; }
  .universe-card { padding: 11px; gap: 8px; }
  .universe-card strong { font-size: 11px; }
  .universe-card small { font-size: 8px; }
  .universe-card>svg { margin-left: 2px; }
  .card-estimate { left: -5%; top: 3%; }
  .card-availability { right: -1%; top: 44%; }
  .card-documents { left: 3%; bottom: 5%; }
  .hero-stage .hero-actions .button { font-size: 11px; }
  .scenario-ribbon { display: block; padding-bottom: 27px; }
  .scenario-ribbon>p { max-width: none; margin-bottom: 15px; }
  .scenario-switch { gap: 8px; }
}
@media(max-width:900px) {
  .hero-stage .hero { grid-template-columns: 1fr 1fr; gap: 15px; min-height: 550px; }
  .hero-stage h1 { font-size: 40px; }
  .hero-stage .hero-description { font-size: 14px; }
  .hero-stage .hero-context { font-size: 10px; }
  .hero-universe { min-height: 410px; }
  .universe-art { top: 13%; width: 175%; left: -66%; }
  .universe-card { padding: 9px 10px; }
  .universe-card-icon { width: 24px; height: 27px; font-size: 18px; }
  .universe-card strong { font-size: 10px; }
  .card-estimate { left: -4%; }
  .card-documents { bottom: 4%; left: -5%; }
  .card-availability { right: 0; top: 46%; }
  .universe-caption { display: none; }
  .scenario-switch button { font-size: 10px; padding-inline: 11px; }
  .workspace-navigation>button { font-size: 11px; padding: 9px 11px; }
  .workspace-open { font-size: 10px; }
}
@media(max-width:650px) {
  .hero-stage .hero { padding-top: 40px; padding-bottom: 24px; gap: 25px; min-height: 0; }
  .hero-stage h1 { font-size: clamp(33px,8.5vw,50px); line-height: 1.12; }
  .hero-stage .hero-context { font-size: 10px; margin-bottom: 22px; }
  .hero-stage .hero-description { font-size: 15px; max-width: none; }
  .hero-stage .hero-note { font-size: 10px; }
  .hero-stage .hero-actions { margin-top: 26px; }
  .hero-stage .hero-actions .button { font-size: 12px; }
  .hero-universe { min-height: 330px; width: 100%; }
  .universe-art { width: 151%; left: -50%; top: -3%; }
  .universe-orbit { top: 8%; height: 76%; }
  .card-estimate { left: 0; top: 0; }
  .card-availability { right: -1%; top: 40%; }
  .card-documents { left: 5%; bottom: 0; }
  .universe-card { padding: 10px 12px; }
  .universe-card strong { font-size: 11px; }
  .universe-card small { font-size: 8px; }
  .scenario-ribbon { padding-bottom: 25px; }
  .scenario-ribbon>p { font-size: 10px; margin-bottom: 12px; }
  .scenario-switch { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; padding-bottom: 6px; scrollbar-width: thin; }
  .scenario-switch button { white-space: nowrap; font-size: 10px; padding: 9px 12px; }
  .workspace-navigation { gap: 6px; }
  .workspace-navigation>button { font-size: 10px; padding: 9px 11px; }
  .workspace-open { margin-left: 0; font-size: 10px; padding: 8px 2px; }
  .workspace-shell { border-radius: 9px; margin-inline: -10px; }
  .workspace-shell-bar { padding: 11px 12px; font-size: 9px; }
  .workspace-shell-bar>span:last-child { font-size: 8px; }
  .workspace-note { font-size: 10px; }
  .live-interface .section-heading h2 { font-size: 34px; }
  .live-interface .split-heading>p { font-size: 14px; }
  .screens-details>summary { font-size: 12px; }
}
@media(max-width:359px) {
  .hero-stage h1 { font-size: 30px; }
  .hero-universe { min-height: 295px; }
  .universe-card { padding: 8px; gap: 6px; }
  .universe-card strong { font-size: 10px; }
  .universe-card small { font-size: 7px; }
}