* { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background-color: #231d2c; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; line-height: 1.6; }
 .scrollable-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; z-index: 2; -webkit-overflow-scrolling: touch; background: rgba(0, 0, 0, 0.55); }
 .video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
 .background-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1; transform: translate(-50%, -50%); object-fit: cover; will-change: transform; transform: translate(-50%, -50%) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
 .circle-wrapper, .circle-progress, .circle-bg { will-change: transform, stroke-dashoffset; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
 .top-logo { width: 100%; text-align: center; padding: 0 !important; margin: 0 !important; position: relative; z-index: 10; background: transparent; flex-shrink: 0 !important; }
 .top-logo a { display: block; margin: 0; padding: 0; text-decoration: none; }
 .top-logo img { width: 100%; max-width: 758px; height: auto; display: block; margin: 0 auto; }
 .bottom-logo-wrapper { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 999999 !important; display: block; pointer-events: none !important; margin-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; transform: translate3d(0, 0, 999px) !important; -webkit-transform: translate3d(0, 0, 999px) !important; will-change: transform; text-align: center; }
 .bottom-logo { width: 100% !important; height: 150px; text-align: center; padding: 0; margin: 0; background: transparent url('assets/support-footer.webp') center bottom no-repeat; background-size: contain; display: block; pointer-events: none !important; position: relative; }
 .logo-hotspot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; max-width: 336px; height: 80%; pointer-events: auto !important; display: block; }
 .container { max-width: 1300px; margin: 0 auto; padding: 0px 20px 160px !important; position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
 .section-title { text-align: center; font-size: 2.8rem; margin: 10px; color: #ffd700; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
 .section-subtitle { text-align: center; font-size: 1.3rem; color: #eee; margin-bottom: 60px; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
 .services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
 .service-card { background: rgba(255,255,255,0.08); border-radius: 24px; padding: 40px 20px 45px; text-align: center; transition: all 0.4s ease; backdrop-filter: blur(8px); }
 .service-card:hover { transform: translateY(-10px); background: rgba(255, 215, 0, 0.12); }
 .circle-wrapper { width: 128px; height: 128px; margin: 0 auto 40px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; perspective: 1000px; transition: transform 0.6s linear; }
 .circle-wrapper svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
 .circle-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 6; }
 .circle-progress { fill: none; stroke: #ffd700; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; animation: spinLoadingBar 2.5s linear infinite; }
 @keyframes spinLoadingBar { 0% { stroke-dashoffset: 440; }
 100% { stroke-dashoffset: 0; }
 }
 .logo-center { width: 88px; height: 88px; min-width: 88px; min-height: 88px; max-width: 88px; max-height: 88px; object-fit: contain; aspect-ratio: 1 / 1; transition: transform 0.3s ease; filter: drop-shadow(0 0 15px rgba(255,215,0,0.5)); margin: 0; padding: 0; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
 .btn-experience { display: inline-block; margin-top: 20px; padding: 14px 32px; background: linear-gradient(90deg, #ffd700, #ffaa00); color: #1a0033; font-weight: bold; font-size: 1.05rem; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5); }
 .btn-experience:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255, 215, 0, 0.7); }
 .service-card h3 { font-size: 1.45rem; margin-bottom: 20px; color: #ffd700; min-height: 44px; text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
 @media (max-width: 768px) { .top-logo img { width: 100%; max-width: 360px; }
 .container { padding: 0px 20px 100px !important; }
 .bottom-logo { height: 100px; }
 .logo-hotspot { width: 80%; max-width: 256px; height: 80%; }
 }
 @media (max-width: 480px) { .top-logo img { width: 100%; max-width: 360px; }
 .section-title { font-size: 1.7rem; }
 .section-subtitle { font-size: 1.0rem; }
 .container { padding: 0px 20px 85px !important; }
 .bottom-logo { height: 85px; }
 .logo-hotspot { width: 80%; max-width: 208px; height: 80%; }
 }
 @media (max-width: 1200px) { .services { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 600px) { .services { grid-template-columns: 1fr; }
 .service-card { padding: 15px 10px; display: flex; align-items: center; gap: 15px; text-align: left; }
 .circle-wrapper { width: 110px; height: 110px; margin: 0; flex-shrink: 0; }
 .logo-center { width: 68px; height: 68px; }
 .content { flex: 1; text-align: center; }
 .service-card h3 { margin-bottom: 1px; font-size: 1.2rem; text-align: center; line-height: 1.0; }
 .btn-experience { margin-top: 1px; padding: 5px 16px; font-size: 0.95rem; }
 }

/* ONTOP branding keeps the source banner footprint. */
.brand-banner{width:100%;max-width:758px;aspect-ratio:758/166;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:24px;background:linear-gradient(#393939,#080808);border-bottom:10px solid #ff9f01;border-left:8px solid #ffd700;border-right:8px solid #ffd700;border-radius:0 0 48px 48px;padding:12px 48px;color:#ffd700}
.top-logo .brand-banner img{width:40%;height:auto;max-height:110px;object-fit:contain;background:white;border-radius:8px;padding:8px}
.brand-caption{font-size:24px;line-height:1.5;text-align:left;border-left:1px solid #ffd700;padding-left:20px}
.section-title{font-weight:700}
a{cursor:pointer}
a:focus-visible{outline:3px solid white;outline-offset:4px}
.logo-hotspot{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:768px){.brand-banner{max-width:360px;gap:12px;padding:8px 20px;border-bottom-width:5px;border-left-width:4px;border-right-width:4px;border-radius:0 0 24px 24px}
.brand-caption{font-size:12px;padding-left:10px}
.top-logo .brand-banner img{padding:4px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
.circle-progress{stroke-dashoffset:0}
}