/* DreamChat — twilight stationery static site */

:root {
  /* sky tones */
  --bg-top: #3d2e6d;
  --bg-mid: #7e64b8;
  --bg-low: #c4afde;
  --bg-bottom: #efe2f8;

  /* surfaces (glass) */
  --surface-card: rgba(255, 255, 255, 0.78);
  --surface-soft: rgba(248, 244, 254, 0.55);
  --surface-faint: rgba(255, 255, 255, 0.5);

  /* borders */
  --border-hairline: rgba(138, 111, 199, 0.18);
  --border-soft: rgba(138, 111, 199, 0.12);
  --border-strong: rgba(138, 111, 199, 0.32);

  /* ink */
  --text: #261d3d;
  --text-soft: #534666;
  --muted: #847a98;

  /* accents */
  --accent: #7a5fb8;
  --accent-deep: #5c4396;
  --accent-soft: #b9a3e0;
  --accent-bg: rgba(138, 111, 199, 0.12);
  --accent-bg-strong: rgba(138, 111, 199, 0.22);

  /* shadows */
  --shadow-card: 0 28px 64px -22px rgba(50, 30, 90, 0.32), 0 8px 24px -12px rgba(74, 58, 122, 0.18);
  --shadow-button-primary: 0 10px 28px rgba(122, 95, 184, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* radius */
  --radius-card: 22px;
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* fonts — system-only, no external loads.
     Display stack: editorial serif for Latin, sans fallback for CJK to avoid faked italic on Hanzi/Kana. */
  --font-display:
    "Iowan Old Style", "Apple Garamond", "Hoefler Text", "Baskerville",
    "Source Han Serif TC", "Source Han Serif SC", "Noto Serif CJK TC", "Songti TC", "Songti SC",
    "Hiragino Mincho ProN", "YuMincho", serif;
  --font-text:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans CJK JP", "Noto Sans CJK TC", "Noto Sans CJK SC",
    "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei",
    sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 375px;
  font-family: var(--font-text);
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    /* wavy illustration-style cloud band spanning the full width at the bottom, with soft glow */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'><defs><filter id='g' x='-5%25' y='-25%25' width='110%25' height='150%25'><feGaussianBlur stdDeviation='18'/></filter></defs><path fill='white' opacity='0.55' filter='url(%23g)' d='M0 185 C65 168 120 170 165 205 C220 105 340 88 430 150 C505 115 590 130 645 205 C715 160 810 165 850 250 C900 190 980 185 1040 245 C1095 155 1205 120 1300 165 C1375 85 1495 80 1600 135 L1600 420 L0 420 Z'/><path fill='white' opacity='0.42' d='M0 185 C65 168 120 170 165 205 C220 105 340 88 430 150 C505 115 590 130 645 205 C715 160 810 165 850 250 C900 190 980 185 1040 245 C1095 155 1205 120 1300 165 C1375 85 1495 80 1600 135 L1600 420 L0 420 Z'/><path fill='white' opacity='0.96' d='M0 225 C70 205 135 205 190 245 C250 145 360 135 445 205 C515 175 590 185 640 255 C700 215 780 225 815 295 C865 245 935 245 980 300 C1030 220 1125 200 1195 250 C1265 150 1385 135 1465 205 C1515 175 1560 170 1600 190 L1600 420 L0 420 Z'/></svg>") bottom center / max(375px, 100%) clamp(180px, calc(40vw + 60px), 460px) no-repeat,
    /* sky gradient: deep purple top to light lavender bottom */
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 35%, var(--bg-low) 70%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/* Star field — layer A (twinkles into bright) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'><g fill='white'><circle cx='8' cy='80' r='1.3'/><circle cx='60' cy='50' r='1.6'/><circle cx='180' cy='105' r='2'/><circle cx='320' cy='65' r='1.1'/><circle cx='460' cy='130' r='1.9'/><circle cx='600' cy='80' r='1.3'/><circle cx='740' cy='115' r='2.2'/><circle cx='880' cy='55' r='1.5'/><circle cx='1020' cy='95' r='1.8'/><circle cx='1140' cy='150' r='1.2'/><circle cx='1190' cy='75' r='1.4'/><circle cx='20' cy='190' r='1.4'/><circle cx='110' cy='200' r='1.4'/><circle cx='280' cy='235' r='1.7'/><circle cx='420' cy='180' r='1'/><circle cx='560' cy='220' r='1.6'/><circle cx='700' cy='170' r='2'/><circle cx='840' cy='245' r='1.3'/><circle cx='980' cy='200' r='1.5'/><circle cx='1100' cy='240' r='1.8'/><circle cx='1185' cy='210' r='1.3'/><circle cx='12' cy='340' r='1.5'/><circle cx='220' cy='330' r='1.2'/><circle cx='380' cy='360' r='1.5'/><circle cx='520' cy='310' r='1.1'/><circle cx='760' cy='340' r='1.6'/><circle cx='900' cy='380' r='1.2'/><circle cx='1040' cy='320' r='1.7'/><circle cx='1180' cy='355' r='1.4'/><circle cx='150' cy='90' r='9' opacity='0.22'/><circle cx='150' cy='90' r='3.5'/><circle cx='540' cy='60' r='9' opacity='0.22'/><circle cx='540' cy='60' r='3.5'/><circle cx='890' cy='180' r='9' opacity='0.22'/><circle cx='890' cy='180' r='3.5'/><circle cx='320' cy='280' r='8' opacity='0.22'/><circle cx='320' cy='280' r='3'/><circle cx='1080' cy='260' r='8' opacity='0.22'/><circle cx='1080' cy='260' r='3'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 65%;
  animation: twinkle-a 1.2s ease-in-out infinite alternate;
}

/* Star field — layer B (twinkles into dim, offset positions) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'><g fill='white'><circle cx='5' cy='135' r='1.3'/><circle cx='100' cy='40' r='1.5'/><circle cx='235' cy='40' r='1.8'/><circle cx='370' cy='160' r='1.5'/><circle cx='510' cy='55' r='2'/><circle cx='670' cy='150' r='1.5'/><circle cx='810' cy='40' r='1.2'/><circle cx='950' cy='170' r='1.8'/><circle cx='1090' cy='35' r='2'/><circle cx='1180' cy='160' r='1.4'/><circle cx='30' cy='270' r='1.5'/><circle cx='80' cy='285' r='1.5'/><circle cx='180' cy='250' r='1.3'/><circle cx='340' cy='275' r='1.7'/><circle cx='480' cy='270' r='1.2'/><circle cx='640' cy='295' r='1.6'/><circle cx='780' cy='280' r='1.5'/><circle cx='920' cy='305' r='1.8'/><circle cx='1060' cy='265' r='1.2'/><circle cx='1190' cy='290' r='1.4'/><circle cx='8' cy='420' r='1.5'/><circle cx='160' cy='405' r='1.3'/><circle cx='300' cy='425' r='1.8'/><circle cx='440' cy='385' r='1'/><circle cx='580' cy='430' r='1.6'/><circle cx='720' cy='395' r='1.2'/><circle cx='860' cy='435' r='1.4'/><circle cx='1000' cy='400' r='1.5'/><circle cx='1150' cy='420' r='1.3'/><circle cx='420' cy='120' r='9' opacity='0.22'/><circle cx='420' cy='120' r='3.5'/><circle cx='760' cy='90' r='9' opacity='0.22'/><circle cx='760' cy='90' r='3.5'/><circle cx='1100' cy='220' r='8' opacity='0.22'/><circle cx='1100' cy='220' r='3'/><circle cx='560' cy='340' r='8' opacity='0.22'/><circle cx='560' cy='340' r='3'/><circle cx='110' cy='370' r='8' opacity='0.22'/><circle cx='110' cy='370' r='3'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 65%;
  animation: twinkle-b 2.4s ease-in-out infinite alternate;
}

@keyframes twinkle-a {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes twinkle-b {
  from { opacity: 1; }
  to { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

::selection {
  background: rgba(138, 111, 199, 0.28);
  color: var(--text);
}

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 24px 52px;
  position: relative;
  z-index: 1;
}

/* ============================================================ */
/* Header                                                       */
/* ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(74, 58, 122, 0.55);
}

.brand a {
  color: inherit;
  text-decoration: none;
}

.brand a:hover,
.brand a:focus {
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-block;
  object-fit: cover;
  box-shadow:
    0 6px 16px rgba(80, 50, 140, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* ============================================================ */
/* Language switcher — moonstone glass pill                     */
/* ============================================================ */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow:
    0 8px 24px rgba(74, 58, 122, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.lang-switch button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  letter-spacing: 0.2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switch button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.4);
}

.lang-switch button:focus-visible {
  outline: 2px solid rgba(122, 95, 184, 0.7);
  outline-offset: 2px;
}

.lang-switch button.active {
  background: linear-gradient(180deg, #a78bdc 0%, #7a5fb8 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow:
    0 2px 8px rgba(122, 95, 184, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ============================================================ */
/* Hero (home page)                                             */
/* ============================================================ */
.hero {
  text-align: center;
  padding: 8px 16px 16px;
}

.hero-banner {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto 8px;
  filter: drop-shadow(0 8px 28px rgba(70, 40, 130, 0.22));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* H1 reframed as a small italic-serif tracked kicker that
   confirms the brand name (for SEO/a11y) without competing
   with the stylized banner art above. */
.hero h1 {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 28px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(74, 58, 122, 0.45);
}

.hero h1::before,
.hero h1::after {
  content: '·';
  display: inline-block;
  margin: 0 12px;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  letter-spacing: 0;
}

.hero p {
  font-size: 17px;
  line-height: 1.7;
  color: #ece1fb;
  max-width: 560px;
  margin: 0 auto 36px;
  text-shadow: 0 1px 8px rgba(74, 58, 122, 0.35);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================ */
/* Buttons — glass primary, frosted outline secondary           */
/* ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.3px;
  /* Frosted glass pill — vertical gradient + top inset highlight + blur give a
     glass feel on the dark sky; lavender border + dark text remain readable
     even when the button sits over the white cloud layer. */
  border: 1px solid rgba(122, 95, 184, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: var(--accent-deep);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%);
  border-color: rgba(122, 95, 184, 0.55);
  color: var(--accent-deep);
  box-shadow:
    0 10px 28px rgba(74, 58, 122, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(180deg, #a78bdc 0%, #7a5fb8 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-button-primary);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #b095e0 0%, #6f54b0 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 14px 32px rgba(122, 95, 184, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================================ */
/* Content pages (privacy / support)                            */
/* ============================================================ */
.page {
  position: relative;
  background: var(--surface-card);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-card);
  padding: 56px 56px 52px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* hairline top highlight on the card */
.page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
}

/* H1 on inner pages — editorial serif */
.page h1 {
  font-family: var(--font-display);
  font-size: 34px;
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--text);
  text-wrap: balance;
}

.page .meta {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 32px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: var(--font-text);
}

.page .lead {
  color: var(--text);
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Section heading with hairline accent before the text */
.page h2 {
  position: relative;
  font-size: 18px;
  margin: 44px 0 14px;
  padding-left: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.1px;
  text-wrap: balance;
}

.page h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 20px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.7;
}

.page h3 {
  font-size: 15px;
  margin: 22px 0 8px;
  font-weight: 600;
  color: var(--text);
}

.page p {
  margin: 0 0 14px;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Custom soft-dot bullets */
.page ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 14px;
  color: var(--text-soft);
}

.page ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}

.page ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.75;
}

/* ============================================================ */
/* FAQ items — refined card                                     */
/* ============================================================ */
.faq-item {
  margin: 14px 0;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--border-strong);
  box-shadow: 0 8px 20px rgba(74, 58, 122, 0.08);
  transform: translateY(-1px);
}

.faq-item .q {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: -0.1px;
}

.faq-item .a {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================ */
/* Email chip                                                   */
/* ============================================================ */
.email-line {
  display: inline-block;
  padding: 9px 18px;
  background: var(--accent-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-deep);
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.email-line:hover {
  background: var(--accent-bg-strong);
  border-color: var(--border-strong);
  color: var(--accent-deep);
  text-decoration: none;
}

/* ============================================================ */
/* Footer                                                        */
/* ============================================================ */
.site-footer {
  text-align: center;
  margin-top: 28px;
  padding: 24px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.site-footer nav {
  margin-bottom: 14px;
  display: inline-flex;
  gap: 28px;
  align-items: center;
  position: relative;
}

.site-footer nav a {
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: 0.3px;
  position: relative;
  transition: color 0.18s ease;
}

.site-footer nav a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer nav a + a::before {
  content: '✦';
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-55%);
  color: var(--accent-soft);
  font-size: 8px;
}

.site-footer > div {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 1.2px;
  color: var(--muted);
}

/* ============================================================ */
/* Language visibility                                          */
/* ============================================================ */
[data-lang] { display: none; }
[data-lang].active { display: block; }
span[data-lang] { display: none; }
span[data-lang].active { display: inline; }

/* ============================================================ */
/* Responsive                                                   */
/* ============================================================ */
@media (max-width: 640px) {
  .container {
    padding: 24px 18px 36px;
  }

  .site-header {
    margin-bottom: 28px;
  }

  .page {
    padding: 36px 24px 32px;
    border-radius: 18px;
  }

  .hero {
    padding: 8px 8px 8px;
  }

  .hero h1 {
    font-size: 12px;
    letter-spacing: 4px;
    margin-bottom: 22px;
  }

  .hero h1::before,
  .hero h1::after {
    margin: 0 8px;
  }

  .hero p {
    font-size: 16px;
  }

  .page h1 {
    font-size: 26px;
  }

  .page h2 {
    font-size: 16px;
    margin: 32px 0 12px;
    padding-left: 26px;
  }

  .page h2::before {
    width: 16px;
  }

  .lang-switch button {
    padding: 6px 11px;
    font-size: 12px;
  }

  .brand {
    font-size: 19px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .btn {
    padding: 12px 22px;
    font-size: 14px;
  }

  .faq-item {
    padding: 16px 18px;
  }

  .site-footer nav {
    gap: 22px;
  }

  .site-footer nav a + a::before {
    left: -14px;
  }
}