/* Sun Mellon — corporate site
   Sunrise orange on charcoal. No external fonts, no frameworks, no trackers. */

:root {
  /* Ground */
  --ink:        #0A0B0D;
  --ink-raise:  #101216;
  --ink-card:   #0E1014;
  --line:       rgba(255, 255, 255, 0.075);
  --line-warm:  rgba(255, 138, 31, 0.26);

  /* Sunrise */
  --sun-core:   #FF6A00;
  --sun-mid:    #FF8A1F;
  --sun-high:   #FFB454;
  --sun-pale:   #FFD9A8;
  --gold:       #E9C46A;

  /* Type */
  --text:       #EDEAE5;
  --text-soft:  #B9B4AC;
  --text-mute:  #83817C;

  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;
}

/* The tagline's 34ch cap was set for English. For Chinese, 1em is one glyph, so
   cap it just past the comma: 13 characters fit, the 14th wraps, and the line
   breaks between the two business lines instead of mid-word. */
html[lang^="zh"] .footer__tagline {
  max-width: 13.5em;
}

/* Han text falls through the mono stack to a wide-spaced fallback, so the two
   place that mixes Chinese into mono type uses the sans stack instead. Domain
   names and other ASCII-only runs keep the mono treatment. */
html[lang^="zh"] .legal__updated {
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Headline Chinese must not break mid-word. Body copy keeps the default
   behaviour, where breaking between characters is normal and expected. */
html[lang^="zh"] .hero__lede,
html[lang^="zh"] .section__title,
html[lang^="zh"] .contact__title,
html[lang^="zh"] .legal__title,
html[lang^="zh"] .venture__name,
html[lang^="zh"] .approach__item h3,
html[lang^="zh"] .legal__body h2 {
  word-break: keep-all;
}

/* CJK needs its own stacks: the Latin serif has no Han coverage. */
html[lang^="zh"] {
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", STSong, SimSun, ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

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

::selection { background: var(--sun-core); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sun-high);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* ----------------------------------------------------------- type scale */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-high);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--sun-core), transparent);
}
html[lang^="zh"] .eyebrow { letter-spacing: 0.14em; font-size: 12.5px; }

.lede {
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- top bar */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
/* Scrim so page content never shows through the bar, even before the scroll
   handler has run or if scripting is off. It fades out once the bar goes solid. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.72) 55%, rgba(10,11,13,0) 100%);
  transition: opacity .35s ease;
}
.topbar.is-stuck {
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.topbar.is-stuck::before { opacity: 0; }
.topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  /* Set as a wordmark: caps need the extra tracking to stay legible. */
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: 14px;
  color: var(--text-soft);
  position: relative;
  padding-block: 4px;
  transition: color .2s ease;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--sun-core), var(--sun-high));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

.langs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.langs__item {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  padding: 4px 11px;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.langs__item:hover { color: var(--text); }
.langs__item[aria-current="true"] {
  color: #17110A;
  background: linear-gradient(135deg, var(--sun-high), var(--sun-mid));
  font-weight: 600;
}

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease,
              background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn__arrow { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--sun {
  background: linear-gradient(135deg, var(--sun-mid) 0%, var(--sun-core) 55%, #E85D00 100%);
  color: #FFF8F1;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -12px rgba(255,106,0,.65);
}
.btn--sun:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 18px 42px -14px rgba(255,106,0,.8);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255,255,255,.015);
}
.btn--ghost:hover {
  border-color: var(--line-warm);
  background: rgba(255,138,31,.06);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-top: clamp(140px, 19vh, 210px);
  padding-bottom: clamp(72px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}

/* The sunrise: a wide ellipse breaking a horizon line below the headline. */
.hero__sun {
  position: absolute;
  left: 50%;
  bottom: -30vh;
  width: min(2000px, 185vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 158, 48, .50) 0%,
      rgba(255, 112, 6, .33) 24%,
      rgba(255, 92, 0, .15) 44%,
      rgba(255, 92, 0, 0) 68%);
  filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0,0,0,.35) 72%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0,0,0,.35) 72%, transparent 94%);
  z-index: -2;
  pointer-events: none;
}
.hero__horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(48px, 9vh, 112px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,138,31,.10) 14%,
    rgba(255,180,84,.62) 50%,
    rgba(255,138,31,.10) 86%,
    transparent 100%);
  z-index: -1;
  pointer-events: none;
}
/* Faint grain so the large gradient does not band on wide screens. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sun-high);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(26px, 4vh, 40px);
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sun-mid);
  box-shadow: 0 0 0 4px rgba(255,138,31,.16), 0 0 16px 2px rgba(255,138,31,.5);
}
html[lang^="zh"] .hero__eyebrow { letter-spacing: 0.16em; font-size: 12.5px; }

.hero__title {
  font-size: clamp(2.6rem, 8.2vw, 6rem);
  line-height: 1.0;
  /* All caps: the negative tracking that suited mixed case closes it up too far. */
  letter-spacing: 0.005em;
  margin: 0;
  background: linear-gradient(176deg, #FFFCF8 8%, #FFE8CC 52%, var(--sun-pale) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__lede {
  font-family: var(--serif);
  font-size: clamp(1.32rem, 2.7vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 24ch;
  margin: clamp(30px, 4.5vh, 48px) 0 0;
  text-wrap: balance;
}
.hero__body {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text-soft);
  max-width: 54ch;
  margin: 26px 0 0;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(34px, 5vh, 50px);
}

/* ----------------------------------------------------------- stats rail */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.stats__cell {
  background: var(--ink);
  padding: clamp(26px, 3.6vw, 40px) clamp(16px, 2.4vw, 32px);
}
.stats__value {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(140deg, var(--sun-high), var(--sun-core));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stats__label {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--text-mute);
  max-width: 22ch;
}

/* ----------------------------------------------------------- sections */

.section { padding-block: clamp(84px, 13vh, 150px); }
.section--tint {
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(255,106,0,.055), transparent 62%),
    var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head { max-width: 760px; margin-bottom: clamp(48px, 7vh, 76px); }
.section__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  margin-bottom: 22px;
}
html[lang^="zh"] .section__title { letter-spacing: -0.01em; }

/* ----------------------------------------------------------- venture cards */

.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.venture {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%),
    var(--ink-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
/* Sunrise strip that lights up on hover. */
.venture::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sun-core), var(--sun-high), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.venture:hover {
  border-color: var(--line-warm);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -34px rgba(255,106,0,.5);
}
.venture:hover::before { transform: scaleX(1); }

.venture__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.venture__num {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: .9;
  letter-spacing: -0.04em;
  color: rgba(255,138,31,.26);
  transition: color .3s ease;
}
.venture:hover .venture__num { color: rgba(255,138,31,.6); }

/* Each venture ships its own mark on its own background -- some dark, some
   transparent. A single light tile behind all six keeps them reading as one set
   rather than six unrelated stickers. */
.venture__logo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  background: #F2EFEA;
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 5px 14px -8px rgba(0,0,0,.9);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.venture:hover .venture__logo {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px rgba(255,180,84,.32), 0 8px 20px -8px rgba(255,106,0,.55);
}

.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.badge__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.badge--live {
  color: #8FE3B0;
  border-color: rgba(143,227,176,.26);
  background: rgba(143,227,176,.07);
}
.badge--live .badge__dot {
  background: #6FDC9B;
  box-shadow: 0 0 0 3px rgba(111,220,155,.16);
}
.badge--preparing {
  color: var(--sun-high);
  border-color: var(--line-warm);
  background: rgba(255,138,31,.07);
}
.badge--preparing .badge__dot {
  background: var(--sun-mid);
  box-shadow: 0 0 0 3px rgba(255,138,31,.16);
}
html[lang^="zh"] .badge { letter-spacing: 0.06em; font-size: 11.5px; }

.venture__kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
  /* Reserve two lines and sit the text on the baseline of the second. French
     kickers wrap where English and Chinese ones do not; without this the name --
     and the logo beside it -- start lower in some cards than in others, and the
     logos in a row stop lining up. Body line-height is 1.65, so two lines is
     3.3em. */
  min-height: 3.3em;
  display: flex;
  align-items: flex-end;
}
html[lang^="zh"] .venture__kicker { letter-spacing: 0.1em; font-size: 12.5px; }

.venture__name {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}
/* Centre the mark on the FIRST line of the name, not on the whole block. The
   kicker above is one line in every card, so pinning the mark to line one keeps
   every logo in a row at the same height however many lines its name takes.
   1.08em is the h3 line-height; the mark is taller than a line, hence negative. */
.venture__logo { margin-top: calc((1.08em - 40px) / 2); }
.venture__lede {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text-soft);
  margin: 0 0 24px;
  text-wrap: pretty;
}

.venture__points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.venture__points li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
.venture__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--sun-mid);
  opacity: .85;
}

.venture__foot { margin-top: auto; }
.venture__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--sun-high);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,180,84,.24);
  transition: border-color .25s ease, color .25s ease;
}
.venture__link:hover { color: var(--sun-pale); border-bottom-color: var(--sun-high); }
.venture__link .btn__arrow { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.venture__link:hover .btn__arrow { transform: translateX(3px); }

.venture__domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.venture__domain {
  display: flex;
  align-items: baseline;
  /* Tight row gap so a label that wraps stays visually attached to its domain. */
  gap: 3px 12px;
  flex-wrap: wrap;
}
.venture__domain-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--sun-high);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,180,84,.24);
}
.venture__domain-label {
  font-size: 13px;
  color: var(--text-mute);
}

.venture__note {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  font-style: italic;
}
html[lang^="zh"] .venture__note { font-style: normal; }

/* ----------------------------------------------------------- approach */

.approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.approach__item {
  background: var(--ink);
  padding: clamp(28px, 3vw, 40px);
  transition: background-color .3s ease;
}
.approach__item:hover { background: var(--ink-raise); }
.approach__item h3 {
  font-size: 1.28rem;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.approach__item h3::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sun-high), var(--sun-core));
  transform: translateY(-2px);
}
.approach__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* ----------------------------------------------------------- about */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.about__body p {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-soft);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.about__body p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.44rem);
  line-height: 1.52;
  letter-spacing: -0.012em;
  color: var(--text);
}

/* ----------------------------------------------------------- contact */

.contact {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  padding: clamp(44px, 6vw, 84px);
  background:
    radial-gradient(120% 140% at 8% 108%, rgba(255,106,0,.17), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 50%),
    var(--ink-card);
  text-align: center;
}
.contact .eyebrow { justify-content: center; }
.contact__title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin-bottom: 22px;
}
.contact__lede { margin-inline: auto; text-align: center; }
.contact__mail { margin-top: clamp(34px, 5vh, 46px); }
.contact__mail-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}
html[lang^="zh"] .contact__mail-label { letter-spacing: 0.1em; font-size: 12.5px; }
.contact__mail-link {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFF4E6, var(--sun-high));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid var(--line-warm);
  padding-bottom: 4px;
  transition: border-color .25s ease;
  word-break: break-word;
}
.contact__mail-link:hover { border-bottom-color: var(--sun-high); }
.contact__note {
  margin: 28px 0 0;
  font-size: 13.5px;
  color: var(--text-mute);
}

/* ----------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 8vh, 84px);
  padding-bottom: 40px;
  background: linear-gradient(180deg, transparent, rgba(255,106,0,.028));
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(44px, 6vh, 64px);
}
.footer__brand .brand { margin-bottom: 18px; }
.footer__tagline {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 34ch;
  margin: 0;
}
.footer__heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 18px;
}
html[lang^="zh"] .footer__heading { letter-spacing: 0.1em; font-size: 12px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__list a {
  font-size: 14px;
  color: var(--text-mute);
  transition: color .2s ease;
}
.footer__list a:hover { color: var(--sun-high); }
.footer__list a[aria-current="true"] { color: var(--sun-high); }

.footer__bar {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 12.5px;
  color: var(--text-mute);
}
.footer__bar .sep { opacity: .4; }
.footer__bar a { transition: color .2s ease; }
.footer__bar a:hover { color: var(--sun-high); }

/* ----------------------------------------------------------- legal page */

.legal { padding-top: clamp(132px, 17vh, 180px); padding-bottom: clamp(70px, 10vh, 110px); }
.legal__head {
  max-width: 760px;
  padding-bottom: clamp(36px, 5vh, 52px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vh, 64px);
}
.legal__title { font-size: clamp(2.3rem, 6vw, 3.8rem); margin-bottom: 20px; }
.legal__updated {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-mute);
}
.legal__body { max-width: 72ch; }
.legal__body section { margin-bottom: clamp(34px, 4.5vh, 48px); }
.legal__body h2 {
  font-size: clamp(1.26rem, 2.1vw, 1.56rem);
  margin-bottom: 14px;
}
.legal__body p {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.78;
  color: var(--text-soft);
  text-wrap: pretty;
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(16px, 3vh, 28px);
  font-size: 14.5px;
  color: var(--sun-high);
  border-bottom: 1px solid rgba(255,180,84,.24);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.legal__back:hover { border-bottom-color: var(--sun-high); }

/* ----------------------------------------------------------- reveal */

/* Visible by default. Only a page that confirmed scripting (html.js, set by an
   inline script in <head>) hides them for the entrance animation. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .about { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .langs { margin-left: auto; }
  html { scroll-padding-top: 76px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar__inner { height: 64px; gap: 14px; }
  .hero { padding-top: 120px; }
  .hero__lede { max-width: none; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .stats__grid { grid-template-columns: 1fr; }
  .stats__label { max-width: none; }
  .ventures { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .contact { padding: 34px 22px; }
}

/* ----------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  body { background: #fff; color: #111; }
  .topbar, .hero__sun, .hero__horizon, .hero::after { display: none; }
  .hero__title, .stats__value, .contact__mail-link {
    -webkit-text-fill-color: #111; color: #111; background: none;
  }
  .venture, .approach, .contact { border-color: #ccc; }
}