/* ─── EQing Website — Shared Stylesheet (Violet / DSP theme) ─── */

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

:root {
  --bg:          #08070d;
  --bg-2:        #0d0b16;
  --surface:     #14121e;
  --surface2:    #191627;
  --border:      #241f38;
  --border-2:    #2f2950;
  --text:        #f2f0f8;
  --text-dim:    #9a93b4;
  --text-muted:  #5f5980;
  --accent:      #8b5cf6;
  --accent-2:    #a78bfa;
  --accent-dk:   #6d3fe0;
  --accent-glow: rgba(139, 92, 246, .45);
  --radius:      14px;
  --maxw:        1120px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient violet glows behind the page */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 420px at 78% -4%,  rgba(139,92,246,.20), transparent 60%),
    radial-gradient(520px 420px at 4% 22%,   rgba(109,63,224,.14), transparent 60%),
    radial-gradient(600px 500px at 60% 90%,  rgba(139,92,246,.08), transparent 60%);
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,7,13,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; height: 64px; gap: 22px;
}
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 19px; color: var(--text);
  letter-spacing: -.3px;
}
.nav-logo .ver {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin-left: 2px; letter-spacing: 0;
}
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--text-dim); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 8px; transition: color .15s, background .15s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text); background: #ffffff0d; text-decoration: none;
}
.nav-cta {
  margin-left: 8px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border-2); background: #ffffff08;
  transition: border-color .15s, background .15s, transform .15s;
}
.nav-cta:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-glow); transform: translateY(-1px); }

/* ── Buttons ── */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; padding: 13px 28px;
  border-radius: 999px; cursor: pointer; transition: transform .15s, box-shadow .2s, background .15s;
  border: none;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%);
  box-shadow: 0 10px 30px -8px var(--accent-glow);
}
.btn-primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--accent-glow); }
.btn-secondary {
  color: var(--text); background: #ffffff08; border: 1px solid var(--border-2);
}
.btn-secondary:hover { text-decoration: none; border-color: var(--accent); background: #ffffff12; }

/* ── Hero ── */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 76px 28px 40px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center;
}
.hero h1 {
  font-size: 54px; line-height: 1.05; font-weight: 800; letter-spacing: -1.5px;
  margin-bottom: 22px;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: var(--text-dim); font-size: 16px; max-width: 440px; margin-bottom: 30px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* app mockup frame */
.mockup {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-2);
  background: linear-gradient(160deg, #14121e, #0c0a14);
  box-shadow: 0 40px 90px -30px rgba(139,92,246,.35), 0 0 0 1px #ffffff06 inset;
}
.mockup img { display: block; width: 100%; height: auto; }
.mockup-fallback {
  aspect-ratio: 16 / 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: var(--text-muted);
  background:
    linear-gradient(160deg, #17142400, #0c0a14),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 46px);
}
.mockup-fallback .bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.mockup-fallback .bars i {
  width: 7px; border-radius: 3px;
  background: linear-gradient(var(--accent-2), var(--accent));
  animation: eq 1.4s ease-in-out infinite;
}
@keyframes eq { 0%,100%{ height: 22% } 50%{ height: 100% } }

/* ── Sections ── */
.section { max-width: var(--maxw); margin: 0 auto; padding: 68px 28px; }
.section-head { text-align: center; margin-bottom: 46px; }
.section-label {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px;
}
.section-title { font-size: 34px; font-weight: 800; letter-spacing: -.6px; line-height: 1.2; }
.section-title .accent {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub { color: var(--text-dim); font-size: 15.5px; margin-top: 14px; }

.divider { border: none; border-top: 1px solid var(--border); max-width: var(--maxw); margin: 0 auto; opacity: .6; }

/* highlight row (4 icon features) */
.highlights {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.highlight { text-align: center; padding: 12px; }
.highlight .ic {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2);
  filter: drop-shadow(0 0 14px var(--accent-glow));
}
.highlight h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.highlight h3 .accent { color: var(--accent-2); }
.highlight p { color: var(--text-dim); font-size: 13.5px; }

/* feature cards grid */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feature-card {
  position: relative; padding: 30px 26px; border-radius: var(--radius);
  background: linear-gradient(160deg, #16132340, #0e0c1740);
  border: 1px solid var(--border);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.feature-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 120px at 50% -10%, var(--accent-glow), transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: 0 24px 50px -30px var(--accent-glow); }
.feature-card:hover::after { opacity: .5; }
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2); background: #ffffff08; border: 1px solid var(--border-2);
}
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.feature-card .rule { width: 22px; height: 2px; background: var(--accent); border-radius: 2px; margin: 10px 0 14px; opacity: .8; }
.feature-card p { color: var(--text-dim); font-size: 14px; }

/* spec table */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; max-width: 860px; margin: 0 auto; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.spec-row .k { color: var(--text-dim); font-size: 14px; }
.spec-row .v { color: var(--text); font-size: 14px; font-weight: 600; text-align: right; }

/* CTA band */
.cta-band {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 40px; text-align: center;
  border-radius: 22px; border: 1px solid var(--border-2);
  background:
    radial-gradient(500px 260px at 50% 0%, var(--accent-glow), transparent 60%),
    linear-gradient(160deg, #17142e, #0c0a16);
}
.cta-band h2 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 12px; }
.cta-band p { color: var(--text-dim); margin-bottom: 26px; }

/* pricing card */
.pricing-card {
  max-width: 440px; margin: 0 auto; padding: 38px 34px; border-radius: 20px;
  background: linear-gradient(160deg, #17142a, #0d0b16);
  border: 1px solid var(--border-2); text-align: center;
  box-shadow: 0 30px 70px -34px var(--accent-glow);
}
.price-tag { font-size: 46px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 2px; }
.price-tag .won { font-size: 24px; font-weight: 700; color: var(--text-dim); margin-right: 4px; }
.price-period { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.price-features { list-style: none; text-align: left; margin: 22px 0 26px; display: grid; gap: 11px; }
.price-features li { position: relative; padding-left: 28px; font-size: 14px; color: var(--text-dim); }
.price-features li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  color: var(--accent-2); font-weight: 800;
}

/* checkout */
.checkout { max-width: 940px; margin: 0 auto; padding: 56px 28px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
.co-card { padding: 30px 30px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.co-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.co-card .co-sub { color: var(--text-dim); font-size: 13.5px; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 7px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 12px 14px; font-size: 14px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px;
  font-family: inherit; transition: border-color .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field input::placeholder { color: var(--text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay-methods { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.pay-method {
  flex: 1; min-width: 92px; padding: 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--bg-2); text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-dim); transition: all .15s;
}
.pay-method.active { border-color: var(--accent); color: var(--text); background: var(--accent-glow); }
.co-summary { padding: 28px 26px; border-radius: 18px; background: linear-gradient(160deg, #17142a, #0d0b16); border: 1px solid var(--border-2); position: sticky; top: 84px; }
.co-summary h3 { font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 0; color: var(--text-dim); }
.sum-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; color: var(--text); font-weight: 700; font-size: 17px; }
.co-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-top: 16px; }
.demo-note {
  margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 12px; line-height: 1.6;
  color: #e8c98a; background: #241d0c; border: 1px solid #4a3a14;
}

/* toast / modal for mock success */
.modal-back { position: fixed; inset: 0; z-index: 200; background: #05040acc; backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; }
.modal-back.open { display: flex; }
.modal {
  width: 380px; max-width: 90vw; padding: 34px 30px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, #17142a, #0d0b16); border: 1px solid var(--border-2);
  box-shadow: 0 40px 90px -30px var(--accent-glow);
}
.modal .check { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: #fff; font-size: 28px; }
.modal h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.modal p { color: var(--text-dim); font-size: 13.5px; margin-bottom: 8px; }
.modal .serial { font-family: 'Consolas', monospace; font-size: 14px; color: var(--accent-2); background: var(--bg-2); padding: 10px; border-radius: 8px; margin: 14px 0 20px; letter-spacing: 1px; }

/* FAQ */
details { max-width: 720px; margin: 0 auto 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
summary { padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; float: right; color: var(--accent-2); font-weight: 700; }
details[open] summary::after { content: '−'; }
details p { padding: 0 20px 18px; color: var(--text-dim); font-size: 14px; }

/* footer */
footer { max-width: var(--maxw); margin: 0 auto; padding: 40px 28px 56px; text-align: center; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border); }
footer a { color: var(--text-dim); }
.mt-8 { margin-top: 8px; }
.text-center { text-align: center; }

/* responsive */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .hero h1 { font-size: 40px; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .checkout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .nav-links { display: none; }
}