/* SKIN 01 — Globe / reference-style earth hero */
body{
  --accent:#7f4dff;
  --accent2:#12d8ff;
  --accent3:#b9ff47;
  --accent-ink:#070611;
  background:#050713;
}

.skin-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(circle at 72% 30%,rgba(57,104,255,.22),transparent 28%),
  radial-gradient(circle at 15% 82%,rgba(18,216,255,.14),transparent 30%),
  linear-gradient(180deg,#050713,#070611 62%,#02030a)}
.skin-bg::before{content:'';position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 18% 20%,#fff,transparent),
  radial-gradient(1px 1px at 44% 15%,#fff,transparent),
  radial-gradient(1.4px 1.4px at 62% 24%,#dff7ff,transparent),
  radial-gradient(1px 1px at 78% 12%,#fff,transparent),
  radial-gradient(1px 1px at 86% 72%,#b9ff47,transparent),
  radial-gradient(1px 1px at 22% 75%,#fff,transparent);
  opacity:.8;animation:glStars 7s ease-in-out infinite}
.skin-bg::after{content:'';position:absolute;right:-8%;top:8%;width:min(52vw,680px);aspect-ratio:1;border-radius:50%;background:
  radial-gradient(circle at 32% 31%,#f8ffff 0 2.6%,#9bf3ff 4.5%,transparent 8%),
  radial-gradient(circle at 42% 44%,rgba(112,255,166,.28),transparent 13%),
  radial-gradient(circle at 58% 34%,rgba(100,160,255,.24),transparent 15%),
  radial-gradient(circle at 38% 28%,#8fd8ff 0 7%,#355dca 17%,#111d5a 43%,#050814 72%);
  box-shadow:0 0 0 1px rgba(127,77,255,.28),0 0 90px -12px rgba(18,216,255,.58),inset -42px -34px 70px rgba(0,0,0,.65);
  opacity:.16;animation:earthFloat 13s ease-in-out infinite}

header{background:rgba(5,7,19,.74);border-bottom:1px solid rgba(160,150,255,.18);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.logo{color:#fff}
nav{color:#bfc4e8}
.nav-cta{background:#7f4dff;color:#fff}
.langsel,.langtog a{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}

.globe-hero{position:relative;min-height:calc(100svh - 72px);padding:clamp(3rem,6vw,5.4rem) 0 clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);grid-template-areas:"copy earth" "cards cards" "stats stats";gap:clamp(1.1rem,3vw,2rem);align-items:center;overflow:hidden}
.gl-copy{grid-area:copy;position:relative;z-index:5;max-width:680px}
.gl-kicker{display:inline-flex;margin-bottom:1rem;padding:.5rem .75rem;border:1px solid rgba(127,77,255,.42);border-radius:999px;background:rgba(127,77,255,.12);color:#7fb8ff;font-family:'Space Grotesk','Noto Sans KR',sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.16em;line-height:1;text-transform:uppercase}
.globe-hero h1{font-family:'Space Grotesk','Noto Sans KR',sans-serif;font-size:clamp(3.2rem,6.5vw,6.7rem);font-weight:900;line-height:.92;letter-spacing:-.055em;max-width:9.2em;text-wrap:balance}
.globe-hero h1 em{font-style:normal;background:linear-gradient(90deg,#12d8ff,#b9ff47,#7f4dff,#12d8ff);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:flow 6s linear infinite}
.globe-hero .sub{margin:1.15rem 0 1.45rem;max-width:43ch;color:#c9cde8;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;text-wrap:pretty}
.globe-hero .cta-solid{background:#7f4dff;color:#fff;box-shadow:0 18px 55px -28px #7f4dff}
.globe-hero .cta-ghost{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.055);color:#fff}

.gl-earth{grid-area:earth;position:relative;z-index:2;justify-self:end;width:min(48vw,660px);aspect-ratio:1;border-radius:50%;animation:earthFloat 11s ease-in-out infinite;filter:saturate(1.08) contrast(1.08)}
.earth-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;border-radius:50%;display:block;filter:saturate(1.08) contrast(1.08);box-shadow:0 0 0 1px rgba(127,77,255,.4),0 36px 120px -32px rgba(18,216,255,.75)}
.earth-video{position:absolute;inset:-28%;z-index:1;width:156%;height:156%;border-radius:0;object-fit:cover;object-position:center center;display:block;background:transparent;box-shadow:none;filter:saturate(1.12) contrast(1.08) brightness(.9);mix-blend-mode:screen}
.gl-earth .earth-video + .orbit{z-index:3}
.earth-spin{position:absolute;inset:0;z-index:1;border-radius:50%;overflow:hidden;background:
  radial-gradient(circle at 31% 26%,rgba(255,255,255,.18) 0 3%,rgba(105,221,255,.06) 10%,transparent 20%),
  linear-gradient(105deg,rgba(0,0,0,.02) 0 42%,rgba(0,0,0,.36) 68%,rgba(0,0,0,.86) 100%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 56%,rgba(0,0,0,.45) 77%,rgba(0,0,0,.92) 100%),
  url('../assets/earth.jpg') 0 50%/220% 105% repeat-x;
  box-shadow:0 0 0 1px rgba(127,77,255,.4),0 36px 120px -32px rgba(18,216,255,.75),inset -38px -22px 58px rgba(0,0,0,.65);
  animation:earthRotate 36s linear infinite}
.earth-spin::before{content:'';position:absolute;inset:0;border-radius:inherit;background:
  radial-gradient(circle at 24% 24%,rgba(255,255,255,.14),transparent 18%),
  linear-gradient(90deg,rgba(3,7,25,.1),rgba(3,7,25,0) 40%,rgba(0,0,0,.48) 100%);
  mix-blend-mode:screen;pointer-events:none}
.earth-spin::after{content:'';position:absolute;inset:-2%;border-radius:inherit;box-shadow:inset -56px -26px 76px rgba(0,0,0,.82),inset 8px 0 28px rgba(116,225,255,.22);pointer-events:none}
.gl-earth::before,.gl-earth::after,.orbit{display:none}
.moon{--rx:clamp(190px,28vw,330px);--ry:clamp(58px,8vw,108px);--sat:#a786ff;position:absolute;z-index:5;left:50%;top:50%;width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;will-change:transform,opacity;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px var(--sat)) drop-shadow(0 0 40px color-mix(in srgb,var(--sat) 72%,transparent));mix-blend-mode:screen}
.moon::before{content:'';position:absolute;inset:-.42rem;border-radius:50%;background:radial-gradient(circle,#fff 0 14%,var(--sat) 34%,transparent 72%);opacity:.75}
.moon::after{display:none}
.moon.m1{--sat:#9b7bff;animation:satOrbit1 3.9s linear infinite;animation-delay:-.8s}
.moon.m2{--sat:#12d8ff;animation:satOrbit2 4.5s linear infinite;animation-delay:-2.2s}
.moon.m3{--sat:#b9ff47;animation:satOrbit3 5.1s linear infinite;animation-delay:-3.6s}
.moon.m4{--sat:#ff4bd8;animation:satOrbit4 4.15s linear infinite;animation-delay:-1.5s}
.moon.m5{--sat:#ffd44a;animation:satOrbit5 5.4s linear infinite;animation-delay:-4.5s}
.moon.v{width:.95rem;height:.95rem}
.moon.v::before{inset:-.5rem}
.moon.m6{--sat:#74f7ff;animation:satVertical1 5.2s linear infinite;animation-delay:-1.8s}
.moon.m7{--sat:#ff8ef3;animation:satVertical2 6.3s linear infinite;animation-delay:-4.1s}

.gl-cards{grid-area:cards;position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gl-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;padding:1.05rem;border:1px solid rgba(135,160,255,.32);border-radius:14px;background:rgba(8,14,31,.68);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 60px -42px rgba(0,0,0,.85)}
.gl-card .ic{display:grid;place-items:center;width:2.45rem;height:2.45rem;border-radius:10px;background:#7f4dff;color:#fff;font-weight:900}
.gl-card:nth-child(2) .ic{background:#12d8ff;color:#041018}.gl-card:nth-child(3) .ic{background:#b9ff47;color:#071018}
.gl-card h3{font-family:'Space Grotesk','Noto Sans KR',sans-serif;font-size:1.15rem;line-height:1.1;margin-bottom:.25rem;color:#fff}
.gl-card p{font-size:.94rem;line-height:1.42;color:#c9cde8}
.gl-stats{grid-area:stats;position:relative;z-index:6;margin-top:.25rem}
.gl-stats .n{color:#7f4dff;font-weight:900}

@media(min-width:981px){
  .globe-hero{grid-template-columns:minmax(440px,.86fr) minmax(420px,1fr);column-gap:clamp(.5rem,2vw,1.8rem)}
  .gl-copy{max-width:640px}
  .globe-hero h1{font-size:clamp(4.1rem,5.8vw,6.1rem);max-width:8.25em}
  .gl-earth{width:min(42vw,560px);justify-self:end;transform:translateX(-2vw)}
  .gl-card p{max-width:30ch}
}

@keyframes glStars{50%{opacity:.42}}
@keyframes earthFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes earthRotate{to{background-position:0 50%,0 0,0 0,-220% 50%}}
@keyframes satOrbit1{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * 1.05),calc(var(--ry) * -1.02)) rotate(155deg) scale(.72);opacity:.22;z-index:1}
  18%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .52),calc(var(--ry) * -.58)) rotate(155deg) scale(.96);opacity:1;z-index:5}
  45%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.12),calc(var(--ry) * .08)) rotate(155deg) scale(1.16);opacity:1;z-index:5}
  72%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.72),calc(var(--ry) * .62)) rotate(155deg) scale(.92);opacity:.92;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -1.08),calc(var(--ry) * 1.02)) rotate(155deg) scale(.66);opacity:.18;z-index:1}
}
@keyframes satOrbit2{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -1.08),calc(var(--ry) * -.82)) rotate(32deg) scale(.64);opacity:.18;z-index:1}
  24%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.52),calc(var(--ry) * -.42)) rotate(32deg) scale(.9);opacity:.9;z-index:4}
  52%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .08),calc(var(--ry) * .06)) rotate(32deg) scale(1.14);opacity:1;z-index:5}
  78%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .68),calc(var(--ry) * .48)) rotate(32deg) scale(.9);opacity:.88;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * 1.08),calc(var(--ry) * .78)) rotate(32deg) scale(.62);opacity:.16;z-index:1}
}
@keyframes satOrbit3{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .9),calc(var(--ry) * .96)) rotate(-148deg) scale(.78);opacity:.24;z-index:1}
  18%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .45),calc(var(--ry) * .52)) rotate(-148deg) scale(.76);opacity:.35;z-index:1}
  42%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.2),calc(var(--ry) * .18)) rotate(-148deg) scale(.96);opacity:.9;z-index:4}
  68%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.68),calc(var(--ry) * -.34)) rotate(-148deg) scale(1.12);opacity:1;z-index:5}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.98),calc(var(--ry) * -.92)) rotate(-148deg) scale(.72);opacity:.22;z-index:1}
}
@keyframes satOrbit4{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * 1.12),calc(var(--ry) * .28)) rotate(156deg) scale(.64);opacity:.16;z-index:1}
  21%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .56),calc(var(--ry) * .02)) rotate(156deg) scale(.92);opacity:1;z-index:5}
  50%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.08),calc(var(--ry) * -.22)) rotate(156deg) scale(1.14);opacity:1;z-index:5}
  78%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.74),calc(var(--ry) * -.64)) rotate(156deg) scale(.86);opacity:.82;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -1.14),calc(var(--ry) * -1.02)) rotate(156deg) scale(.56);opacity:.14;z-index:1}
}
@keyframes satOrbit5{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -1.08),calc(var(--ry) * .9)) rotate(29deg) scale(.58);opacity:.14;z-index:1}
  26%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.48),calc(var(--ry) * .52)) rotate(29deg) scale(.9);opacity:.9;z-index:4}
  54%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .15),calc(var(--ry) * .12)) rotate(29deg) scale(1.18);opacity:1;z-index:5}
  80%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .72),calc(var(--ry) * -.48)) rotate(29deg) scale(.9);opacity:.82;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * 1.08),calc(var(--ry) * -.92)) rotate(29deg) scale(.56);opacity:.14;z-index:1}
}
@keyframes satVertical1{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.42),calc(var(--ry) * -2.35)) scale(.58);opacity:.16;z-index:1}
  22%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.18),calc(var(--ry) * -1.02)) scale(.82);opacity:.72;z-index:4}
  50%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .04),0) scale(1.08);opacity:1;z-index:5}
  76%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .22),calc(var(--ry) * 1.1)) scale(.86);opacity:.7;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .42),calc(var(--ry) * 2.28)) scale(.56);opacity:.14;z-index:1}
}
@keyframes satVertical2{
  0%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .42),calc(var(--ry) * 2.35)) scale(.58);opacity:.14;z-index:1}
  24%{transform:translate(-50%,-50%) translate(calc(var(--rx) * .22),calc(var(--ry) * 1.05)) scale(.82);opacity:.68;z-index:4}
  52%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.04),0) scale(1.08);opacity:1;z-index:5}
  78%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.22),calc(var(--ry) * -1.08)) scale(.82);opacity:.68;z-index:4}
  100%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -.42),calc(var(--ry) * -2.3)) scale(.56);opacity:.14;z-index:1}
}

@media(max-width:980px){
  .wrap{width:100%;max-width:390px;margin:0 auto;padding:0 1rem}
  .content{min-height:100svh;background:linear-gradient(180deg,#050713 0%,#07101c 70%,#050713 100%)}
  header{background:rgba(5,7,19,.56)}
  .hin{width:100%;max-width:390px;margin:0 auto;padding:.72rem 1rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.52rem}
  .logo{font-size:1.08rem}
  nav{display:none}
  .hgroup .nav-cta{display:none}
  .langsel{max-width:96px;font-size:.72rem}
  .menu{display:grid;width:34px;height:34px;border-radius:8px}
  .skin-bg::after{display:none}
  .globe-hero{position:relative;min-height:0;display:block;padding:1.15rem 0 1.6rem;overflow:hidden}
  .gl-copy{position:relative;z-index:5;width:72%;max-width:300px}
  .gl-kicker{font-size:.6rem;letter-spacing:.13em;margin-bottom:.68rem;padding:0;border:0;background:transparent;color:#59d5ff}
  .globe-hero h1{font-size:clamp(2.05rem,9.6vw,2.48rem);line-height:.93;letter-spacing:-.042em;max-width:6.75em;text-wrap:initial}
  .globe-hero h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#b9ff47;color:#b9ff47;animation:none}
  .globe-hero h1 .nw{display:block;white-space:normal}
  .globe-hero .sub{font-size:.72rem;line-height:1.35;max-width:24ch;margin:.52rem 0 .72rem;color:#eef3ff}
  .globe-hero .btns{display:grid;grid-template-columns:1fr 1fr;gap:.48rem;width:100%;max-width:274px}
  .globe-hero .cta-solid,.globe-hero .cta-ghost{width:100%;text-align:center;padding:.64rem .42rem;border-radius:9px;font-size:.64rem;white-space:nowrap}
  .gl-earth{position:absolute;z-index:2;right:-94px;top:2.85rem;width:292px;margin:0;opacity:.98;pointer-events:none}
  .gl-earth::before{inset:-9%}
  .gl-earth::after{inset:-17%}
  .orbit{inset:-4%}
  .orbit.o2{inset:-15%}
  .moon{--rx:142px;--ry:50px;width:.92rem;height:.92rem}
  .moon.v{width:.76rem;height:.76rem}
  .gl-cards{position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:.42rem;width:100%;max-width:100%;margin-top:1rem;margin-bottom:0;overflow:visible;transform:none}
  .gl-card{display:block;min-width:0;width:auto;padding:.5rem .42rem;border-radius:10px;min-height:112px;overflow:hidden;background:rgba(8,14,31,.72)}
  .gl-card .ic{width:1.55rem;height:1.55rem;border-radius:7px;margin-bottom:.42rem;font-size:.72rem}
  .gl-card h3{font-size:.68rem;line-height:1.04;margin-bottom:.2rem;overflow-wrap:break-word}
  .gl-card p{font-size:.48rem;line-height:1.18;overflow-wrap:break-word;color:#cfd6f3}
  .gl-stats{position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%;max-width:100%;margin-top:.82rem}
  .gl-stats .n{font-size:1.32rem;line-height:1}.gl-stats .l{font-size:.58rem;line-height:1.12}
}

@media(max-width:370px){
  .gl-copy{width:76%}
  .globe-hero h1{font-size:2rem}
  .globe-hero .sub{font-size:.72rem}
  .globe-hero .btns{max-width:270px}
  .gl-card{min-height:116px;padding:.52rem .42rem}
  .gl-card h3{font-size:.72rem}
  .gl-card p{font-size:.54rem}
  .gl-stats .n{font-size:1.18rem}
}