:root {
    --bsi-navy: #123d6a;
    --bsi-navy-deep: #082a4a;
    --bsi-blue: #155d93;
    --bsi-cyan: #16b8c4;
    --bsi-orange: #ff8a0a;
    --bsi-ink: #20262d;
    --bsi-muted: #6e7781;
    --bsi-soft: #f3f8fb;
    --bsi-border: #dce6ec;
    --bsi-white: #ffffff;
    --bsi-radius-xl: 36px;
    --bsi-radius-lg: 28px;
    --bsi-radius-md: 20px;
    --bsi-shadow: 0 24px 70px rgba(17, 57, 92, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    color: var(--bsi-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
img { max-width: 100%; }

.bsi-container { max-width: 1240px; }

.bsi-navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(220, 230, 236, .75);
    padding: 14px 0;
}

.brand-logo { width: 138px; height: 64px; object-fit: contain; }
.nav-link {
    color: #48515a;
    font-weight: 600;
    font-size: .93rem;
    padding: .75rem .9rem !important;
}
.nav-link:hover, .nav-link.active { color: var(--bsi-navy); }

.btn-bsi,
.btn-outline-bsi {
    border-radius: 999px;
    padding: .82rem 1.15rem;
    font-weight: 700;
    font-size: .92rem;
    transition: .25s ease;
}

.btn-bsi {
    background: var(--bsi-navy-deep);
    color: white;
    border: 1px solid var(--bsi-navy-deep);
}
.btn-bsi:hover { background: var(--bsi-orange); border-color: var(--bsi-orange); color: white; transform: translateY(-2px); }

.btn-outline-bsi {
    border: 1px solid #cfdbe2;
    color: var(--bsi-navy-deep);
    background: white;
}
.btn-outline-bsi:hover { border-color: var(--bsi-orange); color: var(--bsi-orange); }

.hero-section.hero-v2 {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: calc(100vh - 80px);
}

.hero-shell {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0;
    background:
        linear-gradient(115deg, rgba(241, 248, 252, .98) 0%, rgba(245, 250, 252, .96) 46%, rgba(223, 244, 249, .92) 100%);
}


.hero-content-row {
    min-height: 585px;
    z-index: 2;
}

.hero-copy-area {
    height: 100%;
    padding: 72px 18px 52px 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 4;
}

.hero-kicker,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--bsi-navy);
    font-weight: 800;
}

.hero-kicker::before,
.section-kicker::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--bsi-orange);
}

.hero-title-v2 {
    margin: 24px 0 22px;
    max-width: 610px;
    font-size: clamp(2.2rem, 3.4vw, 3.75rem);
    line-height: .98;
    letter-spacing: -.062em;
    font-weight: 750;
    color: #20252c;
}

.hero-title-v2 span {
    display: inline-block;
    position: relative;
    color: var(--bsi-navy-deep);
    z-index: 1;
}

.hero-title-v2 span::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -8px;
    right: -10px;
    bottom: 1px;
    height: .58em;
    border-radius: 14px;
    background: linear-gradient(90deg, #ffad41, var(--bsi-orange));
    opacity: .92;
}

.hero-description {
    max-width: 555px;
    color: #66717c;
    font-size: .96rem;
    line-height: 1.8;
    margin: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.hero-mini-info {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(18, 61, 106, .13);
    max-width: 460px;
}

.hero-mini-info div {
    min-width: 0;
}

.hero-mini-info strong,
.hero-mini-info span {
    display: block;
}

.hero-mini-info strong {
    color: var(--bsi-navy-deep);
    font-size: .92rem;
    font-weight: 800;
}

.hero-mini-info span {
    margin-top: 3px;
    color: #84909a;
    font-size: .74rem;
}

.hero-visual-area {
    height: 100%;
    min-height: 585px;
    position: relative;
    padding: 42px 42px 42px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.hero-main-photo {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 65px rgba(8, 42, 74, .18);
    border: 1px solid rgba(255, 255, 255, .85);
}

.hero-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.01);
}

.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 34, 58, .02) 32%, rgba(7, 34, 58, .72) 100%),
        linear-gradient(90deg, rgba(10, 52, 86, .10), rgba(10, 52, 86, 0) 46%);
}

.hero-photo-label {
    position: absolute;
    left: 28px;
    bottom: 26px;
    color: #fff;
}

.hero-photo-label span,
.hero-photo-label strong {
    display: block;
}

.hero-photo-label span {
    font-size: .72rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    opacity: .76;
    font-weight: 700;
}

.hero-photo-label strong {
    margin-top: 5px;
    font-size: 1.45rem;
    line-height: 1.15;
}

.hero-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 16px 38px rgba(8, 42, 74, .16);
    border-radius: 16px;
    z-index: 6;
}

.hero-float-card span,
.hero-float-card strong {
    display: block;
}

.hero-float-card span {
    color: var(--bsi-orange);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.hero-float-card strong {
    margin-top: 2px;
    color: var(--bsi-navy-deep);
    font-size: .78rem;
    line-height: 1.3;
}

.hero-event-card {
    right: 14px;
    top: 86px;
    padding: 12px 15px 12px 12px;
    max-width: 228px;
}

.hero-float-icon {
    width: 37px;
    height: 37px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    color: #fff;
    background: var(--bsi-orange);
    font-size: 1.05rem;
    font-weight: 800;
}

.hero-meeting-card {
    left: -4px;
    bottom: 76px;
    padding: 8px 13px 8px 8px;
    max-width: 235px;
}

.hero-meeting-card img {
    width: 52px;
    height: 52px;
    border-radius: 11px;
    object-fit: cover;
    flex: 0 0 52px;
}

.hero-logo-chip {
    position: absolute;
    right: 58px;
    bottom: 22px;
    width: 86px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 14px 32px rgba(8, 42, 74, .13);
    border: 1px solid rgba(255, 255, 255, .9);
    padding: 8px 12px;
    z-index: 7;
}

.hero-logo-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-bottom-bar {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 28px 28px;
    border: 1px solid rgba(8, 42, 74, .09);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
}

.hero-bottom-item {
    position: relative;
    padding: 16px 22px 15px 48px;
    min-height: 78px;
    border-right: 1px solid rgba(8, 42, 74, .09);
}

.hero-bottom-item:last-child {
    border-right: 0;
}

.hero-bottom-item > span {
    position: absolute;
    left: 18px;
    top: 18px;
    color: var(--bsi-orange);
    font-size: .68rem;
    font-weight: 900;
}

.hero-bottom-item strong,
.hero-bottom-item small {
    display: block;
}

.hero-bottom-item strong {
    color: var(--bsi-navy-deep);
    font-size: .86rem;
    font-weight: 800;
}

.hero-bottom-item small {
    margin-top: 3px;
    color: #7a8792;
    font-size: .70rem;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-glow-one {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -110px;
    background: radial-gradient(circle, rgba(22, 184, 196, .22), rgba(22, 184, 196, 0) 70%);
}

.hero-glow-two {
    width: 300px;
    height: 300px;
    left: 33%;
    bottom: -180px;
    background: radial-gradient(circle, rgba(255, 138, 10, .16), rgba(255, 138, 10, 0) 72%);
}

.hero-stripe {
    position: absolute;
    height: 10px;
    border-radius: 999px;
    transform: rotate(-34deg);
    opacity: .92;
    pointer-events: none;
    z-index: 1;
}

.hero-stripe-one {
    width: 180px;
    right: -48px;
    top: 56px;
    background: var(--bsi-orange);
}

.hero-stripe-two {
    width: 260px;
    right: -92px;
    top: 102px;
    background: linear-gradient(90deg, var(--bsi-cyan), var(--bsi-navy));
}

.section-space { padding: 110px 0; }
.section-soft { background: var(--bsi-soft); }
.section-heading {
    font-size: clamp(2.4rem, 4.8vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 700;
    margin: 18px 0 0;
}
.section-copy { color: var(--bsi-muted); line-height: 1.8; }

.brand-card {
    height: 100%;
    border: 1px solid var(--bsi-border);
    border-radius: var(--bsi-radius-lg);
    padding: 12px;
    background: white;
    transition: .28s ease;
}
.brand-card:hover { transform: translateY(-7px); box-shadow: var(--bsi-shadow); }
.brand-card-image {
    height: 270px;
    border-radius: 20px;
    overflow: hidden;
    background: #eff5f7;
}
.brand-card-image img { width: 100%; height: 100%; object-fit: cover; }
.brand-card-body { padding: 20px 10px 10px; }
.brand-card-logo { height: 46px; max-width: 155px; object-fit: contain; object-position: left center; margin-bottom: 20px; }
.brand-card h3 { font-size: 1.15rem; margin: 0 0 5px; font-weight: 800; }
.brand-card p { color: var(--bsi-muted); font-size: .85rem; margin: 0; }
.brand-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid var(--bsi-border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--bsi-navy);
    font-weight: 800;
}

.about-panel {
    border: 1px solid var(--bsi-border);
    border-radius: var(--bsi-radius-xl);
    padding: 16px;
    background: white;
}
.about-photo-frame { position: relative; padding: 22px 30px 36px 6px; }
.about-photo { border-radius: 28px; overflow: hidden; box-shadow: var(--bsi-shadow); }
.about-photo img { width: 100%; height: auto; display: block; }

.about-float-card.about-float-top {
    top: 0;
    right: 4px;
    padding: 12px 15px 12px 12px;
    max-width: 224px;
}

.about-float-card.about-float-bottom {
    left: -10px;
    bottom: 22px;
    padding: 12px 15px 12px 12px;
    max-width: 214px;
}

.hero-logo-chip.about-logo-chip {
    right: 34px;
    bottom: 4px;
}

.about-content { padding: 50px 42px; }
.about-quote { font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; }
.about-highlight { color: var(--bsi-orange); }

.about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-list li {
    position: relative;
    padding-left: 30px;
    color: var(--bsi-ink);
    font-size: .93rem;
    font-weight: 600;
}

.about-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bsi-orange);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.focus-card,
.advantage-card {
    border-radius: var(--bsi-radius-md);
    border: 1px solid var(--bsi-border);
    background: white;
    padding: 30px;
    height: 100%;
    transition: .25s ease;
}
.focus-card {
    background: var(--bsi-orange);
    border-color: var(--bsi-orange);
}
.focus-card:hover, .advantage-card:hover { transform: translateY(-5px); border-color: rgba(22,184,196,.55); }
.card-number { font-size: .8rem; font-weight: 800; color: var(--bsi-orange); letter-spacing: .08em; }
.focus-card h3, .advantage-card h3 { font-size: 1.17rem; font-weight: 800; margin: 42px 0 12px; }
.focus-card p, .advantage-card p { color: var(--bsi-muted); line-height: 1.7; margin-bottom: 0; font-size: .91rem; }
.focus-card .card-number,
.focus-card h3 {
    color: var(--bsi-navy-deep);
}
.focus-card p {
    color: #fff;
}
.focus-card:hover {
    border-color: var(--bsi-orange);
}

.support-panel {
    border-radius: var(--bsi-radius-xl);
    background: var(--bsi-navy-deep);
    color: white;
    padding: 70px;
    position: relative;
    overflow: hidden;
}
.support-panel::after {
    content: '↗';
    position: absolute;
    right: 30px;
    top: -45px;
    font-size: 12rem;
    color: rgba(255,255,255,.035);
    line-height: 1;
}
.support-panel .section-kicker { color: #a8edf2; }
.support-grid { margin-top: 48px; }
.support-item { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.14); }
.support-item strong { display: block; font-size: 1.05rem; }
.support-item span { color: rgba(255,255,255,.58); font-size: .88rem; }

.news-card {
    border-radius: var(--bsi-radius-lg);
    border: 1px solid var(--bsi-border);
    overflow: hidden;
    background: white;
    height: 100%;
    transition: .28s ease;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--bsi-shadow); }
.news-image { height: 240px; overflow: hidden; background: #eef4f7; }
.news-image img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 26px; }
.news-meta { display: flex; gap: .55rem; align-items: center; color: var(--bsi-muted); font-size: .78rem; font-weight: 700; }
.news-category { color: var(--bsi-orange); }
.news-card h3 { margin: 14px 0 10px; font-size: 1.18rem; line-height: 1.4; font-weight: 800; }
.news-card p { color: var(--bsi-muted); font-size: .88rem; line-height: 1.7; margin: 0; }

.partner-strip {
    border-top: 1px solid var(--bsi-border);
    border-bottom: 1px solid var(--bsi-border);
    overflow: hidden;
}
.partner-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 32px 0;
}
.partner-logo {
    width: 185px;
    height: 90px;
    border: 1px solid var(--bsi-border);
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: white;
    padding: 16px;
}
.partner-logo img { width: 100%; height: 100%; object-fit: contain; }

.cta-panel {
    border-radius: var(--bsi-radius-xl);
    background: linear-gradient(135deg, #eefaff 0%, #fff8ef 100%);
    border: 1px solid var(--bsi-border);
    padding: 78px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-panel h2 { font-size: clamp(2.6rem, 5.5vw, 5.3rem); letter-spacing: -.06em; line-height: .98; font-weight: 700; max-width: 900px; margin: 0 auto 24px; }
.cta-panel .orange { color: var(--bsi-orange); }

.site-footer { padding: 0 0 32px; }
.footer-panel { background: #f7fafc; border: 1px solid var(--bsi-border); border-radius: var(--bsi-radius-xl); padding: 58px; }
.footer-logo { width: 130px; height: 64px; object-fit: contain; }
.footer-lead { font-weight: 800; color: var(--bsi-navy-deep); font-size: 1.2rem; }
.footer-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-bottom: 16px; color: var(--bsi-navy-deep); }
.footer-panel a { display: block; color: var(--bsi-muted); margin: 10px 0; font-size: .9rem; }
.footer-panel a:hover { color: var(--bsi-orange); }
.footer-bottom { border-top: 1px solid var(--bsi-border); margin-top: 45px; padding-top: 22px; color: var(--bsi-muted); font-size: .8rem; }

.floating-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 12px 30px rgba(8, 42, 74, .22);
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

.float-btn:hover { transform: translateY(-3px); }

.float-wa {
    background: #25d366;
    color: #fff;
}

.float-top {
    width: 44px;
    height: 44px;
    background: var(--bsi-navy-deep);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.float-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 767.98px) {
    .bsi-navbar {
        padding: 6px 0;
    }
    .bsi-navbar .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
    }
    .brand-logo { width: 110px; height: 46px; }
    .bsi-navbar .navbar-toggler {
        padding: .25rem .45rem;
    }
    .bsi-navbar .navbar-collapse {
        padding-top: 8px;
    }
    .bsi-navbar .nav-link {
        padding: .55rem .4rem !important;
    }
    .bsi-navbar .btn-outline-bsi {
        width: 100%;
        margin-top: .35rem;
        text-align: center;
    }
    .floating-actions { right: 16px; bottom: 16px; gap: 10px; }
    .float-btn { width: 48px; height: 48px; }
    .float-top { width: 40px; height: 40px; }
}

@media (max-width: 991.98px) {
    .navbar-collapse { padding-top: 16px; }
    .hero-section { padding-top: 48px; }
    .hero-stage { grid-template-columns: 1fr 1fr; }
    .hero-card.large { grid-column: 1 / -1; min-height: 360px; }
    .hero-meta { grid-template-columns: 1fr; }
    .hero-meta-item { border-right: 0; border-bottom: 1px solid var(--bsi-border); }
    .hero-meta-item:last-child { border-bottom: 0; }
    .about-content { padding: 38px 22px; }
    .support-panel { padding: 50px 30px; }
}

@media (max-width: 767.98px) {
    .section-space { padding: 78px 0; }
    .hero-title { font-size: clamp(3rem, 14vw, 4.6rem); }
    .hero-stage { grid-template-columns: 1fr; gap: 12px; }
    .hero-card.large, .hero-card { min-height: 280px; grid-column: auto; }
    .brand-card-image { height: 235px; }
    .support-panel { border-radius: 26px; }
    .cta-panel { padding: 60px 22px; }
    .footer-panel { padding: 40px 24px; border-radius: 26px; }
}


/* HERO V2 RESPONSIVE */
@media (max-width: 991.98px) {
    .hero-section.hero-v2 {
        padding-top: 0;
    }
    .hero-content-row { min-height: auto; }
    .hero-copy-area { padding: 54px 36px 28px; }
    .hero-title-v2 { font-size: clamp(2.3rem, 6vw, 3.75rem); max-width: 740px; }
    .hero-description { max-width: 680px; }
    .hero-visual-area { min-height: auto; padding: 16px 34px 38px; }
    .hero-main-photo { height: 440px; }
    .hero-meeting-card { left: 14px; bottom: 58px; }
    .hero-event-card { right: 18px; top: 52px; }
    .hero-stripe { display: none; }
    .hero-bottom-bar { margin-top: 0; }
}

@media (max-width: 767.98px) {
    .hero-shell {
        padding: 26px 0 20px;
    }
    .hero-copy-area {
        min-width: 0;
        padding: 26px 16px 22px;
    }
    .hero-title-v2 {
        max-width: 100%;
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.05;
        letter-spacing: -.05em;
        overflow-wrap: break-word;
    }
    .hero-title-v2 br { display: none; }
    .hero-title-v2 span { margin-top: 8px; }
    .hero-description {
        max-width: 100%;
        font-size: .9rem;
        line-height: 1.7;
    }
    .hero-actions { margin-top: 22px; }
    .hero-actions .btn {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
    .hero-mini-info { gap: 22px; margin-top: 28px; }
    .hero-visual-area { padding: 8px 18px 24px; }
    .hero-main-photo { height: 340px; border-radius: 20px; }
    .hero-photo-label { left: 20px; bottom: 18px; }
    .hero-photo-label strong { font-size: 1.1rem; }
    .hero-event-card { right: 8px; top: 28px; transform: scale(.92); transform-origin: top right; }
    .hero-meeting-card { left: 8px; bottom: 40px; transform: scale(.90); transform-origin: bottom left; }
    .hero-logo-chip { right: 28px; bottom: 7px; width: 76px; height: 50px; }
    .about-float-card.about-float-top { right: 0; transform: scale(.9); transform-origin: top right; }
    .about-float-card.about-float-bottom { left: -6px; transform: scale(.88); transform-origin: bottom left; }
    .hero-logo-chip.about-logo-chip { right: 22px; bottom: 0; width: 76px; height: 50px; }
    .hero-bottom-bar { grid-template-columns: 1fr; margin: 0 18px 18px; }
    .hero-bottom-item { border-right: 0; border-bottom: 1px solid rgba(8, 42, 74, .09); }
    .hero-bottom-item:last-child { border-bottom: 0; }
    .hero-stripe-one { right: -92px; }
    .hero-stripe-two { right: -125px; }
}

@media (max-width: 480px) {
    .hero-main-photo { height: 300px; }
    .hero-event-card { display: none; }
    .hero-meeting-card { max-width: 210px; }
    .hero-mini-info { flex-direction: column; gap: 12px; }
}