/* ============================================
   BASE — Reset, Body, Global, Buttons, Keyframes
   ============================================ */

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

::selection { background: var(--orange); color: white; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ─── ANIMATED BACKGROUND ORBS ─── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: var(--orb-opacity);
  transition: opacity 0.5s ease;
}
.orb-1 { width: 500px; height: 500px; background: var(--orange); top: -10%; left: -10%; animation: orbFloat1 20s ease-in-out infinite; }
.orb-2 { width: 400px; height: 400px; background: var(--violet); bottom: 10%; right: -8%; animation: orbFloat2 25s ease-in-out infinite; }
.orb-3 { width: 300px; height: 300px; background: var(--blue); top: 50%; left: 40%; animation: orbFloat3 18s ease-in-out infinite; }

@keyframes orbFloat1 { 0%,100%{transform:translate(0,0)}50%{transform:translate(60px,80px)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-60px)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-40px)} }

/* ─── BUTTONS ─── */
.btn-p {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 10px;
  background: var(--orange); color: white;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 700;
  border: none; cursor: pointer;
  transition: all 0.3s; letter-spacing: 0.01em;
}
.btn-p:hover { box-shadow: 0 0 36px var(--orange-glow); transform: translateY(-2px); }

.btn-s {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 10px;
  background: transparent; color: var(--text);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  border: 1px solid var(--glass-border); cursor: pointer;
  transition: all 0.3s;
}
.btn-s:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,107,44,0.05); }

/* ─── REVEAL ANIMATION ─── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.rv.visible, .no-observer .rv {
  opacity: 1;
  transform: translateY(0);
}

/* ─── GLOBAL KEYFRAMES ─── */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{box-shadow:0 0 0 0 var(--orange-glow)} 50%{box-shadow:0 0 0 8px transparent} }