/* 首頁 hero（AGENTS.md §10.4）
 * 硬規則：全視窗置中、隱藏 topbar 與 footer、只有一個大標與一顆 CTA。
 * 不加副標、kicker、說明小字或第二顆按鈕。 */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(var(--sp-8), 6vh, var(--sp-16)) var(--gutter);
  overflow: clip;
  text-align: center;
}

/* 唯一的背景元素：一道極淡的同色光暈 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, var(--ambient-a), transparent 26rem);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-5), 3.4vh, var(--sp-8));
  width: min(100%, 680px);
}

.hero__mark {
  width: 52px;
  height: 52px;
  padding: 4px;
  border: 1px solid var(--focus-line);
  border-radius: var(--radius-card);
  background: var(--avatar-plate);
  box-shadow: var(--shadow-accent);
}

/* 產品封面就是說明：與其寫宣傳句，不如讓人先看到面板長什麼樣 */
.hero__cover {
  width: min(100%, 620px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--focus-line);
  border-radius: var(--radius-panel);
  background: var(--avatar-plate);
  box-shadow: var(--shadow-lg);
}

.hero__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__title {
  /* 容器寬度配合這個級距，讓大標維持 2–3 行 */
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* 「Discord」用單一 accent 漸層字；整行不被拆斷 */
.hero__accent {
  background: linear-gradient(100deg, var(--focus) 10%, var(--focus-hover) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* CTA 保留膠囊形狀：全站唯一一顆，刻意和後台按鈕不同（§10.4） */
.hero__cta {
  min-width: 200px;
  border-radius: var(--radius-pill);
}

@media (max-width: 640px) {
  .hero {
    padding: var(--sp-8) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));
  }

  .hero__inner {
    gap: var(--sp-5);
  }

  .hero__mark {
    width: 44px;
    height: 44px;
  }

  .hero__title {
    font-size: clamp(2rem, 10vw, 2.9rem);
    line-height: 1.14;
  }

  .hero__cta {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .hero__title {
    font-size: clamp(1.85rem, 9.5vw, 2.4rem);
  }
}