/* ==========================================================================
   VIRSUA INTERIOR — Theme Layer (built ON TOP of Bootstrap 5)
   Approach: override Bootstrap's CSS custom properties (--bs-*) + add
   thin utility/component classes. Layout/grid/spacing relies on Bootstrap
   (container, row, col-*, navbar, modal, card, offcanvas, etc).
   ========================================================================== */

/* ---------- 1. Bootstrap variable overrides (root) ---------- */
:root{
  --bs-font-sans-serif: 'Poppins', sans-serif;
  --bs-body-font-family: 'Poppins', sans-serif;
  --bs-body-color: #232220;
  --bs-body-bg: #FFFFFF;
  --bs-link-color: #B8932C;
  --bs-link-hover-color: #D4AF37;

  --bs-primary: #D4AF37;
  --bs-primary-rgb: 212,175,55;
  --bs-dark: #1F1F1F;
  --bs-dark-rgb: 31,31,31;
  --bs-secondary: #6B6660;
  --bs-light: #F7F7F7;
  --bs-light-rgb: 247,247,247;

  --bs-border-radius: .85rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-xl: 2rem;
  --bs-border-radius-pill: 999px;

  /* Brand tokens (custom, not Bootstrap-native) */
  --vi-white:    #FFFFFF;
  --vi-gold:     #D4AF37;
  --vi-gold-soft:#E4C66B;
  --vi-gold-deep:#B8932C;
  --vi-charcoal: #1F1F1F;
  --vi-grey:     #F7F7F7;
  --vi-grey-line:#E7E3DA;
  --vi-text-muted: #6B6660;
  --vi-font-display: 'Montserrat', sans-serif;
  --vi-font-body: 'Poppins', sans-serif;
  --vi-ease: cubic-bezier(.22,.61,.36,1);
  --vi-nav-h: 84px;
}

html.dark{
  --bs-body-color: #F1EEE6;
  --bs-body-bg: #15140F;
  --bs-light: #1B1A15;
  --bs-light-rgb: 27,26,21;
  --vi-white: #15140F;
  --vi-grey: #1B1A15;
  --vi-grey-line: #322F26;
  --vi-text-muted: #B7B0A0;
  --vi-charcoal: #0E0D0A;
}

/* ---------- 2. Base ---------- */
html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{
  overflow-x:hidden;
  max-width:100%;
  transition: background-color .5s var(--vi-ease), color .5s var(--vi-ease);
}
img{ max-width:100%; height:auto; }
* { min-width:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--vi-font-display); letter-spacing:-.01em; }
a{ text-decoration:none; }
::selection{ background:var(--vi-gold); color:#1F1B0E; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--vi-grey); }
::-webkit-scrollbar-thumb{ background:var(--vi-gold); border-radius:8px; }

.section-pad{ padding-top:7rem; padding-bottom:7rem; }
@media (max-width:768px){ .section-pad{ padding-top:4.5rem; padding-bottom:4.5rem; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--vi-font-display); font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--vi-gold-deep);
  margin-bottom:.85rem;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--vi-gold); }
.eyebrow.center::before{ display:none; }

.section-title{
  font-size:clamp(1.75rem, 4vw, 2.75rem);
  font-weight:700; line-height:1.15; letter-spacing:-.01em;
}

.fw-display{ font-family:var(--vi-font-display); }
.text-muted-vi{ color:var(--vi-text-muted) !important; }
.text-gold{ color:var(--vi-gold) !important; }
.bg-charcoal{ background-color:var(--vi-charcoal) !important; }
.bg-grey-vi{ background-color:var(--vi-grey) !important; }
.bg-white-vi{ background-color: var(--vi-white) !important; }
.border-grey-vi{ border-color:var(--vi-grey-line) !important; }

/* ---------- 3. Buttons (extend Bootstrap .btn) ---------- */
.btn{
  font-family:var(--vi-font-display); font-weight:600; letter-spacing:.02em;
  border-radius:999px; transition:transform .25s var(--vi-ease), box-shadow .25s var(--vi-ease);
}
.btn:active{ transform:scale(.97); }
.btn-gold{
  background:linear-gradient(135deg, var(--vi-gold-soft), var(--vi-gold-deep));
  border-color:transparent; color:#1F1B0E;
  box-shadow:0 8px 26px -8px rgba(212,175,55,.45);
}
.btn-gold:hover, .btn-gold:focus{
  background:linear-gradient(135deg, var(--vi-gold-soft), var(--vi-gold-deep));
  color:#1F1B0E; transform:translateY(-2px);
  box-shadow:0 14px 34px -8px rgba(212,175,55,.55);
}
.btn-charcoal{ background:var(--vi-charcoal); border-color:var(--vi-charcoal); color:#fff; }
.btn-charcoal:hover{ background:#000; border-color:#000; color:#fff; transform:translateY(-2px); }
.btn-outline-light:hover{ color:#1F1B0E; }
.btn-wa{ background:#1F8A4C; border-color:#1F8A4C; color:#fff; }
.btn-wa:hover{ background:#197a42; border-color:#197a42; color:#fff; transform:translateY(-2px); }
.btn-pill-outline{
  border-radius:999px; border:1px solid var(--vi-grey-line); background:transparent;
  color:var(--vi-text-muted); font-size:.86rem; font-weight:500; padding:.55rem 1.2rem;
  transition:all .25s var(--vi-ease);
}
.btn-pill-outline:hover{ border-color:var(--vi-gold); color:var(--bs-body-color); }
.btn-pill-outline.active{ background:var(--vi-charcoal); border-color:var(--vi-charcoal); color:#fff; }

/* ---------- 4. Navbar ---------- */
.navbar-vi{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  height:var(--vi-nav-h);
  transition:background-color .5s var(--vi-ease), box-shadow .5s var(--vi-ease), height .4s var(--vi-ease), backdrop-filter .4s;
  --nav-fg:#fff; --nav-fg-sub:rgba(255,255,255,.78);
}
.navbar-vi.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 2px 24px rgba(0,0,0,.08);
  height:70px;
  --nav-fg:#232220; --nav-fg-sub:#6B6660;
}
html.dark .navbar-vi.solid{ background:rgba(21,20,15,.88); }

.navbar-vi .navbar-brand{ display:flex; align-items:center; gap:.7rem; }
.navbar-vi .navbar-brand img{ width:44px; height:44px; border-radius:50%; }
.navbar-vi .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.navbar-vi .brand-text strong{ font-family:var(--vi-font-display); font-size:1rem; font-weight:700; color:var(--nav-fg); }
.navbar-vi .brand-text span{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--nav-fg-sub); }

.navbar-vi .nav-link{
  color:var(--nav-fg) !important; font-size:.9rem; font-weight:500;
  position:relative; padding:.4rem 0 !important; margin:0 1rem;
}
.navbar-vi .nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--vi-gold);
  transition:width .25s var(--vi-ease);
}
.navbar-vi .nav-link:hover::after, .navbar-vi .nav-link.active::after{ width:100%; }
.navbar-vi .nav-link:hover{ color:var(--vi-gold-deep) !important; }

.theme-toggle-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--nav-fg-sub);
  background:transparent; color:var(--nav-fg); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all .25s var(--vi-ease);
}
.theme-toggle-btn:hover{ background:var(--vi-gold); color:#1F1B0E; border-color:var(--vi-gold); }

.navbar-vi .navbar-toggler{ border:none; box-shadow:none; padding:0; width:42px; height:42px; }
.navbar-vi .navbar-toggler .navbar-toggler-icon{
  background-image:none; position:relative; width:24px; height:18px;
}
.navbar-vi .navbar-toggler .navbar-toggler-icon::before,
.navbar-vi .navbar-toggler .navbar-toggler-icon::after,
.navbar-vi .navbar-toggler .navbar-toggler-icon span{
  content:''; position:absolute; left:0; width:24px; height:2px; background:var(--nav-fg); border-radius:2px;
}
.navbar-vi .navbar-toggler .navbar-toggler-icon::before{ top:0; }
.navbar-vi .navbar-toggler .navbar-toggler-icon span{ top:8px; }
.navbar-vi .navbar-toggler .navbar-toggler-icon::after{ top:16px; }

@media (max-width:991.98px){
/* Offcanvas-lg nav: slide-in panel below lg breakpoint */
.navbar-vi .offcanvas-lg{
  background:var(--vi-white);
  color:var(--bs-body-color);
  width:300px;
  max-width:84vw;
}
.navbar-vi .offcanvas-header{
  border-bottom:1px solid var(--vi-grey-line);
}
.navbar-vi .offcanvas-body .nav-link{
  color:var(--bs-body-color) !important;
  font-size:1.05rem;
  padding:.65rem 0 !important;
  margin:0;
  display:block;
}
.navbar-vi .offcanvas-body .nav-link::after{ display:none; }
.navbar-vi .offcanvas-body .navbar-nav{ gap:.25rem; }
}
@media (min-width:992px){
  .navbar-vi .offcanvas-lg{
    background:transparent !important;
  }
  .navbar-vi .offcanvas-header{ display:none !important; }
}

/* ---------- 5. Hero ---------- */
.hero-vi{ position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--vi-charcoal); }
.hero-vi .swiper, .hero-vi .swiper-wrapper, .hero-vi .swiper-slide{ height:100%; }
.hero-slide-vi{ position:relative; height:100%; background-size:cover; background-position:center; }
.hero-slide-vi::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,14,11,.55) 0%, rgba(15,14,11,.4) 38%, rgba(15,14,11,.82) 100%);
}
.hero-content-vi{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; padding-top:var(--vi-nav-h); }
.hero-eyebrow-vi{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--vi-gold-soft);
  font-family:var(--vi-font-display); font-size:.8rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:1.3rem; opacity:0; transform:translateY(16px);
}
.hero-title-vi{
  font-size:clamp(2.1rem, 6vw, 4rem); color:#fff; font-weight:700; line-height:1.08;
  opacity:0; transform:translateY(24px);
}
.hero-title-vi em{ font-style:normal; color:var(--vi-gold-soft); }
.hero-sub-vi{ margin-top:1.3rem; color:rgba(255,255,255,.86); font-size:1.05rem; line-height:1.75; max-width:560px; opacity:0; transform:translateY(24px); }
.hero-actions-vi{ margin-top:2.2rem; opacity:0; transform:translateY(24px); }
.swiper-slide-active .hero-eyebrow-vi, .swiper-slide-active .hero-title-vi,
.swiper-slide-active .hero-sub-vi, .swiper-slide-active .hero-actions-vi{ animation:heroUp .9s var(--vi-ease) forwards; }
.swiper-slide-active .hero-title-vi{ animation-delay:.1s; }
.swiper-slide-active .hero-sub-vi{ animation-delay:.22s; }
.swiper-slide-active .hero-actions-vi{ animation-delay:.34s; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

.hero-scroll-vi{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6;
  color:rgba(255,255,255,.75); display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll-vi .line{ width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero-scroll-vi .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--vi-gold-soft);
  animation:scrollDrop 2s var(--vi-ease) infinite;
}
@keyframes scrollDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.hero-vi .swiper-pagination{ bottom:26px !important; right:26px !important; left:auto !important; width:auto !important; }
.hero-vi .swiper-pagination-bullet{ background:#fff; opacity:.5; width:8px; height:8px; }
.hero-vi .swiper-pagination-bullet-active{ background:var(--vi-gold); opacity:1; width:22px; border-radius:4px; }

/* ---------- 6. Stats ---------- */
.stat-num{
  font-family:var(--vi-font-display); font-weight:700; font-size:clamp(2rem, 4vw, 3rem); color:var(--vi-gold-soft);
}
.stat-label{ color:rgba(255,255,255,.7); font-size:.85rem; letter-spacing:.04em; }

/* ---------- 7. Category cards ---------- */
.cat-card-vi{
  position:relative; border-radius:var(--bs-border-radius-lg); overflow:hidden; aspect-ratio:4/5; cursor:pointer; isolation:isolate;
}
.cat-card-vi img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--vi-ease); }
.cat-card-vi::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,12,.05) 0%, rgba(15,13,9,.88) 100%);
}
.cat-card-vi:hover img{ transform:scale(1.08); }
.cat-card-body{ position:absolute; left:0; right:0; bottom:0; padding:1.3rem; z-index:2; color:#fff; }
.cat-card-body .cat-count{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vi-gold-soft); margin-bottom:.3rem; display:block; }
.cat-card-body h3{ font-size:1.1rem; font-weight:600; margin:0; }
.cat-card-arrow{
  position:absolute; top:1rem; right:1rem; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem; transform:scale(.85); opacity:0; transition:all .25s var(--vi-ease);
}
.cat-card-vi:hover .cat-card-arrow{ opacity:1; transform:scale(1); background:var(--vi-gold); color:#1F1B0E; }

/* ---------- 8. Product cards ---------- */
.product-card-vi{
  background:var(--vi-white); border:1px solid var(--vi-grey-line); border-radius:var(--bs-border-radius);
  overflow:hidden; transition:transform .25s var(--vi-ease), box-shadow .25s var(--vi-ease); height:100%;
}
.product-card-vi:hover{ transform:translateY(-6px); box-shadow:0 20px 50px -16px rgba(31,31,31,.22); border-color:transparent; }
.product-thumb-vi{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--vi-grey); }
.product-thumb-vi img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--vi-ease); opacity:0; }
.product-thumb-vi img.loaded{ opacity:1; }
.product-card-vi:hover .product-thumb-vi img{ transform:scale(1.1); }
.product-thumb-vi .skeleton-vi{
  position:absolute; inset:0; background:linear-gradient(100deg, var(--vi-grey) 30%, #ECE8DD 50%, var(--vi-grey) 70%);
  background-size:200% 100%; animation:shimmerVi 1.4s infinite;
}
.product-thumb-vi img.loaded ~ .skeleton-vi{ display:none; }
@keyframes shimmerVi{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.product-cat-tag{
  position:absolute; top:.7rem; left:.7rem; z-index:2; background:rgba(255,255,255,.92); color:var(--vi-charcoal);
  font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .65rem; border-radius:999px;
}
.product-quickview-btn{
  position:absolute; bottom:.7rem; right:.7rem; z-index:2; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,.94); color:var(--vi-charcoal); display:flex; align-items:center; justify-content:center; font-size:.8rem;
  opacity:0; transform:translateY(8px); transition:all .25s var(--vi-ease);
}
.product-card-vi:hover .product-quickview-btn{ opacity:1; transform:translateY(0); }
.product-quickview-btn:hover{ background:var(--vi-gold); color:#1F1B0E; }

.product-info-vi{ padding:1.1rem 1.2rem 1.2rem; }
.product-info-vi .p-name{ font-size:.95rem; font-weight:600; line-height:1.35; margin-bottom:.35rem; }
.product-info-vi .p-desc{
  font-size:.8rem; color:var(--vi-text-muted); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:1rem; min-height:2.55em;
}
.product-info-vi .p-actions .btn{ font-size:.76rem; padding:.6rem .8rem; }

.products-empty-vi{ display:none; text-align:center; padding:4.2rem 1rem; color:var(--vi-text-muted); }
.products-empty-vi.show{ display:block; }
.products-empty-vi i{ font-size:2.1rem; color:var(--vi-gold); margin-bottom:1rem; }

/* ---------- 9. Modal (extend Bootstrap .modal) ---------- */
.modal-vi .modal-content{ border:none; border-radius:var(--bs-border-radius-xl); overflow:hidden; }
.modal-vi .modal-body{ padding:0; }
.modal-gallery-vi{ position:relative; background:var(--vi-grey); min-height:320px; height:100%; }
.modal-gallery-vi img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.modal-thumbs-vi{ display:flex; gap:.5rem; padding:.75rem; position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, rgba(0,0,0,.45), transparent); }
.modal-thumbs-vi button{ width:42px; height:42px; border-radius:8px; overflow:hidden; border:2px solid transparent; padding:0; }
.modal-thumbs-vi button.active{ border-color:var(--vi-gold); }
.modal-thumbs-vi img{ width:100%; height:100%; object-fit:cover; }
.modal-info-vi{ padding:2.4rem 2.1rem; }
.modal-info-vi .p-cat{ color:var(--vi-gold-deep); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; }
.modal-info-vi h2{ font-size:1.5rem; margin-bottom:.85rem; line-height:1.25; }
.modal-info-vi .p-desc{ color:var(--vi-text-muted); font-size:.9rem; line-height:1.75; margin-bottom:1.4rem; }
.modal-spec-vi{ margin-bottom:.9rem; }
.modal-spec-vi .spec-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--vi-text-muted); margin-bottom:.3rem; }
.modal-spec-vi .spec-value{ font-size:.86rem; line-height:1.6; }
.modal-colors-vi{ display:flex; gap:.85rem; align-items:center; flex-wrap:wrap; }
.color-chip-vi{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--vi-text-muted); }
.color-dot-vi{ width:17px; height:17px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.modal-vi .btn-close{ position:absolute; top:1rem; right:1rem; z-index:5; background:rgba(255,255,255,.92); border-radius:50%; padding:.6rem; opacity:1; }

/* ---------- 10. Masonry portfolio ---------- */
.masonry-vi{ columns:3 280px; column-gap:1.1rem; }
@media (max-width:760px){ .masonry-vi{ columns:2 200px; } }
.masonry-item-vi{ break-inside:avoid; margin-bottom:1.1rem; border-radius:var(--bs-border-radius); overflow:hidden; position:relative; cursor:zoom-in; }
.masonry-item-vi img{ width:100%; display:block; transition:transform .6s var(--vi-ease); }
.masonry-item-vi:hover img{ transform:scale(1.06); }
.masonry-overlay-vi{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10,9,7,.82) 100%);
  display:flex; align-items:flex-end; padding:1rem; opacity:0; transition:opacity .25s;
}
.masonry-item-vi:hover .masonry-overlay-vi{ opacity:1; }
.masonry-overlay-vi span{ color:#fff; font-size:.84rem; font-weight:500; }

/* ---------- 11. Service area ---------- */
.area-item-vi{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-radius:var(--bs-border-radius-sm);
  background:var(--vi-grey); border:1px solid var(--vi-grey-line); font-size:.86rem; font-weight:500;
  transition:all .25s var(--vi-ease);
}
.area-item-vi:hover{ background:var(--vi-charcoal); color:#fff; transform:translateX(4px); }
.area-item-vi i{ color:var(--vi-gold); font-size:.8rem; }
.map-frame-vi{ border-radius:var(--bs-border-radius-xl); overflow:hidden; box-shadow:0 10px 40px -12px rgba(31,31,31,.18); aspect-ratio:4/3.4; background:var(--vi-grey); }
.map-frame-vi iframe{ width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02); }

/* ---------- 12. Why choose us ---------- */
.why-card-vi{
  padding:2rem 1.4rem; border-radius:var(--bs-border-radius); background:var(--vi-grey); border:1px solid var(--vi-grey-line);
  text-align:center; transition:all .25s var(--vi-ease); height:100%;
}
.why-card-vi:hover{ background:var(--vi-charcoal); border-color:var(--vi-charcoal); transform:translateY(-6px); box-shadow:0 18px 40px -14px rgba(0,0,0,.35); }
.why-icon-vi{
  width:56px; height:56px; border-radius:50%; margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--vi-gold-soft), var(--vi-gold-deep)); color:#1F1B0E; font-size:1.3rem;
  transition:transform .25s var(--vi-ease);
}
.why-card-vi:hover .why-icon-vi{ transform:scale(1.1) rotate(-6deg); }
.why-card-vi h3{ font-size:.95rem; margin-bottom:.5rem; transition:color .25s; }
.why-card-vi:hover h3{ color:#fff; }
.why-card-vi p{ font-size:.8rem; color:var(--vi-text-muted); line-height:1.6; transition:color .25s; margin:0; }
.why-card-vi:hover p{ color:rgba(255,255,255,.72); }

/* ---------- 13. Blog cards ---------- */
.blog-card-vi{ border-radius:var(--bs-border-radius); overflow:hidden; background:var(--vi-white); border:1px solid var(--vi-grey-line); transition:all .25s var(--vi-ease); height:100%; }
.blog-card-vi:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -14px rgba(31,31,31,.2); }
.blog-thumb-vi{ aspect-ratio:16/11; overflow:hidden; }
.blog-thumb-vi img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--vi-ease); }
.blog-card-vi:hover .blog-thumb-vi img{ transform:scale(1.08); }
.blog-tag-vi{ font-size:.68rem; color:var(--vi-gold-deep); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.blog-card-vi h3{ font-size:.98rem; margin:.6rem 0; line-height:1.4; }
.blog-card-vi p{ font-size:.8rem; color:var(--vi-text-muted); line-height:1.6; }
.blog-readmore-vi{ margin-top:.85rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--vi-charcoal); }
html.dark .blog-readmore-vi{ color:#fff; }
.blog-readmore-vi i{ font-size:.68rem; transition:transform .25s; }
.blog-card-vi:hover .blog-readmore-vi i{ transform:translateX(4px); }

/* ---------- 14. CTA banner ---------- */
.cta-banner-vi{
  position:relative; border-radius:var(--bs-border-radius-xl); overflow:hidden; padding:5.6rem 2.2rem; text-align:center;
  background:var(--vi-charcoal); isolation:isolate;
}
.cta-banner-vi::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 18% 22%, rgba(212,175,55,.22), transparent 55%),
             radial-gradient(circle at 82% 80%, rgba(212,175,55,.16), transparent 50%);
}
.cta-banner-vi h2{ color:#fff; font-size:clamp(1.8rem, 4vw, 2.6rem); max-width:640px; margin:0 auto 1.1rem; line-height:1.2; }
.cta-banner-vi p{ color:rgba(255,255,255,.74); font-size:1rem; max-width:520px; margin:0 auto 2.2rem; line-height:1.7; }

/* ---------- 15. Footer ---------- */
.footer-vi{ background:var(--vi-charcoal); color:rgba(255,255,255,.75); padding:5rem 0 0; }
.footer-vi .footer-grid-border{ border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:3.6rem; }
.footer-brand-vi{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.footer-brand-vi img{ width:48px; height:48px; border-radius:50%; }
.footer-brand-vi strong{ font-family:var(--vi-font-display); color:#fff; font-size:1.05rem; }
.footer-brand-vi span{ display:block; font-size:.62rem; letter-spacing:.16em; color:var(--vi-gold-soft); text-transform:uppercase; }
.footer-vi p.desc{ font-size:.84rem; line-height:1.75; max-width:280px; }
.footer-vi h4{ color:#fff; font-size:.88rem; margin-bottom:1.2rem; letter-spacing:.04em; }
.footer-vi .footer-links li{ margin-bottom:.7rem; }
.footer-vi .footer-links a{ font-size:.84rem; color:rgba(255,255,255,.75); transition:color .25s; }
.footer-vi .footer-links a:hover{ color:var(--vi-gold-soft); }
.footer-vi .footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.85rem; font-size:.84rem; line-height:1.6; }
.footer-vi .footer-contact i{ color:var(--vi-gold); margin-top:.2rem; font-size:.8rem; }
.footer-social-vi{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social-vi a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center;
  justify-content:center; font-size:.85rem; color:rgba(255,255,255,.85); transition:all .25s;
}
.footer-social-vi a:hover{ background:var(--vi-gold); border-color:var(--vi-gold); color:#1F1B0E; }
.footer-bottom-vi{ padding:1.4rem 0; font-size:.78rem; color:rgba(255,255,255,.55); }
.footer-bottom-vi a{ color:rgba(255,255,255,.55); }

/* ---------- 16. Floating actions ---------- */
.fab-wa-vi{
  position:fixed; right:22px; bottom:22px; z-index:1040; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  box-shadow:0 12px 28px rgba(37,211,102,.45); animation:fabPulseVi 2.6s infinite; transition:transform .25s;
}
.fab-wa-vi:hover{ transform:scale(1.08); color:#fff; }
@keyframes fabPulseVi{
  0%,100%{ box-shadow:0 12px 28px rgba(37,211,102,.45); }
  50%{ box-shadow:0 12px 28px rgba(37,211,102,.45), 0 0 0 12px rgba(37,211,102,.12); }
}
.fab-top-vi{
  position:fixed; right:22px; bottom:90px; z-index:1039; width:44px; height:44px; border-radius:50%;
  background:var(--vi-charcoal); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; opacity:0; pointer-events:none; transform:translateY(12px); transition:all .25s var(--vi-ease);
}
.fab-top-vi.show{ opacity:1; pointer-events:all; transform:translateY(0); }
.fab-top-vi:hover{ background:var(--vi-gold); color:#1F1B0E; }
@media (max-width:600px){
  .fab-wa-vi{ width:52px; height:52px; font-size:1.5rem; right:16px; bottom:16px; }
  .fab-top-vi{ right:16px; bottom:78px; width:40px; height:40px; }
}

/* ---------- 17. Preloader ---------- */
.preloader-vi{
  position:fixed; inset:0; z-index:2000; background:var(--vi-charcoal); display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--vi-ease), visibility .6s var(--vi-ease);
}
.preloader-vi.hide{ opacity:0; visibility:hidden; }
.preloader-mark-vi{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.preloader-mark-vi img{ width:60px; height:60px; border-radius:50%; animation:loaderSpinVi 1.6s linear infinite; }
.preloader-bar-vi{ width:150px; height:2px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.preloader-bar-vi::after{ content:''; display:block; height:100%; width:40%; background:var(--vi-gold); animation:loaderSlideVi 1.1s ease-in-out infinite; }
@keyframes loaderSpinVi{ to{ transform:rotate(360deg); } }
@keyframes loaderSlideVi{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }

/* ---------- 18. Misc ---------- */
.divider-gold-vi{ width:60px; height:2px; background:linear-gradient(90deg, var(--vi-gold), transparent); }
[data-aos]{ will-change:transform, opacity; }
section{ overflow-x:clip; }

.process-img{
  width:100%; height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
@media (max-width:575.98px){
  .process-img{ aspect-ratio:1/1; }
}