/* CELLSCAPE brand landing (T-378). No model, no HUD. */
:root{
  --bg:#050814;
  --text:#e8eef8;
  --dim:rgba(210,220,235,.72);
  --accent:#9be7ff;
  --panel:rgba(8,12,24,.78);
  --line:rgba(155,231,255,.28);
  --sans:"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}
#hero{position:relative;width:100%;height:100%;background:#050814}
#heroImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;user-select:none;-webkit-user-drag:none;
}
.brand{
  position:absolute;z-index:3;left:5vw;top:12vh;max-width:min(420px,46vw);
  pointer-events:none;text-shadow:0 8px 28px rgba(0,0,0,.55);
}
.brand .name{
  font-size:clamp(40px,6vw,72px);font-weight:600;letter-spacing:.02em;
  background:linear-gradient(90deg,#f4f7ff 20%,#b9a6ff 72%,#7fd4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.05;
}
.brand .line{
  margin-top:10px;font-size:13px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--dim);
}
@media (min-width:1100px) and (min-aspect-ratio:16/10){
  .brand{display:none}
}
#hotspots{position:absolute;inset:0;z-index:4;pointer-events:none}
.spot{
  position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;
  border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(155,231,255,.18);pointer-events:auto;cursor:pointer;
  box-shadow:0 0 0 6px rgba(155,231,255,.08);
}
.spot:hover,.spot:focus-visible,.spot.on{
  background:rgba(155,231,255,.45);
  box-shadow:0 0 0 8px rgba(155,231,255,.16);
  outline:none;
}
.spot span{display:none}
#card{
  position:absolute;z-index:5;right:3vw;bottom:22vh;width:min(360px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 14px;backdrop-filter:blur(10px);
}
#card.hidden,.hidden{display:none}
#card .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
#card h2{font-size:20px;font-weight:600;margin:6px 0 8px}
#card .tag{font-size:13px;letter-spacing:.04em;color:#d5def0;margin-bottom:8px}
#card .note{font-size:12.5px;line-height:1.65;color:var(--dim)}
#card .x{
  position:absolute;top:8px;right:10px;border:0;background:transparent;
  color:var(--dim);font-size:20px;cursor:pointer;line-height:1;
}
footer.dock{
  position:absolute;z-index:5;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:0 5vw 28px;pointer-events:none;
}
.cta{
  pointer-events:auto;display:inline-block;padding:12px 26px;border-radius:6px;
  border:1px solid rgba(155,231,255,.7);background:rgba(10,18,36,.45);
  color:#f4fbff;text-decoration:none;letter-spacing:.16em;font-size:15px;
}
.cta:hover{background:rgba(155,231,255,.86);color:#041018}
.legal{pointer-events:none;font-size:11px;color:var(--dim);letter-spacing:.04em;max-width:520px;line-height:1.6}
.quiet{pointer-events:auto;color:var(--dim);font-size:12px;text-decoration:none}
.quiet:hover{color:#fff}
.chips{
  display:none;pointer-events:auto;flex-wrap:wrap;gap:6px;max-width:92vw;
}
.chips button{
  font:inherit;font-size:11px;letter-spacing:.08em;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(8,12,24,.55);color:#dbe7f4;cursor:pointer;
}
@media (max-width:760px){
  .brand{left:20px;top:18px;max-width:none;display:block}
  .brand .name{font-size:34px}
  .brand .line{letter-spacing:.28em;font-size:11px}
  .chips{display:flex}
  #card{right:12px;left:12px;width:auto;bottom:30vh}
  footer.dock{padding:0 16px 18px}
  .cta{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .spot{box-shadow:none}
}