/* Frosted surfaces for the public landing page. */
:root {
  --bg: #f7f6f3;
  --ink: #24252b;
  --muted: #6e7079;
  --border: rgba(70, 65, 81, .1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(240, 197, 182, .35), transparent 45%),
    radial-gradient(ellipse at 88% 42%, rgba(194, 190, 233, .35), transparent 44%),
    var(--bg);
}
.site-header {
  width: min(1040px, calc(100% - 48px));
  top: 20px; margin-top: 20px; min-height: 76px;
  grid-template-columns: 1fr auto;
  gap: 20px; padding: 10px 16px 10px 22px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px;
  background: #f9f8f6;
  box-shadow: inset 0 1px 0 white, 0 4px 8px rgba(41, 33, 55, .025), 0 16px 48px rgba(41, 33, 55, .07);
  transition: background .3s ease, box-shadow .3s ease, min-height .3s ease;
}
.site-header.is-scrolled {
  min-height: 66px;
  box-shadow: inset 0 1px 0 white, 0 10px 40px rgba(41, 33, 55, .12);
}
.site-header > .brand { justify-self: start; }
.brand { gap: 9px; }
.brand-word { font-size: 23px; font-weight: 750; letter-spacing: -.055em; }
.brand-word sup { display: none; }
.brand-mark { filter: drop-shadow(0 3px 5px rgba(239, 108, 97, .16)); }
.header-nav { display: flex; align-items: center; gap: 4px; }
.header-nav a {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  color: #64636c; font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.header-nav a:hover, .header-nav a:focus-visible {
  color: var(--ink); background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 white, 0 3px 12px rgba(40, 30, 50, .04);
}
.header-nav a:first-child { color: var(--ink); }
.language-button {
  min-height: 44px; padding: 0 13px; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 1px white;
  font-size: 13px; font-weight: 550;
}
.language-button:hover, .language-button[aria-expanded="true"] { background: rgba(255, 255, 255, .85); }
.language-globe { width: 18px; height: 18px; }
.language-current { min-width: 0; }
.language-chevron { width: 14px; height: 14px; }
.language-menu {
  right: 0; top: calc(100% + 16px); padding: 8px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px;
  background: #f9f8f6;
  box-shadow: inset 0 1px 0 white, 0 20px 60px rgba(41, 33, 55, .13);
}
.language-picker:has(.language-menu:not([hidden]))::after { height: 18px; right: 0; }
.language-option { min-height: 44px; border: 0; border-radius: 14px; color: #4e4d57; }
.language-option:hover { background: rgba(255, 255, 255, .8); }
.language-option[aria-selected="true"] { background: rgba(239, 108, 97, .1); color: #a34038; }
.language-option[aria-selected="true"]::after { color: #a34038; }
.hero-section {
  min-height: 0; grid-template-columns: minmax(0, 1fr);
  gap: 48px; padding-block: 44px 92px;
}
.hero-copy { width: 100%; max-width: 1180px; margin-inline: auto; text-align: center; }
.hero-copy h1 {
  max-width: 100%; margin-inline: auto;
  font-size: clamp(32px, 4.2vw, 60px); font-weight: 650;
  line-height: 1.2; letter-spacing: -.045em; text-wrap: initial;
}
.hero-lead { max-width: 600px; margin: 25px auto 0; font-size: 17px; font-weight: 400; line-height: 1.85; }
.hero-actions { justify-content: center; margin-top: 30px; }
.button-store {
  min-width: 182px; min-height: 58px; border: 1px solid rgba(255, 255, 255, .17);
  background: linear-gradient(160deg, #414149, #232329);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px rgba(28, 25, 35, .13);
}
.button-store:hover { background: linear-gradient(160deg, #505058, #2c2c33); transform: translateY(-2px); }
.button-store:active { transform: translateY(0); }
.button-store strong { font-size: 16px; }
.button-disabled { opacity: .8; }
.hero-art {
  position: relative; width: 60%; margin-inline: auto;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  scroll-margin-top: 115px;
}
.hero-carousel { border-radius: 0; overflow: hidden; }
.hero-carousel-dots {
  width: max-content; margin: 20px auto 0; gap: 0; padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px;
  background: rgba(255, 255, 255, .65); box-shadow: 0 2px 8px rgba(45, 37, 63, .04);
}
.hero-carousel-dot { position: relative; width: 32px; height: 32px; background: transparent; }
.hero-carousel-dot::after {
  content: ""; position: absolute; top: 13px; left: 13px; width: 6px; height: 6px;
  border-radius: 999px; background: #b3afb9; transition: width .25s ease, left .25s ease, background .25s ease;
}
.hero-carousel-dot.is-active { width: 32px; background: transparent; }
.hero-carousel-dot.is-active::after { width: 20px; left: 6px; background: var(--coral); }
.site-footer { width: min(1040px, calc(100% - 48px)); min-height: 130px; padding-block: 28px 34px; gap: 20px; }
.site-footer nav a { font-size: 12px; font-weight: 450; }
.site-footer > span { color: #787680; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, .52); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
  .site-header.is-scrolled { background: rgba(255, 255, 255, .76); }
  .language-menu { background: rgba(249, 248, 247, .98); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
}
@media (prefers-reduced-motion: no-preference) {
  .language-menu:not([hidden]) { animation: glass-menu-in .18s ease-out both; }
  @keyframes glass-menu-in { from { opacity: 0; transform: translateY(-5px); } }
}
@media (min-width: 901px) {
  .hero-copy h1 { white-space: nowrap; }
}
@media (max-width: 900px) {
  .hero-section { min-height:0; grid-template-columns:minmax(0,1fr); gap:40px; padding-block:40px 64px; }
  .hero-copy { max-width:640px; margin-inline:auto; text-align:center; }
  .hero-copy h1,.hero-lead { margin-inline:auto; }
  .hero-actions { justify-content:center; }
}
@media (max-width: 720px) {
  .site-header { width: calc(100% - 24px); top: 12px; margin-top: 12px; min-height: 64px; padding: 8px 10px 8px 16px; gap: 10px; }
  .site-header.is-scrolled { min-height: 60px; }
  .brand-word { font-size: 20px; }
  .brand-mark svg { width: 30px; height: 30px; }
  .header-nav a { padding-inline: 10px; font-size: 12px; }
  .language-button { padding-inline: 10px; }
  .language-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero-section { gap: 36px; padding-block: 28px 60px; }
  .hero-copy h1 { font-size: clamp(38px, 7.6vw, 54px); letter-spacing: -.045em; line-height: 1.2; }
  .hero-lead { max-width: 480px; padding-inline: 8px; font-size: 15px; line-height: 1.8; }
  .hero-actions { display: flex; }
  .button-store { width: auto; }
  .hero-carousel-dots { margin-top: 12px; }
  .site-footer { width: calc(100% - 40px); }
}
@media (max-width: 480px) {
  .site-header { grid-template-columns: 1fr auto; gap: 5px; }
  .header-nav a { padding-inline: 8px; }
  .header-nav a:last-child { display: none; }
  .language-menu { right: 0; }
  .hero-copy h1 { font-size: clamp(36px, 9.2vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .header-nav a, .language-button, .language-chevron,
  .button-store, .hero-carousel-dot::after { transition: none; }
}