/* ============================================================
   ONVLPC - ONVONIC.COM
   2026-06-15
   ============================================================ */

/* ============================================================
   ONVONIC LANDINGPAGE — COLOR SYSTEM
   Prefix: --onvlpc-
   ============================================================ */
:root {

    /* ---------- PRIMARY (biru) ---------- */
    --onvlpc-primary: #318ae7;
    --onvlpc-primary-dark: #0a1f4a;
    --onvlpc-primary-light: #e8f2fd;
    --onvlpc-primary-hover: #1a6fcf;
    --onvlpc-primary-active: #1560b8;
    --onvlpc-primary-contrast: #ffffff;

    /* ---------- SECONDARY (aksen emas) ---------- */
    --onvlpc-secondary: #E8920A;
    --onvlpc-secondary-dark: #a85e00;
    --onvlpc-secondary-light: #fff8ed;
    --onvlpc-secondary-hover: #d07d00;
    --onvlpc-secondary-active: #a85e00;
    --onvlpc-secondary-contrast: #ffffff;

    /* ---------- DANGER ---------- */
    --onvlpc-danger: #e53e3e;
    --onvlpc-danger-dark: #c53030;
    --onvlpc-danger-light: #fff5f5;
    --onvlpc-danger-hover: #c53030;
    --onvlpc-danger-active: #9b2c2c;
    --onvlpc-danger-contrast: #ffffff;

    /* ---------- WARNING ---------- */
    --onvlpc-warning: #f6c90e;
    --onvlpc-warning-dark: #b7950b;
    --onvlpc-warning-light: #fffbea;
    --onvlpc-warning-hover: #d4aa0c;
    --onvlpc-warning-active: #a8870a;
    --onvlpc-warning-contrast: #1a1a1a;

    /* ---------- INFO ---------- */
    --onvlpc-info: #3182ce;
    --onvlpc-info-dark: #1a5fa8;
    --onvlpc-info-light: #ebf8ff;
    --onvlpc-info-hover: #2b6cb0;
    --onvlpc-info-active: #2c5282;
    --onvlpc-info-contrast: #ffffff;

    /* ---------- SUCCESS ---------- */
    --onvlpc-success: #38a169;
    --onvlpc-success-dark: #276749;
    --onvlpc-success-light: #f0fff4;
    --onvlpc-success-hover: #2f855a;
    --onvlpc-success-active: #276749;
    --onvlpc-success-contrast: #ffffff;

    /* ---------- NEUTRAL / SURFACE ---------- */
    --onvlpc-dark: #0d1a2e;
    --onvlpc-bg: #f6f8fb;
    --onvlpc-surface: #ffffff;
    --onvlpc-surface-alt: #f0f4f8;
    --onvlpc-border: #dce3ec;
    --onvlpc-border-dark: #c2cdd9;

    /* ---------- TEXT ---------- */
    --onvlpc-text: #0d1a2e;
    --onvlpc-text-muted: #506070;
    --onvlpc-text-light: #ffffff;
    --onvlpc-text-inverse: #ffffff;

    /* ---------- OVERLAY ---------- */
    --onvlpc-overlay: rgba(26, 58, 92, 0.55);
    --onvlpc-overlay-sm: rgba(26, 58, 92, 0.25);

    /* ---------- LAYOUT ---------- */
    --onvlpc-max-width: 1280px;
    --onvlpc-nav-h: 76px;
    --onvlpc-topnav-h: 40px;

    /* ---------- RADIUS ---------- */
    --onvlpc-radius-sm: 4px;
    --onvlpc-radius: 8px;
    --onvlpc-radius-lg: 12px;

    /* ---------- SHADOW ---------- */
    --onvlpc-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
    --onvlpc-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    --onvlpc-shadow-lg: 0 12px 32px rgba(10, 31, 74, .12);

    /* ---------- TRANSITION ---------- */
    --onvlpc-transition: 180ms ease;

    /* ---------- Z-INDEX ---------- */
    --onvlpc-z-topnav: 100;
    --onvlpc-z-nav: 110;
    --onvlpc-z-dropdown: 200;
    --onvlpc-z-search-mob: 130;
}

/* ============================================================
   RESET MINIMAL
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--onvlpc-text);
    background: var(--onvlpc-surface);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    line-height: 1.25;
    color: var(--onvlpc-dark);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.onvlpc-container {
    width: 100%;
    max-width: var(--onvlpc-max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ============================================================
        SECTION HELPERS
        ============================================================ */
section {
    padding: 5rem 0;
}

.onvlpc-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.onvlpc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--onvlpc-primary);
    background: var(--onvlpc-primary-light);
    padding: .4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.onvlpc-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--onvlpc-secondary);
    display: inline-block;
}

.onvlpc-section-head h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: .9rem;
}

.onvlpc-section-head p {
    color: var(--onvlpc-text-muted);
    font-size: 1.05rem;
}

.onvlpc-section-alt {
    background: var(--onvlpc-bg);
}

/* ============================================================
        TOP NAVBAR (info bar)
        ============================================================ */
.onvlpc-topnav {
    height: var(--onvlpc-topnav-h);
    background: var(--onvlpc-primary-dark);
    color: var(--onvlpc-text-light);
    font-size: .82rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: var(--onvlpc-z-nav);
}

.onvlpc-topnav .onvlpc-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.onvlpc-topnav-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.onvlpc-topnav-links a,
.onvlpc-topnav-links span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .9;
    transition: opacity var(--onvlpc-transition);
}

.onvlpc-topnav-links a:hover {
    opacity: 1;
    color: var(--onvlpc-secondary);
}

.onvlpc-topnav-social {
    display: flex;
    gap: .9rem;
}

.onvlpc-topnav-social a {
    opacity: .85;
    transition: opacity var(--onvlpc-transition), color var(--onvlpc-transition);
}

.onvlpc-topnav-social a:hover {
    opacity: 1;
    color: var(--onvlpc-secondary);
}

/* ============================================================
        MAIN NAVBAR
        ============================================================ */
.onvlpc-navbar {
    height: var(--onvlpc-nav-h);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    position: sticky;
    top: var(--onvlpc-topnav-h);
    z-index: var(--onvlpc-z-nav);
    border-bottom: 1px solid var(--onvlpc-border);
    transition: box-shadow var(--onvlpc-transition), background var(--onvlpc-transition);
}

.onvlpc-navbar.is-scrolled {
    box-shadow: var(--onvlpc-shadow-sm);
    background: rgba(255, 255, 255, .97);
}

.onvlpc-navbar .onvlpc-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.onvlpc-navbar .onvlpc-nav-links {
    margin-left: auto;
}

.onvlpc-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--onvlpc-primary-dark);
    white-space: nowrap;
}

.onvlpc-brand img {
    height: 60px;
    width: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.onvlpc-brand small {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--onvlpc-text-muted);
    letter-spacing: .04em;
}

.onvlpc-nav-links a.onvlpc-nav-links-btn {
    display: none;
}

.onvlpc-nav-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.onvlpc-nav-links a {
    font-weight: 600;
    font-size: .92rem;
    color: var(--onvlpc-text);
    position: relative;
    padding: .35rem 0;
    transition: color var(--onvlpc-transition);
}

.onvlpc-nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--onvlpc-secondary);
    transition: width var(--onvlpc-transition);
}

.onvlpc-nav-links a:hover {
    color: var(--onvlpc-primary);
}

.onvlpc-nav-links a:hover::after {
    width: 100%;
}

.onvlpc-nav-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.onvlpc-nav-actions-buttons {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.onvlpc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--onvlpc-radius);
    font-weight: 700;
    font-size: .92rem;
    transition: all var(--onvlpc-transition);
    white-space: nowrap;
}

.onvlpc-btn-primary {
    background: var(--onvlpc-primary);
    color: var(--onvlpc-primary-contrast);
    box-shadow: var(--onvlpc-shadow-sm);
}

.onvlpc-btn-primary:hover {
    background: var(--onvlpc-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--onvlpc-shadow);
}

.onvlpc-btn-secondary {
    background: var(--onvlpc-secondary);
    color: var(--onvlpc-secondary-contrast);
}

.onvlpc-btn-secondary:hover {
    background: var(--onvlpc-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--onvlpc-shadow);
}

.onvlpc-btn-outline {
    background: transparent;
    color: var(--onvlpc-primary);
    border: 1.5px solid var(--onvlpc-border-dark);
}

.onvlpc-btn-outline:hover {
    border-color: var(--onvlpc-primary);
    background: var(--onvlpc-primary-light);
}

.onvlpc-btn-ghost-light {
    background: rgba(255, 255, 255, .12);
    color: var(--onvlpc-text-light);
    border: 1.5px solid rgba(255, 255, 255, .35);
}

.onvlpc-btn-ghost-light:hover {
    background: rgba(255, 255, 255, .22);
}

/* burger */
.onvlpc-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: .5rem;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

.onvlpc-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--onvlpc-primary-dark);
    border-radius: 2px;
    transition: var(--onvlpc-transition);
}

.onvlpc-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.onvlpc-burger.is-active span:nth-child(2) {
    opacity: 0;
}

.onvlpc-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
        HERO
        ============================================================ */
.onvlpc-hero {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    background:
        linear-gradient(115deg, rgba(10, 31, 74, .92) 0%, rgba(20, 105, 174, .82) 55%, rgba(20, 105, 174, .55) 100%),
        url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    overflow: hidden;
}

.onvlpc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(232, 146, 10, .18), transparent 55%);
    pointer-events: none;
}

.onvlpc-hero .onvlpc-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: center;
    padding-block: 2rem;
}

.onvlpc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: .45rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.onvlpc-hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--onvlpc-secondary);
}

.onvlpc-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: .9rem;
    letter-spacing: -.01em;
}

.onvlpc-hero h1 span {
    color: var(--onvlpc-secondary);
}

.onvlpc-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: 1.08rem;
    max-width: 560px;
    margin-bottom: 1.4rem;
}

.onvlpc-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.onvlpc-hero-stats {
    display: flex;
    gap: 2.2rem;
    flex-wrap: wrap;
}

.onvlpc-hero-stats div strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
}

.onvlpc-hero-stats div span {
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
}

.onvlpc-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.onvlpc-hero-visual img {
    width: 100%;
    border-radius: var(--onvlpc-radius-lg);
    box-shadow: var(--onvlpc-shadow-lg);
    border: 6px solid rgba(255, 255, 255, .15);
}

.onvlpc-hero-badge {
    position: absolute;
    bottom: -.9rem;
    left: -.9rem;
    background: var(--onvlpc-success-light);
    border-radius: var(--onvlpc-radius);
    padding: .55rem .85rem;
    box-shadow: var(--onvlpc-shadow);
    border: 1px solid rgba(56, 161, 105, .18);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    max-width: 270px;
    white-space: nowrap;
}

.onvlpc-hero-badge-2 {
    position: absolute;
    top: -.9rem;
    right: -.9rem;
    background: var(--onvlpc-primary-light);
    border-radius: var(--onvlpc-radius);
    padding: .55rem .85rem;
    box-shadow: var(--onvlpc-shadow);
    border: 1px solid rgba(20, 105, 174, .15);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    max-width: 270px;
    white-space: nowrap;
}

.onvlpc-hero-badge .ic,
.onvlpc-hero-badge-2 .ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.onvlpc-hero-badge .ic {
    background: rgba(56, 161, 105, .14);
    color: var(--onvlpc-success);
}

.onvlpc-hero-badge-2 .ic {
    background: rgba(20, 105, 174, .12);
    color: var(--onvlpc-primary);
}

.onvlpc-hero-badge strong,
.onvlpc-hero-badge-2 strong {
    display: block;
    font-size: .76rem;
    color: var(--onvlpc-dark);
}

.onvlpc-hero-badge span,
.onvlpc-hero-badge-2 span {
    font-size: .68rem;
    color: var(--onvlpc-text-muted);
}

/* ============================================================
        ABOUT
        ============================================================ */
.onvlpc-about {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
}

.onvlpc-about-media {
    position: relative;
}

.onvlpc-about-media img {
    width: 100%;
    border-radius: var(--onvlpc-radius-lg);
    box-shadow: var(--onvlpc-shadow-lg);
    aspect-ratio: 4/5;
    object-fit: cover;
}

.onvlpc-about-media .onvlpc-float-card {
    position: absolute;
    bottom: -1.4rem;
    right: -1.4rem;
    background: var(--onvlpc-primary);
    color: #fff;
    border-radius: var(--onvlpc-radius-lg);
    padding: 1.3rem 1.6rem;
    box-shadow: var(--onvlpc-shadow-lg);
    max-width: 230px;
}

.onvlpc-about-media .onvlpc-float-card strong {
    font-size: 1.7rem;
    display: block;
    font-weight: 800;
    color: var(--onvlpc-secondary);
}

.onvlpc-about-media .onvlpc-float-card span {
    font-size: .85rem;
    opacity: .9;
}

.onvlpc-about-body .onvlpc-eyebrow {
    margin-bottom: 1rem;
}

.onvlpc-about-body h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.onvlpc-about-body p {
    color: var(--onvlpc-text-muted);
    margin-bottom: 1.1rem;
}

.onvlpc-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    margin-top: 1.5rem;
}

.onvlpc-about-points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 600;
    font-size: .92rem;
}

.onvlpc-about-points li .ic {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--onvlpc-primary-light);
    color: var(--onvlpc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

/* ============================================================
        ONLINE STORE
        ============================================================ */
.onvlpc-store {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}

.onvlpc-store-body h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.onvlpc-store-body p {
    color: var(--onvlpc-text-muted);
    margin-bottom: 1.2rem;
}

.onvlpc-store-points {
    display: grid;
    gap: .7rem;
    margin-bottom: 1.8rem;
}

.onvlpc-store-points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: .94rem;
}

.onvlpc-store-points li .ic {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--onvlpc-secondary-light);
    color: var(--onvlpc-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.onvlpc-store-media {
    position: relative;
    border-radius: var(--onvlpc-radius-lg);
    overflow: hidden;
    box-shadow: var(--onvlpc-shadow-lg);
    border: 1px solid var(--onvlpc-border);
}

.onvlpc-store-media img {
    width: 100%;
    display: block;
}

/* ============================================================
        VISI MISI
        ============================================================ */
.onvlpc-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 1.6rem;
}

.onvlpc-vm-card {
    border-radius: var(--onvlpc-radius-lg);
    padding: 2.4rem;
    box-shadow: var(--onvlpc-shadow-sm);
}

.onvlpc-vm-card.vision {
    background: linear-gradient(150deg, var(--onvlpc-primary-dark), var(--onvlpc-primary));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.onvlpc-vm-card.vision .ic {
    width: 56px;
    height: 56px;
    border-radius: var(--onvlpc-radius);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    color: var(--onvlpc-secondary);
}

.onvlpc-vm-card.vision h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: .8rem;
}

.onvlpc-vm-card.vision p {
    color: rgba(255, 255, 255, .85);
}

.onvlpc-vm-card.mission {
    background: var(--onvlpc-surface-alt);
    border: 1px solid var(--onvlpc-border);
}

.onvlpc-vm-card.mission .ic {
    width: 56px;
    height: 56px;
    border-radius: var(--onvlpc-radius);
    background: var(--onvlpc-secondary-light);
    color: var(--onvlpc-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}

.onvlpc-vm-card.mission h3 {
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.onvlpc-mission-list {
    display: grid;
    gap: .9rem;
}

.onvlpc-mission-list li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--onvlpc-surface);
    border-radius: var(--onvlpc-radius);
    padding: .9rem 1.1rem;
    box-shadow: var(--onvlpc-shadow-sm);
}

.onvlpc-mission-list li .num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--onvlpc-primary-light);
    color: var(--onvlpc-primary);
    font-weight: 800;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onvlpc-mission-list li p {
    font-size: .92rem;
    color: var(--onvlpc-text-muted);
}

/* ============================================================
        VALUES
        ============================================================ */
.onvlpc-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.onvlpc-value-card {
    background: var(--onvlpc-surface);
    border: 1px solid var(--onvlpc-border);
    border-radius: var(--onvlpc-radius-lg);
    padding: 2.2rem;
    transition: transform var(--onvlpc-transition), box-shadow var(--onvlpc-transition), border-color var(--onvlpc-transition);
}

.onvlpc-value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--onvlpc-shadow-lg);
    border-color: transparent;
}

.onvlpc-value-card .ic {
    width: 58px;
    height: 58px;
    border-radius: var(--onvlpc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1.4rem;
}

.onvlpc-value-card:nth-child(1) .ic {
    background: var(--onvlpc-primary-light);
    color: var(--onvlpc-primary);
}

.onvlpc-value-card:nth-child(2) .ic {
    background: var(--onvlpc-secondary-light);
    color: var(--onvlpc-secondary);
}

.onvlpc-value-card:nth-child(3) .ic {
    background: var(--onvlpc-success-light);
    color: var(--onvlpc-success);
}

.onvlpc-value-card h3 {
    font-size: 1.2rem;
    margin-bottom: .7rem;
}

.onvlpc-value-card p {
    color: var(--onvlpc-text-muted);
    font-size: .92rem;
}

/* ============================================================
        PRODUCTS
        ============================================================ */
.onvlpc-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.onvlpc-product-card {
    background: var(--onvlpc-surface);
    border: 1px solid var(--onvlpc-border);
    border-radius: var(--onvlpc-radius-lg);
    padding: 1.6rem 1.5rem;
    transition: all var(--onvlpc-transition);
}

.onvlpc-product-card:hover {
    border-color: var(--onvlpc-primary);
    box-shadow: var(--onvlpc-shadow);
    transform: translateY(-4px);
}

.onvlpc-product-card .head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .8rem;
}

.onvlpc-product-card .ic {
    width: 42px;
    height: 42px;
    border-radius: var(--onvlpc-radius);
    background: var(--onvlpc-primary-light);
    color: var(--onvlpc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.onvlpc-product-card h4 {
    font-size: .98rem;
    font-weight: 700;
}

.onvlpc-product-card p {
    font-size: .82rem;
    color: var(--onvlpc-text-muted);
    line-height: 1.55;
}

/* ============================================================
        MAINTENANCE BANNER
        ============================================================ */
.onvlpc-maintenance {
    position: relative;
    border-radius: var(--onvlpc-radius-lg);
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(10, 31, 74, .92), rgba(20, 105, 174, .85)),
        url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=1600&q=80') center/cover;
    padding: 3.5rem;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 2rem;
    align-items: center;
    color: #fff;
}

.onvlpc-maintenance .onvlpc-eyebrow {
    background: rgba(255, 255, 255, .12);
    color: var(--onvlpc-secondary);
}

.onvlpc-maintenance h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: .9rem;
}

.onvlpc-maintenance p {
    color: rgba(255, 255, 255, .85);
    max-width: 520px;
}

.onvlpc-maintenance-actions {
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
        BRANDS / PARTNERS
        ============================================================ */
.onvlpc-brand-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}

.onvlpc-brand-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: onvlpc-scroll 42s linear infinite;
}

.onvlpc-brand-track:hover {
    animation-play-state: paused;
}

@keyframes onvlpc-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.onvlpc-brand-chip {
    flex-shrink: 0;
    width: 160px;
    height: 90px;
    background: var(--onvlpc-surface);
    border: 1px solid var(--onvlpc-border);
    border-radius: var(--onvlpc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.4rem;
    transition: all var(--onvlpc-transition);
}

.onvlpc-brand-chip img {
    max-height: 36px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(.65);
    transition: filter var(--onvlpc-transition);
}

.onvlpc-brand-chip:hover {
    border-color: var(--onvlpc-primary);
    box-shadow: var(--onvlpc-shadow-sm);
}

.onvlpc-brand-chip:hover img {
    filter: grayscale(0) opacity(1);
}

/* ============================================================
        WHY US
        ============================================================ */
.onvlpc-why-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
}

.onvlpc-why-media {
    position: relative;
    border-radius: var(--onvlpc-radius-lg);
    overflow: hidden;
    box-shadow: var(--onvlpc-shadow-lg);
}

.onvlpc-why-media img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.onvlpc-why-list {
    display: grid;
    gap: 1.1rem;
}

.onvlpc-why-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.2rem;
    border-radius: var(--onvlpc-radius);
    transition: background var(--onvlpc-transition);
}

.onvlpc-why-item:hover {
    background: var(--onvlpc-surface-alt);
}

.onvlpc-why-item .ic {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--onvlpc-success-light);
    color: var(--onvlpc-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.onvlpc-why-item h4 {
    font-size: 1.02rem;
    margin-bottom: .25rem;
}

.onvlpc-why-item p {
    font-size: .9rem;
    color: var(--onvlpc-text-muted);
}

/* ============================================================
        CUSTOMERS
        ============================================================ */
.onvlpc-customer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
}

.onvlpc-customer-chip {
    background: var(--onvlpc-surface);
    border: 1px solid var(--onvlpc-border);
    border-radius: var(--onvlpc-radius);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 120px;
    transition: all var(--onvlpc-transition);
}

.onvlpc-customer-chip img {
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
}

.onvlpc-customer-chip span {
    font-size: .72rem;
    font-weight: 700;
    color: var(--onvlpc-text-muted);
    line-height: 1.3;
}

.onvlpc-customer-chip:hover {
    border-color: var(--onvlpc-primary);
    transform: translateY(-3px);
    box-shadow: var(--onvlpc-shadow-sm);
}

.onvlpc-customer-note {
    text-align: center;
    margin-top: 2rem;
    color: var(--onvlpc-text-muted);
    font-style: italic;
    font-size: .9rem;
}

.onvlpc-cta-banner {
    margin-top: 3.5rem;
    border-radius: var(--onvlpc-radius-lg);
    background: linear-gradient(120deg, var(--onvlpc-primary-dark), var(--onvlpc-primary) 70%);
    padding: 3rem;
    text-align: center;
    color: #fff;
}

.onvlpc-cta-banner p {
    max-width: 680px;
    margin: 0 auto 1.6rem;
    color: rgba(255, 255, 255, .85);
    font-size: 1.02rem;
}

/* ============================================================
        CONTACT
        ============================================================ */
.onvlpc-contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 1.5rem;
}

.onvlpc-contact-card {
    background: var(--onvlpc-surface);
    border: 1px solid var(--onvlpc-border);
    border-radius: var(--onvlpc-radius-lg);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    justify-content: center;
}

.onvlpc-contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.onvlpc-contact-item .ic {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--onvlpc-radius);
    background: var(--onvlpc-primary-light);
    color: var(--onvlpc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.onvlpc-contact-item strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .15rem;
}

.onvlpc-contact-item span,
.onvlpc-contact-item a {
    font-size: .88rem;
    color: var(--onvlpc-text-muted);
}

.onvlpc-contact-map {
    border-radius: var(--onvlpc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--onvlpc-border);
    min-height: 320px;
}

.onvlpc-contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}

/* ============================================================
        FOOTER
        ============================================================ */
.onvlpc-footer {
    background: var(--onvlpc-primary-dark);
    color: rgba(255, 255, 255, .8);
    padding-top: 4rem;
}

.onvlpc-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.onvlpc-footer-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.onvlpc-footer-brand img {
    height: 40px;
    width: 40px;
}

.onvlpc-footer-brand strong {
    color: #fff;
    font-size: 1.05rem;
}

.onvlpc-footer-brand small {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .6);
}

.onvlpc-footer p {
    font-size: .9rem;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 1.2rem;
}

.onvlpc-footer h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1.1rem;
}

.onvlpc-footer-links {
    display: grid;
    gap: .7rem;
}

.onvlpc-footer-links a {
    font-size: .9rem;
    color: rgba(255, 255, 255, .65);
    transition: color var(--onvlpc-transition);
}

.onvlpc-footer-links a:hover {
    color: var(--onvlpc-secondary);
}

.onvlpc-footer-social {
    display: flex;
    gap: .7rem;
    margin-top: .5rem;
}

.onvlpc-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--onvlpc-transition);
}

.onvlpc-footer-social a:hover {
    background: var(--onvlpc-secondary);
    transform: translateY(-3px);
}

.onvlpc-footer-bottom {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
}

/* ============================================================
        SCROLL TOP
        ============================================================ */
.onvlpc-scrolltop {
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--onvlpc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--onvlpc-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--onvlpc-transition);
    z-index: 90;
}

.onvlpc-scrolltop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.onvlpc-scrolltop:hover {
    background: var(--onvlpc-primary-hover);
}

/* ============================================================
        REVEAL ANIMATION
        ============================================================ */
.onvlpc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.onvlpc-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
        RESPONSIVE
        ============================================================ */
@media (max-width: 1100px) {
    .onvlpc-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .onvlpc-customer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
        NAVBAR MOBILE MODE
        Triggered by: max-width: 992px (normal responsive)
                  OR: .is-mobile class (JS overflow/wrap detection above 992px)
        ============================================================ */
@media (max-width: 992px) {
    .onvlpc-nav-links {
        position: fixed;
        top: calc(var(--onvlpc-topnav-h) + var(--onvlpc-nav-h));
        left: 0;
        right: 0;
        height: calc(100vh - var(--onvlpc-topnav-h) - var(--onvlpc-nav-h));
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: .5rem 1.5rem 1.5rem;
        overflow-y: auto;
        box-shadow: var(--onvlpc-shadow);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: all var(--onvlpc-transition);
        z-index: var(--onvlpc-z-dropdown);
    }

    .onvlpc-nav-links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .onvlpc-nav-links a {
        width: 100%;
        padding: .85rem 0;
        border-bottom: 1px solid var(--onvlpc-border);
    }

    .onvlpc-nav-links a.onvlpc-nav-links-btn {
        display: flex;
        justify-content: center;
        border-bottom: none;
        margin-top: .6rem;
    }

    .onvlpc-nav-links a.onvlpc-nav-links-btn+a.onvlpc-nav-links-btn {
        margin-top: .75rem;
    }

    .onvlpc-nav-actions-buttons {
        display: none;
    }

    .onvlpc-burger {
        display: flex;
    }

    .onvlpc-brand small {
        font-size: .6rem;
    }
}

.onvlpc-navbar.is-mobile .onvlpc-nav-links {
    position: fixed;
    top: calc(var(--onvlpc-topnav-h) + var(--onvlpc-nav-h));
    left: 0;
    right: 0;
    height: calc(100vh - var(--onvlpc-topnav-h) - var(--onvlpc-nav-h));
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .5rem 1.5rem 1.5rem;
    overflow-y: auto;
    box-shadow: var(--onvlpc-shadow);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--onvlpc-transition);
    z-index: var(--onvlpc-z-dropdown);
}

.onvlpc-navbar.is-mobile .onvlpc-nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.onvlpc-navbar.is-mobile .onvlpc-nav-links a {
    width: 100%;
    padding: .85rem 0;
    border-bottom: 1px solid var(--onvlpc-border);
}

.onvlpc-navbar.is-mobile .onvlpc-nav-links a.onvlpc-nav-links-btn {
    display: flex;
    justify-content: center;
    border-bottom: none;
    margin-top: .6rem;
}

.onvlpc-navbar.is-mobile .onvlpc-nav-links a.onvlpc-nav-links-btn+a.onvlpc-nav-links-btn {
    margin-top: .75rem;
}

.onvlpc-navbar.is-mobile .onvlpc-nav-actions-buttons {
    display: none;
}

.onvlpc-navbar.is-mobile .onvlpc-burger {
    display: flex;
}

.onvlpc-navbar.is-mobile .onvlpc-brand small {
    font-size: .6rem;
}

@media (max-width: 992px) {
    .onvlpc-topnav-links {
        display: none;
    }

    .onvlpc-topnav .onvlpc-container {
        justify-content: flex-end;
    }

    .onvlpc-hero .onvlpc-container,
    .onvlpc-about,
    .onvlpc-store,
    .onvlpc-vm-grid,
    .onvlpc-why-grid,
    .onvlpc-contact-grid {
        grid-template-columns: 1fr;
    }

    .onvlpc-hero-visual {
        order: 1;
    }

    .onvlpc-hero-badge {
        left: 1rem;
    }

    .onvlpc-hero-badge-2 {
        right: 1rem;
    }

    .onvlpc-about-media .onvlpc-float-card {
        right: 1rem;
    }

    .onvlpc-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .onvlpc-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .onvlpc-customer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .onvlpc-maintenance {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .onvlpc-maintenance-actions {
        justify-content: center;
    }

    .onvlpc-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    section {
        padding: 3.2rem 0;
    }

    .onvlpc-brand {
        font-size: .85rem;
        gap: .5rem;
    }

    :root {
        --onvlpc-nav-h: 86px;
    }

    .onvlpc-navbar {
        height: var(--onvlpc-nav-h);
    }

    .onvlpc-nav-links {
        top: var(--onvlpc-nav-h);
        height: calc(100vh - var(--onvlpc-nav-h));
    }

    .onvlpc-brand img {
        height: 48px;
        width: auto;
    }

    .onvlpc-nav-actions {
        gap: .5rem;
    }

    .onvlpc-hero {
        min-height: auto;
    }

    .onvlpc-hero .onvlpc-container {
        padding-block: 3rem 2rem;
    }

    .onvlpc-hero-eyebrow {
        font-size: .65rem;
        letter-spacing: .08em;
        padding: .4rem .85rem;
        gap: .4rem;
    }

    .onvlpc-hero-eyebrow::before {
        width: 6px;
        height: 6px;
    }

    .onvlpc-hero-stats {
        gap: 1.4rem;
    }

    .onvlpc-hero-stats div strong {
        font-size: 1.4rem;
    }

    .onvlpc-values-grid,
    .onvlpc-customer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .onvlpc-products-grid {
        grid-template-columns: 1fr 1fr;
    }

    .onvlpc-about-points {
        grid-template-columns: 1fr;
    }

    .onvlpc-footer-grid {
        grid-template-columns: 1fr;
    }

    .onvlpc-vm-card {
        padding: 1.6rem;
    }

    .onvlpc-maintenance {
        padding: 2rem;
    }

    .onvlpc-cta-banner {
        padding: 2rem 1.4rem;
    }
}

@media (max-width: 420px) {

    .onvlpc-products-grid,
    .onvlpc-customer-grid,
    .onvlpc-values-grid {
        grid-template-columns: 1fr;
    }

    .onvlpc-hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .onvlpc-section-head h2 {
        font-size: 1.35rem;
    }

    .onvlpc-topnav-links a {
        display: none;
    }
}