:root {
  --framer-canvas: 1200px;
  --framer-section-rail: 1120px;
  --framer-content-rail: 1040px;
  --framer-page-black: #050807;
  --framer-panel: #0a1110;
  --framer-text: #edfafa;
  --framer-muted: #a4c5c0;
  --framer-accent: #589c9d;
  --framer-accent-soft: #70d2c4;
  --framer-border: rgba(88, 156, 157, .22);
  --framer-radius: 8px;
  --framer-header-height: 74px;
  --framer-font: "Satoshi", "Microsoft YaHei", "PingFang SC", sans-serif;
  --framer-top-gradient: radial-gradient(64% 36% at 50% 0%, #0d413a 0%, #051815 33%, #000 68%);
}

/* Hide the outgoing document during full-page navigation so the next page
   never appears to snap from an older layout. The target document starts
   without this class and paints normally. */
html.site-navigating::after {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: var(--framer-page-black);
  content: "";
  pointer-events: none;
}

.framer-desktop-page {
  position: relative;
  min-width: var(--framer-canvas);
  background: var(--framer-page-black);
  color: var(--framer-text);
  font-family: var(--framer-font);
  isolation: isolate;
}

/* All non-home public pages share one viewport-relative gradient layer. */
.framer-desktop-page:not(.home-framer-page)::before {
  position: fixed;
  z-index: 0;
  inset: var(--framer-header-height) 0 0;
  background: var(--framer-top-gradient);
  content: "";
  pointer-events: none;
}

.framer-desktop-page:not(.home-framer-page) > .site-header,
.framer-desktop-page:not(.home-framer-page) > main,
.framer-desktop-page:not(.home-framer-page) > .site-footer {
  position: relative;
  z-index: 1;
}

/* Keep the shared header above page content so account menus remain clickable. */
.framer-desktop-page:not(.home-framer-page) > .site-header {
  z-index: 20;
}

.tools-framer-page .tools-page,
.credits-framer-page .credits-page,
.contact-framer-page .contact-framer-main,
.profile-framer-page .profile-shell,
.auth-framer-page .auth-page,
.legal-framer-page .legal-page {
  background: transparent;
}

.framer-desktop-page [data-network-region] { isolation: isolate; }
.framer-desktop-page [data-network-region] > .page-network-canvas { position: fixed; z-index: 0; inset: var(--framer-header-height) 0 0; width: 100%; height: calc(100% - var(--framer-header-height)); pointer-events: none; opacity: .9; }
.framer-desktop-page [data-network-region] > :not(.page-network-canvas) { position: relative; z-index: 1; }

.framer-desktop-page .site-header .brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; height: 38px; background: none; color: #e0f6f2; font-size: 17px; font-weight: 700; }
.framer-desktop-page .site-header .brand::before { width: 38px; height: 38px; flex: 0 0 38px; background: url("assets/gooji-logo-dark.png") center / contain no-repeat; content: ""; }
.framer-desktop-page .site-header .brand-cn,
.framer-desktop-page .site-header .brand-en { display: inline; color: inherit; font-size: inherit; letter-spacing: normal; }

/* Canonical public header. Page-specific styles must not redefine this shell. */
body.framer-desktop-page .site-header,
.framer-desktop-page .site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 74px;
  padding: 0 72px;
  border-bottom: 1px solid rgba(141, 202, 195, .14);
  background: #030807;
  backdrop-filter: none;
}
body.framer-desktop-page .site-header .search,
.framer-desktop-page .site-header .search { display: none; }
body.framer-desktop-page .site-header .brand,
.framer-desktop-page .site-header .brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; height: 38px; color: #e0f6f2; font-size: 17px; font-weight: 700; line-height: 1.2; }
body.framer-desktop-page .site-header .brand-cn,
body.framer-desktop-page .site-header .brand-en,
.framer-desktop-page .site-header .brand-cn,
.framer-desktop-page .site-header .brand-en { margin: 0; color: inherit; font-size: inherit; letter-spacing: normal; }
body.framer-desktop-page .site-header .header-actions,
.framer-desktop-page .site-header .header-actions {
  position: static;
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 30px;
  color: #b0ccc7;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
body.framer-desktop-page .site-header .header-actions a,
.framer-desktop-page .site-header .header-actions a { color: #b0ccc7; font-size: 14px; font-weight: 400; }
body.framer-desktop-page .site-header .header-actions a:hover,
body.framer-desktop-page .site-header .header-actions a[aria-current="page"],
.framer-desktop-page .site-header .header-actions a:hover,
.framer-desktop-page .site-header .header-actions a[aria-current="page"] { color: #e0f6f2; font-weight: 500; }
body.framer-desktop-page .site-header .nav-button,
.framer-desktop-page .site-header .nav-button { position: absolute; right: 72px; min-height: 35px; padding: 9px 16px; border: 1px solid rgba(138, 205, 197, .34); border-radius: 6px; background: rgba(62, 133, 128, .28); color: #e5f8f4; font-size: 14px; font-weight: 500; line-height: 1.2; }
body.framer-desktop-page .site-header .account-menu,
.framer-desktop-page .site-header .account-menu { position: absolute; right: 72px; }

/* Shared authentication modal, used by every public page. */
.framer-desktop-page .modal { z-index: 100; padding: 24px; }
.framer-desktop-page .modal-backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(12px); }
.framer-desktop-page .modal-panel.login-modal-panel {
  width: 420px;
  padding: 28px;
  border: 1px solid rgba(117, 206, 192, .30);
  border-radius: var(--framer-radius);
  background: linear-gradient(145deg, rgba(11, 43, 38, .98), rgba(5, 18, 16, .99));
  box-shadow: 0 0 3px rgba(173, 245, 233, .30), 0 24px 72px rgba(0, 0, 0, .56), 0 0 44px rgba(56, 167, 151, .14);
}
.framer-desktop-page .login-modal-panel h2 {
  margin: 0 0 14px;
  color: var(--framer-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.framer-desktop-page .login-modal-panel [data-auth-notice] {
  margin: 0 0 22px;
  color: var(--framer-muted);
  font-size: 14px;
  line-height: 1.65;
}
.framer-desktop-page .login-modal-panel .wide-button {
  min-height: 44px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}
.framer-desktop-page .login-modal-panel .buy-button {
  border: 1px solid rgba(186, 244, 235, .45);
  background: var(--framer-accent);
  color: #06100e;
}
.framer-desktop-page .login-modal-panel .secondary-button {
  margin-top: 10px;
  border: 1px solid rgba(141, 220, 208, .30);
  background: rgba(7, 24, 21, .80);
  color: #d7eee9;
}
.framer-desktop-page .login-modal-panel [hidden] { display: none !important; }
.framer-desktop-page .login-modal-panel .content-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(117, 206, 192, .18);
  color: #9dbeb8;
  font-size: 13px;
}
.framer-desktop-page .login-modal-panel .content-note strong { color: #e6f7f3; }
.framer-desktop-page .login-modal-panel .modal-close {
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(141, 220, 208, .28);
  border-radius: 50%;
  background: rgba(7, 24, 21, .82);
  color: #b7d4cf;
  font-size: 22px;
}
.framer-desktop-page .login-modal-panel .modal-close:hover { border-color: rgba(141, 220, 208, .54); color: #edfafa; }

/* Logged-in account entry remains a quiet extension of the header navigation. */
.framer-desktop-page .account-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 3px 10px 3px 4px; border: 1px solid rgba(129, 211, 198, .28); border-radius: 999px; background: rgba(26, 83, 75, .38); box-shadow: none; color: #d8eeea; font-size: 14px; font-weight: 500; line-height: 1.2; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.framer-desktop-page .account-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid rgba(158, 230, 218, .46); border-radius: 50%; background: #103a34; color: #e0f5f0; font-size: 12px; font-weight: 600; line-height: 1; overflow: hidden; text-align: center; }
.framer-desktop-page .account-trigger:hover, .framer-desktop-page .account-trigger:focus-visible { border-color: rgba(153, 229, 216, .48); background: rgba(44, 121, 110, .52); color: #f0fbf8; }
.framer-desktop-page .account-dropdown { border-color: rgba(117, 206, 192, .28); border-radius: 7px; background: #07110f; box-shadow: 0 16px 36px rgba(0, 0, 0, .42); }
.framer-desktop-page .account-dropdown a, .framer-desktop-page .account-dropdown button { color: #b9d3ce; }
.framer-desktop-page .account-dropdown a:hover, .framer-desktop-page .account-dropdown button:hover { background: rgba(57, 133, 125, .22); color: #e5f8f4; }