/* ==========================================================================
   VERITAX ENTERPRISE THEME — EXTENDED COMPONENTS & TEMPLATES (main.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION & INTERACTIVE ARCHITECTURE CARD
   -------------------------------------------------------------------------- */
.vt-hero {
  position: relative;
  padding-top: 72px;
  padding-bottom: 96px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(37, 99, 235, 0.11), transparent 70%),
    radial-gradient(circle at 88% 20%, rgba(6, 182, 212, 0.08), transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid var(--vt-border-subtle);
  overflow: hidden;
}

.vt-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 41, 66, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 41, 66, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
}

.vt-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.vt-hero__title {
  margin-bottom: 22px;
  color: var(--vt-navy-900);
}

.vt-hero__title span.vt-gradient-text {
  background: linear-gradient(135deg, var(--vt-navy-900) 0%, var(--vt-blue-600) 65%, var(--vt-cyan-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vt-hero__subtitle {
  font-size: clamp(1.0625rem, 1.2vw + 0.4rem, 1.25rem);
  color: var(--vt-text-secondary);
  margin-bottom: 34px;
  max-width: 620px;
}

.vt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.vt-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--vt-border-subtle);
}

.vt-metric__value {
  font-family: var(--vt-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--vt-navy-900);
  line-height: 1.15;
}

.vt-metric__label {
  font-size: 0.8125rem;
  color: var(--vt-text-muted);
  margin-top: 4px;
}

/* Enterprise Architecture Visual Card */
.vt-arch-card {
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-xl);
  padding: 28px;
  box-shadow: var(--vt-shadow-lg);
  position: relative;
}

.vt-arch-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-arch-card__dots {
  display: flex;
  gap: 6px;
}

.vt-arch-card__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-border-default);
}

.vt-arch-card__dots span:nth-child(1) { background: #F87171; }
.vt-arch-card__dots span:nth-child(2) { background: #FBBF24; }
.vt-arch-card__dots span:nth-child(3) { background: #34D399; }

.vt-arch-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vt-emerald-600);
  background: var(--vt-emerald-50);
  padding: 4px 10px;
  border-radius: var(--vt-radius-full);
}

.vt-arch-card__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vt-emerald-600);
}

.vt-arch-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-arch-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--vt-radius-md);
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
  transition: transform var(--vt-transition-fast), border-color var(--vt-transition-fast);
}

.vt-arch-node:hover {
  transform: translateX(4px);
  border-color: var(--vt-blue-500);
  background: #FFFFFF;
}

.vt-arch-node__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-arch-node__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--vt-blue-50);
  color: var(--vt-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vt-arch-node__icon svg {
  width: 20px;
  height: 20px;
}

.vt-arch-node__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--vt-navy-900);
}

.vt-arch-node__sub {
  font-size: 0.78rem;
  color: var(--vt-text-muted);
}

.vt-arch-node__tag {
  font-family: var(--vt-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vt-blue-600);
  background: var(--vt-blue-50);
  padding: 4px 8px;
  border-radius: 6px;
}

.vt-arch-card__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--vt-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--vt-text-muted);
}

/* --------------------------------------------------------------------------
   2. PAGE HERO & BREADCRUMBS
   -------------------------------------------------------------------------- */
.vt-page-hero {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--vt-border-subtle);
  padding: 56px 0 64px;
}

.vt-page-hero__inner {
  max-width: 820px;
}

.vt-page-hero h1 {
  margin-bottom: 16px;
}

.vt-breadcrumbs {
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--vt-text-muted);
}

.vt-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vt-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vt-breadcrumbs__item a {
  color: var(--vt-text-muted);
}

.vt-breadcrumbs__item a:hover {
  color: var(--vt-blue-600);
}

.vt-breadcrumbs__sep {
  color: var(--vt-border-default);
}

.vt-breadcrumbs__current {
  color: var(--vt-navy-900);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. WORK METHODOLOGY STEPS & BENTO GRID
   -------------------------------------------------------------------------- */
.vt-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: vt-step;
}

.vt-step-card {
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-lg);
  padding: 28px;
  position: relative;
  transition: all var(--vt-transition-base);
}

.vt-step-card:hover {
  border-color: var(--vt-blue-600);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-3px);
}

.vt-step-card__num {
  font-family: var(--vt-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vt-blue-600);
  background: var(--vt-blue-50);
  border: 1px solid var(--vt-blue-100);
  padding: 4px 10px;
  border-radius: var(--vt-radius-full);
  display: inline-block;
  margin-bottom: 16px;
}

.vt-step-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.vt-step-card p {
  font-size: 0.9rem;
  color: var(--vt-text-secondary);
}

/* Bento Grid (Digital Transformation & AI Showcase) */
.vt-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.vt-bento__item {
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-lg);
  padding: 32px;
  box-shadow: var(--vt-shadow-xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vt-bento__item--span-7 { grid-column: span 7; }
.vt-bento__item--span-5 { grid-column: span 5; }
.vt-bento__item--span-6 { grid-column: span 6; }
.vt-bento__item--span-4 { grid-column: span 4; }
.vt-bento__item--span-8 { grid-column: span 8; }

.vt-bento__item--dark {
  background: linear-gradient(135deg, var(--vt-navy-900) 0%, var(--vt-navy-800) 100%);
  color: #FFFFFF;
  border-color: var(--vt-navy-800);
}

.vt-bento__item--dark h3 {
  color: #FFFFFF;
}

.vt-bento__item--dark p {
  color: rgba(255, 255, 255, 0.8);
}

.vt-kpi-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.vt-kpi-box {
  padding: 16px;
  border-radius: var(--vt-radius-md);
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
}

.vt-bento__item--dark .vt-kpi-box {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.vt-kpi-box strong {
  display: block;
  font-family: var(--vt-font-display);
  font-size: 1.5rem;
  color: var(--vt-blue-600);
}

.vt-bento__item--dark .vt-kpi-box strong {
  color: #60A5FA;
}

.vt-kpi-box span {
  font-size: 0.8125rem;
  color: var(--vt-text-muted);
}

.vt-bento__item--dark .vt-kpi-box span {
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   4. SERVICES CARDS & SINGLE SERVICE DETAIL
   -------------------------------------------------------------------------- */
.vt-service-benefits-preview {
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--vt-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-service-benefits-preview li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.825rem;
  color: var(--vt-text-secondary);
}

.vt-service-benefits-preview li svg {
  width: 15px;
  height: 15px;
  color: var(--vt-blue-600);
  flex-shrink: 0;
}

.vt-service-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

.vt-service-sidebar {
  position: sticky;
  top: calc(var(--vt-header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vt-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.vt-tech-pill {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--vt-radius-sm);
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-navy-900);
}

/* Interactive FAQ Accordion */
.vt-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-faq-item {
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-md);
  background: var(--vt-bg-elevated);
  overflow: hidden;
  transition: border-color var(--vt-transition-fast);
}

.vt-faq-item.is-open {
  border-color: var(--vt-blue-600);
  box-shadow: var(--vt-shadow-xs);
}

.vt-faq-trigger {
  width: 100%;
  background: none;
  border: 0;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--vt-font-display);
  font-size: 1.025rem;
  font-weight: 700;
  color: var(--vt-navy-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.vt-faq-trigger svg {
  width: 20px;
  height: 20px;
  color: var(--vt-blue-600);
  flex-shrink: 0;
  transition: transform var(--vt-transition-fast);
}

.vt-faq-item.is-open .vt-faq-trigger svg {
  transform: rotate(180deg);
}

.vt-faq-panel {
  padding: 0 24px 20px;
  color: var(--vt-text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
  border-top: 1px solid var(--vt-border-subtle);
  padding-top: 16px;
}

.vt-faq-panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   5. AI TOOLS DIRECTORY & INTERACTIVE FILTER BAR
   -------------------------------------------------------------------------- */
.vt-ai-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-radius: var(--vt-radius-md);
  background: var(--vt-blue-50);
  border: 1px solid var(--vt-blue-100);
  color: var(--vt-navy-800);
  font-size: 0.875rem;
  margin-bottom: 28px;
}

.vt-filter-bar {
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-lg);
  padding: 24px;
  box-shadow: var(--vt-shadow-xs);
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vt-filter-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vt-search-box {
  position: relative;
  flex: 1 1 320px;
}

.vt-search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--vt-text-muted);
  pointer-events: none;
}

.vt-search-box input {
  padding-left: 42px;
}

.vt-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vt-filter-tab {
  font-family: var(--vt-font-sans);
  font-size: 0.825rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--vt-radius-full);
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-subtle);
  color: var(--vt-text-secondary);
  cursor: pointer;
  transition: all var(--vt-transition-fast);
}

.vt-filter-tab:hover {
  border-color: var(--vt-blue-600);
  color: var(--vt-blue-600);
}

.vt-filter-tab.is-active {
  background: var(--vt-navy-900);
  color: #FFFFFF;
  border-color: var(--vt-navy-900);
}

.vt-ai-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.vt-ai-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-ai-card__logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--vt-blue-50) 0%, #E0F2FE 100%);
  border: 1px solid var(--vt-blue-100);
  color: var(--vt-blue-600);
  font-family: var(--vt-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.vt-ai-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-ai-card__features {
  margin: 12px 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--vt-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-ai-card__features li {
  font-size: 0.825rem;
  color: var(--vt-text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.vt-ai-card__features li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vt-blue-600);
  flex-shrink: 0;
}

.vt-ai-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.vt-ai-card__tag {
  font-size: 0.72rem;
  color: var(--vt-text-muted);
  background: var(--vt-bg-subtle);
  padding: 3px 8px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   6. PORTFOLIO / PROJECTS & BEFORE-AFTER COMPARISON
   -------------------------------------------------------------------------- */
.vt-project-card__media {
  margin: -32px -32px 22px;
  border-bottom: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-subtle);
  border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}

.vt-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-project-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%);
  color: #FFFFFF;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vt-ba-compare {
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.vt-ba-compare__tabs {
  display: inline-flex;
  background: var(--vt-bg-muted);
  padding: 3px;
  border-radius: var(--vt-radius-sm);
  margin-bottom: 12px;
}

.vt-ba-compare__btn {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  color: var(--vt-text-muted);
  cursor: pointer;
}

.vt-ba-compare__btn.is-active {
  background: #FFFFFF;
  color: var(--vt-navy-900);
  box-shadow: var(--vt-shadow-xs);
}

.vt-ba-compare__pane[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   7. BLOG ARCHIVE, SINGLE POST, TOC & SHARE BAR
   -------------------------------------------------------------------------- */
.vt-post-card__thumb {
  margin: -32px -32px 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--vt-radius-lg) var(--vt-radius-lg) 0 0;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--vt-text-muted);
  margin-bottom: 12px;
}

.vt-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

/* Editorial Content (Gutenberg Compatible) */
.vt-prose {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--vt-text-secondary);
}

.vt-prose h2,
.vt-prose h3,
.vt-prose h4 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--vt-navy-900);
}

.vt-prose p,
.vt-prose ul,
.vt-prose ol,
.vt-prose blockquote {
  margin-bottom: 1.4em;
}

.vt-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.vt-prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.vt-prose li {
  margin-bottom: 0.5em;
}

.vt-prose blockquote {
  padding: 20px 24px;
  border-left: 4px solid var(--vt-blue-600);
  background: var(--vt-bg-subtle);
  border-radius: 0 var(--vt-radius-md) var(--vt-radius-md) 0;
  font-style: italic;
  color: var(--vt-navy-900);
}

.vt-prose pre,
.vt-prose code {
  font-family: var(--vt-font-mono);
  font-size: 0.9em;
}

.vt-prose pre {
  background: var(--vt-navy-900);
  color: #F8FAFC;
  padding: 20px;
  border-radius: var(--vt-radius-md);
  overflow-x: auto;
  margin-bottom: 1.5em;
}

.vt-toc-box {
  position: sticky;
  top: calc(var(--vt-header-height) + 24px);
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-lg);
  padding: 24px;
}

.vt-toc-box__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vt-navy-900);
  margin-bottom: 14px;
}

.vt-toc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
}

.vt-toc-list a {
  color: var(--vt-text-secondary);
}

.vt-toc-list a:hover {
  color: var(--vt-blue-600);
}

.vt-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 0;
  margin: 36px 0;
  border-top: 1px solid var(--vt-border-subtle);
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vt-author-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: var(--vt-bg-subtle);
  border: 1px solid var(--vt-border-subtle);
  border-radius: var(--vt-radius-lg);
  margin-top: 36px;
}

.vt-author-box__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vt-navy-900);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. CONTACT PAGE, FORM NOTICE & CTA BANNER
   -------------------------------------------------------------------------- */
.vt-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}

.vt-contact-channels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vt-channel-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border-radius: var(--vt-radius-md);
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-xs);
}

.vt-channel-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--vt-blue-50);
  color: var(--vt-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vt-channel-card__icon svg {
  width: 22px;
  height: 22px;
}

.vt-form-status {
  padding: 14px 18px;
  border-radius: var(--vt-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
}

.vt-form-status--success {
  background: var(--vt-emerald-50);
  color: var(--vt-emerald-600);
  border: 1px solid #A7F3D0;
}

.vt-form-status--error {
  background: var(--vt-rose-50);
  color: var(--vt-rose-600);
  border: 1px solid #FECDD3;
}

.vt-cta-banner {
  background: linear-gradient(135deg, var(--vt-navy-900) 0%, var(--vt-navy-800) 60%, #1D4ED8 100%);
  border-radius: var(--vt-radius-xl);
  padding: 64px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: var(--vt-shadow-lg);
}

.vt-cta-banner__content {
  max-width: 640px;
}

.vt-cta-banner h2 {
  color: #FFFFFF;
  margin-bottom: 14px;
}

.vt-cta-banner p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.0625rem;
}

.vt-cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE OVERRIDES FOR COMPONENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .vt-hero__layout,
  .vt-service-layout,
  .vt-single-layout,
  .vt-contact-grid {
    grid-template-columns: 1fr;
  }
  .vt-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vt-bento__item--span-7,
  .vt-bento__item--span-5,
  .vt-bento__item--span-6,
  .vt-bento__item--span-4,
  .vt-bento__item--span-8 {
    grid-column: span 12;
  }
  .vt-service-sidebar,
  .vt-toc-box {
    position: static;
  }
}

@media (max-width: 768px) {
  .vt-hero {
    padding-top: 44px;
    padding-bottom: 64px;
  }
  .vt-hero__metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vt-steps-grid,
  .vt-kpi-list {
    grid-template-columns: 1fr;
  }
  .vt-cta-banner {
    padding: 36px 24px;
  }
  .vt-author-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  .vt-project-card__media,
  .vt-post-card__thumb {
    margin: -24px -20px 18px;
  }
  .vt-arch-card {
    padding: 20px 16px;
  }
}