/* ========================================
   GLOBAL: DESIGN TOKENS
======================================== */

:root {
    --navy: #0b1220;
    --navy-soft: #131d2f;
    --navy-card: #111b2e;

    --lime: #b7f52a;
    --lime-light: #caff3f;
    --green: #7dde45;
    --green-dark: #4f9b1f;

    --text: #152018;
    --muted: #647067;

    --white: #ffffff;
    --bg: #f7faf6;
    --bg-soft: #f2f7ef;

    --border: #e4ebe2;
    --border-strong: #d6e0d3;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;

    --container: 1180px;

    --shadow:
        0 18px 50px rgba(15, 28, 20, 0.08);

    --shadow-large:
        0 30px 80px rgba(15, 28, 20, 0.12);
}



/* ========================================
   GLOBAL: RESET / BASE
======================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--white);
    color: var(--text);

    line-height: 1.6;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;
}



/* ========================================
   GLOBAL: BUTTONS
======================================== */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 22px;

    border-radius: 12px;

    border: 0;

    font-weight: 750;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

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

.btn-primary {
    background: var(--lime);
    color: var(--navy);

    box-shadow:
        0 10px 25px rgba(183, 245, 42, 0.24);
}

.btn-secondary {
    border: 1px solid #cdd7cc;

    background: var(--white);
    color: var(--navy);
}

.btn-secondary:hover {
    border-color: #aebda8;

    box-shadow:
        0 10px 25px rgba(20, 32, 21, 0.08);
}

.btn-large {
    min-height: 54px;

    padding-inline: 26px;
}



/* ========================================
   GLOBAL: GRADIENT CTA BUTTON
======================================== */

.btn-gradient {
    background:
        linear-gradient(
            135deg,
            #caff3f 0%,
            #a5f22a 48%,
            #79df3e 100%
        );

    color: #09111f;

    border: 0;

    box-shadow:
        0 12px 30px rgba(151, 232, 44, 0.30);
}

.btn-gradient:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 38px rgba(151, 232, 44, 0.38);
}



/* ========================================
   SECTION 01: HEADER / NAVIGATION
======================================== */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid
        rgba(219, 228, 216, 0.9);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);
}

.nav-wrap {
    min-height: 76px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}



/* ========================================
   SECTION 01A: LOGO
======================================== */

.logo {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    gap: 10px;

    color: var(--navy);

    font-size: 1.17rem;

    font-weight: 850;

    letter-spacing: -0.03em;
}

.logo-mark {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #7dde45
        );

    color: var(--navy);

    font-weight: 900;

    box-shadow:
        0 8px 22px
        rgba(126, 222, 69, 0.18);
}

/* ========================================
   SECTION 01A: IMAGE BRAND LOGO
========================================= */

.site-header .logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    padding: 0;
    line-height: 1;
}

.site-logo {
    display: block;

    width: 180px;
    height: auto;

    max-width: 100%;
    object-fit: contain;
}

/* ----------------------------------------
   TABLET
---------------------------------------- */

@media (max-width: 920px) {

    .site-logo {
        width: 160px;
    }

}

/* ----------------------------------------
   MOBILE
---------------------------------------- */

@media (max-width: 650px) {

    .site-logo {
        width: 145px;
    }

}



/* ========================================
   SECTION 01B: DESKTOP NAVIGATION
======================================== */

.desktop-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    margin-left: auto;
    margin-right: auto;
}

.desktop-nav > a,
.nav-dropdown-trigger {
    min-height: 44px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        0 13px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: #354238;

    font-size: 0.89rem;

    font-weight: 680;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.desktop-nav > a:hover,
.nav-dropdown-trigger:hover,
.nav-dropdown:focus-within
.nav-dropdown-trigger {
    background: #f4f8f1;

    color: var(--green-dark);
}

.nav-dropdown-trigger svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 0.2s ease;
}


/* ========================================
   SECTION 01: ACTIVE NAVIGATION
========================================= */

.desktop-nav a[aria-current="page"] {
    color: var(--green-dark);
    background: #f4f8f1;
}

.nav-dropdown-item[aria-current="page"] {
    background: #f0f9e8;
}

.nav-dropdown-item[aria-current="page"] strong {
    color: var(--green-dark);
}

.mobile-nav a[aria-current="page"] {
    color: var(--green-dark);
    font-weight: 800;
    background: #f4f9ef;
}



/* ========================================
   SECTION 01B: DESKTOP DROPDOWNS
======================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;

    top: 100%;

    left: 50%;

    width: 310px;

    padding: 10px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(8px);

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 24px 65px
        rgba(15, 27, 18, 0.13);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}

.nav-dropdown:hover
.nav-dropdown-menu,
.nav-dropdown:focus-within
.nav-dropdown-menu,
.nav-dropdown.is-open
.nav-dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}

.nav-dropdown:hover
.nav-dropdown-trigger svg,
.nav-dropdown:focus-within
.nav-dropdown-trigger svg,
.nav-dropdown.is-open
.nav-dropdown-trigger svg {
    transform:
        rotate(180deg);
}



/* Menu touches its trigger: no dead hover area between them. */
.nav-dropdown-menu::before { display: none; }



/* ========================================
   SECTION 01B: DROPDOWN ITEMS
======================================== */

.nav-dropdown-item {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 12px;

    align-items: center;

    padding: 12px;

    border-radius: 12px;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.nav-dropdown-item:hover {
    background:
        #f5f9f2;

    transform:
        translateX(2px);
}

.nav-dropdown-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #efffda,
            #dfffc0
        );

    color: var(--green-dark);

    font-size: 0.73rem;

    font-weight: 900;
}

.nav-dropdown-item strong,
.nav-dropdown-item small {
    display: block;
}

.nav-dropdown-item strong {
    color: var(--navy);

    font-size: 0.82rem;
}

.nav-dropdown-item small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.68rem;

    line-height: 1.4;
}



/* ========================================
   SECTION 01C: DESKTOP ACTIONS
======================================== */

.nav-actions {
    display: flex;

    align-items: center;

    flex-shrink: 0;

    gap: 16px;
}

.login-link {
    color: var(--navy);

    font-size: 0.89rem;

    font-weight: 750;
}

.login-link:hover {
    color: var(--green-dark);
}

.nav-get-started {
    min-height: 46px;

    padding-inline: 21px;
}



/* ========================================
   SECTION 01D: MOBILE TOGGLE
======================================== */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    background: var(--white);
}

.mobile-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 4px 0;

    border-radius: 99px;

    background: var(--navy);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}



/* ========================================
   SECTION 01E: MOBILE OVERLAY
======================================== */

.mobile-nav-overlay {
    position: fixed;

    inset: 0;

    z-index: 1998;

    opacity: 0;

    visibility: hidden;

    background:
        rgba(4, 9, 16, 0.52);

    backdrop-filter: blur(3px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.mobile-nav-overlay.is-open {
    opacity: 1;

    visibility: visible;
}



/* ========================================
   SECTION 01F: MOBILE DRAWER
======================================== */

.mobile-nav {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 1999;

    width:
        min(90vw, 390px);

    overflow-y: auto;

    transform:
        translateX(105%);

    background: var(--white);

    box-shadow:
        -25px 0 70px
        rgba(7, 15, 25, 0.18);

    transition:
        transform 0.28s ease;
}

.mobile-nav.is-open {
    transform:
        translateX(0);
}

.mobile-nav-header {
    min-height: 76px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        0 20px;

    border-bottom:
        1px solid var(--border);
}

.mobile-nav-close {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 10px;

    background:
        #f3f7f1;

    color: var(--navy);

    font-size: 1.55rem;

    line-height: 1;
}



/* ========================================
   SECTION 01G: MOBILE NAV CONTENT
======================================== */

.mobile-nav-content {
    padding:
        18px 20px 30px;
}

.mobile-nav-group {
    border-bottom:
        1px solid var(--border);
}

.mobile-nav-group-trigger,
.mobile-nav-direct {
    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    background: transparent;

    color: var(--navy);

    font-size: 0.96rem;

    font-weight: 760;

    text-align: left;
}

.mobile-nav-direct {
    border-bottom:
        1px solid var(--border);
}

.mobile-nav-plus {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        #f1f6ee;

    color: var(--green-dark);

    font-size: 1rem;

    transition:
        transform 0.2s ease;
}

.mobile-nav-group.is-open
.mobile-nav-plus {
    transform:
        rotate(45deg);
}



/* ========================================
   SECTION 01G: MOBILE SUBMENU
========================================= */

.mobile-nav-submenu {
    display: block;

    max-height: 0;
    overflow: hidden;

    visibility: hidden;
    pointer-events: none;

    padding: 0;

    transition:
        max-height 0.3s ease,
        visibility 0.3s ease;
}

.mobile-nav-group.is-open .mobile-nav-submenu {
    max-height: 500px;

    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-submenu a {
    display: block;

    padding: 10px 12px;

    border-radius: 9px;

    color: var(--muted);

    font-size: 0.85rem;
    font-weight: 620;
}

.mobile-nav-submenu a:last-child {
    margin-bottom: 12px;
}

.mobile-nav-submenu a:hover {
    background: #f5f9f2;
    color: var(--green-dark);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-submenu {
        transition: none;
    }
}


/* ========================================
   SECTION 01G: MOBILE ACTIONS
======================================== */

.mobile-nav-actions {
    display: grid;

    gap: 10px;

    margin-top: 24px;
}

.mobile-nav-actions .btn {
    width: 100%;

    min-height: 50px;
}

.mobile-login-btn {
    border:
        1px solid var(--border-strong);

    background: var(--white);

    color: var(--navy);
}



/* ========================================
   GLOBAL: MOBILE NAV BODY LOCK
======================================== */

body.mobile-menu-open {
    overflow: hidden;
}



/* ========================================
   SECTION 01: RESPONSIVE
======================================== */

@media (max-width: 1080px) {

    .desktop-nav {
        gap: 0;
    }

    .desktop-nav > a,
    .nav-dropdown-trigger {
        padding-inline: 9px;

        font-size: 0.83rem;
    }

}


@media (max-width: 920px) {

    .desktop-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

}


@media (max-width: 650px) {

    .nav-wrap {
        min-height: 68px;
    }

    .logo {
        font-size: 1rem;
    }

    .logo-mark {
        width: 34px;
        height: 34px;
    }

}



/* ========================================
   SECTION 02: HERO
======================================== */

.hero {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(183, 245, 42, 0.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(125, 222, 69, 0.08),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbf7 100%
        );

    padding:
        92px 0 72px;
}

.hero-grid {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 82px;

    align-items: center;
}

.eyebrow {
    display: inline-flex;

    margin-bottom: 18px;

    color: #50701d;

    font-size: 0.76rem;

    font-weight: 850;

    letter-spacing: 0.14em;
}

.hero h1 {
    margin: 0;

    max-width: 720px;

    font-size:
        clamp(
            3rem,
            5vw,
            5.3rem
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: var(--navy);
}

.hero h1 span {
    color: #5ba91e;
}

.hero-text {
    max-width: 650px;

    margin:
        28px 0 0;

    color: var(--muted);

    font-size: 1.14rem;
}

.hero-actions {
    display: flex;

    gap: 14px;

    margin-top: 34px;
}

.hero-features {
    display: flex;

    flex-wrap: wrap;

    gap:
        12px 24px;

    margin-top: 30px;

    color: #47554a;

    font-size: 0.92rem;

    font-weight: 650;
}



/* ========================================
   SECTION 02A: HERO DASHBOARD
======================================== */

.hero-visual {
    position: relative;
}

.hosting-dashboard {
    position: relative;

    padding: 28px;

    border-radius:
        var(--radius-lg);

    color: var(--white);

    background:
        linear-gradient(
            145deg,
            #0b1220,
            #14223a
        );

    border:
        1px solid rgba(255, 255, 255, 0.04);

    box-shadow:
        0 35px 80px
        rgba(11, 18, 32, 0.24);
}

.dashboard-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}

.dashboard-label {
    color: #aab7c9;

    font-size: 0.78rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}

.dashboard-top h2 {
    margin:
        9px 0 0;

    font-size: 1.55rem;

    line-height: 1.3;
}

.status-dot {
    width: 13px;
    height: 13px;

    background: var(--lime);

    border-radius: 100%;

    box-shadow:
        0 0 0 8px
        rgba(183, 245, 42, 0.10);
}

.status-card {
    margin-top: 28px;

    padding: 20px;

    border-radius: 16px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(255, 255, 255, 0.09);
}

.status-card > span {
    color: #acb7c7;
}

.online-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    margin-right: 5px;

    border-radius: 50%;

    background: var(--lime);
}

.dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 12px;
}

.stat {
    padding: 17px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.055);
}

.stat span {
    display: block;

    color: #9eabbd;

    font-size: 0.75rem;
}

.stat strong {
    display: block;

    margin-top: 4px;
}

.performance-card {
    margin-top: 12px;

    padding: 20px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #7dde45
        );

    color: var(--navy);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.35);
}

.performance-head {
    display: flex;

    justify-content: space-between;

    font-size: 0.82rem;

    font-weight: 800;
}

.bars {
    height: 100px;

    display: flex;

    align-items: end;

    gap: 9px;

    margin-top: 20px;
}

.bars span {
    flex: 1;

    min-height: 10px;

    border-radius:
        8px 8px 3px 3px;

    background:
        rgba(11, 18, 32, 0.72);
}



/* ========================================
   SECTION 02B: HERO FLOATING STATUS CARDS
======================================== */

.hero-float-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        13px 16px;

    min-width: 165px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid
        rgba(217, 227, 214, 0.9);

    border-radius: 14px;

box-shadow:
    0 14px 32px
    rgba(18, 32, 22, 0.09);

    backdrop-filter: blur(10px);

    z-index: 3;
}

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

.hero-float-card strong {
    color: var(--navy);

    font-size: 0.85rem;
}

.hero-float-card small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 0.72rem;
}

.hero-float-icon {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #7dde45
        );

    color: var(--navy);

    font-weight: 900;
}

.hero-float-card--ssl {
    left: -45px;

    bottom: 62px;
}

.hero-float-card--server {
    right: -35px;

    top: 65px;
}


/* ========================================
   SECTION 02C: HERO HUMAN SUPPORT CUE
======================================== */

.hero-help-cue {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 16px;

    padding: 9px 12px 9px 9px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.78);

    box-shadow:
        0 8px 22px
        rgba(20, 32, 22, 0.05);
}

.hero-help-avatar {
    width: 38px;
    height: 38px;

    object-fit: cover;
    object-position: center top;

    border-radius: 50%;

    border: 2px solid var(--white);
}

.hero-help-cue strong,
.hero-help-cue a {
    display: block;
}

.hero-help-cue strong {
    color: var(--navy);

    font-size: 0.78rem;
}

.hero-help-cue a {
    margin-top: 1px;

    color: var(--green-dark);

    font-size: 0.72rem;

    font-weight: 750;
}



/* ========================================
   SECTION 03: TRUST BAR
======================================== */

.trust-bar {
    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background: var(--white);
}

.trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}

.trust-grid > div {
    padding:
        24px 28px;

    border-right:
        1px solid var(--border);
}

.trust-grid > div:last-child {
    border-right: 0;
}

.trust-grid strong,
.trust-grid span {
    display: block;
}

.trust-grid strong {
    color: var(--navy);
}

.trust-grid span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.88rem;
}



/* ========================================
   SECTION 04: HOSTING RECOMMENDER
======================================== */

.builder-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: var(--bg);
}


/* ========================================
   SECTION 04A: SECTION INTRO
======================================== */

.builder-heading {
    max-width: 720px;
    margin-bottom: 44px;
}

.builder-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2.5rem, 4.2vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.builder-heading h2 span {
    color: var(--green-dark);
}

.builder-heading p {
    max-width: 580px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}


/* ========================================
   SECTION 04B: HOSTING RECOMMENDER CARDS
======================================== */

.builder-grid--enhanced {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.builder-card--enhanced {
    position: relative;
    min-height: 370px;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(15, 28, 20, 0.035);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.builder-card--enhanced:hover {
    transform: translateY(-4px);
    border-color: #c5d4c0;
    box-shadow: 0 16px 40px rgba(15, 28, 20, 0.07);
}

/* Featured — professional, restrained */
.builder-card--featured {
    border-color: rgba(79, 155, 31, 0.35);
    background: #fbfef8;
    box-shadow: 0 10px 28px rgba(79, 155, 31, 0.06);
}

.builder-card--featured:hover {
    border-color: rgba(79, 155, 31, 0.5);
    box-shadow: 0 18px 44px rgba(79, 155, 31, 0.1);
}


/* ========================================
   SECTION 04B: CARD TOP
======================================== */

.builder-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.builder-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f3f7f0;
    border: 1px solid #e2eadc;
}

.builder-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--green-dark);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.builder-card-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0f3ee;
    color: #6b7a68;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.builder-card-badge--featured {
    background: var(--lime);
    color: var(--navy);
}


/* ========================================
   SECTION 04B: CARD CONTENT
======================================== */

.builder-card--enhanced h3 {
    margin: 18px 0 8px;
    color: var(--navy);
    font-size: 1.12rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.builder-card--enhanced > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.builder-points {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.builder-points li {
    position: relative;
    padding-left: 13px;
    margin-bottom: 4px;
    color: #4d5c50;
    font-size: 0.78rem;
    line-height: 1.45;
}

.builder-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}


/* ========================================
   SECTION 04B: RECOMMENDATION
======================================== */

.builder-recommendation {
    margin-top: 16px;
    padding: 12px 13px;
    border-radius: 11px;
    background: #f5f8f3;
    border: 1px solid #e6ede3;
}

.builder-recommendation span,
.builder-recommendation strong {
    display: block;
}

.builder-recommendation span {
    color: #7a8a78;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.builder-recommendation strong {
    margin-top: 2px;
    color: var(--navy);
    font-size: 0.84rem;
}

.builder-card--featured .builder-recommendation {
    background: #f2f9eb;
    border-color: #dce9d4;
}


/* ========================================
   SECTION 04B: CARD LINK
======================================== */

.builder-card--enhanced .card-link {
    margin-top: auto;
    padding-top: 18px;
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 750;
}

.builder-card--enhanced:hover .card-link {
    color: #3d7a18;
}


/* ========================================
   SECTION 04C: HELP ME CHOOSE STRIP
======================================== */

.builder-help-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.builder-help-strip:hover {
    border-color: #c8d5c4;
    box-shadow: 0 8px 24px rgba(15, 28, 20, 0.04);
}

.builder-help-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.builder-help-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--navy);
    color: var(--lime);
    font-weight: 800;
    font-size: 1rem;
}

.builder-help-content strong {
    display: block;
    color: var(--navy);
    font-size: 0.88rem;
}

.builder-help-content p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.builder-help-link {
    flex-shrink: 0;
    color: var(--green-dark);
    font-size: 0.84rem;
    font-weight: 750;
}

.builder-help-strip:hover .builder-help-link {
    color: #3d7a18;
}


/* ========================================
   SECTION 04: RESPONSIVE
======================================== */

@media (max-width: 1000px) {
    .builder-grid--enhanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .builder-section {
        padding: 72px 0;
    }

    .builder-grid--enhanced {
        grid-template-columns: 1fr;
    }

    .builder-card--enhanced {
        min-height: auto;
    }

    .builder-help-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}


/* ========================================
   SECTION 05: PRICING
======================================== */

.pricing-section {
    position: relative;

    overflow: hidden;

    padding:
        115px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(183, 245, 42, 0.12),
            transparent 32%
        ),
        var(--white);
}

/* ========================================
   SECTION 05: MOBILE PRICING CONTROLS
========================================= */

@media (max-width: 650px) {

    .pricing-product-tabs,
    .billing-switch {
        max-width: 100%;
        scrollbar-width: thin;
    }

    .pricing-product-tab {
        padding-inline: 14px;
        font-size: 0.8rem;
    }

    .billing-option {
        padding-inline: 12px;
        font-size: 0.8rem;
    }

    .billing-option--best {
        padding-right: 76px;
    }

    .pricing-billing-note {
        line-height: 1.5;
    }

    .pricing-card {
        min-width: 0;
    }

}



/* ========================================
   SECTION 05A: PRICING HEADING
======================================== */

.pricing-heading {
    max-width: 700px;

    margin:
        0 auto 36px;

    text-align: center;
}

.pricing-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            4rem
        );

    line-height: 1;

    letter-spacing:
        -0.05em;
}

.pricing-heading h2 span {
    color:
        var(--green-dark);
}

.pricing-heading p {
    max-width: 600px;

    margin:
        20px auto 0;

    color: var(--muted);

    font-size: 1.04rem;
}



/* ========================================
   SECTION 05B: PRICING PRODUCT TABS
======================================== */

.pricing-product-tabs {
    width: max-content;

    max-width: 100%;

    display: flex;

    gap: 6px;

    margin:
        0 auto 18px;

    padding: 6px;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background:
        #f4f8f2;
}

.pricing-product-tab {
    min-height: 42px;

    padding:
        0 20px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color:
        var(--muted);

    font-weight: 700;
}

.pricing-product-tab.active {
    background:
        var(--navy);

    color:
        var(--white);

    box-shadow:
        0 8px 22px
        rgba(11, 18, 32, 0.16);
}



/* ========================================
   SECTION 05C: BILLING PERIOD SELECTOR
======================================== */

.billing-switch {
    width: max-content;

    max-width: 100%;

    display: flex;

    gap: 4px;

    margin:
        0 auto 56px;

    padding: 5px;

    border-radius: 14px;

    background:
        #edf3ea;
}

.billing-option {
    position: relative;

    min-height: 42px;

    padding:
        0 18px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color:
        #516052;

    font-size: 0.88rem;

    font-weight: 700;
}

.billing-option.active {
    background:
        var(--white);

    color:
        var(--navy);

    box-shadow:
        0 6px 18px
        rgba(19, 34, 20, 0.09);
}

.billing-option--best {
    padding-right: 82px;
}

.billing-option--best span {
    position: absolute;

    right: 8px;

    top: 50%;

    transform:
        translateY(-50%);

    padding:
        3px 7px;

    border-radius: 6px;

    background:
        var(--lime);

    color:
        var(--navy);

    font-size: 0.61rem;

    text-transform: uppercase;

    letter-spacing:
        0.05em;
}



/* ========================================
   SECTION 05D: PRICING CARDS
======================================== */

.pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    align-items: stretch;
}

.pricing-card {
    position: relative;

    padding:
        34px 30px 32px;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        var(--white);

    box-shadow:
        0 16px 45px
        rgba(22, 35, 22, 0.055);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.pricing-card:hover {
    transform:
        translateY(-5px);

    border-color:
        #cbd9c6;

    box-shadow:
        var(--shadow);
}

.pricing-card--popular {
    transform:
        translateY(-14px);

    border-color:
        rgba(139, 214, 54, 0.75);

    box-shadow:
        0 25px 70px
        rgba(79, 155, 31, 0.13);

    background:
        linear-gradient(
            180deg,
            rgba(199, 255, 66, 0.07),
            #ffffff 25%
        );
}

.pricing-card--popular:hover {
    transform:
        translateY(-18px);
}

.pricing-popular-badge {
    position: absolute;

    top: -15px;

    left: 50%;

    transform:
        translateX(-50%);

    padding:
        7px 14px;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #80e23d
        );

    color:
        var(--navy);

    box-shadow:
        0 8px 20px
        rgba(126, 222, 69, 0.25);

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing:
        0.08em;
}

.pricing-plan-label {
    margin-bottom: 12px;

    color:
        var(--green-dark);

    font-size: 0.72rem;

    font-weight: 850;

    letter-spacing:
        0.11em;
}

.pricing-card h3 {
    margin: 0;

    color:
        var(--navy);

    font-size: 1.65rem;

    letter-spacing:
        -0.035em;
}

.pricing-card-head p {
    min-height: 50px;

    margin:
        10px 0 0;

    color:
        var(--muted);

    font-size: 0.92rem;
}

.pricing-price {
    display: flex;

    align-items:
        baseline;

    margin-top: 28px;

    color:
        var(--navy);
}

.pricing-currency {
    margin-right: 3px;

    font-size: 1.2rem;

    font-weight: 800;
}

.pricing-price strong {
    font-size:
        clamp(
            2.8rem,
            4vw,
            4rem
        );

    line-height: 1;

    letter-spacing:
        -0.06em;
}

.pricing-period {
    margin-left: 5px;

    color:
        var(--muted);

    font-size: 0.9rem;
}

.pricing-billing-note {
    margin-top: 8px;

    color:
        #7b867c;

    font-size: 0.8rem;
}

.pricing-btn {
    width: 100%;

    margin-top: 24px;

    min-height: 50px;

    border:
        1px solid
        var(--border-strong);

    background:
        var(--white);

    color:
        var(--navy);
}

.pricing-btn:hover {
    border-color:
        #b9c9b4;

    box-shadow:
        0 10px 25px
        rgba(20, 32, 21, 0.08);
}

/* ========================================
   SECTION 05D: POPULAR PLAN CTA
======================================== */

.pricing-card--popular .pricing-btn {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #caff3f 0%,
            #a5f22a 48%,
            #79df3e 100%
        );

    color: var(--navy);

    box-shadow:
        0 12px 30px
        rgba(151, 232, 44, 0.22);
}

.pricing-card--popular .pricing-btn:hover {
    box-shadow:
        0 16px 36px
        rgba(151, 232, 44, 0.32);
}

.pricing-divider {
    height: 1px;

    margin:
        28px 0 24px;

    background:
        var(--border);
}

.pricing-feature-title {
    margin-bottom: 16px;

    color:
        var(--navy);

    font-size: 0.86rem;

    font-weight: 750;
}

.pricing-features {
    display: grid;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.pricing-features li {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color:
        #48544a;

    font-size: 0.9rem;
}

.pricing-features li span {
    width: 21px;
    height: 21px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 6px;

    background:
        #edffd9;

    color:
        #4f8d1c;

    font-size: 0.7rem;

    font-weight: 900;
}



/* ========================================
   SECTION 05E: PRICING TRUST MESSAGE
======================================== */

.pricing-trust {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        12px 28px;

    margin-top: 48px;

    color:
        #536055;

    font-size: 0.86rem;

    font-weight: 650;
}



/* ========================================
   SECTION 16: UPDATED FOOTER
======================================== */

.site-footer {
    position: relative;
    padding: 64px 0 24px;

    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(183, 245, 42, 0.05),
            transparent 45%
        ),
        linear-gradient(180deg, #070d16, #050a11);

    color: #ffffff;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183, 245, 42, 0.45),
            transparent
        );
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));

    gap: 40px;
    align-items: start;
}

.site-footer .footer-brand {
    max-width: 340px;
    min-width: 0;
}

.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.site-footer .footer-brand-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.site-footer .footer-brand > p {
    margin: 18px 0 0;
    color: #a9b6c5;
    font-size: 0.9rem;
    line-height: 1.75;
}

.site-footer .footer-brand .footer-tagline {
    margin-top: 16px;
    color: var(--lime, #b7f52a);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.site-footer .footer-column {
    min-width: 0;
}

.site-footer .footer-column h3 {
    margin: 0 0 12px;
    color: #edf2f7;

    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.site-footer .footer-column a {
    display: flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 6px 0;

    color: #a9b6c5;
    font-size: 0.87rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-decoration: none;

    transition: color 0.2s ease;
}

.site-footer .footer-column a:hover {
    color: var(--lime, #b7f52a);
    transform: none;
}

.site-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    color: #a0adbd;
    font-size: 0.78rem;
    line-height: 1.6;
}

.site-footer .footer-bottom p {
    margin: 0;
}

.site-footer .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 20px;
}

.site-footer .footer-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;

    color: #a9b6c5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer .footer-legal-links a:hover {
    color: #ffffff;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--lime, #b7f52a);
    outline-offset: 4px;
    border-radius: 4px;
}


/* TABLET */

@media (max-width: 1000px) {

    .site-footer .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
        max-width: 480px;
    }

    .site-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .site-footer .footer-legal-links {
        justify-content: flex-start;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .site-footer {
        padding: 40px 0 20px;
    }

    .site-footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .site-footer .footer-brand-logo {
        width: 170px;
    }

    .site-footer .footer-brand > p {
        max-width: 360px;
        margin-top: 16px;
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .site-footer .footer-brand .footer-tagline {
        margin-top: 12px;
        font-size: 0.78rem;
    }

    .site-footer .footer-column h3 {
        margin-bottom: 8px;
        font-size: 0.75rem;
    }

    .site-footer .footer-column a {
        font-size: 0.84rem;
    }

    .site-footer .footer-column--company {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    .site-footer .footer-column--company h3 {
        grid-column: 1 / -1;
    }

    .site-footer .footer-bottom {
        margin-top: 28px;
        padding-top: 18px;
        gap: 12px;
        font-size: 0.75rem;
    }

    .site-footer .footer-legal-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 2px 20px;
    }

}


/* ========================================
   SECTION 17: MOTION & MICRO-INTERACTIONS
========================================= */

/* Popular card hover fix — re-declared AFTER
   generic rules so it always wins */
.pricing-card--popular:hover {
    transform: translateY(-18px);
}

/* Small button (sticky bar) */
.btn-sm {
    min-height: 42px;
    padding-inline: 18px;
    font-size: 0.84rem;
}

/* Accessible focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Anchor offset under the sticky header */
#pricing {
    scroll-margin-top: 90px;
}

/* Header gains shadow once scrolled */
.site-header.is-scrolled {
    box-shadow: 0 10px 30px rgba(15, 28, 20, 0.08);
}

/* ---- Gentle float on hero cards ---- */
@keyframes lumo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.hero-float-card {
    animation: lumo-float 6s ease-in-out infinite;
}

.hero-float-card--server {
    animation-delay: 1.6s;
}

/* ---- Status dots pulse (subtle "alive" feel) ---- */
@keyframes lumo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(183, 245, 42, 0.35); }
    70%  { box-shadow: 0 0 0 9px rgba(183, 245, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 245, 42, 0); }
}

.status-dot,
.online-dot,
.infra-status span,
.vps-console-status span,
.final-cta-status span,
.human-support-chat-dot {
    animation: lumo-pulse 2.6s ease-out infinite;
}

/* ---- Chart bars grow in on page load ---- */
@keyframes lumo-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.bars span,
.infra-chart span,
.vps-workload-bars span {
    transform-origin: bottom;
    animation: lumo-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.bars span:nth-child(1), .infra-chart span:nth-child(1), .vps-workload-bars span:nth-child(1) { animation-delay: 0.05s; }
.bars span:nth-child(2), .infra-chart span:nth-child(2), .vps-workload-bars span:nth-child(2) { animation-delay: 0.10s; }
.bars span:nth-child(3), .infra-chart span:nth-child(3), .vps-workload-bars span:nth-child(3) { animation-delay: 0.15s; }
.bars span:nth-child(4), .infra-chart span:nth-child(4), .vps-workload-bars span:nth-child(4) { animation-delay: 0.20s; }
.bars span:nth-child(5), .infra-chart span:nth-child(5), .vps-workload-bars span:nth-child(5) { animation-delay: 0.25s; }
.bars span:nth-child(6), .infra-chart span:nth-child(6), .vps-workload-bars span:nth-child(6) { animation-delay: 0.30s; }
.bars span:nth-child(7), .infra-chart span:nth-child(7), .vps-workload-bars span:nth-child(7) { animation-delay: 0.35s; }
.bars span:nth-child(8), .infra-chart span:nth-child(8), .vps-workload-bars span:nth-child(8) { animation-delay: 0.40s; }
.bars span:nth-child(9), .infra-chart span:nth-child(9), .vps-workload-bars span:nth-child(9) { animation-delay: 0.45s; }
.bars span:nth-child(10), .infra-chart span:nth-child(10), .vps-workload-bars span:nth-child(10) { animation-delay: 0.50s; }

/* ---- Save badge (shown for 1yr / 2yr periods) ---- */
.pricing-save {
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #edffd9;
    color: #4f8d1c;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    align-self: center;
}

/* ========================================
   SECTION 18: SCROLL REVEAL
========================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger items inside grids */
[data-reveal]:nth-child(2) { transition-delay: 0.07s; }
[data-reveal]:nth-child(3) { transition-delay: 0.14s; }
[data-reveal]:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-float-card,
    .status-dot,
    .online-dot,
    .bars span,
    .infra-chart span,
    .vps-workload-bars span {
        animation: none;
    }

}

/* ========================================
   SECTION 19: STICKY CONVERSION BAR
========================================= */

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(9, 15, 10, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(183, 245, 42, 0.28);
    padding: 12px 20px;
    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.sticky-cta.is-visible {
    transform: translateY(0);
}

.sticky-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sticky-cta-text {
    color: #fff;
    font-size: 0.92rem;
}

.sticky-cta-text strong {
    color: var(--lime);
}

@media (max-width: 600px) {

    .sticky-cta {
        padding: 10px 14px;
    }

    .sticky-cta-text {
        font-size: 0.82rem;
    }

}

/* ========================================
   SECTION 20: GUARANTEE STRIP
========================================= */

.guarantee-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
    padding: 0;
    margin: 0 0 44px;
}

.guarantee-strip li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 620;
    color: #536055;
}

.guarantee-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: #edffd9;
    color: #4f8d1c;
    font-size: 0.68rem;
    font-weight: 900;
}

/* Optional — place near existing .hero-help-cue rules */
.hero-content .hero-help-cue {
    margin-top: 28px;
}


/* ========================================
   RESPONSIVE: TABLET
======================================== */

@media (max-width: 1000px) {

    .main-nav {
        display: none;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .hero-content {
        max-width: 750px;
    }

    .hero-visual {
        max-width: 700px;
    }

    .hero-float-card--ssl {
        left: 18px;
    }

    .hero-float-card--server {
        right: 18px;
    }

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

    .pricing-grid {
        grid-template-columns:
            1fr;
    }

    .pricing-card {
        max-width: 650px;

        width: 100%;

        margin-inline: auto;
    }

    .pricing-card--popular {
        transform: none;
    }

    .pricing-card--popular:hover {
        transform:
            translateY(-5px);
    }

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

}



/* ========================================
   RESPONSIVE: MOBILE
======================================== */

@media (max-width: 650px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }


    /* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

    .nav-wrap {
        min-height: 68px;
    }

    .login-link {
        display: none;
    }

    .nav-actions .btn {
        min-height: 40px;

        padding-inline: 15px;

        font-size: 0.86rem;
    }


    /* Hero */

    .hero {
        padding:
            65px 0 70px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.65rem,
                13vw,
                4rem
            );
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-features {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 12px;
    }

    .hosting-dashboard {
        padding: 20px;
    }

    .dashboard-stats {
        grid-template-columns:
            1fr;
    }

    .hero-float-card {
        display: none;
    }


    /* Trust bar */

    .trust-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .trust-grid > div {
        border-bottom:
            1px solid
            var(--border);
    }


    /* Hosting selector */

    .builder-section {
        padding:
            75px 0;
    }

    .builder-grid {
        grid-template-columns:
            1fr;
    }


    /* Pricing */

    .pricing-section {
        padding:
            80px 0;
    }

    .pricing-product-tabs {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;
    }

    .pricing-product-tab {
        white-space: nowrap;

        flex-shrink: 0;
    }

    .billing-switch {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;
    }

    .billing-option {
        white-space: nowrap;

        flex-shrink: 0;
    }

    .pricing-card {
        padding:
            30px 22px;
    }

    .pricing-heading {
        text-align: left;
    }

    .pricing-heading p {
        margin-left: 0;
    }

    .pricing-trust {
        justify-content:
            flex-start;
    }


    /* Footer */

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

    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* ========================================
   SECTION 06: WHY LUMOHOSTING
======================================== */

.why-lumo-section {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(183, 245, 42, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(125, 222, 69, 0.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #08101c 0%,
            #0c1524 52%,
            #101c2f 100%
        );

    color: var(--white);
}

.why-lumo-section::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}

.why-lumo-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 80px;

    align-items: center;
}



/* ========================================
   SECTION 06A: WHY LUMO INTRO
======================================== */

.eyebrow--light {
    color: var(--lime);
}

.why-lumo-content h2 {
    margin: 0;

    max-width: 560px;

    color: var(--white);

    font-size:
        clamp(
            2.6rem,
            4.7vw,
            4.4rem
        );

    line-height: 1;

    letter-spacing:
        -0.05em;
}

.why-lumo-content h2 span {
    color: var(--lime);
}

.why-lumo-content > p {
    max-width: 540px;

    margin:
        24px 0 0;

    color: #aab7c7;

    font-size: 1.05rem;

    line-height: 1.75;
}

.why-lumo-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 34px;
}

.why-text-link {
    color: #d8e1ec;

    font-size: 0.93rem;

    font-weight: 700;

    transition:
        color 0.2s ease;
}

.why-text-link:hover {
    color: var(--lime);
}



/* ========================================
   SECTION 06B: WHY LUMO FEATURE GRID
======================================== */

.why-lumo-features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.why-feature-card {
    min-height: 230px;

    padding: 28px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);

    backdrop-filter:
        blur(10px);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.why-feature-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(183, 245, 42, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(183, 245, 42, 0.08),
            rgba(255, 255, 255, 0.04)
        );
}

.why-feature-icon {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    margin-bottom: 24px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    box-shadow:
        0 10px 26px
        rgba(142, 229, 48, 0.18);
}

.why-feature-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: var(--navy);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.why-feature-card h3 {
    margin: 0;

    color: var(--white);

    font-size: 1.16rem;

    line-height: 1.35;

    letter-spacing:
        -0.02em;
}

.why-feature-card p {
    margin:
        12px 0 0;

    color: #9eabba;

    font-size: 0.91rem;

    line-height: 1.65;
}



/* ========================================
   SECTION 06: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .why-lumo-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .why-lumo-content {
        max-width: 700px;
    }

}


@media (max-width: 650px) {

    .why-lumo-section {
        padding:
            82px 0;
    }

    .why-lumo-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .why-lumo-features {
        grid-template-columns:
            1fr;
    }

    .why-feature-card {
        min-height: auto;

        padding: 24px;
    }

    .why-lumo-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .why-lumo-actions .btn {
        width: 100%;
    }

}

/* ========================================
   SECTION 07: PERFORMANCE / INFRASTRUCTURE
======================================== */

.performance-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(183, 245, 42, 0.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf6 100%
        );
}

.performance-layout {
    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 82px;

    align-items: center;
}



/* ========================================
   SECTION 07A: PERFORMANCE CONTENT
======================================== */

.performance-content h2 {
    margin: 0;

    max-width: 650px;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing:
        -0.05em;
}

.performance-content h2 span {
    color: var(--green-dark);
}

.performance-intro {
    max-width: 620px;

    margin:
        24px 0 0;

    color: var(--muted);

    font-size: 1.05rem;

    line-height: 1.75;
}

.performance-points {
    display: grid;

    gap: 24px;

    margin-top: 38px;
}

.performance-point {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 16px;

    align-items: flex-start;
}

.performance-point-icon {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #efffda,
            #dfffc0
        );

    border:
        1px solid #d8efc5;
}

.performance-point-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: var(--green-dark);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.performance-point h3 {
    margin: 1px 0 6px;

    color: var(--navy);

    font-size: 1.05rem;

    letter-spacing: -0.02em;
}

.performance-point p {
    margin: 0;

    max-width: 540px;

    color: var(--muted);

    font-size: 0.92rem;

    line-height: 1.65;
}

.performance-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 38px;
}

.performance-text-link {
    color: #4d6f24;

    font-size: 0.92rem;

    font-weight: 750;
}

.performance-text-link:hover {
    color: var(--green-dark);
}



/* ========================================
   SECTION 07B: PERFORMANCE VISUAL
======================================== */

.performance-visual {
    position: relative;
}

.infra-panel {
    position: relative;

    padding: 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #0b1321 0%,
            #111e31 100%
        );

    color: var(--white);

    border:
        1px solid rgba(255, 255, 255, 0.05);

    box-shadow:
        0 35px 80px
        rgba(10, 18, 31, 0.20);
}

.infra-panel::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(183, 245, 42, 0.12),
            transparent 25%
        );
}



/* ========================================
   SECTION 07B: PANEL HEADER
======================================== */

.infra-panel-header {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}

.infra-label {
    display: block;

    color: #8e9bae;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.infra-panel-header h3 {
    margin:
        8px 0 0;

    font-size: 1.45rem;

    line-height: 1.3;
}

.infra-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #d8e2eb;

    font-size: 0.75rem;

    font-weight: 700;
}

.infra-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:
        0 0 0 5px
        rgba(183, 245, 42, 0.08);
}



/* ========================================
   SECTION 07B: MAIN METRIC
======================================== */

.infra-main-metric {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding: 24px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.07);
}

.infra-main-metric > div:first-child span {
    display: block;

    color: #99a6b8;

    font-size: 0.78rem;
}

.infra-main-metric > div:first-child strong {
    display: block;

    margin-top: 4px;

    font-size: 2rem;

    letter-spacing: -0.04em;
}

.infra-speed-ring {
    width: 92px;
    height: 92px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--lime) 0deg 300deg,
            rgba(255, 255, 255, 0.08) 300deg 360deg
        );

    padding: 7px;
}

.infra-speed-ring > div {
    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    align-content: center;

    border-radius: 50%;

    background: #111b2c;
}

.infra-speed-ring strong,
.infra-speed-ring span {
    display: block;

    text-align: center;
}

.infra-speed-ring strong {
    color: var(--white);

    font-size: 1rem;
}

.infra-speed-ring span {
    margin-top: -2px;

    color: #8493a7;

    font-size: 0.65rem;
}



/* ========================================
   SECTION 07B: METRICS GRID
======================================== */

.infra-metrics {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 12px;
}

.infra-metric-card {
    padding: 18px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.055);
}

.infra-metric-label {
    display: block;

    color: #8f9db0;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.infra-metric-card strong {
    display: block;

    margin-top: 5px;

    color: var(--white);

    font-size: 1rem;
}

.infra-metric-card small {
    display: block;

    margin-top: 4px;

    color: #8190a3;

    font-size: 0.69rem;
}



/* ========================================
   SECTION 07B: PERFORMANCE GRAPH
======================================== */

.infra-graph-card {
    position: relative;

    z-index: 2;

    margin-top: 12px;

    padding: 22px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #caff3f 0%,
            #7dde45 100%
        );

    color: var(--navy);
}

.infra-graph-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.infra-graph-head span:first-child {
    display: block;

    font-size: 0.72rem;

    font-weight: 700;

    opacity: 0.74;
}

.infra-graph-head strong {
    display: block;

    margin-top: 2px;

    font-size: 1rem;
}

.infra-live {
    padding:
        5px 8px;

    border-radius: 7px;

    background:
        rgba(11, 18, 32, 0.10);

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.07em;
}

.infra-chart {
    height: 130px;

    display: flex;

    align-items: end;

    gap: 9px;

    margin-top: 22px;
}

.infra-chart span {
    flex: 1;

    min-height: 12px;

    border-radius:
        7px 7px 3px 3px;

    background:
        rgba(11, 18, 32, 0.72);
}



/* ========================================
   SECTION 07B: FLOATING BADGE
======================================== */

.infra-floating-badge {
    position: absolute;

    z-index: 3;

    right: -34px;

    bottom: 62px;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 190px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(213, 225, 209, 0.9);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 14px 34px
        rgba(17, 31, 20, 0.10);

    color: var(--navy);
}

.infra-floating-icon {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    font-weight: 900;
}

.infra-floating-badge strong,
.infra-floating-badge small {
    display: block;
}

.infra-floating-badge strong {
    font-size: 0.82rem;
}

.infra-floating-badge small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 0.69rem;
}



/* ========================================
   SECTION 07: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .performance-layout {
        grid-template-columns:
            1fr;

        gap: 58px;
    }

    .performance-content {
        max-width: 720px;
    }

    .performance-visual {
        max-width: 720px;
    }

    .infra-floating-badge {
        right: 18px;
    }

}


@media (max-width: 650px) {

    .performance-section {
        padding:
            82px 0;
    }

    .performance-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .performance-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .performance-actions .btn {
        width: 100%;
    }

    .infra-panel {
        padding: 20px;
    }

    .infra-panel-header {
        flex-direction: column;
    }

    .infra-main-metric {
        align-items: flex-start;

        flex-direction: column;
    }

    .infra-metrics {
        grid-template-columns:
            1fr;
    }

    .infra-floating-badge {
        display: none;
    }

    .infra-chart {
        gap: 6px;
    }

}

/* ========================================
   SECTION 08: VPS SPOTLIGHT
======================================== */

.vps-spotlight-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(183, 245, 42, 0.09),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #07101c 0%,
            #0a1422 52%,
            #0e1b2d 100%
        );

    color: var(--white);
}

.vps-spotlight-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.017) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.017) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

.vps-spotlight-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 82px;

    align-items: center;
}



/* ========================================
   SECTION 08A: VPS CONTENT
======================================== */

.vps-spotlight-content h2 {
    margin: 0;

    max-width: 650px;

    color: var(--white);

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.6rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.vps-spotlight-content h2 span {
    color: var(--lime);
}

.vps-spotlight-intro {
    max-width: 620px;

    margin: 24px 0 0;

    color: #a9b6c6;

    font-size: 1.05rem;

    line-height: 1.75;
}



/* ========================================
   SECTION 08B: VPS FEATURE LIST
======================================== */

.vps-feature-list {
    display: grid;

    gap: 20px;

    margin-top: 36px;
}

.vps-feature-item {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 14px;

    align-items: flex-start;
}

.vps-feature-check {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    margin-top: 2px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-size: 0.78rem;

    font-weight: 900;
}

.vps-feature-item strong {
    display: block;

    color: var(--white);

    font-size: 0.98rem;
}

.vps-feature-item p {
    max-width: 520px;

    margin: 4px 0 0;

    color: #8f9dae;

    font-size: 0.88rem;

    line-height: 1.6;
}



/* ========================================
   SECTION 08C: VPS ACTIONS
======================================== */

.vps-spotlight-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 36px;
}

.vps-secondary-link {
    color: #d8e2ec;

    font-size: 0.92rem;

    font-weight: 700;

    transition: color 0.2s ease;
}

.vps-secondary-link:hover {
    color: var(--lime);
}



/* ========================================
   SECTION 08D: VPS USE CASES
======================================== */

.vps-use-cases {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 30px;
}

.vps-use-cases span {
    padding: 7px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.045);

    color: #9ba9bb;

    font-size: 0.75rem;

    font-weight: 650;
}



/* ========================================
   SECTION 08E: VPS VISUAL / PLAN PREVIEW
======================================== */

.vps-spotlight-visual {
    position: relative;
}

.vps-console-card {
    position: relative;

    padding: 30px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #111c2e 0%,
            #17253a 100%
        );

    box-shadow:
        0 38px 90px
        rgba(3, 8, 15, 0.34);
}

.vps-console-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(183, 245, 42, 0.11),
            transparent 24%
        );
}



/* ========================================
   SECTION 08E: VPS CONSOLE HEADER
======================================== */

.vps-console-header {
    position: relative;
    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}

.vps-console-label {
    display: block;

    color: #8e9bae;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}

.vps-console-header h3 {
    margin: 8px 0 0;

    color: var(--white);

    font-size: 1.5rem;

    line-height: 1.3;
}

.vps-console-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #dce4eb;

    font-size: 0.74rem;

    font-weight: 700;
}

.vps-console-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:
        0 0 0 5px
        rgba(183, 245, 42, 0.08);
}



/* ========================================
   SECTION 08E: RESOURCE CARD
======================================== */

.vps-resource-card {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding: 24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.055);
}

.vps-resource-main span,
.vps-resource-main small {
    display: block;
}

.vps-resource-main span {
    color: #9ca9b9;

    font-size: 0.76rem;
}

.vps-resource-main strong {
    display: block;

    margin-top: 4px;

    color: var(--white);

    font-size: 1.85rem;

    letter-spacing: -0.04em;
}

.vps-resource-main small {
    margin-top: 4px;

    color: #8491a2;

    font-size: 0.7rem;
}

.vps-resource-icon {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-size: 0.95rem;

    font-weight: 900;

    box-shadow:
        0 15px 35px
        rgba(126, 222, 69, 0.18);
}



/* ========================================
   SECTION 08E: RESOURCE METRICS
======================================== */

.vps-resource-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    margin-top: 12px;
}

.vps-resource-item {
    padding: 17px 14px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.055);
}

.vps-resource-item span {
    display: block;

    color: #8795a7;

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.vps-resource-item strong {
    display: block;

    margin-top: 5px;

    color: var(--white);

    font-size: 0.88rem;
}



/* ========================================
   SECTION 08E: WORKLOAD GRAPH
======================================== */

.vps-workload-card {
    position: relative;
    z-index: 2;

    margin-top: 12px;

    padding: 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #caff3f 0%,
            #7dde45 100%
        );

    color: var(--navy);
}

.vps-workload-head {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}

.vps-workload-head span:first-child {
    display: block;

    font-size: 0.72rem;

    font-weight: 700;

    opacity: 0.74;
}

.vps-workload-head strong {
    display: block;

    margin-top: 2px;

    font-size: 1rem;
}

.vps-workload-badge {
    padding: 5px 8px;

    border-radius: 7px;

    background:
        rgba(11, 18, 32, 0.10);

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.07em;
}

.vps-workload-bars {
    height: 135px;

    display: flex;

    align-items: end;

    gap: 8px;

    margin-top: 22px;
}

.vps-workload-bars span {
    flex: 1;

    min-height: 12px;

    border-radius:
        7px 7px 3px 3px;

    background:
        rgba(11, 18, 32, 0.72);
}



/* ========================================
   SECTION 08E: FLOATING VPS CARD
======================================== */

.vps-floating-card {
    position: absolute;

    z-index: 3;

    left: -34px;

    bottom: 62px;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 205px;

    padding: 13px 15px;

    border:
        1px solid
        rgba(213, 225, 209, 0.9);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.97);

    color: var(--navy);

    box-shadow:
        0 14px 34px
        rgba(17, 31, 20, 0.10);
}

.vps-floating-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    font-weight: 900;
}

.vps-floating-card strong,
.vps-floating-card small {
    display: block;
}

.vps-floating-card strong {
    font-size: 0.82rem;
}

.vps-floating-card small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 0.69rem;
}



/* ========================================
   SECTION 08: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .vps-spotlight-grid {
        grid-template-columns: 1fr;

        gap: 58px;
    }

    .vps-spotlight-content {
        max-width: 720px;
    }

    .vps-spotlight-visual {
        max-width: 720px;
    }

    .vps-floating-card {
        left: 18px;
    }

}


@media (max-width: 650px) {

    .vps-spotlight-section {
        padding: 82px 0;
    }

    .vps-spotlight-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .vps-spotlight-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .vps-spotlight-actions .btn {
        width: 100%;
    }

    .vps-console-card {
        padding: 20px;
    }

    .vps-console-header {
        flex-direction: column;
    }

    .vps-resource-card {
        align-items: flex-start;

        flex-direction: column;
    }

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

    .vps-floating-card {
        display: none;
    }

    .vps-workload-bars {
        gap: 5px;
    }

}

/* ========================================
   SECTION 09: WEBSITE MIGRATION
======================================== */

.migration-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(183, 245, 42, 0.13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf6 100%
        );
}

.migration-grid {
    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 82px;

    align-items: center;
}



/* ========================================
   SECTION 09A: MIGRATION CONTENT
======================================== */

.migration-content h2 {
    margin: 0;

    max-width: 650px;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.migration-content h2 span {
    color: var(--green-dark);
}

.migration-intro {
    max-width: 620px;

    margin: 24px 0 0;

    color: var(--muted);

    font-size: 1.04rem;

    line-height: 1.75;
}



/* ========================================
   SECTION 09B: MIGRATION BENEFITS
======================================== */

.migration-benefits {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 36px;
}

.migration-benefit {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 12px;

    padding: 18px;

    border:
        1px solid var(--border);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.75);
}

.migration-check {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #efffdb,
            #dfffc1
        );

    color: var(--green-dark);

    font-size: 0.72rem;

    font-weight: 900;
}

.migration-benefit strong {
    display: block;

    color: var(--navy);

    font-size: 0.91rem;
}

.migration-benefit p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 0.81rem;

    line-height: 1.55;
}



/* ========================================
   SECTION 09C: MIGRATION ACTIONS
======================================== */

.migration-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 34px;
}

.migration-text-link {
    color: #4f7225;

    font-size: 0.92rem;

    font-weight: 750;
}

.migration-text-link:hover {
    color: var(--green-dark);
}

.migration-note {
    max-width: 600px;

    margin: 22px 0 0;

    color: #89938a;

    font-size: 0.77rem;

    line-height: 1.55;
}



/* ========================================
   SECTION 09D: MIGRATION VISUAL
======================================== */

.migration-visual {
    position: relative;
}

.migration-panel {
    position: relative;

    padding: 30px;

    border:
        1px solid var(--border);

    border-radius: 26px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 30px 80px
        rgba(19, 35, 22, 0.10);
}

.migration-panel::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(183, 245, 42, 0.14),
            transparent 24%
        );
}



/* ========================================
   SECTION 09D: PANEL HEADER
======================================== */

.migration-panel-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 24px;

    border-bottom:
        1px solid var(--border);
}

.migration-panel-label {
    display: block;

    color: #627060;

    font-size: 0.7rem;

    font-weight: 850;

    letter-spacing: 0.11em;
}

.migration-panel-top h3 {
    max-width: 420px;

    margin: 7px 0 0;

    color: var(--navy);

    font-size: 1.45rem;

    line-height: 1.3;

    letter-spacing: -0.03em;
}

.migration-status {
    padding: 7px 11px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #efffda,
            #d9ffb9
        );

    color: #4e861a;

    font-size: 0.71rem;

    font-weight: 850;
}



/* ========================================
   SECTION 09E: MIGRATION STEPS
======================================== */

.migration-steps {
    position: relative;
    z-index: 2;

    margin-top: 26px;
}

.migration-step {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 14px;

    align-items: flex-start;

    padding: 16px;

    border:
        1px solid transparent;

    border-radius: 15px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.migration-step--active {
    border-color:
        rgba(126, 222, 69, 0.35);

    background:
        rgba(183, 245, 42, 0.07);
}

.migration-step--complete {
    background:
        rgba(126, 222, 69, 0.035);
}

.migration-step-number {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #eef4eb;

    color: #586657;

    font-size: 0.72rem;

    font-weight: 850;
}

.migration-step--active .migration-step-number,
.migration-step--complete .migration-step-number {
    background:
        linear-gradient(
            135deg,
            #caff3f,
            #82df42
        );

    color: var(--navy);
}

.migration-step strong {
    display: block;

    color: var(--navy);

    font-size: 0.91rem;
}

.migration-step p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 0.79rem;

    line-height: 1.55;
}

.migration-step-state {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #eff3ed;

    color: #748173;

    font-size: 0.7rem;

    font-weight: 850;
}

.migration-step--complete .migration-step-state {
    background: var(--lime);

    color: var(--navy);
}

.migration-step--active .migration-step-state {
    background:
        rgba(183, 245, 42, 0.18);

    color: #5b9b20;
}

.migration-step-line {
    width: 2px;
    height: 12px;

    margin:
        0 0 0 32px;

    background:
        #dfe6dd;
}



/* ========================================
   SECTION 09F: MIGRATION SUCCESS CARD
======================================== */

.migration-success-card {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #0c1524 0%,
            #17253a 100%
        );

    color: var(--white);
}

.migration-success-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-weight: 900;
}

.migration-success-card strong,
.migration-success-card span {
    display: block;
}

.migration-success-card strong {
    font-size: 0.91rem;
}

.migration-success-card span {
    margin-top: 2px;

    color: #9ba9b9;

    font-size: 0.76rem;
}



/* ========================================
   SECTION 09: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .migration-grid {
        grid-template-columns: 1fr;

        gap: 58px;
    }

    .migration-content {
        max-width: 720px;
    }

    .migration-visual {
        max-width: 720px;
    }

}


@media (max-width: 650px) {

    .migration-section {
        padding: 82px 0;
    }

    .migration-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .migration-benefits {
        grid-template-columns: 1fr;
    }

    .migration-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .migration-actions .btn {
        width: 100%;
    }

    .migration-panel {
        padding: 20px;
    }

    .migration-panel-top {
        flex-direction: column;
    }

    .migration-step {
        grid-template-columns:
            auto 1fr;
    }

    .migration-step-state {
        display: none;
    }

}

/* ========================================
   SECTION 10: SERVER LOCATIONS
======================================== */

.locations-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(183, 245, 42, 0.11),
            transparent 25%
        ),
        var(--white);
}



/* ========================================
   SECTION 10A: LOCATIONS HEADING
======================================== */

.locations-heading {
    max-width: 720px;

    margin-bottom: 50px;
}

.locations-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.locations-heading h2 span {
    color: var(--green-dark);
}

.locations-heading p {
    max-width: 650px;

    margin: 22px 0 0;

    color: var(--muted);

    font-size: 1.03rem;

    line-height: 1.75;
}



/* ========================================
   SECTION 10B: LOCATION CARDS
======================================== */

.locations-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.location-card {
    position: relative;

    min-height: 325px;

    display: flex;

    flex-direction: column;

    padding: 26px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background:
        var(--white);

    box-shadow:
        0 12px 35px
        rgba(20, 32, 22, 0.045);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.location-card:hover {
    transform: translateY(-5px);

    border-color: #cad9c5;

    box-shadow: var(--shadow);
}

.location-card--featured {
    background:
        linear-gradient(
            180deg,
            rgba(183, 245, 42, 0.08),
            #ffffff 34%
        );

    border-color:
        rgba(126, 222, 69, 0.36);
}

.location-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.location-region-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-size: 0.74rem;

    font-weight: 900;

    letter-spacing: 0.05em;
}

.location-status {
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.64rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.location-status--planned {
    background: #eef3eb;

    color: #71806d;
}

.location-status--available {
    background: #eaffd4;

    color: #4f8c1d;
}

.location-card h3 {
    margin: 24px 0 8px;

    color: var(--navy);

    font-size: 1.35rem;

    letter-spacing: -0.03em;
}

.location-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.65;
}

.location-meta {
    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}

.location-meta span,
.location-meta strong {
    display: block;
}

.location-meta span {
    color: #869185;

    font-size: 0.69rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.location-meta strong {
    margin-top: 3px;

    color: var(--navy);

    font-size: 0.86rem;
}

.location-link {
    margin-top: auto;

    padding-top: 24px;

    color: #4f7d21;

    font-size: 0.86rem;

    font-weight: 750;
}

.location-link:hover {
    color: var(--green-dark);
}

.location-link--disabled {
    color: #9aa39a;

    cursor: default;
}



/* ========================================
   SECTION 10C: LOCATION GUIDANCE
======================================== */

.location-guidance {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 16px;

    align-items: center;

    margin-top: 28px;

    padding: 22px 24px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        #f7faf6;
}

.location-guidance-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        var(--navy);

    color: var(--lime);

    font-weight: 900;
}

.location-guidance strong {
    display: block;

    color: var(--navy);

    font-size: 0.92rem;
}

.location-guidance p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 0.8rem;

    line-height: 1.5;
}

.location-guidance-link {
    white-space: nowrap;

    color: #4f7d21;

    font-size: 0.86rem;

    font-weight: 750;
}



/* ========================================
   SECTION 10: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .locations-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .locations-section {
        padding: 82px 0;
    }

    .locations-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .locations-grid {
        grid-template-columns: 1fr;
    }

    .location-card {
        min-height: auto;
    }

    .location-guidance {
        grid-template-columns:
            auto 1fr;
    }

    .location-guidance-link {
        grid-column: 2;
    }

}

/* ========================================
   SECTION 11: HOSTING COMPARISON
======================================== */

.comparison-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #f7faf6 0%,
            #ffffff 100%
        );
}



/* ========================================
   SECTION 11A: COMPARISON HEADING
======================================== */

.comparison-heading {
    max-width: 760px;

    margin: 0 auto 52px;

    text-align: center;
}

.comparison-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.comparison-heading h2 span {
    color: var(--green-dark);
}

.comparison-heading p {
    max-width: 620px;

    margin: 22px auto 0;

    color: var(--muted);

    font-size: 1.03rem;

    line-height: 1.7;
}



/* ========================================
   SECTION 11B: COMPARISON TABLE WRAP
======================================== */

.comparison-table-wrap {
    overflow-x: auto;

    border:
        1px solid var(--border);

    border-radius: 22px;

    background: var(--white);

    box-shadow:
        0 24px 70px
        rgba(20, 33, 22, 0.07);
}

.comparison-table {
    min-width: 820px;
}



/* ========================================
   SECTION 11B: COMPARISON ROWS
======================================== */

.comparison-row {
    display: grid;

    grid-template-columns:
        0.8fr 1fr 1fr;

    border-bottom:
        1px solid var(--border);
}

.comparison-row:last-child {
    border-bottom: 0;
}

.comparison-row > div {
    padding: 20px 22px;

    display: flex;

    align-items: center;

    border-right:
        1px solid var(--border);
}

.comparison-row > div:last-child {
    border-right: 0;
}


/* ========================================
   SECTION 11: COMPARISON SCROLL UX
========================================= */

.comparison-table-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.comparison-table-wrap:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 3px;
}



/* ========================================
   SECTION 11B: TABLE HEADER
======================================== */

.comparison-row--header {
    background:
        linear-gradient(
            180deg,
            #fbfdf9,
            #f7faf5
        );
}

.comparison-row--header > div {
    min-height: 112px;
}

.comparison-feature-title {
    color: #5c685d;

    font-size: 0.82rem;

    font-weight: 750;
}

.comparison-product {
    gap: 12px;
}

.comparison-product--featured {
    background:
        linear-gradient(
            135deg,
            rgba(183, 245, 42, 0.12),
            rgba(125, 222, 69, 0.05)
        );
}

.comparison-product-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        var(--navy);

    color: var(--lime);

    font-size: 0.85rem;

    font-weight: 900;
}

.comparison-product strong,
.comparison-product small {
    display: block;
}

.comparison-product strong {
    color: var(--navy);

    font-size: 1rem;
}

.comparison-product small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 0.72rem;
}



/* ========================================
   SECTION 11B: TABLE VALUES
======================================== */

.comparison-value {
    color: #59655b;

    font-size: 0.86rem;

    line-height: 1.5;
}

.comparison-value--positive {
    gap: 8px;

    color: var(--navy);

    font-weight: 650;
}

.comparison-value--positive span {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    background: #ecffd7;

    color: #4f8d1d;

    font-size: 0.7rem;

    font-weight: 900;
}



/* ========================================
   SECTION 11B: TABLE ACTIONS
======================================== */

.comparison-row--actions {
    background: #fbfdf9;
}

.comparison-row--actions > div {
    min-height: 92px;
}

.comparison-btn {
    width: 100%;

    min-height: 48px;

    border:
        1px solid var(--border-strong);

    background: var(--white);

    color: var(--navy);
}

.comparison-row--actions
> div:last-child
.comparison-btn {
    border: 0;
}



/* ========================================
   SECTION 11C: DECISION HELPER
======================================== */

.comparison-helper {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    margin-top: 26px;

    padding: 24px 26px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #0b1422,
            #142238
        );

    color: var(--white);
}

.comparison-helper-content {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}

.comparison-helper-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-weight: 900;
}

.comparison-helper strong {
    display: block;

    font-size: 0.92rem;
}

.comparison-helper p {
    max-width: 760px;

    margin: 4px 0 0;

    color: #a5b1bf;

    font-size: 0.79rem;

    line-height: 1.55;
}

.comparison-helper-link {
    flex-shrink: 0;

    color: var(--lime);

    font-size: 0.86rem;

    font-weight: 750;
}



/* ========================================
   SECTION 11: RESPONSIVE
======================================== */

@media (max-width: 650px) {

    .comparison-section {
        padding: 82px 0;
    }

    .comparison-heading {
        text-align: left;
    }

    .comparison-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .comparison-heading p {
        margin-left: 0;
    }

    .comparison-helper {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ========================================
   SECTION 12: CUSTOMER TRUST
======================================== */

.customer-trust-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(183, 245, 42, 0.10),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf6 100%
        );
}



/* ========================================
   SECTION 12A: CUSTOMER TRUST HEADING
======================================== */

.customer-trust-heading {
    max-width: 760px;

    margin: 0 auto 52px;

    text-align: center;
}

.customer-trust-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.customer-trust-heading h2 span {
    color: var(--green-dark);
}

.customer-trust-heading p {
    max-width: 620px;

    margin: 22px auto 0;

    color: var(--muted);

    font-size: 1.03rem;

    line-height: 1.7;
}



/* ========================================
   SECTION 12B: TRUST PRINCIPLES
======================================== */

.customer-trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.customer-trust-card {
    min-height: 255px;

    padding: 27px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: var(--white);

    box-shadow:
        0 12px 35px
        rgba(19, 32, 20, 0.045);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.customer-trust-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(126, 222, 69, 0.40);

    box-shadow: var(--shadow);
}

.customer-trust-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #efffda,
            #dfffc0
        );

    border:
        1px solid #d9efc6;
}

.customer-trust-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: var(--green-dark);

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-trust-card h3 {
    margin: 0;

    color: var(--navy);

    font-size: 1.08rem;

    line-height: 1.35;

    letter-spacing: -0.02em;
}

.customer-trust-card p {
    margin: 11px 0 0;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.65;
}



/* ========================================
   SECTION 12C: FUTURE CUSTOMER REVIEWS
======================================== */

.future-reviews-panel {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        1fr 0.85fr;

    gap: 55px;

    align-items: center;

    margin-top: 28px;

    padding: 42px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0a1321 0%,
            #101d30 100%
        );

    color: var(--white);

    box-shadow:
        0 28px 70px
        rgba(12, 20, 32, 0.15);
}

.future-reviews-panel::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -110px;
    top: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 245, 42, 0.16),
            transparent 68%
        );

    pointer-events: none;
}

.future-reviews-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 18px;

    align-items: flex-start;
}

.future-reviews-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-size: 1rem;

    font-weight: 900;
}

.future-reviews-label {
    display: block;

    color: var(--lime);

    font-size: 0.7rem;

    font-weight: 850;

    letter-spacing: 0.11em;
}

.future-reviews-content h3 {
    margin: 7px 0 0;

    color: var(--white);

    font-size: 1.55rem;

    letter-spacing: -0.03em;
}

.future-reviews-content p {
    max-width: 560px;

    margin: 11px 0 0;

    color: #a3afbd;

    font-size: 0.89rem;

    line-height: 1.65;
}



/* ========================================
   SECTION 12C: REVIEW PREVIEW VISUAL
======================================== */

.future-reviews-preview {
    position: relative;

    min-height: 230px;
}

.review-preview-card {
    position: absolute;

    z-index: 2;

    right: 0;

    top: 8px;

    width: min(100%, 330px);

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.075);

    backdrop-filter: blur(12px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.14);
}

.review-preview-card--back {
    z-index: 1;

    right: 55px;

    top: 82px;

    opacity: 0.55;

    transform: scale(0.94);
}

.review-preview-stars {
    color: var(--lime);

    font-size: 0.85rem;

    letter-spacing: 0.08em;
}

.review-preview-lines {
    display: grid;

    gap: 9px;

    margin-top: 18px;
}

.review-preview-lines span {
    display: block;

    height: 8px;

    border-radius: 99px;

    background:
        rgba(255, 255, 255, 0.12);
}

.review-preview-lines span:nth-child(1) {
    width: 100%;
}

.review-preview-lines span:nth-child(2) {
    width: 82%;
}

.review-preview-lines span:nth-child(3) {
    width: 62%;
}

.review-preview-person {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;
}

.review-preview-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(202, 255, 63, 0.65),
            rgba(121, 223, 62, 0.35)
        );
}

.review-preview-person div {
    flex: 1;

    display: grid;

    gap: 5px;
}

.review-preview-person div span {
    height: 6px;

    border-radius: 99px;

    background:
        rgba(255, 255, 255, 0.12);
}

.review-preview-person div span:first-child {
    width: 55%;
}

.review-preview-person div span:last-child {
    width: 35%;
}



/* ========================================
   SECTION 12: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .customer-trust-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .future-reviews-panel {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .future-reviews-preview {
        max-width: 500px;
    }

}


@media (max-width: 650px) {

    .customer-trust-section {
        padding: 82px 0;
    }

    .customer-trust-heading {
        text-align: left;
    }

    .customer-trust-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .customer-trust-heading p {
        margin-left: 0;
    }

    .customer-trust-grid {
        grid-template-columns: 1fr;
    }

    .customer-trust-card {
        min-height: auto;
    }

    .future-reviews-panel {
        padding: 28px 22px;
    }

    .future-reviews-content {
        grid-template-columns: 1fr;
    }

    .future-reviews-preview {
        min-height: 200px;
    }

    .review-preview-card {
        position: relative;

        top: 0;
        right: auto;

        width: 100%;
    }

    .review-preview-card--back {
        display: none;
    }

}

/* ========================================
   SECTION 13: GUIDES / RESOURCE CONTENT
======================================== */

.resources-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf6 100%
        );
}



/* ========================================
   SECTION 13A: RESOURCES HEADING
======================================== */

.resources-heading {
    max-width: 760px;

    margin-bottom: 50px;
}

.resources-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.5rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.resources-heading h2 span {
    color: var(--green-dark);
}

.resources-heading p {
    max-width: 650px;

    margin: 22px 0 0;

    color: var(--muted);

    font-size: 1.03rem;

    line-height: 1.7;
}



/* ========================================
   SECTION 13B: FEATURED GUIDE
======================================== */

.featured-guide-card {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 50px;

    align-items: center;

    padding: 42px;

    border:
        1px solid var(--border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0b1422 0%,
            #122137 100%
        );

    color: var(--white);

    box-shadow:
        0 28px 70px
        rgba(11, 20, 34, 0.13);
}

.resource-category {
    display: block;

    color: var(--lime);

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.11em;
}

.featured-guide-content h3 {
    max-width: 650px;

    margin: 12px 0 0;

    color: var(--white);

    font-size:
        clamp(
            2rem,
            3.3vw,
            3rem
        );

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.featured-guide-content p {
    max-width: 620px;

    margin: 18px 0 0;

    color: #a5b1bf;

    font-size: 0.94rem;

    line-height: 1.7;
}

.resource-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;
}

.resource-meta span {
    padding: 7px 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.05);

    color: #aab7c6;

    font-size: 0.72rem;
}

.resource-main-link {
    display: inline-block;

    margin-top: 28px;

    color: var(--lime);

    font-size: 0.9rem;

    font-weight: 750;
}



/* ========================================
   SECTION 13B: FEATURED GUIDE VISUAL
======================================== */

.featured-guide-visual {
    position: relative;
}

.resource-compare-panel {
    padding: 26px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(10px);
}

.resource-compare-header {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #dce5ee;

    font-size: 0.8rem;

    font-weight: 700;
}

.resource-compare-bars {
    display: grid;

    gap: 18px;

    margin-top: 26px;
}

.resource-compare-bars > div {
    display: grid;

    gap: 7px;
}

.resource-compare-bars small {
    color: #8d9aab;

    font-size: 0.68rem;
}

.resource-bar {
    display: block;

    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.07);
}

.resource-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #caff3f,
            #79df3e
        );
}

.resource-vps-badge {
    margin-top: 25px;

    padding: 18px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);
}

.resource-vps-badge strong,
.resource-vps-badge span {
    display: block;
}

.resource-vps-badge strong {
    font-size: 0.9rem;
}

.resource-vps-badge span {
    margin-top: 3px;

    font-size: 0.74rem;
}



/* ========================================
   SECTION 13C: GUIDE CARDS
======================================== */

.resources-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 24px;
}

.resource-card {
    position: relative;

    min-height: 285px;

    padding: 28px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: var(--white);

    box-shadow:
        0 12px 35px
        rgba(20, 32, 22, 0.04);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.resource-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(126, 222, 69, 0.42);

    box-shadow: var(--shadow);
}

.resource-card-number {
    position: absolute;

    right: 22px;
    top: 20px;

    color: #d8dfd6;

    font-size: 2.4rem;

    font-weight: 900;

    line-height: 1;
}

.resource-card .resource-category {
    color: var(--green-dark);
}

.resource-card h3 {
    max-width: 320px;

    margin: 18px 0 0;

    color: var(--navy);

    font-size: 1.15rem;

    line-height: 1.4;

    letter-spacing: -0.025em;
}

.resource-card p {
    margin: 12px 0 0;

    color: var(--muted);

    font-size: 0.86rem;

    line-height: 1.65;
}

.resource-card a {
    display: inline-block;

    margin-top: 24px;

    color: #4e7e20;

    font-size: 0.84rem;

    font-weight: 750;
}



/* ========================================
   SECTION 13D: RESOURCE CTA
======================================== */

.resources-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 26px;

    padding: 24px 26px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background: var(--white);
}

.resources-footer strong {
    display: block;

    color: var(--navy);

    font-size: 0.94rem;
}

.resources-footer p {
    max-width: 760px;

    margin: 5px 0 0;

    color: var(--muted);

    font-size: 0.8rem;

    line-height: 1.55;
}



/* ========================================
   SECTION 13: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .featured-guide-card {
        grid-template-columns: 1fr;
    }

    .resources-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .resources-section {
        padding: 82px 0;
    }

    .resources-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .featured-guide-card {
        padding: 28px 22px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    .resource-card {
        min-height: auto;
    }

    .resources-footer {
        align-items: stretch;

        flex-direction: column;
    }

    .resources-footer .btn {
        width: 100%;
    }

}

/* ========================================
   SECTION 14: FAQ
======================================== */

.faq-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(183, 245, 42, 0.09),
            transparent 25%
        ),
        var(--white);
}

.faq-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 80px;

    align-items: flex-start;
}



/* ========================================
   SECTION 14A: FAQ INTRO
======================================== */

.faq-intro {
    position: sticky;

    top: 110px;
}

.faq-intro h2 {
    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.4rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.faq-intro h2 span {
    color: var(--green-dark);
}

.faq-intro > p {
    max-width: 560px;

    margin: 22px 0 0;

    color: var(--muted);

    font-size: 1rem;

    line-height: 1.7;
}



/* ========================================
   SECTION 14A: FAQ SUPPORT BOX
======================================== */

.faq-support-box {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 14px;

    margin-top: 34px;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fbf6,
            #f2f8ee
        );
}

.faq-support-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy);

    font-weight: 900;
}

.faq-support-box strong {
    display: block;

    color: var(--navy);

    font-size: 0.92rem;
}

.faq-support-box p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 0.8rem;

    line-height: 1.55;
}

.faq-support-box a {
    display: inline-block;

    margin-top: 10px;

    color: #4f7d21;

    font-size: 0.81rem;

    font-weight: 750;
}



/* ========================================
   SECTION 14B: FAQ ACCORDION
======================================== */

.faq-list {
    display: grid;

    gap: 12px;
}

.faq-item {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background: var(--white);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.faq-item:hover {
    border-color:
        rgba(126, 222, 69, 0.38);

    box-shadow:
        0 10px 30px
        rgba(20, 32, 22, 0.045);
}

.faq-question {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    border: 0;

    background: transparent;

    color: var(--navy);

    text-align: left;

    font-size: 0.95rem;

    font-weight: 750;
}

.faq-toggle {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    background: #f0f5ed;

    color: var(--green-dark);

    font-size: 1rem;

    font-weight: 850;
}



/* ========================================
   SECTION 14B: FAQ ANSWERS
======================================== */

.faq-answer {
    display: none;

    padding:
        0 24px 22px;
}

.faq-answer--open {
    display: block;
}

.faq-answer p {
    margin: 0;

    max-width: 700px;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.7;
}



/* ========================================
   SECTION 14: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .faq-layout {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .faq-intro {
        position: static;

        max-width: 720px;
    }

}


@media (max-width: 650px) {

    .faq-section {
        padding: 82px 0;
    }

    .faq-intro h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .faq-question {
        padding:
            19px 18px;

        font-size: 0.9rem;
    }

    .faq-answer {
        padding:
            0 18px 19px;
    }

}

/* ========================================
   FAQ: CREATIVE HELP-DESK STYLE
======================================== */

.faq-creative {
    background:
        radial-gradient(
            ellipse at 8% 35%,
            rgba(183, 245, 42, 0.13),
            transparent 45%
        ),
        #ffffff;
}

.faq-creative .faq-conversation {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid #263b35;
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(183, 245, 42, 0.16),
            transparent 55%
        ),
        radial-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        #101e24;

    background-size: auto, 18px 18px, auto;
    box-shadow: 0 20px 45px rgba(11, 25, 21, 0.12);
}

.faq-creative .faq-conversation::before {
    content: "LUMO / HELP DESK";
    display: block;
    margin-bottom: 20px;

    color: #b7f52a;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.faq-creative .faq-conversation-question {
    padding: 22px 18px 22px 72px;
    border: 0;
    border-radius: 18px 18px 18px 4px;
    background: #ffffff;
}

.faq-creative .faq-conversation-question > span {
    top: 22px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.faq-creative .faq-conversation-question strong {
    font-size: 1rem;
}

.faq-creative .faq-conversation-tags {
    gap: 8px;
    margin-top: 20px;
}

.faq-creative .faq-conversation-tags span {
    padding: 9px 13px;
    border: 1px solid rgba(183, 245, 42, 0.2);
    border-radius: 10px;

    background: rgba(183, 245, 42, 0.08);
    color: #d5edb5;
    font-size: 0.72rem;
}

.faq-creative .faq-direct-help {
    margin-top: 26px;
    padding: 18px 20px;
    border-left: 3px solid #b7f52a;
    border-radius: 0 14px 14px 0;
    background: #f3f8ed;
}

.faq-creative .faq-list-label {
    margin-bottom: 10px;
}

.faq-creative .faq-item {
    position: relative;
    border: 1px solid #e0e8da;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(25, 49, 18, 0.035);
}

.faq-creative .faq-prompt {
    padding: 20px;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    gap: 14px;
}

.faq-creative .faq-topic-icon {
    width: 42px;
    height: 42px;
    border: 1px solid #dce8cf;
    border-radius: 13px;

    background: linear-gradient(145deg, #f5faee, #eaf4dd);
    color: #557b32;
}

.faq-creative .faq-topic-icon svg {
    width: 22px;
    height: 22px;
}

.faq-creative .faq-native-toggle {
    width: 30px;
    height: 30px;
    background: #eef5e7;
}

.faq-creative .faq-item[open] {
    border-color: #97c95c;
    box-shadow: 0 12px 30px rgba(80, 122, 35, 0.09);
}

.faq-creative .faq-item[open]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #b7f52a;
}

.faq-creative .faq-item[open] .faq-prompt {
    background: linear-gradient(110deg, #f0f9e3, #ffffff);
}

.faq-creative .faq-item[open] .faq-topic-icon {
    border-color: #b7f52a;
    background: #b7f52a;
    color: #182b14;
}

.faq-creative .faq-item[open] .faq-native-toggle {
    background: #183027;
    color: #b7f52a;
}

.faq-creative details.faq-item[open] > .faq-answer {
    padding: 0 64px 24px 76px;
}

.faq-creative .faq-answer p {
    line-height: 1.75;
}

.faq-creative .faq-answer-link {
    gap: 10px;
    margin-top: 10px;
}

@media (hover: hover) {
    .faq-creative .faq-item:not([open]):hover {
        border-color: #aac88c;
        background: #fbfdf8;
    }
}

@media (max-width: 650px) {

    .faq-creative .faq-conversation {
        padding: 20px;
        border-radius: 20px;
    }

    .faq-creative .faq-conversation-question {
        padding: 18px 14px 18px 62px;
    }

    .faq-creative .faq-conversation-question > span {
        top: 18px;
        left: 14px;
        width: 34px;
        height: 34px;
    }

    .faq-creative .faq-conversation-question strong {
        font-size: 0.9rem;
    }

    .faq-creative .faq-direct-help {
        padding: 16px;
    }

    .faq-creative .faq-prompt {
        padding: 16px;
        grid-template-columns: 34px minmax(0, 1fr) 26px;
        gap: 10px;
        font-size: 0.875rem;
    }

    .faq-creative .faq-topic-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .faq-creative .faq-topic-icon svg {
        width: 19px;
        height: 19px;
    }

    .faq-creative .faq-native-toggle {
        width: 26px;
        height: 26px;
    }

    .faq-creative details.faq-item[open] > .faq-answer {
        padding: 0 18px 20px 60px;
    }

}

/* ========================================
   SECTION 15: FINAL CTA
======================================== */

.final-cta-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0 90px;

    background:
        linear-gradient(
            180deg,
            #f7faf6 0%,
            #ffffff 100%
        );
}

.final-cta-card {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 60px;

    align-items: center;

    padding: 54px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(183, 245, 42, 0.14),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #08111e 0%,
            #0d1828 52%,
            #14223a 100%
        );

    color: var(--white);

    box-shadow:
        0 35px 90px
        rgba(10, 18, 30, 0.18);
}

.final-cta-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}



/* ========================================
   SECTION 15A: FINAL CTA CONTENT
======================================== */

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-content h2 {
    margin: 0;

    max-width: 650px;

    color: var(--white);

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.6rem
        );

    line-height: 1;

    letter-spacing: -0.05em;
}

.final-cta-content h2 span {
    color: var(--lime);
}

.final-cta-content p {
    max-width: 590px;

    margin: 22px 0 0;

    color: #a9b6c6;

    font-size: 1rem;

    line-height: 1.72;
}

.final-cta-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 32px;
}

.final-cta-secondary {
    color: #dce5ee;

    font-size: 0.93rem;

    font-weight: 750;

    transition: color 0.2s ease;
}

.final-cta-secondary:hover {
    color: var(--lime);
}



/* ========================================
   SECTION 15B: FINAL CTA VISUAL
======================================== */

.final-cta-visual {
    position: relative;
    z-index: 2;
}

.final-cta-dashboard {
    padding: 28px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);
}

.final-cta-dashboard-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.final-cta-dashboard-top > div span,
.final-cta-dashboard-top > div strong {
    display: block;
}

.final-cta-dashboard-top > div span {
    color: #8f9cad;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}

.final-cta-dashboard-top > div strong {
    margin-top: 6px;

    color: var(--white);

    font-size: 1.4rem;
}

.final-cta-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #dbe4ec;

    font-size: 0.72rem;

    font-weight: 700;
}

.final-cta-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:
        0 0 0 5px
        rgba(183, 245, 42, 0.08);
}

.final-cta-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 24px;
}

.final-cta-metrics > div {
    padding: 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.04);
}

.final-cta-metrics span,
.final-cta-metrics strong {
    display: block;
}

.final-cta-metrics span {
    color: #8896a8;

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.final-cta-metrics strong {
    margin-top: 5px;

    color: var(--white);

    font-size: 0.92rem;
}

.final-cta-launch {
    margin-top: 12px;

    padding: 24px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #caff3f 0%,
            #79df3e 100%
        );

    color: var(--navy);
}

.final-cta-launch span,
.final-cta-launch strong {
    display: block;
}

.final-cta-launch span {
    font-size: 0.78rem;

    font-weight: 700;

    opacity: 0.78;
}

.final-cta-launch strong {
    margin-top: 2px;

    font-size: 1.45rem;

    letter-spacing: -0.03em;
}



/* ========================================
   SECTION 15: RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .final-cta-card {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .final-cta-content {
        max-width: 720px;
    }

    .final-cta-visual {
        max-width: 650px;
    }

}

@media (max-width: 650px) {

    .final-cta-section {
        padding: 82px 0 70px;
    }

    .final-cta-card {
        padding: 30px 22px;
    }

    .final-cta-content h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }

    .final-cta-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .final-cta-actions .btn {
        width: 100%;
    }

    .final-cta-dashboard {
        padding: 20px;
    }

    .final-cta-dashboard-top {
        flex-direction: column;
    }

    .final-cta-metrics {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   SECTION 12D: HUMAN SUPPORT / EXPERT HELP
======================================== */

.human-support-section,
.human-support-section *,
.human-support-section *::before,
.human-support-section *::after {
    box-sizing: border-box;
}

.human-support-section {
    position: relative;
    overflow: hidden;
    padding: 64px 0 56px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(183, 245, 42, 0.14),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f7faf6 0%,
            #ffffff 100%
        );
}

.human-support-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 32px;
    align-items: center;
    padding: 48px 40px 0;

    border: 1px solid var(--border, #dfe7da);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fbf4 100%
        );

    box-shadow:
        0 28px 80px rgba(20, 35, 20, 0.09);
}

.human-support-card::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 420px;
    height: 420px;
    right: -100px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 245, 42, 0.18),
            transparent 68%
        );

    pointer-events: none;
}


/* ========================================
   SECTION 12D-A: CONTENT
======================================== */

.human-support-content {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding-bottom: 48px;
}

.human-support-content > .eyebrow {
    display: inline-block;
    margin-bottom: 22px;
}

.human-support-content h2 {
    margin: 0;
    max-width: 620px;

    color: var(--navy, #0b1422);
    font-size: clamp(2.4rem, 3.8vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.human-support-content h2 span {
    color: var(--green-dark, #4c981c);
}

.human-support-content > p {
    max-width: 590px;
    margin: 22px 0 0;

    color: var(--muted, #5d6c61);
    font-size: 1rem;
    line-height: 1.72;
}


/* ========================================
   SUPPORT POINTS
======================================== */

.human-support-points {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.human-support-point {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.human-support-point > span {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;
    margin-top: 1px;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy, #0b1422);
    font-size: 0.8rem;
    font-weight: 900;
}

.human-support-point strong,
.human-support-point small {
    display: block;
}

.human-support-point strong {
    color: var(--navy, #0b1422);
    font-size: 0.91rem;
}

.human-support-point small {
    margin-top: 3px;

    color: var(--muted, #5d6c61);
    font-size: 0.8rem;
    line-height: 1.5;
}


/* ========================================
   SUPPORT ACTIONS
======================================== */

.human-support-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;
    margin-top: 28px;
}

.human-support-actions .btn {
    min-height: 48px;
    text-align: center;
}

.human-support-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;

    color: #4f7823;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.human-support-link:hover {
    color: var(--green-dark, #4c981c);
}

.human-support-actions a:focus-visible {
    outline: 3px solid #4c981c;
    outline-offset: 5px;
}


/* ========================================
   SECTION 12D-B: VISUAL / IMAGE
======================================== */

.human-support-visual {
    position: relative;
    min-width: 0;
    min-height: 610px;
    align-self: stretch;
}

.human-support-image-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 100%;
    max-width: 520px;
    transform: translateX(-50%);
}

.human-support-glow {
    position: absolute;
    left: 50%;
    bottom: 15px;

    width: min(100%, 430px);
    aspect-ratio: 1;

    transform: translateX(-50%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 245, 42, 0.24),
            rgba(183, 245, 42, 0.07) 42%,
            transparent 70%
        );

    filter: blur(4px);
    pointer-events: none;
}

.human-support-image {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: bottom center;
}


/* ========================================
   SECTION 12D-C/D: FLOATING CARDS
======================================== */

.human-support-float {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    max-width: calc(100% - 24px);
    padding: 12px 14px;

    border:
        1px solid rgba(211, 223, 207, 0.92);

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 14px 34px rgba(18, 32, 22, 0.1);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Updated position */

.human-support-float--plan {
    top: 0;
    right: 12px;
}

.human-support-float--migration {
    left: 12px;
    bottom: 250px;
}

.human-support-float > div {
    min-width: 0;
}

.human-support-float-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy, #0b1422);
    font-weight: 900;
}

.human-support-float strong,
.human-support-float small {
    display: block;
}

.human-support-float strong {
    color: var(--navy, #0b1422);
    font-size: 0.8rem;
    line-height: 1.4;
}

.human-support-float small {
    margin-top: 3px;

    color: var(--muted, #5d6c61);
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: normal;
}


/* ========================================
   SECTION 12D-E: MINI CHAT VISUAL
======================================== */

.human-support-chat {
    position: absolute;
    z-index: 4;

    right: 12px;
    bottom: 24px;

    width: min(250px, calc(100% - 24px));
    padding: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #0b1422,
            #142339
        );

    color: var(--white, #ffffff);

    box-shadow:
        0 22px 55px rgba(8, 16, 28, 0.18);
}

.human-support-chat-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.human-support-chat-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;

    border-radius: 50%;
    background: var(--lime, #b7f52a);

    box-shadow:
        0 0 0 5px rgba(183, 245, 42, 0.08);
}

.human-support-chat-top strong,
.human-support-chat-top small {
    display: block;
}

.human-support-chat-top strong {
    font-size: 0.8rem;
    line-height: 1.4;
}

.human-support-chat-top small {
    margin-top: 3px;
    color: #aab7c7;
    font-size: 0.7rem;
    line-height: 1.4;
}

.human-support-chat-message {
    width: 88%;
    margin-top: 14px;
    margin-left: auto;
    padding: 10px 12px;

    border-radius: 10px 10px 3px 10px;

    background: rgba(255, 255, 255, 0.075);
    color: #c8d2de;

    font-size: 0.75rem;
    line-height: 1.5;
}

.human-support-chat-reply {
    width: 92%;
    margin-top: 8px;
    padding: 10px 12px;

    border-radius: 10px 10px 10px 3px;

    background:
        linear-gradient(
            135deg,
            #caff3f,
            #79df3e
        );

    color: var(--navy, #0b1422);

    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.5;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .human-support-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 36px 32px 0;
    }

    .human-support-content {
        max-width: 720px;
        padding-bottom: 0;
    }

    .human-support-content h2 {
        font-size: clamp(2.5rem, 5vw, 3.6rem);
    }

    .human-support-visual {
        width: min(100%, 600px);
        min-height: 610px;
        justify-self: center;
    }

    .human-support-image-wrap {
        width: min(100%, 440px);
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 650px) {

    .human-support-section {
        padding: 40px 0;
    }

    .human-support-card {
        gap: 20px;
        padding: 28px 20px 0;
        border-radius: 22px;
    }

    .human-support-content > .eyebrow {
        margin-bottom: 18px;
        font-size: 0.7rem;
        line-height: 1.6;
    }

    .human-support-content h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .human-support-content > p {
        margin-top: 18px;
        font-size: 0.94rem;
    }

    .human-support-points {
        gap: 15px;
        margin-top: 24px;
    }

    .human-support-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 24px;
    }

    .human-support-actions .btn {
        width: 100%;
    }

    .human-support-link {
        justify-content: center;
        text-align: center;
    }

    .human-support-visual {
        display: flex;
        flex-direction: column;
        gap: 12px;

        width: 100%;
        min-height: 0;
        margin-top: 0;
    }

    .human-support-image-wrap {
        position: relative;
        left: auto;
        bottom: auto;

        order: 3;
        width: min(100%, 360px);
        max-width: 100%;

        margin: 0 auto;
        transform: none;
    }

    .human-support-glow {
        width: 100%;
    }

    .human-support-float {
        position: static;

        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
    }

    .human-support-float--plan {
        order: 1;
    }

    .human-support-float--migration {
        order: 2;
    }

    .human-support-chat {
        display: none;
    }

}

/* Support portrait: larger, with space above the face */

.human-support-image-wrap {
    top: 60px;
    bottom: 0;
    width: 100%;
    max-width: 520px;
}

.human-support-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.human-support-float--plan {
    top: 0;
    right: 12px;
}

.human-support-chat {
    width: 220px;
    right: 0;
    bottom: 16px;
}

@media (max-width: 1000px) {
    .human-support-image-wrap {
        width: min(100%, 480px);
    }
}

@media (max-width: 650px) {
    .human-support-image-wrap {
        top: auto;
        bottom: auto;
        width: min(100%, 360px);
    }

    .human-support-image {
        height: auto;
    }

    .human-support-chat {
        display: none;
    }
}


/* ========================================
   FINAL CTA: COMPACT MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

    .final-cta-section {
        padding: 40px 0 24px;
    }

    .final-cta-card {
        gap: 28px;
        padding: 28px 20px;
        border-radius: 24px;
    }

    .final-cta-content h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .final-cta-content p {
        margin-top: 18px;
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .final-cta-actions {
        gap: 12px;
        margin-top: 24px;
    }

    .final-cta-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .final-cta-dashboard {
        padding: 18px;
        border-radius: 20px;
    }

    .final-cta-dashboard-top {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .final-cta-dashboard-top > div strong {
        font-size: 1.15rem;
    }

    .final-cta-status {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    .final-cta-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 18px;
    }

    .final-cta-metrics > div {
        min-width: 0;
        padding: 12px 8px;
        border-radius: 12px;
    }

    .final-cta-metrics span {
        font-size: 0.6rem;
        letter-spacing: 0.03em;
    }

    .final-cta-metrics strong {
        margin-top: 6px;
        font-size: 0.85rem;
    }

    .final-cta-launch {
        margin-top: 12px;
        padding: 18px;
        border-radius: 14px;
    }

    .final-cta-launch strong {
        font-size: 1.3rem;
    }

}




/* ========================================
   WEB HOSTING PAGE

   WEB SECTION 01: HERO
========================================= */

.web-hero {
    position: relative;
    overflow: hidden;

    padding: 90px 0 110px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(183, 245, 42, 0.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf6 100%
        );
}

.web-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, 0.96fr);

    align-items: center;

    gap: clamp(36px, 5vw, 76px);
}


/* ========================================
   WEB SECTION 01A: HERO CONTENT
========================================= */

.web-hero-content {
    min-width: 0;
}

.web-hero-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    margin-bottom: 24px;

    color: #4f8123;

    font-size: 0.74rem;
    font-weight: 850;

    letter-spacing: 0.12em;
}

.web-hero-eyebrow-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green);
}

.web-hero h1 {
    max-width: 680px;

    margin: 0;

    color: var(--navy);

    font-size: clamp(
        3rem,
        4.8vw,
        4.65rem
    );

    font-weight: 850;
    line-height: 1.04;

    letter-spacing: -0.055em;
}

.web-hero h1 span {
    display: block;

    color: var(--green-dark);
}

.web-hero-description {
    max-width: 590px;

    margin: 25px 0 0;

    color: var(--muted);

    font-size: 1.08rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 01A: HERO BENEFITS
========================================= */

.web-hero-benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 12px 22px;

    margin: 26px 0 0;
    padding: 0;

    list-style: none;
}

.web-hero-benefits li {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    color: #435348;

    font-size: 0.84rem;
    font-weight: 700;
}

.web-hero-benefits li span {
    display: grid;

    place-items: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: #e9fbdc;
    color: #488a19;

    font-size: 0.7rem;
}


/* ========================================
   WEB SECTION 01B: HERO ACTIONS
========================================= */

.web-hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    gap: 12px;

    margin-top: 34px;
}

.web-hero-actions .btn {
    gap: 12px;
}

.web-hero-actions .btn span {
    font-size: 1.1rem;
}


/* ========================================
   WEB SECTION 01C: STARTING PRICE
========================================= */

.web-hero-price {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    max-width: 550px;

    margin-top: 38px;
    padding: 20px 23px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(
        255, 255, 255, 0.9
    );

    box-shadow:
        0 12px 35px
        rgba(20, 32, 21, 0.04);
}

.web-hero-price-content {
    min-width: 0;
}

.web-hero-price-label {
    display: block;

    color: #66796a;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.09em;
}

.web-hero-price-value {
    display: flex;

    align-items: baseline;
    gap: 5px;

    margin-top: 5px;

    color: var(--navy);
}

.web-hero-price-value strong {
    font-size: 2.2rem;
    font-weight: 850;

    line-height: 1.1;
    letter-spacing: -0.05em;
}

.web-hero-price-value span {
    color: var(--muted);

    font-size: 0.9rem;
}

.web-hero-price p {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 0.76rem;
    line-height: 1.5;
}

.web-hero-price-badge {
    flex-shrink: 0;

    padding: 7px 10px;

    border-radius: 8px;

    background: #eaf9d9;
    color: #427b1d;

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.05em;
}


/* ========================================
   WEB SECTION 01D: HELP LINK
========================================= */

.web-hero-help {
    display: flex;

    align-items: center;
    gap: 10px;

    margin-top: 25px;
}

.web-hero-help-icon {
    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 32px;
    height: 32px;

    border: 1px solid #d7e5d1;
    border-radius: 50%;

    background: #f0f8e8;
    color: var(--green-dark);

    font-size: 0.83rem;
    font-weight: 850;
}

.web-hero-help p {
    margin: 0;

    color: var(--muted);

    font-size: 0.81rem;
    line-height: 1.6;
}

.web-hero-help a {
    color: var(--green-dark);

    font-weight: 800;
    text-decoration: underline;

    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.web-hero-help a:hover {
    text-decoration-color: currentColor;
}


/* WEB SECTION 01E–F: CREATIVE LAUNCH VISUAL */
.web-hero * { box-sizing: border-box; }
.lh-launch { padding: 28px 24px 22px; border:1px solid #22304a; border-radius:28px; background:radial-gradient(ellipse at 70% 30%,#243848 0,transparent 65%),#0d1728; color:#fff; box-shadow:0 28px 65px #0d172822; }
.lh-launch-heading > span {color:#c1ed65;font-size:.62rem;font-weight:800;letter-spacing:.13em;}
.lh-launch-heading h2 {margin:9px 0 6px;font-size:1.65rem;line-height:1.2;letter-spacing:-.04em;color:#fff;}
.lh-launch-heading p {margin:0;color:#bac8d5;font-size:.85rem;line-height:1.6;}
.lh-launch-scene {position:relative;padding:48px 20px 76px;}
.lh-launch-orbit {position:absolute;inset:25px 3px 35px;border:1px dashed #a8ed3833;border-radius:50%;transform:rotate(-14deg);pointer-events:none;}
.lh-browser {position:relative;border:1px solid #edf3e2;border-radius:14px;background:#f8faef;overflow:hidden;transform:rotate(-3deg);box-shadow:0 18px 36px #0004;color:#132037;}
.lh-browser-bar {display:flex;align-items:center;gap:5px;padding:11px;background:#e9eddf;border-bottom:1px solid #d8dfd0;}
.lh-browser-bar i {width:6px;height:6px;border-radius:50%;background:#9ca58e;}
.lh-browser-bar span {flex:1;text-align:center;font-size:.65rem;color:#596452;}
.lh-browser-bar b {color:#548929;}
.lh-browser-page {padding:19px 22px 18px;}
.lh-site-nav {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.62rem;margin-bottom:26px;}
.lh-site-nav b {font-size:.78rem;}.lh-site-nav b span {color:#50881a;}
.lh-site-eyebrow {font-size:.53rem;letter-spacing:.14em;font-weight:800;color:#647254;}
.lh-site-title {font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.1;font-weight:850;letter-spacing:-.04em;margin:10px 0 14px;}
.lh-site-title em {color:#498017;font-style:normal;}
.lh-site-lines i {display:block;height:4px;background:#dae1ce;margin:6px 0;width:78%;border-radius:3px;}.lh-site-lines i:last-child {width:58%;}
.lh-site-button {display:inline-block;margin-top:14px;background:#c0f63e;border-radius:6px;padding:9px 12px;font-size:.61rem;font-weight:800;}
.lh-site-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;}.lh-site-cards i {height:33px;border:1px solid #dbe4cd;border-radius:6px;background:linear-gradient(135deg,#e5ecd8,#f4f7ef);}
.lh-launch-badges {margin:0;padding:0;list-style:none;}
.lh-launch-badges li {position:absolute;display:flex;align-items:center;gap:9px;background:#fff;color:#132037;border:1px solid #dfebce;border-radius:12px;padding:11px 13px;box-shadow:0 8px 24px #0002;}
.lh-launch-badges svg {width:30px;height:30px;flex-shrink:0;background:#c1f845;border-radius:9px;padding:6px;fill:none;stroke:#20370d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.lh-launch-badges strong,.lh-launch-badges span {display:block;}.lh-launch-badges strong {font-size:.73rem;}.lh-launch-badges span {font-size:.6rem;margin-top:3px;color:#526249;}
.lh-badge-storage {top:23px;left:0;}.lh-badge-ssl {right:-8px;top:133px;}.lh-badge-mail {bottom:28px;left:8px;}
.lh-plan-path {padding:16px;border:1px solid #ffffff20;border-radius:15px;background:#ffffff07;}
.lh-plan-path-heading strong {display:block;font-size:.85rem;line-height:1.4;}.lh-plan-path-heading > span {display:block;font-size:.65rem;color:#b2c1d3;margin-top:4px;}
.lh-plan-path ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:16px 0;}
.lh-plan-path li {position:relative;min-width:0;}.lh-plan-path li:not(:last-child)::after {content:'';position:absolute;top:11px;left:29px;right:4px;height:1px;background:#63763e;}
.lh-plan-path li > span {display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#c1f845;color:#172508;font-size:.6rem;font-weight:800;}
.lh-plan-path li strong {display:block;font-size:.8rem;margin-top:9px;}.lh-plan-path li small {display:block;font-size:.6rem;line-height:1.5;color:#b6c4d3;margin-top:4px;}
.lh-plan-path a {display:flex;justify-content:space-between;align-items:center;min-height:36px;color:#c1f845;font-size:.73rem;font-weight:750;text-decoration:none;border-top:1px solid #ffffff15;padding-top:10px;}.lh-plan-path a:hover {text-decoration:underline;}.lh-plan-path a:focus-visible {outline:2px solid #c1f845;outline-offset:4px;}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {.lh-browser {transition:transform .25s ease;}.lh-launch:hover .lh-browser {transform:rotate(-1deg) translateY(-3px);}}
@media (max-width:980px) {.web-hero-grid {grid-template-columns:1fr;gap:40px;}.web-hero-visual.lh-launch {width:100%;max-width:540px;margin-inline:auto;}.lh-site-title {font-size:1.8rem;}}
@media (max-width:650px) {.lh-launch {padding:22px 16px 16px;border-radius:22px;}.lh-launch-heading h2 {font-size:1.45rem;}.lh-launch-scene {padding:35px 7px 20px;}.lh-browser {transform:rotate(-2deg);}.lh-browser-page {padding:18px;}.lh-launch-badges {position:relative;display:grid;grid-template-columns:1fr;gap:8px;margin-top:22px;}.lh-launch-badges li {position:static;padding:10px 12px;box-shadow:none;background:#1d2d40;border-color:#ffffff15;color:#fff;}.lh-launch-badges span {color:#b6c4d3;}.lh-launch-badges strong {font-size:.78rem;}.lh-launch-badges span {font-size:.66rem;}.lh-launch-orbit {inset:12px 0 210px;}.lh-plan-path {padding:14px;}.web-hero-price {flex-wrap:wrap;}.lh-plan-path li small {font-size:.62rem;}}

/* WEB SECTION 01G: LUMO MASCOT */
.lh-mascot {position:absolute;right:-8px;bottom:12px;width:133px;z-index:2;pointer-events:none;}
.lh-mascot svg {display:block;width:100%;height:auto;overflow:visible;}
.lh-mascot-caption {display:block;text-align:center;color:#d5e8b2;font-size:.62rem;font-weight:700;letter-spacing:.04em;margin-top:-1px;}
.lh-mascot-wave {transform-box:view-box;transform-origin:116px 106px;}
.lh-mascot-eyes {transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:no-preference) {
 .lh-mascot-wave {animation:lh-lumo-wave 1.65s ease-in-out .4s 1;}
 .lh-mascot-eyes {animation:lh-lumo-blink 8s linear 2.2s infinite;}
}
@keyframes lh-lumo-wave {0%,100%{transform:rotate(0deg)}20%,60%{transform:rotate(-17deg)}40%,80%{transform:rotate(10deg)}}
@keyframes lh-lumo-blink {0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}
@media (max-width:650px) {
 .lh-launch-scene {padding-top:28px;}
 .lh-browser {margin-right:22px;}
 .lh-mascot {width:94px;right:-3px;top:177px;bottom:auto;}
 .lh-launch-badges {margin-top:78px;}
 .lh-mascot-wave,.lh-mascot-eyes {animation:none;}
}
@media (max-width:380px) {.lh-mascot {top:168px;width:86px;}.lh-site-title {font-size:1.5rem;}}
@media (prefers-reduced-motion:reduce) {.lh-mascot-wave,.lh-mascot-eyes {animation:none!important;}}

/* WEB SECTION 01H: MOBILE CONTENT */
@media (max-width:650px) {
 .web-hero {padding:48px 0 64px;}
 .web-hero-eyebrow {font-size:.64rem;margin-bottom:19px;}
 .web-hero h1 {font-size:clamp(2.4rem,10.7vw,3.5rem);line-height:1.06;}
 .web-hero-description {margin-top:20px;font-size:.98rem;line-height:1.7;}
 .web-hero-benefits {gap:11px 17px;}.web-hero-benefits li {font-size:.8rem;}
 .web-hero-actions {display:grid;grid-template-columns:1fr;gap:10px;margin-top:28px;}.web-hero-actions .btn {width:100%;}
 .web-hero-price {margin-top:27px;padding:17px;align-items:flex-start;}.web-hero-price-value strong {font-size:1.9rem;}
 .web-hero-help {align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce) {.web-hero *,.web-hero *::before,.web-hero *::after {animation:none!important;transition:none!important;}}

/* ========================================
   WEB HERO: DESKTOP + MOBILE SPACING FIX
   Append AFTER existing hero CSS in main.css.
========================================= */
.web-hero { padding: 56px 0 72px; }
.web-hero-grid { align-items: start; }
.web-hero-content { padding-top: 8px; }
.web-hero-visual { min-width: 0; }

@media (min-width: 981px) {
    .lh-launch { padding: 23px 24px 20px; }
    .lh-launch-scene { padding: 34px 20px 68px; }
    .lh-browser-page { padding: 15px 22px; }
    .lh-site-nav { margin-bottom: 17px; }
    .lh-site-title { font-size: 1.65rem; margin: 8px 0 10px; }
    .lh-site-cards { margin-top: 15px; }
    .lh-site-cards i { height: 25px; }
    .lh-badge-storage { top: 13px; }
    .lh-badge-ssl { top: 112px; }
    .lh-badge-mail { bottom: 22px; }
    .lh-mascot { bottom: 7px; }
    .web-hero-description { margin-top: 20px; line-height: 1.65; }
    .web-hero-benefits { margin-top: 20px; }
    .web-hero-actions { margin-top: 25px; }
    .web-hero-price { margin-top: 25px; padding: 17px 20px; }
    .web-hero-help { margin-top: 18px; }
}

@media (max-width: 650px) {
    .web-hero { padding: 32px 0 48px; }
    .web-hero-content { padding-top: 0; }
    .web-hero-grid { gap: 28px; }
    .web-hero-eyebrow { margin-bottom: 16px; }
    .web-hero-description { margin-top: 18px; line-height: 1.6; }
    .web-hero-benefits { margin-top: 20px; gap: 10px 15px; }
    .web-hero-actions { margin-top: 22px; }
    .web-hero-price { margin-top: 22px; gap: 12px; }
    .web-hero-help { margin-top: 18px; }
    .lh-launch { padding: 20px 16px 16px; }
    .lh-launch-scene { padding: 22px 4px 16px; }
    .lh-browser { margin-right: 0; transform: none; }
    .lh-browser-page { padding: 16px; }
    .lh-site-nav { margin-bottom: 18px; }
    .lh-site-title { font-size: clamp(1.35rem, 6vw, 1.8rem); }
    .lh-site-cards { margin-top: 15px; }
    .lh-site-cards i { height: 24px; }
    /* Flow layout prevents overlap at any text size or phone width. */
    .lh-mascot {
        position: relative;
        inset: auto;
        width: 84px;
        margin: 12px 4px 12px auto;
    }
    .lh-mascot-caption { color: #d5e8b2; }
    .lh-launch-badges { margin-top: 0; gap: 7px; }
    .lh-launch-badges li { padding: 9px 11px; }
    .lh-launch-orbit { display: none; }
    .lh-plan-path { padding: 13px; }
    .lh-plan-path ul { margin: 13px 0; }
    .lh-mascot-wave, .lh-mascot-eyes { animation: none; }
}

/* MOBILE: LUMO STRADDLES THE WEBSITE PREVIEW EDGE */
@media (max-width: 650px) {
    .lh-launch-scene {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 22px 4px 16px;
    }

    .lh-browser {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        transform: none;
    }

    .lh-mascot {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        justify-self: end;
        width: 84px;
        margin: 0 8px 0 0;
        transform: translateY(50%);
        z-index: 2;
    }

    .lh-mascot-caption {
        color: #d5e8b2;
        font-size: 0.58rem;
        white-space: nowrap;
    }

    .lh-launch-badges {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        margin-top: 72px;
        gap: 8px;
    }

    .lh-launch-badges li:first-child {
        margin-right: 0;
        min-height: 0;
    }
}


/* ========================================
   WEB SECTION 02: HOSTING PLANS & PRICING
========================================= */

.web-pricing {
    padding: 105px 0 110px;
    background: #ffffff;
}

.web-pricing-heading {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.web-pricing-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: #548027;

    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.web-pricing-heading h2 {
    margin: 0;

    color: #0b1220;

    font-size: clamp(2.15rem, 3.5vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.web-pricing-heading > p {
    max-width: 600px;

    margin: 19px auto 0;

    color: #657080;

    font-size: 1rem;
    line-height: 1.75;
}


/* ========================================
   WEB SECTION 02B: BILLING SELECTOR
========================================= */

.web-billing-selector {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    width: fit-content;
    max-width: 100%;

    margin: 35px auto 0;
    padding: 6px;

    border: 1px solid #dfe5eb;
    border-radius: 13px;

    background: #f4f6f8;
}

.web-billing-option {
    min-width: 100px;

    padding: 12px 16px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #566170;

    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.web-billing-option:hover:not(.is-active) {
    background: #e7ebef;
    color: #0b1220;
}

.web-billing-option.is-active {
    background: #0b1220;
    color: #ffffff;

    box-shadow:
        0 4px 10px
        rgba(11, 18, 32, 0.12);
}

.web-billing-option:focus-visible {
    outline: 3px solid #95cb24;
    outline-offset: 3px;
}

.web-billing-hint {
    min-height: 24px;

    margin: 12px 0 0;

    color: #667381;

    font-size: 0.8rem;
    text-align: center;
}


/* ========================================
   WEB SECTION 02C: PRICING GRID
========================================= */

.web-pricing-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
    gap: 22px;

    margin-top: 43px;
}

.web-plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 33px 29px;

    border: 1px solid #e2e8ed;
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(11, 18, 32, 0.035);
}

.web-plan-card--featured {
    border: 2px solid #b7f52a;

    padding: 32px 28px;

    background:
        linear-gradient(
            180deg,
            #fbfef4 0%,
            #ffffff 38%
        );

    box-shadow:
        0 17px 45px
        rgba(11, 18, 32, 0.075);
}

.web-plan-featured-label {
    position: absolute;

    top: -16px;
    left: 50%;

    transform: translateX(-50%);

    max-width: calc(100% - 24px);

    padding: 9px 15px;

    border-radius: 30px;

    background: #b7f52a;
    color: #0b1220;

    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    white-space: nowrap;
}


/* ========================================
   WEB SECTION 02C: PLAN HEADER
========================================= */

.web-plan-header {
    min-height: 126px;
}

.web-plan-category {
    color: #68833d;

    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.web-plan-header h3 {
    margin: 11px 0 0;

    color: #0b1220;

    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.web-plan-header p {
    margin: 10px 0 0;

    color: #657080;

    font-size: 0.9rem;
    line-height: 1.6;
}


/* ========================================
   WEB SECTION 02C: PLAN PRICE
========================================= */

.web-plan-pricing {
    padding: 24px 0 22px;

    border-top: 1px solid #e9edf0;
}

.web-plan-price-line {
    display: flex;

    align-items: baseline;
    gap: 3px;

    color: #0b1220;
}

.web-plan-currency {
    align-self: flex-start;

    padding-top: 9px;

    font-size: 1.35rem;
    font-weight: 800;
}

.web-plan-price {
    font-size: clamp(2.6rem, 3vw, 3.3rem);
    font-weight: 850;

    letter-spacing: -0.06em;
    line-height: 1.15;
}

.web-plan-per {
    margin-left: 3px;

    color: #657080;

    font-size: 0.94rem;
}

.web-plan-billing {
    min-height: 23px;

    margin: 9px 0 0;

    color: #667381;

    font-size: 0.81rem;
}


/* ========================================
   WEB SECTION 02C: PLAN BUTTON
========================================= */

.web-plan-button {
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-height: 51px;

    padding: 12px 16px;

    border: 1px solid #cbd6e0;
    border-radius: 10px;

    background: #ffffff;
    color: #0b1220;

    font-size: 0.91rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.web-plan-button:hover {
    border-color: #0b1220;
    background: #f4f6f8;
    transform: translateY(-2px);
}

.web-plan-button--featured {
    border-color: #b7f52a;

    background: #b7f52a;
    color: #0b1220;
}

.web-plan-button--featured:hover {
    border-color: #a4df19;
    background: #a4df19;
}

.web-plan-button:focus-visible {
    outline: 3px solid #80aa1c;
    outline-offset: 3px;
}


/* ========================================
   WEB SECTION 02C: FEATURE LIST
========================================= */

.web-plan-features {
    flex: 1;

    margin-top: 27px;
    padding-top: 24px;

    border-top: 1px solid #e9edf0;
}

.web-plan-features-title {
    margin: 0 0 18px;

    color: #0b1220;

    font-size: 0.86rem;
    font-weight: 800;
}

.web-plan-features ul {
    display: grid;
    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.web-plan-features li {
    display: flex;

    align-items: flex-start;
    gap: 10px;

    color: #475365;

    font-size: 0.88rem;
    line-height: 1.5;
}

.web-plan-check {
    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 20px;
    height: 20px;

    margin-top: 1px;

    border-radius: 50%;

    background: #eaf8d7;
    color: #4b7d20;

    font-size: 0.7rem;
    font-weight: 900;
}


/* ========================================
   WEB SECTION 02D: FOOTNOTE
========================================= */

.web-pricing-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 27px;
}

.web-pricing-footer p {
    max-width: 680px;

    margin: 0;

    color: #657080;

    font-size: 0.8rem;
    line-height: 1.65;
}

.web-pricing-footer a {
    flex-shrink: 0;

    color: #315a15;

    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.web-pricing-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ========================================
   WEB SECTION 02: RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    .web-pricing-grid {
        gap: 14px;
    }

    .web-plan-card {
        padding: 27px 20px;
    }

    .web-plan-card--featured {
        padding: 26px 19px;
    }

}

@media (max-width: 850px) {

    .web-pricing {
        padding: 78px 0 85px;
    }

    .web-pricing-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 23px 16px;
    }

    .web-plan-card:last-child {
        grid-column: 1 / -1;
    }

    .web-plan-header {
        min-height: auto;
        margin-bottom: 24px;
    }

}

@media (max-width: 600px) {

    .web-pricing {
        padding: 66px 0 75px;
    }

    .web-pricing-heading h2 {
        font-size: clamp(
            2rem,
            8vw,
            2.65rem
        );
    }

    .web-pricing-heading > p {
        font-size: 0.94rem;
    }

    .web-billing-selector {
        width: 100%;
    }

    .web-billing-option {
        flex: 1;

        min-width: 0;
        padding: 11px 8px;

        font-size: 0.8rem;
    }

    .web-pricing-grid {
        grid-template-columns: 1fr;
        gap: 28px;

        margin-top: 35px;
    }

    .web-plan-card,
    .web-plan-card--featured {
        padding: 28px 24px;
    }

    .web-plan-card:last-child {
        grid-column: auto;
    }

    .web-plan-header {
        margin-bottom: 0;
    }

    .web-pricing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .web-pricing *,
    .web-pricing *::before,
    .web-pricing *::after {
        transition: none !important;
    }

}



/* WEB SECTION 03: REPLACE THE OLD SECTION 03 STYLES */
.web-comparison {
    --wc-ink:#172536;
    --wc-muted:#556477;
    --wc-brand:#087f78;
    --wc-tint:#edf8f5;
    --wc-line:#dce6e8;
    padding:80px 0;
    background:#f7fafb;
    color:var(--wc-ink)
}

.web-comparison,.web-comparison * {
    box-sizing:border-box
}

.web-comparison .container {
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto
}

.web-comparison-heading {
    max-width:730px;
    margin:0 auto 32px;
    text-align:center
}

.web-comparison-eyebrow {
    display:block;
    color:var(--wc-brand);
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    margin-bottom:12px
}

.web-comparison-heading h2 {
    font-size:clamp(28px,3.5vw,44px);
    line-height:1.15;
    letter-spacing:-.035em;
    margin:0 0 16px;
    color:var(--wc-ink)
}

.web-comparison-heading p {
    font-size:16px;
    line-height:1.75;
    margin:0;
    color:var(--wc-muted)
}

.web-comparison-mobile-hint {
    display:none;
    font-size:13px;
    color:var(--wc-muted);
    margin:0 0 12px
}

.web-comparison-scroll {
    overflow-x:auto;
    border:1px solid var(--wc-line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 14px 36px #17253608
}

.web-comparison-scroll:focus-visible {
    outline:3px solid var(--wc-brand);
    outline-offset:4px
}

.web-comparison-table {
    width:100%;
    min-width:740px;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    font-size:15px
}

.web-comparison-table th,.web-comparison-table td {
    padding:21px 18px;
    vertical-align:middle;
    text-align:center;
    border-bottom:1px solid var(--wc-line);
    overflow-wrap:anywhere
}

.web-comparison-table th:first-child {
    width:29%;
    text-align:left
}

.web-comparison-table thead th {
    padding-top:27px;
    padding-bottom:25px;
    background:#f9fbfc
}

.web-comparison-table .wc-featured {
    background:var(--wc-tint)
}

.web-comparison-table thead .wc-featured {
    box-shadow:inset 0 4px 0 var(--wc-brand)
}

.web-comparison-plan-name {
    display:block;
    font-size:21px;
    font-weight:800;
    color:var(--wc-ink)
}

.wc-plan-subtitle {
    display:block;
    font-size:12px;
    line-height:1.5;
    font-weight:500;
    color:var(--wc-muted);
    margin-top:7px
}

.web-comparison-highlight {
    display:inline-block;
    margin-top:12px;
    padding:5px 9px;
    background:#d5eee7;
    color:#08655f;
    border-radius:6px;
    font-size:10px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.04em
}

.wc-feature-label {
    display:block;
    font-weight:700
}

.wc-feature-hint {
    display:block;
    font-size:12px;
    font-weight:400;
    line-height:1.5;
    color:var(--wc-muted);
    margin-top:5px
}

.web-comparison-value {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-weight:700;
    font-size:16px
}

.wc-check {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#d9f0e6;
    color:#126c4c;
    font-size:12px;
    flex-shrink:0
}

.web-comparison-muted {
    display:inline-block;
    border:1px solid #dbe3e8;
    border-radius:6px;
    padding:5px 9px;
    color:var(--wc-muted);
    font-size:12px;
    font-weight:500;
    background:#fff
}

.web-comparison-table tfoot th,.web-comparison-table tfoot td {
    border-bottom:0;
    padding:23px 18px
}

.web-comparison-plan-link {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    padding:11px 10px;
    border:1px solid #bad6d0;
    border-radius:9px;
    color:var(--wc-brand);
    font-weight:700;
    text-decoration:none;
    font-size:13px;
    line-height:1.4
}

.wc-featured .web-comparison-plan-link {
    background:var(--wc-brand);
    border-color:var(--wc-brand);
    color:#fff
}

.web-comparison-plan-link:hover {
    box-shadow:0 4px 12px #087f781a;
    text-decoration:underline
}

.web-comparison a:focus-visible {
    outline:3px solid var(--wc-brand);
    outline-offset:4px
}

.web-comparison-note {
    font-size:12px;
    color:var(--wc-muted);
    line-height:1.7;
    margin:16px 4px 0
}

.web-comparison-guidance {
    margin-top:48px
}

.web-comparison-guidance-heading h3 {
    font-size:24px;
    letter-spacing:-.025em;
    margin:0 0 8px
}

.web-comparison-guidance-heading p {
    margin:0;
    color:var(--wc-muted);
    line-height:1.6;
    font-size:14px
}

.web-comparison-guidance-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:22px
}

.web-guidance-card {
    position:relative;
    display:flex;
    flex-direction:column;
    padding:25px;
    border:1px solid var(--wc-line);
    border-radius:16px;
    background:#fff
}

.web-guidance-card--featured {
    background:var(--wc-tint);
    border-color:#b4d9cc
}

.wc-guide-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px
}

.web-guidance-number {
    display:flex;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid #c8dfd8;
    border-radius:11px;
    color:var(--wc-brand);
    font-size:12px;
    font-weight:800;
    background:#f1f8f5
}

.wc-guide-plan {
    font-size:12px;
    font-weight:700;
    color:var(--wc-muted)
}

.web-guidance-card h4 {
    font-size:23px;
    letter-spacing:-.03em;
    margin:0 0 8px
}

.wc-guide-subtitle {
    font-size:13px;
    font-weight:700;
    color:var(--wc-brand);
    margin-bottom:12px
}

.web-guidance-card p {
    font-size:14px;
    line-height:1.75;
    color:var(--wc-muted);
    margin:0 0 23px
}

.web-guidance-card a {
    margin-top:auto;
    font-size:13px;
    font-weight:800;
    color:var(--wc-brand);
    text-decoration:none
}

.web-guidance-card a:hover {
    text-decoration:underline
}

@media(max-width:800px) {
    .web-comparison {
        padding:56px 0
    }

    .web-comparison-mobile-hint {
        display:block
    }

    .web-comparison-guidance-grid {
        grid-template-columns:1fr
    }

    .web-guidance-card {
        padding:23px
    }

    .web-comparison-table th:first-child {
        position:sticky;
        left:0;
        z-index:1;
        background:#fff;
        box-shadow:4px 0 10px #17253608
    }

    .web-comparison-table thead th:first-child {
        background:#f9fbfc
    }

    .web-comparison-table th:first-child {
        width:190px
    }

    .web-comparison-table {
        min-width:760px
    }

    .web-comparison-guidance {
        margin-top:35px
    }

}

@media(max-width:480px) {
    .web-comparison .container {
        width:calc(100% - 28px)
    }

    .web-comparison-table th,.web-comparison-table td {
        padding:18px 12px
    }

    .web-comparison-table th:first-child {
        width:156px
    }

    .web-comparison-table {
        min-width:700px
    }

    .web-comparison-heading p {
        font-size:15px
    }

}


.web-comparison { scroll-margin-top: 100px; }


/* ========================================
   WEB SECTION 04: CREATIVE HOSTING SHOWCASE
   Scoped to /web-hosting/ (no JS required)
========================================= */

.web-showcase {padding:105px 0 110px;background:#fff;scroll-margin-top:100px;}
.web-showcase-heading {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);align-items:end;gap:50px;margin-bottom:42px;}
.web-showcase-eyebrow {display:inline-block;margin-bottom:15px;color:#548027;font-size:.72rem;font-weight:800;letter-spacing:.12em;}
.web-showcase-heading h2 {margin:0;color:#0b1220;font-size:clamp(2.15rem,3.7vw,3.5rem);font-weight:800;line-height:1.14;letter-spacing:-.05em;}
.web-showcase-heading h2 span {display:block;color:#548027;}
.web-showcase-heading > p {margin:0;max-width:470px;color:#5e6b7b;font-size:.96rem;line-height:1.8;}
.web-showcase-layout {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:stretch;gap:16px;}
.web-showcase-primary {min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:28px;border:1px solid #30425a;border-radius:21px;background:radial-gradient(circle at 50% 33%,rgba(183,245,42,.10),transparent 42%),linear-gradient(140deg,#0b1220,#162840);color:#fff;}
.web-showcase-primary-top {display:flex;justify-content:space-between;align-items:center;gap:12px;color:#b7f52a;font-size:.69rem;font-weight:800;letter-spacing:.11em;}
.web-showcase-primary-index {color:#a3b7c9;font-weight:750;letter-spacing:.02em;}
.web-showcase-art {position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;margin:13px 0 15px;min-height:270px;}
.web-showcase-art-halo {position:absolute;inset:17% 15%;z-index:-1;border-radius:50%;background:rgba(183,245,42,.11);filter:blur(38px);pointer-events:none;}
.web-showcase-art > svg {display:block;width:min(100%,510px);height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18));}
.web-showcase-float {position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(183,245,42,.25);border-radius:11px;background:#1e3148;box-shadow:0 12px 30px rgba(0,0,0,.2);color:#fff;}
.web-showcase-float--left {left:0;top:23%;}.web-showcase-float--right {right:0;bottom:17%;color:#b7f52a;font-size:.72rem;}
.web-showcase-float strong,.web-showcase-float small {display:block;}.web-showcase-float strong {font-size:.72rem;line-height:1.25;}.web-showcase-float small {margin-top:2px;color:#adbed0;font-size:.63rem;}
.web-showcase-float--right > span {display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#b7f52a;color:#0b1220;font-weight:900;}
.web-showcase-live-dot {width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#b7f52a;box-shadow:0 0 0 4px rgba(183,245,42,.15);}
.web-showcase-primary-copy {margin-top:auto;}.web-showcase-primary-kicker {display:block;margin-bottom:9px;color:#b7f52a;font-size:.66rem;font-weight:800;letter-spacing:.1em;}
.web-showcase-primary h3 {margin:0;max-width:480px;color:#fff;font-size:clamp(1.55rem,2.3vw,2.2rem);line-height:1.23;letter-spacing:-.035em;}
.web-showcase-primary-copy p {margin:13px 0 0;max-width:515px;color:#bccada;font-size:.87rem;line-height:1.75;}
.web-showcase-capacity {margin-top:24px;padding-top:19px;border-top:1px solid rgba(255,255,255,.13);}
.web-showcase-capacity-label {display:block;margin-bottom:12px;color:#a3b7ca;font-size:.64rem;font-weight:800;letter-spacing:.09em;}
.web-showcase-capacity > div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.web-showcase-capacity > div > span {display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 10px;border:1px solid rgba(183,245,42,.16);border-radius:10px;background:rgba(183,245,42,.07);}
.web-showcase-capacity strong {color:#b7f52a;font-size:1rem;}.web-showcase-capacity small {color:#afc0d0;font-size:.72rem;}
.web-showcase-secondary {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:13px;min-width:0;}
.web-showcase-tile {position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:22px;border:1px solid #e0e9dc;border-radius:16px;background:#f9fcf6;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.web-showcase-tile:nth-child(2){background:#fff;}.web-showcase-tile:nth-child(3){background:#f8fafc;}.web-showcase-tile:nth-child(4){background:#f5fbea;}
.web-showcase-tile::before {content:"";position:absolute;top:0;right:0;width:74px;height:74px;border-radius:0 0 0 74px;background:rgba(183,245,42,.075);pointer-events:none;}
.web-showcase-tile:hover {transform:translateY(-3px);border-color:#bbd899;box-shadow:0 13px 32px rgba(11,18,32,.055);}
.web-showcase-tile-head {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:20px;}
.web-showcase-tile-head > span:last-child {color:#829183;font-size:.65rem;font-weight:750;}
.web-showcase-icon {display:grid;place-items:center;width:43px;height:43px;border:1px solid #dceaca;border-radius:12px;background:#eaf8dc;}
.web-showcase-icon svg {width:23px;height:23px;fill:none;stroke:#4c7923;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.web-showcase-tile h3 {margin:0;color:#0b1220;font-size:1.14rem;line-height:1.32;letter-spacing:-.025em;}
.web-showcase-tile p {flex:1;margin:12px 0 0;color:#5e6b7b;font-size:.83rem;line-height:1.72;}
.web-showcase-tile-note {display:block;margin-top:18px;padding-top:14px;border-top:1px solid #e2e9dd;color:#4b742d;font-size:.63rem;font-weight:850;letter-spacing:.045em;}
.web-showcase-bottom {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:24px 28px;border:1px solid #dae9cc;border-radius:15px;background:#f0f9e7;}
.web-showcase-bottom > div {min-width:0;}.web-showcase-bottom > div > span {display:block;margin-bottom:5px;color:#4b752b;font-size:.65rem;font-weight:800;letter-spacing:.1em;}
.web-showcase-bottom strong {display:block;color:#0b1220;font-size:1.03rem;line-height:1.35;}.web-showcase-bottom p {margin:5px 0 0;color:#637169;font-size:.81rem;line-height:1.65;}
.web-showcase-bottom a {display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:44px;padding:10px 15px;border:1px solid #c8e0ac;border-radius:9px;background:#fff;color:#315a15;font-size:.82rem;font-weight:800;text-align:center;}
.web-showcase-bottom a:hover {border-color:#99c76b;background:#fbfff6;}.web-showcase-bottom a:focus-visible {outline:3px solid #8fc523;outline-offset:4px;}
@media (max-width:1050px) {.web-showcase-layout {grid-template-columns:1fr;}.web-showcase-primary {padding:30px;}.web-showcase-art > svg {width:min(100%,470px);}.web-showcase-secondary {grid-template-rows:auto;}.web-showcase-tile {min-height:230px;}}
@media (max-width:760px) {.web-showcase {padding:78px 0;}.web-showcase-heading {grid-template-columns:1fr;gap:16px;margin-bottom:30px;}}
@media (max-width:650px) {
    .web-showcase {padding:65px 0 75px;}.web-showcase-heading h2 {font-size:clamp(2rem,8vw,2.65rem);}.web-showcase-heading > p {font-size:.92rem;}
    .web-showcase-primary {padding:22px;border-radius:17px;}.web-showcase-art {min-height:0;margin:9px 0 15px;}.web-showcase-art > svg {width:100%;}.web-showcase-float {padding:7px 8px;gap:6px;}.web-showcase-float--left {top:20%;}.web-showcase-float--right {bottom:12%;}.web-showcase-float strong {font-size:.62rem;}.web-showcase-float small {font-size:.55rem;}.web-showcase-float--right {font-size:.6rem;}
    .web-showcase-primary h3 {font-size:1.65rem;}.web-showcase-primary-copy p {font-size:.85rem;}.web-showcase-capacity > div {gap:6px;}.web-showcase-capacity > div > span {padding:10px 7px;}.web-showcase-capacity strong {font-size:.87rem;}.web-showcase-capacity small {font-size:.67rem;}
    .web-showcase-secondary {grid-template-columns:1fr;gap:12px;}.web-showcase-tile {min-height:0;padding:22px;}.web-showcase-tile-head {margin-bottom:14px;}.web-showcase-tile p {flex:initial;}
    .web-showcase-bottom {flex-direction:column;align-items:flex-start;padding:22px;gap:16px;}.web-showcase-bottom a {width:100%;}
}
@media (max-width:380px) {.web-showcase-float--left {top:9%;}.web-showcase-float--right {bottom:8%;}.web-showcase-float small {display:none;}}
@media (prefers-reduced-motion:reduce) {.web-showcase-tile {transition:none;}.web-showcase-tile:hover {transform:none;}}



/* ========================================
   WEB SECTION 05: WHO IS WEB HOSTING FOR?
========================================= */

.web-audience {
    padding: 110px 0;
    background: #f4f8f1;
    scroll-margin-top: 100px;
}


/* ========================================
   WEB SECTION 05A: HEADING
========================================= */

.web-audience-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.75fr);

    align-items: end;
    gap: 60px;

    margin-bottom: 43px;
}

.web-audience-heading-main {
    min-width: 0;
}

.web-audience-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: #548027;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.web-audience-heading h2 {
    max-width: 730px;

    margin: 0;

    color: #0b1220;

    font-size: clamp(2.25rem, 3.8vw, 3.65rem);
    font-weight: 800;

    line-height: 1.13;
    letter-spacing: -0.05em;
}

.web-audience-heading h2 span {
    display: block;
    color: #548027;
}

.web-audience-heading > p {
    max-width: 440px;

    margin: 0;

    color: #5e6b7b;

    font-size: 0.98rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 05B: USE-CASE GRID
========================================= */

.web-audience-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.web-audience-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 340px;

    padding: 32px;

    border: 1px solid #e0e9dc;
    border-radius: 19px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.web-audience-card:hover {
    border-color: #bfd99e;

    box-shadow:
        0 16px 40px
        rgba(11, 18, 32, 0.055);

    transform: translateY(-3px);
}

.web-audience-card--featured {
    background:
        linear-gradient(
            140deg,
            #ffffff,
            #f3fbe8
        );

    border-color: #c7e6a5;
}

.web-audience-card-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 22px;
}

.web-audience-icon {
    display: grid;
    place-items: center;

    width: 51px;
    height: 51px;

    border: 1px solid #dcefc9;
    border-radius: 14px;

    background: #ecf8df;
}

.web-audience-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: #426e1e;
    stroke-width: 1.75;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-audience-card-number {
    color: #8c978b;

    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.web-audience-card h3 {
    margin: 0;

    color: #0b1220;

    font-size: 1.48rem;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: -0.028em;
}

.web-audience-card > p {
    flex: 1;

    max-width: 510px;

    margin: 13px 0 0;

    color: #5c6979;

    font-size: 0.91rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 05B: CARD ACTION AREA
========================================= */

.web-audience-card-bottom {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 7px 14px;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid #e6ebe3;
}

.web-audience-plan-label {
    color: #788977;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.09em;
}

.web-audience-card-bottom > strong {
    color: #0b1220;

    font-size: 0.84rem;
    font-weight: 800;
}

.web-audience-card-bottom > a {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    margin-left: auto;

    color: #315a15;

    font-size: 0.82rem;
    font-weight: 800;

    text-decoration: none;
}

.web-audience-card-bottom > a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.web-audience-card-bottom > a:focus-visible {
    outline: 3px solid #9bd321;
    outline-offset: 4px;
    border-radius: 3px;
}


/* ========================================
   WEB SECTION 05C: ALTERNATIVE HOSTING
========================================= */

.web-audience-guidance {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    align-items: center;
    gap: 46px;

    margin-top: 31px;
    padding: 36px;

    border: 1px solid #233146;
    border-radius: 21px;

    background:
        linear-gradient(
            120deg,
            #0b1220,
            #172740
        );
}

.web-audience-guidance-eyebrow {
    display: inline-block;

    margin-bottom: 13px;

    color: #b7f52a;

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.web-audience-guidance h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: -0.035em;
}

.web-audience-guidance-copy p {
    max-width: 570px;

    margin: 14px 0 0;

    color: #b8c4d4;

    font-size: 0.9rem;
    line-height: 1.8;
}

.web-audience-guidance-links {
    display: grid;
    gap: 11px;
}

.web-audience-guidance-links a {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-width: 0;
    padding: 18px 19px;

    border: 1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.055);

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.web-audience-guidance-links a:hover {
    border-color:
        rgba(183, 245, 42, 0.5);

    background:
        rgba(183, 245, 42, 0.065);
}

.web-audience-guidance-links a:focus-visible {
    outline: 3px solid #b7f52a;
    outline-offset: 3px;
}

.web-audience-guidance-links a > span:first-child {
    min-width: 0;
}

.web-audience-guidance-links strong {
    display: block;

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 800;
}

.web-audience-guidance-links small {
    display: block;

    margin-top: 4px;

    color: #acbbcd;

    font-size: 0.76rem;
    line-height: 1.5;
}

.web-audience-guidance-arrow {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background:
        rgba(183, 245, 42, 0.12);

    color: #b7f52a;

    font-size: 1.15rem;
}


/* ========================================
   WEB SECTION 05: RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .web-audience-heading {
        gap: 32px;
    }

    .web-audience-guidance {
        gap: 25px;
        padding: 28px;
    }

}

@media (max-width: 800px) {

    .web-audience {
        padding: 80px 0;
    }

    .web-audience-heading {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .web-audience-heading > p {
        max-width: 630px;
    }

    .web-audience-guidance {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .web-audience {
        padding: 65px 0 75px;
    }

    .web-audience-heading {
        margin-bottom: 30px;
    }

    .web-audience-heading h2 {
        font-size: clamp(
            2rem,
            8vw,
            2.65rem
        );
    }

    .web-audience-heading > p {
        font-size: 0.94rem;
    }

    .web-audience-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .web-audience-card {
        min-height: 0;
        padding: 25px;
    }

    .web-audience-card > p {
        flex: initial;
    }

    .web-audience-card-bottom > a {
        margin-left: 0;
        width: 100%;
    }

    .web-audience-guidance {
        margin-top: 18px;
        padding: 25px 21px;

        border-radius: 16px;
    }

    .web-audience-guidance h3 {
        font-size: 1.65rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    .web-audience-card,
    .web-audience-guidance-links a {
        transition: none;
    }

    .web-audience-card:hover {
        transform: none;
    }

}


/* ========================================
   WEB SECTION 06: PERFORMANCE & SECURITY
========================================= */

.web-reliability {
    padding: 110px 0;

    background: #ffffff;
    scroll-margin-top: 100px;
}


/* ========================================
   WEB SECTION 06A: HEADING
========================================= */

.web-reliability-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.75fr);

    align-items: end;
    gap: 55px;

    margin-bottom: 42px;
}

.web-reliability-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #548027;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.web-reliability-heading h2 {
    max-width: 730px;
    margin: 0;

    color: #0b1220;

    font-size: clamp(
        2.2rem,
        3.8vw,
        3.6rem
    );

    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.web-reliability-heading h2 span {
    display: block;

    color: #548027;
}

.web-reliability-heading > p {
    margin: 0;

    color: #5e6b7b;

    font-size: 0.97rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 06B: MAIN LAYOUT
========================================= */

.web-reliability-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(0, 0.97fr);

    align-items: stretch;
    gap: 20px;
}


/* ========================================
   LEFT: PERFORMANCE SPOTLIGHT
========================================= */

.web-reliability-spotlight {
    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 37px;

    border: 1px solid #23354d;
    border-radius: 21px;

    background:
        radial-gradient(
            circle at 90% 6%,
            rgba(183, 245, 42, 0.09),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #0b1220,
            #17273d
        );

    color: #ffffff;
}

.web-reliability-spotlight-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 30px;
}

.web-reliability-overline {
    color: #b7f52a;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.web-reliability-symbol {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border: 1px solid
        rgba(183, 245, 42, 0.22);

    border-radius: 13px;

    background:
        rgba(183, 245, 42, 0.1);
}

.web-reliability-symbol svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: #b7f52a;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-reliability-spotlight h3 {
    max-width: 490px;

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(
        1.7rem,
        2.5vw,
        2.4rem
    );

    font-weight: 800;
    line-height: 1.23;
    letter-spacing: -0.035em;
}

.web-reliability-spotlight > p {
    max-width: 520px;

    margin: 0 0 14px;

    color: #b8c5d5;

    font-size: 0.9rem;
    line-height: 1.8;
}


/* ========================================
   PERFORMANCE FACTORS
========================================= */

.web-reliability-factors {
    margin-top: 24px;
    padding: 23px;

    border: 1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.045);
}

.web-reliability-factors-title {
    display: block;

    margin-bottom: 18px;

    color: #b7f52a;

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.web-reliability-factor {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 13px 0;

    border-bottom: 1px solid
        rgba(255, 255, 255, 0.1);
}

.web-reliability-factor:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.web-reliability-factor > span:first-child {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 700;
}

.web-reliability-factor i {
    display: inline-block;

    flex-shrink: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #b7f52a;
}

.web-reliability-factor > span:last-child {
    color: #9eafc3;

    font-size: 0.72rem;
    text-align: right;
}


/* ========================================
   PERFORMANCE CLOSING NOTE
========================================= */

.web-reliability-spotlight-bottom {
    display: flex;

    align-items: flex-start;
    gap: 13px;

    margin-top: auto;
    padding-top: 28px;
}

.web-reliability-spotlight-bottom > span {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 31px;
    height: 31px;

    border-radius: 9px;

    background: #b7f52a;
    color: #0b1220;

    font-size: 1.1rem;
    font-weight: 800;
}

.web-reliability-spotlight-bottom p {
    margin: 3px 0 0;

    color: #d3deeb;

    font-size: 0.85rem;
    line-height: 1.65;
}


/* ========================================
   RIGHT: SECURITY & RECOVERY DETAILS
========================================= */

.web-reliability-details {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 13px;
}

.web-reliability-item {
    display: grid;

    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;

    flex: 1;

    padding: 26px;

    border: 1px solid #e2e9e0;
    border-radius: 16px;

    background: #fafcf8;
}

.web-reliability-item-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border: 1px solid #dcebc9;
    border-radius: 12px;

    background: #eafaD7;
}

.web-reliability-item-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: #4c7923;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-reliability-item-content {
    min-width: 0;
}

.web-reliability-item-number {
    display: block;

    margin-bottom: 10px;

    color: #638542;

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.web-reliability-item h3 {
    margin: 0 0 12px;

    color: #0b1220;

    font-size: 1.15rem;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: -0.025em;
}

.web-reliability-item p {
    margin: 0;

    color: #5e6b7b;

    font-size: 0.86rem;
    line-height: 1.72;
}

.web-reliability-item p + p {
    margin-top: 10px;
}


/* ========================================
   WEB SECTION 06C: CLOSING GUIDANCE
========================================= */

.web-reliability-closing {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-top: 23px;
    padding: 24px 28px;

    border: 1px solid #dfe9d4;
    border-radius: 15px;

    background: #f4f9ed;
}

.web-reliability-closing > div {
    max-width: 730px;
}

.web-reliability-closing strong {
    display: block;

    color: #0b1220;

    font-size: 0.95rem;
    font-weight: 800;
}

.web-reliability-closing p {
    margin: 6px 0 0;

    color: #5d6c77;

    font-size: 0.85rem;
    line-height: 1.65;
}

.web-reliability-link {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    flex-shrink: 0;

    color: #315a15;

    font-size: 0.85rem;
    font-weight: 800;

    text-decoration: none;
}

.web-reliability-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.web-reliability-link:focus-visible {
    outline: 3px solid #8fc523;
    outline-offset: 4px;
    border-radius: 3px;
}


/* ========================================
   WEB SECTION 06: RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    .web-reliability-heading {
        gap: 30px;
    }

    .web-reliability-spotlight {
        padding: 28px;
    }

    .web-reliability-item {
        padding: 21px;

        grid-template-columns:
            40px minmax(0, 1fr);

        gap: 13px;
    }

    .web-reliability-item-icon {
        width: 40px;
        height: 40px;
    }

}

@media (max-width: 850px) {

    .web-reliability {
        padding: 80px 0;
    }

    .web-reliability-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .web-reliability-heading > p {
        max-width: 660px;
    }

    .web-reliability-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .web-reliability-item {
        padding: 25px;
    }

}

@media (max-width: 600px) {

    .web-reliability {
        padding: 65px 0 75px;
    }

    .web-reliability-heading {
        margin-bottom: 30px;
    }

    .web-reliability-heading h2 {
        font-size: clamp(
            2rem,
            8vw,
            2.65rem
        );
    }

    .web-reliability-heading > p {
        font-size: 0.94rem;
    }

    .web-reliability-spotlight {
        padding: 25px 21px;
        border-radius: 17px;
    }

    .web-reliability-spotlight h3 {
        font-size: 1.8rem;
    }

    .web-reliability-factors {
        padding: 18px 15px;
    }

    .web-reliability-factor {
        align-items: flex-start;
        gap: 10px;
    }

    .web-reliability-factor > span:first-child {
        font-size: 0.75rem;
    }

    .web-reliability-factor > span:last-child {
        font-size: 0.68rem;
    }

    .web-reliability-item {
        grid-template-columns: 1fr;
        gap: 15px;

        padding: 23px;
    }

    .web-reliability-closing {
        flex-direction: column;
        align-items: flex-start;

        padding: 22px;
        gap: 15px;
    }

}



/
/* =========================================
   WEB SECTION 07: WEBSITE MIGRATION
   LUMOHOSTING — MATCHED HTML VERSION
========================================= */

.web-move {
    padding: 96px 0 100px;
    background: #f6f9f3;
    scroll-margin-top: 100px;
}

/* =========================================
   07A: SECTION HEADING
========================================= */

.web-move-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .85fr);
    align-items: end;
    gap: 48px;
    margin-bottom: 36px;
}

.web-move-heading-main {
    min-width: 0;
}

.web-move-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #548027;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.web-move-heading h2 {
    margin: 0;
    color: #0b1220;
    font-size: clamp(2.15rem, 3.5vw, 3.35rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.045em;
}

.web-move-heading h2 span {
    display: block;
    color: #548027;
}

.web-move-heading > p {
    margin: 0;
    color: #607080;
    font-size: .94rem;
    line-height: 1.8;
}

/* =========================================
   07B: MAIN TWO-COLUMN LAYOUT
========================================= */

.web-move-layout {
    display: grid;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);
    align-items: stretch;
    gap: 22px;
}

/* =========================================
   LEFT: CONNECTED JOURNEY
========================================= */

.web-move-journey {
    position: relative;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

/* Vertical connecting line */

.web-move-journey::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 34px;
    bottom: 34px;
    left: 43px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        #b7f52a,
        #a7cd87,
        #b7f52a
    );
}

.web-move-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: center;
    gap: 17px;
    min-width: 0;
    padding: 23px 22px;
    border: 1px solid #dfe9d8;
    border-radius: 16px;
    background: #ffffff;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.web-move-step:hover {
    border-color: #bedb9e;
    box-shadow: 0 8px 24px rgba(20, 46, 18, .04);
}

.web-move-step-count {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d4e7ba;
    border-radius: 12px;
    background: #eaf8dc;
    color: #477720;
    font-size: .88rem;
    font-weight: 850;
}

.web-move-step-body {
    min-width: 0;
}

.web-move-step h3 {
    margin: 2px 0 0;
    color: #0b1220;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.025em;
}

.web-move-step p {
    margin: 10px 0 0;
    color: #617080;
    font-size: .87rem;
    line-height: 1.7;
}

.web-move-step-meta {
    display: inline-block;
    margin-top: 14px;
    color: #548027;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.5;
}

/* =========================================
   RIGHT: VISUAL TRANSFER PANEL
========================================= */

.web-move-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #263b50;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(183, 245, 42, .12),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0b1220,
            #172b42
        );
    color: #ffffff;
}

/* Panel header */

.web-move-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.web-move-visual-label {
    color: #b7f52a;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .095em;
}

.web-move-visual-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid rgba(183, 245, 42, .18);
    border-radius: 999px;
    background: rgba(183, 245, 42, .1);
    color: #d6fb9b;
    font-size: .68rem;
    font-weight: 750;
}

/* =========================================
   TRANSFER FLOW
========================================= */

.web-move-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 5px 0;
}

/* Individual transfer nodes */

.web-move-node {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 390px;
    min-height: 76px;
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
}

.web-move-node--middle {
    border-color: rgba(183, 245, 42, .24);
    background: rgba(183, 245, 42, .065);
}

.web-move-node--to {
    border-color: rgba(183, 245, 42, .45);
    background: rgba(183, 245, 42, .11);
}

/* SVG icon container */

.web-move-node-icon {
    display: grid;
    place-items: center;
    flex: 0 0 47px;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(183, 245, 42, .15);
    border-radius: 12px;
    background: rgba(183, 245, 42, .1);
    color: #b7f52a;
}

/* CRITICAL: Fix oversized black SVG shapes */

.web-move-node-icon svg {
    display: block;
    width: 25px;
    height: 25px;
    max-width: 100%;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Text inside nodes */

.web-move-node strong {
    display: block;
    min-width: 0;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.4;
}

.web-move-node small {
    display: block;
    margin-top: 4px;
    color: #a9bccf;
    font-size: .72rem;
    line-height: 1.45;
}

/* =========================================
   CONNECTING ARROWS
========================================= */

.web-move-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 31px;
    min-height: 31px;
    color: #b7f52a;
}

.web-move-arrow > span {
    display: block;
    width: 2px;
    height: 9px;
    background: rgba(183, 245, 42, .55);
}

/* CRITICAL: Fix oversized black arrows */

.web-move-arrow svg {
    display: block;
    width: 19px;
    height: 19px;
    max-width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(90deg);
}

/* =========================================
   MIGRATION CHECKLIST
========================================= */

.web-move-checklist {
    padding: 19px 20px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
}

.web-move-checklist-title {
    display: block;
    color: #b7f52a;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
}

.web-move-checklist ul {
    display: grid;
    gap: 10px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.web-move-checklist li {
    position: relative;
    padding-left: 23px;
    color: #c3d1de;
    font-size: .79rem;
    line-height: 1.55;
}

.web-move-checklist li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: #b7f52a;
    font-size: .85rem;
    font-weight: 800;
}

/* =========================================
   07C: BOTTOM SUPPORT STRIP
========================================= */

.web-move-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 20px;
    padding: 26px 29px;
    border: 1px solid #d7e7c9;
    border-radius: 16px;
    background: #edf7e4;
}

.web-move-support-copy {
    max-width: 720px;
    min-width: 0;
}

.web-move-support-label {
    display: block;
    margin-bottom: 8px;
    color: #548027;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
}

.web-move-support-copy > strong {
    display: block;
    color: #0b1220;
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.02em;
}

.web-move-support-copy > p {
    margin: 9px 0 0;
    color: #607067;
    font-size: .83rem;
    line-height: 1.7;
}

.web-move-support-actions {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 9px;
}

/* CTA buttons */

.web-move-support-primary,
.web-move-support-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 11px 17px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.web-move-support-primary {
    background: #b7f52a;
    color: #0b1220;
}

.web-move-support-primary:hover {
    background: #a9e924;
    transform: translateY(-1px);
}

.web-move-support-secondary {
    border: 1px solid #c9ddbb;
    background: #ffffff;
    color: #315a15;
}

.web-move-support-secondary:hover {
    background: #fbfff6;
    border-color: #adc98b;
}

.web-move-support-primary:focus-visible,
.web-move-support-secondary:focus-visible {
    outline: 3px solid #80a929;
    outline-offset: 3px;
}

/* =========================================
   TABLET: BELOW 1000px
========================================= */

@media (max-width: 1000px) {

    .web-move {
        padding: 80px 0;
    }

    .web-move-heading {
        gap: 28px;
    }

    .web-move-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .web-move-journey {
        grid-template-rows: none;
    }

    .web-move-step {
        min-height: 0;
    }

    .web-move-journey::before {
        display: none;
    }

    .web-move-visual {
        min-height: 0;
    }

    .web-move-flow {
        padding: 14px 0;
    }

    .web-move-support {
        align-items: flex-start;
    }
}

/* =========================================
   MOBILE: BELOW 650px
========================================= */

@media (max-width: 650px) {

    .web-move {
        padding: 65px 0 72px;
    }

    /* Heading */

    .web-move-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        margin-bottom: 27px;
    }

    .web-move-heading h2 {
        font-size: clamp(2rem, 8vw, 2.55rem);
        line-height: 1.16;
    }

    .web-move-heading > p {
        font-size: .91rem;
        line-height: 1.75;
    }

    /* Journey */

    .web-move-journey {
        gap: 12px;
    }

    .web-move-step {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 19px 16px;
        border-radius: 14px;
    }

    .web-move-step-count {
        width: 39px;
        height: 39px;
        border-radius: 11px;
        font-size: .83rem;
    }

    .web-move-step h3 {
        font-size: 1.02rem;
    }

    .web-move-step p {
        font-size: .85rem;
    }

    .web-move-step-meta {
        font-size: .64rem;
    }

    /* Visual panel */

    .web-move-visual {
        gap: 20px;
        padding: 20px;
        border-radius: 16px;
    }

    .web-move-visual-top {
        align-items: flex-start;
    }

    .web-move-flow {
        gap: 9px;
        padding: 10px 0;
    }

    .web-move-node {
        max-width: 100%;
        min-height: 70px;
        gap: 12px;
        padding: 12px 13px;
    }

    .web-move-node-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .web-move-node-icon svg {
        width: 23px;
        height: 23px;
    }

    .web-move-arrow {
        height: 27px;
        min-height: 27px;
    }

    /* Checklist */

    .web-move-checklist {
        padding: 17px;
    }

    .web-move-checklist li {
        font-size: .78rem;
    }

    /* Support strip */

    .web-move-support {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 22px;
        border-radius: 14px;
    }

    .web-move-support-copy > strong {
        font-size: 1.1rem;
    }

    .web-move-support-actions {
        width: 100%;
    }

    .web-move-support-primary,
    .web-move-support-secondary {
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================
   SMALL MOBILE: BELOW 380px
========================================= */

@media (max-width: 380px) {

    .web-move-step {
        gap: 10px;
        padding: 17px 13px;
    }

    .web-move-visual {
        padding: 16px;
    }

    .web-move-node {
        padding: 11px;
    }

    .web-move-visual-badge {
        font-size: .62rem;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .web-move-step,
    .web-move-support-primary,
    .web-move-support-secondary {
        transition: none;
    }

    .web-move-support-primary:hover {
        transform: none;
    }
}


/* ========================================
   WEB SECTION 08: FREQUENTLY ASKED QUESTIONS
========================================= */

.web-faq {
    padding: 105px 0 110px;

    background: #f7f9f6;

    scroll-margin-top: 100px;
}

.web-faq-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: start;

    gap: clamp(40px, 6vw, 95px);
}


/* ========================================
   WEB SECTION 08A: INTRODUCTION
========================================= */

.web-faq-intro {
    position: relative;
    min-width: 0;
}

.web-faq-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #548027;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.web-faq-intro h2 {
    margin: 0;

    color: #0b1220;

    font-size: clamp(
        2.2rem,
        3.6vw,
        3.4rem
    );

    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -0.05em;
}

.web-faq-intro h2 span {
    display: block;
    color: #548027;
}

.web-faq-intro > p {
    max-width: 480px;

    margin: 21px 0 0;

    color: #5e6b7b;

    font-size: 0.96rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 08A: HELP PANEL
========================================= */

.web-faq-help {
    display: flex;

    align-items: flex-start;
    gap: 15px;

    margin-top: 35px;
    padding: 24px;

    border: 1px solid #dce8d0;
    border-radius: 15px;

    background: #eef6e7;
}

.web-faq-help-icon {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: 11px;

    background: #dff0cc;
}

.web-faq-help-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: #477522;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-faq-help strong {
    display: block;

    color: #0b1220;

    font-size: 0.91rem;
    font-weight: 800;
    line-height: 1.45;
}

.web-faq-help p {
    margin: 7px 0 0;

    color: #5f705e;

    font-size: 0.82rem;
    line-height: 1.7;
}

.web-faq-help a {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    margin-top: 14px;

    color: #315a15;

    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.web-faq-help a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ========================================
   WEB SECTION 08B: FAQ LIST
========================================= */

.web-faq-list {
    display: grid;
    gap: 11px;

    min-width: 0;
}

.web-faq-item {
    min-width: 0;

    border: 1px solid #e0e7df;
    border-radius: 13px;

    background: #ffffff;

    overflow: hidden;
}

.web-faq-item[open] {
    border-color: #c8dfa8;

    box-shadow:
        0 9px 25px
        rgba(11, 18, 32, 0.035);
}


/* ========================================
   WEB SECTION 08B: QUESTION / SUMMARY
========================================= */

.web-faq-item summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 75px;
    padding: 20px 23px;

    color: #0b1220;

    font-size: 0.94rem;
    font-weight: 780;
    line-height: 1.45;

    cursor: pointer;

    list-style: none;
}

.web-faq-item summary::-webkit-details-marker {
    display: none;
}

.web-faq-item summary::marker {
    content: "";
}

.web-faq-item summary:hover {
    background: #fbfdf8;
}

.web-faq-item summary:focus-visible {
    outline: 3px solid #97c92d;
    outline-offset: -4px;
    border-radius: 12px;
}

.web-faq-item[open] summary {
    color: #254c12;
}


/* ========================================
   WEB SECTION 08B: PLUS / MINUS ICON
========================================= */

.web-faq-toggle {
    position: relative;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    background: #eff5e9;
}

.web-faq-toggle::before,
.web-faq-toggle::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 2px;

    border-radius: 3px;

    background: #446d23;
}

.web-faq-toggle::after {
    transform: rotate(90deg);

    transition: transform 0.2s ease;
}

.web-faq-item[open] .web-faq-toggle {
    background: #e0f3c8;
}

.web-faq-item[open] .web-faq-toggle::after {
    transform: rotate(0);
}


/* ========================================
   WEB SECTION 08B: ANSWERS
========================================= */

.web-faq-answer {
    padding: 0 23px 23px;

    border-top: 1px solid #edf1eb;
}

.web-faq-answer p {
    margin: 17px 0 0;

    color: #5b6878;

    font-size: 0.87rem;
    line-height: 1.78;
}

.web-faq-answer p + p {
    margin-top: 11px;
}

.web-faq-answer a {
    display: inline-flex;
    align-items: center;

    margin-top: 17px;

    color: #315a15;

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;

    text-decoration: none;
}

.web-faq-answer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.web-faq-answer a:focus-visible {
    outline: 3px solid #97c92d;
    outline-offset: 4px;
    border-radius: 3px;
}


/* ========================================
   WEB SECTION 08: RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .web-faq {
        padding: 80px 0 90px;
    }

    .web-faq-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .web-faq-intro {
        max-width: 750px;
    }

    .web-faq-help {
        max-width: 520px;
    }

}

@media (max-width: 600px) {

    .web-faq {
        padding: 65px 0 75px;
    }

    .web-faq-layout {
        gap: 28px;
    }

    .web-faq-intro h2 {
        font-size: clamp(
            2rem,
            8vw,
            2.65rem
        );
    }

    .web-faq-intro > p {
        margin-top: 17px;
        font-size: 0.92rem;
    }

    .web-faq-help {
        margin-top: 24px;
        padding: 19px;

        gap: 12px;
    }

    .web-faq-help-icon {
        width: 35px;
        height: 35px;
    }

    .web-faq-list {
        gap: 9px;
    }

    .web-faq-item summary {
        min-height: 68px;
        padding: 17px;

        gap: 13px;

        font-size: 0.88rem;
    }

    .web-faq-toggle {
        width: 27px;
        height: 27px;
    }

    .web-faq-answer {
        padding: 0 17px 19px;
    }

    .web-faq-answer p {
        font-size: 0.84rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    .web-faq-toggle::after {
        transition: none;
    }

}


/* ========================================
   WEB SECTION 09: FINAL CALL TO ACTION
========================================= */

.web-final-cta {
    padding: 65px 0 110px;
    background: #ffffff;
    scroll-margin-top: 100px;
}

.web-final-cta-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(35px, 5vw, 76px);

    border: 1px solid #23384c;
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 83% 48%,
            rgba(183, 245, 42, 0.11),
            transparent 38%
        ),
        linear-gradient(
            125deg,
            #0b1220 0%,
            #14253c 100%
        );

    box-shadow:
        0 24px 65px
        rgba(11, 18, 32, 0.11);
}

.web-final-cta-glow {
    position: absolute;
    z-index: -1;

    width: 400px;
    height: 400px;

    right: -170px;
    bottom: -250px;

    border-radius: 50%;

    background: rgba(183, 245, 42, 0.11);

    filter: blur(70px);

    pointer-events: none;
}

.web-final-cta-layout {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(240px, 0.75fr);

    align-items: center;
    gap: 32px;
}


/* ========================================
   WEB SECTION 09A: CONTENT
========================================= */

.web-final-cta-content {
    min-width: 0;
}

.web-final-cta-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #b7f52a;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.web-final-cta-content h2 {
    max-width: 720px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.4rem,
        4.5vw,
        4.25rem
    );

    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.052em;
}

.web-final-cta-content h2 span {
    display: block;
    color: #b7f52a;
}

.web-final-cta-content > p:not(.web-final-cta-footnote) {
    max-width: 570px;

    margin: 22px 0 0;

    color: #c0cddd;

    font-size: 0.99rem;
    line-height: 1.8;
}


/* ========================================
   WEB SECTION 09B: ACTIONS
========================================= */

.web-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 12px;

    margin-top: 31px;
}

.web-final-cta-primary,
.web-final-cta-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 50px;
    padding: 13px 20px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 0.89rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.web-final-cta-primary {
    background: #b7f52a;
    color: #0b1220;
}

.web-final-cta-primary:hover {
    background: #a9e924;
    transform: translateY(-2px);
}

.web-final-cta-secondary {
    border-color: rgba(255, 255, 255, 0.27);

    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
}

.web-final-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-2px);
}

.web-final-cta-primary:focus-visible,
.web-final-cta-secondary:focus-visible {
    outline: 3px solid #b7f52a;
    outline-offset: 4px;
}

.web-final-cta-footnote {
    margin: 19px 0 0;

    color: #9fb0c6;

    font-size: 0.79rem;
    line-height: 1.6;
}


/* ========================================
   WEB SECTION 09C: VISUAL
========================================= */

.web-final-cta-visual {
    display: grid;
    place-items: center;

    min-width: 0;
    min-height: 295px;

    pointer-events: none;
}

.web-final-cta-orbit {
    position: relative;

    display: grid;
    place-items: center;

    width: min(100%, 320px);
    aspect-ratio: 1;
}

.web-final-orbit-ring {
    position: absolute;
    inset: 0;

    border: 1px solid rgba(183, 245, 42, 0.17);
    border-radius: 50%;
}

.web-final-orbit-ring--two {
    inset: 29px;

    border-color: rgba(183, 245, 42, 0.23);
}

.web-final-cta-symbol {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 155px;
    height: 155px;

    border: 1px solid rgba(183, 245, 42, 0.35);
    border-radius: 29px;

    background:
        linear-gradient(
            135deg,
            rgba(183, 245, 42, 0.19),
            rgba(183, 245, 42, 0.035)
        );

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.17);
}

.web-final-cta-symbol svg {
    width: 110px;
    height: 110px;

    fill: none;
    stroke: #b7f52a;
    stroke-width: 2.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-final-cta-symbol svg circle {
    fill: #b7f52a;
    stroke: none;
}

.web-final-floating-dot {
    position: absolute;
    z-index: 2;

    width: 11px;
    height: 11px;

    border-radius: 50%;
    background: #b7f52a;

    box-shadow:
        0 0 0 7px rgba(183, 245, 42, 0.09);
}

.web-final-floating-dot--one {
    top: 30px;
    right: 64px;
}

.web-final-floating-dot--two {
    bottom: 42px;
    left: 37px;

    width: 8px;
    height: 8px;
}

.web-final-floating-dot--three {
    right: 14px;
    bottom: 116px;

    width: 6px;
    height: 6px;
}


/* ========================================
   WEB SECTION 09: RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .web-final-cta {
        padding: 55px 0 85px;
    }

    .web-final-cta-layout {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 15px;
    }

    .web-final-cta-orbit {
        width: 240px;
    }

    .web-final-cta-symbol {
        width: 125px;
        height: 125px;
    }

    .web-final-cta-symbol svg {
        width: 90px;
        height: 90px;
    }

}

@media (max-width: 760px) {

    .web-final-cta-layout {
        grid-template-columns: 1fr;
    }

    .web-final-cta-visual {
        min-height: 205px;
    }

    .web-final-cta-orbit {
        width: 200px;
    }

    .web-final-cta-symbol {
        width: 108px;
        height: 108px;

        border-radius: 23px;
    }

    .web-final-cta-symbol svg {
        width: 78px;
        height: 78px;
    }

}

@media (max-width: 600px) {

    .web-final-cta {
        padding: 38px 0 70px;
    }

    .web-final-cta-panel {
        padding: 35px 23px 25px;
        border-radius: 19px;
    }

    .web-final-cta-content h2 {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .web-final-cta-content > p:not(.web-final-cta-footnote) {
        font-size: 0.92rem;
    }

    .web-final-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .web-final-cta-primary,
    .web-final-cta-secondary {
        width: 100%;
    }

    .web-final-cta-footnote {
        margin-top: 16px;
    }

    .web-final-cta-visual {
        min-height: 185px;
    }

    .web-final-cta-orbit {
        width: 175px;
    }

    .web-final-orbit-ring--two {
        inset: 19px;
    }

    .web-final-cta-symbol {
        width: 95px;
        height: 95px;
    }

    .web-final-cta-symbol svg {
        width: 67px;
        height: 67px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .web-final-cta-primary,
    .web-final-cta-secondary {
        transition: none;
    }

    .web-final-cta-primary:hover,
    .web-final-cta-secondary:hover {
        transform: none;
    }

}


/* ========================================
   WEB HOSTING: DIRECT PLAN ANCHORS
   Keep anchored cards clear of sticky header
========================================= */

.web-pricing {
    scroll-margin-top: 100px;
}

.web-plan-card[id^="web-plan-"] {
    scroll-margin-top: 110px;
}


/* ========================================
   SECTION 03: CREATIVE BENEFITS STRIP
========================================= */

.trust-bar {
    position: relative;
    background: #ffffff;
    border-top: 1px solid #e8eee5;
    border-bottom: 1px solid #e8eee5;
}

.trust-bar .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

/* BENEFIT ITEM */

.trust-bar .trust-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
    min-height: 104px;

    padding: 22px 20px;

    border-right: 1px solid #e7eee5;
    border-bottom: 0;

    transition: background 0.2s ease;
}

.trust-bar .trust-item:first-child {
    padding-left: 0;
}

.trust-bar .trust-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.trust-bar .trust-item:hover {
    background: #f8fbf5;
}

/* ICON */

.trust-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f0ffda,
            #e3f8d5
        );

    border: 1px solid #d9eecb;

    color: #438821;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.trust-icon svg {
    display: block;
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trust-bar .trust-item:hover .trust-icon {
    transform: translateY(-2px);
    background: #dfffba;
}

/* TEXT */

.trust-copy {
    min-width: 0;
}

.trust-bar .trust-copy strong {
    display: block;

    margin: 0;

    color: #0b1220;

    font-size: 0.91rem;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: -0.015em;
}

.trust-bar .trust-copy span {
    display: block;

    margin-top: 4px;

    color: #657268;

    font-size: 0.76rem;
    line-height: 1.5;
}

/* ========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .trust-bar .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-bar .trust-item {
        min-height: 94px;
        padding: 18px 20px;
    }

    .trust-bar .trust-item:first-child {
        padding-left: 20px;
    }

    .trust-bar .trust-item:nth-child(2) {
        border-right: 0;
    }

    .trust-bar .trust-item:nth-child(-n+2) {
        border-bottom: 1px solid #e7eee5;
    }

    .trust-bar .trust-item:last-child {
        padding-right: 20px;
    }

}

/* ========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .trust-bar .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-bar .trust-item {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

        min-height: 145px;

        padding: 19px 13px;
    }

    .trust-bar .trust-item:first-child {
        padding-left: 13px;
    }

    .trust-bar .trust-item:last-child {
        padding-right: 13px;
    }

    .trust-icon {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .trust-icon svg {
        width: 19px;
        height: 19px;
    }

    .trust-bar .trust-copy strong {
        font-size: 0.82rem;
    }

    .trust-bar .trust-copy span {
        font-size: 0.71rem;
        line-height: 1.45;
    }

}

/* ========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .trust-bar .trust-item,
    .trust-icon {
        transition: none;
    }

}


/* WHY LUMOHOSTING V2 — scoped spacing and readability */
.why-lumo-section .why-lumo-grid { gap: clamp(32px, 5vw, 64px); }
.why-lumo-section .why-lumo-content h2 { line-height: 1.08; text-wrap: balance; }
.why-lumo-section .why-lumo-content > p { color: #bac6d3; max-width: 48ch; }
.why-lumo-section .why-feature-card { min-width: 0; padding: 24px; }
.why-lumo-section .why-feature-icon { margin-bottom: 18px; }
.why-lumo-section .why-feature-card h3 { text-wrap: balance; }
.why-lumo-section .why-feature-card p { color: #b6c3d0; margin-top: 9px; }
.why-lumo-section .why-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.why-lumo-section a:focus-visible { outline: 3px solid #b7f52a; outline-offset: 5px; }
@media (max-width: 1000px) {
    .why-lumo-section .why-lumo-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 650px) {
    .why-lumo-section { padding: 56px 0; }
    .why-lumo-section .why-lumo-content h2 {
        font-size: clamp(2.125rem, 9.5vw, 2.875rem);
        line-height: 1.12;
        letter-spacing: -.035em;
    }
    .why-lumo-section .why-lumo-content > p { margin-top: 18px; font-size: 1rem; line-height: 1.7; }
    .why-lumo-section .why-lumo-actions { margin-top: 24px; gap: 10px; }
    .why-lumo-section .why-lumo-features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .why-lumo-section .why-feature-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        min-height: 0;
        padding: 20px 18px;
        border-radius: 16px;
    }
    .why-lumo-section .why-feature-icon { width: 36px; height: 36px; margin: 2px 0 0; border-radius: 11px; }
    .why-lumo-section .why-feature-icon svg { width: 19px; height: 19px; }
    .why-lumo-section .why-feature-card h3 { font-size: 1rem; line-height: 1.4; text-wrap: pretty; }
    .why-lumo-section .why-feature-card p { font-size: .9375rem; line-height: 1.65; }
}

/* PERFORMANCE V2 — concise copy and compact illustrative overview */
.performance-section .performance-layout { gap: clamp(30px, 5vw, 68px); }
.performance-section .performance-content h2 { line-height: 1.08; text-wrap: balance; }
.performance-section .performance-intro { max-width: 50ch; }
.performance-section .performance-text-link { display: inline-flex; align-items: center; min-height: 44px; }
.performance-section a:focus-visible { outline: 3px solid #367526; outline-offset: 5px; }
.performance-section .infra-panel-header { flex-wrap: wrap; gap: 14px; }
.performance-section .infra-panel-header > div { min-width: 0; }
.performance-section .infra-status { flex: 0 0 auto; white-space: nowrap; }
.performance-section .infra-metric-card small { color: #b1becd; }
.performance-section .infra-speed-ring { background: linear-gradient(135deg, #caff3f, #79df3e); }
@media (max-width: 1000px) {
    .performance-section .performance-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 650px) {
    .performance-section { padding: 56px 0; }
    .performance-section .performance-content h2 {
        font-size: clamp(2.125rem, 9.5vw, 2.875rem);
        line-height: 1.12;
        letter-spacing: -.035em;
    }
    .performance-section .performance-intro { margin-top: 18px; font-size: 1rem; line-height: 1.7; }
    .performance-section .performance-points { margin-top: 26px; gap: 20px; }
    .performance-section .performance-point { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
    .performance-section .performance-point-icon { width: 36px; height: 36px; }
    .performance-section .performance-point h3 { font-size: 1rem; line-height: 1.4; }
    .performance-section .performance-point p { font-size: .9375rem; line-height: 1.65; }
    .performance-section .performance-actions { margin-top: 26px; gap: 10px; }
    .performance-section .infra-panel { padding: 18px; }
    .performance-section .infra-panel-header { flex-direction: row; align-items: flex-start; }
    .performance-section .infra-panel-header h3 { font-size: 1.2rem; line-height: 1.35; }
    .performance-section .infra-main-metric {
        flex-direction: row;
        align-items: center;
        padding: 16px;
        margin-top: 18px;
        gap: 12px;
    }
    .performance-section .infra-speed-ring { width: 76px; height: 76px; flex: 0 0 76px; }
    .performance-section .infra-main-metric > div:first-child strong { font-size: 1.7rem; }
    .performance-section .infra-metrics { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .performance-section .infra-metric-card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 12px 14px;
    }
    .performance-section .infra-metric-label { grid-column: 1; grid-row: 1 / span 2; font-size: .75rem; }
    .performance-section .infra-metric-card strong { grid-column: 2; margin-top: 0; font-size: .9375rem; }
    .performance-section .infra-metric-card small { grid-column: 2; font-size: .75rem; line-height: 1.4; }
    .performance-section .infra-graph-card { padding: 16px; }
    .performance-section .infra-graph-head { flex-wrap: wrap; gap: 10px; }
    .performance-section .infra-chart { height: 86px; margin-top: 16px; gap: 6px; }
}

/* VPS SPOTLIGHT V2 — compact, labelled illustrative console */
.vps-spotlight-section .vps-spotlight-grid { gap: clamp(30px, 5vw, 68px); }
.vps-spotlight-section .vps-spotlight-content h2 { line-height: 1.08; text-wrap: balance; }
.vps-spotlight-section .vps-spotlight-intro { max-width: 50ch; color: #bac6d3; }
.vps-spotlight-section .vps-feature-item p { color: #b6c3d0; }
.vps-spotlight-section .vps-feature-item > div { min-width: 0; }
.vps-spotlight-section .vps-secondary-link { display: inline-flex; align-items: center; min-height: 44px; }
.vps-spotlight-section a:focus-visible { outline: 3px solid #b7f52a; outline-offset: 5px; }
.vps-spotlight-section .vps-console-header { flex-wrap: wrap; gap: 14px; }
.vps-spotlight-section .vps-console-header > div { min-width: 0; }
.vps-spotlight-section .vps-console-status { flex: 0 0 auto; white-space: nowrap; }
.vps-spotlight-section .vps-resource-main { min-width: 0; }
.vps-spotlight-section .vps-resource-main small { color: #b1becd; line-height: 1.5; }
.vps-spotlight-section .vps-resource-item { min-width: 0; }
.vps-spotlight-section .vps-resource-item strong { overflow-wrap: anywhere; }
.vps-spotlight-section [data-illustrative] .lumo-terminal { display: none; }
@media (max-width: 1000px) {
    .vps-spotlight-section .vps-spotlight-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 650px) {
    .vps-spotlight-section { padding: 56px 0; }
    .vps-spotlight-section .vps-spotlight-content h2 {
        font-size: clamp(2.125rem, 9.5vw, 2.875rem);
        line-height: 1.12;
        letter-spacing: -.035em;
    }
    .vps-spotlight-section .vps-spotlight-intro { margin-top: 18px; font-size: 1rem; line-height: 1.7; }
    .vps-spotlight-section .vps-feature-list { margin-top: 26px; gap: 18px; }
    .vps-spotlight-section .vps-feature-item { gap: 12px; }
    .vps-spotlight-section .vps-feature-item strong { font-size: 1rem; line-height: 1.4; }
    .vps-spotlight-section .vps-feature-item p { font-size: .9375rem; line-height: 1.65; }
    .vps-spotlight-section .vps-spotlight-actions { margin-top: 26px; gap: 10px; }
    .vps-spotlight-section .vps-use-cases { margin-top: 18px; gap: 8px; }
    .vps-spotlight-section .vps-console-card { padding: 18px; }
    .vps-spotlight-section .vps-console-header { flex-direction: row; align-items: flex-start; }
    .vps-spotlight-section .vps-console-header h3 { font-size: 1.2rem; line-height: 1.35; }
    .vps-spotlight-section .vps-resource-card {
        flex-direction: row;
        align-items: center;
        padding: 16px;
        margin-top: 18px;
        gap: 12px;
    }
    .vps-spotlight-section .vps-resource-main strong { font-size: 1.5rem; }
    .vps-spotlight-section .vps-resource-main small { font-size: .75rem; }
    .vps-spotlight-section .vps-resource-icon { width: 54px; height: 54px; border-radius: 14px; }
    .vps-spotlight-section .vps-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .vps-spotlight-section .vps-resource-item { padding: 12px 14px; }
    .vps-spotlight-section .vps-resource-item span { font-size: .75rem; }
    .vps-spotlight-section .vps-resource-item strong { font-size: .9375rem; }
    .vps-spotlight-section .vps-workload-card { padding: 16px; }
    .vps-spotlight-section .vps-workload-head { flex-wrap: wrap; gap: 10px; }
    .vps-spotlight-section .vps-workload-bars { height: 86px; margin-top: 16px; gap: 6px; }
}

/* Migration refinement V2 — planning guide and mobile typography */
.migration-section { padding: 96px 0; }
.migration-section .migration-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 68px); }
.migration-section .migration-content h2 { font-size: clamp(2.5rem, 4.1vw, 4rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.migration-section .migration-intro { margin-top: 20px; font-size: 1rem; line-height: 1.65; }
.migration-section .migration-benefits { margin-top: 26px; gap: 12px; }
.migration-section .migration-benefit { grid-template-columns: 28px minmax(0, 1fr); padding: 16px; gap: 10px; }
.migration-section .migration-benefit p { font-size: .875rem; line-height: 1.55; }
.migration-section .migration-actions { margin-top: 26px; gap: 14px 22px; }
.migration-section .migration-text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.migration-section .migration-actions a:focus-visible { outline: 3px solid #4f7225; outline-offset: 4px; }
.migration-section .migration-note { margin-top: 16px; color: #627060; font-size: .8125rem; line-height: 1.6; }
.migration-section .migration-panel { padding: 26px; }
.migration-section .migration-panel-top { padding-bottom: 20px; gap: 12px; }
.migration-section .migration-panel-top h3 { font-size: 1.35rem; }
.migration-section .migration-status { flex-shrink: 0; white-space: nowrap; }
.migration-section .migration-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.migration-section .migration-step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px; background: #f7faf6; border-color: #e5ebe2; }
.migration-section .migration-step-number { background: #eaf6df; color: #3e631f; }
.migration-section .migration-step p { font-size: .875rem; line-height: 1.55; }
.migration-section .migration-success-card { align-items: flex-start; margin-top: 18px; padding: 16px; }
.migration-section .migration-success-card span { color: #bec9d5; font-size: .8125rem; line-height: 1.55; }
.migration-section .migration-success-icon { margin: 0; }
@media (max-width: 1000px) {
    .migration-section .migration-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .migration-section .migration-content, .migration-section .migration-visual { max-width: 720px; width: 100%; }
}
@media (max-width: 650px) {
    .migration-section { padding: 56px 0; }
    .migration-section .migration-content h2 { font-size: clamp(2.125rem, 8.5vw, 2.875rem); line-height: 1.1; }
    .migration-section .migration-intro { margin-top: 18px; font-size: .9375rem; }
    .migration-section .migration-benefits { margin-top: 22px; gap: 10px; }
    .migration-section .migration-benefit { padding: 14px; }
    .migration-section .migration-actions { gap: 8px; }
    .migration-section .migration-text-link { justify-content: center; }
    .migration-section .migration-panel { padding: 18px; border-radius: 20px; }
    .migration-section .migration-panel-top { flex-direction: row; flex-wrap: wrap; }
    .migration-section .migration-panel-top h3 { font-size: 1.2rem; }
    .migration-section .migration-step { padding: 12px; gap: 10px; }
    .migration-section .migration-step strong { line-height: 1.4; }
}

/* Migration creative V3: visual transfer and four-stage journey */
.migration-creative { background: radial-gradient(ellipse at 92% 40%, #edffd7, transparent 44%), linear-gradient(160deg,#fff 15%,#f3f8ee); }
.migration-creative::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#5e793a22 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg,transparent 45%,#000); pointer-events: none; }
.migration-creative .migration-grid { position: relative; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px,4vw,60px); }
.migration-creative .migration-content h2 { font-size: clamp(2.8rem,5vw,4.6rem); line-height: 1.04; }
.migration-creative .migration-content h2 span { display: inline-block; position: relative; padding-bottom: 10px; }
.migration-creative .migration-content h2 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 100%; background: linear-gradient(90deg,#a6f329,#77ce35,transparent); }
.migration-creative .migration-intro { max-width: 470px; }
.migration-creative .migration-benefit { align-items: center; border-radius: 16px; background: #ffffffd9; box-shadow: 0 5px 16px #14221a04; grid-template-columns: 38px minmax(0,1fr); }
.migration-creative .migration-check { width: 38px; height: 38px; border-radius: 12px; }
.migration-creative svg { width: 22px; height: 22px; display: block; }
.migration-creative .migration-benefit p { margin-top: 3px; font-size: .8125rem; }
.migration-creative .migration-actions .btn { gap: 16px; }
.migration-creative .migration-panel { overflow: hidden; background: radial-gradient(circle at 85% 10%,#a6f32918,transparent 35%),linear-gradient(145deg,#14243a,#0c1625); border: 1px solid #223348; box-shadow: 0 28px 60px #0d1a2926; padding: 26px; }
.migration-creative .migration-panel::before { background: none; }
.migration-creative .migration-panel-top { align-items: center; border-color: #ffffff16; }
.migration-creative .migration-panel-label { color: #b2d48c; }
.migration-creative .migration-panel-top h3 { color: #fff; }
.migration-creative .migration-status { background: #b7f52a12; border: 1px solid #b7f52a33; color: #c5ed93; font-size: .65rem; }
.migration-creative .migration-route { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 62px minmax(0,1fr); align-items: center; padding: 26px 0; }
.migration-creative .migration-host { min-width: 0; text-align: center; padding: 15px 12px; border: 1px solid #ffffff1f; background: #ffffff05; border-radius: 16px; }
.migration-creative .migration-host--new { background: #b7f52a0c; border-color: #b7f52a66; box-shadow: 0 0 24px #b7f52a0d; }
.migration-creative .migration-host-label { display: block; color: #98a9bd; font-size: .625rem; letter-spacing: .14em; font-weight: 800; text-align: left; margin-bottom: 12px; }
.migration-creative .migration-host--new .migration-host-label { color: #c5ed93; }
.migration-creative .migration-host strong { display: block; color: #f5f9ff; font-size: .875rem; margin-top: 12px; }
.migration-creative .migration-host small { display: block; color: #a8b7c9; font-size: .6875rem; margin-top: 4px; }
.migration-creative .migration-browser,.migration-creative .migration-brand { height: 80px; border-radius: 8px; background: #fff; overflow: hidden; }
.migration-creative .migration-browser-bar { height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: #e7edf3; }
.migration-creative .migration-browser-bar i { width: 4px; height: 4px; border-radius: 50%; background: #a2afbc; }
.migration-creative .migration-browser-body { padding: 9px; display: grid; grid-template-columns: 22px 1fr; gap: 5px; }
.migration-creative .migration-browser-body b { grid-row: span 2; background: #cadcae; border-radius: 3px; }
.migration-creative .migration-browser-body > span { height: 5px; background: #dbe3ea; border-radius: 2px; }
.migration-creative .migration-browser-body > span:nth-of-type(2) { width: 70%; }
.migration-creative .migration-browser-body > div { grid-column: span 2; display: flex; gap: 5px; margin-top: 3px; }
.migration-creative .migration-browser-body > div i { height: 17px; flex: 1; background: #eef2f5; border-radius: 3px; }
.migration-creative .migration-brand { display: grid; place-items: center; padding: 10px; }
.migration-creative .migration-brand img { max-width: 100%; height: auto; object-fit: contain; }
.migration-creative .migration-bridge { align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; }
.migration-creative .migration-bridge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #94c84480; }
.migration-creative .migration-bridge-orb { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #b7f52a; color: #102036; font-size: 20px; box-shadow: 0 0 0 5px #b7f52a12; }
.migration-creative .migration-bridge-caption { position: absolute; bottom: 16px; text-align: center; font-size: .5rem; letter-spacing: .08em; color: #c5ed93; line-height: 1.5; }
.migration-creative .migration-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 0; }
.migration-creative .migration-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px 10px; border: 1px solid #ffffff18; background: #ffffff06; border-radius: 12px; }
.migration-creative .migration-step:not(:last-child)::after { content: "→"; position: absolute; right: -8px; top: 36px; z-index: 3; color: #b7f52a; font-size: 14px; }
.migration-creative .migration-step-number { position: absolute; right: 9px; top: 9px; width: auto; height: auto; border-radius: 0; background: none; color: #8d9fb5; font-size: .625rem; }
.migration-creative .migration-stage-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #b7f52a12; color: #b7f52a; }
.migration-creative .migration-stage-icon svg { width: 20px; height: 20px; }
.migration-creative .migration-step strong { color: #fff; font-size: .875rem; }
.migration-creative .migration-step p { color: #b2c0d1; font-size: .75rem; line-height: 1.5; margin-top: 6px; }
.migration-creative .migration-success-card { background: #b7f52a0c; border: 1px solid #b7f52a25; padding: 14px; align-items: center; }
.migration-creative .migration-success-icon { width: 30px; height: 30px; border-radius: 50%; }
.migration-creative .migration-success-icon svg { width: 18px; height: 18px; }
.migration-creative .migration-success-card strong { font-size: .8125rem; color: #eaf9d5; }
.migration-creative .migration-success-card span { font-size: .75rem; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .migration-creative .migration-benefit { transition: transform .2s,border-color .2s; }
 .migration-creative .migration-benefit:hover { transform: translateY(-3px); border-color: #9ed866; }
}
@media(max-width:1000px) {
 .migration-creative .migration-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:650px) {
 .migration-creative .migration-content h2 { font-size: clamp(2.5rem,10vw,3.3rem); }
 .migration-creative .migration-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .migration-creative .migration-benefit { grid-template-columns: minmax(0,1fr); padding: 14px; gap: 10px; }
 .migration-creative .migration-panel { padding: 18px; }
 .migration-creative .migration-panel-top { align-items: flex-start; }
 .migration-creative .migration-status { padding: 5px 8px; }
 .migration-creative .migration-route { grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); padding: 22px 0; }
 .migration-creative .migration-host { padding: 12px 8px; border-radius: 12px; }
 .migration-creative .migration-browser,.migration-creative .migration-brand { height: 68px; }
 .migration-creative .migration-brand { padding: 7px; }
 .migration-creative .migration-host small { font-size: .625rem; line-height: 1.5; }
 .migration-creative .migration-bridge-orb { width: 28px; height: 28px; }
 .migration-creative .migration-bridge-caption { display: none; }
 .migration-creative .migration-steps { grid-template-columns: minmax(0,1fr); gap: 0; }
 .migration-creative .migration-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 12px 0 12px 12px; margin-left: 10px; background: none; border: none; border-left: 1px solid #b7f52a50; border-radius: 0; }
 .migration-creative .migration-step:not(:last-child)::after { content: ""; left: -4px; right: auto; top: 28px; width: 7px; height: 7px; border-radius: 50%; background: #b7f52a; }
 .migration-creative .migration-step:last-child::before { content: ""; position: absolute; left: -4px; top: 28px; width: 7px; height: 7px; border-radius: 50%; background: #b7f52a; }
 .migration-creative .migration-step-number { right: 0; top: 14px; }
 .migration-creative .migration-step > div { padding-right: 22px; }
 .migration-creative .migration-step p { margin-top: 3px; font-size: .8125rem; }
 .migration-creative .migration-success-card { margin-top: 14px; }
}

/* Server Locations V2 — planned region atlas */
.locations-creative { padding: 96px 0; background: radial-gradient(ellipse at 0 20%,#effbdd,transparent 40%),#fff; }
.locations-creative .locations-heading { max-width: none; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: end; gap: 40px; margin-bottom: 30px; }
.locations-creative .locations-heading h2 { font-size: clamp(2.7rem,4.6vw,4.2rem); line-height: 1.06; }
.locations-creative .locations-heading p { font-size: 1rem; line-height: 1.65; margin: 0 0 5px; max-width: 430px; }
.locations-creative .locations-atlas { overflow: hidden; background: radial-gradient(ellipse at 65% 60%,#30472f55,transparent 55%),linear-gradient(135deg,#14243a,#0d1726); border: 1px solid #24364a; border-radius: 24px; box-shadow: 0 20px 45px #0d1a2914; }
.locations-creative .locations-atlas-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px 0; }
.locations-creative .locations-atlas-eyebrow { color: #b2d48c; font-size: .6875rem; letter-spacing: .12em; font-weight: 800; }
.locations-creative .locations-atlas h3 { color: #fff; font-size: 1.4rem; letter-spacing: -.03em; margin: 7px 0 0; }
.locations-creative .locations-plan-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #ffffff08; color: #c1d0df; border: 1px solid #ffffff20; border-radius: 30px; font-size: .75rem; white-space: nowrap; }
.locations-creative .locations-plan-badge i { width: 8px; height: 8px; border: 1px solid #b7f52a; border-radius: 50%; }
.locations-creative .locations-world { width: 100%; height: auto; display: block; margin: 4px 0; }
.locations-creative .locations-map-pin { cursor: pointer; }
.locations-creative .locations-map-pin:hover > rect,.locations-creative .locations-map-pin:focus-visible > rect { fill: #345322; stroke: #b7f52a; }
.locations-creative .locations-map-pin:focus-visible { outline: 2px solid #b7f52a; }
.locations-creative .locations-atlas-footer { border-top: 1px solid #ffffff12; padding: 16px 30px; display: flex; justify-content: space-between; gap: 16px; color: #b4c4d5; font-size: .75rem; line-height: 1.6; }
.locations-creative .locations-atlas-footer b { color: #b7f52a; margin: 0 8px; }
.locations-creative .locations-grid { margin-top: 22px; gap: 14px; }
.locations-creative .location-card { min-height: 0; padding: 22px; border-radius: 18px; background: linear-gradient(145deg,#fff,#f6faf2); scroll-margin-top: 120px; }
.locations-creative .location-region-icon { background: #edf8df; color: #446c22; width: 38px; height: 38px; border-radius: 11px; }
.locations-creative .location-status--planned { background: #f1f4ef; color: #596952; border: 1px dashed #c5d1be; }
.locations-creative .location-card h3 { font-size: 1.15rem; margin: 18px 0 5px; }
.locations-creative .location-card p { font-size: .875rem; line-height: 1.5; }
.locations-creative .location-link { display: flex; align-items: center; gap: 8px; font-size: .8125rem; padding-top: 18px; min-height: 44px; }
.locations-creative .location-link--disabled { color: #69776b; }
.locations-creative .location-guidance { margin-top: 22px; background: #f4f9ef; border-color: #dbe8d0; padding: 22px; }
.locations-creative .location-guidance-icon svg { width: 24px; height: 24px; }
.locations-creative .location-guidance p { margin: 5px 0 0; font-size: .875rem; line-height: 1.6; }
.locations-creative .location-guidance-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.locations-creative a:focus-visible { outline: 3px solid #78a33a; outline-offset: 4px; }
@media(max-width:1000px) {
 .locations-creative .locations-heading { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .locations-creative .locations-heading p { max-width: 600px; }
 .locations-creative .locations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
 .locations-creative { padding: 56px 0; }
 .locations-creative .locations-heading { margin-bottom: 24px; gap: 18px; }
 .locations-creative .locations-heading h2 { font-size: clamp(2.35rem,9vw,3.1rem); line-height: 1.1; }
 .locations-creative .locations-heading p { font-size: .9375rem; }
 .locations-creative .locations-atlas { border-radius: 20px; }
 .locations-creative .locations-atlas-top { padding: 20px 18px 0; align-items: flex-start; flex-direction: column; gap: 12px; }
 .locations-creative .locations-atlas h3 { font-size: 1.2rem; }
 .locations-creative .locations-world { width: calc(100% + 24px); max-width: none; margin: 14px -12px; }
 .locations-creative .locations-atlas-footer { flex-direction: column; gap: 6px; padding: 14px 18px; font-size: .6875rem; }
 .locations-creative .locations-atlas-footer b { margin: 0 4px; }
 .locations-creative .locations-grid { gap: 10px; margin-top: 16px; }
 .locations-creative .location-card { padding: 15px; border-radius: 16px; }
 .locations-creative .location-card-top { gap: 6px; flex-wrap: wrap; }
 .locations-creative .location-region-icon { width: 32px; height: 32px; font-size: .6875rem; }
 .locations-creative .location-status { font-size: .5625rem; padding: 4px 6px; }
 .locations-creative .location-card h3 { font-size: 1rem; margin-top: 14px; }
 .locations-creative .location-card p { font-size: .8125rem; }
 .locations-creative .location-link { font-size: .75rem; padding-top: 14px; }
 .locations-creative .location-guidance { grid-template-columns: 38px minmax(0,1fr); padding: 18px; gap: 12px; }
 .locations-creative .location-guidance-link { grid-column: 2; }
}
@media(prefers-reduced-motion:reduce) {
 .locations-creative .location-card { transition: none; }
 .locations-creative .location-card:hover { transform: none; }
}

/* Comparison V2 — two visual choices and optional detail */
.comparison-creative { padding: 96px 0; background: linear-gradient(180deg,#f8faf6,#fff); }
.comparison-creative .comparison-heading { max-width: 780px; margin-bottom: 32px; }
.comparison-creative .comparison-heading h2 { font-size: clamp(2.6rem,4.5vw,4.1rem); line-height: 1.08; text-wrap: balance; }
.comparison-creative .comparison-heading p { font-size: 1rem; line-height: 1.65; margin-top: 18px; }
.hosting-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.hosting-choice { min-width: 0; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid #dfe8d8; background: #fff; box-shadow: 0 18px 40px #17282008; }
.hosting-choice--vps { background: radial-gradient(circle at 100% 0,#b7f52a12,transparent 38%),linear-gradient(145deg,#14243a,#0d1726); border-color: #26384a; }
.hosting-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hosting-choice-tag { font-size: .6875rem; font-weight: 850; letter-spacing: .12em; color: #507a25; }
.hosting-choice-fit { font-size: .6875rem; color: #586950; padding: 6px 9px; background: #f0f7e8; border-radius: 30px; }
.hosting-choice--vps .hosting-choice-tag { color: #b7f52a; }
.hosting-choice--vps .hosting-choice-fit { color: #c1d0de; background: #ffffff09; border: 1px solid #ffffff16; }
.hosting-choice-diagram { height: 208px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 22px 0; padding: 18px; overflow: hidden; border-radius: 18px; background-image: radial-gradient(#73974e22 1px,transparent 1px); background-size: 14px 14px; background-color: #f5f9ef; border: 1px solid #e5eedb; }
.hosting-choice-diagram--vps { background-color: #ffffff04; background-image: radial-gradient(#b7f52a20 1px,transparent 1px); border-color: #ffffff15; }
.choice-browser { width: 160px; border: 1px solid #ceddc1; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 25px #324b2210; }
.choice-browser-bar { height: 22px; display: flex; align-items: center; gap: 4px; background: #eaf1e2; padding: 0 8px; }
.choice-browser-bar i { width: 4px; height: 4px; background: #99af86; border-radius: 50%; }
.choice-browser-bar span { margin-left: auto; font-size: .4375rem; font-weight: 800; letter-spacing: .05em; color: #567244; }
.choice-browser-page { padding: 10px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.choice-browser-page b { height: 28px; border-radius: 4px; background: #b7f52a; }
.choice-browser-page > div { grid-column: span 2; display: grid; gap: 5px; align-content: center; }
.choice-browser-page i { height: 5px; background: #dce6d5; border-radius: 3px; }
.choice-browser-page i:last-child { width: 65%; }
.choice-browser-page > span { height: 15px; background: #edf3e7; border-radius: 3px; }
.choice-diagram-link { height: 16px; border-left: 2px dashed #93b66d; }
.choice-shared { display: flex; gap: 5px; padding: 7px; border: 1px solid #d5e2c8; border-radius: 8px; background: #fff; }
.choice-shared span { font-size: .5625rem; font-weight: 750; color: #66755e; padding: 5px 9px; background: #f0f5e9; border-radius: 5px; }
.choice-shared .choice-shared-active { background: #d8f9a8; color: #36541d; }
.choice-diagram-caption { display: block; font-size: .5625rem; font-weight: 800; letter-spacing: .09em; margin-top: 12px; color: #60744d; text-align: center; }
.hosting-choice--vps .choice-diagram-caption { color: #a4b99a; }
.choice-server { width: 240px; max-width: 100%; background: linear-gradient(145deg,#24394e,#1a2c40); border: 1px solid #b7f52a55; border-radius: 12px; padding: 14px; box-shadow: 0 10px 35px #b7f52a08; }
.choice-server-top { display: flex; align-items: center; gap: 9px; color: #d2efb1; font-size: .5625rem; letter-spacing: .06em; font-weight: 800; }
.choice-server-top svg { width: 26px; height: 26px; color: #b7f52a; flex-shrink: 0; }
.choice-server-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.choice-server-resources span { text-align: center; padding: 9px 4px; background: #b7f52a10; border: 1px solid #b7f52a25; color: #def4c3; font-size: .6875rem; border-radius: 6px; }
.choice-server-control { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: .5625rem; color: #b9c8da; }
.hosting-choice h3 { margin: 0; color: #102035; font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.2; }
.hosting-choice--vps h3 { color: #fff; }
.hosting-choice-intro { margin: 12px 0 0; color: #667263; font-size: .9375rem; line-height: 1.6; max-width: 420px; }
.hosting-choice--vps .hosting-choice-intro { color: #bcc8d7; }
.hosting-choice-points { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.hosting-choice-points li { display: flex; align-items: baseline; gap: 10px; font-size: .875rem; line-height: 1.5; color: #354632; }
.hosting-choice-points li > span { color: #5e941f; font-weight: 900; }
.hosting-choice--vps .hosting-choice-points li { color: #e0e8f3; }
.hosting-choice--vps .hosting-choice-points li > span { color: #b7f52a; }
.hosting-choice-button { margin-top: auto; min-height: 48px; justify-content: center; gap: 14px; background: #edf8df; color: #28411a; border: 1px solid #d7e8c5; }
.hosting-choice--vps .hosting-choice-button { color: #102035; border: none; background: linear-gradient(110deg,#caff3f,#79df3e); }
.hosting-comparison-details { margin-top: 22px; background: #fff; border: 1px solid #dfe7d9; border-radius: 16px; overflow: hidden; }
.hosting-comparison-details summary { cursor: pointer; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; color: #172638; font-weight: 750; font-size: .9375rem; }
.hosting-comparison-details summary::-webkit-details-marker { display: none; }
.hosting-comparison-summary-label { display: flex; align-items: center; gap: 12px; font-size: .8125rem; color: #4e7826; }
.hosting-comparison-summary-label b { display: grid; place-items: center; width: 25px; height: 25px; background: #edf8df; border-radius: 50%; font-size: 18px; }
.hosting-comparison-details[open] .hosting-comparison-summary-label b { transform: rotate(45deg); }
.hosting-comparison-scroll { overflow-x: auto; margin: 0 22px; }
.hosting-comparison-table { border-collapse: collapse; width: 100%; min-width: 580px; text-align: left; font-size: .875rem; line-height: 1.6; }
.hosting-comparison-table caption { text-align: left; padding: 0 0 12px; font-weight: 700; color: #52674a; }
.hosting-comparison-table th,.hosting-comparison-table td { padding: 14px; border-bottom: 1px solid #e7ece3; vertical-align: top; }
.hosting-comparison-table thead th { background: #f1f7e9; color: #233719; }
.hosting-comparison-table tbody th { color: #273a23; width: 20%; }
.hosting-comparison-table td { color: #5f6e5b; width: 40%; }
.hosting-comparison-note { margin: 16px 22px 22px; color: #66765f; font-size: .8125rem; line-height: 1.6; }
.hosting-choice-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-top: 22px; border-radius: 16px; background: #f4f8ed; }
.hosting-choice-help strong { color: #1a2d14; font-size: .9375rem; }
.hosting-choice-help p { color: #617259; font-size: .875rem; line-height: 1.6; margin: 5px 0 0; }
.hosting-choice-help a { white-space: nowrap; display: flex; align-items: center; gap: 8px; min-height: 44px; color: #4d7921; font-weight: 800; font-size: .875rem; }
.comparison-creative a:focus-visible,.hosting-comparison-details summary:focus-visible,.hosting-comparison-scroll:focus-visible { outline: 3px solid #79a536; outline-offset: 4px; }
@media(max-width:650px) {
 .comparison-creative { padding: 56px 0; }
 .comparison-creative .comparison-heading h2 { font-size: clamp(2.3rem,9vw,3rem); }
 .comparison-creative .comparison-heading p { font-size: .9375rem; }
 .hosting-choice-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .hosting-choice { padding: 20px; border-radius: 20px; }
 .hosting-choice-diagram { height: 190px; margin: 20px 0; padding: 14px; }
 .hosting-choice h3 { font-size: 1.45rem; }
 .hosting-choice-points { margin: 20px 0; gap: 10px; }
 .hosting-comparison-details summary { padding: 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
 .hosting-comparison-scroll { margin: 0 18px; }
 .hosting-comparison-table { font-size: .8125rem; }
 .hosting-choice-help { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
}

/* Comparison V2.1 — both options visible per topic on mobile */
.hosting-comparison-cell-label { display: none; }
@media(max-width:650px) {
 .hosting-comparison-scroll { overflow: visible; }
 .hosting-comparison-table { display: block; min-width: 0; width: 100%; }
 .hosting-comparison-table caption { display: block; width: 100%; font-size: .875rem; line-height: 1.5; }
 .hosting-comparison-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .hosting-comparison-table tbody { display: grid; gap: 12px; }
 .hosting-comparison-table tbody tr { display: block; padding: 14px; border: 1px solid #e0e9d7; border-radius: 12px; background: #fbfdf8; }
 .hosting-comparison-table tbody th { display: block; width: auto; padding: 0 0 10px; border: none; font-size: .875rem; }
 .hosting-comparison-table tbody td { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 10px; width: auto; padding: 10px 0; border: none; font-size: .8125rem; line-height: 1.55; }
 .hosting-comparison-table tbody td + td { border-top: 1px solid #e6eddf; padding-bottom: 0; }
 .hosting-comparison-cell-label { display: block; font-size: .75rem; font-weight: 800; color: #45662c; }
 .hosting-comparison-cell-value { min-width: 0; overflow-wrap: anywhere; }
}

/* Comparison V2.2 — visual detail panel */
.hosting-comparison-visual { border-radius: 22px; border-color: #dbe7d0; box-shadow: 0 12px 35px #18301808; }
.hosting-comparison-visual summary { background: linear-gradient(110deg,#eff8e2,#fff 75%); padding: 24px; }
.comparison-summary-main { display: flex; align-items: center; gap: 14px; }
.comparison-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #173026; color: #b7f52a; flex-shrink: 0; }
.hosting-comparison-visual svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.comparison-summary-main strong { display: block; font-size: 1.1rem; color: #152635; }
.comparison-summary-main small { display: block; font-weight: 400; font-size: .8125rem; color: #63745a; margin-top: 4px; line-height: 1.5; }
.hosting-comparison-visual .hosting-comparison-scroll { margin: 0 24px; }
.hosting-comparison-visual .hosting-comparison-table { border-collapse: separate; border-spacing: 0 10px; }
.hosting-comparison-visual .hosting-comparison-table caption { padding: 20px 0 8px; font-size: .8125rem; font-weight: 500; }
.hosting-comparison-visual .hosting-comparison-table thead th { padding: 20px; border: none; }
.hosting-comparison-visual .hosting-comparison-table thead th:first-child { background: transparent; }
.hosting-comparison-visual .hosting-comparison-table thead th:nth-child(2) { background: #eaf7d9; border-radius: 14px 0 0 14px; }
.hosting-comparison-visual .hosting-comparison-table thead th:nth-child(3) { background: #14243a; color: #fff; border-radius: 0 14px 14px 0; }
.comparison-column-eyebrow { display: block; font-size: .625rem; letter-spacing: .1em; color: #6b7e5e; margin-bottom: 5px; }
.hosting-comparison-visual thead th:first-child strong { font-size: .875rem; }
.comparison-column-heading { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.comparison-column-heading svg { width: 30px; height: 30px; color: #59812f; }
.hosting-comparison-visual thead th:nth-child(3) svg { color: #b7f52a; }
.comparison-column-heading small { display: block; font-weight: 400; font-size: .75rem; opacity: .75; margin-top: 3px; }
.hosting-comparison-visual .hosting-comparison-table tbody th { padding: 18px 14px; border: none; }
.comparison-topic { display: flex; align-items: center; gap: 10px; font-size: .8125rem; }
.comparison-topic svg { color: #7c9369; width: 18px; height: 18px; }
.hosting-comparison-visual .hosting-comparison-table td { border: none; padding: 18px 20px; }
.hosting-comparison-visual .hosting-comparison-table td:nth-child(2) { background: #f2f8eb; border-radius: 12px 0 0 12px; }
.hosting-comparison-visual .hosting-comparison-table td:nth-child(3) { background: #17283e; border-radius: 0 12px 12px 0; }
.hosting-comparison-visual .hosting-comparison-cell-value { display: flex; gap: 12px; align-items: center; }
.comparison-cell-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d7e6c4; border-radius: 10px; background: #fff9; color: #608c32; flex-shrink: 0; }
.comparison-cell-icon svg { width: 20px; height: 20px; }
.hosting-comparison-visual td:nth-child(3) .comparison-cell-icon { background: #b7f52a0c; border-color: #b7f52a25; color: #b7f52a; }
.hosting-comparison-visual .hosting-comparison-cell-value strong { display: block; font-size: .875rem; color: #253d19; line-height: 1.45; }
.hosting-comparison-visual .hosting-comparison-cell-value small { display: block; font-size: .75rem; line-height: 1.5; margin-top: 4px; color: #697d5a; }
.hosting-comparison-visual td:nth-child(3) .hosting-comparison-cell-value strong { color: #f2f7ff; }
.hosting-comparison-visual td:nth-child(3) .hosting-comparison-cell-value small { color: #bcc9d9; }
.hosting-comparison-visual .hosting-comparison-note { padding: 14px 16px; background: #f5f9ef; border-radius: 12px; margin: 12px 24px 24px; display: flex; gap: 10px; }
.hosting-comparison-visual .hosting-comparison-note > span { color: #59812f; font-weight: 800; }
@media(max-width:650px) {
 .hosting-comparison-visual summary { padding: 20px; }
 .comparison-summary-main { gap: 12px; }
 .comparison-summary-main strong { font-size: 1rem; }
 .hosting-comparison-visual .hosting-comparison-summary-label { width: 100%; justify-content: space-between; padding-left: 54px; }
 .hosting-comparison-visual .hosting-comparison-scroll { margin: 0 18px; }
 .hosting-comparison-visual .hosting-comparison-table caption { padding: 18px 0 14px; }
 .hosting-comparison-visual .hosting-comparison-table tbody { gap: 16px; }
 .hosting-comparison-visual .hosting-comparison-table tbody tr { background: #fff; border: 1px solid #dce7d2; padding: 12px; box-shadow: 0 4px 12px #192c1504; }
 .hosting-comparison-visual .hosting-comparison-table tbody th { padding: 2px 2px 12px; }
 .comparison-topic { font-size: .875rem; }
 .hosting-comparison-visual .hosting-comparison-table tbody td { display: block; width: auto; padding: 14px; border: none; border-radius: 12px; }
 .hosting-comparison-visual .hosting-comparison-table tbody td + td { margin-top: 8px; padding-bottom: 14px; border: none; }
 .hosting-comparison-visual .hosting-comparison-cell-label { display: block; margin-bottom: 10px; text-transform: uppercase; font-size: .625rem; letter-spacing: .1em; color: #5e7c45; }
 .hosting-comparison-visual td:nth-child(3) .hosting-comparison-cell-label { color: #c0e995; }
 .hosting-comparison-visual .hosting-comparison-cell-value { gap: 10px; }
 .hosting-comparison-visual .hosting-comparison-cell-value strong { font-size: .8125rem; }
 .hosting-comparison-visual .hosting-comparison-note { margin: 16px 18px 18px; padding: 12px; }
}

/* Customer Journey V2 — connected practical stages */
.trust-creative { padding: 96px 0; background: radial-gradient(ellipse at 90% 20%,#f0fadf,transparent 45%),#fff; }
.trust-journey-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(30px,4vw,60px); align-items: center; }
.trust-creative .customer-trust-heading { max-width: none; margin: 0; }
.trust-creative .customer-trust-heading h2 { font-size: clamp(2.5rem,4vw,3.8rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; margin: 0; }
.trust-creative .customer-trust-heading p { margin: 20px 0 0; font-size: 1rem; line-height: 1.65; }
.trust-heading-detail { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: #6c7c61; font-size: .8125rem; line-height: 1.7; }
.trust-heading-detail > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #edf8db; color: #638e2d; font-size: 22px; flex-shrink: 0; }
.trust-heading-detail strong { color: #365024; font-weight: 700; }
.trust-journey-board { padding: 22px; background: linear-gradient(135deg,#eef6e3,#f8fbf3); border: 1px solid #dbe8ce; border-radius: 26px; box-shadow: 0 20px 50px #1b32230b; }
.trust-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.trust-board-heading > span:first-child { color: #577343; font-size: .625rem; font-weight: 850; letter-spacing: .12em; }
.trust-board-tag { color: #68815b; font-size: .6875rem; padding: 5px 8px; background: #ffffffa6; border-radius: 30px; }
.trust-journey-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.trust-journey-card { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid #dce8d1; border-radius: 18px; background: #fff; min-width: 0; }
.trust-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trust-stage-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #edf8df; color: #60882f; }
.trust-stage-icon svg { width: 23px; height: 23px; }
.trust-stage-number { font-size: 1.5rem; font-weight: 850; letter-spacing: -.05em; color: #d7e5c9; }
.trust-journey-card h3 { font-size: 1.25rem; color: #14263a; margin: 15px 0 7px; letter-spacing: -.03em; }
.trust-stage-lead { display: block; color: #435e32; font-size: .8125rem; line-height: 1.5; }
.trust-stage-tags { font-size: .625rem; color: #688552; background: #f3f8eb; padding: 7px 8px; border-radius: 7px; margin-top: 14px; letter-spacing: .02em; }
.trust-journey-card p { font-size: .8125rem; line-height: 1.6; color: #6c7a63; margin: 12px 0 14px; }
.trust-journey-card a { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #4c7b21; font-size: .8125rem; font-weight: 800; }
.trust-journey-card--plan::after,.trust-journey-card--help::after { content: "→"; position: absolute; right: -19px; top: 34px; width: 20px; text-align: center; color: #6d9c34; z-index: 2; }
.trust-journey-card--setup::after { content: "↙"; position: absolute; bottom: -23px; left: -20px; font-size: 23px; color: #6d9c34; z-index: 2; }
.trust-journey-card--grow { background: radial-gradient(circle at 100% 0,#b7f52a16,transparent 50%),#15263a; border-color: #263d52; }
.trust-journey-card--grow .trust-stage-icon { background: #b7f52a14; color: #b7f52a; }
.trust-journey-card--grow .trust-stage-number { color: #4c6358; }
.trust-journey-card--grow h3 { color: #fff; }
.trust-journey-card--grow .trust-stage-lead { color: #d0e8b7; }
.trust-journey-card--grow .trust-stage-tags { background: #b7f52a0c; color: #bada9f; }
.trust-journey-card--grow p { color: #bfccda; }
.trust-journey-card--grow a { color: #b7f52a; }
.trust-question-panel { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 26px; margin-top: 30px; background: linear-gradient(120deg,#122237,#1c3046); border-radius: 22px; }
.trust-question-symbol { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #b7f52a44; border-radius: 16px; background: #b7f52a0c; color: #b7f52a; font-size: 28px; font-weight: 800; }
.trust-question-panel > div > span { display: block; color: #acd282; font-size: .625rem; font-weight: 800; letter-spacing: .12em; }
.trust-question-panel h3 { color: #fff; margin: 6px 0; font-size: 1.2rem; letter-spacing: -.025em; }
.trust-question-panel p { color: #b5c5d6; font-size: .875rem; line-height: 1.6; margin: 0; }
.trust-question-panel .btn { min-height: 48px; gap: 14px; white-space: nowrap; }
.trust-creative a:focus-visible { outline: 3px solid #83af3c; outline-offset: 4px; }
@media(max-width:1000px) {
 .trust-journey-layout { grid-template-columns: minmax(0,1fr); }
 .trust-creative .customer-trust-heading { max-width: 680px; }
 .trust-question-panel { grid-template-columns: 52px minmax(0,1fr); }
 .trust-question-panel .btn { grid-column: 2; justify-self: start; }
}
@media(max-width:650px) {
 .trust-creative { padding: 56px 0; }
 .trust-creative .customer-trust-heading h2 { font-size: clamp(2.25rem,8.7vw,3rem); }
 .trust-creative .customer-trust-heading p { font-size: .9375rem; margin-top: 18px; }
 .trust-heading-detail { margin-top: 20px; }
 .trust-journey-board { padding: 18px; border-radius: 22px; }
 .trust-journey-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .trust-journey-card { padding: 18px; }
 .trust-journey-card h3 { margin-top: 12px; }
 .trust-journey-card--plan::after,.trust-journey-card--setup::after,.trust-journey-card--help::after { content: "↓"; left: 32px; right: auto; top: auto; bottom: -25px; width: 20px; font-size: 20px; }
 .trust-question-panel { padding: 20px; gap: 14px; grid-template-columns: 38px minmax(0,1fr); margin-top: 24px; }
 .trust-question-symbol { width: 38px; height: 38px; font-size: 24px; border-radius: 12px; }
 .trust-question-panel .btn { grid-column: 1 / -1; width: 100%; white-space: normal; justify-content: center; margin-top: 6px; font-size: .875rem; }
 .trust-question-panel h3 { font-size: 1.05rem; }
 .trust-question-panel p { font-size: .8125rem; }
}

/* Hosting Guides V2 — visual reading paths */
.guides-creative { padding: 96px 0; background: linear-gradient(180deg,#f8fbf4,#fff 50%); }
.guides-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 40px; align-items: end; margin-bottom: 30px; }
.guides-heading h2 { margin: 0; font-size: clamp(2.7rem,4.6vw,4.2rem); line-height: 1.07; letter-spacing: -.045em; color: #102035; }
.guides-heading h2 span { color: var(--green-dark); }
.guides-heading p { color: #6b7864; font-size: 1rem; line-height: 1.65; max-width: 410px; margin: 0 0 5px; }
.guides-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; border-radius: 24px; background: #14243a; border: 1px solid #24394c; box-shadow: 0 20px 50px #13253912; }
.guides-feature-copy { padding: 36px; display: flex; flex-direction: column; align-items: flex-start; background: radial-gradient(circle at 0 100%,#b7f52a0b,transparent 55%); }
.guides-category { display: block; font-size: .625rem; font-weight: 850; letter-spacing: .1em; color: #5a7b3d; }
.guides-feature-copy .guides-category { color: #b9e18f; }
.guides-feature h3 { color: #fff; font-size: clamp(2rem,3.5vw,3rem); line-height: 1.06; letter-spacing: -.035em; margin: 18px 0 14px; }
.guides-feature-copy p { color: #bbc9d9; font-size: .9375rem; line-height: 1.65; max-width: 390px; margin: 0 0 24px; }
.guides-feature-copy .btn { gap: 14px; min-height: 48px; margin-top: auto; }
.guides-feature-diagram { padding: 28px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(#b7f52a20 1px,transparent 1px); background-size: 16px 16px; border-left: 1px solid #ffffff0c; }
.guides-decision-start { align-self: center; display: grid; justify-items: center; padding: 16px 22px; background: #20354b; border: 1px solid #ffffff20; border-radius: 14px; min-width: 200px; }
.guides-decision-start svg { color: #b7f52a; width: 25px; height: 25px; margin-bottom: 10px; }
.guides-decision-start strong { font-size: .625rem; letter-spacing: .09em; color: #dcebc9; }
.guides-decision-start > span { font-size: .75rem; margin-top: 5px; color: #b7c7d9; }
.guides-decision-branch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; position: relative; margin-top: 28px; }
.guides-decision-branch::before { content: ""; position: absolute; left: 25%; right: 25%; top: -18px; border-top: 1px solid #b7f52a80; }
.guides-decision-branch::after { content: ""; position: absolute; top: -28px; left: 50%; height: 10px; border-left: 1px solid #b7f52a80; }
.guides-decision-branch > div { text-align: center; position: relative; padding: 14px 8px; background: #b7f52a09; border: 1px solid #b7f52a33; border-radius: 12px; }
.guides-decision-branch > div::before { content: ""; position: absolute; top: -18px; left: 50%; height: 18px; border-left: 1px solid #b7f52a80; }
.guides-decision-branch span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b7f52a15; color: #b7f52a; font-size: .5625rem; font-weight: 800; }
.guides-decision-branch strong { display: block; color: #f3f9ec; font-size: .875rem; margin-top: 8px; }
.guides-decision-branch small { display: block; color: #b9c9d9; font-size: .6875rem; margin-top: 5px; line-height: 1.5; }
.guides-decision-end { margin-top: 20px; padding: 12px; background: #e9f8d4; border-radius: 12px; text-align: center; }
.guides-decision-end span { display: block; font-size: .5625rem; letter-spacing: .1em; color: #69864a; font-weight: 800; }
.guides-decision-end strong { display: block; color: #243d16; font-size: .9375rem; margin-top: 5px; }
.guides-decision-end b { font-size: .6875rem; font-weight: 500; color: #718b58; margin: 0 8px; }
.guides-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.guides-topic { min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #e0e8d8; border-radius: 20px; background: #fff; }
.guides-topic-art { padding: 18px 12px; margin-bottom: 20px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: radial-gradient(#7d9c4b22 1px,transparent 1px),#f1f7e9; background-size: 13px 13px; }
.guides-art-icon { display: grid; place-items: center; width: 54px; height: 54px; background: #fff; border: 1px solid #d5e5c4; border-radius: 15px; color: #709b38; box-shadow: 0 7px 15px #3c5d2510; }
.guides-art-icon svg { width: 30px; height: 30px; }
.guides-art-labels { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .625rem; color: #57703e; }
.guides-art-labels > span { padding: 5px 8px; background: #ffffffc9; border: 1px solid #e2ecd6; border-radius: 6px; }
.guides-art-labels b { color: #8bbc45; }
.guides-topic--disk .guides-topic-art { background-color: #edf3f7; }
.guides-topic--disk .guides-art-icon { color: #577993; border-color: #d3e0e9; }
.guides-topic h3 { color: #14263a; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.025em; margin: 10px 0; }
.guides-topic p { color: #6b7864; font-size: .875rem; line-height: 1.6; margin: 0 0 14px; }
.guides-topic a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; color: #4f7b25; font-size: .8125rem; font-weight: 800; }
.guides-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px; margin-top: 22px; border-radius: 16px; background: #f4f8ee; }
.guides-footer strong { color: #283c1d; font-size: .9375rem; }
.guides-footer p { margin: 5px 0 0; color: #6b7c5e; font-size: .875rem; line-height: 1.5; }
.guides-footer .btn { gap: 12px; min-height: 44px; }
.guides-creative a:focus-visible { outline: 3px solid #7ba73e; outline-offset: 4px; }
@media(max-width:1000px) {
 .guides-heading { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .guides-feature-copy { padding: 28px; }
 .guides-feature-diagram { padding: 22px; }
}
@media(max-width:650px) {
 .guides-creative { padding: 56px 0; }
 .guides-heading { margin-bottom: 24px; }
 .guides-heading h2 { font-size: clamp(2.35rem,9vw,3.1rem); }
 .guides-heading p { font-size: .9375rem; }
 .guides-feature { grid-template-columns: minmax(0,1fr); border-radius: 20px; }
 .guides-feature-copy { padding: 24px; }
 .guides-feature h3 { font-size: 2.2rem; }
 .guides-feature-copy .btn { width: 100%; justify-content: center; font-size: .875rem; }
 .guides-feature-diagram { padding: 22px; border-left: none; border-top: 1px solid #ffffff15; }
 .guides-topic-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
 .guides-topic { display: grid; grid-template-columns: 70px minmax(0,1fr); column-gap: 16px; padding: 18px; }
 .guides-topic-art { grid-column: 1; grid-row: 1 / 5; margin: 0; padding: 10px 8px; justify-content: center; }
 .guides-art-icon { width: 44px; height: 44px; border-radius: 12px; }
 .guides-art-icon svg { width: 26px; height: 26px; }
 .guides-art-labels { display: none; }
 .guides-topic > .guides-category,.guides-topic h3,.guides-topic p,.guides-topic a { grid-column: 2; }
 .guides-topic h3 { font-size: 1.05rem; margin: 8px 0; }
 .guides-topic p { font-size: .8125rem; margin-bottom: 8px; }
 .guides-footer { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
 .guides-footer .btn { justify-content: center; }
}

/* FAQ V2 — topic icons and native expandable answers */
.faq-creative { padding: 96px 0; background: radial-gradient(ellipse at 0 30%,#f0f9df,transparent 45%),#fff; }
.faq-creative .faq-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(30px,5vw,72px); align-items: start; }
.faq-creative .faq-intro { position: static; }
.faq-creative .faq-intro h2 { font-size: clamp(2.5rem,4vw,3.8rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.faq-creative .faq-intro > p { font-size: 1rem; line-height: 1.65; margin-top: 20px; max-width: 460px; }
.faq-conversation { padding: 22px; margin-top: 26px; background: radial-gradient(#819f5420 1px,transparent 1px),#f0f7e6; background-size: 16px 16px; border: 1px solid #dfeacf; border-radius: 22px; }
.faq-conversation-question { position: relative; padding: 18px 18px 18px 68px; background: #fff; border: 1px solid #dce8ce; border-radius: 18px 18px 18px 5px; box-shadow: 0 8px 20px #23471806; }
.faq-conversation-question > span { position: absolute; top: 18px; left: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #183223; background: #b7f52a; font-size: 23px; font-weight: 850; }
.faq-conversation-question strong { display: block; color: #193026; font-size: .9375rem; line-height: 1.5; }
.faq-conversation-question small { display: block; margin-top: 5px; color: #75866a; font-size: .75rem; line-height: 1.5; }
.faq-conversation-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.faq-conversation-tags span { color: #cce7b2; font-size: .6875rem; padding: 8px 12px; background: #162c25; border-radius: 12px 12px 3px 12px; }
.faq-direct-help { margin-top: 22px; padding-left: 16px; border-left: 3px solid #b7f52a; }
.faq-direct-help strong { color: #253f1c; font-size: .9375rem; }
.faq-direct-help p { color: #718267; font-size: .875rem; line-height: 1.6; margin: 5px 0 8px; }
.faq-direct-help a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 800; color: #557d2e; }
.faq-creative .faq-list { gap: 12px; }
.faq-list-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 3px; color: #7a896f; font-size: .6875rem; }
.faq-list-label > span:first-child { font-size: .625rem; letter-spacing: .1em; font-weight: 850; color: #557443; }
.faq-creative .faq-item { border-radius: 16px; background: #fff; border: 1px solid #e0e9d8; overflow: hidden; box-shadow: 0 5px 18px #1a321206; }
.faq-creative .faq-item[open] { border-color: #a4cf74; box-shadow: 0 8px 24px #5a8a2210; }
.faq-prompt { display: grid; grid-template-columns: 34px minmax(0,1fr) 26px; gap: 12px; align-items: center; cursor: pointer; padding: 18px; list-style: none; font-size: .9375rem; line-height: 1.45; font-weight: 750; color: #162638; }
.faq-prompt::-webkit-details-marker { display: none; }
.faq-topic-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f0f7e8; color: #708f4d; }
.faq-topic-icon svg { width: 20px; height: 20px; }
.faq-native-toggle { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f0f6e9; color: #668d36; font-size: 18px; font-weight: 700; }
.faq-creative .faq-item[open] .faq-prompt { background: linear-gradient(110deg,#f1f9e6,#fff); }
.faq-creative .faq-item[open] .faq-topic-icon { background: #e1f6bd; color: #4d7927; }
.faq-creative .faq-item[open] .faq-native-toggle { transform: rotate(45deg); color: #345b18; background: #e1f6bd; }
.faq-creative .faq-answer { display: block; padding: 0 56px 20px 64px; }
.faq-creative .faq-answer p { color: #65755b; font-size: .875rem; line-height: 1.65; margin: 0; }
.faq-answer-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .8125rem; color: #557c2e; font-weight: 800; margin-top: 6px; }
.faq-creative a:focus-visible,.faq-prompt:focus-visible { outline: 3px solid #7da33f; outline-offset: -3px; }
@media(max-width:1000px) {
 .faq-creative .faq-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .faq-creative .faq-intro { max-width: 700px; }
 .faq-conversation { max-width: 480px; }
}
@media(max-width:650px) {
 .faq-creative { padding: 56px 0; }
 .faq-creative .faq-intro h2 { font-size: clamp(2.25rem,8.6vw,3rem); line-height: 1.1; }
 .faq-creative .faq-intro > p { font-size: .9375rem; margin-top: 18px; }
 .faq-conversation { margin-top: 20px; padding: 16px; border-radius: 18px; }
 .faq-conversation-question { padding: 14px 14px 14px 58px; }
 .faq-conversation-question > span { top: 14px; left: 12px; width: 32px; height: 32px; }
 .faq-direct-help { margin-top: 18px; }
 .faq-creative .faq-list { gap: 10px; }
 .faq-prompt { padding: 15px; grid-template-columns: 30px minmax(0,1fr) 24px; gap: 10px; font-size: .875rem; }
 .faq-topic-icon { width: 30px; height: 30px; border-radius: 9px; }
 .faq-topic-icon svg { width: 18px; height: 18px; }
 .faq-native-toggle { width: 24px; height: 24px; }
 .faq-creative .faq-answer { padding: 0 15px 16px 55px; }
 .faq-creative .faq-answer p { font-size: .8125rem; line-height: 1.65; }
}

/* FAQ visibility fix — native details with legacy creative CSS */
.faq-creative details.faq-item[open] > .faq-answer {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    padding: 0 56px 20px 64px;
    transition: none !important;
}
.faq-creative details.faq-item:not([open]) > .faq-answer {
    display: none !important;
}
@media (max-width: 650px) {
    .faq-creative details.faq-item[open] > .faq-answer {
        padding: 0 15px 16px 55px;
    }
}

/* ========================================
   MOBILE MENU: HEADER AND GROUP ICONS
======================================== */

.mobile-nav {
    overscroll-behavior-y: contain;
    scroll-padding-top: 88px;
}

.mobile-nav .mobile-nav-header {
    position: sticky;
    top: 0;
    z-index: 10;

    min-height: 76px;
    background: #ffffff;

    border-bottom: 1px solid var(--border, #e4ebe2);
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.04);
}

.mobile-nav .mobile-nav-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.mobile-nav .mobile-nav-plus,
.mobile-nav .mobile-nav-group.is-open .mobile-nav-plus {
    transform: none;
    transition: background-color 0.2s ease;
}

.mobile-nav .mobile-nav-group.is-open .mobile-nav-plus {
    background: #e5f5d2;
    color: #365f1b;
}

.mobile-nav .mobile-nav-group-trigger:focus-visible,
.mobile-nav .mobile-nav-close:focus-visible {
    outline: 2px solid #4f9b1f;
    outline-offset: 3px;
}

/* WEB SECTION 03D: TECHNICAL SPECIFICATIONS */
.web-comparison .web-tech{margin-top:24px;border:1px solid #d7e4cc;border-radius:16px;background:#fff;overflow:hidden}
.web-comparison .web-tech-trigger{display:flex;align-items:center;gap:16px;padding:22px 24px;cursor:pointer;list-style:none;color:#0b1220;background:linear-gradient(110deg,#f1f8e7,#fff)}
.web-comparison .web-tech-trigger::-webkit-details-marker{display:none}
.web-comparison .web-tech-trigger::marker{content:""}
.web-comparison .web-tech-trigger-icon{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;background:#b7f52a;border-radius:12px;font-size:27px;font-weight:700}
.web-comparison .web-tech-trigger-copy{flex:1;min-width:0}
.web-comparison .web-tech-trigger-copy strong{display:block;font-size:16px;line-height:1.4}
.web-comparison .web-tech-trigger-copy small{display:block;color:#556477;font-size:12px;margin-top:5px;line-height:1.5}
.web-comparison .web-tech-toggle{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:1px solid #cadbbb;border-radius:50%;font-size:24px;line-height:1;color:#365c25}
.web-comparison .web-tech[open] .web-tech-toggle{transform:rotate(45deg)}
.web-comparison .web-tech[open] .web-tech-trigger{border-bottom:1px solid #d7e4cc}
.web-comparison .web-tech-trigger:focus-visible{outline:3px solid #548027;outline-offset:-4px}
.web-comparison .web-tech-body{padding:28px 24px}
.web-comparison .web-tech:not([open])>.web-tech-body{display:none}
.web-comparison .web-tech[open]>.web-tech-body{display:block}
.web-comparison .web-tech-eyebrow{color:#548027;font-size:11px;font-weight:800;letter-spacing:.12em}
.web-comparison .web-tech-intro h3{font-size:25px;letter-spacing:-.03em;line-height:1.25;margin:8px 0 10px}
.web-comparison .web-tech-intro p,.web-comparison .web-tech-footnote{font-size:13px;line-height:1.7;color:#556477;margin:0}
.web-comparison .web-tech-group{margin-top:26px}
.web-comparison .web-tech-group h4{display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 14px}
.web-comparison .web-tech-group h4>span{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#eef6e6;color:#548027;font-size:10px}
.web-comparison .web-tech-table thead th{font-size:14px;padding-block:18px}
.web-comparison .web-tech-table tbody tr:last-child th,.web-comparison .web-tech-table tbody tr:last-child td{border-bottom:0}
.web-comparison .web-tech-footnote{margin-top:22px;font-size:12px}
.web-comparison .web-tech-mobile-hint{display:none}
@media(max-width:800px){.web-comparison .web-tech-body{padding:22px 16px}.web-comparison .web-tech-trigger{padding:18px 16px;gap:12px}.web-comparison .web-tech-trigger-copy strong{font-size:14px}.web-comparison .web-tech-trigger-copy small{font-size:11px}.web-comparison .web-tech-intro h3{font-size:22px}.web-comparison .web-tech-mobile-hint{display:block;font-size:12px;color:#556477;margin:0 0 10px}.web-comparison .web-tech-trigger-icon{width:36px;height:36px}}

/* WEB SECTION 03D: COLLAPSIBLE SPECIFICATION GROUPS */
.web-comparison details.web-tech-group{border:1px solid #dce6e8;border-radius:12px;overflow:hidden;background:#fff;margin-top:16px}
.web-comparison .web-tech-group-trigger{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:58px;padding:14px 16px;color:#172536;font-size:14px;font-weight:750;background:#f8faf6}
.web-comparison .web-tech-group-trigger::-webkit-details-marker{display:none}
.web-comparison .web-tech-group-trigger::marker{content:""}
.web-comparison .web-tech-group-number{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;border-radius:8px;background:#eef6e6;color:#548027;font-size:10px}
.web-comparison .web-tech-group-title{flex:1;min-width:0}
.web-comparison .web-tech-group-toggle{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid #d7e4cc;border-radius:50%;color:#365c25;font-size:20px;line-height:1}
.web-comparison .web-tech-group[open]>.web-tech-group-trigger{border-bottom:1px solid #dce6e8;background:#f1f8e7}
.web-comparison .web-tech-group[open]>.web-tech-group-trigger .web-tech-group-toggle{transform:rotate(45deg)}
.web-comparison .web-tech-group-content{padding:14px}
.web-comparison .web-tech-group:not([open])>.web-tech-group-content{display:none}
.web-comparison .web-tech-group[open]>.web-tech-group-content{display:block}
.web-comparison .web-tech-group-trigger:focus-visible{outline:3px solid #548027;outline-offset:-4px}
.web-comparison .web-tech-group-content .web-comparison-scroll{box-shadow:none;border-radius:10px}
@media(max-width:800px){.web-comparison .web-tech-group-content{padding:10px}.web-comparison .web-tech-group-trigger{padding:12px;font-size:13px}}

/* WEB SECTION 03D: VISUAL RESOURCE SNAPSHOT */
.web-comparison .web-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 22px}
.web-comparison .web-resource-card{min-width:0;padding:23px;border:1px solid #25344b;border-radius:16px;color:#fff;background:radial-gradient(circle at 100% 0,#26384e,transparent 65%),#0b1220}
.web-comparison .web-resource-card--featured{border:2px solid #b7f52a;padding:22px;box-shadow:0 8px 24px #b7f52116}
.web-comparison .web-resource-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.web-comparison .web-resource-card-top h4{margin:0;color:#fff;font-size:17px;font-weight:750}
.web-comparison .web-resource-card-top>span{font-size:8px;line-height:1.5;letter-spacing:.05em;font-weight:800;color:#b7f52a;background:#b7f52a16;border:1px solid #b7f52a35;padding:5px 7px;border-radius:5px}
.web-comparison .web-resource-memory{padding:24px 0 20px}
.web-comparison .web-resource-memory strong{display:block;color:#b7f52a;font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.04em}
.web-comparison .web-resource-memory>span{display:block;margin-top:7px;color:#b8c6d6;font-size:12px}
.web-comparison .web-resource-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:16px 0}
.web-comparison .web-resource-metrics span{display:block;font-size:11px;color:#b8c6d6;margin-bottom:6px}
.web-comparison .web-resource-metrics strong{display:block;font-size:15px;color:#fff;overflow-wrap:anywhere}
.web-comparison .web-resource-card a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:12px;color:#b7f52a;font-size:12px;font-weight:750;text-decoration:none}
.web-comparison .web-resource-card a:hover{text-decoration:underline}
.web-comparison .web-resource-card a:focus-visible{outline:3px solid #b7f52a;outline-offset:3px}
.web-comparison .web-shared-features{padding:20px;border:1px solid #dbe7d1;border-radius:14px;background:#f7faf2}
.web-comparison .web-shared-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.web-comparison .web-shared-heading>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#b7f52a;color:#0b1220;font-weight:800;font-size:13px}
.web-comparison .web-shared-heading h4{margin:0;font-size:15px;color:#172536}
.web-comparison .web-shared-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.web-comparison .web-shared-feature{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:14px 8px;background:#fff;border:1px solid #e0e8d9;border-radius:11px;min-width:0}
.web-comparison .web-shared-feature>span{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#eef6e4;color:#4f7a2d}
.web-comparison .web-shared-feature svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.web-comparison .web-shared-feature strong{font-size:11px;line-height:1.5;color:#253646;overflow-wrap:anywhere}
.web-comparison .web-tech-details-label{margin:28px 0 12px;color:#548027;font-size:10px;font-weight:800;letter-spacing:.12em}
@media(max-width:1000px){.web-comparison .web-shared-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.web-comparison .web-resource-card{padding:18px}.web-comparison .web-resource-card--featured{padding:17px}}
@media(max-width:650px){.web-comparison .web-resource-grid{grid-template-columns:1fr;gap:12px}.web-comparison .web-resource-memory{padding:18px 0}.web-comparison .web-resource-memory strong{font-size:34px}.web-comparison .web-shared-features{padding:16px}.web-comparison .web-shared-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* WEB SECTION 03: MOBILE PLAN COLUMN SNAP */
@media (max-width: 800px) {
    .web-comparison .web-comparison-scroll {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 190px;
        overscroll-behavior-x: contain;
    }
    .web-comparison .web-comparison-table thead th:not(:first-child) {
        scroll-snap-align: start;
    }
    .web-comparison .web-comparison-table thead th:last-child {
        scroll-snap-align: end;
    }
}
@media (max-width: 480px) {
    .web-comparison .web-comparison-scroll {
        scroll-padding-left: 156px;
    }
}

/* WEB SECTION 03D: FIT ONE COMPLETE PLAN BESIDE MOBILE LABELS */
@media (max-width: 800px) {
    .web-comparison .web-tech-table {
        width: calc(300% - 380px);
        min-width: 0;
    }
    .web-comparison .web-tech-table .web-comparison-value {
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }
}
@media (max-width: 480px) {
    .web-comparison .web-tech-table {
        width: calc(300% - 312px);
    }
    .web-comparison .web-tech-table td {
        padding-inline: 8px;
    }
}

/* Technical specifications: compact spacing */
.web-comparison .web-tech-table th,
.web-comparison .web-tech-table td {
    padding: 14px 16px;
}

.web-comparison .web-tech-table thead th {
    padding-block: 14px;
}

.web-comparison .web-tech-table .wc-feature-hint {
    margin-top: 3px;
    line-height: 1.4;
}

.web-comparison .web-tech-table .web-comparison-value {
    font-size: 15px;
}

@media (max-width: 800px) {
    .web-comparison .web-tech-table th,
    .web-comparison .web-tech-table td {
        padding: 12px 10px;
    }
}

/* Mobile technical comparison: visible plan choices */
.web-tech-plan-picker {
    display: none;
}

@media (max-width: 800px) {
    .web-comparison .web-tech-plan-picker {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid #dce6d5;
        border-radius: 12px;
        background: #f3f7ef;
    }

    .web-tech-plan-picker button {
        min-height: 44px;
        padding: 8px 4px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #42523e;
        font-size: 13px;
        font-weight: 750;
        cursor: pointer;
    }

    .web-tech-plan-picker button[aria-pressed="true"] {
        background: #b7f52a;
        color: #0b1220;
        box-shadow: 0 2px 6px #17253612;
    }

    .web-tech-plan-picker button:focus-visible {
        outline: 2px solid #365c25;
        outline-offset: 2px;
    }
}


/* Website journey: icons and useful plan details */
.web-comparison-guidance .web-guidance-card {
    display: flex;
    flex-direction: column;
}

.web-comparison-guidance .wc-journey-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #c9e3da;
    border-radius: 14px;
    background: #eef8f4;
    color: #00857c;
}

.web-comparison-guidance .wc-journey-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.web-comparison-guidance .web-guidance-card--featured
.wc-journey-icon {
    background: #b7f52a;
    border-color: #b7f52a;
    color: #0b1220;
}

.web-comparison-guidance .wc-journey-allowances {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 0 20px;
    padding-top: 16px;
}

.web-comparison-guidance .wc-journey-allowances span {
    padding: 6px 10px;
    border: 1px solid #dce7e3;
    border-radius: 8px;
    background: #f5faf8;
    color: #29463e;
    font-size: 12px;
    font-weight: 700;
}

.web-comparison-guidance .web-guidance-card--featured
.wc-journey-allowances span {
    background: #fff;
}

.web-comparison-guidance .web-guidance-card > a {
    margin-top: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.web-comparison-guidance .web-guidance-card > a:focus-visible {
    outline: 2px solid #00857c;
    outline-offset: 4px;
    border-radius: 4px;
}
/* VISUAL HOSTING SECTIONS: scoped, mobile-first, no external assets */
.lv-section{padding:80px 0;background:#f7faf6;color:var(--navy,#0b1220)}
.lv-section *{box-sizing:border-box}.lv-heading{max-width:760px;margin:0 auto 36px;text-align:center}.lv-heading h2{font-size:clamp(28px,3.6vw,44px);line-height:1.15;letter-spacing:-1.3px;margin:16px 0}.lv-heading h2 span{color:#4b681e}.lv-heading p{color:#58645d;max-width:640px;margin:0 auto}.lv-dashboard{border:1px solid #dbe4d7;border-radius:24px;overflow:hidden;background:white;box-shadow:0 24px 60px #0b122010}.lv-browser{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;background:#0b1220;color:#b7f52a;font-size:11px;font-weight:750;letter-spacing:1px}.lv-dashboard-body{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:32px}.lv-label{display:block;font-size:11px;letter-spacing:1.4px;font-weight:800;color:#596a45}.lv-site-preview{margin:18px 0 24px;border:1px solid #dbe4d7;border-radius:14px;overflow:hidden;background:#f6f9f0}.lv-mini-nav{display:flex;justify-content:space-between;padding:14px 18px;font-size:10px;font-weight:800;background:white}.lv-mini-nav span{font-weight:500}.lv-mini-hero{display:flex;justify-content:space-between;align-items:center;padding:30px 22px;gap:12px}.lv-mini-hero strong{font-size:clamp(22px,3vw,32px);line-height:1.1;display:block}.lv-mini-button{display:inline-block;background:#0b1220;color:white;padding:6px 16px;border-radius:6px;font-size:10px;margin-top:18px}.lv-art{width:100px;aspect-ratio:1;border-radius:26px;background:#b7f52a;display:grid;place-items:center;font-size:74px;color:#0b1220;transform:rotate(-9deg)}.lv-mini-lines{display:flex;gap:10px;padding:0 22px 20px}.lv-mini-lines i{height:28px;flex:1;border-radius:6px;background:#e3ebd5}.lv-section h3{font-size:20px;line-height:1.3;margin:8px 0}.lv-section p{font-size:15px;line-height:1.65}.lv-site p,.lv-essential p{color:#59645d;margin:8px 0}.lv-note{display:block;color:#68736b;font-size:12px;line-height:1.5}.lv-essentials{display:grid;gap:14px}.lv-essential{display:flex;gap:16px;padding:20px;background:#f7faf4;border:1px solid #e2e9dc;border-radius:16px}.lv-icon{display:grid;place-items:center;flex:0 0 40px;height:40px;background:#b7f52a;border-radius:12px}.lv-icon svg{width:24px;height:24px}.lv-chip{display:inline-block;font-size:11px;font-weight:750;border:1px solid #d9e6c7;border-radius:20px;padding:4px 10px;background:white}.lv-dashboard-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 32px;background:#0b1220;color:white;font-weight:750}.lv-dashboard-footer small{display:block;font-size:12px;color:#bdc6bf;font-weight:400;margin-top:4px}.lv-dashboard-footer a{color:#b7f52a;white-space:nowrap}.lv-section a:focus-visible,.lv-section summary:focus-visible{outline:3px solid #4f9b1f;outline-offset:5px}.lv-tools-section{background:white}.lv-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lv-tool{padding:26px;border:1px solid #dbe4d7;border-radius:24px;background:#f7faf4}.lv-tool>p{color:#58645d}.lv-tool-visual{height:230px;border-radius:16px;background:linear-gradient(135deg,#e8f7cf,#f4f8ec);display:flex;align-items:center;padding:24px;gap:12px;margin-bottom:24px;overflow:hidden}.lv-builder-sidebar{font-size:22px;line-height:1.6;background:white;border-radius:10px;padding:12px;box-shadow:0 8px 24px #0b122012}.lv-builder-canvas{position:relative;background:white;border:1px solid #dce8ce;border-radius:10px;padding:20px;flex:1}.lv-builder-canvas>span:first-child{font-size:9px;letter-spacing:2px}.lv-builder-canvas strong{display:block;font-size:23px;line-height:1.15;margin:12px 0}.lv-builder-block{font-size:10px;padding:14px;border:1px dashed #6b9c2b;background:#f0f8e5;border-radius:6px}.lv-builder-cursor{position:absolute;right:6px;bottom:-14px;border-radius:7px;background:#b7f52a;padding:5px 8px;font-size:10px;font-weight:750}.lv-tool-dark{background:#0b1220;color:white;border-color:#0b1220}.lv-tool-dark .lv-label{color:#b7f52a}.lv-tool-dark>p{color:#c6cfc9}.lv-control{display:block;background:#17243a;color:white}.lv-control>span{display:block;font-size:10px;letter-spacing:1.5px;margin-bottom:20px;color:#b7f52a}.lv-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lv-control-grid>div{display:flex;align-items:center;gap:12px;background:#23324a;border:1px solid #374760;padding:16px;border-radius:10px}.lv-control svg{width:22px;height:22px;color:#b7f52a;flex-shrink:0}.lv-control strong{font-size:12px}.lv-tool-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.lv-tool-tags span{font-size:12px;padding:5px 10px;border-radius:8px;background:#e8f0dd;font-weight:700}.lv-tool-dark .lv-tool-tags span{background:#23324a;color:#d7edb1}.lv-tool details{border-top:1px solid #dbe4d7;padding-top:16px}.lv-tool-dark details{border-color:#374760}.lv-tool summary{cursor:pointer;font-weight:700;font-size:14px;min-height:30px}.lv-tool details p{font-size:14px;margin:10px 0 0}.lv-tools-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}.lv-tools-bottom .btn{flex-shrink:0}
@media(max-width:760px){.lv-section{padding:52px 0}.lv-dashboard-body,.lv-tools-grid{grid-template-columns:1fr}.lv-dashboard-body{padding:20px;gap:24px}.lv-browser{padding:14px;font-size:9px;letter-spacing:.5px}.lv-browser>span:last-child{display:none}.lv-dashboard-footer,.lv-tools-bottom{align-items:flex-start;flex-direction:column;padding:20px}.lv-tools-bottom{padding:0}.lv-tool{padding:20px}.lv-tool-visual{padding:16px;height:220px}.lv-heading h2{letter-spacing:-.7px}.lv-essential{padding:16px}.lv-control-grid>div{padding:12px;gap:8px}.lv-section h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.lv-section *{scroll-behavior:auto;transition:none}}

/* VISUAL SECTIONS V2: icon and action finishing */
.lv-icon{position:relative;flex-basis:52px;width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#d8ff80 0%,#b7f52a 50%,#8fc92c 100%);border:1px solid #9bd239;box-shadow:inset 0 2px 1px #ffffffa6,inset 0 -2px 2px #43770924,0 5px 0 #739d2520,0 10px 20px #8ab62a26;color:#16240c}
.lv-icon svg{width:28px;height:28px;filter:drop-shadow(0 1px 0 #ffffff80)}
.lv-essential{border-color:#dce6d1;box-shadow:0 5px 14px #0b122005;transition:box-shadow .2s ease,border-color .2s ease}
.lv-essential:hover{border-color:#bad488;box-shadow:0 10px 24px #0b12200b}
.lv-chip{background:#edf7df;border-color:#d4e9b5;color:#345115;font-weight:800;padding:5px 12px}
.lv-dashboard-footer a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:12px 20px;border:1px solid #d4ff73;border-radius:13px;background:linear-gradient(135deg,#d0ff65,#b7f52a 60%,#a6e132);color:#132008;box-shadow:inset 0 1px 0 #ffffffa6,0 6px 18px #b7f52a1a;font-size:14px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease}
.lv-dashboard-footer a>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#17300912;font-size:18px}
.lv-tools-bottom .btn{min-height:52px;padding:13px 24px;border:1px solid #a8d944;border-radius:14px;background:linear-gradient(135deg,#d0ff65,#b7f52a 60%,#a6e132);color:#132008;font-weight:800;box-shadow:inset 0 1px 0 #ffffffb3,0 7px 18px #729f2426;transition:transform .2s ease,box-shadow .2s ease}
.lv-dashboard-footer a:hover,.lv-tools-bottom .btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffffa6,0 10px 24px #729f2433}
.lv-dashboard-footer a:active,.lv-tools-bottom .btn:active{transform:translateY(0)}
.lv-control-grid>div{border-color:#42536d;background:linear-gradient(145deg,#2b3c56,#203049);box-shadow:inset 0 1px 0 #ffffff0a,0 5px 12px #00000014}
.lv-control svg{box-sizing:content-box;width:24px;height:24px;padding:9px;background:linear-gradient(145deg,#d0ff65,#a6e132);color:#16240c;border:1px solid #c5f35c;border-radius:12px;box-shadow:inset 0 1px 0 #ffffffa6,0 4px 10px #00000026}
.lv-tool-tags span{border:1px solid #d7e5c5;box-shadow:inset 0 1px 0 #ffffff80}
.lv-tool-dark .lv-tool-tags span{border-color:#405335;box-shadow:none}
.lv-tool summary{padding:11px 14px;border:1px solid #d7e5c5;border-radius:10px;background:#eef5e6;min-height:46px;list-style-position:inside}
.lv-tool-dark summary{background:#203049;border-color:#42536d;color:#edf7df}
.lv-tool details[open] summary{border-color:#8cb644}
@media(max-width:760px){.lv-icon{flex-basis:46px;width:46px;height:46px;border-radius:14px}.lv-icon svg{width:25px;height:25px}.lv-dashboard-footer a,.lv-tools-bottom .btn{width:100%}.lv-control-grid>div{gap:8px}.lv-control svg{width:20px;height:20px;padding:7px}}
@media(prefers-reduced-motion:reduce){.lv-essential,.lv-dashboard-footer a,.lv-tools-bottom .btn{transition:none}.lv-dashboard-footer a:hover,.lv-tools-bottom .btn:hover{transform:none}}

/* ========================================
   WEB SECTIONS 02–03: COORDINATED PLAN STYLING
   Scoped overrides preserve existing billing and mobile controls.
========================================= */
#web-pricing .web-plan-card {background:#fff;border-color:#dce6d5;box-shadow:0 10px 28px #0b122006;}
#web-pricing .web-plan-card--featured {background:linear-gradient(180deg,#f1fbdc,#fafff2);border-color:#87bb36;box-shadow:0 14px 34px #0b12200c;}
#web-pricing .web-plan-pricing {background:#f7f9f3;border:1px solid #e0e8d8;border-radius:12px;padding:18px 14px;}
#web-pricing .web-plan-card--featured .web-plan-pricing {background:#eaf7cc;border-color:#c4df95;}
#web-pricing .web-plan-price-line {justify-content:center;align-items:baseline;flex-wrap:wrap;}
#web-pricing .web-plan-price-line::before,#web-pricing .web-plan-pricing::before {content:none!important;display:none!important;}
#web-pricing .web-plan-price {font-size:clamp(2rem,3vw,2.65rem);line-height:1.15;}
#web-pricing .web-plan-currency {align-self:baseline;padding-top:0;font-size:1.1rem;}
#web-pricing .web-plan-billing {text-align:center;color:#526047;line-height:1.6;}
#web-pricing .web-plan-featured-label {background:#b7f52a;color:#0b1220;}
#web-pricing .web-plan-button {background:linear-gradient(120deg,#d3ff57,#b7f52a);color:#0b1220;border-color:#a0d32f;}
#web-pricing .web-plan-button:hover {background:linear-gradient(120deg,#c7f84a,#a9e62c);}
#web-pricing .web-plan-button:focus-visible {outline:3px solid #0b1220;outline-offset:4px;}
#web-comparison {--wc-brand:#466f1d;--wc-tint:#f1f8e6;--wc-line:#dce6d5;background:#f8faf6;}
#web-comparison .web-comparison-table .wc-featured {background:#f1f8e6;}
#web-comparison .web-comparison-table thead .wc-featured {box-shadow:inset 0 4px 0 #b7f52a;}
#web-comparison .web-comparison-highlight {background:#e0f3ba;color:#355719;}
#web-comparison .web-comparison-plan-link {border-color:#c8d9b5;color:#355719;background:#fff;}
#web-comparison .wc-featured .web-comparison-plan-link {background:#0b1220;border-color:#0b1220;color:#fff;}
#web-comparison .web-comparison-plan-link:hover {box-shadow:0 4px 12px #0b122012;}
#web-comparison .web-guidance-card--featured {background:#f1f8e6;border-color:#c8d9b5;}
#web-comparison .wc-guide-subtitle,#web-comparison .web-guidance-card>a {color:#355719;}
#web-comparison .wc-journey-icon {background:#eff7e5;border-color:#d5e4c4;color:#466f1d;}
#web-comparison .wc-journey-allowances span {background:#f5f9ef;border-color:#dce6d5;color:#355719;}
#web-comparison a:focus-visible {outline-color:#466f1d;}
@media(max-width:650px){#web-pricing .web-plan-pricing{padding:16px 12px;}#web-pricing .web-plan-price{font-size:2.2rem;}}


/* PRICING: FINAL CARD COLOURS */
#web-pricing .web-plan-card:not(.web-plan-card--featured) {
    background: #fff !important;
}

#web-pricing .web-plan-card--featured {
    background: #f3fae8 !important;
}

@media (max-width: 650px) {
    #web-pricing .web-plan-pricing {
        margin-bottom: 0;
    }

    #web-pricing .web-plan-features {
        margin-top: 22px;
        padding-top: 0;
    }

    #web-pricing .web-plan-features-title {
        margin-top: 0;
        margin-bottom: 12px;
    }
}

/* HOMEPAGE VISUAL STORIES — scoped to the two homepage sections */
.lh-story { padding: 96px 0; }
.lh-story .lh-story-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(32px,5vw,76px); position: relative; z-index: 1; }
.lh-story .lh-story-copy,.lh-story .lh-foundation,.lh-story .lh-vps-map { min-width: 0; }
.lh-story .lh-kicker { display: block; color:#477b17; font-size:12px; font-weight:800; letter-spacing:.14em; margin-bottom:20px; }
.lh-story .lh-story-copy h2 { margin:0; color:#0b1728; font-size:clamp(32px,3.65vw,52px); line-height:1.12; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
.lh-story .lh-story-copy h2 span { color:#43871e; }
.lh-story .lh-story-copy>p { color:#59675e; font-size:17px; line-height:1.75; max-width:47ch; margin:24px 0 0; }
.lh-story .lh-icon { width:24px; height:24px; flex-shrink:0; display:block; }
.lh-story .lh-icon-tile { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid #b8dc82; border-radius:13px; color:#172b38; background:linear-gradient(135deg,#ecffb7,#bcf536); box-shadow:0 4px 10px #19381408; }
.lh-story .lh-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:32px 0; list-style:none; gap:12px; }
.lh-story .lh-journey li { position:relative; border-top:2px solid #dce8cd; padding-top:16px; }
.lh-story .lh-journey li>span { display:inline-grid; place-items:center; width:28px; height:28px; background:#ebf7d7; border-radius:50%; color:#426f20; font-size:11px; font-weight:800; margin-bottom:10px; }
.lh-story .lh-journey strong,.lh-story .lh-journey small { display:block; }
.lh-story .lh-journey strong { color:#142337; font-size:16px; }
.lh-story .lh-journey small { color:#61705f; font-size:12px; line-height:1.5; margin-top:4px; }
.lh-story .lh-story-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:30px; }
.lh-story .lh-story-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:12px 20px; background:linear-gradient(120deg,#d4ff47,#a7e526); color:#101c0b; font-weight:800; font-size:14px; text-decoration:none; border:1px solid #9ed42d; border-radius:12px; box-shadow:0 8px 20px #8daf2426; transition:transform .18s,box-shadow .18s; }
.lh-story .lh-story-btn .lh-icon,.lh-story .lh-story-link .lh-icon { width:18px; height:18px; }
.lh-story .lh-story-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px #8daf243b; }
.lh-story .lh-story-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:#283d28; font-weight:700; text-decoration:none; }
.lh-story .lh-story-link:hover { text-decoration:underline; }
.lh-story a:focus-visible { outline:3px solid #39811e; outline-offset:5px; }
.lh-story .lh-foundation { position:relative; padding:28px; border:1px solid #dce6d5; border-radius:28px; background:radial-gradient(ellipse at 90% 0%,#e7fac8,transparent 60%),#f3f7ef; }
.lh-story .lh-browser { position:relative; background:#fff; border:1px solid #dae4d3; border-radius:16px; box-shadow:0 15px 35px #253d2110; overflow:hidden; }
.lh-story .lh-browser-bar { display:flex; align-items:center; gap:20px; padding:13px 16px; background:#fbfdf9; border-bottom:1px solid #e8eee1; font-size:11px; color:#647459; }
.lh-story .lh-browser-bar>span:last-child { display:flex; gap:6px; align-items:center; }
.lh-story .lh-browser-bar .lh-icon { width:13px;height:13px; }
.lh-story .lh-browser-dots { display:flex;gap:5px; }
.lh-story .lh-browser-dots i { width:6px;height:6px;background:#c6d4bb;border-radius:50%; }
.lh-story .lh-site-preview { display:flex; align-items:center; gap:20px; padding:24px 22px 18px; }
.lh-story .lh-site-symbol { display:grid;place-items:center; width:68px;height:68px;flex-shrink:0; border-radius:20px;background:#11243b;color:#c7fc41; }
.lh-story .lh-site-symbol .lh-icon { width:38px;height:38px; }
.lh-story .lh-site-preview small,.lh-story .lh-site-preview strong,.lh-story .lh-site-preview div>span { display:block; }
.lh-story .lh-site-preview small { font-size:10px;letter-spacing:.13em;color:#648146;font-weight:800; }
.lh-story .lh-site-preview strong { font-size:26px;line-height:1.3;color:#13243b;margin:5px 0;letter-spacing:-.025em; }
.lh-story .lh-site-preview div>span { color:#697461;font-size:11px; }
.lh-story .lh-site-blocks { display:flex;gap:8px;padding:0 22px 22px; }
.lh-story .lh-site-blocks span { height:9px;border-radius:6px;background:#ecf2e6;flex:1; }
.lh-story .lh-site-blocks span:first-child { background:#c9f467;flex:1.5; }
.lh-story .lh-foundation-connector { height:22px;width:2px;margin:auto;background:#a5bc89; }
.lh-story .lh-foundation-layer { display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #dce5d4;border-radius:14px;padding:14px 16px;margin-bottom:9px;box-shadow:0 5px 10px #24381304; }
.lh-story .lh-foundation-layer strong,.lh-story .lh-foundation-layer div>span { display:block; }
.lh-story .lh-foundation-layer strong { font-size:15px;color:#15283c; }
.lh-story .lh-foundation-layer div>span { font-size:11px;color:#61705d;margin-top:2px; }
.lh-story .lh-layer-label { margin-left:auto;font-size:9px;letter-spacing:.1em;color:#66804e;font-weight:800; }
.lh-story .lh-foundation-layer--lime { background:#d3fa85;border-color:#b9e374; }
.lh-story .lh-foundation-layer--lime .lh-icon-tile { background:#17332e;color:#d4ff77;border-color:#17332e; }
.lh-story .lh-visual-caption { text-align:center;font-size:11px;line-height:1.6;color:#647657;margin:20px 0 0; }
.lh-story--vps .lh-kicker { color:#c2f34d; }
.lh-story--vps .lh-story-copy h2 { color:#fff; }
.lh-story--vps .lh-story-copy h2 span { color:#c6f94b; }
.lh-story--vps .lh-story-copy>p { color:#b9c7d7; }
.lh-story--vps .lh-story-link { color:#deebf3; }
.lh-story--vps a:focus-visible { outline-color:#c7fc41; }
.lh-story .lh-vps-reasons { padding:0;margin:30px 0;list-style:none;display:grid;gap:20px; }
.lh-story .lh-vps-reasons li { display:flex;gap:14px;align-items:center; }
.lh-story .lh-vps-reasons strong,.lh-story .lh-vps-reasons div>span { display:block; }
.lh-story .lh-vps-reasons strong { color:#f4f8ff;font-size:15px; }
.lh-story .lh-vps-reasons div>span { color:#b9c7d7;font-size:13px;margin-top:3px; }
.lh-story .lh-vps-reasons .lh-icon-tile { background:#182e39;border-color:#365544;color:#c6f94b;box-shadow:none; }
.lh-story .lh-vps-map { padding:28px;border:1px solid #2b4054;border-radius:28px;background:radial-gradient(ellipse at 50% 35%,#a6de281a,transparent 65%),#102033;box-shadow:0 20px 60px #0002; }
.lh-story .lh-apps { display:flex;justify-content:center;gap:9px;flex-wrap:wrap; }
.lh-story .lh-apps span { padding:7px 14px;border:1px solid #3a5063;background:#1c3043;border-radius:100px;color:#dce7f1;font-size:11px;font-weight:600; }
.lh-story .lh-map-line { height:24px;width:1px;background:#709344;margin:auto; }
.lh-story .lh-server-core { position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:24px 12px;border:1px solid #779b37;border-radius:18px;background:linear-gradient(140deg,#294031,#172c34); }
.lh-story .lh-core-icon { display:grid;place-items:center;width:72px;height:72px;background:linear-gradient(140deg,#daff69,#a6e625);border-radius:20px;color:#152d2d;margin-bottom:8px;box-shadow:0 8px 30px #b8f13718; }
.lh-story .lh-core-icon .lh-icon { width:40px;height:40px; }
.lh-story .lh-server-core small { font-size:9px;font-weight:800;letter-spacing:.14em;color:#c6ef89; }
.lh-story .lh-server-core strong { font-size:28px;line-height:1.3;color:#fff;letter-spacing:-.03em; }
.lh-story .lh-server-core>span:last-child { font-size:12px;color:#bbcbbd; }
.lh-story .lh-resource-grid { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:28px; }
.lh-story .lh-resource-grid:before { content:'';position:absolute;top:0;left:50%;height:15px;width:1px;background:#709344; }
.lh-story .lh-resource { position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 6px;border:1px solid #344858;border-radius:12px;background:#192b3e; }
.lh-story .lh-resource:before { content:'';position:absolute;top:-15px;height:14px;width:1px;background:#709344; }
.lh-story .lh-resource-grid:after { content:'';position:absolute;top:14px;left:12%;right:12%;height:1px;background:#709344; }
.lh-story .lh-resource .lh-icon-tile { width:34px;height:34px;background:#243c3a;border-color:#4c6445;color:#d0fa79;border-radius:10px;box-shadow:none; }
.lh-story .lh-resource .lh-icon { width:20px;height:20px; }
.lh-story .lh-resource strong { font-size:12px;color:#fff;margin-top:10px; }
.lh-story .lh-resource>span:last-child { font-size:9px;color:#b4c4d5;line-height:1.5;margin-top:4px; }
.lh-story--vps .lh-visual-caption { color:#b7c8da; }
@media (max-width:1000px) { .lh-story .lh-story-layout { gap:30px; } .lh-story .lh-foundation,.lh-story .lh-vps-map { padding:20px; } .lh-story .lh-layer-label { display:none; } .lh-story .lh-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } .lh-story .lh-resource-grid:after,.lh-story .lh-resource:before { display:none; } .lh-story .lh-resource-grid:before { height:28px; } }
@media (max-width:760px) { .lh-story { padding:60px 0; } .lh-story .lh-story-layout { grid-template-columns:minmax(0,1fr);gap:36px; } .lh-story .lh-story-copy h2 { font-size:clamp(30px,6.7vw,44px); } .lh-story .lh-story-copy>p { font-size:16px;margin-top:18px; } .lh-story .lh-kicker { font-size:10px;margin-bottom:16px; } .lh-story .lh-foundation,.lh-story .lh-vps-map { max-width:550px;width:100%;margin:0 auto; } .lh-story .lh-story-actions { gap:8px 18px; } .lh-story .lh-vps-reasons { gap:18px; } }
@media (max-width:380px) { .lh-story .lh-foundation,.lh-story .lh-vps-map { padding:16px; } .lh-story .lh-foundation-layer { padding:12px;gap:10px; } .lh-story .lh-site-preview { padding:20px 16px 16px;gap:12px; } .lh-story .lh-site-symbol { width:50px;height:50px;border-radius:14px; } .lh-story .lh-site-symbol .lh-icon { width:30px;height:30px; } .lh-story .lh-site-preview strong { font-size:22px; } .lh-story .lh-foundation-layer div>span { font-size:10px; } .lh-story .lh-apps { gap:6px; } .lh-story .lh-apps span { padding:6px 10px; } }
@media (prefers-reduced-motion:reduce) { .lh-story .lh-story-btn { transition:none; } .lh-story .lh-story-btn:hover { transform:none; } }

/* HOMEPAGE: BUILD, MANAGE AND INSTALL — append to main.css */
.lumo-tools{padding:80px 0;background:#f8faf5;color:#11243a}
.lumo-tools *{box-sizing:border-box}
.lumo-tools-heading{max-width:720px;margin:0 auto 36px;text-align:center}
.lumo-tools-kicker{display:block;color:#477722;font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:12px}
.lumo-tools-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.04em;margin:0}
.lumo-tools-heading h2 span{color:#44831f}
.lumo-tools p{font-size:15px;line-height:1.7;color:#5c6a61;margin:14px 0 0}
.lumo-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lumo-tool-card{min-width:0;overflow:hidden;background:white;border:1px solid #dfe7d8;border-radius:24px}
.lumo-editor,.lumo-panel{min-height:330px;padding:24px;background:radial-gradient(ellipse at 90% 5%,#dff8b1,transparent 70%),#eef5e6}
.lumo-editor-top{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #dce5d4;border-radius:12px 12px 0 0;font-size:11px}
.lumo-editor-top>span:first-child{display:flex;gap:4px}
.lumo-editor-top i{width:5px;height:5px;background:#b7cba1;border-radius:50%}
.lumo-publish{margin-left:auto;background:#c9f746;color:#163021;padding:5px 9px;border-radius:6px;font-weight:800}
.lumo-editor-body{position:relative;display:flex;border:1px solid #dce5d4;border-top:0;background:#fff;border-radius:0 0 12px 12px;padding:12px;gap:12px}
.lumo-editor-sidebar{display:flex;flex-direction:column;gap:9px;color:#37572c;padding:8px 0;flex:0 0 28px;text-align:center}
.lumo-editor-sidebar span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #dce8d3;border-radius:7px;font-size:17px;font-weight:700}
.lumo-editor-canvas{flex:1;min-width:0;background:#f7faf1;border:1px dashed #a1c776;border-radius:8px;padding:18px}
.lumo-demo-brand{font-size:8px;letter-spacing:.12em;font-weight:800;color:#486733;display:block}
.lumo-editor-canvas>strong{display:block;font-size:25px;line-height:1.15;letter-spacing:-.03em;margin:12px 0 8px}
.lumo-demo-copy{display:block;font-size:10px;color:#607352}
.lumo-demo-button{display:inline-block;font-size:9px;font-weight:800;padding:6px 10px;background:#c8f64f;border-radius:6px;margin-top:12px}
.lumo-demo-blocks{display:flex;gap:6px;margin-top:16px}
.lumo-demo-blocks i{flex:1;height:14px;background:#e0ebd1;border-radius:4px}
.lumo-colour-palette{display:flex;align-items:center;gap:4px;position:absolute;right:8px;bottom:18px;padding:8px;background:#fff;border:1px solid #dce5d4;border-radius:8px;box-shadow:0 6px 12px #1232120a}
.lumo-colour-palette span{font-size:7px;margin-right:4px;color:#52733b;font-weight:800}
.lumo-colour-palette i{width:13px;height:13px;border-radius:3px;background:#c8f64f}
.lumo-colour-palette i:nth-last-child(2){background:#11243a}.lumo-colour-palette i:last-child{background:#e5eed8}
.lumo-build-steps{display:flex;justify-content:space-between;list-style:none;margin:16px 0 0;padding:0;gap:10px;font-size:11px;font-weight:700}
.lumo-build-steps li{display:flex;align-items:center;gap:7px}
.lumo-build-steps b{display:grid;place-items:center;background:#fff;width:24px;height:24px;border-radius:50%;font-size:9px;color:#477722}
.lumo-panel{background:radial-gradient(ellipse at 80% 0%,#b8e94318,transparent 70%),#122438;color:#fff}
.lumo-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lumo-panel-top strong{font-size:24px;letter-spacing:-.03em}.lumo-panel-top>span{font-size:8px;letter-spacing:.1em;color:#c1d0df}
.lumo-panel-welcome{margin:20px 0}.lumo-panel-welcome>span{display:block;font-size:8px;letter-spacing:.12em;color:#c8f64f;font-weight:800}
.lumo-panel-welcome strong{display:block;font-size:19px;margin-top:7px;line-height:1.3}
.lumo-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lumo-panel-grid>div{padding:12px;border:1px solid #385063;border-radius:10px;background:#1b3045;min-width:0}
.lumo-panel-grid svg{display:block;width:23px;height:23px;fill:none;stroke:#c8f64f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:7px}
.lumo-panel-grid strong{display:block;font-size:12px}.lumo-panel-grid span{display:block;color:#c1d0df;font-size:10px;margin-top:2px}
.lumo-tools .lumo-illustration-note{color:#bacbd7;font-size:10px;margin-top:12px}
.lumo-tool-copy{padding:28px}.lumo-tool-copy h3,.lumo-app-strip h3{font-size:24px;line-height:1.25;letter-spacing:-.025em;margin:0}
.lumo-tool-copy ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.lumo-tool-copy li{display:flex;align-items:center;gap:12px;background:#f7f9f4;padding:12px;border-radius:12px}
.lumo-tool-symbol{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;background:linear-gradient(140deg,#e3ff98,#b8ec37);border:1px solid #bfdc85;border-radius:10px;font-size:20px;font-weight:700;color:#12312d}
.lumo-tool-copy li strong{display:block;font-size:14px}.lumo-tool-copy li div>span{display:block;font-size:12px;color:#5c6a61;margin-top:2px}
.lumo-app-strip{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:24px;padding:28px;border:1px solid #dce7cf;border-radius:20px;background:#eff7e5}
.lumo-install-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0;list-style:none}
.lumo-install-steps li{border-top:2px solid #b9d38e;padding-top:12px}.lumo-install-steps span{display:block;font-size:11px;font-weight:800;color:#52752c;margin-bottom:8px}.lumo-install-steps strong{font-size:12px;display:block;line-height:1.5}
.lumo-tools-bottom{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}.lumo-tools-bottom p{margin:0}.lumo-tools-bottom a{min-height:48px;gap:12px}
@media(max-width:760px){.lumo-tools{padding:48px 0}.lumo-tools-heading{margin-bottom:24px;text-align:left}.lumo-tools-grid{grid-template-columns:minmax(0,1fr);gap:20px}.lumo-editor,.lumo-panel{padding:18px;min-height:0}.lumo-tool-copy{padding:22px}.lumo-tool-copy h3,.lumo-app-strip h3{font-size:22px}.lumo-app-strip{grid-template-columns:minmax(0,1fr);padding:22px;gap:22px}.lumo-tools-bottom{justify-content:flex-start}.lumo-editor-canvas>strong{font-size:23px}}
@media(max-width:380px){.lumo-editor,.lumo-panel{padding:14px}.lumo-editor-top{gap:7px;padding:10px;font-size:10px}.lumo-editor-body{gap:8px;padding:8px}.lumo-editor-canvas{padding:14px}.lumo-editor-canvas>strong{font-size:21px}.lumo-tool-copy{padding:18px}}

/* V2: WIDE PRODUCT STORIES — no repeated feature-card columns */
.lumo-tools-v2{background:#fff;padding:80px 0}
.lumo-tools-v2 .lumo-tools-heading{margin-bottom:48px}
.lumo-wide-tool{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;gap:0 54px;align-items:center;padding:40px 0 56px;position:relative}
.lumo-wide-heading{grid-column:1;grid-row:1;align-self:end}
.lumo-wide-heading h3{font-size:clamp(30px,3.3vw,44px);line-height:1.12;letter-spacing:-.04em;margin:0;color:#11243a}
.lumo-wide-heading h3 span{color:#438222}
.lumo-wide-copy{grid-column:1;grid-row:2;align-self:start;padding-top:8px}
.lumo-wide-copy>p{max-width:42ch;font-size:16px}
.lumo-wide-copy ul{list-style:none;padding:0;margin:24px 0;display:grid;gap:18px}
.lumo-wide-copy li{display:flex;gap:12px;align-items:center}
.lumo-wide-copy li>span{width:40px;height:40px;flex-shrink:0;border-radius:12px;background:#eff8df;border:1px solid #d6e7be;display:grid;place-items:center;color:#407c21}
.lumo-wide-copy svg{width:22px;height:22px}
.lumo-wide-copy strong{display:block;font-size:14px}
.lumo-wide-copy small{display:block;font-size:13px;color:#5c6a61;margin-top:3px;line-height:1.5}
.lumo-tools-link{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:12px 18px;border-radius:12px;background:linear-gradient(120deg,#d4ff47,#a7e526);font-size:14px;font-weight:800;color:#142714;text-decoration:none;border:1px solid #a8d957}
.lumo-tools-link:hover{background:#c6f746}.lumo-tools-link:focus-visible{outline:3px solid #34741e;outline-offset:5px}
.lumo-wide-visual{grid-column:2;grid-row:1 / span 2;position:relative;min-width:0;padding:50px 34px 40px;isolation:isolate}
.lumo-scene-halo{position:absolute;inset:8px 0;border-radius:42% 58% 52% 48%;background:radial-gradient(ellipse at 50% 50%,#d6fba0,#f2f8e8 65%,#fff 75%);z-index:-1}
.lumo-builder-scene .lumo-editor{padding:0;min-height:0;background:none;position:relative;transform:rotate(-2deg);box-shadow:0 18px 35px #24471912;border-radius:14px}
.lumo-builder-scene .lumo-editor-top{padding:14px}
.lumo-builder-scene .lumo-editor-body{padding:16px;min-height:260px}
.lumo-builder-scene .lumo-editor-sidebar svg{width:18px;height:18px}
.lumo-builder-scene .lumo-editor-canvas{position:relative;overflow:hidden;padding:24px;min-height:240px;background:#f5f8f0}
.lumo-builder-scene .lumo-editor-canvas>strong{font-size:32px;max-width:75%;position:relative;z-index:1}
.lumo-builder-scene .lumo-demo-copy{max-width:65%;position:relative;z-index:1}
.lumo-builder-scene .lumo-demo-button{position:relative;z-index:1}
.lumo-builder-scene .lumo-demo-blocks{max-width:70%;margin-top:24px}
.lumo-demo-art{position:absolute;right:-12px;bottom:24px;width:95px;height:145px;transform:rotate(-8deg)}
.lumo-demo-art>span{position:absolute;width:70px;height:95px;background:#a6cf75;border-radius:50px 50px 14px 14px;right:3px;top:2px;border:9px solid #ddedc9}
.lumo-demo-art>i{position:absolute;width:45px;height:70px;background:#243f37;border-radius:30px 30px 8px 8px;left:0;bottom:0}
.lumo-demo-art>b{position:absolute;width:38px;height:38px;background:#c9f746;border-radius:50%;right:2px;bottom:8px}
.lumo-builder-scene .lumo-colour-palette{bottom:14px;right:12px;padding:10px;z-index:2}
.lumo-builder-scene .lumo-build-steps{transform:rotate(2deg);padding:16px 12px;margin:0;background:#fff;border-radius:0 0 12px 12px;border:1px solid #dce5d4;border-top:0}
.lumo-builder-scene .lumo-build-steps b{background:#e7f8cb}
.lumo-floating-tool{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8e6c9;border-radius:12px;padding:12px;box-shadow:0 10px 22px #203c1712;font-size:11px;font-weight:700;z-index:3}
.lumo-floating-tool svg{width:24px;height:24px;color:#4b8426}
.lumo-floating-tool--layout{left:0;top:25px;transform:rotate(-6deg)}
.lumo-floating-tool--style{right:0;bottom:48px;transform:rotate(5deg)}
.lumo-scene-label{display:block;margin-top:24px;text-align:center;font-size:8px;font-weight:700;letter-spacing:.08em;color:#64765c}
.lumo-wide-tool--panel{border-top:1px solid #e2eadb;padding-top:64px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.lumo-wide-tool--panel .lumo-wide-heading,.lumo-wide-tool--panel .lumo-wide-copy{grid-column:2}
.lumo-wide-tool--panel .lumo-wide-visual{grid-column:1}
.lumo-panel-scene .lumo-panel{border:8px solid #132238;border-radius:18px;padding:24px;box-shadow:0 24px 35px #1020321f;min-height:0;transform:perspective(900px) rotateY(5deg);position:relative}
.lumo-panel-scene .lumo-panel-top{padding-bottom:14px;border-bottom:1px solid #385063}
.lumo-panel-scene .lumo-panel-top strong{color:#c9f746;font-size:28px}
.lumo-panel-scene .lumo-panel-welcome strong{font-size:22px}
.lumo-panel-scene .lumo-panel-grid>div{padding:16px}
.lumo-panel-scene .lumo-panel-grid svg{width:28px;height:28px;margin-bottom:10px}
.lumo-panel-scene .lumo-panel-grid strong{font-size:14px}
.lumo-panel-scene .lumo-panel-grid span{font-size:11px}
.lumo-panel-base{height:12px;background:linear-gradient(#d3dce2,#899ba8);border-radius:2px 2px 50% 50%;margin:0 -14px;box-shadow:0 9px 15px #15253618}
.lumo-tools-v2 .lumo-app-strip{margin-top:24px;border:0;border-radius:24px;padding:32px;background:linear-gradient(110deg,#f1f8e6,#e5f7c8)}
@media(max-width:900px){.lumo-wide-tool{gap:0 28px}.lumo-wide-visual{padding:38px 16px 28px}.lumo-builder-scene .lumo-editor-canvas{padding:18px}.lumo-builder-scene .lumo-editor-canvas>strong{font-size:27px}.lumo-floating-tool{padding:8px;font-size:10px}.lumo-panel-scene .lumo-panel{padding:18px}}
@media(max-width:760px){.lumo-tools-v2{padding:48px 0}.lumo-tools-v2 .lumo-tools-heading{margin-bottom:24px}.lumo-wide-tool,.lumo-wide-tool--panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding:24px 0 36px;gap:0}.lumo-wide-tool .lumo-wide-heading{grid-column:1;grid-row:1;align-self:auto}.lumo-wide-tool .lumo-wide-visual{grid-column:1;grid-row:2;padding:30px 16px 18px;margin-top:12px}.lumo-wide-tool .lumo-wide-copy{grid-column:1;grid-row:3;padding-top:0}.lumo-wide-heading h3{font-size:32px}.lumo-wide-tool--panel{padding-top:36px}.lumo-builder-scene .lumo-editor{transform:none}.lumo-builder-scene .lumo-build-steps{transform:none}.lumo-builder-scene .lumo-editor-body{min-height:220px;padding:10px}.lumo-builder-scene .lumo-editor-canvas{min-height:200px}.lumo-builder-scene .lumo-editor-canvas>strong{font-size:26px}.lumo-demo-art{width:70px;right:-20px;bottom:20px;transform:scale(.8) rotate(-8deg)}.lumo-floating-tool--layout{top:9px}.lumo-floating-tool--style{bottom:38px}.lumo-scene-label{margin-top:20px}.lumo-panel-scene .lumo-panel{transform:none;border-width:6px;padding:16px}.lumo-panel-scene .lumo-panel-grid>div{padding:12px}.lumo-tools-v2 .lumo-app-strip{padding:24px;margin-top:0}}
@media(max-width:380px){.lumo-wide-tool .lumo-wide-visual{padding-left:10px;padding-right:10px}.lumo-builder-scene .lumo-editor-canvas{padding:14px}.lumo-builder-scene .lumo-editor-canvas>strong{font-size:23px}.lumo-builder-scene .lumo-editor-top{font-size:9px;padding:10px}.lumo-panel-scene .lumo-panel-welcome strong{font-size:19px}.lumo-panel-scene .lumo-panel-top>span{font-size:7px}.lumo-floating-tool span{font-size:9px}.lumo-wide-heading h3{font-size:29px}}

/* V3: MAKE THE TOOLS AND THEIR PURPOSE VISIBLE */
.lumo-product-label{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid #c5dfa6;background:#f0f9e5;color:#3b6b1d;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:.06em;margin-bottom:16px}
.lumo-tool-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin:0 0 34px;padding:22px;background:#f6f9f1;border:1px solid #dfe8d5;border-radius:20px}
.lumo-route-option>span{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;color:#587644}
.lumo-route-option strong{display:block;font-size:20px;color:#11243a;letter-spacing:-.02em;margin:5px 0}
.lumo-route-option small{display:block;font-size:12px;color:#5c6a61;line-height:1.5}
.lumo-route-or{font-size:10px;font-weight:800;color:#607652;padding:6px;border-radius:50%;background:#e7f0db}
.lumo-route-arrow{font-size:24px;color:#6e8e4b}
.lumo-route-option--manage{padding:14px;border:1px solid #344958;border-radius:12px;background:#142b3d}
.lumo-route-option--manage>span{color:#cdf585}.lumo-route-option--manage strong{color:#fff}.lumo-route-option--manage small{color:#bfceda}
.lumo-wide-tool--installer{border-top:1px solid #e2eadb;padding-top:64px}
.lumo-install-scene svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lumo-install-window{position:relative;padding:22px;border:1px solid #d1dfc2;background:#fff;border-radius:18px;box-shadow:0 18px 40px #28471912}
.lumo-install-title{display:flex;align-items:center;gap:12px}
.lumo-install-mark{display:grid;place-items:center;width:46px;height:46px;background:linear-gradient(140deg,#dcff8d,#b4ed35);border-radius:13px;color:#173b2d}
.lumo-install-mark svg{width:27px;height:27px}
.lumo-install-title strong{display:block;font-size:23px;letter-spacing:-.03em;color:#132b3f}
.lumo-install-title div>span{display:block;font-size:11px;color:#62735a;margin-top:2px}
.lumo-installer-tabs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0;padding:0}
.lumo-installer-tabs li{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding-top:10px;border-top:2px solid #cae4ac}
.lumo-installer-tabs b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e8f7d5;color:#426a28;font-size:9px}
.lumo-install-preview{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
.lumo-app-example{padding:18px 10px;border:1px solid #d7e5c6;background:#f3f8ed;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lumo-app-example svg{width:35px;height:35px;color:#4b7e2c;margin-bottom:12px}
.lumo-app-example strong{font-size:12px;color:#203b2e}.lumo-app-example span{font-size:10px;line-height:1.5;color:#677a5b;margin-top:6px}
.lumo-install-fields{display:grid;gap:10px}.lumo-install-fields>div{padding:10px 12px;border:1px solid #e0e9d7;border-radius:8px;background:#fbfcf9}
.lumo-install-fields>div>span{display:block;font-size:7px;letter-spacing:.08em;color:#678053;font-weight:800}.lumo-install-fields strong{display:block;font-size:10px;color:#30432d;margin-top:4px;overflow-wrap:anywhere}
.lumo-install-action{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:linear-gradient(120deg,#d4ff47,#a7e526);border-radius:8px;font-size:10px;font-weight:800;color:#173021}
.lumo-install-action svg{width:15px;height:15px}
.lumo-install-destination{text-align:center;color:#608942}.lumo-install-destination>span{display:block;font-size:24px;margin:5px 0}
.lumo-install-destination>div{display:grid;grid-template-columns:30px auto;column-gap:10px;text-align:left;align-items:center;max-width:260px;margin:auto;background:#142b3d;border:1px solid #355344;color:#fff;border-radius:12px;padding:12px 16px}
.lumo-install-destination svg{width:28px;height:28px;grid-row:1 / span 2;color:#c9f746}
.lumo-install-destination strong{font-size:12px}.lumo-install-destination div>span{font-size:9px;color:#c6d4dd;margin-top:3px}
@media(max-width:760px){.lumo-tool-route{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;padding:16px;margin-bottom:20px}.lumo-route-option strong{font-size:16px}.lumo-route-option>span{font-size:8px}.lumo-route-option small{font-size:11px}.lumo-route-arrow{grid-column:1 / -1;text-align:center;transform:rotate(90deg);line-height:1}.lumo-route-option--manage{grid-column:1 / -1;text-align:center}.lumo-wide-tool--installer{padding-top:36px}.lumo-install-window{padding:16px}.lumo-install-title strong{font-size:21px}.lumo-install-preview{gap:10px}.lumo-product-label{font-size:9px;margin-bottom:14px}}
@media(max-width:380px){.lumo-route-option strong{font-size:14px}.lumo-install-window{padding:12px}.lumo-installer-tabs li{font-size:9px;gap:4px}.lumo-install-fields>div{padding:8px}.lumo-install-fields strong{font-size:9px}.lumo-install-action{font-size:9px;padding:8px}.lumo-app-example{padding:12px 8px}}

/* FINAL: ORIGINAL LUMOHOSTING SVG ILLUSTRATIONS */
.lumo-real-scene{padding:36px 22px 30px;isolation:isolate}
.lumo-real-orbit{position:absolute;inset:18px 0 10px;z-index:-1;border-radius:44% 56% 55% 45%;background:radial-gradient(ellipse at center,#def4b6,#f3f9e9 62%,transparent 72%);border:1px solid #eef5e5;transform:rotate(-7deg)}
.lumo-real-orbit:before,.lumo-real-orbit:after{content:'';position:absolute;width:46px;height:46px;border:1px solid #b2d981;border-radius:14px;transform:rotate(25deg);background:#ecf8dc66}
.lumo-real-orbit:before{top:8%;right:12%}.lumo-real-orbit:after{bottom:10%;left:8%;width:24px;height:24px}
.lumo-real-product-name{display:flex;align-items:center;justify-content:center;gap:9px;font-size:25px;font-weight:800;letter-spacing:-.03em;color:#122b40;margin-bottom:22px;flex-wrap:wrap}
.lumo-real-product-name small{font-size:8px;letter-spacing:.1em;color:#597642;font-weight:800;padding:6px 9px;border:1px solid #cde2b4;border-radius:100px;background:#f9fcf4}
.lumo-real-product-dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#cefc42,#7fb739);box-shadow:0 0 0 5px #c2e97526}
.lumo-real-scene img{display:block;width:100%;height:auto;max-width:100%}
.lumo-real-image--sitepad{position:relative;filter:drop-shadow(0 16px 16px #193b1f1f);margin:0 -14px}
.lumo-real-browser{position:relative;border:1px solid #cbdcbb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 32px #18351c1a;transform:rotate(-2deg)}
.lumo-real-browser-bar{display:flex;align-items:center;gap:5px;background:#f8fbf3;padding:12px}
.lumo-real-browser-bar i{height:5px;width:5px;background:#b7cc9e;border-radius:50%}.lumo-real-browser-bar span{margin-left:auto;font-size:9px;color:#52694a}
.lumo-real-device{position:relative;padding:0 4px;filter:drop-shadow(0 16px 15px #152c341b)}
.lumo-real-device-screen{border:8px solid #142337;border-radius:14px 14px 6px 6px;overflow:hidden;background:#fff}
.lumo-real-device-base{height:12px;margin:0 -14px;border-radius:1px 1px 50% 50%;background:linear-gradient(#d8e0e5,#94a2b0)}
.lumo-real-float{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #bddd86;background:linear-gradient(135deg,#e6ffb3,#c4f555);border-radius:12px;color:#183322;box-shadow:0 8px 18px #29451317;font-size:11px;font-weight:800;z-index:2}
.lumo-real-float svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lumo-real-float--one{left:0;top:90px;transform:rotate(-5deg)}.lumo-real-float--two{right:0;bottom:98px;transform:rotate(5deg)}
.lumo-real-steps{display:flex;justify-content:center;gap:14px;margin:28px 0 0;list-style:none;padding:0;font-size:11px;font-weight:700;color:#425d31}
.lumo-real-steps li+li:before{content:'→';margin-right:14px;color:#6e914d}
.lumo-real-scene .lumo-scene-label{margin-top:18px;font-size:8px;font-weight:600;letter-spacing:.03em}
.lumo-real-scene--cpanel .lumo-real-float--two{bottom:55px}
@media(max-width:760px){.lumo-wide-tool .lumo-real-scene{padding:28px 16px 18px}.lumo-real-product-name{font-size:22px;margin-bottom:18px;gap:7px}.lumo-real-product-name small{font-size:7px}.lumo-real-float{padding:8px;font-size:9px;gap:5px}.lumo-real-float svg{width:18px;height:18px}.lumo-real-float--one{top:66px}.lumo-real-float--two{bottom:82px}.lumo-real-browser{transform:none}.lumo-real-device-screen{border-width:5px}.lumo-real-steps{gap:10px;font-size:10px;margin-top:22px}.lumo-real-steps li+li:before{margin-right:10px}.lumo-real-scene .lumo-scene-label{font-size:8px;line-height:1.6}.lumo-real-scene--cpanel .lumo-real-float--two{bottom:48px}}
@media(max-width:380px){.lumo-wide-tool .lumo-real-scene{padding-left:12px;padding-right:12px}.lumo-real-product-name{font-size:20px}.lumo-real-product-name small{font-size:6px}.lumo-real-float{font-size:8px;padding:7px}.lumo-real-float svg{width:16px;height:16px}}

/* Original graphics share a consistent aspect ratio. */
.lumo-real-image--sitepad{margin:0}
.lumo-real-browser>img{background:#fff}

/* FINISHING: COMPACT TOOL STORIES */
.lumo-tools-v2{padding:64px 0}
.lumo-tools-v2 .lumo-tools-heading{margin-bottom:30px}
.lumo-tool-route{padding:16px 20px;margin-bottom:20px}
.lumo-route-option--manage{padding:10px 14px}
.lumo-wide-tool{padding:28px 0 36px}
.lumo-wide-tool--panel,.lumo-wide-tool--installer{padding-top:36px}
.lumo-wide-tool .lumo-real-scene{padding-top:24px;padding-bottom:20px}
.lumo-real-scene--softaculous .lumo-real-browser-bar{display:none}
.lumo-real-scene--softaculous .lumo-real-browser{transform:none;background:none;border:0;box-shadow:none;overflow:visible}
.lumo-real-scene--softaculous .lumo-real-browser>img{background:transparent}
.lumo-real-scene--softaculous .lumo-real-float--one,.lumo-real-scene--softaculous .lumo-real-float--two{display:none}
.lumo-real-scene .lumo-scene-label{font-size:11px;letter-spacing:0;font-weight:400;margin-top:12px;color:#627653}
@media(max-width:760px){.lumo-tools-v2{padding:44px 0}.lumo-tool-route{padding:14px;margin-bottom:12px}.lumo-wide-tool{padding:20px 0 28px}.lumo-wide-tool--panel,.lumo-wide-tool--installer{padding-top:28px}.lumo-wide-tool .lumo-real-scene{padding-top:24px;padding-bottom:12px}.lumo-wide-copy ul{margin:20px 0;gap:14px}}

/* CONSOLIDATED HOMEPAGE: readable answers and compact spacing */
.faq-creative .faq-answer p+p{margin-top:12px}
.resources-section .guides-topic-grid{margin-top:28px}
.lh-story .lh-foundation-layer{margin-bottom:8px}
@media(max-width:760px){
 .lh-story{padding:44px 0}
 .lh-story .lh-story-layout{gap:24px}
 .lh-story .lh-journey{margin:24px 0}
 .lh-story .lh-vps-reasons{margin:24px 0;gap:16px}
 .lh-story .lh-story-actions{margin-top:22px}
 .lh-story .lh-foundation,.lh-story .lh-vps-map{padding:18px;border-radius:22px}
 .lh-story .lh-server-core{padding:18px 12px;gap:5px}
 .lh-story .lh-core-icon{width:56px;height:56px;margin-bottom:5px;border-radius:16px}
 .lh-story .lh-core-icon .lh-icon{width:32px;height:32px}
 .lh-story .lh-server-core strong{font-size:25px}
 .lh-story .lh-resource{padding:12px 8px}
 .lh-story .lh-resource>span:last-child{font-size:11px}
 .lh-story .lh-visual-caption{margin-top:16px;font-size:12px}
}
/* Mobile billing tabs */
@media (max-width: 600px) {
    .billing-switch {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
        gap: 4px;
    }

    .billing-switch .billing-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 64px;
        padding: 8px 4px;
        gap: 5px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .billing-switch .billing-option--best span {
        position: static;
        transform: none;
        padding: 3px 6px;
        font-size: 0.55rem;
        line-height: 1.2;
    }
}

/* Compact mobile hosting benefits */
@media (max-width: 600px) {
    .guarantee-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 20px 0 24px;
        padding: 0;
        list-style: none;
    }

    .guarantee-strip li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        padding: 10px;
        border: 1px solid #dce7cf;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.75);
        font-size: 0.76rem;
        line-height: 1.4;
        text-align: left;
    }

    .guarantee-strip .guarantee-icon {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        font-size: 13px;
    }
}
/* ========================================
   WEB REFRESH: COMPACT DISCOVERY & MIGRATION
   Scoped to lr- classes; append after existing rules.
======================================== */
.lr-eyebrow{display:block;font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#466b16;margin-bottom:10px}
.lr-chooser{margin-top:28px;border:1px solid var(--border);border-radius:20px;background:#fff;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lr-chooser h3{font-size:1.35rem;margin:0 0 8px}.lr-chooser p{font-size:.92rem;line-height:1.65;color:var(--muted);margin:0}
.lr-choices{display:flex;gap:8px;flex-wrap:wrap;align-content:start}.lr-choices button{font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;border:1px solid #d6e0d3;border-radius:12px;background:#f7faf6;padding:12px 14px;color:#152018;min-height:44px}
.lr-choices button[aria-pressed="true"]{background:#0b1220;border-color:#0b1220;color:#caff3f}
.lr-choice-result{grid-column:1/-1;padding:20px;background:#f2f7ef;border-radius:14px}.lr-choice-result strong{display:block;margin-bottom:8px}.lr-choice-result a{display:inline-block;margin-top:12px;font-weight:750;color:#243b10}
.lr-choice-result [hidden]{display:none!important}
.lr-care{padding:22px 0 40px}.lr-care-details{border:1px solid #d6e0d3;border-radius:18px;background:#f7faf6;overflow:hidden}
.lr-care-details>summary,.lr-example>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:22px}
.lr-care-details>summary::-webkit-details-marker,.lr-example>summary::-webkit-details-marker{display:none}
.lr-care-details summary strong{display:block;font-size:1.35rem;color:#0b1220}.lr-summary-hint{display:block;margin-top:8px;font-size:.86rem;color:#647067}
.lr-plus{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8f4d7;font-size:1.3rem;color:#243b10}
.lr-care-details[open]>summary .lr-plus,.lr-example[open]>summary .lr-plus{transform:rotate(45deg)}
.lr-care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0 24px 24px}.lr-care-grid h3{font-size:1.05rem;margin:14px 0 8px}.lr-care-grid p{font-size:.9rem;line-height:1.65;color:#647067;margin:0}
.lr-number{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#d5f79a;color:#152018;font-size:.78rem;font-weight:800;flex-shrink:0}
.lr-examples{display:grid;gap:10px}.lr-example{border:1px solid #d6e0d3;border-radius:16px;background:white;overflow:hidden}.lr-example summary strong{flex:1;font-size:1.1rem}.lr-example-body{padding:0 24px 24px 74px}.lr-example-body p{line-height:1.7;color:#647067}.lr-example-body .web-audience-card-footer{margin-top:16px}
.lr-move-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.lr-move-track li{position:relative;padding:26px;border:1px solid #33475b;border-radius:20px;background:linear-gradient(140deg,#16283d,#0b1220);color:white}
.lr-move-track li:not(:last-child):after{content:'→';position:absolute;right:-25px;top:38px;width:25px;text-align:center;font-size:1.3rem;color:#547822;z-index:1}
.lr-move-track .lr-number{margin-bottom:28px}.lr-move-track .lr-eyebrow{color:#caff3f;font-size:.65rem}.lr-move-track h3{font-size:1.2rem;color:white;margin:0 0 12px;line-height:1.35}.lr-move-track p{font-size:.94rem;line-height:1.7;color:#d3dfeb;margin:0 0 20px}.lr-move-tag{display:inline-block;padding:7px 10px;border:1px solid #496047;border-radius:8px;font-size:.74rem;color:#d2f8a0}
.lr-move-reminder{margin-top:20px;padding:16px 20px;border-radius:12px;background:#f2f7ef}.lr-move-reminder summary{cursor:pointer;font-weight:700;min-height:28px}.lr-move-reminder ul{margin:16px 0 0;padding-left:22px;line-height:1.8;color:#526049}
.lr-chooser button:focus-visible,.lr-chooser a:focus-visible,.lr-care summary:focus-visible,.lr-example summary:focus-visible,.lr-move-reminder summary:focus-visible{outline:3px solid #527d19;outline-offset:4px}
@media(max-width:767px){.lr-chooser{grid-template-columns:1fr;padding:20px;gap:16px}.lr-choices{gap:7px}.lr-choices button{flex:1 1 110px;padding:11px;font-size:.82rem}.lr-care-grid{grid-template-columns:1fr;gap:24px}.lr-care-details summary strong{font-size:1.1rem}.lr-example>summary{padding:16px}.lr-example-body{padding:0 18px 18px}.lr-move-track{grid-template-columns:1fr;gap:20px}.lr-move-track li{padding:22px}.lr-move-track li:not(:last-child):after{content:'↓';right:auto;left:36px;top:auto;bottom:-23px}.lr-move-track .lr-number{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.lr-chooser *,.lr-care *,.lr-examples *,.lr-move-track *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* WEB SECTION 07: ILLUSTRATED MIGRATION — append after existing CSS */
.lr-move-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.lr-move-track .lr-move-top .lr-number{margin:0}.lr-move-caption{font-size:.62rem;font-weight:750;letter-spacing:.09em;color:#b9ccde}
.lr-move-art{margin:12px auto 20px;max-width:240px;width:100%}.lr-move-art svg{display:block;width:100%;height:auto}
.lr-move-track li{overflow:visible}.lr-move-track li:not(:last-child):after{content:'→';top:126px;right:-29px;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#caff3f;border:3px solid #fff;color:#172740;font-size:1.1rem;font-weight:800;z-index:2}
.lr-move-track h3{font-size:1.16rem}.lr-move-track p{font-size:.9rem}.lr-move-track .lr-move-tag{margin-top:auto}.lr-transfer-line{animation:lr-transfer 3s linear infinite}@keyframes lr-transfer{to{stroke-dashoffset:-40}}
@media(max-width:767px){.lr-move-track li{display:grid;grid-template-columns:minmax(0,1fr) 92px;column-gap:12px;align-items:start}.lr-move-top{grid-column:1/-1;margin-bottom:16px}.lr-move-art{grid-column:2;grid-row:2/6;width:92px;margin:0;align-self:center}.lr-move-track .lr-eyebrow,.lr-move-track h3,.lr-move-track p,.lr-move-track .lr-move-tag{grid-column:1}.lr-move-track .lr-eyebrow{font-size:.6rem}.lr-move-track h3{font-size:1.06rem}.lr-move-track p{font-size:.85rem;margin-bottom:14px}.lr-move-track .lr-move-tag{justify-self:start;font-size:.65rem}.lr-move-track li:not(:last-child):after{content:'↓';top:auto;bottom:-27px;left:calc(50% - 16px);right:auto}.lr-move-caption{font-size:.6rem}}
@media(max-width:359px){.lr-move-track li{grid-template-columns:minmax(0,1fr) 68px}.lr-move-art{width:68px}.lr-move-caption{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.lr-transfer-line{animation:none}}

/* ========================================
   LUMO NAV V2: compact service dropdowns
======================================== */
.desktop-nav { gap: 1px; min-width: 0; }
.desktop-nav > a, .nav-dropdown-trigger { white-space: nowrap; padding-inline: 9px; font-size: .82rem; }
.nav-wrap { gap: 12px; }
.nav-actions { gap: 9px; }
.nav-get-started { padding-inline: 13px; min-height: 42px; }
.nav-dropdown-menu { width: 306px; max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
.nav-dropdown-item { padding: 10px; gap: 10px; }
.nav-dropdown-icon { width: 36px; height: 36px; flex-shrink: 0; }
.nav-dropdown-icon svg, .mobile-submenu-icon svg { width: 19px; height: 19px; }
.nav-dropdown-item strong { font-size: .81rem; }
.nav-dropdown-item small { font-size: .7rem; line-height: 1.45; }
.nav-dropdown-trigger[aria-expanded="true"] { background: #f4f8f1; }
.mobile-nav-submenu a { display: flex; gap: 12px; align-items: center; min-height: 60px; }
.mobile-nav-submenu a strong, .mobile-nav-submenu a small { display: block; }
.mobile-nav-submenu a strong { font-size: .87rem; color: #14243a; }
.mobile-nav-submenu a small { font-size: .72rem; font-weight: 450; margin-top: 1px; line-height: 1.35; }
.mobile-submenu-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #effbdc; color: #4f9b1f; }
.mobile-nav-submenu { transition: none; }
.mobile-nav-group.is-open .mobile-nav-submenu { max-height: none; overflow: visible; }
@media (max-width: 1230px) {
  .desktop-nav, .nav-actions { display: none; }
  .mobile-menu-toggle { display: block; }
}
@media (prefers-reduced-motion: reduce) {
 .nav-dropdown-menu, .nav-dropdown-item { transition: none; }
}

/* ========================================
   NAVIGATION HOTFIX: STABLE HOVER + FOCUS
======================================== */
@media (min-width: 921px) {
  .desktop-nav .nav-dropdown-menu {
    top: 100%;
    margin-top: 0;
    max-height: min(75vh, 560px);
    overflow-y: auto;
  }
  .desktop-nav .nav-dropdown-menu::before { display: none; }
  .desktop-nav .nav-dropdown:focus-within > .nav-dropdown-menu,
  .desktop-nav .nav-dropdown:hover > .nav-dropdown-menu,
  .desktop-nav .nav-dropdown.is-open > .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}


/* ========================================
   LUMO NAV V3: SERVICE-COLORED SVG ICONS
   Lightweight inline SVG; no external fonts or libraries.
======================================== */
.nav-dropdown-item, .mobile-nav-submenu a { --lumo-ic-bg:#ecf8e0; --lumo-ic-fg:#3b7728; }
.nav-dropdown-item[data-nav-icon="web"],.mobile-nav-submenu a[data-nav-icon="web"] { --lumo-ic-bg:#e5f7cf; --lumo-ic-fg:#45751e; }
.nav-dropdown-item[data-nav-icon="wordpress"],.mobile-nav-submenu a[data-nav-icon="wordpress"] { --lumo-ic-bg:#e6f3fa; --lumo-ic-fg:#236c90; }
.nav-dropdown-item[data-nav-icon="vps"],.mobile-nav-submenu a[data-nav-icon="vps"] { --lumo-ic-bg:#e5efff; --lumo-ic-fg:#346bc4; }
.nav-dropdown-item[data-nav-icon="dedicated"],.mobile-nav-submenu a[data-nav-icon="dedicated"] { --lumo-ic-bg:#f0eafe; --lumo-ic-fg:#7752ae; }
.nav-dropdown-item[data-nav-icon="ssl"],.mobile-nav-submenu a[data-nav-icon="ssl"] { --lumo-ic-bg:#dff6ee; --lumo-ic-fg:#16836b; }
.nav-dropdown-item[data-nav-icon="email"],.mobile-nav-submenu a[data-nav-icon="email"] { --lumo-ic-bg:#fff1dd; --lumo-ic-fg:#ac7123; }
.nav-dropdown-item[data-nav-icon="resources"],.nav-dropdown-item[data-nav-icon="blog"],.nav-dropdown-item[data-nav-icon="guide"],.nav-dropdown-item[data-nav-icon="compare"],.mobile-nav-submenu a[data-nav-icon="resources"],.mobile-nav-submenu a[data-nav-icon="blog"],.mobile-nav-submenu a[data-nav-icon="guide"],.mobile-nav-submenu a[data-nav-icon="compare"] { --lumo-ic-bg:#ecf3f9; --lumo-ic-fg:#4a708e; }
.nav-dropdown-item[data-nav-icon="company"],.nav-dropdown-item[data-nav-icon="contact"],.nav-dropdown-item[data-nav-icon="status"],.mobile-nav-submenu a[data-nav-icon="company"],.mobile-nav-submenu a[data-nav-icon="contact"],.mobile-nav-submenu a[data-nav-icon="status"] { --lumo-ic-bg:#edf2e9; --lumo-ic-fg:#567346; }
.nav-dropdown-item .nav-dropdown-icon,.mobile-nav-submenu a .mobile-submenu-icon {background:var(--lumo-ic-bg);color:var(--lumo-ic-fg);border:1px solid color-mix(in srgb,var(--lumo-ic-fg) 12%, transparent);transition:background .18s ease, transform .18s ease;}
.nav-dropdown-item:hover .nav-dropdown-icon,.mobile-nav-submenu a:hover .mobile-submenu-icon {transform:scale(1.04);}
.nav-dropdown-item .nav-dropdown-icon svg,.mobile-nav-submenu a .mobile-submenu-icon svg{width:19px;height:19px;stroke-width:1.9;}
@media(prefers-reduced-motion: reduce){.nav-dropdown-item .nav-dropdown-icon,.mobile-nav-submenu a .mobile-submenu-icon{transition:none;}}

/* Resources: Coupons & Offers icon */
.nav-dropdown-item[data-nav-icon="offers"], .mobile-nav-submenu a[data-nav-icon="offers"] { --lumo-ic-bg:#fff1dd; --lumo-ic-fg:#986018; }


/* ========================================
   NAVIGATION: SLIM UTILITY BAR (2026-10)
   Scoped to site header; no external fonts or icons.
======================================== */
.site-header .lumo-utility-bar {
    background: #f7faf6;
    border-bottom: 1px solid #e8eee3;
    color: #4a584e;
}
.site-header .lumo-utility-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}
.site-header .lumo-utility-links {
    display: flex;
    align-items: center;
    gap: 17px;
}
.site-header .lumo-utility-inner a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease;
}
.site-header .lumo-utility-inner a:hover,
.site-header .lumo-utility-inner a:focus-visible { color: #3c7c24; }
.site-header .lumo-utility-svg,
.site-header .lumo-utility-svg svg {
    display: inline-block;
    width: 13px; height: 13px; flex: 0 0 13px;
}
.site-header .lumo-utility-svg svg { display: block; }
.site-header .lumo-utility-login {
    padding: 3px 10px;
    border-radius: 7px;
    border: 1px solid #dde7d5;
    background: #fff;
    color: #16243a;
}
.site-header .lumo-utility-login:hover { background: #edf7e6; }
/* Mobile drawer already contains Login and Resources > Coupons & Offers.
   Hide the secondary bar to protect the first viewport. */
@media (max-width: 920px) {
    .site-header .lumo-utility-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .lumo-utility-inner a { transition: none; }
}

/* ========================================
   HEADER: AFFILIATE / LOGIN / REGISTER
   Get Started removed; utility actions stay on the upper bar.
======================================== */
.site-header .lumo-utility-links { gap: 12px; }
.site-header .lumo-utility-register {
    padding: 3px 11px;
    border-radius: 7px;
    background: var(--lime, #b7f52a);
    border: 1px solid #a3db2b;
    color: #12211d;
    font-weight: 800;
}
.site-header .lumo-utility-register:hover,
.site-header .lumo-utility-register:focus-visible { background: #d2fc69; color: #12211d; }
.site-header .lumo-utility-affiliate { color: #34443d; }
.site-header .nav-wrap { justify-content: space-between; }
.site-header .desktop-nav { margin-right: 0; }
.mobile-nav-actions .lumo-mobile-affiliate {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #1b3b23;
    font-weight: 750;
    border-radius: 10px;
    background: #f0f8e9;
    text-decoration: none;
}
@media (min-width: 921px) and (max-width: 1180px) {
    .site-header .lumo-utility-inner { font-size: 10.5px; }
    .site-header .lumo-utility-links { gap: 9px; }
}

/* ============================================================
   HOMEPAGE PRICING V11 — BILLING TO PLANS, NO INTERRUPTING GAP
   Only the homepage pricing section; other product pages unaffected.
   ============================================================ */
.pricing-section .billing-switch {
    margin-bottom: 20px;
}
.pricing-section .pricing-grid {
    margin-top: 0;
}
.pricing-section .guarantee-strip {
    margin: 26px 0 18px;
}
@media (max-width: 650px) {
    .pricing-section .billing-switch {
        margin: 0 auto 14px;
    }
    .pricing-section .pricing-grid {
        margin-top: 0;
        row-gap: 14px;
    }
    .pricing-section .guarantee-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 18px 0 14px;
        padding: 0;
    }
    .pricing-section .guarantee-strip li {
        min-width: 0;
        align-items: center;
        padding: 10px;
        font-size: .72rem;
        line-height: 1.4;
        border: 1px solid #e1ead9;
        border-radius: 11px;
        background: #fbfdf8;
    }
    .pricing-section .guarantee-strip .guarantee-icon {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
}


/* =========================================================
   GLOBAL: Prevent accidental document-wide horizontal scroll
   - clip does NOT create a scroll container (unlike hidden),
     so it is friendlier to sticky headers and sections.
   - nested comparison tables with overflow-x:auto still scroll.
   - do not constrain animations, fixed helpers, or dropdowns.
   ========================================================= */
html { overflow-x: clip; }