/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1
*/

/* =============================================================================
   VILEE LLC — OPERATOR-GRADE DARK SYSTEM v2 (2026-05-04)
   Linear/Vercel-tier polish layered over Flatsome 3.20.6.
   Convention: BEM-ish (.vl-block__elem--mod) for our classes,
   chained selectors to win Flatsome specificity without abusing !important.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --vl-bg-base:       #050507;
  --vl-bg-surface:    #0A0A0F;
  --vl-bg-elevated:   #11111A;
  --vl-bg-raised:     #16161F;
  --vl-line:          rgba(255, 255, 255, 0.06);
  --vl-line-strong:   rgba(255, 255, 255, 0.12);
  --vl-line-hover:    rgba(129, 140, 248, 0.32);

  /* Text */
  --vl-text-primary:  #F4F4F5;
  --vl-text-soft:     #D4D4D8;
  --vl-text-muted:    #A1A1AA;
  --vl-text-subtle:   #84848E;

  /* Accent — used very sparingly */
  --vl-accent-1:      #818CF8; /* indigo */
  --vl-accent-2:      #A78BFA; /* violet */
  --vl-accent-3:      #67E8F9; /* cyan */
  --vl-accent-glow:   rgba(129, 140, 248, 0.15);
  --vl-accent-glow-2: rgba(167, 139, 250, 0.10);

  /* Status */
  --vl-success: #4ADE80;
  --vl-warning: #FBBF24;
  --vl-danger:  #F87171;

  /* Gradients */
  --vl-gradient-primary: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #67E8F9 100%);
  --vl-gradient-text:    linear-gradient(135deg, #818CF8 0%, #A78BFA 55%, #67E8F9 100%);
  --vl-gradient-soft:    linear-gradient(180deg, rgba(129,140,248,0.12) 0%, transparent 100%);
  --vl-gradient-divider: linear-gradient(90deg, transparent 0%, rgba(129,140,248,0.5) 50%, transparent 100%);

  /* Radii */
  --vl-radius-sm: 6px;
  --vl-radius-md: 10px;
  --vl-radius-lg: 16px;
  --vl-radius-xl: 24px;
  --vl-radius-full: 999px;

  /* Shadows */
  --vl-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --vl-shadow-md:   0 8px 24px -8px rgba(0,0,0,0.4);
  --vl-shadow-lg:   0 24px 48px -16px rgba(0,0,0,0.5);
  --vl-shadow-glow: 0 0 0 1px rgba(129,140,248,0.4), 0 12px 32px rgba(129,140,248,0.18);
  --vl-shadow-card-hover: 0 24px 48px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(129,140,248,0.2);

  /* Spacing (4px base) */
  --vl-space-1: 4px;  --vl-space-2: 8px;  --vl-space-3: 12px; --vl-space-4: 16px;
  --vl-space-5: 20px; --vl-space-6: 24px; --vl-space-8: 32px; --vl-space-10: 40px;
  --vl-space-12: 48px; --vl-space-14: 56px; --vl-space-16: 64px;
  --vl-space-20: 80px; --vl-space-24: 96px; --vl-space-32: 128px;

  /* Type */
  --vl-font-display: "Geist", "Inter Display", system-ui, -apple-system, sans-serif;
  --vl-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --vl-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --vl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vl-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --vl-ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --vl-dur-fast: 150ms;
  --vl-dur-base: 250ms;
  --vl-dur-slow: 400ms;
  --vl-dur-xslow: 600ms;

  /* Layout */
  --vl-container: 1200px;
}

/* -----------------------------------------------------------------------------
   2. RESET & GLOBAL DEFAULTS
   ----------------------------------------------------------------------------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--vl-bg-base);
  color: var(--vl-text-primary);
  font-family: var(--vl-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* Force dark page wrapper — Flatsome injects light backgrounds via JS theme_mods. */
body, body.dark, body .page-wrapper, body main, #main, #content {
  background-color: var(--vl-bg-base) !important;
}

/* Section neutralization — Flatsome inlines bg-color from UX Builder per section. */
.section, .row { background-color: transparent; }

/* Default link colour stays subtle — gradient reserved for accents only */
a {
  color: var(--vl-accent-1);
  text-decoration: none;
  transition: color var(--vl-dur-fast) var(--vl-ease-std);
}
a:hover { color: var(--vl-accent-2); }

/* Selection */
::selection { background-color: var(--vl-accent-1); color: var(--vl-bg-base); }

/* Scrollbar — subtle on dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vl-bg-base); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------------------- */
.vl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vl-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vl-accent-1);
  margin: 0 0 var(--vl-space-6);
}
/* Glowing dot before eyebrow — using ::before pseudo so we don't touch markup */
.vl-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vl-accent-1);
  box-shadow: 0 0 10px var(--vl-accent-1), 0 0 4px rgba(129,140,248,0.6);
  flex-shrink: 0;
}
/* Center-aligned containers — keep dot before but allow flex centering of the text inside */
.text-center .vl-eyebrow,
.col-inner.text-center .vl-eyebrow { justify-content: center; }

/* When eyebrow uses gradient text variant (about/timeline) */
.vl-eyebrow.vl-gradient-text { color: transparent; }
.vl-eyebrow.vl-gradient-text::before { background: var(--vl-gradient-primary); box-shadow: 0 0 10px rgba(167,139,250,0.7); }

/* Heading reset — Flatsome's h-font would otherwise win. Use higher-specificity (h1.vl-h1) */
h1.vl-h1, h2.vl-h2, :is(h3,p).vl-h3, h4.vl-h4, .vl-h1, .vl-h2, .vl-h3, .vl-h4 {
  font-family: var(--vl-font-display);
  color: var(--vl-text-primary);
  font-weight: 700;
  margin: 0 0 var(--vl-space-4);
  letter-spacing: -0.022em;
}

h1.vl-h1, .vl-h1 {
  /* clamp(48px, 7vw, 96px). 48/16=3rem, 96/16=6rem */
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  /* line-height 1.1 (not 1.04) — gives descender room without padding hack */
  line-height: 1.08;
  letter-spacing: -0.035em;
  /* Allow descender + gradient text-fill to render fully */
  padding: 0 0 0.12em;
  overflow: visible;
}

h2.vl-h2, .vl-h2 {
  /* clamp(32px, 4.5vw, 56px) */
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

:is(h3,p).vl-h3, .vl-h3 {
  font-size: clamp(1.375rem, 1.6vw + 0.5rem, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

h4.vl-h4, .vl-h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* Subhead / lead paragraph */
.vl-subhead {
  font-family: var(--vl-font-body);
  font-size: clamp(1.0625rem, 1vw + 0.6rem, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--vl-text-muted);
  max-width: 640px;
  margin: 0 auto var(--vl-space-10);
}
/* When subhead is on a left-aligned section, don't auto-center it */
.text-left .vl-subhead, .col-inner:not(.text-center) .vl-subhead { margin-left: 0; }

/* Body utility */
.vl-body    { color: var(--vl-text-muted); font-size: 16px; line-height: 1.6; }
.vl-body-sm { color: var(--vl-text-muted); font-size: 14px; line-height: 1.55; }
.vl-mono    { font-family: var(--vl-font-mono); font-feature-settings: "tnum" 1; }

/* Generic paragraphs inside our sections — soften default white */
.vl-section p,
section.vl-section .featured-box p,
section.vl-section .col-inner > p {
  color: var(--vl-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Quote (about page) */
.vl-quote {
  position: relative;
  margin: var(--vl-space-6) 0;
  padding: var(--vl-space-8) var(--vl-space-8);
  background: linear-gradient(180deg, rgba(129,140,248,0.04) 0%, transparent 100%);
  border-left: 2px solid;
  border-image: var(--vl-gradient-primary) 1;
  border-radius: 0 var(--vl-radius-md) var(--vl-radius-md) 0;
}
.vl-quote p {
  font-family: var(--vl-font-display);
  font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.375rem);
  line-height: 1.5;
  color: var(--vl-text-soft);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   4. GRADIENT UTILITIES
   ----------------------------------------------------------------------------- */
.vl-gradient-text {
  background: var(--vl-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Inline (not inline-block) so flow respects line-height; padding pushes descender below baseline. */
  padding: 0 0 0.14em;
  margin-bottom: -0.14em;
}

.vl-gradient-border {
  position: relative;
  background: var(--vl-bg-elevated);
  border-radius: var(--vl-radius-lg);
}
.vl-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--vl-gradient-primary);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   5. SECTIONS — vertical rhythm + ambient backgrounds
   ----------------------------------------------------------------------------- */

/* Strip Flatsome's inline padding overrides on our sections so our spacing wins */
section.vl-section,
.section.vl-section {
  padding: clamp(64px, 10vh, 120px) var(--vl-space-6) !important;
  background-color: var(--vl-bg-base) !important;
  position: relative;
  isolation: isolate; /* contain pseudo-element backgrounds */
}

section.vl-section.vl-section-surface,
section.vl-section.vl-section--surface {
  background-color: var(--vl-bg-surface) !important;
}

section.vl-section.vl-section--elevated {
  background-color: var(--vl-bg-elevated) !important;
}

/* Tighten inner row default margin */
.vl-section .row,
.vl-section > .section-content > .row {
  margin-bottom: 0;
}

/* Section divider — 1px gradient line at top of every adjacent section */
section.vl-section + section.vl-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  height: 1px;
  background: var(--vl-gradient-divider);
  opacity: 0.5;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   6. HERO — generous padding, ambient glow, dot grid backdrop, dot eyebrow
   ----------------------------------------------------------------------------- */

/* Reset Flatsome banner padding-top: 90vh hack — the .banner inside hero is the carrier */
section.vl-section.vl-hero {
  padding: clamp(80px, 12vh, 160px) var(--vl-space-6) clamp(64px, 10vh, 120px) !important;
  min-height: auto !important; /* override 100vh */
  overflow: hidden;
}

/* Kill 80/90vh banner padding AND undo Flatsome's absolute-positioned banner-layers.
   Flatsome's .banner-layers > * { position: absolute !important } floats the text-box
   at banner center. Once banner collapses, that layer detaches from flow — content
   appears twice. Force everything back to normal flow. */
section.vl-section.vl-hero .banner { padding-top: 0 !important; min-height: 0 !important; }
section.vl-section.vl-hero .banner-inner { position: static; }
section.vl-section.vl-hero .banner-bg { display: none; }
section.vl-section.vl-hero .banner-layers { overflow: visible; height: auto; }
section.vl-section.vl-hero .banner-layers > * { position: static !important; }
section.vl-section.vl-hero .banner-layer.text-box {
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  inset: auto !important;
}
section.vl-section.vl-hero .banner-link { display: none !important; }

/* Ambient glow — radial top-left + bottom-right */
section.vl-section.vl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 18% 0%, rgba(129,140,248,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(167,139,250,0.12), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* Dot grid overlay — soft full-bleed fade out from center.
   No hard rectangle around content because mask uses very gentle gradient. */
section.vl-section.vl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 0%, transparent 75%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* Hero content above all layers */
section.vl-section.vl-hero .section-content,
section.vl-section.vl-hero .banner-layers,
section.vl-section.vl-hero .text-inner {
  position: relative;
  z-index: 2;
}

/* Hero text-inner padding override — Flatsome inlines 80px 0 80px 0; replace with clean rhythm */
section.vl-section.vl-hero .text-inner {
  padding: 0 !important;
  max-width: 880px;
  margin: 0 auto;
}

/* Hero h1 spacing */
section.vl-section.vl-hero h1.vl-h1 {
  margin-bottom: var(--vl-space-6);
}

/* Hero subhead */
section.vl-section.vl-hero .vl-subhead {
  margin-top: var(--vl-space-6);
  margin-bottom: var(--vl-space-10);
}

/* Hero CTA spacing — nicer gap between buttons */
section.vl-section.vl-hero .button + .button {
  margin-left: var(--vl-space-3);
}

/* Make the gap-element not collapse content */
section.vl-section.vl-hero .gap-element { display: none !important; }

/* -----------------------------------------------------------------------------
   7. CONTAINER + ROWS — match max-width, internal gap rhythm
   ----------------------------------------------------------------------------- */
.vl-section .container,
.vl-section .row-main,
.vl-section .section-content .container {
  max-width: var(--vl-container);
}

/* Eyebrow → H2 → subhead rhythm fix when stacked alone in a row */
.vl-section .col-inner > .vl-eyebrow + h2.vl-h2,
.vl-section .col-inner > .vl-eyebrow + .vl-h2 {
  margin-top: 0;
  margin-bottom: var(--vl-space-4);
}
.vl-section .col-inner > h2.vl-h2 + .vl-subhead,
.vl-section .col-inner > .vl-h2 + .vl-subhead {
  margin-top: var(--vl-space-4);
  margin-bottom: 0;
}

/* Spacing after the heading row before grids — Flatsome leaves rows tightly stacked */
.vl-section .row + .row {
  margin-top: var(--vl-space-12);
}
@media (min-width: 1024px) {
  .vl-section .row + .row { margin-top: var(--vl-space-14); }
}

/* -----------------------------------------------------------------------------
   8. FEATURED BOX (Flatsome icon-box) — operator-grade card
   ----------------------------------------------------------------------------- */

/* Base card body */
.vl-section .icon-box.featured-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-lg);
  padding: clamp(24px, 3vw, 32px);
  margin-bottom: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition:
    transform var(--vl-dur-base) var(--vl-ease-out),
    border-color var(--vl-dur-base) var(--vl-ease-std),
    background-color var(--vl-dur-base) var(--vl-ease-std),
    box-shadow var(--vl-dur-base) var(--vl-ease-std);
}

/* Gradient top-edge highlight that reveals on hover */
.vl-section .icon-box.featured-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--vl-gradient-primary);
  opacity: 0;
  transition: opacity var(--vl-dur-base) var(--vl-ease-std);
  pointer-events: none;
}

.vl-section .icon-box.featured-box:hover {
  transform: translateY(-3px);
  border-color: var(--vl-line-hover);
  background: rgba(129, 140, 248, 0.025);
  box-shadow: var(--vl-shadow-card-hover);
}
.vl-section .icon-box.featured-box:hover::before { opacity: 1; }

/* Inner text wrapper */
.vl-section .icon-box.featured-box .icon-box-text {
  display: flex;
  flex-direction: column;
  gap: var(--vl-space-3);
  width: 100%;
}

/* H3 inside card */
.vl-section .icon-box.featured-box :is(h3,p).vl-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--vl-text-primary);
}

/* Body para inside card */
.vl-section .icon-box.featured-box p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vl-text-muted);
  margin: 0;
}

/* "Learn more →" link inside card — strip Flatsome button */
.vl-section .icon-box.featured-box a.button.is-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--vl-space-3);
  background: none;
  border: 0;
  color: var(--vl-accent-1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  min-height: 0;
  line-height: 1.4;
  transition: color var(--vl-dur-fast) var(--vl-ease-std), transform var(--vl-dur-fast) var(--vl-ease-std);
}
.vl-section .icon-box.featured-box a.button.is-link span {
  transition: transform var(--vl-dur-fast) var(--vl-ease-std);
  display: inline-block;
}
.vl-section .icon-box.featured-box a.button.is-link:hover { color: var(--vl-accent-2); }
.vl-section .icon-box.featured-box a.button.is-link:hover span { transform: translateX(3px); }

/* Center variant (used for stats) — tighter padding for stat cards */
.vl-section .icon-box.icon-box-center.featured-box {
  text-align: center;
  align-items: center;
  padding: clamp(20px, 2.5vw, 28px) clamp(12px, 1.8vw, 20px);
  /* Stat cards don't need hover lift — they're informational */
}
.vl-section .icon-box.icon-box-center.featured-box .icon-box-text {
  align-items: center;
  width: 100%;
  overflow: visible;
}
/* Override the block-level featured-box hover transform on stats */
.vl-section .icon-box.icon-box-center.featured-box:hover {
  transform: none;
}

/* -----------------------------------------------------------------------------
   9. STATS — large gradient number + uppercase label
   ----------------------------------------------------------------------------- */
.vl-section .icon-box.icon-box-center .icon-box-text > :is(h3,p).vl-h3.vl-gradient-text,
.vl-section :is(h3,p).vl-h3.vl-gradient-text {
  font-family: var(--vl-font-display);
  /* Constrain max so 4-col grid (~280px) never overflows */
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
  font-feature-settings: "tnum" 1;
  /* fit within col width */
  max-width: 100%;
  word-break: keep-all;
  white-space: nowrap;
  overflow: visible;
}

.vl-section p.vl-stat-label {
  font-family: var(--vl-font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vl-text-subtle);
  margin: var(--vl-space-3) 0 0;
}

/* In stat icon-box, override the default flex gap to keep number/label tight */
.vl-section .icon-box.icon-box-center.featured-box .icon-box-text {
  gap: 0;
}

/* -----------------------------------------------------------------------------
   10. BUTTONS — operator-grade override of Flatsome .button
   ----------------------------------------------------------------------------- */

/* Reset Flatsome button defaults inside our sections */
.vl-section .button,
.vl-cta-band .button,
section.vl-section .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vl-space-2);
  min-height: 44px;
  padding: 13px 26px;
  font-family: var(--vl-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: 8px !important; /* Flatsome inlines 6px or pill via theme_mod */
  cursor: pointer;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: none;
  transition:
    transform var(--vl-dur-fast) var(--vl-ease-std),
    background-color var(--vl-dur-fast) var(--vl-ease-std),
    border-color var(--vl-dur-fast) var(--vl-ease-std),
    color var(--vl-dur-fast) var(--vl-ease-std),
    box-shadow var(--vl-dur-base) var(--vl-ease-std);
}

.vl-section .button > span,
section.vl-section .button > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* PRIMARY — solid white, inverts on hover. Flatsome ships .is-link with
   `background-color: transparent !important` so we must !important the override. */
.vl-section .button.white.is-link,
section.vl-section .button.white.is-link,
.vl-section a.button.white.is-link,
section.vl-section a.button.white.is-link {
  background-color: var(--vl-text-primary) !important;
  color: var(--vl-bg-base) !important;
  border-color: var(--vl-text-primary) !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}
.vl-section .button.white.is-link:hover,
section.vl-section .button.white.is-link:hover {
  transform: translateY(-1px);
  background-color: #FFFFFF !important;
  color: var(--vl-bg-base) !important;
  border-color: #FFFFFF !important;
  opacity: 1 !important;
  box-shadow: 0 12px 32px -8px rgba(255,255,255,0.18), 0 0 0 1px rgba(255,255,255,0.4);
}

/* OUTLINE / GHOST */
.vl-section .button.white.is-outline,
section.vl-section .button.white.is-outline,
.vl-section a.button.white.is-outline,
section.vl-section a.button.white.is-outline {
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: var(--vl-text-primary) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.vl-section .button.white.is-outline:hover,
section.vl-section .button.white.is-outline:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: var(--vl-text-primary) !important;
  transform: translateY(-1px);
}

/* Large variant — only nudge padding, don't blow it up */
.vl-section .button.is-large,
section.vl-section .button.is-large {
  padding: 15px 30px;
  font-size: 15.5px;
  min-height: 50px;
}

/* "Expand" variant (full-width pricing CTAs) */
.vl-section .button.expand,
section.vl-section .button.expand {
  width: 100%;
  margin-top: var(--vl-space-4);
}

/* Focus ring */
.vl-section .button:focus-visible,
section.vl-section .button:focus-visible {
  outline: 2px solid var(--vl-accent-3);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   11. CTA BAND — full-width band with gradient top edge
   ----------------------------------------------------------------------------- */
section.vl-section.vl-cta-band {
  background-color: var(--vl-bg-surface) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
section.vl-section.vl-cta-band::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--vl-gradient-primary);
  opacity: 0.6;
}
/* Ambient gradient wash inside CTA band */
section.vl-section.vl-cta-band > .section-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(129,140,248,0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
section.vl-section.vl-cta-band .section-content { position: relative; z-index: 1; }

section.vl-section.vl-cta-band .vl-h2 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
section.vl-section.vl-cta-band .vl-subhead {
  max-width: 560px;
  margin-bottom: var(--vl-space-8);
}
section.vl-section.vl-cta-band .button + .button { margin-left: var(--vl-space-3); }

/* -----------------------------------------------------------------------------
   12. PRICING TABLES (Flatsome ux_price_table)
   Override completely — Flatsome ships generic light cards.
   ----------------------------------------------------------------------------- */
.vl-section .pricing-table-wrapper { height: 100%; }

.vl-section .pricing-table {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line) !important;
  border-radius: var(--vl-radius-lg) !important;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 32px);
  height: 100%;
  text-align: left !important; /* override Flatsome .text-center on price-table */
  box-shadow: none !important;
  transition: transform var(--vl-dur-base) var(--vl-ease-out),
              border-color var(--vl-dur-base) var(--vl-ease-std),
              box-shadow var(--vl-dur-base) var(--vl-ease-std);
}
.vl-section .pricing-table:hover {
  transform: translateY(-3px);
  border-color: var(--vl-line-hover) !important;
  box-shadow: var(--vl-shadow-card-hover);
}

/* The middle (featured) tier — Flatsome marks ALL three with .featured-table in shortcode,
   so we use :nth-child to highlight just the middle. */
.vl-section .row > .col:nth-child(2) .pricing-table {
  background: linear-gradient(180deg, rgba(129,140,248,0.06) 0%, var(--vl-bg-elevated) 60%);
  border-color: var(--vl-line-strong) !important;
  /* No scale — caused horizontal overflow across narrow cols. Use border + bg to differentiate. */
}
.vl-section .row > .col:nth-child(2) .pricing-table::before {
  content: "Most chosen";
  position: absolute;
  top: -12px;
  right: 24px;
  padding: 4px 12px;
  font-family: var(--vl-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vl-bg-base);
  background: var(--vl-gradient-primary);
  border-radius: var(--vl-radius-full);
  box-shadow: 0 4px 12px rgba(129,140,248,0.4);
}
/* Top gradient edge on featured */
.vl-section .row > .col:nth-child(2) .pricing-table::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--vl-gradient-primary);
  border-radius: var(--vl-radius-lg) var(--vl-radius-lg) 0 0;
}

/* Header */
.vl-section .pricing-table-header {
  display: flex;
  flex-direction: column;
  gap: var(--vl-space-3);
  padding: 0 0 var(--vl-space-6);
  border-bottom: 1px solid var(--vl-line);
  margin-bottom: var(--vl-space-6);
}

/* "Project" / "Retainer" / "Operator" tier name */
.vl-section .pricing-table .title {
  font-family: var(--vl-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--vl-accent-1) !important;
  line-height: 1;
  margin: 0;
}

/* "$$" / "$$$" / "Custom" big label — keep it modest so 6+ chars don't overflow */
.vl-section .pricing-table .price,
.vl-section .pricing-table .price.is-xxlarge {
  font-family: var(--vl-font-display) !important;
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 2.5rem) !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--vl-text-primary) !important;
  margin: 0;
  /* gradient text — explicit padding for descender + safety overflow */
  background: var(--vl-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 0 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Item list area */
.vl-section .pricing-table-items.items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-grow: 1;
}

/* Individual bullet item — replace default style */
.vl-section .pricing-table .bullet-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vl-line);
  background: none !important;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--vl-text-soft);
}
.vl-section .pricing-table .bullet-item:last-of-type { border-bottom: 0; }
.vl-section .pricing-table .bullet-item::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  /* Inline gradient checkmark — encoded SVG */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23818CF8'/%3E%3Cstop offset='50%25' stop-color='%23A78BFA'/%3E%3Cstop offset='100%25' stop-color='%2367E8F9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='8' fill='url(%23g)' fill-opacity='0.16'/%3E%3Cpath d='M4.5 8L7 10.5L11.5 5.5' stroke='url(%23g)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.vl-section .pricing-table .bullet-item .text {
  flex: 1;
  font-family: var(--vl-font-body);
}

/* CTA at bottom of pricing card */
.vl-section .pricing-table .button.expand {
  margin-top: var(--vl-space-6);
}
/* Featured tier gets the solid primary CTA */
.vl-section .row > .col:nth-child(2) .pricing-table .button.is-link {
  background: var(--vl-gradient-primary);
  color: var(--vl-bg-base);
  border-color: transparent;
}
.vl-section .row > .col:nth-child(2) .pricing-table .button.is-link:hover {
  box-shadow: 0 12px 32px -8px rgba(129,140,248,0.4);
}

/* -----------------------------------------------------------------------------
   13. ACCORDION (FAQ)
   ----------------------------------------------------------------------------- */
.vl-section .accordion { display: flex; flex-direction: column; gap: 12px; }

.vl-section .accordion-item {
  background: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-md);
  overflow: hidden;
  transition: border-color var(--vl-dur-base) var(--vl-ease-std),
              background-color var(--vl-dur-base) var(--vl-ease-std);
  position: relative;
}

/* Active state — gradient left-border */
.vl-section .accordion-item.active {
  border-color: var(--vl-line-strong);
  background: linear-gradient(180deg, rgba(129,140,248,0.04) 0%, var(--vl-bg-elevated) 100%);
}
.vl-section .accordion-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--vl-gradient-primary);
  border-radius: 2px 0 0 2px;
}

/* Title row */
.vl-section .accordion-title,
.vl-section .accordion-item .accordion-title.plain {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px !important;
  font-family: var(--vl-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--vl-text-primary) !important;
  background: none !important;
  border: 0 !important;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--vl-dur-fast) var(--vl-ease-std);
}
.vl-section .accordion-title:hover { color: var(--vl-accent-1) !important; }

/* Toggle chevron */
.vl-section .accordion-title .toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--vl-line) !important;
  border-radius: 999px !important;
  color: var(--vl-text-muted);
  transition: transform var(--vl-dur-base) var(--vl-ease-out),
              background-color var(--vl-dur-fast) var(--vl-ease-std),
              border-color var(--vl-dur-fast) var(--vl-ease-std);
}
.vl-section .accordion-item.active .accordion-title .toggle {
  transform: rotate(180deg);
  background: rgba(129,140,248,0.12) !important;
  border-color: var(--vl-line-hover) !important;
  color: var(--vl-accent-1);
}
.vl-section .accordion-title .toggle i { font-size: 14px; }

/* Title text */
.vl-section .accordion-title > span {
  flex: 1;
  font-family: var(--vl-font-display);
}

/* Content */
.vl-section .accordion-inner {
  padding: 0 28px 22px !important;
  color: var(--vl-text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.vl-section .accordion-inner p { margin: 0; color: var(--vl-text-muted); }

/* -----------------------------------------------------------------------------
   14. BLOG / INSIGHT POSTS
   ----------------------------------------------------------------------------- */
.vl-section .blog-post .post-item,
.vl-section .post-item.col {
  background-color: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-lg);
  overflow: hidden;
  transition: transform var(--vl-dur-base) var(--vl-ease-out),
              border-color var(--vl-dur-base) var(--vl-ease-std);
}
.vl-section .blog-post .post-item:hover { transform: translateY(-3px); border-color: var(--vl-line-hover); }

.vl-section .post-item .post-title a { color: var(--vl-text-primary) !important; }
.vl-section .post-item .post-title a:hover { color: var(--vl-accent-1) !important; }
.vl-section .post-item .post-excerpt,
.vl-section .post-item .from_the_blog_excerpt { color: var(--vl-text-muted); font-size: 14px; line-height: 1.55; }

/* -----------------------------------------------------------------------------
   15. CONTACT FORM 7 — dark theme
   ----------------------------------------------------------------------------- */
.wpcf7-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; }
.wpcf7-form label { display: block; color: var(--vl-text-primary); font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 14px 16px;
  background: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line-strong);
  border-radius: var(--vl-radius-md);
  color: var(--vl-text-primary);
  font-family: var(--vl-font-body);
  font-size: 15px;
  transition: border-color var(--vl-dur-fast), box-shadow var(--vl-dur-fast);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--vl-accent-1);
  box-shadow: 0 0 0 3px rgba(129,140,248,0.18);
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form input[type=submit] {
  padding: 14px 32px;
  background: var(--vl-gradient-primary);
  color: var(--vl-bg-base);
  border: none;
  border-radius: var(--vl-radius-md);
  font-weight: 700;
  font-family: var(--vl-font-display);
  cursor: pointer;
  transition: transform var(--vl-dur-fast), box-shadow var(--vl-dur-fast);
}
.wpcf7-form input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(129,140,248,0.35); }
.wpcf7-response-output {
  padding: 12px 16px;
  border-radius: var(--vl-radius-md);
  background: var(--vl-bg-surface);
  color: var(--vl-text-muted);
  border: 1px solid var(--vl-line);
  margin-top: 12px;
}

/* -----------------------------------------------------------------------------
   16. TOP BAR
   ----------------------------------------------------------------------------- */
#top-bar.header-top {
  background-color: var(--vl-bg-base) !important;
  border-bottom: 1px solid var(--vl-line);
  font-family: var(--vl-font-body);
  font-size: 13px;
  min-height: 36px;
}
#top-bar .nav-divided > li + li:before {
  border-color: var(--vl-line-strong) !important;
  opacity: 0.4;
}
#top-bar .html_topbar_left,
#top-bar .html_topbar_right,
#top-bar a {
  color: var(--vl-text-muted) !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
#top-bar a:hover { color: var(--vl-accent-1) !important; }

/* -----------------------------------------------------------------------------
   17. HEADER + STICKY
   ----------------------------------------------------------------------------- */
#header,
#header .header-wrapper,
#header .header-main {
  background-color: var(--vl-bg-base) !important;
  border-bottom: 1px solid transparent;
  transition: background-color var(--vl-dur-base) var(--vl-ease-std),
              border-color var(--vl-dur-base) var(--vl-ease-std),
              box-shadow var(--vl-dur-base) var(--vl-ease-std),
              backdrop-filter var(--vl-dur-base) var(--vl-ease-std);
}

/* Front page: transparent until sticky */
body.home #header:not(.has-sticky-stuck) .header-main:not(.stuck) {
  background-color: transparent !important;
}
body.home #header:not(.has-sticky-stuck) .header-bg-color { background: transparent !important; }

/* Sticky/stuck state — applied by Flatsome JS */
#header .stuck,
#header.has-sticky-stuck .header-main,
#header .header-main.stuck {
  background-color: rgba(5, 5, 7, 0.85) !important;
  border-bottom: 1px solid var(--vl-line-strong);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

/* Logo size — keep tidy at sticky */
#header .header_logo img,
#header .header-logo img { max-height: 32px; width: auto; }
.stuck .header-logo img { max-height: 28px; }

/* -----------------------------------------------------------------------------
   18. PRIMARY NAV
   ----------------------------------------------------------------------------- */
#header .header-nav-main.nav > li > a,
#header .nav > li > a {
  position: relative;
  font-family: var(--vl-font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--vl-text-muted) !important;
  padding: 10px 9px;
  transition: color var(--vl-dur-fast) var(--vl-ease-std);
}

/* Tighten layout — Flatsome's nav-uppercase + nav-divided add padding/divider that pushes wrap */
#header .nav.nav-divided > li + li::before { display: none !important; }
#header .nav.nav-uppercase > li > a { text-transform: none !important; letter-spacing: 0 !important; }
#header .header-nav-main { white-space: nowrap; flex-wrap: nowrap !important; }
#header .header-inner { flex-wrap: nowrap !important; gap: 4px; }
#header .flex-col.flex-grow { min-width: 0; }

/* Hide cart/account/search — this is a B2B holding-co site, not a shop.
   Suppressing rather than removing because nav is generated from theme defaults. */
#header .nav > li.account-item,
#header .nav > li.cart-item,
#header .header-search-dropdown,
#header .nav-right > li.account-item,
#header .nav-right > li.cart-item {
  display: none !important;
}
/* Right-flex column has nothing left after we hide cart/login → hide the wrapper too. */
#header .header-inner > .flex-col.flex-right { display: none !important; }
/* Top-bar right column (just an obfuscated email) — hide for clean rhythm */
#top-bar .nav-right { white-space: nowrap; }
#header .header-nav-main.nav > li:hover > a,
#header .nav > li:hover > a {
  color: var(--vl-text-primary) !important;
}
#header .nav > li.current-menu-item > a,
#header .header-nav-main.nav > li.current-menu-item > a {
  color: var(--vl-text-primary) !important;
}

/* Underline accent — only on text menu items, not the CTA pill */
#header .nav > li:not(.button-primary):not(.account-item):not(.cart-item):not(.has-icon) > a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--vl-gradient-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--vl-dur-base) var(--vl-ease-out);
}
#header .nav > li:not(.button-primary):not(.account-item):not(.cart-item):not(.has-icon):hover > a::after,
#header .nav > li:not(.button-primary):not(.account-item):not(.cart-item):not(.has-icon).current-menu-item > a::after {
  transform: scaleX(1);
}

/* "Talk to founders" CTA pill in nav */
#header .nav > li.button-primary > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 9px 18px !important;
  background: var(--vl-text-primary);
  color: var(--vl-bg-base) !important;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: 999px !important;
  border: 1px solid var(--vl-text-primary);
  transition: transform var(--vl-dur-fast) var(--vl-ease-std),
              background-color var(--vl-dur-fast) var(--vl-ease-std),
              box-shadow var(--vl-dur-base) var(--vl-ease-std);
}
#header .nav > li.button-primary > a::after { display: none !important; }
#header .nav > li.button-primary > a:hover {
  transform: translateY(-1px);
  background: #FFFFFF;
  color: var(--vl-bg-base) !important;
  box-shadow: 0 8px 24px -6px rgba(255,255,255,0.25);
}

/* Cart / Account / Search icon buttons */
#header .nav > li.has-icon > a,
#header .nav > li.account-item > a,
#header .nav > li.cart-item > a {
  color: var(--vl-text-muted) !important;
}
#header .nav > li.has-icon > a:hover,
#header .nav > li.account-item > a:hover,
#header .nav > li.cart-item > a:hover { color: var(--vl-text-primary) !important; }

/* Dropdown */
#header .nav-dropdown {
  background: rgba(17, 17, 26, 0.95) !important;
  border: 1px solid var(--vl-line-strong) !important;
  border-radius: var(--vl-radius-md) !important;
  box-shadow: var(--vl-shadow-lg) !important;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
#header .nav-dropdown a { color: var(--vl-text-muted) !important; }
#header .nav-dropdown a:hover { color: var(--vl-text-primary) !important; }

/* -----------------------------------------------------------------------------
   19. MOBILE MENU DRAWER
   ----------------------------------------------------------------------------- */
#main-menu,
.main-menu-overlay,
.off-canvas .sidebar-menu,
.mfp-content .off-canvas {
  background: var(--vl-bg-elevated) !important;
  color: var(--vl-text-primary);
}
#main-menu a,
.off-canvas .sidebar-menu a {
  color: var(--vl-text-soft) !important;
  font-family: var(--vl-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
#main-menu a:hover,
.off-canvas .sidebar-menu a:hover { color: var(--vl-accent-1) !important; }

/* -----------------------------------------------------------------------------
   20. CUSTOM FOOTER (#vl-footer)
   ----------------------------------------------------------------------------- */
#vl-footer {
  background: var(--vl-bg-surface);
  color: var(--vl-text-muted);
  font-family: var(--vl-font-body);
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}
#vl-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 30%; right: 30%;
  height: 1px;
  background: var(--vl-gradient-divider);
  opacity: 0.4;
}

.vl-footer__inner {
  max-width: var(--vl-container);
  margin: 0 auto;
  padding: clamp(64px, 10vh, 88px) var(--vl-space-6) 48px;
}

.vl-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vl-space-12);
}
@media (min-width: 768px) {
  .vl-footer__top {
    grid-template-columns: minmax(220px, 1fr) 2.5fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.vl-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.vl-footer__logo-link { display: inline-block; }
.vl-footer__logo { display: block; height: 28px; width: auto; opacity: 0.95; }
.vl-footer__wordmark {
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.vl-footer__tagline {
  font-size: 13px;
  color: var(--vl-text-subtle);
  max-width: 240px;
  line-height: 1.55;
  margin: 0;
}

/* 4-col link grid */
.vl-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vl-space-8);
}
@media (min-width: 640px) {
  .vl-footer__cols { grid-template-columns: repeat(4, 1fr); gap: var(--vl-space-6); }
}

.vl-footer__col-heading {
  font-family: var(--vl-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vl-text-subtle);
  margin: 0 0 18px;
}

.vl-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vl-footer__links li a {
  color: var(--vl-text-muted) !important;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--vl-dur-fast) var(--vl-ease-std);
}
.vl-footer__links li a:hover {
  color: var(--vl-text-primary) !important;
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Divider */
.vl-footer__divider {
  height: 1px;
  border: 0;
  margin: 56px 0 28px;
  background: linear-gradient(90deg, transparent, var(--vl-line-strong) 25%, var(--vl-line-strong) 75%, transparent);
  opacity: 0.5;
}

/* Bottom row */
.vl-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .vl-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.vl-footer__copy {
  font-size: 13px;
  color: var(--vl-text-subtle);
  margin: 0;
  letter-spacing: 0;
}
.vl-footer__copy a { color: var(--vl-text-muted) !important; }
.vl-footer__copy a:hover { color: var(--vl-text-primary) !important; }

.vl-footer__socials {
  display: flex;
  gap: 8px;
  align-items: center;
}
.vl-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--vl-radius-sm);
  color: var(--vl-text-subtle) !important;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--vl-line);
  transition: color var(--vl-dur-fast) var(--vl-ease-std),
              border-color var(--vl-dur-fast) var(--vl-ease-std),
              background-color var(--vl-dur-fast) var(--vl-ease-std),
              transform var(--vl-dur-fast) var(--vl-ease-std);
}
.vl-footer__social-link:hover {
  color: var(--vl-text-primary) !important;
  border-color: var(--vl-line-hover);
  background: rgba(129,140,248,0.05);
  transform: translateY(-1px);
}

/* We use a custom #vl-footer rendered via flatsome_before_footer.
   Suppress Flatsome's default footer-1 / footer-2 / absolute-footer entirely
   so we don't show duplicate content. */
.footer-widgets,
.footer-1,
.footer-2,
.absolute-footer { display: none !important; }
#footer.footer-wrapper { background: var(--vl-bg-surface) !important; border-top: 0 !important; }
#footer.footer-wrapper > #vl-footer { display: block; } /* keep custom footer visible */

/* -----------------------------------------------------------------------------
   21. MOTION — fade-up on scroll, gated by reduced-motion
   ----------------------------------------------------------------------------- */
[data-vl-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--vl-dur-xslow) var(--vl-ease-out),
              transform var(--vl-dur-xslow) var(--vl-ease-out);
  will-change: opacity, transform;
}
[data-vl-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via inline style or data-stagger attr */
[data-vl-animate][data-stagger="1"] { transition-delay: 80ms; }
[data-vl-animate][data-stagger="2"] { transition-delay: 160ms; }
[data-vl-animate][data-stagger="3"] { transition-delay: 240ms; }
[data-vl-animate][data-stagger="4"] { transition-delay: 320ms; }
[data-vl-animate][data-stagger="5"] { transition-delay: 400ms; }
[data-vl-animate][data-stagger="6"] { transition-delay: 480ms; }

/* Hero text — animate on load.
   Batch 2 #1 (2026-06-30): h1.vl-h1 removed from the opacity:0 group so the LCP
   element paints on first frame (was render-delayed ~180ms+animation, the lab
   mobile LCP bottleneck). Eyebrow/subhead/button still fade-up around it. */
section.vl-section.vl-hero .vl-eyebrow,
section.vl-section.vl-hero .vl-subhead,
section.vl-section.vl-hero .button {
  opacity: 0;
  animation: vl-fade-up var(--vl-dur-xslow) var(--vl-ease-out) forwards;
}
section.vl-section.vl-hero .vl-eyebrow { animation-delay: 100ms; }
section.vl-section.vl-hero .vl-subhead { animation-delay: 280ms; }
section.vl-section.vl-hero .button { animation-delay: 380ms; }
section.vl-section.vl-hero .button + .button { animation-delay: 440ms; }

@keyframes vl-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-vl-animate],
  section.vl-section.vl-hero .vl-eyebrow,
  section.vl-section.vl-hero h1.vl-h1,
  section.vl-section.vl-hero .vl-subhead,
  section.vl-section.vl-hero .button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   22. UTILITIES
   ----------------------------------------------------------------------------- */
.vl-text-center { text-align: center; }
.vl-text-muted  { color: var(--vl-text-muted); }
.vl-text-subtle { color: var(--vl-text-subtle); }
.vl-mt-4 { margin-top: var(--vl-space-4); }
.vl-mt-6 { margin-top: var(--vl-space-6); }
.vl-mt-8 { margin-top: var(--vl-space-8); }
.vl-mt-12 { margin-top: var(--vl-space-12); }
.vl-mb-4 { margin-bottom: var(--vl-space-4); }
.vl-mb-6 { margin-bottom: var(--vl-space-6); }
.vl-mb-8 { margin-bottom: var(--vl-space-8); }
.vl-mb-12 { margin-bottom: var(--vl-space-12); }

.vl-divider-glow {
  height: 1px; width: 100%; border: 0; margin: 0; opacity: 0.4;
  background: var(--vl-gradient-divider);
}

/* Focus ring — keyboard a11y */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--vl-accent-3);
  outline-offset: 3px;
  border-radius: var(--vl-radius-sm);
}

/* -----------------------------------------------------------------------------
   23. FLATSOME GLOBAL OVERRIDES (last in cascade)
   ----------------------------------------------------------------------------- */

/* Flatsome heading font assertion — h-font would otherwise win */
h1, h2, h3, h4, h5, h6 { font-family: var(--vl-font-display); }

/* Cancel Flatsome button shadow + uppercase defaults globally inside dark sections */
.vl-section .button { text-shadow: none !important; }

/* Flatsome's icon-box-text last-reset removes margin — put back what we need */
.vl-section .icon-box .icon-box-text.last-reset { margin: 0; }

/* When .col-inner has Flatsome's text-center class, our gap gracefully centers */
.col-inner.text-center > .vl-h2,
.col-inner.text-center > h2.vl-h2 { margin-left: auto; margin-right: auto; max-width: 720px; }

/* Restore container padding consistent to spec on inner cols at >=1024 */
@media (min-width: 1024px) {
  .vl-section .container { padding-left: 24px; padding-right: 24px; }
}

/* Outline white buttons (Flatsome) — neutralize */
.button.button-outline.color-white,
.vl-section .button.is-outline.white {
  background: rgba(255,255,255,0.02);
  color: var(--vl-text-primary) !important;
  border-color: rgba(255,255,255,0.18);
}
.button.button-outline.color-white:hover,
.vl-section .button.is-outline.white:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.42);
  color: var(--vl-text-primary) !important;
}

/* Mobile only refinements */
@media only screen and (max-width: 48em) {
  section.vl-section { padding: clamp(48px, 8vh, 80px) 20px !important; }
  section.vl-section.vl-hero { padding: clamp(72px, 14vh, 120px) 20px clamp(48px, 8vh, 72px) !important; }
  .vl-section .row + .row { margin-top: var(--vl-space-10); }
  .vl-section .pricing-table { padding: 28px 24px; }
  .vl-section .row > .col:nth-child(2) .pricing-table { transform: none; } /* don't scale on mobile */
  #header .nav > li.button-primary > a { margin-left: 0; }
}

/* === DA VINCI SIGNATURE: OPERATOR TAPE === */
.vl-tape{position:relative;width:100%;overflow:hidden;background:linear-gradient(180deg,rgba(5,5,7,1) 0%,rgba(10,10,15,1) 100%);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);padding:14px 0;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.vl-tape__track{display:inline-flex;white-space:nowrap;animation:vl-tape-scroll 60s linear infinite;will-change:transform;font-family:var(--vl-font-mono,"JetBrains Mono","Geist Mono",monospace);font-size:12px;letter-spacing:0.04em;color:var(--vl-text-subtle,#71717A);text-transform:uppercase;font-weight:500}
.vl-tape__track > span{padding-right:48px;display:inline-flex;align-items:center;gap:10px}
.vl-tape__track .vl-tape__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vl-accent-1,#818CF8);opacity:0.6;flex:none}
.vl-tape__track .vl-tape__live{color:#FCD34D;font-weight:700;letter-spacing:0.06em}
.vl-tape__track .vl-tape__live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FCD34D;margin-right:8px;box-shadow:0 0 0 0 rgba(252,211,77,0.7);animation:vl-pulse 1.6s ease-in-out infinite}
@keyframes vl-tape-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes vl-pulse{0%{box-shadow:0 0 0 0 rgba(252,211,77,0.7)}70%{box-shadow:0 0 0 12px rgba(252,211,77,0)}100%{box-shadow:0 0 0 0 rgba(252,211,77,0)}}
@media (prefers-reduced-motion:reduce){.vl-tape__track{animation:none;transform:translate3d(0,0,0)}.vl-tape__track .vl-tape__live::before{animation:none}}

/* =============================================================================
   13. PHASE 3 (2026-06-11) — WCAG AA + blog dark styling + focus + CTA hierarchy
   Backup: backups/style.css.<ts>. Ratios verified on #050507/#0A0A0F/#111118.
   ============================================================================= */

/* 13.1 Blog (archive + single) was rendering Flatsome light-theme greys on the
   dark background (title 2.73:1, category 2.18:1, meta 2.3:1). Bring posts
   into the design system. */
.entry-header .entry-title,
.entry-header .entry-title a,
h1.entry-title, h2.entry-title a {
  color: var(--vl-text-primary);
  font-family: var(--vl-font-display);
}
h2.entry-title a:hover { color: var(--vl-accent-1); }

.entry-category.is-xsmall a,
.entry-header .entry-category a {
  color: var(--vl-accent-1); /* #818CF8 = 6.83:1 on base */
  letter-spacing: 0.08em;
}
.entry-category.is-xsmall a:hover { color: var(--vl-accent-3); }

.entry-meta, .entry-meta a,
.posted-on, .posted-on a, .posted-on time,
.entry-author, .byline, .byline a {
  color: var(--vl-text-muted); /* #A1A1AA = 7.95:1 */
}
.entry-meta a:hover, .posted-on a:hover, .byline a:hover { color: var(--vl-text-soft); }

.entry-divider.is-divider { background-color: var(--vl-line-strong); }

.entry-content { color: var(--vl-text-soft); }
.entry-content a:not(.button) { color: var(--vl-accent-1); }
.entry-content a:not(.button):hover { color: var(--vl-accent-3); }
.entry-content table { border-color: var(--vl-line-strong); }
.entry-content table th { color: var(--vl-text-primary); background: var(--vl-bg-elevated); }
.entry-content table td {
  color: var(--vl-text-soft); /* was 3.55:1 grey */
  border-color: var(--vl-line);
}
.entry-content blockquote { color: var(--vl-text-muted); border-color: var(--vl-accent-1); }

/* "Continue reading" outline button on archive (was 3.15:1) */
a.more-link.button.is-outline {
  color: var(--vl-accent-1);
  border-color: var(--vl-line-hover);
  border-radius: var(--vl-radius-full);
}
a.more-link.button.is-outline:hover {
  color: var(--vl-bg-base);
  background: var(--vl-accent-1);
  border-color: var(--vl-accent-1);
}

/* 13.2 Visible keyboard focus, system-wide (there was none). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vl-accent-1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 13.3 CTA hierarchy — explicit primary (filled) vs secondary (outline).
   Applied via UX Builder class field; .vl-section .button base styles remain. */
.vl-btn--primary.button, a.button.vl-btn--primary,
.vl-section .vl-btn--primary.button {
  background: var(--vl-gradient-primary);
  color: #050507;
  border: 0;
  font-weight: 600;
  border-radius: var(--vl-radius-full);
  box-shadow: var(--vl-shadow-glow);
}
.vl-btn--primary.button:hover, a.button.vl-btn--primary:hover {
  filter: brightness(1.1);
  color: #050507;
  transform: translateY(-1px);
}
.vl-btn--secondary.button, a.button.vl-btn--secondary,
.vl-section .vl-btn--secondary.button {
  background: transparent;
  color: var(--vl-text-primary);
  border: 1px solid var(--vl-line-strong);
  border-radius: var(--vl-radius-full);
}
.vl-btn--secondary.button:hover, a.button.vl-btn--secondary:hover {
  border-color: var(--vl-line-hover);
  color: var(--vl-accent-1);
}

/* 13.4 Mobile: drop banner bg entrance animation (LCP render-delay). */
@media (max-width: 849px) {
  .bg-effect, .effect-fadeInUp, .effect-fadeIn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 13.5 Token bump note: --vl-text-subtle raised to #84848E (5.5:1 base,
   5.3:1 surface, 5.1:1 elevated — was #71717A at 4.21:1, AA fail). Edited
   in :root above. */

/* 13.6 Inline code/pre in articles — Flatsome light-theme defaults were
   unreadable on dark (1.31:1). */
.entry-content code, .entry-content kbd {
  background: var(--vl-bg-elevated);
  color: var(--vl-accent-3);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-sm);
  padding: 0.1em 0.4em;
  font-family: var(--vl-font-mono);
  font-size: 0.9em;
}
.entry-content pre {
  background: var(--vl-bg-elevated);
  color: var(--vl-text-soft);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-md);
  padding: var(--vl-space-4);
}
.entry-content pre code { background: transparent; border: 0; padding: 0; color: inherit; }

/* 13.7 Archive pagination on dark */
.page-numbers li .page-numbers,
nav.pagination .page-numbers {
  color: var(--vl-text-muted);
  border-color: var(--vl-line-strong);
}
.page-numbers li .page-numbers.current,
nav.pagination .page-numbers.current {
  background: var(--vl-accent-1);
  color: var(--vl-bg-base);
  border-color: var(--vl-accent-1);
}
.page-numbers li .page-numbers:hover { color: var(--vl-accent-1); border-color: var(--vl-line-hover); }

/* 13.8 Article body headings (were Flatsome dark-grey, 2.73:1 on dark bg) */
.entry-content h2, .entry-content h3, .entry-content h4,
.entry-content h5, .entry-content h6 {
  color: var(--vl-text-primary);
  font-family: var(--vl-font-display);
}

/* 13.9 Flatsome archive pagination uses .page-number (singular) */
.page-number, a.page-number, span.page-number {
  color: var(--vl-text-muted);
}
a.page-number:hover { color: var(--vl-accent-1); }
.page-number.current, span.page-number.current {
  background: var(--vl-accent-1);
  color: var(--vl-bg-base);
}

/* 13.10 Post footer: author box + prev/next nav on dark */
.author-box .author-name, h5.author-name { color: var(--vl-text-primary); }
.author-box .author-desc { color: var(--vl-text-muted); }
.navigation-post a, .nav-previous a, .nav-next a,
.navigation-post .nav-prev a, .navigation-post .nav-next a {
  color: var(--vl-text-muted);
}
.navigation-post a:hover, .nav-previous a:hover, .nav-next a:hover { color: var(--vl-accent-1); }

/* 13.11 Pagination — beat Flatsome's specificity */
.nav-pagination > li > .page-number,
.nav-pagination > li > span.page-number,
ul.page-numbers a.page-number, ul.page-numbers span.page-number {
  color: var(--vl-text-muted);
  border-color: var(--vl-line-strong);
}
.nav-pagination > li > .page-number:hover {
  background-color: var(--vl-accent-1);
  color: var(--vl-bg-base);
}
.nav-pagination > li > .page-number.current {
  background-color: var(--vl-accent-1);
  border-color: var(--vl-accent-1);
  color: var(--vl-bg-base);
}

/* =============================================================================
   14. PHASE 5 (2026-06-11) — Conversion: mobile CTA + CF7 feedback states
   ============================================================================= */

/* 14.1 Persistent mobile CTA pill (markup via wp_footer in functions.php) */
.vl-mobile-cta { display: none; }
@media (max-width: 849px) {
  .vl-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: var(--vl-space-4);
    bottom: var(--vl-space-4);
    z-index: 89; /* under Flatsome off-canvas/overlay (z-index 99+) */
    min-height: 44px;
    padding: 0 var(--vl-space-5);
    background: var(--vl-gradient-primary);
    color: #050507;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--vl-font-body);
    border-radius: var(--vl-radius-full);
    box-shadow: var(--vl-shadow-glow);
  }
  .vl-mobile-cta:hover, .vl-mobile-cta:focus { color: #050507; filter: brightness(1.08); }
  /* keep clear of off-canvas being open */
  .mfp-bg ~ .vl-mobile-cta, body.offcanvas-open .vl-mobile-cta { display: none; }
}

/* 14.2 CF7 validation feedback — AA contrast on dark */
.wpcf7-not-valid-tip {
  color: var(--vl-danger); /* #F87171 = 6.6:1 on base */
  font-size: 0.85em;
  margin-top: 4px;
}
.wpcf7 .wpcf7-not-valid { border-color: var(--vl-danger) !important; }
.wpcf7 form .wpcf7-response-output {
  border-radius: var(--vl-radius-md);
  padding: var(--vl-space-3) var(--vl-space-4);
  margin: var(--vl-space-4) 0 0;
  border-width: 1px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--vl-danger);
  color: var(--vl-danger);
  background: rgba(248, 113, 113, 0.08);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--vl-success);
  color: var(--vl-success); /* #4ADE80 = 11.4:1 on base */
  background: rgba(74, 222, 128, 0.08);
}

/* =============================================================================
   15. PHASE 6 QA fixes (2026-06-11)
   ============================================================================= */

/* 15.1 entry-category is now a <div> (child template override, heading-order
   fix) — recreate the h6/is-xsmall typography it relied on, plus 24px+
   tap-size for the links (LH target-size). */
.entry-category.is-xsmall {
  margin: 0 0 0.5em;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.entry-category.is-xsmall a {
  display: inline-block;
  padding: 6px 4px; /* lift link box to ≥24px CSS height */
}

/* 15.2 Links inside text blocks must not rely on color alone (LH/WCAG 1.4.1) */
.entry-content a:not(.button) { text-decoration: underline; text-underline-offset: 2px; }
.vl-footer__copy a { text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================
   16. PHASE 4 pre-asset (2026-06-12) — includes row + social-proof scaffolding
   ============================================================================= */

/* 16.1 Pricing "every engagement includes" row */
.vl-includes .icon-box {
  background: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-md);
  padding: var(--vl-space-5) var(--vl-space-4);
  height: 100%;
}
.vl-includes__item {
  color: var(--vl-text-soft);
  font-weight: 500;
  margin: 0;
}
.vl-includes__item::before {
  content: "✓";
  display: block;
  color: var(--vl-success);
  font-weight: 700;
  margin-bottom: var(--vl-space-2);
}

/* 16.2 Testimonials (ready for Phase 4 assets — markup template in
   plans/260611-1240-ui-ux-comprehensive-upgrade/phase-04-templates.md) */
.vl-testimonial {
  background: var(--vl-bg-elevated);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-lg);
  padding: var(--vl-space-8);
  height: 100%;
}
.vl-testimonial__quote {
  color: var(--vl-text-soft);
  font-size: 1.05em;
  line-height: 1.6;
  margin: 0 0 var(--vl-space-5);
}
.vl-testimonial__quote::before { content: "“"; color: var(--vl-accent-1); font-size: 1.6em; line-height: 0; margin-right: 2px; }
.vl-testimonial__name { color: var(--vl-text-primary); font-weight: 600; margin: 0; }
.vl-testimonial__role { color: var(--vl-text-muted); font-size: 0.875em; margin: 0; }

/* 16.3 Client/brand logo strip (grayscale, reveal on hover; AA-safe) */
.vl-logos { display: flex; flex-wrap: wrap; gap: var(--vl-space-8); align-items: center; justify-content: center; }
.vl-logos img {
  height: 32px; width: auto;
  filter: grayscale(1) brightness(2.2);
  opacity: 0.6;
  transition: filter var(--vl-dur-base) var(--vl-ease-std), opacity var(--vl-dur-base) var(--vl-ease-std);
}
.vl-logos img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vl-logos img { transition: none; } }


/* ============================================================
   Language switcher EN/DE (Polylang) — thêm 2026-07-27, ver 2.1.0
   ============================================================ */
.vl-lang-switch { display: flex; align-items: center; }
.vl-lang-switch__group { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; }
.vl-lang-switch__group a {
  display: inline-block;
  padding: 5px 9px;
  min-height: 24px;
  line-height: 1.4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 4px;
  color: var(--vl-text-subtle, #84848E);
  text-decoration: none;
}
.vl-lang-switch__group a:hover,
.vl-lang-switch__group a:focus-visible { color: #F4F4F5; background: rgba(255,255,255,.08); }
.vl-lang-switch__group a.is-active { color: #F4F4F5; background: rgba(255,255,255,.12); }
.nav-sidebar .vl-lang-switch__group { margin-left: 0; }