.home-framer-page { --hero-glow-x: 50%; --hero-glow-y: 38%; --hero-glow-width: 560px; --hero-glow-height: 410px; --hero-glow-opacity: .64; min-width: 1200px; background: #000; color: #e1f0ec; font-family: Satoshi, "Microsoft YaHei", sans-serif; }
.home-framer-page .site-header { grid-template-columns: 1fr auto 1fr; min-height: 74px; padding: 0 72px; background: #030807; border-color: rgba(141, 202, 195, .14); }
.home-framer-page .search { display: none; }
.home-framer-page .header-actions { position: static; grid-column: 2; justify-self: center; gap: 30px; color: #b0ccc7; font-size: 14px; }
.home-framer-page .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; }
.home-framer-page .account-menu { position: absolute; right: 72px; }
.home-framer-page .brand { color: #e0f6f2; font-size: 17px; font-weight: 700; }
.home-framer-page .brand-cn { font-size: inherit; color: inherit; }.home-framer-page .brand-en { margin-left: 3px; font-size: inherit; color: inherit; }
.home-framer-page .site-header .brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; height: 38px; background: none; }
.home-framer-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: ""; }
.home-framer-page .site-header .brand-cn,
.home-framer-page .site-header .brand-en { display: inline; }

.framer-home { background: #000; }
.home-framer-page .framer-home > .plugin-hero { isolation: isolate; position: relative; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; align-items: center !important; justify-content: flex-start !important; min-height: 1004px; height: max(1004px, calc(100vh - 74px)); width: 100%; margin: 0; padding: 130px 40px 0; overflow: hidden; text-align: center; background: #000; }
.framer-home .plugin-hero::before { position: absolute; z-index: 0; inset: 0; opacity: 0; content: ""; background: radial-gradient(var(--hero-glow-width) var(--hero-glow-height) at var(--hero-glow-x) var(--hero-glow-y), rgba(57, 175, 157, var(--hero-glow-opacity)) 0%, rgba(22, 90, 80, var(--hero-glow-opacity)) 36%, rgba(4, 29, 25, var(--hero-glow-opacity)) 58%, transparent 78%), radial-gradient(54% 50% at 50% 57.2%, transparent 0%, rgba(0, 0, 0, .67) 64.5%, #000 100%); animation: hero-glow-reveal 2s .5s ease both, hero-glow-breathe 16s 2.5s ease-in-out infinite; }
.framer-home .plugin-hero::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 224px; content: ""; background: linear-gradient(180deg, transparent, #000); }
.home-framer-page .framer-home > .plugin-hero > .home-promotion-banner { position: absolute; z-index: 3; top: 14px; left: 50%; display: grid; grid-template-columns: minmax(360px, 1fr) auto auto auto; align-items: center; gap: 22px; width: 872px; min-height: 58px; box-sizing: border-box; padding: 10px 16px 10px 20px; border: 1px solid rgba(132, 223, 208, .32); border-radius: 7px; background: linear-gradient(105deg, rgba(9, 39, 34, .94), rgba(24, 95, 83, .62), rgba(6, 21, 18, .92)); box-shadow: 0 0 3px rgba(150, 241, 226, .26), 0 0 34px rgba(50, 177, 158, .12); color: #e2f8f3; text-align: left; text-decoration: none; transform: translateX(-50%); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.home-framer-page .framer-home > .plugin-hero > .home-promotion-banner[hidden] { display: none; }
.framer-home .home-promotion-banner:hover { border-color: rgba(163, 241, 226, .54); box-shadow: 0 0 4px rgba(178, 249, 237, .42), 0 0 44px rgba(50, 177, 158, .2); transform: translateX(-50%) translateY(-1px); }
.framer-home .home-promotion-copy { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; min-width: 0; }
.framer-home .home-promotion-copy small { grid-column: 1; grid-row: 1 / span 2; padding-right: 10px; border-right: 1px solid rgba(159, 230, 219, .25); color: #78d7c8; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.framer-home .home-promotion-copy strong { overflow: hidden; color: #edfdfa; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.framer-home .home-promotion-copy > span { overflow: hidden; color: #9fc1bb; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.framer-home .home-promotion-stat { min-width: 80px; padding-left: 18px; border-left: 1px solid rgba(159, 230, 219, .2); text-align: right; white-space: nowrap; }
.framer-home .home-promotion-stat small { display: block; color: #91b9b1; font-size: 11px; }
.framer-home .home-promotion-stat strong { display: block; margin-top: 3px; color: #a3eee1; font-size: 14px; font-weight: 600; }
.framer-home .home-promotion-link { color: #dff8f3; font-size: 12px; font-weight: 600; white-space: nowrap; }
.framer-home .plugin-hero > .plugin-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; animation: hero-copy-enter .8s cubic-bezier(.22, 1, .36, 1) both; }
.framer-home .plugin-hero-copy h1 { max-width: none; margin: 0 0 28px; background: linear-gradient(0deg, #f7fcfb, #82c2bb); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 72px; font-weight: 500; line-height: 1.08; }
.framer-home .plugin-hero-copy > p { max-width: 760px; margin: 0 auto; color: rgba(224, 240, 237, .78); font-size: 20px; line-height: 1.45; }
.framer-home .hero-actions { justify-content: center; gap: 12px; margin-top: 28px; }
.framer-home .buy-button, .framer-home .secondary-button { min-height: 40px; padding: 0 17px; border-radius: 7px; font-size: 14px; }
.framer-home .buy-button { border-color: #fff; background: #fff; color: #0a1110; box-shadow: none; }
.framer-home .secondary-button { border-color: rgba(122, 205, 194, .32); background: rgba(68, 143, 135, .35); color: #d6f0ea; }
.framer-home .plugin-visual { position: relative; z-index: 1; width: 824px; height: 580px; margin: 53px auto 0; animation: plugin-window-enter 1s .15s cubic-bezier(.22, 1, .36, 1) both; }
.framer-home .plugin-visual::before, .framer-home .plugin-visual::after { position: absolute; z-index: -1; top: -212px; left: 50%; width: 1020px; height: 600px; border: 1px solid rgba(196, 244, 236, .24); border-radius: 50%; content: ""; opacity: 0; transform: translateX(-50%) scale(.82); animation: plugin-ripple 18s ease-in-out infinite; }
.framer-home .plugin-visual::after { animation-delay: -9s; }
.framer-home .viewport-card { box-sizing: border-box; width: 824px; height: 580px; padding: 8px; overflow: hidden; border: 1px solid rgba(150, 234, 219, .58); border-radius: 10px; background: #050a09; box-shadow: 0 0 3px rgba(172, 247, 235, .66), 0 0 58px 1px rgba(63, 187, 170, .33); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .72) 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .72) 68%, transparent 100%); animation: plugin-glow-breathe 4.8s ease-in-out infinite; }
.plugin-titlebar { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 52px; padding: 0 18px; border: 1px solid rgba(128, 183, 177, .18); border-bottom: 0; border-radius: 6px 6px 0 0; background: #060909; font-size: 14px; text-align: left; }
.plugin-titlebar strong { font-weight: 500; }.plugin-titlebar .credit-status { padding: 5px 9px; border: 1px solid rgba(116, 206, 191, .26); border-radius: 5px; background: rgba(57, 141, 131, .2); color: #92d5ca; font-size: 12px; }
.plugin-window-body { display: grid; grid-template-columns: 173px 1fr 164px; height: 510px; overflow: hidden; border: 1px solid rgba(128, 183, 177, .18); border-top: 0; border-radius: 0 0 6px 6px; background: #080e0d; text-align: left; }
.plugin-mode-list, .plugin-history { padding: 17px 12px; border-right: 1px solid rgba(126, 205, 193, .14); }.plugin-history { border: 0; border-left: 1px solid rgba(126, 205, 193, .14); }
.plugin-mode-list small { display: block; margin-bottom: 12px; color: #8ea9a4; font-size: 11px; }.plugin-mode-list b { display: block; margin: 8px 0; padding: 9px; border: 1px solid rgba(94, 182, 169, .28); border-radius: 5px; background: rgba(31, 91, 83, .25); color: #d0ebe5; font-size: 12px; font-weight: 500; }.plugin-mode-list b:nth-of-type(n+2) { border-color: transparent; background: transparent; color: #91afaa; }
.mode-preview, .plugin-history section { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.mode-preview i, .plugin-history i, .workspace-image { display: block; aspect-ratio: 1; border: 1px solid rgba(127, 197, 187, .22); border-radius: 4px; background: linear-gradient(135deg, #344c47, #09100f); }.mode-preview i, .plugin-history i { width: 100%; height: auto; }
.plugin-compose { padding: 13px; }.plugin-input-row { display: flex; gap: 9px; height: 116px; }.plugin-input-row .workspace-image, .plugin-input-row em { flex: 0 0 116px; width: 116px; height: 116px; }.plugin-input-row .workspace-image { box-shadow: inset 0 0 0 5px rgba(71, 140, 131, .12); }.plugin-input-row em { display: grid; place-items: center; border: 1px dashed rgba(118, 208, 195, .4); border-radius: 5px; color: #73c7bb; font-size: 27px; font-style: normal; }.plugin-prompt { height: 152px; margin-top: 12px; padding: 12px; border: 1px solid rgba(118, 198, 186, .24); border-radius: 5px; color: #a7c2bc; font-size: 12px; }.plugin-prompt span { color: #a6c5bf; }.plugin-settings { display: flex; gap: 9px; margin-top: 10px; padding: 9px; border: 1px solid rgba(118, 198, 186, .18); border-radius: 5px; color: #9ab6b0; font-size: 10px; }.plugin-compose button { width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 4px; background: linear-gradient(180deg, #439f95, #207469); color: #b9d7d1; font-size: 13px; }
.plugin-history > div { display: flex; justify-content: space-between; margin-bottom: 12px; }.plugin-history strong { font-size: 12px; font-weight: 500; }.plugin-history span { color: #83bdb4; font-size: 11px; }.plugin-history .history-result { height: 124px; margin-top: 10px; border: 1px solid rgba(127, 197, 187, .22); border-radius: 4px; background: linear-gradient(135deg, #314842, #0a1210); }

.tool-library { display: grid; grid-template-columns: 320px 720px; gap: 72px; width: 1120px; margin: auto; padding: 124px 0; }.tool-library > div:first-child { align-self: center; }.tool-library .eyebrow { margin: 0; color: #69a9a1; font-size: 13px; font-weight: 500; }.tool-library h2 { margin: 20px 0; color: #e8f7f4; font-size: 42px; font-weight: 500; line-height: 1.12; }.tool-library > div:first-child > p:last-child { margin: 0; color: #9ebeb9; font-size: 16px; line-height: 1.55; }.tool-library-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 250px); gap: 14px; width: 720px; height: 514px; }.tool-library-grid article { min-height: 0; box-sizing: border-box; padding: 14px; border: 1px solid rgba(121, 193, 186, .24); border-radius: 8px; background: #0a1917; }.tool-library-grid i { position: relative; display: block; height: 128px; overflow: hidden; border: 1px solid rgba(153, 223, 211, .20); border-radius: 5px; background: linear-gradient(135deg, #2a5b54 0%, #102522 62%, #07100f 100%); }.tool-library-grid i::before, .tool-library-grid i::after { position: absolute; content: ""; }.tool-library-grid i::before { top: 45px; left: calc(50% - 16px); width: 32px; height: 22px; border: 2px solid #bdece5; border-radius: 5px; }.tool-library-grid i::after { top: 41px; left: calc(50% - 7px); width: 14px; height: 6px; border: 2px solid #bdece5; border-bottom: 0; border-radius: 3px 3px 0 0; }.tool-edge i { background: linear-gradient(135deg, #123a36 0%, #0d1b19 60%, #07100f 100%); }.tool-edge i::before { top: 40px; left: calc(50% - 20px); width: 38px; height: 38px; border: 2px solid #bdece5; border-radius: 8px; transform: rotate(45deg); }.tool-edge i::after { top: 62px; left: calc(50% - 28px); width: 56px; border-top: 2px solid #bdece5; }.tool-material i { background: linear-gradient(135deg, #20443f 0%, #102522 62%, #07100f 100%); }.tool-material i::before { top: 44px; left: calc(50% - 20px); width: 38px; height: 30px; border: 2px solid #bdece5; transform: skewY(-25deg); }.tool-material i::after { top: 53px; left: calc(50% - 18px); width: 36px; border-top: 2px solid #bdece5; }.tool-resolution i { background: linear-gradient(135deg, #17443e 0%, #0c1c19 60%, #07100f 100%); }.tool-resolution i::before { top: 40px; left: calc(50% - 23px); width: 42px; height: 42px; border: 2px solid #bdece5; }.tool-resolution i::after { top: 55px; left: calc(50% - 8px); width: 12px; height: 12px; border: 2px solid #bdece5; border-radius: 50%; }.tool-library-grid h3 { margin: 14px 0 6px; color: #e8f7f4; font-size: 17px; font-weight: 500; }.tool-library-grid p { margin: 0; color: #9ebeb9; font-size: 13px; line-height: 1.35; }

.tool-library-grid article { animation: tool-card-enter .7s cubic-bezier(.22, 1, .36, 1) both; }
.tool-library-grid article:nth-child(2) { animation-delay: .08s; }
.tool-library-grid article:nth-child(3) { animation-delay: .14s; }
.tool-library-grid article:nth-child(4) { animation-delay: .2s; }

.tool-library h2 { margin: 0 0 20px; }

@keyframes hero-glow-reveal { from { opacity: 0; } to { opacity: .94; } }
@keyframes hero-glow-breathe { 0%, 100% { opacity: .94; } 50% { opacity: .6; } }
@keyframes hero-copy-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plugin-window-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plugin-ripple { 0% { opacity: .16; transform: translateX(-50%) scale(.82); } 8% { opacity: .32; } 48% { opacity: .22; transform: translateX(-50%) scale(1.03); } 86% { opacity: .05; transform: translateX(-50%) scale(1.24); } 100% { opacity: 0; transform: translateX(-50%) scale(1.28); } }
@keyframes plugin-glow-breathe { 0%, 100% { border-color: rgba(150, 234, 219, .48); box-shadow: 0 0 3px rgba(172, 247, 235, .48), 0 0 42px rgba(63, 187, 170, .22); } 50% { border-color: rgba(178, 248, 236, .8); box-shadow: 0 0 4px rgba(207, 255, 246, .84), 0 0 74px 4px rgba(63, 187, 170, .46); } }
@keyframes tool-card-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .home-framer-page *, .home-framer-page *::before, .home-framer-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

.hero-tuner { position: fixed; z-index: 100; right: 18px; bottom: 18px; width: 268px; padding: 16px; border: 1px solid rgba(135, 215, 203, .32); border-radius: 8px; background: rgba(4, 12, 11, .92); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); color: #e1f0ec; font-size: 12px; backdrop-filter: blur(16px); }.hero-tuner h2 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }.hero-tuner label { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 10px; color: #b8d1cc; }.hero-tuner output { color: #8cd4c8; font-variant-numeric: tabular-nums; }.hero-tuner input { grid-column: 1 / -1; width: 100%; accent-color: #589c9d; }.hero-tuner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.hero-tuner button { min-height: 32px; border: 1px solid rgba(135, 215, 203, .28); border-radius: 5px; background: rgba(57, 133, 125, .26); color: #e1f0ec; cursor: pointer; }