/* Approved homepage: quiet type, a point portrait and natural page scrolling. */
:root {
  --hero-progress: 0;
  --hero-copy-opacity: 1;
  --hero-portrait-opacity: 1;
  --hero-nav-face: 0;
  --hero-nav-height: 61px;
  --hero-paper: #fafcf9;
}
.nav .logo { gap: 0; white-space: nowrap; }
.nav .logo:hover { opacity: 1; }
.nav-portrait {
  display: block;
  flex: none;
  width: calc(36px * var(--hero-nav-face));
  height: 36px;
  margin-right: calc(10px * var(--hero-nav-face));
  opacity: var(--hero-nav-face);
  overflow: hidden;
  border-radius: 6px;
}
.nav-portrait img {
  display: block;
  width: 36px;
  height: 36px;
  max-width: none;
  object-fit: contain;
  transform: scale(var(--hero-nav-face));
  transform-origin: left center;
}
.hero.hero-home {
  display: block;
  padding: 0;
  min-height: 0;
  overflow: clip;
  background: var(--hero-paper);
  font-family: 'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;
}
.hero-home::after { display: none; }
.hero-home-scene {
  position: relative;
  min-height: max(610px, calc(100svh - var(--hero-nav-height)));
  isolation: isolate;
}
.hero-home .hero-surface { z-index: -2; }
.hero-home .surface-fallback { opacity: .28; filter: saturate(.25); }
.hero-home .ripple-mount { opacity: .88; }
.hero-home-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 43% 70% at 24% 43%,#fafcf9b8,#fafcf959 65%,transparent),linear-gradient(transparent 72%,var(--hero-paper));
}
.hero-home .hero-home-grid {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%,-50%);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1160px;
  padding-inline: 40px;
}
.hero-home-copy {
  position: relative;
  z-index: 2;
  opacity: var(--hero-copy-opacity);
  transform: translateY(calc(var(--hero-progress) * -24px));
}
.hero-home .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 400;
  color: #5d7868;
  letter-spacing: .12em;
}
.hero-home .hero-eyebrow::before { content:''; width:24px; height:1px; background:#a4b9a8; }
.hero-home .hero-eyebrow small { font-size:9px; color:#9aa89e; letter-spacing:.1em; }
.hero-home .hero-tagline {
  font-size: clamp(36px,4.7vw,58px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.045em;
  color: #20372b;
  text-align: left;
  margin: 0 0 26px;
  white-space: pre-line;
  overflow: visible;
  overflow-wrap: normal;
}
.hero-home .hero-sub { font-size:14px; line-height:1.95; color:#748278; margin:0 0 28px; max-width:31em; }
.hero-home .hero-sub span { display: block; }
.hero-home .hero-cta { justify-content:flex-start; gap:12px; margin:0; flex-wrap:wrap; }
.hero-home .hero-cta > a,.hero-home .hero-cta > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 24px;
  line-height: 1.6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}
.hero-home .btn-mint { color:white; background:#294c38; border:1px solid #294c38; box-shadow:0 8px 18px #24472e17; }
.hero-home .btn-mint:hover { background:#365d43; opacity:1; }
.hero-home .btn-dark { background:#ffffffa1; color:#5a7160; border:1px solid #dce5db; }
.hero-portrait {
  position: relative;
  justify-self: center;
  width: 510px;
  height: 540px;
  transform: translateY(calc(var(--hero-progress) * -20px)) scale(calc(1 - var(--hero-progress) * .1));
  transform-origin: 50% 30%;
}
.hero-portrait { background:none; }
.portrait-source { display:none; }
.portrait-cloud { position:absolute; inset:-8% -15% -4%; width:130%; height:112%; display:block; pointer-events:none; background:transparent; }
.hero-home .hero-home-bottom {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: 1160px;
  padding-inline: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  opacity: 1;
}
.hero-home .hero-foot { justify-content:flex-start; margin:0; gap:8px; font-size:12px; font-weight:500; color:#405d4d; }
.hero-home .contact-action {
  padding-inline:12px;
  color:inherit;
  background:rgba(255,255,255,.86);
  border:1px solid #ccd9d0;
  border-radius:10px;
  box-shadow:0 3px 12px rgba(35,65,45,.04);
  transition:background .2s,border-color .2s;
}
.hero-home .contact-action:hover,.hero-home .contact-action:focus-visible { color:#203f2d; background:#fff; border-color:#91ab99; }
.hero-home .contact-availability { padding-inline:5px; color:#5f7567; font-size:11px; font-weight:400; }
.hero-home .hero-interaction { margin:0; font-size:9px; color:#748278; white-space:nowrap; letter-spacing:.05em; }
.hero-home .hero-interaction::before { display:none; }
.hero-scroll-mark { width:14px; height:22px; border:1px solid #b9cabc; border-radius:9px; position:relative; }
.hero-scroll-mark::before { content:''; position:absolute; width:2px; height:5px; top:5px; left:5px; background:#8fa294; border-radius:2px; animation:hero-scroll-dot 2s ease-in-out infinite; }
@keyframes hero-scroll-dot { 0%,100%{transform:translateY(0);opacity:.55}60%{transform:translateY(6px);opacity:1} }
html[lang="en"] .hero-home .hero-tagline { font-size:clamp(34px,4.3vw,53px); }
@media(max-height:760px) and (min-width:761px) {
  .hero-portrait{width:470px;height:480px}
  .hero-home .hero-home-grid{top:45%}
  .hero-home .hero-tagline{font-size:50px}
  .hero-home .hero-eyebrow{margin-bottom:21px}
  .hero-home .hero-sub{margin-bottom:22px}
}
@media(max-width:1050px) and (min-width:761px) {
  .hero-home .hero-home-grid{gap:10px;padding-inline:30px}
  .hero-portrait{width:390px;height:460px}
  .hero-home .hero-tagline{font-size:clamp(34px,4.65vw,49px)}
  .hero-home .hero-home-bottom{padding-inline:30px;gap:8px}
  .hero-home .hero-interaction{font-size:8px}
  .hero-home .hero-foot{gap:7px;font-size:12px}
}
@media(max-width:760px) {
  .hero-home-scene{display:flex;flex-direction:column;min-height:max(690px,calc(100svh - var(--hero-nav-height)))}
  .hero-home .hero-home-grid{position:relative;left:auto;top:auto;transform:none;display:flex;flex-direction:column-reverse;gap:4px;padding:24px 23px 18px}
  .hero-portrait{width:290px;height:278px;flex:none}
  .portrait-cloud{inset:-12% -15% 0;height:116%}
  .hero-home-copy{text-align:center}
  .hero-home .hero-eyebrow{justify-content:center;font-size:10px;gap:8px;margin-bottom:16px}
  .hero-home .hero-eyebrow small{display:none}
  .hero-home .hero-tagline{font-size:clamp(32px,8.5vw,41px);margin-bottom:16px;line-height:1.26;text-align:center}
  html[lang="en"] .hero-home .hero-tagline{font-size:clamp(27px,7vw,37px)}
  .hero-home .hero-sub{font-size:12px;line-height:1.9;margin-bottom:21px}
  .hero-home .hero-cta{justify-content:center;gap:9px}
  .hero-home .hero-cta>a,.hero-home .hero-cta>button{padding:10px 18px;font-size:11px;min-height:44px;gap:12px}
  .hero-home .hero-home-bottom{position:relative;left:auto;bottom:auto;transform:none;flex-direction:column;gap:12px;margin-top:auto;padding:0 20px 16px}
  .hero-home .hero-foot{justify-content:center;font-size:12px;gap:8px}
  .hero-home .hero-interaction{font-size:8px}
  .nav-portrait{width:calc(30px * var(--hero-nav-face));height:30px}
  .nav-portrait img{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-home-copy,.hero-portrait{transform:none;opacity:1}
  .hero-home .hero-home-bottom{opacity:1}
  .hero-scroll-mark::before{animation:none}
}