@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   VELION LITE — neon purple promo section
   ============================================================ */
.velion-lite-section {
  padding: 2rem 0 3rem;
}

.velion-lite-card {
  position: relative;
  border-radius: 28px;
  padding: 48px 52px;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(120, 40, 200, 0.18) 0%,
    rgba(80, 20, 160, 0.12) 40%,
    rgba(180, 60, 255, 0.10) 100%);
  border: 1px solid rgba(180, 80, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(180, 80, 255, 0.15) inset,
    0 0 60px -20px rgba(150, 50, 255, 0.4),
    0 30px 80px -30px rgba(100, 20, 200, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.45s cubic-bezier(.2,.8,.2,1),
              border-color 0.45s;
  text-decoration: none;
  display: block;
}
.velion-lite-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 100, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(200, 100, 255, 0.2) inset,
    0 0 80px -10px rgba(180, 60, 255, 0.55),
    0 40px 100px -30px rgba(120, 30, 220, 0.65);
}

/* liquid-glass top border highlight */
.velion-lite-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(220, 120, 255, 0.55) 0%,
    rgba(180, 80, 255, 0.15) 30%,
    rgba(255,255,255,0) 60%,
    rgba(180, 80, 255, 0.15) 85%,
    rgba(220, 120, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* glow orbs */
.vl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.vl-orb-1 {
  width: 380px; height: 380px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(160, 50, 255, 0.35), transparent 65%);
  animation: vl-breathe 8s ease-in-out infinite;
}
.vl-orb-2 {
  width: 280px; height: 280px;
  bottom: -80px; right: 5%;
  background: radial-gradient(circle, rgba(200, 80, 255, 0.25), transparent 65%);
  animation: vl-breathe 11s ease-in-out infinite reverse;
}
@keyframes vl-breathe {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* inner layout */
.vl-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.vl-left { flex: 1; min-width: 260px; }
.vl-right { flex-shrink: 0; }

/* badge */
.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d48eff;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(200, 100, 255, 0.35);
  background: rgba(160, 50, 255, 0.12);
  margin-bottom: 16px;
}
.vl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c060ff;
  box-shadow: 0 0 8px rgba(200, 80, 255, 0.9), 0 0 20px rgba(180, 60, 255, 0.5);
  animation: vl-pulse 2s infinite;
}
@keyframes vl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,80,255,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(200,80,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,80,255,0); }
}

/* title */
.vl-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 10px;
}
@media (min-width: 768px) { .vl-title { font-size: 2rem; } }

/* desc */
.vl-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 20px;
}

/* chips */
.vl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-chip {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(180, 80, 255, 0.3);
  background: rgba(160, 50, 255, 0.08);
  color: rgba(220, 160, 255, 0.85);
  transition: background 0.2s, border-color 0.2s;
}
.velion-lite-card:hover .vl-chip {
  background: rgba(160, 50, 255, 0.16);
  border-color: rgba(200, 100, 255, 0.5);
}

/* CTA box */
.vl-cta-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 18px;
  background: rgba(160, 50, 255, 0.15);
  border: 1px solid rgba(200, 100, 255, 0.3);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.velion-lite-card:hover .vl-cta-box {
  background: rgba(180, 70, 255, 0.25);
  border-color: rgba(220, 120, 255, 0.55);
  box-shadow: 0 0 30px -8px rgba(180, 60, 255, 0.5);
}
.vl-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: #d48eff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vl-arrow {
  font-size: 1.3rem;
  color: #c060ff;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
  text-shadow: 0 0 12px rgba(200,80,255,0.8);
}
.velion-lite-card:hover .vl-arrow { transform: translateX(6px); }

@media (max-width: 639px) {
  .velion-lite-card { padding: 32px 24px; }
  .vl-right { width: 100%; }
  .vl-cta-box { justify-content: space-between; }
}

:root {
  --bg: #0c0c0c;
  --bg-2: #111115;
  --accent: #3D81E3;
  --accent-2: #6AA3FF;
  --ink: #ffffff;
  --muted: rgba(255,255,255,0.45);
  --line: rgba(255,255,255,0.08);
  --v-line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.12);
  --green: #3D81E3;
  --blue: #6AA3FF;
  --v-green: #3D81E3;
  --v-blue: #6AA3FF;
  --v-muted: rgba(255,255,255,0.4);
  --v-bg: #0c0c0c;
}

html { scroll-behavior: smooth; }
body {
  background: #0c0c0c !important;
  font-family: 'Inter', 'Manrope', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  color: #ffffff;
}
::selection { background: rgba(61,129,227,.25); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0c0c0c; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(61,129,227,0.4); }

.velion-noise-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

.glow-1 { background: radial-gradient(circle, rgba(61,129,227,.18), transparent 68%) !important; opacity: .7 !important; }
.glow-2 { background: radial-gradient(circle, rgba(106,163,255,.10), transparent 70%) !important; }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) !important; }
@keyframes breathe { 0%,100%{transform:translateX(-50%) scale(1);opacity:.6} 50%{transform:translateX(-50%) scale(1.1);opacity:.9} }

.gradient-text {
  background: linear-gradient(110deg, #3D81E3 0%, #6AA3FF 35%, #a8c8ff 55%, #3D81E3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  background-size: 200% auto;
  animation: gshift 4s linear infinite;
}
@keyframes gshift { 0%{background-position:0% center} 100%{background-position:200% center} }

#progress { background: linear-gradient(90deg, #3D81E3, #6AA3FF) !important; box-shadow: 0 0 14px rgba(61,129,227,.7) !important; }

/* ---- NAVBAR ---- */
.lg-nav {
  border-radius: 28px !important;
  padding: 10px 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 40%, rgba(61,129,227,0.04) 80%, rgba(106,163,255,0.05) 100%) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.2) inset, 0 8px 40px -8px rgba(0,0,0,0.6), 0 2px 12px rgba(61,129,227,0.06) !important;
}
.lg-nav::before { background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.0) 35%) !important; }
.lg-nav::after { background: radial-gradient(ellipse 60% 40% at 70% 0%, rgba(61,129,227,0.10) 0%, transparent 70%) !important; }
.lg-nav nav a:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.mob-drawer {
  background: linear-gradient(150deg, rgba(255,255,255,0.09) 0%, rgba(12,12,12,0.9) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.ham span { background: rgba(255,255,255,.75) !important; }
.lang-switch { border: 1px solid rgba(255,255,255,0.12) !important; background: rgba(255,255,255,.025) !important; }
.lang-switch button { color: rgba(255,255,255,.55) !important; }
.lang-switch button.active { background: #3D81E3 !important; color: #fff !important; }

/* ---- BUTTONS ---- */
.btn-primary {
  background: #ffffff !important;
  color: #0c0c0c !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 28px -8px rgba(255,255,255,0.22) !important;
  border: none !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s !important;
}
.btn-primary::after { background: linear-gradient(110deg, transparent 30%, rgba(0,0,0,0.07) 50%, transparent 70%) !important; }
.btn-primary:hover { background: rgba(255,255,255,0.92) !important; transform: translateY(-2px) !important; box-shadow: 0 16px 40px -10px rgba(255,255,255,0.32) !important; }
.btn-ghost { border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 100px !important; background: rgba(255,255,255,0.02) !important; color: rgba(255,255,255,0.8) !important; transition: all .25s !important; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.28) !important; background: rgba(255,255,255,0.07) !important; color: #fff !important; transform: translateY(-2px) !important; }

/* ---- BADGES ---- */
.badge { border: 1px solid rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.03) !important; color: rgba(255,255,255,0.65) !important; }
.pulse-dot { background: #3D81E3 !important; box-shadow: 0 0 0 0 rgba(61,129,227,.6) !important; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(61,129,227,.5)} 70%{box-shadow:0 0 0 9px rgba(61,129,227,0)} 100%{box-shadow:0 0 0 0 rgba(61,129,227,0)} }
.section-num { color: #3D81E3 !important; }
.section-rule::after { background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent) !important; }
.eyebrow { color: rgba(255,255,255,.38) !important; }

/* ---- STAT STRIP ---- */
.stat-num { color: #fff !important; font-weight: 800; }

/* ---- LIQUID GLASS CARDS ---- */
.card {
  background: rgba(255,255,255,0.012) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -1px 1px rgba(0,0,0,0.15) !important;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,0.07) 80%, rgba(255,255,255,0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.card-hover:hover {
  background: rgba(255,255,255,0.022) !important;
  transform: translateY(-5px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 20px 50px -20px rgba(61,129,227,0.28),
    0 0 0 1px rgba(61,129,227,0.18) !important;
}

/* ---- SERVICE ICON ---- */
.svc-ic { border: 1px solid rgba(61,129,227,0.25) !important; background: radial-gradient(circle at 30% 25%, rgba(61,129,227,.16), rgba(61,129,227,.03)) !important; color: #6AA3FF !important; }
.svc-kicker { color: rgba(255,255,255,.35) !important; }

/* ---- AI SECTION ---- */
.ai-flagship::before { background: radial-gradient(120% 80% at 80% 0%, rgba(61,129,227,.06), transparent 60%) !important; }
.flag-badge { background: linear-gradient(100deg, #3D81E3, #6AA3FF) !important; box-shadow: 0 8px 26px -12px rgba(61,129,227,.7) !important; color: #fff !important; }
.ai-benefit-ic { border: 1px solid rgba(61,129,227,.28) !important; background: radial-gradient(circle at 30% 25%, rgba(61,129,227,.16), rgba(61,129,227,.03)) !important; color: #6AA3FF !important; }
.ai-benefit { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }

/* ---- CHAT DEMO ---- */
.chat { box-shadow: 0 40px 90px -50px rgba(61,129,227,.35) !important; border: 1px solid rgba(255,255,255,0.09) !important; background: linear-gradient(180deg, rgba(14,16,22,.97), rgba(9,11,17,.97)) !important; }
.chat-top { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.chat-ava { background: linear-gradient(135deg, #3D81E3, #6AA3FF) !important; }
.chat-status-s { color: #6AA3FF !important; }
.msg-c { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.msg-a { background: linear-gradient(135deg, rgba(61,129,227,.2), rgba(106,163,255,.12)) !important; border: 1px solid rgba(61,129,227,.28) !important; color: #e8f0ff !important; }
.chat-action { color: #6AA3FF !important; border: 1px dashed rgba(61,129,227,.4) !important; background: rgba(61,129,227,.06) !important; }
.typing { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; }

/* ---- CASES ---- */
.card .text-v-green { color: #6AA3FF !important; }
.text-v-green { color: #6AA3FF !important; }
.mono.text-v-green { color: #6AA3FF !important; }

/* ---- REVIEWS ---- */
.card .text-5xl.h-display { color: #3D81E3 !important; }
.h-10.w-10.rounded-full { background: linear-gradient(135deg, #3D81E3, #6AA3FF) !important; color: #fff !important; }

/* ---- FOUNDERS ---- */
.founder-photo-lg { background: linear-gradient(155deg, #3D81E3, #6AA3FF 60%, rgba(255,255,255,.08)) !important; box-shadow: 0 18px 40px -22px rgba(61,129,227,.6) !important; }
.founder-stat { border: 1px solid rgba(255,255,255,0.08) !important; background: rgba(255,255,255,.018) !important; }
.founder-stat b { color: #fff !important; }
.tag { color: rgba(255,255,255,.6) !important; border: 1px solid rgba(255,255,255,0.09) !important; background: rgba(255,255,255,.02) !important; }
.tag:hover { border-color: rgba(61,129,227,.4) !important; color: #cce0ff !important; }

/* ---- CALCULATOR ---- */
.chip { border: 1px solid rgba(255,255,255,0.09) !important; background: rgba(255,255,255,.015) !important; border-radius: 16px !important; transition: .2s !important; }
.chip:hover { border-color: rgba(61,129,227,.4) !important; background: rgba(61,129,227,.05) !important; }
.chip.sel { border-color: #3D81E3 !important; background: rgba(61,129,227,.1) !important; box-shadow: inset 0 0 0 1px rgba(61,129,227,.35), 0 10px 30px -18px rgba(61,129,227,.5) !important; }
.chip-label { color: #fff !important; }
.chip-icon { color: #6AA3FF !important; }
.chip-toggle-mark { border: 1px solid rgba(255,255,255,.22) !important; }
.chip-toggle.sel .chip-toggle-mark { background: #3D81E3 !important; border-color: #3D81E3 !important; box-shadow: 0 0 12px rgba(61,129,227,.55) !important; }
.chip-toggle.sel .chip-toggle-mark::after { background: #fff !important; transform: scale(1) !important; }

/* ---- PIPELINE / FLOW ---- */
.flow::before { background: linear-gradient(180deg, rgba(61,129,227,.55), rgba(106,163,255,.55)) !important; opacity: .4 !important; }
.flow-beam { background: linear-gradient(180deg, transparent, #3D81E3, transparent) !important; box-shadow: 0 0 14px rgba(61,129,227,.7) !important; }
.flow-node { color: #6AA3FF !important; border: 1px solid rgba(61,129,227,.4) !important; background: #0c0c0c !important; box-shadow: 0 0 0 4px rgba(12,12,12,1), inset 0 0 14px rgba(61,129,227,.12) !important; }
.flow-stage:hover .flow-node { border-color: #3D81E3 !important; box-shadow: 0 0 0 4px rgba(12,12,12,1), 0 0 18px rgba(61,129,227,.5) !important; }
.flow-chip b { color: #6AA3FF !important; }
.flow-chip:hover { border-color: rgba(61,129,227,.4) !important; background: rgba(61,129,227,.06) !important; }
.flow-stage.is-out .flow-node { background: rgba(61,129,227,.12) !important; border-color: #3D81E3 !important; }
.flow-stage.is-out .flow-chip { border-color: rgba(61,129,227,.28) !important; background: rgba(61,129,227,.07) !important; color: #dff0ff !important; }
.flow-stage.is-out .flow-chip b { color: #a8d0ff !important; }
.flow-head h4 { color: #c8d8e8 !important; }

/* ---- TICKER ---- */
.ticker { border-top: 1px solid rgba(255,255,255,0.07) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; background: rgba(255,255,255,.008) !important; }
.ticker-track span { color: rgba(255,255,255,.4) !important; }
.ticker-track span::before { color: #3D81E3 !important; }

/* ---- SOCIAL ---- */
.soc { border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,.018) !important; color: rgba(255,255,255,.65) !important; }
.soc:hover { background: #3D81E3 !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 14px 30px -14px rgba(61,129,227,.7) !important; }

/* ---- VELION LITE card ---- */
a.card .text-v-green { color: #6AA3FF !important; }

/* ---- CTA CARD ---- */
#ai .card[style*='17,224,198'] { border-color: rgba(61,129,227,.3) !important; background: linear-gradient(160deg, rgba(61,129,227,.09), rgba(106,163,255,.04)) !important; }

/* ---- Misc ---- */
.text-v-muted { color: rgba(255,255,255,.4) !important; }
.mono.text-v-muted { color: rgba(255,255,255,.4) !important; }
.border-v-line { border-color: rgba(255,255,255,0.08) !important; }

/* ---- Section spacing reduction ---- */
section.relative.z-10 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 768px) {
  section.relative.z-10 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}
/* Hero keeps a bit more top padding */
section.relative.z-10.pt-36 { padding-top: 7rem !important; }
@media (min-width: 768px) {
  section.relative.z-10.pt-36 { padding-top: 9rem !important; }
}

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } * { animation-duration:.001ms!important; transition-duration:.001ms!important; } }