/* ==========================================================================
   Vivotics marketing site — ClickUp-inspired landing (loads after theme css)
   ========================================================================== */
:root {
    --vf-teal: #026c62;
    --vf-ink: #16161e;
    --vf-text: #35363f;
    --vf-muted: #6b7280;
    --vf-line: #e9eaee;
    --vf-bg: #ffffff;
    --vf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body { font-family: var(--vf-font) !important; color: var(--vf-text); background: #fff; }

/* ---- NAV ---- */
.viv-nav {
    position: sticky; top: 0; z-index: 999;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vf-line);
}
.viv-nav-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; gap: 28px;
    padding: 14px 24px;
}
.viv-nav-brand img { max-height: 34px; }
.viv-nav-links {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0 auto; padding: 0;
}
.viv-nav-links a {
    display: inline-block; padding: 9px 14px;
    color: var(--vf-ink); font-weight: 600; font-size: 14.5px;
    border-radius: 10px; text-decoration: none;
}
.viv-nav-links a:hover { background: #f3f4f6; color: var(--vf-ink); }
.viv-nav-actions { display: flex; align-items: center; gap: 10px; }
.viv-btn-ghost {
    padding: 9px 16px; border-radius: 10px;
    background: #f3f4f6; color: var(--vf-ink) !important;
    font-weight: 600; font-size: 14px; text-decoration: none !important;
}
.viv-btn-ghost:hover { background: #e9eaee; }
.viv-btn-dark {
    display: inline-block;
    padding: 13px 26px; border-radius: 12px;
    background: var(--vf-ink); color: #fff !important;
    font-weight: 700; font-size: 15.5px; text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(22,22,30,.22);
    transition: transform .1s ease, box-shadow .12s ease, background .12s ease;
}
.viv-btn-dark:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22,22,30,.28); }
.viv-btn-dark.viv-btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; box-shadow: none; }
.viv-nav-burger { display: none; border: none; background: none; font-size: 26px; margin-left: auto; }

/* ---- HERO ---- */
.viv-hero { background: #fff; overflow: hidden; padding-top: 96px; /* clear the fixed saas nav (88px) */ }
.viv-hero-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px;
    padding: 64px 24px 80px; align-items: center;
}
.viv-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--vf-ink);
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
    margin-bottom: 22px;
}
.viv-hero-title {
    font-size: clamp(40px, 5.4vw, 68px);
    line-height: 1.02; letter-spacing: -0.035em;
    font-weight: 800; color: var(--vf-ink);
    margin: 0 0 26px;
}
.viv-hero-checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.viv-hero-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; color: var(--vf-text); }
.viv-hero-checks b { color: var(--vf-ink); }
.viv-hero-checks i { color: #6f5cf1; font-size: 18px; margin-top: 2px; }
.viv-hero-cta { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.viv-hero-cta-note { display: grid; font-size: 13.5px; color: var(--vf-muted); }
.viv-hero-tagline { font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; color: var(--vf-muted); margin-bottom: 12px; }
.viv-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.viv-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--vf-ink);
    background: #fff;
}
.viv-pill.active { border-color: var(--vf-teal); color: var(--vf-teal); box-shadow: 0 0 0 3px rgba(2,108,98,.08); }
.viv-pill:hover { border-color: #c9cdd4; }

/* ---- HERO MOCKUP (mirrors app list view) ---- */
.viv-hero-shot { position: relative; }
.viv-hero-shot::before {
    content: ""; position: absolute; inset: -8% -6% -10% -6%;
    background: radial-gradient(60% 60% at 60% 40%, rgba(2,108,98,.10), transparent 70%);
    z-index: 0;
}
.viv-mock {
    position: relative; z-index: 1;
    background: #fff; border: 1px solid var(--vf-line);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 70px rgba(16,24,40,.16);
}
.viv-mock-top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--vf-line); background: #fbfcfd;
}
.viv-mock-ws {
    width: 26px; height: 26px; border-radius: 8px; background: var(--vf-teal);
    color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.viv-mock-search {
    flex: 1; max-width: 300px; margin: 0 auto;
    background: #fff; border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 5px 14px; font-size: 12px; color: var(--vf-muted);
}
.viv-mock-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: #6f5cf1;
    color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.viv-mock-body { display: flex; }
.viv-mock-side { background: #171e2e; padding: 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.viv-mock-side-item {
    width: 34px; height: 34px; border-radius: 9px; color: #aeb6c7;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.viv-mock-side-item.active { background: var(--vf-teal); color: #fff; }
.viv-mock-main { flex: 1; padding: 14px 18px 18px; }
.viv-mock-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.viv-mock-tabs span {
    font-size: 12px; font-weight: 600; color: var(--vf-muted);
    padding: 5px 10px; border-radius: 7px; display: inline-flex; gap: 5px; align-items: center;
}
.viv-mock-tabs span.active { color: var(--vf-ink); box-shadow: inset 0 -2px 0 var(--vf-teal); }
.viv-mock-group { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.viv-mock-group.mt { margin-top: 16px; }
.viv-mock-pill { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 3px 10px; border-radius: 5px; }
.viv-mock-count { color: var(--vf-muted); font-size: 11px; font-weight: 700; }
.viv-mock-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid #f1f2f5; font-size: 13px;
}
.viv-mock-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.viv-mock-row .t { flex: 1; color: var(--vf-ink); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viv-mock-row.done .t { color: var(--vf-muted); text-decoration: line-through; }
.viv-mock-row .d { color: var(--vf-muted); font-size: 12px; }
.viv-mock-av {
    width: 20px; height: 20px; border-radius: 50%; color: #fff;
    font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ---- Sections shared polish ---- */
.section { font-family: var(--vf-font); }
.section-header h2 { font-weight: 800; letter-spacing: -0.02em; color: var(--vf-ink); }
.btn-success, .btn-info { border-radius: 12px !important; font-weight: 700 !important; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .viv-hero-inner { grid-template-columns: 1fr; padding: 40px 20px 60px; }
    .viv-hero-shot { display: none; }
    .viv-nav-links { display: none; }
    .viv-nav.open .viv-nav-links {
        display: grid; position: absolute; top: 62px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--vf-line); padding: 10px 16px 16px;
    }
    .viv-nav-burger { display: block; }
    .viv-nav-actions { margin-left: auto; }
}

/* ==========================================================================
   SAAS template nav restyle (works with existing saas_header blade)
   ========================================================================== */
.navigation-bar {
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vf-line);
    box-shadow: none !important;
}
.navigation-bar .navbar { padding: 10px 0 !important; }
.navigation-bar .navbar-nav .nav-link {
    color: var(--vf-ink) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 9px 14px !important;
    border-radius: 10px;
}
.navigation-bar .navbar-nav .nav-link:hover { background: #f3f4f6; }
.navigation-bar .btn-border {
    border: none !important;
    background: #f3f4f6 !important;
    color: var(--vf-ink) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
}
.navigation-bar .btn-border:hover { background: #e9eaee !important; }
.navigation-bar .btn-menu-signup {
    background: var(--vf-ink) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border: none !important;
}
.navigation-bar .btn-menu-signup:hover { background: #000 !important; }

/* Hero section wrapper from saas template shouldn't fight ours */
.section-hero, .banner { background: #fff !important; }

/* Landing sections below hero: cleaner cards & headings */
.section-title h2, .section h2 { font-weight: 800 !important; letter-spacing: -0.02em; color: var(--vf-ink) !important; }
.card, .feature-box, .price-box { border-radius: 14px !important; }

/* ==========================================================================
   PRICING PAGE — clean tiers (ClickUp style)
   ========================================================================== */
.pricing-section, .price-plan-section { background: #fff; }
.price-box, .pricing__item, .package-box, .card.pricing {
    border: 1px solid var(--vf-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 16px rgba(16,24,40,.06) !important;
    transition: transform .12s ease, box-shadow .12s ease;
    overflow: hidden;
}
.price-box:hover, .pricing__item:hover, .package-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(16,24,40,.12) !important;
}
.price-box .btn, .pricing__item .btn, .package-box .btn, .pricing .btn {
    background: var(--vf-ink) !important; color: #fff !important;
    border-radius: 12px !important; font-weight: 700 !important; border: none !important;
}
.price-box .btn:hover, .pricing__item .btn:hover { background: #000 !important; }
.price-box h3, .pricing__item h3, .package-box h3 { font-weight: 800 !important; color: var(--vf-ink) !important; }
.pricing-section .fa-check, .price-box .fa-check { color: var(--vf-teal) !important; }
/* Monthly/annual toggle pills */
.pricing-toggle .btn, [onclick*="planShow"] {
    border-radius: 999px !important; font-weight: 600 !important;
}

/* ==========================================================================
   HOMEPAGE V2 — ClickUp-structure landing (centered hero, tabs, wall, bands)
   ========================================================================== */
.viv2-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.viv2-section { padding: 88px 0; background: #fff; }
.viv2-center { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.viv2-eyebrow {
    display: inline-block; font-family: "SF Mono", ui-monospace, monospace;
    font-size: 12px; letter-spacing: .14em; font-weight: 700;
    color: var(--vf-teal); margin-bottom: 14px;
}
.viv2-h2 {
    font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06;
    font-weight: 800; letter-spacing: -0.03em; color: var(--vf-ink);
    margin: 0 0 16px;
}
.viv2-p { font-size: 17px; color: var(--vf-muted); line-height: 1.6; }

/* ---- Scroll reveal ---- */
.viv-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.viv-reveal.in { opacity: 1; transform: none; }

/* ---- HERO (centered) ---- */
.viv2-hero { background: #fff; padding: 140px 0 40px; overflow: hidden; }
.viv2-hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; text-align: center; }
.viv2-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--vf-ink);
    box-shadow: 0 1px 3px rgba(16,24,40,.06); margin-bottom: 26px;
}
.viv2-h1 {
    font-size: clamp(42px, 6vw, 76px); line-height: 1.0;
    font-weight: 800; letter-spacing: -0.04em; color: var(--vf-ink);
    margin: 0 0 20px;
}
.viv2-sub { font-size: 19px; color: var(--vf-muted); max-width: 620px; margin: 0 auto 30px; line-height: 1.55; }
.viv2-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 44px; }
.viv-btn-lg { padding: 16px 34px !important; font-size: 17px !important; border-radius: 14px !important; }
.viv2-cta-note { font-size: 13.5px; color: var(--vf-muted); text-align: left; line-height: 1.4; }

/* Feature tabs under hero */
.viv2-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 34px; }
.viv2-tab {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--vf-line); background: #fff;
    border-radius: 999px; padding: 9px 16px;
    font-size: 14px; font-weight: 600; color: var(--vf-ink);
    cursor: pointer; transition: all .15s ease;
}
.viv2-tab:hover { border-color: #c9cdd4; transform: translateY(-1px); }
.viv2-tab.active {
    border-color: var(--vf-teal); color: var(--vf-teal);
    box-shadow: 0 0 0 3px rgba(2,108,98,.10);
}

/* Showcase */
.viv2-shot { position: relative; max-width: 980px; margin: 0 auto; }
.viv2-shot-glow {
    position: absolute; inset: -6% -10% -14%;
    background: radial-gradient(55% 60% at 50% 45%, rgba(2,108,98,.13), transparent 70%);
    z-index: 0; pointer-events: none;
}
.viv2-mock { position: relative; z-index: 1; text-align: left; }
.viv2-mock .viv-mock-main { min-height: 300px; }
.viv2-mock-crumb { margin-left: auto; color: var(--vf-muted); font-weight: 700; }
#viv2MockBody.viv2-swap { animation: viv2swap .35s ease; }
@keyframes viv2swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* board mock */
.viv2-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.viv2-col { background: #f5f6f8; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.viv2-card { background: #fff; border: 1px solid var(--vf-line); border-radius: 8px; padding: 10px; width: 100%; }
.viv2-card-t { font-size: 12.5px; font-weight: 600; color: var(--vf-ink); margin-bottom: 8px; }
.viv2-card-b { display: flex; align-items: center; justify-content: space-between; color: var(--vf-muted); font-size: 12px; }
/* table mock */
.viv2-table { margin-top: 6px; }
.viv2-trow { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #f1f2f5; font-size: 13px; }
.viv2-trow .t { font-weight: 600; color: var(--vf-ink); flex: 1; }
.viv2-trow .m { color: var(--vf-muted); flex: 1; }
.viv2-trow .v { font-weight: 700; color: var(--vf-teal); }
/* doc mock */
.viv2-doc { border: 1px solid var(--vf-line); border-radius: 12px; padding: 18px; margin-top: 10px; }
.viv2-doc-head { display: flex; justify-content: space-between; font-weight: 800; color: var(--vf-ink); margin-bottom: 14px; }
.viv2-doc-amt { color: var(--vf-teal); }
.viv2-doc-line { height: 10px; border-radius: 5px; background: #eef0f3; margin: 10px 0; }
.viv2-doc-line.w80 { width: 80%; } .viv2-doc-line.w60 { width: 60%; } .viv2-doc-line.w70 { width: 70%; }
.viv2-doc-foot { margin-top: 14px; }

/* ---- PAIN ---- */
.viv2-pain { background: #fbfcfd; }
.viv2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.viv2-checklist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.viv2-checklist li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; color: var(--vf-text); }
.viv2-checklist i { color: #dc2626; font-size: 17px; }
/* converge visual */
.viv2-converge { position: relative; height: 360px; }
.viv2-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--vf-muted);
    box-shadow: 0 4px 14px rgba(16,24,40,.08);
    animation: viv2float 5s ease-in-out infinite;
}
.viv2-chip.c1 { top: 4%;  left: 8%;  animation-delay: 0s; }
.viv2-chip.c2 { top: 12%; right: 6%; animation-delay: .7s; }
.viv2-chip.c3 { top: 42%; left: 0;   animation-delay: 1.4s; }
.viv2-chip.c4 { bottom: 14%; right: 4%; animation-delay: 2.1s; }
.viv2-chip.c5 { bottom: 4%; left: 16%;  animation-delay: 2.8s; }
.viv2-chip.c6 { top: 46%; right: 22%;   animation-delay: 3.5s; }
@keyframes viv2float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.viv2-converge-core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 110px; height: 110px; border-radius: 28px;
    background: var(--vf-teal); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; font-weight: 800;
    box-shadow: 0 24px 60px rgba(2,108,98,.35);
}
.viv2-converge-core::before {
    content: ""; position: absolute; inset: -26px;
    border: 2px dashed rgba(2,108,98,.25); border-radius: 40px;
    animation: viv2spin 24s linear infinite;
}
@keyframes viv2spin { to { transform: rotate(360deg); } }

/* ---- FEATURE WALL ---- */
.viv2-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.viv2-tile {
    background: #fff; border: 1px solid var(--vf-line); border-radius: 14px;
    padding: 18px 14px; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.viv2-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,24,40,.10); border-color: #d8dce2; }
.viv2-tile i { font-size: 24px; color: var(--vf-teal); }
.viv2-tile h5 { font-size: 13.5px; font-weight: 700; color: var(--vf-ink); margin: 10px 0 0; }
.viv2-tile.big { grid-column: span 3; text-align: left; padding: 26px; }
.viv2-tile.big i { font-size: 30px; }
.viv2-tile.big h4 { font-size: 19px; font-weight: 800; color: var(--vf-ink); margin: 12px 0 8px; }
.viv2-tile.big p { font-size: 14.5px; color: var(--vf-muted); margin: 0; line-height: 1.55; }
.viv2-tile.t-teal   { background: linear-gradient(160deg, #f0faf8, #fff); }
.viv2-tile.t-purple { background: linear-gradient(160deg, #f5f2fd, #fff); }
.viv2-tile.t-purple i { color: #7c5cbf; }
.viv2-tile.t-blue   { background: linear-gradient(160deg, #eff7fd, #fff); }
.viv2-tile.t-blue i { color: #0284c7; }
.viv2-tile.t-green  { background: linear-gradient(160deg, #f0fbf3, #fff); }
.viv2-tile.t-green i { color: #16a34a; }

/* ---- SOLUTIONS ---- */
.viv2-solutions { background: #16161e; }
.viv2-solutions .viv2-h2, .viv2-solutions .viv2-eyebrow { color: #fff; }
.viv2-solutions .viv2-eyebrow { color: #7ee0d3; }
.viv2-sol-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.viv2-sol-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: #d5d9e2; border-radius: 999px; padding: 10px 18px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.viv2-sol-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.viv2-sol-tab.active { background: #fff; color: var(--vf-ink); border-color: #fff; }
.viv2-sol-panel { display: none; }
.viv2-sol-panel.active { display: block; animation: viv2swap .35s ease; }
.viv2-sol-copy {
    max-width: 720px; margin: 0 auto; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 36px 40px;
}
.viv2-sol-copy h3 { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
.viv2-replaces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.viv2-replaces-label { font-family: "SF Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; color: #8b93a5; margin-right: 4px; }
.viv2-replace-chip {
    background: rgba(220,38,38,.14); color: #fca5a5;
    border: 1px solid rgba(220,38,38,.28); border-radius: 999px;
    padding: 4px 12px; font-size: 12.5px; font-weight: 600;
    text-decoration: line-through;
}
.viv2-sol-points { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.viv2-sol-points li { display: flex; gap: 10px; color: #cfd4de; font-size: 15px; }
.viv2-sol-points i { color: #7ee0d3; }
.viv2-sol-link { color: #7ee0d3 !important; font-weight: 700; text-decoration: none !important; }
.viv2-sol-link:hover { color: #fff !important; }

/* ---- STATS ---- */
.viv2-stats { background: #fff; padding: 64px 0; }
.viv2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.viv2-stat-n { font-size: clamp(38px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.03em; color: var(--vf-teal); display: block; }
.viv2-stat-l { color: var(--vf-muted); font-size: 14.5px; font-weight: 600; }

/* ---- SECURITY ---- */
.viv2-security { background: #fbfcfd; }
.viv2-sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.viv2-sec-card {
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px;
    padding: 26px 22px; text-align: center;
}
.viv2-sec-card i { font-size: 28px; color: var(--vf-teal); }
.viv2-sec-card h5 { font-size: 15px; font-weight: 700; color: var(--vf-ink); margin: 12px 0 6px; }
.viv2-sec-card p { font-size: 13.5px; color: var(--vf-muted); margin: 0; }

/* ---- Testimonials restyle (existing section) ---- */
.testimonial-section, .section-testimonial { background: #fff !important; }
.testimonial-section .card, .section-testimonial .card {
    border: 1px solid var(--vf-line) !important; border-radius: 18px !important;
    box-shadow: 0 4px 18px rgba(16,24,40,.06) !important;
}

/* ---- CTA band (existing cta section) ---- */
.cta-section, .section-cta, .cta {
    background: linear-gradient(140deg, #026c62, #04473f 70%) !important;
}
.cta-section h2, .section-cta h2, .cta h2 { color: #fff !important; font-weight: 800 !important; }
.cta-section .btn, .section-cta .btn, .cta .btn {
    background: #fff !important; color: var(--vf-ink) !important;
    border-radius: 12px !important; font-weight: 700 !important; border: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .viv2-hero { padding-top: 110px; }
    .viv2-split { grid-template-columns: 1fr; gap: 36px; }
    .viv2-grid { grid-template-columns: repeat(3, 1fr); }
    .viv2-tile.big { grid-column: span 3; }
    .viv2-stats-grid, .viv2-sec-grid { grid-template-columns: repeat(2, 1fr); }
    .viv2-converge { height: 280px; }
    .viv2-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .viv2-grid { grid-template-columns: repeat(2, 1fr); }
    .viv2-tile.big { grid-column: span 2; }
    .viv2-cta { flex-direction: column; }
    .viv2-cta-note { text-align: center; }
}

/* ==========================================================================
   HOMEPAGE V3 — detailed reference-parity components
   ========================================================================== */

/* ---- Announcement bar + tighter nav type ---- */
.viv3-announce {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: #f6f7f9; border-bottom: 1px solid var(--vf-line);
    padding: 9px 16px; font-size: 14px; color: var(--vf-ink);
    position: relative; z-index: 1001;
}
.viv3-announce b { font-weight: 700; }
.viv3-announce a { color: var(--vf-teal) !important; font-weight: 700; text-decoration: none !important; }
.viv3-announce a:hover { text-decoration: underline !important; }
.navigation-bar { top: 0; }
.navigation-bar .navbar { padding: 7px 0 !important; }
.navigation-bar .navbar-nav .nav-link {
    font-size: 15px !important; font-weight: 550 !important;
    padding: 8px 12px !important; letter-spacing: -0.01em;
}
.navigation-bar .logo img { max-height: 28px !important; }
.navigation-bar .btn-border { padding: 8px 15px !important; font-size: 14.5px !important; }
.navigation-bar .btn-menu-signup { padding: 8px 16px !important; font-size: 14.5px !important; }

/* ---- HERO V3: split ---- */
.viv3-hero { background: #fff; padding: 148px 0 0; overflow: hidden; }
.viv3-hero-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 32px;
    display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: center;
}
.viv3-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--vf-ink) !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.06); margin-bottom: 24px; text-decoration: none !important;
}
.viv3-badge:hover { border-color: #c9cdd4; }
.viv3-h1 {
    font-size: clamp(44px, 4.6vw, 66px); line-height: 1.0;
    font-weight: 800; letter-spacing: -0.045em; color: var(--vf-ink);
    margin: 0 0 26px;
}
.viv3-checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 13px; }
.viv3-checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 16.5px; color: var(--vf-text); }
.viv3-checks b { color: var(--vf-ink); }
.viv3-checks i { color: #6f5cf1; font-size: 18px; font-weight: 700; margin-top: 1px; }
.viv3-cta { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.viv3-cta-note { font-size: 13px; color: var(--vf-muted); line-height: 1.45; }
.viv3-mono { font-family: "SF Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: .14em; color: var(--vf-ink); font-weight: 600; margin-bottom: 14px; }
.viv3-pills { display: flex; flex-wrap: wrap; gap: 9px; max-width: 560px; }
.viv3-pill {
    position: relative;
    border: 1px solid #d7dae0; background: #fff; border-radius: 999px;
    padding: 8px 18px; font-size: 14.5px; font-weight: 600; color: var(--vf-ink);
    cursor: pointer; transition: all .15s ease;
}
.viv3-pill:hover { border-color: #b9bec7; transform: translateY(-1px); }
.viv3-pill.active { border-color: #4f9cf9; color: #1f6fd6; box-shadow: 0 0 0 3px rgba(79,156,249,.12); }
.viv3-pill-check {
    position: absolute; top: -6px; right: -4px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #1f6fd6; color: #fff; font-size: 11px;
    display: none; align-items: center; justify-content: center;
}
.viv3-pill.active .viv3-pill-check { display: inline-flex; }

/* ---- Rich app mockup ---- */
.viv3-hero-shot { position: relative; }
.viv3-app {
    position: relative; z-index: 1;
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px;
    box-shadow: 0 34px 80px rgba(16,24,40,.18);
    overflow: hidden; text-align: left;
    font-size: 13px;
}
.viv3-app-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--vf-line); background: #fbfcfd; }
.viv3-app-ws { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vf-ink); }
.viv3-app-search { width: 220px; border: 1px solid var(--vf-line); border-radius: 999px; padding: 5px 12px; color: var(--vf-muted); background: #fff; }
.viv3-app-body { display: flex; min-height: 430px; }
.viv3-app-rail { background: #171e2e; padding: 12px 7px; display: flex; flex-direction: column; gap: 6px; }
.viv3-app-rail .r { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #aeb6c7; font-size: 14px; }
.viv3-app-rail .r.active { background: var(--vf-teal); color: #fff; }
.viv3-app-side { width: 205px; border-right: 1px solid var(--vf-line); padding: 12px 10px; background: #fff; flex-shrink: 0; }
.viv3-app-side .s-head { font-weight: 800; font-size: 14.5px; color: var(--vf-ink); display: flex; justify-content: space-between; margin-bottom: 8px; }
.viv3-app-side .s-plus { color: var(--vf-muted); border: 1px solid var(--vf-line); border-radius: 6px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.viv3-app-side .s-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: #2a3140; font-weight: 550; }
.viv3-app-side .s-item i { color: var(--vf-muted); font-size: 13px; }
.viv3-app-side .s-item.active { background: #eef1f4; }
.viv3-app-side .s-item.sub { padding-left: 24px; color: var(--vf-muted); }
.viv3-app-side .s-count { margin-left: auto; background: #1f6fd6; color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 7px; font-weight: 700; }
.viv3-app-side .s-count.pink { background: #db2777; }
.viv3-app-side .s-label { font-size: 11px; font-weight: 700; color: var(--vf-faint, #9aa1ac); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 4px 8px; }
.viv3-app-side .s-av { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.viv3-app-main { flex: 1; padding: 12px 16px; min-width: 0; }
.viv3-app-main .m-crumb { font-weight: 700; color: var(--vf-ink); margin-bottom: 8px; }
.viv3-app-main .m-proj i { color: #db2777; }
.viv3-app-main .m-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--vf-line); padding-bottom: 0; margin-bottom: 10px; flex-wrap: wrap; }
.viv3-app-main .m-tabs span { padding: 6px 10px; font-weight: 600; color: var(--vf-muted); font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.viv3-app-main .m-tabs span.active { color: var(--vf-ink); box-shadow: inset 0 -2px 0 var(--vf-ink); }
.viv3-app-main .m-view { color: var(--vf-faint, #9aa1ac); }
.viv3-app-main .m-cols { display: flex; justify-content: space-between; color: var(--vf-muted); font-size: 11.5px; padding: 4px 8px; border-bottom: 1px solid #f1f2f5; }
.m-group { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.m-group i { font-size: 10px; color: var(--vf-muted); }
.m-group.mt { margin-top: 18px; }
.m-count { color: var(--vf-muted); font-weight: 700; font-size: 12px; }
.m-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid #f4f5f7; }
.m-row .t { flex: 1; font-weight: 550; color: var(--vf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row .t.muted { color: var(--vf-muted); font-weight: 500; }
.m-row.indent { padding-left: 40px; }
.m-row .g { color: #16a34a; }
.m-row .c { font-size: 10px; color: var(--vf-muted); }
.m-row .dot-o { width: 12px; height: 12px; border: 2px dotted #b3b9c4; border-radius: 50%; flex-shrink: 0; }
.m-row .dot-b { width: 12px; height: 12px; border-radius: 50%; background: #1f6fd6; flex-shrink: 0; }
.m-row .m-sub { color: var(--vf-muted); font-size: 11px; }
.m-row .lk { color: var(--vf-faint, #9aa1ac); font-size: 11px; }
.m-row .ml { margin-left: -6px; }
.m-row.add { color: var(--vf-muted); border-bottom: none; }
.mt8 { margin-top: 8px; }

/* ---- Platform strip ---- */
.viv3-platforms {
    max-width: 1280px; margin: 56px auto 0; padding: 22px 32px;
    border-top: 1px solid var(--vf-line);
    display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap;
}
.viv3-platforms .viv3-mono { margin: 0; color: var(--vf-muted); }
.viv3-platforms .p {
    font-family: "SF Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em;
    color: var(--vf-ink); font-weight: 600; display: inline-flex; gap: 8px; align-items: center;
}

/* ---- FEATURE WALL V3 (graph paper) ---- */
.viv3-wall { padding: 96px 0 0; background: #fff; overflow: hidden; }
.viv3-wall-head { text-align: center; max-width: 780px; margin: 0 auto 54px; padding: 0 24px; }
.viv3-wall-h2 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.03; color: #6b7280; margin: 0 0 16px; }
.viv3-wall-h2 .viv3-grad { color: var(--vf-ink); }
.viv3-wallgrid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
        ".  .  .  .  .  .  .  .  ."
        ".  .  .  f1 f1 f2 f2 .  ."
        ".  .  .  f1 f1 f2 f2 .  ."
        ".  .  .  f3 f3 f4 f4 .  ."
        ".  .  .  f3 f3 f4 f4 .  ."
        ".  .  .  .  .  .  .  .  .";
    grid-auto-flow: dense;
    border-top: 1px solid #eef0f3;
    border-left: 1px solid #eef0f3;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 40px), rgba(0,0,0,.4));
            mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 40px), rgba(0,0,0,.4));
}
.viv3-cell {
    border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3;
    min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: #b6bcc6; transition: color .15s ease, background .15s ease;
    text-align: center; padding: 10px;
}
.viv3-cell i { font-size: 26px; }
.viv3-cell span { font-size: 13.5px; font-weight: 600; }
.viv3-cell:hover { color: var(--vf-ink); background: #fbfcfd; }
.viv3-feature {
    border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3;
    background: #fff; box-shadow: 0 18px 50px rgba(16,24,40,.10);
    border-radius: 4px; padding: 22px; position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform .18s ease, box-shadow .18s ease;
}
.viv3-feature:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(16,24,40,.16); }
.viv3-feature.f-projects { background: linear-gradient(165deg, #fff8ee, #fff); }
.viv3-feature.f-docs { background: linear-gradient(165deg, #eef4ff, #fff); }
.viv3-feature.f-crm { background: linear-gradient(165deg, #f6f1ff, #fff); }
.viv3-feature.f-chat { background: linear-gradient(165deg, #eefaf1, #fff); }
.viv3-f-label { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--vf-ink); margin-top: 16px; }
.viv3-f-ic { width: 30px; height: 30px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.viv3-f-chiprow { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.viv3-f-chip { border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.viv3-f-minirow { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.viv3-f-avs { display: inline-flex; }
.viv3-f-avs .ml { margin-left: -6px; }
.viv3-f-bar { height: 9px; border-radius: 5px; background: #e8eaee; display: inline-block; }
.viv3-f-bar.w80 { width: 80%; } .viv3-f-bar.w70 { width: 70%; } .viv3-f-bar.w60 { width: 60%; }
.viv3-f-bar.w50 { width: 50%; } .viv3-f-bar.w40 { width: 40%; }
.viv3-f-doc { background: #fff; border: 1px solid var(--vf-line); border-radius: 10px; padding: 12px 14px; position: relative; z-index: 1; }
.viv3-f-doc.back { position: absolute; inset: 10px -8px auto auto; width: 70%; height: 70px; z-index: 0; opacity: .5; }
.viv3-f-doc-t { font-weight: 700; color: var(--vf-ink); font-size: 13px; margin-bottom: 8px; }
.viv3-f-doc .viv3-f-bar { display: block; margin: 6px 0; }
.viv3-f-ask { background: #fff; border: 1px solid var(--vf-line); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; color: var(--vf-ink); font-weight: 600; box-shadow: 0 3px 10px rgba(16,24,40,.06); margin-bottom: 10px; }
.viv3-f-answer { font-size: 12.5px; color: var(--vf-ink); display: flex; gap: 8px; align-items: center; font-weight: 600; }
.viv3-f-msg { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.viv3-f-reacts { display: flex; gap: 8px; margin-top: 10px; }
.viv3-f-reacts span { background: #fff; border: 1px solid var(--vf-line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }

/* ---- AGENT CENTERPIECE ---- */
.viv3-agent {
    position: relative; overflow: hidden; text-align: center;
    background: radial-gradient(120% 90% at 50% 100%, rgba(2,108,98,.16), rgba(2,108,98,.05) 55%, #fff 100%);
    padding: 110px 24px 90px;
}
.viv3-agent-ghost {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(120px, 20vw, 300px); font-weight: 800; letter-spacing: -0.04em;
    color: rgba(22,22,30,.05); white-space: nowrap; pointer-events: none; user-select: none;
}
.viv3-agent-stage { position: relative; max-width: 860px; margin: 0 auto; }
.viv3-note {
    position: absolute; display: flex; align-items: center; gap: 0;
    font-family: "SF Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em;
    color: #33383f; font-weight: 700; z-index: 3;
}
.viv3-note span { border-bottom: 1.5px solid #33383f; padding-bottom: 4px; }
.viv3-note i { display: block; width: 70px; height: 1.5px; background: #33383f; transform-origin: left; }
.viv3-note.n1 { top: 34%; left: -4%; }
.viv3-note.n1 i { transform: rotate(28deg) translateY(0); margin-left: 4px; }
.viv3-note.n2 { top: 8%; right: -6%; }
.viv3-note.n2 i { transform: rotate(24deg); margin-right: 4px; }
.viv3-note.n3 { bottom: 18%; right: -8%; }
.viv3-note.n3 i { transform: rotate(-26deg); margin-right: 4px; }
.viv3-avatar { position: relative; display: inline-block; margin: 0 auto; cursor: pointer; }
.viv3-avatar-head {
    width: 250px; height: 270px; margin: 0 auto;
    background: linear-gradient(175deg, #f6d7bd, #eec19e);
    border-radius: 110px 110px 96px 96px;
    position: relative;
    box-shadow: 0 30px 70px rgba(2,108,98,.22);
}
.viv3-visor {
    position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
    width: 218px; height: 84px; border-radius: 40px;
    background: linear-gradient(105deg, #f59e0b 0%, #db2777 34%, #7c5cbf 64%, #0284c7 100%);
    box-shadow: 0 12px 34px rgba(124,92,191,.35), inset 0 2px 6px rgba(255,255,255,.45);
    transition: transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s ease;
}
.viv3-avatar:hover .viv3-visor {
    transform: translateX(-50%) translateY(-12px) rotate(-2deg) scale(1.04);
    box-shadow: 0 22px 54px rgba(124,92,191,.5), inset 0 2px 6px rgba(255,255,255,.5);
}
.viv3-visor-brand {
    position: absolute; top: 9px; left: 18px;
    font-size: 9px; font-weight: 800; color: rgba(255,255,255,.85); letter-spacing: .06em;
}
.viv3-visor-eye {
    position: absolute; top: 26px; width: 54px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #3b2f24 38%, #f2e9df 40%);
    border: 3px solid rgba(255,255,255,.55);
}
.viv3-visor-eye.left { left: 34px; }
.viv3-visor-eye.right { right: 34px; }
.viv3-avatar-mouth { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); width: 34px; height: 8px; border-radius: 0 0 20px 20px; background: #c98a63; }
.viv3-avatar-body {
    width: 300px; height: 90px; margin: -16px auto 0;
    background: linear-gradient(180deg, #08897c, #026c62);
    border-radius: 70px 70px 0 0;
}
.viv3-agent-cta { margin-top: 40px; display: inline-block; }

/* ---- DARK SECTION ---- */
.viv3-dark { background: #050507; padding: 110px 0 100px; overflow: hidden; position: relative; }
.viv3-dark::after {
    content: ""; position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
    width: 1200px; height: 500px; pointer-events: none;
    background: radial-gradient(50% 55% at 50% 45%, rgba(2,108,98,.35), rgba(124,92,191,.18) 55%, transparent 75%);
    filter: blur(10px);
}
.viv3-dark-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; position: relative; z-index: 1; }
.viv3-dark-mark {
    width: 84px; height: 84px; margin: 0 auto 26px;
    border-radius: 24px; background: linear-gradient(160deg, #0a9384, #026c62);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 40px; font-weight: 800;
    box-shadow: 0 0 90px rgba(2,150,130,.55);
}
.viv3-dark-h2 {
    font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
    background: linear-gradient(180deg, #ffffff 30%, #8d93a1);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin: 0 0 18px;
}
.viv3-dark-h2 em { font-style: italic; }
.viv3-dark-sub { color: #a7adbb; font-size: 18px; margin: 0 0 64px; }
.viv3-dark-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.09); text-align: left; }
.viv3-dark-col { background: #0a0a0d; padding: 34px 30px 30px; }
.viv3-dark-eyebrow { font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; color: #8d93a1; font-weight: 700; display: block; margin-bottom: 16px; }
.viv3-dark-col > p { color: #d5d9e2; font-size: 15.5px; line-height: 1.6; min-height: 100px; }
.viv3-dark-visual { margin-top: 22px; }
.v-windows .w { background: #101016; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.v-windows .w.w2 { margin-left: 16px; }
.v-windows .w.w3 { margin-left: 32px; }
.v-windows .wt { color: #8d93a1; font-size: 13px; }
.v-windows .wv { color: #fff; font-weight: 800; font-size: 15px; }
.v-list .l { display: flex; align-items: center; gap: 10px; background: #101016; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; color: #d5d9e2; font-size: 13.5px; }
.v-list .l i { color: #8d93a1; }
.v-list .l .ok { margin-left: auto; color: #34d399; }
.v-list .l.sel { border-color: rgba(2,150,130,.5); }
.v-list .l .run { margin-left: auto; color: #7ee0d3; font-family: "SF Mono", ui-monospace, monospace; font-size: 11px; animation: viv3pulse 1.6s ease infinite; }
@keyframes viv3pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.v-kv .kv { display: flex; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.07); padding: 9px 2px; font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; }
.v-kv .k { color: #7ee0d3; min-width: 96px; }
.v-kv .v { color: #a7adbb; }

/* ---- SOLUTIONS split w/ specialist cards ---- */
.viv3-sol-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; max-width: 1080px; margin: 0 auto; align-items: start; }
.viv3-sol-left h3 { color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
.viv3-sol-desc { color: #a7adbb; font-size: 15.5px; line-height: 1.6; margin: 0 0 22px; }
.viv3-sol-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viv3-sol-card {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px; padding: 18px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.viv3-sol-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.viv3-sol-card-av {
    width: 42px; height: 42px; border-radius: 12px; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.viv3-sol-card h5 { color: #fff; font-size: 15px; font-weight: 700; margin: 12px 0 5px; }
.viv3-sol-card p { color: #a7adbb; font-size: 12.5px; margin: 0; line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .viv3-hero-inner { grid-template-columns: 1fr; }
    .viv3-hero-shot { display: none; }
    .viv3-wallgrid { grid-template-columns: repeat(4, 1fr); grid-template-areas:
        "f1 f1 f2 f2" "f1 f1 f2 f2" "f3 f3 f4 f4" "f3 f3 f4 f4"; }
    .viv3-note { display: none; }
    .viv3-dark-cols { grid-template-columns: 1fr; }
    .viv3-sol-split { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .viv3-wallgrid { grid-template-columns: repeat(2, 1fr); grid-template-areas:
        "f1 f1" "f2 f2" "f3 f3" "f4 f4"; }
    .viv3-cell { min-height: 110px; }
    .viv3-sol-cards { grid-template-columns: 1fr; }
    .viv3-announce span { font-size: 12px; }
}

/* Fix stacking: announce bar pinned, nav offset below it, hero clears both */
.viv3-announce { position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 1002; }
.navigation-bar { top: 42px !important; }
.viv3-hero { padding-top: 190px; }
@media (max-width: 767px) { .viv3-announce { display: none; } .navigation-bar { top: 0 !important; } .viv3-hero { padding-top: 130px; } }

/* ==========================================================================
   HOMEPAGE V4 — creative section revamps
   ========================================================================== */

/* ---- Pain: generated artwork ---- */
.viv4-converge-wrap { position: relative; }
.viv4-converge-wrap::after {
    content: ""; position: absolute; inset: 8% -4% -6%;
    background: radial-gradient(60% 55% at 55% 50%, rgba(2,108,98,.18), transparent 70%);
    z-index: 0; filter: blur(8px);
}
.viv4-converge-img {
    position: relative; z-index: 1; width: 100%; height: auto;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(2,80,70,.28);
    animation: viv4drift 7s ease-in-out infinite;
}
@keyframes viv4drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(.4deg); } }

/* ---- Orbit centerpiece ---- */
.viv4-orbit-section {
    background: radial-gradient(110% 80% at 50% 0%, #f2faf8, #fff 60%);
    padding: 96px 24px 110px; overflow: hidden; text-align: center;
}
.viv4-orbit-stage { position: relative; max-width: 760px; margin: 30px auto 0; }
.viv4-orbit { position: relative; width: 520px; height: 520px; margin: 0 auto; max-width: 92vw; }
.viv4-ring {
    position: absolute; top: 50%; left: 50%;
    border: 1.5px dashed rgba(2,108,98,.22); border-radius: 50%;
}
.viv4-ring.r-outer { width: 480px; height: 480px; margin: -240px 0 0 -240px; animation: viv4spin 42s linear infinite; }
.viv4-ring.r-inner { width: 290px; height: 290px; margin: -145px 0 0 -145px; animation: viv4spin 28s linear infinite reverse; }
.viv4-orbit:hover .viv4-ring { animation-play-state: paused; }
@keyframes viv4spin { to { transform: rotate(360deg); } }
.viv4-sat {
    position: absolute; top: 50%; left: 50%;
    width: 58px; height: 58px; margin: -29px 0 0 -29px;
    transform: rotate(var(--sat)) translateX(240px) rotate(calc(-1 * var(--sat)));
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    box-shadow: 0 10px 26px rgba(16,24,40,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.viv4-ring.r-inner .viv4-sat { transform: rotate(var(--sat)) translateX(145px) rotate(calc(-1 * var(--sat))); width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 20px; }
/* counter-rotate satellites so icons stay upright */
.viv4-ring.r-outer .viv4-sat { animation: viv4counter 42s linear infinite; }
.viv4-ring.r-inner .viv4-sat { animation: viv4counter-r 28s linear infinite; }
.viv4-orbit:hover .viv4-sat { animation-play-state: paused; }
@keyframes viv4counter { to { transform: rotate(calc(var(--sat) - 360deg)) translateX(240px) rotate(calc(360deg - var(--sat))); } }
@keyframes viv4counter-r { to { transform: rotate(calc(var(--sat) + 360deg)) translateX(145px) rotate(calc(-360deg - var(--sat))); } }
.viv4-core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 128px; height: 128px; border-radius: 34px;
    background: linear-gradient(160deg, #0a9384, #026c62);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 56px; font-weight: 800;
    box-shadow: 0 26px 70px rgba(2,108,98,.4);
    z-index: 2;
}
.viv4-core-pulse {
    position: absolute; inset: -14px; border-radius: 44px;
    border: 2px solid rgba(2,108,98,.35);
    animation: viv4pulse 2.6s ease-out infinite;
}
@keyframes viv4pulse { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.viv4-note {
    position: absolute;
    font-family: "SF Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: .1em;
    color: #33383f; font-weight: 700; z-index: 3;
}
.viv4-note span { border-bottom: 1.5px solid #33383f; padding-bottom: 4px; background: rgba(255,255,255,.7); }
.viv4-note.a1 { top: 12%; left: -2%; }
.viv4-note.a2 { top: 4%; right: -4%; }
.viv4-note.a3 { bottom: 8%; right: -6%; }
.viv4-orbit-cta { margin-top: 44px; display: inline-block; }

/* ---- Testimonials grid ---- */
.viv4-testimonials { background: #fbfcfd; padding: 96px 0; }
.viv4-t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.viv4-t-card {
    background: #fff; border: 1px solid var(--vf-line); border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 4px 18px rgba(16,24,40,.05);
    transition: transform .18s ease, box-shadow .18s ease;
}
.viv4-t-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16,24,40,.12); }
.viv4-t-card.lift { margin-top: 26px; }
.viv4-t-stars { color: #f59e0b; font-size: 14px; display: flex; gap: 3px; margin-bottom: 14px; }
.viv4-t-quote { color: var(--vf-text); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.viv4-t-who { display: flex; align-items: center; gap: 10px; }
.viv4-t-av {
    width: 34px; height: 34px; border-radius: 50%; color: #fff;
    font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.viv4-t-name { font-weight: 700; color: var(--vf-ink); font-size: 14px; }

/* ---- Security shield ---- */
.viv4-security { background: #fff; }
.viv4-shield-wrap { display: flex; align-items: center; justify-content: center; }
.viv4-shield-rings { position: relative; width: 380px; height: 380px; max-width: 88vw; }
.viv4-shield-rings .ring {
    position: absolute; top: 50%; left: 50%; border-radius: 50%;
    border: 1.5px solid rgba(2,108,98,.16);
}
.viv4-shield-rings .ring1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.viv4-shield-rings .ring2 { width: 290px; height: 290px; margin: -145px 0 0 -145px; border-style: dashed; animation: viv4spin 50s linear infinite; }
.viv4-shield-rings .ring3 { width: 375px; height: 375px; margin: -187px 0 0 -187px; }
.viv4-shield {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 120px; height: 120px; border-radius: 32px;
    background: linear-gradient(160deg, #0a9384, #026c62);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 52px;
    box-shadow: 0 24px 60px rgba(2,108,98,.35);
}
.viv4-sec-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--vf-line); border-radius: 999px;
    padding: 8px 15px; font-size: 13px; font-weight: 700; color: var(--vf-ink);
    box-shadow: 0 8px 22px rgba(16,24,40,.10);
    animation: viv2float 5.5s ease-in-out infinite;
}
.viv4-sec-chip i { color: var(--vf-teal); }
.viv4-sec-chip.c1 { top: 6%; left: 8%; animation-delay: 0s; }
.viv4-sec-chip.c2 { top: 16%; right: 0; animation-delay: 1.2s; }
.viv4-sec-chip.c3 { bottom: 16%; left: 0; animation-delay: 2.2s; }
.viv4-sec-chip.c4 { bottom: 6%; right: 6%; animation-delay: 3.1s; }
.viv4-sec-rows { display: grid; gap: 20px; margin-top: 26px; }
.viv4-sec-row { display: flex; gap: 16px; align-items: flex-start; }
.viv4-sec-ic {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
    background: #e6f2f0; color: var(--vf-teal);
    display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.viv4-sec-row h5 { font-size: 16px; font-weight: 700; color: var(--vf-ink); margin: 2px 0 4px; }
.viv4-sec-row p { font-size: 14px; color: var(--vf-muted); margin: 0; line-height: 1.55; }

/* ---- CTA band ---- */
.viv4-cta {
    position: relative; overflow: hidden;
    background: #0b0b10; padding: 96px 24px;
    text-align: center;
}
.viv4-cta-glow {
    position: absolute; left: 50%; bottom: -40%; transform: translateX(-50%);
    width: 1100px; height: 600px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(2,150,130,.4), rgba(124,92,191,.15) 60%, transparent 80%);
    filter: blur(16px); pointer-events: none;
}
.viv4-cta-inner { position: relative; z-index: 1; }
.viv4-cta .viv2-eyebrow { color: #7ee0d3; }
.viv4-cta-h2 {
    color: #fff !important; font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 16px;
}
.viv4-cta-p { color: #b9bfcc; font-size: 17px; max-width: 640px; margin: 0 auto 32px; line-height: 1.6; }
.viv4-cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.viv4-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: #0b0b10 !important;
    padding: 15px 30px; border-radius: 13px;
    font-weight: 800; font-size: 16px; text-decoration: none !important;
    box-shadow: 0 10px 30px rgba(255,255,255,.15);
    transition: transform .12s ease, box-shadow .12s ease;
}
.viv4-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,255,255,.22); }
.viv4-cta-ghost {
    color: #d5d9e2 !important; font-weight: 700; font-size: 15px;
    padding: 15px 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px;
    text-decoration: none !important;
}
.viv4-cta-ghost:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.viv4-cta-note { display: block; margin-top: 18px; color: #8b93a5; font-size: 13px; }

@media (max-width: 991px) {
    .viv4-orbit { width: 360px; height: 360px; }
    .viv4-ring.r-outer { width: 330px; height: 330px; margin: -165px 0 0 -165px; }
    .viv4-ring.r-inner { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
    .viv4-ring.r-outer .viv4-sat { transform: rotate(var(--sat)) translateX(165px) rotate(calc(-1 * var(--sat))); animation: none; }
    .viv4-ring.r-inner .viv4-sat { transform: rotate(var(--sat)) translateX(100px) rotate(calc(-1 * var(--sat))); animation: none; }
    .viv4-note { display: none; }
    .viv4-t-grid { grid-template-columns: 1fr; }
    .viv4-t-card.lift { margin-top: 0; }
    .viv4-shield-rings { margin-bottom: 20px; }
}

/* ==========================================================================
   VP — feature & solution subpages
   ========================================================================== */
.vp-hero { padding: 170px 0 64px; background: linear-gradient(180deg, #fbfcfd, #fff); }
.vp-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; }
.vp-h1 { font-size: clamp(38px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: var(--vf-ink); margin: 14px 0 18px; }
.vp-sub { font-size: 18px; color: var(--vf-muted); line-height: 1.6; margin-bottom: 28px; }
.vp-hero-art { position: relative; }
.vp-hero-art::after { content: ""; position: absolute; inset: 10% -6% -8%; background: radial-gradient(55% 55% at 50% 55%, color-mix(in srgb, var(--vp-accent) 22%, transparent), transparent 70%); z-index: 0; filter: blur(10px); }
.vp-hero-art img {
    position: relative; z-index: 1; width: 100%; height: auto; max-height: 470px; object-fit: cover;
    border-radius: 24px; box-shadow: 0 30px 80px rgba(16,24,40,.20);
    animation: viv4drift 8s ease-in-out infinite;
}
.vp-replaces { margin-top: 26px; }
.vp-chip { background: #fdecec; color: #b91c1c; border-color: #f5c6c6; }

.vp-block { padding: 78px 0; background: #fff; }
.vp-block.tint { background: #fbfcfd; }
.vp-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vp-block.flip .vp-block-copy { order: 2; }
.vp-block.flip .vp-block-visual { order: 1; }
.vp-block-img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 20px; box-shadow: 0 22px 60px rgba(16,24,40,.16); }

/* mock shells */
.vp-mock { text-align: left; font-size: 13px; }
.vp-mock-main { padding: 16px 18px; }
.vp-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; }
.vp-detail-left h6 { font-weight: 800; color: var(--vf-ink); margin: 10px 0 12px; font-size: 15px; }
.vp-detail-right { border-left: 1px solid var(--vf-line); padding-left: 16px; }
.vp-detail-label { font-family: "SF Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; color: var(--vf-muted); display: block; margin-bottom: 10px; }
.vp-kv { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f2f5; color: var(--vf-muted); }
.vp-kv b { color: var(--vf-ink); }
.vp-gantt { position: relative; padding: 22px 18px; }
.vp-g-row { position: relative; height: 34px; border-bottom: 1px dashed #eef0f3; }
.vp-g-label { position: absolute; left: 0; top: 8px; font-size: 11.5px; color: var(--vf-muted); font-weight: 600; width: 74px; }
.vp-g-bar { position: absolute; top: 9px; height: 14px; border-radius: 7px; margin-left: 84px; max-width: calc(100% - 110px); opacity: .9; }
.vp-g-milestone { position: absolute; top: 10px; width: 12px; height: 12px; transform: rotate(45deg); background: #d97706; margin-left: 84px; }
.vp-g-today { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #dc2626; margin-left: 84px; opacity: .55; }
.vp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.vp-stat-tile { border: 1px solid var(--vf-line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; }
.vp-stat-tile .k { font-size: 11.5px; color: var(--vf-muted); font-weight: 600; }
.vp-stat-tile .v { font-size: 22px; font-weight: 800; color: var(--vf-ink); }

.vp-grid-band { padding: 78px 0; background: #fff; border-top: 1px solid var(--vf-line); }
.vp-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vp-cap {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--vf-line); border-radius: 12px; padding: 15px 16px;
    font-weight: 600; color: var(--vf-ink); font-size: 14px;
    transition: transform .14s ease, box-shadow .14s ease;
}
.vp-cap:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.10); }
.vp-cap i { font-size: 19px; }
.vp-mod-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vp-mod {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--vf-line); border-radius: 999px; padding: 11px 20px;
    font-weight: 700; color: var(--vf-ink);
}
.vp-mod i { color: var(--vp-accent); }

.vp-explore { padding: 78px 0 90px; background: #fbfcfd; border-top: 1px solid var(--vf-line); }
.vp-explore-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vp-explore-card {
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px; overflow: hidden;
    text-decoration: none !important; transition: transform .16s ease, box-shadow .16s ease;
    display: block;
}
.vp-explore-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16,24,40,.12); }
.vp-explore-card img { width: 100%; height: 120px; object-fit: cover; }
.vp-explore-eyebrow { font-family: "SF Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; font-weight: 700; display: block; margin: 12px 14px 4px; }
.vp-explore-card h5 { font-size: 14.5px; font-weight: 700; color: var(--vf-ink); margin: 0 14px 14px; line-height: 1.35; }

/* NAV dropdowns */
.viv-dd { position: relative; }
.viv-dd > .nav-link i { font-size: 11px; margin-left: 4px; }
.viv-dd-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(16,24,40,.14);
    padding: 12px; width: 480px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    opacity: 0; visibility: hidden; transition: all .15s ease;
    z-index: 1200;
}
.viv-dd:hover .viv-dd-menu, .viv-dd:focus-within .viv-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.viv-dd-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 11px;
    text-decoration: none !important;
}
.viv-dd-item:hover { background: #f6f7f9; }
.viv-dd-item i { font-size: 18px; margin-top: 1px; }
.viv-dd-item .t { font-weight: 700; color: var(--vf-ink); font-size: 14px; display: block; }
.viv-dd-item .s { color: var(--vf-muted); font-size: 12px; line-height: 1.35; }

@media (max-width: 991px) {
    .vp-hero { padding-top: 120px; }
    .vp-hero-grid, .vp-block-grid { grid-template-columns: 1fr; gap: 30px; }
    .vp-block.flip .vp-block-copy { order: 1; }
    .vp-cap-grid { grid-template-columns: 1fr 1fr; }
    .vp-explore-row { grid-template-columns: 1fr 1fr; }
    .viv-dd-menu { display: none; }
}

/* Nav logo: crisp SVG wordmark sizing */
.navigation-bar .logo img { max-height: 30px !important; height: 30px; width: auto; border-radius: 0 !important; }

/* ==========================================================================
   VB — blog + about
   ========================================================================== */
.vb-narrow { max-width: 760px; }
.vb-index { padding-bottom: 90px; }
.vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.vb-card {
    background: #fff; border: 1px solid var(--vf-line); border-radius: 18px; overflow: hidden;
    text-decoration: none !important; display: flex; flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
}
.vb-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(16,24,40,.13); }
.vb-card img { width: 100%; height: 190px; object-fit: cover; }
.vb-card-body { padding: 20px 22px 22px; }
.vb-card-kicker { font-family: "SF Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; font-weight: 700; }
.vb-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--vf-ink); margin: 8px 0 8px; line-height: 1.25; }
.vb-card p { font-size: 13.5px; color: var(--vf-muted); line-height: 1.55; margin: 0 0 12px; }
.vb-card-meta { font-size: 12px; color: var(--vf-faint, #9aa1ac); }
.vb-card-pillar { grid-column: span 3; flex-direction: row; }
.vb-card-pillar img { width: 46%; height: auto; }
.vb-card-pillar h3 { font-size: 26px; }

.vb-post { padding-bottom: 90px; }
.vb-post-head { padding-top: 150px; }
.vb-crumbs { font-size: 13px; color: var(--vf-muted); margin-bottom: 18px; }
.vb-crumbs a { color: var(--vf-muted) !important; text-decoration: none !important; }
.vb-crumbs a:hover { color: var(--vf-teal) !important; }
.vb-h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; color: var(--vf-ink); margin: 12px 0 18px; }
.vb-byline { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--vf-muted); margin-bottom: 30px; flex-wrap: wrap; }
.vb-byline b { color: var(--vf-ink); }
.vb-dot { color: var(--vf-faint, #c3c8d1); }
.vb-hero-img img { width: 100%; max-height: 440px; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 60px rgba(16,24,40,.15); }
.vb-body { padding-top: 44px; font-size: 17px; line-height: 1.72; color: var(--vf-text); }
.vb-body h2 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; color: var(--vf-ink); margin: 44px 0 14px; }
.vb-body h3 { font-size: 20px; font-weight: 700; color: var(--vf-ink); margin: 28px 0 10px; }
.vb-body p { margin: 0 0 18px; }
.vb-body a { color: var(--vf-teal); font-weight: 600; }
.vb-body ol, .vb-body ul { margin: 0 0 18px; padding-left: 24px; }
.vb-body li { margin-bottom: 10px; }
.vb-lede { font-size: 20px; line-height: 1.6; color: var(--vf-text); }
.vb-tldr, .vb-takeaways {
    background: #f2faf8; border: 1px solid #d6ebe7; border-radius: 16px;
    padding: 22px 26px; margin: 28px 0;
}
.vb-tldr h4, .vb-takeaways h4 { font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; color: var(--vf-teal); margin: 0 0 12px; }
.vb-tldr ul, .vb-takeaways ul { margin: 0; padding-left: 20px; }
.vb-tldr li, .vb-takeaways li { font-size: 15.5px; margin-bottom: 8px; }
.vb-cta-inline {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    background: #16161e; border-radius: 16px; padding: 22px 26px; margin: 34px 0;
}
.vb-cta-inline h5 { color: #fff; font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.vb-cta-inline p { color: #a7adbb; font-size: 13.5px; margin: 0; }
.vb-faqs { margin-top: 50px; }
.vb-faq { border: 1px solid var(--vf-line); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; background: #fff; }
.vb-faq summary { font-weight: 700; color: var(--vf-ink); font-size: 16px; padding: 16px 0; cursor: pointer; list-style: none; position: relative; }
.vb-faq summary::after { content: "+"; position: absolute; right: 2px; color: var(--vf-teal); font-size: 20px; }
.vb-faq[open] summary::after { content: "\2212"; }
.vb-faq p { font-size: 15px; padding-bottom: 16px; margin: 0; }
.vb-author {
    display: flex; gap: 16px; align-items: flex-start;
    border-top: 1px solid var(--vf-line); border-bottom: 1px solid var(--vf-line);
    padding: 24px 4px; margin: 44px 0;
}
.vb-author b { color: var(--vf-ink); }
.vb-author p { font-size: 14px; color: var(--vf-muted); margin: 6px 0 0; }
.vb-cta-final {
    text-align: center; background: linear-gradient(150deg, #026c62, #04473f);
    border-radius: 20px; padding: 44px 30px; margin: 20px 0 40px;
}
.vb-cta-final h3 { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.vb-cta-final p { color: #bfe3dd; font-size: 15px; margin: 0 0 22px; }
.vb-cta-secondary { color: #bfe3dd !important; font-weight: 700; margin-left: 16px; text-decoration: underline !important; }
.vb-related h4 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-muted); margin-bottom: 14px; }
.vb-related-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vb-related-card { border: 1px solid var(--vf-line); border-radius: 14px; overflow: hidden; text-decoration: none !important; background: #fff; transition: transform .15s ease; }
.vb-related-card:hover { transform: translateY(-3px); }
.vb-related-card img { width: 100%; height: 100px; object-fit: cover; }
.vb-related-card span { display: block; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--vf-ink); line-height: 1.35; }

/* timeline (about) */
.vb-timeline { margin: 30px 0 40px; }
.vb-tl-item { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--vf-line); }
.vb-tl-year { flex: 0 0 84px; font-family: "SF Mono", ui-monospace, monospace; font-weight: 700; color: var(--vf-teal); font-size: 15px; padding-top: 3px; }
.vb-tl-item h3 { margin: 0 0 6px !important; }
.vb-tl-item p { margin: 0; font-size: 15.5px; }

@media (max-width: 991px) {
    .vb-grid { grid-template-columns: 1fr; }
    .vb-card-pillar { grid-column: span 1; flex-direction: column; }
    .vb-card-pillar img { width: 100%; height: 190px; }
    .vb-related-row { grid-template-columns: 1fr; }
    .vb-cta-inline { flex-direction: column; text-align: center; }
}

/* Nav density fix after adding Blog/About */
.navigation-bar .navbar-nav .nav-link { padding: 8px 9px !important; font-size: 14.5px !important; white-space: nowrap; }
.navigation-bar .viv-dd > .nav-link i { display: inline; margin-left: 3px; }
.navigation-bar .btn-border, .navigation-bar .btn-menu-signup { white-space: nowrap; }

/* Feature/solution page FAQs */
.vp-faq { padding: 90px 0; background: #fafbfc; }
.vp-faq .vb-faqs { margin-top: 36px; }

/* ============ Vivotics Docs (vd-*) ============ */
.vd-home { padding-bottom: 90px; }
.vd-home-sub { color: #5b6b7b; font-size: 16px; max-width: 560px; margin: 10px auto 26px; }
.vd-searchwrap { position: relative; max-width: 520px; margin: 0 auto 46px; }
.vd-searchwrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8a99a8; }
.vd-searchwrap input { width: 100%; border: 1.5px solid #d8e0e6; border-radius: 12px; padding: 14px 16px 14px 44px; font-size: 15.5px; background: #fff; outline: none; }
.vd-searchwrap input:focus { border-color: #026c62; box-shadow: 0 0 0 4px rgba(2,108,98,.08); }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.vd-card { background: #fff; border: 1px solid #e6ebef; border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; transition: .14s; display: block; }
.vd-card:hover { border-color: #9db8b5; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,35,50,.07); color: inherit; text-decoration: none; }
.vd-card i { font-size: 22px; color: #026c62; }
.vd-card h5 { font-size: 15.5px; font-weight: 800; margin: 10px 0 4px; color: #10222e; }
.vd-card p { font-size: 13px; color: #5b6b7b; margin: 0 0 10px; }
.vd-count { font-size: 11.5px; font-weight: 700; color: #026c62; background: #e6f2f1; border-radius: 12px; padding: 2px 9px; }

.vd-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 34px; max-width: 1240px; margin: 0 auto; padding: 150px 24px 80px; }
@media (max-width: 1100px) { .vd-layout { grid-template-columns: 240px minmax(0, 1fr); } .vd-toc { display: none; } }
@media (max-width: 820px) { .vd-layout { grid-template-columns: 1fr; padding-top: 130px; } .vd-nav { position: static !important; max-height: none !important; border-right: 0 !important; border-bottom: 1px solid #e6ebef; padding-bottom: 16px; } }

.vd-nav { position: sticky; top: 130px; align-self: start; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 10px; border-right: 1px solid #eef1f4; }
.vd-nav-home { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: #10222e; text-decoration: none; margin-bottom: 12px; }
.vd-nav-home:hover { color: #026c62; text-decoration: none; }
.vd-navsearch { position: relative; margin-bottom: 14px; }
.vd-navsearch i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #8a99a8; font-size: 12px; }
.vd-navsearch input { width: 100%; border: 1px solid #dbe2e8; border-radius: 8px; padding: 7px 10px 7px 30px; font-size: 13px; outline: none; background: #fff; }
.vd-nav-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #7d8b99; margin: 14px 0 4px; }
.vd-nav-title i { color: #026c62; font-size: 13px; }
.vd-nav ul { list-style: none; margin: 0; padding: 0 0 0 20px; }
.vd-nav li a { display: block; font-size: 13.5px; color: #44535f; text-decoration: none; padding: 4px 8px; border-radius: 6px; border-left: 2px solid transparent; }
.vd-nav li a:hover { color: #026c62; background: #f2f7f6; text-decoration: none; }
.vd-nav li a.active { color: #026c62; font-weight: 700; background: #e9f4f3; border-left-color: #026c62; }

.vd-crumbs { font-size: 12.5px; color: #8a99a8; margin-bottom: 14px; }
.vd-crumbs a { color: #026c62; text-decoration: none; }
.vd-crumbs b { color: #44535f; font-weight: 600; }
.vd-crumbs span { margin: 0 4px; }

.vd-body { font-size: 15.5px; line-height: 1.72; color: #24333f; }
.vd-body h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: #10222e; margin: 0 0 14px; }
.vd-body h2 { font-size: 20px; font-weight: 800; color: #10222e; margin: 34px 0 10px; padding-top: 8px; scroll-margin-top: 140px; }
.vd-body h3 { font-size: 16px; font-weight: 700; color: #10222e; margin: 22px 0 6px; }
.vd-body p { margin: 0 0 14px; }
.vd-body ul, .vd-body ol { margin: 0 0 16px; padding-left: 24px; }
.vd-body li { margin-bottom: 6px; }
.vd-body a { color: #026c62; font-weight: 600; text-decoration: none; border-bottom: 1px solid #b9d8d4; }
.vd-body a:hover { border-bottom-color: #026c62; }
.vd-body code { background: #f0f4f6; border: 1px solid #e2e9ed; border-radius: 5px; padding: 1px 6px; font-size: 13.5px; color: #0b5c54; }
.vd-body pre { background: #0f2330; color: #d9e6ee; border-radius: 10px; padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; }
.vd-body pre code { background: none; border: 0; color: inherit; padding: 0; }
.vd-body blockquote { border-left: 3px solid #9fc6c1; background: #f4f9f8; border-radius: 0 10px 10px 0; margin: 0 0 16px; padding: 12px 16px; color: #35494f; }
.vd-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.vd-body th { text-align: left; background: #f4f7f9; padding: 9px 12px; border-bottom: 2px solid #e2e9ed; font-weight: 700; white-space: nowrap; }
.vd-body td { padding: 9px 12px; border-bottom: 1px solid #eef1f4; vertical-align: top; }

.vd-updated { font-size: 12.5px; color: #8a99a8; margin: 26px 0 0; }
.vd-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; border-top: 1px solid #eef1f4; padding-top: 18px; }
.vd-pagelink { border: 1px solid #e2e9ed; border-radius: 12px; padding: 12px 16px; text-decoration: none; min-width: 40%; transition: .12s; }
.vd-pagelink:hover { border-color: #026c62; text-decoration: none; }
.vd-pagelink span { display: block; font-size: 11.5px; color: #8a99a8; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.vd-pagelink b { color: #10222e; font-size: 14px; }
.vd-pagelink.next { text-align: right; margin-left: auto; }

.vd-toc { position: sticky; top: 130px; align-self: start; font-size: 13px; }
.vd-toc p { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #7d8b99; margin-bottom: 8px; }
.vd-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid #eef1f4; }
.vd-toc li a { display: block; color: #5b6b7b; text-decoration: none; padding: 4px 0 4px 12px; margin-left: -2px; border-left: 2px solid transparent; }
.vd-toc li a:hover { color: #026c62; border-left-color: #026c62; }

/* ============ Footer redesign (row 20/21/28) ============ */
.viv-footer { background: #0f2330; color: #b9c7d2; padding: 64px 0 0; }
.viv-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 44px; }
@media (max-width: 991px) { .viv-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .viv-footer-grid { grid-template-columns: 1fr; } }
.viv-footer-logo img { max-height: 40px; filter: brightness(0) invert(1); }
.viv-footer-brand p { font-size: 13.5px; line-height: 1.6; color: #8fa2b0; margin: 14px 0 16px; max-width: 260px; }
.viv-footer-social { display: flex; gap: 10px; margin-bottom: 14px; }
.viv-footer-social a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #d7e2ea; font-size: 15px; transition: .15s; }
.viv-footer-social a:hover { background: #026c62; border-color: #026c62; color: #fff; transform: translateY(-2px); }
.viv-footer-mail { font-size: 13px; color: #8fa2b0; text-decoration: none; }
.viv-footer-mail:hover { color: #7fd1c8; text-decoration: none; }
.viv-footer-col h6 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #7fd1c8; margin-bottom: 14px; }
.viv-footer-col ul { list-style: none; margin: 0; padding: 0; }
.viv-footer-col li { margin-bottom: 9px; }
.viv-footer-col a { font-size: 13.5px; color: #b9c7d2; text-decoration: none; transition: .12s; }
.viv-footer-col a:hover { color: #fff; padding-left: 3px; text-decoration: none; }
.viv-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #7d8f9d; }
.viv-footer-tag { color: #5f7280; }
.viv-footer-lang { margin-left: auto; background: rgba(255,255,255,.06); color: #b9c7d2; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; }

/* ============ Rotating ticker (row 23) ============ */
.viv3-announce { position: relative; overflow: hidden; }
.viv3-announce .viv-tick { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 8px)); opacity: 0; transition: opacity .45s, transform .45s; text-align: center; pointer-events: none; }
.viv3-announce .viv-tick.active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.viv3-announce .viv-tick a { margin-left: 8px; }

/* ============ Logo animation (row 25) ============ */
.viv-logo-anim { opacity: 0; animation: vivLogoIn .7s cubic-bezier(.2,.7,.3,1) .1s forwards; transition: transform .18s ease; transform-origin: left center; }
.viv-logo-anim:hover { transform: scale(1.05); }
@keyframes vivLogoIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Pricing revamp (row 22) ============ */
.vpx-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.vpx-lane { display: flex; gap: 12px; align-items: flex-start; background: #f7fafb; border: 1px solid #e8eef1; border-radius: 12px; padding: 14px 16px; text-align: left; }
.vpx-lane i { color: #026c62; font-size: 18px; margin-top: 2px; }
.vpx-lane b { display: block; font-size: 13.5px; color: #10222e; }
.vpx-lane span { font-size: 12.5px; color: #5b6b7b; line-height: 1.45; }
.vpx-flat { text-align: center; font-size: 13.5px; color: #026c62; font-weight: 600; margin: 14px 0 26px; }
.vpx-ent { display: grid; grid-template-columns: 1.8fr 1fr; gap: 30px; align-items: center; background: #0f2330; border-radius: 18px; padding: 38px 42px; color: #d7e2ea; }
@media (max-width: 820px) { .vpx-ent { grid-template-columns: 1fr; } }
.vpx-ent h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 8px 0 10px; }
.vpx-ent p { font-size: 14.5px; color: #a9bac6; line-height: 1.6; }
.vpx-ent-points { list-style: none; margin: 14px 0 0; padding: 0; }
.vpx-ent-points li { font-size: 13.5px; margin-bottom: 7px; color: #c8d6df; }
.vpx-ent-points i { color: #7fd1c8; margin-right: 8px; }
.vpx-ent-cta { text-align: center; }
.vpx-ent-cta span { display: block; margin-top: 10px; font-size: 12.5px; color: #7d8f9d; }

/* ============ Staff augmentation (row 29) ============ */
.sa-hero { padding: 170px 0 30px; }
.sa-sub { color: #5b6b7b; font-size: 15.5px; max-width: 640px; margin: 12px auto 0; }
.sa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 44px; }
.sa-step { background: #fff; border: 1px solid #e6ebef; border-radius: 14px; padding: 22px; }
.sa-step .n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: #026c62; color: #fff; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 10px; }
.sa-step b { display: block; font-size: 15.5px; color: #10222e; margin-bottom: 4px; }
.sa-step p { font-size: 13.5px; color: #5b6b7b; margin: 0; }
.sa-roles { padding: 50px 0 20px; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 30px; }
.sa-card { background: #fff; border: 1.5px solid #e6ebef; border-radius: 14px; padding: 20px; text-align: left; cursor: pointer; transition: .14s; }
.sa-card:hover { border-color: #026c62; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,35,50,.08); }
.sa-card i { font-size: 22px; color: #026c62; }
.sa-card b { display: block; font-size: 15px; color: #10222e; margin: 8px 0 4px; }
.sa-card p { font-size: 12.5px; color: #5b6b7b; margin: 0 0 10px; min-height: 36px; }
.sa-rate { display: inline-block; font-size: 12.5px; font-weight: 800; color: #026c62; background: #e6f2f1; border-radius: 12px; padding: 3px 10px; }
.sa-pick { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #026c62; }
.sa-form-section { padding: 40px 0 90px; }
.sa-form { background: #fff; border: 1px solid #e6ebef; border-radius: 16px; padding: 28px; margin-top: 24px; }
.sa-form label { display: block; font-size: 13px; font-weight: 700; color: #374151; margin: 12px 0 5px; }
.sa-form input, .sa-form select, .sa-form textarea { width: 100%; border: 1px solid #d8dee4; border-radius: 9px; padding: 10px 12px; font-size: 14.5px; background: #fff; }
.sa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575px) { .sa-two { grid-template-columns: 1fr; } }
.sa-submit { margin-top: 18px; width: 100%; }
.sa-note { text-align: center; font-size: 12.5px; color: #8a99a8; margin-top: 10px; }
.sa-error { color: #dc2626; font-size: 13px; margin-top: 10px; }
.sa-success { background: #d1fae5; color: #065f46; border-radius: 12px; padding: 22px; text-align: center; font-size: 15.5px; font-weight: 600; }