/* =========================================================
   VisuoSight Step 5.5 — Refined Marketing Homepage
   Keeps Evaluation / Diagnostics / Quick Office as original,
   separate sections with their existing sliders.
========================================================= */

:root{
    --vs55-ink:#10213c;
    --vs55-ink-soft:#2f435f;
    --vs55-muted:#6b7c93;
    --vs55-line:#dbe6f2;
    --vs55-line-strong:#cbd9e8;
    --vs55-blue:#2f67e6;
    --vs55-blue-2:#1d9eea;
    --vs55-cyan:#1ca4d8;
    --vs55-green:#16a26f;
    --vs55-soft:#f5f9fd;
    --vs55-soft-blue:#edf5ff;
    --vs55-white:#fff;
    --vs55-shadow:0 22px 64px rgba(18,47,88,.09);
}

/* ---------------- Base rhythm ---------------- */

body.vs55-home{
    color:var(--vs55-ink);
    background:#fff;
}

body.vs55-home section{
    scroll-margin-top:88px;
}

body.vs55-home .section,
body.vs55-home section.section{
    padding-top:76px;
    padding-bottom:76px;
}

body.vs55-home .shell,
body.vs55-home .container{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

body.vs55-home .vs55-hidden{
    display:none !important;
}

/* ---------------- Header / nav ---------------- */

body.vs55-home header{
    border-bottom:1px solid rgba(218,228,239,.85);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

body.vs55-home header nav a{
    font-weight:700;
}

body.vs55-home header nav a[href="#hardware"],
body.vs55-home header nav a[href*="/#hardware"]{
    display:none !important;
}

/* ---------------- HERO ---------------- */

.vs55-hero{
    position:relative;
    overflow:hidden;
    padding-top:72px !important;
    padding-bottom:68px !important;
    background:
        radial-gradient(circle at 82% 16%,rgba(76,145,255,.16),transparent 28%),
        radial-gradient(circle at 12% 88%,rgba(39,179,218,.10),transparent 28%),
        linear-gradient(135deg,#fbfdff 0%,#f3f8ff 48%,#eef5ff 100%);
    border-bottom:1px solid #dfe9f4;
}

.vs55-hero::before,
.vs55-hero::after{
    content:"";
    position:absolute;
    border-radius:999px;
    pointer-events:none;
}

.vs55-hero::before{
    width:360px;
    height:360px;
    right:-120px;
    top:-140px;
    border:1px solid rgba(49,105,231,.10);
    box-shadow:
        0 0 0 70px rgba(49,105,231,.025),
        0 0 0 140px rgba(49,105,231,.018);
}

.vs55-hero::after{
    width:180px;
    height:180px;
    left:-80px;
    bottom:-80px;
    background:rgba(30,166,221,.05);
}

.vs55-hero > .shell,
.vs55-hero > .container,
.vs55-hero .hero-inner{
    position:relative;
    z-index:1;
}

.vs55-hero h1{
    max-width:650px;
    margin-bottom:18px !important;
    color:var(--vs55-ink);
    font-size:clamp(45px,5.4vw,76px) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
}

.vs55-hero h1 strong,
.vs55-hero h1 em,
.vs55-hero h1 span{
    color:var(--vs55-blue);
}

.vs55-hero p{
    max-width:650px;
    color:#60728a !important;
    font-size:15px !important;
    line-height:1.7 !important;
}

.vs55-hero a,
.vs55-hero button{
    border-radius:11px !important;
}

.vs55-hero img{
    filter:drop-shadow(0 24px 34px rgba(16,43,81,.12));
}

.vs55-hero .vs-product-shot,
.vs55-hero .hero-visual,
.vs55-hero .hero-preview{
    border:1px solid rgba(185,205,229,.9);
    border-radius:20px !important;
    background:#fff;
    box-shadow:0 28px 70px rgba(24,61,111,.14);
}

/* ---------------- Core feature quick navigation ---------------- */

.vs55-core-nav{
    position:relative;
    z-index:8;
    padding:0 20px;
    margin-top:-30px;
    margin-bottom:14px;
}

.vs55-core-nav-inner{
    width:min(1080px,100%);
    margin:0 auto;
    padding:9px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    border:1px solid rgba(205,219,235,.95);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 50px rgba(18,47,88,.12);
    backdrop-filter:blur(14px);
}

.vs55-core-link{
    min-width:0;
    min-height:68px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 18px;
    gap:11px;
    align-items:center;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:13px;
    color:#50627a;
    background:transparent;
    text-decoration:none;
    transition:.18s ease;
}

.vs55-core-link:hover{
    transform:translateY(-1px);
    border-color:#cfe0f4;
    color:#173d80;
    background:#f6f9ff;
}

.vs55-core-link-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--vs55-blue);
    background:#edf4ff;
}

.vs55-core-link:nth-child(2) .vs55-core-link-icon{
    color:#784bd9;
    background:#f2edff;
}

.vs55-core-link:nth-child(3) .vs55-core-link-icon{
    color:#078d66;
    background:#e9f9f2;
}

.vs55-core-link-icon svg{
    width:22px;
    height:22px;
}

.vs55-core-link-copy{
    min-width:0;
}

.vs55-core-link-copy strong{
    display:block;
    margin-bottom:2px;
    color:currentColor;
    font-size:13px;
}

.vs55-core-link-copy span{
    display:block;
    overflow:hidden;
    color:#7b899b;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.vs55-core-link-arrow{
    color:#91a2b8;
    font-size:20px;
}

/* ---------------- Highlight the three core sections ---------------- */

body.vs55-home #evaluation,
body.vs55-home #diagnostics,
body.vs55-home #quick-office{
    position:relative;
    padding-top:82px !important;
    padding-bottom:82px !important;
}

body.vs55-home #evaluation{
    background:#fff;
}

body.vs55-home #diagnostics{
    background:
        radial-gradient(circle at 8% 10%,rgba(99,78,217,.055),transparent 25%),
        #f7f9ff;
}

body.vs55-home #quick-office{
    background:
        radial-gradient(circle at 94% 12%,rgba(22,162,111,.07),transparent 25%),
        #fff;
}

body.vs55-home #evaluation::before,
body.vs55-home #diagnostics::before,
body.vs55-home #quick-office::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:min(1180px,calc(100% - 40px));
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,#dbe6f2 20%,#dbe6f2 80%,transparent);
}

body.vs55-home #evaluation .vs-real-grid,
body.vs55-home #diagnostics .vs-real-grid,
body.vs55-home #quick-office .vs-real-grid{
    align-items:center;
    gap:clamp(40px,5vw,74px) !important;
}

body.vs55-home #evaluation .vs-real-copy,
body.vs55-home #diagnostics .vs-real-copy,
body.vs55-home #quick-office .vs-real-copy{
    max-width:560px;
}

body.vs55-home #evaluation .vs-real-copy h2,
body.vs55-home #diagnostics .vs-real-copy h2,
body.vs55-home #quick-office .vs-real-copy h2{
    margin-top:12px !important;
    margin-bottom:15px !important;
    color:var(--vs55-ink) !important;
    font-size:clamp(35px,4vw,54px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
}

body.vs55-home #evaluation .vs-real-copy > p,
body.vs55-home #diagnostics .vs-real-copy > p,
body.vs55-home #quick-office .vs-real-copy > p{
    color:#66778e !important;
    font-size:13px !important;
    line-height:1.68 !important;
}

body.vs55-home .vs-module-heading{
    gap:12px !important;
}

body.vs55-home .vs-module-icon{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:14px !important;
}

body.vs55-home .vs-module-pills{
    gap:7px !important;
    margin-top:20px !important;
}

body.vs55-home .vs-module-pills > span{
    min-height:31px !important;
    padding:0 10px !important;
    border-color:#dce6f1 !important;
    color:#455972 !important;
    background:#fff !important;
    font-size:8.5px !important;
}

body.vs55-home .vs-product-points{
    gap:9px !important;
    margin-top:18px !important;
}

body.vs55-home .vs-product-points > div{
    padding:11px !important;
    border-color:#dde7f1 !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.86) !important;
}

/* Original sliders remain intact — make them look like premium product previews */
body.vs55-home .vs-live-carousel-shell,
body.vs55-home .vs-carousel-shell,
body.vs55-home .vs-product-shot,
body.vs55-home .vs-diagnostic-preview{
    overflow:hidden;
    border:1px solid #cfddec !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 26px 64px rgba(18,47,88,.12) !important;
}

body.vs55-home .vs-live-slide img,
body.vs55-home .vs-slide img{
    background:#eef4fa;
}

/* ---------------- Workflow section ---------------- */

body.vs55-home .vs55-workflow{
    padding-top:62px !important;
    padding-bottom:62px !important;
    background:#f5f9fd !important;
}

body.vs55-home .vs55-workflow h2{
    font-size:clamp(32px,3.6vw,48px) !important;
    line-height:1.05 !important;
    letter-spacing:-.04em !important;
}

/* ---------------- Pricing — clearer and more commercial ---------------- */

body.vs55-home #pricing{
    padding-top:78px !important;
    padding-bottom:80px !important;
    background:
        radial-gradient(circle at 50% 0%,rgba(49,105,231,.07),transparent 28%),
        #f8fbff !important;
}

body.vs55-home #pricing .section-heading{
    max-width:790px !important;
    margin:0 auto 34px !important;
}

body.vs55-home #pricing .section-heading h2{
    margin-bottom:12px !important;
    color:var(--vs55-ink) !important;
    font-size:clamp(36px,4vw,52px) !important;
    line-height:1.04 !important;
    letter-spacing:-.045em !important;
}

body.vs55-home #pricing .section-heading p{
    color:#6c7c91 !important;
    font-size:13px !important;
    line-height:1.6 !important;
}

body.vs55-home #pricing .pricing-grid{
    align-items:stretch !important;
    gap:18px !important;
}

body.vs55-home #pricing .pricing-card{
    position:relative;
    min-height:520px !important;
    display:flex !important;
    flex-direction:column !important;
    padding:22px !important;
    border:1px solid #d5e2ef !important;
    border-radius:19px !important;
    background:#fff !important;
    box-shadow:0 16px 42px rgba(20,48,88,.075) !important;
}

body.vs55-home #pricing .pricing-card.vs55-featured-plan{
    transform:translateY(-8px);
    border:2px solid #7ea8ff !important;
    box-shadow:0 23px 58px rgba(49,105,231,.16) !important;
}

.vs55-popular-badge{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    min-height:28px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#3169e7,#1c9eea);
    box-shadow:0 7px 18px rgba(49,105,231,.22);
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
    white-space:nowrap;
}

body.vs55-home #pricing .pricing-card h3{
    min-height:52px;
    margin-top:8px !important;
    color:#1d2e49 !important;
    font-size:16px !important;
    line-height:1.32 !important;
}

body.vs55-home #pricing .plan-price{
    margin-top:18px !important;
    margin-bottom:14px !important;
}

body.vs55-home #pricing .plan-price-label{
    color:#708097 !important;
    font-size:7.5px !important;
    letter-spacing:.14em !important;
}

body.vs55-home #pricing .vs-offer-price,
body.vs55-home #pricing .plan-price-current{
    color:#10233f !important;
    font-size:clamp(30px,2.7vw,42px) !important;
    font-weight:900 !important;
    letter-spacing:-.04em !important;
}

body.vs55-home #pricing .vs-original-price{
    margin-top:8px !important;
    font-size:11px !important;
}

body.vs55-home #pricing .vs-save-chip{
    margin-top:8px !important;
    color:#0d7554 !important;
    border-color:#c7ebdc !important;
    background:#e9f9f2 !important;
}

body.vs55-home #pricing .vs-billing-strip{
    gap:7px !important;
    margin-top:12px !important;
}

body.vs55-home #pricing .vs-billing-item{
    border-color:#dfe8f2 !important;
    background:#f8fbff !important;
}

body.vs55-home #pricing .plan-features{
    flex:1;
    margin-top:12px !important;
    border-radius:12px !important;
    background:#f5f8fc !important;
}

body.vs55-home #pricing .pricing-card > a:last-child,
body.vs55-home #pricing .pricing-card > button:last-child,
body.vs55-home #pricing .pricing-card .plan-cta{
    width:100% !important;
    min-height:43px !important;
    margin-top:auto !important;
    border-radius:10px !important;
    font-weight:850 !important;
}

body.vs55-home #pricing .pricing-card.vs55-featured-plan > a:last-child,
body.vs55-home #pricing .pricing-card.vs55-featured-plan > button:last-child,
body.vs55-home #pricing .pricing-card.vs55-featured-plan .plan-cta{
    color:#fff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,#3169e7,#159ee8) !important;
    box-shadow:0 10px 20px rgba(49,105,231,.18);
}

/* ---------------- FAQ + final CTA ---------------- */

body.vs55-home #faq{
    padding-top:68px !important;
    padding-bottom:68px !important;
    background:#fff !important;
}

body.vs55-home #faq .section-heading{
    margin-bottom:28px !important;
}

body.vs55-home #faq .section-heading h2{
    font-size:clamp(34px,3.5vw,46px) !important;
    letter-spacing:-.04em !important;
}

body.vs55-home .vs55-final-cta{
    padding-top:48px !important;
    padding-bottom:48px !important;
    background:linear-gradient(120deg,#173b77 0%,#2c64c5 55%,#168e9d 100%) !important;
}

body.vs55-home .vs55-final-cta h2,
body.vs55-home .vs55-final-cta h3{
    color:#fff !important;
}

body.vs55-home .vs55-final-cta p{
    color:rgba(255,255,255,.76) !important;
}

/* ---------------- Responsive ---------------- */

@media(max-width:1000px){
    .vs55-hero{
        padding-top:58px !important;
    }

    .vs55-core-nav{
        margin-top:-22px;
    }

    .vs55-core-nav-inner{
        width:min(850px,100%);
    }

    body.vs55-home #pricing .pricing-card.vs55-featured-plan{
        transform:none;
    }
}

@media(max-width:820px){
    .vs55-core-nav-inner{
        display:flex;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .vs55-core-nav-inner::-webkit-scrollbar{
        display:none;
    }

    .vs55-core-link{
        flex:0 0 min(280px,82vw);
    }

    body.vs55-home #evaluation,
    body.vs55-home #diagnostics,
    body.vs55-home #quick-office{
        padding-top:60px !important;
        padding-bottom:60px !important;
    }
}

@media(max-width:650px){
    body.vs55-home .shell,
    body.vs55-home .container{
        width:min(100% - 22px,1180px);
    }

    .vs55-hero{
        padding-top:46px !important;
        padding-bottom:52px !important;
    }

    .vs55-hero h1{
        font-size:42px !important;
    }

    .vs55-hero p{
        font-size:13px !important;
    }

    .vs55-core-nav{
        padding:0 10px;
        margin-top:-18px;
    }

    .vs55-core-nav-inner{
        padding:6px;
        border-radius:14px;
    }

    .vs55-core-link{
        flex-basis:235px;
        min-height:60px;
        grid-template-columns:38px minmax(0,1fr) 14px;
        gap:8px;
        padding:8px;
    }

    .vs55-core-link-icon{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .vs55-core-link-icon svg{
        width:19px;
        height:19px;
    }

    .vs55-core-link-copy strong{
        font-size:12px;
    }

    .vs55-core-link-copy span{
        font-size:9px;
    }

    body.vs55-home #evaluation .vs-real-copy h2,
    body.vs55-home #diagnostics .vs-real-copy h2,
    body.vs55-home #quick-office .vs-real-copy h2{
        font-size:33px !important;
    }

    body.vs55-home #pricing{
        padding-top:58px !important;
        padding-bottom:60px !important;
    }

    body.vs55-home #pricing .pricing-grid{
        gap:14px !important;
    }

    body.vs55-home #pricing .pricing-card{
        min-height:0 !important;
        padding:18px !important;
    }

    body.vs55-home #pricing .pricing-card h3{
        min-height:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .vs55-core-link{
        transition:none;
    }
}