/* ============================================================
   reurl.io · go.reurl.io 短網址服務 landing page
   ------------------------------------------------------------
   視覺語言：Narsil Design System v2.0.0（納曦智能 | Narsil AI）
   token 來源：../narsil_design_system_v2/styles.css（位元組一致的副本，
   正典位於 /Users/liushihyen/Narsil/design_system/narsil_design_system_v2/）

   規則
   - 顏色、圓角、陰影、字體、動態一律引用 token（var(--...)），本檔不寫任何 HEX。
   - 所有 class 以 deus-landing- 為前綴，避免與其他樣式衝突。
   - 桌機／行動裝置皆可閱讀：單欄斷點 900px 與 640px。
   ============================================================ */

/* ------------------------------------------------------------
   0 · 頁面層級變數
   ------------------------------------------------------------
   Plus Jakarta Sans 沒有 CJK 字形，所以本頁的文字字體堆疊把官方拉丁字體
   與官方中文字體（Chiron Hei HK → Noto Sans TC）排在同一串，讓瀏覽器逐字
   落到正確的字體。兩段來源都是 tokens/typography.css 的官方堆疊；
   之所以不寫成 var(--font-sans), var(--font-cn)，是因為 --font-sans 結尾的
   泛型 sans-serif 會先把中文字吃掉，中文字體就永遠輪不到。
   ------------------------------------------------------------ */
:root {
  --deus-landing-font-text: "Plus Jakarta Sans", "Chiron Hei HK", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
  --deus-landing-container: 72rem;
  --deus-landing-gutter: var(--space-6);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.deus-landing-body {
  font-family: var(--deus-landing-font-text);
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
}

.deus-landing-body a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: var(--transition-colors);
}

.deus-landing-body a:hover {
  color: var(--link-hover);
}

.deus-landing-body :focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

.deus-landing-body strong {
  font-weight: var(--fw-bold);
}

.deus-landing-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* 跳到主要內容（鍵盤使用者） */
.deus-landing-skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-20));
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.deus-landing-skip-link:focus {
  top: var(--space-4);
}

/* 共用容器 */
.deus-landing-container {
  max-width: var(--deus-landing-container);
  margin: 0 auto;
  padding-left: var(--deus-landing-gutter);
  padding-right: var(--deus-landing-gutter);
}

/* ------------------------------------------------------------
   1 · 頂部導覽（Obsidian）
   ------------------------------------------------------------ */
.deus-landing-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--narsil-obsidian) 90%, transparent);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom: var(--border-width) solid var(--narsil-stone-800);
}

.deus-landing-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 4rem;
}

.deus-landing-nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.deus-landing-nav-brand img {
  display: block;
  height: 1.75rem;
  width: auto;
}

.deus-landing-nav-domain {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--narsil-steel-400);
  padding-left: var(--space-6);
  border-left: var(--border-width) solid var(--narsil-stone-800);
}

.deus-landing-nav-links {
  margin-left: auto;
  display: flex;
  gap: var(--space-6);
}

.deus-landing-nav-links a {
  color: var(--narsil-stone-300);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.deus-landing-nav-links a:hover {
  color: var(--narsil-stone-100);
}

/* ------------------------------------------------------------
   2 · Hero（Obsidian 品牌時刻：Dawn 光暈 + 大型 N Symbol 水印）
   ------------------------------------------------------------ */
.deus-landing-hero {
  position: relative;
  overflow: hidden;
  background: var(--narsil-obsidian);
  color: var(--narsil-stone-200);
}

.deus-landing-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 76% 18%, color-mix(in srgb, var(--narsil-dawn-500) 20%, transparent), transparent 56%);
}

.deus-landing-hero-watermark {
  position: absolute;
  right: -4rem;
  top: 2rem;
  height: 28rem;
  width: auto;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.deus-landing-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

/* 眉標：英文框架，Dawn 400 於深色底、Steel Mist 於淺色底 */
.deus-landing-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.deus-landing-eyebrow--on-dark {
  color: var(--narsil-dawn-400);
}

.deus-landing-hero-title {
  margin-top: var(--space-5);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-6xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--narsil-stone-100);
  text-wrap: balance;
}

.deus-landing-hero-title em,
.deus-landing-section-title em {
  font-style: normal;
  color: var(--narsil-dawn-300);
}

.deus-landing-section-title em {
  color: var(--text-accent);
}

.deus-landing-hero-lead {
  margin-top: var(--space-6);
  max-width: 34rem;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--narsil-stone-300);
}

.deus-landing-hero-lead code {
  color: var(--narsil-stone-100);
}

.deus-landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* 按鈕：主要 = Dawn Gold；幽靈 = 透明底、細框 */
.deus-landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-lg);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deus-landing-button--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.deus-landing-button--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.deus-landing-button--primary:active {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
}

.deus-landing-button--ghost {
  background: transparent;
  color: var(--narsil-stone-100);
  border-color: var(--narsil-stone-700);
}

.deus-landing-button--ghost:hover {
  color: var(--narsil-stone-100);
  border-color: var(--narsil-stone-500);
}

/* 短網址範例卡：深色卡片，短碼以 Dawn Gold 標示（金色只用在這一處焦點） */
.deus-landing-specimen {
  position: relative;
  padding: var(--space-8);
  border: var(--border-width) solid var(--narsil-stone-800);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--narsil-stone-950) 72%, transparent);
  box-shadow: var(--shadow-xl);
}

.deus-landing-specimen-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--narsil-steel-400);
}

.deus-landing-specimen-url {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: clamp(var(--fs-md), 2.2vw, var(--fs-xl));
  color: var(--narsil-stone-200);
  word-break: break-all;
}

.deus-landing-specimen-key {
  color: var(--narsil-dawn-400);
  font-weight: var(--fw-bold);
}

.deus-landing-specimen-arrow {
  margin: var(--space-4) 0;
  height: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--narsil-steel-500);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
}

.deus-landing-specimen-arrow::before {
  content: "";
  flex: 0 0 auto;
  width: var(--space-8);
  height: 1px;
  background: var(--narsil-dawn-500);
}

.deus-landing-specimen-destination {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--narsil-stone-400);
  word-break: break-all;
}

.deus-landing-specimen-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--narsil-stone-800);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.deus-landing-specimen-meta dt {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--narsil-steel-500);
}

.deus-landing-specimen-meta dd {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--narsil-stone-300);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   3 · 內容區段（淺色）
   ------------------------------------------------------------ */
.deus-landing-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  background: var(--surface-canvas);
  scroll-margin-top: 4rem;
}

.deus-landing-section--tinted {
  background: var(--narsil-stone-100);
  border-top: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.deus-landing-section-header {
  max-width: 44rem;
}

.deus-landing-section-title {
  margin-top: var(--space-4);
  font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.deus-landing-section-lead {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* 3a · 三步驟卡片 */
.deus-landing-steps {
  list-style: none;
  padding: 0;
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.deus-landing-step {
  position: relative;
  padding: var(--space-7);
  background: var(--surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}

.deus-landing-step-index {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--narsil-forged-bronze);
  font-variant-numeric: tabular-nums;
}

.deus-landing-step-kicker {
  margin-top: var(--space-5);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.deus-landing-step-title {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.deus-landing-step-body {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* 3b · 可信機制：左三項核對，右深色「只記錄這些」面板 */
.deus-landing-trust {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: start;
}

.deus-landing-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: deus-landing-check;
}

.deus-landing-check {
  counter-increment: deus-landing-check;
  display: grid;
  grid-template-columns: var(--space-12) 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--border-default);
}

.deus-landing-check:last-child {
  border-bottom: var(--border-width) solid var(--border-default);
}

.deus-landing-check::before {
  content: counter(deus-landing-check, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--narsil-forged-bronze);
  font-variant-numeric: tabular-nums;
}

.deus-landing-check-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.deus-landing-check-body {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.deus-landing-record-panel {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.deus-landing-record-panel h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--narsil-stone-100);
}

.deus-landing-record-list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.deus-landing-record-list div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--narsil-stone-800);
}

.deus-landing-record-list dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--narsil-stone-200);
}

.deus-landing-record-list dd {
  font-size: var(--fs-sm);
  color: var(--narsil-steel-300);
}

.deus-landing-record-not-title {
  margin-top: var(--space-6);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--narsil-dawn-400);
}

.deus-landing-record-not {
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.deus-landing-record-not li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--narsil-stone-300);
}

.deus-landing-record-not li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: var(--space-3);
  height: 1px;
  background: var(--narsil-dawn-500);
}

/* 3c · 服務範圍：兩張並排卡片 */
.deus-landing-scope {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.deus-landing-scope-card {
  padding: var(--space-7);
  background: var(--surface-canvas);
  border: var(--border-width) solid var(--border-default);
  border-left: 3px solid var(--narsil-dawn-500);
  border-radius: var(--radius-md);
}

.deus-landing-scope-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.deus-landing-scope-card p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   4 · 回報連結（Obsidian 帶狀區；只在設定了聯絡信箱時才輸出）
   ------------------------------------------------------------ */
.deus-landing-report {
  background: var(--narsil-obsidian);
  color: var(--narsil-stone-200);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  scroll-margin-top: 4rem;
}

.deus-landing-report-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-10);
  align-items: center;
}

.deus-landing-report-title {
  margin-top: var(--space-4);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--narsil-stone-100);
  text-wrap: balance;
}

.deus-landing-report-body {
  margin-top: var(--space-4);
  font-size: var(--fs-base);
  color: var(--narsil-stone-300);
  max-width: 34rem;
}

.deus-landing-report-body a {
  color: var(--narsil-dawn-300);
}

.deus-landing-report-body a:hover {
  color: var(--narsil-dawn-200);
}

.deus-landing-report-action {
  justify-self: end;
}

/* ------------------------------------------------------------
   5 · 頁尾（Stone 950）
   ------------------------------------------------------------ */
.deus-landing-footer {
  background: var(--narsil-stone-950);
  color: var(--narsil-stone-400);
  padding-top: var(--space-14);
  padding-bottom: var(--space-10);
}

.deus-landing-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.deus-landing-footer-brand img {
  display: block;
  height: 1.625rem;
  width: auto;
}

.deus-landing-footer-tagline {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--narsil-stone-200);
}

.deus-landing-footer-pillars {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  color: var(--narsil-dawn-400);
}

.deus-landing-footer-note {
  justify-self: end;
  text-align: right;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--narsil-steel-400);
  max-width: 22rem;
}

.deus-landing-footer-note code {
  color: var(--narsil-stone-300);
}

.deus-landing-footer-bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--narsil-stone-800);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--fs-2xs);
  color: var(--narsil-steel-500);
}

.deus-landing-footer-bottom span:last-child {
  margin-left: auto;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

/* ------------------------------------------------------------
   6 · 響應式：平板與手機一律單欄
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .deus-landing-hero-inner,
  .deus-landing-trust,
  .deus-landing-report-inner,
  .deus-landing-footer-inner {
    grid-template-columns: 1fr;
  }

  .deus-landing-hero-inner {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .deus-landing-hero-watermark {
    height: 18rem;
    right: -6rem;
    top: auto;
    bottom: -4rem;
  }

  .deus-landing-steps {
    grid-template-columns: 1fr;
  }

  .deus-landing-scope {
    grid-template-columns: 1fr;
  }

  .deus-landing-report-action,
  .deus-landing-footer-note {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .deus-landing-nav-domain,
  .deus-landing-nav-links {
    display: none;
  }

  .deus-landing-section,
  .deus-landing-report {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }

  .deus-landing-specimen {
    padding: var(--space-6);
  }

  .deus-landing-specimen-meta {
    grid-template-columns: 1fr;
  }

  .deus-landing-record-list div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .deus-landing-check {
    grid-template-columns: var(--space-10) 1fr;
  }
}