:root{--gcx-bg:#030815;--gcx-bg2:#071126;--gcx-blue:#2f80ff;--gcx-cyan:#28d7ff;--gcx-purple:#8d5cff;--gcx-line:rgba(255,255,255,.14);--gcx-muted:#9aa7bd}
html,body{margin:0!important;width:100%!important;max-width:none!important}body{overflow-x:hidden!important}
#wrapper,#wrap,#container,#container_wr,#content,.main-container,.page-wrapper,.content-wrapper,.basic-body,.eb-container,.container-fluid{width:100%!important;max-width:none!important;min-width:0!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.gcx-home{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-top:132px!important;background:#030815;color:#fff;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif}
.gcx-home,.gcx-home *{box-sizing:border-box}.gcx-home a{text-decoration:none!important}
header,#header,#hd,.header,.header-wrap,.header-wrapper{background:rgba(5,12,28,.92)!important;color:#eef5ff!important;border-bottom:1px solid rgba(85,142,255,.18)!important;box-shadow:0 10px 34px rgba(0,0,0,.26)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:99999!important}
header .container,header .inner,#header .container,#header .inner,#hd .container,#hd .inner,.header .container,.header .inner,.header-wrap .container,.header-wrap .inner,.header-wrapper .container,.header-wrapper .inner{width:100%!important;max-width:none!important;margin:0!important;padding-left:clamp(24px,4vw,72px)!important;padding-right:clamp(24px,4vw,72px)!important}
header a,#header a,#hd a,.header a{color:#dce7fa!important}header a:hover,#header a:hover,#hd a:hover,.header a:hover{color:#66b6ff!important}
#gnb,.gnb,.navbar,.main-nav,.eb-menu,.header-nav{background:rgba(5,12,28,.96)!important;border-color:rgba(85,142,255,.16)!important}#gnb a,.gnb a,.navbar a,.main-nav a,.eb-menu a{color:#dce7fa!important}#logo img,.logo img,.header-logo img{max-height:48px!important;width:auto!important}
footer,#footer,#ft,.footer{background:#030303!important;color:#8d97a8!important;border-top:1px solid #151515!important}footer .container,footer .inner,#footer .container,#footer .inner,#ft .container,#ft .inner,.footer .container,.footer .inner{width:100%!important;max-width:none!important;margin:0!important;padding-left:clamp(24px,4vw,72px)!important;padding-right:clamp(24px,4vw,72px)!important}footer a,#footer a,#ft a,.footer a{color:#cbd2dd!important}footer a:hover,#footer a:hover,#ft a:hover,.footer a:hover{color:#fff!important}
.gcx-hero{position:relative;min-height:calc(100vh - 132px);overflow:hidden;display:flex;align-items:center;background:radial-gradient(circle at 68% 46%,rgba(0,111,255,.20),transparent 30%),radial-gradient(circle at 20% 50%,rgba(113,62,255,.16),transparent 35%),linear-gradient(110deg,#070c26 0%,#05122a 55%,#020817 100%)}
.gcx-starfield{position:absolute;inset:0;opacity:.25;background-image:radial-gradient(circle at 10% 20%,#4c6cff 0 1px,transparent 2px),radial-gradient(circle at 74% 17%,#3d8cff 0 1px,transparent 2px),radial-gradient(circle at 89% 30%,#42d9ff 0 1px,transparent 2px),radial-gradient(circle at 24% 82%,#4d68ff 0 1px,transparent 2px),radial-gradient(circle at 60% 77%,#42d9ff 0 1px,transparent 2px);background-size:190px 190px,260px 260px,230px 230px,310px 310px,270px 270px}
.gcx-hero-inner{width:100%;padding:clamp(58px,6vw,110px) clamp(42px,8vw,160px);display:grid;grid-template-columns:minmax(460px,.92fr) minmax(620px,1.08fr);gap:clamp(36px,4vw,80px);align-items:center;position:relative;z-index:2}
.gcx-copy{max-width:760px}.gcx-kicker{display:flex;align-items:center;gap:14px;color:#a9b9d6;font-size:11px;font-weight:800;letter-spacing:.16em}.gcx-kicker i{display:block;width:34px;height:2px;background:linear-gradient(90deg,#45d7ff,#735cff)}
.gcx-copy h1{margin:34px 0 22px!important;font-size:clamp(64px,6.8vw,118px)!important;line-height:.84!important;letter-spacing:-.072em!important;color:#fff!important;font-weight:850!important}.gcx-copy h1 span{display:block}.gcx-copy h1 em{font-style:normal;background:linear-gradient(90deg,#fff 0%,#a778ff 38%,#2dd7ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gcx-subtitle{margin:0!important;color:#c2cce0!important;font-size:clamp(18px,1.4vw,25px)!important;font-weight:600!important}.gcx-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}.gcx-btn{min-width:178px;height:58px;padding:0 28px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:14px!important;font-weight:800!important;transition:.22s ease}.gcx-btn-primary{color:#fff!important;background:linear-gradient(135deg,#2e8cff,#2973ff);box-shadow:0 20px 45px rgba(24,105,255,.28)}.gcx-btn-primary:hover{transform:translateY(-2px);color:#fff!important}.gcx-btn-outline{border:1px solid rgba(150,174,219,.45);color:#fff!important;background:rgba(255,255,255,.015)}.gcx-btn-outline:hover{background:rgba(255,255,255,.07);color:#fff!important}
.gcx-stats{display:flex;gap:0;margin-top:48px;max-width:620px}.gcx-stats div{min-width:150px;padding:0 34px;border-right:1px solid rgba(255,255,255,.2)}.gcx-stats div:first-child{padding-left:0}.gcx-stats div:last-child{border-right:0}.gcx-stats strong{display:block;font-size:25px;color:#fff}.gcx-stats span{display:block;margin-top:6px;color:#98a6bd;font-size:12px}
.gcx-world{position:relative;min-height:650px}.gcx-world-glow{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;left:10%;top:8%;background:radial-gradient(circle,rgba(35,138,255,.36),transparent 68%);filter:blur(12px)}.gcx-globe{position:absolute;left:6%;top:2%;width:83%;height:91%;object-fit:cover;object-position:center;border-radius:50%;filter:saturate(1.1) contrast(1.05);mix-blend-mode:screen}.gcx-orbit{position:absolute;left:10%;top:26%;width:74%;height:45%;border:1px solid rgba(45,156,255,.65);border-radius:50%;transform:rotate(-6deg);box-shadow:0 0 20px rgba(31,142,255,.15)}.gcx-orbit-b{top:22%;transform:rotate(19deg);opacity:.62}
.gcx-float{position:absolute;display:flex;gap:14px;align-items:center;min-width:250px;padding:18px 20px;border:1px solid rgba(120,163,255,.32);border-radius:17px;background:linear-gradient(145deg,rgba(30,57,102,.90),rgba(10,27,58,.88));box-shadow:0 18px 48px rgba(0,0,0,.30);backdrop-filter:blur(12px)}.gcx-float strong{display:block;color:#fff;font-size:14px;letter-spacing:.02em}.gcx-float small{display:block;color:#9eb0ca;font-size:11px;line-height:1.55;margin-top:5px}.gcx-fi{width:45px;height:45px;border-radius:10px;display:grid;place-items:center;color:#68a6ff;font-size:28px;font-weight:800}.gcx-web{left:2%;top:9%}.gcx-android{right:1%;top:11%}.gcx-cloud{left:2%;bottom:15%}.gcx-support{right:4%;bottom:13%}.gcx-sydney{position:absolute;right:-1%;top:48%;transform:rotate(-7deg);font-family:cursive;color:#73aaff;font-size:23px;line-height:1.25;text-align:center}.gcx-sydney span{font-size:27px}
.gcx-side-index{position:absolute;left:2.8%;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:16px}
.gcx-side-index a{position:relative;display:flex;align-items:center;min-width:48px;padding-left:28px;color:#4e5f80!important;font-size:12px;line-height:18px;font-weight:600;transition:.22s ease}
.gcx-side-index a:before{content:"";position:absolute;left:0;top:50%;width:15px;height:1px;background:#465273;transition:.22s ease}
.gcx-side-index a:hover{color:#91c8ff!important}
.gcx-side-index a:hover:before{width:22px;background:#6cb7ff}
.gcx-side-index a.active{color:#49a7ff!important;font-weight:800}
.gcx-side-index a.active:before{width:26px;background:#49a7ff;box-shadow:0 0 12px rgba(73,167,255,.65)}
.gcx-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:#9eb0ca!important;z-index:4}.gcx-scroll span{width:18px;height:31px;border:2px solid #a9b9d7;border-radius:12px;position:relative}.gcx-scroll span:after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:2px;height:7px;background:#8fb7ff}.gcx-scroll small{font-size:9px;letter-spacing:.18em}
.gcx-section{width:100%;padding:110px clamp(32px,6vw,110px);background:#07101f}.gcx-services{background:linear-gradient(180deg,#07101f,#091326)}.gcx-platforms{background:#060c18}.gcx-section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:50px}.gcx-label{font-size:10px;letter-spacing:.18em;color:#7790b9;font-weight:800}.gcx-section-head h2,.gcx-contact h2{margin:12px 0 0!important;color:#fff!important;font-size:clamp(42px,5vw,72px)!important;line-height:.96!important;letter-spacing:-.055em!important}.gcx-section-head p{margin:0!important;max-width:720px;color:#98a6bb!important;font-size:15px!important;line-height:1.85!important}
.gcx-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.gcx-service-grid article{min-height:320px;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;transition:.22s ease}.gcx-service-grid article:hover{transform:translateY(-5px);border-color:rgba(61,132,255,.5);background:rgba(255,255,255,.055)}.gcx-service-grid article>span{color:#5a78aa;font-size:11px;letter-spacing:.14em}.gcx-service-grid h3{margin:48px 0 12px!important;color:#fff!important;font-size:22px!important}.gcx-service-grid p{margin:0!important;color:#93a0b4!important;font-size:13px!important;line-height:1.75!important}.gcx-service-grid b{margin-top:auto;padding-top:30px;color:#b9c3d5;font-size:9px;letter-spacing:.11em}
.gcx-platform-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.gcx-platform{grid-column:span 6;min-height:330px;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;justify-content:space-between;color:#fff!important;transition:.22s ease}.gcx-platform:hover{transform:translateY(-5px);border-color:rgba(66,133,255,.5);color:#fff!important}.gcx-platform-feature{grid-column:span 8;background:linear-gradient(145deg,rgba(114,70,255,.20),rgba(30,84,205,.08))}.gcx-platform-blue{grid-column:span 4;background:linear-gradient(145deg,rgba(32,131,255,.14),rgba(255,255,255,.03))}.gcx-platform-full{grid-column:span 12;min-height:260px}.gcx-platform-meta{display:flex;justify-content:space-between;align-items:center}.gcx-platform-meta span{font-size:10px;letter-spacing:.14em;color:#9fb0ca;font-weight:800}.gcx-platform-meta b{width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center}.gcx-platform small{display:block;color:#6f83a8;font-size:9px;letter-spacing:.15em;margin-bottom:8px}.gcx-platform h3{margin:0 0 10px!important;color:#fff!important;font-size:31px!important}.gcx-platform p{max-width:620px;margin:0!important;color:#91a0b5!important;font-size:13px!important;line-height:1.75!important}.gcx-platform>strong{color:#d1d9e7;font-size:11px}
.gcx-contact{width:100%;padding:95px clamp(32px,6vw,110px);background:radial-gradient(circle at 86% 20%,rgba(88,74,255,.22),transparent 26%),linear-gradient(135deg,#091224,#070d19);display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}.gcx-contact>div>p{max-width:650px;color:#98a6ba!important;font-size:14px!important;line-height:1.8!important}.gcx-contact-box{padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.035)}.gcx-contact-box small{display:block;color:#7487a8;font-size:9px;letter-spacing:.14em;margin-bottom:10px}.gcx-contact-box a{display:block;color:#fff!important;font-size:clamp(20px,2vw,28px)!important;font-weight:800!important}.gcx-contact-box p{margin:18px 0 0!important;color:#7f8ba1!important;font-size:11px!important;line-height:1.7!important}
@media(max-width:1250px){.gcx-hero-inner{grid-template-columns:1fr 1fr;padding-left:60px;padding-right:60px}.gcx-copy h1{font-size:72px!important}.gcx-float{min-width:210px;padding:14px}.gcx-sydney{display:none}.gcx-service-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.gcx-home{padding-top:96px!important}.gcx-hero{min-height:auto}.gcx-hero-inner{grid-template-columns:1fr;padding:70px 28px 90px}.gcx-world{min-height:560px}.gcx-copy{max-width:none}.gcx-section-head,.gcx-contact{grid-template-columns:1fr}.gcx-section-head{gap:24px}.gcx-platform,.gcx-platform-feature,.gcx-platform-blue,.gcx-platform-full{grid-column:span 12}.gcx-side-index{display:none}}
@media(max-width:700px){.gcx-home{padding-top:78px!important}.gcx-hero-inner{padding:55px 18px 82px}.gcx-copy h1{font-size:clamp(48px,15vw,68px)!important}.gcx-subtitle{font-size:16px!important}.gcx-stats div{min-width:0;flex:1;padding:0 12px}.gcx-stats strong{font-size:20px}.gcx-stats span{font-size:9px}.gcx-world{min-height:430px}.gcx-globe{left:0;width:100%;height:95%}.gcx-float{min-width:155px;padding:10px 11px;gap:8px}.gcx-float strong{font-size:10px}.gcx-float small{font-size:8px}.gcx-fi{width:28px;height:28px;font-size:17px}.gcx-web{left:0;top:7%}.gcx-android{right:0;top:14%}.gcx-cloud{left:0;bottom:14%}.gcx-support{right:0;bottom:8%}.gcx-section{padding:76px 18px}.gcx-service-grid{grid-template-columns:1fr}.gcx-contact{padding:76px 18px}header .container,header .inner,#header .container,#header .inner,#hd .container,#hd .inner,.header .container,.header .inner{padding-left:16px!important;padding-right:16px!important}}


/* V4: the globe image already contains its own WEB / ANDROID / CLOUD / SUPPORT labels. */
.gcx-world > .gcx-float,
.gcx-world > .gcx-sydney{
    display:none!important;
}

/* Header blends into the hero while remaining fixed. */
.gcx-home{
    padding-top:132px!important;
}
@media(max-width:980px){
    .gcx-home{padding-top:96px!important}
}
@media(max-width:700px){
    .gcx-home{padding-top:78px!important}
}


/* =========================================================
   V5 HEADER LAYOUT
   Visitor + Login moved to logo row, old top utility bar removed
   ========================================================= */

/* Main logo row becomes a single horizontal header row */
.gcx-logo-row{
    width:100%!important;
    max-width:none!important;
    min-height:76px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:24px!important;
    padding-left:clamp(24px,4vw,72px)!important;
    padding-right:clamp(24px,4vw,72px)!important;
    margin:0!important;
    position:relative!important;
}

/* Existing logo stays left */
.gcx-logo-row #logo,
.gcx-logo-row .logo,
.gcx-logo-row .header-logo,
.gcx-logo-row [class*="logo"]{
    flex:0 0 auto!important;
    margin-right:auto!important;
}

/* Right-side utility actions */
.gcx-header-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
}

.gcx-header-action-item{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
    float:none!important;
    display:flex!important;
    align-items:center!important;
}

.gcx-header-action-item > a,
.gcx-header-action-item > span,
.gcx-header-action-item{
    color:#dce7fa!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
}

.gcx-header-action-item > a{
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 12px!important;
    border-radius:10px!important;
    border:1px solid rgba(107,156,255,.16)!important;
    background:rgba(255,255,255,.035)!important;
    transition:.2s ease!important;
}

.gcx-header-action-item > a:hover{
    color:#fff!important;
    border-color:rgba(102,182,255,.48)!important;
    background:rgba(88,137,255,.10)!important;
}

.gcx-header-visitor{
    padding:0 10px!important;
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    border-radius:10px!important;
    color:#b9c8df!important;
}

/* Remove any old top strip spacing after rearrangement */
.gcx-header-rearranged .top-bar,
.gcx-header-rearranged .topbar,
.gcx-header-rearranged .header-top,
.gcx-header-rearranged .hd-top,
.gcx-header-rearranged #tnb,
.gcx-header-rearranged .tnb,
.gcx-header-rearranged .top-nav,
.gcx-header-rearranged .header-util,
.gcx-header-rearranged .util-menu{
    min-height:0!important;
    height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    border:0!important;
    overflow:hidden!important;
}

/* Header should now visually be one bar */
.gcx-header-rearranged{
    padding-top:0!important;
}

@media(max-width:700px){
    .gcx-logo-row{
        min-height:64px!important;
        padding-left:16px!important;
        padding-right:16px!important;
        gap:10px!important;
    }

    .gcx-header-actions{
        gap:4px!important;
    }

    .gcx-header-action-item,
    .gcx-header-action-item > a,
    .gcx-header-action-item > span{
        font-size:10px!important;
    }

    .gcx-header-action-item > a{
        min-height:32px!important;
        padding:0 8px!important;
    }

    .gcx-header-visitor{
        min-height:32px!important;
        padding:0 6px!important;
    }
}


/* =========================================================
   V6 CONTACT / PLATFORM / FOOTER REFINEMENTS
   ========================================================= */

/* Contact: give the Korean paragraph breathing room below headline */
.gcx-contact > div:first-child > p{
    margin-top:26px!important;
    margin-bottom:0!important;
}

/* Six platform cards: final row is BiblePang + Coming Soon */
.gcx-platform-coming{
    grid-column:span 6!important;
    background:
        radial-gradient(circle at 88% 12%,rgba(81,143,255,.14),transparent 26%),
        linear-gradient(145deg,rgba(255,255,255,.045),rgba(75,83,255,.055))!important;
    border-style:dashed!important;
    border-color:rgba(108,152,255,.28)!important;
    cursor:default!important;
}
.gcx-platform-coming:hover{
    transform:none!important;
    border-color:rgba(108,152,255,.48)!important;
}
.gcx-platform-coming .gcx-platform-meta b{
    color:#75b5ff!important;
    font-size:18px!important;
}
.gcx-platform-coming h3{
    background:linear-gradient(90deg,#ffffff,#9fb4ff,#59d6ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
}

/* Remove the white strip between homepage and footer */
html,body{
    background:#030303!important;
}
.gcx-home{
    margin-bottom:0!important;
    padding-bottom:0!important;
}
.gcx-contact{
    margin-bottom:0!important;
}
#wrapper,#wrap,#container,#container_wr,#content,
.main-container,.page-wrapper,.content-wrapper,
.basic-body,.eb-container,.container-fluid{
    margin-bottom:0!important;
    padding-bottom:0!important;
}
footer,#footer,#ft,.footer,
.footer-wrap,.footer-wrapper{
    margin-top:0!important;
    padding-top:0!important;
}

/* Footer: make all lower text readable on black */
footer,#footer,#ft,.footer{
    background:#030303!important;
    color:#aab4c4!important;
}
footer *,
#footer *,
#ft *,
.footer *{
    color:#aab4c4!important;
    text-shadow:none!important;
}
footer a,
#footer a,
#ft a,
.footer a{
    color:#edf3ff!important;
}
footer a:hover,
#footer a:hover,
#ft a:hover,
.footer a:hover{
    color:#73b9ff!important;
}

/* Exact link row gets a horizontal divider underneath */
.gcx-footer-links-row{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
    padding-bottom:24px!important;
    margin-bottom:26px!important;
}

/* Common footer company/copyright selectors */
footer .copyright,
#footer .copyright,
#ft .copyright,
.footer .copyright,
footer [class*="copyright"],
#footer [class*="copyright"],
#ft [class*="copyright"],
footer .company-info,
#footer .company-info,
#ft .company-info,
footer [class*="company"],
#footer [class*="company"],
#ft [class*="company"],
footer address,
#footer address,
#ft address{
    color:#aab4c4!important;
    opacity:1!important;
}

/* Make footer inner content full width and keep sensible padding */
footer .container,footer .inner,
#footer .container,#footer .inner,
#ft .container,#ft .inner,
.footer .container,.footer .inner{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding-left:clamp(28px,4vw,72px)!important;
    padding-right:clamp(28px,4vw,72px)!important;
}

/* Footer lower area alignment */
.gcx-footer-fixed{
    border-top:0!important;
}
.gcx-footer-fixed p,
.gcx-footer-fixed div,
.gcx-footer-fixed span,
.gcx-footer-fixed address{
    opacity:1!important;
}

@media(max-width:980px){
    .gcx-platform-coming{
        grid-column:span 12!important;
    }
    .gcx-footer-links-row{
        padding-bottom:18px!important;
        margin-bottom:20px!important;
    }
}

@media(max-width:700px){
    .gcx-contact > div:first-child > p{
        margin-top:20px!important;
    }
}


/* =========================================================
   V7 — CLEAN GLOBE, SVG ROUTES, CSS SERVICE CARDS
   ========================================================= */
.gcx-world{
    position:relative!important;
    min-height:680px!important;
    overflow:visible!important;
}

.gcx-globe-shell{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:min(650px,72vw)!important;
    aspect-ratio:1/1!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    overflow:hidden!important;
    background:#061024!important;
    box-shadow:
        0 0 0 1px rgba(75,147,255,.16),
        0 0 70px rgba(26,117,255,.22)!important;
}

/* Zoom the existing raster so its baked cards are pushed outside the visible circle */
.gcx-globe-shell .gcx-globe{
    position:absolute!important;
    inset:-15%!important;
    width:130%!important;
    height:130%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    border-radius:50%!important;
    filter:saturate(1.12) contrast(1.05)!important;
    pointer-events:none!important;
}

/* animated aerial routes */
.gcx-route-map{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:4!important;
    pointer-events:none!important;
}
.gcx-route{
    fill:none!important;
    stroke:url(#gcxRouteGradient)!important;
    stroke-width:3!important;
    stroke-linecap:round!important;
    stroke-dasharray:12 8!important;
    filter:url(#gcxRouteGlow)!important;
    animation:gcx-route-dash 5.8s linear infinite!important;
}
.gcx-route-main{opacity:.85!important}
.gcx-route-second{opacity:.55!important;animation-duration:7.5s!important}
.gcx-route-korea{stroke-width:4!important;opacity:1!important;animation-duration:4.6s!important}
@keyframes gcx-route-dash{
    to{stroke-dashoffset:-120}
}

.gcx-point{
    fill:#73c8ff!important;
    stroke:#fff!important;
    stroke-width:2!important;
    filter:drop-shadow(0 0 10px #39a8ff)!important;
    animation:gcx-point-pulse 2s ease-in-out infinite!important;
}
@keyframes gcx-point-pulse{
    0%,100%{opacity:.76}
    50%{opacity:1}
}

.gcx-route-label{
    position:absolute!important;
    z-index:6!important;
    padding:5px 8px!important;
    border:1px solid rgba(95,165,255,.25)!important;
    border-radius:999px!important;
    background:rgba(4,15,38,.72)!important;
    color:#b9ddff!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.15em!important;
    backdrop-filter:blur(8px)!important;
}
.gcx-label-sydney{left:55%!important;top:64%!important}
.gcx-label-korea{left:49%!important;top:29%!important}

/* one clean CSS card per service */
.gcx-service-card{
    position:absolute!important;
    z-index:8!important;
    min-width:245px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    padding:17px 18px!important;
    border:1px solid rgba(101,160,255,.34)!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(27,56,104,.94),rgba(8,25,55,.94))!important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(14px)!important;
}
.gcx-service-card strong{
    display:block!important;
    color:#fff!important;
    font-size:13px!important;
    letter-spacing:.03em!important;
}
.gcx-service-card small{
    display:block!important;
    margin-top:4px!important;
    color:#9db1cf!important;
    font-size:10px!important;
    line-height:1.5!important;
}
.gcx-service-icon{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    display:grid!important;
    place-items:center!important;
    color:#68a9ff!important;
    font-size:24px!important;
}

/* cards around the clean globe */
.gcx-web-card{left:0!important;top:9%!important}
.gcx-android-card{right:0!important;top:12%!important}
.gcx-cloud-card{left:1%!important;bottom:12%!important}
.gcx-support-card{right:1%!important;bottom:10%!important}

/* =========================================================
   V7 HEADER — visitor + login grouped tightly at far right
   ========================================================= */
.gcx-header-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
    white-space:nowrap!important;
}
.gcx-header-action-item{
    margin:0!important;
    padding:0!important;
}
.gcx-header-visitor{
    margin-right:-2px!important;
    padding-right:2px!important;
}
.gcx-header-login{
    margin-left:0!important;
}
.gcx-header-action-item > a{
    padding-left:7px!important;
    padding-right:7px!important;
}
.gcx-logo-row #logo,
.gcx-logo-row .logo,
.gcx-logo-row .header-logo,
.gcx-logo-row [class*="logo"]{
    margin-right:auto!important;
}

/* responsive */
@media(max-width:1250px){
    .gcx-world{min-height:620px!important}
    .gcx-globe-shell{width:min(560px,66vw)!important}
    .gcx-service-card{min-width:205px!important;padding:14px!important}
    .gcx-web-card{left:-2%!important}
    .gcx-android-card{right:-2%!important}
    .gcx-cloud-card{left:-1%!important}
    .gcx-support-card{right:-1%!important}
}
@media(max-width:980px){
    .gcx-world{min-height:650px!important;margin-top:20px!important}
    .gcx-globe-shell{width:min(560px,82vw)!important}
    .gcx-service-card{min-width:190px!important}
    .gcx-web-card{left:2%!important;top:4%!important}
    .gcx-android-card{right:2%!important;top:8%!important}
    .gcx-cloud-card{left:2%!important;bottom:8%!important}
    .gcx-support-card{right:2%!important;bottom:5%!important}
}
@media(max-width:700px){
    .gcx-world{min-height:540px!important}
    .gcx-globe-shell{width:92vw!important;max-width:470px!important}
    .gcx-service-card{min-width:145px!important;padding:10px 11px!important;gap:8px!important}
    .gcx-service-icon{width:28px!important;height:28px!important;flex-basis:28px!important;font-size:17px!important}
    .gcx-service-card strong{font-size:10px!important}
    .gcx-service-card small{font-size:8px!important}
    .gcx-web-card{left:0!important;top:0!important}
    .gcx-android-card{right:0!important;top:6%!important}
    .gcx-cloud-card{left:0!important;bottom:9%!important}
    .gcx-support-card{right:0!important;bottom:3%!important}
    .gcx-route-label{font-size:7px!important}
}


/* =========================================================
   V8 — USE APPROVED PLAIN GLOBE IMAGE
   ========================================================= */

/* The approved image has no words/cards. Blend its square edges into hero background. */
.gcx-globe-shell{
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:50%!important;
}

.gcx-globe-shell .gcx-globe{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:50%!important;
    -webkit-mask-image:radial-gradient(circle at center,
        #000 0%,
        #000 70%,
        rgba(0,0,0,.96) 77%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.28) 91%,
        transparent 98%);
    mask-image:radial-gradient(circle at center,
        #000 0%,
        #000 70%,
        rgba(0,0,0,.96) 77%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.28) 91%,
        transparent 98%);
    filter:saturate(1.06) contrast(1.03) drop-shadow(0 0 32px rgba(32,126,255,.16))!important;
}

/* No extra route SVG or location labels in V8. */
.gcx-route-map,
.gcx-route-label{
    display:none!important;
}

/* Cards remain HTML/CSS, never baked into the globe. */
.gcx-service-card{
    z-index:10!important;
}


/* =========================================================
   V9 — EXACT USER-UPLOADED GLOBE IMAGE
   ========================================================= */

/* Do not crop, zoom, stretch, or redraw the user image. */
.gcx-globe-shell{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:min(690px,74vw)!important;
    aspect-ratio:1/1!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* The exact uploaded PNG is shown in full. */
.gcx-globe-shell .gcx-globe{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    border-radius:0!important;
    filter:
        saturate(1.02)
        contrast(1.01)
        drop-shadow(0 0 30px rgba(38,120,255,.16))!important;
    pointer-events:none!important;

    /* Blend only the square image edges into the hero background. */
    -webkit-mask-image:radial-gradient(
        ellipse at center,
        #000 0%,
        #000 73%,
        rgba(0,0,0,.98) 79%,
        rgba(0,0,0,.82) 86%,
        rgba(0,0,0,.45) 92%,
        transparent 99%
    )!important;
    mask-image:radial-gradient(
        ellipse at center,
        #000 0%,
        #000 73%,
        rgba(0,0,0,.98) 79%,
        rgba(0,0,0,.82) 86%,
        rgba(0,0,0,.45) 92%,
        transparent 99%
    )!important;
}

/* Keep all labels/cards as HTML/CSS outside the raster image. */
.gcx-service-card{
    z-index:10!important;
}

/* No extra SVG map/labels are painted over the uploaded image. */
.gcx-route-map,
.gcx-route-label{
    display:none!important;
}

@media(max-width:1250px){
    .gcx-globe-shell{width:min(610px,68vw)!important}
}
@media(max-width:980px){
    .gcx-globe-shell{width:min(590px,84vw)!important}
}
@media(max-width:700px){
    .gcx-globe-shell{width:min(470px,94vw)!important}
}


/* =========================================================
   V10 — STRONGER EDGE BLEND FOR USER GLOBE IMAGE
   ========================================================= */
.gcx-globe-shell .gcx-globe{
    -webkit-mask-image:radial-gradient(
        ellipse at center,
        #000 0%,
        #000 65%,
        rgba(0,0,0,.95) 72%,
        rgba(0,0,0,.70) 80%,
        rgba(0,0,0,.35) 88%,
        rgba(0,0,0,.10) 94%,
        transparent 100%
    )!important;

    mask-image:radial-gradient(
        ellipse at center,
        #000 0%,
        #000 65%,
        rgba(0,0,0,.95) 72%,
        rgba(0,0,0,.70) 80%,
        rgba(0,0,0,.35) 88%,
        rgba(0,0,0,.10) 94%,
        transparent 100%
    )!important;

    filter:
        saturate(1.02)
        contrast(1.01)
        drop-shadow(0 0 38px rgba(35,110,255,.13))!important;
}


/* =========================================================
   V11 — MUCH STRONGER GLOBE EDGE BLEND
   ========================================================= */

/* Start fading much further inside the image */
.gcx-globe-shell .gcx-globe{
    -webkit-mask-image:radial-gradient(
        circle at center,
        #000 0%,
        #000 52%,
        rgba(0,0,0,.96) 58%,
        rgba(0,0,0,.80) 65%,
        rgba(0,0,0,.52) 72%,
        rgba(0,0,0,.25) 79%,
        rgba(0,0,0,.08) 85%,
        transparent 92%
    )!important;

    mask-image:radial-gradient(
        circle at center,
        #000 0%,
        #000 52%,
        rgba(0,0,0,.96) 58%,
        rgba(0,0,0,.80) 65%,
        rgba(0,0,0,.52) 72%,
        rgba(0,0,0,.25) 79%,
        rgba(0,0,0,.08) 85%,
        transparent 92%
    )!important;

    filter:
        saturate(1.01)
        contrast(1.01)
        drop-shadow(0 0 30px rgba(30,105,235,.10))!important;
}

/* Extra navy veil over the outer image area */
.gcx-globe-shell::after{
    content:""!important;
    position:absolute!important;
    inset:-2%!important;
    z-index:3!important;
    pointer-events:none!important;
    border-radius:50%!important;
    background:radial-gradient(
        circle at center,
        transparent 0%,
        transparent 54%,
        rgba(3,8,21,.08) 61%,
        rgba(3,8,21,.24) 68%,
        rgba(3,8,21,.48) 76%,
        rgba(3,8,21,.74) 84%,
        rgba(3,8,21,.92) 91%,
        #030815 100%
    )!important;
}

/* Keep CSS service cards above the edge-blend overlay */
.gcx-service-card{
    z-index:12!important;
}


/* =========================================================
   V12 — REMOVE EMPTY HEADER / INDEX GAP
   ========================================================= */

/* Any empty second navigation row is removed completely. */
.gcx-empty-nav{
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
}

/* Common Eyoom navigation wrappers that become empty after header rearrangement. */
.gcx-header-rearranged #gnb:empty,
.gcx-header-rearranged .gnb:empty,
.gcx-header-rearranged .navbar:empty,
.gcx-header-rearranged .main-nav:empty,
.gcx-header-rearranged .eb-menu:empty,
.gcx-header-rearranged .header-nav:empty{
    display:none!important;
}

/* Remove old fixed guessed offsets from earlier versions.
   Use exact measured header height instead. */
.gcx-home{
    padding-top:var(--gcx-header-height,76px)!important;
}

/* Hero itself must start immediately after the fixed header. */
.gcx-hero{
    margin-top:0!important;
    padding-top:0!important;
}

/* Remove possible Eyoom spacing wrappers between head and home. */
header + *,
#header + *,
#hd + *,
.header-wrap + *,
.header-wrapper + *{
    margin-top:0!important;
}

#wrapper,
#wrap,
#container,
#container_wr,
#content,
.main-container,
.page-wrapper,
.content-wrapper,
.basic-body,
.eb-container,
.container-fluid{
    margin-top:0!important;
    padding-top:0!important;
}

/* The logo row itself is the complete visible header. */
.gcx-logo-row{
    margin-bottom:0!important;
    border-bottom:0!important;
}

/* Ensure the fixed header has no phantom minimum-height from theme CSS. */
.gcx-header-rearranged{
    min-height:0!important;
    height:auto!important;
}

/* Mobile uses the same measured value; do not reintroduce hard-coded offsets. */
@media(max-width:980px){
    .gcx-home{padding-top:var(--gcx-header-height,68px)!important}
}
@media(max-width:700px){
    .gcx-home{padding-top:var(--gcx-header-height,64px)!important}
}


/* =========================================================
   V13 — RUNTIME EXACT HEADER GAP REMOVAL
   ========================================================= */

/*
 * Do not create our own top gap.
 * JavaScript measures the visible fixed header and pulls .gcx-home
 * upward by any real spacer left by Eyoom.
 */
.gcx-home{
    padding-top:0!important;
    margin-top:0;
}

/* Hero begins at the first pixel of the homepage itself. */
.gcx-hero{
    margin-top:0!important;
    padding-top:0!important;
}

/* Aggressively neutralize common fixed-header spacer classes. */
.header-spacer,
.header-space,
.header-placeholder,
.fixed-header-spacer,
.fixed-header-space,
.sticky-header-spacer,
.sticky-header-space,
.header-gap,
.nav-spacer,
.gnb-spacer,
#header-spacer,
#header-space,
#fixed-header-spacer,
#sticky-header-spacer{
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
}

/* Never allow wrapper top spacing to reappear on the home page. */
body:has(.gcx-home) #wrapper,
body:has(.gcx-home) #wrap,
body:has(.gcx-home) #container,
body:has(.gcx-home) #container_wr,
body:has(.gcx-home) #content,
body:has(.gcx-home) .main-container,
body:has(.gcx-home) .page-wrapper,
body:has(.gcx-home) .content-wrapper,
body:has(.gcx-home) .basic-body,
body:has(.gcx-home) .eb-container{
    margin-top:0!important;
    padding-top:0!important;
}


/* =========================================================
   V14 — TIGHTEN VISITOR / LOGIN SPACING
   ========================================================= */

/* Keep the two right-side utilities as one compact group. */
.gcx-header-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    width:auto!important;
    flex:0 0 auto!important;
}

/* Remove any inherited spacing from the original Eyoom list items. */
.gcx-header-actions .gcx-header-action-item,
.gcx-header-actions li,
.gcx-header-actions > *{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    float:none!important;
}

/* Visitor sits immediately to the left of Login. */
.gcx-header-visitor{
    margin:0 2px 0 0!important;
    padding:0 4px!important;
    min-width:auto!important;
    width:auto!important;
}

/* Login should not inherit a large left margin. */
.gcx-header-login{
    margin:0!important;
    padding:0!important;
    min-width:auto!important;
    width:auto!important;
}

/* Compact login button. */
.gcx-header-login > a,
.gcx-header-action-item > a{
    margin:0!important;
    min-width:auto!important;
    width:auto!important;
    padding-left:8px!important;
    padding-right:8px!important;
}

/* Some Eyoom skins put utility items in positioned wrappers. Neutralize that. */
.gcx-header-actions [style*="margin-left"],
.gcx-header-actions [style*="left:"]{
    margin-left:0!important;
    left:auto!important;
}

@media(max-width:700px){
    .gcx-header-actions{gap:2px!important}
    .gcx-header-visitor{margin-right:1px!important;padding-left:2px!important;padding-right:2px!important}
    .gcx-header-login > a{padding-left:6px!important;padding-right:6px!important}
}


/* =========================================================
   V15 — PLATFORM LOGO SLOTS
   ========================================================= */

/* Site name + pure symbol logo */
.gcx-platform-title-row{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    margin-bottom:10px!important;
}

/*
 * Fixed visual slot: every source image, regardless of original dimensions,
 * is scaled to the largest size that fits without distortion/cropping.
 */
.gcx-platform-logo{
    width:58px!important;
    height:58px!important;
    flex:0 0 58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    padding:6px!important;
    box-sizing:border-box!important;
}

.gcx-platform-logo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
}

/* Before a file is uploaded, keep a subtle empty slot rather than broken image icon. */
.gcx-platform-logo-empty{
    background:
        radial-gradient(circle at center,rgba(96,150,255,.12),rgba(255,255,255,.025))!important;
}

.gcx-platform-title-row h3{
    margin:0!important;
    min-width:0!important;
}

/* Larger featured cards get a slightly larger symbol. */
.gcx-platform-feature .gcx-platform-logo,
.gcx-platform-blue .gcx-platform-logo{
    width:64px!important;
    height:64px!important;
    flex-basis:64px!important;
}

@media(max-width:700px){
    .gcx-platform-title-row{
        gap:12px!important;
    }
    .gcx-platform-logo,
    .gcx-platform-feature .gcx-platform-logo,
    .gcx-platform-blue .gcx-platform-logo{
        width:48px!important;
        height:48px!important;
        flex-basis:48px!important;
        border-radius:12px!important;
        padding:5px!important;
    }
}


/* =========================================================
   V16 — SIX EQUAL PLATFORM CARDS + RIGHT-SIDE PROMO IMAGES
   ========================================================= */

/* 3 equal columns x 2 rows on wide screens */
.gcx-platform-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
}

/* Every card is exactly the same grid width and visual height */
.gcx-platform,
.gcx-platform-feature,
.gcx-platform-blue,
.gcx-platform-full,
.gcx-platform-coming,
.gcx-platform-grid .gcx-platform:nth-child(1),
.gcx-platform-grid .gcx-platform:nth-child(2),
.gcx-platform-grid .gcx-platform:nth-child(3),
.gcx-platform-grid .gcx-platform:nth-child(4),
.gcx-platform-grid .gcx-platform:nth-child(5),
.gcx-platform-grid .gcx-platform:nth-child(6){
    grid-column:auto!important;
    min-height:330px!important;
    height:330px!important;
    padding:0!important;
    overflow:hidden!important;
}

/* Split each card into copy (62%) + promo image (38%) */
.gcx-platform-inner{
    width:100%!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,62fr) minmax(145px,38fr)!important;
    align-items:stretch!important;
}

.gcx-platform-copy{
    min-width:0!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    padding:26px 24px!important;
    position:relative!important;
    z-index:2!important;
}

.gcx-platform-copy-main{
    margin:auto 0!important;
    min-width:0!important;
}

.gcx-platform-copy > strong{
    margin-top:auto!important;
}

/* Right-side image area */
.gcx-platform-media{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    border-left:1px solid rgba(255,255,255,.08)!important;
    background:
        radial-gradient(circle at 45% 40%,rgba(70,135,255,.12),transparent 48%),
        rgba(255,255,255,.018)!important;
}

/* Any source dimensions fill the entire allocated image panel */
.gcx-platform-media img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
}

/* Soft blend toward the text side */
.gcx-platform-media::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
        linear-gradient(90deg,
            rgba(7,14,28,.42) 0%,
            rgba(7,14,28,.08) 20%,
            transparent 45%)!important;
}

.gcx-platform-media-empty{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.gcx-platform-media-empty span{
    color:rgba(145,174,220,.30)!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.22em!important;
}

/* Logo/title row stays compact */
.gcx-platform-title-row{
    margin-top:6px!important;
    margin-bottom:10px!important;
}
.gcx-platform-title-row h3{
    font-size:clamp(21px,1.55vw,29px)!important;
    line-height:1.05!important;
}

/* Text must not overflow equal-height cards */
.gcx-platform-copy p{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}

/* The previous featured cards keep subtle brand background, but not special size */
.gcx-platform-feature{
    background:linear-gradient(145deg,rgba(114,70,255,.18),rgba(30,84,205,.07))!important;
}
.gcx-platform-blue{
    background:linear-gradient(145deg,rgba(32,131,255,.13),rgba(255,255,255,.03))!important;
}

/* Responsive: 2 columns on medium widths */
@media(max-width:1280px){
    .gcx-platform-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .gcx-platform,
    .gcx-platform-feature,
    .gcx-platform-blue,
    .gcx-platform-full,
    .gcx-platform-coming{
        height:320px!important;
        min-height:320px!important;
    }

    .gcx-platform-inner{
        grid-template-columns:minmax(0,60fr) minmax(140px,40fr)!important;
    }
}

/* Mobile: one card per row, image remains on right */
@media(max-width:760px){
    .gcx-platform-grid{
        grid-template-columns:1fr!important;
    }

    .gcx-platform,
    .gcx-platform-feature,
    .gcx-platform-blue,
    .gcx-platform-full,
    .gcx-platform-coming{
        height:270px!important;
        min-height:270px!important;
    }

    .gcx-platform-inner{
        grid-template-columns:minmax(0,62fr) minmax(112px,38fr)!important;
    }

    .gcx-platform-copy{
        padding:20px 16px!important;
    }

    .gcx-platform-copy p{
        -webkit-line-clamp:3!important;
        font-size:11px!important;
    }

    .gcx-platform-title-row{
        gap:9px!important;
    }

    .gcx-platform-title-row h3{
        font-size:19px!important;
    }
}

/* =========================================================
   PLATFORM IMAGE AREA V17
   Wider image area + show complete image without cropping
   ========================================================= */

.gcx-platform-inner {
    grid-template-columns:
        minmax(0, 55fr)
        minmax(0, 45fr) !important;
}

/* 이미지 영역을 더 넓게 */
.gcx-platform-media {
    width:100% !important;
    height:100% !important;
    padding:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;

    background:
        radial-gradient(
            circle at center,
            rgba(73,125,255,.10),
            rgba(7,14,28,.025) 70%
        ) !important;
}

/* 이미지 전체가 반드시 보이도록 */
.gcx-platform-media img {
    position:static !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    display:block !important;
}

/* 기존 이미지 위 그라데이션을 약하게 */
.gcx-platform-media::after {
    background:
        linear-gradient(
            90deg,
            rgba(7,14,28,.20) 0%,
            rgba(7,14,28,.04) 12%,
            transparent 28%
        ) !important;
}

/* 중간 화면 */
@media (max-width:1280px) {
    .gcx-platform-inner {
        grid-template-columns:
            minmax(0, 54fr)
            minmax(0, 46fr) !important;
    }
}

/* 모바일도 이미지 영역을 충분히 확보 */
@media (max-width:760px) {
    .gcx-platform-inner {
        grid-template-columns:
            minmax(0, 52fr)
            minmax(0, 48fr) !important;
    }

    .gcx-platform-media {
        padding:8px !important;
    }
}


/* =========================================================
   PLATFORM IMAGE HOVER PREVIEW
   Original preview size: 600 x 800px
   ========================================================= */

/* 카드의 이미지 영역 */
.gcx-platform-media {
    position:relative !important;
    cursor:zoom-in !important;
    overflow:visible !important;
}

/* 원래 카드 안 이미지 */
.gcx-platform-media img {
    transition:
        transform .22s ease,
        filter .22s ease !important;
}

/* 마우스를 올렸다는 것을 살짝 표현 */
.gcx-platform-media:hover > img {
    filter:
        brightness(.72)
        saturate(.9) !important;
}

/* 확대 이미지 */
.gcx-platform-media:hover > img {
    position:fixed !important;

    width:600px !important;
    height:800px !important;

    max-width:none !important;
    max-height:none !important;

    left:50% !important;
    top:50% !important;

    transform:
        translate(-50%, -50%)
        scale(.78) !important;

    object-fit:contain !important;
    object-position:center !important;

    z-index:100001 !important;

    background:#050b18 !important;

    border:1px solid rgba(112,165,255,.38) !important;
    border-radius:18px !important;

    padding:8px !important;

    box-shadow:
        0 30px 100px rgba(0,0,0,.75),
        0 0 60px rgba(46,126,255,.20) !important;

    filter:none !important;

    animation:gcx-image-preview-in .18s ease forwards !important;

    cursor:zoom-out !important;
}

@keyframes gcx-image-preview-in {
    from {
        opacity:0;
        transform:
            translate(-50%, -50%)
            scale(.70);
    }

    to {
        opacity:1;
        transform:
            translate(-50%, -50%)
            scale(.78);
    }
}

/*
 * 화면 높이가 충분한 모니터에서는
 * 정확한 원본 600 x 800px 크기로 표시
 */
@media (min-height:900px) and (min-width:900px) {

    .gcx-platform-media:hover > img {
        transform:
            translate(-50%, -50%)
            scale(1) !important;
    }

    @keyframes gcx-image-preview-in {
        from {
            opacity:0;
            transform:
                translate(-50%, -50%)
                scale(.90);
        }

        to {
            opacity:1;
            transform:
                translate(-50%, -50%)
                scale(1);
        }
    }
}

/*
 * 모바일/터치 화면에서는 hover 확대를 사용하지 않음
 */
@media (hover:none), (max-width:760px) {

    .gcx-platform-media:hover > img {
        position:static !important;

        width:100% !important;
        height:100% !important;

        max-width:100% !important;
        max-height:100% !important;

        transform:none !important;

        border:0 !important;
        border-radius:0 !important;
        padding:0 !important;
        box-shadow:none !important;

        object-fit:contain !important;
        filter:none !important;

        animation:none !important;
    }
}


/* =========================================================
   PLATFORM IMAGE HOVER - OUTSIDE CARD
   600 x 800 floating preview
   ========================================================= */

/*
 * 중요:
 * 기존 카드의 overflow:hidden 때문에 확대 이미지가 잘리지 않도록
 * 이미지에 hover할 때 해당 카드와 상위 영역의 overflow를 해제합니다.
 */
.gcx-platform-grid,
.gcx-platform {
    overflow: visible !important;
}

/*
 * 단, 평상시 카드의 둥근 디자인은 내부 wrapper에서 유지
 */
.gcx-platform-inner {
    overflow: hidden !important;
    border-radius: inherit !important;
}

/* 작은 이미지 */
.gcx-platform-media img {
    cursor: zoom-in !important;

    transition:
        opacity .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

/*
 * 이미지에 마우스를 올리면
 * 카드와 무관하게 브라우저 화면 중앙으로 이동
 */
.gcx-platform-media:hover img {
    position: fixed !important;

    left: 50% !important;
    top: 50% !important;

    width: 600px !important;
    height: 800px !important;

    max-width: none !important;
    max-height: none !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    object-fit: contain !important;
    object-position: center center !important;

    z-index: 999999 !important;

    padding: 8px !important;

    background: #050b18 !important;

    border:
        1px solid rgba(110,160,255,.38) !important;

    border-radius: 18px !important;

    box-shadow:
        0 35px 110px rgba(0,0,0,.80),
        0 0 70px rgba(50,125,255,.25) !important;

    cursor: zoom-out !important;

    animation:
        gcx-card-image-popup .18s ease-out !important;
}


/* 등장 애니메이션 */
@keyframes gcx-card-image-popup {

    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.90);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/*
 * 높이가 800px보다 작은 모니터에서는
 * 이미지 전체가 화면 안에 들어오도록 자동 축소
 */
@media (max-height: 860px) {

    .gcx-platform-media:hover img {

        width: auto !important;
        height: 82vh !important;

        max-width: 90vw !important;

        aspect-ratio: 600 / 800 !important;

        object-fit: contain !important;
    }
}


/*
 * 모바일/터치 기기에서는 hover 확대 사용 안 함
 */
@media (hover: none), (max-width: 760px) {

    .gcx-platform-media:hover img {

        position: static !important;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        transform: none !important;

        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        animation: none !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   FORCE IMAGE PREVIEW OUTSIDE PLATFORM CARD
   ========================================================= */

/*
 * 핵심:
 * hover 중에는 카드/그리드 상위 요소의
 * overflow, transform, filter, contain을 모두 해제
 */
.gcx-platforms:has(.gcx-platform-media:hover),
.gcx-platform-grid:has(.gcx-platform-media:hover),
.gcx-platform:has(.gcx-platform-media:hover),
.gcx-platform-inner:has(.gcx-platform-media:hover),
.gcx-platform-media:hover {
    overflow: visible !important;

    transform: none !important;
    filter: none !important;

    contain: none !important;
    perspective: none !important;

    clip: auto !important;
    clip-path: none !important;

    mask: none !important;
    -webkit-mask: none !important;
}

/* 카드 hover 자체의 translate 효과도 중지 */
.gcx-platform:has(.gcx-platform-media:hover) {
    transform: none !important;
    z-index: 999998 !important;
}

/* 이미지 wrapper가 fixed 이미지의 기준점이 되지 않도록 */
.gcx-platform-media:hover {
    position: static !important;
}

/*
 * 실제 이미지는 브라우저 viewport 중앙으로 이동
 */
.gcx-platform-media:hover img {
    position: fixed !important;

    left: 50vw !important;
    top: 50vh !important;

    width: 600px !important;
    height: 800px !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 8px !important;

    transform: translate(-50%, -50%) !important;

    object-fit: contain !important;
    object-position: center !important;

    z-index: 2147483647 !important;

    background: #050b18 !important;

    border: 1px solid rgba(110,160,255,.4) !important;
    border-radius: 18px !important;

    box-shadow:
        0 35px 120px rgba(0,0,0,.88),
        0 0 80px rgba(50,125,255,.28) !important;

    cursor: zoom-out !important;
}

/*
 * 확대 이미지 위로 카드의 pseudo-element가 올라오지 않도록
 */
.gcx-platform:has(.gcx-platform-media:hover)::before,
.gcx-platform:has(.gcx-platform-media:hover)::after,
.gcx-platform-media:hover::before,
.gcx-platform-media:hover::after {
    display: none !important;
}

/*
 * 화면 높이가 800px보다 작으면
 * 비율 유지하면서 화면 안에 맞춤
 */
@media (max-height: 860px) {

    .gcx-platform-media:hover img {
        width: auto !important;
        height: 82vh !important;

        max-width: 90vw !important;

        aspect-ratio: 600 / 800 !important;
    }
}

/* 터치기기는 hover preview 사용 안 함 */
@media (hover:none), (max-width:760px) {

    .gcx-platform-media:hover img {
        position: static !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        transform: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}



/* GC SOFT HEADER SITE LOGO - brighter */
.site-logo {
    filter: brightness(1.8) contrast(1.1) saturate(1.15) !important;
    -webkit-filter: brightness(1.8) contrast(1.1) saturate(1.15) !important;
}

/* =========================================================
   GC SOFT SERVICE CARDS - 4 IMAGES IN ONE ROW
   ========================================================= */

.gcx-service-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gcx-service-grid article {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: none !important;
    border-radius: 18px !important;
}

.gcx-service-grid article img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px !important;
}

/* Tablet */
@media (max-width: 900px) {
    .gcx-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .gcx-service-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SERVICE IMAGES - ALIGN WITH BUILD TITLE + WIDER
   ========================================================= */

.gcx-service-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.gcx-service-grid article {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.gcx-service-grid article img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Tablet */
@media (max-width: 900px) {
    .gcx-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .gcx-service-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   GC SOFT MODERN HERO SERVICE ICONS
   ========================================================= */

.gcx-service-card .gcx-service-icon {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 15px !important;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(117, 190, 255, .24),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(52, 119, 224, .22),
            rgba(10, 39, 83, .48)
        ) !important;

    border: 1px solid rgba(112, 178, 255, .48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -8px 18px rgba(0, 37, 95, .18),
        0 0 0 1px rgba(43, 114, 225, .06),
        0 8px 22px rgba(0, 0, 0, .18),
        0 0 18px rgba(55, 135, 255, .16) !important;

    color: #7fc2ff !important;
}

.gcx-service-card .gcx-service-icon svg {
    display: block !important;

    width: 27px !important;
    height: 27px !important;

    fill: none !important;
    stroke: #83c7ff !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    overflow: visible !important;

    filter:
        drop-shadow(0 0 4px rgba(70, 159, 255, .60))
        drop-shadow(0 0 9px rgba(40, 112, 255, .22)) !important;
}

/* WEB */
.gcx-icon-web svg {
    stroke: #83c7ff !important;
}

/* ANDROID */
.gcx-icon-android svg {
    stroke: #70d6ff !important;
}

/* CLOUD */
.gcx-icon-cloud svg {
    stroke: #79c8ff !important;
}

/* SUPPORT */
.gcx-icon-support svg {
    stroke: #8bcaff !important;
}

/* subtle interaction */
.gcx-service-card {
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

.gcx-service-card .gcx-service-icon,
.gcx-service-card .gcx-service-icon svg {
    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease !important;
}

.gcx-service-card:hover .gcx-service-icon {
    transform: translateY(-1px) !important;

    border-color: rgba(135, 200, 255, .72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 8px 24px rgba(0, 0, 0, .20),
        0 0 24px rgba(55, 145, 255, .28) !important;
}

.gcx-service-card:hover .gcx-service-icon svg {
    transform: scale(1.06) !important;

    filter:
        drop-shadow(0 0 5px rgba(91, 181, 255, .78))
        drop-shadow(0 0 12px rgba(46, 128, 255, .32)) !important;
}


/* Mobile */
@media (max-width: 700px) {

    .gcx-service-card .gcx-service-icon {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        border-radius: 13px !important;
    }

    .gcx-service-card .gcx-service-icon svg {
        width: 23px !important;
        height: 23px !important;
    }
}



/* ==================================================
   GC SOFT REALISTIC ROTATING EARTH
   Cards remain fixed outside the globe layer.
   ================================================== */

.gcx-globe-shell {
    overflow: visible !important;
}

/*
 * Keep original globe only as a sizing/reference layer.
 * It is hidden visually but remains in the DOM.
 */
.gcx-globe-original {
    opacity: 0 !important;
    visibility: hidden !important;
}

/*
 * Actual rotating Earth.
 * 23.5deg approximates the Earth's natural axial tilt.
 */
.gcx-real-earth {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 50% !important;

    overflow: hidden !important;

    transform:
        rotate(-23.5deg)
        scale(0.97);

    transform-origin: 50% 50% !important;

    z-index: 2 !important;

    background: #061a2f;

    box-shadow:
        inset -45px -18px 70px rgba(0, 0, 0, 0.72),
        inset 25px 10px 45px rgba(70, 165, 255, 0.20),
        0 0 25px rgba(44, 147, 255, 0.30),
        0 0 60px rgba(23, 112, 225, 0.20);

    will-change: transform;
}


/*
 * Moving equirectangular Earth texture.
 * The sphere stays still; the map moves beneath it.
 * This looks much more like real planetary rotation
 * than rotating a flat image.
 */
.gcx-real-earth-texture {
    position: absolute;

    left: -50%;
    top: 0;

    width: 200%;
    height: 100%;

    border-radius: 50%;

    background-image:
        url("../image/gcsoft-earth-texture.jpg");

    background-repeat: repeat-x;

    background-size: 50% 100%;

    background-position: 0% center;

    filter:
        saturate(1.15)
        contrast(1.08)
        brightness(0.92);

    animation:
        gcsoft-earth-spin 48s linear infinite;

    will-change: background-position;
}


/*
 * Fixed directional lighting.
 * The light does NOT rotate with the continents.
 */
.gcx-real-earth-light {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 32% 26%,
            rgba(255,255,255,0.32) 0%,
            rgba(145,205,255,0.14) 19%,
            rgba(0,0,0,0) 43%
        ),
        linear-gradient(
            105deg,
            rgba(255,255,255,0.09) 0%,
            rgba(255,255,255,0.02) 38%,
            rgba(0,0,0,0.28) 67%,
            rgba(0,0,0,0.72) 100%
        );

    box-shadow:
        inset -50px -10px 65px rgba(0,0,0,0.52);

    z-index: 4;
}


/*
 * Thin blue atmospheric edge.
 */
.gcx-real-earth-atmosphere {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    border: 2px solid rgba(109, 192, 255, 0.34);

    box-shadow:
        inset 0 0 24px rgba(80, 174, 255, 0.25),
        inset 0 0 55px rgba(13, 87, 178, 0.16),
        0 0 13px rgba(103, 190, 255, 0.30),
        0 0 42px rgba(34, 127, 235, 0.20);

    z-index: 5;
}


/*
 * Real rotation illusion:
 * continents move horizontally around the sphere.
 */
@keyframes gcsoft-earth-spin {

    from {
        background-position: 0% center;
    }

    to {
        background-position: -100% center;
    }

}


/*
 * Cards stay completely stationary.
 */
.gcx-world > .gcx-service-card {
    z-index: 20 !important;
    transform-origin: center !important;
}


/*
 * Respect accessibility preference.
 */
@media (prefers-reduced-motion: reduce) {

    .gcx-real-earth-texture {
        animation: none !important;
    }

}


/* Mobile */
@media (max-width: 700px) {

    .gcx-real-earth {
        transform:
            rotate(-23.5deg)
            scale(0.96);
    }

}



/* =========================================================
   V13 — TRUE 3D EARTH, EXACT EXISTING GLOBE POSITION
   ========================================================= */

/*
 * DO NOT change the existing globe-shell geometry.
 * The existing V9 values remain authoritative.
 */

.gcx-globe-shell{
    isolation:isolate!important;
}

/*
 * Original approved image remains visible as fallback.
 */
.gcx-globe-shell > .gcx-globe{
    z-index:1!important;
    opacity:1!important;
    visibility:visible!important;
}

/*
 * WebGL canvas occupies exactly the same shell.
 */
.gcx-globe-shell > .gcx-three-earth{
    position:absolute!important;
    inset:0!important;

    width:100%!important;
    height:100%!important;

    display:block!important;

    z-index:2!important;

    pointer-events:none!important;

    opacity:0;

    transition:opacity .7s ease;

    border-radius:50%!important;

    filter:
        drop-shadow(0 0 24px rgba(40,125,255,.18))
        drop-shadow(0 0 52px rgba(25,90,210,.12));
}

/*
 * Only after WebGL renders successfully do we switch
 * from the original image to the real 3D Earth.
 */
.gcx-globe-shell.gcx-3d-ready > .gcx-three-earth{
    opacity:1!important;
}

.gcx-globe-shell.gcx-3d-ready > .gcx-globe{
    opacity:0!important;
}

/*
 * Existing V11 navy edge veil stays above the globe.
 */
.gcx-globe-shell::after{
    z-index:4!important;
}

/*
 * Four service cards always remain stationary.
 */
.gcx-service-card{
    z-index:20!important;
}



/* =========================================================
   V14 — REAL NIGHT EARTH
   ========================================================= */

.gcx-globe-shell {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(690px, 74vw) !important;
    aspect-ratio: 1 / 1 !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    border-radius: 50% !important;
    background: transparent !important;
    isolation: isolate !important;
}

/* Original image stays as fallback until WebGL is ready */
.gcx-globe-shell .gcx-globe-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transition: opacity .8s ease !important;
}

/* Real 3D globe */
.gcx-night-earth {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 0;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: opacity .8s ease;
}

/* Only switch after first successful WebGL render */
.gcx-globe-shell.gcx-night-earth-ready .gcx-night-earth {
    opacity: 1 !important;
}

.gcx-globe-shell.gcx-night-earth-ready .gcx-globe-fallback {
    opacity: 0 !important;
}

/* Existing edge veil stays above globe */
.gcx-globe-shell::after {
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Cards do not move */
.gcx-service-card {
    z-index: 20 !important;
}

@media(max-width:1250px){
    .gcx-globe-shell{
        width:min(610px,68vw)!important;
    }
}

@media(max-width:980px){
    .gcx-globe-shell{
        width:min(590px,84vw)!important;
    }
}

@media(max-width:700px){
    .gcx-globe-shell{
        width:min(470px,94vw)!important;
    }
}



/* =========================================================
   V15 — NIGHT EARTH VISIBILITY FIX
   ========================================================= */

/*
 * Let the whole globe remain visible.
 * Previous V11 veil was too strong and made the globe
 * appear cropped at the left and right edges.
 */
.gcx-globe-shell::after {
    inset: -1% !important;

    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 72%,
        rgba(3,8,21,.04) 80%,
        rgba(3,8,21,.12) 88%,
        rgba(3,8,21,.28) 95%,
        rgba(3,8,21,.45) 100%
    ) !important;
}


/*
 * Make the night Earth slightly brighter and richer
 * without washing out the dark oceans.
 */
.gcx-night-earth {
    filter:
        brightness(1.16)
        contrast(1.08)
        saturate(1.18)
        drop-shadow(0 0 18px rgba(55,145,255,.25))
        drop-shadow(0 0 42px rgba(25,95,220,.18)) !important;
}



/* =========================================================
   V16 — SATELLITE NIGHT EARTH
   ========================================================= */

.gcx-night-earth {
    filter:
        brightness(1.08)
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 0 14px rgba(55,150,255,.28))
        drop-shadow(0 0 38px rgba(20,95,220,.20)) !important;
}


/*
 * Keep the rim visible but do not cover the globe.
 */
.gcx-globe-shell::after {
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 76%,
        rgba(3,8,21,.03) 84%,
        rgba(3,8,21,.10) 91%,
        rgba(3,8,21,.22) 97%,
        rgba(3,8,21,.30) 100%
    ) !important;
}



/* =========================================================
   V17 — GC SOFT BLUE NIGHT EARTH
   ========================================================= */

/*
 * Match the rotating Earth to the GC Soft navy / electric-blue
 * visual system while preserving the existing size and position.
 */
.gcx-night-earth {
    filter:
        brightness(0.94)
        contrast(1.15)
        saturate(1.28)
        hue-rotate(7deg)
        drop-shadow(0 0 12px rgba(45,145,255,.34))
        drop-shadow(0 0 34px rgba(20,105,245,.24))
        drop-shadow(0 0 62px rgba(12,70,190,.13))
        !important;
}


/*
 * Softer edge blend so the globe fades naturally
 * into the dark navy hero background.
 */
.gcx-globe-shell::after {
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 78%,
        rgba(3,8,21,.02) 84%,
        rgba(3,8,21,.08) 90%,
        rgba(3,8,21,.17) 95%,
        rgba(3,8,21,.32) 100%
    ) !important;
}



/* =========================================================
   V18 — SHARPER 3D EARTH
   ========================================================= */

.gcx-night-earth {
    filter:
        brightness(0.97)
        contrast(1.24)
        saturate(1.22)
        hue-rotate(5deg)
        drop-shadow(0 0 10px rgba(45,145,255,.30))
        drop-shadow(0 0 28px rgba(20,105,245,.20))
        !important;
}


/* =========================================================
   V19 — HIDE STATIC GLOBE DURING 3D LOADING
   ========================================================= */

.gcx-globe-shell .gcx-globe-fallback {
    opacity: 0 !important;
    visibility: hidden !important;
}

.gcx-globe-shell.gcx-night-earth-ready .gcx-globe-fallback {
    opacity: 0 !important;
    visibility: hidden !important;
}



/* =========================================================
   V20 — INDIGO EARTH ATMOSPHERE
   ========================================================= */

/*
 * A softer indigo halo bridges the cool Earth colours
 * and the deep navy GC Soft background.
 */
.gcx-night-earth {
    filter:
        brightness(0.97)
        contrast(1.24)
        saturate(1.22)
        hue-rotate(5deg)
        drop-shadow(0 0 8px rgba(108,130,255,.40))
        drop-shadow(0 0 22px rgba(82,104,235,.28))
        drop-shadow(0 0 48px rgba(57,72,190,.17))
        drop-shadow(0 0 80px rgba(35,45,125,.08))
        !important;
}


/*
 * Blend the outermost edge gradually into #030815.
 */
.gcx-globe-shell::after {
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 77%,
        rgba(45,58,145,.025) 82%,
        rgba(38,48,125,.055) 87%,
        rgba(25,34,92,.10) 92%,
        rgba(12,19,55,.19) 97%,
        rgba(3,8,21,.32) 100%
    ) !important;
}


/* =========================================================
   V22 — CRISPER EARTH RENDERING
   ========================================================= */

.gcx-night-earth {
    image-rendering: auto !important;

    filter:
        brightness(0.98)
        contrast(1.30)
        saturate(1.18)
        drop-shadow(0 0 8px rgba(90,155,255,.24))
        drop-shadow(0 0 22px rgba(55,105,230,.16))
        !important;
}


/* =========================================================
   V23 — REMOVE WHITE FLASH BEFORE 3D EARTH LOAD
   ========================================================= */

/* Globe container must always inherit the dark hero colour. */
.gcx-globe-shell {
    background: transparent !important;
}

/* Never show the old static globe while WebGL is loading. */
.gcx-globe-shell .gcx-globe-fallback,
.gcx-globe-shell .gcx-globe {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Canvas starts fully transparent. */
.gcx-night-earth {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

/* Show only after Three.js has rendered successfully. */
.gcx-globe-shell.gcx-night-earth-ready .gcx-night-earth {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep all pseudo layers transparent before render. */
.gcx-globe-shell::before {
    background: transparent !important;
}

/* Prevent browser default canvas/image background flashes. */
#gcx-night-earth {
    background-color: transparent !important;
}


/* =========================================================
   V24 — ABSOLUTELY NO WHITE FLASH
   ========================================================= */

/*
 * The complete globe area must remain transparent/dark
 * until Three.js has successfully rendered.
 */
.gcx-world,
.gcx-globe-shell {
    background-color: transparent !important;
}

/*
 * Never display the legacy raster fallback during loading.
 */
.gcx-globe-shell > img,
.gcx-globe-shell .gcx-globe,
.gcx-globe-shell .gcx-globe-fallback {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

/*
 * WebGL canvas starts invisible.
 */
#gcx-night-earth,
.gcx-night-earth {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Show WebGL only after the engine confirms the first render.
 */
.gcx-globe-shell.gcx-night-earth-ready #gcx-night-earth,
.gcx-globe-shell.gcx-night-earth-ready .gcx-night-earth {
    opacity: 1 !important;
    visibility: visible !important;
}

/*
 * Prevent browser default image/canvas decoration.
 */
.gcx-globe-shell canvas,
.gcx-globe-shell img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none;
}

/*
 * Keep pseudo layers from producing a loading rectangle.
 */
.gcx-globe-shell::before {
    background: transparent !important;
    border: 0 !important;
}


/* =========================================================
   V25 — PERMANENT NO-FLASH GLOBE BOOT
   ========================================================= */

/*
 * Nothing in the globe shell is allowed to create
 * an opaque loading background.
 */
.gcx-globe-shell {
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * The old static globe is no longer present in HTML.
 * These rules remain as a safety net.
 */
.gcx-globe-shell img.gcx-globe,
.gcx-globe-shell img.gcx-globe-fallback,
.gcx-globe-shell img.gcx-globe-original {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/*
 * WebGL canvas has no browser background of its own.
 */
.gcx-globe-shell canvas,
#gcx-night-earth {
    background: transparent !important;
    background-color: rgba(0,0,0,0) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/*
 * No pseudo-element may create a rectangular loading layer.
 */
.gcx-globe-shell::before {
    content: none !important;
}

/*
 * Existing radial edge treatment may remain,
 * but it must never have a rectangular base colour.
 */
.gcx-globe-shell::after {
    border: 0 !important;
    box-shadow: none !important;
}



/* =========================================================
   V26 — MOBILE ROTATING EARTH VISIBILITY / STABILITY
   2026-09-20
   ========================================================= */

/*
 * The 3D Earth remains the primary globe on mobile.
 * Keep the shell inside the viewport and provide enough
 * physical height for WebGL/ResizeObserver initialization.
 */
@media (max-width:700px) {

    .gcx-world {
        position:relative !important;
        min-height:430px !important;
        width:100% !important;
        overflow:visible !important;
    }

    .gcx-globe-shell {
        display:block !important;
        position:absolute !important;

        left:50% !important;
        top:50% !important;

        width:min(420px,92vw) !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;

        transform:translate(-50%,-50%) !important;

        visibility:visible !important;

        overflow:visible !important;
        background:transparent !important;
    }

    .gcx-globe-shell #gcx-night-earth,
    .gcx-globe-shell .gcx-night-earth {
        display:block !important;

        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        max-width:none !important;

        background:transparent !important;
        border:0 !important;
    }

    /*
     * The canvas becomes visible only after Three.js confirms
     * a successful first render.
     */
    .gcx-globe-shell.gcx-night-earth-ready #gcx-night-earth,
    .gcx-globe-shell.gcx-night-earth-ready .gcx-night-earth {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}


/*
 * Slightly smaller Earth for very narrow phones.
 */
@media (max-width:420px) {

    .gcx-world {
        min-height:390px !important;
    }

    .gcx-globe-shell {
        width:min(370px,90vw) !important;
    }
}


/* =========================================================
   V27 — FINAL MOBILE EARTH CANVAS VISIBILITY
   2026-09-20
   ========================================================= */

@media (max-width:700px) {

    .gcx-world {
        display:block !important;
        position:relative !important;
        min-height:430px !important;
        overflow:visible !important;
    }

    .gcx-globe-shell {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        position:absolute !important;
        left:50% !important;
        top:50% !important;

        width:min(420px,92vw) !important;
        aspect-ratio:1 / 1 !important;

        transform:translate(-50%,-50%) !important;

        overflow:visible !important;
        z-index:2 !important;
    }

    /*
     * Inline HTML originally starts the canvas hidden.
     * On mobile, allow the WebGL canvas to be visible
     * immediately. The renderer itself has a transparent
     * background, so this creates no white flash.
     */
    #gcx-night-earth.gcx-night-earth {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        z-index:2 !important;
        background:transparent !important;
    }

    .gcx-service-card {
        z-index:4 !important;
    }
}

@media (max-width:420px) {

    .gcx-world {
        min-height:390px !important;
    }

    .gcx-globe-shell {
        width:min(370px,90vw) !important;
    }
}


/* =========================================================
   V34 — MOBILE HEADER LOGIN ONLY
   Logo left / Lock + Login right
   ========================================================= */

@media (max-width:991px) {

    /*
     * Restore and preserve the actual top header.
     */
    body:has(.gcx-home) .header-title {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        position:relative !important;

        min-height:64px !important;
        height:64px !important;

        overflow:visible !important;
    }

    body:has(.gcx-home) .header-title > .container {
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        position:relative !important;

        width:100% !important;
        height:64px !important;
        min-height:64px !important;

        overflow:visible !important;
    }

    /*
     * Logo stays on the left.
     */
    body:has(.gcx-home) .header-title .title-logo {
        display:flex !important;
        align-items:center !important;

        position:relative !important;

        flex:0 1 auto !important;

        margin:0 !important;

        visibility:visible !important;
        opacity:1 !important;
    }

    body:has(.gcx-home) .header-title .title-logo img {
        display:block !important;

        width:auto !important;
        max-width:190px !important;
        height:40px !important;

        object-fit:contain !important;

        visibility:visible !important;
        opacity:1 !important;
    }

    /*
     * The original mobile container now contains LOGIN only.
     */
    body:has(.gcx-home) .header-title-mobile-btn {
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        position:absolute !important;

        top:50% !important;
        right:14px !important;
        bottom:auto !important;
        left:auto !important;

        transform:translateY(-50%) !important;

        width:auto !important;
        height:40px !important;

        margin:0 !important;
        padding:0 !important;

        visibility:visible !important;
        opacity:1 !important;

        z-index:50 !important;
    }

    /*
     * LOGIN only.
     */
    body:has(.gcx-home) .gcx-direct-mobile-login {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:auto !important;
        height:36px !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        visibility:visible !important;
        opacity:1 !important;
    }

    body:has(.gcx-home) .gcx-direct-mobile-login > a {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:6px !important;

        height:36px !important;

        margin:0 !important;
        padding:0 8px !important;

        color:inherit !important;

        font-size:11px !important;
        font-weight:700 !important;
        line-height:36px !important;

        white-space:nowrap !important;
        text-decoration:none !important;
    }

    body:has(.gcx-home) .gcx-direct-mobile-login > a > i {
        display:inline-block !important;

        margin:0 !important;
        padding:0 !important;

        font-size:13px !important;
        line-height:1 !important;
    }

    /*
     * Hide legacy Login/visitor wrapper.
     */
    body:has(.gcx-home) .gcx-header-actions,
    body:has(.gcx-home) .gcx-header-login,
    body:has(.gcx-home) .gcx-header-visitor {
        display:none !important;
    }

    /*
     * Defensive removal of unused mobile controls.
     */
    body:has(.gcx-home) .mobile-search-btn,
    body:has(.gcx-home) .navbar-mobile-toggler,
    body:has(.gcx-home) .sidebar-user-trigger,
    body:has(.gcx-home) .sidebar-user-btn {
        display:none !important;
    }
}


@media (max-width:390px) {

    body:has(.gcx-home) .header-title .title-logo img {
        max-width:165px !important;
        height:36px !important;
    }

    body:has(.gcx-home) .header-title-mobile-btn {
        right:8px !important;
    }

    body:has(.gcx-home) .gcx-direct-mobile-login > a {
        padding-left:5px !important;
        padding-right:5px !important;

        font-size:10px !important;
    }
}


/* =========================================================
   V35 — MOBILE HEADER STABILITY
   No post-load header rearrangement.
   ========================================================= */

@media (max-width:991px) {

    body:has(.gcx-home) #header,
    body:has(.gcx-home) #hd,
    body:has(.gcx-home) header {
        visibility:visible !important;
        opacity:1 !important;
    }

    body:has(.gcx-home) .header-title {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        height:64px !important;
        min-height:64px !important;

        overflow:visible !important;
    }

    body:has(.gcx-home) .header-title .container {
        display:flex !important;
        align-items:center !important;

        position:relative !important;

        height:64px !important;
        min-height:64px !important;

        overflow:visible !important;
    }

    body:has(.gcx-home) .title-logo,
    body:has(.gcx-home) .title-logo img {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    body:has(.gcx-home) .header-title-mobile-btn {
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

        position:absolute !important;
        top:50% !important;
        right:12px !important;

        transform:translateY(-50%) !important;

        z-index:100 !important;
    }

    body:has(.gcx-home) .gcx-direct-mobile-login,
    body:has(.gcx-home) .gcx-direct-mobile-login > a,
    body:has(.gcx-home) .gcx-direct-mobile-login > a > i,
    body:has(.gcx-home) .gcx-direct-mobile-login > a > span {
        visibility:visible !important;
        opacity:1 !important;
    }
}


/* =========================================================
   V36 — REMOVE OLD MOBILE TOP LOGIN BAR
   Keep only logo-row lock LOGIN.
   ========================================================= */

@media (max-width:991px) {

    /*
     * Eyoom original utility/top bar contains the old
     * unlock-icon Login. It is not needed on GC Soft home.
     */
    body:has(.gcx-home) .top-header,
    body:has(.gcx-home) .header-top,
    body:has(.gcx-home) .top-header-nav,
    body:has(.gcx-home) .top-bar,
    body:has(.gcx-home) .topbar {
        display:none !important;

        height:0 !important;
        min-height:0 !important;
        max-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        overflow:hidden !important;
    }

    /*
     * Make sure the real logo/Login header begins immediately
     * after the browser chrome with no empty utility-bar gap.
     */
    body:has(.gcx-home) .header-title {
        margin-top:0 !important;
    }

    /*
     * Preserve our only mobile Login.
     */
    body:has(.gcx-home) .gcx-direct-mobile-login,
    body:has(.gcx-home) .gcx-direct-mobile-login > a {
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}


/* =========================================================
   V37 — MOBILE HERO HEADER CLEARANCE
   Keep GC SOFT Technology Sydney visible below header.
   ========================================================= */

@media (max-width:991px) {

    body:has(.gcx-home) .gcx-home {
        padding-top:25px !important;
    }
}