/* ==========================================================
   OneVestasi - Public/Home Premium Theme
   Scope utama: halaman publik + home
   ========================================================== */

:root {
    --ov-bg: #090806;
    --ov-bg-soft: #100e0a;
    --ov-card: #15120d;
    --ov-card-2: #1d1810;
    --ov-gold: #a8844f;
    --ov-gold-2: #c6a96f;
    --ov-gold-3: #e0d1b2;
    --ov-gold-dark: #6f5636;
    --ov-line: rgba(198, 169, 111, .18);
    --ov-text: #fffaf0;
    --ov-muted: #bdb5a7;
    --ov-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    --ov-green: #00A9A4;
    --ov-green-light: #20C7C1;
    --ov-green-dark: #087F7B;
    --ov-green-shadow: rgba(0, 169, 164, .24);
}

html { scroll-behavior: smooth; }

body.ov-public-site {
    margin: 0;
    overflow-x: hidden;
    background: var(--ov-bg);
    color: var(--ov-text);
}

body.ov-public-site .page-wrapper {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(168, 132, 79, .055), transparent 26%),
        radial-gradient(circle at 88% 25%, rgba(198, 169, 111, .04), transparent 24%),
        var(--ov-bg);
}

/* Header */
body.ov-public-site .ov-header {
    position: absolute;
    top: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

body.ov-public-site .ov-header .header-bottom {
    background: rgba(9, 8, 6, .78) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.ov-public-site .ov-header.sticky {
    top: 0 !important;
    background: rgba(9, 8, 6, .95) !important;
    border-bottom: 1px solid var(--ov-line);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}

body.ov-public-site .ov-header.sticky .header-bottom {
    background: transparent !important;
}

body.ov-public-site .ov-header .navbar {
    min-height: 82px;
    padding: 10px 0;
}

body.ov-public-site .ov-header .navbar-brand img {
    width: 178px;
    max-height: 58px;
    object-fit: contain;
}

body.ov-public-site .ov-header .navbar-nav {
    gap: 6px;
}

body.ov-public-site .ov-header .navbar .navbar-nav .nav-item > a.nav-link {
    color: #eee8dc !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 11px 15px;
    border-radius: 10px;
}

body.ov-public-site .ov-header .navbar .navbar-nav .nav-item > a.nav-link:hover,
body.ov-public-site .ov-header .navbar .navbar-nav .nav-item > a.nav-link.active {
    color: var(--ov-gold-2) !important;
}

body.ov-public-site .ov-header .navbar .navbar-nav > .nav-item > a:after {
    display: none;
}

body.ov-public-site .ov-nav-login { margin-left: 8px; }

body.ov-public-site .ov-nav-login > a {
    border: 1px solid rgba(0, 169, 164, .52);
    color: var(--ov-green-light) !important;
    background: rgba(0, 169, 164, .035);
}

body.ov-public-site .ov-nav-login > a:hover {
    color: #ffffff !important;
    border-color: rgba(32, 199, 193, .75);
    background: rgba(0, 169, 164, .11);
}

body.ov-public-site .ov-nav-register > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ov-green-dark) 0%, var(--ov-green) 52%, var(--ov-green-light) 100%);
    border: 1px solid rgba(32, 199, 193, .58);
    box-shadow: 0 8px 24px var(--ov-green-shadow);
}

body.ov-public-site .ov-nav-register > a:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 11px 28px rgba(0, 169, 164, .32);
}

body.ov-public-site .mobile-menu a,
body.ov-public-site .menu-close a {
    color: var(--ov-gold-2) !important;
}

body.ov-public-site .mobile-menu i { font-size: 28px; }

/* Floating WhatsApp */
.ov-whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    color: #ffffff !important;
    font-size: 27px;
    background: linear-gradient(145deg, var(--ov-green-light), var(--ov-green-dark) 82%);
    border: 1px solid rgba(32, 199, 193, .58);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35), 0 0 0 7px rgba(0, 169, 164, .07);
    transition: .25s ease;
}

.ov-whatsapp-float:hover {
    transform: translateY(-4px);
    color: #ffffff !important;
}

/* Home base */
.ov-home { background: var(--ov-bg); }
.ov-home h1, .ov-home h2, .ov-home h3, .ov-home p { color: inherit; }
.ov-home img { max-width: 100%; }

/* Hero */
.ov-hero {
    min-height: 760px;
    position: relative;
    padding: 165px 0 105px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(180deg, rgba(9, 8, 6, .15), rgba(9, 8, 6, .92)),
        radial-gradient(circle at 78% 42%, rgba(168, 132, 79, .10), transparent 30%),
        radial-gradient(circle at 18% 32%, rgba(224, 209, 178, .05), transparent 24%),
        #090806;
    border-bottom: 1px solid rgba(198, 169, 111, .065);
}

.ov-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
}

.ov-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.ov-hero-glow-one {
    width: 310px;
    height: 310px;
    right: -120px;
    top: 150px;
    background: rgba(168, 132, 79, .055);
}

.ov-hero-glow-two {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: 30px;
    background: rgba(198, 169, 111, .032);
}

.ov-eyebrow,
.ov-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ov-gold-2);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2px;
}

.ov-eyebrow {
    padding: 10px 14px;
    border: 1px solid var(--ov-line);
    border-radius: 999px;
    background: rgba(198, 169, 111, .04);
    margin-bottom: 24px;
}

.ov-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ov-gold-2);
    box-shadow: 0 0 0 5px rgba(198, 169, 111, .075);
}

.ov-hero-copy h1 {
    max-width: 650px;
    margin: 0 0 24px;
    font-size: clamp(43px, 5vw, 72px);
    line-height: 1.02;
    font-weight: 750;
    letter-spacing: -2.8px;
    color: #fffaf0;
}

.ov-hero-copy h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(100deg, #8f7047 0%, #b99c67 38%, #ded0b2 62%, #9d7b4d 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ov-hero-lead {
    max-width: 610px;
    margin: 0 0 30px;
    color: var(--ov-muted) !important;
    font-size: 17px;
    line-height: 1.8;
}

.ov-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.ov-btn {
    min-height: 52px;
    padding: 0 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none !important;
    transition: all .25s ease;
}

.ov-btn i { font-size: 18px; }
.ov-btn:hover { transform: translateY(-2px); }

.ov-btn-gold {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--ov-green-dark) 0%, var(--ov-green) 52%, var(--ov-green-light) 100%);
    border: 1px solid rgba(32, 199, 193, .58);
    box-shadow: 0 13px 32px var(--ov-green-shadow);
}

.ov-btn-gold:hover {
    color: #ffffff !important;
    box-shadow: 0 16px 36px rgba(0, 169, 164, .32);
}

.ov-btn-outline {
    color: var(--ov-green-light) !important;
    border: 1px solid rgba(0, 169, 164, .45);
    background: rgba(0, 169, 164, .035);
}

.ov-btn-outline:hover {
    color: #ffffff !important;
    border-color: rgba(32, 199, 193, .72);
    background: rgba(0, 169, 164, .10);
}

.ov-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.ov-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ov-trust-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--ov-gold-2);
    background: rgba(198, 169, 111, .055);
    border: 1px solid var(--ov-line);
}

.ov-trust-item strong,
.ov-trust-item small { display: block; }
.ov-trust-item strong { color: #eee7d9; font-size: 13px; margin-bottom: 2px; }
.ov-trust-item small { color: #8f887d; font-size: 11px; }

/* Hero visual */
.ov-hero-visual {
    min-height: 510px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ov-visual-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(198, 169, 111, .10);
}

.ov-ring-one { width: 480px; height: 480px; }
.ov-ring-two { width: 390px; height: 390px; border-style: dashed; opacity: .7; }

.ov-main-card {
    position: relative;
    z-index: 3;
    width: min(100%, 455px);
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(31, 26, 17, .96), rgba(13, 11, 8, .98));
    border: 1px solid rgba(198, 169, 111, .16);
    box-shadow: var(--ov-shadow), inset 0 1px rgba(255, 255, 255, .04);
}

.ov-main-card:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(224, 209, 178, .045), transparent 28%);
}

.ov-main-card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ov-main-card-head span,
.ov-main-card-head strong { display: block; }
.ov-main-card-head > div > span { color: #91897c; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }
.ov-main-card-head > div > strong { margin-top: 4px; color: #fff7e8; font-size: 17px; }

.ov-live-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    color: #d9d2c6 !important;
    font-size: 11px !important;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.ov-live-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ov-gold-2);
    box-shadow: 0 0 0 4px rgba(198, 169, 111, .065);
}

.ov-product-grid { display: grid; gap: 10px; }

.ov-product-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 62px 1fr 26px;
    align-items: center;
    gap: 13px;
    padding: 10px 14px 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
    transition: .25s ease;
}

.ov-product-card:hover {
    transform: translateX(3px);
    border-color: rgba(198, 169, 111, .16);
    background: rgba(198, 169, 111, .028);
}

.ov-product-image {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

.ov-product-image img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.ov-product-info small,
.ov-product-info strong { display: block; }
.ov-product-info small { color: #898276; font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; }
.ov-product-info strong { margin-top: 3px; color: #f4eee4; font-size: 15px; }
.ov-product-card > i { color: #81786c; font-size: 18px; }

.ov-card-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 13px;
    border-radius: 12px;
    color: #9f978b;
    font-size: 11px;
    background: rgba(198, 169, 111, .028);
    border: 1px solid rgba(198, 169, 111, .065);
}

.ov-card-note i { color: var(--ov-gold-2); font-size: 16px; }

.ov-floating-chip {
    position: absolute;
    z-index: 5;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 15px;
    background: rgba(18, 15, 10, .92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(198, 169, 111, .14);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .3);
}

.ov-floating-chip > span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #161006;
    background: linear-gradient(145deg, #ddcfb4, #9f7d4d);
}

.ov-floating-chip small,
.ov-floating-chip strong { display: block; }
.ov-floating-chip small { color: #81796d; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.ov-floating-chip strong { color: #f5eee2; font-size: 12px; }
.ov-chip-top { top: 55px; right: -6px; }
.ov-chip-bottom { bottom: 46px; left: -12px; }

/* Value strip */
.ov-value-strip {
    position: relative;
    z-index: 4;
    margin-top: -34px;
}

.ov-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 18px;
    overflow: hidden;
    background: #12100c;
    border: 1px solid rgba(198, 169, 111, .11);
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
}

.ov-value-item {
    min-height: 108px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-right: 1px solid rgba(255,255,255,.06);
}
.ov-value-item:last-child { border-right: 0; }
.ov-value-item > span {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ov-gold-2);
    background: rgba(198,169,111,.05);
    border: 1px solid rgba(198,169,111,.09);
}
.ov-value-item strong,
.ov-value-item small { display: block; }
.ov-value-item strong { color: #f2ece2; font-size: 13px; margin-bottom: 4px; }
.ov-value-item small { color: #8e877c; font-size: 10px; line-height: 1.4; }

/* Sections */
.ov-section { padding: 105px 0; }
.ov-section-heading { max-width: 740px; }
.ov-section-heading.text-center { margin-left: auto; margin-right: auto; }
.ov-section-heading h2 {
    margin: 13px 0 14px;
    color: #fff8ec;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    letter-spacing: -1.4px;
    font-weight: 720;
}
.ov-section-heading p,
.ov-section-sidecopy {
    color: #9f978b !important;
    font-size: 15px;
    line-height: 1.75;
}
.ov-section-heading.text-center p { max-width: 620px; margin: 0 auto; }
.ov-section-sidecopy { margin: 0; }

/* Instruments */
.ov-instruments {
    background:
        radial-gradient(circle at 50% 15%, rgba(198,169,111,.04), transparent 27%),
        #0c0a07;
}

.ov-instrument-card {
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, #17130d, #100e0a);
    border: 1px solid rgba(198,169,111,.09);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    transition: .3s ease;
}

.ov-instrument-card:hover {
    transform: translateY(-6px);
    border-color: rgba(198,169,111,.22);
    box-shadow: 0 24px 60px rgba(0,0,0,.30);
}

.ov-instrument-media {
    height: 245px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(198,169,111,.04), transparent);
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.ov-media-halo {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    filter: blur(1px);
    background: radial-gradient(circle, rgba(198,169,111,.10), rgba(198,169,111,.012) 62%, transparent 70%);
}

.ov-instrument-media img {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.25));
    transition: transform .3s ease;
}

.ov-instrument-card:hover .ov-instrument-media img { transform: scale(1.035) translateY(-3px); }

.ov-instrument-body { position: relative; padding: 25px 26px 27px; }
.ov-card-index {
    position: absolute;
    right: 24px;
    top: 24px;
    color: rgba(198,169,111,.16);
    font-size: 22px;
    font-weight: 800;
}
.ov-instrument-body h3 { margin: 0 0 10px; color: #fff5e6; font-size: 23px; }
.ov-instrument-body p { margin: 0 0 18px; color: #91897e !important; font-size: 13px; line-height: 1.7; }
.ov-instrument-body a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ov-gold-2);
    font-size: 12px;
    font-weight: 700;
}

/* Steps */
.ov-steps-section {
    position: relative;
    background: #090806;
    border-top: 1px solid rgba(255,255,255,.03);
}

.ov-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ov-step-card {
    position: relative;
    min-height: 250px;
    padding: 29px;
    border-radius: 20px;
    background: #12100c;
    border: 1px solid rgba(255,255,255,.07);
    transition: .25s ease;
}
.ov-step-card:hover { border-color: rgba(198,169,111,.17); background: #15120d; }
.ov-step-no { position: absolute; right: 23px; top: 20px; color: rgba(198,169,111,.14); font-size: 30px; font-weight: 800; }
.ov-step-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #171006;
    font-size: 24px;
    background: linear-gradient(145deg, #ddd0b5, #9f7c4d);
    box-shadow: 0 10px 25px rgba(103,80,47,.10);
}
.ov-step-card h3 { margin: 0 0 10px; color: #f6efe4; font-size: 19px; }
.ov-step-card p { margin: 0; color: #8d857a !important; font-size: 13px; line-height: 1.7; }

/* CTA */
.ov-cta-section { padding: 0 0 105px; background: #090806; }
.ov-cta-box {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 48px 52px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    background: linear-gradient(120deg, #17130f 0%, #211a12 52%, #302418 100%);
    border: 1px solid rgba(198,169,111,.22);
    box-shadow: 0 26px 70px rgba(0,0,0,.28);
}
.ov-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        radial-gradient(circle at 10% 20%, #fff 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, #fff 1px, transparent 1px);
    background-size: 34px 34px, 42px 42px;
}
.ov-cta-content,
.ov-cta-actions { position: relative; z-index: 2; }
.ov-cta-content { max-width: 670px; }
.ov-cta-content .ov-kicker { color: var(--ov-gold-2); }
.ov-cta-content h2 { margin: 10px 0 10px; color: #f6efe4; font-size: clamp(31px, 4vw, 47px); letter-spacing: -1.5px; }
.ov-cta-content p { margin: 0; max-width: 600px; color: #a8a094 !important; font-size: 14px; line-height: 1.7; }
.ov-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.ov-btn-dark { color: #ffffff !important; background: linear-gradient(135deg, var(--ov-green-dark), var(--ov-green) 55%, var(--ov-green-light)); border: 1px solid rgba(32,199,193,.56); box-shadow: 0 10px 26px var(--ov-green-shadow); }
.ov-btn-light-outline { color: var(--ov-green-light) !important; background: rgba(0,169,164,.035); border: 1px solid rgba(0,169,164,.42); }
.ov-btn-light-outline:hover { color: #ffffff !important; background: rgba(0,169,164,.10); border-color: rgba(32,199,193,.68); }

/* Footer */
body.ov-public-site .ov-footer {
    position: relative;
    background:
        radial-gradient(circle at 15% 0%, rgba(198,169,111,.04), transparent 26%),
        #080705 !important;
    border-top: 1px solid rgba(198,169,111,.09);
}

.ov-footer-main { padding: 72px 0 46px; }
body.ov-public-site .ov-footer .footer-widget { margin-bottom: 0; }
body.ov-public-site .ov-footer .footer-logo img { width: 190px; max-height: 64px; object-fit: contain; }
body.ov-public-site .ov-footer .footer-widget .comp-desc {
    max-width: 510px;
    margin: 22px 0 23px;
    color: #8f887d;
    font-size: 12px;
    line-height: 1.85;
}
body.ov-public-site .ov-footer .footer-widget .footer-widget-title {
    color: #f7efe2;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 11px;
}
body.ov-public-site .ov-footer .footer-widget .footer-widget-title:after {
    width: 34px;
    background: linear-gradient(90deg, #a8844f, #d8c9aa);
}
body.ov-public-site .ov-footer .footer-widget .footer-menu li { margin-bottom: 12px; }
body.ov-public-site .ov-footer .footer-widget .footer-menu li a {
    color: #928a7e;
    font-size: 12px;
    padding-left: 20px;
}
body.ov-public-site .ov-footer .footer-widget .footer-menu li a i {
    color: #a8844f;
    font-size: 13px;
    top: 2px;
}
body.ov-public-site .ov-footer .footer-widget .footer-menu li a:hover { color: var(--ov-gold-2); }
body.ov-public-site .ov-footer .footer-widget .footer-menu li a:after { background: var(--ov-gold-2); }

body.ov-public-site .ov-footer .social-profile li a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #d8d0c3 !important;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}
body.ov-public-site .ov-footer .social-profile li a:hover {
    color: #1b1104 !important;
    background: var(--ov-gold-2);
}

.ov-app-copy { color: #8f887d !important; font-size: 11px; line-height: 1.55; }
.ov-app-download {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #ede6d9 !important;
    border: 1px solid rgba(198,169,111,.13);
    background: rgba(198,169,111,.03);
}
.ov-app-download > i { color: var(--ov-gold-2); font-size: 22px; }
.ov-app-download small,
.ov-app-download strong { display: block; }
.ov-app-download small { color: #817a6f; font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }
.ov-app-download strong { font-size: 11px; }

.ov-footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    padding: 19px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}
.ov-footer-info > div { display: flex; align-items: center; gap: 8px; color: #756e64; font-size: 10px; }
.ov-footer-info i { color: #9d7a49; font-size: 14px; }

body.ov-public-site .ov-footer .copyright-text {
    padding: 17px 10px;
    background: #060503;
    border-top: 1px solid rgba(255,255,255,.045);
}
body.ov-public-site .ov-footer .copyright-text p { margin: 0; color: #6f695f; font-size: 10px; }

body.ov-public-site .back-to-top {
    background: linear-gradient(145deg, #ddd0b5, #9d7b4b) !important;
    color: #151009 !important;
}

/* Responsive */
@media (max-width: 1199px) {
    .ov-chip-top { right: 6px; }
    .ov-chip-bottom { left: 2px; }
    .ov-ring-one { width: 430px; height: 430px; }
    .ov-ring-two { width: 350px; height: 350px; }
    .ov-cta-box { padding: 42px; }
}

@media (max-width: 991px) {
    body.ov-public-site .ov-header .navbar { min-height: 74px; }
    .ov-hero { padding: 145px 0 85px; }
    .ov-hero-copy { text-align: center; }
    .ov-hero-copy h1,
    .ov-hero-lead { margin-left: auto; margin-right: auto; }
    .ov-hero-actions,
    .ov-trust-row { justify-content: center; }
    .ov-hero-visual { min-height: 480px; }
    .ov-value-grid { grid-template-columns: repeat(2, 1fr); }
    .ov-value-item:nth-child(2) { border-right: 0; }
    .ov-value-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); }
    .ov-step-grid { grid-template-columns: 1fr; }
    .ov-step-card { min-height: 0; }
    .ov-cta-box { flex-direction: column; align-items: flex-start; }
    .ov-cta-actions { width: 100%; }
}

@media (max-width: 767px) {
    body.ov-public-site .ov-header .header-bottom { background: rgba(9,8,6,.94) !important; }
    body.ov-public-site .ov-header .navbar-brand img { width: 148px; }

    body.ov-public-site .main-menu-wrap {
        background: #0d0b08 !important;
        border-left: 1px solid rgba(198,169,111,.11);
    }
    body.ov-public-site .main-menu-wrap .navbar-nav {
        align-items: stretch !important;
        padding-top: 32px;
    }
    body.ov-public-site .ov-header .navbar .navbar-nav .nav-item > a.nav-link {
        padding: 12px 15px;
        margin: 3px 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
        border-radius: 9px;
    }
    body.ov-public-site .ov-nav-login { margin-left: 0; margin-top: 10px; }
    body.ov-public-site .ov-nav-register { margin-top: 5px; }
    body.ov-public-site .ov-nav-login > a,
    body.ov-public-site .ov-nav-register > a { text-align: center; border-bottom: 1px solid rgba(198,169,111,.26) !important; }

    .ov-hero { min-height: auto; padding: 125px 0 70px; }
    .ov-hero-copy h1 { font-size: 44px; letter-spacing: -1.8px; }
    .ov-hero-lead { font-size: 15px; }
    .ov-hero-visual { min-height: 450px; }
    .ov-main-card { width: calc(100% - 26px); padding: 19px; }
    .ov-ring-one { width: 390px; height: 390px; }
    .ov-ring-two { width: 320px; height: 320px; }
    .ov-floating-chip { min-width: 132px; padding: 9px 10px; }
    .ov-chip-top { top: 16px; right: 0; }
    .ov-chip-bottom { bottom: 18px; left: 0; }
    .ov-value-strip { margin-top: -20px; }
    .ov-section { padding: 82px 0; }
    .ov-instrument-media { height: 220px; }
    .ov-cta-section { padding-bottom: 82px; }
    .ov-cta-box { padding: 34px 28px; border-radius: 21px; }
    .ov-footer-main { padding: 58px 0 34px; }
}

@media (max-width: 575px) {
    .ov-whatsapp-float { right: 15px; bottom: 18px; width: 49px; height: 49px; font-size: 24px; }
    .ov-hero-copy h1 { font-size: 37px; letter-spacing: -1.4px; }
    .ov-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .ov-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ov-btn { min-height: 49px; padding: 0 15px; font-size: 12px; }
    .ov-trust-row { gap: 14px; }
    .ov-trust-item { flex: 1 1 145px; }
    .ov-hero-visual { min-height: 420px; margin-top: -4px; }
    .ov-main-card { width: 100%; border-radius: 19px; padding: 16px; }
    .ov-main-card-head { padding-bottom: 14px; }
    .ov-product-card { min-height: 76px; grid-template-columns: 52px 1fr 22px; }
    .ov-product-image { width: 52px; height: 52px; }
    .ov-product-image img { width: 49px; height: 49px; }
    .ov-ring-one { width: 325px; height: 325px; }
    .ov-ring-two { width: 275px; height: 275px; }
    .ov-floating-chip { display: none; }
    .ov-value-grid { grid-template-columns: 1fr; }
    .ov-value-item { min-height: 88px; padding: 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .ov-value-item:last-child { border-bottom: 0; }
    .ov-section-heading h2 { font-size: 31px; letter-spacing: -1px; }
    .ov-instrument-media { height: 205px; }
    .ov-instrument-media img { width: 165px; height: 165px; }
    .ov-instrument-body { padding: 23px; }
    .ov-step-card { padding: 24px; }
    .ov-cta-box { padding: 30px 22px; }
    .ov-cta-content h2 { font-size: 30px; }
    .ov-cta-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ov-footer-info { display: block; }
    .ov-footer-info > div + div { margin-top: 8px; }
}

/* =========================================================
   ONEVESTASI GOLD HERO BANNER
   ========================================================= */
.ov-banner-hero {
    position: relative;
    padding: 0;
    background: #07131d;
    overflow: hidden;
}

.ov-banner-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #07131d;
}

.ov-banner-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Invisible clickable areas over the two CTA graphics in the banner. */
.ov-banner-hotspot {
    position: absolute;
    z-index: 5;
    display: block;
    border-radius: 14px;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.ov-banner-hotspot:hover,
.ov-banner-hotspot:focus-visible {
    background: rgba(0, 169, 164, .10);
    box-shadow: 0 0 0 2px rgba(32, 199, 193, .35), 0 12px 35px rgba(0, 169, 164, .22);
    outline: none;
}

/* Coordinates are percentage based so they scale with the banner image. */
.ov-banner-hotspot-primary {
    left: 4.30%;
    top: 64.0%;
    width: 16.1%;
    height: 9.2%;
}

.ov-banner-hotspot-secondary {
    left: 21.45%;
    top: 64.0%;
    width: 16.7%;
    height: 9.2%;
}

.ov-banner-mobile-actions {
    display: none;
}

@media (max-width: 991.98px) {
    .ov-banner-frame {
        /* On tablets keep the full artwork visible. */
        border-radius: 0;
    }
}

@media (max-width: 767.98px) {
    .ov-banner-frame {
        min-height: 0;
    }

    .ov-banner-image {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* The baked-in buttons become too small on phones, so use real buttons below. */
    .ov-banner-hotspot {
        display: none;
    }

    .ov-banner-mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px 16px 22px;
        background: linear-gradient(180deg, #07131d 0%, #090806 100%);
    }

    .ov-banner-mobile-actions .ov-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ov-banner-frame {
        min-height: 0;
    }

    .ov-banner-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   MOBILE POLISH UPDATE
   ========================================================= */
@media (max-width: 767.98px) {
    body.ov-public-site .ov-header {
        border-bottom: 1px solid rgba(255,255,255,.05);
    }

    body.ov-public-site .ov-header .header-bottom {
        background: rgba(9,8,6,.96) !important;
    }

    body.ov-public-site .ov-header .header-bottom .container {
        position: relative;
    }

    body.ov-public-site .ov-header .navbar {
        min-height: 64px;
        padding: 7px 56px 7px 0;
    }

    body.ov-public-site .ov-header .navbar-brand {
        margin-right: 0;
    }

    body.ov-public-site .ov-header .navbar-brand img {
        width: 124px;
        max-height: 40px;
    }

    body.ov-public-site .mobile-bar-wrap {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    body.ov-public-site .mobile-menu a {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--ov-green-dark) 0%, var(--ov-green) 55%, var(--ov-green-light) 100%);
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(0,169,164,.28);
    }

    body.ov-public-site .mobile-menu i {
        font-size: 26px;
    }

    body.ov-public-site .main-menu-wrap {
        width: 84%;
        max-width: 320px;
    }

    .ov-banner-image {
        border-bottom: 1px solid rgba(255,255,255,.05);
    }

    .ov-banner-mobile-actions {
        gap: 12px;
        padding: 14px 14px 18px;
    }

    .ov-banner-mobile-actions .ov-btn {
        min-height: 52px;
        font-size: 14px;
        border-radius: 16px;
        letter-spacing: -.1px;
    }

    .ov-section {
        padding: 68px 0;
    }

    .ov-section-heading h2 {
        font-size: 28px;
        line-height: 1.18;
        letter-spacing: -.8px;
    }

    .ov-section-heading p,
    .ov-section-sidecopy {
        font-size: 14px;
        line-height: 1.75;
    }

    .ov-kicker {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .ov-cta-box {
        padding: 28px 22px;
    }
}

@media (max-width: 575.98px) {
    body.ov-public-site .ov-header .navbar {
        min-height: 60px;
        padding-right: 52px;
    }

    body.ov-public-site .ov-header .navbar-brand img {
        width: 116px;
        max-height: 36px;
    }

    body.ov-public-site .mobile-bar-wrap {
        right: 10px;
    }

    body.ov-public-site .mobile-menu a {
        width: 42px;
        height: 42px;
    }

    .ov-banner-mobile-actions {
        padding: 12px 12px 16px;
    }

    .ov-banner-mobile-actions .ov-btn {
        min-height: 50px;
        font-size: 13px;
        border-radius: 15px;
    }

    .ov-section {
        padding: 60px 0;
    }

    .ov-section-heading h2 {
        font-size: 24px;
    }
}

/* =========================================================
   PREMIUM MOBILE MENU DRAWER
   ========================================================= */
.ov-nav-icon,
.ov-mobile-menu-head,
.ov-mobile-menu-label,
.ov-mobile-menu-foot,
.ov-menu-backdrop {
    display: none;
}

@media (max-width: 1199.98px) {
    body.ov-menu-open {
        overflow: hidden !important;
    }

    body.ov-public-site .main-menu-wrap {
        display: flex !important;
        flex-direction: column;
        width: min(86vw, 340px) !important;
        height: 100dvh;
        left: auto !important;
        right: -370px;
        top: 0;
        padding: 0 18px 22px !important;
        background:
            radial-gradient(circle at 15% 4%, rgba(0,169,164,.10), transparent 28%),
            linear-gradient(180deg, #0d1211 0%, #090b0a 58%, #080706 100%) !important;
        border-left: 1px solid rgba(255,255,255,.06) !important;
        border-radius: 24px 0 0 24px;
        box-shadow: -26px 0 70px rgba(0,0,0,.48);
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: right .34s cubic-bezier(.22,.72,.24,1) !important;
        z-index: 1005 !important;
    }

    body.ov-public-site .main-menu-wrap.open {
        right: 0 !important;
        left: auto !important;
    }

    .ov-menu-backdrop {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        background: rgba(0,0,0,.58);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .28s ease, visibility .28s ease;
        z-index: 1001;
    }

    .ov-menu-backdrop.open {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ov-mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 82px;
        gap: 18px;
        margin: 0 -2px;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .ov-mobile-menu-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .ov-mobile-menu-brand img {
        display: block;
        width: 145px;
        max-height: 46px;
        object-fit: contain;
        object-position: left center;
    }

    body.ov-public-site .main-menu-wrap .menu-close {
        position: static !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.ov-public-site .main-menu-wrap .menu-close a {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff !important;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.08);
        transition: .2s ease;
    }

    body.ov-public-site .main-menu-wrap .menu-close a:hover {
        background: rgba(0,169,164,.14);
        border-color: rgba(32,199,193,.32);
    }

    body.ov-public-site .main-menu-wrap .menu-close i {
        font-size: 24px;
        line-height: 1;
    }

    .ov-mobile-menu-label {
        display: block;
        margin: 24px 4px 11px;
        color: rgba(255,255,255,.34);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2.2px;
    }

    body.ov-public-site .main-menu-wrap .navbar-nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.ov-public-site .main-menu-wrap .navbar-nav .nav-item {
        width: 100%;
        margin: 0 !important;
    }

    body.ov-public-site .ov-header .main-menu-wrap .navbar-nav .nav-item > a.nav-link {
        min-height: 52px;
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 !important;
        padding: 10px 13px !important;
        color: rgba(255,255,255,.82) !important;
        background: rgba(255,255,255,.025);
        border: 1px solid rgba(255,255,255,.045) !important;
        border-radius: 14px !important;
        font-size: 14px;
        font-weight: 650;
        text-align: left;
        transition: .22s ease;
    }

    body.ov-public-site .ov-header .main-menu-wrap .navbar-nav .nav-item > a.nav-link:hover,
    body.ov-public-site .ov-header .main-menu-wrap .navbar-nav .nav-item > a.nav-link.active {
        color: #ffffff !important;
        background: rgba(0,169,164,.09);
        border-color: rgba(32,199,193,.18) !important;
        transform: translateX(-2px);
    }

    .ov-nav-icon {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 18px;
        color: var(--ov-green-light);
        background: rgba(0,169,164,.08);
        border: 1px solid rgba(32,199,193,.12);
    }

    body.ov-public-site .main-menu-wrap .ov-nav-login > a {
        margin-top: 8px !important;
        color: var(--ov-green-light) !important;
        border-color: rgba(32,199,193,.26) !important;
        background: rgba(0,169,164,.045) !important;
        justify-content: center;
    }

    body.ov-public-site .main-menu-wrap .ov-nav-register > a {
        color: #ffffff !important;
        background: linear-gradient(135deg, var(--ov-green-dark) 0%, var(--ov-green) 55%, var(--ov-green-light) 100%) !important;
        border-color: rgba(32,199,193,.45) !important;
        box-shadow: 0 12px 28px rgba(0,169,164,.20);
        justify-content: center;
    }

    body.ov-public-site .main-menu-wrap .ov-nav-login .ov-nav-icon,
    body.ov-public-site .main-menu-wrap .ov-nav-register .ov-nav-icon {
        color: currentColor;
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.10);
    }

    .ov-mobile-menu-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
        padding: 18px 4px 2px;
        border-top: 1px solid rgba(255,255,255,.055);
    }

    .ov-mobile-menu-badge {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: var(--ov-green-light);
        font-size: 20px;
        background: rgba(0,169,164,.08);
        border: 1px solid rgba(32,199,193,.13);
    }

    .ov-mobile-menu-foot strong,
    .ov-mobile-menu-foot span {
        display: block;
    }

    .ov-mobile-menu-foot strong {
        margin-bottom: 2px;
        color: rgba(255,255,255,.82);
        font-size: 12px;
    }

    .ov-mobile-menu-foot span {
        max-width: 220px;
        color: rgba(255,255,255,.33);
        font-size: 10px;
        line-height: 1.55;
    }
}

@media (max-width: 575.98px) {
    body.ov-public-site .main-menu-wrap {
        width: min(88vw, 320px) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        border-radius: 22px 0 0 22px;
    }

    .ov-mobile-menu-head {
        min-height: 72px;
    }

    .ov-mobile-menu-brand img {
        width: 128px;
        max-height: 40px;
    }

    body.ov-public-site .main-menu-wrap .menu-close a {
        width: 40px;
        height: 40px;
    }

    .ov-mobile-menu-label {
        margin-top: 20px;
    }
}

/* =========================================================
   FIX: MOBILE BANNER MUST START BELOW HEADER
   Prevent the mobile header from covering the top of the banner.
   ========================================================= */
@media (max-width: 767.98px) {
    body.ov-public-site .ov-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 1000;
    }

    /* Sticky header may still float after the user starts scrolling. */
    body.ov-public-site .ov-header.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .ov-banner-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ov-banner-frame {
        margin-top: 0 !important;
    }

    .ov-banner-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
}

/* =========================================================
   HERO BUTTON LABEL UPDATE
   Daftar Sekarang + Masuk
   ========================================================= */
@media (min-width: 768px) {
    .ov-banner-hotspot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 14px;
        text-decoration: none !important;
        font-weight: 700;
        font-size: clamp(11px, 1vw, 18px);
        white-space: nowrap;
        overflow: hidden;
    }

    .ov-banner-hotspot span,
    .ov-banner-hotspot i {
        position: relative;
        z-index: 2;
    }

    .ov-banner-hotspot i {
        font-size: 1.15em;
    }

    .ov-banner-hotspot-primary {
        color: #ffffff !important;
        background: linear-gradient(135deg, #69b89f 0%, #82cdb2 48%, #5fae98 100%);
        border: 1px solid rgba(206,255,239,.68);
        box-shadow: 0 8px 24px rgba(42,167,142,.28), inset 0 1px 0 rgba(255,255,255,.28);
    }

    .ov-banner-hotspot-primary:hover,
    .ov-banner-hotspot-primary:focus-visible {
        color: #ffffff !important;
        background: linear-gradient(135deg, #74c4aa 0%, #8bd3ba 48%, #65b9a0 100%);
        box-shadow: 0 10px 28px rgba(42,167,142,.38), 0 0 0 2px rgba(111,211,184,.24);
    }

    .ov-banner-hotspot-secondary {
        color: #d9f5ef !important;
        background: linear-gradient(135deg, rgba(17,46,51,.98), rgba(25,52,59,.98));
        border: 1px solid rgba(158,217,211,.48);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.18);
    }

    .ov-banner-hotspot-secondary:hover,
    .ov-banner-hotspot-secondary:focus-visible {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(20,59,63,.99), rgba(28,67,72,.99));
        border-color: rgba(111,211,184,.75);
        box-shadow: 0 10px 26px rgba(0,169,164,.18), 0 0 0 2px rgba(111,211,184,.18);
    }
}

/* =========================================================
   FIX: DESKTOP/TABLET BANNER STARTS BELOW HEADER
   Header desktop masih absolute, jadi beri ruang sesuai tinggi
   header agar bagian atas banner tidak tertutup.
   ========================================================= */
@media (min-width: 992px) {
    .ov-banner-hero {
        margin-top: 82px !important;
        padding-top: 0 !important;
    }

    .ov-banner-frame {
        margin-top: 0 !important;
    }

    .ov-banner-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .ov-banner-hero {
        margin-top: 74px !important;
        padding-top: 0 !important;
    }

    .ov-banner-frame {
        margin-top: 0 !important;
    }

    .ov-banner-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center top !important;
    }
}