/* ═══════════════════════════════════════════════════
   ORDERLY PAGES — DESIGN SYSTEM
   style.css · Variables · Reset · Base · Animations
 ═══════════════════════════════════════════════════ */

:root {
  --bg:           #080808;
  --bg-2:         #0E0E10;
  --bg-3:         #141416;
  --orange:       #E8721A;
  --orange-dim:   rgba(232,114,26,0.04);
  --orange-border:rgba(232,114,26,0.18);
  --orange-glow:  rgba(232,114,26,0.08);
  --white:        #FFFFFF;
  --text-1:       #F4F4F5;
  --text-2:       #A1A1AA;
  --text-3:       #71717A;
  --border:       rgba(255,255,255,0.05);
  --border-light: rgba(255,255,255,0.02);
  --border-orange:rgba(232,114,26,0.12);
  --gray:         #71717A;
  --glass-bg:     rgba(255,255,255,0.01);
  --glass-border: rgba(255,255,255,0.04);
  --font-h:       'Geist', 'Inter', sans-serif;
  --font-b:       'Inter', sans-serif;
  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    12px;
  --radius-full:  9999px;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slow:    cubic-bezier(0.85, 0, 0.15, 1);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:    0 8px 30px rgba(0,0,0,0.7);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.9);
  --shadow-orange:0 10px 40px rgba(232,114,26,0.12);
}

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

html { scroll-behavior: smooth; }

@media (pointer: fine) { html { cursor: none; } }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text-1);
  overflow-x: hidden;
  line-height: 1.62;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(232,114,26,0.03) 0%, transparent 60%),
    linear-gradient(rgba(255,255,255,0.005) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.005) 1px, transparent 1px);
  background-size: 100% 100%, 80px 80px, 80px 80px;
  animation: gridMove 240s linear infinite;
}

h1, h2, h3, h4 { 
  font-family: var(--font-h); 
  line-height: 1.12; 
  color: var(--white); 
  letter-spacing: -0.045em; 
}
h1 { font-weight: 800; letter-spacing: -0.05em; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.03em; }
p  { color: var(--text-2); line-height: 1.75; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-b); outline: none; }

section { padding: 160px 6%; position: relative; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-dim); border: 1px solid var(--orange-border);
  color: var(--orange); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: 24px;
}

.section-center { text-align: center; max-width: 720px; margin: 0 auto; }
.section-center p { margin-top: 16px; font-size: 1.05rem; color: var(--text-2); }

/* ─── Scroll Reveal ─────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ─── Keyframes ─────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes toastIn  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; filter: blur(6px); }
  50% { opacity: 0.8; filter: blur(8px); }
}
@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 0 80px; }
}