
:root{
  --navy:#061e30;
  --navy2:#0a3448;
  --teal:#0f7778;
  --ivory:#fbf8f1;
  --paper:#fffdfa;
  --gold:#d2b36d;
  --gold2:#f2dda2;
  --ink:#0c2738;
  --muted:#71808a;
  --line:rgba(6,30,48,.10);
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--paper)}
.wm-intro{overflow:hidden;color:var(--ink)}
.wm-intro *{box-sizing:border-box}
.wm-intro a{text-decoration:none}
.wm-wrap{width:min(1080px,calc(100% - 48px));margin:auto}

.wm-topbar{
  position:fixed;inset:0 0 auto;z-index:1000;
  background:rgba(4,23,36,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.wm-topbar-inner{
  min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px
}
.wm-brand{display:flex;align-items:center;gap:10px;color:white}
.wm-brand-marks{display:flex;align-items:center}
.wm-brand-marks img{width:30px;height:30px;object-fit:contain;border-radius:50%}
.wm-brand-marks img+img{margin-left:-7px}
.wm-brand-copy b{display:block;font-size:.72rem;letter-spacing:.09em}
.wm-brand-copy small{display:block;color:rgba(255,255,255,.52);font-size:.56rem;margin-top:2px}
.wm-platform-link{
  padding:9px 13px;border:1px solid rgba(210,179,109,.52);border-radius:999px;
  color:var(--gold2);font-size:.67rem;font-weight:900
}

.wm-hero{
  position:relative;overflow:hidden;padding:112px 0 82px;color:white;
  background:
    radial-gradient(circle at 76% 24%,rgba(15,119,120,.24),transparent 28%),
    linear-gradient(155deg,#031724 0%,#06253a 58%,#0b4d54 100%)
}
.wm-hero-stars{
  position:absolute;inset:0;opacity:.48;
  background-image:
    radial-gradient(circle,rgba(242,221,162,.85) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(255,255,255,.35) 0 1px,transparent 1.5px);
  background-size:88px 88px,130px 130px;
  background-position:12px 14px,52px 35px;
}
.wm-hero-inner{position:relative;z-index:2;display:grid;gap:44px}
.wm-hero-copy{text-align:center}
.wm-eyebrow,.wm-kicker{
  margin:0 0 12px;color:var(--teal);font-size:.63rem;font-weight:950;letter-spacing:.17em
}
.wm-eyebrow{color:var(--gold2)}
.wm-hero h1{
  margin:0;font-size:clamp(2.38rem,9vw,4.6rem);line-height:1.07;letter-spacing:-.055em;word-break:keep-all
}
.wm-hero h1 span{display:block;color:#f0d486;margin-top:4px}
.wm-hero-text{
  margin:22px auto 0;max-width:570px;color:rgba(255,255,255,.74);
  font-size:.86rem;line-height:1.78;word-break:keep-all
}
.wm-hero-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:25px}
.wm-btn{min-height:44px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:950}
.wm-btn-gold{background:linear-gradient(135deg,#f7e9bb,var(--gold));color:var(--navy)}
.wm-btn-outline{border:1px solid rgba(255,255,255,.28);color:white;background:rgba(255,255,255,.04)}

.wm-orbit{
  position:relative;width:min(330px,78vw);aspect-ratio:1;margin:auto
}
.wm-orbit-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(242,221,162,.24)
}
.ring-a{width:74%;height:74%}
.ring-b{width:98%;height:98%}
.wm-orbit-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:102px;height:102px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:5px;
  background:#fff;box-shadow:0 0 0 7px rgba(242,221,162,.14),0 0 40px rgba(210,179,109,.18)
}
.wm-orbit-center img{width:42px;height:42px;object-fit:contain}
.wm-orbit-node{
  position:absolute;display:grid;justify-items:center;min-width:82px;color:white;text-align:center
}
.wm-orbit-node i{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  color:var(--gold2);border:1px solid rgba(242,221,162,.42);background:rgba(4,23,36,.78)
}
.wm-orbit-node b{margin-top:5px;font-size:.68rem}
.wm-orbit-node small{margin-top:2px;color:rgba(255,255,255,.52);font-size:.48rem}
.node-person{left:50%;top:-4%;transform:translateX(-50%)}
.node-market{right:-4%;top:28%}
.node-reward{right:3%;bottom:7%}
.node-world{left:3%;bottom:7%}
.node-local{left:-4%;top:28%}
.wm-scroll{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#08394d;color:white;
  box-shadow:0 10px 24px rgba(0,0,0,.18)
}
.wm-scroll span{font-size:1.5rem;animation:wm-bob 1.8s ease-in-out infinite}

.wm-section{position:relative;padding:88px 0}
.wm-light{
  background:
    radial-gradient(circle at 92% 10%,rgba(210,179,109,.08),transparent 22%),
    linear-gradient(180deg,#fffdfa,#faf6ee)
}
.wm-section-title{text-align:center;max-width:680px;margin:0 auto 44px}
.wm-section-title h2{
  margin:0;color:var(--navy);font-size:clamp(1.9rem,7vw,3rem);line-height:1.18;letter-spacing:-.045em;word-break:keep-all
}
.wm-section-title h2 em{font-style:normal;color:var(--teal)}
.wm-section-title>p:not(.wm-kicker){
  margin:12px auto 0;color:var(--muted);font-size:.78rem;line-height:1.7;word-break:keep-all
}

/* WHY */
.wm-flow{display:grid;grid-template-columns:1fr;gap:12px;max-width:860px;margin:auto}
.wm-flow-item{
  min-height:126px;padding:18px;border:1px solid rgba(210,179,109,.32);border-radius:18px;
  background:rgba(255,255,255,.88);display:grid;place-items:center;text-align:center;
  box-shadow:0 10px 26px rgba(6,30,48,.045)
}
.wm-flow-icon{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(210,179,109,.34);
  background:#fffdfa;font-size:1.15rem
}
.wm-flow-item b{margin-top:8px;font-size:.8rem}
.wm-flow-item small{margin-top:2px;color:var(--muted);font-size:.57rem}
.wm-flow-arrow{display:none}
.wm-flow-note{text-align:center;margin:28px 0 0;color:#66757e;font-size:.72rem}

/* SYSTEM */
.wm-system{
  background:
    radial-gradient(circle at 15% 20%,rgba(15,119,120,.055),transparent 24%),
    linear-gradient(180deg,#fbf8f1,#fffdfa)
}
.wm-system-map{position:relative;max-width:820px;height:560px;margin:auto}
.wm-system-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:126px;height:126px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:linear-gradient(145deg,#082b41,#0f5b61);color:white;box-shadow:0 0 0 8px rgba(15,119,120,.08),0 18px 40px rgba(6,30,48,.18)
}
.wm-system-center span{font-size:1.4rem}
.wm-system-center b{font-size:1rem;margin-top:3px}
.wm-system-center small{font-size:.54rem;color:rgba(255,255,255,.55)}
.wm-system-card{
  position:absolute;z-index:2;width:200px;min-height:82px;padding:15px;border-radius:17px;
  background:#fff;border:1px solid rgba(210,179,109,.28);box-shadow:0 10px 25px rgba(6,30,48,.05)
}
.wm-system-card strong{display:block;font-size:.72rem}
.wm-system-card small{display:block;margin-top:5px;color:var(--muted);font-size:.55rem}
.sys-a{left:0;top:12px}.sys-b{right:0;top:12px}.sys-c{left:0;top:220px}.sys-d{right:0;top:220px}.sys-e{left:20px;bottom:10px}.sys-f{right:20px;bottom:10px}
.wm-system-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wm-system-lines line{stroke:rgba(15,119,120,.28);stroke-width:1.2;stroke-dasharray:5 6}
.wm-system-note{text-align:center;margin:18px 0 0;color:#64747e;font-size:.72rem}

/* TOGETHER */
.wm-role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:780px;margin:auto}
.wm-role-card{
  position:relative;min-height:190px;padding:18px;border:1px solid rgba(210,179,109,.28);border-radius:18px;
  background:rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(6,30,48,.05);text-align:center
}
.wm-role-no{
  position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#0f7778;color:white;font-size:.5rem;font-weight:900
}
.wm-role-no.gold{background:#d3a33c}.wm-role-no.blue{background:#2c82b9}.wm-role-no.violet{background:#6c5bb0}
.wm-role-symbol{margin:14px auto 8px;font-size:1.8rem;color:var(--teal)}
.wm-role-card b{font-size:1rem}
.wm-role-card p{margin:8px 0 0;color:var(--muted);font-size:.65rem;line-height:1.6}
.wm-role-message{
  max-width:780px;margin:18px auto 0;padding:14px 16px;border-radius:14px;text-align:center;
  color:var(--navy);background:#fff8e7;border:1px solid rgba(210,179,109,.32);font-size:.72rem
}

/* EVERYDAY */
.wm-everyday{
  background:
    radial-gradient(circle at 82% 10%,rgba(210,179,109,.08),transparent 24%),
    #fffdfa
}
.wm-everyday-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:860px;margin:auto}
.wm-day-item{text-align:center}
.wm-day-item span{
  width:62px;height:62px;margin:auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(210,179,109,.42);color:var(--teal);background:#fff;font-size:.9rem;font-weight:900
}
.wm-day-item b{display:block;margin-top:8px;font-size:.64rem}
.wm-day-item small{display:block;margin-top:3px;color:var(--muted);font-size:.5rem}
.wm-everyday-message{
  max-width:720px;margin:30px auto 0;padding:17px 20px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:14px;
  background:#fff9ec;border:1px solid rgba(210,179,109,.28)
}
.wm-everyday-message span{font-size:1.5rem;color:#c79d46}
.wm-everyday-message p{margin:0;font-size:.74rem;line-height:1.6}

/* GLOBAL */
.wm-global{
  background:
    radial-gradient(circle at 50% 110%,rgba(15,119,120,.08),transparent 35%),
    linear-gradient(180deg,#fffdfa,#faf6ee)
}
.wm-world-map{max-width:860px;margin:auto}
.wm-world-map svg{width:100%;height:auto;display:block}
.wm-world-dots ellipse{
  fill:rgba(15,119,120,.055);stroke:rgba(15,119,120,.16);stroke-width:1.2;stroke-dasharray:2 5
}
.wm-world-arcs path{fill:none;stroke:rgba(210,179,109,.75);stroke-width:2}
.wm-world-points circle{fill:#f0c55d;filter:drop-shadow(0 0 6px rgba(210,179,109,.7))}

/* FINAL */
.wm-final{
  padding:94px 0;color:white;text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(15,119,120,.16),transparent 35%),
    #041522
}
.wm-final h2{
  margin:0;font-size:clamp(1.85rem,7vw,3.1rem);line-height:1.2;letter-spacing:-.045em;word-break:keep-all
}
.wm-final h2 span{display:block;color:#f0d486;margin-top:5px}
.wm-final>div>p:not(.wm-kicker){margin:18px auto 0;color:rgba(255,255,255,.64);font-size:.76rem;line-height:1.7}
.wm-final-brand{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px}
.wm-final-brand>span{display:flex}
.wm-final-brand img{width:38px;height:38px;object-fit:contain;border-radius:50%}
.wm-final-brand img+img{margin-left:-7px}
.wm-final-brand div{text-align:left}
.wm-final-brand small{display:block;color:rgba(255,255,255,.58);font-size:.52rem}
.wm-final-brand b{display:block;margin-top:2px;font-size:.8rem;letter-spacing:.08em}

/* REVEAL */
.wm-reveal,.wm-reveal-child{
  opacity:0;transform:translate3d(0,58px,0) scale(.99);filter:blur(5px);
  transition:
    opacity 1.15s cubic-bezier(.16,.72,.22,1),
    transform 1.15s cubic-bezier(.16,.72,.22,1),
    filter .95s ease;
  will-change:opacity,transform,filter
}
.wm-reveal.is-visible,.wm-reveal-child.is-visible{opacity:1;transform:none;filter:none}
.wm-stagger .wm-reveal-child:nth-child(2){transition-delay:.12s}
.wm-stagger .wm-reveal-child:nth-child(3){transition-delay:.24s}
.wm-stagger .wm-reveal-child:nth-child(4){transition-delay:.36s}
.wm-stagger .wm-reveal-child:nth-child(5){transition-delay:.48s}
.wm-stagger .wm-reveal-child:nth-child(6){transition-delay:.60s}

@keyframes wm-bob{50%{transform:translateY(5px)}}

@media(min-width:760px){
  .wm-hero-inner{grid-template-columns:1.05fr .95fr;align-items:center}
  .wm-hero-copy{text-align:left}
  .wm-hero-text{margin-left:0}
  .wm-hero-actions{justify-content:flex-start}
  .wm-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center}
  .wm-flow-arrow{display:block;color:#c49b42;font-size:1.35rem}
}
@media(max-width:620px){
  .wm-wrap{width:calc(100% - 44px)}
  .wm-section{padding:78px 0}
  .wm-section-title{margin-bottom:36px}
  .wm-section-title h2{font-size:1.95rem}
  .wm-system-map{height:610px}
  .wm-system-center{width:108px;height:108px}
  .wm-system-card{width:45%;min-height:78px;padding:12px}
  .sys-a{left:0;top:0}.sys-b{right:0;top:0}
  .sys-c{left:0;top:220px}.sys-d{right:0;top:220px}
  .sys-e{left:0;bottom:0}.sys-f{right:0;bottom:0}
  .wm-system-lines{display:none}
}
@media(max-width:380px){
  .wm-wrap{width:calc(100% - 34px)}
  .wm-role-grid{grid-template-columns:1fr}
  .wm-everyday-grid{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wm-reveal,.wm-reveal-child{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .wm-scroll span{animation:none!important}
}


/* =========================================================
   V2.1 SYSTEM + GLOBAL FIX
   ========================================================= */

/* SYSTEM compact infographic */
.wm-system{
  background:
    radial-gradient(circle at 50% 47%,rgba(15,119,120,.055),transparent 26%),
    linear-gradient(180deg,#fbf8f1,#fffdfa);
}

.wm-system-map{
  position:relative;
  max-width:800px;
  height:560px;
  margin:auto;
}

.wm-system-orbit{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(15,119,120,.10);
  pointer-events:none;
}

.wm-system-orbit.orbit-one{
  width:300px;
  height:300px;
}

.wm-system-orbit.orbit-two{
  width:430px;
  height:430px;
  border-color:rgba(210,179,109,.11);
}

.wm-system-center{
  width:132px;
  height:132px;
}

.wm-system-card{
  width:208px;
  min-height:88px;
  padding:14px 15px 13px 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.wm-system-card i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:.7rem;
  font-weight:950;
  color:var(--teal);
  background:#eef8f6;
  border:1px solid rgba(15,119,120,.13);
}

.wm-system-card strong{
  font-size:.73rem;
}

.wm-system-card small{
  font-size:.55rem;
}

.sys-a{left:4%;top:8%}
.sys-b{right:4%;top:8%}
.sys-c{left:0;top:42%}
.sys-d{right:0;top:42%}
.sys-e{left:6%;bottom:6%}
.sys-f{right:6%;bottom:6%}

.wm-system-lines line{
  stroke:rgba(15,119,120,.23);
  stroke-width:1.4;
  stroke-dasharray:4 6;
}

/* GLOBAL richer map */
.wm-world-map{
  max-width:900px;
  margin:auto;
}

.wm-world-map svg{
  width:100%;
  height:auto;
  display:block;
}

.wm-map-land path{
  fill:url(#wmDotPattern);
  stroke:rgba(15,119,120,.18);
  stroke-width:1.1;
}

.wm-korea-zone{
  fill:rgba(210,179,109,.16);
  stroke:rgba(210,179,109,.45);
  stroke-width:1.4;
}

.wm-world-arcs path{
  fill:none;
  stroke:rgba(210,179,109,.80);
  stroke-width:2.2;
  filter:url(#wmGlow);
}

.wm-world-points circle{
  fill:#f0c65b;
  stroke:#fff8dc;
  stroke-width:1.6;
  filter:url(#wmGlow);
}

.wm-world-points circle.origin{
  fill:#0f7778;
  stroke:#f2dda2;
  stroke-width:3;
}

.wm-world-labels text{
  fill:rgba(6,30,48,.46);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
}

.wm-global-caption{
  margin:6px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#6d7c85;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.12em;
}

.wm-global-caption b{
  color:var(--teal);
}

.wm-global-caption i{
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* mobile */
@media(max-width:620px){
  .wm-system-map{
    height:500px;
    max-width:100%;
  }

  .wm-system-orbit.orbit-one{
    width:215px;
    height:215px;
  }

  .wm-system-orbit.orbit-two{
    width:310px;
    height:310px;
  }

  .wm-system-center{
    width:112px;
    height:112px;
  }

  .wm-system-card{
    width:42%;
    min-height:76px;
    padding:11px 10px 10px 41px;
  }

  .wm-system-card i{
    left:10px;
    width:25px;
    height:25px;
    font-size:.6rem;
  }

  .wm-system-card strong{
    font-size:.66rem;
  }

  .wm-system-card small{
    font-size:.49rem;
    line-height:1.4;
  }

  .sys-a{left:0;top:3%}
  .sys-b{right:0;top:3%}
  .sys-c{left:0;top:40%}
  .sys-d{right:0;top:40%}
  .sys-e{left:0;bottom:3%}
  .sys-f{right:0;bottom:3%}

  .wm-system-lines{
    display:block;
  }

  .wm-world-map{
    width:108%;
    margin-left:-4%;
  }

  .wm-world-labels text{
    font-size:11px;
  }

  .wm-global-caption{
    margin-top:12px;
    font-size:.54rem;
  }
}
