:root {
    --primary: #0078ff;
    --primary-rgb: 0 120 255;
    --secondary: #00c8ff;
    --secondary-rgb: 0 200 255;
    --success: #14c784;
    --warning: #ffb020;
    --danger: #ff4d6d;
    --bg: #f7fbff;
    --surface: #fff;
    --surface-soft: #eef6ff;
    --card: #fff;
    --text: #07142f;
    --muted: #5d6b86;
    --border: rgba(7 20 47 / 10%);
    --shadow: 0 24px 80px rgba(15 72 140 / 12%);
    --hero-gradient: radial-gradient(circle at 75% 35%, rgb(var(--primary-rgb) / 16%), transparent 34%), linear-gradient(180deg, #f9fcff 0%, #eef7ff 100%);
    --navbar-bg: rgba(255 255 255 / 82%);
}

html[data-theme="dark"] {
    --primary: #0787ff;
    --primary-rgb: 7 135 255;
    --secondary: #00d4ff;
    --secondary-rgb: 0 212 255;
    --bg: #050b16;
    --surface: #07111f;
    --surface-soft: #0b1a2d;
    --card: #0a1526;
    --text: #f5f9ff;
    --muted: #96a8c2;
    --border: rgba(255 255 255 / 10%);
    --shadow: 0 24px 90px rgba(0 120 255 / 13%);
    --hero-gradient: radial-gradient(circle at 72% 32%, rgb(var(--primary-rgb) / 25%), transparent 32%), linear-gradient(180deg, #06101d 0%, #050b16 100%);
    --navbar-bg: rgba(5 11 22 / 82%);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: background .25s ease, color .25s ease;
}

.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }

.navbar {
    background: var(--navbar-bg);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}

.navbar .nav-link,
.navbar-brand,
.dropdown-item {
    color: var(--text);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary);
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    font-weight: 900;
    font-size: 1.45rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 12px 32px rgb(var(--primary-rgb) / 30%);
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: #006ee8;
    --bs-btn-hover-border-color: #006ee8;

    box-shadow: 0 12px 28px rgb(var(--primary-rgb) / 25%);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: rgb(var(--primary-rgb) / 45%);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
}

.hero {
    background: var(--hero-gradient);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.hero-title {
    font-size: clamp(2.35rem, 5vw, 4.85rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 850;
}

.badge-soft {
    background: rgb(var(--primary-rgb) / 12%);
    color: var(--primary);
    border: 1px solid rgb(var(--primary-rgb) / 20%);
}

.glass-card,
.pricing-card,
.feature-strip,
.stat-card {
    background: color-mix(in srgb, var(--card) 86%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
}

.server-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.server-platform {
    position: absolute;
    width: min(78%, 520px);
    height: 130px;
    bottom: 52px;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(255 255 255 / 65%), rgb(var(--primary-rgb) / 18%));
    border: 1px solid rgb(var(--primary-rgb) / 22%);
    box-shadow: 0 30px 90px rgb(var(--primary-rgb) / 28%), inset 0 -10px 28px rgb(var(--primary-rgb) / 18%);
    transform: perspective(780px) rotateX(58deg);
}

html[data-theme="dark"] .server-platform {
    background: linear-gradient(180deg, rgba(45 68 100 / 70%), rgb(var(--primary-rgb) / 20%));
}

.server-rack {
    position: relative;
    z-index: 2;
    width: 118px;
    height: 245px;
    border-radius: 18px;
    background: linear-gradient(145deg, #263d5b, #081323);
    border: 1px solid rgba(255 255 255 / 14%);
    box-shadow: 0 28px 55px rgba(0 0 0 / 35%), inset 0 1px 0 rgba(255 255 255 / 20%);
    transform: skewY(-5deg);
}

.server-rack:nth-child(2) { margin-top: -48px; }
.server-rack:nth-child(3) { margin-top: 12px; }

.rack-line {
    height: 16px;
    margin: 12px 16px;
    border-radius: 20px;
    background: linear-gradient(90deg, rgb(var(--primary-rgb) / 20%), rgb(var(--secondary-rgb) / 95%));
    box-shadow: 0 0 22px rgb(var(--primary-rgb) / 65%);
}

.floating-card {
    position: absolute;
    z-index: 3;
    width: 128px;
    padding: 1rem;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    animation: floaty 4s ease-in-out infinite;
}

.floating-card.one { left: 7%; top: 20%; }
.floating-card.two { right: 3%; top: 26%; animation-delay: .5s; }
.floating-card.three { left: 5%; bottom: 17%; animation-delay: .9s; }
.floating-card.four { right: 6%; bottom: 19%; animation-delay: 1.2s; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.icon-box {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgb(var(--primary-rgb) / 11%);
    color: var(--primary);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.section-padding { padding: 96px 0; }

.pricing-card {
    border-radius: 26px;
    padding: 2rem;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgb(var(--primary-rgb) / 40%);
}

.pricing-card.featured {
    border-color: rgb(var(--primary-rgb) / 55%);
    background: linear-gradient(180deg, rgb(var(--primary-rgb) / 9%), color-mix(in srgb, var(--card) 90%, transparent));
}

.check-list li {
    margin-bottom: .7rem;
    color: var(--muted);
}

.check-list i { color: var(--success); }

.dashboard-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 30px;
    overflow: hidden;
}

.dashboard-sidebar {
    background: var(--surface-soft);
    border-right: 1px solid var(--border);
}

.mini-chart {
    height: 8px;
    border-radius: 20px;
    background: rgb(var(--primary-rgb) / 14%);
    overflow: hidden;
}

.mini-chart span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

@media (width <= 991.98px) {
    .server-visual { min-height: 360px; }
    .floating-card { display: none; }
    .section-padding { padding: 72px 0; }
}