@font-face {
  font-family: "NB Architekt";
  src: url("assets/fonts/NBArchitektStd-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "NB Architekt";
  src: url("assets/fonts/NBArchitektStd-Bold.woff2") format("woff2");
  font-weight: 700;
}

* { box-sizing: border-box; }
:root {
  --bg: #000000;
  --panel: rgba(12, 12, 20, 0.45);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-strong: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --line: rgba(255, 255, 255, 0.06);
  --text: #f7f7f7;
  --muted: rgba(255, 255, 255, 0.55);
  --dim: rgba(255, 255, 255, 0.28);
  --warm: rgba(244, 242, 232, 0.78);
  --purple: #c064ff;
  --cyan: #81ecfe;
  --green: #1aeade;
  --amber: #fdb460;
  --red: #ff756b;
  --glow-purple: rgba(192, 100, 255, 0.35);
  --glow-cyan: rgba(129, 236, 254, 0.25);
  --glow-green: rgba(26, 234, 222, 0.2);
  --font: "NB Architekt", "Microsoft YaHei", system-ui, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --blur: 20px;
  --blur-strong: 28px;
}
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  background: var(--bg);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
video, canvas { display: block; }

/* ── Canvas layers ── */
#sceneCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.78;
  pointer-events: none;
}
.orb-flow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .18s ease;
}
.galaxy-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .28s ease;
}

/* Subtle radial glow in corners */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(192,100,255,.06) 0%, transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgba(129,236,254,.04) 0%, transparent 38%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.2) 0%, transparent 72%);
}
main, .site-header, .frame { position: relative; z-index: 2; }

/* ── Glass utility ── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}

/* ── Header ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 38px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.05);
  z-index: 10;
}
.site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glow-purple), var(--glow-cyan), transparent);
  opacity: .6;
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: url("assets/lingxi-logo.png") center/cover;
  box-shadow: 0 0 18px var(--glow-purple);
}
.nav { display: flex; gap: 28px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .2em; }
.nav a { padding: 10px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s, text-shadow .25s; }
.nav a:hover { color: var(--text); border-color: var(--purple); text-shadow: 0 0 12px var(--glow-purple); }
.sound {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  font-size: 11px;
  letter-spacing: .08em;
  transition: border-color .3s, box-shadow .3s;
}
.sound:hover { border-color: var(--glass-border-hover); box-shadow: 0 0 16px var(--glow-purple); }
.sound-bars { display: inline-flex; gap: 3px; align-items: end; height: 16px; }
.sound-bars i { width: 3px; height: 6px; background: var(--dim); display: block; border-radius: 1px; }
.sound.is-on .sound-bars i { background: var(--green); animation: bars .72s infinite ease-in-out alternate; }
.sound.is-on .sound-bars i:nth-child(2) { animation-delay: .12s; }
.sound.is-on .sound-bars i:nth-child(3) { animation-delay: .24s; }
@keyframes bars { to { height: 15px; } }

/* ── Frame sides ── */
.frame {
  position: fixed;
  top: 50%;
  z-index: 8;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .28em;
  pointer-events: none;
  text-transform: uppercase;
}
.frame-left { left: 18px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.frame-right { right: 18px; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }

/* ── Sections ── */
.section {
  min-height: 100vh;
  padding: 126px 7vw 74px;
  display: grid;
  align-content: center;
}
.eyebrow {
  margin: 0 0 16px;
  color: var(--cyan);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  text-shadow: 0 0 14px var(--glow-cyan);
}
h1, h2 { margin: 0; font-weight: 700; line-height: .92; letter-spacing: -.01em; }
h1 {
  font-size: clamp(56px, 8.8vw, 142px);
  max-width: 940px;
  background: linear-gradient(135deg, #ffffff 20%, var(--purple) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h2 {
  font-size: clamp(38px, 5.6vw, 92px);
  max-width: 920px;
  background: linear-gradient(135deg, #ffffff 30%, var(--cyan) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lead, .section-head p {
  max-width: 710px;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.6;
  letter-spacing: .01em;
}
.lead { margin: 28px 0 0; }
.section-head { margin-bottom: 42px; }
.section-head h2 + p { margin-top: 18px; }

/* ── Hero ── */
.hero {
  grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
  gap: 5vw;
  align-items: center;
}
.product-reality {
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.15fr);
  gap: 4vw;
  align-items: center;
}
.product-reality .hero-copy { align-self: center; }
.orb-panel {
  min-height: calc(100vh - 210px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
}
.orb-brief {
  max-width: 520px;
  align-self: end;
}
.orb-brief h1 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: 0;
}
.orb-brief p {
  margin: 18px 0 0;
  max-width: 500px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.orb-brief ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.orb-brief li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--warm);
  font-size: 13px;
  line-height: 1.45;
}
.orb-brief li span {
  color: var(--amber);
  font-size: 11px;
  letter-spacing: .12em;
}
.orb-canvas {
  width: min(560px, 42vw);
  aspect-ratio: 1;
  max-width: 100%;
  align-self: center;
  justify-self: start;
  filter: drop-shadow(0 0 60px var(--glow-purple)) drop-shadow(0 0 120px rgba(129,236,254,.12));
}
.orb-note {
  max-width: 460px;
  margin: 18px 0 0;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
}
.hero-experience { align-self: center; min-width: 0; }
.hero-experience .section-head { margin-bottom: 22px; }
.hero-experience .section-head h2 { max-width: 760px; font-size: clamp(28px, 3.2vw, 48px); color: var(--text); line-height: 1.02; letter-spacing: 0; }
.hero-experience .section-head p { max-width: 620px; }
.lingxi-intro { max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.lingxi-intro p { margin: 0 0 16px; color: var(--warm); }
.lingxi-lead { color: var(--muted); font-size: 15px; line-height: 1.65; }
.lingxi-tagline { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lingxi-tagline-label { margin: 0 0 8px !important; color: var(--amber); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.lingxi-tagline-text { margin: 0 !important; color: var(--warm); font-size: 14px; line-height: 1.7; }
.site-footer { padding: 20px 18px; margin-top: 40px; text-align: center; }
.site-footer-inner { color: #fff; font-size: 12px; line-height: 1.6; }
.site-footer-inner a { color: #fff; text-decoration: none; }
.site-footer-inner a:hover { color: rgba(255,255,255,.7); text-decoration: underline; }

/* ── PLACEHOLDER_PORTALS ── */

/* ── Video Wall / Portals ── */
.hero-stage {
  height: min(72vh, 780px);
  min-height: 520px;
  position: relative;
  perspective: 1200px;
}
.portal {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.6);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  transform-style: preserve-3d;
  transition: border-color .4s, box-shadow .4s;
}
.portal:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 32px var(--glow-purple);
}
.portal video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05);
}
.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.82));
  pointer-events: none;
}
.portal-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  font-size: 11px;
  letter-spacing: .08em;
}
.portal-meta span { color: var(--cyan); }
.portal-meta strong { font-size: 18px; }
.portal-large { width: 68%; height: 46%; left: 6%; top: 12%; }
.portal-small { width: 32%; height: 28%; right: 4%; top: 5%; transform: translateZ(-60px) rotateY(-8deg); }
.portal-tall { width: 34%; height: 52%; right: 9%; bottom: 4%; transform: translateZ(40px) rotateY(-5deg); }
.portal-strip { width: 47%; height: 23%; left: 10%; bottom: 10%; transform: translateZ(-25px) rotateY(7deg); }

/* ── PLACEHOLDER_CASES ── */

/* ── Cases Galaxy ── */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.galaxy-cases {
  position: relative;
  min-height: 640px;
  display: block;
}
.case-item {
  position: relative;
  min-height: 260px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  transition: border-color .35s, box-shadow .35s;
}
.galaxy-cases .case-item {
  position: fixed;
  left: var(--gx);
  top: var(--gy);
  width: min(280px, 17vw);
  min-height: 210px;
  opacity: calc(var(--reveal, 0) * .34);
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg))
    translateY(0)
    scale(.88);
  pointer-events: none;
  filter: saturate(.8) brightness(.72);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease, box-shadow .45s ease, border-color .45s ease;
  z-index: 3;
  animation: caseDrift 6.8s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}
.galaxy-cases .case-item.is-galaxy-current,
.galaxy-cases .case-item.is-galaxy-seen {
  pointer-events: auto;
}
.galaxy-cases .case-item.is-galaxy-current {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg))
    translateY(-8px)
    scale(1);
  filter: saturate(1.04) brightness(1);
  z-index: 3;
  border-color: rgba(192,100,255,.5);
  box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 28px var(--glow-purple);
  animation: caseDrift 5.2s ease-in-out infinite, currentPulse 2.8s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s), 0s;
}
.galaxy-cases .case-item.is-galaxy-seen {
  opacity: calc(.18 + var(--reveal, 0) * .2);
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg))
    translateY(0)
    scale(.92);
  filter: saturate(.7) brightness(.58);
  z-index: 2;
}

/* ── PLACEHOLDER_HOVER ── */

.galaxy-cases .case-item.is-galaxy-hover,
.galaxy-cases .case-item:focus-visible {
  opacity: 1;
  filter: saturate(1.18) brightness(1.12);
  border-color: rgba(129,236,254,.6);
  box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 42px var(--glow-cyan);
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg))
    translateY(-18px)
    scale(1.08);
  z-index: 6;
}
.galaxy-cases .case-item:nth-child(1) { --gx: 10%; --gy: calc(50% - 190px); --motion-delay: -.4s; }
.galaxy-cases .case-item:nth-child(2) { --gx: 21%; --gy: calc(50% + 190px); --motion-delay: -1.3s; }
.galaxy-cases .case-item:nth-child(3) { --gx: 32%; --gy: calc(50% - 190px); --motion-delay: -2.2s; }
.galaxy-cases .case-item:nth-child(4) { --gx: 43%; --gy: calc(50% + 190px); --motion-delay: -3.1s; }
.galaxy-cases .case-item:nth-child(5) { --gx: 54%; --gy: calc(50% - 190px); --motion-delay: -4s; }
.galaxy-cases .case-item:nth-child(6) { --gx: 65%; --gy: calc(50% + 190px); --motion-delay: -4.9s; }
.galaxy-cases .case-item:nth-child(7) { --gx: 76%; --gy: calc(50% - 190px); --motion-delay: -5.8s; }
.galaxy-cases .case-item:nth-child(8) { --gx: 87%; --gy: calc(50% + 190px); --motion-delay: -6.7s; }
.case-item video {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  opacity: .62;
  transform: scale(1.02);
  transition: opacity .25s ease, transform .35s ease;
}
.galaxy-cases .case-item video {
  object-fit: contain;
  background: #000;
  animation: videoBreathe 8s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}
.case-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.88));
}
.galaxy-cases .case-item::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.18) 48%, transparent 62%);
  transform: translateX(-70%) rotate(8deg);
  opacity: 0;
}
.galaxy-cases .case-item.is-galaxy-hover::before,
.galaxy-cases .case-item:focus-visible::before {
  opacity: 1;
  animation: caseSweep .95s cubic-bezier(.2,.7,.2,1);
}
@keyframes caseSweep {
  from { transform: translateX(-70%) rotate(8deg); }
  to { transform: translateX(70%) rotate(8deg); }
}
@keyframes caseDrift {
  0%, 100% { translate: 0 0; }
  25% { translate: 0 -7px; }
  50% { translate: 4px -3px; }
  75% { translate: -3px 5px; }
}
@keyframes currentPulse {
  0%, 100% { box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 18px var(--glow-purple); }
  50% { box-shadow: 0 30px 92px rgba(0,0,0,.52), 0 0 42px var(--glow-cyan); }
}
@keyframes videoBreathe {
  0%, 100% { scale: 1; filter: brightness(.96) saturate(.96); }
  50% { scale: 1.035; filter: brightness(1.08) saturate(1.08); }
}
.case-item span, .case-item strong, .case-item em {
  position: absolute;
  z-index: 1;
  left: 16px;
}
.case-item span { top: 14px; color: var(--cyan); font-size: 11px; letter-spacing: .14em; }
.case-item strong { bottom: 42px; font-size: 22px; }
.case-item em { bottom: 18px; color: var(--dim); font-size: 11px; font-style: normal; letter-spacing: .06em; }
.case-grid:not(.galaxy-cases) .case-item:hover video,
.case-grid:not(.galaxy-cases) .case-item.is-selected video,
.galaxy-cases .case-item.is-galaxy-current video {
  opacity: 1;
  transform: scale(1.07);
}
.galaxy-cases .case-item.is-galaxy-hover video,
.galaxy-cases .case-item:focus-visible video {
  opacity: 1;
  transform: scale(1.12);
}
.case-grid:not(.galaxy-cases) .case-item.is-selected,
.galaxy-cases .case-item.is-galaxy-current {
  border-color: rgba(192,100,255,.6);
}

/* ── PLACEHOLDER_LIGHTBOX ── */

/* ── Lightbox ── */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(var(--blur-strong)) saturate(.86);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.video-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-shell {
  width: min(1320px, 92vw);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius);
  background: rgba(8,8,16,.82);
  box-shadow: 0 40px 120px rgba(0,0,0,.62), 0 0 60px var(--glow-purple);
  transform: scale(.96) translateY(18px);
  transition: transform .32s ease;
  overflow: hidden;
}
.video-lightbox.is-open .lightbox-shell { transform: scale(1) translateY(0); }
.lightbox-top {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lightbox-top strong {
  color: var(--text);
  font-size: 14px;
  letter-spacing: .08em;
}
.lightbox-shell video {
  width: 100%;
  max-height: min(76vh, 780px);
  object-fit: contain;
  background: #000;
}
.lightbox-close {
  position: absolute;
  right: 28px;
  top: 24px;
  z-index: 2;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  transition: border-color .3s, box-shadow .3s;
}
.lightbox-close:hover { border-color: var(--glass-border-hover); box-shadow: 0 0 14px var(--glow-cyan); }
body.lightbox-open { overflow: hidden; }
body.lightbox-open main,
body.lightbox-open .site-header,
body.lightbox-open .frame,
body.lightbox-open #sceneCanvas {
  filter: saturate(.6) brightness(.42);
}

/* ── PLACEHOLDER_SYSTEM ── */

/* ── System / PPT Showcase ── */
.system .section-head { margin-bottom: 26px; }
.system .section-head h2 {
  font-size: clamp(34px, 4.2vw, 68px);
  max-width: 620px;
}
.ppt-showcase {
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
}
.ppt-tabs {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
}
.ppt-tabs button {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  backdrop-filter: blur(12px);
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .12em;
  transition: all .35s ease;
}
.ppt-tabs button:hover { border-color: var(--glass-border-hover); color: var(--muted); }
.ppt-tabs button.is-active {
  color: var(--text);
  border-color: rgba(192,100,255,.5);
  background: rgba(192,100,255,.1);
  box-shadow: 0 0 28px var(--glow-purple);
}
.ppt-slide {
  position: absolute;
  left: 92px;
  right: 0;
  top: 0;
  height: 620px;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
  gap: 28px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(22px) scale(.985);
  pointer-events: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.ppt-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ppt-copy, .ppt-table, .ppt-preview {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}
.ppt-copy {
  padding: 28px;
  display: grid;
  align-content: end;
}
.project-copy-preview {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 20px;
  align-content: stretch;
  overflow: hidden;
}
.copy-main-preview {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(143,211,255,.16);
  border-radius: var(--radius-sm);
  background: #050609;
}
.copy-main-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.copy-text {
  min-width: 0;
}
.ppt-copy span {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--glow-cyan);
}
.ppt-copy h3 {
  margin: 18px 0 0;
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.02;
  background: linear-gradient(135deg, #fff 40%, var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ppt-copy p {
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ── PLACEHOLDER_TABLE ── */

.ppt-table {
  align-self: stretch;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  overflow: hidden;
}
.ppt-table > div {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr .9fr;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}
.ppt-table > div:last-child { border-bottom: 0; }
.ppt-table strong, .ppt-table span {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.04);
}
.ppt-table strong:last-child, .ppt-table span:last-child { border-right: 0; }
.ppt-table strong {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ppt-table span {
  color: rgba(255,255,255,.72);
}
.ppt-slide.is-active .ppt-table > div {
  animation: rowIn .72s ease both;
}
.ppt-slide.is-active .ppt-table > div:nth-child(2) { animation-delay: .08s; }
.ppt-slide.is-active .ppt-table > div:nth-child(3) { animation-delay: .16s; }
.ppt-slide.is-active .ppt-table > div:nth-child(4) { animation-delay: .24s; }
.ppt-preview {
  padding: 16px;
  display: grid;
  grid-template-rows: 46px 1fr;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.project-preview-panel {
  contain: paint;
  align-self: stretch;
  max-height: 620px;
}
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.preview-toolbar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
}
.preview-toolbar i:first-child { background: var(--red); }
.preview-toolbar i:nth-child(2) { background: var(--amber); }
.preview-toolbar i:nth-child(3) { background: var(--green); }
.preview-window {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.preview-window section {
  border: 1px solid rgba(192,100,255,.15);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(192,100,255,.1), rgba(129,236,254,.06));
  animation: previewPulse 3.2s ease-in-out infinite;
}
.preview-window section:first-child { grid-row: span 2; }
.preview-window section:nth-child(2) { animation-delay: .35s; }
.preview-window section:nth-child(3) { animation-delay: .7s; }
.project-preview-grid {
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
}
.project-preview-grid figure {
  box-sizing: border-box;
  margin: 0;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(143,211,255,.18);
  border-radius: 8px;
  background: #050609;
  animation: previewPulse 3.2s ease-in-out infinite;
}
.project-preview-grid figure:nth-child(1) { animation-delay: .2s; }
.project-preview-grid figure:nth-child(2) { animation-delay: .45s; }
.project-preview-grid figure:nth-child(3) { animation-delay: .7s; }
.project-preview-grid img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.project-preview-panel .preview-toolbar {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.project-preview-panel .preview-window {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes previewPulse {
  0%, 100% { filter: brightness(.82); transform: scale(.992); }
  50% { filter: brightness(1.12); transform: scale(1); }
}

/* ── PLACEHOLDER_DOCK ── */

/* ── Dock / Chat ── */
.dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr);
  gap: 14px;
}
.chat-pane, .generator-pane {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}
.chat-pane { min-height: 390px; padding: 18px; display: grid; grid-template-rows: auto 1fr 1fr auto; gap: 14px; }
.pane-top { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.pane-top em { color: var(--green); font-style: normal; text-shadow: 0 0 8px var(--glow-green); }
.message-row {
  width: min(520px, 88%);
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  line-height: 1.5;
  background: var(--glass);
  transition: border-color .3s, box-shadow .3s;
}
.message-row.user {
  justify-self: end;
  border-color: rgba(192,100,255,.35);
  box-shadow: 0 0 14px rgba(192,100,255,.1);
}
.message-row.ai {
  align-self: start;
  border-color: rgba(129,236,254,.2);
  box-shadow: 0 0 14px rgba(129,236,254,.06);
}
.message-row .media-block { margin-top: 10px; }
.message-row .media-block img { max-width: 100%; max-height: 280px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); display: block; }
.message-row .media-block video { max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); display: block; }
.message-row .media-block audio { width: 100%; }
.message-row .media-caption { margin-top: 6px; font-size: 12px; color: var(--dim); }
.compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.compose input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.32);
  color: var(--text);
  transition: border-color .3s, box-shadow .3s;
}
.compose input:focus {
  outline: none;
  border-color: rgba(192,100,255,.4);
  box-shadow: 0 0 18px rgba(192,100,255,.12);
}
.compose button, .generator-pane button {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.compose button:hover, .generator-pane button:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 18px var(--glow-purple);
  background: var(--glass-strong);
}
.compose button { min-width: 88px; }
.generator-pane { padding: 14px; display: grid; gap: 12px; align-content: start; }
.generator-pane button {
  min-height: 92px;
  padding: 14px;
  text-align: left;
  display: grid;
  align-content: space-between;
}
.generator-pane button span { color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.generator-pane button strong { font-size: 22px; }
.generator-pane output {
  min-height: 54px;
  padding: 15px;
  color: var(--dim);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ── PLACEHOLDER_INDEX ── */

/* ── Download ── */
.download-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr);
  gap: 18px;
  align-items: stretch;
}
.download.section {
  min-height: 72vh;
  padding-top: 104px;
  padding-bottom: 58px;
}
.download .section-head {
  margin-bottom: 26px;
}
.download .section-head h2 {
  max-width: 680px;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.02;
}
.download-copy,
.platform-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}
.download-copy {
  min-height: 300px;
  padding: 24px;
  display: grid;
  align-content: end;
  gap: 18px;
}
.download-copy p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.download-action {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  border: 1px solid rgba(129,236,254,.24);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(129,236,254,.1), rgba(192,100,255,.08));
  color: var(--text);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.download-action span,
.platform-card span {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .16em;
}
.platform-card span {
  text-transform: uppercase;
}
.download-action strong {
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1;
}
.download-action em {
  color: var(--dim);
  font-style: normal;
}
.download-action.is-disabled {
  cursor: default;
  opacity: .72;
}
.download-action:not(.is-disabled):hover {
  border-color: rgba(129,236,254,.42);
  box-shadow: 0 0 22px rgba(129,236,254,.12);
  transform: translateY(-2px);
}
.platform-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.platform-card {
  min-height: 300px;
  padding: 20px;
  display: grid;
  align-content: end;
  gap: 14px;
  overflow: hidden;
  position: relative;
}
.platform-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.platform-card.is-live {
  border-color: rgba(129,236,254,.28);
  box-shadow: 0 0 34px rgba(129,236,254,.08);
}
.platform-card.is-offline {
  opacity: .52;
}
.platform-card h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  text-transform: none;
}
.platform-card p {
  margin: 0;
  color: var(--muted);
}

/* ── Contact ── */
.contact.section {
  min-height: 62vh;
  padding-top: 96px;
  padding-bottom: 48px;
}
.contact .section-head {
  margin-bottom: 26px;
}
.contact .section-head h2 {
  max-width: 560px;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(340px, 1.42fr);
  gap: 14px;
}
.contact-card {
  min-height: 220px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
}
.contact-card span {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .16em;
}
.qr-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
}
.qr-card figure {
  width: min(150px, 100%);
  aspect-ratio: 1;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(129,236,254,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.9);
}
.qr-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.qr-card p {
  margin: 0;
  color: var(--muted);
}
.contact-list {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.contact-list a,
.contact-list div {
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}
.contact-list strong {
  color: var(--text);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.08;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ── Glow border animation ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px var(--glow-purple); }
  50% { box-shadow: 0 0 38px var(--glow-cyan); }
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr auto; padding: 0 18px; }
  .nav { display: none; }
  .frame { display: none; }
  .section { padding: 106px 18px 54px; }
  .hero, .product-reality { grid-template-columns: 1fr; }
  .orb-panel { min-height: auto; }
  .orb-canvas { width: min(520px, 86vw); justify-self: center; }
  .hero-stage { min-height: 460px; height: 58vh; }
  .case-grid:not(.galaxy-cases), .platform-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galaxy-cases { min-height: 720px; overflow: hidden; }
  .galaxy-cases .case-item { width: min(260px, 32vw); min-height: 190px; }
  .dock { grid-template-columns: 1fr; }
  .download-layout { grid-template-columns: 1fr; }
  .download-copy, .platform-card { min-height: 360px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-card { min-height: 220px; }
  .ppt-showcase { grid-template-columns: 1fr; min-height: 880px; }
  .ppt-tabs { grid-template-columns: repeat(5, 1fr); grid-template-rows: none; }
  .ppt-tabs button { min-height: 44px; }
  .ppt-slide {
    left: 0;
    top: 66px;
    grid-template-columns: 1fr;
    height: 780px;
    min-height: 780px;
  }
  .project-preview-panel { max-height: 360px; }
  .ppt-table > div { grid-template-columns: 1.2fr .8fr .8fr .8fr; }
  .ppt-table strong, .ppt-table span { padding: 12px; font-size: 12px; }
}
@media (max-width: 620px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  .orb-brief h1 { font-size: 30px; }
  .sound span:last-child { display: none; }
  .case-grid:not(.galaxy-cases), .platform-list { grid-template-columns: 1fr; }
  .contact-list strong { font-size: 20px; }
  .galaxy-cases .case-item { width: min(210px, 38vw); min-height: 160px; }
  .hero-stage { min-height: 540px; }
  .portal-large { width: 92%; left: 0; top: 0; height: 32%; }
  .portal-small { width: 48%; right: 0; top: 35%; height: 22%; }
  .portal-tall { width: 48%; left: 0; bottom: 14%; height: 38%; }
  .portal-strip { width: 92%; left: 4%; bottom: 0; height: 18%; }
  .video-lightbox { padding: 54px 12px 16px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-top { min-height: 48px; padding: 0 12px; }
  .ppt-showcase { min-height: 960px; }
  .ppt-slide { height: 860px; min-height: 860px; }
  .project-preview-panel { max-height: 300px; }
  .ppt-copy { padding: 18px; }
  .ppt-copy h3 { font-size: 32px; }
  .ppt-table { overflow-x: auto; }
  .ppt-table > div { min-width: 560px; }
}