.home-hero { position: relative; isolation: isolate; min-height: 700px; height: min(55.86vw, 84svh); background: linear-gradient(112deg,#020b31 4%,#02104b 55%,#0438b2 100%); color: #fff; overflow: hidden; overflow: clip; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aura { position: absolute; inset: -14%; background: radial-gradient(ellipse 39% 32% at 66% 81%,#087fff85 0%,#055ef04d 27%,#0640c01a 53%,transparent 75%); animation: hero-gradient-drift 18s ease-in-out infinite alternate; transform-origin: 65% 65%; will-change: transform, opacity; }
.hero-horizon { position: absolute; inset: 0; background: radial-gradient(ellipse at 97% 10%,#0649e452,transparent 49%),linear-gradient(0deg,#030d3730,transparent 40%); }
.hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-wave-back { z-index: 1; }
.hero-wave-front { z-index: 3; }
.hero-wave-ogl { pointer-events: none; will-change: transform; }
.hero-wave-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 120%; }
.hero-renderer-ogl svg.hero-wave-front { visibility: hidden; }
.hero-renderer-ogl svg.hero-wave-back { visibility: hidden; }
.hero-renderer-ogl svg.hero-wave-back [data-wave-back] > :not([data-fluid-back-fold]) { display: none; }
.hero-mascot-fullbody { position: absolute; z-index: 2; width: min(46vw,78svh); height: auto; max-width: none !important; right: 6vw; top: 43%; translate: 0 -10%; filter: none; will-change: transform; }
.hero-motion-paused .hero-aura { animation-play-state: paused; }
.hero-renderer-ios .hero-aura { animation: hero-ios-aura 7s ease-in-out infinite alternate; opacity: .72; will-change: opacity; }
.hero-renderer-ios .hero-wave-back { animation: hero-ios-wave-back 7s ease-in-out infinite alternate; transform-origin: 70% 80%; will-change: transform; }
.hero-renderer-ios .hero-wave-front { animation: hero-ios-wave-front 5.5s ease-in-out infinite alternate; transform-origin: 75% 85%; will-change: transform; }
.hero-renderer-ios .hero-mascot-fullbody { animation: hero-ios-mascot 6s ease-in-out infinite alternate; will-change: transform; }
.hero-renderer-ios.hero-motion-paused .hero-aura,
.hero-renderer-ios.hero-motion-paused .hero-wave,
.hero-renderer-ios.hero-motion-paused .hero-mascot-fullbody { animation-play-state: paused; }
.hero-action-icon { display: block; width: 1.12em; height: 1.12em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.hero-actions a:hover .hero-action-icon { transform: translate(2px,-2px); }
@keyframes hero-gradient-drift {
 from { transform: translate3d(-3%,2%,0) scale(1); opacity: .72; }
 to { transform: translate3d(4%,-3%,0) scale(1.08); opacity: 1; }
}
@keyframes hero-ios-aura { from { opacity: .66; } to { opacity: .82; } }
@keyframes hero-ios-wave-back { from { transform: translate3d(-.8%,.5%,0) scale(1); } to { transform: translate3d(.8%,-.5%,0) scale(1.015); } }
@keyframes hero-ios-wave-front { from { transform: translate3d(.5%,.3%,0) scale(1); } to { transform: translate3d(-.6%,-.4%,0) scale(1.012); } }
@keyframes hero-ios-mascot { from { transform: translate3d(0,0,0) rotate(-.25deg); } to { transform: translate3d(0,-7px,0) rotate(.25deg); } }
.hero-copy { position: relative; padding-top: clamp(176px, 14.9vw, 352px); }
.hero-title { font-family: "AISEO Display", "Noto Sans TC", sans-serif; font-weight: 900; line-height: 1.10; letter-spacing: -.06em; }
.hero-title-intro { display: block; font-family: "Noto Sans TC",sans-serif; font-size: clamp(1.8rem, 2.6vw, 3.8rem); line-height: 1.25; letter-spacing: -.035em; font-weight: 500; margin-bottom: .65rem; color: #e2ecff; }
.hero-title-line { display: block; font-size: clamp(4rem, 6.25vw, 10rem); white-space: nowrap; }
.hero-title-growth { display: block; font-size: clamp(4.75rem, 7.8vw, 11.5rem); line-height: 1.06; letter-spacing: -.055em; background: linear-gradient(180deg, #fff 25%, #d5f0ff 65%, #79b9ee); background-clip: text; -webkit-background-clip: text; color: transparent; white-space: nowrap; }
.hero-description { margin-top: clamp(1.5rem, 2.7vw, 3.25rem) !important; font-size: clamp(1.2rem, 1.76vw, 2.25rem); line-height: 1.65; color: #e1ebff; letter-spacing: .01em; }
.hero-actions { display: flex; align-items: center; gap: clamp(1.8rem, 2.6vw, 4rem); margin-top: clamp(1.8rem, 2.7vw, 4rem); }
.hero-actions .home-button { font-size: clamp(1.2rem, 1.55vw, 1.7rem); padding: 1rem 2rem; }
.hero-actions .home-link { color: #fff; font-size: clamp(1.125rem, 1.4vw, 1.5rem); }
.hero-bridge { position: relative; margin-top: -1px; background: #030d37; z-index: 2; --bridge-inset: 0px; }
.hero-bridge-panel { margin-inline: var(--bridge-inset); background: #fff; border-radius: 6vw 6vw 0 0; }
.hero-bridge-inner { padding-block: clamp(3rem, 5.4vw, 6.5rem); padding-top: clamp(1.75rem, 3vw, 3.5rem); display: flex; align-items: center; gap: clamp(1rem, 3.5vw, 4rem); font-size: clamp(1.1rem, 1.6vw, 1.7rem); font-weight: 500; }
.bridge-label { white-space: nowrap; }
.bridge-rule { flex: 1; min-width: 3rem; height: 1px; background: #cdd8ee; }
.bridge-statement { white-space: nowrap; font-size: clamp(1rem, 1.4vw, 1.65rem); text-align: right; }
@media (min-width: 1700px) {
 .hero-copy { padding-top: min(14.9vw, 22svh); }
 .hero-title-line { font-size: min(6.5vw, 11svh); }
 .hero-title-growth { font-size: min(7.65vw, 13svh); }
 .hero-title-intro { font-size: min(2.6vw, 4.6svh); }
 .hero-description { margin-top: 2vw !important; }
}
@media (min-width: 1101px) and (max-height: 900px) {
 .home-hero { min-height: 0; height: calc(100svh - 5.25rem); }
 .hero-copy { padding-top: 152px; }
 .hero-title-line { font-size: min(6.5vw, 10.8svh); }
 .hero-title-growth { font-size: min(7.65vw, 12.8svh); }
 .hero-description { margin-top: 1.6rem !important; font-size: 1.25rem; }
 .hero-actions { margin-top: 1.8rem; }
 .hero-actions .home-button { min-height: 56px; padding-block: .8rem; }
 .hero-mascot-fullbody { width: min(46vw,78svh); top: 43%; }
 .hero-bridge-panel { border-radius: 1.5rem 1.5rem 0 0; }
 .hero-bridge-inner { padding-top: 1.15rem; padding-bottom: 1rem; }
}
@media (min-width: 768px) and (max-width: 1100px) {
 .home-hero { min-height: 700px; height: 81vw; }
 .hero-copy { padding-top: 175px; }
 .hero-title-line { font-size: 7vw; }
 .hero-title-growth { font-size: 8.6vw; }
 .hero-title-intro { font-size: 2.9vw; }
 .hero-description { font-size: 1.25rem; }
 .hero-actions { align-items: start; flex-direction: column; gap: .5rem; }
 .hero-mascot-fullbody { width: 58vw; right: 0; top: 49%; }
 .hero-wave-back { width: 128%; left: -28%; }
 .hero-wave-front { width: 128%; left: -28%; }
 .hero-bridge-inner { gap: 1.4rem; }
 .bridge-statement { white-space: normal; max-width: 24em; }
}
@media (max-width: 767px) {
 .home-hero { height: auto; min-height: 900px; padding-bottom: max(380px,93vw); }
 .hero-copy { padding-top: 158px; }
 .hero-title { letter-spacing: -.06em; }
 .hero-title-intro { font-size: clamp(1.25rem, 4.9vw, 1.7rem); margin-bottom: .75rem; }
 .hero-title-line { font-size: clamp(2.625rem, 10.35vw, 4.5rem); }
 .hero-title-growth { font-size: clamp(3.8rem, 14.8vw, 6.5rem); margin-top: .1rem; }
 .hero-description { font-size: 1.125rem; margin-top: 1.6rem !important; max-width: 23em; }
 .hero-description br { display: none; }
 .hero-actions { margin-top: 1.75rem; gap: .8rem; align-items: start; flex-direction: column; }
 .hero-actions .home-button { min-height: 56px; padding: .9rem 1.5rem; font-size: 1.25rem; }
 .hero-actions .home-link { font-size: 1rem; min-height: 44px; }
 .hero-mascot-fullbody { width: 114%; right: -8%; top: auto; bottom: -65px; }
 .hero-wave-back { width: 215%; height: 60%; left: -115%; top: auto; bottom: 0; }
 .hero-wave-front { width: 190%; height: 58%; left: -90%; top: auto; bottom: 0; }
 .hero-aura { background: radial-gradient(ellipse at 75% 77%,#065dec 0%,#063ec587 27%,transparent 64%); }
 .hero-bridge-panel { border-radius: 36px 36px 0 0; }
 .hero-bridge-inner { padding-block: 2.5rem; padding-top: 1.5rem; gap: .75rem; }
 .bridge-label { font-size: 1rem; white-space: normal; flex: 0 0 5em; }
 .bridge-rule { min-width: 1rem; }
 .bridge-statement { white-space: normal; font-size: .875rem; flex: 0 1 12em; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
 .hero-bridge-panel { margin-inline: 0; }
 .hero-wave-ogl, .hero-renderer-ogl svg.hero-wave-back { will-change: auto; }
 .hero-mascot-fullbody { will-change: auto; }
 .hero-aura { animation: none; transform: none; opacity: .85; will-change: auto; }
}