/* ==========================================================================
   BioVision - base styles
   ========================================================================== */

html { scroll-behavior: smooth; }
body {
  font-family: var(--bv-font-body);
  color: var(--bv-text);
  background: var(--bv-white);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bv-font-head);
  color: var(--bv-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
a { color: var(--bv-teal-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bv-navy); }
img { max-width: 100%; height: auto; }
.lang-bn, [lang="bn"] { font-family: var(--bv-font-bn); }
::selection { background: var(--bv-teal); color: #fff; }

.text-teal { color: var(--bv-teal) !important; }
.text-amber { color: var(--bv-amber) !important; }
.text-navy { color: var(--bv-navy) !important; }
.text-muted-bv { color: var(--bv-muted) !important; }
.bg-surface { background: var(--bv-surface) !important; }
.bg-navy { background: var(--bv-navy) !important; }
.fw-800 { font-weight: 800 !important; }

/* Reserve space while partials load */
.include-header { min-height: calc(var(--bv-header-h) + 40px); }

.panel-dark {
  position: relative; overflow: hidden; border-radius: var(--bv-radius-lg);
  padding: clamp(1.75rem, 5vw, 4rem); background: var(--bv-navy); color: rgba(255,255,255,.75);
}
.panel-dark::before { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,166,166,.35), transparent 70%); }
.panel-dark > * { position: relative; }

/* ----------------------------------------------------------------------------
   Sections & headings
   ------------------------------------------------------------------------- */
.section { padding: var(--bv-section-y) 0; position: relative; }
.section-sm { padding: calc(var(--bv-section-y) * .6) 0; }
.section-alt { background: var(--bv-surface); }
.section-dark { background: var(--bv-navy); color: rgba(255,255,255,.78); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem .35rem .7rem;
  background: var(--bv-teal-soft); color: var(--bv-teal-dark);
  border-radius: var(--bv-radius-pill);
  font: 600 .78rem/1.2 var(--bv-font-head);
  letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bv-teal); box-shadow: 0 0 0 4px rgba(0,166,166,.18);
}
.section-dark .eyebrow, .eyebrow-light { background: rgba(255,255,255,.1); color: var(--bv-mint); }

.section-title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800; margin: .9rem 0 .75rem;
}
.section-title .hl {
  color: var(--bv-teal);
  background: linear-gradient(transparent 70%, rgba(255,181,71,.35) 70%);
  padding: 0 .1em;
}
.section-dark .section-title .hl, .panel-dark .section-title .hl, .quote-side .section-title .hl { color: var(--bv-mint); background: linear-gradient(transparent 72%, rgba(255,181,71,.45) 72%); }
.section-lead { color: var(--bv-muted); font-size: 1.05rem; max-width: 620px; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.text-center .section-lead { margin-inline: auto; }
.section-head-split { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; }

/* ----------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn-bv, .btn-bv-teal, .btn-bv-outline, .btn-bv-ghost, .btn-bv-white {
  --pad-y: .8rem; --pad-x: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad-y) var(--pad-x); min-height: 46px;
  border-radius: var(--bv-radius-pill);
  font: 600 .95rem/1 var(--bv-font-head);
  border: 2px solid transparent;
  transition: transform .25s var(--bv-ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn-bv { background: var(--bv-amber); color: var(--bv-navy); box-shadow: 0 10px 24px -10px rgba(242,157,31,.8); }
.btn-bv:hover { background: var(--bv-amber-dark); color: var(--bv-navy); transform: translateY(-2px); }
.btn-bv-teal { background: var(--bv-teal); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,166,166,.8); }
.btn-bv-teal:hover { background: var(--bv-teal-dark); color: #fff; transform: translateY(-2px); }
.btn-bv-outline { border-color: var(--bv-navy); color: var(--bv-navy); background: transparent; }
.btn-bv-outline:hover { background: var(--bv-navy); color: #fff; }
.btn-bv-ghost { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); }
.btn-bv-ghost:hover { background: #fff; color: var(--bv-navy); border-color: #fff; }
.btn-bv-white { background: #fff; color: var(--bv-navy); }
.btn-bv-white:hover { background: var(--bv-navy); color: #fff; }
.btn-sm-bv { --pad-y: .55rem; --pad-x: 1.05rem; min-height: 40px; font-size: .85rem; }
.btn-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--bv-border); background: #fff; color: var(--bv-navy);
  transition: all .2s;
}
.btn-icon:hover { background: var(--bv-teal); color: #fff; border-color: var(--bv-teal); }
.link-arrow { font-weight: 600; font-family: var(--bv-font-head); display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow i { transition: transform .25s var(--bv-ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* ----------------------------------------------------------------------------
   Top bar & header
   ------------------------------------------------------------------------- */
.bv-topbar { background: var(--bv-navy); color: rgba(255,255,255,.75); font-size: .82rem; }
.bv-topbar .container { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bv-topbar a { color: rgba(255,255,255,.85); }
.bv-topbar a:hover { color: var(--bv-amber); }
.bv-topbar .tb-list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.bv-topbar .tb-list i { color: var(--bv-mint); margin-right: .35rem; }
.bv-topbar .tb-social { display: flex; gap: .85rem; }
.bv-topbar .tb-badge { color: var(--bv-amber); font-weight: 600; }

.bv-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.bv-header.is-scrolled { box-shadow: var(--bv-shadow-sm); border-color: var(--bv-border); }
.bv-header .container { height: var(--bv-header-h); display: flex; align-items: center; gap: 1.5rem; }

.bv-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--bv-navy); flex-shrink: 0; }
.bv-brand:hover { color: var(--bv-navy); }
.bv-brand-mark { width: 42px; height: 42px; flex-shrink: 0; }
.bv-brand-text { display: flex; flex-direction: column; line-height: 1; }
.bv-brand-text strong { font: 800 1.35rem/1 var(--bv-font-head); letter-spacing: -.03em; }
.bv-brand-text strong span { color: var(--bv-teal); }
.bv-brand-text small { font: 600 .6rem/1 var(--bv-font-head); letter-spacing: .22em; color: var(--bv-muted); margin-top: .35rem; text-transform: uppercase; }
.bv-brand.is-light, .bv-brand.is-light:hover { color: #fff; }
.bv-brand.is-light small { color: rgba(255,255,255,.55); }

.bv-nav { display: flex; align-items: center; gap: .15rem; margin: 0 auto; list-style: none; padding: 0; }
.bv-nav > li { position: relative; }
.bv-nav .nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: var(--bv-radius-pill);
  font: 600 .93rem/1 var(--bv-font-head); color: var(--bv-navy);
}
.bv-nav .nav-link:hover, .bv-nav .nav-link.active { color: var(--bv-teal-dark); background: var(--bv-teal-soft); }
.bv-nav .nav-link .bi-chevron-down { font-size: .7rem; transition: transform .25s; }
.bv-nav > li:hover > .nav-link .bi-chevron-down { transform: rotate(180deg); }

.bv-dropdown, .bv-mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 8px);
  background: #fff; border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius); box-shadow: var(--bv-shadow-lg);
  opacity: 0; visibility: hidden; transition: all .25s var(--bv-ease);
  z-index: 20;
}
.bv-dropdown::before, .bv-mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.bv-nav > li:hover > .bv-dropdown, .bv-nav > li:hover > .bv-mega,
.bv-nav > li:focus-within > .bv-dropdown, .bv-nav > li:focus-within > .bv-mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.bv-dropdown { min-width: 230px; padding: .5rem; list-style: none; margin: 0; }
.bv-dropdown a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--bv-radius-sm); color: var(--bv-navy); font-weight: 500; font-size: .92rem; }
.bv-dropdown a i { color: var(--bv-teal); }
.bv-dropdown a:hover { background: var(--bv-surface); color: var(--bv-teal-dark); }

.bv-mega { width: min(860px, 92vw); padding: 1.25rem; display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; }
.bv-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
.bv-mega-grid a { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: var(--bv-radius-sm); color: var(--bv-navy); }
.bv-mega-grid a:hover { background: var(--bv-surface); }
.bv-mega-grid .mi { width: 38px; height: 38px; border-radius: 10px; background: var(--bv-teal-soft); color: var(--bv-teal-dark); display: grid; place-items: center; flex-shrink: 0; transition: all .2s; }
.bv-mega-grid a:hover .mi { background: var(--bv-teal); color: #fff; }
.bv-mega-grid strong { display: block; font: 600 .9rem/1.2 var(--bv-font-head); }
.bv-mega-grid small { color: var(--bv-muted); font-size: .76rem; }
.bv-mega-promo {
  border-radius: var(--bv-radius); padding: 1.25rem; color: #fff;
  background: linear-gradient(160deg, var(--bv-navy) 0%, var(--bv-navy-3) 100%);
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.bv-mega-promo::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; border: 26px solid rgba(0,166,166,.25); }
.bv-mega-promo h6 { color: #fff; font-size: 1.05rem; }
.bv-mega-promo p { color: rgba(255,255,255,.7); font-size: .85rem; }

.bv-header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.bv-call { display: flex; align-items: center; gap: .6rem; color: var(--bv-navy); }
.bv-call .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--bv-teal-soft); color: var(--bv-teal-dark); display: grid; place-items: center; }
.bv-call small { display: block; color: var(--bv-muted); font-size: .72rem; line-height: 1; }
.bv-call strong { font: 700 .92rem/1.3 var(--bv-font-head); }
.bv-burger { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--bv-border); background: #fff; display: none; place-items: center; color: var(--bv-navy); font-size: 1.4rem; }

/* Offcanvas mobile nav */
.bv-offcanvas { --bs-offcanvas-width: min(360px, 88vw); border: 0 !important; }
.bv-offcanvas .offcanvas-header { border-bottom: 1px solid var(--bv-border); padding: 1rem 1.25rem; }
.bv-offcanvas .offcanvas-body { padding: 1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.m-nav { list-style: none; margin: 0; padding: 0; }
.m-nav > li { border-bottom: 1px solid var(--bv-border); }
.m-nav > li > a, .m-nav > li > button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: .95rem .25rem; background: none; border: 0;
  font: 600 1rem/1.2 var(--bv-font-head); color: var(--bv-navy); text-align: left;
}
.m-nav > li > a.active { color: var(--bv-teal-dark); }
.m-nav > li > button .bi { transition: transform .25s; }
.m-nav > li > button[aria-expanded="true"] .bi { transform: rotate(180deg); }
.m-sub { list-style: none; padding: 0 0 .75rem .25rem; margin: 0; display: grid; gap: .1rem; }
.m-sub a { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem; border-radius: 8px; color: var(--bv-text); font-size: .93rem; }
.m-sub a:hover { background: var(--bv-surface); color: var(--bv-teal-dark); }
.m-sub a i { color: var(--bv-teal); }
.m-contact { background: var(--bv-surface); border-radius: var(--bv-radius); padding: 1rem; display: grid; gap: .65rem; font-size: .92rem; }
.m-contact a { color: var(--bv-navy); display: flex; gap: .6rem; align-items: center; }
.m-contact i { color: var(--bv-teal); }

/* ----------------------------------------------------------------------------
   Hero (home)
   ------------------------------------------------------------------------- */
.bv-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(0,166,166,.14), transparent 60%),
    radial-gradient(500px 360px at 5% 90%, rgba(255,181,71,.16), transparent 60%),
    var(--bv-surface);
  padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 10vw, 140px);
}
.bv-hero .dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(10,37,64,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(120deg, transparent 30%, #000 70%);
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 70%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .9rem .4rem .4rem;
  background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius-pill);
  font-size: .85rem; font-weight: 600; color: var(--bv-navy); box-shadow: var(--bv-shadow-sm);
}
.hero-badge .tag { background: var(--bv-navy); color: var(--bv-amber); padding: .2rem .6rem; border-radius: var(--bv-radius-pill); font-size: .72rem; letter-spacing: .06em; }
.hero-title { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); font-weight: 800; letter-spacing: -.035em; margin: 1.25rem 0 1rem; }
.hero-title .swash { position: relative; color: var(--bv-teal); white-space: nowrap; }
.hero-title .swash svg { position: absolute; left: 0; bottom: -.18em; width: 100%; height: .35em; }
.hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--bv-muted); max-width: 540px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 2.25rem; }
.hero-trust { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avatar-stack { display: flex; }
.avatar-stack span {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--bv-surface);
  display: grid; place-items: center; margin-left: -10px;
  font: 700 .75rem/1 var(--bv-font-head); color: #fff;
}
.avatar-stack span:first-child { margin-left: 0; }
.hero-trust p { margin: 0; font-size: .88rem; color: var(--bv-muted); line-height: 1.35; }
.hero-trust strong { color: var(--bv-navy); }

.hero-visual { position: relative; padding: 1rem 0 1rem 1rem; }
.hero-shape {
  position: relative; border-radius: 220px 32px 220px 32px; overflow: hidden;
  aspect-ratio: 5 / 5.4; box-shadow: var(--bv-shadow-lg);
}
.hero-shape img { width: 100%; height: 100%; object-fit: cover; }
.hero-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgba(10,37,64,.55)); }
.hero-ring { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 2px dashed rgba(0,166,166,.45); top: -10px; right: -14px; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.glass-card {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--bv-radius);
  box-shadow: var(--bv-shadow); padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  animation: floaty 6s ease-in-out infinite;
}
.glass-card .gi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.glass-card strong { display: block; font: 800 1.2rem/1 var(--bv-font-head); color: var(--bv-navy); }
.glass-card small { color: var(--bv-muted); font-size: .78rem; }
.glass-card.gc-1 { top: 12%; left: -6%; }
.glass-card.gc-2 { bottom: 16%; right: -4%; animation-delay: -3s; }
.glass-card.gc-3 { bottom: -2%; left: 10%; animation-delay: -1.5s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }

/* Stats band overlapping hero */
.stat-band {
  position: relative; z-index: 3; margin-top: clamp(-90px, -7vw, -60px);
  background: var(--bv-navy); border-radius: var(--bv-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--bv-shadow-lg); overflow: hidden;
}
.stat-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0, rgba(0,166,166,.35), transparent 70%); }
.stat-item { position: relative; display: flex; align-items: center; gap: 1rem; }
.stat-item .si { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.08); color: var(--bv-mint); display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; }
.stat-item .num { font: 800 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1 var(--bv-font-head); color: #fff; }
.stat-item .num sup { color: var(--bv-amber); font-size: .55em; top: -.8em; }
.stat-item p { margin: .3rem 0 0; color: rgba(255,255,255,.65); font-size: .88rem; }
.stat-divider { border-left: 1px solid rgba(255,255,255,.1); }

/* ----------------------------------------------------------------------------
   Bento categories
   ------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); grid-auto-flow: dense; gap: 1rem; }
.bento-tile {
  position: relative; overflow: hidden; border-radius: var(--bv-radius);
  background: #fff; border: 1px solid var(--bv-border);
  padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--bv-navy); transition: transform .35s var(--bv-ease), box-shadow .35s, border-color .35s;
}
.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--bv-shadow); border-color: transparent; color: var(--bv-navy); }
.bento-tile .bt-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--bv-teal-soft); color: var(--bv-teal-dark); display: grid; place-items: center; font-size: 1.3rem; transition: all .3s; }
.bento-tile:hover .bt-icon { background: var(--bv-teal); color: #fff; transform: rotate(-8deg); }
.bento-tile h3 { font-size: 1.05rem; margin: 1rem 0 .25rem; }
.bento-tile .bt-count { font-size: .82rem; color: var(--bv-muted); }
.bento-tile .bt-arrow { position: absolute; top: 1.1rem; right: 1.1rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bv-border); display: grid; place-items: center; transition: all .3s; }
.bento-tile:hover .bt-arrow { background: var(--bv-amber); border-color: var(--bv-amber); transform: rotate(-45deg); }
.bento-tile > div { position: relative; z-index: 1; }
.bento-tile:not(.is-feature):not(.is-wide) > div { max-width: 64%; }
.bento-tile .bt-img { position: absolute; right: -8px; bottom: -12px; width: 44%; opacity: .95; transition: transform .4s var(--bv-ease); pointer-events: none; }
.bento-tile:hover .bt-img { transform: scale(1.06) translateY(-4px); }
.bento-tile.is-feature { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, var(--bv-navy) 0%, var(--bv-navy-3) 100%); color: #fff; border: 0; padding: 1.75rem; }
.bento-tile.is-feature h3 { color: #fff; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.bento-tile.is-feature p { color: rgba(255,255,255,.7); max-width: 300px; }
.bento-tile.is-feature .bt-icon { background: rgba(255,255,255,.1); color: var(--bv-mint); }
.bento-tile.is-feature .bt-count { color: var(--bv-amber); }
.bento-tile.is-feature .bt-arrow { border-color: rgba(255,255,255,.2); color: #fff; }
.bento-tile.is-feature .bt-img { width: 62%; right: -4%; bottom: -4%; }
.bento-tile.is-wide { grid-column: span 2; }
.bento-tile.is-wide .bt-img { width: 38%; }
.bento-tile.is-cta { background: var(--bv-amber); border-color: var(--bv-amber); }
.bento-tile.is-cta .bt-icon { background: rgba(10,37,64,.1); color: var(--bv-navy); }
.bento-tile.is-cta .bt-count { color: var(--bv-navy); opacity: .7; }

/* ----------------------------------------------------------------------------
   Product card
   ------------------------------------------------------------------------- */
.p-card {
  position: relative; height: 100%;
  background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .35s var(--bv-ease), box-shadow .35s, border-color .35s;
}
.p-card:hover { transform: translateY(-6px); box-shadow: var(--bv-shadow); border-color: transparent; }
.p-card .p-media {
  position: relative; display: block; aspect-ratio: 5 / 4;
  background: radial-gradient(circle at 50% 60%, #fff 0%, var(--bv-surface) 70%);
  margin: .5rem .5rem 0; border-radius: calc(var(--bv-radius) - 6px); overflow: hidden;
}
.p-card .p-media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .5s var(--bv-ease); }
.p-card:hover .p-media img { transform: scale(1.06); }
.p-card .p-badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; z-index: 2; }
.p-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: var(--bv-radius-pill); font: 600 .7rem/1.2 var(--bv-font-head); }
.p-chip.in { background: #dcfce7; color: #15803d; }
.p-chip.in::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-chip.out { background: #fee2e2; color: #b91c1c; }
.p-chip.new { background: var(--bv-navy); color: var(--bv-amber); }
.p-card .p-quick {
  position: absolute; right: .7rem; top: .7rem; z-index: 2;
  display: flex; flex-direction: column; gap: .4rem;
  opacity: 0; transform: translateX(8px); transition: all .3s var(--bv-ease);
}
.p-card:hover .p-quick, .p-card:focus-within .p-quick { opacity: 1; transform: none; }
.p-card .p-quick button, .p-card .p-quick a { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--bv-navy); display: grid; place-items: center; box-shadow: var(--bv-shadow-sm); transition: all .2s; }
.p-card .p-quick button:hover, .p-card .p-quick a:hover { background: var(--bv-teal); color: #fff; }
.p-card .p-body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.p-card .p-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; margin-bottom: .45rem; }
.p-card .p-brand { font: 700 .72rem/1 var(--bv-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--bv-teal-dark); }
.p-card .p-cat { color: var(--bv-muted); }
.p-card .p-cat::before { content: "\2022"; margin-right: .5rem; color: var(--bv-border); }
.p-card .p-title { font-size: 1rem; line-height: 1.35; margin: 0 0 .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card .p-title a { color: var(--bv-navy); }
.p-card .p-title a:hover { color: var(--bv-teal-dark); }
.p-card .p-summary { display: none; color: var(--bv-muted); font-size: .9rem; }
.p-card .p-model { font-size: .8rem; color: var(--bv-muted); margin-bottom: 1rem; }
.p-card .p-actions { margin-top: auto; display: flex; gap: .5rem; }
.p-card .p-actions .btn-bv-outline { flex: 1; }
.p-card .p-actions .btn-bv-outline, .p-card .p-actions .btn-bv-teal { --pad-y: .55rem; --pad-x: 1rem; min-height: 42px; font-size: .85rem; }
.p-card .p-actions .btn-quote { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; }

/* List view */
.p-grid.is-list > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
.p-grid.is-list .p-card { flex-direction: row; }
.p-grid.is-list .p-card .p-media { width: 34%; flex-shrink: 0; margin: .5rem; aspect-ratio: auto; min-height: 210px; }
.p-grid.is-list .p-card .p-body { padding: 1.25rem 1.5rem 1.25rem .75rem; }
.p-grid.is-list .p-card .p-title { font-size: 1.15rem; -webkit-line-clamp: 3; }
.p-grid.is-list .p-card .p-summary { display: block; }
.p-grid.is-list .p-card .p-actions { max-width: 360px; }

/* ----------------------------------------------------------------------------
   Brand marquee & wall
   ------------------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 1rem; }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-chip {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .85rem 1.4rem; background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius-pill);
  font: 700 1rem/1 var(--bv-font-head); color: var(--bv-navy); white-space: nowrap; transition: all .25s;
}
.brand-chip .mono { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bv-teal-soft); color: var(--bv-teal-dark); font-size: .8rem; }
.brand-chip:hover { border-color: var(--bv-teal); color: var(--bv-teal-dark); }
.section-dark .brand-chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #fff; }
.section-dark .brand-chip .mono { background: rgba(0,166,166,.2); color: var(--bv-mint); }

.az-filter { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.az-filter button {
  min-width: 36px; height: 38px; padding: 0 .5rem; border-radius: 10px;
  border: 1px solid var(--bv-border); background: #fff; color: var(--bv-navy);
  font: 600 .85rem/1 var(--bv-font-head); transition: all .2s;
}
.az-filter button:hover { border-color: var(--bv-teal); color: var(--bv-teal-dark); }
.az-filter button.active { background: var(--bv-navy); border-color: var(--bv-navy); color: #fff; }
.az-filter button:disabled { opacity: .35; pointer-events: none; }
.brand-tile {
  position: relative; height: 100%; padding: 1.5rem 1.25rem; text-align: center;
  background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius);
  transition: all .3s var(--bv-ease); display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.brand-tile:hover { transform: translateY(-4px); box-shadow: var(--bv-shadow); border-color: transparent; }
.brand-tile .bl {
  width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
  font: 800 1.5rem/1 var(--bv-font-head); color: #fff;
  background: linear-gradient(145deg, var(--c1, var(--bv-teal)), var(--c2, var(--bv-navy)));
}
.brand-tile h3 { font-size: 1.02rem; margin: .25rem 0 0; }
.brand-tile small { color: var(--bv-muted); font-size: .8rem; }
.brand-tile .bcount { font-size: .75rem; font-weight: 600; color: var(--bv-teal-dark); background: var(--bv-teal-soft); padding: .2rem .6rem; border-radius: var(--bv-radius-pill); }

/* ----------------------------------------------------------------------------
   Why us
   ------------------------------------------------------------------------- */
.why-media { position: relative; padding: 0 2rem 2rem 0; }
.why-media .wm-main { border-radius: var(--bv-radius-lg); overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: var(--bv-shadow-lg); }
.why-media .wm-main img { width: 100%; height: 100%; object-fit: cover; }
.why-media .wm-sub { position: absolute; right: 0; bottom: 0; width: 46%; border-radius: var(--bv-radius); overflow: hidden; border: 6px solid #fff; box-shadow: var(--bv-shadow); aspect-ratio: 1; }
.why-media .wm-sub img { width: 100%; height: 100%; object-fit: cover; }
.why-media .wm-badge {
  position: absolute; left: -1rem; bottom: 18%;
  background: var(--bv-amber); color: var(--bv-navy); border-radius: var(--bv-radius);
  padding: 1rem 1.2rem; box-shadow: var(--bv-shadow); text-align: center;
}
.why-media .wm-badge strong { display: block; font: 800 2.2rem/1 var(--bv-font-head); }
.why-media .wm-badge span { font: 600 .78rem/1.2 var(--bv-font-head); text-transform: uppercase; letter-spacing: .06em; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.feature-item { display: flex; gap: .9rem; padding: 1.1rem; border-radius: var(--bv-radius); background: #fff; border: 1px solid var(--bv-border); transition: all .3s; }
.feature-item:hover { border-color: var(--bv-teal); box-shadow: var(--bv-shadow-sm); }
.feature-item .fi { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.2rem; background: var(--bv-navy); color: var(--bv-mint); }
.feature-item h3 { font-size: 1rem; margin: 0 0 .3rem; }
.feature-item p { font-size: .87rem; color: var(--bv-muted); margin: 0; line-height: 1.5; }

/* ----------------------------------------------------------------------------
   Services
   ------------------------------------------------------------------------- */
.service-card {
  position: relative; height: 100%; padding: 1.75rem 1.5rem; border-radius: var(--bv-radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: all .35s var(--bv-ease); overflow: hidden;
}
.service-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--bv-teal), var(--bv-amber)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--bv-ease); }
.service-card:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); }
.service-card:hover::after { transform: scaleX(1); }
.service-card .sc-num { position: absolute; top: 1.1rem; right: 1.3rem; font: 800 2.6rem/1 var(--bv-font-head); color: rgba(255,255,255,.06); }
.service-card .sc-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--bv-teal); color: #fff; display: grid; place-items: center; font-size: 1.45rem; margin-bottom: 1.25rem; }
.service-card h3 { font-size: 1.15rem; color: #fff; }
.service-card p { color: rgba(255,255,255,.65); font-size: .92rem; }
.service-card .link-arrow { color: var(--bv-amber); }

/* ----------------------------------------------------------------------------
   Clients
   ------------------------------------------------------------------------- */
.client-chip {
  display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap;
  padding: .7rem 1.2rem .7rem .7rem; border-radius: var(--bv-radius); background: #fff; border: 1px solid var(--bv-border);
}
.client-chip .cm { width: 40px; height: 40px; border-radius: 12px; background: var(--bv-surface); color: var(--bv-navy); display: grid; place-items: center; font-size: 1.15rem; }
.client-chip strong { display: block; font: 600 .92rem/1.2 var(--bv-font-head); color: var(--bv-navy); }
.client-chip small { color: var(--bv-muted); font-size: .76rem; }

/* ----------------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------------- */
.t-card { height: 100%; background: #fff; border-radius: var(--bv-radius); padding: 1.75rem; border: 1px solid var(--bv-border); position: relative; display: flex; flex-direction: column; }
.t-card .t-quote { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 2.6rem; color: var(--bv-teal-soft); line-height: 1; }
.t-card .t-stars { color: var(--bv-amber); letter-spacing: .1em; margin-bottom: 1rem; }
.t-card blockquote { font-size: 1.02rem; color: var(--bv-navy); margin: 0 0 1.5rem; flex: 1; }
.t-person { display: flex; align-items: center; gap: .8rem; }
.t-person .ta { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem/1 var(--bv-font-head); color: #fff; background: var(--bv-teal); }
.t-person strong { display: block; font-family: var(--bv-font-head); color: var(--bv-navy); }
.t-person small { color: var(--bv-muted); }
.swiper-nav { display: flex; gap: .5rem; }
.swiper-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bv-border); background: #fff; color: var(--bv-navy); display: grid; place-items: center; transition: all .2s; }
.swiper-nav button:hover { background: var(--bv-navy); color: #fff; border-color: var(--bv-navy); }
.swiper-pagination-bullet { background: var(--bv-navy); opacity: .2; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--bv-teal); width: 22px; border-radius: 5px; }
.swiper-slide { height: auto; }
.t-swiper { padding-bottom: 3rem !important; }

/* ----------------------------------------------------------------------------
   Branches
   ------------------------------------------------------------------------- */
.coverage-card {
  height: 100%; border-radius: var(--bv-radius-lg); padding: 2rem; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bv-teal) 0%, var(--bv-teal-dark) 100%);
}
.coverage-card h3 { color: #fff; font-size: 1.6rem; }
.coverage-card p { color: rgba(255,255,255,.85); }
.coverage-card .cc-num { font: 800 4rem/1 var(--bv-font-head); color: #fff; }
.coverage-card .cc-map { position: absolute; right: -30px; bottom: -30px; width: 220px; opacity: .2; }
.branch-card { height: 100%; padding: 1.35rem; border-radius: var(--bv-radius); background: #fff; border: 1px solid var(--bv-border); transition: all .3s; }
.branch-card:hover { border-color: var(--bv-teal); box-shadow: var(--bv-shadow-sm); }
.branch-card .bc-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.branch-card .bc-pin { width: 40px; height: 40px; border-radius: 12px; background: var(--bv-teal-soft); color: var(--bv-teal-dark); display: grid; place-items: center; }
.branch-card h3 { font-size: 1.02rem; margin: 0; }
.branch-card .bc-tag { font-size: .7rem; font-weight: 700; color: var(--bv-navy); background: var(--bv-amber); padding: .15rem .5rem; border-radius: var(--bv-radius-pill); margin-left: auto; }
.branch-card p { font-size: .88rem; color: var(--bv-muted); margin-bottom: .5rem; }
.branch-card a { font-weight: 600; font-size: .9rem; }

/* ----------------------------------------------------------------------------
   Quote / forms
   ------------------------------------------------------------------------- */
.quote-wrap { border-radius: var(--bv-radius-lg); overflow: hidden; box-shadow: var(--bv-shadow-lg); background: #fff; }
.quote-side {
  height: 100%; padding: clamp(1.75rem, 4vw, 3rem); color: rgba(255,255,255,.78); position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--bv-navy) 0%, var(--bv-navy-3) 100%);
}
.quote-side::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -100px; bottom: -100px; border: 40px solid rgba(0,166,166,.18); }
.quote-side h2 { color: #fff; }
.quote-perks { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.quote-perks li { display: flex; gap: .9rem; align-items: flex-start; }
.quote-perks .qi { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--bv-amber); display: grid; place-items: center; flex-shrink: 0; font-size: 1.15rem; }
.quote-perks strong { display: block; color: #fff; font-family: var(--bv-font-head); }
.quote-perks span { font-size: .88rem; }
.quote-form { padding: clamp(1.75rem, 4vw, 3rem); }
.form-label { font: 600 .85rem/1.2 var(--bv-font-head); color: var(--bv-navy); margin-bottom: .45rem; }
.form-control, .form-select {
  min-height: 50px; border-radius: 12px; border: 1px solid var(--bv-border); background-color: var(--bv-surface);
  font-size: .95rem; color: var(--bv-navy); padding: .7rem 1rem;
}
textarea.form-control { min-height: 120px; }
.form-control:focus, .form-select:focus { border-color: var(--bv-teal); background-color: #fff; box-shadow: 0 0 0 4px rgba(0,166,166,.15); }
.form-control::placeholder { color: #9aa8b8; }
.form-note { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--bv-muted); }
.form-note i { color: var(--bv-teal); }
.form-success { display: none; align-items: center; gap: .75rem; padding: 1rem; border-radius: 12px; background: #dcfce7; color: #166534; font-weight: 500; }
.form-success.show { display: flex; }

/* ----------------------------------------------------------------------------
   Blog cards
   ------------------------------------------------------------------------- */
.b-card { height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: var(--bv-radius); overflow: hidden; border: 1px solid var(--bv-border); transition: all .35s var(--bv-ease); }
.b-card:hover { transform: translateY(-6px); box-shadow: var(--bv-shadow); border-color: transparent; }
.b-card .b-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.b-card .b-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bv-ease); }
.b-card:hover .b-media img { transform: scale(1.06); }
.b-card .b-cat { position: absolute; left: 1rem; top: 1rem; background: #fff; color: var(--bv-navy); padding: .3rem .75rem; border-radius: var(--bv-radius-pill); font: 600 .75rem/1.2 var(--bv-font-head); }
.b-card .b-date {
  position: absolute; right: 1rem; bottom: 1rem; width: 58px; height: 58px; border-radius: 16px;
  background: var(--bv-amber); color: var(--bv-navy); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 800 1.2rem/1 var(--bv-font-head); box-shadow: var(--bv-shadow-sm);
}
.b-card .b-date small { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem; }
.b-card .b-body { padding: 1.5rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.b-card .b-meta { font-size: .8rem; color: var(--bv-muted); display: flex; gap: 1rem; margin-bottom: .6rem; }
.b-card .b-meta i { color: var(--bv-teal); margin-right: .25rem; }
.b-card h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 .6rem; }
.b-card h3 a { color: var(--bv-navy); }
.b-card h3 a:hover { color: var(--bv-teal-dark); }
.b-card p { font-size: .9rem; color: var(--bv-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-card .link-arrow { margin-top: auto; }
.b-card.is-bn h3, .b-card.is-bn p { font-family: var(--bv-font-bn); }
.b-card.is-bn p { font-size: .98rem; }

.b-feature { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--bv-radius-lg); overflow: hidden; background: var(--bv-navy); color: rgba(255,255,255,.75); }
.b-feature .bf-media { min-height: 320px; position: relative; }
.b-feature .bf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-feature .bf-body { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.b-feature h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.b-feature .b-meta { font-size: .85rem; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.b-feature .b-meta i { color: var(--bv-mint); }

/* Filter pills (blog / gallery) */
.pill-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill-filter button {
  padding: .6rem 1.15rem; min-height: 42px; border-radius: var(--bv-radius-pill); border: 1px solid var(--bv-border);
  background: #fff; color: var(--bv-navy); font: 600 .88rem/1 var(--bv-font-head); transition: all .2s;
}
.pill-filter button:hover { border-color: var(--bv-teal); color: var(--bv-teal-dark); }
.pill-filter button.active { background: var(--bv-teal); border-color: var(--bv-teal); color: #fff; }
.btn-reason {
  display: inline-flex; align-items: center; padding: .6rem 1.15rem; min-height: 42px; border-radius: var(--bv-radius-pill);
  border: 1px solid var(--bv-border); background: var(--bv-surface); color: var(--bv-navy); font: 600 .88rem/1 var(--bv-font-head); cursor: pointer; transition: all .2s;
}
.btn-reason:hover { border-color: var(--bv-teal); }
.btn-check:checked + .btn-reason { background: var(--bv-navy); border-color: var(--bv-navy); color: #fff; }
.btn-check:focus-visible + .btn-reason { box-shadow: 0 0 0 4px rgba(0,166,166,.25); }
.pill-filter button .cnt { font-size: .72rem; opacity: .65; margin-left: .3rem; }

/* ----------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.bv-accordion .accordion-item { border: 1px solid var(--bv-border); border-radius: var(--bv-radius) !important; margin-bottom: .85rem; overflow: hidden; background: #fff; }
.bv-accordion .accordion-button {
  font: 600 1rem/1.4 var(--bv-font-head); color: var(--bv-navy); padding: 1.15rem 1.25rem; gap: 1rem; background: #fff; box-shadow: none !important;
}
.bv-accordion .accordion-button .q-num { font-size: .8rem; color: var(--bv-teal); font-weight: 800; flex-shrink: 0; }
.bv-accordion .accordion-button::after {
  width: 32px; height: 32px; border-radius: 50%; background-color: var(--bv-surface); background-position: center; background-size: 14px; flex-shrink: 0;
}
.bv-accordion .accordion-button:not(.collapsed) { color: var(--bv-teal-dark); }
.bv-accordion .accordion-button:not(.collapsed)::after { background-color: var(--bv-teal-soft); }
.bv-accordion .accordion-body { padding: 0 1.25rem 1.25rem 3.2rem; color: var(--bv-muted); }
.faq-aside { border-radius: var(--bv-radius-lg); overflow: hidden; position: relative; background: var(--bv-navy); color: #fff; }
.faq-aside img { width: 100%; height: 260px; object-fit: cover; opacity: .8; }
.faq-aside .fa-body { padding: 1.75rem; }
.faq-aside h3 { color: #fff; font-size: 1.35rem; }
.faq-aside p { color: rgba(255,255,255,.7); }

/* ----------------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--bv-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(120deg, var(--bv-teal-dark) 0%, var(--bv-teal) 60%, #22c1b4 100%); color: #fff;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 85% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 85% 50%, #000, transparent 65%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band .cta-phones { font-size: .9rem; color: rgba(255,255,255,.85); }

/* ----------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.bv-footer { background: var(--bv-navy); color: rgba(255,255,255,.65); position: relative; overflow: hidden; }
.bv-footer::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -200px; top: -260px; background: radial-gradient(circle, rgba(0,166,166,.22), transparent 70%); }
.bv-footer .container { position: relative; }
.footer-news { border-bottom: 1px solid rgba(255,255,255,.08); padding: 2.5rem 0; }
.footer-news h3 { color: #fff; font-size: 1.35rem; margin: 0; }
.news-form { display: flex; gap: .5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--bv-radius-pill); padding: .35rem; }
.news-form input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 0 1rem; outline: none; }
.news-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-main { padding: 3.5rem 0 2.5rem; }
.bv-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.2rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .92rem; display: inline-flex; align-items: center; }
.footer-links a::before { content: ""; width: 0; height: 2px; background: var(--bv-amber); transition: width .25s, margin .25s; }
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { width: 10px; margin-right: .45rem; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; font-size: .92rem; }
.footer-contact li { display: flex; gap: .75rem; }
.footer-contact i { color: var(--bv-mint); margin-top: .15rem; }
.footer-contact a { color: rgba(255,255,255,.8); }
.footer-contact a:hover { color: var(--bv-amber); }
.social-row { display: flex; gap: .5rem; }
.social-row a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #fff; transition: all .2s; }
.social-row a:hover { background: var(--bv-teal); transform: translateY(-2px); }
.footer-certs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.footer-certs span { border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: .3rem .6rem; font: 600 .72rem/1 var(--bv-font-head); color: rgba(255,255,255,.75); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.25rem 0; font-size: .85rem; }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-bottom a:hover { color: #fff; }

/* ----------------------------------------------------------------------------
   Mobile bottom bar, back-to-top, WhatsApp
   ------------------------------------------------------------------------- */
.bv-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: none; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--bv-border); box-shadow: 0 -8px 24px rgba(10,37,64,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.bv-mobilebar a, .bv-mobilebar button {
  height: var(--bv-mobilebar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  font: 600 .7rem/1 var(--bv-font-head); color: var(--bv-navy); background: none; border: 0;
}
.bv-mobilebar i { font-size: 1.25rem; }
.bv-mobilebar .mb-wa i { color: #25d366; }
.bv-mobilebar .mb-quote { position: relative; }
.bv-mobilebar .mb-quote span.mbq { width: 46px; height: 46px; border-radius: 50%; background: var(--bv-amber); display: grid; place-items: center; margin-top: -26px; box-shadow: 0 8px 18px -6px rgba(242,157,31,.9); border: 4px solid #fff; }
.bv-mobilebar .mb-quote span.mbq i { font-size: 1.1rem; }

.back-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1035; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bv-navy); color: #fff; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; box-shadow: var(--bv-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s;
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: var(--bv-teal); }
.wa-float {
  position: fixed; right: 1.25rem; bottom: 5rem; z-index: 1035; width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 10px 24px -8px rgba(37,211,102,.8);
}
.wa-float:hover { color: #fff; transform: scale(1.06); }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ping 2s infinite; }
@keyframes ping { 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ----------------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------------- */
.bv-modal .modal-content { border: 0; border-radius: var(--bv-radius-lg); overflow: hidden; }
.bv-modal .modal-header { border: 0; padding: 1.5rem 1.5rem 0; }
.bv-modal .modal-body { padding: 1.25rem 1.5rem 1.5rem; }
.bv-modal .btn-close { background-color: var(--bv-surface); border-radius: 50%; padding: .75rem; opacity: 1; }
.qv-media { background: var(--bv-surface); border-radius: var(--bv-radius); aspect-ratio: 1; display: grid; place-items: center; padding: 1.5rem; }
.qv-media img { max-height: 100%; }

/* ----------------------------------------------------------------------------
   Inner page hero
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden; color: rgba(255,255,255,.75);
  background: var(--bv-navy); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(0,166,166,.45), transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); font-weight: 800; margin: 1rem 0 .75rem; }
.page-hero p { max-width: 620px; font-size: 1.05rem; }
.page-hero .ph-shape { position: absolute; right: 6%; bottom: -1px; width: 260px; opacity: .9; z-index: 1; }
.bv-breadcrumb { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: .4rem; list-style: none; margin: 1.5rem 0 0; padding: .45rem 1rem; border-radius: var(--bv-radius-pill); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.bv-breadcrumb a { color: #fff; }
.bv-breadcrumb a:hover { color: var(--bv-amber); }
.bv-breadcrumb li + li::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .65rem; margin-right: .4rem; color: var(--bv-mint); }
.bv-breadcrumb li:last-child { color: var(--bv-amber); }
.crumb-bar { background: var(--bv-surface); border-bottom: 1px solid var(--bv-border); }
.bv-breadcrumb.is-light { background: transparent; border: 0; padding: 1rem 0; margin: 0; border-radius: 0; color: var(--bv-muted); }
.bv-breadcrumb.is-light a { color: var(--bv-navy); }
.bv-breadcrumb.is-light a:hover { color: var(--bv-teal-dark); }
.bv-breadcrumb.is-light li:last-child { color: var(--bv-teal-dark); max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-breadcrumb.is-light li + li::before { color: var(--bv-muted); }
.page-hero-wave { display: block; width: 100%; height: 40px; margin-top: -39px; position: relative; z-index: 2; }

/* ----------------------------------------------------------------------------
   Products listing page
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .filter-offcanvas { position: sticky; top: calc(var(--bv-header-h) + 1rem); }
  .filter-offcanvas .offcanvas-body { display: block; }
}
.filter-panel { width: 100%; background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius); padding: 1.25rem; }
.filter-group + .filter-group { border-top: 1px solid var(--bv-border); margin-top: 1.1rem; padding-top: 1.1rem; }
.filter-group h3 { font-size: .95rem; margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: center; }
.filter-search { position: relative; }
.filter-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bv-muted); }
.filter-search input { padding-left: 2.6rem; }
.filter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; max-height: 260px; overflow-y: auto; }
.filter-list label { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--bv-text); }
.filter-list label:hover { background: var(--bv-surface); }
.filter-list .form-check-input { margin: 0; width: 1.1rem; height: 1.1rem; border-color: #b8c6d4; }
.filter-list .form-check-input:checked { background-color: var(--bv-teal); border-color: var(--bv-teal); }
.filter-list .cnt { margin-left: auto; font-size: .75rem; color: var(--bv-muted); background: var(--bv-surface); padding: .1rem .5rem; border-radius: var(--bv-radius-pill); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .75rem .75rem 1.1rem; background: var(--bv-surface); border-radius: var(--bv-radius); margin-bottom: 1.5rem; }
.toolbar .tb-count { font-size: .92rem; color: var(--bv-muted); }
.toolbar .tb-count strong { color: var(--bv-navy); }
.toolbar .tb-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.toolbar .form-select { min-height: 44px; background-color: #fff; min-width: 190px; width: auto; }
.filter-list { scrollbar-width: thin; scrollbar-color: var(--bv-border) transparent; }
.view-toggle { display: inline-flex; background: #fff; border-radius: 12px; border: 1px solid var(--bv-border); padding: 3px; }
.view-toggle button { width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--bv-muted); }
.view-toggle button.active { background: var(--bv-navy); color: #fff; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: -0.75rem 0 1.25rem; }
.active-filters:empty { display: none; }
.active-filters .af { display: inline-flex; align-items: center; gap: .35rem; background: var(--bv-teal-soft); color: var(--bv-teal-dark); border: 0; padding: .35rem .75rem; border-radius: var(--bv-radius-pill); font-size: .8rem; font-weight: 600; }
.empty-state { text-align: center; padding: 3rem 1rem; border: 2px dashed var(--bv-border); border-radius: var(--bv-radius); color: var(--bv-muted); }
.empty-state i { font-size: 2.5rem; color: var(--bv-teal); }
.load-more-wrap { text-align: center; margin-top: 2.5rem; }
.load-progress { width: 220px; height: 4px; background: var(--bv-border); border-radius: 4px; margin: .75rem auto 1.25rem; overflow: hidden; }
.load-progress span { display: block; height: 100%; background: var(--bv-teal); border-radius: 4px; transition: width .4s var(--bv-ease); }
.btn-filter-mobile { display: none; position: relative; }
.btn-filter-mobile .fb-badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--bv-amber); color: var(--bv-navy); font-size: .7rem; display: inline-grid; place-items: center; padding: 0 5px; }
.btn-filter-mobile .fb-badge:empty { display: none !important; }
.pd-accordion .accordion-button { gap: .75rem; }

/* ----------------------------------------------------------------------------
   Product details
   ------------------------------------------------------------------------- */
.pd-gallery { position: sticky; top: calc(var(--bv-header-h) + 1rem); }
.pd-main {
  position: relative; border-radius: var(--bv-radius-lg); aspect-ratio: 1 / .9; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #fff 0%, var(--bv-surface) 70%); border: 1px solid var(--bv-border);
  display: grid; place-items: center;
}
.pd-main img { width: 82%; height: 82%; object-fit: contain; transition: transform .4s var(--bv-ease); }
.pd-main:hover img { transform: scale(1.04); }
.pd-main .pd-zoom { position: absolute; right: 1rem; bottom: 1rem; }
.pd-main .p-badges { position: absolute; left: 1rem; top: 1rem; display: flex; gap: .4rem; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-top: .75rem; }
.pd-thumbs button { aspect-ratio: 1; border-radius: var(--bv-radius-sm); border: 2px solid var(--bv-border); background: var(--bv-surface); padding: .5rem; transition: border-color .2s; }
.pd-thumbs button.active, .pd-thumbs button:hover { border-color: var(--bv-teal); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-brand { display: inline-flex; align-items: center; gap: .5rem; font: 700 .78rem/1 var(--bv-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--bv-teal-dark); }
.pd-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); font-weight: 800; margin: .75rem 0 1rem; }
.pd-summary { color: var(--bv-muted); font-size: 1.02rem; }
.pd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--bv-border); border-radius: var(--bv-radius); overflow: hidden; margin: 1.5rem 0; }
.pd-facts div { padding: .85rem 1rem; border-bottom: 1px solid var(--bv-border); }
.pd-facts div:nth-child(odd) { border-right: 1px solid var(--bv-border); }
.pd-facts div:nth-last-child(-n+2) { border-bottom: 0; }
.pd-facts small { display: block; color: var(--bv-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.pd-facts strong { font-family: var(--bv-font-head); color: var(--bv-navy); font-size: .95rem; }
.pd-highlights { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.pd-highlights li { display: flex; gap: .55rem; font-size: .92rem; align-items: flex-start; }
.pd-highlights i { color: var(--bv-teal); margin-top: .15rem; }
.pd-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.pd-perk { border-radius: var(--bv-radius); padding: 1rem; background: var(--bv-surface); text-align: center; }
.pd-perk i { font-size: 1.4rem; color: var(--bv-teal); }
.pd-perk strong { display: block; font: 700 .88rem/1.3 var(--bv-font-head); color: var(--bv-navy); margin-top: .35rem; }
.pd-perk small { color: var(--bv-muted); font-size: .76rem; }
.pd-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.pd-cta > * { flex: 1 1 auto; }
.pd-hotline { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--bv-radius); border: 1px dashed var(--bv-teal); background: var(--bv-teal-soft); }
.pd-hotline .hi { width: 46px; height: 46px; border-radius: 50%; background: var(--bv-teal); color: #fff; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; animation: ring 2.5s infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 5%, 15% { transform: rotate(-12deg); } 10%, 20% { transform: rotate(12deg); } 25% { transform: rotate(0); } }
.pd-hotline small { color: var(--bv-muted); display: block; font-size: .78rem; }
.pd-hotline a { font: 700 1rem/1.3 var(--bv-font-head); color: var(--bv-navy); }
.pd-share { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .88rem; color: var(--bv-muted); }
.pd-share a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bv-border); display: grid; place-items: center; color: var(--bv-navy); }
.pd-share a:hover { background: var(--bv-navy); color: #fff; }

.pd-tabs { border: 0; gap: .4rem; background: var(--bv-surface); padding: .4rem; border-radius: var(--bv-radius-pill); display: inline-flex; flex-wrap: wrap; }
.pd-tabs .nav-link { border: 0 !important; border-radius: var(--bv-radius-pill); color: var(--bv-navy); font: 600 .9rem/1 var(--bv-font-head); padding: .8rem 1.25rem; }
.pd-tabs .nav-link.active { background: var(--bv-navy); color: #fff; }
.pd-panel { padding: 2rem 0 0; }
.pd-panel h3 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
.pd-panel h3:first-child { margin-top: 0; }
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bv-border); border-radius: var(--bv-radius); overflow: hidden; font-size: .93rem; }
.spec-table th, .spec-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--bv-border); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 36%; background: var(--bv-surface); color: var(--bv-navy); font-family: var(--bv-font-head); font-weight: 600; }
.spec-table tr:hover td { background: #fbfdfe; }
.doc-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--bv-border); border-radius: var(--bv-radius); }
.doc-item .di { width: 46px; height: 46px; border-radius: 12px; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.doc-item strong { display: block; color: var(--bv-navy); font-family: var(--bv-font-head); font-size: .95rem; }
.doc-item small { color: var(--bv-muted); }
.doc-item .btn-icon { margin-left: auto; }
.video-box { position: relative; border-radius: var(--bv-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bv-navy); }
.video-box img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-box .play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: var(--bv-amber); color: var(--bv-navy); display: grid; place-items: center; font-size: 2rem; border: 0; }
.video-box .play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,181,71,.6); animation: ping 2s infinite; }
.pd-accordion { display: none; }

/* ----------------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------------- */
.g-masonry { columns: 3 300px; column-gap: 1rem; }
.g-item { break-inside: avoid; margin-bottom: 1rem; position: relative; border-radius: var(--bv-radius); overflow: hidden; display: block; transition: opacity .35s, transform .35s; }
.g-item img { width: 100%; display: block; transition: transform .6s var(--bv-ease); }
.g-item.tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.g-item.wide img { aspect-ratio: 4 / 3; object-fit: cover; }
.g-item.square img { aspect-ratio: 1; object-fit: cover; }
.g-item .g-cap {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem 1rem; color: #fff;
  background: linear-gradient(transparent, rgba(10,37,64,.9));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  transform: translateY(30%); opacity: 0; transition: all .35s var(--bv-ease);
}
.g-item .g-cap strong { display: block; font-family: var(--bv-font-head); }
.g-item .g-cap small { color: var(--bv-mint); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.g-item .g-cap .gz { width: 40px; height: 40px; border-radius: 50%; background: var(--bv-amber); color: var(--bv-navy); display: grid; place-items: center; flex-shrink: 0; }
.g-item:hover img { transform: scale(1.06); }
.g-item:hover .g-cap, .g-item:focus .g-cap { transform: none; opacity: 1; }
.g-item.is-hidden { display: none; }
.g-count { color: var(--bv-muted); font-size: .92rem; }
.g-count strong { color: var(--bv-navy); }

/* ----------------------------------------------------------------------------
   Licenses
   ------------------------------------------------------------------------- */
.cert-card {
  position: relative; height: 100%; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--bv-radius);
  background: #fff; border: 1px solid var(--bv-border); overflow: hidden; transition: all .35s var(--bv-ease);
}
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--bv-shadow); border-color: transparent; }
.cert-card .cc-seal {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 0deg, var(--bv-teal), var(--bv-amber), var(--bv-teal));
  padding: 4px; margin-bottom: 1.1rem;
}
.cert-card .cc-seal span { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--bv-navy); font-size: 1.6rem; }
.cert-card .cc-since { position: absolute; top: 1.25rem; right: 1.25rem; font: 600 .75rem/1 var(--bv-font-head); background: var(--bv-surface); color: var(--bv-navy); padding: .4rem .7rem; border-radius: var(--bv-radius-pill); }
.cert-card h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.cert-card .cc-issuer { font-size: .85rem; color: var(--bv-teal-dark); font-weight: 600; margin-bottom: .75rem; }
.cert-card p { font-size: .9rem; color: var(--bv-muted); }
.cert-card .cc-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--bv-border); padding-top: 1rem; margin-top: 1rem; font-size: .82rem; }
.cert-card .cc-status { color: #15803d; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; }

.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--bv-teal), var(--bv-amber)); transform: translateX(-50%); }
.tl-item { position: relative; width: 50%; padding: 0 2.5rem 2.5rem 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 2.5rem 2.5rem; }
.tl-item .tl-dot { position: absolute; top: .5rem; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--bv-teal); box-shadow: 0 0 0 5px rgba(0,166,166,.15); }
.tl-item:nth-child(even) .tl-dot { right: auto; left: -11px; border-color: var(--bv-amber); box-shadow: 0 0 0 5px rgba(255,181,71,.2); }
.tl-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--bv-radius); padding: 1.35rem 1.5rem; }
.tl-card .tl-year { font: 800 1.9rem/1 var(--bv-font-head); color: var(--bv-amber); }
.tl-card h3 { font-size: 1.1rem; margin: .5rem 0 .3rem; }
.tl-card p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.65); }
.tl-card .tl-ic { float: right; font-size: 1.6rem; color: var(--bv-mint); }

/* ----------------------------------------------------------------------------
   MD / CEO message
   ------------------------------------------------------------------------- */
.ceo-card { position: sticky; top: calc(var(--bv-header-h) + 1rem); border-radius: var(--bv-radius-lg); overflow: hidden; background: #fff; box-shadow: var(--bv-shadow); }
.ceo-card .ceo-photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--bv-surface); }
.ceo-card .ceo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ceo-card .ceo-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(10,37,64,.7)); }
.ceo-card .ceo-body { padding: 1.5rem; }
.ceo-card h2 { font-size: 1.5rem; margin: 0; }
.ceo-card .ceo-role { color: var(--bv-teal-dark); font-weight: 600; font-size: .92rem; }
.ceo-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.ceo-tags span { font-size: .78rem; font-weight: 600; padding: .35rem .7rem; border-radius: var(--bv-radius-pill); background: var(--bv-surface); color: var(--bv-navy); }
.ceo-tags i { color: var(--bv-teal); margin-right: .25rem; }
.letter-card {
  position: relative; border-radius: var(--bv-radius-lg); padding: clamp(1.75rem, 5vw, 3.5rem);
  background-color: #fffdf8; border: 1px solid #f0e9da; box-shadow: var(--bv-shadow);
  background-image: repeating-linear-gradient(transparent, transparent 35px, rgba(10,37,64,.05) 35px, rgba(10,37,64,.05) 36px);
}
.letter-card::before { content: ""; position: absolute; left: clamp(1rem, 3vw, 2rem); top: 0; bottom: 0; width: 2px; background: rgba(226,68,92,.2); }
.letter-card .lc-quote { position: absolute; top: -26px; right: 2rem; width: 64px; height: 64px; border-radius: 18px; background: var(--bv-amber); color: var(--bv-navy); display: grid; place-items: center; font-size: 2rem; box-shadow: var(--bv-shadow); }
.letter-card .lc-inner { padding-left: clamp(.5rem, 2vw, 1.5rem); }
.letter-card p { font-size: 1.04rem; line-height: 2.15; margin-bottom: 1rem; color: #3b4d61; }
.letter-card .lc-hello { font: 700 1.2rem/1.4 var(--bv-font-head); color: var(--bv-navy); }
.letter-card .lc-lead::first-letter { float: left; font: 800 3.4rem/.85 var(--bv-font-head); color: var(--bv-teal); margin: .35rem .6rem 0 0; }
.signature { font-family: var(--bv-font-sign); font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); color: var(--bv-navy); line-height: 1; margin: .5rem 0 .25rem; transform: rotate(-4deg); display: inline-block; }
.mini-stat { text-align: center; padding: 1.35rem 1rem; border-radius: var(--bv-radius); background: #fff; border: 1px solid var(--bv-border); height: 100%; }
.mini-stat strong { display: block; font: 800 2rem/1 var(--bv-font-head); color: var(--bv-teal); }
.mini-stat span { font-size: .85rem; color: var(--bv-muted); }
.values-list { display: grid; gap: .9rem; }
.value-item { display: flex; gap: .9rem; align-items: flex-start; }
.value-item .vi { width: 40px; height: 40px; border-radius: 12px; background: var(--bv-teal-soft); color: var(--bv-teal-dark); display: grid; place-items: center; flex-shrink: 0; }
.value-item strong { display: block; font-family: var(--bv-font-head); color: var(--bv-navy); }
.value-item span { font-size: .9rem; color: var(--bv-muted); }

/* ----------------------------------------------------------------------------
   Blog details
   ------------------------------------------------------------------------- */
.article-cover { border-radius: var(--bv-radius-lg); overflow: hidden; aspect-ratio: 16 / 8; margin-bottom: 2rem; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--bv-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.article-meta i { color: var(--bv-teal); margin-right: .3rem; }
.article-body { font-size: 1.06rem; line-height: 1.9; color: #3b4d61; }
.article-body h3 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
.article-body ul { padding-left: 1.2rem; }
.article-body li { margin-bottom: .4rem; }
.article-body li::marker { color: var(--bv-teal); }
.article-body.is-bn { font-family: var(--bv-font-bn); font-size: 1.12rem; }
.article-body.is-bn h3 { font-family: var(--bv-font-bn); }
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--bv-border); }
.article-tags a { padding: .4rem .85rem; border-radius: var(--bv-radius-pill); background: var(--bv-surface); color: var(--bv-navy); font-size: .85rem; }
.article-tags a:hover { background: var(--bv-teal); color: #fff; }
.side-widget { background: #fff; border: 1px solid var(--bv-border); border-radius: var(--bv-radius); padding: 1.35rem; margin-bottom: 1.25rem; }
.side-widget h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.side-post { display: flex; gap: .85rem; align-items: center; padding: .6rem 0; }
.side-post + .side-post { border-top: 1px solid var(--bv-border); }
.side-post img { width: 72px; height: 62px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.side-post a { font: 600 .9rem/1.35 var(--bv-font-head); color: var(--bv-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post small { color: var(--bv-muted); font-size: .78rem; }
.side-cats { list-style: none; padding: 0; margin: 0; }
.side-cats a { display: flex; justify-content: space-between; padding: .55rem 0; color: var(--bv-text); border-bottom: 1px dashed var(--bv-border); }
.side-cats li:last-child a { border-bottom: 0; }
.side-cats a:hover { color: var(--bv-teal-dark); }

/* ----------------------------------------------------------------------------
   Contact & 404
   ------------------------------------------------------------------------- */
.contact-card { height: 100%; padding: 1.5rem; border-radius: var(--bv-radius); background: #fff; border: 1px solid var(--bv-border); display: flex; gap: 1rem; transition: all .3s; }
.contact-card:hover { box-shadow: var(--bv-shadow-sm); border-color: var(--bv-teal); }
.contact-card .ci { width: 52px; height: 52px; border-radius: 14px; background: var(--bv-navy); color: var(--bv-amber); display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.contact-card p, .contact-card a { margin: 0; font-size: .92rem; color: var(--bv-muted); }
.contact-card a:hover { color: var(--bv-teal-dark); }
.map-box { border-radius: var(--bv-radius-lg); overflow: hidden; height: 100%; min-height: 360px; border: 1px solid var(--bv-border); }
.map-box iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.nf-wrap { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.nf-code { font: 800 clamp(6rem, 4rem + 10vw, 11rem)/1 var(--bv-font-head); letter-spacing: -.05em; background: linear-gradient(135deg, var(--bv-navy), var(--bv-teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-code span { display: inline-block; animation: floaty 4s ease-in-out infinite; color: var(--bv-amber); -webkit-text-fill-color: var(--bv-amber); }

/* AOS: avoid horizontal scroll from translate animations */
[data-aos] { will-change: transform, opacity; }