/* ============================================================
   VoodooIT Modern Design System
   Canonical token set — overrides legacy site.css tokens.
   Link this file AFTER site.css in _Layout.cshtml.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Canonical palette */
  --vti-purple:  #B320B0;
  --vti-violet:  #6A35C9;
  --vti-cyan:    #39D5E8;
  --vti-navy:    #101828;
  --vti-slate:   #667085;
  --vti-cloud:   #F2F4F7;
  --vti-white:   #FFFFFF;

  /* Gradients */
  --vti-gradient:            linear-gradient(135deg, #B320B0 0%, #6A35C9 48%, #39D5E8 100%);
  --vti-gradient-horizontal: linear-gradient(90deg,  #B320B0 0%, #6A35C9 48%, #39D5E8 100%);

  /* Radius scale */
  --vti-radius-sm: 0.75rem;
  --vti-radius-md: 1.25rem;
  --vti-radius-lg: 2rem;
  --vti-radius-xl: 2.5rem;

  /* Shadows */
  --vti-shadow-panel:  0 24px 80px rgba(0, 0, 0, 0.32);
  --vti-shadow-signal: 0 20px 70px rgba(57, 213, 232, 0.18);

  /* Override legacy tokens so old site.css references pick up canonical values */
  --vti-primary:    #B320B0;
  --vti-secondary:  #39D5E8;
  --vti-accent:     #6A35C9;
  --vti-bg-dark:    #101828;
  --vti-bg-light:   #F2F4F7;
}

/* ============================================================
   Shell
   ============================================================ */
body {
  background: var(--vti-navy);
  color: var(--vti-white);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.main-wrapper {
  background: var(--vti-navy);
}

/* ============================================================
   Header / Nav
   ============================================================ */
.vti-header,
header {
  background: rgba(16, 24, 40, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .navbar {
  background: transparent !important;
  padding: 0.75rem 0;
}

header .navbar-brand img#logo {
  height: 56px;
  width: auto;
}

header .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem !important;
  transition: color 0.2s ease;
}

header .nav-link:hover {
  color: var(--vti-cyan) !important;
}

header .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
}

header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   Buttons — override Bootstrap
   ============================================================ */
.btn-primary,
input[type="submit"].btn-primary {
  background: var(--vti-gradient);
  border: none;
  border-radius: var(--vti-radius-sm);
  color: var(--vti-white);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.4rem;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  opacity: 0.88;
  box-shadow: 0 8px 32px rgba(179, 32, 176, 0.38);
  color: var(--vti-white);
}

.btn-sm.btn-primary {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

.btn-outline-secondary {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--vti-radius-sm);
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-outline-secondary:hover {
  border-color: var(--vti-cyan);
  color: var(--vti-cyan);
  background: transparent;
}

/* On light backgrounds the white text is invisible — use violet instead. */
.bg-light .btn-outline-secondary {
  border-color: var(--vti-violet);
  color: var(--vti-violet);
}

.bg-light .btn-outline-secondary:hover {
  border-color: var(--vti-purple);
  color: var(--vti-purple);
  background: transparent;
}

/* Paired hero buttons — keeps both buttons on one line at equal width. */
.vti-btn-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}

.vti-btn-group--right {
  justify-content: flex-end;
}

.vti-btn-pair {
  min-width: 200px;
  text-align: center;
}

/* ============================================================
   Typography — gradient text
   ============================================================ */
.text-gradient {
  background: var(--vti-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Hero
   ============================================================ */
.vti-hero,
.hero {
  background: var(--vti-navy);
  padding: 5rem 0 4rem;
  position: relative;
}

.hero h1,
.vti-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.vti-eyebrow {
  color: var(--vti-cyan);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   Sections
   ============================================================ */
section,
.vti-section {
  position: relative;
}

.bg-light,
.vti-section--light {
  background: var(--vti-cloud) !important;
  color: var(--vti-navy);
}

.bg-light h2,
.bg-light h3,
.bg-light h4,
.vti-section--light h2,
.vti-section--light h3 {
  color: var(--vti-navy);
}

.bg-light p,
.bg-light li,
.vti-section--light p {
  color: #344054;
}

.bg-gradient {
  background: var(--vti-gradient) !important;
  color: var(--vti-white);
}

.bg-gradient h2 {
  color: var(--vti-white);
}

/* ============================================================
   Cards
   ============================================================ */
.card,
.vti-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--vti-radius-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bg-light .card {
  background: var(--vti-white);
  border: 1px solid rgba(16, 24, 40, 0.08);
  color: var(--vti-navy);
}

.card:hover,
.vti-card:hover {
  border-color: rgba(179, 32, 176, 0.35);
  box-shadow: var(--vti-shadow-signal);
}

.shadow-glow {
  box-shadow: 0 4px 24px rgba(179, 32, 176, 0.12);
}

.card-body {
  padding: 1.75rem;
}

.card-body h3,
.card-body h4 {
  color: var(--vti-white);
}

.bg-light .card-body h3,
.bg-light .card-body h4 {
  color: var(--vti-navy);
}

/* ============================================================
   Footer
   ============================================================ */
footer,
.vti-footer {
  background: #0b111f !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.65);
}

footer h3,
.footer-title-style6 {
  color: var(--vti-white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

footer a,
.footer-list-style3 a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--vti-cyan);
}

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

.footer-list-style3 li {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.footer-bar {
  background: rgba(0, 0, 0, 0.25);
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   Contact form
   ============================================================ */
.contact-form-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--vti-radius-md);
  color: var(--vti-white);
}

.contact-form-box h5 {
  color: var(--vti-white);
}

.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--vti-radius-sm);
  color: var(--vti-white);
  padding: 0.65rem 0.9rem;
  width: 100%;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
  border-color: var(--vti-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(57, 213, 232, 0.15);
}

/* ============================================================
   Utilities
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--vti-white);
}

p, li, small, .text-muted {
  color: rgba(255, 255, 255, 0.65);
}

.text-muted {
  color: var(--vti-slate) !important;
}

.bg-light p,
.bg-light li,
.bg-light small {
  color: #475467;
}

.bg-light .text-muted {
  color: var(--vti-slate) !important;
}

hr {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Scrolled header state
   ============================================================ */
.vti-header--scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Component utility classes (vti- library)
   ============================================================ */

/* Shell */
.vti-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* Hero grid */
.vti-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 991.98px) { .vti-hero__grid { grid-template-columns: 1fr; } }

/* Signal cards */
.vti-signal-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--vti-radius-md);
  padding: 1.5rem;
  transition: border-color 0.25s ease;
}
.vti-signal-card:hover { border-color: rgba(57, 213, 232, 0.3); }

/* Money leak items */
.vti-money-leak { transition: border-color 0.2s ease; }

/* Runway steps */
.vti-runway { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 767.98px) { .vti-runway { grid-template-columns: 1fr; } }

/* Quickstart cards */
.vti-quickstart-card {
  border-top: 4px solid var(--vti-purple);
  border-radius: var(--vti-radius-md);
  background: var(--vti-white);
  transition: box-shadow 0.25s ease;
}
.vti-quickstart-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }

/* Form utility */
.vti-form label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.35rem;
}

/* Gradient text standalone class */
.vti-gradient-text {
  background: var(--vti-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Responsive adjustments
   ============================================================ */
@media (max-width: 991.98px) {
  header .navbar-collapse {
    background: rgba(16, 24, 40, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem 1rem;
    border-radius: 0 0 var(--vti-radius-sm) var(--vti-radius-sm);
  }

  header .nav-link {
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .ml-lg-3 {
    margin-top: 0.75rem;
  }

  .hero {
    padding: 3.5rem 0 3rem;
  }

  .hero h1 {
    font-size: 2.2rem;
  }
}