/* vt-content.css — canonical content+chrome system from homepage SSOT + s723 supplement (Lucide line icons, refined numbering). */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --vt-primary: #0b69c4;
      --vt-primary-dark: #084a8c;
      --vt-accent: #46b3ff;
      --vt-bg: #f7f9fc;
      --vt-text: #1f2933;
      --vt-text-muted: #4b5a6b;
      --vt-border: #dde5f2;
      --vt-card-bg: #ffffff;
      --vt-code-bg: #071d3b;
      --vt-code-text: #e5efff;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--vt-text);
      background: var(--vt-bg);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* Header (Mega Menu) */
header.vt-header{
  background: var(--vt-code-bg);
  color: white;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.vt-header .vt-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0.85rem 0;
  gap: 1.25rem;
}
.vt-logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  text-decoration:none;
}
.vt-logo span{ color:white; }
.vt-nav{
  display:flex;
  align-items:center;
  gap: 0.9rem;
  flex-wrap:wrap;
}
.vt-nav-item, .vt-nav-link{
  color: rgba(255,255,255,0.9);
  text-decoration:none;
  font-size: 0.92rem;
  background:none;
  border:0;
  cursor:pointer;
  font-family: inherit;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.vt-nav-item:hover, .vt-nav-link:hover{
  color: var(--vt-accent);
  background: rgba(255,255,255,0.06);
}
.vt-auth{
  display:flex;
  gap: 0.6rem;
  align-items:center;
  margin-left: 0.5rem;
}
.vt-btn{
  text-decoration:none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.vt-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.vt-btn-ghost{ color: white; background: transparent; }
.vt-btn-primary{ color: #071d3b; background: #ffffff; border-color: rgba(255,255,255,0.55); }
.vt-mega-wrap{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #ffffff;
  border-top: 1px solid var(--vt-border);
  box-shadow: 0 18px 40px rgba(15,23,42,0.16);
  display: none;
}
.vt-mega-wrap.open{ display:block; }
.vt-mega-inner{
  padding: 1.25rem 1.5rem 1.6rem;
}
.vt-mega-panel{ display:none; }
.vt-mega-panel.active{ display:block; }
.vt-mega-panel .mega-menu{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.vt-mega-panel h2{ display:none; } /* hide demo titles from the template */

/* Mega menu typography (scoped) */
.vt-mega-panel .menu-column{ display:flex; flex-direction:column; gap: 20px; }
.vt-mega-panel .menu-section{ display:flex; flex-direction:column; gap: 10px; }
.vt-mega-panel .section-title{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
}
.vt-mega-panel .menu-link{
  display:block;
  text-decoration:none;
  border: 1px solid var(--vt-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #ffffff;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.vt-mega-panel .menu-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  border-color: #c6d6f0;
}
.vt-mega-panel .link-title{
  font-weight: 650;
  color: #0f172a;
  display:flex;
  align-items:center;
  gap: 10px;
}
.vt-mega-panel .link-description{
  margin-top: 6px;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.45;
}
.vt-mega-panel .badge{
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,0.10);
}
.vt-mega-panel .badge-new{ background: #e0f2fe; color: #075985; border-color:#bae6fd; }
.vt-mega-panel .badge-soon{ background: #fef3c7; color:#92400e; border-color:#fde68a; }
.vt-mega-panel .external-link .link-title::after{
  content:"↗";
  margin-left: 6px;
  font-size: 0.85em;
  color: #64748b;
}
.vt-mega-panel .status-indicator{
  width: 10px; height: 10px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(2,6,23,0.12);
}
.vt-mega-panel .status-verify{ background: #22c55e; }
.vt-mega-panel .status-new{ background: #46b3ff; }

/* Hero */
    .hero {
      position: relative;
      padding: 5rem 0 4rem;
      text-align: center;
      overflow: hidden;
      min-height: 500px;
    }

    .hero-canvas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      line-height: 1.2;
      color: #ffffff;
      margin-bottom: 1.5rem;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .hero .subtitle {
      font-size: clamp(1.1rem, 2vw, 1.3rem);
      color: rgba(255, 255, 255, 0.9);
      max-width: 900px;
      margin: 0 auto 2rem;
      line-height: 1.6;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .hero .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
      margin-top: 2rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 1rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.85rem;
      font-weight: 500;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Section */
    section {
      padding: 4rem 0;
    }

    section.bg-white {
      background: white;
    }

    section.bg-strip {
      background: linear-gradient(90deg, #e1efff 0, #e6f5ff 40%, #f7f9fc 100%);
    }

    section h2 {
      font-size: clamp(1.8rem, 3vw, 2.2rem);
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 1rem;
      text-align: center;
    }

    section .lead {
      font-size: 1.1rem;
      color: var(--vt-text-muted);
      text-align: center;
      max-width: 800px;
      margin: 0 auto 3rem;
      line-height: 1.7;
    }

    /* Cards */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .card {
      background: var(--vt-card-bg);
      border: 1px solid var(--vt-border);
      border-radius: 1rem;
      padding: 1.75rem;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      transition: all 0.3s ease;
    }

    .card:hover {
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
      transform: translateY(-2px);
    }

    .card h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #0f172a;
      margin-bottom: 0.75rem;
    }

    .card p {
      color: var(--vt-text-muted);
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    .card ul {
      margin: 0.75rem 0;
      padding-left: 1.25rem;
      color: var(--vt-text-muted);
      font-size: 0.95rem;
    }

    .card ul li {
      margin-bottom: 0.5rem;
    }

    .card a {
      color: var(--vt-primary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .card a:hover {
      color: var(--vt-primary-dark);
      text-decoration: underline;
    }

    .card code {
      background: #f1f5f9;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      font-size: 0.85em;
      color: #0f172a;
      font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    }

    /* Highlight Box */
    .highlight-box {
      background: white;
      border: 2px solid var(--vt-primary);
      border-radius: 1rem;
      padding: 2rem;
      margin: 2rem 0;
    }

    .highlight-box h3 {
      color: var(--vt-primary);
      margin-bottom: 1rem;
    }

    /* Code Block */
    .code-block {
      background: var(--vt-code-bg);
      color: var(--vt-code-text);
      padding: 1.25rem;
      border-radius: 8px;
      overflow-x: auto;
      font-family: 'SF Mono', Consolas, 'Courier New', monospace;
      font-size: 0.85rem;
      line-height: 1.5;
      margin: 1rem 0;
    }

    /* Feature List */
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .feature-item {
      display: flex;
      gap: 1rem;
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--vt-primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    .feature-content h4 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #0f172a;
    }

    .feature-content p {
      color: var(--vt-text-muted);
      font-size: 0.95rem;
    }

    /* CTA Section */
    .cta-section {
      text-align: center;
      padding: 4rem 0;
      background: linear-gradient(135deg, var(--vt-primary), var(--vt-accent));
      color: white;
    }

    .cta-section h2 {
      color: white;
      margin-bottom: 1rem;
    }

    .cta-section p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.95;
    }

    .cta-button {
      display: inline-block;
      padding: 0.875rem 2rem;
      background: white;
      color: var(--vt-primary);
      text-decoration: none;
      border-radius: 999px;
      font-weight: 600;
      font-size: 1.05rem;
      transition: all 0.3s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }

    /* Footer (Structured) */
footer{
  background: var(--vt-code-bg);
  color: rgba(255,255,255,0.82);
  padding: 3rem 0 2.2rem;
  font-size: 0.92rem;
}
footer a{ color: rgba(255,255,255,0.86); text-decoration:none; }
footer a:hover{ color: white; text-decoration: none; }  /* REMOVED UNDERLINE - only gradient line remains */

.footer-content{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items:start;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.footer-logo .logo-icon svg{ display:block; }
.footer-logo-text{
  font-weight: 800;
  letter-spacing: 0.10em;
  color: white;
}
.footer-tagline{
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
}
.footer-description{ color: rgba(255,255,255,0.70); line-height: 1.6; }
.footer-column .footer-section-title,
.footer-brand .footer-section-title{
  font-size: 0.75rem;
  font-weight: 700;  /* BOLD */
  letter-spacing: 0.12em;
  color: #667eea;  /* BLUE COLOR LIKE FOOTER1 */
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.footer-link{
  color: rgba(255,255,255,0.85);  /* WHITER COLOR */
  text-decoration:none !important;  /* NO UNDERLINE */
  font-size: 14px;
  font-weight: 500;  /* MEDIUM WEIGHT FOR BETTER READABILITY */
  display:flex;
  align-items:center;
  gap: 6px;
  transition: all 0.2s ease;
}
.footer-link:hover{
  text-decoration:none !important;  /* NO UNDERLINE ON HOVER */
}
.social-links{ display:flex; gap: 10px; margin-top: 6px; }
.social-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  font-weight: 800;
  text-decoration:none;
}
.social-icon:hover{ border-color: rgba(70,179,255,0.6); color: var(--vt-accent); text-decoration:none; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 1rem;
  color: rgba(255,255,255,0.62);

  max-width: 1200px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;}

/* Responsive */
    @media (max-width: 768px) {
      .vt-nav{ gap: 0.5rem; }
      .vt-auth{ width: 100%; justify-content:flex-start; }
      .vt-mega-panel .mega-menu{ grid-template-columns: 1fr; }

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

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

      section {
        padding: 3rem 0;
      }
    }
  

/* --- Layout fixes (Jan 2026) --- */
.vt-mega-wrap{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 2rem));
  border-radius: 16px;
  border: 1px solid var(--vt-border);
  overflow: hidden;
}
@media (max-width: 900px){
  .vt-mega-wrap{ width: calc(100% - 1rem); }
}

/* Footer: add side margins + force one item per row */
footer .footer-content{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
footer .footer-link{
  display: block;
  width: 100%;
  margin: 0.35rem 0;
}


/* Social icon + URL stacked */
.social-links{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items:flex-start;
}
.social-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.35rem;
}
.social-url{
  font-size: 0.78rem;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  max-width: 220px;
  word-break: break-all;
}
.social-url:hover{ text-decoration: underline; }


/* === Fixes (Jan 2026) === */

/* Header: widen container and keep nav + auth on one row */
.vt-header .container{ max-width: 1520px; } .vt-container{ max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .vt-header .vt-container{ max-width: 1520px; }
.vt-header .vt-header-inner{ flex-wrap: nowrap; }
.vt-nav{
  flex-wrap: nowrap;
  flex: 1 1 auto;
  justify-content: right;
  gap: 0.75rem;
  min-width: 0;
}
.vt-auth{ flex-wrap: nowrap; white-space: nowrap; }

/* Hide any leftover "NEW" / badge markers (if present) */
.vt-badge, .nav-badge, .menu-badge, .badge-new, .vt-new-badge{ display:none !important; }

/* Footer: constrain the very bottom row like the rest of the footer */
footer .footer-bottom{
  max-width: 1500px;
  margin: 2.2rem auto 0;
  padding: 1.3rem 1.25rem 1.25rem;
}

/* Footer: improve bottom-row alignment */
footer .footer-legal-links{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Footer: add more vertical breathing room around section headings */
footer .footer-section{ margin-top: 1.25rem; }
footer .footer-column .footer-section:first-child{ margin-top: 0; }
footer .footer-column .footer-section-title,
footer .footer-brand .footer-section-title{ margin-bottom: 22px; }

/* Footer: social icons only (no URL text below icons) */
footer .social-item{ display:flex; flex-direction: column; align-items:flex-start; }

/* ==========================================
   FOOTER ENHANCEMENTS - COOL EFFECTS
   ========================================== */

/* Enhanced Footer Link Hover Effect - THE SLIDING EFFECT */
.footer-link {
    color: rgba(255,255,255,0.9) !important;  /* WHITER COLOR */
    font-weight: 500 !important;  /* MEDIUM-BOLD */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-left: 0 !important;
    position: relative;
}

.footer-link:hover {
    padding-left: 8px !important;  /* SLIDE RIGHT ON HOVER */
    color: white !important;  /* PURE WHITE ON HOVER */
    font-weight: 600 !important;  /* BOLDER ON HOVER */
}

.footer-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

.footer-link:hover::before {
    width: calc(100% - 8px);
}

/* Enhanced Social Icon Lift Effect */
.social-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.social-icon:hover {
    transform: translateY(-4px) !important;  /* LIFT UP EFFECT */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3) !important;
}

/* Enhanced Status Dots with Glow & Pulse */
.status-dot {
    position: relative;
}

.status-active {
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6) !important;
    animation: pulse-green 2s ease-in-out infinite !important;
}

.status-coming {
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.6) !important;
    animation: pulse-yellow 2s ease-in-out infinite !important;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 8px rgba(40, 167, 69, 0.6); }
    50% { box-shadow: 0 0 12px rgba(40, 167, 69, 0.8); }
}

@keyframes pulse-yellow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.6); }
    50% { box-shadow: 0 0 12px rgba(255, 193, 7, 0.8); }
}

/* Enhanced External Link Arrow Animation */
.external-icon {
    transition: all 0.25s ease !important;
    display: inline-block;
}

.footer-link:hover .external-icon {
    transform: translate(3px, -3px) !important;  /* DIAGONAL MOVEMENT */
    opacity: 1 !important;
}

/* Footer Top Border Gradient */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.5) 50%, 
        transparent 100%);
}

/* Enhanced Section Titles with Animated Underline */
.footer-section-title {
    position: relative;
    padding-bottom: 8px;
    color: #667eea !important;  /* BLUE COLOR */
    font-weight: 700 !important;  /* BOLD */
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

.footer-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

.footer-section:hover .footer-section-title::after {
    width: 40px;
}

/* Enhanced Footer Legal Links */
.footer-legal-link {
    transition: all 0.2s ease !important;
    position: relative;
    text-decoration: none !important;  /* NO UNDERLINE - only gradient line */
}

.footer-legal-link:hover {
    text-decoration: none !important;  /* NO UNDERLINE ON HOVER */
}

.footer-legal-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #667eea, #764ba2);  /* GRADIENT instead of white */
    transition: width 0.3s ease;
}

.footer-legal-link:hover::after {
    width: 100%;
}

/* Coming Soon Links - No Interaction */
.footer-link.coming-soon:hover {
    padding-left: 0 !important;
    color: rgba(255,255,255,0.8) !important;
}

/* Logo Icon Rotation Effect */
.logo-icon {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.footer-logo:hover .logo-icon {
    transform: rotate(10deg) scale(1.1);
}

/* Mobile Enhancements */
@media (max-width: 640px) {
    .footer-link:hover {
        padding-left: 12px !important;  /* MORE VISIBLE ON MOBILE */
    }
    
    .social-icon:hover {
        transform: translateY(-6px) !important;  /* BIGGER LIFT ON MOBILE */
    }
}

/* Smooth Focus States for Accessibility */
.footer-link:focus,
.social-icon:focus,
.footer-legal-link:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 4px !important;
    border-radius: 4px;
}

/* Fade-in animation for sections */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ripple animation */
@keyframes ripple-animation {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================== */


/* ============================================================
   vt-content.css SUPPLEMENT (s723) — reusable inner-page parts,
   open-source Lucide line icons, refined numbering. Canonical tokens.
   ============================================================ */
.hero{ background:#071d3b; }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; margin-bottom:1.25rem;
  border-radius:999px; font-size:.85rem; font-weight:600;
  background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.95);
  border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(10px); }
.eyebrow svg{ width:16px; height:16px; stroke-width:2; }
section .eyebrow{ background:rgba(11,105,196,0.08); color:var(--vt-primary); border-color:rgba(11,105,196,0.18); backdrop-filter:none; }
.hero .eyebrow{ background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.95); border-color:rgba(255,255,255,0.22); }

.section-subtitle{ max-width:760px; margin:0 auto 1rem; text-align:center; color:var(--vt-text-muted); font-size:1.08rem; line-height:1.65; }
.cta-section .section-subtitle, .cta-section p{ color:rgba(255,255,255,0.92); }

.hero-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin-top:2.5rem; }
.hero-stats .stat{ display:flex; flex-direction:column; align-items:center; }
.stat-number{ font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; line-height:1; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.stat-label{ margin-top:.5rem; font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,0.78); }

/* plain, flat icon tile with an open-source line pictogram */
.card-icon{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; background:rgba(11,105,196,.07); color:var(--vt-primary); }
.card-icon svg{ width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none; }

.vt-badge{ display:inline-block; margin-bottom:.85rem; padding:.3rem .8rem; border-radius:999px; font-size:.8rem; font-weight:700;
  color:#0f7a3d; background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.22); }

.vt-steps{ display:flex; flex-direction:column; gap:1.25rem; margin:2rem auto 0; max-width:880px; }
.vt-step{ display:flex; gap:1.25rem; text-align:left; background:var(--vt-card-bg); border:1px solid var(--vt-border);
  border-radius:1rem; padding:1.5rem 1.75rem; box-shadow:0 4px 12px rgba(15,23,42,.04); }
/* simple, stylish ring number */
.step-num{ flex-shrink:0; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.02rem; color:var(--vt-primary); background:#fff; border:2px solid var(--vt-primary); }
.step-body{ flex:1; }
.step-body h3{ font-size:1.2rem; font-weight:600; color:#0f172a; margin:0 0 .35rem; display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem; }
.step-dur{ font-size:.78rem; font-weight:700; color:var(--vt-primary); background:rgba(11,105,196,.08); border:1px solid rgba(11,105,196,.16); padding:.15rem .6rem; border-radius:999px; }
.step-body p{ color:var(--vt-text-muted); margin:.25rem 0 0; line-height:1.6; }
.step-body ul{ margin:.6rem 0 0; padding-left:1.2rem; color:var(--vt-text-muted); font-size:.95rem; }
.step-body ul li{ margin:.2rem 0; }

.cta-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.75rem; }
.cta-button.secondary, .cta-button-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7); box-shadow:none; }
.cta-button.secondary:hover, .cta-button-ghost:hover{ background:rgba(255,255,255,.12); }

.card ul li{ margin:.25rem 0; }

/* inline pictogram (Lucide) used inside running text / lists / h3 */
.i-inline{ display:inline-flex; vertical-align:-.18em; color:var(--vt-primary); }
.i-inline svg{ width:1.05em; height:1.05em; stroke-width:2; }
.card h3 svg{ width:18px; height:18px; vertical-align:-3px; margin-right:.35rem; color:var(--vt-primary); }
.card .card-icon + h3{ margin-top:0; }

/* bootstrap-icon converted to lucide inside a card-icon chip */
.card-icon .i-inline{ color:inherit; }
.card-icon .i-inline svg{ width:22px; height:22px; }
/* simple form styling for contact / tool pages on the new design */
.vt-form{ max-width:640px; margin:2rem auto 0; display:flex; flex-direction:column; gap:1rem; text-align:left; }
.vt-form label{ font-weight:600; color:var(--vt-text); font-size:.95rem; margin-bottom:.3rem; display:block; }
.vt-form input, .vt-form textarea, .vt-form select{ width:100%; padding:.7rem .9rem; border:1px solid var(--vt-border);
  border-radius:.6rem; font:inherit; color:var(--vt-text); background:#fff; }
.vt-form input:focus, .vt-form textarea:focus{ outline:none; border-color:var(--vt-primary); box-shadow:0 0 0 3px rgba(11,105,196,.12); }
input, textarea, select{ font-family:inherit; }

/* ensure any hero inner container sits above the particle canvas */
.hero .container{ position:relative; z-index:2; }
/* blog / article layout */
.vt-article{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2.5rem; max-width:1200px; margin:0 auto; text-align:left; align-items:start; }
@media(max-width:880px){ .vt-article{ grid-template-columns:1fr; } }
.vt-sidebar{ display:flex; flex-direction:column; gap:1rem; }
@media(min-width:881px){ .vt-sidebar{ position:sticky; top:96px; } }
.vt-prose{ font-size:1.05rem; line-height:1.75; color:var(--vt-text); }
.vt-prose h2{ font-size:1.55rem; margin:2rem 0 .75rem; color:#0f172a; text-align:left; }
.vt-prose h3{ font-size:1.22rem; margin:1.5rem 0 .5rem; color:#0f172a; }
.vt-prose p{ margin:0 0 1rem; }
.vt-prose ul,.vt-prose ol{ margin:0 0 1.1rem 1.25rem; }
.vt-prose li{ margin:.35rem 0; }
.vt-prose a{ color:var(--vt-primary); }
.vt-prose blockquote{ border-left:3px solid var(--vt-primary); margin:1.5rem 0; padding:.5rem 1.25rem; color:var(--vt-text-muted); background:rgba(11,105,196,.04); border-radius:0 .5rem .5rem 0; }
.article-meta{ display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:center; margin-top:1.25rem; }
.article-meta-item{ display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.85); font-size:.9rem; }
.article-meta-item svg{ width:16px; height:16px; }
.info-box{ background:rgba(11,105,196,.06); border:1px solid rgba(11,105,196,.16); border-left:3px solid var(--vt-primary); border-radius:.6rem; padding:1.1rem 1.25rem; margin:1.5rem 0; }
.post-card{ display:block; text-decoration:none; color:inherit; }
.post-card .post-meta{ color:var(--vt-text-muted); font-size:.82rem; margin-bottom:.5rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.post-card h3{ color:#0f172a; }
.post-card .read-more{ color:var(--vt-primary); font-weight:600; font-size:.9rem; }

/* whitepaper-style posts (article-container / header.hero) */
.article-container{ max-width:840px; margin:0 auto; padding:0 1.5rem; }
.article-container > .hero{ margin:0 -1.5rem 2.5rem; }
.hero h1.article-title{ }
.article-category{ color:rgba(255,255,255,.85); font-size:.9rem; }
.article-byline{ display:flex; align-items:center; gap:.75rem; margin-top:1.25rem; color:rgba(255,255,255,.85); font-size:.9rem; }
.article-byline .author-info{ text-align:left; line-height:1.3; }
.article-byline strong{ color:#fff; }

/* fix: whitepaper posts use <header class="hero"> with content as DIRECT children
   (no .container wrapper) — lift them above the particle canvas and force light text */
.hero > *:not(.hero-canvas){ position:relative; z-index:2; }  /* exclude canvas: it must stay position:absolute behind the text (s736) */
.hero .article-meta{ justify-content:center; }
.hero h1.article-title{ font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.2;
  color:#fff; margin:0 auto 1.5rem; max-width:900px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero .article-category{ color:rgba(255,255,255,.85); }
.hero .article-byline{ color:rgba(255,255,255,.85); justify-content:center; }
.hero .article-byline strong, .hero .article-byline span{ color:rgba(255,255,255,.9); }
.hero .author-info{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; }
.hero .author-avatar{ width:32px; height:32px; border-radius:50%; background:var(--vt-accent);
  color:#06243f; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; }

/* ============================================================
   Legal & policy pages — privacy/terms/cookie use .vt-* classes,
   trust/policy uses .policy-* classes. (s727)
   ============================================================ */
.vt-hero, .policy-hero{
  background:linear-gradient(160deg,#071d3b 0%, #0b3a6b 100%);
  color:#fff; text-align:center; padding:4.5rem 1.5rem 3.5rem;
}
.vt-hero h1, .policy-hero h1{ font-size:clamp(2rem,4vw,2.8rem); font-weight:800; margin:0 0 1rem; color:#fff; line-height:1.2; }
.vt-hero p, .policy-hero p{ color:rgba(255,255,255,.88); max-width:760px; margin:0 auto; line-height:1.6; font-size:1.08rem; }
.vt-hero .vt-container, .policy-hero-inner{ max-width:860px; margin:0 auto; }
.vt-hero .note, .policy-hero .note{ color:rgba(255,255,255,.72); font-size:.85rem; margin-top:1rem; }

.vt-main, .policy-content{ padding:3rem 1.5rem 4rem; }
.vt-container{ max-width:1180px; margin:0 auto; }
.vt-legal, .policy-content{ max-width:860px; margin:0 auto; font-size:1.02rem; line-height:1.75; color:var(--vt-text); text-align:left; }
.vt-legal h2, .policy-content h2{ font-size:1.42rem; color:#0f172a; margin:2.2rem 0 .6rem; }
.vt-legal h3, .policy-content h3{ font-size:1.12rem; color:#0f172a; margin:1.5rem 0 .4rem; }
.vt-legal p, .policy-content p{ margin:0 0 1rem; }
.vt-legal ul, .vt-legal ol, .policy-content ul, .policy-content ol{ margin:0 0 1.1rem 1.25rem; }
.vt-legal li, .policy-content li{ margin:.35rem 0; }
.vt-legal a, .policy-content a{ color:var(--vt-primary); }
.vt-legal strong, .policy-content strong{ color:#0f172a; }
.vt-callout{ background:rgba(11,105,196,.06); border:1px solid rgba(11,105,196,.16);
  border-left:3px solid var(--vt-primary); border-radius:.6rem; padding:1.1rem 1.25rem; margin:0 0 2rem; }

/* trust/policy specifics: content cards + key/value rows + grid + note */
.policy-content .card{ text-align:left; margin-bottom:1.25rem; }
.policy-content .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.policy-content .kv{ display:grid; grid-template-columns:170px 1fr; gap:.4rem .9rem; font-size:.95rem; margin:.35rem 0; }
.policy-content .kv .k{ color:var(--vt-text-muted); font-weight:600; }
.policy-content .note{ color:var(--vt-text-muted); font-size:.88rem; }

/* fix: whitepaper posts wrapped .hero inside .article-container (840px) -> boxed band.
   Make .article-container a transparent full-width wrapper so .hero bleeds edge-to-edge
   like the homepage hero; constrain only the prose column below. (s728) */
.article-container{ max-width:none; margin:0; padding:0; }
.article-container > .hero{ width:auto; margin:0 0 2.5rem; padding:5rem 1.5rem 4rem; }
/* (removed s731: this blanket cap also hit the absolute .hero-canvas, shrinking it to a ~900px strip) */
.article-container > .vt-prose{ max-width:1200px; margin:0 auto; padding:0 1.5rem 1rem; }

/* ===== BLOG ARTICLE TEMPLATE — unify hero + body to the site .container (1200px) (s731) =====
   Hero text lives in .container.hero-content (1200). Body .vt-prose becomes the same 1200
   centered column so meta/title/subtitle/body share identical left+right edges. The
   .hero-canvas stays full-bleed (position:absolute; width/height:100%) — never capped. */
.vt-prose{ max-width:860px; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; box-sizing:border-box; }