:root {
  --bg: #0b0f17;
  --bg-alt: #121926;
  --bg-soft: #1d2633;
  --panel: var(--bg-soft);
  --field-bg: #0d141e;
  --text: #e6ecf3;
  --text-dim: #8b9bb0;
  --primary: #3b82f6;
  --primary-accent: #60a5fa;
  --secondary: #6366f1;
  --secondary-accent: #818cf8;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --gradient: linear-gradient(135deg,#2563eb,#818cf8 55%,#06b6d4);
  --shadow-sm: 0 2px 4px -2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.06),0 0 0 4px rgba(59,130,246,0.15),0 12px 40px -8px rgba(59,130,246,0.35);
  --transition: 0.28s cubic-bezier(.65,.05,.36,1);
  font-family: 'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 30% 20%,#132033,#060a12 70%) fixed;
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg-alt: #eef2f6;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --field-bg: #f1f5f9;
  --text: #0b1320;
  --text-dim: #48525d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 18px -2px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 0 1px rgba(59,130,246,0.25),0 6px 30px -6px rgba(59,130,246,0.35);
}

[data-theme="light"] body { background: radial-gradient(circle at 60% 20%,#ffffff,#e2e8f0 70%) fixed; }
[data-theme="light"] .site-header { background: rgba(255,255,255,0.78); border-bottom:1px solid rgba(0,0,0,0.06); }
[data-theme="light"] .hero::before { background: radial-gradient(circle at 70% 30%,rgba(59,130,246,0.18),transparent 60%),radial-gradient(circle at 30% 70%,rgba(99,102,241,0.18),transparent 55%); }
[data-theme="light"] .plan { background: #ffffff; border:1px solid rgba(0,0,0,0.09); }
[data-theme="light"] .plan.highlighted { background: linear-gradient(160deg,#f1f5f9,#dbeafe); border:1px solid rgba(59,130,246,0.35); }
[data-theme="light"] .feature-item,.faq-item,.stat,.contact-form { background: var(--panel); border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .billing-toggle { background: var(--panel); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .hero-badges li { background: var(--panel); border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .table-wrapper { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .compare table { background: var(--panel); }
[data-theme="light"] .compare tbody tr:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .site-footer { background: linear-gradient(180deg,#f1f5f9,#e2e8f0); border-top:1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .foot-desc { color: var(--text-dim); }
[data-theme="light"] .newsletter input { background: var(--field-bg); border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .contact-form { box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12); }
[data-theme="light"] .glass { background: rgba(255,255,255,0.72); color:#0b1320; box-shadow: 0 4px 22px -6px rgba(0,0,0,0.15); }
[data-theme="light"] .main-nav a { color: var(--text-dim); }
[data-theme="light"] .main-nav a:hover { color: var(--text); }
[data-theme="light"] .faq-item { background: var(--panel); }
[data-theme="light"] .faq-item .answer { color: var(--text-dim); }
[data-theme="light"] .stat { background: var(--panel); }
[data-theme="light"] .scroll-top { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.25); }
[data-theme="light"] .theme-switch label { background: var(--bg-alt); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
[data-theme="light"] .hero-badges li { color: var(--text-dim); }
[data-theme="light"] .hero-copy h1 { background:none; color:#0b1320; }
[data-theme="light"] .plan .price .amount { background:none; color:#0b1320; }
[data-theme="light"] .stat .num { background:none; color:#0b1320; }
[data-theme="light"] .footer-logo { background:none; color:#0b1320; }
[data-theme="light"] .btn.outline { --btn-color: #0b1320; --btn-border: rgba(0,0,0,0.22); }
[data-theme="light"] .btn.outline:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .form-grid input,.form-grid select,.form-grid textarea { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color: var(--primary); }


img,svg { max-width: 100%; display: block; }
button,input,select,textarea { font-family: inherit; font-size: 1rem; color: inherit; }

.container { width: min(1240px,90%); margin-inline: auto; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center-v { align-items: center; }
.center-text { text-align: center; }

h1,h2,h3,h4 { font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.lead { font-size: 1.125rem; color: var(--text-dim); }
.section-lead { max-width: 680px; margin: .5rem auto 2.5rem; color: var(--text-dim); }

.site-header {
  position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px) saturate(1.3);
  background: rgba(7,11,18,0.72); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header .container { padding: .75rem 0; gap: 1.25rem; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); font-weight: 600; }
.logo-mark { background: var(--gradient); padding: .45rem .55rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700; letter-spacing: .5px; box-shadow: var(--shadow-sm); }
.logo-text strong { color: var(--primary-accent); }

.main-nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; align-items:center; }
.main-nav a { text-decoration: none; color: var(--text-dim); font-weight: 500; position: relative; }
.main-nav a:hover,.main-nav a:focus { color: var(--text); }
.main-nav a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--primary); transition: var(--transition); }
.main-nav a:hover::after,.main-nav a:focus::after { width:100%; }

.nav-toggle { display: none; background:none; border:none; cursor:pointer; padding:.4rem .5rem; border-radius: var(--radius-sm); }
.nav-toggle:focus-visible { outline: 2px solid var(--primary); }
.nav-toggle .bar { display:block; width:25px; height:2px; background:var(--text); margin:5px 0; transition: var(--transition); }

.theme-switch { position: relative; margin-left: .5rem; }
.theme-switch input { display: none; }
.theme-switch label { cursor: pointer; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-soft); border-radius: 999px; position: relative; width: 48px; height: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
.theme-switch .sun,.theme-switch .moon { width:16px; height:16px; align-self:center; justify-self:center; }
.theme-switch .sun { background: radial-gradient(circle,#fde047,#facc15); border-radius:50%; }
.theme-switch .moon { background: conic-gradient(from 90deg,#94a3b8,#cbd5e1); border-radius:50%; position: relative; }
.theme-switch label::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--primary); border-radius:50%; transition: var(--transition); }
.theme-switch input:checked + label::after { transform: translateX(24px); background: var(--secondary); }

.btn { --btn-bg: var(--bg-soft); --btn-color: var(--text); --btn-border: rgba(255,255,255,0.08); cursor:pointer; padding:.75rem 1.25rem; border-radius: var(--radius-sm); font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-color); position:relative; overflow:hidden; transition: var(--transition); text-decoration:none; }
.btn.primary { --btn-bg: var(--primary); --btn-color:#fff; --btn-border:transparent; }
.btn.secondary { --btn-bg: var(--secondary); --btn-color:#fff; --btn-border:transparent; }
.btn.outline { --btn-bg: transparent; --btn-color: var(--text); --btn-border: rgba(255,255,255,0.2); }
.btn.full { width:100%; }
.btn.large { padding:1rem 1.75rem; font-size:1.05rem; }
.btn.small { padding:.5rem .9rem; font-size:.8rem; }
.btn:hover,.btn:focus-visible { filter: brightness(1.08); box-shadow: var(--shadow-md); }
.btn.outline:hover { background: rgba(255,255,255,0.06); }
.btn.primary:hover { box-shadow: var(--shadow-glow); }

.hero { padding: clamp(3rem,10vh,6rem) 0 4rem; position: relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(59,130,246,0.25),transparent 60%),radial-gradient(circle at 30% 70%,rgba(99,102,241,0.2),transparent 55%); opacity: .85; }
.hero-grid { display:grid; gap:3.5rem; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); align-items:center; }
.hero-copy h1 { font-size:clamp(2.3rem,4.1vw,3.6rem); margin:0 0 1rem; background: linear-gradient(90deg,#fff,#a5b4fc 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-badges { display:flex; gap:.75rem; list-style:none; padding:0; margin:2rem 0 0; flex-wrap:wrap; }
.hero-badges li { background: var(--bg-soft); padding:.45rem .75rem; border-radius: 999px; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); border:1px solid rgba(255,255,255,0.07); }
.cta-group { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }

.hero-art { position:relative; min-height:340px; }
.glass { backdrop-filter: blur(12px) saturate(1.4); background: rgba(255,255,255,0.05); padding:.9rem 1.1rem; border-radius: var(--radius-md); font-size:.9rem; font-weight:600; box-shadow: var(--shadow-md); position:absolute; animation: float 7s ease-in-out infinite; }
.glass.card span { display:block; font-weight:400; font-size:.7rem; color: var(--text-dim); margin-top:.25rem; }
.card.latency { top:12%; left:10%; }
.card.uptime { top:55%; left:3%; animation-delay:-2s; }
.card.ddos { top:30%; left:65%; animation-delay:-4s; }
.network-graphic { position:absolute; inset:0; display:grid; place-items:center; }
.network-graphic .node { width:22px; height:22px; background: var(--gradient); border-radius:50%; position:absolute; box-shadow:0 0 0 3px rgba(255,255,255,0.07),0 0 0 8px rgba(59,130,246,0.12); animation:pulse 4.5s ease-in-out infinite; }
.node.core { width:30px; height:30px; }
.node.edge.a { top:10%; left:20%; }
.node.edge.b { top:65%; left:70%; }
.node.edge.c { top:25%; left:85%; }
.lines { width:100%; height:100%; opacity:.25; }
.ring { fill:none; stroke: url(#grad); stroke-width:1.5; stroke:rgba(255,255,255,0.15); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity:1;} 50% { transform: scale(.6); opacity:.5; } }

.switch-billing { padding:1rem 0 0; }
.billing-toggle { display:inline-flex; align-items:center; gap:.75rem; background: var(--bg-soft); padding:.55rem 1rem; border-radius: 999px; font-size:.85rem; border:1px solid rgba(255,255,255,0.08); }
.billing-toggle .toggle { position:relative; width:50px; height:24px; }
.billing-toggle input { display:none; }
.billing-toggle .slider { position:absolute; inset:0; background: linear-gradient(135deg,#1e293b,#334155); border-radius:999px; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.billing-toggle .slider::after { content:""; position:absolute; top:3px; left:4px; width:18px; height:18px; background: var(--primary); border-radius:50%; transition: var(--transition); box-shadow:0 2px 6px -2px rgba(0,0,0,0.6); }
#billingCycle:checked + .slider::after { transform: translateX(24px); background: var(--secondary); }
.billing-toggle .save { color: var(--success); }

.pricing { padding:4rem 0 2rem; }
.pricing-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.plan { background: linear-gradient(180deg,#162132,#0f1622); padding:1.75rem 1.5rem 2rem; border-radius: var(--radius-lg); position:relative; border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:.9rem; box-shadow: var(--shadow-md); }
.plan.highlighted { background: linear-gradient(160deg,#1e293b,#1d4ed8); border:1px solid rgba(255,255,255,0.15); }
.plan .badge { position:absolute; top:-12px; right:16px; background: var(--secondary); padding:.35rem .55rem; border-radius:999px; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; box-shadow: var(--shadow-sm); }
.plan h3 { margin:0; font-size:1.15rem; }
.plan .desc { margin:0; font-size:.8rem; color: var(--text-dim); }
.plan .price { margin:.5rem 0 0; font-size:1.3rem; font-weight:700; letter-spacing:-.5px; }
.plan .price .amount { font-size:1.55rem; background: linear-gradient(90deg,#fff,#a5b4fc 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan ul { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.8rem; }
.plan ul li { position:relative; padding-left:1.1rem; }
.plan ul li::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--primary); position:absolute; left:0; top:.5em; box-shadow:0 0 0 4px rgba(59,130,246,0.25); }
.plan button { margin-top:auto; }
.fine-print { margin-top:2.25rem; font-size:.7rem; color: var(--text-dim); }

.features { padding:4rem 0; }
.feature-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.feature-item { background: var(--bg-soft); padding:1.35rem 1.25rem 1.4rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,0.07); position:relative; overflow:hidden; }
.feature-item::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(59,130,246,0.12),transparent 40%); opacity:0; transition: var(--transition); }
.feature-item:hover::after { opacity:1; }
.feature-item h3 { margin-top:0; font-size:1rem; }
.feature-item p { margin-bottom:0; font-size:.85rem; color: var(--text-dim); }

.compare { padding:4rem 0; }
.table-wrapper { overflow-x:auto; border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); }
.compare table { width:100%; border-collapse:collapse; min-width:720px; background: var(--bg-soft); }
.compare th,.compare td { padding:.85rem 1rem; font-size:.8rem; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
.compare thead { background: linear-gradient(90deg,#1e293b,#0f172a); }
.compare tbody tr:hover { background: rgba(255,255,255,0.03); }
.compare th { font-weight:600; }
.compare tbody th { color: var(--text); font-weight:600; }

/* Light theme compare table overrides */
[data-theme="light"] .compare table { background: #ffffff; }
[data-theme="light"] .compare thead { background: linear-gradient(90deg,#e2e8f0,#cbd5e1); }
[data-theme="light"] .compare th,.compare td { border-bottom:1px solid rgba(0,0,0,0.06); color: var(--text-dim); }
[data-theme="light"] .compare tbody th { color: var(--text); }
[data-theme="light"] .compare tbody tr:hover { background: rgba(0,0,0,0.035); }

/* Header 문의 버튼 대비 향상 */
.main-nav a.btn.small.primary { --btn-bg: var(--primary); --btn-color:#fff; --btn-border:transparent; box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
.main-nav a.btn.small.primary:hover { filter:brightness(1.12); box-shadow: var(--shadow-glow); }
[data-theme="light"] .main-nav a.btn.small.primary { box-shadow:0 0 0 1px rgba(0,0,0,0.08); }
[data-theme="light"] .main-nav a.btn.small.primary:hover { box-shadow:0 0 0 1px rgba(59,130,246,0.4),0 6px 18px -4px rgba(59,130,246,0.35); }

.faq { padding:4rem 0; }
.faq-list { display:grid; gap:1rem; }
.faq-item { background: var(--bg-soft); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); }
.faq-item .question { width:100%; background:none; border:none; color:inherit; padding:1rem 1.1rem; text-align:left; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-item .question::after { content:"+"; font-weight:400; transition: var(--transition); }
.faq-item .question[aria-expanded="true"]::after { transform:rotate(45deg); }
.faq-item .answer { padding:0 1.1rem 1.2rem; font-size:.85rem; color: var(--text-dim); line-height:1.55; }

.about { padding:4rem 0; }
.stats { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); margin-top:2rem; }
.stat { background: var(--bg-soft); padding:1.1rem 1rem 1.2rem; border-radius: var(--radius-md); text-align:center; border:1px solid rgba(255,255,255,0.08); position:relative; overflow:hidden; }
.stat .num { font-size:1.8rem; font-weight:700; letter-spacing:-1px; background: linear-gradient(90deg,#fff,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.stat .label { font-size:.7rem; color: var(--text-dim); letter-spacing:.5px; text-transform:uppercase; }

.contact { padding:4rem 0; }
.contact-form { background: var(--bg-soft); padding:2rem 2rem 2.5rem; border-radius: var(--radius-lg); border:1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-md); }
.form-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.form-grid label { display:flex; flex-direction:column; gap:.4rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color: var(--text-dim); }
.form-grid input,.form-grid select,.form-grid textarea { background:var(--field-bg); border:1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); padding:.7rem .8rem; color:var(--text); resize:vertical; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.form-grid .full { grid-column:1 / -1; }
.form-actions { margin-top:1.75rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.form-note { margin:0; font-size:.7rem; color: var(--text-dim); }

.site-footer { margin-top:4rem; padding:2.5rem 0 3rem; background: linear-gradient(180deg,#0d1420,#070b12); border-top:1px solid rgba(255,255,255,0.08); }
/* Footer (original complex grid retained if used elsewhere) */
.footer-grid { display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
/* Simplified footer variant */
.footer-simple .foot-desc { margin:0; text-align:center; font-size:.75rem; color:var(--text-dim); }
.footer-simple .container { display:flex; justify-content:center; }
.footer-logo { margin:0 0 .75rem; font-size:1.35rem; background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-desc { margin:.4rem 0 1.4rem; font-size:.8rem; color: var(--text-dim); }
.site-footer nav h4 { margin:.2rem 0 1rem; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); }
.site-footer nav ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.site-footer nav a { text-decoration:none; font-size:.8rem; color: var(--text); opacity:.7; }
.site-footer nav a:hover { opacity:1; }
.newsletter { display:flex; gap:.5rem; }
.newsletter input { flex:1; background:var(--field-bg); border:1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); padding:.55rem .7rem; color:var(--text); }
.newsletter input:focus { outline:2px solid var(--primary); }

.scroll-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background: var(--primary); color:#fff; border:none; display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition: var(--transition); box-shadow: var(--shadow-md); }
.scroll-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover { box-shadow: var(--shadow-glow); }

.dark body {
  --bg: #f1f5f9;
}

/* Mobile adjustments */
@media (max-width: 860px){
  .main-nav ul { position:fixed; top:70px; right:14px; background:rgba(13,20,32,.98); flex-direction:column; padding:1.25rem 1.1rem; width:220px; border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); transform:translateY(-10px); opacity:0; pointer-events:none; transition: var(--transition); box-shadow: var(--shadow-md); }
  .main-nav.open ul { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-toggle { display:block; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Scroll reveal utility */
.reveal { opacity:0; transform:translateY(30px); transition: .8s cubic-bezier(.19,1,.22,1); }
.reveal.visible { opacity:1; transform:none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }