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

html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); transition: background .4s var(--ease), color .4s var(--ease); overflow-x: hidden; }

#particles-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55; }

section { position: relative; z-index: 1; padding: 7rem 8vw; }
.section-label { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.section-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1rem; }
.section-sub { color: var(--muted); font-size: 1rem; font-weight: 300; max-width: 480px; line-height: 1.7; margin-bottom: 3.5rem; }
.section-divider { width: calc(100% - 16vw); height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0 8vw; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  section { padding: 5rem 5vw; }
  .section-divider { margin: 0 5vw; width: calc(100% - 10vw); }
}