/* Navy and gold design. Shared by both locale pages. */
.header-shell{position: fixed; z-index: 50; left: 0px; right: 0px; top: 20px; padding: 0px 24px; transition: top 0.45s, padding 0.45s;}
.nav-shell{margin: 0px auto; max-width: 1180px; padding: 12px 18px; border-radius: 999px; background: rgb(255, 255, 255); backdrop-filter: none; box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 60px; transition: max-width 0.45s, border-radius 0.45s, background 0.45s, padding 0.45s, box-shadow 0.45s;}
.header-inner{max-width: 1144px; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.brand-link{display: flex; align-items: center; text-decoration: none; flex: 0 0 auto;}
.brand-image{width: 160px; height: auto; display: block; transform: translateY(-3px);}
@media(min-width:1200px){html[lang="zh-Hant"] .header-logo{transform:translateY(-8px)}}
.nav-list-layout{align-items: center; gap: 30px; font-size: 15px; font-weight: 600;}
.nav-item{color: rgb(10, 26, 74); text-decoration: none; transition: color 0.3s;}
.header-actions{display: flex; align-items: center; gap: 10px;}
.header-cta{--fill:#FFFFFF;--fill-text:#0A1A4A;--fill-border:#D9B872;background:#D9B872;color:#0A1A4A;display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0px 44px 0px 22px; border-radius: 10px; border: 1px solid #D9B872; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap;}
.menu-toggle{width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(10, 26, 74, 0.25); background: transparent; color: rgb(10, 26, 74); align-items: center; justify-content: center; cursor: pointer;}
.hero-section{position: relative; background: radial-gradient(120% 90% at 0% 0%, rgb(13, 26, 68) 0%, rgb(7, 15, 42) 45%, rgb(5, 11, 30) 100%); padding: 160px 24px 72px; overflow: hidden;}
.section-decoration{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none;}
.social-rail-layout{position: absolute; z-index: 2; left: 40px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 12px;}
.social-line-leading{width: 1px; height: 48px; background: linear-gradient(transparent, rgb(217, 184, 114)); opacity: 1; transition: opacity 0.45s;}
.social-icons-rail{visibility: visible; display: flex; flex-direction: column; gap: 12px;}
.social-icon-link{width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); border-radius: 50%;}
.social-line-trailing{width: 1px; height: 48px; background: linear-gradient(rgb(217, 184, 114), transparent); opacity: 1; transition: opacity 0.45s;}
.hero-container{position: relative; z-index: 1; max-width: 1180px; margin: 0px auto;}
.hero-copy-layout{display: flex; align-items: center; gap: 32px; min-width: 0px;}
.hero-copy{flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 26px;}
.section-eyebrow{display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(217, 184, 114);}
.eyebrow-label{min-width:0;}
.eyebrow-line-leading,.eyebrow-line-trailing{flex:0 0 40px;width:40px;height:1px;}
.eyebrow-line-leading{background:linear-gradient(to right,transparent,#D9B872);}
.eyebrow-line-trailing{background:linear-gradient(to right,#D9B872,transparent);}
.hero-title{margin: 0px; font-family: Sora, "Noto Sans TC", sans-serif; font-weight: 600; font-size: clamp(46px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.02em; color: rgb(255, 255, 255);}
.text-gold{color: rgb(217, 184, 114);}
.hero-description{margin: 0px; max-width: 560px; font-size: 18px; line-height: 1.75; color: rgb(255, 255, 255);}
.hero-actions{display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px;}
.hero-primary-link{--fill:#FFFFFF;--fill-text:#0A1330;background:#D9B872;color:#0A1330;display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0px 54px 0px 28px; border-radius: 10px; border: 1px solid #D9B872; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: rgba(217, 184, 114, 0.25) 0px 12px 30px;}
.hero-secondary-link{--fill:#FFFFFF;--fill-text:#0A1330;background:transparent;color:#FFFFFF;display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0px 54px 0px 28px; border-radius: 10px; border: 1px solid rgba(255,255,255,.6); font-weight: 700; font-size: 16px; text-decoration: none;}
.social-side-layout{flex: 0 0 auto; flex-direction: column; align-items: center; gap: 10px;}
.social-side-line-leading{width: 1px; height: 40px; background: linear-gradient(transparent, rgb(217, 184, 114)); opacity: 1; transition: opacity 0.45s;}
.social-icons-side{visibility: visible; display: flex; flex-direction: column; gap: 10px;}
.social-side-line-trailing{width: 1px; height: 40px; background: linear-gradient(rgb(217, 184, 114), transparent); opacity: 1; transition: opacity 0.45s;}
.social-mid-layout{align-items: center; gap: 12px;}
.social-label{font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(217, 184, 114); opacity: 1; transition: opacity 0.45s;}
.social-mid-line{width: 28px; height: 1px; background: rgb(217, 184, 114); opacity: 1; transition: opacity 0.45s;}
.social-icons-mid{visibility: visible; display: flex; gap: 12px;}
.hero-visual-layout{position: relative; min-width: 0px; display: flex; justify-content: center;}
.hero-media{position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1;}
.hero-media-orbit{position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(217, 184, 114, 0.4);}
.hero-media-mask{position: absolute; inset: 0px; border-radius: 50%; overflow: hidden; background: rgb(8, 19, 53); box-shadow: rgba(20, 50, 160, 0.45) 0px 40px 120px, rgba(217, 184, 114, 0.25) 0px 0px 0px 1px inset;}
.hero-video{width: 100%; height: 100%; object-fit: cover; display: block;}
.hero-media-shade{position: absolute; inset: 0px; border-radius: 50%; box-shadow: rgba(5, 11, 30, 0.7) 0px 0px 70px 20px inset; pointer-events: none;}
.hero-video-toggle{position: absolute; left: -6px; bottom: 14%; width: 88px; height: 88px; border-radius: 50%; border: 0px; background: rgb(217, 184, 114); color: rgb(10, 19, 48); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: rgba(217, 184, 114, 0.16) 0px 0px 0px 12px, rgba(0, 0, 0, 0.45) 0px 20px 50px;}
.hero-caption{position: absolute; right: 0px; top: 6%; display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; border-radius: 16px; background: rgba(8, 18, 48, 0.9); border: 1px solid rgba(217, 184, 114, 0.45); box-shadow: rgba(0, 0, 0, 0.35) 0px 18px 40px;}
.hero-caption-number{font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: rgb(217, 184, 114);}
.hero-caption-text{font-size: 14px; font-weight: 700; color: rgb(255, 255, 255);}
.social-bottom-layout{margin-top: 56px; align-items: center; gap: 14px;}
.social-bottom-line{width: 40px; height: 1px; background: rgb(217, 184, 114); opacity: 1; transition: opacity 0.45s;}
.social-icons-bottom{visibility: visible; display: flex; gap: 14px;}
.platform-section{position: relative; padding: 120px 24px 150px; background: linear-gradient(rgb(5, 11, 30) 0%, rgb(10, 26, 74) 12%, rgb(12, 31, 87) 52%, rgb(10, 26, 74) 100%); overflow: hidden;}
.platform-dot-grid{position: absolute; inset: 0px; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.6px); background-size: 28px 28px; mask-image: linear-gradient(transparent 0%, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent 100%); pointer-events: none;}
.platform-glow-top{position: absolute; right: -160px; top: 360px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 110, 255, 0.35), transparent 65%); pointer-events: none;}
.platform-glow-middle{position: absolute; left: -200px; top: 1150px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 184, 114, 0.18), transparent 65%); pointer-events: none;}
.platform-glow-bottom{position: absolute; right: -180px; bottom: 120px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 110, 255, 0.3), transparent 65%); pointer-events: none;}
.platform-molecule-left{position: absolute; left: 4%; top: 230px; width: 120px; height: 120px; pointer-events: none;}
.platform-molecule-right{position: absolute; right: 6%; top: 1060px; width: 160px; height: 120px; pointer-events: none;}
.platform-header{position: relative; max-width: 1180px; margin: 0px auto 120px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;}
.platform-heading-group{flex: 1 1 560px; min-width: 0px; display: flex; flex-direction: column; gap: 18px;}
.platform-title{margin: 0px; font-family: Sora, "Noto Sans TC", sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.25; letter-spacing: -0.01em; color: rgb(255, 255, 255);}
.platform-explore-link{--fill:#FFFFFF;--fill-text:#0A1330;background:transparent;color:#FFFFFF;display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0px 54px 0px 28px; border-radius: 10px; border: 1px solid rgba(255,255,255,.6); font-weight: 700; font-size: 15px; text-decoration: none;}
.platform-row{position: relative; max-width: 1180px; margin: 0px auto; display: flex; flex-wrap: wrap; align-items: center; gap: 64px;}
.platform-copy{position: relative; flex: 1 1 480px; min-width: 0px; display: flex; flex-direction: column; gap: 22px;}
.platform-watermark{position: absolute; left: -24px; top: -110px; font-family: Sora, sans-serif; font-weight: 700; font-size: 220px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(217, 184, 114, 0.28); pointer-events: none;}
.platform-row-number{position: relative; display: flex; align-items: baseline; gap: 10px; font-family: Sora, sans-serif; color: rgb(217, 184, 114);}
.platform-number-current{font-size: 40px; font-weight: 700; line-height: 1;}
.platform-number-total{font-size: 15px; font-weight: 700; color: rgb(255, 255, 255);}
.platform-row-title{position: relative; margin: 0px; font-family: Sora, "Noto Sans TC", sans-serif; font-weight: 600; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.15; letter-spacing: -0.01em; color: rgb(255, 255, 255);}
.platform-row-divider{width: 64px; height: 2px; background: rgb(217, 184, 114);}
.platform-row-description{margin: 0px; max-width: 520px; font-size: 18px; line-height: 1.75; color: rgb(255, 255, 255);}
.platform-row-actions{padding-top: 8px;}
.platform-row-link{--fill:#FFFFFF;--fill-text:#FFFFFF;background:transparent;color:#0A1A4A;display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0px 54px 0px 28px; border-radius: 10px; border: 1px solid #FFFFFF; font-weight: 800; font-size: 15px; text-decoration: none;}
.platform-visual{flex: 1 1 420px; min-width: 0px; display: flex; justify-content: center;}
.platform-artwork{position: relative; width: 100%; max-width: 500px; aspect-ratio: 1 / 1;}
.platform-artwork-lines{position: absolute; left: -6%; bottom: -8%; width: 46%; height: 46%;}
.platform-artwork-orbit{position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(217, 184, 114, 0.35);}
.platform-artwork-mask{position: absolute; inset: 0px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 35%, rgb(30, 63, 150) 0%, rgb(15, 36, 98) 45%, rgb(6, 16, 46) 100%); box-shadow: rgba(0, 0, 0, 0.45) 0px 40px 100px, rgba(217, 184, 114, 0.3) 0px 0px 0px 1px inset;}
.platform-image-rna{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.platform-artwork-shade{position: absolute; inset: 0px; border-radius: 50%; box-shadow: rgba(6, 16, 46, 0.85) 0px 0px 60px 20px inset; pointer-events: none;}
.platform-icon-left{position: absolute; left: -4%; top: 6%; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgb(58, 99, 214) 0%, rgb(19, 41, 110) 55%, rgb(7, 18, 58) 100%); border: 1.5px solid rgba(217, 184, 114, 0.75); display: flex; align-items: center; justify-content: center; box-shadow: rgba(217, 184, 114, 0.12) 0px 0px 0px 8px, rgba(0, 0, 0, 0.5) 0px 24px 50px, rgba(255, 255, 255, 0.25) 0px 3px 12px inset, rgba(0, 0, 0, 0.45) 0px -12px 24px inset;}
.platform-row-reverse{position: relative; max-width: 1180px; margin: 150px auto 0px; display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 64px;}
.platform-artwork-lines-reverse{position: absolute; right: -6%; bottom: -8%; width: 46%; height: 46%; transform: scaleX(-1);}
.platform-artwork-orbit-blue{position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(160, 185, 255, 0.35);}
.platform-artwork-mask-reverse{position: absolute; inset: 0px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 60% 40%, rgb(30, 63, 150) 0%, rgb(15, 36, 98) 45%, rgb(6, 16, 46) 100%); box-shadow: rgba(0, 0, 0, 0.45) 0px 40px 100px, rgba(217, 184, 114, 0.3) 0px 0px 0px 1px inset;}
.platform-image-delivery{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.platform-icon-right{position: absolute; right: -4%; top: 6%; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgb(58, 99, 214) 0%, rgb(19, 41, 110) 55%, rgb(7, 18, 58) 100%); border: 1.5px solid rgba(217, 184, 114, 0.75); display: flex; align-items: center; justify-content: center; box-shadow: rgba(217, 184, 114, 0.12) 0px 0px 0px 8px, rgba(0, 0, 0, 0.5) 0px 24px 50px, rgba(255, 255, 255, 0.25) 0px 3px 12px inset, rgba(0, 0, 0, 0.45) 0px -12px 24px inset;}
.platform-row-spaced{position: relative; max-width: 1180px; margin: 150px auto 0px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px;}
.platform-image-aoc{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.contact-section{position: relative; padding: 120px 24px; background: rgb(10, 26, 74); overflow: hidden;}
.contact-backdrop-layout{position: absolute; inset: 0px; background: radial-gradient(70% 90%, rgb(7, 18, 51) 0%, rgb(4, 9, 25) 70%); clip-path: circle(0% at 50% 50%); transition: clip-path 1.17s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none;}
.contact-panel{position: relative; max-width: 1180px; margin: 0px auto; border-radius: 32px; padding: 72px 48px; overflow: hidden; background: radial-gradient(90% 140% at 100% 0%, rgba(22, 48, 122, 0.55) 0%, rgba(11, 26, 69, 0.42) 45%, rgba(7, 18, 51, 0.35) 100%); backdrop-filter: blur(16px) saturate(130%); border: 1px solid rgba(217, 184, 114, 0.4); box-shadow: rgba(0, 0, 0, 0.35) 0px 40px 100px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px;}
.contact-decoration{position: absolute; right: -80px; top: -80px; width: 400px; height: 400px; filter: blur(3px); pointer-events: none;}
.contact-image{position: absolute; left: -100px; bottom: -110px; width: 760px; height: auto;filter: blur(20px); pointer-events: none;}
.contact-copy{position: relative; flex: 1 1 440px; min-width: 0px; display: flex; flex-direction: column; gap: 16px;}
.contact-eyebrow{font-size: 14px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(217, 184, 114);}
.contact-title{margin: 0px; font-family: Sora, "Noto Sans TC", sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; color: rgb(255, 255, 255);}
.contact-form-panel{position: relative; flex: 1 1 380px; min-width: 0px; max-width: 480px; padding: 32px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(217, 184, 114, 0.35); backdrop-filter: blur(6px);}
.contact-form{display: flex; flex-direction: column; gap: 18px;}
.contact-field{display: flex; flex-direction: column; gap: 8px;}
.contact-label{font-size: 14px; font-weight: 800; color: rgb(255, 255, 255);}
.contact-input{height: 52px; padding: 0px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(4, 9, 25, 0.6); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px;}
.contact-form-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px;}
.contact-form-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:56px;padding:0 12px;border-radius:10px;font-family:inherit;font-weight:800;font-size:16px;white-space:nowrap;cursor:pointer;}
.contact-submit{--fill:#FFFFFF;--fill-text:#0A1330;background:#D9B872;color:#0A1330;border:1px solid #D9B872;}
.contact-clear{--fill:#FFFFFF;--fill-text:#0A1330;background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.6);}
.contact-form-note{margin: 0px; font-size: 13px; line-height: 1.6; color: rgb(255, 255, 255);}
.footer-section{--footer-top-space:64px;padding:var(--footer-top-space) 24px 40px; background: rgb(4, 9, 25); border-top: 1px solid rgba(217, 184, 114, 0.25);}
.footer-main{max-width: 1180px; margin: 0px auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px;}
.footer-contact-layout{flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px;}
.footer-logo{width: 250px; height: auto; display: block; align-self: flex-start;}
.footer-tagline{margin: 0px; font-size: 15px; font-weight: 700; color: rgb(255, 255, 255);}
.footer-details{display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; color: rgb(255, 255, 255);}
.footer-detail-label{font-weight: 800; color: rgb(217, 184, 114);}
.footer-links{display: flex; flex-wrap: wrap; gap: 64px; font-size: 15px;}
.footer-column{display: flex; flex-direction: column; gap: 12px;}
.footer-column-title{font-weight: 800; color: rgb(217, 184, 114); letter-spacing: 0.1em; font-size: 13px; text-transform: uppercase;}
.footer-link{color: rgb(255, 255, 255); text-decoration: none; font-weight: 600;}
.footer-link[aria-current="page"]{position:relative;color:#D9B872}
.footer-link[aria-current="page"]::before{content:"";position:absolute;left:-15px;top:50%;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);pointer-events:none}
.footer-bottom{max-width: 1180px; margin: 48px auto 0px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: rgb(255, 255, 255);}
.back-top-layout{position: fixed; z-index: 60; right: 30px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(217, 184, 114, 0.6); background: rgba(8, 18, 48, 0.92); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 30px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.4s, transform 0.4s, visibility 0.4s, scale 0.3s;}
.social-fab-layout{position:fixed;z-index:60;right:24px;bottom:88px;display:flex;flex-direction:column;align-items:center;gap:14px}
.social-fab-link-facebook{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); background: rgba(8, 18, 48, 0.92); border: 1px solid rgba(217, 184, 114, 0.5); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 30px; opacity: 1; transform: translateY(0px) scale(1); pointer-events: auto; transition: opacity 0.3s 0.15s, transform 0.35s 0.15s, scale 0.3s;}
.social-fab-link-youtube{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); background: rgba(8, 18, 48, 0.92); border: 1px solid rgba(217, 184, 114, 0.5); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 30px; opacity: 1; transform: translateY(0px) scale(1); pointer-events: auto; transition: opacity 0.3s 0.1s, transform 0.35s 0.1s, scale 0.3s;}
.social-fab-link-linkedin{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); background: rgba(8, 18, 48, 0.92); border: 1px solid rgba(217, 184, 114, 0.5); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 30px; opacity: 1; transform: translateY(0px) scale(1); pointer-events: auto; transition: opacity 0.3s 0.05s, transform 0.35s 0.05s, scale 0.3s;}
.social-fab-link-instagram{width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); background: rgba(8, 18, 48, 0.92); border: 1px solid rgba(217, 184, 114, 0.5); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 30px; opacity: 1; transform: translateY(0px) scale(1); pointer-events: auto; transition: opacity 0.3s, transform 0.35s, scale 0.3s;}
.social-fab-toggle{width: 60px; height: 60px; border-radius: 50%; border: 0px; background: rgb(217, 184, 114); color: rgb(10, 19, 48); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: rgba(217, 184, 114, 0.18) 0px 0px 0px 8px, rgba(0, 0, 0, 0.45) 0px 16px 40px;}

body{margin:0;background:#070F26;position:relative}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.6px);background-size:28px 28px;}
a{color:#D9B872}a:hover{color:#F0D79E}
a[href^="mailto:"]{color:inherit;text-decoration:underline}
a[href^="mailto:"]:hover,a[href^="mailto:"]:focus-visible{color:#D9B872}
.navlinks{display:flex}
.menu-btn{display:none}
.navlinks a:hover,.mobile-menu a:hover,.foot a:hover{color:#D9B872 !important}
/* Lead form fields */
.field::placeholder{color:#FFFFFF}
.field:focus{outline:none;border-color:#D9B872 !important;box-shadow:0 0 0 3px rgba(217,184,114,.25)}
/* Icon buttons: hover zoom */
.icon-btn{transition-property:scale,opacity,transform;transition-duration:.3s,.3s,.35s;transition-timing-function:ease}
.icon-btn:hover,.icon-btn:focus-visible{scale:1.15}
/* Button: diagonal fill expanding from the middle + rotating arrow */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .5s ease-in-out,border-color .5s ease-in-out}
.btn::after{content:"";position:absolute;left:-1%;bottom:0;width:102%;height:100%;background-color:var(--fill);z-index:-1;transform:skewY(9.3deg) scaleY(0);transform-origin:center;transition:transform .5s ease-in-out}
.btn:hover::after,.btn:focus-visible::after{transform:skewY(9.3deg) scaleY(3.2)}
.btn:hover,.btn:focus-visible{color:var(--fill-text) !important;border-color:var(--fill-border,var(--fill)) !important}
.btn::before{content:"";position:absolute;top:50%;right:20px;width:18px;height:18px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5L17.5 6.5M8.5 6.5h9v9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5L17.5 6.5M8.5 6.5h9v9'/%3E%3C/svg%3E") center/contain no-repeat;transform:translateY(-50%);transition:transform .4s ease-in-out;z-index:1;pointer-events:none}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(-50%) rotate(45deg)}
.contact-form-button.btn::before{content:none}
/* Reveal the section background while preserving the platform buttons' white border. */
.platform-row-link.btn::after{transform:skewY(9.3deg) scaleY(3.2);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,0 50%,100% 50%,100% 50%,0 50%,0 0);transition:clip-path .5s ease-in-out;}
.platform-row-link.btn:hover::after,.platform-row-link.btn:focus-visible::after{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,0 0,100% 0,100% 100%,0 100%,0 0);}
.header-cta.btn{transition:color .5s ease-in-out,border-color .5s ease-in-out,background-color .45s ease;}
.header-cta.btn:hover:not(:focus-visible){outline:1px solid #D9B872;outline-offset:-1px;}
.navcta.btn::before{right:16px;width:15px;height:15px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.soc-rail{display:none}
.soc-bottom{display:flex}
.soc-side{display:none}
.soc-mid{display:none}
@media (min-width:1360px){.soc-rail{display:flex}.soc-bottom{display:none}}
@media (max-width:991px){.navlinks{display:none}.menu-btn{display:flex}}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .soc-bottom{display:none}
  .soc-side{display:flex}
  .hero-visual{max-width:560px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .section-eyebrow{gap:10px;}
  .eyebrow-line-leading,.eyebrow-line-trailing{flex-basis:28px;width:28px;}
  .soc-side{display:none}
  .soc-mid{display:flex}
  .navcta{display:none !important}
  .bignum{display:none}
}

/* Native page interaction states. */
:root{--hero-background:radial-gradient(120% 90% at 0% 0%,#0D1A44 0%,#070F2A 45%,#050B1E 100%)}
html{scroll-behavior:smooth;scroll-padding-top:100px}
[hidden]{display:none !important}
.header-scrolled .site-header{top:0;padding:0}
.header-scrolled .header-nav{max-width:100%;border-radius:0;padding:14px 18px;background:rgba(5,11,30,.32);backdrop-filter:blur(5px) saturate(140%);box-shadow:0 1px 0 rgba(217,184,114,.35)}
.header-scrolled .navlinks a,.header-scrolled .menu-btn,.header-scrolled .mobile-menu a{color:#FFF}
.header-scrolled .header-cta{background:transparent;color:#FFFFFF;border-color:#D9B872;}
.language-switch{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:4px;border:1px solid rgba(10,26,74,.25);border-radius:999px;color:#0A1A4A;text-decoration:none;transition:color .3s,border-color .3s}
.language-option{display:flex;align-items:center;justify-content:center;width:58px;height:36px;border-radius:999px;font-size:13px;font-weight:800;line-height:1;text-align:center}
.language-option.is-current{background:#D9B872;color:#0A1330}
.language-switch:hover{color:#0A1A4A;border-color:#D9B872}
.header-scrolled .language-switch{color:#F3F6FF;border-color:rgba(243,246,255,.5)}
.header-scrolled .menu-btn{border-color:rgba(243,246,255,.5)}
.header-scrolled .language-switch:hover{color:#FFF;border-color:#F3F6FF}
.social-fab{bottom:84px;gap:12px;opacity:0;visibility:hidden;pointer-events:none}
.social-collapsed .social-fab,.social-fab--inner{opacity:1;visibility:visible;pointer-events:auto}
.social-fab a:nth-child(1){--social-order:3}
.social-fab a:nth-child(2){--social-order:2}
.social-fab a:nth-child(3){--social-order:1}
.social-fab a:nth-child(4){--social-order:0}
.social-fab a{opacity:0;transform:translateY(calc(24px + var(--social-order)*8px)) scale(.6);pointer-events:none;visibility:hidden;transition:opacity .3s ease,transform .35s ease,visibility 0s linear .35s,scale .3s ease}
.social-fab.is-open a{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;transition-delay:calc(var(--social-order)*.05s),calc(var(--social-order)*.05s),0s,0s}
.social-fab button{position:relative}
.social-fab button svg{position:absolute;transition:opacity .3s ease,transform .35s ease}
.fab-share{opacity:1;transform:rotate(0) scale(1)}
.fab-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.social-fab.is-open .fab-share{opacity:0;transform:rotate(90deg) scale(.6)}
.social-fab.is-open .fab-close{opacity:1;transform:rotate(0) scale(1)}
.social-collapsed .social-inline,.social-flying .social-inline{visibility:hidden;opacity:0}
:is(.soc-rail,.soc-side,.soc-mid,.soc-bottom){opacity:1;transition:opacity .45s ease .3s}
.social-collapsed :is(.soc-rail,.soc-side,.soc-mid,.soc-bottom){opacity:0;pointer-events:none;transition-delay:0s}
.social-flying :is(.soc-rail,.soc-side,.soc-mid,.soc-bottom){pointer-events:none}
.social-flying .social-fab{opacity:0;visibility:hidden;pointer-events:none}
.social-flight{z-index:61;box-sizing:border-box;border-radius:999px;background:rgba(8,18,48,0);border:1px solid rgba(217,184,114,0);box-shadow:0 0 0 0 rgba(0,0,0,0);pointer-events:none}
.social-flight.is-moving{transition:left .65s cubic-bezier(.65,0,.35,1),top .65s cubic-bezier(.65,0,.35,1),width .65s cubic-bezier(.65,0,.35,1),height .65s cubic-bezier(.65,0,.35,1),background .5s ease,border-color .5s ease,box-shadow .5s ease}
.social-flight.is-at-fab{background:#D9B872;border-color:rgba(217,184,114,.6);box-shadow:0 0 0 8px rgba(217,184,114,.18),0 16px 40px rgba(0,0,0,.45)}
.social-flight.is-out{transition-delay:0s,0s,0s,0s,.2s,.2s,.2s}
.social-flight__icons{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;opacity:1;transform:scale(1)}
.social-flight__icons span{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:#FFF}
.social-flight__icons svg{width:20px;height:20px;flex:none}
.social-flight__share{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0A1330;opacity:0}
.social-flight.is-at-fab .social-flight__icons{opacity:0;transform:scale(.35)}
.social-flight.is-at-fab .social-flight__share{opacity:1}
.social-flight.is-moving .social-flight__icons{transition:opacity .35s ease .3s,transform .65s cubic-bezier(.65,0,.35,1)}
.social-flight.is-moving.is-out .social-flight__icons{transition-delay:0s,0s}
.social-flight.is-moving .social-flight__share{transition:opacity .35s ease}
.social-flight.is-moving.is-out .social-flight__share{transition-delay:.35s}
.social-collapsed .back-top{opacity:1;visibility:visible;transform:translateY(0)}
.footer-contact{box-sizing:border-box;flex:0 1 auto;align-self:flex-start;max-width:max-content;margin:calc(-1*var(--footer-top-space)) 24px 0 0;padding:var(--footer-top-space) 32px 68px;border-radius:0;background:linear-gradient(180deg,#0A1A4A 0%,#0C1F57 52%,#0A1A4A 100%);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 36px),0 100%)}
.footer-contact img{max-width:100%;height:auto}
#contact.is-visible .contact-backdrop{clip-path:circle(150% at 50% 50%)}
.form-status{font-size:14px;line-height:1.6;color:#F0D79E;margin:0}
a:focus-visible,button:focus-visible{outline:2px solid #D9B872;outline-offset:4px}
@media(min-width:992px){.mobile-menu{display:none}}
@media(max-width:820px){.foot>.footer-main,.foot>.footer-bottom{justify-content:center}.footer-contact{margin-right:0}.foot .footer-links{max-width:100%;justify-content:center;text-align:left}}
@media(max-width:640px){.foot .footer-links{max-width:calc(100% - 80px)}.footer-column>.footer-link{align-self:flex-start}.foot>.footer-bottom{flex-direction:column;align-items:center}.footer-bottom>span:first-child{max-width:calc(100% - 120px)}}
@media(max-width:360px){.foot .footer-links{gap:32px}}
@media(max-width:640px){[data-ref=ctaRef]{padding:40px 20px;gap:32px}[data-ref=ctaRef] form{min-width:0}.header-logo{max-width:104px;height:auto;transform:translateY(-2px)}.header-nav{padding:10px 12px}.site-header{padding:0 12px}#top{padding:140px 20px 60px}#platform{padding:80px 20px 100px}#contact{padding:80px 20px}.social-fab{right:20px}.back-top{right:26px}.footer-contact{min-width:0;max-width:100%;margin:calc(-1*var(--footer-top-space)) 0 8px;padding:24px 24px 60px}.footer-contact .footer-details{grid-template-columns:auto minmax(0,1fr);overflow-wrap:anywhere}}
@media(max-width:360px){.header-logo{max-width:88px}.header-nav>.header-inner{gap:8px}.header-nav .header-actions{gap:8px}.language-option{width:46px}.menu-btn{width:40px;height:40px}.contact-form-panel{padding:24px}.contact-form-button{padding:0 6px;font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}}
/* Shared motion layer (assets/js/motion.js): reveal-up fade/slide-in-once and image-reveal clip wrappers. */
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal-up.is-in{opacity:1;transform:translateY(0)}
.motion-img-wrap{position:relative;display:block;overflow:hidden;will-change:clip-path}
.motion-img-wrap img{display:block;width:100%;height:100%;object-fit:cover}
[data-count-to]{display:inline-block;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.reveal-up{opacity:1;transform:none;transition:none}}

/* ======================================================================
   2026-10-21 update: typography unification, card interactivity,
   inner-page decoration, arrow-hover affordance.
   ====================================================================== */

/* Unify the whole site on Sora (falls back to Noto Sans TC for Chinese,
   then system sans-serif). Previously only heading classes set a
   font-family explicitly and body copy fell back to the browser default,
   producing an inconsistent mix of typefaces. */
body{font-family:Sora,"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;}

/* Keep cards stationary; reveal background images with the button's diagonal wipe. */
.i-card{transition:border-color .35s ease;}
.i-card:hover{border-color:#D9B872;}
.i-card-icon,.i-card h3,.i-card p,.i-num{position:relative;z-index:2;}
.i-card:has(>img)>img{opacity:1;transform:none;}
.i-card:has(>img)::after{content:"";position:absolute;inset:0;background:linear-gradient(195deg,rgba(10,26,74,.08) 0%,rgba(6,13,38,.6) 55%,rgba(5,11,30,.96) 100%);z-index:1;pointer-events:none;}
.i-card:has(>img)>img,.i-card:has(>img)::after{clip-path:polygon(0 42%,100% 58%,100% 58%,0 42%);transition:clip-path .5s ease-in-out;}
.i-card:has(>img):hover>img,.i-card:has(>img):hover::after{clip-path:polygon(0 -20%,100% -4%,100% 120%,0 104%);}
.i-card:hover .news-readmore{color:#D9B872;}

/* Arrow affordance: any "Learn more"-style link rotates its arrow on
   hover, matching the homepage .btn pattern. Arrow is CSS-generated so
   markup no longer needs a literal "→" character. */
.news-readmore{position:relative;display:inline-flex;align-items:center;gap:6px;}
.news-readmore::after{content:"→";display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.news-readmore:hover::after,a:hover>.news-readmore::after{transform:rotate(45deg);}
.i-card:hover .news-readmore::after{transform:rotate(45deg);}

/* Inner-page dark sections: lower-contrast gradient (was pure
   #050B1E -> #0A1A4A -> #050B1E, a hard dark/light/dark swing) plus the
   same soft glow-blob + dot-grid treatment the homepage platform section
   uses, so inner pages read as part of the same system instead of flat
   gradient panels. */
.inner-section{position:relative;padding:88px 24px;overflow:hidden;background:transparent;}
.inner-section.alt{background:transparent;}
.inner-section::after{content:"";position:absolute;right:-160px;top:-110px;width:580px;height:580px;border-radius:50%;background:radial-gradient(circle,rgba(70,110,255,.2),transparent 68%);pointer-events:none;}
.inner-section.alt::after{right:auto;left:-160px;top:auto;bottom:-130px;background:radial-gradient(circle,rgba(217,184,114,.16),transparent 68%);}
.inner-container{position:relative;z-index:1;}

/* Investors / Connect-style link arrows: ensure the literal container
   rotates even where the arrow sits inside a plain <a>. */
a.news-readmore,.card-link{display:inline-flex;}

/* Secondary intro paragraph below a trimmed hero banner headline+lede
   (used where the full description is too long for the banner itself). */
.page-intro{margin:8px 0 0;max-width:680px;font-size:18px;line-height:1.75;color:#FFFFFF;}

/* ======================================================================
   2026-11-05 mobile menu: animated expand, state-aware surface.
   - Top state: the white pill relaxes into a rounded card.
   - Scrolled state: the translucent bar deepens into a solid navy panel.
   Height is animated by JS (0 -> scrollHeight -> auto) in main.js / inner.js.
   ====================================================================== */
@media(max-width:991px){
  .nav-shell{border-radius:34px}
  .site-header.menu-open .header-nav{border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .header-scrolled .site-header.menu-open .header-nav{border-radius:0;background:rgba(5,11,30,.94);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 rgba(217,184,114,.35),0 24px 60px rgba(0,0,0,.5)}
}
.mobile-menu{display:grid;gap:2px;height:0;overflow:hidden;transition:height .45s cubic-bezier(.65,0,.35,1)}
.mobile-menu::before{content:"";display:block;height:1px;margin:12px 4px 6px;background:rgba(10,26,74,.12);transition:background .45s}
.mobile-menu::after{content:"";display:block;height:4px}
.header-scrolled .mobile-menu::before{background:rgba(217,184,114,.3)}
.mobile-menu a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;color:#0A1A4A;font-weight:700;font-size:16px;text-decoration:none;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s ease,color .3s,background-color .3s}
.header-scrolled .mobile-menu a{color:#FFF}
.mobile-menu a:hover,.mobile-menu a:focus-visible{background:rgba(10,26,74,.06)}
.header-scrolled .mobile-menu a:hover,.header-scrolled .mobile-menu a:focus-visible{background:rgba(255,255,255,.06)}
.menu-open .mobile-menu a{opacity:1;transform:none;transition-delay:calc(.12s + var(--menu-i,0)*.04s),calc(.12s + var(--menu-i,0)*.04s),0s,0s}
.menu-toggle svg{transition:transform .45s cubic-bezier(.65,0,.35,1)}
.menu-open .menu-toggle svg{transform:rotate(180deg)}

/* Shared PHP frontend header spacing and logo alignment (2026-11-05). */
html .site-header img.header-logo{transform:translateY(-4px)}
@media(min-width:1200px){html[lang="en"] .nav-list-layout{gap:18px;font-size:14px}html[lang="en"] .header-inner{gap:14px}html[lang="en"] .brand-image{width:144px}}

/* 2026-11-11 Desktop header from 992px: between 992-1199px the nav, language
   switch and CTA stay visible with compact spacing instead of the mobile menu.
   Nav gaps scale fluidly up to the full desktop values at 1200px. */
.nav-item{white-space:nowrap}
@media(min-width:992px) and (max-width:1199px){
  .header-shell{padding:0 16px}
  .header-nav{padding:10px 14px}
  .header-inner{gap:14px}
  .brand-image{width:136px}
  .nav-list-layout{gap:clamp(14px,calc(14px + (100vw - 992px)*.077),30px)}
  .header-actions{gap:8px}
  .language-option{width:48px;height:34px;font-size:12px}
  .header-cta{height:40px;padding:0 36px 0 16px;font-size:14px}
  .navcta.btn::before{right:14px;width:13px;height:13px}
  html[lang="en"] .nav-list-layout{gap:clamp(10px,calc(10px + (100vw - 992px)*.039),18px);font-size:13px}
  html[lang="en"] .brand-image{width:116px}
}