@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');
* { font-family: 'Noto Sans KR', sans-serif; }
html { scroll-behavior: smooth; }
body { background: #d8e7ff; }
.grid-pattern {
  background-image: linear-gradient(rgba(0,0,0,0.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 60px 60px;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes countUp { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: scale(1); } }
.animate-count { animation: countUp 1s ease-out forwards; }
.fade-in { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Hero enhanced background */
.hero-globe {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.hero-globe::before, .hero-globe::after {
  content:''; position:absolute; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.14);
}
.hero-globe::before { inset: 40px; }
.hero-globe::after { inset: 90px; }
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.hero-ring-1 { width:750px; height:750px; }
.hero-ring-2 { width:900px; height:900px; }

/* Animated orbit dots */
@keyframes orbit1 { from{transform:rotate(0deg) translateX(300px) rotate(0deg)} to{transform:rotate(360deg) translateX(300px) rotate(-360deg)} }
@keyframes orbit2 { from{transform:rotate(0deg) translateX(375px) rotate(0deg)} to{transform:rotate(-360deg) translateX(375px) rotate(360deg)} }
@keyframes orbit3 { from{transform:rotate(0deg) translateX(450px) rotate(0deg)} to{transform:rotate(360deg) translateX(450px) rotate(-360deg)} }
.orbit-dot {
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:rgba(100,220,235,0.85);
  box-shadow: 0 0 14px 4px rgba(0,200,220,0.5);
}
.orbit-dot-1 { animation: orbit1 20s linear infinite; }
.orbit-dot-2 { animation: orbit2 28s linear infinite; background:rgba(56,189,210,0.85); box-shadow:0 0 12px 3px rgba(0,180,200,0.5); width:5px;height:5px;margin:-2.5px 0 0 -2.5px; }
.orbit-dot-3 { animation: orbit3 35s linear infinite; background:rgba(160,230,220,0.75); box-shadow:0 0 12px 3px rgba(80,200,190,0.4); width:4px;height:4px;margin:-2px 0 0 -2px; }

/* Horizontal latitude lines on globe */
.hero-latitude {
  position:absolute; left:50%; top:50%;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:50%; transform:translate(-50%,-50%);
}
.hero-lat-1 { width:580px; height:300px; }
.hero-lat-2 { width:500px; height:150px; }
.hero-lat-3 { width:580px; height:450px; }

/* Floating connector lines */
.hero-connector {
  position:absolute;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  height:1px;
}

/* Animated dash lines */
@keyframes dash-move { from{background-position:0 0} to{background-position:40px 0} }
.hero-dash-line {
  position:absolute; height:1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.40) 0, rgba(255,255,255,0.40) 8px, transparent 8px, transparent 20px);
  animation: dash-move 2s linear infinite;
}

/* Ocean wave animation */
@keyframes ocean-wave { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.hero-ocean-wave {
  position:absolute; bottom:0; left:0;
  width:200%; pointer-events:none;
}
.hero-ocean-wave-1 { animation: ocean-wave 14s linear infinite; }
.hero-ocean-wave-2 { animation: ocean-wave 22s linear infinite reverse; }
.hero-ocean-wave-3 { animation: ocean-wave 30s linear infinite; }

/* Small floating icons */
@keyframes float-slow { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-15px) rotate(3deg)} }
@keyframes float-slow2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(-2deg)} }
.hero-float-icon {
  position:absolute;
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85);
  font-size:20px;
}
.hero-float-1 { animation: float-slow 7s ease-in-out infinite; }
.hero-float-2 { animation: float-slow2 8s ease-in-out infinite; animation-delay:1s; }
.hero-float-3 { animation: float-slow 9s ease-in-out infinite; animation-delay:2s; }
.hero-float-4 { animation: float-slow2 6s ease-in-out infinite; animation-delay:0.5s; }

/* Particle dots */
@keyframes twinkle { 0%,100%{opacity:0.3} 50%{opacity:0.9} }
.hero-particle {
  position:absolute; border-radius:50%; background:rgba(180,235,245,0.75);
  animation: twinkle 3s ease-in-out infinite;
}

/* Mouse parallax layer */
#hero-parallax { transition: transform 0.1s ease-out; will-change: transform; }

/* Canvas for interactive particles */
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}


/* Glitch effect on hover */
/* Fade accent */
@keyframes fade-in-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
#fade-accent { opacity:0; display:inline-block; }
#fade-accent.visible { animation: fade-in-up 0.9s cubic-bezier(0.4,0,0.2,1) forwards; }

@keyframes glitch1 {
  0%,100%{clip-path:inset(0 0 95% 0);transform:translate(-2px,0)}
  20%{clip-path:inset(30% 0 50% 0);transform:translate(2px,0)}
  40%{clip-path:inset(60% 0 20% 0);transform:translate(-1px,0)}
  60%{clip-path:inset(80% 0 5% 0);transform:translate(1px,0)}
  80%{clip-path:inset(10% 0 70% 0);transform:translate(-2px,0)}
}
@keyframes glitch2 {
  0%,100%{clip-path:inset(50% 0 30% 0);transform:translate(2px,0)}
  25%{clip-path:inset(10% 0 80% 0);transform:translate(-2px,0)}
  50%{clip-path:inset(70% 0 10% 0);transform:translate(1px,0)}
  75%{clip-path:inset(20% 0 60% 0);transform:translate(-1px,0)}
}
.hero-title-wrap { position:relative; display:inline-block; }
.hero-title-wrap:hover .glitch-layer-1,
.hero-title-wrap:hover .glitch-layer-2 { opacity:1; }
.glitch-layer-1, .glitch-layer-2 {
  position:absolute; inset:0; opacity:0;
  background: inherit; -webkit-background-clip:text; background-clip:text;
  color: transparent; pointer-events:none;
}
.glitch-layer-1 { color:#60a5fa; animation: glitch1 0.4s infinite; }
.glitch-layer-2 { color:#a78bfa; animation: glitch2 0.4s infinite; }

/* Float icon hover glow */
.hero-float-icon {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: default;
}
.hero-float-icon:hover {
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 24px 6px rgba(100,220,240,0.25);
  color: rgba(255,255,255,1);
  transform: scale(1.15) !important;
}

/* Ripple on click */
.ripple {
  position:fixed; border-radius:50%;
  transform:scale(0); pointer-events:none;
  background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
  animation: ripple-anim 1s ease-out forwards;
  z-index:2;
}
@keyframes ripple-anim {
  to { transform:scale(1); opacity:0; }
}