:root{
    --deep-blue:#31459A;
    --teal:#4AB2BA;
    --bright-teal:#1DB9C2;
    --charcoal:#111111;
    --white:#F6F7F8;
    --pale-aqua:#D9EEF0;
    --cool-gray:#E9EEF0;
    --blue-gray:#B9C7D6;
    --surface:#ffffff;
    --soft:#EEF5FF;
    --muted:#64748b;
    --text:#07172A;
    --border:rgba(49,69,154,.15);
    --shadow:0 24px 70px rgba(15,23,42,.12);
    --gradient:linear-gradient(135deg,#31459A,#4AB2BA,#1DB9C2);
    --soft-gradient:linear-gradient(135deg,rgba(246,247,248,.92),rgba(217,238,240,.76));
    --dark-gradient:linear-gradient(135deg,#111111,#1f2d70,#31459A);
}
html[data-theme="dark"]{
    --surface:#121A2A;
    --soft:#0B1324;
    --text:#E5F0FF;
    --muted:#A7B4C8;
    --border:rgba(29,185,194,.18);
    --shadow:0 24px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter, Poppins, Arial, sans-serif;
    background:
        radial-gradient(circle at top left,rgba(29,185,194,.20),transparent 34rem),
        radial-gradient(circle at 80% 10%,rgba(49,69,154,.16),transparent 28rem),
        var(--soft);
    color:var(--text);
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:auto}
.site-bg-mark{
    position:fixed;
    right:4vw;
    top:8vh;
    font-size:42vw;
    font-weight:900;
    color:rgba(49,69,154,.045);
    pointer-events:none;
    z-index:-1;
}
.vsl-header{
    position:sticky;
    top:0;
    z-index:100;
    padding:14px 0;
    backdrop-filter:blur(22px);
    background:rgba(255,255,255,.74);
    border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .vsl-header{background:rgba(7,23,42,.72)}
.nav-shell,.brand,.desktop-nav,.nav-actions{display:flex;align-items:center}
.nav-shell{justify-content:space-between;gap:20px}
.brand{gap:12px;font-weight:800;color:var(--deep-blue)}
.brand-mark{
    width:52px;height:52px;border-radius:16px;
    display:grid;place-items:center;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 12px 30px rgba(29,185,194,.18);
    overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:6px}
.brand-text strong{display:block;letter-spacing:.2em}
.brand-text small{display:block;letter-spacing:.18em;font-size:10px;color:var(--teal)}
.desktop-nav{gap:18px;font-size:13px;font-weight:700}
.desktop-nav a{position:relative;padding:12px 0;color:var(--text)}
.desktop-nav a::after{
    content:"";position:absolute;left:0;bottom:4px;width:0;height:2px;
    background:var(--gradient);transition:.25s;border-radius:99px;
}
.desktop-nav a:hover::after,.desktop-nav a.active::after{width:100%}
.nav-actions{gap:10px}
.menu-btn{display:none}
.btn{
    border:0;border-radius:14px;padding:13px 20px;font-weight:800;transition:.25s;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn-primary{color:#fff;background:var(--gradient);box-shadow:0 14px 32px rgba(29,185,194,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(29,185,194,.36)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);color:#fff}
.btn-whatsapp{background:#10B981;color:#fff}
.theme-toggle,.menu-btn{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    border-radius:999px;padding:11px 16px;font-weight:800;
}
.mobile-menu{display:none;width:min(1180px,92%);margin:12px auto 0;padding:16px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.mobile-menu.open{display:grid;gap:12px}
.mobile-menu a{font-weight:800;padding:10px;border-radius:12px}
.hero-section{padding-bottom:36px}
.hero-slider{position:relative;min-height:720px;overflow:hidden;background:#06152b}
.hero-slide{
    min-height:720px;display:none;position:relative;background-image:var(--hero-img);
    background-size:cover;background-position:center;
}
.hero-slide.active{display:block;animation:slideReveal .75s ease both}
.hero-overlay{
    position:absolute;inset:0;
    background:
        linear-gradient(90deg,rgba(4,19,42,.95),rgba(49,69,154,.66),rgba(4,19,42,.20)),
        radial-gradient(circle at 75% 40%,rgba(29,185,194,.25),transparent 22rem);
}
.hero-layout{position:relative;min-height:720px;display:grid;grid-template-columns:1.05fr .75fr;align-items:center;gap:30px}
.glass-panel,.glass-card{
    border:1px solid rgba(255,255,255,.36);
    background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.48));
    backdrop-filter:blur(24px);
    box-shadow:var(--shadow);
}
html[data-theme="dark"] .glass-panel,html[data-theme="dark"] .glass-card{
    background:linear-gradient(135deg,rgba(18,26,42,.78),rgba(18,26,42,.48));
    border-color:rgba(29,185,194,.18);
}
.hero-copy{width:min(640px,100%);border-radius:32px;padding:42px;color:#fff;background:linear-gradient(135deg,rgba(49,69,154,.48),rgba(29,185,194,.18))}
.section-kicker{display:inline-flex;color:var(--teal);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.hero-copy .section-kicker{color:#BDFBFF}
.hero-copy h1{font-size:clamp(42px,6vw,76px);line-height:.95;margin:0 0 10px}
.hero-copy h2{font-size:clamp(20px,3vw,34px);margin:0 0 18px;color:#d7fbff}
.hero-copy p{font-size:17px;line-height:1.7;color:#eaf6ff}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-float-card{border-radius:28px;padding:28px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.hero-float-card strong{font-size:22px}
.hero-float-card li{margin:14px 0}
.hero-controls{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:#fff}
.hero-controls button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff}
.hero-progress{width:220px;height:4px;border-radius:999px;background:rgba(255,255,255,.24);overflow:hidden}
.hero-progress span{display:block;height:100%;width:0;background:var(--gradient);transition:width .2s}
.trust-strip{margin-top:-48px;position:relative;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.trust-card,.info-card,.supply-card{border:1px solid var(--border);border-radius:22px;padding:20px;text-align:left;color:var(--text)}
.trust-card{display:grid;gap:6px}
.trust-card:hover,.info-card:hover,.supply-card:hover{transform:translateY(-4px);border-color:rgba(29,185,194,.42)}
.icon-dot{width:38px;height:38px;border-radius:14px;background:rgba(29,185,194,.1);border:1px solid rgba(29,185,194,.25);display:inline-block;position:relative}
.icon-dot::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--gradient)}
.section{padding:88px 0}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.section h2{font-size:clamp(30px,4vw,52px);line-height:1.05;margin:0 0 18px;color:var(--text)}
.section p{color:var(--muted);line-height:1.8}
.value-row{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0}
.value-row span{padding:12px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-weight:800;color:var(--deep-blue)}
.image-card{position:relative;border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}
.image-card img{height:420px;width:100%;object-fit:cover}
.floating-quote{position:absolute;right:24px;bottom:24px;background:var(--gradient);color:#fff;padding:22px;border-radius:20px;font-size:24px;font-weight:900;box-shadow:0 18px 40px rgba(29,185,194,.32)}
.dark-section{background:var(--dark-gradient);color:#fff}
.dark-section h2{color:#fff}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card-grid.seven{grid-template-columns:repeat(7,1fr)}
.info-card{min-height:140px}
.info-card strong{display:block;margin:14px 0 6px}
.info-card small{color:var(--muted)}
.dark-card{color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.dark-card small{color:#c9e9ff}
.specialty-strip{border-radius:28px;padding:22px;display:flex;gap:12px;flex-wrap:wrap}
.specialty-strip button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:13px 18px;font-weight:800}
.supply-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:28px}
.supply-card{padding:10px}
.supply-card img{height:120px;width:100%;object-fit:cover;border-radius:16px;margin-bottom:12px}
.compliance-panel,.cta-panel{
    border-radius:34px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:30px;
    background:linear-gradient(90deg,rgba(17,17,17,.92),rgba(49,69,154,.80)), url('../images/backgrounds/compliance-bg.png');
    background-size:cover;background-position:center;color:#fff;box-shadow:var(--shadow);
}
.compliance-panel h2,.cta-panel h2{color:#fff}
.compliance-panel p,.cta-panel p{color:#d8eaff}
.process-line{margin-top:34px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.process-line button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:22px;padding:22px 14px;font-weight:800}
.process-line span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin:0 auto 10px;color:#fff;background:var(--gradient)}
.popup-backdrop{position:fixed;inset:0;z-index:300;background:rgba(7,23,42,.55);backdrop-filter:blur(12px)}
.popup{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:20px}
.popup[hidden],.popup-backdrop[hidden]{display:none}
.popup-card{width:min(680px,100%);max-height:min(86vh,800px);overflow:auto;border-radius:32px;padding:34px;position:relative;color:var(--text);background:var(--soft-gradient);box-shadow:0 28px 90px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.4);animation:popupIn .3s ease both}
html[data-theme="dark"] .popup-card{background:linear-gradient(135deg,#111C31,#0B1324)}
.popup-close{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{font-weight:800;font-size:13px;color:var(--text)}
.form-grid input,.form-grid textarea,.smart-search-input{margin-top:8px;width:100%;border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.72);color:var(--text);outline:none}
html[data-theme="dark"] .form-grid input,html[data-theme="dark"] .form-grid textarea,html[data-theme="dark"] .smart-search-input{background:#0B1324}
.form-grid textarea{height:120px;resize:vertical}
.full{grid-column:1/-1}
.wide{width:100%;margin-top:18px}
.quick-search-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.quick-search-tags button{border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:12px 16px;color:var(--text)}
.site-footer{padding:70px 0 24px;background:var(--dark-gradient);color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:34px}
.site-footer a{display:block;margin:10px 0;color:#dcecff}
.site-footer p{color:#dcecff}
.footer-brand{color:#fff}
.footer-bottom{text-align:center;margin-top:40px;color:#b9d5ff;font-size:13px}
.mobile-action-bar{display:none}
@keyframes slideReveal{from{opacity:.5;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@keyframes popupIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}

/* Step 5 additions */
.mini-label{
    display:inline-flex;
    margin-bottom:12px;
    color:#BDFBFF;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-weight:900;
}

.specialty-groups{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:30px;
}

.specialty-group{
    padding:24px;
    border-radius:28px;
}

.specialty-group h3{
    margin:0 0 16px;
    color:var(--deep-blue);
    font-size:22px;
}

html[data-theme="dark"] .specialty-group h3{
    color:#DDFBFF;
}

.doc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:26px;
}

.doc-card{
    min-height:170px;
    border:1px solid var(--border);
    border-radius:22px;
    padding:20px;
    text-align:left;
    color:var(--text);
    transition:.25s;
}

.doc-card:hover{
    transform:translateY(-4px);
    border-color:rgba(29,185,194,.44);
}

.doc-icon{
    width:38px;
    height:38px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--gradient);
    font-size:22px;
    font-weight:900;
    margin-bottom:14px;
}

.doc-card strong{
    display:block;
    margin-bottom:8px;
}

.doc-card small{
    color:var(--muted);
    line-height:1.55;
}

.btn-secondary{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
}

.popup-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
}

.form-grid select{
    margin-top:8px;
    width:100%;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    background:rgba(255,255,255,.72);
    color:var(--text);
    outline:none;
}

html[data-theme="dark"] .form-grid select{
    background:#0B1324;
}

.operations-section{
    background:
        radial-gradient(circle at 20% 10%,rgba(29,185,194,.12),transparent 26rem),
        linear-gradient(180deg,rgba(246,247,248,.65),rgba(217,238,240,.48));
}

html[data-theme="dark"] .operations-section{
    background:
        radial-gradient(circle at 20% 10%,rgba(29,185,194,.18),transparent 26rem),
        linear-gradient(180deg,#0B1324,#121A2A);
}

/* Step 8, premium interaction upgrades */
body.popup-open{
    overflow:hidden;
}

.nav-search-btn{
    border:1px solid var(--border);
    background:rgba(255,255,255,.64);
    color:var(--text);
    border-radius:999px;
    padding:11px 16px;
    font-weight:800;
    transition:.25s;
}

.nav-search-btn:hover{
    background:var(--surface);
    box-shadow:0 10px 26px rgba(29,185,194,.18);
}

html[data-theme="dark"] .nav-search-btn{
    background:rgba(18,26,42,.64);
}

.vsl-toast{
    position:fixed;
    right:22px;
    bottom:96px;
    z-index:500;
    max-width:360px;
    padding:16px 20px;
    border-radius:18px;
    color:#fff;
    background:var(--gradient);
    box-shadow:0 20px 60px rgba(0,0,0,.26);
    font-weight:800;
    animation:toastIn .32s ease both;
}

.vsl-toast[data-type="error"]{
    background:linear-gradient(135deg,#7f1d1d,#ef4444);
}

.search-results{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.search-results button{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    background:rgba(255,255,255,.68);
    color:var(--text);
    border-radius:16px;
    padding:14px 16px;
    font-weight:800;
    transition:.22s;
}

.search-results button:hover{
    transform:translateX(4px);
    border-color:rgba(29,185,194,.45);
}

html[data-theme="dark"] .search-results button{
    background:rgba(18,26,42,.72);
}

.request-popup-card{
    width:min(820px,100%);
}

.detail-popup-card{
    width:min(640px,100%);
}

.popup-card{
    scrollbar-width:thin;
}

@keyframes toastIn{
    from{opacity:0;transform:translateY(16px) scale(.96)}
    to{opacity:1;transform:none}
}

/* Step 9, professional SVG logo system */
.brand-full{
    display:flex;
    align-items:center;
    min-width:188px;
    max-width:230px;
}

.brand-full img{
    width:100%;
    height:auto;
    display:block;
}

.footer-logo{
    width:220px;
    max-width:100%;
    margin-bottom:16px;
    padding:12px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.28);
}

.footer-logo img{
    width:100%;
    height:auto;
}

html[data-theme="dark"] .footer-logo{
    background:rgba(255,255,255,.92);
}

@media (max-width:720px){
    .brand-full{
        min-width:142px;
        max-width:172px;
    }
}

/* Step 9, professional SVG logo system */
.brand-full{
    display:flex;
    align-items:center;
    min-width:188px;
    max-width:230px;
}

.brand-full img{
    width:100%;
    height:auto;
    display:block;
}

.footer-logo{
    width:220px;
    max-width:100%;
    margin-bottom:16px;
    padding:12px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.28);
}

.footer-logo img{
    width:100%;
    height:auto;
}

html[data-theme="dark"] .footer-logo{
    background:rgba(255,255,255,.92);
}

@media (max-width:720px){
    .brand-full{
        min-width:142px;
        max-width:172px;
    }
}

/* Step 10, SEO and form protection support */
.hp-field{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* Step 13, clean professional header */
.clean-site-header{
    top:0;
}

.clean-header-inner{
    min-height:88px;
    display:grid;
    grid-template-columns:220px 1fr auto;
    gap:28px;
    align-items:center;
}

.clean-brand{
    min-width:190px;
    max-width:220px;
}

.compact-nav{
    justify-content:center;
    gap:8px;
}

.compact-nav a{
    white-space:nowrap;
    padding:13px 15px;
    font-size:14px;
}

.clean-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.request-header-btn{
    min-width:104px;
}

.more-menu-toggle{
    width:54px;
    height:54px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.72);
    border-radius:20px;
    display:grid;
    place-items:center;
    gap:0;
    padding:14px;
    cursor:pointer;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.more-menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    border-radius:999px;
    background:var(--deep-blue);
    transition:.25s;
}

.more-menu-toggle.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.more-menu-toggle.open span:nth-child(2){
    opacity:0;
}

.more-menu-toggle.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

html[data-theme="dark"] .more-menu-toggle{
    background:rgba(18,26,42,.78);
}

html[data-theme="dark"] .more-menu-toggle span{
    background:#DDFBFF;
}

.clean-more-menu{
    position:fixed;
    top:98px;
    right:26px;
    left:auto;
    width:min(390px,calc(100vw - 32px));
    max-height:calc(100vh - 124px);
    overflow:auto;
    padding:18px;
    border-radius:28px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(26px);
    box-shadow:0 30px 90px rgba(15,23,42,.22);
    transform:translateY(-12px) scale(.96);
    opacity:0;
    pointer-events:none;
    transition:.24s ease;
    z-index:210;
    display:grid;
    gap:8px;
}

.clean-more-menu.open{
    transform:none;
    opacity:1;
    pointer-events:auto;
}

.clean-more-menu a,
.clean-more-menu button{
    width:100%;
    text-align:left;
}

.clean-more-menu a{
    padding:14px 16px;
    border-radius:16px;
    color:var(--text);
    font-weight:800;
    text-decoration:none;
    background:rgba(49,69,154,.055);
    transition:.22s;
}

.clean-more-menu a:hover{
    background:rgba(29,185,194,.14);
    transform:translateX(4px);
}

.menu-panel-title{
    padding:10px 12px 16px;
    border-bottom:1px solid var(--border);
    margin-bottom:8px;
}

.menu-panel-title strong{
    display:block;
    color:var(--deep-blue);
    font-size:18px;
}

.menu-panel-title small{
    color:var(--muted);
}

html[data-theme="dark"] .clean-more-menu{
    background:rgba(7,23,42,.94);
}

html[data-theme="dark"] .clean-more-menu a{
    background:rgba(255,255,255,.06);
}

html[data-theme="dark"] .menu-panel-title strong{
    color:#DDFBFF;
}

/* Step 14, premium visual sales experience */
.premium-hero{
    position:relative;
    padding:0 0 28px;
    overflow:hidden;
}

.hero-slider{
    position:relative;
}

.hero-slide{
    min-height:720px;
    display:none;
    position:relative;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.hero-slide.is-active{
    display:block;
    animation:heroFade .9s ease;
}

.hero-slide-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(5,12,28,.14), rgba(5,12,28,.04)),
        radial-gradient(circle at 78% 24%, rgba(114,232,255,.20), transparent 24%);
    pointer-events:none;
}

.hero-grid{
    position:relative;
    z-index:2;
    min-height:660px;
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
    gap:36px;
    align-items:center;
    padding-top:72px;
    padding-bottom:70px;
}

.hero-story-card{
    position:relative;
    border-radius:34px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 30px 90px rgba(2,8,23,.28);
    backdrop-filter:blur(18px);
    overflow:hidden;
}

.hero-story-main{
    padding:42px 42px 38px;
    background:
        linear-gradient(160deg, rgba(62,92,182,.68), rgba(45,73,162,.46)),
        linear-gradient(130deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

.hero-story-main h1{
    font-size:clamp(3.2rem, 6vw, 5.2rem);
    line-height:.94;
    letter-spacing:-.04em;
    color:#fff;
    margin:16px 0 10px;
    max-width:760px;
}

.hero-story-main h2{
    color:#D8FAFF;
    font-size:clamp(1.8rem, 2.8vw, 3rem);
    margin:0 0 18px;
}

.hero-story-main p{
    max-width:720px;
    color:rgba(255,255,255,.90);
    font-size:1.08rem;
}

.hero-story-side{
    min-height:320px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:stretch;
}

.hero-side-inner{
    width:100%;
    padding:34px 30px;
    background:linear-gradient(145deg, rgba(66,97,180,.60), rgba(66,97,180,.18));
}

.hero-side-inner h3{
    font-size:2rem;
    line-height:1.15;
    color:#fff;
    margin:8px 0 20px;
}

.hero-check-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
}

.hero-check-list li{
    color:#F5FDFF;
    padding-left:22px;
    position:relative;
    font-size:1.06rem;
}

.hero-check-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.5em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#79EEF7;
    box-shadow:0 0 0 7px rgba(121,238,247,.10);
}

.hero-mini-points{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.hero-mini-points span{
    display:inline-flex;
    align-items:center;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#EBFDFF;
    font-weight:700;
    font-size:.9rem;
    border:1px solid rgba(255,255,255,.14);
}

.hero-bottom-strip{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
    margin-top:-34px;
}

.hero-feature-pill{
    padding:16px 14px;
    border-radius:18px;
    text-align:center;
    font-weight:800;
    color:#F4FDFF;
    background:linear-gradient(160deg, rgba(17,33,73,.82), rgba(49,69,154,.62));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 38px rgba(5,12,28,.20);
    backdrop-filter:blur(12px);
}

.hero-slider-nav{
    position:relative;
    z-index:4;
    margin-top:18px;
}

.hero-dots{
    display:flex;
    gap:10px;
    align-items:center;
}

.hero-dot{
    width:42px;
    height:6px;
    border-radius:999px;
    border:none;
    background:rgba(255,255,255,.24);
    cursor:pointer;
    transition:.25s;
}

.hero-dot.is-active{
    width:70px;
    background:linear-gradient(90deg, #4AB2BA, #1DB9C2, #6BE4FF);
    box-shadow:0 0 0 4px rgba(107,228,255,.10);
}

.story-section,
.compliance-visual{
    position:relative;
    overflow:hidden;
}

.section-bg-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:1;
}

.story-section .container,
.compliance-visual .container{
    position:relative;
    z-index:2;
}

.story-card-carousel{
    display:grid;
    grid-template-columns:repeat(7, minmax(180px, 1fr));
    gap:18px;
    margin-top:32px;
}

.story-card{
    position:relative;
    min-height:320px;
    border-radius:28px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 52px rgba(2,8,23,.24);
    transition:transform .35s ease, box-shadow .35s ease;
}

.story-card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 30px 80px rgba(2,8,23,.34);
}

.story-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,20,45,.05), rgba(7,17,38,.88));
}

.story-card-content{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    z-index:2;
}

.story-card-content h3{
    color:#fff;
    margin:0 0 10px;
    font-size:1.1rem;
    line-height:1.1;
}

.story-card-content p{
    color:rgba(255,255,255,.84);
    margin:0;
}

.visual-solution-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
    margin-top:28px;
}

.visual-solution-card{
    min-height:260px;
    border-radius:26px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 18px 48px rgba(15,23,42,.10);
    position:relative;
    transition:transform .35s ease, box-shadow .35s ease;
}

.visual-solution-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 74px rgba(15,23,42,.16);
}

.visual-solution-content{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.88) 86%);
}

.visual-solution-content h3{
    margin:0 0 8px;
    color:var(--deep-blue);
}

.specialty-pills{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:22px;
}

.specialty-pill{
    padding:14px 18px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(49,69,154,.08), rgba(29,185,194,.10));
    border:1px solid rgba(49,69,154,.12);
    font-weight:800;
    color:var(--deep-blue);
}

.enhanced-category-grid{
    gap:24px;
}

.visual-category-card{
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(49,69,154,.10);
    background:#fff;
    box-shadow:0 18px 48px rgba(15,23,42,.08);
    transition:transform .35s ease, box-shadow .35s ease;
}

.visual-category-card:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 70px rgba(15,23,42,.14);
}

.category-visual{
    height:220px;
    background-size:cover;
    background-position:center;
}

.category-content{
    padding:20px;
}

.about-visual-panel,
.operations-visual-panel{
    min-height:420px;
    border-radius:34px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(49,69,154,.14);
    box-shadow:0 24px 70px rgba(15,23,42,.12);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:24px;
}

.about-visual-panel::after,
.operations-visual-panel::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.34));
}

.about-visual-caption,
.operations-panel-card{
    position:relative;
    z-index:2;
    padding:22px 24px;
    border-radius:24px;
    background:rgba(49,69,154,.72);
    color:#fff;
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.16);
    max-width:320px;
}

.about-visual-caption strong,
.operations-panel-card strong{
    display:block;
    font-size:1.35rem;
}

.compliance-grid{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:28px;
    align-items:center;
}

.light-copy h2,
.light-copy p{
    color:#fff;
}

.compliance-card-stack{
    display:grid;
    gap:16px;
}

.stack-card{
    padding:24px;
    border-radius:24px;
    color:#fff;
    background:linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 20px 40px rgba(2,8,23,.16);
    backdrop-filter:blur(12px);
}

.process-steps{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:18px;
    margin-top:28px;
}

.process-step{
    padding:22px 18px;
    border-radius:24px;
    background:linear-gradient(145deg, rgba(49,69,154,.05), rgba(29,185,194,.07));
    border:1px solid rgba(49,69,154,.12);
    box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.process-number{
    display:inline-flex;
    margin-bottom:14px;
    font-weight:900;
    color:var(--teal);
}

.operations-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:center;
}

.operations-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:22px;
}

@keyframes heroFade{
    from{opacity:.15; transform:scale(1.02)}
    to{opacity:1; transform:none}
}

/* Step 16, premium specialties section */
.specialties-pro-section{
    position:relative;
    overflow:hidden;
    padding:86px 0 72px;
    background:
        radial-gradient(circle at 78% 20%, rgba(29,185,194,.18), transparent 26rem),
        radial-gradient(circle at 18% 70%, rgba(49,69,154,.08), transparent 24rem),
        linear-gradient(180deg,#F4FAFF 0%, #EEF7FF 100%);
}

.specialties-pro-section::before{
    content:"V";
    position:absolute;
    right:4%;
    top:38px;
    font-size:18rem;
    line-height:1;
    font-weight:900;
    color:rgba(49,69,154,.045);
    letter-spacing:-.12em;
    pointer-events:none;
}

.specialties-pro-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.32)),
        url('assets/images/backgrounds/compliance-bg.png');
    background-size:cover;
    background-position:center;
    opacity:.18;
    filter:blur(.2px);
    pointer-events:none;
}

.specialties-pro-section .container{
    position:relative;
    z-index:2;
}

.specialties-pro-head{
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(360px, .72fr);
    gap:44px;
    align-items:end;
    margin-bottom:32px;
}

.specialties-pro-head h2{
    margin:10px 0 0;
    max-width:760px;
    color:#07172A;
    font-size:clamp(2.4rem, 4vw, 4.2rem);
    line-height:.98;
    letter-spacing:-.045em;
}

.icon-eyebrow{
    position:relative;
    padding-left:26px;
}

.icon-eyebrow::before{
    content:"✣";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    color:#1DB9C2;
    font-size:15px;
}

.specialties-pro-intro{
    display:grid;
    gap:20px;
    justify-items:start;
}

.specialties-pro-intro p{
    margin:0;
    max-width:530px;
    color:#5B6B82;
    line-height:1.75;
}

.specialty-view-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    border:1px solid rgba(49,69,154,.14);
    background:rgba(255,255,255,.78);
    color:#183B8E;
    padding:14px 22px;
    border-radius:20px;
    box-shadow:0 14px 32px rgba(15,23,42,.08);
    font-weight:900;
    cursor:pointer;
    transition:.28s ease;
}

.specialty-view-btn span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#F1F7FF;
    color:#1D4ED8;
    font-size:20px;
}

.specialty-view-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 48px rgba(15,23,42,.13);
    border-color:rgba(29,185,194,.34);
}

.specialties-pro-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:14px;
}

.specialty-pro-card{
    position:relative;
    min-height:74px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 28px;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border:1px solid rgba(49,69,154,.13);
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,250,255,.82)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.12), transparent 14rem);
    color:#07172A;
    text-align:left;
    box-shadow:0 12px 30px rgba(15,23,42,.065);
    cursor:pointer;
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.specialty-pro-card::before{
    content:"";
    position:absolute;
    inset:auto 12px 0 12px;
    height:3px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#1DB9C2);
    transform:scaleX(0);
    transform-origin:left;
    transition:.28s ease;
}

.specialty-pro-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 48px rgba(15,23,42,.12);
    border-color:rgba(29,185,194,.38);
}

.specialty-pro-card:hover::before{
    transform:scaleX(1);
}

.specialty-pro-icon{
    width:42px;
    height:42px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#1F4DB5;
    font-size:22px;
    line-height:1;
    background:
        radial-gradient(circle at 30% 20%, rgba(29,185,194,.25), transparent 48%),
        linear-gradient(145deg,#FFFFFF,#EAF5FF);
    border:1px solid rgba(49,69,154,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(49,69,154,.08);
}

.specialty-pro-text{
    min-width:0;
}

.specialty-pro-text strong{
    display:block;
    color:#173B8F;
    font-size:.93rem;
    line-height:1.15;
    font-weight:900;
}

.specialty-pro-text small{
    display:block;
    margin-top:3px;
    color:#6B7A90;
    font-size:.68rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.specialty-pro-arrow{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#1F4DB5;
    background:#F2F8FF;
    border:1px solid rgba(49,69,154,.10);
    font-size:20px;
    font-weight:900;
    transition:.28s ease;
}

.specialty-pro-card:hover .specialty-pro-arrow{
    background:#1DB9C2;
    color:white;
    transform:translateX(3px);
}

.specialties-pro-cta{
    margin-top:34px;
    display:grid;
    grid-template-columns:230px 1fr auto;
    gap:28px;
    align-items:center;
    padding:28px;
    border-radius:28px;
    background:
        linear-gradient(110deg, rgba(7,28,78,.96) 0%, rgba(27,73,160,.92) 45%, rgba(29,185,194,.78) 100%),
        url('assets/images/products/surgical-specialty.png');
    background-size:cover;
    background-position:center;
    box-shadow:0 24px 70px rgba(15,23,42,.18);
    border:1px solid rgba(255,255,255,.22);
    overflow:hidden;
}

.specialties-cta-brand{
    padding:14px 18px;
    border-right:1px solid rgba(255,255,255,.26);
}

.specialties-cta-brand img{
    width:180px;
    max-width:100%;
    filter:brightness(0) invert(1);
}

.specialties-cta-copy h3{
    color:#fff;
    margin:0 0 8px;
    font-size:1.65rem;
    line-height:1.08;
}

.specialties-cta-copy p{
    color:rgba(255,255,255,.86);
    margin:0;
    line-height:1.6;
}

.specialties-cta-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.specialties-cta-actions .btn-secondary{
    background:rgba(255,255,255,.12);
    color:#fff;
    border-color:rgba(255,255,255,.32);
}

html[data-theme="dark"] .specialties-pro-section{
    background:
        radial-gradient(circle at 78% 20%, rgba(29,185,194,.13), transparent 26rem),
        linear-gradient(180deg,#081420 0%, #0D1B31 100%);
}

html[data-theme="dark"] .specialties-pro-head h2{
    color:#F6FBFF;
}

html[data-theme="dark"] .specialties-pro-intro p{
    color:#B9C7D6;
}

html[data-theme="dark"] .specialty-pro-card{
    background:
        linear-gradient(145deg, rgba(18,31,58,.92), rgba(12,24,44,.86)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.10), transparent 14rem);
    border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .specialty-pro-text strong{
    color:#EAFBFF;
}

html[data-theme="dark"] .specialty-pro-text small{
    color:#9FB2C8;
}

/* STEP 17: specialties infographic layout */
.specialties-infographic-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(29,185,194,.12), transparent 24rem),
        linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

.specialties-infographic-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center, rgba(49,69,154,.05), transparent 42%),
        linear-gradient(135deg, rgba(49,69,154,.03), rgba(29,185,194,.04));
    pointer-events:none;
}

.specialties-infographic-head{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:900px;
    margin:0 auto 46px;
}

.specialties-infographic-head h2{
    margin:12px 0 14px;
    font-size:clamp(2.4rem,4vw,4rem);
    line-height:1.02;
    letter-spacing:-.04em;
    color:#0d2348;
}

.specialties-infographic-head p{
    margin:0 auto;
    max-width:760px;
    color:#5c6d86;
    line-height:1.75;
    font-size:1.03rem;
}

.specialties-infographic-wrap{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 360px 1fr;
    gap:26px;
    align-items:center;
}

.specialties-side{
    display:grid;
    gap:18px;
}

.specialties-info-card{
    position:relative;
    display:grid;
    grid-template-columns:74px 1fr;
    gap:18px;
    align-items:center;
    width:100%;
    text-align:left;
    border:1px solid rgba(49,69,154,.12);
    border-radius:24px;
    padding:18px 18px 18px 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,249,255,.94)),
        radial-gradient(circle at left center, rgba(29,185,194,.12), transparent 35%);
    box-shadow:0 18px 42px rgba(15,23,42,.09);
    cursor:pointer;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.specialties-info-card:hover{
    transform:translateY(-6px) scale(1.01);
    box-shadow:0 24px 56px rgba(15,23,42,.14);
    border-color:rgba(29,185,194,.34);
}

.specialties-info-card::after{
    content:"";
    position:absolute;
    inset:auto 18px 0 18px;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#0A47A1,#1DB9C2);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}

.specialties-info-card:hover::after{
    transform:scaleX(1);
}

.specialties-info-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:
        linear-gradient(145deg,#0d2348,#163b86 62%, #1DB9C2 100%);
    color:#fff;
    font-size:1.5rem;
    font-weight:800;
    box-shadow:0 14px 28px rgba(10,71,161,.22);
}

.specialties-info-copy{
    min-width:0;
}

.specialties-info-topline{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:6px;
}

.specialties-info-number{
    font-size:1.35rem;
    font-weight:900;
    line-height:1;
    color:#1DB9C2;
}

.specialties-info-copy strong{
    font-size:1.05rem;
    font-weight:900;
    color:#102a56;
    line-height:1.2;
}

.specialties-info-copy p{
    margin:0;
    color:#5b6a82;
    line-height:1.55;
    font-size:.92rem;
}

.specialties-infographic-center{
    position:relative;
    min-height:420px;
    display:grid;
    place-items:center;
}

.specialties-center-ring{
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:
        conic-gradient(from 210deg, #31459A, #0A47A1, #1DB9C2, #4AB2BA, #31459A);
    box-shadow:
        0 30px 60px rgba(15,23,42,.16),
        0 0 0 14px rgba(255,255,255,.68);
    filter:drop-shadow(0 24px 48px rgba(10,71,161,.20));
}

.specialties-center-ring::before{
    content:"";
    position:absolute;
    inset:46px;
    border-radius:50%;
    background:linear-gradient(145deg,#fefefe,#edf6ff);
    box-shadow:inset 0 0 0 1px rgba(49,69,154,.10);
}

.specialties-center-core{
    position:relative;
    z-index:2;
    width:210px;
    height:210px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    color:#fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(29,185,194,.22), transparent 40%),
        linear-gradient(145deg,#081420,#102e66 65%, #1b4da7 100%);
    box-shadow:0 24px 56px rgba(8,20,32,.32);
}

.specialties-center-mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#8fe9ef;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.specialties-center-core h3{
    margin:0 0 8px;
    font-size:1.55rem;
    line-height:1.05;
    font-weight:900;
}

.specialties-center-core p{
    margin:0 0 14px;
    color:rgba(255,255,255,.82);
    font-size:.95rem;
    line-height:1.45;
}

.specialties-center-btn{
    border:0;
    border-radius:999px;
    padding:12px 18px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(90deg,#0A47A1,#1DB9C2);
    box-shadow:0 12px 22px rgba(29,185,194,.25);
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
}

.specialties-center-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 32px rgba(29,185,194,.33);
}

html[data-theme="dark"] .specialties-infographic-section{
    background:
        radial-gradient(circle at 50% 30%, rgba(29,185,194,.09), transparent 24rem),
        linear-gradient(180deg, #081420 0%, #0d1d34 100%);
}

html[data-theme="dark"] .specialties-infographic-head h2{
    color:#f3f8ff;
}

html[data-theme="dark"] .specialties-infographic-head p{
    color:#b6c7d9;
}

html[data-theme="dark"] .specialties-info-card{
    background:
        linear-gradient(145deg, rgba(10,19,36,.95), rgba(15,29,53,.92)),
        radial-gradient(circle at left center, rgba(29,185,194,.10), transparent 35%);
    border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .specialties-info-copy strong{
    color:#f2f8ff;
}

html[data-theme="dark"] .specialties-info-copy p{
    color:#b8c5d4;
}

html[data-theme="dark"] .specialties-center-ring::before{
    background:linear-gradient(145deg,#0c1730,#10203b);
}

/* STEP 18: reference-style infographic layout */
.specialties-infographic-section{
    padding:88px 0 96px !important;
    background:
        radial-gradient(circle at 50% 43%, rgba(29,185,194,.26), transparent 23rem),
        radial-gradient(circle at 50% 42%, rgba(49,69,154,.30), transparent 34rem),
        linear-gradient(135deg, #06101F 0%, #081B3C 44%, #102E72 100%) !important;
    color:#fff;
}

.specialties-infographic-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.35;
    pointer-events:none;
}

.specialties-infographic-section::after{
    content:"V";
    position:absolute;
    right:5%;
    top:8%;
    font-size:22rem;
    line-height:1;
    font-weight:900;
    color:rgba(255,255,255,.035);
    pointer-events:none;
}

.specialties-infographic-bg{
    background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,.09), transparent 18rem),
        radial-gradient(circle at 50% 46%, rgba(29,185,194,.14), transparent 30rem) !important;
    opacity:1 !important;
}

.specialties-infographic-head{
    max-width:920px !important;
    margin:0 auto 12px !important;
}

.specialties-infographic-head .eyebrow{
    color:#68F0F8;
}

.specialties-infographic-head h2{
    color:#fff !important;
    text-shadow:0 14px 38px rgba(0,0,0,.25);
}

.specialties-infographic-head p{
    color:rgba(236,250,255,.78) !important;
}

.specialties-infographic-wrap{
    min-height:650px;
    display:block !important;
    position:relative;
    margin-top:22px;
}

/* Put side containers into the same positioning context */
.specialties-side{
    display:contents !important;
}

/* Big centre ring */
.specialties-infographic-center{
    position:absolute !important;
    left:50%;
    top:50%;
    width:540px;
    height:540px;
    min-height:0 !important;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    z-index:2;
}

.specialties-center-ring{
    width:520px !important;
    height:520px !important;
    background:
        conic-gradient(
            from 220deg,
            #1DB9C2 0deg,
            #31459A 70deg,
            #0A47A1 140deg,
            #1DB9C2 230deg,
            #4AB2BA 300deg,
            #1DB9C2 360deg
        ) !important;
    box-shadow:
        0 44px 110px rgba(0,0,0,.40),
        0 0 0 20px rgba(255,255,255,.055),
        inset 0 0 60px rgba(255,255,255,.12) !important;
    animation:vslRingFloat 8s ease-in-out infinite;
}

.specialties-center-ring::before{
    inset:88px !important;
    background:
        radial-gradient(circle at 30% 25%, rgba(29,185,194,.20), transparent 35%),
        linear-gradient(145deg, #071426, #0C214A 60%, #102E72) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 26px 60px rgba(0,0,0,.24) !important;
}

.specialties-center-core{
    width:270px !important;
    height:270px !important;
    background:
        radial-gradient(circle at 32% 20%, rgba(29,185,194,.24), transparent 40%),
        linear-gradient(145deg, #071426, #102A61 62%, #143A8A) !important;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 30px 80px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.specialties-center-core h3{
    font-size:1.9rem !important;
}

.specialties-center-mini{
    color:#83F7FF !important;
    background:rgba(29,185,194,.18) !important;
}

/* Reference style cards around ring */
.specialties-info-card{
    position:absolute !important;
    z-index:5;
    width:390px !important;
    min-height:116px;
    grid-template-columns:70px 1fr !important;
    padding:18px 22px 18px 18px !important;
    border-radius:24px !important;
    background:
        linear-gradient(145deg, rgba(7,16,31,.96), rgba(13,30,64,.94) 58%, rgba(16,47,111,.90)),
        radial-gradient(circle at 8% 16%, rgba(29,185,194,.16), transparent 12rem) !important;
    border:1px solid rgba(141,241,255,.18) !important;
    box-shadow:
        0 28px 70px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
    overflow:visible !important;
}

.specialties-info-card::before{
    content:"";
    position:absolute;
    top:50%;
    width:88px;
    height:3px;
    background:linear-gradient(90deg, rgba(29,185,194,.05), rgba(29,185,194,.92));
    transform:translateY(-50%);
    border-radius:999px;
    opacity:.78;
}

.specialties-side-left .specialties-info-card::before{
    right:-88px;
}

.specialties-side-right .specialties-info-card::before{
    left:-88px;
    background:linear-gradient(90deg, rgba(29,185,194,.92), rgba(29,185,194,.05));
}

.specialties-info-card::after{
    inset:auto 20px 0 20px !important;
    background:linear-gradient(90deg, #31459A, #1DB9C2, #74F6FF) !important;
}

.specialties-info-card:hover{
    transform:translateY(-8px) scale(1.018) !important;
    border-color:rgba(116,246,255,.44) !important;
    box-shadow:
        0 38px 94px rgba(0,0,0,.48),
        0 0 0 1px rgba(29,185,194,.10),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.specialties-info-icon{
    background:
        radial-gradient(circle at 32% 22%, rgba(116,246,255,.38), transparent 40%),
        linear-gradient(145deg, #102E72, #0A47A1 58%, #1DB9C2) !important;
    border:1px solid rgba(116,246,255,.26) !important;
    color:#fff !important;
    box-shadow:0 18px 34px rgba(0,0,0,.34), 0 0 0 8px rgba(29,185,194,.055) !important;
}

.specialties-info-number{
    color:#6EF6FF !important;
    font-size:1.5rem !important;
}

.specialties-info-copy strong{
    color:#fff !important;
    font-size:1.08rem !important;
}

.specialties-info-copy p{
    color:rgba(237,250,255,.78) !important;
    font-size:.9rem !important;
}

/* Exact callout placement like the infographic reference */
.specialties-side-left .specialties-info-card:nth-of-type(1){
    left:0;
    top:56px;
}

.specialties-side-left .specialties-info-card:nth-of-type(2){
    left:0;
    top:250px;
}

.specialties-side-left .specialties-info-card:nth-of-type(3){
    left:74px;
    top:444px;
}

.specialties-side-right .specialties-info-card:nth-of-type(1){
    right:0;
    top:56px;
}

.specialties-side-right .specialties-info-card:nth-of-type(2){
    right:0;
    top:250px;
}

.specialties-side-right .specialties-info-card:nth-of-type(3){
    right:74px;
    top:444px;
}

/* Subtle numbered side accents */
.specialties-info-topline{
    align-items:baseline !important;
}

.specialties-info-card:hover .specialties-info-icon{
    transform:scale(1.04);
}

.specialties-center-btn{
    background:linear-gradient(90deg, #31459A, #1DB9C2) !important;
    border:1px solid rgba(255,255,255,.20) !important;
}

@keyframes vslRingFloat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-8px) rotate(3deg)}
}

/* STEP 19: premium Our Solutions section */
.solutions-pro-section{
    position:relative;
    overflow:hidden;
    padding:96px 0 118px;
    background:
        radial-gradient(circle at 16% 28%, rgba(29,185,194,.12), transparent 24rem),
        radial-gradient(circle at 84% 16%, rgba(49,69,154,.10), transparent 28rem),
        linear-gradient(180deg, #F3F9FF 0%, #F6FBFF 52%, #EAF4FF 76%, #102E72 100%);
}

.solutions-pro-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:220px;
    background:
        radial-gradient(circle at 50% 100%, rgba(29,185,194,.30), transparent 24rem),
        linear-gradient(180deg, rgba(16,46,114,0), rgba(6,16,31,.96));
    pointer-events:none;
}

.solutions-pro-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(180deg, transparent 0%, black 15%, black 70%, transparent 100%);
    opacity:.5;
    pointer-events:none;
}

.solutions-pro-section .container{
    position:relative;
    z-index:2;
}

.solutions-pro-head{
    display:grid;
    grid-template-columns:minmax(320px,.72fr) minmax(0,1fr);
    gap:42px;
    align-items:end;
    margin-bottom:34px;
}

.solutions-pro-intro{
    max-width:500px;
}

.solutions-pro-intro p{
    margin:14px 0 0;
    color:#5F7089;
    line-height:1.75;
    font-size:1.03rem;
}

.solutions-pro-title{
    text-align:right;
    justify-self:end;
}

.solutions-pro-title h2{
    margin:0;
    max-width:820px;
    color:#07172A;
    font-size:clamp(2.6rem, 4.7vw, 5rem);
    line-height:.95;
    letter-spacing:-.055em;
}

.solutions-pro-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.solutions-pro-card{
    position:relative;
    min-height:178px;
    display:grid;
    grid-template-columns:78px minmax(0,1fr) 42px;
    align-items:center;
    gap:20px;
    text-align:left;
    padding:26px;
    border-radius:28px;
    border:1px solid rgba(49,69,154,.12);
    background:
        radial-gradient(circle at 16% 20%, rgba(29,185,194,.12), transparent 14rem),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.90));
    box-shadow:
        0 24px 70px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.9);
    color:#07172A;
    cursor:pointer;
    overflow:hidden;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.solutions-pro-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(49,69,154,.055), transparent 42%),
        radial-gradient(circle at 94% 0%, rgba(29,185,194,.12), transparent 12rem);
    opacity:0;
    transition:.35s ease;
}

.solutions-pro-card::after{
    content:"";
    position:absolute;
    left:26px;
    right:26px;
    bottom:0;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg, #31459A, #1DB9C2, #75F5FF);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}

.solutions-pro-card:hover{
    transform:translateY(-8px);
    border-color:rgba(29,185,194,.35);
    box-shadow:
        0 34px 90px rgba(15,23,42,.16),
        0 0 0 1px rgba(29,185,194,.08),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.solutions-pro-card:hover::before{
    opacity:1;
}

.solutions-pro-card:hover::after{
    transform:scaleX(1);
}

.solutions-pro-icon{
    position:relative;
    z-index:2;
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    border-radius:24px;
    color:#fff;
    font-size:2rem;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 42%),
        linear-gradient(145deg, #31459A 0%, #0A47A1 55%, #1DB9C2 100%);
    box-shadow:
        0 18px 36px rgba(10,71,161,.24),
        0 0 0 10px rgba(29,185,194,.055);
    transition:.35s ease;
}

.solutions-pro-card:hover .solutions-pro-icon{
    transform:scale(1.06) rotate(-3deg);
    box-shadow:
        0 22px 42px rgba(10,71,161,.30),
        0 0 0 12px rgba(29,185,194,.075);
}

.solutions-pro-copy{
    position:relative;
    z-index:2;
}

.solutions-pro-copy strong{
    display:block;
    margin-bottom:10px;
    color:#173B8F;
    font-size:1.22rem;
    line-height:1.18;
    font-weight:900;
    letter-spacing:-.018em;
}

.solutions-pro-copy small{
    display:block;
    color:#607089;
    font-size:.98rem;
    line-height:1.65;
}

.solutions-pro-arrow{
    position:relative;
    z-index:2;
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#1F4DB5;
    background:#F2F8FF;
    border:1px solid rgba(49,69,154,.12);
    font-size:28px;
    font-weight:900;
    box-shadow:0 12px 24px rgba(15,23,42,.08);
    transition:.35s ease;
}

.solutions-pro-card:hover .solutions-pro-arrow{
    color:#fff;
    background:linear-gradient(135deg,#31459A,#1DB9C2);
    transform:translateX(5px);
}

.reveal-up{
    opacity:0;
    transform:translateY(26px);
    transition:
        opacity .72s ease,
        transform .72s ease;
    transition-delay:var(--delay, 0ms);
}

.reveal-up.is-visible{
    opacity:1;
    transform:none;
}

html[data-theme="dark"] .solutions-pro-section{
    background:
        radial-gradient(circle at 16% 28%, rgba(29,185,194,.10), transparent 24rem),
        radial-gradient(circle at 84% 16%, rgba(49,69,154,.18), transparent 28rem),
        linear-gradient(180deg, #081420 0%, #0D1D34 58%, #06101F 100%);
}

html[data-theme="dark"] .solutions-pro-title h2{
    color:#F6FBFF;
}

html[data-theme="dark"] .solutions-pro-intro p{
    color:#B9C7D6;
}

html[data-theme="dark"] .solutions-pro-card{
    background:
        radial-gradient(circle at 16% 20%, rgba(29,185,194,.09), transparent 14rem),
        linear-gradient(145deg, rgba(13,29,52,.96), rgba(7,18,34,.92));
    border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .solutions-pro-copy strong{
    color:#F4FBFF;
}

html[data-theme="dark"] .solutions-pro-copy small{
    color:#AFC0D2;
}

/* STEP 20: premium Supply Gaps section */
.gaps-pro-section{
    position:relative;
    overflow:hidden;
    padding:110px 0 120px;
    background:
        linear-gradient(180deg, #F4FAFF 0%, #EAF5FF 13%, #122B66 36%, #081420 100%);
    color:#fff;
}

.gaps-pro-section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:240px;
    background:
        radial-gradient(circle at 18% 15%, rgba(29,185,194,.18), transparent 22rem),
        linear-gradient(180deg, rgba(244,250,255,1), rgba(244,250,255,.0));
    pointer-events:none;
    z-index:1;
}

.gaps-pro-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:220px;
    background:
        radial-gradient(circle at 50% 100%, rgba(29,185,194,.22), transparent 26rem),
        linear-gradient(180deg, rgba(8,20,32,0), rgba(243,249,255,.96));
    pointer-events:none;
    z-index:1;
}

.gaps-pro-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(105deg, rgba(8,20,32,.78), rgba(18,43,102,.70)),
        url('assets/images/hero/hero-specialties.png');
    background-size:cover;
    background-position:center;
    opacity:.58;
    filter:saturate(.9) contrast(1.05);
    pointer-events:none;
}

.gaps-pro-glow{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 42%, rgba(29,185,194,.20), transparent 25rem),
        radial-gradient(circle at 85% 20%, rgba(49,69,154,.30), transparent 28rem),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size:auto, auto, 54px 54px, 54px 54px;
    pointer-events:none;
}

.gaps-pro-section .container{
    position:relative;
    z-index:3;
}

.gaps-pro-head{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr);
    gap:40px;
    align-items:end;
    margin-bottom:34px;
}

.gaps-pro-copy .eyebrow{
    color:#6EF6FF;
}

.gaps-pro-copy h2{
    margin:12px 0 0;
    max-width:940px;
    color:#fff;
    font-size:clamp(2.7rem, 5vw, 5.4rem);
    line-height:.94;
    letter-spacing:-.055em;
    text-shadow:0 18px 42px rgba(0,0,0,.30);
}

.gaps-pro-intro{
    justify-self:end;
    max-width:560px;
    padding:22px 24px;
    border-radius:24px;
    background:linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
    border:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(12px);
    box-shadow:0 22px 55px rgba(0,0,0,.14);
}

.gaps-pro-intro p{
    margin:0;
    color:rgba(240,253,255,.86);
    line-height:1.75;
    font-size:1.02rem;
}

.gaps-carousel-shell{
    position:relative;
    padding:10px 0 20px;
}

.gaps-pro-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding:12px 4px 30px;
    scrollbar-width:thin;
    scrollbar-color:rgba(29,185,194,.75) rgba(255,255,255,.12);
}

.gaps-pro-track::-webkit-scrollbar{
    height:9px;
}

.gaps-pro-track::-webkit-scrollbar-track{
    background:rgba(255,255,255,.10);
    border-radius:999px;
}

.gaps-pro-track::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#31459A,#1DB9C2);
    border-radius:999px;
}

.gaps-pro-card{
    position:relative;
    flex:0 0 260px;
    min-height:360px;
    scroll-snap-align:start;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    overflow:hidden;
    color:#fff;
    text-align:left;
    cursor:pointer;
    background:
        linear-gradient(180deg, rgba(4,12,28,.08) 0%, rgba(4,12,28,.18) 36%, rgba(4,12,28,.92) 100%),
        var(--gap-img);
    background-size:cover;
    background-position:center;
    box-shadow:
        0 28px 76px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.13);
    transition:
        transform .38s ease,
        box-shadow .38s ease,
        border-color .38s ease,
        filter .38s ease;
}

.gaps-pro-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 25% 18%, rgba(29,185,194,.18), transparent 16rem),
        linear-gradient(180deg, rgba(11,31,78,.08), rgba(3,9,24,.88));
    transition:.38s ease;
}

.gaps-pro-card::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#7AF5FF);
    transform:scaleX(.35);
    transform-origin:left;
    transition:.38s ease;
}

.gaps-pro-card:hover{
    transform:translateY(-10px) scale(1.018);
    box-shadow:
        0 40px 100px rgba(0,0,0,.42),
        0 0 0 1px rgba(29,185,194,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
    border-color:rgba(122,245,255,.40);
    filter:saturate(1.08);
}

.gaps-pro-card:hover::before{
    background:
        radial-gradient(circle at 25% 18%, rgba(29,185,194,.25), transparent 16rem),
        linear-gradient(180deg, rgba(11,31,78,.02), rgba(3,9,24,.82));
}

.gaps-pro-card:hover::after{
    transform:scaleX(1);
}

.gap-number{
    position:absolute;
    left:18px;
    top:18px;
    z-index:2;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#AFFFFF;
    font-weight:900;
    background:linear-gradient(145deg, rgba(49,69,154,.82), rgba(29,185,194,.42));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
}

.gap-card-content{
    position:absolute;
    z-index:2;
    left:22px;
    right:22px;
    bottom:58px;
}

.gap-card-content strong{
    display:block;
    color:#fff;
    font-size:1.25rem;
    line-height:1.1;
    font-weight:900;
    margin-bottom:12px;
    text-shadow:0 10px 24px rgba(0,0,0,.36);
}

.gap-card-content small{
    color:rgba(239,252,255,.86);
    font-size:1rem;
    line-height:1.55;
}

.gap-card-action{
    position:absolute;
    z-index:2;
    left:22px;
    bottom:22px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#93F8FF;
    font-size:.8rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.gap-card-action::after{
    content:"›";
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
}

.gaps-nav{
    position:absolute;
    top:44%;
    z-index:4;
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    color:#fff;
    font-size:34px;
    display:grid;
    place-items:center;
    cursor:pointer;
    backdrop-filter:blur(14px);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    transition:.28s ease;
}

.gaps-nav:hover{
    transform:translateY(-3px);
    background:linear-gradient(145deg, rgba(49,69,154,.80), rgba(29,185,194,.72));
}

.gaps-nav-left{
    left:-20px;
}

.gaps-nav-right{
    right:-20px;
}

/* STEP 21: Supply Gaps card image visibility fix, leave layout untouched */
.gaps-pro-card{
    background-image:
        linear-gradient(180deg, rgba(3,9,24,.08) 0%, rgba(3,9,24,.30) 40%, rgba(3,9,24,.84) 100%),
        var(--gap-img) !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    isolation:isolate;
}

.gaps-pro-card::before{
    background:
        linear-gradient(180deg, rgba(16,46,114,.02) 0%, rgba(16,46,114,.12) 38%, rgba(3,9,24,.64) 100%),
        radial-gradient(circle at 28% 18%, rgba(29,185,194,.18), transparent 12rem) !important;
    opacity:.92 !important;
    z-index:1;
}

.gaps-pro-card:hover::before{
    background:
        linear-gradient(180deg, rgba(16,46,114,.00) 0%, rgba(16,46,114,.08) 38%, rgba(3,9,24,.56) 100%),
        radial-gradient(circle at 28% 18%, rgba(29,185,194,.24), transparent 12rem) !important;
    opacity:.84 !important;
}

.gap-number,
.gap-card-content,
.gap-card-action{
    z-index:3 !important;
}

.gap-card-content{
    padding:18px 0 0;
}

.gap-card-content strong{
    color:#ffffff !important;
    text-shadow:0 10px 28px rgba(0,0,0,.60);
}

.gap-card-content small{
    color:rgba(239,252,255,.92) !important;
    text-shadow:0 8px 22px rgba(0,0,0,.50);
}

.gap-number{
    background:
        linear-gradient(145deg, rgba(49,69,154,.72), rgba(29,185,194,.50)) !important;
    backdrop-filter:blur(14px);
}

.gaps-pro-card:hover{
    background-size:108% !important;
}

/* Add a subtle glass shine without hiding image */
.gaps-pro-card .gap-card-content::before{
    content:"";
    position:absolute;
    left:-2px;
    right:-2px;
    bottom:-18px;
    height:150px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(5,12,28,0), rgba(5,12,28,.26));
    z-index:-1;
    pointer-events:none;
}

/* STEP 22: final Supply Gaps visible JPG image override */
.gaps-pro-card{
    background-color:#07172A !important;
    background-image:
        linear-gradient(180deg, rgba(5,12,28,.00) 0%, rgba(5,12,28,.10) 28%, rgba(5,12,28,.58) 66%, rgba(5,12,28,.92) 100%),
        var(--gap-img) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.gaps-pro-card::before{
    background:
        linear-gradient(135deg, rgba(49,69,154,.08) 0%, rgba(29,185,194,.10) 46%, rgba(5,12,28,.22) 100%) !important;
    opacity:.42 !important;
    mix-blend-mode:normal !important;
}

.gaps-pro-card:hover::before{
    opacity:.25 !important;
}

.gaps-pro-card::after{
    z-index:4 !important;
}

.gap-number,
.gap-card-content,
.gap-card-action{
    position:absolute;
    z-index:6 !important;
}

.gaps-pro-card:hover{
    background-size:112% !important;
}

/* STEP 23: Force real images inside Supply Gaps cards */
.gaps-pro-card{
    background:#07172A !important;
    position:relative !important;
}

.gaps-card-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
    opacity:.72;
    filter:saturate(1.08) contrast(1.02);
    transform:scale(1.02);
    transition:
        opacity .36s ease,
        transform .48s ease,
        filter .36s ease;
}

.gaps-card-gradient{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg, rgba(5,12,28,.03) 0%, rgba(5,12,28,.18) 34%, rgba(5,12,28,.86) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.20), transparent 42%);
    pointer-events:none;
}

.gaps-pro-card::before{
    display:none !important;
}

.gaps-pro-card:hover .gaps-card-img{
    opacity:.92;
    transform:scale(1.12);
    filter:saturate(1.18) contrast(1.08);
}

.gaps-pro-card:hover .gaps-card-gradient{
    background:
        linear-gradient(180deg, rgba(5,12,28,.00) 0%, rgba(5,12,28,.12) 34%, rgba(5,12,28,.76) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.26), transparent 42%);
}

.gap-number,
.gap-card-content,
.gap-card-action{
    z-index:3 !important;
}

.gap-card-content strong,
.gap-card-content small{
    text-shadow:0 10px 28px rgba(0,0,0,.65);
}

/* STEP 24: Supply gaps visual refinement */
.gaps-pro-section{
    position: relative;
    overflow: hidden;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    background:
        linear-gradient(
            180deg,
            #f5fbff 0%,
            #e8f5fb 12%,
            #cde9f3 24%,
            #7faed2 38%,
            #1d4e89 58%,
            #0b2f63 78%,
            #082347 100%
        ) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gaps-pro-section::before,
.gaps-pro-section::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gaps-pro-section::before{
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 28%),
        radial-gradient(circle at 80% 15%, rgba(29,185,194,.18), transparent 25%),
        radial-gradient(circle at 50% 70%, rgba(255,255,255,.10), transparent 40%);
    z-index: 0;
}

.gaps-pro-section::after{
    background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 18%, rgba(8,35,71,.05) 100%);
    z-index: 0;
}

.gaps-pro-bg,
.gaps-pro-glow{
    display: none !important;
}

.gaps-pro-head,
.gaps-pro-slider-wrap,
.gaps-pro-track,
.gaps-pro-progress{
    position: relative;
    z-index: 2;
}

.gaps-pro-head{
    align-items: end;
    gap: 2rem;
}

.gaps-pro-copy .eyebrow{
    color: #62d7e4 !important;
    font-weight: 700;
    letter-spacing: .08em;
}

.gaps-pro-copy h2{
    color: #ffffff !important;
    text-shadow: 0 12px 32px rgba(4, 18, 40, .28);
}

.gaps-pro-intro{
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 55px rgba(4, 19, 44, .18);
}

.gaps-pro-intro p{
    color: rgba(255,255,255,.92) !important;
}

.gaps-pro-card{
    border: 1px solid rgba(125, 198, 224, .22) !important;
    box-shadow:
        0 16px 40px rgba(2, 15, 39, .26),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    overflow: hidden;
    background: #07172A !important;
}

.gaps-card-img{
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.01) !important;
}

.gaps-card-gradient{
    background:
        linear-gradient(180deg, rgba(5,12,28,.02) 0%, rgba(5,12,28,.10) 34%, rgba(5,12,28,.72) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.10), transparent 42%) !important;
}

.gaps-pro-card:hover .gaps-card-img{
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.08) !important;
}

.gaps-pro-card:hover .gaps-card-gradient{
    background:
        linear-gradient(180deg, rgba(5,12,28,0) 0%, rgba(5,12,28,.08) 34%, rgba(5,12,28,.62) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.18), transparent 42%) !important;
}

.gap-card-content strong,
.gap-card-content small,
.gap-card-action,
.gap-number{
    color: #ffffff !important;
}

.gap-card-content strong{
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.gap-card-content small{
    color: rgba(255,255,255,.90) !important;
}

.gap-card-action{
    color: #7ee8f1 !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gap-number{
    background: linear-gradient(135deg, rgba(90,140,255,.82), rgba(29,185,194,.72)) !important;
    border: 1px solid rgba(153,230,255,.26) !important;
    box-shadow: 0 8px 24px rgba(29,185,194,.18);
}

.gaps-pro-progress{
    background: rgba(255,255,255,.18) !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 6px !important;
}

.gaps-pro-progress span{
    background: linear-gradient(90deg, #59d8e8, #2aa9ff, #7de6ef) !important;
    box-shadow: none !important;
}

.gaps-pro-arrow{
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gaps-pro-arrow:hover{
    background: rgba(255,255,255,.22) !important;
    transform: translateY(-2px) scale(1.03);
}

/* Remove hard divider lines between this and next sections */
.gaps-pro-section + .section,
#gaps + #solutions,
#solutions,
.specialties-infographic-section{
    border-top: 0 !important;
    box-shadow: none !important;
}

#solutions{
    position: relative;
    margin-top: -1px;
    background:
        linear-gradient(
            180deg,
            rgba(8,35,71,0) 0%,
            #edf7fb 9%,
            #f6fbfe 18%,
            #f8fbff 100%
        ) !important;
}

#solutions::before{
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    right: 0;
    height: 180px;
    background:
        linear-gradient(
            180deg,
            rgba(24,85,140,.38) 0%,
            rgba(110,185,215,.20) 38%,
            rgba(255,255,255,0) 100%
        );
    pointer-events: none;
}

.specialties-infographic-section{
    margin-top: -1px;
}

/* STEP 25: Our Solutions final polish */
.solutions-pro-section{
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(29,185,194,.10), transparent 24rem),
        radial-gradient(circle at 92% 8%, rgba(49,69,154,.08), transparent 24rem),
        linear-gradient(
            180deg,
            #f1f9fc 0%,
            #f8fcff 20%,
            #ffffff 58%,
            #f4faff 100%
        ) !important;
    overflow: hidden;
}

.solutions-pro-section::before{
    content:"";
    position:absolute;
    top:-90px;
    left:0;
    right:0;
    height:160px;
    background:
        linear-gradient(
            180deg,
            rgba(80,166,205,.26) 0%,
            rgba(255,255,255,.72) 54%,
            rgba(255,255,255,0) 100%
        );
    pointer-events:none;
    z-index:1;
}

.solutions-pro-section::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:220px;
    background:
        radial-gradient(circle at 50% 100%, rgba(29,185,194,.10), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(242,249,255,.96));
    pointer-events:none;
    z-index:1;
}

.solutions-pro-bg{
    opacity:.34 !important;
    background-size:58px 58px !important;
}

.solutions-pro-head{
    align-items:start !important;
    margin-bottom:42px !important;
}

.solutions-pro-intro{
    padding-top:.5rem;
}

.solutions-pro-intro .eyebrow{
    color:#1AAEB8 !important;
    font-weight:800;
}

.solutions-pro-intro p{
    color:#526783 !important;
    font-size:1.08rem !important;
    line-height:1.85 !important;
}

.solutions-pro-title h2{
    color:#07172A !important;
    font-weight:900 !important;
    letter-spacing:-.065em !important;
    text-wrap:balance;
}

.solutions-pro-grid{
    gap:24px !important;
}

.solutions-pro-card{
    min-height:190px !important;
    padding:28px !important;
    border-radius:30px !important;
    border:1px solid rgba(49,69,154,.10) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.92)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.09), transparent 16rem) !important;
    box-shadow:
        0 20px 54px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.solutions-pro-card:nth-child(2n){
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,248,255,.94)),
        radial-gradient(circle at 90% 0%, rgba(49,69,154,.08), transparent 16rem) !important;
}

.solutions-pro-card:nth-child(3n){
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,253,255,.92)),
        radial-gradient(circle at 50% 0%, rgba(29,185,194,.11), transparent 16rem) !important;
}

.solutions-pro-card:hover{
    transform:translateY(-10px) !important;
    box-shadow:
        0 32px 88px rgba(15,23,42,.14),
        0 0 0 1px rgba(29,185,194,.08),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

.solutions-pro-icon{
    width:82px !important;
    height:82px !important;
    border-radius:50% !important;
    font-size:2.05rem !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.36), transparent 36%),
        linear-gradient(145deg, #31459A 0%, #0A47A1 52%, #1DB9C2 100%) !important;
    box-shadow:
        0 18px 34px rgba(10,71,161,.24),
        0 0 0 8px rgba(29,185,194,.08),
        0 0 0 14px rgba(49,69,154,.035) !important;
}

.solutions-pro-card:nth-child(2n) .solutions-pro-icon{
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.36), transparent 36%),
        linear-gradient(145deg, #1B4DA7 0%, #147FBA 54%, #1DB9C2 100%) !important;
}

.solutions-pro-card:nth-child(3n) .solutions-pro-icon{
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.36), transparent 36%),
        linear-gradient(145deg, #0A47A1 0%, #1DB9C2 100%) !important;
}

.solutions-pro-copy strong{
    color:#102E72 !important;
    font-size:1.28rem !important;
    line-height:1.16 !important;
    font-weight:900 !important;
    letter-spacing:-.025em !important;
}

.solutions-pro-copy small{
    color:#5C708C !important;
    font-size:1rem !important;
    line-height:1.75 !important;
    font-weight:500;
}

.solutions-pro-arrow{
    width:46px !important;
    height:46px !important;
    background:#F7FBFF !important;
    color:#0A47A1 !important;
}

.solutions-pro-card:hover .solutions-pro-arrow{
    background:linear-gradient(135deg,#31459A,#1DB9C2) !important;
    color:#fff !important;
}

html[data-theme="dark"] .solutions-pro-section{
    background:
        radial-gradient(circle at 12% 18%, rgba(29,185,194,.09), transparent 24rem),
        linear-gradient(180deg, #0a1629 0%, #081420 100%) !important;
}

html[data-theme="dark"] .solutions-pro-section::before{
    background:
        linear-gradient(
            180deg,
            rgba(29,185,194,.10) 0%,
            rgba(8,20,32,.70) 54%,
            rgba(8,20,32,0) 100%
        );
}

html[data-theme="dark"] .solutions-pro-title h2{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .solutions-pro-card{
    background:
        linear-gradient(145deg, rgba(12,25,48,.96), rgba(9,20,38,.92)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.08), transparent 16rem) !important;
    border-color:rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .solutions-pro-copy strong{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .solutions-pro-copy small{
    color:#B8C8DA !important;
}

/* STEP 26: Medical Supply Categories premium polish */
#supplies{
    position:relative;
    overflow:hidden;
    padding-top:7.5rem !important;
    padding-bottom:7.5rem !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(29,185,194,.12), transparent 26rem),
        radial-gradient(circle at 88% 22%, rgba(49,69,154,.08), transparent 26rem),
        linear-gradient(
            180deg,
            #06101F 0%,
            #102E72 0.5%,
            #F1FAFF 11%,
            #FFFFFF 52%,
            #F4FAFF 100%
        ) !important;
    border-top:0 !important;
    box-shadow:none !important;
}

#supplies::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:210px;
    background:
        linear-gradient(
            180deg,
            rgba(6,16,31,.92) 0%,
            rgba(16,46,114,.55) 36%,
            rgba(241,250,255,.92) 82%,
            rgba(241,250,255,0) 100%
        );
    pointer-events:none;
    z-index:0;
}

#supplies::after{
    content:"V";
    position:absolute;
    right:4%;
    top:7rem;
    font-size:18rem;
    line-height:1;
    font-weight:900;
    color:rgba(49,69,154,.035);
    pointer-events:none;
    z-index:0;
}

#supplies .container{
    position:relative;
    z-index:2;
}

#supplies .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900;
}

#supplies h2{
    max-width:920px;
    color:#07172A !important;
    font-size:clamp(2.5rem,4.6vw,4.8rem);
    line-height:.96;
    letter-spacing:-.06em;
    margin-bottom:2.2rem;
}

.enhanced-category-grid,
.category-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:24px !important;
}

.visual-category-card{
    position:relative;
    overflow:hidden;
    border-radius:30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,255,.92)) !important;
    border:1px solid rgba(49,69,154,.11) !important;
    box-shadow:
        0 22px 62px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    transition:
        transform .36s ease,
        box-shadow .36s ease,
        border-color .36s ease;
}

.visual-category-card::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:0;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#75F5FF);
    transform:scaleX(0);
    transform-origin:left;
    transition:.36s ease;
    z-index:3;
}

.visual-category-card:hover{
    transform:translateY(-10px);
    border-color:rgba(29,185,194,.36) !important;
    box-shadow:
        0 34px 90px rgba(15,23,42,.16),
        0 0 0 1px rgba(29,185,194,.08) !important;
}

.visual-category-card:hover::after{
    transform:scaleX(1);
}

.category-visual{
    height:230px !important;
    background-size:cover !important;
    background-position:center !important;
    position:relative;
    overflow:hidden;
}

.category-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,0) 0%, rgba(5,12,28,.08) 56%, rgba(5,12,28,.28) 100%),
        radial-gradient(circle at 70% 15%, rgba(29,185,194,.12), transparent 42%);
    pointer-events:none;
    transition:.36s ease;
}

.visual-category-card:hover .category-visual::before{
    background:
        linear-gradient(180deg, rgba(5,12,28,0) 0%, rgba(5,12,28,.04) 56%, rgba(5,12,28,.18) 100%),
        radial-gradient(circle at 70% 15%, rgba(29,185,194,.18), transparent 42%);
}

.category-content{
    position:relative;
    padding:24px 24px 26px !important;
}

.category-content h3{
    margin:0 0 10px;
    color:#102E72;
    font-size:1.25rem;
    line-height:1.15;
    letter-spacing:-.025em;
    font-weight:900;
}

.category-content p{
    margin:0;
    color:#5C708C;
    line-height:1.68;
    font-size:.98rem;
}

.visual-category-card:hover .category-content h3{
    color:#0A47A1;
}

html[data-theme="dark"] #supplies{
    background:
        radial-gradient(circle at 12% 12%, rgba(29,185,194,.10), transparent 26rem),
        linear-gradient(180deg, #06101F 0%, #081420 100%) !important;
}

html[data-theme="dark"] #supplies h2{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .visual-category-card{
    background:
        linear-gradient(145deg, rgba(12,25,48,.96), rgba(9,20,38,.92)) !important;
    border-color:rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .category-content h3{
    color:#F6FBFF;
}

html[data-theme="dark"] .category-content p{
    color:#B8C8DA;
}

/* STEP 27: Compliance and Documentation premium polish */
#compliance,
.compliance-visual{
    position:relative;
    overflow:hidden;
    padding-top:7.5rem !important;
    padding-bottom:7.5rem !important;
    background:
        radial-gradient(circle at 78% 20%, rgba(29,185,194,.22), transparent 26rem),
        radial-gradient(circle at 22% 70%, rgba(49,69,154,.28), transparent 28rem),
        linear-gradient(135deg, #06101F 0%, #081B3C 48%, #102E72 100%) !important;
    border-top:0 !important;
    box-shadow:none !important;
}

#compliance::before,
.compliance-visual::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:210px;
    background:
        linear-gradient(
            180deg,
            rgba(244,250,255,.96) 0%,
            rgba(123,184,217,.38) 34%,
            rgba(8,27,60,0) 100%
        );
    pointer-events:none;
    z-index:1;
}

#compliance::after,
.compliance-visual::after{
    content:"V";
    position:absolute;
    right:5%;
    top:7rem;
    font-size:20rem;
    line-height:1;
    font-weight:900;
    color:rgba(255,255,255,.035);
    pointer-events:none;
    z-index:1;
}

.compliance-visual .section-bg-image{
    opacity:.38 !important;
    filter:saturate(.85) contrast(1.06);
    background-size:cover !important;
    background-position:center !important;
}

.compliance-visual .section-bg-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(110deg, rgba(6,16,31,.92), rgba(16,46,114,.72)),
        radial-gradient(circle at 75% 20%, rgba(29,185,194,.22), transparent 28rem);
}

.compliance-grid{
    position:relative;
    z-index:3;
    align-items:center !important;
    gap:4rem !important;
}

.compliance-grid .section-copy{
    max-width:680px;
}

.compliance-grid .eyebrow{
    color:#6EF6FF !important;
    font-weight:900;
}

.compliance-grid h2{
    color:#ffffff !important;
    font-size:clamp(2.5rem,4.6vw,4.8rem);
    line-height:.96;
    letter-spacing:-.06em;
    margin-bottom:1.25rem;
    text-shadow:0 18px 42px rgba(0,0,0,.28);
}

.compliance-grid p{
    color:rgba(240,253,255,.88) !important;
    line-height:1.82;
    font-size:1.08rem;
}

.compliance-card-stack{
    display:grid !important;
    gap:18px !important;
}

.stack-card{
    position:relative;
    padding:28px 28px 28px 96px !important;
    border-radius:28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
        radial-gradient(circle at 10% 20%, rgba(29,185,194,.16), transparent 12rem) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    overflow:hidden;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.stack-card::before{
    content:"";
    position:absolute;
    left:24px;
    top:50%;
    width:52px;
    height:52px;
    transform:translateY(-50%);
    border-radius:18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 40%),
        linear-gradient(145deg, #31459A, #0A47A1 56%, #1DB9C2);
    box-shadow:
        0 14px 32px rgba(0,0,0,.22),
        0 0 0 8px rgba(29,185,194,.065);
}

.stack-card::after{
    content:"✓";
    position:absolute;
    left:24px;
    top:50%;
    width:52px;
    height:52px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    font-size:1.35rem;
}

.stack-card:hover{
    transform:translateY(-7px);
    border-color:rgba(110,246,255,.36) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.stack-card strong{
    display:block;
    color:#ffffff;
    font-size:1.25rem;
    line-height:1.15;
    margin-bottom:8px;
    font-weight:900;
}

.stack-card span{
    color:rgba(240,253,255,.82);
    line-height:1.65;
}

/* Legacy doc-card support in case old compliance cards appear */
.doc-grid{
    position:relative;
    z-index:3;
}

.doc-card{
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.15) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.doc-card strong{
    color:#fff !important;
}

.doc-card small{
    color:rgba(240,253,255,.78) !important;
}

.doc-icon{
    background:linear-gradient(145deg,#31459A,#1DB9C2) !important;
}

/* STEP 28: Procurement Support Process premium polish */
.procurement-pro-section{
    position:relative;
    overflow:hidden;
    padding:7.5rem 0;
    background:
        radial-gradient(circle at 10% 14%, rgba(29,185,194,.12), transparent 26rem),
        radial-gradient(circle at 88% 22%, rgba(49,69,154,.10), transparent 26rem),
        linear-gradient(180deg, #F2FAFF 0%, #FFFFFF 46%, #F4FAFF 100%);
    border-top:0 !important;
    box-shadow:none !important;
}

.procurement-pro-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    height:190px;
    background:
        linear-gradient(
            180deg,
            rgba(6,16,31,.95) 0%,
            rgba(16,46,114,.40) 32%,
            rgba(242,250,255,.88) 78%,
            rgba(242,250,255,0) 100%
        );
    pointer-events:none;
    z-index:1;
}

.procurement-pro-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:180px;
    background:
        radial-gradient(circle at 50% 100%, rgba(29,185,194,.12), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(241,250,255,.92));
    pointer-events:none;
    z-index:1;
}

.procurement-pro-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:56px 56px;
    opacity:.55;
    pointer-events:none;
}

.procurement-pro-section .container{
    position:relative;
    z-index:3;
}

.procurement-pro-head{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(340px, .68fr);
    gap:42px;
    align-items:end;
    margin-bottom:42px;
}

.procurement-pro-head .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900;
}

.procurement-pro-head h2{
    margin:12px 0 0;
    max-width:860px;
    color:#07172A;
    font-size:clamp(2.5rem,4.7vw,4.9rem);
    line-height:.96;
    letter-spacing:-.06em;
}

.procurement-pro-head p{
    margin:0;
    color:#5C708C;
    line-height:1.82;
    font-size:1.06rem;
    padding:22px 24px;
    border-radius:24px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 18px 48px rgba(15,23,42,.07);
}

.procurement-pro-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:18px;
}

.procurement-pro-timeline::before{
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    top:42px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(49,69,154,.14), rgba(29,185,194,.45), rgba(49,69,154,.14));
    z-index:0;
}

.procurement-pro-step{
    position:relative;
    z-index:2;
    min-height:250px;
    display:flex;
    flex-direction:column;
    text-align:left;
    border:1px solid rgba(49,69,154,.12);
    border-radius:28px;
    padding:24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(29,185,194,.10), transparent 13rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.92));
    box-shadow:
        0 22px 60px rgba(15,23,42,.085),
        inset 0 1px 0 rgba(255,255,255,.95);
    cursor:pointer;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.procurement-pro-step::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:0;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#75F5FF);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}

.procurement-pro-step:hover{
    transform:translateY(-9px);
    border-color:rgba(29,185,194,.36);
    box-shadow:
        0 34px 90px rgba(15,23,42,.16),
        0 0 0 1px rgba(29,185,194,.08),
        inset 0 1px 0 rgba(255,255,255,1);
}

.procurement-pro-step:hover::after{
    transform:scaleX(1);
}

.procurement-step-number{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:20px;
    margin-bottom:28px;
    color:#fff;
    font-size:1.15rem;
    font-weight:900;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), transparent 40%),
        linear-gradient(145deg, #31459A, #0A47A1 56%, #1DB9C2);
    box-shadow:
        0 18px 34px rgba(10,71,161,.22),
        0 0 0 8px rgba(29,185,194,.07);
}

.procurement-step-copy{
    flex:1;
}

.procurement-step-copy strong{
    display:block;
    color:#102E72;
    font-size:1.12rem;
    line-height:1.16;
    font-weight:900;
    letter-spacing:-.025em;
    margin-bottom:10px;
}

.procurement-step-copy small{
    color:#5C708C;
    line-height:1.65;
    font-size:.94rem;
}

.procurement-step-arrow{
    margin-top:18px;
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#0A47A1;
    background:#F7FBFF;
    border:1px solid rgba(49,69,154,.11);
    font-size:26px;
    font-weight:900;
    transition:.35s ease;
}

.procurement-pro-step:hover .procurement-step-arrow{
    color:#fff;
    background:linear-gradient(135deg,#31459A,#1DB9C2);
    transform:translateX(4px);
}

html[data-theme="dark"] .procurement-pro-section{
    background:
        radial-gradient(circle at 10% 14%, rgba(29,185,194,.09), transparent 26rem),
        linear-gradient(180deg,#081420,#0D1D34);
}

html[data-theme="dark"] .procurement-pro-head h2{
    color:#F6FBFF;
}

html[data-theme="dark"] .procurement-pro-head p{
    color:#B8C8DA;
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.09);
}

html[data-theme="dark"] .procurement-pro-step{
    background:
        radial-gradient(circle at 50% 0%, rgba(29,185,194,.08), transparent 13rem),
        linear-gradient(145deg, rgba(12,25,48,.96), rgba(9,20,38,.92));
    border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .procurement-step-copy strong{
    color:#F6FBFF;
}

html[data-theme="dark"] .procurement-step-copy small{
    color:#B8C8DA;
}

/* STEP 29: Operations and final CTA premium polish */
.operations-pro-section{
    position:relative;
    overflow:hidden;
    padding:7.8rem 0 8rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(29,185,194,.13), transparent 26rem),
        radial-gradient(circle at 88% 18%, rgba(49,69,154,.12), transparent 26rem),
        linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 44%, #EEF7FF 100%);
    border-top:0 !important;
    box-shadow:none !important;
}

.operations-pro-section::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    height:180px;
    background:
        linear-gradient(
            180deg,
            rgba(244,250,255,.96) 0%,
            rgba(255,255,255,.55) 54%,
            rgba(255,255,255,0) 100%
        );
    pointer-events:none;
    z-index:1;
}

.operations-pro-section::after{
    content:"V";
    position:absolute;
    right:4%;
    top:6rem;
    font-size:20rem;
    line-height:1;
    font-weight:900;
    color:rgba(49,69,154,.035);
    pointer-events:none;
}

.operations-pro-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.48;
    pointer-events:none;
}

.operations-pro-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(420px, 1fr);
    gap:4rem;
    align-items:center;
}

.operations-pro-copy .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900;
}

.operations-pro-copy h2{
    margin:12px 0 1.25rem;
    color:#07172A;
    font-size:clamp(2.5rem,4.6vw,4.9rem);
    line-height:.96;
    letter-spacing:-.06em;
}

.operations-pro-copy p{
    color:#5C708C;
    line-height:1.82;
    font-size:1.08rem;
    max-width:720px;
}

.operations-pro-points{
    display:grid;
    gap:14px;
    margin:2rem 0;
}

.operations-pro-points button{
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    gap:16px;
    width:100%;
    text-align:left;
    padding:16px 18px;
    border-radius:20px;
    border:1px solid rgba(49,69,154,.11);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,250,255,.88));
    color:#102E72;
    font-weight:900;
    box-shadow:0 16px 38px rgba(15,23,42,.07);
    cursor:pointer;
    transition:.3s ease;
}

.operations-pro-points button:hover{
    transform:translateX(6px);
    border-color:rgba(29,185,194,.34);
    box-shadow:0 22px 55px rgba(15,23,42,.12);
}

.operations-pro-points span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(145deg,#31459A,#1DB9C2);
    box-shadow:0 14px 28px rgba(10,71,161,.20);
}

.operations-pro-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.operations-pro-visual{
    position:relative;
    min-height:560px;
    border-radius:38px;
    overflow:hidden;
    border:1px solid rgba(49,69,154,.13);
    box-shadow:
        0 34px 100px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.operations-pro-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.02);
}

.operations-pro-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.04) 0%, rgba(5,12,28,.18) 40%, rgba(5,12,28,.72) 100%),
        radial-gradient(circle at 72% 20%, rgba(29,185,194,.20), transparent 24rem);
}

.operations-floating-card{
    position:absolute;
    z-index:3;
    border-radius:26px;
    padding:24px;
    color:#fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.065));
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.operations-floating-main{
    left:28px;
    right:28px;
    bottom:28px;
}

.operations-floating-card span{
    display:inline-block;
    color:#8FF7FF;
    font-size:.82rem;
    letter-spacing:.12em;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:8px;
}

.operations-floating-card strong{
    display:block;
    font-size:1.5rem;
    line-height:1.1;
    margin-bottom:8px;
}

.operations-floating-card small{
    color:rgba(255,255,255,.82);
    line-height:1.55;
}

.operations-floating-mini{
    right:28px;
    top:28px;
    max-width:210px;
}

.operations-floating-mini strong{
    font-size:1.1rem;
}

html[data-theme="dark"] .operations-pro-section{
    background:
        radial-gradient(circle at 15% 20%, rgba(29,185,194,.10), transparent 26rem),
        linear-gradient(180deg,#081420,#0D1D34);
}

html[data-theme="dark"] .operations-pro-copy h2{
    color:#F6FBFF;
}

html[data-theme="dark"] .operations-pro-copy p{
    color:#B8C8DA;
}

html[data-theme="dark"] .operations-pro-points button{
    background:
        linear-gradient(145deg, rgba(12,25,48,.96), rgba(9,20,38,.92));
    border-color:rgba(255,255,255,.08);
    color:#F6FBFF;
}

/* STEP 30: Footer, popups, bottom action bar and final finish */
.site-footer,
footer{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 10%, rgba(29,185,194,.16), transparent 26rem),
        radial-gradient(circle at 84% 18%, rgba(49,69,154,.24), transparent 28rem),
        linear-gradient(135deg, #06101F 0%, #081B3C 46%, #102E72 100%) !important;
    color:#F6FBFF !important;
    border-top:0 !important;
    box-shadow:none !important;
}

.site-footer::before,
footer::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:170px;
    background:
        linear-gradient(
            180deg,
            rgba(238,247,255,.96) 0%,
            rgba(95,166,205,.24) 46%,
            rgba(6,16,31,0) 100%
        );
    pointer-events:none;
}

.site-footer::after,
footer::after{
    content:"VSL";
    position:absolute;
    right:4%;
    bottom:-2rem;
    font-size:13rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.035);
    pointer-events:none;
}

.footer-grid,
.footer-inner,
.footer-content{
    position:relative;
    z-index:2;
}

.site-footer a,
footer a{
    color:rgba(246,251,255,.86) !important;
    transition:.25s ease;
}

.site-footer a:hover,
footer a:hover{
    color:#7DF3FF !important;
}

.site-footer h3,
.site-footer h4,
footer h3,
footer h4{
    color:#ffffff !important;
    font-weight:900 !important;
    letter-spacing:-.02em;
}

.site-footer p,
footer p{
    color:rgba(235,249,255,.76) !important;
    line-height:1.75;
}

.footer-brand img,
.footer-logo img{
    filter:brightness(0) invert(1);
    max-height:58px;
}

.footer-bottom,
.footer-copy,
.footer-meta{
    border-top:1px solid rgba(255,255,255,.10) !important;
    color:rgba(235,249,255,.68) !important;
}

/* Bottom action bar */
.bottom-action-bar,
.mobile-action-bar{
    background:
        linear-gradient(145deg, rgba(6,16,31,.84), rgba(16,46,114,.78)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
        0 20px 70px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.bottom-action-bar a,
.bottom-action-bar button,
.mobile-action-bar a,
.mobile-action-bar button{
    color:rgba(246,251,255,.86) !important;
}

.bottom-action-bar a:hover,
.bottom-action-bar button:hover,
.mobile-action-bar a:hover,
.mobile-action-bar button:hover{
    color:#7DF3FF !important;
}

/* Popup backdrop */
.popup-backdrop,
.modal-backdrop{
    background:
        radial-gradient(circle at 50% 20%, rgba(29,185,194,.18), transparent 26rem),
        rgba(3,9,24,.72) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* Popup shells */
.popup,
.modal,
.search-popup,
.request-popup,
.detail-popup{
    border-radius:34px !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(29,185,194,.10), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,255,.94)) !important;
    border:1px solid rgba(255,255,255,.65) !important;
    box-shadow:
        0 34px 110px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    overflow:hidden;
}

.popup::before,
.modal::before,
.search-popup::before,
.request-popup::before,
.detail-popup::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#75F5FF);
}

.popup h2,
.popup h3,
.modal h2,
.modal h3,
.search-popup h2,
.search-popup h3,
.request-popup h2,
.request-popup h3,
.detail-popup h2,
.detail-popup h3{
    color:#07172A !important;
    font-weight:900 !important;
    letter-spacing:-.045em;
}

.popup p,
.modal p,
.search-popup p,
.request-popup p,
.detail-popup p{
    color:#5C708C !important;
    line-height:1.75;
}

/* Form polish */
.request-popup input,
.request-popup textarea,
.request-popup select,
.popup input,
.popup textarea,
.popup select,
.modal input,
.modal textarea,
.modal select{
    border-radius:18px !important;
    border:1px solid rgba(49,69,154,.13) !important;
    background:rgba(255,255,255,.88) !important;
    color:#07172A !important;
    box-shadow:
        0 12px 34px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.80) !important;
    transition:.25s ease;
}

.request-popup input:focus,
.request-popup textarea:focus,
.request-popup select:focus,
.popup input:focus,
.popup textarea:focus,
.popup select:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus{
    outline:none !important;
    border-color:rgba(29,185,194,.60) !important;
    box-shadow:
        0 0 0 4px rgba(29,185,194,.12),
        0 16px 40px rgba(15,23,42,.08) !important;
}

/* Search result polish */
.search-tags button,
.search-chip,
.tag-chip{
    border-radius:999px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(242,250,255,.82)) !important;
    border:1px solid rgba(49,69,154,.12) !important;
    color:#102E72 !important;
    font-weight:800 !important;
    transition:.25s ease;
}

.search-tags button:hover,
.search-chip:hover,
.tag-chip:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg,#31459A,#1DB9C2) !important;
    transform:translateY(-2px);
}

.search-result,
.result-card{
    border-radius:22px !important;
    background:rgba(255,255,255,.84) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    box-shadow:0 16px 40px rgba(15,23,42,.06) !important;
}

/* Toast */
.toast{
    border-radius:18px !important;
    background:
        linear-gradient(145deg, rgba(6,16,31,.92), rgba(16,46,114,.88)) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 22px 70px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* Global final divider cleanup */
.section,
section{
    border-top:0 !important;
}

.section + .section{
    margin-top:0 !important;
}

hr,
.section-divider{
    border:0 !important;
    display:none !important;
}

html[data-theme="dark"] .popup,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .search-popup,
html[data-theme="dark"] .request-popup,
html[data-theme="dark"] .detail-popup{
    background:
        radial-gradient(circle at 20% 0%, rgba(29,185,194,.10), transparent 18rem),
        linear-gradient(145deg, rgba(12,25,48,.98), rgba(9,20,38,.94)) !important;
    border-color:rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .popup h2,
html[data-theme="dark"] .popup h3,
html[data-theme="dark"] .modal h2,
html[data-theme="dark"] .modal h3,
html[data-theme="dark"] .search-popup h2,
html[data-theme="dark"] .search-popup h3,
html[data-theme="dark"] .request-popup h2,
html[data-theme="dark"] .request-popup h3,
html[data-theme="dark"] .detail-popup h2,
html[data-theme="dark"] .detail-popup h3{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .popup p,
html[data-theme="dark"] .modal p,
html[data-theme="dark"] .search-popup p,
html[data-theme="dark"] .request-popup p,
html[data-theme="dark"] .detail-popup p{
    color:#B8C8DA !important;
}

/* STEP 32: About VSL premium fix */
.about-vsl-section{
    position:relative;
    overflow:hidden;
    padding:7.5rem 0 6.8rem;
    background:
        radial-gradient(circle at 12% 16%, rgba(29,185,194,.13), transparent 27rem),
        radial-gradient(circle at 88% 12%, rgba(49,69,154,.10), transparent 26rem),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F4FAFF 42%,
            #E6F5FB 76%,
            #D5EEF7 100%
        ) !important;
    border-top:0 !important;
    box-shadow:none !important;
}

.about-vsl-section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:190px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.68) 48%,
            rgba(255,255,255,0) 100%
        );
    pointer-events:none;
    z-index:1;
}

.about-vsl-section::after{
    content:"VSL";
    position:absolute;
    right:4%;
    top:4rem;
    font-size:13rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(49,69,154,.035);
    pointer-events:none;
}

.about-vsl-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.46;
    pointer-events:none;
}

.about-vsl-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(420px,1fr);
    gap:4rem;
    align-items:center;
}

.about-vsl-copy .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900;
}

.about-vsl-copy h2{
    margin:12px 0 1.2rem;
    max-width:820px;
    color:#07172A;
    font-size:clamp(2.6rem,4.7vw,5rem);
    line-height:.94;
    letter-spacing:-.065em;
}

.about-vsl-copy p{
    color:#5C708C;
    line-height:1.82;
    font-size:1.06rem;
    max-width:720px;
}

.about-vsl-lead{
    color:#31459A !important;
    font-size:1.2rem !important;
    font-weight:700;
}

.about-vsl-promise{
    display:inline-flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin:1.4rem 0 1.8rem;
    padding:14px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 18px 46px rgba(15,23,42,.07);
}

.about-vsl-promise strong{
    color:#102E72;
    font-weight:900;
}

.about-vsl-promise span{
    color:#1AAEB8;
    font-weight:900;
}

.about-vsl-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.about-vsl-visual{
    position:relative;
    min-height:560px;
    border-radius:40px;
    overflow:hidden;
    border:1px solid rgba(49,69,154,.13);
    box-shadow:
        0 34px 100px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.about-vsl-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.02);
}

.about-vsl-visual-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.02) 0%, rgba(5,12,28,.18) 45%, rgba(5,12,28,.78) 100%),
        radial-gradient(circle at 76% 18%, rgba(29,185,194,.18), transparent 25rem);
}

.about-vsl-floating{
    position:absolute;
    z-index:3;
    border-radius:26px;
    padding:24px;
    color:#fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.065));
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.26);
}

.about-vsl-floating-main{
    left:28px;
    right:28px;
    bottom:28px;
}

.about-vsl-floating span{
    display:inline-block;
    color:#8FF7FF;
    font-size:.82rem;
    letter-spacing:.12em;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:8px;
}

.about-vsl-floating strong{
    display:block;
    font-size:1.45rem;
    line-height:1.1;
    margin-bottom:8px;
}

.about-vsl-floating small{
    color:rgba(255,255,255,.82);
    line-height:1.55;
}

.about-vsl-floating-mini{
    right:28px;
    top:28px;
    max-width:210px;
}

.about-vsl-floating-mini strong{
    font-size:1.08rem;
}

.about-vsl-cards{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    margin-top:3.2rem;
}

.about-vsl-card{
    position:relative;
    text-align:left;
    min-height:190px;
    padding:24px;
    border-radius:28px;
    border:1px solid rgba(49,69,154,.11);
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.10), transparent 13rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.92));
    box-shadow:
        0 22px 60px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    cursor:pointer;
    transition:.35s ease;
    overflow:hidden;
}

.about-vsl-card::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:0;
    height:4px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#75F5FF);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}

.about-vsl-card:hover{
    transform:translateY(-9px);
    border-color:rgba(29,185,194,.34);
    box-shadow:
        0 34px 88px rgba(15,23,42,.14),
        0 0 0 1px rgba(29,185,194,.08);
}

.about-vsl-card:hover::after{
    transform:scaleX(1);
}

.about-vsl-card span{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), transparent 40%),
        linear-gradient(145deg,#31459A,#0A47A1 55%,#1DB9C2);
    font-weight:900;
    margin-bottom:22px;
    box-shadow:0 16px 34px rgba(10,71,161,.20);
}

.about-vsl-card strong{
    display:block;
    color:#102E72;
    font-size:1.16rem;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.025em;
    margin-bottom:9px;
}

.about-vsl-card small{
    color:#5C708C;
    line-height:1.6;
    font-size:.95rem;
}

html[data-theme="dark"] .about-vsl-section{
    background:
        radial-gradient(circle at 12% 16%, rgba(29,185,194,.10), transparent 27rem),
        linear-gradient(180deg,#081420,#0D1D34) !important;
}

html[data-theme="dark"] .about-vsl-copy h2{
    color:#F6FBFF;
}

html[data-theme="dark"] .about-vsl-copy p{
    color:#B8C8DA;
}

html[data-theme="dark"] .about-vsl-card{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.08), transparent 13rem),
        linear-gradient(145deg, rgba(12,25,48,.96), rgba(9,20,38,.92));
    border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .about-vsl-card strong{
    color:#F6FBFF;
}

html[data-theme="dark"] .about-vsl-card small{
    color:#B8C8DA;
}

/* STEP 33: Final Hero and Header polish */
.site-header{
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70)) !important;
    border-bottom:1px solid rgba(49,69,154,.08) !important;
    box-shadow:0 14px 44px rgba(15,23,42,.055) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-header.is-scrolled,
body.scrolled .site-header{
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
    box-shadow:0 18px 52px rgba(15,23,42,.09) !important;
}

.header-inner,
.nav-shell{
    min-height:74px !important;
}

.brand,
.logo-wrap,
.site-brand{
    gap:12px !important;
}

.brand img,
.logo-wrap img,
.site-logo{
    max-height:48px !important;
}

.main-nav a,
.desktop-nav a{
    font-weight:800 !important;
    color:#102E72 !important;
    letter-spacing:-.01em;
}

.main-nav a:hover,
.desktop-nav a:hover,
.main-nav a.active,
.desktop-nav a.active{
    color:#1AAEB8 !important;
}

.header-action,
.header-actions .btn,
.menu-toggle,
.search-toggle,
.theme-toggle{
    border-radius:999px !important;
    border-color:rgba(49,69,154,.10) !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}

.hero,
.hero-section,
#hero{
    position:relative;
    overflow:hidden;
    min-height:calc(100vh - 0px);
    padding-top:8rem !important;
    padding-bottom:6rem !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(29,185,194,.14), transparent 27rem),
        linear-gradient(135deg, #F8FCFF 0%, #EAF7FB 44%, #D9EEF7 100%) !important;
}

.hero::before,
.hero-section::before,
#hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.45;
    pointer-events:none;
    z-index:0;
}

.hero::after,
.hero-section::after,
#hero::after{
    content:"VSL";
    position:absolute;
    right:3%;
    top:8rem;
    font-size:15rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(49,69,154,.035);
    pointer-events:none;
    z-index:0;
}

.hero .container,
.hero-section .container,
#hero .container{
    position:relative;
    z-index:3;
}

.hero-grid,
.hero-layout{
    align-items:center !important;
    gap:4rem !important;
}

.hero-copy .eyebrow,
.hero-content .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900 !important;
}

.hero-copy h1,
.hero-content h1,
.hero-title{
    color:#07172A !important;
    font-size:clamp(3rem,6vw,6.8rem) !important;
    line-height:.9 !important;
    letter-spacing:-.075em !important;
    text-wrap:balance;
}

.hero-copy p,
.hero-content p,
.hero-lead{
    color:#526783 !important;
    font-size:1.18rem !important;
    line-height:1.82 !important;
    max-width:720px;
}

.hero-promise,
.promise-pill{
    display:inline-flex !important;
    align-items:center;
    gap:.45rem;
    border-radius:999px !important;
    padding:14px 18px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    box-shadow:0 18px 48px rgba(15,23,42,.07) !important;
    color:#102E72 !important;
    font-weight:900 !important;
}

.hero-visual,
.hero-slider,
.hero-media{
    position:relative;
    border-radius:42px !important;
    overflow:hidden;
    min-height:600px !important;
    border:1px solid rgba(49,69,154,.13) !important;
    box-shadow:
        0 38px 120px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.hero-slide,
.slide,
.hero-image{
    background-size:cover !important;
    background-position:center !important;
}

.hero-slide img,
.hero-media img,
.hero-visual img,
.hero-slider img{
    opacity:1 !important;
    filter:none !important;
    object-fit:cover !important;
}

.hero-visual::before,
.hero-slider::before,
.hero-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.00) 0%, rgba(5,12,28,.12) 42%, rgba(5,12,28,.64) 100%),
        radial-gradient(circle at 74% 18%, rgba(29,185,194,.18), transparent 24rem);
    z-index:2;
    pointer-events:none;
}

.hero-card,
.hero-stat,
.hero-floating-card{
    background:
        linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.065)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.26) !important;
}

.hero-card strong,
.hero-stat strong,
.hero-floating-card strong{
    color:#ffffff !important;
}

.hero-card small,
.hero-stat small,
.hero-floating-card small{
    color:rgba(255,255,255,.82) !important;
}

.slider-dots,
.hero-dots{
    gap:10px !important;
}

.slider-dots button,
.hero-dots button{
    width:11px !important;
    height:11px !important;
    border-radius:999px !important;
    background:rgba(49,69,154,.22) !important;
    border:0 !important;
    transition:.3s ease;
}

.slider-dots button.active,
.hero-dots button.active,
.slider-dots button[aria-current="true"],
.hero-dots button[aria-current="true"]{
    width:34px !important;
    background:linear-gradient(90deg,#31459A,#1DB9C2) !important;
}

html[data-theme="dark"] .site-header{
    background:
        linear-gradient(180deg, rgba(8,20,32,.84), rgba(8,20,32,.68)) !important;
    border-bottom-color:rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .desktop-nav a{
    color:#EAF8FF !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] #hero{
    background:
        radial-gradient(circle at 14% 18%, rgba(29,185,194,.10), transparent 27rem),
        linear-gradient(135deg, #081420 0%, #0D1D34 100%) !important;
}

html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-title{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .hero-lead{
    color:#B8C8DA !important;
}

/* STEP 33: Final Hero and Header polish */
.site-header{
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70)) !important;
    border-bottom:1px solid rgba(49,69,154,.08) !important;
    box-shadow:0 14px 44px rgba(15,23,42,.055) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-header.is-scrolled,
body.scrolled .site-header{
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
    box-shadow:0 18px 52px rgba(15,23,42,.09) !important;
}

.header-inner,
.nav-shell{
    min-height:74px !important;
}

.brand,
.logo-wrap,
.site-brand{
    gap:12px !important;
}

.brand img,
.logo-wrap img,
.site-logo{
    max-height:48px !important;
}

.main-nav a,
.desktop-nav a{
    font-weight:800 !important;
    color:#102E72 !important;
    letter-spacing:-.01em;
}

.main-nav a:hover,
.desktop-nav a:hover,
.main-nav a.active,
.desktop-nav a.active{
    color:#1AAEB8 !important;
}

.header-action,
.header-actions .btn,
.menu-toggle,
.search-toggle,
.theme-toggle{
    border-radius:999px !important;
    border-color:rgba(49,69,154,.10) !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}

.hero,
.hero-section,
#hero{
    position:relative;
    overflow:hidden;
    min-height:calc(100vh - 0px);
    padding-top:8rem !important;
    padding-bottom:6rem !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(29,185,194,.14), transparent 27rem),
        linear-gradient(135deg, #F8FCFF 0%, #EAF7FB 44%, #D9EEF7 100%) !important;
}

.hero::before,
.hero-section::before,
#hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.45;
    pointer-events:none;
    z-index:0;
}

.hero::after,
.hero-section::after,
#hero::after{
    content:"VSL";
    position:absolute;
    right:3%;
    top:8rem;
    font-size:15rem;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(49,69,154,.035);
    pointer-events:none;
    z-index:0;
}

.hero .container,
.hero-section .container,
#hero .container{
    position:relative;
    z-index:3;
}

.hero-grid,
.hero-layout{
    align-items:center !important;
    gap:4rem !important;
}

.hero-copy .eyebrow,
.hero-content .eyebrow{
    color:#1AAEB8 !important;
    font-weight:900 !important;
}

.hero-copy h1,
.hero-content h1,
.hero-title{
    color:#07172A !important;
    font-size:clamp(3rem,6vw,6.8rem) !important;
    line-height:.9 !important;
    letter-spacing:-.075em !important;
    text-wrap:balance;
}

.hero-copy p,
.hero-content p,
.hero-lead{
    color:#526783 !important;
    font-size:1.18rem !important;
    line-height:1.82 !important;
    max-width:720px;
}

.hero-promise,
.promise-pill{
    display:inline-flex !important;
    align-items:center;
    gap:.45rem;
    border-radius:999px !important;
    padding:14px 18px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    box-shadow:0 18px 48px rgba(15,23,42,.07) !important;
    color:#102E72 !important;
    font-weight:900 !important;
}

.hero-visual,
.hero-slider,
.hero-media{
    position:relative;
    border-radius:42px !important;
    overflow:hidden;
    min-height:600px !important;
    border:1px solid rgba(49,69,154,.13) !important;
    box-shadow:
        0 38px 120px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.hero-slide,
.slide,
.hero-image{
    background-size:cover !important;
    background-position:center !important;
}

.hero-slide img,
.hero-media img,
.hero-visual img,
.hero-slider img{
    opacity:1 !important;
    filter:none !important;
    object-fit:cover !important;
}

.hero-visual::before,
.hero-slider::before,
.hero-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.00) 0%, rgba(5,12,28,.12) 42%, rgba(5,12,28,.64) 100%),
        radial-gradient(circle at 74% 18%, rgba(29,185,194,.18), transparent 24rem);
    z-index:2;
    pointer-events:none;
}

.hero-card,
.hero-stat,
.hero-floating-card{
    background:
        linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.065)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.26) !important;
}

.hero-card strong,
.hero-stat strong,
.hero-floating-card strong{
    color:#ffffff !important;
}

.hero-card small,
.hero-stat small,
.hero-floating-card small{
    color:rgba(255,255,255,.82) !important;
}

.slider-dots,
.hero-dots{
    gap:10px !important;
}

.slider-dots button,
.hero-dots button{
    width:11px !important;
    height:11px !important;
    border-radius:999px !important;
    background:rgba(49,69,154,.22) !important;
    border:0 !important;
    transition:.3s ease;
}

.slider-dots button.active,
.hero-dots button.active,
.slider-dots button[aria-current="true"],
.hero-dots button[aria-current="true"]{
    width:34px !important;
    background:linear-gradient(90deg,#31459A,#1DB9C2) !important;
}

html[data-theme="dark"] .site-header{
    background:
        linear-gradient(180deg, rgba(8,20,32,.84), rgba(8,20,32,.68)) !important;
    border-bottom-color:rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .desktop-nav a{
    color:#EAF8FF !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] #hero{
    background:
        radial-gradient(circle at 14% 18%, rgba(29,185,194,.10), transparent 27rem),
        linear-gradient(135deg, #081420 0%, #0D1D34 100%) !important;
}

html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-title{
    color:#F6FBFF !important;
}

html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .hero-lead{
    color:#B8C8DA !important;
}

/* STEP 35: Premium hybrid header inspired by uploaded references */
:root{
    --vsl-header-height: 86px;
    --vsl-header-radius: 22px;
}

/* Remove unnecessary white space between header and hero */
body{
    padding-top: 0 !important;
}

main,
.main,
.page-main{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-header + main,
.site-header + .main,
.site-header + #hero,
.site-header + .hero,
.site-header + .hero-section{
    margin-top: 0 !important;
}

/* Header shell */
.site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 14px 18px !important;
    background:
        linear-gradient(180deg, rgba(246,252,255,.92), rgba(246,252,255,.70)) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* The actual premium rounded navbar */
.header-inner,
.nav-shell,
.header-wrap{
    max-width: 1180px !important;
    min-height: var(--vsl-header-height) !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    border-radius: var(--vsl-header-radius) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,251,255,.92)) !important;
    border: 1px solid rgba(49,69,154,.10) !important;
    box-shadow:
        0 22px 70px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* Logo */
.brand,
.logo-wrap,
.site-brand{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 210px;
}

.brand img,
.logo-wrap img,
.site-logo{
    max-height: 54px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Navigation */
.main-nav,
.desktop-nav,
.nav-links{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.main-nav a,
.desktop-nav a,
.nav-links a{
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 44px;
    padding: 0 15px !important;
    border-radius: 999px !important;
    color: #102E72 !important;
    font-size: .94rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    letter-spacing: -.015em;
    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.main-nav a::after,
.desktop-nav a::after,
.nav-links a::after{
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #31459A, #1DB9C2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.main-nav a:hover,
.desktop-nav a:hover,
.nav-links a:hover,
.main-nav a.active,
.desktop-nav a.active,
.nav-links a.active{
    color: #0AAEB8 !important;
    background: rgba(29,185,194,.075) !important;
}

.main-nav a:hover::after,
.desktop-nav a:hover::after,
.nav-links a:hover::after,
.main-nav a.active::after,
.desktop-nav a.active::after,
.nav-links a.active::after{
    transform: scaleX(1);
}

.nav-chevron{
    font-size: .85em;
    color: currentColor;
    opacity: .72;
    transform: translateY(-1px);
}

/* Header actions */
.header-actions,
.nav-actions,
.header-cta{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.header-actions .btn,
.header-action,
.search-toggle,
.theme-toggle,
.menu-toggle,
[data-open-popup="search"],
[data-open-search],
[data-theme-toggle]{
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(49,69,154,.10) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.88)) !important;
    color: #102E72 !important;
    box-shadow:
        0 14px 34px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    font-weight: 850 !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;
}

.header-actions .btn:hover,
.header-action:hover,
.search-toggle:hover,
.theme-toggle:hover,
.menu-toggle:hover,
[data-open-popup="search"]:hover,
[data-open-search]:hover,
[data-theme-toggle]:hover{
    transform: translateY(-2px);
    box-shadow:
        0 20px 48px rgba(15,23,42,.11),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

.header-actions .btn-primary,
.header-cta .btn-primary,
button[data-open-popup="request"],
a[data-open-popup="request"]{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 36%),
        linear-gradient(135deg, #31459A 0%, #1554C8 48%, #1DB9C2 100%) !important;
    color: #ffffff !important;
    border-color: rgba(29,185,194,.22) !important;
    box-shadow:
        0 18px 44px rgba(10,71,161,.22),
        0 0 0 6px rgba(29,185,194,.055) !important;
}

.support-icon{
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    color: #ffffff;
    font-size: .78rem;
}

/* Hamburger like modern navbar references */
.menu-toggle{
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    position: relative !important;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 999px;
    background: #102E72;
    transition: .25s ease;
}

.menu-toggle::before{
    top: 18px;
}

.menu-toggle span{
    top: 26px;
}

.menu-toggle::after{
    top: 34px;
}

/* Search pill cleaner */
.search-toggle,
[data-open-popup="search"],
[data-open-search]{
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Hero integrated directly under header */
#hero,
.hero,
.hero-section{
    margin-top: -114px !important;
    padding-top: 150px !important;
    border-top: 0 !important;
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 72% 14%, rgba(29,185,194,.22), transparent 28rem),
        radial-gradient(circle at 20% 30%, rgba(49,69,154,.10), transparent 28rem),
        linear-gradient(135deg, #F6FCFF 0%, #E7F6FB 44%, #D6EEF7 100%) !important;
}

/* Hero slider glass edge */
.hero-visual,
.hero-slider,
.hero-media{
    border-radius: 44px !important;
    box-shadow:
        0 42px 130px rgba(15,23,42,.23),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Remove any earlier blank spacer or old top gap */
.hero-spacer,
.top-spacer,
.page-spacer,
.header-spacer{
    display: none !important;
    height: 0 !important;
}

/* Dark mode */
html[data-theme="dark"] .site-header{
    background:
        linear-gradient(180deg, rgba(2,8,20,.78), rgba(2,8,20,.42)) !important;
}

html[data-theme="dark"] .header-inner,
html[data-theme="dark"] .nav-shell,
html[data-theme="dark"] .header-wrap{
    background:
        linear-gradient(145deg, rgba(12,25,48,.88), rgba(8,20,38,.76)) !important;
    border-color: rgba(255,255,255,.09) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .desktop-nav a,
html[data-theme="dark"] .nav-links a{
    color: #EAF8FF !important;
}

html[data-theme="dark"] .header-actions .btn,
html[data-theme="dark"] .header-action,
html[data-theme="dark"] .search-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .menu-toggle{
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important;
    border-color: rgba(255,255,255,.09) !important;
    color: #F6FBFF !important;
}

html[data-theme="dark"] .menu-toggle::before,
html[data-theme="dark"] .menu-toggle::after,
html[data-theme="dark"] .menu-toggle span{
    background: #F6FBFF;
}

/* STEP 36: Final premium header safety cleanup */
.site-header{
    width:100% !important;
}

.header-inner,
.nav-shell,
.header-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

.header-actions,
.nav-actions,
.header-cta{
    flex-shrink:0 !important;
}

.header-actions .btn-primary,
.header-cta .btn-primary,
button[data-open-popup="request"],
a[data-open-popup="request"]{
    white-space:nowrap !important;
}

#hero,
.hero,
.hero-section{
    scroll-margin-top:110px;
}

@media (max-width:900px){
    .header-actions .btn-primary,
    .header-cta .btn-primary,
    button[data-open-popup="request"],
    a[data-open-popup="request"]{
        white-space:nowrap !important;
    }
}

@media (max-width:520px){
    .theme-toggle{
        display:none !important;
    }

    .header-actions .btn-primary,
    .header-cta .btn-primary,
    button[data-open-popup="request"],
    a[data-open-popup="request"]{
        max-width:118px !important;
    }
}

/* STEP 37: Clean safari-inspired VSL header, full-width and transparent on scroll */
:root{
    --vsl-blue:#31459A;
    --vsl-blue-dark:#102E72;
    --vsl-teal:#1DB9C2;
    --vsl-soft:#F6FBFF;
    --vsl-header-total:138px;
}

body{
    padding-top:0 !important;
}

main{
    margin-top:0 !important;
    padding-top:0 !important;
}

.vsl-header{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:2000;
    width:100%;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(49,69,154,.08);
    transition:
        background .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
}

.vsl-header.is-scrolled{
    background:rgba(255,255,255,.68);
    box-shadow:0 18px 60px rgba(15,23,42,.10);
    border-bottom-color:rgba(49,69,154,.06);
}

.vsl-topbar{
    background:
        linear-gradient(90deg, #31459A 0%, #1DB9C2 44%, #31459A 100%);
    color:#fff;
    font-size:.78rem;
    font-weight:800;
}

.vsl-topbar-inner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.vsl-topbar-left,
.vsl-topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.vsl-topbar-right{
    flex-wrap:wrap;
    justify-content:flex-end;
}

.vsl-topbar a,
.vsl-topbar span{
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.vsl-topbar-right a,
.vsl-topbar-right span{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.10);
}

.vsl-top-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 5px rgba(255,255,255,.12);
}

.vsl-mainbar{
    background:rgba(255,255,255,.78);
    transition:.28s ease;
}

.vsl-header.is-scrolled .vsl-mainbar{
    background:rgba(255,255,255,.48);
}

.vsl-mainbar-inner{
    min-height:86px;
    display:grid;
    grid-template-columns:220px minmax(0,1fr) auto;
    align-items:center;
    gap:22px;
}

.vsl-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.vsl-brand img{
    display:block;
    width:auto;
    max-width:190px;
    max-height:64px;
    object-fit:contain;
}

.vsl-nav{
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:9px;
    border-radius:999px;
    background:rgba(255,255,255,.70);
    box-shadow:
        0 18px 48px rgba(15,23,42,.065),
        inset 0 1px 0 rgba(255,255,255,.95);
    border:1px solid rgba(49,69,154,.08);
}

.vsl-nav a{
    position:relative;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 17px;
    border-radius:999px;
    color:#3F4A60;
    text-decoration:none;
    font-size:.95rem;
    font-weight:850;
    letter-spacing:-.015em;
    transition:.25s ease;
}

.vsl-nav a:hover,
.vsl-nav a.active{
    color:#31459A;
    background:rgba(29,185,194,.10);
    box-shadow:inset 0 0 0 1px rgba(29,185,194,.12);
}

.vsl-nav a.active::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:4px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--vsl-blue),var(--vsl-teal));
}

.vsl-nav span{
    opacity:.68;
    font-size:.78rem;
}

.vsl-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
}

.vsl-search-btn,
.vsl-round-btn,
.vsl-support-btn,
.vsl-menu-btn{
    border:0;
    cursor:pointer;
    font-family:inherit;
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        background .24s ease,
        color .24s ease;
}

.vsl-search-btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:0 18px;
    border-radius:999px;
    color:#102E72;
    font-weight:850;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(49,69,154,.08);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.vsl-search-icon{
    font-size:1.15rem;
    line-height:1;
}

.vsl-round-btn,
.vsl-menu-btn{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#102E72;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(49,69,154,.08);
    box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.vsl-support-btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 20px;
    border-radius:999px;
    color:#fff;
    font-weight:900;
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.28), transparent 34%),
        linear-gradient(135deg, var(--vsl-blue) 0%, #1554C8 48%, var(--vsl-teal) 100%);
    box-shadow:
        0 18px 42px rgba(10,71,161,.24),
        0 0 0 6px rgba(29,185,194,.055);
}

.vsl-support-btn span{
    width:19px;
    height:19px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.17);
}

.vsl-search-btn:hover,
.vsl-round-btn:hover,
.vsl-support-btn:hover,
.vsl-menu-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 50px rgba(15,23,42,.12);
}

.vsl-menu-btn{
    position:relative;
}

.vsl-menu-btn::before,
.vsl-menu-btn::after,
.vsl-menu-btn span{
    content:"";
    position:absolute;
    left:15px;
    right:15px;
    height:2px;
    border-radius:999px;
    background:#102E72;
    transition:.25s ease;
}

.vsl-menu-btn::before{ top:16px; }
.vsl-menu-btn span{ top:23px; }
.vsl-menu-btn::after{ top:30px; }

.vsl-menu-btn.is-open::before{
    top:23px;
    transform:rotate(45deg);
}

.vsl-menu-btn.is-open span{
    opacity:0;
}

.vsl-menu-btn.is-open::after{
    top:23px;
    transform:rotate(-45deg);
}

.vsl-mobile-panel{
    display:none;
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    padding:14px;
    border-radius:24px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 28px 80px rgba(15,23,42,.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.vsl-mobile-panel.is-open{
    display:grid;
    gap:8px;
}

.vsl-mobile-panel a,
.vsl-mobile-panel button{
    min-height:46px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border-radius:16px;
    border:0;
    background:transparent;
    color:#102E72;
    text-decoration:none;
    font-weight:850;
    font-family:inherit;
}

.vsl-mobile-panel a:hover,
.vsl-mobile-panel button:hover{
    background:rgba(29,185,194,.10);
    color:#31459A;
}

.vsl-mobile-panel button{
    justify-content:center;
    background:linear-gradient(135deg,var(--vsl-blue),var(--vsl-teal));
    color:#fff;
}

/* Kill previous header styles that were causing floating pill spacing */
.site-header{
    display:none !important;
}

/* Remove unnecessary blank space before hero */
#hero,
.hero,
.hero-section{
    margin-top:0 !important;
    padding-top:2.6rem !important;
    border-top:0 !important;
}

.vsl-header + main #hero,
.vsl-header + main .hero,
.vsl-header + main .hero-section{
    margin-top:0 !important;
}

.hero-spacer,
.top-spacer,
.page-spacer,
.header-spacer{
    display:none !important;
    height:0 !important;
}

/* make the hero attach neatly under the header */
#hero{
    border-radius:0 !important;
}

/* Dark mode */
html[data-theme="dark"] .vsl-header{
    background:rgba(8,20,32,.72);
    border-bottom-color:rgba(255,255,255,.07);
}

html[data-theme="dark"] .vsl-mainbar{
    background:rgba(8,20,32,.58);
}

html[data-theme="dark"] .vsl-nav,
html[data-theme="dark"] .vsl-search-btn,
html[data-theme="dark"] .vsl-round-btn,
html[data-theme="dark"] .vsl-menu-btn,
html[data-theme="dark"] .vsl-mobile-panel{
    background:rgba(12,25,48,.82);
    border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .vsl-nav a,
html[data-theme="dark"] .vsl-search-btn,
html[data-theme="dark"] .vsl-round-btn,
html[data-theme="dark"] .vsl-mobile-panel a{
    color:#F6FBFF;
}

html[data-theme="dark"] .vsl-menu-btn::before,
html[data-theme="dark"] .vsl-menu-btn::after,
html[data-theme="dark"] .vsl-menu-btn span{
    background:#F6FBFF;
}

/* STEP 38: Branded Varenz topbar and icon-only theme switch */
.vsl-topbar{
    background:
        radial-gradient(circle at 18% 50%, rgba(29,185,194,.42), transparent 22rem),
        linear-gradient(90deg, #102E72 0%, #31459A 46%, #1DB9C2 100%) !important;
    color:#ffffff !important;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 28px rgba(16,46,114,.12);
}

.vsl-topbar-inner{
    min-height:39px !important;
}

.vsl-topbar-left{
    font-weight:900;
    letter-spacing:.01em;
}

.vsl-top-dot{
    background:#8FF7FF !important;
    box-shadow:
        0 0 0 5px rgba(143,247,255,.12),
        0 0 18px rgba(143,247,255,.72) !important;
}

.vsl-topbar-right a,
.vsl-topbar-right span{
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    color:#ffffff !important;
}

.vsl-topbar-right a:hover{
    background:rgba(255,255,255,.20) !important;
    transform:translateY(-1px);
}

/* Main header balance */
.vsl-mainbar{
    background:rgba(255,255,255,.84) !important;
}

.vsl-header.is-scrolled .vsl-mainbar{
    background:rgba(255,255,255,.58) !important;
}

/* Theme icon button */
.vsl-theme-btn,
.vsl-round-btn,
.theme-toggle,
[data-theme-toggle]{
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:1px solid rgba(49,69,154,.10) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.88)) !important;
    color:#102E72 !important;
    box-shadow:
        0 14px 34px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    font-size:0 !important;
    overflow:hidden !important;
    cursor:pointer;
}

.vsl-theme-btn:hover,
.vsl-round-btn:hover,
.theme-toggle:hover,
[data-theme-toggle]:hover{
    transform:translateY(-2px);
    box-shadow:
        0 22px 50px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

.theme-icon{
    grid-area:1 / 1;
    display:grid;
    place-items:center;
    font-size:1.35rem !important;
    line-height:1;
    color:#102E72;
    transition:
        opacity .25s ease,
        transform .25s ease,
        color .25s ease;
}

.theme-icon-sun{
    opacity:0;
    transform:scale(.65) rotate(-35deg);
}

.theme-icon-moon{
    opacity:1;
    transform:scale(1) rotate(0);
}

html[data-theme="dark"] .theme-icon-moon{
    opacity:0;
    transform:scale(.65) rotate(35deg);
}

html[data-theme="dark"] .theme-icon-sun{
    opacity:1;
    transform:scale(1) rotate(0);
    color:#FFD166;
}

/* Keep request button clean beside icon button */
.vsl-support-btn{
    min-height:50px !important;
    height:50px !important;
}

/* Logo fallback area cleanup */
.vsl-brand{
    min-height:64px;
}

.vsl-brand img{
    background:transparent !important;
}

/* Hide old accidental empty white pill from previous header overrides */
.header-actions .theme-toggle,
.header-action.theme-toggle{
    font-size:0 !important;
}

/* Dark mode header */
html[data-theme="dark"] .vsl-topbar{
    background:
        radial-gradient(circle at 18% 50%, rgba(29,185,194,.30), transparent 22rem),
        linear-gradient(90deg, #06101F 0%, #102E72 55%, #0B7E99 100%) !important;
}

html[data-theme="dark"] .vsl-mainbar{
    background:rgba(8,20,32,.72) !important;
}

html[data-theme="dark"] .vsl-header.is-scrolled .vsl-mainbar{
    background:rgba(8,20,32,.52) !important;
}

html[data-theme="dark"] .vsl-theme-btn,
html[data-theme="dark"] .vsl-round-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] [data-theme-toggle]{
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
    border-color:rgba(255,255,255,.10) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] .theme-icon{
    color:#F6FBFF;
}

/* STEP 39 FIX: uploaded logo, contact icons and social icons */
.vsl-brand img{
    max-width:210px !important;
    max-height:68px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
    background:transparent !important;
}

.vsl-topbar{
    background:
        radial-gradient(circle at 16% 50%, rgba(29,185,194,.38), transparent 22rem),
        linear-gradient(90deg, #102E72 0%, #31459A 48%, #1DB9C2 100%) !important;
}

.vsl-topbar-inner{
    min-height:40px !important;
}

.vsl-topbar-right{
    gap:10px !important;
}

.vsl-topbar-right a,
.vsl-topbar-right span{
    gap:7px;
}

.vsl-contact-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    display:inline-grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
    font-size:.78rem !important;
    line-height:1 !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.14);
}

.vsl-socials{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:4px;
}

.vsl-socials a{
    width:30px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.15) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
    font-weight:900 !important;
    text-decoration:none !important;
    font-size:.92rem !important;
    transition:.25s ease;
}

.vsl-socials a:hover{
    background:rgba(255,255,255,.26) !important;
    transform:translateY(-2px);
}

.vsl-theme-btn{
    font-size:0 !important;
}

.vsl-theme-btn .theme-icon{
    font-size:1.35rem !important;
}

@media (max-width:980px){
    .vsl-socials,
    .vsl-topbar-right span:last-of-type{
        display:none !important;
    }

    .vsl-brand img{
        max-width:170px !important;
        max-height:58px !important;
    }
}

@media (max-width:680px){
    .vsl-brand img{
        max-width:145px !important;
        max-height:50px !important;
    }
}

/* STEP 40: Logo visibility and header/hero continuity fix */

/* Logo fix */
.vsl-brand{
    min-width:205px !important;
    min-height:70px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    background:transparent !important;
}

.vsl-brand img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:205px !important;
    max-height:66px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    background:transparent !important;
}

/* Remove the pale blank band and make top flow as one page */
body{
    background:
        linear-gradient(
            180deg,
            #F7FCFF 0%,
            #EAF8FC 18%,
            #D9F0F7 34%,
            #102E72 100%
        ) !important;
}

.vsl-header{
    margin-bottom:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
}

.vsl-mainbar{
    margin-bottom:0 !important;
    border-bottom:0 !important;
}

main{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* Hero must begin immediately under header */
#hero,
.hero,
.hero-section{
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 8% 20%, rgba(49,69,154,.08), transparent 28rem),
        linear-gradient(
            180deg,
            rgba(247,252,255,1) 0%,
            rgba(233,248,252,1) 13%,
            rgba(211,237,246,1) 25%,
            rgba(17,67,122,1) 100%
        ) !important;
    overflow:hidden !important;
}

/* Remove grid/line-heavy section look behind the hero */
#hero::before,
.hero::before,
.hero-section::before{
    opacity:.16 !important;
}

#hero::after,
.hero::after,
.hero-section::after{
    opacity:.45 !important;
}

/* Make the hero image panel feel integrated, not like a separated rounded card */
.hero-visual,
.hero-slider,
.hero-media,
.hero-image-wrap,
.hero-stage,
.slider-shell{
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    margin-top:0 !important;
    overflow:hidden !important;
}

/* Keep inner content premium but remove hard outer box separation */
.hero-visual::before,
.hero-slider::before,
.hero-media::before{
    border-radius:0 !important;
}

.hero-slide,
.slide,
.hero-image{
    border-radius:0 !important;
}

/* If the current hero uses a large image wrapper, remove its top rounding too */
#hero .container:first-child,
.hero .container:first-child,
.hero-section .container:first-child{
    margin-top:0 !important;
}

/* Remove old background blocks that create separated layers */
.hero-spacer,
.top-spacer,
.page-spacer,
.header-spacer,
.hero-bg-card,
.hero-frame-bg{
    display:none !important;
    height:0 !important;
}

/* Smooth the first section after hero so it does not feel like a separate block */
#about,
.about-vsl-section{
    margin-top:0 !important;
    border-top:0 !important;
    background:
        radial-gradient(circle at 12% 16%, rgba(29,185,194,.10), transparent 27rem),
        radial-gradient(circle at 88% 12%, rgba(49,69,154,.07), transparent 26rem),
        linear-gradient(
            180deg,
            #D9EEF7 0%,
            #F4FAFF 22%,
            #FFFFFF 100%
        ) !important;
}

/* Topbar brand color refinement */
.vsl-topbar{
    background:
        radial-gradient(circle at 14% 50%, rgba(29,185,194,.35), transparent 22rem),
        linear-gradient(90deg, #102E72 0%, #31459A 52%, #1DB9C2 100%) !important;
}

/* Header glass on scroll */
.vsl-header.is-scrolled{
    background:rgba(255,255,255,.64) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
}

.vsl-header.is-scrolled .vsl-mainbar{
    background:rgba(255,255,255,.44) !important;
}

/* Dark mode continuity */
html[data-theme="dark"] body{
    background:#081420 !important;
}

html[data-theme="dark"] #hero,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-section{
    background:
        radial-gradient(circle at 82% 10%, rgba(29,185,194,.13), transparent 30rem),
        linear-gradient(180deg, #081420 0%, #0D1D34 100%) !important;
}

html[data-theme="dark"] #about,
html[data-theme="dark"] .about-vsl-section{
    background:
        radial-gradient(circle at 12% 16%, rgba(29,185,194,.08), transparent 27rem),
        linear-gradient(180deg, #0D1D34 0%, #081420 100%) !important;
}

/* STEP 41: Real logo and favicon fix */

.vsl-brand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-width:240px !important;
    min-height:82px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.vsl-brand img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:240px !important;
    max-height:82px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    background:transparent !important;
    filter:none !important;
    mix-blend-mode:normal !important;
}

/* top bar more aligned to Varenz brand */
.vsl-topbar{
    background:
        radial-gradient(circle at 15% 50%, rgba(38,182,194,.28), transparent 24rem),
        linear-gradient(90deg, #1E2F7A 0%, #2F55A3 48%, #24B2BE 100%) !important;
}

/* unify logo-based watermarks/background brand marks */
.brand-watermark,
.hero-watermark,
.section-watermark,
.vsl-watermark{
    background-image:url("../images/logo/varenz-icon-logo.png") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    opacity:.08 !important;
}

/* STEP 43: Popup fallback close behavior and client-friendly navigation */
body.popup-open{
    overflow:hidden;
}

.popup,
.modal,
.search-popup,
.request-popup,
.detail-popup,
[data-popup]{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) translateY(18px) scale(.96);
    opacity:0;
    pointer-events:none;
    z-index:3001;
    width:min(720px, calc(100vw - 32px));
    max-height:86vh;
    overflow:auto;
    transition:
        opacity .26s ease,
        transform .26s ease;
}

.popup.is-open,
.modal.is-open,
.search-popup.is-open,
.request-popup.is-open,
.detail-popup.is-open,
[data-popup].is-open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) translateY(0) scale(1);
}

.popup-backdrop,
.modal-backdrop,
[data-popup-backdrop]{
    position:fixed;
    inset:0;
    z-index:3000;
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
}

.popup-backdrop.is-open,
.modal-backdrop.is-open,
[data-popup-backdrop].is-open{
    opacity:1;
    pointer-events:auto;
}

.popup-close-btn{
    position:absolute;
    top:16px;
    right:16px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.84));
    color:#102E72;
    font-size:1.45rem;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    box-shadow:
        0 14px 34px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
    z-index:5;
    transition:.22s ease;
}

.popup-close-btn:hover{
    transform:translateY(-2px) rotate(90deg);
    color:#ffffff;
    background:linear-gradient(135deg,#31459A,#1DB9C2);
}

.detail-popup-inner{
    padding-right:42px;
}

@media (max-width:680px){
    .popup,
    .modal,
    .search-popup,
    .request-popup,
    .detail-popup,
    [data-popup]{
        width:calc(100vw - 22px);
        max-height:84vh;
        border-radius:24px !important;
    }

    .popup-close-btn{
        top:12px;
        right:12px;
        width:38px;
        height:38px;
    }
}

/* STEP 44: final visual upgrade pass */

/* Popup visibility repair */
.popup,
.modal,
.search-popup,
.request-popup,
.detail-popup,
[data-popup]{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) translateY(18px) scale(.96) !important;
    opacity:0 !important;
    pointer-events:none !important;
    z-index:4001 !important;
    width:min(760px, calc(100vw - 32px)) !important;
    max-height:86vh !important;
    overflow:auto !important;
    transition:opacity .26s ease, transform .26s ease !important;
}

.popup.is-open,
.modal.is-open,
.search-popup.is-open,
.request-popup.is-open,
.detail-popup.is-open,
[data-popup].is-open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translate(-50%,-50%) translateY(0) scale(1) !important;
}

.popup-backdrop,
.modal-backdrop,
[data-popup-backdrop]{
    position:fixed !important;
    inset:0 !important;
    z-index:4000 !important;
    opacity:0 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(29,185,194,.18), transparent 28rem),
        rgba(3,9,24,.72) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    transition:opacity .24s ease !important;
}

.popup-backdrop.is-open,
.modal-backdrop.is-open,
[data-popup-backdrop].is-open{
    opacity:1 !important;
    pointer-events:auto !important;
}

.popup-close-btn{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:50% !important;
    background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.86)) !important;
    color:#102E72 !important;
    font-size:1.45rem !important;
    font-weight:900 !important;
    cursor:pointer !important;
    z-index:10 !important;
}

/* Real logo */
.vsl-brand img{
display:block !important;
    max-width:238px !important;
    max-height:82px !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Brand color correction */
.vsl-topbar{
    background:
        radial-gradient(circle at 14% 50%, rgba(29,185,194,.36), transparent 24rem),
        linear-gradient(90deg, #31459A 0%, #102E72 48%, #1DB9C2 100%) !important;
}

.vsl-nav a:hover,
.vsl-nav a.active{
    color:#1DB9C2 !important;
    background:rgba(29,185,194,.10) !important;
}

/* Hero premium cinematic redesign */
#hero,
.hero,
.hero-section{
    min-height:calc(100vh - 0px) !important;
    margin-top:0 !important;
    padding-top:0 !important;
    background:
        radial-gradient(circle at 80% 12%, rgba(29,185,194,.22), transparent 32rem),
        radial-gradient(circle at 8% 22%, rgba(49,69,154,.14), transparent 30rem),
        linear-gradient(180deg, #F7FCFF 0%, #EAF8FC 15%, #D9EEF0 31%, #102E72 100%) !important;
    overflow:hidden !important;
}

.hero-slider{
    min-height:calc(100vh - 126px) !important;
    border-radius:0 !important;
    background:#06152B !important;
    box-shadow:none !important;
}

.hero-slide{
    min-height:calc(100vh - 126px) !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:none !important;
}

.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(3,9,24,.86) 0%, rgba(16,46,114,.62) 38%, rgba(29,185,194,.18) 100%),
        radial-gradient(circle at 72% 20%, rgba(29,185,194,.20), transparent 28rem);
    z-index:1;
    pointer-events:none;
}

.hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:72px 72px;
    opacity:.30;
    z-index:2;
    pointer-events:none;
}

.hero-slide-overlay{
    opacity:.16 !important;
}

.hero-content,
.hero-copy{
    position:relative !important;
    z-index:4 !important;
    width:min(690px, 100%) !important;
    border-radius:34px !important;
    padding:48px !important;
    background:
        linear-gradient(145deg, rgba(49,69,154,.78), rgba(16,46,114,.52)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.18), transparent 18rem) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        0 34px 110px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

.hero-content h1,
.hero-copy h1,
.hero-title{
    font-family:Poppins, Inter, Arial, sans-serif !important;
    font-size:clamp(3.6rem, 6.4vw, 7.6rem) !important;
    line-height:.88 !important;
    letter-spacing:-.085em !important;
    font-weight:900 !important;
    color:#fff !important;
    text-shadow:0 22px 60px rgba(0,0,0,.28);
}

.hero-content p,
.hero-copy p,
.hero-lead{
    color:rgba(246,251,255,.90) !important;
    font-size:1.16rem !important;
    line-height:1.75 !important;
}

.hero-float-card,
.hero-card,
.hero-stat,
.hero-floating-card{
    position:relative !important;
    z-index:4 !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06)) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}

/* Supply gap storytelling upgrade */
.gaps-pro-card{
    min-height:410px !important;
    border-radius:30px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        0 30px 90px rgba(3,9,24,.28),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.gaps-card-img{
    opacity:1 !important;
    filter:saturate(1.1) contrast(1.05) !important;
    transform:scale(1.02) !important;
}

.gaps-card-gradient{
    background:
        linear-gradient(180deg, rgba(5,12,28,.02) 0%, rgba(5,12,28,.18) 42%, rgba(5,12,28,.86) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.18), transparent 42%) !important;
}

.gap-number{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 40%),
        linear-gradient(145deg,#31459A,#1DB9C2) !important;
}

.gap-card-content strong{
    font-size:1.28rem !important;
    line-height:1.1 !important;
}

.gap-card-content small{
    max-width:92%;
    font-size:.98rem !important;
    line-height:1.55 !important;
}

.gaps-pro-card:hover{
    transform:translateY(-12px) scale(1.025) !important;
}

.gaps-pro-card:hover .gaps-card-img{
    transform:scale(1.12) !important;
}

/* Final motion polish */
.reveal-up{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1);
}

.reveal-up.is-visible{
    opacity:1;
    transform:none;
}

.btn,
.vsl-nav a,
.vsl-search-btn,
.vsl-theme-btn,
.vsl-support-btn,
.vsl-menu-btn,
.gaps-pro-card,
.solutions-pro-card,
.visual-category-card,
.procurement-pro-step,
.operations-pro-points button{
    will-change:transform;
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* STEP 45: final premium repair and upgrade */

/* exact real logo */
.vsl-brand{
    min-width:238px !important;
    min-height:82px !important;
    display:flex !important;
    align-items:center !important;
}

.vsl-brand img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:238px !important;
    max-height:82px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    background:transparent !important;
}

/* remove old safari green tones */
.vsl-topbar{
    background:
        radial-gradient(circle at 14% 50%, rgba(29,185,194,.36), transparent 24rem),
        linear-gradient(90deg, #31459A 0%, #102E72 48%, #1DB9C2 100%) !important;
}

.vsl-nav a:hover,
.vsl-nav a.active{
    color:#1DB9C2 !important;
    background:rgba(29,185,194,.10) !important;
}

/* premium popup layer */
body.vsl-popup-open{
    overflow:hidden;
}

.vsl-premium-backdrop{
    position:fixed;
    inset:0;
    z-index:5000;
    opacity:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 16%, rgba(29,185,194,.20), transparent 28rem),
        rgba(3,9,24,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:opacity .28s ease;
}

.vsl-premium-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
}

.vsl-premium-popup{
    position:fixed;
    left:50%;
    top:50%;
    z-index:5001;
    width:min(940px, calc(100vw - 34px));
    max-height:88vh;
    overflow:hidden;
    display:grid;
    grid-template-columns:.82fr 1.08fr;
    border-radius:34px;
    border:1px solid rgba(255,255,255,.60);
    background:
        radial-gradient(circle at 15% 0%, rgba(29,185,194,.10), transparent 20rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,255,.94));
    box-shadow:
        0 38px 120px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.96);
    transform:translate(-50%,-50%) translateY(24px) scale(.96);
    opacity:0;
    pointer-events:none;
    transition:
        opacity .30s cubic-bezier(.16,1,.3,1),
        transform .30s cubic-bezier(.16,1,.3,1);
}

.vsl-premium-popup.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) translateY(0) scale(1);
}

.vsl-premium-popup::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px;
    background:linear-gradient(90deg,#31459A,#1DB9C2,#4AB2BA);
    z-index:5;
}

.vsl-popup-close{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#102E72;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.88));
    box-shadow:
        0 16px 36px rgba(15,23,42,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
    font-size:1.45rem;
    font-weight:900;
    cursor:pointer;
    z-index:8;
    transition:.25s ease;
}

.vsl-popup-close:hover{
    transform:translateY(-2px) rotate(90deg);
    color:#fff;
    background:linear-gradient(135deg,#31459A,#1DB9C2);
}

.vsl-popup-visual{
    position:relative;
    min-height:520px;
    padding:38px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    color:#fff;
    overflow:hidden;
    background:
        linear-gradient(145deg, rgba(16,46,114,.94), rgba(49,69,154,.78)),
        url("../images/hero/hero-stock-support.png") center/cover;
}

.vsl-popup-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.10), rgba(5,12,28,.76)),
        radial-gradient(circle at 80% 12%, rgba(29,185,194,.30), transparent 22rem);
}

.vsl-popup-brandmark{
    position:absolute;
    right:-36px;
    top:40px;
    width:280px;
    height:220px;
    background:url("../images/logo/varenz-icon-logo.png") center/contain no-repeat;
    opacity:.13;
    filter:brightness(0) invert(1);
    z-index:1;
}

.vsl-popup-visual span,
.vsl-popup-visual strong,
.vsl-popup-visual small{
    position:relative;
    z-index:2;
}

.vsl-popup-visual span{
    color:#7DF3FF;
    font-size:.82rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:900;
    margin-bottom:10px;
}

.vsl-popup-visual strong{
    font-size:2rem;
    line-height:1.05;
    max-width:360px;
}

.vsl-popup-visual small{
    color:rgba(255,255,255,.82);
    line-height:1.65;
    margin-top:12px;
    max-width:360px;
}

.vsl-popup-content{
    position:relative;
    padding:48px;
    overflow:auto;
}

.vsl-popup-content h3{
    margin:10px 0 12px;
    color:#07172A;
    font-size:clamp(2rem,3.4vw,3.4rem);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:900;
}

.vsl-popup-content p{
    color:#5C708C;
    line-height:1.75;
}

.vsl-premium-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:22px;
}

.vsl-premium-form textarea,
.vsl-premium-form button{
    grid-column:1 / -1;
}

.vsl-premium-form input,
.vsl-premium-form select,
.vsl-premium-form textarea,
.vsl-search-box input{
    width:100%;
    border-radius:18px;
    border:1px solid rgba(49,69,154,.13);
    background:rgba(255,255,255,.88);
    color:#07172A;
    padding:15px 16px;
    font:inherit;
    box-shadow:
        0 12px 34px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.80);
}

.vsl-premium-form textarea{
    min-height:120px;
    resize:vertical;
}

.vsl-search-content{
    grid-column:1 / -1;
}

.vsl-search-box{
    margin:22px 0;
}

.vsl-search-box input{
    font-size:1.05rem;
    min-height:58px;
}

.vsl-search-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.vsl-search-chips button{
    border:1px solid rgba(49,69,154,.12);
    border-radius:999px;
    background:rgba(255,255,255,.86);
    color:#102E72;
    padding:10px 14px;
    font-weight:850;
    cursor:pointer;
}

.vsl-search-results{
    display:grid;
    gap:12px;
}

.vsl-search-results article{
    padding:18px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(244,250,255,.82));
    border:1px solid rgba(49,69,154,.10);
}

.vsl-search-results strong{
    display:block;
    color:#102E72;
}

.vsl-search-results span{
    color:#5C708C;
}

/* premium menu overlay */
.vsl-mobile-panel{
    position:absolute !important;
    left:24px !important;
    right:24px !important;
    top:calc(100% + 10px) !important;
    z-index:2200 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    padding:24px !important;
    border-radius:30px !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(-12px) scale(.98) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.12), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,250,255,.90)) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    box-shadow:0 34px 100px rgba(15,23,42,.20) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    transition:.28s cubic-bezier(.16,1,.3,1) !important;
}

.vsl-mobile-panel.is-open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
}

.vsl-mobile-panel a,
.vsl-mobile-panel button{
    min-height:78px !important;
    align-items:flex-start !important;
    justify-content:center !important;
    flex-direction:column !important;
    padding:18px !important;
    border-radius:22px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(245,250,255,.86)) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    color:#102E72 !important;
    font-weight:900 !important;
    box-shadow:0 16px 40px rgba(15,23,42,.06) !important;
}

.vsl-mobile-panel button{
    background:linear-gradient(135deg,#31459A,#1DB9C2) !important;
    color:#fff !important;
}

/* hero premium upgrade */
#hero,
.hero,
.hero-section{
    min-height:100vh !important;
    padding-top:0 !important;
    margin-top:0 !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(29,185,194,.24), transparent 34rem),
        radial-gradient(circle at 10% 20%, rgba(49,69,154,.14), transparent 32rem),
        linear-gradient(180deg,#F7FCFF 0%,#EAF8FC 16%,#D9EEF0 32%,#102E72 100%) !important;
}

.hero-slider{
    min-height:calc(100vh - 126px) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

.hero-slide{
    min-height:calc(100vh - 126px) !important;
    background-size:cover !important;
    background-position:center center !important;
    animation:heroPremiumZoom 8s ease-in-out infinite alternate;
}

.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(3,9,24,.82) 0%, rgba(16,46,114,.58) 38%, rgba(29,185,194,.16) 100%),
        radial-gradient(circle at 76% 18%, rgba(29,185,194,.22), transparent 28rem);
}

.hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:.28;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:72px 72px;
}

.hero-copy,
.hero-content{
    position:relative !important;
    z-index:4 !important;
    border-radius:34px !important;
    padding:48px !important;
    background:
        linear-gradient(145deg, rgba(49,69,154,.80), rgba(16,46,114,.54)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.20), transparent 20rem) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        0 34px 110px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

.hero-copy h1,
.hero-content h1,
.hero-title{
    font-family:Poppins, Inter, Arial, sans-serif !important;
    font-size:clamp(3.5rem,6.4vw,7.5rem) !important;
    line-height:.88 !important;
    letter-spacing:-.085em !important;
    color:#fff !important;
    font-weight:900 !important;
}

.hero-copy p,
.hero-content p,
.hero-lead{
    color:rgba(246,251,255,.92) !important;
    font-size:1.16rem !important;
    line-height:1.75 !important;
}

.hero-float-card,
.hero-card,
.hero-stat,
.hero-floating-card{
    z-index:4 !important;
    border-radius:30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06)) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}

/* supply gaps storytelling */
.gaps-pro-card{
    min-height:420px !important;
    border-radius:30px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        0 30px 90px rgba(3,9,24,.28),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.gaps-card-img{
    opacity:1 !important;
    filter:saturate(1.12) contrast(1.06) !important;
    transform:scale(1.02) !important;
}

.gaps-card-gradient{
    background:
        linear-gradient(180deg, rgba(5,12,28,.02) 0%, rgba(5,12,28,.18) 42%, rgba(5,12,28,.86) 100%),
        radial-gradient(circle at 24% 15%, rgba(29,185,194,.18), transparent 42%) !important;
}

.gap-card-content strong{
    font-size:1.28rem !important;
    line-height:1.1 !important;
}

.gap-card-content small{
    font-size:.98rem !important;
    line-height:1.55 !important;
}

.gaps-pro-card:hover{
    transform:translateY(-12px) scale(1.025) !important;
}

.gaps-pro-card:hover .gaps-card-img{
    transform:scale(1.12) !important;
}

/* final motion */
.reveal-up{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .78s cubic-bezier(.16,1,.3,1),
        transform .78s cubic-bezier(.16,1,.3,1);
}

.reveal-up.is-visible{
    opacity:1;
    transform:none;
}

@keyframes heroPremiumZoom{
    from{background-size:100% auto}
    to{background-size:106% auto}
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* STEP 46: final cleanup after screenshot */

/* Header logo, use existing project logo cleanly */
.vsl-brand{
    min-width:240px !important;
    min-height:78px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
}

.vsl-brand img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:235px !important;
    max-height:76px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    background:transparent !important;
    content:normal !important;
}

/* Remove broken content:url from earlier steps */
.vsl-brand img::before,
.vsl-brand img::after{
    content:none !important;
}

/* Hero, make images and text more visible, less dead/dim */
.hero-slide::before{
    background:
        linear-gradient(90deg, rgba(3,9,24,.66) 0%, rgba(16,46,114,.44) 42%, rgba(29,185,194,.08) 100%),
        radial-gradient(circle at 76% 18%, rgba(29,185,194,.14), transparent 28rem) !important;
}

.hero-copy,
.hero-content{
    background:
        linear-gradient(145deg, rgba(49,69,154,.72), rgba(16,46,114,.46)),
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.18), transparent 20rem) !important;
}

.hero-copy h1,
.hero-content h1,
.hero-title{
    color:#ffffff !important;
    opacity:1 !important;
    text-shadow:0 20px 54px rgba(0,0,0,.34) !important;
}

.hero-copy p,
.hero-content p,
.hero-lead{
    color:rgba(255,255,255,.92) !important;
    opacity:1 !important;
}

/* Request popup should fit screen professionally */
.vsl-premium-popup{
    max-height:82vh !important;
}

.vsl-request-popup{
    grid-template-columns:.78fr 1.22fr !important;
}

.vsl-request-popup .vsl-popup-visual{
    min-height:520px !important;
}

.vsl-request-popup .vsl-popup-content{
    max-height:82vh !important;
    overflow:auto !important;
    padding-bottom:34px !important;
}

.vsl-premium-form textarea{
    min-height:92px !important;
}

/* Detail popup readability */
.vsl-detail-popup .vsl-popup-content p{
    color:#405A7A !important;
    font-size:1.02rem !important;
}

.vsl-detail-popup .vsl-popup-content{
    background:
        radial-gradient(circle at 20% 0%, rgba(29,185,194,.08), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,255,.94)) !important;
}

/* Footer transition, remove blinding white band and make it feel united */
.operations-pro-section{
    background:
        radial-gradient(circle at 14% 20%, rgba(29,185,194,.12), transparent 28rem),
        linear-gradient(180deg, #F4FAFF 0%, #D9EEF0 44%, #102E72 100%) !important;
    padding-bottom:7rem !important;
}

.site-footer,
footer{
    margin-top:0 !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(29,185,194,.18), transparent 28rem),
        radial-gradient(circle at 86% 16%, rgba(49,69,154,.28), transparent 30rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 42%, #06101F 100%) !important;
}

.site-footer::before,
footer::before{
    height:220px !important;
    background:
        linear-gradient(180deg, rgba(16,46,114,1) 0%, rgba(8,27,60,.68) 48%, rgba(6,16,31,0) 100%) !important;
}

.site-footer .footer-brand,
footer .footer-brand,
.site-footer .footer-logo,
footer .footer-logo{
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px !important;
    padding:18px !important;
    width:max-content !important;
}

.site-footer img,
footer img{
    max-width:220px !important;
    max-height:76px !important;
    object-fit:contain !important;
}

/* Make footer logo readable without blinding white */
.site-footer .footer-brand img,
footer .footer-brand img,
.site-footer .footer-logo img,
footer .footer-logo img{
    filter:none !important;
    background:rgba(255,255,255,.96) !important;
    border-radius:18px !important;
    padding:10px !important;
}

/* Stop pale page band before footer */
#operations + .site-footer,
#operations + footer{
    margin-top:-1px !important;
}

/* Mobile safety */
@media (max-width:980px){
    .vsl-brand{
        min-width:190px !important;
    }

    .vsl-brand img{
        max-width:185px !important;
        max-height:64px !important;
    }

    .vsl-request-popup{
        grid-template-columns:1fr !important;
    }

    .vsl-request-popup .vsl-popup-visual{
        min-height:220px !important;
    }
}

@media (max-width:680px){
    .vsl-brand{
        min-width:150px !important;
    }

    .vsl-brand img{
        max-width:145px !important;
        max-height:54px !important;
    }

    .vsl-premium-popup{
        max-height:88vh !important;
    }

    .vsl-request-popup .vsl-popup-content{
        max-height:62vh !important;
    }
}

/* STEP 47: final real uploaded logo usage */
.vsl-brand{
    min-width:250px !important;
    min-height:78px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
}

.vsl-brand img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:250px !important;
    max-height:76px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    background:transparent !important;
}

/* Footer and decorative brand marks use the icon logo */
.footer-brand img,
.footer-logo img,
.site-footer img,
footer img{
    content:none !important;
}

.brand-watermark,
.hero-watermark,
.section-watermark,
.vsl-watermark,
.vsl-popup-brandmark{
    background-image:url("../images/logo/varenz-icon-logo.png") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
}

/* Prevent icon watermark from showing as a harsh white block */
.vsl-popup-brandmark,
.brand-watermark,
.hero-watermark,
.section-watermark,
.vsl-watermark{
    opacity:.08 !important;
    mix-blend-mode:screen;
}

/* Footer icon logo should be clean but not blinding */
.site-footer .footer-brand img,
footer .footer-brand img,
.site-footer .footer-logo img,
footer .footer-logo img{
    max-width:130px !important;
    max-height:96px !important;
    object-fit:contain !important;
    background:rgba(255,255,255,.96) !important;
    border-radius:18px !important;
    padding:12px !important;
    filter:none !important;
}

@media (max-width:980px){
    .vsl-brand{
        min-width:205px !important;
    }

    .vsl-brand img{
        max-width:205px !important;
        max-height:66px !important;
    }
}

@media (max-width:680px){
    .vsl-brand{
        min-width:160px !important;
    }

    .vsl-brand img{
        max-width:160px !important;
        max-height:54px !important;
    }
}

/* STEP 48: competitive team section and premium footer */

/* Make the page flow from operations/team into footer without blinding white */
#team.team-pro-section{
    position:relative;
    overflow:hidden;
    padding:7.5rem 0;
    background:
        radial-gradient(circle at 14% 10%, rgba(29,185,194,.16), transparent 30rem),
        radial-gradient(circle at 86% 18%, rgba(49,69,154,.18), transparent 32rem),
        linear-gradient(180deg, #F4FAFF 0%, #D9EEF0 24%, #102E72 100%) !important;
    border-top:0 !important;
}

.team-pro-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size:58px 58px;
    opacity:.42;
    pointer-events:none;
}

.team-pro-bg{
    position:absolute;
    inset:auto 0 0 0;
    height:58%;
    background:
        linear-gradient(180deg, rgba(16,46,114,0), rgba(6,16,31,.95));
    pointer-events:none;
}

.team-pro-glow{
    position:absolute;
    right:-10rem;
    top:10rem;
    width:34rem;
    height:34rem;
    border-radius:50%;
    background:rgba(29,185,194,.18);
    filter:blur(58px);
    pointer-events:none;
}

.team-pro-head{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.68fr);
    gap:42px;
    align-items:end;
    margin-bottom:44px;
}

.team-pro-head .eyebrow{
    color:#1DB9C2 !important;
    font-weight:900;
}

.team-pro-head h2{
    margin:12px 0 0;
    max-width:900px;
    color:#07172A;
    font-size:clamp(2.7rem,5vw,5.2rem);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
}

.team-pro-head p{
    margin:0;
    color:#405A7A;
    line-height:1.82;
    font-size:1.06rem;
    padding:24px;
    border-radius:26px;
    background:rgba(255,255,255,.70);
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 18px 50px rgba(15,23,42,.08);
}

.team-pro-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.team-pro-card{
    position:relative;
    min-height:450px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    padding:0;
    text-align:left;
    color:#fff;
    cursor:pointer;
    background:#06101F;
    box-shadow:
        0 30px 90px rgba(3,9,24,.24),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:
        transform .38s cubic-bezier(.16,1,.3,1),
        box-shadow .38s cubic-bezier(.16,1,.3,1),
        border-color .38s ease;
}

.team-pro-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.86;
    transform:scale(1.03);
    transition:transform .55s ease, opacity .38s ease;
}

.team-pro-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.04) 0%, rgba(5,12,28,.22) 36%, rgba(5,12,28,.92) 100%),
        radial-gradient(circle at 22% 12%, rgba(29,185,194,.18), transparent 44%);
}

.team-pro-content{
    position:absolute;
    inset:auto 0 0 0;
    display:block;
    padding:28px;
    z-index:2;
}

.team-pro-content small{
    display:block;
    color:#7DF3FF;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-size:.78rem;
    font-weight:900;
    margin-bottom:10px;
}

.team-pro-content strong{
    display:block;
    color:#fff;
    font-size:1.55rem;
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:900;
    margin-bottom:10px;
}

.team-pro-content em{
    display:block;
    color:rgba(255,255,255,.78);
    font-style:normal;
    line-height:1.55;
    margin-bottom:14px;
}

.team-pro-tags{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:.83rem;
    margin-bottom:14px;
}

.team-pro-content b{
    color:#7DF3FF;
    font-size:.9rem;
}

.team-pro-card:hover{
    transform:translateY(-12px) scale(1.018);
    border-color:rgba(125,243,255,.36);
    box-shadow:
        0 42px 110px rgba(3,9,24,.34),
        0 0 0 1px rgba(29,185,194,.12);
}

.team-pro-card:hover .team-pro-image{
    transform:scale(1.13);
    opacity:1;
}

/* Operations must blend into team/footer */
.operations-pro-section{
    background:
        radial-gradient(circle at 14% 20%, rgba(29,185,194,.10), transparent 28rem),
        linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 42%, #F4FAFF 100%) !important;
    padding-bottom:6.5rem !important;
}

/* Premium footer */
.vsl-footer{
    position:relative;
    overflow:hidden;
    margin-top:0 !important;
    padding:6.8rem 0 1.8rem;
    background:
        radial-gradient(circle at 18% 8%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 88% 20%, rgba(49,69,154,.26), transparent 34rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 42%, #06101F 100%) !important;
    color:#F6FBFF;
    border-top:0 !important;
}

.vsl-footer::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:170px;
    background:
        linear-gradient(180deg, rgba(16,46,114,.95), rgba(8,27,60,0));
    pointer-events:none;
}

.vsl-footer-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.45;
}

.vsl-footer-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(280px,1.2fr) repeat(3,minmax(170px,.65fr));
    gap:4rem;
    align-items:start;
}

.vsl-footer-brand h3{
    margin:18px 0 12px;
    color:#fff;
    font-size:1.8rem;
    line-height:1.05;
}

.vsl-footer-brand p{
    color:rgba(235,249,255,.78);
    line-height:1.75;
    max-width:460px;
}

.vsl-footer-logo{
    width:154px;
    height:118px;
    display:grid;
    place-items:center;
    border-radius:28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.vsl-footer-logo img{
    max-width:116px;
    max-height:86px;
    object-fit:contain;
    background:#fff;
    border-radius:18px;
    padding:10px;
}

.vsl-footer-newsletter{
    margin-top:26px;
}

.vsl-footer-newsletter label,
.vsl-footer-col h4{
    display:block;
    margin-bottom:12px;
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.82rem;
}

.vsl-footer-newsletter div{
    display:flex;
    gap:10px;
    max-width:470px;
}

.vsl-footer-newsletter input{
    flex:1;
    min-height:48px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.07);
    color:#fff;
    padding:0 15px;
}

.vsl-footer-newsletter button{
    min-height:48px;
    border:0;
    border-radius:14px;
    padding:0 18px;
    color:#fff;
    font-weight:900;
    background:linear-gradient(135deg,#31459A,#1DB9C2);
    cursor:pointer;
}

.vsl-footer-socials{
    display:flex;
    gap:10px;
    margin-top:22px;
}

.vsl-footer-socials a{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.12);
    font-weight:900;
    transition:.25s ease;
}

.vsl-footer-socials a:hover{
    transform:translateY(-3px);
    background:linear-gradient(135deg,#31459A,#1DB9C2);
}

.vsl-footer-col{
    display:grid;
    gap:12px;
}

.vsl-footer-col a,
.vsl-footer-col span,
.vsl-footer-col button{
    color:rgba(235,249,255,.78);
    text-decoration:none;
    line-height:1.5;
    background:transparent;
    border:0;
    padding:0;
    text-align:left;
    font:inherit;
    cursor:pointer;
    transition:.22s ease;
}

.vsl-footer-col a:hover,
.vsl-footer-col button:hover{
    color:#7DF3FF;
    transform:translateX(4px);
}

.vsl-footer-contact .btn{
    margin-top:10px;
    width:max-content;
    color:#fff;
    padding:13px 18px;
}

.vsl-footer-bottom{
    position:relative;
    z-index:2;
    margin-top:4.5rem;
    padding-top:1.6rem;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(235,249,255,.62);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.vsl-footer-watermark{
    position:absolute;
    right:0;
    bottom:-2.6rem;
    font-size:10rem;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.045);
    pointer-events:none;
}

/* Header logo sizing after confirmation */
.vsl-brand img{
    max-width:240px !important;
    max-height:76px !important;
}

@media (max-width:1100px){
    .team-pro-head,
    .vsl-footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .team-pro-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px){
    .team-pro-head,
    .vsl-footer-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .team-pro-grid{
        grid-template-columns:1fr;
    }

    .team-pro-card{
        min-height:390px;
    }

    .vsl-footer{
        padding-top:5rem;
    }

    .vsl-footer-newsletter div{
        display:grid;
    }

    .vsl-footer-bottom{
        display:block;
    }

    .vsl-footer-watermark{
        font-size:6rem;
    }
}

/* STEP 49: header spacing, icon wrapping, dedicated team and modern footer */

/* Header layout spacing, logo left, nav/actions right */
.vsl-mainbar-inner{
    width:min(100%, 1280px) !important;
    max-width:1280px !important;
    margin:0 auto !important;
    padding:0 34px !important;
    display:grid !important;
    grid-template-columns:230px minmax(430px, 1fr) auto !important;
    gap:28px !important;
    align-items:center !important;
}

.vsl-brand{
    min-width:220px !important;
    width:220px !important;
    min-height:82px !important;
    justify-content:flex-start !important;
    overflow:visible !important;
}

.vsl-brand img{
    max-width:210px !important;
    max-height:72px !important;
    object-fit:contain !important;
    background:transparent !important;
    box-shadow:none !important;
}

.vsl-nav{
    justify-self:end !important;
    max-width:560px !important;
    white-space:nowrap !important;
}

.vsl-actions{
    justify-self:end !important;
    white-space:nowrap !important;
}

.vsl-search-btn{
    min-width:118px !important;
}

.vsl-support-btn{
    min-width:198px !important;
}

/* Topbar icon wrapping fix */
.vsl-topbar-inner{
    width:min(100%, 1280px) !important;
    max-width:1280px !important;
    padding:0 34px !important;
}

.vsl-topbar-right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:9px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.vsl-contact-pill{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
    padding:0 12px !important;
}

.vsl-contact-pill strong{
    white-space:nowrap !important;
    font-size:.78rem !important;
    line-height:1 !important;
}

.vsl-email-pill strong,
.vsl-location-pill strong{
    max-width:190px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.vsl-contact-icon{
    flex:0 0 20px !important;
}

.vsl-wa-icon{
    font-size:.58rem !important;
    font-weight:950 !important;
    letter-spacing:-.03em;
}

.vsl-socials{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap !important;
}

.vsl-socials a{
    flex:0 0 30px !important;
}

/* Dedicated dark team section */
.team-studio-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 42%, #06101F 100%) !important;
    color:#F6FBFF;
    border-top:0 !important;
}

.team-studio-noise{
    position:absolute;
    inset:0;
    opacity:.24;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
    background-size:18px 18px;
    pointer-events:none;
}

.team-studio-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(62px);
    pointer-events:none;
}

.team-studio-orb-a{
    width:28rem;
    height:28rem;
    left:-10rem;
    top:8rem;
    background:rgba(29,185,194,.16);
}

.team-studio-orb-b{
    width:34rem;
    height:34rem;
    right:-12rem;
    top:10rem;
    background:rgba(49,69,154,.22);
}

.team-studio-head{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.68fr);
    gap:42px;
    align-items:end;
    margin-bottom:44px;
}

.team-studio-head .eyebrow{
    color:#7DF3FF !important;
}

.team-studio-head h2{
    margin:12px 0 0;
    max-width:920px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,5.4rem);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
}

.team-studio-head p{
    margin:0;
    color:rgba(235,249,255,.78);
    line-height:1.82;
    font-size:1.06rem;
    padding:24px;
    border-radius:26px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.team-studio-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.team-studio-card{
    position:relative;
    min-height:470px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    padding:0;
    text-align:left;
    color:#fff;
    cursor:pointer;
    background:#06101F;
    box-shadow:
        0 34px 100px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:
        transform .38s cubic-bezier(.16,1,.3,1),
        box-shadow .38s cubic-bezier(.16,1,.3,1),
        border-color .38s ease;
}

.team-studio-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.88;
    transform:scale(1.03);
    transition:.55s ease;
}

.team-studio-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.04) 0%, rgba(5,12,28,.22) 36%, rgba(5,12,28,.94) 100%),
        radial-gradient(circle at 22% 12%, rgba(29,185,194,.18), transparent 44%);
}

.team-studio-content{
    position:absolute;
    inset:auto 0 0 0;
    z-index:2;
    display:block;
    padding:28px;
}

.team-studio-content small{
    display:block;
    color:#7DF3FF;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-size:.78rem;
    font-weight:900;
    margin-bottom:10px;
}

.team-studio-content strong{
    display:block;
    color:#fff;
    font-size:1.55rem;
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:900;
    margin-bottom:10px;
}

.team-studio-content em{
    display:block;
    color:rgba(255,255,255,.78);
    font-style:normal;
    line-height:1.55;
    margin-bottom:14px;
}

.team-studio-content span{
    display:block;
    color:rgba(255,255,255,.70);
    font-size:.83rem;
    margin-bottom:14px;
}

.team-studio-content b{
    color:#7DF3FF;
    font-size:.9rem;
}

.team-studio-card:hover{
    transform:translateY(-12px) scale(1.018);
    border-color:rgba(125,243,255,.36);
    box-shadow:
        0 42px 110px rgba(0,0,0,.34),
        0 0 0 1px rgba(29,185,194,.12);
}

.team-studio-card:hover .team-studio-image{
    transform:scale(1.13);
    opacity:1;
}

/* Modern footer, no large word watermark */
.vsl-footer,
.site-footer,
footer{
    background:
        radial-gradient(circle at 16% 0%, rgba(29,185,194,.16), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #06101F 0%, #081B3C 48%, #06101F 100%) !important;
}

.vsl-footer::after,
.site-footer::after,
footer::after,
.vsl-footer-watermark{
    display:none !important;
    content:none !important;
}

.vsl-footer-bg{
    opacity:.35 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size:18px 18px, 72px 72px, 72px 72px !important;
}

/* footer logo uses icon logo cleanly */
.vsl-footer-logo img,
.site-footer .footer-brand img,
footer .footer-brand img,
.site-footer .footer-logo img,
footer .footer-logo img{
    max-width:116px !important;
    max-height:88px !important;
    object-fit:contain !important;
    background:#fff !important;
    border-radius:18px !important;
    padding:10px !important;
    filter:none !important;
}

@media (max-width:1180px){
    .vsl-mainbar-inner{
        grid-template-columns:205px minmax(360px, 1fr) auto !important;
        gap:18px !important;
        padding:0 22px !important;
    }

    .vsl-brand{
        width:195px !important;
        min-width:195px !important;
    }

    .vsl-brand img{
        max-width:188px !important;
    }

    .vsl-nav a{
        padding:0 11px !important;
    }

    .vsl-search-btn{
        min-width:105px !important;
    }

    .vsl-support-btn{
        min-width:174px !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .vsl-topbar-inner{
        padding:0 22px !important;
    }

    .vsl-email-pill strong,
    .vsl-location-pill strong{
        max-width:150px !important;
    }
}

@media (max-width:980px){
    .vsl-mainbar-inner{
        grid-template-columns:auto 1fr auto !important;
    }

    .vsl-brand{
        min-width:170px !important;
        width:170px !important;
    }

    .vsl-brand img{
        max-width:165px !important;
        max-height:58px !important;
    }

    .vsl-nav{
        display:none !important;
    }

    .vsl-email-pill,
    .vsl-location-pill,
    .vsl-socials{
        display:none !important;
    }

    .team-studio-head,
    .team-studio-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:680px){
    .vsl-mainbar-inner{
        padding:0 14px !important;
        gap:10px !important;
    }

    .vsl-brand{
        min-width:145px !important;
        width:145px !important;
    }

    .vsl-brand img{
        max-width:142px !important;
        max-height:50px !important;
    }

    .team-studio-head,
    .team-studio-grid{
        grid-template-columns:1fr;
    }

    .team-studio-card{
        min-height:390px;
    }
}

/* STEP 50: final header spacing and topbar cleanup */
.vsl-mainbar-inner{
    width:min(100%, 1300px) !important;
    max-width:1300px !important;
    margin:0 auto !important;
    padding:0 34px !important;
    display:grid !important;
    grid-template-columns:190px minmax(500px, 1fr) auto !important;
    gap:24px !important;
    align-items:center !important;
}

.vsl-brand{
    width:185px !important;
    min-width:185px !important;
    min-height:74px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
}

.vsl-brand img{
    max-width:178px !important;
    max-height:62px !important;
    object-fit:contain !important;
    background:transparent !important;
    box-shadow:none !important;
}

.vsl-nav{
    justify-self:end !important;
    max-width:620px !important;
    white-space:nowrap !important;
    gap:2px !important;
}

.vsl-nav a{
    padding-left:13px !important;
    padding-right:13px !important;
}

.vsl-actions{
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    white-space:nowrap !important;
    flex-wrap:nowrap !important;
}

.vsl-search-btn{
    min-width:112px !important;
    padding-left:17px !important;
    padding-right:17px !important;
}

.vsl-support-btn{
    min-width:190px !important;
    padding-left:18px !important;
    padding-right:18px !important;
}

.vsl-theme-btn,
.vsl-menu-btn{
    flex:0 0 48px !important;
}

/* Topbar, Gracious-level cleanliness but Varenz colors */
.vsl-topbar{
    background:
        radial-gradient(circle at 14% 50%, rgba(29,185,194,.34), transparent 24rem),
        linear-gradient(90deg, #31459A 0%, #102E72 48%, #1DB9C2 100%) !important;
    border-bottom:0 !important;
}

.vsl-topbar-inner{
    width:min(100%, 1300px) !important;
    max-width:1300px !important;
    min-height:39px !important;
    padding:0 34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
}

.vsl-topbar-left{
    flex:0 0 auto !important;
    white-space:nowrap !important;
}

.vsl-topbar-right{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
}

.vsl-contact-pill{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:max-content !important;
    height:27px !important;
    padding:0 11px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.14) !important;
}

.vsl-contact-pill strong{
    display:inline-block !important;
    white-space:nowrap !important;
    font-size:.77rem !important;
    line-height:1 !important;
}

.vsl-contact-icon{
    flex:0 0 19px !important;
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    display:inline-grid !important;
    place-items:center !important;
    padding:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.18) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    font-size:.72rem !important;
    line-height:1 !important;
}

.vsl-whatsapp-icon{
    font-size:.55rem !important;
    font-weight:950 !important;
    letter-spacing:-.04em !important;
}

.vsl-email-pill strong{
    max-width:170px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.vsl-location-pill strong{
    max-width:185px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.vsl-socials{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    white-space:nowrap !important;
}

.vsl-socials a{
    flex:0 0 29px !important;
    width:29px !important;
    height:29px !important;
    min-height:29px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.12) !important;
}

/* STEP 50: real department team carousel */
.vsl-team-carousel-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 42%, #06101F 100%) !important;
    color:#F6FBFF;
    border-top:0 !important;
}

.vsl-team-noise{
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
    background-size:18px 18px;
    pointer-events:none;
}

.vsl-team-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(64px);
    pointer-events:none;
}

.vsl-team-orb-a{
    width:28rem;
    height:28rem;
    left:-10rem;
    top:8rem;
    background:rgba(29,185,194,.16);
}

.vsl-team-orb-b{
    width:34rem;
    height:34rem;
    right:-12rem;
    top:10rem;
    background:rgba(49,69,154,.22);
}

.vsl-team-head{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.68fr);
    gap:42px;
    align-items:end;
    margin-bottom:42px;
}

.vsl-team-head .eyebrow{
    color:#7DF3FF !important;
}

.vsl-team-head h2{
    margin:12px 0 0;
    max-width:930px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,5.4rem);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
}

.vsl-team-head p{
    margin:0;
    color:rgba(235,249,255,.78);
    line-height:1.82;
    font-size:1.06rem;
    padding:24px;
    border-radius:26px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.vsl-team-carousel-shell{
    position:relative;
    z-index:2;
}

.vsl-team-carousel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.vsl-team-carousel-top span{
    display:block;
    color:#7DF3FF;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:900;
    margin-bottom:6px;
}

.vsl-team-carousel-top strong{
    color:#fff;
    font-size:1.05rem;
}

.vsl-team-controls{
    display:flex;
    gap:10px;
}

.vsl-team-controls button{
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:2rem;
    cursor:pointer;
    transition:.25s ease;
}

.vsl-team-controls button:hover{
    background:linear-gradient(135deg,#31459A,#1DB9C2);
    transform:translateY(-2px);
}

.vsl-team-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(300px, 31%);
    gap:22px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 4px 18px;
}

.vsl-team-track::-webkit-scrollbar{
    height:9px;
}

.vsl-team-track::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:999px;
}

.vsl-team-track::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#31459A,#1DB9C2);
    border-radius:999px;
}

.vsl-team-card{
    position:relative;
    scroll-snap-align:start;
    min-height:440px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    padding:0;
    text-align:left;
    color:#fff;
    cursor:pointer;
    background:#06101F;
    box-shadow:
        0 34px 100px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:
        transform .38s cubic-bezier(.16,1,.3,1),
        box-shadow .38s cubic-bezier(.16,1,.3,1),
        border-color .38s ease;
}

.vsl-team-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.86;
    transform:scale(1.03);
    transition:.55s ease;
}

.vsl-team-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.04) 0%, rgba(5,12,28,.28) 36%, rgba(5,12,28,.94) 100%),
        radial-gradient(circle at 22% 12%, rgba(29,185,194,.18), transparent 44%);
}

.vsl-team-card-top{
    position:absolute;
    left:22px;
    right:22px;
    top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:2;
}

.vsl-team-number{
    color:#7DF3FF;
    font-weight:900;
    letter-spacing:.08em;
}

.vsl-team-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 40%),
        linear-gradient(145deg,#31459A,#1DB9C2);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    font-weight:900;
}

.vsl-team-card-body{
    position:absolute;
    inset:auto 0 0 0;
    z-index:2;
    display:block;
    padding:28px;
}

.vsl-team-card-body small{
    display:block;
    color:#7DF3FF;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.76rem;
    font-weight:900;
    margin-bottom:10px;
}

.vsl-team-card-body strong{
    display:block;
    color:#fff;
    font-size:1.55rem;
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:900;
    margin-bottom:10px;
}

.vsl-team-card-body em{
    display:block;
    color:rgba(255,255,255,.78);
    font-style:normal;
    line-height:1.55;
    margin-bottom:16px;
}

.vsl-team-card-body b{
    color:#7DF3FF;
    font-size:.9rem;
}

.vsl-team-card:hover{
    transform:translateY(-12px) scale(1.018);
    border-color:rgba(125,243,255,.36);
    box-shadow:
        0 42px 110px rgba(0,0,0,.34),
        0 0 0 1px rgba(29,185,194,.12);
}

.vsl-team-card:hover .vsl-team-image{
    transform:scale(1.13);
    opacity:1;
}

/* Footer background, no large VSL watermark */
.vsl-footer::after,
.site-footer::after,
footer::after,
.vsl-footer-watermark{
    display:none !important;
    content:none !important;
}

.vsl-footer,
.site-footer,
footer{
    background:
        radial-gradient(circle at 16% 0%, rgba(29,185,194,.16), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #06101F 0%, #081B3C 48%, #06101F 100%) !important;
}

.vsl-footer-bg{
    opacity:.35 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size:18px 18px, 72px 72px, 72px 72px !important;
}

/* Footer icon logo */
.vsl-footer-logo img,
.site-footer .footer-brand img,
footer .footer-brand img,
.site-footer .footer-logo img,
footer .footer-logo img{
    max-width:116px !important;
    max-height:88px !important;
    object-fit:contain !important;
    background:#fff !important;
    border-radius:18px !important;
    padding:10px !important;
    filter:none !important;
}

@media (max-width:1180px){
    .vsl-mainbar-inner{
        grid-template-columns:170px minmax(380px, 1fr) auto !important;
        gap:16px !important;
        padding:0 22px !important;
    }

    .vsl-brand{
        width:165px !important;
        min-width:165px !important;
    }

    .vsl-brand img{
        max-width:160px !important;
    }

    .vsl-nav a{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .vsl-support-btn{
        min-width:170px !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .vsl-topbar-inner{
        padding:0 22px !important;
    }

    .vsl-email-pill strong,
    .vsl-location-pill strong{
        max-width:145px !important;
    }
}

@media (max-width:980px){
    .vsl-mainbar-inner{
        grid-template-columns:auto 1fr auto !important;
    }

    .vsl-brand{
        width:150px !important;
        min-width:150px !important;
    }

    .vsl-brand img{
        max-width:145px !important;
        max-height:52px !important;
    }

    .vsl-nav{
        display:none !important;
    }

    .vsl-email-pill,
    .vsl-location-pill,
    .vsl-socials{
        display:none !important;
    }

    .vsl-team-head{
        grid-template-columns:1fr;
    }

    .vsl-team-track{
        grid-auto-columns:minmax(280px, 62%);
    }
}

@media (max-width:680px){
    .vsl-mainbar-inner{
        padding:0 14px !important;
        gap:10px !important;
    }

    .vsl-brand{
        width:138px !important;
        min-width:138px !important;
    }

    .vsl-brand img{
        max-width:134px !important;
        max-height:48px !important;
    }

    .vsl-team-track{
        grid-auto-columns:86%;
    }

    .vsl-team-card{
        min-height:390px;
    }
}


/* STEP 54: clean rebuilt Specialties and Team sections */

/* Hide broken previous team/specialty styling conflicts by using new unique classes */
.vsl-specialties-clean-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 88% 22%, rgba(49,69,154,.26), transparent 34rem),
        linear-gradient(180deg, #06101F 0%, #102E72 50%, #06101F 100%) !important;
    color:#fff;
}

.vsl-specialties-bg{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.35;
    pointer-events:none;
}

.vsl-specialties-mark{
    position:absolute;
    right:6%;
    top:10%;
    font-size:23rem;
    font-weight:900;
    line-height:1;
    color:rgba(255,255,255,.045);
    pointer-events:none;
}

.vsl-specialties-head{
    position:relative;
    z-index:2;
    max-width:980px;
    margin:0 auto 3.2rem;
    text-align:center;
}

.vsl-specialties-head .eyebrow{
    color:#7DF3FF !important;
}

.vsl-specialties-head h2{
    margin:12px 0 18px;
    color:#fff;
    font-size:clamp(2.8rem,5.2vw,5.6rem);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
}

.vsl-specialties-head p{
    color:rgba(235,249,255,.80);
    font-size:1.08rem;
    line-height:1.8;
}

.vsl-specialties-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.vsl-specialty-card{
    min-height:260px;
    padding:28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    text-align:left;
    color:#fff;
    cursor:pointer;
    background:
        radial-gradient(circle at 20% 0%, rgba(29,185,194,.18), transparent 16rem),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    box-shadow:0 30px 90px rgba(0,0,0,.24);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:.32s cubic-bezier(.16,1,.3,1);
}

.vsl-specialty-card:hover{
    transform:translateY(-10px);
    border-color:rgba(125,243,255,.34);
    box-shadow:0 42px 110px rgba(0,0,0,.32);
}

.vsl-specialty-number{
    color:#7DF3FF;
    font-weight:900;
    letter-spacing:.12em;
}

.vsl-specialty-icon{
    float:right;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(145deg,#31459A,#1DB9C2);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    font-weight:900;
}

.vsl-specialty-card strong{
    display:block;
    clear:both;
    padding-top:28px;
    color:#fff;
    font-size:1.45rem;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-.035em;
}

.vsl-specialty-card em{
    display:block;
    margin-top:12px;
    color:rgba(235,249,255,.78);
    font-style:normal;
    line-height:1.6;
}

.vsl-specialty-card b{
    display:block;
    margin-top:18px;
    color:#7DF3FF;
    font-size:.9rem;
}

/* Team must be fully separate from Specialties */
.vsl-team-clean-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 42%, #06101F 100%) !important;
    color:#F6FBFF;
    border-top:0 !important;
}

.vsl-team-clean-noise{
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
    background-size:18px 18px;
    pointer-events:none;
}

.vsl-team-clean-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(64px);
    pointer-events:none;
}

.vsl-team-clean-orb-a{
    width:28rem;
    height:28rem;
    left:-10rem;
    top:8rem;
    background:rgba(29,185,194,.16);
}

.vsl-team-clean-orb-b{
    width:34rem;
    height:34rem;
    right:-12rem;
    top:10rem;
    background:rgba(49,69,154,.22);
}

.vsl-team-clean-head{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.68fr);
    gap:42px;
    align-items:end;
    margin-bottom:42px;
}

.vsl-team-clean-head .eyebrow{
    color:#7DF3FF !important;
}

.vsl-team-clean-head h2{
    margin:12px 0 0;
    max-width:930px;
    color:#fff;
    font-size:clamp(2.8rem,5vw,5.4rem);
    line-height:.92;
    letter-spacing:-.07em;
    font-weight:900;
}

.vsl-team-clean-head p{
    margin:0;
    color:rgba(235,249,255,.78);
    line-height:1.82;
    font-size:1.06rem;
    padding:24px;
    border-radius:26px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.vsl-team-clean-shell{
    position:relative;
    z-index:2;
}

.vsl-team-clean-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.vsl-team-clean-top span{
    display:block;
    color:#7DF3FF;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:900;
    margin-bottom:6px;
}

.vsl-team-clean-top strong{
    color:#fff;
    font-size:1.05rem;
}

.vsl-team-clean-controls{
    display:flex;
    gap:10px;
}

.vsl-team-clean-controls button{
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:2rem;
    cursor:pointer;
    transition:.25s ease;
}

.vsl-team-clean-controls button:hover{
    background:linear-gradient(135deg,#31459A,#1DB9C2);
    transform:translateY(-2px);
}

.vsl-team-clean-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(300px,31%);
    gap:22px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 4px 18px;
}

.vsl-team-clean-track::-webkit-scrollbar{
    height:9px;
}

.vsl-team-clean-track::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:999px;
}

.vsl-team-clean-track::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#31459A,#1DB9C2);
    border-radius:999px;
}

.vsl-team-clean-card{
    position:relative;
    scroll-snap-align:start;
    min-height:440px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    padding:0;
    text-align:left;
    color:#fff;
    cursor:pointer;
    background:#06101F;
    box-shadow:
        0 34px 100px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10);
    transition:.38s cubic-bezier(.16,1,.3,1);
}

.vsl-team-clean-card:hover{
    transform:translateY(-12px) scale(1.018);
    border-color:rgba(125,243,255,.36);
    box-shadow:0 42px 110px rgba(0,0,0,.34);
}

.vsl-team-clean-image{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.86;
    transform:scale(1.03);
    transition:.55s ease;
}

.vsl-team-clean-card:hover .vsl-team-clean-image{
    transform:scale(1.13);
    opacity:1;
}

.vsl-team-clean-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(5,12,28,.04) 0%, rgba(5,12,28,.28) 36%, rgba(5,12,28,.94) 100%),
        radial-gradient(circle at 22% 12%, rgba(29,185,194,.18), transparent 44%);
}

.vsl-team-clean-card-top{
    position:absolute;
    left:22px;
    right:22px;
    top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:2;
}

.vsl-team-clean-card-top span{
    color:#7DF3FF;
    font-weight:900;
    letter-spacing:.08em;
}

.vsl-team-clean-card-top b{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 40%),
        linear-gradient(145deg,#31459A,#1DB9C2);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    color:#fff;
}

.vsl-team-clean-card-body{
    position:absolute;
    inset:auto 0 0 0;
    z-index:2;
    display:block;
    padding:28px;
}

.vsl-team-clean-card-body small{
    display:block;
    color:#7DF3FF;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.76rem;
    font-weight:900;
    margin-bottom:10px;
}

.vsl-team-clean-card-body strong{
    display:block;
    color:#fff;
    font-size:1.55rem;
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:900;
    margin-bottom:10px;
}

.vsl-team-clean-card-body em{
    display:block;
    color:rgba(255,255,255,.78);
    font-style:normal;
    line-height:1.55;
    margin-bottom:16px;
}

.vsl-team-clean-card-body b{
    color:#7DF3FF;
    font-size:.9rem;
}

@media (max-width:980px){
    .vsl-specialties-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .vsl-team-clean-head{
        grid-template-columns:1fr;
    }

    .vsl-team-clean-track{
        grid-auto-columns:minmax(280px,62%);
    }
}

@media (max-width:680px){
    .vsl-specialties-grid{
        grid-template-columns:1fr;
    }

    .vsl-team-clean-track{
        grid-auto-columns:86%;
    }

    .vsl-team-clean-card{
        min-height:390px;
    }
}

/* STEP 55: health-grade visual cleanup, lighter gradients, header polish */

/* Modern health typography */
:root{
    --vsl-font-body:'Inter', Arial, sans-serif;
    --vsl-font-display:'Manrope','Inter', Arial, sans-serif;
    --vsl-blue:#31459A;
    --vsl-deep:#102E72;
    --vsl-teal:#4AB2BA;
    --vsl-bright:#1DB9C2;
    --vsl-pale:#D9EEF0;
    --vsl-ink:#07172A;
}

html,
body,
button,
input,
select,
textarea{
    font-family:var(--vsl-font-body) !important;
}

h1,h2,h3,h4,h5,h6,
.hero-title,
.vsl-specialties-clean-section h2,
.vsl-team-clean-section h2{
    font-family:var(--vsl-font-display) !important;
}

/* Header, less squeezed, smaller logo, cleaner premium balance */
.vsl-mainbar-inner{
    width:min(100%, 1320px) !important;
    max-width:1320px !important;
    min-height:78px !important;
    padding:0 42px !important;
    grid-template-columns:170px minmax(520px, 1fr) auto !important;
    gap:28px !important;
}

.vsl-brand{
    width:160px !important;
    min-width:160px !important;
    min-height:66px !important;
}

.vsl-brand img{
    max-width:158px !important;
    max-height:54px !important;
}

.vsl-nav{
    justify-self:center !important;
    max-width:620px !important;
    padding:7px !important;
}

.vsl-nav a{
    min-height:40px !important;
    padding:0 13px !important;
    font-size:.92rem !important;
}

.vsl-actions{
    gap:9px !important;
}

.vsl-search-btn{
    min-width:108px !important;
    min-height:46px !important;
    padding:0 16px !important;
}

.vsl-theme-btn,
.vsl-menu-btn{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
}

.vsl-support-btn{
    min-width:184px !important;
    min-height:46px !important;
    height:46px !important;
    padding:0 17px !important;
}

/* Topbar, tighter icons and no wrapping */
.vsl-topbar{
    background:
        radial-gradient(circle at 12% 50%, rgba(29,185,194,.34), transparent 22rem),
        linear-gradient(90deg, #31459A 0%, #102E72 50%, #1DB9C2 100%) !important;
}

.vsl-topbar-inner{
    width:min(100%, 1320px) !important;
    max-width:1320px !important;
    min-height:36px !important;
    padding:0 42px !important;
}

.vsl-topbar-left{
    font-size:.76rem !important;
}

.vsl-topbar-right{
    gap:7px !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
}

.vsl-contact-pill{
    height:25px !important;
    padding:0 10px !important;
    gap:6px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
}

.vsl-contact-pill strong{
    font-size:.74rem !important;
    white-space:nowrap !important;
}

.vsl-contact-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex:0 0 18px !important;
    font-size:.66rem !important;
}

.vsl-whatsapp-icon,
.vsl-wa-icon{
    font-size:.52rem !important;
    font-weight:950 !important;
    color:#fff !important;
}

.vsl-email-pill strong{
    max-width:165px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.vsl-location-pill strong{
    max-width:180px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.vsl-socials{
    gap:6px !important;
    flex:0 0 auto !important;
}

.vsl-socials a{
    width:27px !important;
    min-width:27px !important;
    height:27px !important;
    min-height:27px !important;
    flex:0 0 27px !important;
    font-size:.8rem !important;
}

/* Hero safe premium motion, no layout breaking */
#hero{
    isolation:isolate;
}

#hero h1,
#hero .hero-title,
#hero .hero-copy h1,
#hero .hero-content h1{
    letter-spacing:-.065em !important;
    font-weight:900 !important;
}

#hero.vsl-hero-motion-ready h1,
#hero.vsl-hero-motion-ready .hero-title,
#hero.vsl-hero-motion-ready .hero-copy h1,
#hero.vsl-hero-motion-ready .hero-content h1{
    animation:vslHeroTextIn .95s cubic-bezier(.16,1,.3,1) both;
}

#hero.vsl-hero-motion-ready p,
#hero.vsl-hero-motion-ready .hero-lead,
#hero.vsl-hero-motion-ready .hero-copy p,
#hero.vsl-hero-motion-ready .hero-content p{
    animation:vslHeroTextIn .95s cubic-bezier(.16,1,.3,1) .12s both;
}

#hero.vsl-hero-motion-ready .btn,
#hero.vsl-hero-motion-ready button,
#hero.vsl-hero-motion-ready a[class*="btn"]{
    animation:vslHeroButtonIn .9s cubic-bezier(.16,1,.3,1) .22s both;
}

#hero .btn,
#hero button,
#hero a[class*="btn"]{
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, filter .28s ease !important;
}

#hero .btn:hover,
#hero button:hover,
#hero a[class*="btn"]:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 18px 45px rgba(49,69,154,.22) !important;
    filter:saturate(1.08);
}

#hero .hero-card,
#hero .hero-promise-card,
#hero .hero-float-card,
#hero [class*="hero-card"]{
    transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease, border-color .3s ease !important;
}

#hero .hero-card:hover,
#hero .hero-promise-card:hover,
#hero .hero-float-card:hover,
#hero [class*="hero-card"]:hover{
    transform:translateY(-8px) !important;
    box-shadow:0 32px 90px rgba(3,16,45,.25) !important;
}

@keyframes vslHeroTextIn{
    from{
        opacity:0;
        transform:translateY(28px);
        filter:blur(4px);
    }
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

@keyframes vslHeroButtonIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Specialties, health website style, white to blue, not too much blue */
.vsl-specialties-clean-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0 !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(29,185,194,.18), transparent 26rem),
        radial-gradient(circle at 86% 18%, rgba(49,69,154,.13), transparent 28rem),
        radial-gradient(circle at 50% 70%, rgba(217,238,240,.70), transparent 34rem),
        linear-gradient(180deg, #FFFFFF 0%, #F6FBFF 26%, #D9EEF0 62%, #F7FCFF 100%) !important;
    color:var(--vsl-ink) !important;
}

.vsl-specialties-bg{
    opacity:.55 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(49,69,154,.16) 1px, transparent 0),
        linear-gradient(90deg, rgba(49,69,154,.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(29,185,194,.04) 1px, transparent 1px) !important;
    background-size:18px 18px, 68px 68px, 68px 68px !important;
}

.vsl-specialties-clean-section::after{
    content:"";
    position:absolute;
    right:-6rem;
    bottom:-8rem;
    width:36rem;
    height:36rem;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(29,185,194,.14), rgba(49,69,154,.05) 48%, transparent 70%);
    pointer-events:none;
}

.vsl-specialties-mark{
    color:rgba(49,69,154,.045) !important;
    opacity:.55 !important;
}

.vsl-specialties-head h2{
    color:var(--vsl-ink) !important;
    text-shadow:none !important;
}

.vsl-specialties-head p{
    color:#405A7A !important;
}

.vsl-specialty-card{
    color:var(--vsl-ink) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(29,185,194,.13), transparent 15rem),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,251,255,.86)) !important;
    border:1px solid rgba(49,69,154,.11) !important;
    box-shadow:
        0 24px 70px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.vsl-specialty-card:hover{
    transform:translateY(-9px) !important;
    border-color:rgba(29,185,194,.38) !important;
    box-shadow:0 34px 90px rgba(15,23,42,.12) !important;
}

.vsl-specialty-card strong{
    color:var(--vsl-ink) !important;
}

.vsl-specialty-card em{
    color:#506987 !important;
}

.vsl-specialty-card b,
.vsl-specialty-number{
    color:#1DB9C2 !important;
}

.vsl-specialty-icon{
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.34), transparent 42%),
        linear-gradient(145deg, #31459A, #1DB9C2) !important;
    color:#fff !important;
}

/* Team carousel, clean health-style polish */
.vsl-team-clean-section{
    position:relative;
    overflow:hidden;
    padding:8rem 0 !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(29,185,194,.18), transparent 28rem),
        radial-gradient(circle at 88% 12%, rgba(49,69,154,.13), transparent 30rem),
        linear-gradient(180deg, #F7FCFF 0%, #D9EEF0 42%, #102E72 100%) !important;
    color:#07172A !important;
}

.vsl-team-clean-noise{
    opacity:.45 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(49,69,154,.16) 1px, transparent 0),
        linear-gradient(90deg, rgba(49,69,154,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(29,185,194,.04) 1px, transparent 1px) !important;
    background-size:18px 18px, 68px 68px, 68px 68px !important;
}

.vsl-team-clean-head h2{
    color:#07172A !important;
}

.vsl-team-clean-head p{
    color:#405A7A !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(49,69,154,.10) !important;
    box-shadow:0 18px 55px rgba(15,23,42,.08) !important;
}

.vsl-team-clean-top span{
    color:#1DB9C2 !important;
}

.vsl-team-clean-top strong{
    color:#102E72 !important;
}

.vsl-team-clean-controls button{
    background:rgba(255,255,255,.74) !important;
    color:#102E72 !important;
    border:1px solid rgba(49,69,154,.12) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.08) !important;
}

.vsl-team-clean-controls button:hover{
    color:#fff !important;
}

.vsl-team-clean-card{
    min-height:430px !important;
    box-shadow:
        0 24px 74px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.vsl-team-clean-card:hover{
    transform:translateY(-10px) scale(1.014) !important;
}

.vsl-team-clean-track{
    padding-bottom:20px !important;
}

/* Footer, premium but less heavy, better transition */
.vsl-footer,
.site-footer,
footer{
    background:
        radial-gradient(circle at 16% 0%, rgba(29,185,194,.18), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgba(49,69,154,.22), transparent 34rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 48%, #06101F 100%) !important;
}

.vsl-footer::before{
    background:
        linear-gradient(180deg, rgba(217,238,240,.34) 0%, rgba(16,46,114,.72) 44%, rgba(8,27,60,0) 100%) !important;
}

.vsl-footer-bg{
    opacity:.38 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px) !important;
    background-size:18px 18px, 72px 72px, 72px 72px !important;
}

/* General button hover motion */
.btn,
.vsl-support-btn,
.vsl-search-btn,
.vsl-team-clean-controls button,
.vsl-footer-newsletter button{
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, filter .28s ease !important;
}

.btn:hover,
.vsl-support-btn:hover,
.vsl-search-btn:hover,
.vsl-team-clean-controls button:hover,
.vsl-footer-newsletter button:hover{
    transform:translateY(-3px) !important;
    filter:saturate(1.08);
}

/* Safe reveal motion */
.reveal-up{
    transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1) !important;
}

.vsl-float-hover{
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important;
}

.vsl-float-hover:hover{
    transform:translateY(-8px);
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* STEP 56: mobile-first smooth hero swipe and responsive polish */
#hero.vsl-hero-swipe-ready{
    position:relative;
    overflow:hidden;
    touch-action:pan-y;
    overscroll-behavior-x:contain;
}

#hero .vsl-swipe-slider{
    position:relative !important;
    overflow:hidden !important;
    touch-action:pan-y !important;
    user-select:none;
    -webkit-user-select:none;
    cursor:grab;
}

#hero .vsl-swipe-slider.vsl-is-dragging{
    cursor:grabbing;
}

#hero .vsl-swipe-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    min-height:100% !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(4%,0,0) scale(1.025);
    transition:
        opacity .68s cubic-bezier(.16,1,.3,1),
        transform .68s cubic-bezier(.16,1,.3,1),
        filter .68s ease !important;
    will-change:opacity, transform;
    z-index:0;
}

#hero .vsl-swipe-slide.vsl-swipe-current{
    position:relative !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translate3d(var(--vsl-drag-x, 0),0,0) scale(1) !important;
    z-index:2;
}

#hero .vsl-slide-out-left{
    opacity:0 !important;
    transform:translate3d(-5%,0,0) scale(.985) !important;
    z-index:1;
}

#hero .vsl-slide-out-right{
    opacity:0 !important;
    transform:translate3d(5%,0,0) scale(.985) !important;
    z-index:1;
}

#hero .vsl-slide-in-right,
#hero .vsl-slide-in-left{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
    z-index:2;
}

#hero .vsl-is-dragging .vsl-swipe-current{
    transition:none !important;
}

#hero .vsl-hero-item-in{
    animation:vslHeroMobileItemIn .78s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--vsl-item-delay, 0ms);
}

@keyframes vslHeroMobileItemIn{
    from{
        opacity:0;
        transform:translate3d(0,22px,0) scale(.982);
        filter:blur(4px);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0) scale(1);
        filter:blur(0);
    }
}

/* Hot mobile controls and hint */
.vsl-swipe-hint{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    z-index:20;
    display:none;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    color:#fff;
    font-size:.74rem;
    font-weight:900;
    background:
        linear-gradient(135deg, rgba(49,69,154,.86), rgba(29,185,194,.78));
    box-shadow:0 14px 34px rgba(15,23,42,.22);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
}

.vsl-swipe-hint b{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    line-height:1;
}

.vsl-swipe-hint.is-fading{
    opacity:0;
    transform:translateX(-50%) translateY(8px);
}

/* Improve hero buttons and cards on touch devices */
#hero .btn,
#hero button,
#hero a[class*="btn"]{
    -webkit-tap-highlight-color:transparent;
}

#hero .hero-card,
#hero .hero-promise-card,
#hero .hero-float-card,
#hero [class*="hero-card"]{
    will-change:transform;
}

/* Smooth image feel */
#hero .hero-slide,
#hero .vsl-swipe-slide{
    background-size:cover !important;
    background-position:center !important;
}

#hero .vsl-swipe-current{
    animation:vslSlideKenBurns 7.2s ease-in-out both;
}

@keyframes vslSlideKenBurns{
    from{ background-size:100% auto; }
    to{ background-size:105% auto; }
}

@media (prefers-reduced-motion:reduce){
    #hero .vsl-swipe-slide,
    #hero .vsl-hero-item-in,
    #hero .vsl-swipe-current{
        animation:none !important;
        transition:none !important;
    }
}

/* STEP 57: live animated dots and glow indicators */

/* Main living dot system */
.vsl-live-dot,
.vsl-top-dot,
.hero-promise-card li::before,
.hero-side-card li::before,
.hero-floating-card li::before,
.hero-card li::before,
[class*="promise"] li::before,
[class*="hero"] li::before,
.slider-dot,
.hero-dot,
[data-hero-dot],
.vsl-dot-active,
.dot,
[class*="dot"]:not(.dotless){
    position:relative;
    isolation:isolate;
}

/* Real element dots */
.vsl-live-dot,
.vsl-top-dot,
.slider-dot,
.hero-dot,
[data-hero-dot],
.vsl-dot-active,
.dot,
[class*="dot"]:not(.dotless){
    animation:
        vslDotBreath 2.6s ease-in-out infinite,
        vslDotGlow 3.8s ease-in-out infinite;
    animation-delay:var(--vsl-dot-delay, 0ms);
    will-change:transform, box-shadow, opacity;
}

/* Add a soft pulse ring to actual dots */
.vsl-live-dot::after,
.vsl-top-dot::after,
.slider-dot::after,
.hero-dot::after,
[data-hero-dot]::after,
.dot::after,
[class*="dot"]:not(.dotless)::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:999px;
    border:1px solid rgba(125,243,255,.46);
    opacity:0;
    transform:scale(.62);
    animation:vslDotRing 2.6s ease-out infinite;
    animation-delay:var(--vsl-dot-delay, 0ms);
    pointer-events:none;
    z-index:-1;
}

/* The promise/bullet dots created by ::before */
.hero-promise-card li::before,
.hero-side-card li::before,
.hero-floating-card li::before,
.hero-card li::before,
[class*="promise"] li::before,
[class*="hero"] li::before{
    animation:
        vslDotBreath 2.7s ease-in-out infinite,
        vslDotGlow 3.9s ease-in-out infinite;
    animation-delay:var(--vsl-dot-delay, 0ms);
    box-shadow:
        0 0 0 0 rgba(125,243,255,.34),
        0 0 18px rgba(125,243,255,.42) !important;
}

/* Small moving light sweep on live pill/dot areas */
.vsl-contact-pill,
.vsl-support-btn,
.vsl-search-btn,
.hero-promise-card,
.hero-side-card,
.hero-floating-card,
.hero-card{
    position:relative;
    overflow:hidden;
}

.vsl-contact-pill::after,
.vsl-support-btn::after,
.vsl-search-btn::after,
.hero-promise-card::after,
.hero-side-card::after,
.hero-floating-card::after,
.hero-card::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-65%;
    width:42%;
    height:180%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.16),
        transparent
    );
    transform:rotate(18deg);
    animation:vslSoftSweep 5.8s ease-in-out infinite;
    animation-delay:var(--vsl-sweep-delay, 0ms);
    pointer-events:none;
}

/* Slider dots look more touch-ready */
.slider-dot,
.hero-dot,
[data-hero-dot]{
    width:12px !important;
    height:12px !important;
    border-radius:999px !important;
    background:rgba(125,243,255,.55) !important;
    box-shadow:0 0 18px rgba(29,185,194,.28) !important;
    transition:
        width .25s ease,
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.slider-dot.active,
.hero-dot.active,
[data-hero-dot].active,
.vsl-dot-active{
    width:34px !important;
    background:linear-gradient(90deg,#31459A,#1DB9C2) !important;
    box-shadow:
        0 0 0 6px rgba(29,185,194,.12),
        0 0 28px rgba(29,185,194,.46) !important;
}

/* Topbar main promise dot, make it premium */
.vsl-top-dot{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    background:#7DF3FF !important;
    box-shadow:
        0 0 0 6px rgba(125,243,255,.12),
        0 0 22px rgba(125,243,255,.72) !important;
}

/* Keyframes */
@keyframes vslDotBreath{
    0%, 100%{
        transform:scale(1);
        opacity:.82;
    }
    45%{
        transform:scale(1.23);
        opacity:1;
    }
    70%{
        transform:scale(.94);
        opacity:.9;
    }
}

@keyframes vslDotGlow{
    0%, 100%{
        box-shadow:
            0 0 0 0 rgba(125,243,255,.0),
            0 0 14px rgba(125,243,255,.34);
    }
    50%{
        box-shadow:
            0 0 0 7px rgba(125,243,255,.12),
            0 0 26px rgba(125,243,255,.72);
    }
}

@keyframes vslDotRing{
    0%{
        opacity:.55;
        transform:scale(.62);
    }
    70%{
        opacity:0;
        transform:scale(1.7);
    }
    100%{
        opacity:0;
        transform:scale(1.9);
    }
}

@keyframes vslSoftSweep{
    0%, 68%, 100%{
        left:-70%;
        opacity:0;
    }
    72%{
        opacity:.72;
    }
    86%{
        left:120%;
        opacity:0;
    }
}

/* Stronger live feel on hero promise bullets */
#hero .hero-promise-card li,
#hero .hero-side-card li,
#hero .hero-floating-card li,
#hero .hero-card li{
    transition:transform .25s ease, color .25s ease;
}

#hero .hero-promise-card li:hover,
#hero .hero-side-card li:hover,
#hero .hero-floating-card li:hover,
#hero .hero-card li:hover{
    transform:translateX(4px);
    color:#fff !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
    .vsl-live-dot,
    .vsl-live-dot::after,
    .vsl-top-dot,
    .vsl-top-dot::after,
    .hero-promise-card li::before,
    .hero-side-card li::before,
    .hero-floating-card li::before,
    .hero-card li::before,
    [class*="promise"] li::before,
    [class*="hero"] li::before,
    .slider-dot,
    .slider-dot::after,
    .hero-dot,
    .hero-dot::after,
    [data-hero-dot],
    [data-hero-dot]::after,
    .dot,
    .dot::after,
    [class*="dot"]:not(.dotless),
    [class*="dot"]:not(.dotless)::after,
    .vsl-contact-pill::after,
    .vsl-support-btn::after,
    .vsl-search-btn::after,
    .hero-promise-card::after,
    .hero-side-card::after,
    .hero-floating-card::after,
    .hero-card::after{
        animation:none !important;
    }
}

/* STEP 58: mobile-first header, hero, arrows, text fitting and footer polish */

/* Sticky header fix */
.vsl-header,
header.vsl-header,
[data-vsl-header]{
    position:sticky !important;
    top:0 !important;
    z-index:5000 !important;
    width:100% !important;
    isolation:isolate;
}

body{
    overflow-x:hidden !important;
}

/* Header should not create dead space before hero */
main{
    margin-top:0 !important;
    padding-top:0 !important;
}

#hero,
.hero,
.hero-section,
.hero-slider,
#hero .hero-slider{
    margin-top:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}

/* Connect hero background fully to header, no curved top corners */
#hero,
#hero > *,
#hero .hero-slider,
#hero .hero-slide,
#hero .vsl-swipe-slider,
#hero .vsl-swipe-slide{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
}

#hero{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.18), transparent 28rem),
        radial-gradient(circle at 88% 4%, rgba(49,69,154,.16), transparent 30rem),
        linear-gradient(180deg, #F7FCFF 0%, #D9EEF0 18%, #102E72 100%) !important;
}

/* Cleaner desktop header spacing */
.vsl-mainbar-inner{
    grid-template-columns:155px minmax(500px,1fr) auto !important;
    gap:26px !important;
    max-width:1320px !important;
}

.vsl-brand{
    width:150px !important;
    min-width:150px !important;
}

.vsl-brand img{
    max-width:148px !important;
    max-height:50px !important;
}

.vsl-nav{
    justify-self:center !important;
}

.vsl-actions{
    justify-self:end !important;
}

/* Clean hero arrows, use moving arrows instead of noisy dots */
#hero .slider-dot,
#hero .hero-dot,
#hero [data-hero-dot],
#hero .dot,
#hero [class*="dot"]:not(.vsl-top-dot):not(.vsl-contact-icon):not(.dotless){
    animation:none !important;
    box-shadow:none !important;
}

#hero .slider-dot::after,
#hero .hero-dot::after,
#hero [data-hero-dot]::after{
    display:none !important;
}

#hero .hero-pagination,
#hero .slider-pagination,
#hero [class*="pagination"],
#hero [class*="dots"]{
    opacity:.42 !important;
    transform:scale(.86);
}

/* Animated hero arrow buttons */
#hero .hero-prev,
#hero .hero-next,
#hero .slider-prev,
#hero .slider-next,
#hero [data-hero-prev],
#hero [data-hero-next],
.vsl-mobile-hero-arrow{
    width:48px !important;
    height:48px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 42%),
        linear-gradient(145deg, rgba(49,69,154,.82), rgba(29,185,194,.72)) !important;
    color:#fff !important;
    font-size:1.8rem !important;
    line-height:1 !important;
    box-shadow:0 18px 44px rgba(3,16,45,.26) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, opacity .28s ease !important;
    animation:vslArrowBreathe 2.8s ease-in-out infinite;
}

#hero .hero-prev:hover,
#hero .hero-next:hover,
#hero .slider-prev:hover,
#hero .slider-next:hover,
#hero [data-hero-prev]:hover,
#hero [data-hero-next]:hover,
.vsl-mobile-hero-arrow:hover{
    transform:translateY(-3px) scale(1.05) !important;
    box-shadow:0 26px 58px rgba(3,16,45,.32) !important;
}

#hero .hero-prev,
#hero .slider-prev,
#hero [data-hero-prev],
.vsl-mobile-hero-arrow.is-prev{
    animation-name:vslArrowLeftPulse;
}

#hero .hero-next,
#hero .slider-next,
#hero [data-hero-next],
.vsl-mobile-hero-arrow.is-next{
    animation-name:vslArrowRightPulse;
}

@keyframes vslArrowBreathe{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
}

@keyframes vslArrowLeftPulse{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(-5px); }
}

@keyframes vslArrowRightPulse{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(5px); }
}

/* Better text fitting in cards, bubbles and buttons */
.btn,
button,
.vsl-support-btn,
.vsl-search-btn,
.vsl-contact-pill,
.vsl-team-clean-card,
.vsl-specialty-card,
.gaps-pro-card,
.solutions-pro-card,
.visual-category-card{
    overflow-wrap:break-word !important;
    word-break:normal !important;
}

.vsl-specialty-card strong,
.vsl-team-clean-card-body strong,
.gap-card-content strong,
.solutions-pro-card strong,
.visual-category-card strong{
    font-size:clamp(1.05rem, 2vw, 1.45rem) !important;
    line-height:1.12 !important;
}

.vsl-specialty-card em,
.vsl-team-clean-card-body em,
.gap-card-content small,
.solutions-pro-card p,
.visual-category-card p{
    font-size:clamp(.86rem, 1.4vw, 1rem) !important;
    line-height:1.55 !important;
}

.vsl-contact-pill strong,
.vsl-support-btn,
.vsl-search-btn{
    line-height:1.1 !important;
}

/* Footer, cleaner modern pattern and no huge watermark */
.vsl-footer,
.site-footer,
footer{
    background:
        radial-gradient(circle at 12% 8%, rgba(29,185,194,.18), transparent 28rem),
        radial-gradient(circle at 82% 8%, rgba(49,69,154,.23), transparent 32rem),
        linear-gradient(180deg, #102E72 0%, #081B3C 46%, #06101F 100%) !important;
}

.vsl-footer-bg{
    opacity:.38 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size:18px 18px, 72px 72px, 72px 72px !important;
}

.vsl-footer-watermark,
.vsl-footer::after,
.site-footer::after,
footer::after{
    display:none !important;
    content:none !important;
}

@media (prefers-reduced-motion:reduce){
    #hero .hero-prev,
    #hero .hero-next,
    #hero .slider-prev,
    #hero .slider-next,
    #hero [data-hero-prev],
    #hero [data-hero-next],
    .vsl-mobile-hero-arrow{
        animation:none !important;
    }
}

/* STEP 59: remove lower sticky mobile menu/action bar */
.mobile-action-bar,
.bottom-action-bar,
.mobile-bottom-bar,
.vsl-mobile-action-bar,
[class*="mobile-action-bar"],
[class*="bottom-action-bar"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(120%) !important;
}

body{
    padding-bottom:0 !important;
}

/* STEP 60: premium mobile menu, mature dark mode, footer columns and button fitting */

/* Dark mode, professional medical-tech, not flat/childish */
html[data-theme="dark"] body{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.12), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(49,69,154,.18), transparent 34rem),
        linear-gradient(180deg, #06101F 0%, #081B3C 42%, #06101F 100%) !important;
    color:#EAF7FF !important;
}

html[data-theme="dark"] .vsl-mainbar,
html[data-theme="dark"] .vsl-header,
html[data-theme="dark"] header.vsl-header{
    background:
        linear-gradient(180deg, rgba(6,16,31,.96), rgba(8,27,60,.88)) !important;
    border-bottom:1px solid rgba(125,243,255,.10) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .vsl-mainbar-inner{
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
}

html[data-theme="dark"] .vsl-nav,
html[data-theme="dark"] .vsl-search-btn,
html[data-theme="dark"] .vsl-theme-btn,
html[data-theme="dark"] .vsl-menu-btn{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.10) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] .vsl-nav a{
    color:rgba(246,251,255,.84) !important;
}

html[data-theme="dark"] .vsl-nav a.active,
html[data-theme="dark"] .vsl-nav a:hover{
    color:#7DF3FF !important;
    background:rgba(125,243,255,.10) !important;
}

html[data-theme="dark"] .vsl-brand img{
    filter:drop-shadow(0 10px 22px rgba(29,185,194,.18)) !important;
}

/* Fix menu button visual and click target */
.vsl-menu-btn,
[data-menu-toggle],
[data-vsl-menu-toggle],
button[aria-label*="menu" i],
button[aria-label*="navigation" i]{
    cursor:pointer !important;
    position:relative !important;
    z-index:5100 !important;
    -webkit-tap-highlight-color:transparent !important;
}

.vsl-menu-btn span,
.vsl-menu-btn i{
    pointer-events:none !important;
}

/* New reliable menu overlay */
.vsl-menu-overlay{
    position:fixed;
    inset:0;
    z-index:9000;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    background:rgba(3,9,24,.54);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
}

body.vsl-menu-open .vsl-menu-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.vsl-menu-panel{
    width:min(92vw, 440px);
    margin:14px 14px 14px auto;
    border-radius:32px;
    overflow:hidden;
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.18), transparent 24rem),
        radial-gradient(circle at 90% 10%, rgba(49,69,154,.22), transparent 28rem),
        linear-gradient(180deg, rgba(246,251,255,.98), rgba(232,245,250,.94)) !important;
    border:1px solid rgba(49,69,154,.12);
    box-shadow:0 36px 120px rgba(3,9,24,.28);
    transform:translateX(22px) scale(.98);
    transition:transform .34s cubic-bezier(.16,1,.3,1);
}

body.vsl-menu-open .vsl-menu-panel{
    transform:translateX(0) scale(1);
}

html[data-theme="dark"] .vsl-menu-panel{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.18), transparent 24rem),
        radial-gradient(circle at 90% 10%, rgba(49,69,154,.24), transparent 28rem),
        linear-gradient(180deg, rgba(8,27,60,.98), rgba(6,16,31,.96)) !important;
    border-color:rgba(255,255,255,.10);
}

.vsl-menu-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px;
    border-bottom:1px solid rgba(49,69,154,.10);
}

html[data-theme="dark"] .vsl-menu-panel-head{
    border-bottom-color:rgba(255,255,255,.10);
}

.vsl-menu-panel-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.vsl-menu-panel-brand img{
    width:112px;
    max-height:42px;
    object-fit:contain;
}

.vsl-menu-panel-brand span{
    display:block;
    color:#1DB9C2;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.vsl-menu-close{
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:#102E72;
    font-size:1.45rem;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 34px rgba(15,23,42,.10);
}

html[data-theme="dark"] .vsl-menu-close{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
}

.vsl-menu-panel-body{
    padding:18px 20px 22px;
}

.vsl-menu-promise{
    padding:16px;
    border-radius:22px;
    background:
        linear-gradient(135deg, rgba(49,69,154,.10), rgba(29,185,194,.11));
    color:#405A7A;
    line-height:1.55;
    margin-bottom:18px;
}

html[data-theme="dark"] .vsl-menu-promise{
    color:rgba(235,249,255,.80);
    background:rgba(255,255,255,.06);
}

.vsl-menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.vsl-menu-grid a,
.vsl-menu-grid button{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 14px;
    border-radius:18px;
    text-decoration:none;
    color:#102E72;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(49,69,154,.10);
    box-shadow:0 12px 32px rgba(15,23,42,.06);
    font-weight:800;
    line-height:1.1;
    text-align:left;
    cursor:pointer;
    transition:.25s ease;
}

.vsl-menu-grid a::after{
    content:"›";
    color:#1DB9C2;
    font-size:1.2rem;
}

.vsl-menu-grid a:hover,
.vsl-menu-grid button:hover{
    transform:translateY(-3px);
    border-color:rgba(29,185,194,.36);
    box-shadow:0 18px 42px rgba(15,23,42,.10);
}

html[data-theme="dark"] .vsl-menu-grid a,
html[data-theme="dark"] .vsl-menu-grid button{
    color:#F6FBFF;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.10);
}

.vsl-menu-cta{
    grid-column:1 / -1;
    color:#fff !important;
    background:linear-gradient(135deg,#31459A,#1DB9C2) !important;
    border:0 !important;
    justify-content:center !important;
    text-align:center !important;
}

.vsl-menu-contact{
    margin-top:16px;
    display:grid;
    gap:8px;
}

.vsl-menu-contact a,
.vsl-menu-contact span{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#405A7A;
    text-decoration:none;
    font-size:.9rem;
    overflow-wrap:anywhere;
}

html[data-theme="dark"] .vsl-menu-contact a,
html[data-theme="dark"] .vsl-menu-contact span{
    color:rgba(235,249,255,.78);
}

/* Fix words fitting inside all buttons */
.btn,
button,
a[class*="btn"],
.vsl-support-btn,
.vsl-search-btn,
.vsl-footer-newsletter button,
.vsl-footer-contact .btn,
.vsl-menu-grid a,
.vsl-menu-grid button{
    white-space:normal !important;
    line-height:1.08 !important;
    text-align:center;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto;
}

.vsl-search-btn{
    gap:7px !important;
}

.vsl-support-btn{
    font-size:.92rem !important;
}

/* Footer bottom columns and text fitting */
.vsl-footer-grid{
    align-items:start !important;
}

.vsl-footer-col,
.vsl-footer-brand,
.vsl-footer-contact{
    min-width:0 !important;
}

.vsl-footer-col a,
.vsl-footer-col span,
.vsl-footer-col button,
.vsl-footer-brand p,
.vsl-footer-contact a,
.vsl-footer-contact span{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}

.vsl-footer-newsletter div{
    min-width:0 !important;
}

.vsl-footer-newsletter input,
.vsl-footer-newsletter button{
    min-width:0 !important;
}

.vsl-footer-newsletter button{
    padding-left:14px !important;
    padding-right:14px !important;
}

/* Dark-mode theme button icon look */
.vsl-theme-btn{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.82), rgba(255,255,255,.22) 48%, transparent 49%),
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(246,251,255,.72)) !important;
    color:#102E72 !important;
}

html[data-theme="dark"] .vsl-theme-btn{
    background:
        radial-gradient(circle at 62% 34%, rgba(125,243,255,.22), transparent 28%),
        linear-gradient(145deg, rgba(16,46,114,.96), rgba(6,16,31,.94)) !important;
    color:#7DF3FF !important;
    box-shadow:
        inset 0 0 0 1px rgba(125,243,255,.14),
        0 16px 42px rgba(0,0,0,.24) !important;
}

/* Avoid dark mode making body look like a flat black slab */
html[data-theme="dark"] .vsl-specialties-clean-section,
html[data-theme="dark"] .vsl-team-clean-section{
    background:
        radial-gradient(circle at 16% 0%, rgba(29,185,194,.13), transparent 28rem),
        radial-gradient(circle at 86% 12%, rgba(49,69,154,.22), transparent 34rem),
        linear-gradient(180deg, #0E2448 0%, #D9EEF0 50%, #F7FCFF 100%) !important;
}

/* STEP 61: dark mode logo brand plate fix */

/*
   The Varenz logo should not be inverted, recolored or filtered.
   It should sit on a clean white presentation plate in dark mode,
   matching the brand-guide mockups for signage, plaques, banners and branded materials.
*/

.vsl-brand{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:18px !important;
    overflow:visible !important;
}

.vsl-brand img{
    display:block !important;
    object-fit:contain !important;
    object-position:left center !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}

/* Light mode, clean and flat */
html:not([data-theme="dark"]) .vsl-brand{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
}

/* Dark mode, proper brand plate */
html[data-theme="dark"] .vsl-brand{
    width:172px !important;
    min-width:172px !important;
    min-height:62px !important;
    padding:8px 12px !important;
    background:
        linear-gradient(145deg, #FFFFFF 0%, #F6F7F8 64%, #E9EEF0 100%) !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:
        0 18px 46px rgba(0,0,0,.30),
        0 0 0 1px rgba(29,185,194,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="dark"] .vsl-brand::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:14px;
    border:1px solid rgba(49,69,154,.06);
    pointer-events:none;
}

html[data-theme="dark"] .vsl-brand img{
    max-width:148px !important;
    max-height:44px !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}

/* Dark header should feel premium, but not swallow the logo */
html[data-theme="dark"] .vsl-mainbar{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.12), transparent 24rem),
        linear-gradient(180deg, rgba(6,16,31,.98), rgba(8,27,60,.94)) !important;
}

html[data-theme="dark"] .vsl-mainbar-inner{
    background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:
        0 22px 70px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Menu overlay logo also uses proper brand plate */
.vsl-menu-panel-brand img{
    background:#fff !important;
    border-radius:12px !important;
    padding:6px 8px !important;
    box-shadow:0 10px 28px rgba(15,23,42,.12) !important;
    filter:none !important;
    mix-blend-mode:normal !important;
}

/* Footer icon logo, keep on white card like branded plaque/signage */
.vsl-footer-logo{
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
}

.vsl-footer-logo img{
    background:#fff !important;
    border-radius:18px !important;
    padding:10px !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}

/* Prevent any previous dark-mode logo filters from winning */
html[data-theme="dark"] img[src*="varenz-word-logo"],
html[data-theme="dark"] img[src*="varenz-icon-logo"],
html[data-theme="dark"] img[src*="varenz-logo"]{
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}

/* STEP 62: premium Varenz blue-black dark mode */

/*
   Dark mode direction:
   - black and deep navy base
   - blue and teal glow from the logo
   - white wording
   - clean icon buttons
   - no childish flat black
*/

html[data-theme="dark"]{
    color-scheme:dark;
}

html[data-theme="dark"] body{
    background:
        radial-gradient(circle at 14% 4%, rgba(29,185,194,.18), transparent 26rem),
        radial-gradient(circle at 86% 0%, rgba(49,69,154,.22), transparent 32rem),
        radial-gradient(circle at 48% 34%, rgba(74,178,186,.08), transparent 36rem),
        linear-gradient(180deg, #050A14 0%, #081420 28%, #0B1E3F 64%, #050A14 100%) !important;
    color:#F6FBFF !important;
}

/* Header dark mode */
html[data-theme="dark"] .vsl-header,
html[data-theme="dark"] header.vsl-header{
    background:
        radial-gradient(circle at 18% 0%, rgba(29,185,194,.13), transparent 24rem),
        linear-gradient(180deg, rgba(5,10,20,.96), rgba(8,20,32,.92)) !important;
    border-bottom:1px solid rgba(125,243,255,.12) !important;
    box-shadow:0 22px 70px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .vsl-topbar{
    background:
        radial-gradient(circle at 16% 50%, rgba(29,185,194,.20), transparent 22rem),
        linear-gradient(90deg, #06101F 0%, #102E72 48%, #1DB9C2 100%) !important;
}

html[data-theme="dark"] .vsl-mainbar{
    background:
        linear-gradient(180deg, rgba(5,10,20,.88), rgba(8,20,32,.78)) !important;
}

html[data-theme="dark"] .vsl-mainbar-inner{
    background:
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.028)) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Keep real word logo readable by using proper white logo plate */
html[data-theme="dark"] .vsl-brand{
    background:
        linear-gradient(145deg, #FFFFFF 0%, #F6F7F8 68%, #E9EEF0 100%) !important;
    border:1px solid rgba(255,255,255,.75) !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,.30),
        0 0 0 1px rgba(29,185,194,.12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="dark"] .vsl-brand img{
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}

/* Navigation, white wording, teal active state */
html[data-theme="dark"] .vsl-nav{
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .vsl-nav a{
    color:rgba(246,251,255,.86) !important;
}

html[data-theme="dark"] .vsl-nav a.active,
html[data-theme="dark"] .vsl-nav a:hover{
    color:#FFFFFF !important;
    background:
        linear-gradient(135deg, rgba(49,69,154,.46), rgba(29,185,194,.24)) !important;
    box-shadow:inset 0 -2px 0 #7DF3FF !important;
}

/* Header buttons and icons */
html[data-theme="dark"] .vsl-search-btn,
html[data-theme="dark"] .vsl-theme-btn,
html[data-theme="dark"] .vsl-menu-btn{
    color:#FFFFFF !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.12), transparent 40%),
        linear-gradient(145deg, rgba(16,46,114,.92), rgba(5,10,20,.88)) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:
        0 16px 42px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .vsl-search-btn:hover,
html[data-theme="dark"] .vsl-theme-btn:hover,
html[data-theme="dark"] .vsl-menu-btn:hover{
    color:#FFFFFF !important;
    border-color:rgba(125,243,255,.34) !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), transparent 40%),
        linear-gradient(145deg, #31459A, #081420) !important;
}

html[data-theme="dark"] .vsl-support-btn{
    color:#FFFFFF !important;
    background:
        linear-gradient(135deg, #31459A 0%, #102E72 45%, #1DB9C2 100%) !important;
    border:1px solid rgba(125,243,255,.18) !important;
    box-shadow:
        0 20px 54px rgba(0,0,0,.30),
        0 0 0 6px rgba(29,185,194,.06) !important;
}

/* Topbar pills */
html[data-theme="dark"] .vsl-contact-pill{
    color:#FFFFFF !important;
    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.13) !important;
}

html[data-theme="dark"] .vsl-contact-pill strong{
    color:#FFFFFF !important;
}

html[data-theme="dark"] .vsl-contact-icon,
html[data-theme="dark"] .vsl-socials a{
    color:#FFFFFF !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.13) !important;
}

/* Mobile menu overlay, like reference but Varenz identity */
html[data-theme="dark"] .vsl-menu-overlay{
    background:
        linear-gradient(90deg, rgba(0,0,0,.62), rgba(3,9,24,.74)) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

html[data-theme="dark"] .vsl-menu-panel{
    background:
        radial-gradient(circle at 0% 8%, rgba(29,185,194,.18), transparent 20rem),
        radial-gradient(circle at 90% 8%, rgba(49,69,154,.24), transparent 24rem),
        linear-gradient(180deg, #081420 0%, #0B1730 46%, #06101F 100%) !important;
    color:#FFFFFF !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 38px 130px rgba(0,0,0,.54) !important;
}

html[data-theme="dark"] .vsl-menu-panel::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:72px;
    background:
        radial-gradient(circle at 50% 18%, rgba(29,185,194,.16), transparent 7rem),
        linear-gradient(180deg, rgba(29,185,194,.16), rgba(0,0,0,.34)) !important;
    pointer-events:none;
}

html[data-theme="dark"] .vsl-menu-panel-head,
html[data-theme="dark"] .vsl-menu-panel-body{
    position:relative;
    z-index:2;
}

html[data-theme="dark"] .vsl-menu-panel-head{
    border-bottom:1px solid rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .vsl-menu-panel-brand span{
    color:#7DF3FF !important;
}

html[data-theme="dark"] .vsl-menu-close{
    color:#FFFFFF !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .vsl-menu-promise{
    color:rgba(246,251,255,.80) !important;
    background:
        linear-gradient(135deg, rgba(49,69,154,.18), rgba(29,185,194,.09)) !important;
    border:1px solid rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .vsl-menu-grid a,
html[data-theme="dark"] .vsl-menu-grid button{
    color:#F6FBFF !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.032)) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:0 16px 42px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .vsl-menu-grid a:hover,
html[data-theme="dark"] .vsl-menu-grid button:hover{
    color:#FFFFFF !important;
    background:
        linear-gradient(135deg, rgba(49,69,154,.46), rgba(29,185,194,.18)) !important;
    border-color:rgba(125,243,255,.25) !important;
}

html[data-theme="dark"] .vsl-menu-grid a:first-child{
    background:
        linear-gradient(135deg, rgba(29,185,194,.18), rgba(49,69,154,.24)) !important;
    border-color:rgba(125,243,255,.18) !important;
}

html[data-theme="dark"] .vsl-menu-grid a::after{
    color:#7DF3FF !important;
}

html[data-theme="dark"] .vsl-menu-cta{
    color:#FFFFFF !important;
    background:
        linear-gradient(135deg, #31459A 0%, #1DB9C2 100%) !important;
    box-shadow:0 18px 50px rgba(29,185,194,.18) !important;
}

html[data-theme="dark"] .vsl-menu-contact a,
html[data-theme="dark"] .vsl-menu-contact span{
    color:rgba(246,251,255,.86) !important;
}

/* Hero and dark sections */
html[data-theme="dark"] #hero{
    background:
        radial-gradient(circle at 18% 0%, rgba(29,185,194,.16), transparent 30rem),
        radial-gradient(circle at 90% 0%, rgba(49,69,154,.24), transparent 32rem),
        linear-gradient(180deg, #06101F 0%, #0B1E3F 58%, #050A14 100%) !important;
}

html[data-theme="dark"] #hero h1,
html[data-theme="dark"] #hero h2,
html[data-theme="dark"] #hero h3,
html[data-theme="dark"] #hero p,
html[data-theme="dark"] #hero li,
html[data-theme="dark"] #hero span:not(.vsl-contact-icon){
    color:#FFFFFF !important;
}

html[data-theme="dark"] #hero .eyebrow,
html[data-theme="dark"] #hero .hero-eyebrow{
    color:#7DF3FF !important;
}

html[data-theme="dark"] #hero .hero-card,
html[data-theme="dark"] #hero .hero-promise-card,
html[data-theme="dark"] #hero [class*="hero-card"]{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.12), transparent 18rem),
        linear-gradient(145deg, rgba(49,69,154,.82), rgba(8,20,32,.88)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.30) !important;
}

/* Cards and common sections in dark mode */
html[data-theme="dark"] section{
    color:#F6FBFF;
}

html[data-theme="dark"] section h1,
html[data-theme="dark"] section h2,
html[data-theme="dark"] section h3,
html[data-theme="dark"] section h4,
html[data-theme="dark"] section strong{
    color:#FFFFFF !important;
}

html[data-theme="dark"] section p,
html[data-theme="dark"] section em,
html[data-theme="dark"] section small{
    color:rgba(235,249,255,.78) !important;
}

html[data-theme="dark"] .vsl-specialties-clean-section,
html[data-theme="dark"] .vsl-team-clean-section,
html[data-theme="dark"] .solutions-pro-section,
html[data-theme="dark"] .gaps-pro-section{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.14), transparent 28rem),
        radial-gradient(circle at 86% 6%, rgba(49,69,154,.22), transparent 34rem),
        linear-gradient(180deg, #050A14 0%, #0B1E3F 58%, #06101F 100%) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] .vsl-specialty-card,
html[data-theme="dark"] .vsl-team-clean-card,
html[data-theme="dark"] .solutions-pro-card,
html[data-theme="dark"] .gaps-pro-card,
html[data-theme="dark"] .visual-category-card{
    color:#FFFFFF !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(29,185,194,.13), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .vsl-specialty-card b,
html[data-theme="dark"] .vsl-team-clean-card-body b,
html[data-theme="dark"] .solutions-pro-card b,
html[data-theme="dark"] .gaps-pro-card b{
    color:#7DF3FF !important;
}

/* Footer dark mode */
html[data-theme="dark"] .vsl-footer,
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.16), transparent 26rem),
        radial-gradient(circle at 86% 8%, rgba(49,69,154,.24), transparent 34rem),
        linear-gradient(180deg, #081420 0%, #06101F 48%, #030712 100%) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] .vsl-footer h3,
html[data-theme="dark"] .vsl-footer h4,
html[data-theme="dark"] .vsl-footer strong,
html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4{
    color:#FFFFFF !important;
}

html[data-theme="dark"] .vsl-footer a,
html[data-theme="dark"] .vsl-footer p,
html[data-theme="dark"] .vsl-footer span,
html[data-theme="dark"] footer a,
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer span{
    color:rgba(246,251,255,.82) !important;
}

html[data-theme="dark"] .vsl-footer a:hover,
html[data-theme="dark"] footer a:hover{
    color:#7DF3FF !important;
}

html[data-theme="dark"] .vsl-footer-newsletter input{
    color:#FFFFFF !important;
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .vsl-footer-newsletter input::placeholder{
    color:rgba(246,251,255,.52) !important;
}

/* Icon color control */
html[data-theme="dark"] svg,
html[data-theme="dark"] i{
    color:currentColor !important;
}

html[data-theme="dark"] .vsl-specialty-icon,
html[data-theme="dark"] .vsl-team-clean-card-top b,
html[data-theme="dark"] .gap-number,
html[data-theme="dark"] .solution-icon{
    color:#FFFFFF !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 40%),
        linear-gradient(145deg, #31459A, #1DB9C2) !important;
}

/* STEP 63: solutions section dark mode fix */
html[data-theme="dark"] #solutions,
html[data-theme="dark"] .solutions-section,
html[data-theme="dark"] .solutions-pro-section,
html[data-theme="dark"] [id="solutions"]{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.14), transparent 24rem),
        radial-gradient(circle at 88% 8%, rgba(49,69,154,.20), transparent 30rem),
        linear-gradient(180deg, #06101F 0%, #0B1E3F 52%, #081420 100%) !important;
    color:#F6FBFF !important;
    position:relative;
    overflow:hidden;
}

html[data-theme="dark"] #solutions::before,
html[data-theme="dark"] .solutions-section::before,
html[data-theme="dark"] .solutions-pro-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:40px 40px;
    opacity:.22;
}

html[data-theme="dark"] #solutions > *,
html[data-theme="dark"] .solutions-section > *,
html[data-theme="dark"] .solutions-pro-section > *{
    position:relative;
    z-index:1;
}

html[data-theme="dark"] #solutions h1,
html[data-theme="dark"] #solutions h2,
html[data-theme="dark"] #solutions h3,
html[data-theme="dark"] #solutions h4,
html[data-theme="dark"] .solutions-section h1,
html[data-theme="dark"] .solutions-section h2,
html[data-theme="dark"] .solutions-section h3,
html[data-theme="dark"] .solutions-section h4,
html[data-theme="dark"] .solutions-pro-section h1,
html[data-theme="dark"] .solutions-pro-section h2,
html[data-theme="dark"] .solutions-pro-section h3,
html[data-theme="dark"] .solutions-pro-section h4{
    color:#FFFFFF !important;
}

html[data-theme="dark"] #solutions p,
html[data-theme="dark"] #solutions li,
html[data-theme="dark"] #solutions span,
html[data-theme="dark"] .solutions-section p,
html[data-theme="dark"] .solutions-section li,
html[data-theme="dark"] .solutions-section span,
html[data-theme="dark"] .solutions-pro-section p,
html[data-theme="dark"] .solutions-pro-section li,
html[data-theme="dark"] .solutions-pro-section span{
    color:rgba(240,248,255,.86) !important;
}

html[data-theme="dark"] #solutions .section-eyebrow,
html[data-theme="dark"] #solutions .eyebrow,
html[data-theme="dark"] .solutions-section .section-eyebrow,
html[data-theme="dark"] .solutions-section .eyebrow,
html[data-theme="dark"] .solutions-pro-section .section-eyebrow,
html[data-theme="dark"] .solutions-pro-section .eyebrow{
    color:#7DF3FF !important;
}

html[data-theme="dark"] #solutions .solution-card,
html[data-theme="dark"] #solutions .solutions-card,
html[data-theme="dark"] #solutions .solutions-pro-card,
html[data-theme="dark"] #solutions .visual-category-card,
html[data-theme="dark"] .solutions-section .solution-card,
html[data-theme="dark"] .solutions-section .solutions-card,
html[data-theme="dark"] .solutions-section .solutions-pro-card,
html[data-theme="dark"] .solutions-section .visual-category-card,
html[data-theme="dark"] .solutions-pro-section .solution-card,
html[data-theme="dark"] .solutions-pro-section .solutions-card,
html[data-theme="dark"] .solutions-pro-section .solutions-pro-card,
html[data-theme="dark"] .solutions-pro-section .visual-category-card{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.12), transparent 14rem),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    color:#FFFFFF !important;
}

html[data-theme="dark"] #solutions .solution-card *,
html[data-theme="dark"] #solutions .solutions-card *,
html[data-theme="dark"] #solutions .solutions-pro-card *,
html[data-theme="dark"] #solutions .visual-category-card *,
html[data-theme="dark"] .solutions-section .solution-card *,
html[data-theme="dark"] .solutions-section .solutions-card *,
html[data-theme="dark"] .solutions-section .solutions-pro-card *,
html[data-theme="dark"] .solutions-section .visual-category-card *,
html[data-theme="dark"] .solutions-pro-section .solution-card *,
html[data-theme="dark"] .solutions-pro-section .solutions-card *,
html[data-theme="dark"] .solutions-pro-section .solutions-pro-card *,
html[data-theme="dark"] .solutions-pro-section .visual-category-card *{
    color:inherit !important;
}

html[data-theme="dark"] #solutions .solution-card h3,
html[data-theme="dark"] #solutions .solutions-card h3,
html[data-theme="dark"] #solutions .solutions-pro-card h3,
html[data-theme="dark"] #solutions .visual-category-card h3,
html[data-theme="dark"] .solutions-pro-section .solution-card h3,
html[data-theme="dark"] .solutions-pro-section .solutions-card h3,
html[data-theme="dark"] .solutions-pro-section .solutions-pro-card h3,
html[data-theme="dark"] .solutions-pro-section .visual-category-card h3{
    color:#FFFFFF !important;
}

html[data-theme="dark"] #solutions .solution-card p,
html[data-theme="dark"] #solutions .solutions-card p,
html[data-theme="dark"] #solutions .solutions-pro-card p,
html[data-theme="dark"] #solutions .visual-category-card p,
html[data-theme="dark"] .solutions-pro-section .solution-card p,
html[data-theme="dark"] .solutions-pro-section .solutions-card p,
html[data-theme="dark"] .solutions-pro-section .solutions-pro-card p,
html[data-theme="dark"] .solutions-pro-section .visual-category-card p{
    color:rgba(240,248,255,.80) !important;
}

html[data-theme="dark"] #solutions .solution-icon,
html[data-theme="dark"] #solutions .visual-category-icon,
html[data-theme="dark"] #solutions .solution-number,
html[data-theme="dark"] .solutions-pro-section .solution-icon,
html[data-theme="dark"] .solutions-pro-section .visual-category-icon,
html[data-theme="dark"] .solutions-pro-section .solution-number{
    color:#FFFFFF !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 40%),
        linear-gradient(145deg, #31459A, #1DB9C2) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 12px 32px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] #solutions .solution-arrow,
html[data-theme="dark"] #solutions .card-arrow,
html[data-theme="dark"] .solutions-pro-section .solution-arrow,
html[data-theme="dark"] .solutions-pro-section .card-arrow{
    color:#FFFFFF !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] #solutions a,
html[data-theme="dark"] .solutions-section a,
html[data-theme="dark"] .solutions-pro-section a{
    color:#7DF3FF !important;
}

html[data-theme="dark"] #solutions a:hover,
html[data-theme="dark"] .solutions-section a:hover,
html[data-theme="dark"] .solutions-pro-section a:hover{
    color:#FFFFFF !important;
}

html[data-theme="dark"] #solutions .swiper-pagination-bullet,
html[data-theme="dark"] .solutions-pro-section .swiper-pagination-bullet{
    background:rgba(255,255,255,.28) !important;
    opacity:1 !important;
}

html[data-theme="dark"] #solutions .swiper-pagination-bullet-active,
html[data-theme="dark"] .solutions-pro-section .swiper-pagination-bullet-active{
    background:linear-gradient(135deg, #31459A, #1DB9C2) !important;
}

html[data-theme="dark"] #solutions .swiper-button-prev,
html[data-theme="dark"] #solutions .swiper-button-next,
html[data-theme="dark"] .solutions-pro-section .swiper-button-prev,
html[data-theme="dark"] .solutions-pro-section .swiper-button-next{
    color:#FFFFFF !important;
    background:
        linear-gradient(145deg, rgba(49,69,154,.88), rgba(29,185,194,.88)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:50% !important;
    box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}


/* STEP 65: safe dark-mode bugfix, section visibility and glass cleanup */

/* Never let a dark-mode patch hide sections */
#hero,
#about,
#gaps,
#solutions,
#specialties,
#supplies,
#compliance,
#procurement,
#operations,
#team,
#contact,
footer,
.vsl-footer{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}

/* Safe dark body, no broad destructive selectors */
html[data-theme="dark"] body{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.14), transparent 24rem),
        radial-gradient(circle at 86% 6%, rgba(49,69,154,.20), transparent 30rem),
        linear-gradient(180deg, #050A14 0%, #081420 36%, #0B1E3F 70%, #050A14 100%) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] main{
    background:transparent !important;
}

/* Real site sections only, targeted, no [class*=section] damage */
html[data-theme="dark"] #about,
html[data-theme="dark"] #gaps,
html[data-theme="dark"] #solutions,
html[data-theme="dark"] #specialties,
html[data-theme="dark"] #supplies,
html[data-theme="dark"] #compliance,
html[data-theme="dark"] #procurement,
html[data-theme="dark"] #operations,
html[data-theme="dark"] #team,
html[data-theme="dark"] #contact{
    background:
        radial-gradient(circle at 14% 0%, rgba(29,185,194,.12), transparent 22rem),
        radial-gradient(circle at 88% 10%, rgba(49,69,154,.16), transparent 26rem),
        linear-gradient(180deg, rgba(6,16,31,.98) 0%, rgba(8,20,32,.96) 52%, rgba(6,16,31,.99) 100%) !important;
    color:#F6FBFF !important;
    position:relative !important;
    overflow:hidden !important;
}

/* Soft glass pattern, targeted */
html[data-theme="dark"] #about::before,
html[data-theme="dark"] #gaps::before,
html[data-theme="dark"] #solutions::before,
html[data-theme="dark"] #specialties::before,
html[data-theme="dark"] #supplies::before,
html[data-theme="dark"] #compliance::before,
html[data-theme="dark"] #procurement::before,
html[data-theme="dark"] #operations::before,
html[data-theme="dark"] #team::before,
html[data-theme="dark"] #contact::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(125,243,255,.12) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:18px 18px, 72px 72px, 72px 72px;
    opacity:.36;
    z-index:0;
}

html[data-theme="dark"] #about > *,
html[data-theme="dark"] #gaps > *,
html[data-theme="dark"] #solutions > *,
html[data-theme="dark"] #specialties > *,
html[data-theme="dark"] #supplies > *,
html[data-theme="dark"] #compliance > *,
html[data-theme="dark"] #procurement > *,
html[data-theme="dark"] #operations > *,
html[data-theme="dark"] #team > *,
html[data-theme="dark"] #contact > *{
    position:relative;
    z-index:1;
}

/* Fix headings and content visibility */
html[data-theme="dark"] #about h1,
html[data-theme="dark"] #about h2,
html[data-theme="dark"] #about h3,
html[data-theme="dark"] #gaps h1,
html[data-theme="dark"] #gaps h2,
html[data-theme="dark"] #gaps h3,
html[data-theme="dark"] #solutions h1,
html[data-theme="dark"] #solutions h2,
html[data-theme="dark"] #solutions h3,
html[data-theme="dark"] #specialties h1,
html[data-theme="dark"] #specialties h2,
html[data-theme="dark"] #specialties h3,
html[data-theme="dark"] #supplies h1,
html[data-theme="dark"] #supplies h2,
html[data-theme="dark"] #supplies h3,
html[data-theme="dark"] #compliance h1,
html[data-theme="dark"] #compliance h2,
html[data-theme="dark"] #compliance h3,
html[data-theme="dark"] #procurement h1,
html[data-theme="dark"] #procurement h2,
html[data-theme="dark"] #procurement h3,
html[data-theme="dark"] #operations h1,
html[data-theme="dark"] #operations h2,
html[data-theme="dark"] #operations h3,
html[data-theme="dark"] #team h1,
html[data-theme="dark"] #team h2,
html[data-theme="dark"] #team h3,
html[data-theme="dark"] #contact h1,
html[data-theme="dark"] #contact h2,
html[data-theme="dark"] #contact h3{
    color:#FFFFFF !important;
    text-shadow:none !important;
}

html[data-theme="dark"] #about p,
html[data-theme="dark"] #gaps p,
html[data-theme="dark"] #solutions p,
html[data-theme="dark"] #specialties p,
html[data-theme="dark"] #supplies p,
html[data-theme="dark"] #compliance p,
html[data-theme="dark"] #procurement p,
html[data-theme="dark"] #operations p,
html[data-theme="dark"] #team p,
html[data-theme="dark"] #contact p,
html[data-theme="dark"] #about li,
html[data-theme="dark"] #gaps li,
html[data-theme="dark"] #solutions li,
html[data-theme="dark"] #specialties li,
html[data-theme="dark"] #supplies li,
html[data-theme="dark"] #compliance li,
html[data-theme="dark"] #procurement li,
html[data-theme="dark"] #operations li,
html[data-theme="dark"] #team li,
html[data-theme="dark"] #contact li{
    color:rgba(236,246,255,.84) !important;
}

/* Eyebrows */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-eyebrow,
html[data-theme="dark"] .vsl-section-label{
    color:#7DF3FF !important;
}

/* Glass cards, targeted common classes */
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .hero-promise-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .solutions-card,
html[data-theme="dark"] .solutions-pro-card,
html[data-theme="dark"] .visual-category-card,
html[data-theme="dark"] .gap-card,
html[data-theme="dark"] .gaps-pro-card,
html[data-theme="dark"] .vsl-specialty-card,
html[data-theme="dark"] .specialty-card,
html[data-theme="dark"] .vsl-team-clean-card,
html[data-theme="dark"] .vsl-team-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .supply-card,
html[data-theme="dark"] .compliance-card,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .operation-card,
html[data-theme="dark"] .contact-card{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.10), transparent 12rem),
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter:blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
    color:#FFFFFF !important;
}

/* Card text visibility */
html[data-theme="dark"] .hero-card *,
html[data-theme="dark"] .hero-promise-card *,
html[data-theme="dark"] .about-card *,
html[data-theme="dark"] .solution-card *,
html[data-theme="dark"] .solutions-card *,
html[data-theme="dark"] .solutions-pro-card *,
html[data-theme="dark"] .visual-category-card *,
html[data-theme="dark"] .gap-card *,
html[data-theme="dark"] .gaps-pro-card *,
html[data-theme="dark"] .vsl-specialty-card *,
html[data-theme="dark"] .specialty-card *,
html[data-theme="dark"] .vsl-team-clean-card *,
html[data-theme="dark"] .vsl-team-card *,
html[data-theme="dark"] .team-card *,
html[data-theme="dark"] .supply-card *,
html[data-theme="dark"] .compliance-card *,
html[data-theme="dark"] .process-card *,
html[data-theme="dark"] .operation-card *,
html[data-theme="dark"] .contact-card *{
    color:inherit !important;
}

/* Specifically kill pale blocks without killing layout */
html[data-theme="dark"] .solutions-pro-intro,
html[data-theme="dark"] .solutions-pro-head,
html[data-theme="dark"] .gaps-pro-intro,
html[data-theme="dark"] .vsl-team-clean-head p,
html[data-theme="dark"] .vsl-specialties-head,
html[data-theme="dark"] .vsl-team-clean-head{
    background:transparent !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] .vsl-team-clean-head p,
html[data-theme="dark"] .gaps-pro-intro,
html[data-theme="dark"] .solutions-pro-intro{
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(130%) !important;
}

/* Footer, targeted */
html[data-theme="dark"] footer,
html[data-theme="dark"] .vsl-footer{
    background:
        radial-gradient(circle at 12% 0%, rgba(29,185,194,.14), transparent 22rem),
        radial-gradient(circle at 86% 10%, rgba(49,69,154,.20), transparent 28rem),
        linear-gradient(180deg, #081420 0%, #06101F 52%, #030712 100%) !important;
    color:#F6FBFF !important;
}

html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4,
html[data-theme="dark"] .vsl-footer h3,
html[data-theme="dark"] .vsl-footer h4{
    color:#FFFFFF !important;
}

html[data-theme="dark"] footer a,
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer span,
html[data-theme="dark"] .vsl-footer a,
html[data-theme="dark"] .vsl-footer p,
html[data-theme="dark"] .vsl-footer span{
    color:rgba(236,246,255,.84) !important;
}

html[data-theme="dark"] footer a:hover,
html[data-theme="dark"] .vsl-footer a:hover{
    color:#7DF3FF !important;
}

/* Keep logo plate clean, do not recolor logo */
html[data-theme="dark"] .vsl-brand{
    background:#FFFFFF !important;
    border:1px solid rgba(255,255,255,.75) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] .vsl-brand img{
    filter:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
}



/* STEP 75: final section order spacing and upgraded contact */

#hero,
#about,
#gaps,
#supplies,
#solutions,
#compliance,
#procurement,
#operations,
#specialties,
#team,
#contact{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    min-height:auto !important;
}

#about,
#gaps,
#supplies,
#solutions,
#compliance,
#procurement,
#operations,
#specialties,
#team,
#contact{
    padding-top:clamp(42px, 4.2vw, 68px) !important;
    padding-bottom:clamp(42px, 4.2vw, 68px) !important;
}

#specialties,
#team{
    padding-top:clamp(36px, 3.8vw, 58px) !important;
    padding-bottom:clamp(36px, 3.8vw, 58px) !important;
}

section + section{
    margin-top:0 !important;
}

.vsl-section-head,
.vsl-specialties-head,
.vsl-team-clean-head,
.solutions-pro-head,
.gaps-pro-intro{
    margin-top:0 !important;
    margin-bottom:clamp(18px, 2.4vw, 30px) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

.vsl-specialties-grid,
.vsl-team-clean-shell,
.vsl-team-clean-track,
.vsl-card-grid,
.solutions-pro-grid{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* Upgraded contact */
.vsl-contact-upgraded{
    position:relative;
    overflow:hidden;
}

.vsl-contact-upgraded::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 15% 10%, rgba(29,185,194,.18), transparent 24rem),
        radial-gradient(circle at 85% 20%, rgba(49,69,154,.20), transparent 28rem);
    opacity:.8;
}

.vsl-contact-upgraded > *{
    position:relative;
    z-index:1;
}

.vsl-contact-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(340px, .95fr);
    gap:clamp(22px, 4vw, 54px);
    align-items:stretch;
}

.vsl-contact-copy h2{
    max-width:900px;
    margin:0 0 18px;
    font-size:clamp(42px, 6vw, 86px);
    line-height:.95;
    letter-spacing:-.06em;
}

.vsl-contact-copy p{
    max-width:780px;
    margin:0;
    font-size:clamp(17px, 1.6vw, 22px);
    line-height:1.7;
    color:rgba(236,246,255,.82);
}

.vsl-contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.vsl-contact-panel{
    padding:clamp(22px, 3vw, 36px);
    border-radius:32px;
    background:
        radial-gradient(circle at 10% 0%, rgba(29,185,194,.16), transparent 15rem),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 28px 80px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
}

.vsl-contact-brandline{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    color:#fff;
}

.vsl-contact-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    background:linear-gradient(135deg, #1DB9C2, #31459A);
    box-shadow:0 0 0 8px rgba(29,185,194,.12);
}

.vsl-contact-methods{
    display:grid;
    gap:12px;
}

.vsl-contact-methods a,
.vsl-contact-methods div{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:4px 14px;
    align-items:center;
    padding:16px;
    border-radius:20px;
    text-decoration:none;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
}

.vsl-contact-methods span{
    grid-row:1 / span 2;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg, #31459A, #1DB9C2);
    color:#fff;
    font-weight:900;
}

.vsl-contact-methods b{
    font-size:16px;
    color:#fff;
}

.vsl-contact-methods em{
    font-style:normal;
    font-size:13px;
    color:rgba(236,246,255,.72);
}

.vsl-contact-support-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    margin-top:24px;
}

.vsl-contact-support-card{
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
    border:1px solid rgba(255,255,255,.11);
    color:#fff;
    box-shadow:0 18px 52px rgba(0,0,0,.18);
}

.vsl-contact-support-card span{
    display:inline-grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:16px;
    margin-bottom:18px;
    background:linear-gradient(135deg, #31459A, #1DB9C2);
    font-weight:900;
}

.vsl-contact-support-card h3{
    margin:0 0 8px;
    color:#fff;
}

.vsl-contact-support-card p{
    margin:0;
    color:rgba(236,246,255,.78);
    line-height:1.6;
}

/* STEP 76B: active premium healthcare header
   Final scoped header layer.
   Varenz deep blue, teal, pale aqua and clinical white only.
*/

:root {
    --vsl-header-deep: #31459a;
    --vsl-header-deeper: #18286f;
    --vsl-header-teal: #4ab2ba;
    --vsl-header-bright: #1db9c2;
    --vsl-header-aqua: #d9eef0;
    --vsl-header-white: #f6f7f8;
    --vsl-header-ink: #17213f;
    --vsl-header-muted: #68758d;
}

html {
    scroll-padding-top: 112px;
}

.vsl-header.vsl-pro-header-v2 {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vsl-pro-header-v2 .vsl-topbar {
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    background:
        linear-gradient(
            100deg,
            var(--vsl-header-deeper),
            var(--vsl-header-deep) 58%,
            var(--vsl-header-teal)
        ) !important;
}

.vsl-pro-header-v2 .vsl-topbar-inner {
    width: min(1320px, calc(100% - 40px)) !important;
    min-height: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.vsl-pro-header-v2 .vsl-topbar-promise {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.vsl-pro-header-v2 .vsl-topbar-signal {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #9bf7f5 !important;
    box-shadow:
        0 0 0 4px rgba(155, 247, 245, 0.12),
        0 0 16px rgba(155, 247, 245, 0.65) !important;
}

.vsl-pro-header-v2 .vsl-topbar-contact {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.vsl-pro-header-v2 .vsl-topbar-contact > a,
.vsl-pro-header-v2 .vsl-topbar-contact > span {
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: transparent !important;
    font-size: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.vsl-pro-header-v2 .vsl-topbar-contact > :first-child {
    border-left: 0 !important;
}

.vsl-pro-header-v2 .vsl-topbar-contact span span,
.vsl-pro-header-v2 .vsl-topbar-contact a span {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

.vsl-pro-header-v2 .vsl-topbar-contact strong {
    color: #fff !important;
    font-weight: 700 !important;
}

.vsl-pro-header-v2 .vsl-mainbar {
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(49, 69, 154, 0.1) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 28px rgba(24, 40, 111, 0.045) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    transition:
        background 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease !important;
}

.vsl-pro-header-v2 .vsl-mainbar-inner {
    width: min(1320px, calc(100% - 40px)) !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns:
        minmax(172px, 205px)
        minmax(470px, 1fr)
        auto !important;
    align-items: center !important;
    gap: clamp(18px, 2.2vw, 34px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vsl-pro-header-v2 .vsl-brand {
    width: 188px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.vsl-pro-header-v2 .vsl-brand::before,
.vsl-pro-header-v2 .vsl-brand::after {
    display: none !important;
}

.vsl-pro-header-v2 .vsl-brand img {
    width: auto !important;
    max-width: 186px !important;
    height: 47px !important;
    max-height: 47px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.vsl-pro-header-v2 .vsl-nav {
    min-width: 0 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 auto !important;
    padding: 3px !important;
    border: 1px solid rgba(49, 69, 154, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(246, 247, 248, 0.75) !important;
    box-shadow: none !important;
}

.vsl-pro-header-v2 .vsl-nav a {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #35415c !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition:
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease !important;
}

.vsl-pro-header-v2 .vsl-nav a::after {
    display: none !important;
}

.vsl-pro-header-v2 .vsl-nav a:hover,
.vsl-pro-header-v2 .vsl-nav a.active {
    color: var(--vsl-header-deep) !important;
    background:
        linear-gradient(
            135deg,
            var(--vsl-header-aqua),
            #fff
        ) !important;
    transform: translateY(-1px) !important;
}

.vsl-pro-header-v2 .vsl-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}

.vsl-pro-header-v2 .vsl-search-btn,
.vsl-pro-header-v2 .vsl-theme-btn,
.vsl-pro-header-v2 .vsl-support-btn,
.vsl-pro-header-v2 .vsl-menu-btn {
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease !important;
}

.vsl-pro-header-v2 .vsl-search-btn {
    min-width: 98px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(49, 69, 154, 0.13) !important;
    color: var(--vsl-header-deep) !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.vsl-pro-header-v2 .vsl-search-btn svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
}

.vsl-pro-header-v2 .vsl-theme-btn {
    width: 42px !important;
    min-width: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(49, 69, 154, 0.13) !important;
    color: var(--vsl-header-deep) !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 17px !important;
}

.vsl-pro-header-v2 .vsl-support-btn {
    min-width: 150px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(29, 185, 194, 0.4) !important;
    color: #fff !important;
    background:
        linear-gradient(
            110deg,
            var(--vsl-header-deep),
            var(--vsl-header-bright)
        ) !important;
    box-shadow: 0 10px 24px rgba(29, 185, 194, 0.2) !important;
    font-size: 12px !important;
}

.vsl-pro-header-v2 .vsl-support-label-short {
    display: none !important;
}

.vsl-pro-header-v2 .vsl-support-arrow {
    font-size: 14px !important;
}

.vsl-pro-header-v2 .vsl-menu-btn {
    width: 42px !important;
    min-width: 42px !important;
    display: none !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 1px solid rgba(49, 69, 154, 0.13) !important;
    color: var(--vsl-header-deep) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.vsl-pro-header-v2 .vsl-menu-btn span {
    position: static !important;
    width: 18px !important;
    height: 2px !important;
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform: none !important;
    opacity: 1 !important;
}

.vsl-pro-header-v2 .vsl-search-btn:hover,
.vsl-pro-header-v2 .vsl-theme-btn:hover,
.vsl-pro-header-v2 .vsl-menu-btn:hover {
    border-color: rgba(29, 185, 194, 0.5) !important;
    background: var(--vsl-header-aqua) !important;
    transform: translateY(-2px) !important;
}

.vsl-pro-header-v2 .vsl-support-btn:hover {
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(29, 185, 194, 0.3) !important;
    transform: translateY(-2px) !important;
}

.vsl-pro-header-v2 button:focus-visible,
.vsl-pro-header-v2 a:focus-visible {
    outline: 3px solid rgba(29, 185, 194, 0.52) !important;
    outline-offset: 3px !important;
}

.vsl-header.vsl-pro-header-v2.is-scrolled .vsl-mainbar,
.vsl-header.vsl-pro-header-v2.vsl-is-stuck .vsl-mainbar {
    border-bottom-color: rgba(49, 69, 154, 0.16) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 46px rgba(24, 40, 111, 0.12) !important;
    backdrop-filter: blur(24px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-mainbar {
    border-bottom-color: rgba(74, 178, 186, 0.18) !important;
    background: rgba(3, 7, 18, 0.9) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-mainbar-inner {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-brand {
    width: 190px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(217, 238, 240, 0.75) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.97) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-brand img {
    max-width: 170px !important;
    height: 42px !important;
    filter: none !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-nav {
    border-color: rgba(74, 178, 186, 0.16) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-nav a {
    color: rgba(246, 247, 248, 0.78) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-nav a:hover,
html[data-theme="dark"] .vsl-pro-header-v2 .vsl-nav a.active {
    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            rgba(49, 69, 154, 0.58),
            rgba(74, 178, 186, 0.2)
        ) !important;
}

html[data-theme="dark"] .vsl-pro-header-v2 .vsl-search-btn,
html[data-theme="dark"] .vsl-pro-header-v2 .vsl-theme-btn,
html[data-theme="dark"] .vsl-pro-header-v2 .vsl-menu-btn {
    border-color: rgba(74, 178, 186, 0.2) !important;
    color: #f6f7f8 !important;
    background: rgba(255, 255, 255, 0.07) !important;
}


/* ==========================================================
   VARENZ PREMIUM ABOUT SECTION
   Targeted upgrade: generated 2026-07
   ========================================================== */

.about-vsl-premium {
    --about-blue: var(--deep-blue, #31459a);
    --about-blue-deep: #17286f;
    --about-teal: var(--teal, #4ab2ba);
    --about-bright: var(--bright-teal, #1db9c2);
    --about-aqua: var(--pale-aqua, #d9eef0);
    --about-ink: var(--text, #111827);
    --about-muted: var(--muted, #667085);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(76px, 9vw, 138px) 0 clamp(66px, 8vw, 118px);
    background:
        radial-gradient(circle at 83% 22%, rgba(74,178,186,.18), transparent 28%),
        radial-gradient(circle at 10% 65%, rgba(49,69,154,.10), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 50%, #f4fbfc 100%);
}

.about-vsl-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(rgba(49,69,154,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49,69,154,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 84%, transparent);
}

.about-vsl-premium::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(49,69,154,.18),
        rgba(29,185,194,.45),
        transparent
    );
}

.about-vsl-container {
    position: relative;
    z-index: 2;
    width: min(1280px, 92%);
    margin-inline: auto;
}

.about-vsl-ambient,
.about-vsl-ambient__orb,
.about-vsl-ambient__grid,
.about-vsl-ambient__mark {
    position: absolute;
    pointer-events: none;
}

.about-vsl-ambient {
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.about-vsl-ambient__orb {
    border-radius: 50%;
    filter: blur(4px);
    opacity: .7;
}

.about-vsl-ambient__orb--one {
    width: min(48vw, 680px);
    aspect-ratio: 1;
    right: -15%;
    top: 6%;
    background: radial-gradient(circle, rgba(29,185,194,.18), transparent 67%);
    animation: aboutAmbientDrift 14s ease-in-out infinite alternate;
}

.about-vsl-ambient__orb--two {
    width: min(34vw, 480px);
    aspect-ratio: 1;
    left: -10%;
    bottom: -15%;
    background: radial-gradient(circle, rgba(49,69,154,.14), transparent 68%);
    animation: aboutAmbientDrift 18s ease-in-out infinite alternate-reverse;
}

.about-vsl-ambient__grid {
    width: 360px;
    height: 360px;
    right: 4%;
    bottom: 10%;
    opacity: .24;
    transform: perspective(700px) rotateX(58deg) rotateZ(-10deg);
    background:
        linear-gradient(rgba(74,178,186,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74,178,186,.25) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle, #000, transparent 72%);
}

.about-vsl-ambient__mark {
    right: 2%;
    top: 8%;
    color: rgba(49,69,154,.035);
    font-size: clamp(250px, 33vw, 540px);
    font-weight: 900;
    line-height: .8;
    transform: rotate(-8deg);
    user-select: none;
}

.about-vsl-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
    gap: clamp(34px, 5vw, 78px);
    align-items: center;
}

.about-vsl-copy {
    position: relative;
    z-index: 4;
    max-width: 590px;
}

.about-vsl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 22px;
    color: var(--about-teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-vsl-kicker > span {
    width: 34px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--about-blue), var(--about-bright));
}

.about-vsl-title {
    margin: 0;
    color: var(--about-blue-deep);
    font-size: clamp(48px, 5.4vw, 82px);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: .98;
    text-wrap: balance;
}

.about-vsl-title > span {
    display: block;
}

.about-vsl-title em {
    position: relative;
    color: var(--about-teal);
    font-style: normal;
}

.about-vsl-title em::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: .04em;
    z-index: -1;
    height: .16em;
    border-radius: 999px;
    opacity: .34;
    background: linear-gradient(90deg, var(--about-aqua), var(--about-bright));
    transform: rotate(-1deg);
}

.about-vsl-summary {
    max-width: 56ch;
    margin: 28px 0 0;
    color: var(--about-muted);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.75;
}

.about-vsl-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    margin-top: 29px;
}

.about-vsl-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    color: var(--about-blue-deep);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.about-vsl-trust__item:first-child {
    padding-left: 0;
}

.about-vsl-trust__item + .about-vsl-trust__item {
    border-left: 1px solid rgba(49,69,154,.18);
}

.about-vsl-trust__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--about-teal);
}

.about-vsl-trust__icon svg,
.about-vsl-floating__icon svg,
.about-vsl-step__node svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-vsl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.about-vsl-actions .btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-inline: 23px;
    border-radius: 999px;
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.about-vsl-actions .btn:hover {
    transform: translateY(-3px);
}

.about-vsl-primary {
    box-shadow: 0 17px 38px rgba(29,185,194,.24);
}

.about-vsl-secondary {
    border-color: rgba(49,69,154,.20);
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(15px);
}

.about-vsl-action-arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.about-vsl-actions .btn:hover .about-vsl-action-arrow {
    transform: translate(3px, -2px);
}

.about-vsl-visual {
    position: relative;
    min-height: clamp(560px, 52vw, 710px);
    perspective: 1100px;
}

.about-vsl-visual__frame {
    position: absolute;
    inset: 5% 2% 3% 4%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: clamp(30px, 4vw, 54px);
    background: #dceef2;
    box-shadow:
        0 34px 95px rgba(20,43,88,.18),
        0 12px 34px rgba(29,185,194,.12),
        inset 0 1px 0 rgba(255,255,255,.82);
    transform:
        translate3d(var(--about-image-x, 0), var(--about-image-y, 0), 0)
        rotateY(-2deg);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.about-vsl-visual__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(to top, rgba(9,31,75,.26), transparent 47%);
}

.about-vsl-visual__frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.035);
    filter: saturate(.92) contrast(1.03);
}

.about-vsl-visual__wash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 75% 28%, rgba(29,185,194,.26), transparent 34%),
        linear-gradient(135deg, rgba(49,69,154,.14), transparent 46%);
}

.about-vsl-visual__scan {
    position: absolute;
    inset: -20% 0 auto;
    z-index: 4;
    height: 28%;
    opacity: .28;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.86),
        transparent
    );
    animation: aboutScan 9s ease-in-out infinite;
}

.about-vsl-floating {
    position: absolute;
    z-index: 7;
    width: min(285px, 42%);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 19px;
    color: #17286f;
    background: rgba(255,255,255,.68);
    box-shadow:
        0 18px 52px rgba(20,43,88,.16),
        inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transform:
        translate3d(
            calc(var(--about-card-x, 0px) + var(--about-pointer-x, 0px)),
            calc(var(--about-card-y, 0px) + var(--about-pointer-y, 0px)),
            0
        );
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease,
        border-color .3s ease;
}

.about-vsl-floating:hover {
    border-color: rgba(29,185,194,.52);
    box-shadow:
        0 24px 64px rgba(20,43,88,.20),
        0 0 0 1px rgba(29,185,194,.12),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.about-vsl-floating--integrity {
    top: 1%;
    right: -2%;
    animation: aboutFloatOne 7s ease-in-out infinite;
}

.about-vsl-floating--documents {
    left: -3%;
    bottom: 11%;
    animation: aboutFloatTwo 8.4s ease-in-out infinite;
}

.about-vsl-floating--coordination {
    right: 3%;
    bottom: -1%;
    animation: aboutFloatThree 9.3s ease-in-out infinite;
}

.about-vsl-floating__status {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--about-bright);
    box-shadow: 0 0 0 6px rgba(29,185,194,.12);
    animation: aboutPulse 2.4s ease-out infinite;
}

.about-vsl-floating__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 9px;
    border-radius: 13px;
    color: var(--about-teal);
    background: linear-gradient(
        145deg,
        rgba(217,238,240,.88),
        rgba(255,255,255,.84)
    );
}

.about-vsl-floating__copy {
    min-width: 0;
}

.about-vsl-floating__copy strong,
.about-vsl-floating__copy small {
    display: block;
}

.about-vsl-floating__copy strong {
    padding-right: 12px;
    font-size: 14px;
    line-height: 1.25;
}

.about-vsl-floating__copy small {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.about-vsl-signal {
    position: absolute;
    z-index: 6;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    color: #29418d;
    background: rgba(255,255,255,.56);
    box-shadow: 0 10px 28px rgba(20,43,88,.11);
    backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-vsl-signal::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--about-bright);
    box-shadow: 0 0 10px rgba(29,185,194,.6);
}

.about-vsl-signal--one {
    top: 28%;
    left: 0;
}

.about-vsl-signal--two {
    top: 48%;
    right: -1%;
}

.about-vsl-journey {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(52px, 7vw, 84px);
    padding: 30px clamp(20px, 3vw, 40px);
    border: 1px solid rgba(49,69,154,.11);
    border-radius: 30px;
    background: rgba(255,255,255,.56);
    box-shadow:
        0 20px 55px rgba(20,43,88,.08),
        inset 0 1px 0 rgba(255,255,255,.84);
    backdrop-filter: blur(18px);
}

.about-vsl-journey__track {
    position: absolute;
    top: 56px;
    left: 12.5%;
    right: 12.5%;
    z-index: 0;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(49,69,154,.12);
}

.about-vsl-journey__track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--about-blue),
        var(--about-teal),
        var(--about-bright)
    );
    box-shadow: 0 0 16px rgba(29,185,194,.42);
}

.about-vsl-premium.is-about-visible .about-vsl-journey__track span {
    animation: aboutJourneyDraw 1.3s .7s cubic-bezier(.22,1,.36,1) forwards;
}

.about-vsl-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 clamp(13px, 2vw, 28px);
    text-align: center;
}

.about-vsl-step + .about-vsl-step {
    border-left: 1px solid rgba(49,69,154,.09);
}

.about-vsl-step__node {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    padding: 14px;
    border: 1px solid rgba(29,185,194,.24);
    border-radius: 18px;
    color: var(--about-teal);
    background: linear-gradient(145deg, #ffffff, #eaf7f8);
    box-shadow: 0 12px 30px rgba(29,185,194,.13);
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
}

.about-vsl-step:hover .about-vsl-step__node {
    transform: translateY(-5px) rotate(-2deg);
    box-shadow: 0 19px 38px rgba(29,185,194,.20);
}

.about-vsl-step__number {
    display: block;
    margin-bottom: 7px;
    color: var(--about-teal);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.about-vsl-step h3 {
    margin: 0;
    color: var(--about-blue-deep);
    font-size: 17px;
    font-weight: 850;
}

.about-vsl-step p {
    max-width: 24ch;
    margin: 8px auto 0;
    color: var(--about-muted);
    font-size: 13px;
    line-height: 1.55;
}

.about-vsl-premium [data-about-reveal] {
    opacity: 0;
    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22,1,.36,1),
        clip-path 1s cubic-bezier(.22,1,.36,1);
}

.about-vsl-premium [data-about-reveal="copy"] {
    transform: translateY(28px);
}

.about-vsl-premium [data-about-reveal="visual"] {
    clip-path: inset(8% 6% 8% 8% round 46px);
    transform: translateY(30px) scale(.975);
}

.about-vsl-premium [data-about-reveal="journey"] {
    transform: translateY(24px);
}

.about-vsl-premium.is-about-visible [data-about-reveal] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 round 0);
}

.about-vsl-premium.is-about-visible [data-about-reveal="visual"] {
    transition-delay: .14s;
}

.about-vsl-premium.is-about-visible [data-about-reveal="journey"] {
    transition-delay: .34s;
}

@keyframes aboutFloatOne {
    0%, 100% { --about-card-y: 0px; }
    50% { --about-card-y: -6px; }
}

@keyframes aboutFloatTwo {
    0%, 100% { --about-card-y: 0px; }
    50% { --about-card-y: 5px; }
}

@keyframes aboutFloatThree {
    0%, 100% { --about-card-y: 0px; }
    50% { --about-card-y: -5px; }
}

@keyframes aboutPulse {
    0% { box-shadow: 0 0 0 0 rgba(29,185,194,.34); }
    70% { box-shadow: 0 0 0 8px rgba(29,185,194,0); }
    100% { box-shadow: 0 0 0 0 rgba(29,185,194,0); }
}

@keyframes aboutAmbientDrift {
    from { transform: translate3d(-10px, -8px, 0) scale(.97); }
    to { transform: translate3d(14px, 12px, 0) scale(1.03); }
}

@keyframes aboutScan {
    0%, 18% { transform: translateY(-180%); opacity: 0; }
    36% { opacity: .25; }
    65% { transform: translateY(520%); opacity: 0; }
    100% { transform: translateY(520%); opacity: 0; }
}

@keyframes aboutJourneyDraw {
    from { width: 0; }
    to { width: 100%; }
}

/* Dark-mode support */
html[data-theme="dark"] .about-vsl-premium {
    --about-ink: #eef5ff;
    --about-muted: #b7c6da;
    background:
        radial-gradient(circle at 82% 20%, rgba(29,185,194,.16), transparent 31%),
        radial-gradient(circle at 10% 65%, rgba(49,69,154,.24), transparent 34%),
        linear-gradient(180deg, #071020 0%, #091426 56%, #07111f 100%);
}

html[data-theme="dark"] .about-vsl-premium::before {
    opacity: .55;
}

html[data-theme="dark"] .about-vsl-title,
html[data-theme="dark"] .about-vsl-trust__item,
html[data-theme="dark"] .about-vsl-step h3 {
    color: #eef5ff;
}

html[data-theme="dark"] .about-vsl-summary,
html[data-theme="dark"] .about-vsl-step p {
    color: #b7c6da;
}

html[data-theme="dark"] .about-vsl-secondary,
html[data-theme="dark"] .about-vsl-journey {
    border-color: rgba(148,182,225,.16);
    color: #eef5ff;
    background: rgba(12,29,53,.62);
}

html[data-theme="dark"] .about-vsl-floating {
    border-color: rgba(138,201,215,.20);
    color: #eef5ff;
    background: rgba(10,27,50,.72);
    box-shadow:
        0 22px 64px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .about-vsl-floating__copy small {
    color: #b7c6da;
}

html[data-theme="dark"] .about-vsl-floating__icon,
html[data-theme="dark"] .about-vsl-step__node {
    background: linear-gradient(145deg, rgba(29,58,91,.92), rgba(13,35,61,.92));
}

html[data-theme="dark"] .about-vsl-step + .about-vsl-step,
html[data-theme="dark"] .about-vsl-trust__item + .about-vsl-trust__item {
    border-color: rgba(148,182,225,.13);
}

html[data-theme="dark"] .about-vsl-signal {
    color: #dffbff;
    border-color: rgba(138,201,215,.18);
    background: rgba(10,27,50,.68);
}

/* VSL TARGET UIUX UPGRADE START
   Target: bright premium clinical UI, compact first viewport, light glass,
   natural hero artwork, refined transitions and responsive motion.
*/
:root{
    --vsl-ink:#0b245d;
    --vsl-ink-2:#153a88;
    --vsl-teal-2:#10aebe;
    --vsl-cyan-2:#25c8d3;
    --vsl-paper:#ffffff;
    --vsl-mist:#f4f9fd;
    --vsl-line:rgba(25,62,139,.13);
    --vsl-line-strong:rgba(25,62,139,.20);
    --vsl-glass:rgba(255,255,255,.84);
    --vsl-glass-soft:rgba(255,255,255,.68);
    --vsl-shadow-sm:0 10px 30px rgba(16,46,114,.08);
    --vsl-shadow-md:0 22px 65px rgba(16,46,114,.12);
    --vsl-shadow-lg:0 38px 110px rgba(11,36,93,.18);
    --vsl-radius-sm:14px;
    --vsl-radius-md:22px;
    --vsl-radius-lg:32px;
    --vsl-ease:cubic-bezier(.22,.8,.24,1);
    --vsl-fast:180ms;
    --vsl-normal:320ms;
    --vsl-slow:650ms;
}

html{
    background:#f6fbff;
    scroll-padding-top:126px;
}

body{
    background:
        radial-gradient(circle at 14% 4%,rgba(29,185,194,.10),transparent 28rem),
        linear-gradient(180deg,#fbfdff 0%,#f2f8fd 100%) !important;
    color:#17304f;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

::selection{
    color:#fff;
    background:#153a88;
}

:focus-visible{
    outline:3px solid rgba(37,200,211,.42) !important;
    outline-offset:3px;
}

/* ---------- Header: white clinical, compact, target-reference proportions ---------- */
.vsl-header{
    position:sticky !important;
    top:0 !important;
    z-index:2200 !important;
    width:100% !important;
    background:rgba(255,255,255,.88) !important;
    border-bottom:1px solid rgba(21,58,136,.08) !important;
    box-shadow:0 10px 38px rgba(16,46,114,.07) !important;
    backdrop-filter:blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(140%) !important;
}

.vsl-header.is-scrolled{
    background:rgba(255,255,255,.76) !important;
    box-shadow:0 16px 44px rgba(16,46,114,.10) !important;
}

.vsl-topbar{
    min-height:34px !important;
    background:#f8fbff !important;
    color:#173a86 !important;
    border-bottom:1px solid rgba(21,58,136,.08) !important;
    box-shadow:none !important;
}

.vsl-topbar-inner{
    min-height:34px !important;
}

.vsl-topbar a,
.vsl-topbar span{
    color:#173a86 !important;
}

.vsl-topbar-right a,
.vsl-topbar-right span{
    min-height:24px !important;
    padding:0 9px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.vsl-top-dot{
    width:7px !important;
    height:7px !important;
    background:#15b8c4 !important;
    box-shadow:0 0 0 5px rgba(21,184,196,.10) !important;
}

.vsl-mainbar{
    background:rgba(255,255,255,.92) !important;
}

.vsl-mainbar-inner{
    min-height:78px !important;
    grid-template-columns:220px minmax(0,1fr) auto !important;
    gap:18px !important;
}

.vsl-brand{
    min-width:200px !important;
    min-height:64px !important;
}

.vsl-brand img{
    max-width:198px !important;
    max-height:58px !important;
}

.vsl-nav{
    gap:3px !important;
    padding:6px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.vsl-nav a{
    min-height:42px !important;
    padding:0 14px !important;
    border-radius:12px !important;
    color:#173a86 !important;
    font-size:.92rem !important;
    font-weight:750 !important;
}

.vsl-nav a:hover,
.vsl-nav a.active{
    color:#0e95a3 !important;
    background:rgba(29,185,194,.08) !important;
    box-shadow:none !important;
}

.vsl-nav a.active::after{
    left:14px !important;
    right:14px !important;
    bottom:3px !important;
    height:2px !important;
}

.vsl-search-btn,
.vsl-round-btn,
.vsl-theme-btn,
.vsl-menu-btn{
    min-height:44px !important;
    height:44px !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#173a86 !important;
    border:1px solid var(--vsl-line) !important;
    box-shadow:var(--vsl-shadow-sm) !important;
}

.vsl-round-btn,
.vsl-theme-btn,
.vsl-menu-btn{
    width:44px !important;
    min-width:44px !important;
}

.vsl-support-btn{
    min-height:44px !important;
    height:44px !important;
    padding:0 18px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#143a87 0%,#1257b5 52%,#13aebe 100%) !important;
    box-shadow:0 14px 34px rgba(21,74,160,.20) !important;
}

.vsl-search-btn:hover,
.vsl-round-btn:hover,
.vsl-theme-btn:hover,
.vsl-menu-btn:hover,
.vsl-support-btn:hover{
    transform:translateY(-2px) !important;
}

/* ---------- Hero: compact first viewport, natural image, target storyboard styling ---------- */
#hero,
.hero,
.hero-section,
.premium-hero{
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
    background:#eef6fb !important;
    border:0 !important;
    overflow:hidden !important;
}

#hero::before,
#hero::after,
.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after{
    display:none !important;
    content:none !important;
}

.hero-slider{
    position:relative !important;
    min-height:clamp(500px,calc(100vh - 112px),660px) !important;
    height:clamp(500px,calc(100vh - 112px),660px) !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#e8f3f9 !important;
    border:0 !important;
    box-shadow:none !important;
}

.hero-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    min-height:0 !important;
    height:100% !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    filter:none !important;
    transform:scale(1.015);
    transition:
        opacity var(--vsl-slow) var(--vsl-ease),
        transform 1.2s var(--vsl-ease),
        visibility 0s linear var(--vsl-slow) !important;
}

.hero-slide.is-active,
.hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:scale(1) !important;
    transition-delay:0s !important;
}

/* Keep artwork approximately 95% visible. */
.hero-slide::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.70) 25%,
            rgba(255,255,255,.16) 48%,
            rgba(255,255,255,.02) 70%,
            rgba(255,255,255,0) 100%) !important;
    opacity:1 !important;
}

.hero-slide::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 72% 20%,rgba(37,200,211,.05),transparent 25rem) !important;
    opacity:1 !important;
}

.hero-slide-overlay,
.hero-overlay,
.hero-media::before,
.hero-slider::before{
    background:transparent !important;
    opacity:0 !important;
    display:none !important;
}

.hero-grid,
.hero-layout{
    position:relative !important;
    z-index:4 !important;
    min-height:100% !important;
    height:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,520px) 1fr !important;
    align-items:center !important;
    gap:28px !important;
    padding:28px 0 86px !important;
}

.hero-story-main,
.hero-copy,
.hero-content{
    width:min(520px,100%) !important;
    max-height:calc(100% - 34px) !important;
    padding:28px 30px 26px !important;
    border-radius:24px !important;
    color:#173a86 !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(21,58,136,.12) !important;
    box-shadow:0 24px 70px rgba(16,46,114,.16) !important;
    backdrop-filter:blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    overflow:visible !important;
    transform:none !important;
}

.hero-story-main::before,
.hero-copy::before,
.hero-content::before{
    content:"";
    position:absolute;
    left:0;
    top:24px;
    width:4px;
    height:64px;
    border-radius:0 99px 99px 0;
    background:linear-gradient(180deg,#173a86,#18b5c2);
}

.hero-story-main .eyebrow,
.hero-copy .eyebrow,
.hero-content .eyebrow,
.hero-story-main .section-kicker{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 16px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    color:#173a86 !important;
    background:#fff !important;
    border:1px solid rgba(21,58,136,.12) !important;
    box-shadow:0 8px 24px rgba(16,46,114,.07) !important;
    font-size:.72rem !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

.hero-story-main h1,
.hero-copy h1,
.hero-content h1,
.hero-title{
    margin:0 0 10px !important;
    max-width:500px !important;
    color:#102e72 !important;
    font-size:clamp(2.55rem,4.25vw,4.6rem) !important;
    line-height:.92 !important;
    letter-spacing:-.06em !important;
    text-shadow:none !important;
    text-wrap:balance;
}

.hero-story-main h2,
.hero-copy h2,
.hero-content h2{
    margin:0 0 14px !important;
    color:#0da6b4 !important;
    font-size:clamp(1.05rem,1.55vw,1.38rem) !important;
    line-height:1.18 !important;
}

.hero-story-main p,
.hero-copy p,
.hero-content p,
.hero-lead{
    margin:0 !important;
    max-width:490px !important;
    color:#50647f !important;
    font-size:.98rem !important;
    line-height:1.58 !important;
    text-shadow:none !important;
}

.hero-actions,
.hero-buttons{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:18px !important;
}

.hero-actions .btn,
.hero-buttons .btn{
    min-height:46px !important;
    padding:0 18px !important;
    border-radius:12px !important;
    font-size:.88rem !important;
    box-shadow:0 12px 28px rgba(16,46,114,.10) !important;
}

.hero-actions .btn-primary,
.hero-buttons .btn-primary{
    background:linear-gradient(135deg,#173a86,#11aebd) !important;
}

.hero-mini-points{
    gap:8px !important;
    margin-top:14px !important;
}

.hero-mini-points span{
    padding:7px 10px !important;
    border-radius:999px !important;
    color:#49617e !important;
    background:rgba(246,250,255,.94) !important;
    border:1px solid rgba(21,58,136,.10) !important;
    font-size:.72rem !important;
    font-weight:750 !important;
}

/* Remove obsolete second hero card to match approved reference. */
.hero-story-side{
    display:none !important;
}

/* Navigation glass bar */
.hero-slider-nav{
    position:absolute !important;
    left:24px !important;
    right:24px !important;
    bottom:16px !important;
    z-index:12 !important;
    width:auto !important;
    margin:0 !important;
    padding:10px 14px !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    box-shadow:0 18px 48px rgba(16,46,114,.14) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.hero-dots{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
}

.hero-dot{
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:rgba(247,250,255,.92) !important;
    border:1px solid rgba(21,58,136,.08) !important;
    color:#71819a !important;
    box-shadow:none !important;
    transition:
        transform var(--vsl-normal) var(--vsl-ease),
        background var(--vsl-normal) ease,
        color var(--vsl-normal) ease !important;
}

.hero-dot::before{
    content:attr(data-vsl-label);
}

.hero-dot.is-active,
.hero-dot.active,
.hero-dot[aria-current="true"]{
    width:50px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#173a86,#23c4ce) !important;
    transform:translateY(-1px) !important;
}

[data-vsl-hero-controls]{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    transform:none !important;
}

[data-vsl-hero-progress]{
    width:148px !important;
    height:3px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:rgba(21,58,136,.12) !important;
}

[data-vsl-hero-progress] span{
    background:linear-gradient(90deg,#173a86,#17b7c3) !important;
}

[data-vsl-hero-counter]{
    color:#173a86 !important;
    font-weight:850 !important;
    letter-spacing:.06em !important;
    font-size:.76rem !important;
}

[data-vsl-hero-prev],
[data-vsl-hero-next]{
    position:relative !important;
    inset:auto !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:12px !important;
    color:#173a86 !important;
    background:#fff !important;
    border:1px solid rgba(21,58,136,.10) !important;
    box-shadow:0 10px 24px rgba(16,46,114,.08) !important;
    transform:none !important;
}

#hero > [data-vsl-hero-prev],
#hero > [data-vsl-hero-next],
#hero .hero-slider > [data-vsl-hero-prev],
#hero .hero-slider > [data-vsl-hero-next]{
    display:none !important;
}

/* ---------- Global card language ---------- */
.info-card,
.supply-card,
.visual-category-card,
.solutions-pro-card,
.about-vsl-card,
.procurement-pro-step,
.stack-card,
.doc-card,
.specialty-pro-card,
.trust-card{
    border-radius:22px !important;
    border:1px solid var(--vsl-line) !important;
    box-shadow:var(--vsl-shadow-sm) !important;
    transition:
        transform var(--vsl-normal) var(--vsl-ease),
        box-shadow var(--vsl-normal) ease,
        border-color var(--vsl-normal) ease !important;
}

.info-card:hover,
.supply-card:hover,
.visual-category-card:hover,
.solutions-pro-card:hover,
.about-vsl-card:hover,
.procurement-pro-step:hover,
.stack-card:hover,
.doc-card:hover,
.specialty-pro-card:hover,
.trust-card:hover{
    transform:translateY(-6px) !important;
    border-color:rgba(29,185,194,.34) !important;
    box-shadow:var(--vsl-shadow-md) !important;
}

/* ---------- Section rhythm and hierarchy ---------- */
.section,
.about-vsl-section,
.solutions-pro-section,
.specialties-pro-section,
.specialties-infographic-section,
.gaps-pro-section,
.procurement-pro-section,
.operations-pro-section,
#supplies,
#compliance{
    scroll-margin-top:116px;
}

.section{
    padding:clamp(64px,7vw,96px) 0 !important;
}

.section h2,
.about-vsl-copy h2,
.solutions-pro-title h2,
.procurement-pro-head h2,
.operations-pro-copy h2,
#supplies h2,
.compliance-grid h2{
    font-size:clamp(2.35rem,4.2vw,4.5rem) !important;
    line-height:.96 !important;
    letter-spacing:-.055em !important;
    text-wrap:balance;
}

.eyebrow,
.section-kicker{
    font-size:.74rem !important;
    font-weight:850 !important;
    letter-spacing:.10em !important;
}

/* ---------- Artistic transitions ---------- */
.reveal-up,
[data-reveal],
.about-vsl-card,
.solutions-pro-card,
.visual-category-card,
.procurement-pro-step,
.specialty-pro-card,
.gaps-pro-card{
    transition-duration:var(--vsl-slow) !important;
    transition-timing-function:var(--vsl-ease) !important;
}

.btn,
button,
a{
    -webkit-tap-highlight-color:transparent;
}

.btn{
    position:relative;
    overflow:hidden;
}

.btn::after{
    content:"";
    position:absolute;
    top:-100%;
    left:-45%;
    width:36%;
    height:300%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
    transform:rotate(18deg);
    transition:left .7s var(--vsl-ease);
    pointer-events:none;
}

.btn:hover::after{
    left:120%;
}

@keyframes vslHeroImageEnter{
    from{opacity:.15;transform:scale(1.035)}
    to{opacity:1;transform:scale(1)}
}

@keyframes vslCardEnter{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:none}
}

@keyframes vslSoftPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(29,185,194,.12)}
    50%{box-shadow:0 0 0 9px rgba(29,185,194,0)}
}

.hero-slide.is-active,
.hero-slide.active{
    animation:vslHeroImageEnter .9s var(--vsl-ease) both !important;
}

.hero-story-main,
.hero-copy,
.hero-content{
    animation:vslCardEnter .72s .10s var(--vsl-ease) both;
}

.hero-story-main .eyebrow,
.hero-copy .eyebrow,
.hero-content .eyebrow{
    animation:vslSoftPulse 2.8s ease-in-out infinite;
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
    .vsl-mainbar-inner{
        grid-template-columns:185px minmax(0,1fr) auto !important;
    }

    .vsl-brand{
        min-width:180px !important;
    }

    .vsl-brand img{
        max-width:176px !important;
    }

    .vsl-nav a{
        padding:0 10px !important;
        font-size:.84rem !important;
    }

    .vsl-search-btn{
        font-size:0 !important;
        width:44px !important;
        padding:0 !important;
        justify-content:center !important;
    }
}

@media (max-width:980px){
    .vsl-topbar{
        display:none !important;
    }

    .vsl-mainbar-inner{
        min-height:72px !important;
        grid-template-columns:1fr auto !important;
    }

    .vsl-nav,
    .vsl-search-btn,
    .vsl-theme-btn{
        display:none !important;
    }

    .hero-slider{
        min-height:calc(100svh - 72px) !important;
        height:calc(100svh - 72px) !important;
        max-height:760px !important;
    }

    .hero-grid,
    .hero-layout{
        grid-template-columns:1fr !important;
        align-items:end !important;
        padding:220px 18px 84px !important;
    }

    .hero-story-main,
    .hero-copy,
    .hero-content{
        width:min(560px,100%) !important;
        padding:24px !important;
    }

    .hero-slider-nav{
        left:14px !important;
        right:14px !important;
        bottom:12px !important;
    }

    [data-vsl-hero-progress]{
        width:96px !important;
    }
}

@media (max-width:720px){
    .vsl-mainbar-inner{
        padding:0 12px !important;
    }

    .vsl-brand{
        min-width:138px !important;
        min-height:58px !important;
    }

    .vsl-brand img{
        max-width:142px !important;
        max-height:48px !important;
    }

    .vsl-support-btn{
        min-width:112px !important;
        max-width:124px !important;
        padding:0 12px !important;
        font-size:.73rem !important;
    }

    .vsl-menu-btn{
        display:grid !important;
    }

    .hero-slider{
        min-height:calc(100svh - 68px) !important;
        height:calc(100svh - 68px) !important;
        max-height:none !important;
    }

    .hero-slide{
        background-position:center top !important;
    }

    .hero-slide::before{
        background:
            linear-gradient(180deg,
                rgba(255,255,255,.00) 0%,
                rgba(255,255,255,.02) 38%,
                rgba(255,255,255,.72) 64%,
                rgba(248,252,255,.97) 100%) !important;
    }

    .hero-grid,
    .hero-layout{
        min-height:100% !important;
        padding:42vh 12px 76px !important;
    }

    .hero-story-main,
    .hero-copy,
    .hero-content{
        width:100% !important;
        max-height:none !important;
        padding:20px 18px !important;
        border-radius:20px !important;
        background:rgba(255,255,255,.90) !important;
    }

    .hero-story-main h1,
    .hero-copy h1,
    .hero-content h1,
    .hero-title{
        font-size:clamp(2.15rem,10vw,3.15rem) !important;
        line-height:.94 !important;
    }

    .hero-story-main h2,
    .hero-copy h2,
    .hero-content h2{
        font-size:.98rem !important;
    }

    .hero-story-main p,
    .hero-copy p,
    .hero-content p,
    .hero-lead{
        font-size:.86rem !important;
        line-height:1.48 !important;
    }

    .hero-actions,
    .hero-buttons{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    .hero-actions .btn,
    .hero-buttons .btn{
        width:100% !important;
        min-height:42px !important;
        padding:0 10px !important;
        font-size:.75rem !important;
    }

    .hero-mini-points{
        display:none !important;
    }

    .hero-slider-nav{
        min-height:52px !important;
        padding:7px 9px !important;
        border-radius:16px !important;
    }

    .hero-dots{
        display:none !important;
    }

    [data-vsl-hero-controls]{
        width:100% !important;
        justify-content:space-between !important;
    }

    [data-vsl-hero-progress]{
        display:none !important;
    }

    [data-vsl-hero-counter]{
        order:2 !important;
        margin:0 auto !important;
    }

    [data-vsl-hero-prev]{
        order:1 !important;
    }

    [data-vsl-hero-next]{
        order:3 !important;
    }
}

@media (max-width:420px){
    .vsl-support-btn{
        min-width:104px !important;
        max-width:108px !important;
        font-size:.68rem !important;
    }

    .hero-grid,
    .hero-layout{
        padding-top:40vh !important;
    }

    .hero-story-main,
    .hero-copy,
    .hero-content{
        padding:18px 16px !important;
    }

    .hero-story-main .eyebrow,
    .hero-copy .eyebrow,
    .hero-content .eyebrow{
        margin-bottom:11px !important;
        padding:6px 9px !important;
        font-size:.62rem !important;
    }

    .hero-actions,
    .hero-buttons{
        grid-template-columns:1fr !important;
    }
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] body{
    background:#06101f !important;
}

html[data-theme="dark"] .vsl-topbar{
    background:#081c46 !important;
}

html[data-theme="dark"] .vsl-topbar a,
html[data-theme="dark"] .vsl-topbar span{
    color:#e9f7ff !important;
}

html[data-theme="dark"] .vsl-mainbar,
html[data-theme="dark"] .vsl-header{
    background:rgba(6,16,31,.88) !important;
}

html[data-theme="dark"] .hero-story-main,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero-content{
    background:rgba(6,16,31,.82) !important;
    border-color:rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .hero-story-main h1,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-title{
    color:#f5fbff !important;
}

html[data-theme="dark"] .hero-story-main p,
html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .hero-lead{
    color:#c2d1e2 !important;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

    .hero-slide{
        transform:none !important;
    }
}
/* VSL TARGET UIUX UPGRADE END */