/* ============================================================
   TEMPLATE C — "HOLOGRAM"
   Morphing device point-clouds · electric cyan x violet sci-fi
   ============================================================ */

:root {
  --bg: #06070b;
  --ink: #eaf6ff;
  --accent: #35e0ff;
  --accent2: #8b7bff;
  --muted: #64788f;
  --line: rgba(94, 214, 255, 0.16);
  --font-display: "Chakra Petch", "Noto Sans TC", sans-serif;
  --font-body: "Chakra Petch", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans TC", monospace;
}

body {
  background:
    radial-gradient(1100px 620px at 76% 40%, rgba(53, 224, 255, 0.06), transparent 65%),
    radial-gradient(900px 540px at 16% 88%, rgba(139, 123, 255, 0.06), transparent 65%),
    var(--bg);
}

.label, .brand, .nav-links a, .lang-toggle, .scroll-hint { font-family: var(--font-mono); }

/* ------------------------ Hero ------------------------ */
.hero {
  position: relative; z-index: 5;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px clamp(20px, 5vw, 90px) 60px;
}
.hero-copy { max-width: 620px; }
.hero-kicker { margin-bottom: 24px; color: var(--accent); }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 102px);
  font-weight: 600; line-height: 0.98;
  letter-spacing: 0; text-transform: uppercase;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; will-change: transform; }
.metal {
  background: linear-gradient(100deg, #7df3ff 0%, #35e0ff 35%, #8b7bff 75%, #c9c2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 26px; max-width: 470px;
  font-size: clamp(14px, 1.2vw, 17px); line-height: 1.85;
  color: var(--muted);
}
.app-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.app-tags span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--accent);
  border: 1px solid var(--line);
  background: rgba(10, 18, 28, 0.55);
  padding: 8px 13px;
}
.hero-cta { margin-top: 36px; }
.scroll-hint {
  position: absolute; right: clamp(24px, 5vw, 56px); bottom: 36px;
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--muted);
}
.scroll-hint i {
  width: 1px; height: 54px; background: var(--line);
  position: relative; overflow: hidden; display: block;
}
.scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%; background: var(--accent);
  animation: dripC 2.2s var(--ease) infinite;
}
@keyframes dripC {
  0% { top: -50%; } 60%, 100% { top: 105%; }
}
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* ---------------------- Marquee ----------------------- */
.marquee {
  position: relative; z-index: 5;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  padding: 20px 0;
  background: rgba(9, 14, 22, 0.4);
}
.marquee-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
}
@keyframes marquee {
  from { transform: translateX(0); } to { transform: translateX(-50%); }
}

/* ---------------------- Mission ----------------------- */
.mission-list {
  margin-top: clamp(48px, 7vh, 84px);
  display: grid; gap: clamp(16px, 2vh, 26px);
}
.mission-item {
  position: relative;
  display: grid; grid-template-columns: 110px 1fr;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(26px, 3.4vh, 42px) clamp(20px, 2.6vw, 40px);
  border: 1px solid var(--line);
  background: rgba(9, 14, 22, 0.55);
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mission-item:hover {
  border-color: rgba(53, 224, 255, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 0 34px rgba(53, 224, 255, 0.10), inset 0 0 24px rgba(53, 224, 255, 0.04);
}
.mission-item::before, .mission-item::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--accent); opacity: 0.8;
}
.mission-item::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.mission-item::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.m-index {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--accent); padding-top: 6px;
}
.m-index::before { content: "// "; color: var(--muted); }
.mission-item h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: clamp(19px, 2.1vw, 30px);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.mission-item p {
  margin-top: 12px; max-width: 640px;
  font-size: 14px; line-height: 1.8; color: var(--muted);
}
@media (max-width: 700px) {
  .mission-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------- Metrics ----------------------- */
.giant-word {
  position: absolute; top: clamp(40px, 8vh, 90px); right: 0;
  font-family: var(--font-display);
  font-size: clamp(90px, 16vw, 260px);
  font-weight: 600; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(53, 224, 255, 0.14);
  pointer-events: none; user-select: none;
  z-index: 0;
}
#metrics .section-title { position: relative; z-index: 1; }
.tile-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(48px, 7vh, 84px);
}
.tile {
  position: relative;
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2vw, 30px);
  border: 1px solid var(--line);
  background: rgba(9, 14, 22, 0.55);
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover {
  border-color: rgba(139, 123, 255, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 0 34px rgba(139, 123, 255, 0.12);
}
.tile::before, .tile::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--accent2); opacity: 0.8;
}
.tile::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.tile::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.tile-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 600; line-height: 1;
}
.tile-num .tilde { color: var(--accent2); margin: 0 4px; }
.tile h4 {
  margin-top: 18px; font-family: var(--font-mono);
  font-weight: 400; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent);
}
.tile p { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
@media (max-width: 900px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

/* ---------------------- Footer ------------------------ */
.cta-block {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.cta-body {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 48px);
  font-weight: 500; line-height: 1.25; max-width: 760px;
  text-transform: uppercase;
}