/* ============================================================
   首頁 Ghibli-inspired landing style
   Adapted from ghibli-inspired-landing-page reference
   Scoped to .page-home only — other pages unchanged
============================================================ */

.page-home{
  --gh-cream:#FBF6ED;
  --gh-ink:#242220;
  --gh-muted:#65615d;
  --gh-twilight:#171614;
  --gh-dna:#8eedf0;
  --gh-dna-light:#daf8f9;
  --gh-dna-deep:#52c4c8;
  --gh-grad-start:#8eedf0;
  --gh-grad-end:#c8f7f8;
  --gh-grad-deep-end:#58cfd4;
  --gh-grad:linear-gradient(135deg, #8eedf0 0%, #c8f7f8 100%);
  --gh-grad-soft:linear-gradient(135deg, #8eedf0 0%, #e8fcfc 100%);
  --gh-grad-deep:linear-gradient(135deg, #8eedf0 0%, #58cfd4 100%);
  --gh-grad-hero-text:linear-gradient(135deg, #8eedf0 0%, #ffffff 88%);
  --gh-grad-script-light:linear-gradient(135deg, #8eedf0 0%, #52c4c8 100%);
  --gh-rose:var(--gh-dna);
  --gh-rose-light:var(--gh-dna-light);
  --gh-mint-soft:var(--gh-dna);
  --gh-accent-rgb:142,237,240;
  --gh-script:"Dancing Script", "Segoe Script", cursive;
  background:var(--gh-cream);
}

/* Landing nav: hero overlay at top; hide topbar + nav when scrolled */
.page-home .site-chrome{
  position:static;
  z-index:auto;
}
.page-home .topbar{
  position:fixed; left:0; right:0; top:0; z-index:102;
  background:linear-gradient(180deg, rgba(42,24,69,.55) 0%, transparent 100%);
  border:none; color:rgba(255,255,255,.82);
  transition:transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
}
.page-home .topbar b{ color:var(--gh-mint-soft); }

.page-home .nav{
  position:fixed; left:0; right:0; top:36px; z-index:101;
  background:linear-gradient(180deg, rgba(42,24,69,.38) 0%, rgba(42,24,69,.08) 72%, transparent 100%);
  border:none; backdrop-filter:none;
  box-shadow:none !important;
  transition:transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
}
.page-home.is-nav-scrolled .topbar{
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.page-home.is-nav-scrolled .nav{
  transform:translateY(calc(-100% - 40px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.page-home .nav .brand-name .zh,
.page-home .nav .brand-name .en,
.page-home .nav .site-nav-desktop .nav-item > a,
.page-home .nav .site-nav-desktop .nav-item > .nav-label,
.page-home .nav .nav-cart-link,
.page-home [data-site-nav-root].is-nav-hero .brand-name .zh,
.page-home [data-site-nav-root].is-nav-hero .brand-name .en,
.page-home [data-site-nav-root].is-nav-hero .site-nav-desktop .nav-item > a,
.page-home [data-site-nav-root].is-nav-hero .site-nav-desktop .nav-item > .nav-label,
.page-home [data-site-nav-root].is-nav-hero .nav-cart-link{ color:#fff; }
.page-home .nav .brand-mark path{ fill:#F7F4F1; }
.page-home [data-site-nav-root].is-nav-hero .brand-mark{ color:#F7F4F1; }
.page-home .nav .nav-burger span{ background:#fff; }
.page-home .nav .site-nav-desktop .nav-item > a:hover,
.page-home [data-site-nav-root].is-nav-hero .site-nav-desktop .nav-item > a:hover{ color:var(--gh-mint-soft); }
.page-home [data-site-nav-root].is-nav-hero .nav-burger span{ background:#fff; }
/* Open drawer is paper-white — ink X must beat hero white bars. */
.page-home .nav.is-mobile-menu-open .nav-burger span,
.page-home [data-site-nav-root].is-nav-hero .nav.is-mobile-menu-open .nav-burger span{
  background:var(--ink,#2b2320);
}
.page-home .nav.is-mobile-menu-open .nav-cart-link,
.page-home [data-site-nav-root].is-nav-hero .nav.is-mobile-menu-open .nav-cart-link{
  color:var(--ink,#2b2320);
}
.page-home .nav .btn-line,
.page-home [data-site-nav-root].is-nav-hero .nav-cta .btn-line{
  background:transparent !important;
  border-color:rgba(255,255,255,.55) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.page-home .nav .btn-line:hover,
.page-home [data-site-nav-root].is-nav-hero .nav-cta .btn-line:hover{
  background:rgba(255,255,255,.12) !important; color:#fff !important;
}
.page-home .nav .btn-mint,
.page-home [data-site-nav-root].is-nav-hero .nav-cta .btn-mint{
  background:var(--gh-grad-deep) !important;
  color:var(--gh-twilight) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
/* SSR GradientButton shell on hero — keep conic clipped; inner stays mint glass */
.page-home .nav .nav-gradient-cta,
.page-home [data-site-nav-root].is-nav-hero .nav-gradient-cta{
  box-shadow:0 4px 18px rgba(42,24,69,.2);
}
.page-home .nav .btn-dark,
.page-home [data-site-nav-root].is-nav-hero .nav-cta .btn-dark{
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:none !important;
}
.page-home [data-site-nav-root].is-nav-hero .nav-cta .btn-dark:hover{
  background:rgba(255,255,255,.22) !important;
}

/* Account menu — liquid glass on hero */
.page-home .nav .account-menu-trigger,
.page-home [data-site-nav-root].is-nav-hero .account-menu-trigger{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(42,24,69,.18);
}
.page-home .nav .account-menu-trigger:hover,
.page-home [data-site-nav-root].is-nav-hero .account-menu-trigger:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.55);
}
.page-home .nav .account-menu-name,
.page-home [data-site-nav-root].is-nav-hero .account-menu-name{ color:#fff; }
.page-home .nav .account-menu-email,
.page-home [data-site-nav-root].is-nav-hero .account-menu-email{ color:rgba(255,255,255,.78); }
.page-home .nav .account-menu-avatar--guest,
.page-home [data-site-nav-root].is-nav-hero .account-menu-avatar--guest{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
.page-home .nav .account-menu-panel,
.page-home [data-site-nav-root].is-nav-hero .account-menu-panel{
  background:rgba(42,24,69,.42);
  border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 36px rgba(42,24,69,.28);
}
.page-home .nav .account-menu-item,
.page-home [data-site-nav-root].is-nav-hero .account-menu-item{ color:#fff; }
.page-home .nav .account-menu-item:hover,
.page-home [data-site-nav-root].is-nav-hero .account-menu-item:hover{
  background:rgba(255,255,255,.14);
}
.page-home .nav .account-menu-logout,
.page-home [data-site-nav-root].is-nav-hero .account-menu-logout{ color:#ffb4ab; }
.page-home .nav .account-menu-logout:hover,
.page-home [data-site-nav-root].is-nav-hero .account-menu-logout:hover{
  background:rgba(255,120,110,.18);
}

/* Nav dropdown menu — same frosted-glass pill design as .btn-dark, in blue */
.page-home .nav .dropdown,
.page-home [data-site-nav-root].is-nav-hero .dropdown{
  background:linear-gradient(135deg, rgba(90,170,235,.28) 0%, rgba(30,100,190,.22) 100%);
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 14px 36px rgba(20,58,96,.22);
}
.page-home .nav .dropdown a,
.page-home [data-site-nav-root].is-nav-hero .dropdown a{
  color:#fff;
  border-radius:12px;
}
.page-home .nav .dropdown a:hover,
.page-home [data-site-nav-root].is-nav-hero .dropdown a:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.page-home .nav .dropdown .dd-label,
.page-home [data-site-nav-root].is-nav-hero .dropdown .dd-label{
  color:rgba(255,255,255,.6);
}

.page-home .nav .btn-mint,
.page-home .nav-cta .btn-mint{
  background:var(--gh-grad-deep);
  color:var(--gh-twilight);
}
.page-home .nav .btn-mint:hover{
  filter:brightness(1.05);
}
.page-home .gh-faq-wrap .faq-q:hover{
  color:var(--gh-dna-deep);
}

.page-home #home-poem{
  scroll-margin-top:88px;
}

/* ---------- Hero ---------- */
.gh-hero{
  position:relative; min-height:min(92vh, 880px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
}
.gh-hero__bg{
  position:absolute; inset:0;
}
.gh-hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.gh-hero__bg--sky{
  z-index:0;
}
.gh-hero__bg--brand{
  z-index:1; opacity:.42; mix-blend-mode:soft-light;
}
.gh-hero__tint{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(42,24,69,.48) 0%, rgba(42,24,69,.08) 42%, rgba(42,24,69,.25) 100%);
}
.gh-hero__fade-bottom{
  position:absolute; left:0; right:0; bottom:0; z-index:6; height:12rem;
  background:linear-gradient(to top, var(--gh-cream) 0%, transparent 100%);
  pointer-events:none;
}
.gh-hero__sky{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.gh-hero__sky img{
  width:100%; height:100%; object-fit:cover; opacity:.35;
}

/* Hero carousel — original brand slides inside Ghibli shell */
.gh-hero--carousel{
  display:block; min-height:0; padding:0;
}
.gh-hc-viewport{
  position:relative; z-index:4;
  height:min(92vh, 880px); min-height:600px; max-height:880px;
}
.gh-hc-scrim{
  background:linear-gradient(90deg, rgba(12,12,12,.68) 0%, rgba(12,12,12,.2) 52%, rgba(12,12,12,.08) 100%) !important;
}
/* Neutral scrims preserve photo warmth without muddy purple tint. */
.hc-slide[data-tone="warm"] .gh-hc-scrim{
  background:linear-gradient(
    90deg,
    rgba(10,10,10,.68) 0%,
    rgba(10,10,10,.18) 52%,
    rgba(10,10,10,.06) 100%
  ) !important;
}
.hc-slide[data-tone="light"] .gh-hc-scrim{
  background:linear-gradient(
    90deg,
    rgba(10,10,10,.72) 0%,
    rgba(10,10,10,.28) 54%,
    rgba(10,10,10,.1) 100%
  ) !important;
}
.hc-slide[data-tone="soft"] .gh-hc-scrim{
  background:linear-gradient(
    90deg,
    rgba(10,10,10,.7) 0%,
    rgba(10,10,10,.18) 54%,
    rgba(10,10,10,.06) 100%
  ) !important;
}
.hc-slide[data-align="right"] .gh-hc-scrim{
  transform:scaleX(-1);
}
.gh-hc-copy{
  padding:120px 84px 88px; max-width:1200px; margin:0 auto;
}
.gh-hc-copy > *{ width:min(100%, 540px); }
.hc-slide[data-align="left"] .gh-hc-copy{ align-items:flex-start; text-align:left; }
.hc-slide[data-align="right"] .gh-hc-copy{ align-items:flex-end; text-align:right; }
.hc-slide[data-align="left"] .gh-hc-copy .gh-hero__lead{ margin-left:0; }
.hc-slide[data-align="right"] .gh-hc-copy .gh-hero__lead{ margin-right:0; }
.hc-slide[data-align="left"] .gh-hc-copy .gh-hero__actions{ justify-content:flex-start; }
.hc-slide[data-align="right"] .gh-hc-copy .gh-hero__actions{ justify-content:flex-end; }
.hc-slide[data-align="center"] .hc-copy{
  align-items:center; text-align:center;
}
.hc-slide[data-align="center"] .hc-actions{ justify-content:center; }
.gh-hc-copy .gh-hero__title{ margin-bottom:18px; }
.gh-hc-arrow{
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); color:#fff;
}
.gh-hc-arrow:hover{ background:rgba(255,255,255,.35); }
.gh-hc-dots{ bottom:36px; }
.gh-hc-dots .hc-dot.is-active{
  background:var(--gh-grad);
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}

.gh-hero__inner{
  position:relative; z-index:4;
  padding:140px 16px 100px; max-width:760px;
}
.gh-script{
  font-family:var(--gh-script); font-size:clamp(22px, 3.2vw, 32px);
  margin-bottom:8px; letter-spacing:.02em;
  background:var(--gh-grad-hero-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gh-poem .gh-script,
.gh-section .gh-script{
  background:var(--gh-grad-script-light);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gh-cta .gh-script{
  background:var(--gh-grad-hero-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gh-hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(32px, 5.5vw, 58px); letter-spacing:.08em; line-height:1.45;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45), 0 8px 36px rgba(0,0,0,.35); margin-bottom:22px;
}
.gh-hero__title em{
  display:block; font-style:normal;
  background:var(--gh-grad-hero-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-home .gh-dna{ font-weight:600; }
.page-home .gh-hc-scrim .gh-dna{
  background:var(--gh-grad-hero-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-home .gh-poem__copy .gh-dna,
.page-home .gh-section__title .gh-dna{
  background:var(--gh-grad-script-light);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gh-hero__lead{
  font-size:clamp(14px, 1.8vw, 16px);
  line-height:2.1;
  color:#F1ECE6;
  max-width:520px;
  margin:0 auto 34px;
  text-shadow:0 2px 18px rgba(0,0,0,.58);
}
.gh-hc-copy .gh-hero__lead{
  margin-bottom:28px;
}
.gh-hero__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:48px;
}
.gh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:999px; font-size:14px; letter-spacing:.14em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
  white-space:nowrap;
}
button.gh-btn{
  border:none; background:none; font:inherit; font-family:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
button.gh-btn--ghost{ background:rgba(255,255,255,.08); }
button.gh-btn--primary{ border:none; }
.gh-btn--primary{
  background:var(--gh-grad-deep);
  color:var(--gh-twilight); box-shadow:0 8px 28px rgba(var(--gh-accent-rgb),.45);
}
.gh-btn--primary:hover{
  transform:translateY(-2px); box-shadow:0 12px 36px rgba(var(--gh-accent-rgb),.55); filter:brightness(1.05);
}
.gh-btn--ghost{
  border:1px solid rgba(255,255,255,.5); color:#fff;
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
}
.gh-btn--ghost:hover{ background:rgba(255,255,255,.16); }

.gh-chips{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.gh-chip{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:88px; text-decoration:none; color:#fff;
}
.gh-chip__icon{
  width:56px; height:56px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:18px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .3s var(--ease);
}
.gh-chip:hover .gh-chip__icon{ transform:scale(1.08) translateY(-3px); }
.gh-chip__icon--1{ background:var(--gh-grad-deep); color:var(--gh-twilight); }
.gh-chip__icon--2{ background:var(--gh-grad); color:var(--gh-twilight); }
.gh-chip__icon--3{ background:var(--gh-grad-soft); color:var(--gh-twilight); }
.gh-chip__icon--4{ background:var(--gh-grad-deep); color:var(--gh-twilight); }
.gh-chip span:last-child{
  font-size:11px; letter-spacing:.08em; opacity:.92; line-height:1.4;
}

/* ---------- Poem bridge ---------- */
.gh-poem{
  position:relative;
  background:linear-gradient(180deg, rgba(142,237,240,.14) 0%, var(--gh-cream) 220px);
  padding:72px 16px 64px; text-align:center;
}
.gh-poem .gh-script{ color:transparent; }
.gh-poem__title{
  font-family:var(--serif); font-size:clamp(24px, 3.6vw, 40px);
  font-weight:600; letter-spacing:.08em; line-height:1.65;
  color:var(--gh-ink); max-width:640px; margin:0 auto 28px;
}
.gh-poem__link{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 24px; border-radius:999px;
  border:1px solid rgba(42,36,56,.12); background:#fff;
  font-size:13.5px; letter-spacing:.1em; color:var(--gh-ink);
  box-shadow:0 4px 20px rgba(42,36,56,.06);
  transition:box-shadow .3s var(--ease);
}
.gh-poem__link:hover{ box-shadow:0 8px 28px rgba(42,36,56,.1); }
.gh-poem__play{
  width:32px; height:32px; border-radius:50%;
  background:var(--gh-grad-deep);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.gh-poem__play svg{ margin-left:2px; fill:var(--gh-twilight); }
.gh-poem__text{
  font-size:14.5px; color:var(--gh-muted); line-height:2.05;
  max-width:480px; margin:0 auto 24px;
}
.gh-poem--split{ padding:64px 16px 56px; text-align:left; }
.gh-poem-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  max-width:980px; margin:0 auto;
}
.gh-poem__visual{
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 56px rgba(42,36,56,.12);
  aspect-ratio:4/3;
}
.gh-poem__visual img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.gh-poem__visual iframe{
  width:100%; height:100%; display:block; border:0;
}
.gh-poem__brand{
  font-family:var(--serif); font-size:clamp(24px, 3.4vw, 38px);
  font-weight:600; letter-spacing:.08em; line-height:1.55;
  color:var(--gh-ink); margin-bottom:14px;
}
.gh-poem__copy .gh-poem__title{ margin-left:0; margin-right:0; text-align:left; }
.gh-poem__copy .gh-poem__text{ margin-left:0; margin-right:0; }
.gh-poem__links{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
}
.gh-poem__link--secondary{
  padding:12px 0; border:0; background:transparent; box-shadow:none;
  color:var(--gh-dna-deep); font-size:13px;
}
.gh-poem__link--secondary:hover{ box-shadow:none; text-decoration:underline; }

/* ---------- About (DNA diamond) ---------- */
.gh-about{ padding-top:56px; }
.gh-about-teaser{
  display:grid; grid-template-columns:minmax(180px, 280px) 1fr;
  align-items:center; gap:36px; max-width:760px; margin:24px auto 0;
}
.gh-about-diamond{
  position:relative; aspect-ratio:1; border-radius:50%;
}
.gh-about-diamond::after{
  content:""; position:absolute; inset:12%; border-radius:50%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.72) 49%, transparent 60%);
  mix-blend-mode:screen; animation:gh-diamond-shine 4.8s ease-in-out infinite;
}
.gh-about-diamond img{
  position:relative; z-index:1; display:block; width:100%; height:100%;
  object-fit:contain; animation:gh-diamond-float 5.5s ease-in-out infinite;
  filter:drop-shadow(0 18px 24px rgba(20,58,96,.2));
}
.gh-about-actions{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:14px;
}
@keyframes gh-diamond-float{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%{ transform:translateY(-10px) rotate(1deg); }
}
@keyframes gh-diamond-shine{
  0%,30%{ transform:translateX(-70%); opacity:0; }
  50%{ opacity:.72; }
  70%,100%{ transform:translateX(70%); opacity:0; }
}
.gh-about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  max-width:980px; margin:0 auto; text-align:left;
}
.gh-about-steps{ display:flex; flex-direction:column; gap:22px; }
.gh-about-step{
  display:flex; gap:16px; align-items:flex-start;
}
.gh-about-step__no{
  font-family:var(--serif); font-size:28px; font-weight:600;
  line-height:1; flex:none; width:44px;
  background:var(--gh-grad-script-light);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gh-about-step h3{
  font-family:var(--serif); font-size:17px; font-weight:600;
  letter-spacing:.08em; margin-bottom:6px; color:var(--gh-ink);
}
.gh-about-step p{
  font-size:13.5px; color:var(--gh-muted); line-height:1.95;
}
.gh-about-visual{
  position:relative; border-radius:24px; overflow:hidden;
  box-shadow:0 20px 56px rgba(42,36,56,.12);
}
.gh-about-visual img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
}
.gh-usp-list{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:18px 16px;
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:linear-gradient(to top, rgba(42,24,69,.88), rgba(42,24,69,.5) 70%, transparent);
  color:#fff;
}
.gh-usp-list li{
  font-size:11px; line-height:1.5; letter-spacing:.04em;
}
.gh-usp-list strong{
  display:block; font-size:12px; letter-spacing:.08em; margin-bottom:2px;
}

/* ---------- Stories teaser ---------- */
.gh-stories{
  background:var(--gh-cream); padding:64px 16px;
}
.gh-stories-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  max-width:980px; margin:0 auto;
}
.gh-stories__media{
  border-radius:24px; overflow:hidden;
  box-shadow:0 20px 56px rgba(42,36,56,.12);
}
.gh-stories__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
.gh-stories__copy{ text-align:left; }
.gh-stories__copy .gh-section__title{ margin-left:0; margin-right:0; text-align:left; }
.gh-stories__quote{
  margin:20px 0 28px; padding:0; border:none;
  font-family:var(--serif); font-size:clamp(17px, 2.2vw, 22px);
  line-height:1.85; letter-spacing:.06em; color:var(--gh-ink);
}
.gh-stories__quote footer{
  margin-top:14px; font-family:var(--sans); font-size:12px;
  color:var(--gh-muted); letter-spacing:.08em;
}
.gh-btn--dark{
  border-color:rgba(42,36,56,.2); color:var(--gh-ink);
  background:#fff;
}
.gh-btn--dark:hover{ background:var(--gh-ink); color:#fff; border-color:var(--gh-ink); }

/* ---------- Testimonials wall (auto-scrolling) ---------- */
.gh-wall{
  background:linear-gradient(180deg, var(--gh-cream) 0%, rgba(142,237,240,.16) 50%, var(--gh-cream) 100%);
  padding:72px 0 76px; overflow:hidden;
}
.gh-wall__head{ text-align:center; max-width:640px; margin:0 auto 44px; padding:0 16px; }
.gh-wall__rows{
  /* React TestimonialsWall mount (same cards as /stories.html) */
  min-height:120px;
}
.gh-wall__row{ overflow:hidden; }
.gh-wall__track{
  display:flex; gap:20px; width:max-content;
  animation:gh-wall-scroll 50s linear infinite;
}
.gh-wall__row[data-dir="right"] .gh-wall__track{
  animation-direction:reverse; animation-duration:56s;
}
.gh-wall__row:hover .gh-wall__track{ animation-play-state:paused; }
@keyframes gh-wall-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.gh-wall__card{
  flex:none; width:320px; padding:24px 26px; border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(214,238,250,.55) 100%);
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 14px 36px rgba(20,58,96,.1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.gh-wall__photo{
  margin-top:16px; aspect-ratio:4/3; overflow:hidden; border-radius:12px;
  background:rgba(20,58,96,.06); flex:none;
}
.gh-wall__photo img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.gh-wall__card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(20,58,96,.16);
}
.gh-wall__quote{
  font-size:13.5px; line-height:1.9; letter-spacing:.02em; color:var(--gh-ink);
  flex:1;
}
.gh-wall__meta{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.gh-wall__avatar{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--gh-grad-deep); color:var(--gh-twilight);
  font-family:var(--serif); font-weight:600; font-size:14px;
}
.gh-wall__who{ display:flex; flex-direction:column; line-height:1.4; }
.gh-wall__who strong{ font-size:13px; font-weight:600; color:var(--gh-ink); }
.gh-wall__who em{ font-style:normal; font-size:11.5px; color:var(--gh-muted); }
.gh-wall__more{ text-align:center; margin-top:44px; }
.home-testimonial-marquee{
  overflow:hidden; cursor:grab; outline:none;
}
.home-testimonial-marquee:active{ cursor:grabbing; }
.home-testimonial-marquee__track{
  animation:home-testimonial-scroll var(--marquee-duration, 32s) linear infinite;
}
.home-testimonial-marquee__track--reverse{ animation-direction:reverse; }
.home-testimonial-marquee:hover .home-testimonial-marquee__track,
.home-testimonial-marquee:focus .home-testimonial-marquee__track,
.home-testimonial-marquee:focus-within .home-testimonial-marquee__track,
.home-testimonial-marquee:active .home-testimonial-marquee__track{
  animation-play-state:paused;
}
@keyframes home-testimonial-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .gh-wall__card{ width:260px; padding:20px; }
  .gh-wall__photo{ margin-top:14px; border-radius:10px; }
  .gh-wall__quote{ font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .gh-wall__track,
  .home-testimonial-marquee__track,
  .gh-about-diamond img,
  .gh-about-diamond::after{ animation:none; }
  .page-home .reveal-media img,
  .page-home .reveal-media.is-in img{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---------- Atmospheric scene dividers ---------- */
.gh-scene{
  position:relative; height:clamp(220px, 32vw, 380px); overflow:hidden;
}
.gh-scene img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.gh-scene__fade-top,
.gh-scene__fade-bottom{
  position:absolute; left:0; right:0; height:8rem; pointer-events:none;
}
.gh-scene__fade-top{
  top:0; background:linear-gradient(to bottom, var(--gh-cream), transparent);
}
.gh-scene__fade-bottom{
  bottom:0; background:linear-gradient(to top, var(--gh-cream), transparent);
}

/* Soft media reveal — scene bands + CTA backdrop (transform/opacity only) */
.page-home .reveal-media img{
  opacity:0;
  transform:translate3d(0,0,0) scale(1.04);
  transition:opacity 1.1s var(--ease), transform 1.25s var(--ease);
}
.page-home .reveal-media.is-in img{
  opacity:1;
  transform:none;
}
.page-home .gh-cta__scene.reveal-media img{
  transform:translate3d(0,0,0) scale(1.03);
}

/* ---------- Section shell ---------- */
.gh-section{
  background:linear-gradient(180deg, rgba(142,237,240,.1) 0%, var(--gh-cream) 180px);
  padding:64px 16px 72px; text-align:center;
}
.gh-section .gh-script{ color:transparent; margin-bottom:12px; }
.gh-section__title{
  font-family:var(--serif); font-size:clamp(24px, 3.4vw, 38px);
  font-weight:600; letter-spacing:.08em; line-height:1.55;
  color:var(--gh-ink); max-width:640px; margin:0 auto 14px;
}
.gh-section__lead{
  font-size:14.5px; color:var(--gh-muted); line-height:2.05;
  max-width:520px; margin:0 auto 40px;
}
.page-home .faq--teaser .faq-list{
  width:100%; max-width:720px; margin-left:auto; margin-right:auto;
}
.page-home .faq--teaser [data-faq-root]{ width:100%; }
.page-home .faq--teaser .faq-more{ text-align:center; }

/* ---------- Series grid (Captain-style) ---------- */
.gh-series-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:20px 16px;
  max-width:960px; margin:0 auto 36px;
}
.gh-series-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:var(--gh-ink);
}
.gh-series-item__icon{
  width:64px; height:64px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(42,36,56,.12);
  transition:transform .35s var(--ease);
}
.gh-series-item:hover .gh-series-item__icon{
  transform:scale(1.08) translateY(-4px);
}
.gh-series-item__icon svg{ width:36px; height:36px; }
.gh-series-item__icon--1{ background:linear-gradient(160deg,#FFF7F0,#FCEEE4); }
.gh-series-item__icon--2{ background:var(--gh-grad-soft); }
.gh-series-item__icon--3{ background:linear-gradient(160deg, #8eedf0 0%, #daf8f9 100%); }
.gh-series-item__icon--4{ background:linear-gradient(160deg, #8eedf0 0%, #e8fcfc 100%); }
.gh-series-item__icon--5{ background:linear-gradient(160deg, #8eedf0 0%, #daf8f9 100%); }
.gh-series-item__en{
  font-size:10px; letter-spacing:.28em; color:#9FB8B8; text-transform:uppercase;
}
.gh-series-item__name{
  font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.1em;
}

/* ---------- Series photo cards ---------- */
.gh-series-cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  max-width:980px; margin:0 auto 36px; text-align:left;
}
.gh-series-card{
  display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
  background:#fff; border:1px solid rgba(42,36,56,.08);
  box-shadow:0 4px 24px rgba(42,36,56,.06);
  text-decoration:none; color:var(--gh-ink);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gh-series-card:hover{
  transform:translateY(-6px); box-shadow:0 16px 40px rgba(42,36,56,.12);
}
.gh-series-card__media{
  aspect-ratio:16/10; overflow:hidden; background:var(--paper-warm, #F6ECDD);
}
.gh-series-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.gh-series-card:hover .gh-series-card__media img{ transform:scale(1.04); }
.gh-series-card__body{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.gh-series-card__en{
  font-size:10px; letter-spacing:.28em; color:#9FB8B8; text-transform:uppercase; margin-bottom:6px;
}
.gh-series-card__body h3{
  font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.08em; margin-bottom:8px;
}
.gh-series-card__body p{
  font-size:12.5px; color:var(--gh-muted); line-height:1.9; flex:1; margin-bottom:12px;
}
.gh-series-card__more{
  font-size:11px; letter-spacing:.14em; font-weight:500;
  background:var(--gh-grad-script-light);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Explore cards (Teamwork-style) ---------- */
.gh-cards{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
  max-width:880px; margin:0 auto;
}
.gh-card{
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  padding:0; border-radius:20px;
  border:1px solid rgba(42,36,56,.08); background:#fff;
  box-shadow:0 4px 24px rgba(42,36,56,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  text-decoration:none; color:var(--gh-ink); overflow:hidden;
}
.gh-card:hover{
  transform:translateY(-6px); box-shadow:0 16px 40px rgba(42,36,56,.1);
  border-color:rgba(var(--gh-accent-rgb),.35);
}
.gh-card__media{
  aspect-ratio:16/9; overflow:hidden; background:var(--paper-warm, #F6ECDD);
}
.gh-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.gh-card:hover .gh-card__media img{ transform:scale(1.04); }
.gh-card h3{
  font-family:var(--serif); font-size:18px; font-weight:600;
  letter-spacing:.08em; margin:18px 20px 10px;
}
.gh-card p{
  font-size:13px; color:var(--gh-muted); line-height:1.95; flex:1;
  margin:0 20px 14px;
}
.gh-card__link{
  font-size:12px; letter-spacing:.14em; font-weight:500;
  margin:0 20px 20px;
  background:var(--gh-grad-script-light);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- FAQ card (Own-data style) ---------- */
.gh-faq-wrap{
  max-width:720px; margin:0 auto;
  border-radius:20px; border:1px solid rgba(42,36,56,.08);
  background:#fff; box-shadow:0 12px 48px rgba(42,36,56,.08);
  overflow:hidden; text-align:left;
}
.gh-faq-wrap .faq-list{ margin-top:0; max-width:none; }
.gh-faq-wrap .faq-item{ border-color:rgba(42,36,56,.08); }
.gh-faq-wrap .faq-q{ letter-spacing:.06em; }
.gh-faq-more{ margin-top:28px; text-align:center; }
.gh-faq-more .btn-line{
  border-radius:999px; border-color:rgba(var(--gh-accent-rgb),.45); color:var(--gh-dna-deep);
}
.gh-faq-more .btn-line:hover{
  background:var(--gh-grad-deep); color:var(--gh-twilight); border-color:transparent;
}

/* ---------- Dark CTA (Developer-style) ---------- */
.gh-cta{
  position:relative; background:#0f0e14; color:#fff;
  text-align:center; overflow:hidden;
}
.gh-cta__scene{
  position:relative; height:clamp(240px, 36vw, 420px);
  overflow:hidden;
}
.gh-cta__scene img{ width:100%; height:100%; object-fit:cover; }
.gh-cta__scene-fade-top{
  position:absolute; inset:0 0 auto; z-index:1; height:8rem;
  pointer-events:none;
  background:linear-gradient(to bottom, var(--gh-cream), transparent);
}
/* Soft dissolve into body — tall multi-stop wash kills copper hairline
   from warm photo highlights crushing against flat #0f0e14. */
.gh-cta__scene-fade-bottom{
  position:absolute; inset:auto 0 0; z-index:1;
  height:clamp(10rem, 42%, 16rem);
  pointer-events:none;
  background:linear-gradient(
    to top,
    #0f0e14 0%,
    #0f0e14 28%,
    rgba(15,14,20,.94) 48%,
    rgba(15,14,20,.62) 68%,
    rgba(15,14,20,.28) 84%,
    transparent 100%
  );
}
.gh-cta__body{
  position:relative; z-index:2;
  margin-top:-1px;
  padding:48px 16px 72px;
  /* Extra soft bleed so scene→body never reads as two panels + a bar */
  box-shadow:0 -56px 64px 28px #0f0e14;
}
.gh-cta .gh-script{ color:transparent; }
.gh-cta__title{
  font-family:var(--serif); font-size:clamp(24px, 3.4vw, 36px);
  font-weight:600; letter-spacing:.1em; line-height:1.65;
  margin-bottom:18px;
}
.gh-cta__lead{
  font-size:14.5px; color:rgba(255,255,255,.72); line-height:2.1;
  max-width:480px; margin:0 auto 32px;
}
.gh-cta .hint{ color:rgba(255,255,255,.45); }

/* CTA already black — drop hard footer hairline so band stays continuous */
.page-home .footer,
.page-home [data-hover-footer-root]{
  background:#0f0e14;
  border-top:none;
  box-shadow:none;
}
.page-home [data-hover-footer-root] > *{
  border-top:none;
}

@media (max-width:900px){
  .gh-poem-grid,
  .gh-about-grid,
  .gh-stories-grid{ grid-template-columns:1fr; gap:32px; }
  .gh-poem__copy{ text-align:center; }
  .gh-poem__copy .gh-poem__title,
  .gh-stories__copy .gh-section__title{ text-align:center; }
  .gh-poem__copy .gh-poem__text{ margin-left:auto; margin-right:auto; }
  .gh-stories__copy{ text-align:center; }
  .gh-about-grid{ text-align:center; }
  .gh-about-step{ text-align:left; }
  .gh-series-cards{ grid-template-columns:1fr 1fr; }
  .gh-usp-list{ grid-template-columns:1fr; }
  .gh-hc-copy{ padding-left:72px; padding-right:72px; }
}
@media (max-width:640px){
  .gh-hc-viewport{ height:max(560px, 82svh); min-height:0; max-height:760px; }
  .hc-media img{ object-position:center; }
  .gh-hc-copy{
    padding:94px 72px 74px; align-items:center !important; text-align:center !important;
  }
  .gh-hc-copy > *{ width:100%; }
  .gh-hc-copy .gh-hero__lead{ margin-left:auto !important; margin-right:auto !important; }
  .gh-hc-copy .gh-hero__actions{ justify-content:center !important; margin-bottom:0; }
  .gh-hero__title{ font-size:clamp(27px, 8vw, 38px); line-height:1.5; letter-spacing:.06em; }
  .gh-hc-arrow{ width:40px; height:40px; }
  .gh-hc-dots{ bottom:24px; }
  .gh-about-teaser{ grid-template-columns:1fr; gap:20px; }
  .gh-about-diamond{ width:min(58vw, 230px); margin:0 auto; }
  .gh-about-actions{ justify-content:center; }
  .gh-series-cards,
  .gh-cards{ grid-template-columns:1fr; }
  .gh-series-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 16px; }
}