/* ═══════════════════════════════
   BASE.CSS — Reset & Globals
═══════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=DM+Mono:wght@300;400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: default;
  transition: background 0.45s ease, color 0.45s ease;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font-body); border: none; cursor: pointer; background: none; }
img { max-width: 100%; display: block; }

/* ── BG SYSTEM ── */
.bg-fixed { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(120px);
  animation: orbDrift 16s ease-in-out infinite;
  transition: background 0.45s;
}
.o1 { width: 700px; height: 700px; background: var(--blob1); top: -200px; left: -100px; }
.o2 { width: 500px; height: 500px; background: var(--blob2); top: 80px; right: -100px; animation-delay: -6s; }
.o3 { width: 450px; height: 450px; background: var(--blob3); bottom: -80px; left: 28%; animation-delay: -11s; }
.o4 { width: 320px; height: 320px; background: var(--blob4); bottom: 200px; right: 80px; animation-delay: -3s; }
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(22px,-30px) scale(1.04); }
  66% { transform: translate(-16px,24px) scale(0.97); }
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* ── SECTION COMMON ── */
section { padding: 110px 64px; position: relative; z-index: 2; }
.s-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.s-num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--p1); font-weight: 500; letter-spacing: 0.12em; }
.s-divline { flex: 1; max-width: 50px; height: 1px; background: var(--gb); }
.s-tit {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 5.2rem);
  letter-spacing: 0.06em; line-height: 0.92; margin-bottom: 60px;
  color: var(--text-main);
}
.s-tit em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── GLASS ── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--gb);
  transition: background 0.4s, border-color 0.4s;
}
.glass-strong {
  background: var(--glass2);
  backdrop-filter: blur(44px) saturate(200%);
  -webkit-backdrop-filter: blur(44px) saturate(200%);
  border: 1px solid var(--gb2);
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 99px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  color: #fff; font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 28px rgba(124,58,237,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: var(--transition);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(124,58,237,0.5); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 99px;
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1.5px solid var(--gb);
  color: var(--text-main); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.03em;
  transition: var(--transition);
}
.btn-ghost:hover { border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.08); color: var(--p1); }

/* ── REVEAL ── */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.rv.on { opacity: 1; transform: translateY(0); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.3); border-radius: 99px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  section { padding: 80px 22px; }
}