/* ===================================
   WEB — Color Palette Override
   Electric Cyan
   #00E1FF · #00A6FF · #80D0FF
   =================================== */

:root {
  --velo-black: #050814;
  --velo-white: #F5F7FA;
  --velo-speed: #00E1FF;
  --velo-surface: #0A1024;
  --velo-gray: #8A94A6;
  --velo-light: #E0E4EC;
  --velo-border: #151F38;

  /* WEB-specific tokens */
  --web-accent: #00E1FF;
  --web-accent-mid: #00A6FF;
  --web-accent-soft: #80D0FF;
}

/* Body */
body {
  background: var(--velo-black);
}

/* Nav */
.nav {
  background: rgba(5, 8, 20, 0.95);
}

/* Logo */
.logo-accent {
  color: var(--web-accent);
}

/* Hero gradient glow */
.hero-gradient {
  background: radial-gradient(circle, rgba(0, 225, 255, 0.08) 0%, transparent 70%);
}

/* Hero title focus */
.hero-title em,
.hero-title i {
  color: var(--web-accent);
  font-style: italic;
}

/* Hero particles */
.hero-points-wrapper .hero-point {
  background-color: var(--web-accent);
}

/* Hero button — Cyan */
.hero-btn {
  background: var(--web-accent);
  border-radius: 12px;
  padding: 16px 36px;
}

.hero-btn::before {
  border-radius: 12px;
  background: linear-gradient(
    177.95deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-btn::after {
  border-radius: 12px;
  background: var(--web-accent);
}

.hero-btn:hover {
  background: var(--web-accent-mid);
  box-shadow: 0 0 32px rgba(0, 225, 255, 0.35);
}

.hero-btn:hover::after {
  background: var(--web-accent-mid);
}

.hero-btn-inner {
  color: var(--velo-black); /* Dark text on bright cyan */
  font-weight: 700;
}

/* Fold corner */
.hero-btn-fold {
  background: radial-gradient(
    100% 75% at 55%,
    rgba(0, 225, 255, 0.8) 0%,
    rgba(0, 225, 255, 0) 100%
  );
}

.hero-btn-fold::after {
  background-color: var(--velo-black);
}

/* Button particles */
.hero-btn-points .point {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Primary button */
.btn-primary {
  background: var(--web-accent);
  color: var(--velo-black);
  border-radius: 12px;
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--web-accent-mid);
  color: var(--velo-black);
}

/* Ghost button */
.btn-ghost {
  border-color: var(--velo-border);
  color: var(--velo-white);
  border-radius: 12px;
}

.btn-ghost:hover {
  border-color: var(--web-accent);
  background: rgba(0, 225, 255, 0.05);
}

/* Stats */
.stat-num {
  color: var(--web-accent);
}

/* Problem */
.problem-card:hover {
  border-color: var(--web-accent);
}

.problem-num {
  color: var(--web-accent);
}

/* How it works */
.how-it-works {
  background: var(--velo-surface);
  border-color: var(--velo-border);
}

.step:hover {
  border-color: var(--web-accent);
}

.step-num {
  color: var(--web-accent);
}

.step-duration {
  color: var(--web-accent-mid);
}

/* Services */
.service-card.featured {
  border-color: var(--web-accent);
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(0, 225, 255, 0.04) 100%);
}

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

.featured-badge {
  background: var(--web-accent);
  color: var(--velo-black);
}

.service-num {
  color: var(--web-accent);
  text-shadow: 0 0 12px rgba(0, 225, 255, 0.4), 0 0 24px rgba(0, 225, 255, 0.15);
}

.service-pricing {
  color: var(--web-accent);
}

.service-includes li:before {
  color: var(--web-accent);
}

/* Social proof */
.social-proof {
  background: var(--velo-surface);
  border-color: var(--velo-border);
}

.case-card:hover {
  border-color: var(--web-accent);
}

.case-result {
  color: var(--web-accent);
}

/* CTA section */
.cta-section .cta-box {
  border-color: var(--web-accent);
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(0, 225, 255, 0.05) 100%);
}

.cta-points-wrapper .cta-point {
  background-color: var(--web-accent);
}

/* Footer */
.footer-tagline {
  color: var(--web-accent);
}

/* Velo CTA */
.velo-cta {
  --c-color-1: rgba(0, 225, 255, 0.6);
  --c-color-2: rgba(0, 166, 255, 0.8);
  --c-color-3: rgba(128, 208, 255, 0.7);
  --c-color-4: rgba(200, 240, 255, 0.7);
  --c-shadow: rgba(0, 225, 255, 0.4);
  --c-shadow-inset-top: rgba(0, 225, 255, 0.7);
  --c-shadow-inset-bottom: rgba(128, 208, 255, 0.6);
  --c-radial-inner: #00c4ff;
  --c-radial-outer: #00E1FF;
  --c-color: var(--velo-black);
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(0, 225, 255, 0.8) 0%, rgba(0, 225, 255, 0) 100%),
    linear-gradient(0deg, #00c4ff, #00c4ff);
  border-radius: 12px;
}

.velo-cta::before {
  border-radius: 12px;
}

.velo-cta::after {
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(0, 225, 255, 0.8) 0%, rgba(0, 225, 255, 0) 100%),
    linear-gradient(0deg, #00c4ff, #00c4ff);
  border-radius: 12px;
}

.velo-cta .cta-wrap {
  border-radius: 12px;
}

.velo-cta:hover {
  box-shadow: 0 0 28px rgba(0, 225, 255, 0.4), 0 0 8px rgba(0, 225, 255, 0.3) inset;
}

.velo-cta .cta-text {
  color: var(--velo-black);
  font-weight: 700;
}

/* Page loader rings */
.page-loader {
  background: var(--velo-black);
}

.page-loader .pl__ring--a {
  stroke: var(--web-accent);
}

.page-loader .pl__ring--b {
  stroke: var(--web-accent-mid);
}

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

.page-loader .pl__ring--d {
  stroke: var(--web-accent-soft);
}