.creative-hub-page { min-height: 100vh; }
.creative-hub-main { width: min(1140px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 7vw, 82px) 0 96px; }
.creative-hub-intro { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 60px); text-align: center; }
.creative-hub-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 19px; color: var(--text-muted); font-family: 'Outfit', 'Noto Sans TC', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.creative-hub-mark { display: grid; grid-template-columns: repeat(2, 5px); gap: 3px; transform: rotate(-8deg); }
.creative-hub-mark i { width: 5px; height: 5px; border: 1px solid var(--primary); border-radius: 1px; }
.creative-hub-mark i:nth-child(2), .creative-hub-mark i:nth-child(3) { background: var(--accent-gold); border-color: var(--accent-gold); }
.creative-hub-intro h2 { margin: 0; color: var(--secondary); font-size: clamp(34px, 5.2vw, 58px); font-weight: 650; line-height: 1.18; letter-spacing: -.045em; }
.creative-hub-intro h2 em { display: block; color: var(--primary); font-family: 'Cinzel', 'Noto Sans TC', serif; font-style: normal; font-weight: 600; }
.creative-hub-lead { max-width: 540px; margin: 18px auto 0; color: var(--text-muted); font-size: 15px; line-height: 1.8; }
.creative-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.creative-tool-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-soft); transition: transform var(--motion-base) var(--motion-ease-out), box-shadow var(--motion-base) var(--motion-ease-standard), border-color var(--motion-base); }
.creative-tool-card:hover { transform: translateY(-4px); border-color: rgba(139,90,43,.25); box-shadow: var(--shadow-hover); }
.creative-tool-card[hidden] { display: none !important; }
.creative-tool-art { position: relative; display: grid; min-height: 178px; place-items: center; overflow: hidden; isolation: isolate; }
.creative-tool-art::before, .creative-tool-art::after { position: absolute; z-index: -1; border: 1px solid rgba(92,64,51,.11); border-radius: 50%; content: ''; }
.creative-tool-art::before { width: 220px; height: 220px; }
.creative-tool-art::after { width: 290px; height: 290px; }
.creative-tool-art--card { background: linear-gradient(135deg,#f3e9dc,#f9f4ec); }
.creative-tool-art--image { background: radial-gradient(circle at 70% 28%,rgba(255,255,255,.8),transparent 28%),linear-gradient(135deg,#e7e9df,#f4eee5 60%,#dfc7ae); }
.image-studio-art-card { position:absolute; width:112px; height:132px; border:1px solid rgba(92,64,51,.2); border-radius:13px; background:linear-gradient(155deg,#fffaf2,#d7baa0); box-shadow:0 16px 30px rgba(79,53,35,.15); transform:rotate(-10deg) translate(-13px,2px); }
.image-studio-art-card--front { display:grid; place-items:center; background:linear-gradient(140deg,#39535a,#b8784d 52%,#e6c795); transform:rotate(9deg) translate(18px,7px); }
.image-studio-art-card--front i { width:65px; height:78px; border-radius:48% 48% 14px 14px; background:linear-gradient(145deg,#f1d8b4,#8b5c43); box-shadow:0 0 0 5px rgba(255,255,255,.28); }
.image-studio-art-card--front b { position:absolute; width:28px; height:28px; border-radius:50%; background:#f5e1bd; top:25px; }
.image-studio-art-spark { position:absolute; top:31px; right:calc(50% - 84px); color:#fff7de; font-size:26px; text-shadow:0 2px 12px #9d6a43; }
.creative-tool-art--video { background: linear-gradient(135deg,#e9ece7,#f5f4ed); }
.creative-tool-art--film { background: linear-gradient(135deg,#eee8de,#f5eee4); }
.creative-tool-art--wedding { background:radial-gradient(circle at 51% 46%,rgba(255,255,255,.78) 0 21%,transparent 22%),linear-gradient(140deg,#f5e8dc,#f7f1e8 58%,#ead5c2); }
.wedding-art-ring { position:absolute; width:100px; height:130px; border:1px solid rgba(123,80,57,.34); border-radius:48% 48% 42% 42%; background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(238,220,202,.74)); box-shadow:0 11px 22px rgba(92,64,51,.14); }
.wedding-art-ring--back { transform:translate(23px,-1px) rotate(9deg); background:linear-gradient(145deg,#dcb996,#b98e70); }
.wedding-art-ring--front { display:grid; place-items:center; transform:translate(-17px,3px) rotate(-7deg); }
.wedding-art-ring--front i { position:absolute; top:23px; width:25px; height:25px; border:2px solid #b48759; border-radius:50%; background:radial-gradient(circle,#d9b579 0 4px,transparent 5px); }
.wedding-art-ring--front b { position:absolute; bottom:16px; width:63px; height:51px; border-radius:40% 40% 8px 8px; background:linear-gradient(90deg,#eee2d4 0 42%,#d1b89d 43% 57%,#eee2d4 58%); }
.wedding-art-sparkle { position:absolute; top:27px; right:calc(50% - 86px); color:#a47852; font-size:23px; text-shadow:0 2px 7px #fff; }
.art-card { position: absolute; width: 92px; height: 118px; border: 1px solid rgba(92,64,51,.18); border-radius: 8px; background: #fffdf8; box-shadow: 0 12px 26px rgba(92,64,51,.14); }
.art-card--back { transform: translate(12px,-3px) rotate(9deg); background: #d8b98f; }
.art-card--front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; transform: translate(-12px,2px) rotate(-5deg); }
.art-card--front i { width: 30px; height: 30px; border: 1px solid var(--accent-gold); border-radius: 50%; background: radial-gradient(circle at 50% 45%,#d8b98f 0 4px,transparent 5px),linear-gradient(140deg,transparent 44%,#789078 45% 50%,transparent 51%); }
.art-card--front b, .art-card--front small { width: 45px; height: 2px; border-radius: 2px; background: #ad8d6a; }
.art-card--front small { width: 31px; background: #d3c2b1; }
.art-frame { position: relative; width: 180px; height: 104px; overflow: hidden; border: 5px solid rgba(255,255,255,.88); border-radius: 13px; background: linear-gradient(155deg,#bdc5b8 0 45%,#81948b 46% 62%,#d8b88f 63%); box-shadow: 0 12px 25px rgba(55,59,49,.18); }
.art-frame i { position:absolute; right:20px; bottom:17px; left:20px; height:1px; background:rgba(255,255,255,.72); }
.art-frame b { position:absolute; right:45px; bottom:27px; left:41px; height:27px; border-radius:40px 40px 3px 3px; background:#f1d7ba; }
.art-frame small { position:absolute; right:32px; bottom:8px; left:32px; height:8px; border-radius:50%; background:rgba(61,46,38,.14); }
.art-play { position:absolute; width:40px; height:40px; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(92,64,51,.74); }
.art-play::after { position:absolute; top:12px; left:16px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid #fff; content:''; }
.film-frames { display:flex; gap:6px; padding:12px 10px; border:1px solid rgba(92,64,51,.16); border-radius:9px; background:#372a23; box-shadow:0 12px 25px rgba(55,40,31,.18); }
.film-frames i { width:31px; height:61px; border:3px solid #d8c8b3; border-radius:3px; background:linear-gradient(155deg,#dfa66b 0 34%,#777e68 35% 60%,#443d35 61%); }
.film-frames i:nth-child(2) { background:linear-gradient(135deg,#d6ae7d 0 35%,#849088 36% 62%,#413730 63%); }
.film-frames i:nth-child(3) { background:linear-gradient(155deg,#d2bd99 0 35%,#718276 36% 64%,#3c3531 65%); }
.film-frames i:nth-child(4) { background:linear-gradient(145deg,#e0bc8d 0 35%,#80725e 36% 63%,#433832 64%); }
.film-track { position:absolute; right:calc(50% - 70px); bottom:42px; left:calc(50% - 70px); height:2px; background:var(--accent-gold); }
.art-caption { position:absolute; bottom:13px; color:rgba(61,46,38,.55); font-family:'Outfit',sans-serif; font-size:8px; font-weight:700; letter-spacing:.16em; }
.creative-tool-content { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:23px 24px 21px; }
.creative-tool-type { margin:0 0 8px; color:var(--primary); font-family:'Outfit','Noto Sans TC',sans-serif; font-size:10px; font-weight:800; letter-spacing:.15em; }
.creative-tool-content h3 { margin:0; color:var(--secondary); font-size:20px; font-weight:700; line-height:1.4; }
.creative-tool-content > p:not(.creative-tool-type):not(.creative-tool-price) { min-height:54px; margin:9px 0 20px; color:var(--text-muted); font-size:13px; line-height:1.7; }
.creative-tool-price { min-height:26px; margin:0 0 13px; color:var(--primary); font-size:12px; font-weight:800; line-height:1.6; }
.creative-tool-cta { display:flex; width:100%; min-height:46px; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:0 15px; border:1px solid rgba(139,90,43,.18); border-radius:11px; color:var(--secondary); background:rgba(255,255,255,.66); font-size:13px; font-weight:750; text-decoration:none; transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast); }
.creative-tool-cta i { color:var(--primary); transition:transform var(--motion-fast); }
.creative-tool-cta:hover { color:#fff; background:var(--secondary); }
.creative-tool-cta:hover i { color:#fff; transform:translateX(3px); }
.creative-tool-cta:focus-visible { outline:3px solid rgba(212,175,55,.65); outline-offset:3px; }
.creative-hub-footnote { display:flex; align-items:center; justify-content:center; gap:9px; margin:28px 0 0; color:var(--text-muted); font-size:12px; }
.creative-hub-footnote i { color:var(--primary); }
@media (max-width: 900px) { .creative-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .creative-tool-card[data-creative-tool="short-film"] { grid-column:1 / -1; } .creative-tool-card[data-creative-tool="short-film"] .creative-tool-content { width:min(100%,520px); align-self:center; } }
@media (max-width: 700px) { .creative-hub-main { width:calc(100% - 32px); padding-top:42px; padding-bottom:100px; } .creative-hub-intro { margin-bottom:29px; text-align:left; } .creative-hub-intro h2 { font-size:clamp(34px,10vw,46px); } .creative-hub-lead { margin-left:0; font-size:14px; } .creative-tool-grid { grid-template-columns:1fr; gap:14px; } .creative-tool-card[data-creative-tool="short-film"] { grid-column:auto; } .creative-tool-card[data-creative-tool="short-film"] .creative-tool-content { width:100%; } .creative-tool-art { min-height:155px; } .creative-tool-content { padding:19px 19px 17px; } .creative-tool-content > p:not(.creative-tool-type):not(.creative-tool-price) { min-height:0; } .creative-hub-footnote { align-items:flex-start; justify-content:flex-start; line-height:1.6; } }
@media (prefers-reduced-motion: reduce) { .creative-tool-card, .creative-tool-cta, .creative-tool-cta i { transition:none; } .creative-tool-card:hover { transform:none; } }

.creative-tool-art--characters{background:radial-gradient(circle at 50% 35%,#f9d9a8 0 13%,transparent 13.5%),linear-gradient(135deg,#6d4939,#c48c58 58%,#f0d5ae)}.character-art-silhouette{position:absolute;display:block;border-radius:48% 48% 20% 20%;background:linear-gradient(145deg,#f9e9d3,#c17c48);box-shadow:0 12px 22px rgba(45,25,16,.24)}.character-art-silhouette--back{width:105px;height:148px;left:calc(50% - 68px);top:42px;transform:rotate(-10deg);opacity:.78}.character-art-silhouette--front{width:120px;height:164px;left:calc(50% - 34px);top:29px;display:grid;place-items:center;color:#815331;font-size:44px;border:5px solid rgba(255,255,255,.7)}.creative-tool-art--characters .art-caption{color:#fff6e9}