/* =========================================================
   K-Market Insight · Cyber-Neon Korean Aesthetic
   Palette: #39FF14 (digital emerald) · #00BFFF (electric cyan) · #2D1B5A (deep purple)
   Font:    Nanum Gothic + Black Han Sans (display)
   ========================================================= */

:root{
  --emerald: #39FF14;
  --cyan:    #00BFFF;
  --purple-deep: #2D1B5A;
  --purple-mid:  #1A0F3D;
  --purple-dark: #0E0826;
  --ink:    #F5F8FF;
  --ink-mute: #B7B0D9;
  --line:   rgba(180,200,255,.12);
  --line-strong: rgba(180,200,255,.22);
  --glass:  rgba(255,255,255,.04);
  --glass-strong: rgba(255,255,255,.07);
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-neon: 0 0 0 1px rgba(57,255,20,.18), 0 20px 60px -20px rgba(57,255,20,.35);
  --shadow-cyan: 0 0 0 1px rgba(0,191,255,.18), 0 20px 60px -20px rgba(0,191,255,.35);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{scroll-behavior:smooth;}
html{font-size:16px;}
body{
  font-family:'Nanum Gothic', system-ui, -apple-system, sans-serif;
  background: var(--purple-dark);
  color: var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom: 110px; /* leave room for fixed CTA */
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.pc-only{display:inline;}
.mobile-only{display:none;}

/* =================== BG decor =================== */
.bg-decor{
  position: fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,191,255,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(57,255,20,.10), transparent 65%),
    radial-gradient(900px 800px at 50% 110%, rgba(45,27,90,.9), transparent 60%),
    linear-gradient(180deg, #0E0826 0%, #15093A 50%, #0E0826 100%);
}
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(180,200,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,200,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  opacity:.55;
}
.bg-blob{
  position:absolute; filter: blur(80px); opacity:.55; border-radius:50%;
  animation: blob 18s ease-in-out infinite;
}
.blob-1{top:-100px; left:-100px; width:400px; height:400px; background:rgba(57,255,20,.30);}
.blob-2{top:30%; right:-120px; width:480px; height:480px; background:rgba(0,191,255,.30); animation-delay:-6s;}
.blob-3{bottom:-150px; left:30%; width:520px; height:520px; background:rgba(124,58,237,.35); animation-delay:-12s;}
@keyframes blob{
  0%,100%{transform: translate(0,0) scale(1);}
  33%{transform: translate(40px,-30px) scale(1.08);}
  66%{transform: translate(-30px,40px) scale(.95);}
}

.bg-particles span{
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  opacity:.7;
  animation: floatUp linear infinite;
}
.bg-particles span:nth-child(2n){background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
.bg-particles span:nth-child(3n){background:#fff; box-shadow:0 0 6px #fff;}
.bg-particles span:nth-child(1){left:5%; top:80%; animation-duration:14s; animation-delay:-1s;}
.bg-particles span:nth-child(2){left:15%; top:90%; animation-duration:18s; animation-delay:-4s;}
.bg-particles span:nth-child(3){left:25%; top:70%; animation-duration:16s; animation-delay:-2s; width:4px; height:4px;}
.bg-particles span:nth-child(4){left:38%; top:95%; animation-duration:20s; animation-delay:-7s;}
.bg-particles span:nth-child(5){left:48%; top:85%; animation-duration:15s; animation-delay:-3s; width:5px; height:5px;}
.bg-particles span:nth-child(6){left:58%; top:75%; animation-duration:22s; animation-delay:-9s;}
.bg-particles span:nth-child(7){left:68%; top:90%; animation-duration:17s; animation-delay:-1s;}
.bg-particles span:nth-child(8){left:78%; top:80%; animation-duration:19s; animation-delay:-5s; width:4px; height:4px;}
.bg-particles span:nth-child(9){left:88%; top:88%; animation-duration:21s; animation-delay:-8s;}
.bg-particles span:nth-child(10){left:92%; top:70%; animation-duration:16s; animation-delay:-6s;}
.bg-particles span:nth-child(11){left:10%; top:50%; animation-duration:18s; animation-delay:-10s; width:5px; height:5px;}
.bg-particles span:nth-child(12){left:30%; top:40%; animation-duration:23s; animation-delay:-2s;}
.bg-particles span:nth-child(13){left:55%; top:55%; animation-duration:19s; animation-delay:-12s;}
.bg-particles span:nth-child(14){left:75%; top:45%; animation-duration:20s; animation-delay:-4s;}
.bg-particles span:nth-child(15){left:85%; top:30%; animation-duration:17s; animation-delay:-9s; width:4px; height:4px;}
@keyframes floatUp{
  0%   {transform: translateY(0) translateX(0); opacity:0;}
  10%  {opacity:.8;}
  90%  {opacity:.8;}
  100% {transform: translateY(-120vh) translateX(40px); opacity:0;}
}

/* =================== Typography helpers =================== */
.neon-text{
  background: linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(57,255,20,.35);
  position: relative;
}
.neon-text::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-4px;
  height:3px;
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
  border-radius: 3px;
  opacity:.5;
  filter: blur(1px);
}

/* =================== HERO =================== */
.hero{
  padding: 80px 0 60px;
  position: relative;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-strong);
  border:1px solid rgba(57,255,20,.35);
  color: var(--ink);
  font-size: 13px;
  font-weight:700;
  backdrop-filter: blur(12px);
  margin-bottom: 28px;
  letter-spacing: .3px;
  box-shadow: 0 0 30px rgba(57,255,20,.15);
}
.pulse{
  width:8px; height:8px; border-radius:50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: pulseGlow 1.5s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.4); opacity:.5;}
}

.hero-title{
  font-family:'Nanum Gothic', system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.18;
  letter-spacing: -.025em;
  margin-bottom: 20px;
  color:#fff;
}
.hero-sub{
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-mute);
  margin-bottom: 28px;
  max-width: 620px;
}
.hero-sub b{color:var(--emerald); font-weight:800;}

.hero-bullets{
  display:flex; flex-wrap:wrap; gap: 10px 16px;
  margin-bottom: 32px;
}
.hero-bullets span{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px;
  background: var(--glass);
  border:1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  font-weight:700;
}
.hero-bullets i{color: var(--emerald);}

/* CTA primary */
.cta-primary{
  display:inline-flex; align-items:center; gap:12px;
  padding: 16px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--emerald) 0%, #00FFA3 60%, var(--cyan) 100%);
  color: #0E0826;
  font-weight:800;
  font-size: 16px;
  letter-spacing: -.01em;
  box-shadow:
    0 12px 40px -6px rgba(57,255,20,.55),
    0 0 0 1px rgba(255,255,255,.25) inset;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s;
  position:relative;
  overflow:hidden;
}
.cta-primary::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.cta-primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 50px -6px rgba(57,255,20,.7),
    0 0 0 1px rgba(255,255,255,.4) inset;
}
.cta-primary:hover::before{transform: translateX(100%);}
.cta-primary.big{
  padding: 20px 32px;
  font-size: 17px;
  border-radius: 16px;
}
.cta-arrow{transition: transform .25s ease;}
.cta-primary:hover .cta-arrow{transform: translateX(4px);}

.cta-icon{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:6px;
  padding:2px;
}
.cta-icon-img{width:100%; height:100%; object-fit:contain;}

.hero-meta{
  display:flex; align-items:center; gap:14px;
  margin-top: 24px;
}
.avatars-stack{display:flex;}
.avatars-stack img{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover;
  border:2px solid var(--purple-dark);
  box-shadow: 0 0 0 1px rgba(0,191,255,.4);
  margin-left:-10px;
}
.avatars-stack img:first-child{margin-left:0;}
.hero-meta-text{font-size:13px; color:var(--ink-mute);}
.hero-meta-text b{color:#fff;}
.stars-mini{color: var(--emerald); font-size:12px; margin-bottom:2px;}
.stars-mini i{margin-right:2px;}

/* HERO visual */
.hero-visual{position:relative;}
.visual-frame{
  position:relative;
  aspect-ratio: 5/4;
  max-width: 560px;
  margin-left:auto;
}
.visual-glow{
  position:absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(57,255,20,.45), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,191,255,.45), transparent 50%);
  filter: blur(50px);
  z-index:0;
  animation: pulseGlow2 6s ease-in-out infinite;
}
@keyframes pulseGlow2{
  0%,100%{opacity:.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.05);}
}
.visual-main{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  object-fit: contain;
  mix-blend-mode: screen;       /* 흰 배경을 자연스럽게 합성: 사용자가 PNG를 투명 처리하기 전 임시 보정 */
  filter: drop-shadow(0 20px 60px rgba(57,255,20,.45))
          drop-shadow(0 20px 60px rgba(0,191,255,.4));
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{transform: translateY(0);}
  50%{transform: translateY(-12px);}
}
.orbit{
  position:absolute; inset:-8%;
  z-index:1; pointer-events:none;
  animation: spin 30s linear infinite;
}
@keyframes spin{ to{transform: rotate(360deg);} }

.float-card{
  position:absolute;
  z-index:3;
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  background: rgba(20,12,55,.85);
  border:1px solid var(--line-strong);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  animation: floatY 5s ease-in-out infinite;
}
.fc-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.fc-icon.up{background:rgba(57,255,20,.18); color:var(--emerald); box-shadow:0 0 24px rgba(57,255,20,.4) inset;}
.fc-icon.report{background:rgba(0,191,255,.18); color:var(--cyan); box-shadow:0 0 24px rgba(0,191,255,.4) inset;}
.fc-label{font-size:11px; color:var(--ink-mute); margin-bottom:2px; letter-spacing:.3px;}
.fc-value{font-size:15px; font-weight:800; color:#fff;}
.dot-live{
  width:10px; height:10px; border-radius:50%;
  background: #FF3B6B; box-shadow:0 0 12px #FF3B6B;
  animation: pulseGlow 1.2s ease-in-out infinite;
  display:inline-block; margin-right:2px;
}

.card-up   { top: 8%;  left: -10%; animation-delay:-1s;}
.card-live { top: 40%; right:-12%; animation-delay:-2.5s;}
.card-report{bottom: 8%; left:  4%; animation-delay:-4s;}

/* =================== Section headers =================== */
.section-head{
  text-align:center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left:auto; margin-right:auto;
}
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px;
  background: rgba(0,191,255,.10);
  border:1px solid rgba(0,191,255,.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight:800;
  color: var(--cyan);
  letter-spacing: .4px;
  margin-bottom: 18px;
}
.section-eyebrow.center{margin-left:auto; margin-right:auto;}
.section-eyebrow i{font-size:12px;}
.section-title{
  font-family:'Nanum Gothic', system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.25;
  letter-spacing: -.025em;
  color:#fff;
}
.section-title.center{text-align:center;}

/* =================== Features =================== */
.intro{padding: 80px 0;}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card{
  position:relative;
  padding: 28px 24px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.feature-card::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(57,255,20,.18), transparent 50%);
  opacity:0;
  transition: opacity .3s ease;
  pointer-events:none;
}
.feature-card:hover{
  transform: translateY(-6px);
  border-color: rgba(57,255,20,.4);
  box-shadow: 0 30px 60px -20px rgba(57,255,20,.3);
}
.feature-card:hover::before{opacity:1;}
.feature-num{
  font-family:'Nanum Gothic', system-ui, sans-serif;
  font-weight:800;
  font-size: 56px;
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0,191,255,.45);
  position:absolute; top: 14px; right: 18px;
  opacity:.8;
  letter-spacing:-.02em;
}
.feature-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(57,255,20,.18), rgba(0,191,255,.18));
  border: 1px solid rgba(57,255,20,.35);
  color: var(--emerald);
  font-size: 22px;
  margin-bottom: 20px;
  box-shadow: 0 0 30px rgba(57,255,20,.2) inset;
}
.feature-card h3{
  font-size: 17px;
  font-weight:800;
  margin-bottom: 8px;
  color:#fff;
}
.feature-card p{
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.65;
}

/* =================== Feature Row (image + text) =================== */
.feature-row{padding: 60px 0;}
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col.reverse .two-col-media{order: 2;}
.two-col.reverse .two-col-text{order: 1;}

.two-col-media{position:relative;}
.media-frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow: 0 40px 100px -30px rgba(0,191,255,.45);
  transition: transform .5s ease;
}
.media-frame:hover{transform: translateY(-4px) rotate(-.4deg);}
.media-frame img{
  width:100%; height:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s ease;
}
.media-frame:hover img{transform: scale(1.04);}
.frame-corner{
  position:absolute;
  width: 28px; height:28px;
  border:2px solid var(--emerald);
  z-index:2;
}
.frame-corner.tl{top:14px; left:14px; border-right:none; border-bottom:none;}
.frame-corner.tr{top:14px; right:14px; border-left:none; border-bottom:none;}
.frame-corner.bl{bottom:14px; left:14px; border-right:none; border-top:none;}
.frame-corner.br{bottom:14px; right:14px; border-left:none; border-top:none;}
.frame-corner.tr, .frame-corner.br{border-color: var(--cyan);}

.badge-overlay{
  position:absolute;
  top: 20px; right: 50px;
  padding: 8px 14px;
  background: rgba(14,8,38,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(57,255,20,.4);
  border-radius: 999px;
  font-size: 12px;
  font-weight:800;
  color: var(--emerald);
  display:inline-flex; align-items:center; gap:6px;
  z-index:3;
}
.badge-overlay.alt{
  border-color: rgba(255,59,107,.5);
  color: #ff8aa6;
}

.row-desc{
  font-size: 16px;
  color: var(--ink-mute);
  margin: 20px 0 24px;
  max-width: 560px;
}
.row-desc.center{margin-left:auto; margin-right:auto; text-align:center;}

.check-list{list-style:none; margin-bottom: 28px;}
.check-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  color: #E2DEF7;
}
.check-list li:last-child{border-bottom:none;}
.check-list i{color: var(--emerald); margin-top: 4px;}

/* CTA secondary */
.cta-secondary{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 20px;
  border-radius: 12px;
  background: rgba(0,191,255,.10);
  border:1px solid rgba(0,191,255,.4);
  color: #fff;
  font-weight:800;
  font-size: 14px;
  transition: all .3s ease;
}
.cta-secondary:hover{
  background: rgba(0,191,255,.18);
  border-color: var(--emerald);
  box-shadow: 0 0 30px rgba(0,191,255,.4);
  transform: translateY(-2px);
}
.cta-secondary i.fa-arrow-right-long{transition: transform .25s ease;}
.cta-secondary:hover i.fa-arrow-right-long{transform: translateX(4px);}

/* =================== Reviews =================== */
.reviews{padding: 80px 0;}
.trust-summary{
  display:inline-flex; align-items:center; gap:14px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.trust-stars{color:#FFD24D; font-size:14px; letter-spacing:1px;}
.trust-text{font-size:13px; color: var(--ink-mute);}
.trust-text b{color:#fff;}

.slider-wrap{position:relative;}
.slider{
  display:flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 4px 24px;
  scroll-behavior: smooth;
}
.slider::-webkit-scrollbar{display:none;}

.review-card{
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  display:flex; flex-direction:column; gap:14px;
  transition: transform .35s ease, border-color .35s;
  position:relative;
  overflow:hidden;
}
.review-card:hover{
  transform: translateY(-4px);
  border-color: rgba(57,255,20,.35);
}
.review-card::after{
  content:'\201D';
  position:absolute; top:-46px; right:14px;
  font-family: Georgia, 'Nanum Gothic', serif;
  font-weight:700;
  font-size: 140px;
  color: rgba(0,191,255,.12);
  line-height:1;
}
.rev-stars{color:#FFD24D; font-size:13px; letter-spacing:1px;}
.rev-stars i{margin-right:1px;}
.rev-body{
  font-size: 14px;
  color: #E2DEF7;
  line-height:1.65;
  flex:1;
}
.rev-foot{
  display:flex; align-items:center; gap:12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.rev-foot img{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover;
  border: 2px solid rgba(0,191,255,.4);
}
.rev-name{font-size:14px; font-weight:800; color:#fff;}
.rev-meta{font-size:12px; color: var(--ink-mute);}

.slider-ctrl{
  display:flex; align-items:center; justify-content:center;
  gap: 16px;
  margin-top: 12px;
}
.slider-btn{
  width: 44px; height:44px; border-radius:50%;
  background: var(--glass-strong);
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 14px;
  transition: all .25s ease;
}
.slider-btn:hover{
  background: linear-gradient(135deg, var(--emerald), var(--cyan));
  color: var(--purple-dark);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(57,255,20,.5);
}
.slider-dots{display:flex; gap:8px;}
.slider-dots span{
  width:8px; height:8px; border-radius:50%;
  background: var(--line-strong);
  transition: all .3s ease;
  cursor:pointer;
}
.slider-dots span.active{
  width:24px; border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
}

/* =================== Final CTA =================== */
.final-cta{padding: 60px 0 80px;}
.cta-card{
  position:relative;
  padding: 60px 32px 48px;
  text-align:center;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(0,191,255,.06), rgba(57,255,20,.05));
  border:1px solid rgba(57,255,20,.3);
  overflow:hidden;
}
.cta-card-glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 30% 50%, rgba(57,255,20,.35), transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(0,191,255,.35), transparent 50%);
  filter: blur(40px);
  z-index:0;
  animation: pulseGlow2 6s ease-in-out infinite;
}
.cta-card > *{position:relative; z-index:1;}
.cta-trust{
  display:inline-flex; align-items:center; gap:12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-mute);
}
.cta-trust i{color: var(--emerald); margin-right:4px;}
.dot-sep{width:4px; height:4px; border-radius:50%; background: var(--line-strong);}

/* =================== Footer =================== */
.footer{
  padding: 50px 0 30px;
  border-top:1px solid var(--line);
  background: rgba(14,8,38,.7);
  position:relative;
  z-index: 2;
}
.foot-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap:wrap;
}
.foot-logo{
  font-family:'Nanum Gothic', system-ui, sans-serif;
  font-weight:800;
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 8px;
}
.foot-logo span{
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-brand p{font-size:13px; color: var(--ink-mute);}
.foot-links{display:flex; gap: 24px; flex-wrap:wrap;}
.foot-links a{
  font-size: 13px;
  color: var(--ink-mute);
  transition: color .25s;
  cursor:pointer;
}
.foot-links a:hover{color: var(--emerald);}
.foot-bottom{
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-mute);
  text-align:center;
}

/* =================== Fixed CTA =================== */
.fixed-cta-bar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 32px);
  max-width: 460px;
  pointer-events:none;
}
.fixed-cta-btn{
  pointer-events:auto;
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--emerald) 0%, #00FFA3 55%, var(--cyan) 100%);
  color: #0E0826;
  font-weight:800;
  font-size: 15px;
  box-shadow:
    0 20px 50px -10px rgba(57,255,20,.6),
    0 0 0 1px rgba(255,255,255,.3) inset;
  transition: transform .25s, box-shadow .25s;
}
.fixed-cta-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 30px 70px -10px rgba(57,255,20,.75),
    0 0 0 1px rgba(255,255,255,.45) inset;
}
.fixed-cta-btn.bounce{
  animation: bounceCta 2.2s ease-in-out infinite;
}
@keyframes bounceCta{
  0%,100%{transform: translateY(0);}
  50%   {transform: translateY(-8px);}
}
.fixed-cta-text{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =================== Modal =================== */
.modal{
  position:fixed; inset:0;
  z-index:200;
  display:none;
  align-items:center; justify-content:center;
  padding: 20px;
}
.modal.open{display:flex;}
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(7,4,20,.75);
  backdrop-filter: blur(8px);
}
.modal-card{
  position:relative;
  max-width: 560px;
  width:100%;
  max-height: 80vh;
  overflow-y:auto;
  padding: 32px 28px;
  background: linear-gradient(180deg, #1a1140, #0e0826);
  border:1px solid rgba(57,255,20,.3);
  border-radius: 24px;
  box-shadow: 0 40px 100px -10px rgba(0,191,255,.4);
}
.modal-close{
  position:absolute; top: 14px; right: 14px;
  width:36px; height:36px; border-radius:50%;
  background: var(--glass);
  color: #fff;
  font-size:14px;
  transition: background .25s;
}
.modal-close:hover{background: rgba(255,255,255,.15);}
.modal-title{
  font-family:'Nanum Gothic', system-ui, sans-serif;
  font-weight:800;
  font-size: 20px;
  margin-bottom: 18px;
  color:#fff;
  letter-spacing:-.015em;
}
.modal-body{
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.8;
}
.modal-body h4{
  font-size: 14px; color: var(--emerald);
  margin: 14px 0 6px;
}
.modal-body p{margin-bottom: 10px;}
.modal-body ul{padding-left: 18px; margin-bottom: 10px;}
.modal-body li{margin-bottom: 4px;}

/* =================== Reveal-on-scroll =================== */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in{opacity:1; transform: translateY(0);}

/* =================== Responsive =================== */
@media (max-width: 1024px){
  .hero-grid{gap:36px;}
  .feature-grid{grid-template-columns: repeat(2, 1fr);}
  .review-card{flex: 0 0 calc((100% - 40px) / 3);}
}

@media (max-width: 720px){
  body{padding-bottom: 84px;}
  .container{padding: 0 14px;}
  .pc-only{display:none;}
  .mobile-only{display:inline;}

  /* HERO */
  .hero{padding: 22px 0 18px;}
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-text{order: 2; text-align:center;}
  .hero-visual{order: 1; max-width: 260px; margin: 0 auto;}
  .visual-frame{max-width: 260px; aspect-ratio: 1/1;}
  .visual-glow{inset:-12%;}

  .hero-pill{font-size:10.5px; padding:5px 11px; margin-bottom: 12px;}
  .hero-title{
    font-size: 26px;
    line-height:1.25;
    margin-bottom: 10px;
    letter-spacing:-.02em;
  }
  .hero-sub{font-size: 13px; line-height:1.55; margin-bottom: 14px;}
  .hero-bullets{
    gap: 6px;
    margin-bottom: 14px;
    justify-content:center;
  }
  .hero-bullets span{font-size:10.5px; padding:5px 9px;}
  .hero-bullets i{font-size:10px;}

  .cta-primary{
    padding: 13px 18px;
    font-size:13.5px;
    width:100%;
    justify-content:center;
    border-radius:12px;
  }
  .cta-primary.big{padding: 15px 20px; font-size:14.5px;}
  .cta-icon{width:20px; height:20px; border-radius:5px;}

  .hero-meta{margin-top: 14px; justify-content:center;}
  .avatars-stack img{width:30px; height:30px; margin-left:-8px;}
  .hero-meta-text{font-size:11.5px;}
  .stars-mini{font-size:10.5px;}

  .float-card{padding: 6px 9px; gap: 7px; border-radius:10px;}
  .fc-icon{width:26px; height:26px; font-size:11px; border-radius:7px;}
  .fc-label{font-size:8.5px;}
  .fc-value{font-size:11.5px;}
  .card-up   {top:2%;  left:-4%;}
  .card-live {top:42%; right:-6%;}
  .card-report{bottom:4%; left:-4%;}
  .orbit{inset:-4%;}

  /* SECTION HEADS */
  .section-head{margin-bottom: 24px;}
  .section-eyebrow{font-size:10.5px; padding:4px 10px; margin-bottom:10px; letter-spacing:.3px;}
  .section-eyebrow i{font-size:10px;}
  .section-title{font-size: 22px; line-height:1.3; letter-spacing:-.02em;}

  /* INTRO / FEATURES */
  .intro{padding: 36px 0;}
  .feature-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .feature-card{padding: 16px 14px 14px; border-radius: 16px;}
  .feature-num{font-size:34px; top: 8px; right:10px;}
  .feature-icon{width:36px; height:36px; font-size:15px; border-radius:10px; margin-bottom: 10px;}
  .feature-card h3{font-size:13px; line-height:1.35; margin-bottom:5px;}
  .feature-card p{font-size:11.5px; line-height:1.55;}

  /* FEATURE ROW (image + text) */
  .feature-row{padding: 30px 0;}
  .two-col{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .two-col.reverse .two-col-media{order: 1;}
  .two-col.reverse .two-col-text{order: 2;}
  .two-col-text{text-align:center;}
  .media-frame img{aspect-ratio: 16/11;}
  .frame-corner{width: 18px; height:18px;}
  .frame-corner.tl,.frame-corner.tr{top:10px;}
  .frame-corner.tl,.frame-corner.bl{left:10px;}
  .frame-corner.tr,.frame-corner.br{right:10px;}
  .frame-corner.bl,.frame-corner.br{bottom:10px;}
  .badge-overlay{font-size:10.5px; padding: 5px 9px; right: 12px; top:10px;}
  .row-desc{font-size:13px; line-height:1.65; margin: 10px 0 14px;}
  .check-list{margin-bottom: 18px; display:inline-block; text-align:left;}
  .check-list li{font-size:12.5px; padding: 6px 0;}
  .check-list i{font-size:12px;}
  .cta-secondary{padding: 11px 16px; font-size:13px; width:100%; justify-content:center;}

  /* REVIEWS */
  .reviews{padding: 36px 0;}
  .trust-summary{padding: 7px 14px; gap:10px; margin-top: 12px;}
  .trust-stars{font-size:12px;}
  .trust-text{font-size:11.5px;}
  .slider{gap: 10px; padding: 4px 4px 14px;}
  .review-card{
    flex: 0 0 calc(100% - 6px);
    padding: 18px 16px;
    border-radius: 18px;
    gap: 10px;
  }
  .rev-stars{font-size:12px;}
  .rev-body{font-size:12.5px; line-height:1.6;}
  .rev-foot img{width:36px; height:36px;}
  .rev-name{font-size:13px;}
  .rev-meta{font-size:11px;}
  .review-card::after{font-size:100px; top:-32px; right:10px;}
  .slider-btn{width:34px; height:34px; font-size:11px;}
  .slider-dots span{width:6px; height:6px;}
  .slider-dots span.active{width:18px;}
  .slider-ctrl{gap:12px; margin-top:4px;}

  /* FINAL CTA */
  .final-cta{padding: 30px 0 40px;}
  .cta-card{padding: 28px 18px 22px; border-radius:20px;}
  .cta-trust{font-size:10.5px; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:14px;}

  /* FOOTER */
  .footer{padding: 22px 0 16px;}
  .foot-row{flex-direction:column; gap: 14px; margin-bottom:14px; text-align:center; align-items:center;}
  .foot-logo{font-size:18px;}
  .foot-brand p{font-size:12px;}
  .foot-links{gap: 12px; justify-content:center;}
  .foot-links a{font-size:12px;}
  .foot-bottom{font-size:10.5px; padding-top: 14px;}

  /* FIXED CTA */
  .fixed-cta-bar{bottom: 10px; max-width: calc(100% - 24px);}
  .fixed-cta-btn{padding: 12px 16px; font-size:12.5px; gap:8px;}
  .fixed-cta-btn .cta-icon{width:22px; height:22px;}

  /* MODAL */
  .modal-card{padding: 22px 18px;}
  .modal-title{font-size: 17px;}
  .modal-body{font-size:13px; line-height:1.7;}

  .bg-grid{background-size:28px 28px;}
  .blob-1,.blob-2,.blob-3{filter: blur(60px); opacity:.45;}
}

@media (max-width: 380px){
  .hero-title{font-size: 23px;}
  .section-title{font-size: 20px;}
  .fixed-cta-text{font-size:12px;}
  .feature-card{padding: 14px 12px;}
  .feature-card h3{font-size:12.5px;}
  .feature-card p{font-size:11px;}
  .hero-visual,.visual-frame{max-width: 230px;}
}