:root {
  --ink: #17131e;
  --secondary: #504858;
  --blue: #7144ee;
  --paper: #f8f6fc;
  scrollbar-gutter: stable;
}
body { color: var(--ink); }
.nav { background: #fdfcffeb; border-bottom-color: #e5dfef; }
.brand img { filter: hue-rotate(42deg); }
.nav-links { color: #352c43; }
.nav-action { background: #eee8fa; color: #442971; }
.hero {
  isolation: isolate;
  background: radial-gradient(ellipse at 14% 14%, #fff 5%, #fff0 53%),
    radial-gradient(ellipse at 87% 53%, #cab5ed50, #d6c6ee1c 42%, transparent 67%),
    linear-gradient(145deg, #fdfcfe 6%, #f5effd 52%, #e8dff4 100%);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; left: -20%; top: 22%;
  width: 145%; height: 52%; border-radius: 50%;
  background: linear-gradient(145deg, #fff0 14%, #ffffffba 48%, #fff0 62%);
  transform: rotate(-13deg); filter: blur(16px); pointer-events: none;
}
.hero h1, .hero-tagline { color: #19131f; }
.hero-detail { color: #4a4055; }
.primary { background: var(--blue); border-color: var(--blue); }
.primary:hover { background: #6331df; box-shadow: 0 7px 25px #7244ee24; }
.secondary { color: #6133c7; border-color: #8058d5; }
.secondary:hover { background: #ede5fc; }
.hero-scene .brand-sculpture {
  background: linear-gradient(164deg, #a294ba 2%, #775da0 26%, #563773 49%, #9f87c1 63%, #d8c9eb 78%, #76548f 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  -webkit-text-stroke: .6px #6d538724;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 5px 0 #61417815);
}
.hero-scene .light-floor { background: radial-gradient(ellipse, #9772ce34, transparent 68%); }
.landing-shadows span { background: #62437836; }
.hero-piece .hero-face, .module-frame {
  background: linear-gradient(125deg, #fff 4%, #dfd6eb 39%, #9f8cb6 83%, #e9e1f3); border-color: #fff;
}
.hero-main .hero-face { box-shadow: 2px 3px 0 #aa96bb, 5px 7px 0 #917ba6, 9px 10px 0 #765f8d, 12px 30px 38px -21px #43275657; }
.hero-stores .hero-face { box-shadow: 2px 3px 0 #ac99bb, 5px 6px 0 #90789f, 12px 26px 32px -19px #482b5b4a; }
.hero-reception .hero-face { box-shadow: 3px 3px 0 #b09cc0, 6px 6px 0 #8c739e, -4px 27px 33px -17px #47235e4d; }
.hero-scene .scene-label { color: #5b486d; }
.platforms > p, .section-name { color: #534061; }
.description, .tile .description, .workflow-poster .description { color: #4b4354; }
.section-copy h2, .workflow-poster h2, .contact h2 { color: #18131e; }
.quiet-note, .assistant-tile .quiet-note { color: #665b72; }
.preview-chip { color: #62448d; border-color: #b6a3cf; background: #eee7f8; }
.assistant-tile .section-name, .workflow-poster .section-name { color: #634287; }
.stores-poster { background: radial-gradient(ellipse at 85% 76%, #e6d9f6 0, #f4eefb 36%, #fbfafc 72%); }
.reception-poster { background: linear-gradient(122deg, #fff 18%, #f6f2fc 48%, #e9dff5 100%); }
.workflow-poster { background: radial-gradient(ellipse at 50% 76%, #ded0f2 0, #efe7f8 36%, #fcfbfe 76%); color: var(--ink); padding-bottom: 40px; }
.intelligence-tile { background: linear-gradient(148deg, #faf8ff 12%, #ebe1f8 100%); }
.intent-tile { background: radial-gradient(ellipse at 80% 95%, #e3d5f0, #faf8fd 65%); }
.assistant-tile { background: radial-gradient(ellipse at 24% 88%, #ded0ef, #f5effb 47%, #fdfcff 86%); color: var(--ink); }
.tickets-tile { background: linear-gradient(145deg, #fcfbff 12%, #ede5f6 100%); }
.module-stage { position: relative; perspective: 1900px; min-width: 0; overflow: visible; }
.module-stage::before {
  content: ""; position: absolute; bottom: 7%; left: 9%; width: 82%; height: 28%; border-radius: 50%;
  background: radial-gradient(ellipse, #73509824, transparent 64%);
  transform: rotateX(67deg); filter: blur(13px); pointer-events: none;
}
.module-frame {
  padding: 5px; margin: 0;
  transform: rotateX(calc(9deg + var(--py, 0deg))) rotateY(calc(-11deg + var(--px, 0deg))) rotateZ(-4deg);
  box-shadow: 2px 3px 0 #baa8cc, 5px 7px 0 #9b80b2, 0 34px 58px -29px #4424615c;
  transition: transform .22s ease-out, box-shadow .22s;
}
.module-frame img { width: 100%; height: auto; border-radius: 8px; }
.module-stores img { aspect-ratio: 780 / 2952; }
.module-reception img { aspect-ratio: 4800 / 2952; }
.module-workflow img, .module-knowledge img, .module-tickets img { aspect-ratio: 3600 / 2952; }
.module-intent img { aspect-ratio: 1020 / 2952; }
.module-assistant img { aspect-ratio: 3960 / 2700; }
.module-frame::after { content: ""; position: absolute; inset: 1px; border: 1px solid #ffffffd9; border-radius: 12px; pointer-events: none; }
.feature-poster .module-stage { min-height: 690px; }
.module-stores .module-frame { width: 158px; left: calc(50% - 79px); top: 21px; transform: rotateX(calc(9deg + var(--py, 0deg))) rotateY(calc(-15deg + var(--px, 0deg))) rotateZ(-8deg); }
.module-reception .module-frame { width: min(91%, 850px); left: 4%; top: 82px; transform: rotateX(calc(10deg + var(--py, 0deg))) rotateY(calc(-13deg + var(--px, 0deg))) rotateZ(5deg); }
.module-workflow { height: 650px; max-width: 1080px; margin: 32px auto 0; }
.module-workflow .module-frame { width: 650px; left: calc(50% - 325px); top: 26px; transform: rotateX(calc(13deg + var(--py, 0deg))) rotateY(calc(9deg + var(--px, 0deg))) rotateZ(-3deg); }
.tile { height: 900px; }
.tile .module-stage { height: 565px; margin-top: 28px; }
.module-knowledge .module-frame, .module-tickets .module-frame { width: 79%; left: 10.5%; top: 15px; }
.module-assistant .module-frame { width: 84%; left: 8%; top: 28px; transform: rotateX(calc(10deg + var(--py, 0deg))) rotateY(calc(10deg + var(--px, 0deg))) rotateZ(-3deg); }
.module-intent .module-frame { width: 174px; left: calc(50% - 87px); top: 6px; transform: rotateX(calc(8deg + var(--py, 0deg))) rotateY(calc(-16deg + var(--px, 0deg))) rotateZ(9deg); }
.contact-card { background: #f4eefb; border: 1px solid #e3d7f2; }
.contact-card > p { color: #504358; }
footer { background: #f8f5fc; color: #554d5d; }
@media (min-width: 761px) and (max-width: 1100px) {
  .feature-poster .module-stage { min-height: 565px; }
  .module-stores .module-frame { width: 126px; left: calc(50% - 63px); top: 20px; }
  .module-reception .module-frame { width: 94%; left: 0; top: 130px; }
  .tile { height: 770px; }
  .tile .module-stage { height: 455px; }
  .module-intent .module-frame { width: 147px; left: calc(50% - 73.5px); }
}
@media (max-width: 760px) {
  :root { scrollbar-gutter: auto; }
  .hero-stores { left: 8%; }
  .hero-scene .brand-sculpture { font-size: 19vw; }
  .feature-poster .module-stage { min-height: 0; height: 385px; margin-top: 18px; }
  .module-stores .module-frame { width: 90px; left: calc(50% - 45px); top: 7px; }
  .module-reception .module-frame { width: 87%; left: 6%; top: 10px; }
  .reception-poster .module-stage { height: 305px; }
  .module-workflow { height: 390px; margin-top: 22px; }
  .module-workflow .module-frame { width: min(82%, 440px); left: 9%; top: 17px; }
  .tile, .assistant-tile, .tickets-tile { height: 665px; }
  .tile .module-stage { height: 350px; margin-top: 22px; }
  .module-knowledge .module-frame, .module-tickets .module-frame { width: 79%; left: 10.5%; top: 8px; }
  .module-intent .module-frame { width: 112px; left: calc(50% - 56px); top: 5px; }
  .module-assistant .module-frame { width: 85%; left: 7.5%; top: 14px; }
  .module-frame { padding: 3px; border-radius: 9px; }
  .module-frame img { border-radius: 5px; }
  .module-frame::after { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .module-frame { transition: none; } }