nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 2.5rem;
  height: 64px;
  background: rgba(6,9,15,0.85);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-family:'Syne',sans-serif; font-size:1.35rem; font-weight:800;
  color:#fff; text-decoration:none; display:flex; align-items:center; gap:0.5rem;
  letter-spacing:-0.5px;
}
.logo svg { flex-shrink:0; }
.logo .brand-red  { color:var(--red); }
.logo .brand-live { font-size:0.65rem; color:var(--cyan); font-weight:600; letter-spacing:2px; vertical-align:super; margin-left:1px; }

.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a {
  color:var(--sub); font-size:0.875rem; text-decoration:none;
  transition:color .2s; font-weight:500;
}
.nav-links a:hover { color:var(--text); }

.nav-right { display:flex; align-items:center; gap:0.75rem; }
.btn-ghost-sm {
  background:transparent; border:1px solid var(--border2);
  color:var(--text); border-radius:8px; padding:0.5rem 1.1rem;
  font-size:0.85rem; font-weight:600; cursor:pointer; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.btn-ghost-sm:hover { border-color:var(--red); background:rgba(232,93,48,.06); }
.btn-cta-sm {
  background:var(--red); color:#fff;
  border:none; border-radius:8px; padding:0.5rem 1.3rem;
  font-size:0.875rem; font-weight:700; cursor:pointer; text-decoration:none;
  transition:opacity .2s, transform .2s;
  box-shadow:0 0 20px rgba(232,93,48,.3);
}
.btn-cta-sm:hover { opacity:.85; transform:translateY(-1px); }


*{box-sizing:border-box;margin:0;padding:0}

.wrap{padding:1.5rem 0 12rem}

/* ── NAV BAR ── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:60px;
  background:rgba(6,9,15,.96);
  border:0.5px solid rgba(255,255,255,.1);
  border-radius:14px;
  position:relative;z-index:100;
}

/* Logo */
.nav-logo{
  display:flex;align-items:center;gap:8px;
  font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;
  color:#fff;text-decoration:none;flex-shrink:0;
  letter-spacing:-.4px;
}
.nav-logo .kr{color:#E85D30}
.nav-logo .kl{font-size:.55rem;color:#00e5ff;font-weight:600;letter-spacing:1.5px;vertical-align:super}

/* ── NAV LINKS (desktop) ── */
.nav-links{
  display:flex;align-items:center;gap:4px;
  flex:1;justify-content:center;
}

/* Every top-level nav item is a <div class="ni"> */
.ni{position:relative}

/* Plain link (no dropdown) */
.ni > a{
  display:flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:8px;
  color:rgba(255,255,255,.6);font-size:.82rem;font-weight:500;
  text-decoration:none;white-space:nowrap;
  transition:color .18s,background .18s;
  cursor:pointer;border:none;background:transparent;
  font-family:inherit;
}
.ni > a:hover,.ni.open > a{
  color:#fff;background:rgba(255,255,255,.07);
}

/* Trigger with chevron icon */
.ni > a .chev{
  width:14px;height:14px;flex-shrink:0;
  transition:transform .22s;
  color:rgba(255,255,255,.4);
}
.ni.open > a .chev{transform:rotate(180deg);color:rgba(255,255,255,.7)}

/* Active indicator dot */
.ni > a.active::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:#E85D30;margin-right:2px;flex-shrink:0;
}

/* ── DROPDOWN ── */
.dd{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(10,15,26,.98);
  border:0.5px solid rgba(255,255,255,.12);
  border-radius:14px;padding:8px;
  min-width:220px;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  z-index:200;
}
.ni.open .dd{
  opacity:1;pointer-events:all;
  transform:translateX(-50%) translateY(0);
}

/* Dropdown wider for "Platform" */
.dd.wide{min-width:280px}

/* Dropdown section header */
.dd-hdr{
  font-size:.58rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:4px 10px 6px;
}

/* Dropdown item */
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;
  color:rgba(255,255,255,.7);font-size:.8rem;
  text-decoration:none;transition:background .15s,color .15s;
  cursor:pointer;
}
.dd-item:hover{background:rgba(255,255,255,.07);color:#fff}
.dd-item.hi:hover{background:rgba(232,93,48,.1);color:#E85D30}

/* Icon box inside dropdown item */
.dd-ico{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.dd-item-text{display:flex;flex-direction:column;gap:1px}
.dd-item-title{font-size:.8rem;font-weight:500;line-height:1.2}
.dd-item-sub{font-size:.68rem;color:rgba(255,255,255,.38);line-height:1.3}
.dd-item:hover .dd-item-sub{color:rgba(255,255,255,.5)}

/* Divider */
.dd-sep{height:0.5px;background:rgba(255,255,255,.08);margin:6px 4px}

/* Dropdown badge */
.dd-badge{
  margin-left:auto;font-size:.58rem;font-weight:700;padding:2px 7px;
  border-radius:100px;white-space:nowrap;
}
.badge-new{background:rgba(0,212,106,.15);color:#00d46a;border:0.5px solid rgba(0,212,106,.25)}
.badge-hot{background:rgba(232,93,48,.15);color:#E85D30;border:0.5px solid rgba(232,93,48,.25)}
.badge-free{background:rgba(0,229,255,.12);color:#00e5ff;border:0.5px solid rgba(0,229,255,.22)}

/* CTA button */
.nav-cta{
  background:#E85D30;color:#fff;border:none;border-radius:8px;
  padding:7px 16px;font-size:.8rem;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  text-decoration:none;display:flex;align-items:center;gap:5px;
  transition:opacity .2s,transform .2s;font-family:inherit;
}
.nav-cta:hover{opacity:.85;transform:translateY(-1px)}

/* ── HAMBURGER (mobile) ── */
.ham{
  display:none;flex-direction:column;gap:4px;cursor:pointer;
  padding:6px;background:transparent;border:none;
}
.ham span{display:block;width:20px;height:1.5px;background:rgba(255,255,255,.7);border-radius:2px;transition:all .25s}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ── MOBILE MENU ── */
.mob{
  display:none;flex-direction:column;gap:2px;
  position:fixed;
  top:68px;
  left:12px;
  right:12px;
  z-index:300;
  background:rgba(10,15,26,.98);
  border:0.5px solid rgba(255,255,255,.1);
  border-radius:14px;padding:10px;
  overflow-y:auto;
  max-height:calc(100vh - 88px);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.mob.show{display:flex}

/* Mobile accordion item */
.mob-item{border-radius:10px;overflow:hidden}
.mob-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:11px 14px;
  background:transparent;border:none;
  color:rgba(255,255,255,.7);font-size:.84rem;font-weight:500;
  cursor:pointer;border-radius:10px;transition:background .15s,color .15s;
  font-family:inherit;text-align:left;
}
.mob-trigger:hover,.mob-item.open .mob-trigger{background:rgba(255,255,255,.06);color:#fff}
.mob-trigger a{color:inherit;text-decoration:none;flex:1}
.mob-chev{width:14px;height:14px;color:rgba(255,255,255,.35);transition:transform .22s;flex-shrink:0}
.mob-item.open .mob-chev{transform:rotate(180deg)}

/* Mobile sub-items panel */
.mob-sub{
  display:none;flex-direction:column;gap:1px;
  padding:4px 0 6px 0;
}
.mob-item.open .mob-sub{display:flex}
.mob-sub a{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 20px;
  color:rgba(255,255,255,.55);font-size:.78rem;text-decoration:none;
  border-radius:8px;transition:background .15s,color .15s;
  margin:0 4px;
}
.mob-sub a:hover{background:rgba(255,255,255,.06);color:#fff}
.mob-sub .ms-ico{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}

/* Mobile plain link */
.mob-plain{
  display:flex;align-items:center;
  padding:11px 14px;color:rgba(255,255,255,.7);font-size:.84rem;
  text-decoration:none;border-radius:10px;transition:background .15s,color .15s;
  font-weight:500;
}
.mob-plain:hover{background:rgba(255,255,255,.06);color:#fff}
.mob-plain.highlight{color:#E85D30}
.mob-plain.highlight:hover{background:rgba(232,93,48,.08)}

/* Mobile CTA */
.mob-cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#E85D30;color:#fff;border-radius:10px;
  padding:12px;font-size:.84rem;font-weight:700;
  text-decoration:none;margin:6px 4px 2px;
  transition:opacity .2s;
}
.mob-cta:hover{opacity:.88}

/* ── DEMO PREVIEW LABEL ── */
.demo-label{
  text-align:center;margin-top:1.5rem;
  font-size:.72rem;color:rgba(255,255,255,.25);letter-spacing:.5px;
}

@media(max-width:700px){
  .nav-links,.nav-cta-desktop{display:none!important}
  .ham{display:flex}
  .nav{padding:0 1.25rem}
}
@media(min-width:701px){
  .ham{display:none!important}
  .mob{display:none!important;position:fixed;}
}

/* Google Font for logo */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap');

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: #00ff6a;
  box-shadow: 0 0 6px #00ff6a, 0 0 12px #00ff6a;
  animation: blinkGlow 1.5s infinite;
}

@keyframes blinkGlow {
  0% {
    opacity: 1;
    box-shadow: 0 0 6px #00ff6a, 0 0 12px #00ff6a;
  }
  50% {
    opacity: 0.3;
    box-shadow: 0 0 2px #00ff6a;
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 6px #00ff6a, 0 0 12px #00ff6a;
  }
}