/* ===================================
   VELO WEBSITE STYLES
   Brand System Implementation
   =================================== */

/* CSS Variables - Velo Brand Colors */
:root {
  --velo-black: #0D0D0F;
  --velo-white: #F5F4F0;
  --velo-speed: #C8FF00;
  --velo-surface: #1A1A20;
  --velo-gray: #6B6B78;
  --velo-light: #E8E7E2;
  --velo-border: #2a2a32;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--velo-black);
  color: var(--velo-white);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* ===================================
   NAVIGATION
   =================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 13, 15, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--velo-border);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1px;
  color: var(--velo-white);
}

.logo-accent {
  color: var(--velo-speed);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--velo-gray);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--velo-white);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--velo-white);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }
}

/* ===================================
   BUTTONS
   =================================== */

.btn-primary {
  display: inline-block;
  background: var(--velo-speed);
  color: var(--velo-black);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 6px;
  letter-spacing: -0.3px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #d4ff33;
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--velo-white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 24px;
  border-radius: 6px;
  border: 0.5px solid var(--velo-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  border-color: var(--velo-gray);
  background: rgba(255, 255, 255, 0.02);
}

.btn-lg {
  font-size: 15px;
  padding: 16px 32px;
}

.btn-sm {
  font-size: 13px;
  padding: 10px 20px;
}

/* ===================================
   HERO SECTION
   =================================== */

.hero {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(200, 255, 0, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero-label {
  font-size: 12px;
  color: var(--velo-speed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}

.hero-title {
  font-size: 80px;
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1.0;
  color: var(--velo-white);
  margin-bottom: 24px;
}

.hero-text {
  font-size: 20px;
  color: var(--velo-gray);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 40px;
  font-weight: 400;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Hero Floating Points (Background) --- */
.hero-points-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-points-wrapper .hero-point {
  position: absolute;
  bottom: -4px;
  width: 2px;
  height: 2px;
  background-color: var(--velo-speed);
  border-radius: 9999px;
  pointer-events: none;
  animation: hero-float infinite ease-in-out;
}

@keyframes hero-float {
  0% {
    transform: translateY(0);
    opacity: var(--point-opacity, 0.6);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-420px);
    opacity: 0;
  }
}

.hero-point:nth-child(1)  { left: 3%;  --point-opacity: 0.5; animation-duration: 4.2s; animation-delay: 0.0s; }
.hero-point:nth-child(2)  { left: 8%;  --point-opacity: 0.3; animation-duration: 5.0s; animation-delay: 1.2s; }
.hero-point:nth-child(3)  { left: 14%; --point-opacity: 0.6; animation-duration: 3.8s; animation-delay: 0.4s; }
.hero-point:nth-child(4)  { left: 20%; --point-opacity: 0.4; animation-duration: 4.5s; animation-delay: 2.0s; }
.hero-point:nth-child(5)  { left: 27%; --point-opacity: 0.7; animation-duration: 3.5s; animation-delay: 0.8s; }
.hero-point:nth-child(6)  { left: 33%; --point-opacity: 0.35; animation-duration: 5.2s; animation-delay: 1.5s; }
.hero-point:nth-child(7)  { left: 40%; --point-opacity: 0.5; animation-duration: 4.0s; animation-delay: 0.2s; }
.hero-point:nth-child(8)  { left: 47%; --point-opacity: 0.6; animation-duration: 3.6s; animation-delay: 2.5s; }
.hero-point:nth-child(9)  { left: 53%; --point-opacity: 0.45; animation-duration: 4.8s; animation-delay: 0.6s; }
.hero-point:nth-child(10) { left: 58%; --point-opacity: 0.7; animation-duration: 3.3s; animation-delay: 1.8s; }
.hero-point:nth-child(11) { left: 63%; --point-opacity: 0.3; animation-duration: 5.5s; animation-delay: 0.3s; }
.hero-point:nth-child(12) { left: 68%; --point-opacity: 0.55; animation-duration: 4.1s; animation-delay: 2.2s; }
.hero-point:nth-child(13) { left: 73%; --point-opacity: 0.4; animation-duration: 3.9s; animation-delay: 1.0s; }
.hero-point:nth-child(14) { left: 78%; --point-opacity: 0.65; animation-duration: 4.6s; animation-delay: 0.7s; }
.hero-point:nth-child(15) { left: 82%; --point-opacity: 0.35; animation-duration: 5.0s; animation-delay: 2.8s; }
.hero-point:nth-child(16) { left: 86%; --point-opacity: 0.5; animation-duration: 3.7s; animation-delay: 0.1s; }
.hero-point:nth-child(17) { left: 90%; --point-opacity: 0.6; animation-duration: 4.3s; animation-delay: 1.4s; }
.hero-point:nth-child(18) { left: 93%; --point-opacity: 0.4; animation-duration: 5.1s; animation-delay: 0.9s; }
.hero-point:nth-child(19) { left: 96%; --point-opacity: 0.55; animation-duration: 3.4s; animation-delay: 2.1s; }
.hero-point:nth-child(20) { left: 99%; --point-opacity: 0.3; animation-duration: 4.7s; animation-delay: 0.5s; }

/* --- Animated CTA Button --- */
.hero-btn {
  --round: 0.5rem;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s ease;
  background: radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(200, 255, 0, 0.7) 0%,
      rgba(200, 255, 0, 0) 100%
    ),
    linear-gradient(0deg, #8ab800, #8ab800);
  border-radius: var(--round);
  border: none;
  outline: none;
  padding: 16px 32px;
  text-decoration: none;
}

.hero-btn::before,
.hero-btn::after {
  content: "";
  position: absolute;
  inset: var(--space);
  transition: all 0.5s ease-in-out;
  border-radius: calc(var(--round) - var(--space));
  z-index: 0;
}

.hero-btn::before {
  --space: 1px;
  background: linear-gradient(
    177.95deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-btn::after {
  --space: 2px;
  background: radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(200, 255, 0, 0.7) 0%,
      rgba(200, 255, 0, 0) 100%
    ),
    linear-gradient(0deg, #8ab800, #8ab800);
}

.hero-btn:active {
  transform: scale(0.95);
}

.hero-btn:hover {
  background: radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(200, 255, 0, 0.9) 0%,
      rgba(200, 255, 0, 0) 100%
    ),
    linear-gradient(0deg, #9dd400, #9dd400);
  box-shadow: 0 0 28px rgba(200, 255, 0, 0.25);
}

/* Fold corner */
.hero-btn-fold {
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  height: 1rem;
  width: 1rem;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  background: radial-gradient(
    100% 75% at 55%,
    rgba(200, 255, 0, 0.8) 0%,
    rgba(200, 255, 0, 0) 100%
  );
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 0.5rem;
  border-top-right-radius: var(--round);
}

.hero-btn-fold::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150%;
  height: 150%;
  transform: rotate(45deg) translateX(0%) translateY(-18px);
  background-color: var(--velo-black);
  pointer-events: none;
}

.hero-btn:hover .hero-btn-fold {
  margin-top: -1rem;
  margin-right: -1rem;
}

/* Inner particles (button) */
.hero-btn-points {
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-btn-points .point {
  bottom: -10px;
  position: absolute;
  animation: btn-float infinite ease-in-out;
  pointer-events: none;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 9999px;
}

@keyframes btn-float {
  0% { transform: translateY(0); }
  85% { opacity: 0; }
  100% { transform: translateY(-55px); opacity: 0; }
}

.hero-btn-points .point:nth-child(1)  { left: 10%;  opacity: 1;   animation-duration: 2.35s; animation-delay: 0.2s; }
.hero-btn-points .point:nth-child(2)  { left: 30%;  opacity: 0.7; animation-duration: 2.5s;  animation-delay: 0.5s; }
.hero-btn-points .point:nth-child(3)  { left: 25%;  opacity: 0.8; animation-duration: 2.2s;  animation-delay: 0.1s; }
.hero-btn-points .point:nth-child(4)  { left: 44%;  opacity: 0.6; animation-duration: 2.05s; }
.hero-btn-points .point:nth-child(5)  { left: 50%;  opacity: 1;   animation-duration: 1.9s;  }
.hero-btn-points .point:nth-child(6)  { left: 75%;  opacity: 0.5; animation-duration: 1.5s;  animation-delay: 1.5s; }
.hero-btn-points .point:nth-child(7)  { left: 88%;  opacity: 0.9; animation-duration: 2.2s;  animation-delay: 0.2s; }
.hero-btn-points .point:nth-child(8)  { left: 58%;  opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
.hero-btn-points .point:nth-child(9)  { left: 98%;  opacity: 0.6; animation-duration: 2.6s;  animation-delay: 0.1s; }
.hero-btn-points .point:nth-child(10) { left: 65%;  opacity: 1;   animation-duration: 2.5s;  animation-delay: 0.2s; }

/* Button text */
.hero-btn-inner {
  z-index: 2;
  position: relative;
  width: 100%;
  color: var(--velo-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.3px;
  transition: color 0.2s ease-in-out;
}

@media (max-width: 768px) {
  .hero {
    padding: 120px 0 80px;
  }

  .hero-title {
    font-size: 52px;
    letter-spacing: -2px;
  }

  .hero-text {
    font-size: 18px;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .hero-btn,
  .hero-cta .btn-ghost {
    width: 100%;
    text-align: center;
  }

  .hero-btn {
    justify-content: center;
  }
}

/* ===================================
   VELO CTA - Animated Circle Button
   (Uiverse pattern, Velo branded)
   =================================== */

.velo-cta {
  --duration: 7s;
  --easing: ease-in-out;
  --c-color-1: rgba(200, 255, 0, 0.6);
  --c-color-2: rgba(90, 158, 0, 0.8);
  --c-color-3: rgba(122, 184, 0, 0.7);
  --c-color-4: rgba(224, 255, 102, 0.7);
  --c-shadow: rgba(200, 255, 0, 0.4);
  --c-shadow-inset-top: rgba(200, 255, 0, 0.7);
  --c-shadow-inset-bottom: rgba(224, 255, 102, 0.6);
  --c-radial-inner: #a8d600;
  --c-radial-outer: #c8ff00;
  --c-color: var(--velo-black);
  --round: 8px;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: inline-flex;
  border-radius: var(--round);
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
  line-height: 1.5;
  color: var(--c-color);
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(200, 255, 0, 0.8) 0%, rgba(200, 255, 0, 0) 100%),
    linear-gradient(0deg, #7ab800, #7ab800);
  box-shadow: 0 0 14px var(--c-shadow);
  text-decoration: none;
  transition: all 0.25s ease;
}

.velo-cta:active {
  transform: scale(0.95);
}

/* White shimmer overlay */
.velo-cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  inset: 1px;
  border-radius: calc(var(--round) - 1px);
  background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow:
    inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

/* Inner glow layer */
.velo-cta::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  inset: 2px;
  border-radius: calc(var(--round) - 2px);
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(200, 255, 0, 0.8) 0%, rgba(200, 255, 0, 0) 100%),
    linear-gradient(0deg, #7ab800, #7ab800);
  transition: all 0.5s ease-in-out;
}

.velo-cta .cta-wrap {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  overflow: hidden;
  border-radius: 8px;
  min-width: 132px;
  padding: 16px 32px;
  position: relative;
  z-index: 4;
}

.velo-cta .cta-wrap span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.velo-cta .cta-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--velo-black);
  margin: 0;
  max-width: none;
}

.velo-cta:hover {
  --duration: 1400ms;
  box-shadow: 0 0 28px var(--c-shadow), 0 0 8px rgba(200, 255, 0, 0.3) inset;
}

.velo-cta .cta-wrap .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.velo-cta .cta-wrap .circle-1,
.velo-cta .cta-wrap .circle-9,
.velo-cta .cta-wrap .circle-10 {
  --background: var(--c-color-4);
}

.velo-cta .cta-wrap .circle-3,
.velo-cta .cta-wrap .circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.velo-cta .cta-wrap .circle-5,
.velo-cta .cta-wrap .circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.velo-cta .cta-wrap .circle-2,
.velo-cta .cta-wrap .circle-7,
.velo-cta .cta-wrap .circle-8,
.velo-cta .cta-wrap .circle-11,
.velo-cta .cta-wrap .circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.velo-cta .cta-wrap .circle-1  { --x: 0;    --y: -40px; --animation: vc-1; }
.velo-cta .cta-wrap .circle-2  { --x: 92px; --y: 8px;   --animation: vc-2; }
.velo-cta .cta-wrap .circle-3  { --x: -12px;--y: -12px; --animation: vc-3; }
.velo-cta .cta-wrap .circle-4  { --x: 80px; --y: -12px; --animation: vc-4; }
.velo-cta .cta-wrap .circle-5  { --x: 12px; --y: -4px;  --animation: vc-5; }
.velo-cta .cta-wrap .circle-6  { --x: 56px; --y: 16px;  --animation: vc-6; }
.velo-cta .cta-wrap .circle-7  { --x: 8px;  --y: 28px;  --animation: vc-7; }
.velo-cta .cta-wrap .circle-8  { --x: 28px; --y: -4px;  --animation: vc-8; }
.velo-cta .cta-wrap .circle-9  { --x: 20px; --y: -12px; --animation: vc-9; }
.velo-cta .cta-wrap .circle-10 { --x: 64px; --y: 16px;  --animation: vc-10; }
.velo-cta .cta-wrap .circle-11 { --x: 4px;  --y: 4px;   --animation: vc-11; }
.velo-cta .cta-wrap .circle-12 { --blur: 14px; --x: 52px; --y: 4px; --animation: vc-12; }

@keyframes vc-1 {
  from, to { transform: translate(0, -40px) translateZ(0); }
  33% { transform: translate(0px, 16px) translateZ(0); }
  66% { transform: translate(12px, 64px) translateZ(0); }
}
@keyframes vc-2 {
  from, to { transform: translate(92px, 8px) translateZ(0); }
  33% { transform: translate(80px, -10px) translateZ(0); }
  66% { transform: translate(72px, -48px) translateZ(0); }
}
@keyframes vc-3 {
  from, to { transform: translate(-12px, -12px) translateZ(0); }
  33% { transform: translate(20px, 12px) translateZ(0); }
  66% { transform: translate(12px, 4px) translateZ(0); }
}
@keyframes vc-4 {
  from, to { transform: translate(80px, -12px) translateZ(0); }
  33% { transform: translate(76px, -12px) translateZ(0); }
  66% { transform: translate(112px, -8px) translateZ(0); }
}
@keyframes vc-5 {
  from, to { transform: translate(12px, -4px) translateZ(0); }
  33% { transform: translate(84px, 28px) translateZ(0); }
  66% { transform: translate(40px, -32px) translateZ(0); }
}
@keyframes vc-6 {
  from, to { transform: translate(56px, 16px) translateZ(0); }
  33% { transform: translate(28px, -16px) translateZ(0); }
  66% { transform: translate(76px, -56px) translateZ(0); }
}
@keyframes vc-7 {
  from, to { transform: translate(8px, 28px) translateZ(0); }
  33% { transform: translate(8px, 28px) translateZ(0); }
  66% { transform: translate(20px, -60px) translateZ(0); }
}
@keyframes vc-8 {
  from, to { transform: translate(28px, -4px) translateZ(0); }
  33% { transform: translate(32px, -4px) translateZ(0); }
  66% { transform: translate(56px, -20px) translateZ(0); }
}
@keyframes vc-9 {
  from, to { transform: translate(20px, -12px) translateZ(0); }
  33% { transform: translate(20px, -12px) translateZ(0); }
  66% { transform: translate(80px, -8px) translateZ(0); }
}
@keyframes vc-10 {
  from, to { transform: translate(64px, 16px) translateZ(0); }
  33% { transform: translate(68px, 20px) translateZ(0); }
  66% { transform: translate(100px, 28px) translateZ(0); }
}
@keyframes vc-11 {
  from, to { transform: translate(4px, 4px) translateZ(0); }
  33% { transform: translate(4px, 4px) translateZ(0); }
  66% { transform: translate(68px, 20px) translateZ(0); }
}
@keyframes vc-12 {
  from, to { transform: translate(52px, 4px) translateZ(0); }
  33% { transform: translate(56px, 0px) translateZ(0); }
  66% { transform: translate(60px, -32px) translateZ(0); }
}

/* Size variants */
.velo-cta.cta-sm .cta-wrap {
  padding: 10px 20px;
  min-width: 100px;
}
.velo-cta.cta-sm {
  font-size: 13px;
}

.velo-cta.cta-md .cta-wrap {
  padding: 12px 24px;
}
.velo-cta.cta-md {
  font-size: 14px;
}

@media (max-width: 768px) {
  .velo-cta .cta-wrap {
    padding: 14px 24px;
    min-width: 100px;
  }
}

/* ===================================
   STATS SECTION
   =================================== */

.stats {
  padding: 80px 0;
  border-top: 0.5px solid var(--velo-border);
  border-bottom: 0.5px solid var(--velo-border);
}

.stats-label {
  font-size: 11px;
  color: var(--velo-gray);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 32px;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
}

.stat {
  text-align: left;
}

.stat-num {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -2px;
  color: var(--velo-speed);
  line-height: 1;
}

.stat-label {
  font-size: 15px;
  color: var(--velo-light);
  margin-top: 8px;
  font-weight: 500;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .stat-num {
    font-size: 40px;
  }
}

/* ===================================
   SECTION HEADERS
   =================================== */

.section-label {
  font-size: 11px;
  color: var(--velo-gray);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}

.section-title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--velo-white);
  margin-bottom: 20px;
}

.section-text {
  font-size: 18px;
  color: var(--velo-gray);
  line-height: 1.8;
  max-width: 640px;
  font-weight: 400;
}

.section-header.centered {
  text-align: center;
  margin: 0 auto 64px;
}

.section-header.centered .section-text {
  margin: 0 auto;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 40px;
    letter-spacing: -1.5px;
  }
}

/* ===================================
   PROBLEM SECTION
   =================================== */

.problem {
  padding: 120px 0;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.problem-card {
  background: var(--velo-surface);
  border: 0.5px solid var(--velo-border);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.problem-card:hover {
  border-color: var(--velo-speed);
  transform: translateY(-4px);
}

.problem-num {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--velo-speed);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.problem-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--velo-white);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.problem-text {
  font-size: 16px;
  color: var(--velo-gray);
  line-height: 1.7;
  font-weight: 400;
}

@media (max-width: 768px) {
  .problem {
    padding: 80px 0;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   HOW IT WORKS SECTION
   =================================== */

.how-it-works {
  padding: 120px 0;
  background: var(--velo-surface);
  border-top: 0.5px solid var(--velo-border);
  border-bottom: 0.5px solid var(--velo-border);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 64px;
}

.step {
  position: relative;
  border: 0.5px solid var(--velo-border);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.step:hover {
  border-color: var(--velo-speed);
  transform: translateY(-4px);
}

.step-num {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--velo-speed);
  margin-bottom: 16px;
}

.step-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--velo-white);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.step-text {
  font-size: 16px;
  color: var(--velo-gray);
  line-height: 1.7;
  margin-bottom: 16px;
  font-weight: 400;
}

.step-duration {
  font-size: 13px;
  color: var(--velo-speed);
  font-weight: 500;
}

@media (max-width: 768px) {
  .how-it-works {
    padding: 80px 0;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ===================================
   SERVICES SECTION
   =================================== */

.services {
  padding: 120px 0;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.service-card {
  background: var(--velo-surface);
  border: 1px solid var(--velo-border);
  border-radius: 12px;
  padding: 40px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.service-card:hover {
  border-color: var(--velo-gray);
  transform: translateY(-4px);
}

.service-card.featured {
  border-color: var(--velo-speed);
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(200, 255, 0, 0.03) 100%);
}

.featured-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--velo-speed);
  color: var(--velo-black);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-num {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  color: var(--velo-white);
  margin-bottom: 32px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner Glow (user provided) */
.service-num::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-image: linear-gradient(var(--velo-speed) 35%, transparent);
  filter: blur(2px);
  box-shadow: 0px -5px 20px 0px var(--velo-speed), 0px 5px 20px 0px transparent;
  animation: service-glow-spin 1.7s linear infinite;
  pointer-events: none;
  z-index: -2;
}

/* Spinner Inner Mask (user provided) */
.service-num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--velo-surface);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

@keyframes service-glow-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.service-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--velo-white);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(200, 255, 0, 0.12), 0 0 40px rgba(200, 255, 0, 0.06);
  position: relative;
  z-index: 1;
}

.service-subtitle {
  font-size: 15px;
  color: var(--velo-gray);
  margin-bottom: 20px;
  font-style: italic;
}

.service-desc {
  font-size: 16px;
  color: var(--velo-gray);
  line-height: 1.7;
  margin-bottom: 24px;
  font-weight: 400;
}

.service-includes {
  margin-bottom: 12px;
  flex-grow: 1;
}

.includes-title {
  font-size: 12px;
  color: var(--velo-white);
  font-weight: 500;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-includes ul {
  list-style: none;
  padding: 0;
}

.service-includes li {
  font-size: 15px;
  color: var(--velo-gray);
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

.service-includes li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--velo-speed);
}

.service-pricing {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--velo-white);
  margin-bottom: 16px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .services {
    padding: 80px 0;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   SOCIAL PROOF / CASES SECTION
   =================================== */

.social-proof {
  padding: 120px 0;
  background: var(--velo-surface);
  border-top: 0.5px solid var(--velo-border);
  border-bottom: 0.5px solid var(--velo-border);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.case-card {
  background: var(--velo-black);
  border: 0.5px solid var(--velo-border);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.case-card:hover {
  border-color: var(--velo-speed);
  transform: translateY(-4px);
}

.case-industry {
  font-size: 11px;
  color: var(--velo-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.case-result {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--velo-speed);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.case-text {
  font-size: 16px;
  color: var(--velo-gray);
  line-height: 1.7;
  font-weight: 400;
}

.cta-center {
  text-align: center;
}

@media (max-width: 768px) {
  .social-proof {
    padding: 80px 0;
  }

  .cases-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   CTA SECTION
   =================================== */

.cta-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

/* --- CTA Floating Points --- */
.cta-points-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cta-points-wrapper .cta-point {
  position: absolute;
  bottom: -4px;
  width: 2px;
  height: 2px;
  background-color: var(--velo-speed);
  border-radius: 9999px;
  pointer-events: none;
  animation: cta-float infinite ease-in-out;
}

@keyframes cta-float {
  0% {
    transform: translateY(0);
    opacity: var(--point-opacity, 0.5);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-350px);
    opacity: 0;
  }
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-box {
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(200, 255, 0, 0.05) 100%);
  border: 1px solid var(--velo-speed);
  border-radius: 16px;
  padding: 80px 60px;
  text-align: center;
}

.cta-title {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1;
  color: var(--velo-white);
  margin-bottom: 24px;
}

.cta-text {
  font-size: 20px;
  color: var(--velo-gray);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 40px;
  font-weight: 400;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-note {
  font-size: 13px;
  color: var(--velo-gray);
}

@media (max-width: 768px) {
  .cta-section {
    padding: 80px 0;
  }

  .cta-box {
    padding: 60px 32px;
  }

  .cta-title {
    font-size: 44px;
    letter-spacing: -1.5px;
  }
}

/* ===================================
   FOOTER
   =================================== */

.footer {
  padding: 80px 0 40px;
  border-top: 0.5px solid var(--velo-border);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 14px;
  color: var(--velo-speed);
  margin-bottom: 8px;
  font-weight: 400;
}

.footer-text {
  font-size: 13px;
  color: var(--velo-gray);
  line-height: 1.6;
  max-width: 280px;
}

.footer-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--velo-white);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 13px;
  color: var(--velo-gray);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--velo-white);
}

.footer-bottom {
  padding-top: 32px;
  border-top: 0.5px solid var(--velo-border);
  text-align: center;
}

.footer-bottom p {
  font-size: 12px;
  color: var(--velo-gray);
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ===================================
   JOURNEY STEPS
   =================================== */

.journey-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 768px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .journey-arrow {
    transform: rotate(90deg);
  }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.centered {
  text-align: center;
}

.mt-small {
  margin-top: 24px;
}

.mt-medium {
  margin-top: 48px;
}

.mt-large {
  margin-top: 80px;
}

.mb-small {
  margin-bottom: 24px;
}

.mb-medium {
  margin-bottom: 48px;
}

.mb-large {
  margin-bottom: 80px;
}

/* ===================================
   PAGE TRANSITION LOADER
   =================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--velo-black);
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: all;
}

.page-loader--hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader .pl {
  width: 6em;
  height: 6em;
}

.page-loader .pl__ring {
  animation: ringA 2s linear infinite;
}

.page-loader .pl__ring--a {
  stroke: var(--velo-speed);
}

.page-loader .pl__ring--b {
  animation-name: ringB;
  stroke: var(--velo-gray);
}

.page-loader .pl__ring--c {
  animation-name: ringC;
  stroke: var(--velo-white);
}

.page-loader .pl__ring--d {
  animation-name: ringD;
  stroke: #a8d600;
}

@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }
  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }
  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }
  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }
  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }
  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }
  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }
  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }
  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }
  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }
  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }
  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }
  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }
  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }
  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }
  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }
  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }
  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }
  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }
  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }
  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }
  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }
  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }
  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}