/* ============================================================
   VOLUM TECHNOLOGIES — Base: Variables, Reset, Global Patterns
   Brand: Primary #0098FD · Secondary #FF488F · Tertiary #82007B
   Font: Outfit (200 / 400 / 700)
   ============================================================ */

/* ── ACCESSIBILITY ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── VARIABLES ── */
:root {
  --primary:   #0098FD;
  --secondary: #FF488F;
  --tertiary:  #82007B;
  --bg:        #020407;
  --bg-2:      #040810;
  --white:     #FFFFFF;
  --font:      'Outfit', sans-serif;
}

/* ── RESET & BASE ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
}

@keyframes scrollbar-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

/* Reserve 6px of space; thumb starts visually 3px via transparent side borders */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  border-left:  1.5px solid transparent;
  border-right: 1.5px solid transparent;
  background-clip: padding-box;
  background-color: #8200b4;
  background-image: linear-gradient(180deg, #0098fd 0%, #8200b4 50%, #ff488f 100%);
  background-size: 100% 200%;
  background-position: 0% 0%;
  animation: scrollbar-shift 3s linear infinite alternate;
  transition: border-width 0.2s ease, box-shadow 0.2s ease;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  border-left-width:  0;
  border-right-width: 0;
  box-shadow: 0 0 6px #0098fd, 0 0 14px rgba(130,0,180,0.7);
}

/* ── SECTION COMMONS ── */
section {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
}
.section-inner { max-width: 1200px; margin: 0 auto; }

.eyebrow {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--primary);
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.eyebrow::after {
  content: ''; flex: 0 0 36px; height: 1px;
  background: var(--primary); opacity: 0.45;
}

.sec-title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700; line-height: 1.12;
  letter-spacing: -0.02em; margin-bottom: 1rem;
}

.sec-desc {
  font-size: 1rem; font-weight: 300;
  color: rgba(255,255,255,0.48);
  max-width: 520px; line-height: 1.7;
  margin-bottom: 3.5rem;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,152,253,0.25) 30%,
    rgba(255,72,143,0.15) 70%, transparent 100%);
}

/* ── ANIMATIONS & REVEAL ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-bar {
  0%,100% { opacity: 0.4; transform: scaleY(0.75); }
  50%     { opacity: 1;   transform: scaleY(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }