:root {
            --text-main: #333;
            --bg-light: #f8f9fa;
            --aria-blue: #5b86e5;
            --aria-cyan: #36d1dc;
            --aria-dark: #171a23;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body, html {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            overflow-x: hidden;
        }
        button, input { font: inherit; }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            background-image: url('https://img.haeng-un.com/homepage.jpeg');
            background-size: cover;
            background-position: center center;
            z-index: -1;
        }
        @media (max-width: 768px) {
            body::before { background-position: 35% center; }
        }

        .hero-section {
            position: relative;
            height: 100vh;
            height: 100svh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
            z-index: 1;
        }
        .hero-content { position: relative; z-index: 2; color: white; padding: 0 20px; }
        .hero-content h1 { font-size: 3.8rem; font-weight: 800; letter-spacing: 2px; text-shadow: 2px 2px 15px rgba(0,0,0,0.7); }
        .hero-text { font-size: 1.05rem; line-height: 1.85; font-weight: 300; letter-spacing: 0.5px; margin-top: 1.5rem; text-shadow: 1px 1px 10px rgba(0,0,0,0.8); }
        .scroll-down-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; color: white; font-size: 2rem; text-decoration: none; animation: bounce 2s infinite; opacity: 0.85; }
        @keyframes bounce { 0%,20%,50%,80%,100% { transform: translate(-50%,0); } 40% { transform: translate(-50%,-15px); } 60% { transform: translate(-50%,-7px); } }

        .section-title { font-weight: 800; font-size: 1.6rem; color: #222; position: relative; display: inline-block; padding-bottom: 12px; margin-bottom: 2rem; }
        .section-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 45px; height: 3px; background: linear-gradient(90deg, var(--aria-blue), var(--aria-cyan)); border-radius: 2px; }

        .parallax-glass-section {
            position: relative;
            padding: 70px 20px;
            background: rgba(15,20,30,0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            overflow: hidden;
            z-index: 10;
        }
        .parallax-glass-section .section-title { color: #fff; }
        .parallax-glass-section .section-title::after { background: linear-gradient(90deg,#fff,#aaa); }
        .glass-btn-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; max-width: 800px; margin: 25px auto 0; }
        .glass-circle-btn { display: inline-flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 1.6rem; text-decoration: none; transition: all .35s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
        .glass-circle-btn:hover { transform: translateY(-6px) scale(1.08); color: #fff; background: rgba(255,255,255,0.2); }
        .glass-circle-btn.ig:hover { border-color:#e1306c; box-shadow:0 0 25px rgba(225,48,108,.9); }
        .glass-circle-btn.fb:hover { border-color:#1877f2; box-shadow:0 0 25px rgba(24,119,242,.9); }
        .glass-circle-btn.line:hover { border-color:#00c300; box-shadow:0 0 25px rgba(0,195,0,.9); }
        .glass-circle-btn.tiktok:hover { border-color:#000; box-shadow:0 0 25px rgba(255,255,255,.8); background:rgba(0,0,0,.4); }
        .glass-circle-btn.yt:hover { border-color:#f00; box-shadow:0 0 25px rgba(255,0,0,.9); }
        .glass-circle-btn.mail:hover { border-color:#fff; box-shadow:0 0 25px rgba(255,255,255,.9); }

        .topic-section { position: relative; padding: 80px 20px; z-index: 10; }
        .topic-bg-white { background: linear-gradient(135deg,#fff 0%,#f4f7f6 100%); box-shadow: 0 -10px 30px rgba(0,0,0,.05); }
        .topic-bg-gray { background: linear-gradient(135deg,#1e2029 0%,#2a2d3e 100%); }
        .topic-bg-gray .topic-content h2 { color:#fff; }
        .topic-bg-gray .topic-content p { color:#d1d5db; }
        .topic-container { display:flex; align-items:center; justify-content:center; max-width:1000px; margin:0 auto; gap:60px; }
        .topic-section:nth-child(even) .topic-container { flex-direction: row-reverse; }
        .topic-content { flex:1; max-width:450px; text-align:left; z-index:21; position:relative; }
        .topic-content h2 { font-size:2.2rem; font-weight:800; margin-bottom:20px; color:#222; }
        .topic-content p { font-size:1rem; line-height:1.8; color:#555; margin-bottom:30px; }
        .topic-btn { display:inline-block; padding:12px 32px; background:linear-gradient(90deg,var(--aria-blue),var(--aria-cyan)); color:#fff; border-radius:30px; text-decoration:none; font-weight:bold; transition:all .3s; box-shadow:0 4px 15px rgba(54,209,220,.3); }
        .topic-btn:hover { color:#fff; transform:translateY(-3px); box-shadow:0 8px 25px rgba(54,209,220,.5); }
        .topic-carousel-wrapper { flex:1; max-width:320px; margin-top:-30px; position:relative; z-index:20; filter:drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
        .topic-carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:20px; background:#000; -ms-overflow-style:none; scrollbar-width:none; -webkit-mask-image:-webkit-radial-gradient(white,black); }
        .topic-carousel::-webkit-scrollbar { display:none; }
        .video-item { flex:0 0 100%; scroll-snap-align:center; position:relative; aspect-ratio:9/16; display:flex; align-items:center; justify-content:center; }
        .video-item video { width:100%; height:100%; object-fit:cover; border-radius:20px; }
        .swipe-hint { text-align:center; font-size:.85rem; color:#888; margin-top:15px; font-weight:500; }
        .topic-bg-gray .swipe-hint { color:#9ca3af; }
        @media (max-width:768px) {
            .topic-section { padding:60px 20px; }
            .topic-container, .topic-section:nth-child(even) .topic-container { flex-direction:column !important; text-align:center; gap:40px; }
            .topic-carousel-wrapper { width:100%; max-width:320px; margin-top:-20px; order:1; }
            .topic-content { order:2; text-align:center; }
        }

        /* 合作 / 贊助：iOS Safari 安全 fallback */
        .action-section {
            position: relative;
            padding: 90px 20px;
            text-align: center;
            overflow: hidden;
            isolation: isolate;
            background: linear-gradient(135deg, rgba(18,24,40,.88), rgba(37,50,78,.88));
        }
        .action-overlay {
            position: absolute;
            inset: 0;
            z-index: 0;
            background: rgba(15,20,35,.22);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            pointer-events: none;
        }
        .action-content { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:30px; width:100%; }
        .action-btn {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-width:220px;
            min-height:58px;
            padding:16px 50px;
            background:rgba(255,255,255,.14);
            border:2px solid rgba(255,255,255,.78);
            color:#fff !important;
            font-size:1.15rem;
            font-weight:700;
            letter-spacing:2px;
            border-radius:40px;
            text-decoration:none;
            transition:all .3s;
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
        }
        .action-btn:hover, .action-btn:focus-visible { background:rgba(255,255,255,.95); color:#111 !important; transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.3); }
        @media (max-width:768px) {
            .action-section { padding:64px 20px; background:linear-gradient(135deg,#182238 0%,#263a5e 100%); }
            .action-overlay { display:none; }
            .action-content { flex-direction:column; gap:16px; }
            .action-btn { width:min(100%,320px); min-width:0; background:rgba(255,255,255,.16); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 8px 24px rgba(0,0,0,.18); }
        }

        .services-section { padding:60px 20px; background:#f8f9fa; }
        .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1000px; margin:0 auto; }
        .flip-card { height:260px; perspective:1000px; cursor:pointer; }
        .flip-card-inner { position:relative; width:100%; height:100%; text-align:center; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.05); }
        @media (hover:hover) { .flip-card:hover .flip-card-inner { transform:rotateY(180deg); } }
        .flip-card.flipped .flip-card-inner { transform:rotateY(180deg); }
        .flip-card-front, .flip-card-back { position:absolute; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; }
        .flip-card-front { background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6); color:#333; }
        .flip-card-front i { font-size:3.5rem; color:var(--aria-blue); margin-bottom:15px; }
        .flip-card-front h3 { font-size:1.4rem; font-weight:800; margin:0; }
        .flip-card-back { background:linear-gradient(135deg,var(--aria-blue),var(--aria-cyan)); color:#fff; transform:rotateY(180deg); }
        .flip-card-back h3 { font-size:1.4rem; font-weight:800; margin-bottom:15px; padding-bottom:12px; border-bottom:2px solid rgba(255,255,255,.3); width:80%; }
        .flip-card-back p { font-size:1.05rem; line-height:1.6; margin:0; font-weight:500; }
        @media (max-width:992px) {
            .services-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px; -ms-overflow-style:none; scrollbar-width:none; }
            .services-grid::-webkit-scrollbar { display:none; }
            .services-grid > .flip-card { flex:0 0 300px; scroll-snap-align:center; }
        }
        @media (max-width:768px) {
            .services-grid { display:grid; grid-template-columns:1fr; gap:20px; }
            .services-grid > .flip-card { flex:auto; }
        }

        .link-container { max-width:500px; margin:0 auto; }
        .link-card { background:linear-gradient(135deg,#e6ebf2 0%,#f1f4f9 100%); border:none; border-radius:14px; padding:18px 22px; margin-bottom:16px; display:flex; align-items:center; text-decoration:none; color:#444; box-shadow:0 4px 12px rgba(0,0,0,.03); transition:all .3s; }
        .link-card:hover { transform:translateY(-4px); box-shadow:0 8px 22px rgba(0,0,0,.08); color:#111; }
        .link-icon { font-size:1.7rem; margin-right:18px; flex-shrink:0; }
        .link-content { text-align:left; }
        .link-content h5 { font-size:1.05rem; font-weight:700; margin:0 0 4px; color:#3b4a6b; }
        .link-content p { font-size:.85rem; margin:0; color:#666; line-height:1.4; }

        /* ================= Aria 2.0 ================= */
        #chat-button {
            position:fixed;
            right:max(18px, env(safe-area-inset-right));
            bottom:max(22px, calc(env(safe-area-inset-bottom) + 14px));
            width:68px;
            height:68px;
            border:0;
            border-radius:50%;
            padding:0;
            cursor:pointer;
            z-index:99999;
            opacity:0;
            pointer-events:none;
            transform:translateY(18px) scale(.96);
            transition:opacity .35s ease, transform .35s ease;
            background:transparent;
        }
        #chat-button.show-chat { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
        #chat-button:hover { transform:translateY(-4px) scale(1.04); }
        #chat-button img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 4px rgba(54,209,220,.12),0 10px 28px rgba(24,35,62,.35); }
        #chat-status-dot { position:absolute; width:14px; height:14px; right:1px; bottom:5px; border-radius:50%; background:#35c759; border:3px solid #fff; }
        #chat-nudge {
            position:fixed;
            right:max(22px, env(safe-area-inset-right));
            bottom:max(102px, calc(env(safe-area-inset-bottom) + 92px));
            z-index:99998;
            max-width:220px;
            padding:10px 13px;
            border-radius:14px 14px 4px 14px;
            background:#fff;
            color:#293248;
            font-size:.88rem;
            font-weight:650;
            box-shadow:0 12px 34px rgba(0,0,0,.16);
            opacity:0;
            transform:translateY(8px);
            pointer-events:none;
            transition:.3s ease;
        }
        #chat-nudge.show { opacity:1; transform:translateY(0); }

        #chat-window {
            position:fixed;
            right:max(18px, env(safe-area-inset-right));
            bottom:max(102px, calc(env(safe-area-inset-bottom) + 92px));
            width:min(390px, calc(100vw - 36px));
            height:min(620px, calc(100dvh - 130px));
            max-height:78vh;
            display:none;
            flex-direction:column;
            overflow:hidden;
            z-index:100000;
            background:#fff;
            border:1px solid rgba(67,84,118,.12);
            border-radius:22px;
            box-shadow:0 24px 70px rgba(15,25,45,.3);
        }
        #chat-window.open { display:flex; animation:ariaOpen .18s ease-out; }
        @keyframes ariaOpen { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
        #chat-header { display:flex; align-items:center; gap:10px; padding:13px 14px; color:#fff; background:linear-gradient(135deg,#4f76d4,#32c7d2); flex-shrink:0; }
        #chat-header-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.85); }
        .chat-header-copy { flex:1; min-width:0; }
        .chat-header-title { font-weight:800; font-size:1rem; line-height:1.15; }
        .chat-header-subtitle { font-size:.74rem; opacity:.9; margin-top:3px; }
        #chat-close { border:0; background:rgba(255,255,255,.14); color:#fff; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
        #chat-messages { flex:1; overflow-y:auto; padding:14px; background:linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 100%); overscroll-behavior:contain; }
        .message { display:flex; align-items:flex-start; gap:9px; margin-bottom:13px; }
        .user-message { justify-content:flex-end; }
        .avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.1); }
        .message-bubble { max-width:78%; padding:10px 13px; border-radius:17px; font-size:.94rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 2px 7px rgba(0,0,0,.05); }
        .bot-message .message-bubble { background:#fff; color:#283142; border-top-left-radius:5px; }
        .user-message .message-bubble { background:linear-gradient(135deg,#587fdc,#35cbd6); color:#fff; border-top-right-radius:5px; }
        .typing-bubble { display:inline-flex; gap:5px; align-items:center; min-width:64px; }
        .typing-bubble i { width:7px; height:7px; background:#9aa7ba; border-radius:50%; animation:typing 1.1s infinite; }
        .typing-bubble i:nth-child(2) { animation-delay:.14s; }
        .typing-bubble i:nth-child(3) { animation-delay:.28s; }
        @keyframes typing { 0%,60%,100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-4px); opacity:1; } }
        .quick-actions { display:flex; flex-wrap:wrap; gap:7px; margin:3px 0 14px 43px; }
        .quick-action, .reply-action { border:1px solid #d8e1ef; background:#fff; color:#405278; border-radius:999px; padding:7px 10px; font-size:.8rem; font-weight:700; cursor:pointer; transition:.2s; }
        .quick-action:hover, .reply-action:hover { border-color:#72b8dd; background:#f1fbff; }
        .reply-actions { display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 14px 43px; }
        .email-form { margin:2px 0 14px 43px; padding:12px; background:#fff; border:1px solid #dfe7f2; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.05); }
        .email-form p { margin:0 0 9px; font-size:.84rem; color:#43506a; }
        .email-row { display:flex; gap:7px; }
        .email-form input { min-width:0; flex:1; border:1px solid #ccd7e6; border-radius:10px; padding:9px 10px; outline:none; }
        .email-form input:focus { border-color:#5b86e5; box-shadow:0 0 0 3px rgba(91,134,229,.1); }
        .email-form button { border:0; border-radius:10px; padding:9px 12px; color:#fff; background:#25324b; font-weight:700; cursor:pointer; }
        #chat-error { display:none; margin:0 14px 8px; padding:8px 10px; border-radius:10px; background:#fff4f4; color:#a13a3a; font-size:.8rem; }
        #chat-input-area { display:flex; align-items:flex-end; gap:8px; padding:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); border-top:1px solid #e6ebf2; background:#fff; flex-shrink:0; }
        #chat-input { flex:1; min-width:0; border:1px solid #d8e0eb; border-radius:18px; padding:10px 12px; outline:none; background:#f9fbfd; font-size:.94rem; }
        #chat-input:focus { border-color:#6aa6e7; box-shadow:0 0 0 3px rgba(91,134,229,.09); }
        #chat-send { width:42px; height:42px; flex:0 0 auto; border:0; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#557edb,#34cbd5); cursor:pointer; }
        #chat-send:disabled { opacity:.5; cursor:not-allowed; }

        @media (max-width:520px) {
            #chat-window {
                left:12px;
                right:12px;
                bottom:max(88px, calc(env(safe-area-inset-bottom) + 78px));
                width:auto;
                height:min(620px, calc(100dvh - 104px));
                max-height:none;
                border-radius:20px;
            }
            #chat-button { width:60px; height:60px; right:max(14px, env(safe-area-inset-right)); }
            #chat-nudge { right:max(18px, env(safe-area-inset-right)); bottom:max(90px, calc(env(safe-area-inset-bottom) + 82px)); }
            .message-bubble { max-width:82%; }
            .quick-actions, .reply-actions, .email-form { margin-left:0; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
        }