/* ------------------------------------------------------------------
   TOVA 網站改版中頁面
   尺寸依設計稿等比換算：桌面 1920×1080、手機 390×844
   ------------------------------------------------------------------ */

:root {
  --navy: #0c163a;   /* 標題 */
  --grey: #686f86;   /* 說明文字 */
  --bg:   #f3f5f9;   /* 底色 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 100%;
}

.logo  { display: block; height: auto; }
h1     { margin: 0; font-weight: 700; line-height: 1; letter-spacing: 0.01em; }
h1 .dots { letter-spacing: 0.06em; }

.tagline {
  margin: 0;
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -0.01em;
  /* 斷行只由 <br> 決定，避免字型度量差異造成多折一行 */
  white-space: nowrap;
}

.note { margin: 0; color: var(--grey); line-height: 1.6; }

.illustration { display: block; height: auto; }

/* ---------- 桌面：兩欄，插圖在右 ---------- */
@media (min-width: 900px) {
  .content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* 設計稿內容區 1051 / 1920 = 54.75%，超過 1920 後不再放大 */
    width: min(54.75vw, 1051px);
  }

  .copy { max-width: 62%; }

  .logo    { width: min(20.17vw, 387px); margin-bottom: min(0.5vw, 10px); }
  h1       { font-size: min(5vw, 96px); }
  .tagline { font-size: min(3.385vw, 65px); margin-top: min(1.5vw, 29px); }
  .note    { font-size: max(14px, min(1.042vw, 20px)); margin-top: min(1.4vw, 27px); }

  .illustration { width: 25.14%; }
}

/* ---------- 手機／平板：單欄，插圖在下 ---------- */
@media (max-width: 899.98px) {
  .stage { padding: 8vh max(20px, 16.6vw); }

  .logo    { width: min(51.3vw, 280px); margin-bottom: min(4.4vw, 24px); }
  h1       { font-size: min(10.26vw, 56px); }
  .tagline { font-size: min(7.2vw, 40px); margin-top: min(6.4vw, 34px); }
  .note    { font-size: clamp(12px, 2.56vw, 16px); margin-top: min(5.4vw, 30px); }

  .illustration {
    width: min(32.4vw, 180px);
    margin: min(19vw, 100px) auto 0;
  }
}