/* ==========================================================================
   FastnetHosting — Main Stylesheet
   Author: FastnetHosting
   Stack: Pure CSS, custom properties, no framework
   Breakpoints: 900px (tablet), 600px (mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --color-primary: #4F46E5;
    --color-primary-dark: #4338CA;
    --color-primary-light: #6366F1;
    --color-teal: #06B6D4;
    --color-teal-dark: #0891B2;
    --color-cyan-light: #22D3EE;
    --color-violet: #8B5CF6;
    --color-violet-light: #A78BFA;
    --color-hero-bg: #0C1024;
    --color-dark-navy: #0B0E20;
    --color-accent: #FF6B4A;
    --color-accent-dark: #E5532F;

    --color-white: #ffffff;
    --color-gray-50: #f8f9fc;
    --color-gray-100: #f1f3f8;
    --color-gray-200: #e2e6f0;
    --color-gray-300: #c8cfe0;
    --color-gray-400: #9aa5c0;
    --color-gray-500: #6b7a99;
    --color-gray-600: #4a5568;
    --color-gray-700: #2d3748;
    --color-gray-800: #1a202c;
    --color-gray-900: #0f1419;

    --text-primary: var(--color-gray-800);
    --text-secondary: var(--color-gray-500);
    --text-light: var(--color-gray-400);

    --font-base: 'Montserrat', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --font-display: 'Montserrat', 'Helvetica Neue', system-ui, sans-serif;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(20, 20, 56, .06), 0 1px 3px rgba(79, 70, 229, .05);
    --shadow-md: 0 2px 6px rgba(20, 20, 56, .05), 0 8px 24px rgba(79, 70, 229, .08);
    --shadow-lg: 0 4px 12px rgba(20, 20, 56, .06), 0 18px 48px rgba(79, 70, 229, .12);
    --shadow-xl: 0 8px 24px rgba(20, 20, 56, .08), 0 32px 72px rgba(79, 70, 229, .16);
    --shadow-card: 0 1px 4px rgba(20, 20, 56, .04), 0 12px 32px rgba(79, 70, 229, .09);
    --shadow-glow: 0 8px 32px rgba(79, 70, 229, .28);

    /* Custom ease-out curve: built-in easings are too weak, lack punch */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);
    /* Safe prop lists to replace 'transition: all' (excludes layout props) */
    --transition-ui: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), opacity 150ms var(--ease-out), filter 150ms var(--ease-out);
    --transition-ui-base: background-color 250ms var(--ease-out), color 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), opacity 250ms var(--ease-out), filter 250ms var(--ease-out);

    --container-max: 100%;
    --container-pad: 24px; /* gutter de las barras: header, promo, footer */
    --content-pad: max(120px, calc((100% - 1600px) / 2)); /* gutter de contenido: 120px, y crece para topar el contenido a 1600px en monitores anchos */
    --navbar-height: 72px;
    --promo-height: 40px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; /* recorta elementos fixed fuera de viewport (drawer) que descuadraban el banner */
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    display: block;
    max-width: 100%;
}

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

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input {
    font-family: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}

/* Footer keeps the bar gutter (matches header/footer width) */
.footer__grid, .footer__bottom-inner {
    padding-inline: var(--container-pad);
}

.text-center {
    text-align: center;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.split-section__text h2, .pricing-section h2,
.how-it-works h2, .testimonials h2, .platform-section h2,
.faq-section h2, .final-cta h2 {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

h1 {
    font-size: var(--font-size-6xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-lg);
}

.section-eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.section-sub {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
    white-space: nowrap;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .45);
    opacity: .93;
}

.btn-primary:active {
    transform: scale(.97);
}

/* Press feedback: every pressable element scales down on :active */
.nb-cta:active, .sdp-cta:active, .promo-btn:active, .btn-white:active, .btn-secondary:active, .nb-login:active,
.vlt-order:active, .dlt-order:active, .ds-cta:active, .support-link:active,
.mig-cta:active, .final-cta__btn:active {
    transform: scale(.97);
}

.btn-pill {
    border-radius: var(--radius-full);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-primary);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem 1.25rem;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-gray-200);
    transition: border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    background: rgba(255, 255, 255, .12);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, .4);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .7);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: var(--font-size-lg);
}

.btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* --------------------------------------------------------------------------
   6. Promo Bar + Navbar (full rewrite)
   -------------------------------------------------------------------------- */
.promo-bar {
    position: relative;
    z-index: 100;
    background: linear-gradient(90deg, #312E81 0%, #4F46E5 30%, #4338CA 50%, #4F46E5 70%, #312E81 100%);
    background-size: 200% 100%;
    animation: promoShimmer 6s linear infinite;
    color: #fff;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

@keyframes promoShimmer {
    0% {
        background-position: 0% 0
    }
    100% {
        background-position: 200% 0
    }
}

.promo-bar__inner {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    justify-content: center;
}

.promo-tag {
    background: rgba(255, 200, 50, .2);
    border: 1px solid rgba(255, 200, 50, .35);
    color: #fde68a;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: .5px;
    white-space: nowrap;
}

.promo-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-text strong {
    color: #fff;
    font-weight: 800;
}

.promo-btn {
    background: var(--color-teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.promo-btn:hover {
    background: var(--color-teal-dark);
    transform: translateY(-1px);
}

.promo-bar__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.promo-help {
    position: relative;
}

.promo-help__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.promo-help__trigger:hover {
    color: #fff;
}

.promo-help__trigger .nb-chevron {
    color: rgba(255, 255, 255, .5);
}

.promo-help__panel {
    top: calc(100% + 12px);
    left: auto;
    right: -10px;
    min-width: 260px;
}

.promo-help__panel::before {
    left: auto;
    right: 28px;
}

.promo-login {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.promo-login:hover {
    color: #fff;
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.mobile-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   7. Navbar — nb-* system
   -------------------------------------------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: none;
    transition: box-shadow var(--transition-base);
}

.navbar--scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .09);
}

.navbar--scrolled::after {
    opacity: 1;
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4, #4F46E5);
    background-size: 200% 100%;
    animation: navGradient 4s linear infinite;
    opacity: 0;
    transition: opacity var(--transition-base);
}

@keyframes navGradient {
    0% {
        background-position: 0% 0
    }
    100% {
        background-position: 200% 0
    }
}

.nb-inner {
    max-width: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

.nb-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.nb-logo-cloud {
    height: 40px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.nb-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .4);
}

.nb-logo-name {
    display: block;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(135deg, #141438 0%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nb-logo-name span {
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nb-logo-tag {
    display: block;
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 400;
    letter-spacing: .5px;
}

.nb-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nb-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
}

.nb-menu > li {
    position: relative;
}

.nb-menu > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #4B5563;
    transition: var(--transition-ui);
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}

.nb-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--transition-fast);
    transform-origin: left;
}

.nb-menu > li:hover > a {
    color: #4F46E5;
}

.nb-menu > li:hover > a::after {
    transform: scaleX(1);
}

.nb-chevron {
    font-size: 10px;
    transition: transform var(--transition-fast);
    color: #9CA3AF;
}

.nb-menu > li:hover .nb-chevron {
    transform: rotate(180deg);
    color: #4F46E5;
}

.has-drop {
    position: relative;
}

.drop-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -10px;
    /* Frosted glass, legible: near-opaque so the background doesn't show through */
    background: linear-gradient(180deg, rgba(255, 255, 255, .985) 0%, rgba(248, 250, 255, .975) 100%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
    border-radius: 20px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 28px rgba(20, 20, 56, .12), 0 28px 70px rgba(79, 70, 229, .20);
    padding: 12px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left; /* escalar DESDE el trigger, no desde el centro */
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
    border: 1px solid rgba(79, 70, 229, .10);
    z-index: 200;
}

.drop-panel::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 30px;
    width: 13px;
    height: 13px;
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .10);
    border-bottom: none;
    border-right: none;
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
}

.has-drop:hover .drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Invisible bridge over the navbar-to-panel gap (on the <li>, NOT the panel: the mega-menu has overflow:hidden and would clip it). Keeps :hover while moving the cursor down — no flicker */
.has-drop:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    z-index: 199;
}

.dp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background .18s ease;
    text-decoration: none;
}

.dp-item:hover {
    background: rgba(99, 102, 241, .09);
}

.dp-icon {
    font-size: 1.2rem;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .55);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .18s ease;
    border: 1px solid rgba(255, 255, 255, .6);
}

.dp-item:hover .dp-icon {
    background: #EEF2FF;
}

.dp-item > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.dp-item strong {
    display: block;
    font-size: 14px;
    color: #111827;
    font-weight: 600;
}

.dp-item em {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
    font-style: normal;
    margin-top: 2px;
}

.dp-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dp-badge.hot {
    background: #FEF9C3;
    color: #854D0E;
}

.dp-badge.pop {
    background: #DBEAFE;
    color: #4F46E5;
}

.drop-panel--wide {
    min-width: 360px;
}

.drop-panel--mega {
    min-width: 580px;
    left: -20px;
}

.dp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.dp-col {
    display: flex;
    flex-direction: column;
}

.dp-col--right {
    border-left: 1px solid rgba(79, 70, 229, .07);
}

.dp-section-hd {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 12px 14px 4px;
    margin: 0;
}

.dp-section-hd:first-child {
    padding-top: 6px;
}

.dp-divider {
    height: 1px;
    background: rgba(79, 70, 229, .08);
    margin: 6px 10px;
}

/* ==========================================================================
   Modern mega-menu (mm-*) — main + featured rail layout, SVG icons
   ========================================================================== */
.drop-panel--mm {
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
}

.drop-panel--mm.drop-panel--right {
    left: auto;
    right: -10px;
}

.drop-panel--mm.drop-panel--right::before {
    left: auto;
    right: 30px;
}

.mm {
    display: grid;
    grid-template-columns: 1fr 268px;
}

.mm--single {
    grid-template-columns: 1fr 268px;
}

/* 1 columna de items + featured */
.mm--double {
    grid-template-columns: 1fr 1fr 268px;
}

/* 2 columnas de items + featured */
.mm__col {
    padding: 24px 20px;
    min-width: 290px;
}

.mm__col + .mm__col {
    border-left: 1px solid rgba(20, 20, 56, .06);
}

.mm__hd {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #AEB4C6;
    margin: 0 0 12px;
    padding: 0 12px;
}

.mm__col .mm__hd:not(:first-child) {
    margin-top: 22px;
}

.mm__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    transition: background .2s ease;
}

.mm__item:hover {
    background: rgba(79, 70, 229, .055);
}

.mm__ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4FB;
    color: #4F46E5;
    transition: background .2s ease, color .2s ease;
}

.mm__ic svg {
    width: 20px;
    height: 20px;
}

.mm__item:hover .mm__ic {
    background: #4F46E5;
    color: #fff;
}

.mm__tx {
    flex: 1;
    min-width: 0;
}

.mm__tx strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.mm__tx em {
    display: block;
    font-size: 12.5px;
    color: #8B93A7;
    font-style: normal;
    margin-top: 3px;
    line-height: 1.4;
}

.mm__feat {
    position: relative;
    overflow: hidden;
    margin: 14px 14px 14px 8px;
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 11px;
    color: #1E1B4B;
    border: 1px solid rgba(79, 70, 229, .16);
    background: linear-gradient(160deg, #EEF1FF 0%, #E5ECFF 52%, #E1F3FF 100%);
}

.mm__feat::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, .10), transparent 70%);
    pointer-events: none;
}

.mm__feat-tag {
    position: relative;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(79, 70, 229, .10);
    border: 1px solid rgba(79, 70, 229, .22);
    color: #4338CA;
    padding: 4px 11px;
    border-radius: 999px;
}

.mm__feat-icon {
    position: relative;
    width: 42px;
    height: 42px;
    margin-bottom: auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    border: 1px solid transparent;
    color: #fff;
}

.mm__feat-icon svg {
    width: 22px;
    height: 22px;
}

.mm__feat h4 {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1E1B4B;
    letter-spacing: -.01em;
}

.mm__feat p {
    position: relative;
    font-size: 12.5px;
    line-height: 1.55;
    color: #475569;
}

.mm__feat-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: 6px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mm__feat-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 20, 56, .22);
}

@media (max-width: 1024px) {
    /* On small screens the mobile menu replaces these panels */
    .drop-panel--mm {
        display: none;
    }
}

.nb-lang-toggle, .mobile-lang-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid rgba(79, 70, 229, .28);
    font-size: 13px;
    font-weight: 800;
    color: #6B7280;
    box-shadow: 0 1px 4px rgba(13, 27, 62, .08);
    transition: var(--transition-ui);
    cursor: pointer;
    flex-shrink: 0;
}

.lang-globe {
    color: #4F46E5;
    flex-shrink: 0;
}

[data-theme="dark"] .lang-globe {
    color: #818CF8;
}

.nb-lang-toggle:hover, .mobile-lang-toggle:hover {
    border-color: rgba(79, 70, 229, .3);
    background: #EEF4FF;
}

.lang-opt {
    color: #9CA3AF;
    transition: color var(--transition-fast);
    letter-spacing: .02em;
}

.lang-opt--active {
    color: var(--color-primary);
}

.lang-sep {
    color: rgba(79, 70, 229, .2);
}

.mobile-lang-toggle {
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}

.nb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nb-login {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    padding: 9px 18px;
    border-radius: 8px;
    transition: var(--transition-ui);
}

.nb-login:hover {
    color: #4F46E5;
    background: #EEF4FF;
}

.nb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    transition: var(--transition-ui);
    box-shadow: 0 2px 10px rgba(79, 70, 229, .3);
    position: relative;
    overflow: hidden;
}

.nb-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 60%);
    pointer-events: none;
}

.nb-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(79, 70, 229, .45);
}

.nb-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    background: none;
    border: none;
}

.nb-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #6B7280;
    border-radius: 2px;
    transition: var(--transition-ui);
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 300;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    transition: right var(--transition-slow);
    overflow-y: auto;
}

.mobile-drawer--open {
    right: 0;
}

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F3F4F6;
}

.mobile-drawer__title {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.mobile-drawer__close {
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: var(--transition-ui);
    cursor: pointer;
    border: none;
}

.mobile-drawer__close:hover {
    background: #E5E7EB;
    color: #111827;
}

.mobile-drawer__nav {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 14px 8px 6px;
}

.mobile-section-label:first-child {
    padding-top: 4px;
}

.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    border-radius: 10px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-link:hover {
    background: #F5F8FF;
    color: #4F46E5;
}

.mobile-link .em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    background: #DBEAFE;
    color: #4F46E5;
    padding: 2px 8px;
    border-radius: 20px;
}

.mobile-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
    padding: 20px;
    border-bottom: 1px solid #F3F4F6;
}

.mobile-login {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #4F46E5;
    border: 2px solid #4F46E5;
    border-radius: 50px;
    transition: var(--transition-ui);
}

.mobile-login:hover {
    background: #4F46E5;
    color: #fff;
}

/* --------------------------------------------------------------------------
   8. Hero — centered, clean layout
   -------------------------------------------------------------------------- */
/* Hero is ALWAYS dark in both themes — colors are fixed, not theme-driven. */
@property --wp {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.hh-hero {
    position: relative;
    overflow: hidden;
    margin: 0 15px 0;
    border-radius: 16px;
    padding: 74px var(--content-pad) 0;
    background: radial-gradient(680px 360px at 86% 4%, rgba(6, 182, 212, .14) 0%, transparent 62%), radial-gradient(640px 420px at 6% 94%, rgba(79, 70, 229, .20) 0%, transparent 62%), linear-gradient(180deg, #0E1322 0%, #0c1430 100%)
}

.hh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .4;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 78%)
}

.hh-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns:1.06fr .94fr;
    gap: 54px;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-bottom: 74px
}

.hh-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(99, 102, 241, .14);
    border: 1px solid rgba(99, 102, 241, .32);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: #c7d2fe;
    margin-bottom: 22px
}

.hh-hero h1 {
    font-family: var(--font-display, inherit);
    font-size: clamp(2.1rem, 4vw, 3.25rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.06;
    letter-spacing: -.035em;
    margin-bottom: 18px
}

.hh-hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hh-hero__sub {
    font-size: 1.07rem;
    color: #AFB7CE;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 470px
}

.hh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px
}

.hh-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .05);
    color: #EAEDF7;
    border: 1.5px solid rgba(255, 255, 255, .14);
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: border-color .2s, color .2s, background .2s
}

.hh-btn-outline:hover {
    border-color: #818cf8;
    color: #fff
}

.hh-btn-outline:active {
    transform: scale(.97)
}

.hh-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px
}

.hh-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #AFB7CE
}

.hh-hero__trust-item .dot {
    display: inline-flex;
    color: #06B6D4
}

.hh-hero__trust-item .dot svg {
    width: 15px;
    height: 15px
}

.hh-hero__visual {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

/* Blue variant (light mode) — reversible, gated by $hero_variant in index.php. Dark mode keeps the original dark hero untouched. */
.hh-hero--blue {
    background: radial-gradient(680px 360px at 86% 4%, rgba(255, 255, 255, .12) 0%, transparent 60%), radial-gradient(620px 420px at 4% 96%, rgba(0, 0, 0, .14) 0%, transparent 62%), linear-gradient(180deg, #0053E2 0%, #0040B8 100%)
}

.hh-hero--blue .hh-hero__chip {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .30);
    color: #fff
}

.hh-hero--blue .hh-hero h1 em, .hh-hero--blue h1 em {
    background: linear-gradient(120deg, #ffffff, #a5e8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hh-hero--blue .hh-hero__sub {
    color: rgba(255, 255, 255, .90)
}

.hh-hero--blue .hh-hero__trust-item {
    color: rgba(255, 255, 255, .86)
}

.hh-hero--blue .hh-hero__trust-item .dot {
    color: #a5e8ff
}

/* Dark mode: restore the original dark banner (blue variant is light-mode only) */
[data-theme="dark"] .hh-hero--blue {
    background: radial-gradient(680px 360px at 86% 4%, rgba(6, 182, 212, .14) 0%, transparent 62%), radial-gradient(640px 420px at 6% 94%, rgba(79, 70, 229, .20) 0%, transparent 62%), linear-gradient(180deg, #0E1322 0%, #0c1430 100%)
}

[data-theme="dark"] .hh-hero--blue .hh-hero__chip {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .32);
    color: #c7d2fe
}

[data-theme="dark"] .hh-hero--blue h1 em {
    background: linear-gradient(120deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

[data-theme="dark"] .hh-hero--blue .hh-hero__sub {
    color: #AFB7CE
}

[data-theme="dark"] .hh-hero--blue .hh-hero__trust-item {
    color: #AFB7CE
}

[data-theme="dark"] .hh-hero--blue .hh-hero__trust-item .dot {
    color: #06B6D4
}

.hh-perf {
    width: 100%;
    max-width: 404px;
    background: #141A2C;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    padding: 16px;
    position: relative;
    animation: hhFloatY 7s ease-in-out infinite;
    will-change: transform
}

.hh-perf__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.hh-perf__dots {
    display: flex;
    gap: 5px
}

.hh-perf__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block
}

.hh-perf__url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #1B2238;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    color: #AFB7CE;
    font-weight: 600
}

.hh-perf__url svg {
    width: 12px;
    height: 12px;
    color: #10B981;
    flex-shrink: 0
}

.hh-perf__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #10B981;
    text-transform: uppercase;
    letter-spacing: .05em
}

.hh-perf__live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    animation: hhPulse 2s infinite
}

.hh-perf__main {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 6px 16px
}

.hh-gauge {
    --wp: 96%;
    width: 94px;
    height: 94px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(#6366F1 0 var(--wp), rgba(255, 255, 255, .08) var(--wp) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: hhGauge 1.5s ease-out forwards
}

.hh-gauge::after {
    content: '';
    position: absolute;
    inset: 9px;
    background: #141A2C;
    border-radius: 50%
}

.hh-gauge__in {
    position: relative;
    z-index: 1;
    text-align: center
}

.hh-gauge__n {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    font-weight: 900;
    color: #EAEDF7;
    line-height: 1
}

.hh-gauge__l {
    font-size: 9.5px;
    font-weight: 700;
    color: #AFB7CE;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px
}

.hh-perf__mr h4 {
    font-size: 15px;
    font-weight: 800;
    color: #EAEDF7;
    margin-bottom: 5px
}

.hh-perf__mr p {
    font-size: 12.5px;
    color: #AFB7CE;
    line-height: 1.5
}

.hh-perf__stats {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 9px
}

.hh-pstat {
    background: #1B2238;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 11px 12px
}

.hh-pstat__v {
    font-size: 1.02rem;
    font-weight: 900;
    color: #EAEDF7;
    line-height: 1
}

.hh-pstat__v span {
    color: #06B6D4
}

.hh-pstat__l {
    font-size: 10px;
    color: #AFB7CE;
    font-weight: 600;
    margin-top: 4px
}

.hh-pstat__spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    margin-top: 7px
}

.hh-pstat__spark i {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #06B6D4, #4F46E5);
    transform-origin: bottom;
    animation: hhSpark 1.6s ease-in-out infinite
}

.hh-feats {
    width: 100%;
    max-width: 404px;
    margin-top: 10px;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.hh-feat {
    background: #141A2C;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: border-color .2s, transform .2s, box-shadow .2s
}

.hh-feat:hover {
    border-color: rgba(99, 102, 241, .42);
    transform: translateY(-3px)
}

.hh-feat__ic {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.hh-feat__ic svg {
    width: 16px;
    height: 16px
}

.hh-feat__ic--indigo {
    background: linear-gradient(135deg, #4F46E5, #6366F1)
}

.hh-feat__ic--cyan {
    background: linear-gradient(135deg, #06B6D4, #0891B2)
}

.hh-feat__ic--violet {
    background: linear-gradient(135deg, #7C3AED, #6D28D9)
}

.hh-feat__ic--emerald {
    background: linear-gradient(135deg, #10B981, #059669)
}

.hh-feat strong {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: #EAEDF7;
    margin-bottom: 2px;
    line-height: 1.2
}

.hh-feat span {
    font-size: 10.5px;
    color: #AFB7CE;
    line-height: 1.4
}

@keyframes hhFloatY {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-8px)
    }
}

@keyframes hhPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .5)
    }
    70% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
    }
}

@keyframes hhGauge {
    from {
        --wp: 0%
    }
    to {
        --wp: 96%
    }
}

@keyframes hhSpark {
    0%, 100% {
        transform: scaleY(.5)
    }
    50% {
        transform: scaleY(1)
    }
}

/* Hero is FIXED dark even in dark theme: neutralize the global dark h1 rule (var --d-text) */
[data-theme="dark"] .hh-hero h1 {
    color: #fff !important
}

@media (prefers-reduced-motion: reduce) {
    .hh-perf, .hh-pstat__spark i, .hh-perf__live i, .hh-gauge {
        animation: none
    }
}

@media (max-width: 1024px) {
    .hh-hero {
        padding: 64px 24px 0
    }

    .hh-hero__inner {
        grid-template-columns:1fr;
        padding-bottom: 56px
    }

    .hh-hero__visual {
        display: none
    }
}

@media (max-width: 640px) {
    .hh-hero {
        padding: 48px 20px 0
    }

    .hh-hero__inner {
        padding-bottom: 48px
    }
}

.wh-hero, .vps-hero, .ds-hero, .sd-hero, .cl-hero, .pricing-hero {
    margin: 0 15px 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.stars {
    color: #fbbf24;
    font-size: .9rem;
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   9. Trust Bar
   -------------------------------------------------------------------------- */
.trust-bar {
    background: linear-gradient(180deg, #F0F4FF 0%, #fff 100%);
    border-bottom: 1px solid rgba(79, 70, 229, .08);
    padding-block: 28px;
}

/* --------------------------------------------------------------------------
   9b. Logo marquee — supported technologies
   -------------------------------------------------------------------------- */
.logo-marquee {
    background: #0E1322;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding-block: 38px;
    overflow: hidden;
}

.logo-marquee__label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9AA5C0;
    margin-bottom: 26px;
}

.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 64px;
    padding-right: 64px;
    animation: marqueeScroll 38s linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.marquee__item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #AFB7CE;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    opacity: .6;
    filter: grayscale(1);
    transition: opacity var(--transition-base), filter var(--transition-base), color var(--transition-base);
}

.marquee__item svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.marquee__item:hover {
    opacity: 1;
    filter: grayscale(0);
    color: #818CF8;
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }

    .marquee {
        overflow-x: auto;
    }
}

@media (max-width: 600px) {
    .marquee__track {
        gap: 44px;
        padding-right: 44px;
    }

    .marquee__item {
        font-size: 15px;
    }
}

.trust-bar__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-right: 1px solid rgba(79, 70, 229, .08);
    transition: background var(--transition-fast);
}

.trust-bar__item:last-child {
    border-right: none;
}

.trust-bar__item:hover {
    background: rgba(79, 70, 229, .03);
    border-radius: 12px;
}

.trust-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #EEF4FF, #E0EAFF);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .1);
}

.trust-bar__item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #141438;
    margin-bottom: 3px;
}

.trust-bar__item small {
    font-size: 12px;
    color: #6B7280;
}

/* --------------------------------------------------------------------------
   10. Split Sections
   -------------------------------------------------------------------------- */
.split-section {
    padding-block: 100px;
    position: relative;
    overflow: hidden;
}

.split-section--a {
    background: #fff;
}

.split-section--a::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(79, 70, 229, .06) 0%, transparent 65%);
    pointer-events: none;
}

.split-section--b {
    background: linear-gradient(180deg, #F9FAFB 0%, #fff 100%);
}

.split-section--b::before {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, .07) 0%, transparent 65%);
    pointer-events: none;
}

.split-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.split-section__grid--reverse .split-section__visual {
    order: -1;
}

.split-section__visual.hsplit {
    position: relative;
    padding: 34px 26px;
}

.hsplit-blob {
    position: absolute;
    inset: 4% 0;
    background: linear-gradient(135deg, #4F46E5 15%, #6366F1 55%, #06B6D4);
    border-radius: 30px 90px 30px 90px;
    box-shadow: 0 30px 70px rgba(79, 70, 229, .25);
    z-index: 0;
}

.hsplit--rev .hsplit-blob {
    border-radius: 90px 30px 90px 30px;
    background: linear-gradient(225deg, #4F46E5 15%, #6366F1 55%, #06B6D4);
}

.hsplit > .dashboard-card, .hsplit > .vps-card, .hsplit > .split-section__photo {
    position: relative;
    z-index: 1;
}

.hsplit-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 20, 56, .20);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #141438;
    z-index: 2;
}

.hsplit-chip svg {
    width: 16px;
    height: 16px;
    color: #4F46E5;
}

.hsplit-chip--tr {
    top: 10px;
    right: -6px;
}

.hsplit-chip--bl {
    bottom: 10px;
    left: -6px;
}

.split-section .feature-list .check-icon {
    background: rgba(16, 185, 129, .13);
    color: #10B981;
}

[data-theme="dark"] .hsplit-chip {
    background: #1B2238;
    color: var(--d-text);
}

[data-theme="dark"] .hsplit-chip svg {
    color: #7DD3FC;
}

@media (max-width: 768px) {
    .split-section__visual.hsplit {
        padding: 22px 12px;
    }

    .hsplit-chip {
        font-size: 11.5px;
        padding: 8px 11px;
    }

    .hsplit-chip--tr {
        right: 0;
    }

    .hsplit-chip--bl {
        left: 0;
    }
}

.split-section__visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.split-section__photo {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(79, 70, 229, .14), 0 2px 12px rgba(0, 0, 0, .06);
    border: 1px solid rgba(79, 70, 229, .1);
}

.split-section__photo img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.split-section__text h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

.split-section__text h2 em {
    font-style: normal;
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4F46E5;
    margin-bottom: 14px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #EEF4FF, #E8F6F2);
    border: 1px solid rgba(79, 70, 229, .15);
    border-radius: 999px;
}

.section-sub {
    font-size: 1.05rem;
    color: #4B5563;
    line-height: 1.8;
    margin-bottom: 28px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}

.check-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    margin-top: 2px;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .3);
}

/* --------------------------------------------------------------------------
   10a. cPanel Dashboard Card
   -------------------------------------------------------------------------- */
.dashboard-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 60px rgba(79, 70, 229, .14), 0 2px 12px rgba(0, 0, 0, .06);
    overflow: hidden;
    border: 1px solid rgba(79, 70, 229, .1);
}

.dashboard-card__header {
    background: linear-gradient(135deg, #141438, #4F46E5);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.window-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot--red {
    background: #ff5f57;
}

.dot--yellow {
    background: #ffbd2e;
}

.dot--green {
    background: #28ca41;
}

.window-title {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    font-weight: 600;
}

.dashboard-card__body {
    padding: 24px;
}

.cpanel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.cpanel-stat__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #141438;
}

.cpanel-stat__label {
    display: block;
    font-size: 11px;
    color: #9CA3AF;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.progress-bar {
    height: 6px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #4F46E5, #6366F1);
    border-radius: 999px;
    transition: width 1s ease;
}

.progress-bar__fill--teal {
    background: linear-gradient(90deg, #06B6D4, #0891B2);
}

.cpanel-apps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.cpanel-app {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F9FAFF;
    border: 1px solid rgba(79, 70, 229, .07);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    transition: background var(--transition-fast);
}

.cpanel-app:hover {
    background: #EEF4FF;
}

.cpanel-app__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
}

.cpanel-app__icon--wp {
    background: linear-gradient(135deg, #3858e9, #5b74f0);
}

.cpanel-app__icon--ssl {
    background: linear-gradient(135deg, #06B6D4, #0891B2);
}

.cpanel-app__icon--mail {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.cpanel-app__icon--db {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.status-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.status-badge--green {
    background: #d1fae5;
    color: #065f46;
}

.status-badge--blue {
    background: #dbeafe;
    color: #3730A3;
}

.cpanel-uptime {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #065f46;
    font-weight: 600;
    padding: 10px 14px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 12px;
}

.uptime-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   10b. Migration Card
   -------------------------------------------------------------------------- */
.migration-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 60px rgba(6, 182, 212, .12), 0 2px 12px rgba(0, 0, 0, .06);
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, .15);
}

.migration-card__header {
    background: linear-gradient(135deg, #0D2B20, #0a4d3a);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.migration-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.migration-server {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: #F9FAFF;
    border-radius: 16px;
    border: 1.5px solid rgba(79, 70, 229, .08);
}

.migration-server--to {
    border-color: rgba(6, 182, 212, .3);
    background: rgba(6, 182, 212, .04);
}

.server-icon {
    font-size: 2rem;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
    display: inline-flex;
}

.server-icon--active {
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, .6));
    color: var(--color-teal);
}

.server-label {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.server-url {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.migration-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.arrow-line {
    position: relative;
    width: 100%;
    height: 18px;
    background: linear-gradient(90deg, rgba(79, 70, 229, .1), rgba(6, 182, 212, .4), rgba(79, 70, 229, .1));
    border-radius: 999px;
    overflow: hidden;
}

.arrow-packet {
    position: absolute;
    width: 24px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .9), transparent);
    border-radius: 999px;
    animation: packetMove 1.6s linear infinite;
}

@keyframes packetMove {
    from {
        left: -30px;
    }
    to {
        left: 110%;
    }
}

.arrow-label {
    font-size: 11px;
    color: #06B6D4;
    font-weight: 700;
}

.migration-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.migration-progress__bar {
    height: 8px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
}

.migration-progress__fill {
    height: 100%;
    width: 78%;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    border-radius: 999px;
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .8
    }
}

.migration-progress__text {
    font-size: 12px;
    color: #6B7280;
    text-align: center;
    font-weight: 600;
}

.migration-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mig-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #9CA3AF;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 500;
}

.mig-check--done {
    color: #065f46;
    background: #ecfdf5;
    font-weight: 600;
}

.mig-check--active {
    color: #4F46E5;
    background: #EEF4FF;
    font-weight: 600;
}

.mig-check--done span, .mig-check--active span {
    font-weight: 800;
    flex-shrink: 0;
}

.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   11. Pricing Section
   -------------------------------------------------------------------------- */
.pricing-section {
    padding-block: 100px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(79, 70, 229, .05) 0%, transparent 70%);
    pointer-events: none;
}

.pricing-section h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #141438;
}

.billing-toggle {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-block: 32px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(79, 70, 229, .1);
    border-radius: 999px;
    padding: 5px;
    width: fit-content;
    margin-inline: auto;
    box-shadow: 0 2px 12px rgba(79, 70, 229, .08);
}

.billing-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #6B7280;
    background: transparent;
    transition: var(--transition-ui);
    border: none;
}

.billing-btn--active {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    color: #fff;
    box-shadow: 0 4px 16px rgba(79, 70, 229, .35);
}

.billing-btn:hover:not(.billing-btn--active) {
    color: #4F46E5;
    background: rgba(79, 70, 229, .06);
}

.badge-save {
    padding: 2px 8px;
    background: linear-gradient(135deg, #06B6D4, #0891B2);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
}

.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border: 1.5px solid rgba(79, 70, 229, .12);
    border-radius: 16px;
    overflow: hidden;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 48px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(79, 70, 229, .08);
}

.pricing-tab {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    color: #6B7280;
    border-right: 1.5px solid rgba(79, 70, 229, .1);
    transition: var(--transition-ui);
    position: relative;
}

.pricing-tab:last-child {
    border-right: none;
}

.pricing-tab:hover:not(.pricing-tab--active) {
    background: #F8FAFF;
    color: #4F46E5;
}

.pricing-tab--active {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    color: #fff;
}

/* --------------------------------------------------------------------------
   12. How It Works
   -------------------------------------------------------------------------- */
.how-it-works {
    padding-block: 100px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.how-it-works::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, .15), rgba(6, 182, 212, .15), transparent);
}

.how-it-works h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    margin-bottom: 56px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 0;
    position: relative;
}

.steps-grid::before {
    content: '';
    position: absolute;
    top: 44px;
    left: calc(12.5% + 28px);
    right: calc(12.5% + 28px);
    height: 2px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    z-index: 0;
    opacity: .3;
}

.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    position: relative;
    z-index: 1;
    padding: 32px 20px;
    background: #F8FAFF;
    border: 1px solid rgba(79, 70, 229, .08);
    border-radius: 20px;
    transition: var(--transition-ui-base);
}

.step-card:hover {
    background: #fff;
    box-shadow: 0 12px 40px rgba(79, 70, 229, .12);
    transform: translateY(-6px);
    border-color: rgba(79, 70, 229, .2);
}

.step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .4);
    flex-shrink: 0;
    position: relative;
}

.step-number::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(79, 70, 229, .15);
}

.step-icon {
    color: #4F46E5;
    opacity: .7;
}

.step-card:hover .step-icon {
    opacity: 1;
}

.step-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #141438;
}

.step-card p {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.7;
    margin-top: -4px;
}

/* --------------------------------------------------------------------------
   13. Performance Metrics (merged into Platform)
   -------------------------------------------------------------------------- */
.metrics-grid--merged {
    margin-top: 64px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px 24px;
    border-right: 1px solid rgba(79, 70, 229, .08);
    transition: background var(--transition-base);
}

.metric-item:last-child {
    border-right: none;
}

.metric-item:hover {
    background: rgba(79, 70, 229, .03);
}

.metric-value {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-primary) 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -.02em;
}

.metric-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
    padding-block: 100px;
    background: linear-gradient(180deg, #F8FAFF 0%, #fff 100%);
    position: relative;
}

.testimonials h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    margin-bottom: 48px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}

.testimonial-card {
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .08);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: 0 2px 20px rgba(79, 70, 229, .05);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(79, 70, 229, .14);
    border-color: rgba(79, 70, 229, .2);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 5rem;
    line-height: 1;
    color: rgba(79, 70, 229, .07);
    font-family: Georgia, serif;
    pointer-events: none;
}

.testimonial-stars {
    color: #fbbf24;
    font-size: 1rem;
    letter-spacing: 3px;
}

.testimonial-card blockquote {
    font-size: 15px;
    color: #374151;
    line-height: 1.8;
    font-style: italic;
    flex: 1;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgba(79, 70, 229, .06);
    padding-top: 20px;
    margin-top: auto;
}

.author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

.testimonial-author strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.testimonial-author span {
    font-size: 12px;
    color: #9CA3AF;
}

/* --------------------------------------------------------------------------
   15. Support Section
   -------------------------------------------------------------------------- */
.support-section {
    padding-block: 100px;
    background: #fff;
}

.support-section h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    margin-bottom: 48px;
}

.support-photo {
    border-radius: 24px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto 48px;
    box-shadow: 0 8px 40px rgba(79, 70, 229, .12), 0 2px 12px rgba(0, 0, 0, .06);
}

.support-photo img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}

.support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 36px 32px;
    background: #F8FAFF;
    border: 1px solid rgba(79, 70, 229, .08);
    border-radius: 24px;
    transition: var(--transition-ui-base);
    position: relative;
    overflow: hidden;
}

.support-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.support-card:hover {
    background: #fff;
    box-shadow: 0 16px 50px rgba(79, 70, 229, .13);
    transform: translateY(-6px);
    border-color: rgba(79, 70, 229, .18);
}

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

.support-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #EEF4FF, #E0EAFF);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-ui);
    box-shadow: 0 4px 14px rgba(79, 70, 229, .12);
}

.support-card:hover .support-icon {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .4);
}

.support-card:hover .support-icon svg {
    stroke: #fff !important;
}

.support-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #141438;
}

.support-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.75;
    flex: 1;
}

.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #4F46E5;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.support-link:hover {
    gap: 10px;
    color: #6366F1;
}

/* --------------------------------------------------------------------------
   16. FAQ Section
   -------------------------------------------------------------------------- */
.faq-section {
    padding-block: 100px;
    background: linear-gradient(180deg, #F9FAFB 0%, #F1F2F4 50%, #F9FAFB 100%);
}

.faq-section h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    margin-bottom: 48px;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 0;
}

.faq-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .09);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-ui);
    box-shadow: 0 2px 12px rgba(79, 70, 229, .04);
}

.faq-item:hover {
    border-color: rgba(79, 70, 229, .2);
    box-shadow: 0 6px 24px rgba(79, 70, 229, .1);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    text-align: left;
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: #4F46E5;
}

.faq-question[aria-expanded="true"] {
    color: #4F46E5;
}

.faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 400;
    flex-shrink: 0;
    transition: var(--transition-ui);
}

.faq-question[aria-expanded="true"] .faq-icon {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

.faq-answer {
    padding: 0 24px 20px;
    border-top: 1px solid rgba(79, 70, 229, .06);
}

.faq-answer p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.85;
    padding-top: 16px;
}

/* --------------------------------------------------------------------------
   17. Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
    background: linear-gradient(135deg, #0A1628 0%, #0f2460 45%, #0A2818 100%);
    padding-block: 100px;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 500px at 20% 60%, rgba(79, 70, 229, .28) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 85% 40%, rgba(6, 182, 212, .18) 0%, transparent 70%);
    pointer-events: none;
}

.final-cta::after {
    content: '';
    position: absolute;
    top: -100px;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(79, 70, 229, .15), transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.final-cta__inner {
    position: relative;
    z-index: 1;
}

.final-cta__content {
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.final-cta__content h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.final-cta__content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.8;
}

.final-cta__content p strong {
    color: #06B6D4;
    font-weight: 700;
}

.cta-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.cta-chip {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    padding: 6px 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: #060D1F;
    color: rgba(255, 255, 255, .55);
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, .4), rgba(6, 182, 212, .3), transparent);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-block: 72px;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    transition: color var(--transition-fast);
}

.footer__logo:hover {
    color: #60a5fa;
}

.footer__logo-cloud {
    height: 30px;
    width: auto;
    display: block;
}

.footer__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.footer__logo-tag {
    font-size: 10px;
    font-weight: 400;
    color: #64748B;
    letter-spacing: .2px;
}

.footer__desc {
    font-size: 13px;
    line-height: 1.8;
    color: #AFB7CE;
    max-width: 260px;
}

.footer__social {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    transition: var(--transition-ui);
}

.social-link:hover {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .4);
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer__col-title {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: .9;
}

.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__col a {
    font-size: 14px;
    color: rgba(255, 255, 255, .45);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

.footer__col a:hover {
    color: rgba(255, 255, 255, .85);
    padding-left: 4px;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-block: 20px;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer__bottom p {
    font-size: 13px;
    color: #AFB7CE;
}

.footer__legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    transition: color var(--transition-fast);
}

.footer__legal a:hover {
    color: rgba(255, 255, 255, .85);
}

.footer__payment {
    display: flex;
    gap: 8px;
    align-items: center;
}

.payment-badge {
    padding: 4px 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    transition: var(--transition-ui);
}

.payment-badge:hover {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   19. Responsive — 900px (Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    :root {
        --content-pad: 64px;
    }
}

@media (max-width: 1024px) {
    :root {
        --content-pad: 40px;
    }
}

@media (max-width: 900px) {
    :root {
        --container-pad: var(--space-5);
        --content-pad: var(--space-5);
    }

    .nb-nav {
        display: none;
    }

    .nb-toggle {
        display: flex;
    }

    .promo-bar__right {
        display: none;
    }

    .nb-cta {
        display: none;
    }

    .nb-actions {
        gap: 12px;
    }

    .nb-logo-tag {
        display: none;
    }

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

    .trust-bar__item:nth-child(2) {
        border-right: none;
    }

    .trust-bar__item {
        border-bottom: 1px solid rgba(79, 70, 229, .07);
    }

    .trust-bar__item:nth-child(3), .trust-bar__item:nth-child(4) {
        border-bottom: none;
    }

    .split-section__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .split-section__grid--reverse .split-section__visual {
        order: 0;
    }

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

    .steps-grid::before {
        display: none;
    }

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

    .metric-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .metric-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .08);
    }

    .metric-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }

    .support-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }

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

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   20. Responsive — 600px (Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    :root {
        --container-pad: var(--space-4);
        --content-pad: var(--space-4);
        --navbar-height: 64px;
        --promo-height: 48px;
    }

    .promo-bar {
        padding-inline: var(--space-8);
        height: auto;
        min-height: var(--promo-height);
        padding-block: var(--space-2);
    }

    .promo-bar__inner {
        flex-wrap: wrap;
    }

    .promo-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    .proof-sep {
        display: none;
    }

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

    .trust-bar__item {
        border-right: none;
        border-bottom: 1px solid rgba(79, 70, 229, .07);
    }

    .trust-bar__item:last-child {
        border-bottom: none;
    }

    .pricing-tabs {
        width: 100%;
        flex-direction: column;
        border-radius: 14px;
    }

    .pricing-tab {
        border-right: none;
        border-bottom: 1.5px solid rgba(79, 70, 229, .1);
    }

    .pricing-tab:last-child {
        border-bottom: none;
    }

    .billing-toggle {
        flex-direction: column;
        align-items: stretch;
        border-radius: 16px;
    }

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

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

    .metric-item {
        padding: 24px 16px;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__brand {
        grid-column: auto;
    }

    .final-cta {
        padding-block: 72px;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-lg {
        justify-content: center;
    }

    .split-section {
        padding-block: 64px;
    }

    .split-section__text h2 {
        font-size: var(--font-size-3xl);
    }

    .support-section, .how-it-works, .testimonials, .faq-section, .pricing-section {
        padding-block: 72px;
    }
}

/* --------------------------------------------------------------------------
   21. Accessibility & Focus
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid #4F46E5;
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Micro-interactions (scroll-reveal, spotlight, price tick)
   -------------------------------------------------------------------------- */
/* Reveal on scroll — only active if JS is present (class on <html>) */
.has-js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

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

.has-js .reveal--stagger.is-visible > * {
    animation: revealUp .6s cubic-bezier(.22, 1, .36, 1) both;
}

.has-js .reveal--stagger > * {
    opacity: 0;
}

.has-js .reveal--stagger.is-visible > *:nth-child(1) {
    animation-delay: .04s
}

.has-js .reveal--stagger.is-visible > *:nth-child(2) {
    animation-delay: .10s
}

.has-js .reveal--stagger.is-visible > *:nth-child(3) {
    animation-delay: .16s
}

.has-js .reveal--stagger.is-visible > *:nth-child(4) {
    animation-delay: .22s
}

.has-js .reveal--stagger.is-visible > *:nth-child(5) {
    animation-delay: .28s
}

.has-js .reveal--stagger.is-visible > *:nth-child(6) {
    animation-delay: .34s
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.sdp-card {
    isolation: isolate;
}

.sdp-card .sdp-card__inner {
    position: relative;
    z-index: 1;
}

.sdp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -10%), rgba(99, 102, 241, .12), transparent 55%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sdp-card:hover::after {
    opacity: 1;
}

.sdp-price__num.is-tick, .sdp-price__cur.is-tick {
    animation: priceTick .42s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes priceTick {
    0% {
        transform: translateY(6px);
        opacity: .2
    }
    60% {
        transform: translateY(-2px);
        opacity: 1
    }
    100% {
        transform: none
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .has-js .reveal, .has-js .reveal--stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Touch: :hover fires on tap and the "lift" stays stuck after it.
   Only neutralize the hover transform; press feedback lives in :active. */
@media (hover: none) {
    .promo-btn:hover, .nb-cta:hover, .ptrust-card:hover, .sdp-card:hover, .sdp-card--pop:hover,
    .sdp-cta:hover, .platform-card:hover, .vlt-order:hover, .dlt-order:hover {
        transform: none;
    }
}

@media print {
    .promo-bar, .navbar, .mobile-drawer, .mobile-overlay {
        display: none;
    }

    .hh-hero {
        min-height: auto;
        background: white;
    }
}

/* --------------------------------------------------------------------------
   NEW: Navbar adjustments
   -------------------------------------------------------------------------- */
.nb-plain-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    transition: var(--transition-ui);
    position: relative;
}

.nb-plain-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--transition-fast);
    transform-origin: left;
}

.nb-plain-link:hover {
    color: #4F46E5;
}

.nb-plain-link:hover::after {
    transform: scaleX(1);
}

.nb-chevron {
    font-size: 10px;
    transition: transform var(--transition-fast);
    color: #9CA3AF;
}

.has-drop:hover .nb-chevron {
    transform: rotate(180deg);
    color: #4F46E5;
}

/* Ensure navbar classes exist if not defined in head */
.nb-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .4);
}

.nb-logo-name {
    display: block;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(135deg, #141438 0%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nb-logo-name span {
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nb-logo-tag {
    display: block;
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 400;
    letter-spacing: .5px;
}

/* --------------------------------------------------------------------------
   NEW: Hero product cards
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   NEW: Trust bar — Trustpilot layout
   -------------------------------------------------------------------------- */
.trust-bar__inner {
    display: flex;
    align-items: center;
    gap: 32px;
}

.trust-tp {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tp-stars {
    color: #00b67a;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.tp-details strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #141438;
    line-height: 1.1;
}

.tp-details span {
    display: block;
    font-size: 11px;
    color: #9CA3AF;
}

.trust-sep {
    width: 1px;
    height: 52px;
    background: rgba(79, 70, 229, .1);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   NEW: VPS Card (Developer section visual)
   -------------------------------------------------------------------------- */
.vps-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 60px rgba(79, 70, 229, .14), 0 2px 12px rgba(0, 0, 0, .06);
    overflow: hidden;
    border: 1px solid rgba(79, 70, 229, .1);
}

.vps-card__header {
    background: linear-gradient(135deg, #141438, #4F46E5);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.vps-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vps-stats-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vps-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vps-stat__label {
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vps-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vps-bar {
    flex: 1;
    height: 8px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
}

.vps-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #4F46E5, #6366F1);
    border-radius: 999px;
    transition: width .8s ease;
}

.vps-bar__fill--teal {
    background: linear-gradient(90deg, #06B6D4, #0891B2);
}

.vps-bar__val {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.vps-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vps-spec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding: 10px 12px;
    background: #F9FAFF;
    border: 1px solid rgba(79, 70, 229, .07);
    border-radius: 10px;
}

.vps-spec__icon {
    font-size: .95rem;
    flex-shrink: 0;
    color: var(--color-teal);
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   NEW: Platform Section
   -------------------------------------------------------------------------- */
.platform-section {
    padding-block: 100px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.platform-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(79, 70, 229, .04) 0%, transparent 70%);
    pointer-events: none;
}

.platform-section h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    margin-bottom: 0;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(184px, auto);
    grid-auto-flow: dense;
    gap: 18px;
    margin-top: 48px;
    position: relative;
    z-index: 1;
}

/* Bento spans (asymmetric grid) */
.platform-card--lg {
    grid-column: span 2;
    grid-row: span 2;
}

.platform-card--wide {
    grid-column: span 2;
}

.platform-card {
    padding: 30px 28px;
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .08);
    border-radius: 22px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.platform-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 102, 241, .10), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.platform-card:hover::before {
    opacity: 1;
}

.platform-card--lg {
    background: linear-gradient(155deg, #FFFFFF 0%, #F4F6FF 100%);
    justify-content: flex-end;
}

.platform-card--lg .platform-icon {
    width: 72px;
    height: 72px;
    margin-bottom: auto;
}

.platform-card--lg h3 {
    font-size: 1.5rem;
    margin-top: 22px;
}

.platform-card--lg p {
    font-size: 15px;
    max-width: 42ch;
}

.platform-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(79, 70, 229, .12);
    border-color: rgba(79, 70, 229, .18);
}

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

.platform-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #EEF4FF, #E0EAFF);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .1);
    transition: var(--transition-ui-base);
}

.platform-card:hover .platform-icon {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .4);
}

.platform-card:hover .platform-icon svg {
    stroke: #fff;
}

.platform-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #141438;
    margin-bottom: 10px;
}

.platform-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   NEW: Migration Standalone Section
   -------------------------------------------------------------------------- */
.migration-section {
    padding-block: 100px;
    background: linear-gradient(180deg, #FFF6F2 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.migration-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 400px at 100% 50%, rgba(255, 107, 74, .08) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 0% 30%, rgba(6, 182, 212, .06) 0%, transparent 65%);
    pointer-events: none;
}

.migration-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .section-eyebrow {
    background: rgba(99, 102, 241, .15);
    color: #A5B4FC;
    border: 1px solid rgba(99, 102, 241, .28);
}

.migration-section__text .section-eyebrow {
    background: rgba(255, 107, 74, .1);
    border-color: rgba(255, 107, 74, .25);
    color: var(--color-accent-dark);
}

.migration-section__text h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #141438;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.migration-section__text > p {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.8;
    margin-bottom: 24px;
}

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

.mig-feat-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.mig-feat-list li::before {
    content: '✓';
    color: #06B6D4;
    font-weight: 900;
    font-size: 1rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   NEW: Final CTA label
   -------------------------------------------------------------------------- */
.final-cta__label {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    color: #06B6D4;
    text-transform: uppercase;
    margin-bottom: -8px;
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .06);
    transition: var(--transition-ui);
}

.btn-ghost-light:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   RESPONSIVE: New sections mobile/tablet
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .trust-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .trust-sep {
        width: 100%;
        height: 1px;
    }

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

    .trust-bar__item:nth-child(2) {
        border-right: none;
    }

    .trust-bar__item {
        border-bottom: 1px solid rgba(79, 70, 229, .07);
    }

    .trust-bar__item:nth-child(3), .trust-bar__item:nth-child(4) {
        border-bottom: none;
    }

    .platform-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(170px, auto);
    }

    .platform-card--lg, .platform-card--wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .platform-card--lg .platform-icon {
        width: 60px;
        height: 60px;
    }

    .platform-card--lg h3 {
        font-size: 1.2rem;
    }

    .migration-section__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .migration-section__visual {
        order: -1;
    }
}

@media (max-width: 600px) {
    .trust-bar__list {
        grid-template-columns: 1fr;
    }

    .trust-bar__item {
        border-right: none;
        border-bottom: 1px solid rgba(79, 70, 229, .07);
    }

    .trust-bar__item:last-child {
        border-bottom: none;
    }

    .platform-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .platform-card--lg, .platform-card--wide {
        grid-column: span 1;
    }

    .vps-specs {
        grid-template-columns: 1fr;
    }

    .migration-section {
        padding-block: 72px;
    }

    .platform-section {
        padding-block: 72px;
    }

    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-ghost-light.btn-lg, .btn-primary.btn-lg {
        justify-content: center;
    }
}

/* ==========================================================================
   NEW: Compare table + Trust row
   ========================================================================== */

.compare-wrap {
    margin-top: 52px;
    border: 1.5px solid rgba(79, 70, 229, .1);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.compare-toggle {
    width: 100%;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #141438;
    background: #F8FAFF;
    border: none;
    cursor: pointer;
    transition: background .18s;
}

.compare-toggle:hover {
    background: #EEF4FF;
    color: #4F46E5;
}

.compare-chevron {
    font-size: 14px;
    color: #9CA3AF;
    transition: transform .22s ease;
    display: inline-block;
}

.compare-table-wrap {
    border-top: 1px solid rgba(79, 70, 229, .09);
}

.compare-table-scroll {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.compare-table thead th {
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #141438;
    background: #fff;
    border-bottom: 2px solid rgba(79, 70, 229, .1);
    white-space: nowrap;
}

.compare-table thead th.ct-feat-col {
    text-align: left;
    min-width: 200px;
    color: #6B7280;
    font-weight: 600;
}

.compare-table thead th.ct-pop {
    background: linear-gradient(145deg, #0B1C42 0%, #12348F 100%);
    color: #fff;
}

.ct-pop-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #06B6D4;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.compare-table tbody tr td {
    padding: 11px 20px;
    text-align: center;
    color: #374151;
    border-bottom: 1px solid rgba(79, 70, 229, .05);
}

.compare-table tbody tr td:first-child {
    text-align: left;
    color: #4B5563;
    font-weight: 500;
}

.compare-table tbody tr:hover td {
    background: #F8FAFF;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.ct-group-hd td {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9CA3AF !important;
    background: #F8FAFF !important;
    padding: 10px 20px 6px !important;
}

.ct-yes {
    color: #06B6D4 !important;
    font-weight: 900;
    font-size: 1rem;
}

.ct-no {
    color: #CBD5E1 !important;
    font-size: .95rem;
}

.ptrust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.ptrust-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    background: #fff;
    border: 1.5px solid rgba(79, 70, 229, .08);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(79, 70, 229, .04);
    transition: var(--transition-ui);
}

.ptrust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(79, 70, 229, .1);
    border-color: rgba(79, 70, 229, .18);
}

.ptrust-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #EEF4FF, #E0EAFF);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .1);
}

.ptrust-card h4 {
    font-size: 15px;
    font-weight: 800;
    color: #141438;
    margin-bottom: 8px;
}

.ptrust-card p {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .ptrust-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-table thead th {
        padding: 12px 14px;
    }

    .compare-table tbody tr td {
        padding: 10px 14px;
    }
}

@media (max-width: 600px) {
    .ptrust-row {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-inline: auto;
    }

    .compare-toggle {
        font-size: 14px;
        padding: 16px 20px;
    }
}

/* ==========================================================================
   Scroll anchor offset — prevents the sticky navbar from covering sections
   ========================================================================== */
[id] {
    scroll-margin-top: calc(var(--navbar-height) + var(--promo-height) + 16px);
}

/* ==========================================================================
   Selection color — consistent branding
   ========================================================================== */
::selection {
    background: rgba(79, 70, 229, .18);
    color: #141438;
}

/* ==========================================================================
   Smooth image loading
   ========================================================================== */
img {
    transition: opacity .3s ease;
}

img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ==========================================================================
   Plan cards — unified "sdp" design (shared across all pages)
   ========================================================================== */
.sdp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

.sdp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1180px;
}

.sdp-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 1320px;
}

@media (max-width: 1280px) {
    .sdp-grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 900px;
    }
}

.sdp-card {
    background: #fff;
    border: 1px solid #E6E9F5;
    border-radius: 18px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out), border-color .28s ease;
}

.sdp-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
    border-color: rgba(79, 70, 229, .28);
}

.sdp-card:hover, .sdp-card:focus-within {
    z-index: 5;
}

.sdp-card--pop {
    border: 1.5px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6366F1, #06B6D4) border-box;
    box-shadow: 0 4px 14px rgba(20, 20, 56, .06), 0 22px 56px rgba(79, 70, 229, .20);
    position: relative;
}

.sdp-card--pop::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(99, 102, 241, .06) 0%, transparent 60%);
}

.sdp-card--pop:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 18px rgba(20, 20, 56, .07), 0 30px 70px rgba(79, 70, 229, .28);
}

.sdp-card__banner {
    background: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 8px;
    border-radius: 16px 16px 0 0;
}

.sdp-card__inner {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sdp-card__name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #141438;
    line-height: 1.2;
}

.sdp-card__tag {
    font-size: 13px;
    color: #6B7280;
    margin-top: 5px;
    min-height: 18px;
    line-height: 1.4;
}

.sdp-price {
    display: flex;
    align-items: flex-start;
    gap: 1px;
    margin-top: 20px;
}

.sdp-price__cur {
    font-size: 1.3rem;
    font-weight: 900;
    color: #141438;
    margin-top: 7px;
}

.sdp-price__num {
    font-size: 3rem;
    font-weight: 900;
    color: #141438;
    line-height: 1;
    letter-spacing: -.03em;
}

.sdp-price__per {
    font-size: 14px;
    color: #9CA3AF;
    font-weight: 600;
    align-self: flex-end;
    margin: 0 0 6px 4px;
}

.sdp-price-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    min-height: 22px;
}

.sdp-price__orig {
    font-size: 14px;
    color: #9CA3AF;
    text-decoration: line-through;
}

.sdp-save {
    font-size: 11px;
    font-weight: 800;
    color: #00926e;
    background: rgba(6, 182, 212, .12);
    padding: 3px 9px;
    border-radius: 6px;
}

.sdp-renew {
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 4px;
    min-height: 16px;
}

.sdp-cta {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    color: #4F46E5;
    border: 2px solid rgba(79, 70, 229, .22);
    text-decoration: none;
    transition: var(--transition-ui);
}

.sdp-cta:hover {
    border-color: #4F46E5;
    background: #F2F6FF;
    transform: translateY(-1px);
}

.sdp-card--pop .sdp-cta {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .3);
}

.sdp-card--pop .sdp-cta:hover {
    box-shadow: 0 10px 28px rgba(79, 70, 229, .42);
    transform: translateY(-2px);
}

.sdp-divider {
    height: 1px;
    background: #EEF2F9;
    margin: 24px 0 20px;
}

.sdp-specs {
    display: flex;
    flex-direction: column;
    background: #F6F9FF;
    border: 1px solid #EAF0FB;
    border-radius: 12px;
    padding: 2px 14px;
    margin-bottom: 22px;
}

.sdp-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #E7EEFB;
}

.sdp-spec:last-child {
    border-bottom: none;
}

.sdp-spec__key {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6B7280;
}

.sdp-spec__key svg {
    width: 15px;
    height: 15px;
    color: #6B8AE0;
    flex-shrink: 0;
}

.sdp-spec__val {
    font-size: 13.5px;
    font-weight: 800;
    color: #141438;
}

.sdp-spec__val span {
    font-size: 12px;
    color: inherit;
    font-weight: 700;
}

.sdp-incl-title {
    font-size: 12px;
    font-weight: 800;
    color: #141438;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 13px;
}

.sdp-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #4F46E5;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 20px 0 11px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EEF2F9;
}

.sdp-cat svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sdp-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sdp-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}

.sdp-feats li::before {
    content: '\2713';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(79, 70, 229, .1);
    color: #4F46E5;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.sdp-feats li.no {
    color: #AEB6C4;
}

.sdp-feats li.no::before {
    content: '\2715';
    background: #EEF1F6;
    color: #C2C9D6;
    box-shadow: none;
}

@media (max-width: 980px) {
    .sdp-grid, .sdp-grid--4, .sdp-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 600px) {
    .sdp-grid, .sdp-grid--4, .sdp-grid--5 {
        grid-template-columns: 1fr;
        max-width: 440px;
    }
}

/* ==========================================================================
   DARK MODE — [data-theme="dark"] (desaturated/elevated tones, not inverted)
   ========================================================================== */
[data-theme="dark"] {
    --d-bg: #0E1322;
    --d-surface: #141A2C;
    --d-surface-2: #1B2238;
    --d-text: #EAEDF7;
    --d-text-2: #AFB7CE;
    --d-text-3: #828BA6;
    --d-border: rgba(255, 255, 255, .09);
    --d-border-2: rgba(255, 255, 255, .14);
    /* Re-map base text tokens (components already using tokens adapt automatically) */
    --text-primary: var(--d-text);
    --text-secondary: var(--d-text-2);
    --text-light: var(--d-text-3);
}

[data-theme="dark"] body {
    background: var(--d-bg);
    color: var(--d-text-2);
}

/* Headings: override hardcoded color:#141438 (gradient text-fill headings are unaffected) */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5 {
    color: var(--d-text) !important;
}

[data-theme="dark"] .split-section--a,
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .platform-section,
[data-theme="dark"] .support-section,
[data-theme="dark"] .migration-section,
[data-theme="dark"] .testimonials {
    background: var(--d-bg);
}

[data-theme="dark"] .split-section--b,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .trust-bar {
    background: var(--d-surface);
}

[data-theme="dark"] .trust-bar {
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .how-it-works::before {
    background: linear-gradient(90deg, transparent, var(--d-border), transparent);
}

[data-theme="dark"] .navbar {
    background: rgba(14, 19, 34, .85);
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .nb-menu > li > a {
    color: var(--d-text-2);
}

[data-theme="dark"] .nb-menu > li:hover > a {
    color: #fff;
}

[data-theme="dark"] .nb-login {
    color: var(--d-text-2);
}

[data-theme="dark"] .nb-login:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

[data-theme="dark"] .nb-lang-toggle, [data-theme="dark"] .nb-theme-toggle, [data-theme="dark"] .mobile-lang-toggle {
    background: #1B2238;
    border-color: rgba(129, 140, 248, .4);
    color: var(--d-text-2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .nb-lang-toggle:hover, [data-theme="dark"] .nb-theme-toggle:hover, [data-theme="dark"] .mobile-lang-toggle:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(99, 102, 241, .5);
}

[data-theme="dark"] .lang-opt {
    color: #AFB7CE;
}

[data-theme="dark"] .lang-opt--active {
    color: #fff;
}

[data-theme="dark"] .lang-sep {
    color: #4A5470;
}

[data-theme="dark"] .nb-logo-name {
    background: linear-gradient(135deg, #fff, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .sdp-card,
[data-theme="dark"] .platform-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .migration-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .step-card {
    background: var(--d-surface);
    border-color: var(--d-border);
}

[data-theme="dark"] .platform-card--lg {
    background: linear-gradient(155deg, var(--d-surface-2), var(--d-surface));
}

[data-theme="dark"] .sdp-specs,
[data-theme="dark"] .cpanel-app,
[data-theme="dark"] .migration-server {
    background: var(--d-surface-2);
    border-color: var(--d-border);
}

[data-theme="dark"] .sdp-spec {
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .sdp-divider {
    background: var(--d-border);
}

[data-theme="dark"] .sdp-cat {
    border-bottom-color: var(--d-border);
    color: #a5b4fc;
}

/* .sdp-feats li text (#374151) was unreadable in dark mode without this override (near-black) */
[data-theme="dark"] .sdp-feats li {
    color: var(--d-text-2);
}

[data-theme="dark"] .sdp-feats li.no {
    color: var(--d-text-3);
}

/* Check ✓ icon: raise badge contrast on dark surface */
[data-theme="dark"] .sdp-feats li::before {
    background: rgba(99, 102, 241, .2);
    color: #c7d2fe;
}

/* Cross ✕ (not included): dark badge instead of the light #EEF1F6 circle */
[data-theme="dark"] .sdp-feats li.no::before {
    background: rgba(255, 255, 255, .06);
    color: var(--d-text-3);
}

/* Card text (override hardcoded #141438 / #1A1A2E) */
[data-theme="dark"] .sdp-card__name,
[data-theme="dark"] .sdp-price__num,
[data-theme="dark"] .sdp-price__cur,
[data-theme="dark"] .sdp-spec__val,
[data-theme="dark"] .sdp-incl-title,
[data-theme="dark"] .cpanel-stat__value,
[data-theme="dark"] .trust-bar__item strong,
[data-theme="dark"] .mm__tx strong {
    color: var(--d-text);
}

[data-theme="dark"] .sdp-card__tag,
[data-theme="dark"] .sdp-spec__key,
[data-theme="dark"] .sdp-renew,
[data-theme="dark"] .mm__tx em,
[data-theme="dark"] .feature-list li,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .platform-card p,
[data-theme="dark"] .section-sub,
[data-theme="dark"] .trust-bar__item small,
[data-theme="dark"] p {
    color: var(--d-text-2);
}

/* Dark-mode contrast fix: near-black text (#111827/#374151) with no color override */
[data-theme="dark"] .testimonial-card blockquote,
[data-theme="dark"] .testimonial-author strong,
[data-theme="dark"] .cpanel-app,
[data-theme="dark"] .server-url {
    color: var(--d-text);
}

/* .vps-card (developers section) had NO dark rule at all: stayed fully white */
[data-theme="dark"] .vps-card {
    background: var(--d-surface);
    border-color: var(--d-border);
}

[data-theme="dark"] .vps-spec,
[data-theme="dark"] .vps-bar__val {
    color: var(--d-text-2);
}

[data-theme="dark"] .vps-bar {
    background: var(--d-surface-2);
}

[data-theme="dark"] .billing-toggle {
    background: var(--d-surface-2);
    border-color: var(--d-border);
}

[data-theme="dark"] .billing-btn {
    color: var(--d-text-2);
}

[data-theme="dark"] .pricing-tabs {
    background: var(--d-surface);
    border-color: var(--d-border-2);
}

[data-theme="dark"] .pricing-tab {
    color: var(--d-text-2);
    border-right-color: var(--d-border);
}

[data-theme="dark"] .pricing-tab:hover:not(.pricing-tab--active) {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .sdp-cta {
    background: transparent;
    color: #c7d2fe;
    border-color: var(--d-border-2);
}

[data-theme="dark"] .sdp-cta:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #6366F1;
}

[data-theme="dark"] .drop-panel {
    background: linear-gradient(180deg, rgba(27, 34, 56, .985), rgba(20, 26, 46, .985));
    border-color: var(--d-border-2);
}

[data-theme="dark"] .drop-panel::before {
    background: #1B2238;
    border-color: var(--d-border-2);
}

/* Mega-menu featured panel in dark mode (the light panel doesn't fit dark) */
[data-theme="dark"] .mm__feat {
    background: linear-gradient(165deg, #2b2960, #211f49);
    border-color: rgba(255, 255, 255, .08);
    color: #fff;
}

[data-theme="dark"] .mm__feat h4 {
    color: #fff;
}

[data-theme="dark"] .mm__feat p {
    color: rgba(255, 255, 255, .74);
}

[data-theme="dark"] .mm__feat-tag {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
}

[data-theme="dark"] .mm__col + .mm__col {
    border-left-color: var(--d-border);
}

[data-theme="dark"] .mm__hd {
    color: var(--d-text-3);
}

[data-theme="dark"] .mm__ic {
    background: rgba(255, 255, 255, .07);
    color: #c7d2fe;
}

[data-theme="dark"] .mm__item:hover {
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .mm__item:hover .mm__ic {
    background: #4F46E5;
    color: #fff;
}

[data-theme="dark"] .dp-item:hover {
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .dp-item strong {
    color: var(--d-text);
}

[data-theme="dark"] .dp-badge.hot {
    background: rgba(250, 204, 21, .15);
    color: #FDE68A;
}

[data-theme="dark"] .dp-badge.pop {
    background: rgba(99, 102, 241, .18);
    color: #818CF8;
}

[data-theme="dark"] .trust-bar__item {
    border-right-color: var(--d-border);
}

[data-theme="dark"] .trust-icon {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

[data-theme="dark"] .metric-item {
    border-right-color: var(--d-border);
}

[data-theme="dark"] .platform-icon {
    background: rgba(255, 255, 255, .06);
    border-color: var(--d-border);
}

[data-theme="dark"] .compare-wrap {
    background: var(--d-surface);
}

[data-theme="dark"] .compare-toggle {
    color: var(--d-text-2);
}

[data-theme="dark"] .compare-toggle:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

[data-theme="dark"] .compare-table-wrap {
    border-top-color: var(--d-border);
}

[data-theme="dark"] .mobile-drawer {
    background: var(--d-surface);
}

[data-theme="dark"] .mobile-link {
    color: var(--d-text-2);
}

[data-theme="dark"] .mobile-link:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

[data-theme="dark"] .mobile-drawer__header {
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .mobile-drawer__actions {
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .mobile-drawer__title {
    color: var(--d-text);
}

[data-theme="dark"] .mobile-section-label {
    color: var(--d-text-3);
}

[data-theme="dark"] .mobile-drawer__close {
    background: var(--d-surface-2);
    color: var(--d-text-2);
}

[data-theme="dark"] .mobile-drawer__close:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

[data-theme="dark"] .mobile-link .em {
    background: rgba(99, 102, 241, .18);
    color: #818CF8;
}

.nb-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #F3F4F6;
    border: 1px solid rgba(79, 70, 229, .12);
    color: #4F46E5;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-ui);
}

.nb-theme-toggle:hover {
    border-color: rgba(79, 70, 229, .3);
    background: #EEF4FF;
    transform: rotate(-12deg);
}

.nb-theme-toggle svg {
    width: 18px;
    height: 18px;
}

.nb-theme-toggle .icon-moon, #themeToggleMobile .icon-moon {
    display: none;
}

[data-theme="dark"] .nb-theme-toggle .icon-sun, [data-theme="dark"] #themeToggleMobile .icon-sun {
    display: none;
}

[data-theme="dark"] .nb-theme-toggle .icon-moon {
    display: block;
    color: #c7d2fe;
}

[data-theme="dark"] #themeToggleMobile .icon-moon {
    display: inline-block;
}

/* Dark mode: additional overrides (comparison table, trust proof, popular card) */
[data-theme="dark"] .compare-wrap {
    border-color: var(--d-border-2);
}

[data-theme="dark"] .compare-toggle {
    background: var(--d-surface-2);
    color: var(--d-text);
}

[data-theme="dark"] .compare-toggle:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

[data-theme="dark"] .compare-table thead th {
    background: var(--d-surface);
    color: var(--d-text);
    border-bottom-color: var(--d-border-2);
}

[data-theme="dark"] .compare-table thead th.ct-feat-col {
    color: var(--d-text-2);
}

[data-theme="dark"] .compare-table tbody tr td {
    color: var(--d-text-2);
    border-bottom-color: var(--d-border);
}

[data-theme="dark"] .compare-table tbody tr td:first-child {
    color: var(--d-text);
}

[data-theme="dark"] .compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .ct-group-hd td {
    background: var(--d-surface-2) !important;
    color: var(--d-text-3) !important;
}

[data-theme="dark"] .ct-no {
    color: #4B5468 !important;
}

[data-theme="dark"] .ptrust-card {
    background: var(--d-surface);
    border-color: var(--d-border);
    box-shadow: none;
}

[data-theme="dark"] .ptrust-icon {
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
}

[data-theme="dark"] .ptrust-card h4 {
    color: var(--d-text);
}

[data-theme="dark"] .ptrust-card p {
    color: var(--d-text-2);
}

/* Popular card: restore gradient border on dark surface */
[data-theme="dark"] .sdp-card--pop {
    background: linear-gradient(var(--d-surface), var(--d-surface)) padding-box,
    linear-gradient(135deg, #6366F1, #06B6D4) border-box !important;
    border: 1.5px solid transparent !important;
}

[data-theme="dark"] .support-card p, [data-theme="dark"] .faq-item p {
    color: var(--d-text-2);
}

[data-theme="dark"] .support-icon {
    background: rgba(255, 255, 255, .06) !important;
}

[data-theme="dark"] .faq-question {
    color: var(--d-text);
}

[data-theme="dark"] .faq-answer {
    color: var(--d-text-2);
}

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 16px var(--container-pad);
    background: #0E1322;
    border-top: 1px solid #232B42;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.23, 1, .32, 1);
}

.cookie-consent--in {
    transform: translateY(0);
}

.cookie-consent__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cookie-consent__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #AFB7CE;
    max-width: 720px;
}

.cookie-consent__text strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.cookie-consent__text a {
    color: #818CF8;
    font-weight: 600;
    margin-left: 6px;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cc-btn {
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .16s cubic-bezier(.23, 1, .32, 1), background .16s, border-color .16s;
    font-family: inherit;
}

.cc-btn:active {
    transform: scale(.97);
}

.cc-btn--primary {
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    color: #fff;
}

.cc-btn--primary:hover {
    filter: brightness(1.08);
}

.cc-btn--ghost {
    background: transparent;
    color: #C7D2FE;
    border-color: rgba(129, 140, 248, .4);
}

.cc-btn--ghost:hover {
    background: rgba(129, 140, 248, .12);
}

@media (max-width: 640px) {
    .cookie-consent__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cookie-consent__actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-consent {
        transition: none;
    }
}

.plat-ssd-visual {
    margin-bottom: auto;
}

.plat-ssd-icon {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(79, 70, 229, .32);
}

.plat-ssd-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
    max-width: 300px;
}

.plat-ssd-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.plat-ssd-bar__lbl {
    width: 64px;
    flex-shrink: 0;
}

.plat-ssd-bar__track {
    flex: 1;
    height: 10px;
    border-radius: 6px;
    background: rgba(79, 70, 229, .1);
    overflow: hidden;
}

.plat-ssd-bar__track b {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
}

.plat-ssd-bar--dim .plat-ssd-bar__track b {
    background: #9AA5C0;
}

.plat-ssd-bar__val {
    width: 34px;
    text-align: right;
    flex-shrink: 0;
    color: #4F46E5;
    font-weight: 800;
}

.plat-ssd-bar--dim .plat-ssd-bar__val {
    color: #9AA5C0;
}

[data-theme="dark"] .plat-ssd-bar {
    color: var(--d-text-2);
}

[data-theme="dark"] .plat-ssd-bar__track {
    background: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .plat-ssd-bar__val {
    color: #818CF8;
}

[data-theme="dark"] .plat-ssd-bar--dim .plat-ssd-bar__val {
    color: #6B7280;
}