/* ── Variables ── */
:root {
  --bg-main: #0F0C1E;
  --bg-card: #1E1840;
  --bg-sub: #2A1050;
  --brand-light: #E0A880;
  --brand-dark: #C07850;
  --brand-gradient: linear-gradient(135deg, #C07850, #E0A880);
  --btn-gradient: linear-gradient(135deg, #EDD5AA, #C9956C, #9B72C8, #7C3AED);
  --text-primary: #E5D8FF;
  --text-secondary: #C9A0D4;
  --text-secondary2: #9B72C8;
  --text-tertiary: #6048A0;
  --border: #322860;
  --border-sub: #534AB7;
  --purple: #9B72C8;
  --purple-bg: #1A1030;
  --success: #1D9E75;
  --success-bg: #0A1A14;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-main); color: var(--text-primary);
  font-family: 'TheJamsil', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }

/* ── Font ── */
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil2Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'TheJamsil'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* ── Utility ── */
.container { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.section { padding: 64px 0; }
.bg-main { background: var(--bg-main); }
.bg-card { background: var(--bg-card); }
.br-pc { display: inline; }
.br-mo { display: none; }
.price-scroll-hint { display: none; }
.price-dots { display: none; }
.tag-dots { display: none; }
.slider-arrow { display: none; }
.nav-close { display: none; }
.nav-overlay { display: none; pointer-events: none; } .br-mo { display: none; }
@media (max-width: 767px) { .br-pc { display: none; } .br-mo { display: inline; } }

/* ── Animations ── */
@keyframes underlineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateX(-30px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes barFill { from { width: 0; } to { width: 30%; } }

/* stagger reveal */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25,0.1,0.25,1), transform 0.6s cubic-bezier(0.25,0.1,0.25,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; font-size: 14px; font-weight: 600; border-radius: 8px;
  background: var(--btn-gradient); color: var(--bg-main); transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; font-size: 14px; font-weight: 600; border-radius: 8px;
  border: 1px solid var(--border); color: var(--text-primary); transition: background 0.2s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.03); }

/* ── Section Common ── */
/* ── Gradient Text Utility ── */
.gradient-text {
  background: var(--btn-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-subtitle { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-light); margin-bottom: 12px; }
.section-title { font-size: clamp(24px, 4vw, 30px); font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.section-desc { font-size: 16px; color: var(--text-secondary); max-width: 640px; line-height: 1.6; margin-bottom: 32px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }