/* =========================================================================
   servers.css — page-scoped styles for the 18 NEW server mega-menu pages.
   Loaded ONLY by the matching servers/*.blade.php file. No global side-effects.
   Each page uses its own unique prefix so it cannot bleed into the others:
     .lvps-*  Linux VPS               (amber)
     .wvps-*  Windows VPS             (blue)
     .mvps-*  Managed VPS             (emerald)
     .dedi-*  Dedicated Servers       (indigo)
     .mddc-*  Managed Dedicated       (violet)
     .infr-*  Infrastructure Mgmt     (teal)
     .cpan-*  Control Panel Mgmt      (cyan)
     .stup-*  Server Setup & Config   (blue)
     .migr-*  Server Migration        (violet)
     .clds-*  Cloud Server Mgmt       (sky)
     .vmgt-*  VPS Management          (orange)
     .shrd-*  Server Security         (deep indigo)
     .cybr-*  Cyber Security          (slate)
     .malm-*  Malware Detection       (red)
     .fwaf-*  Firewall & WAF          (pink)
     .ddos-*  DDoS Protection         (magenta)
     .mont-*  Server Monitoring       (teal)
     .prfm-*  Performance Opt         (amber)
   ========================================================================= */

/* ----------------------------------------------------------------
   COMMON PRIMITIVES
   ---------------------------------------------------------------- */
.srv-page { position: relative; }

.srv-counter-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
}
.srv-counter {
    border-radius: 18px; padding: 26px 22px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(11,16,32,0.05);
    border: 1px solid rgba(11,16,32,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.srv-counter:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(11,16,32,0.12); }
.srv-counter__num {
    font-size: 40px; font-weight: 800; line-height: 1;
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.srv-counter__label { font-size: 14px; font-weight: 600; color: #4b5568; margin-top: 8px; }

.srv-feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px;
}
.srv-feature-card {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px;
    padding: 26px 22px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.srv-feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(11,16,32,0.15); }
.srv-feature-card__icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 20px; margin-bottom: 14px;
}
.srv-feature-card__title { font-size: 17px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.srv-feature-card__desc { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0; }

.srv-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.srv-checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.srv-checklist li {
    position: relative; padding: 6px 0 6px 32px; color: #374151; font-size: 15px;
}
.srv-checklist li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 8px; font-size: 14px;
}

/* Pricing cards (used on VPS + Dedicated) */
.srv-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.srv-tier {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 18px;
    padding: 28px 26px; position: relative; transition: all 0.25s ease;
}
.srv-tier:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(11,16,32,0.20); }
.srv-tier--featured { color: #fff; border-color: transparent; }
.srv-tier__name { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.srv-tier__price { font-size: 32px; font-weight: 800; color: #0b1020; margin: 8px 0; }
.srv-tier--featured .srv-tier__price { color: #fff; }
.srv-tier__price small { font-size: 14px; color: #6b7280; font-weight: 600; }
.srv-tier__list { list-style: none; padding: 0; margin: 16px 0 22px; border-top: 1px solid #eef2f0; padding-top: 14px; font-size: 14px; color: #4b5568; }
.srv-tier--featured .srv-tier__list { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.95); }
.srv-tier__list li { padding: 5px 0 5px 22px; position: relative; }
.srv-tier__list li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.srv-tier__cta { display: block; text-align: center; padding: 12px 20px; border-radius: 10px; color: #fff; font-weight: 700; text-decoration: none; transition: background 0.2s ease; }
.srv-tier--featured .srv-tier__cta { background: #fff; }
.srv-tier--featured .srv-tier__cta:hover { background: #f3f4f6; }

/* Dark terminal panel */
.srv-terminal {
    background: #0b1020; border-radius: 16px; padding: 20px;
    box-shadow: 0 22px 50px -18px rgba(11,16,32,0.35);
    color: #d1d5db; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px;
    border: 1px solid #1f2937;
}
.srv-terminal__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #1f2937; margin-bottom: 12px; }
.srv-terminal__dot { width: 12px; height: 12px; border-radius: 50%; }
.srv-terminal__dot--r { background: #ef4444; } .srv-terminal__dot--y { background: #f59e0b; } .srv-terminal__dot--g { background: #10b981; }
.srv-terminal__line { white-space: pre-wrap; padding: 1px 0; }
.srv-terminal__line--prompt { color: #5eead4; }
.srv-terminal__line--ok { color: #10b981; }
.srv-terminal__line--warn { color: #f59e0b; }
.srv-terminal__line--muted { color: #6b7280; }

.srv-monitor {
    background: #0b1020; border-radius: 16px; padding: 20px;
    box-shadow: 0 22px 50px -18px rgba(11,16,32,0.35);
    color: #d1d5db; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px;
    border: 1px solid #1f2937;
}
.srv-monitor__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #1f2937; margin-bottom: 12px; }
.srv-monitor__title { color: #fff; font-size: 14px; font-weight: 700; margin: 0; }
.srv-monitor__status { display: flex; align-items: center; gap: 6px; color: #5eead4; font-size: 12px; font-weight: 700; }
.srv-monitor__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 8px #5eead4; }
.srv-monitor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.srv-monitor__metric { background: #111827; border-radius: 8px; padding: 10px; }
.srv-monitor__metric-label { color: #6b7280; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.srv-monitor__metric-value { color: #fff; font-size: 18px; font-weight: 800; margin-top: 4px; }
.srv-monitor__metric-delta { font-size: 10px; font-weight: 600; color: #5eead4; }
.srv-monitor__chart { background: linear-gradient(180deg, rgba(20,184,166,0.10), transparent); border-radius: 10px; height: 80px; display: flex; align-items: flex-end; gap: 4px; padding: 8px; }
.srv-monitor__bar { flex: 1; background: linear-gradient(180deg, #5eead4, #0D9488); border-radius: 3px 3px 0 0; min-height: 6px; }

@media (max-width: 900px) {
    .srv-counter-grid { grid-template-columns: repeat(2, 1fr); }
    .srv-feature-grid { grid-template-columns: 1fr; }
    .srv-two-col { grid-template-columns: 1fr; gap: 28px; }
    .srv-pricing { grid-template-columns: 1fr; }
    .srv-monitor__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .srv-counter-grid { grid-template-columns: 1fr; }
}

/* CTA pattern (per-page themed) */
.srv-cta {
    color: #fff; border-radius: 20px; padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.srv-cta__text h3 { color: #fff; margin: 0 0 4px; font-size: 22px; }
.srv-cta__text p { color: rgba(255,255,255,0.85); margin: 0; font-size: 15px; }
.srv-cta__btn { color: #fff; padding: 13px 24px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.srv-cta__btn--ghost { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.55); }

/* ========================================================================
   1) LINUX VPS — .lvps-* (amber #F59E0B → #FBBF24)
   ======================================================================== */
.lvps-counter .srv-counter__num { background-image: linear-gradient(90deg, #F59E0B, #FBBF24); }
.lvps-feature-card__icon { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.lvps-checklist li::before { color: #F59E0B; }
.lvps-tier__name { color: #F59E0B; }
.lvps-tier__list li::before { color: #F59E0B; }
.lvps-tier__cta { background: #F59E0B; }
.lvps-tier__cta:hover { background: #d97706; }
.lvps-tier--featured { background: linear-gradient(180deg, #F59E0B, #B45309); }
.lvps-tier--featured .srv-tier__name { color: #fff; }
.lvps-cta { background: linear-gradient(135deg, #F59E0B, #B45309); box-shadow: 0 18px 40px -16px rgba(245,158,11,0.45); }
.lvps-cta__btn { background: #FBBF24; }
.lvps-cta__btn:hover { background: #F59E0B; transform: translateY(-2px); }

/* ========================================================================
   2) WINDOWS VPS — .wvps-* (blue #0067B8 → #00A4EF)
   ======================================================================== */
.wvps-counter .srv-counter__num { background-image: linear-gradient(90deg, #0067B8, #00A4EF); }
.wvps-feature-card__icon { background: linear-gradient(135deg, #0067B8, #00A4EF); }
.wvps-checklist li::before { color: #0067B8; }
.wvps-tier__name { color: #0067B8; }
.wvps-tier__list li::before { color: #0067B8; }
.wvps-tier__cta { background: #0067B8; }
.wvps-tier__cta:hover { background: #005A9E; }
.wvps-tier--featured { background: linear-gradient(180deg, #0067B8, #003D6B); }
.wvps-tier--featured .srv-tier__name { color: #fff; }
.wvps-cta { background: linear-gradient(135deg, #0067B8, #00A4EF); box-shadow: 0 18px 40px -16px rgba(0,103,184,0.45); }
.wvps-cta__btn { background: #00A4EF; }
.wvps-cta__btn:hover { background: #0067B8; transform: translateY(-2px); }

/* ========================================================================
   3) MANAGED VPS — .mvps-* (emerald #10B981 → #34D399)
   ======================================================================== */
.mvps-counter .srv-counter__num { background-image: linear-gradient(90deg, #10B981, #34D399); }
.mvps-feature-card__icon { background: linear-gradient(135deg, #10B981, #34D399); }
.mvps-checklist li::before { color: #10B981; }
.mvps-tier__name { color: #10B981; }
.mvps-tier__list li::before { color: #10B981; }
.mvps-tier__cta { background: #10B981; }
.mvps-tier__cta:hover { background: #047857; }
.mvps-tier--featured { background: linear-gradient(180deg, #10B981, #065F46); }
.mvps-tier--featured .srv-tier__name { color: #fff; }
.mvps-cta { background: linear-gradient(135deg, #10B981, #047857); box-shadow: 0 18px 40px -16px rgba(16,185,129,0.45); }
.mvps-cta__btn { background: #34D399; }
.mvps-cta__btn:hover { background: #10B981; transform: translateY(-2px); }

/* ========================================================================
   4) DEDICATED SERVERS — .dedi-* (indigo #4F46E5 → #7C3AED)
   ======================================================================== */
.dedi-counter .srv-counter__num { background-image: linear-gradient(90deg, #4F46E5, #7C3AED); }
.dedi-feature-card__icon { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.dedi-checklist li::before { color: #4F46E5; }
.dedi-tier__name { color: #4F46E5; }
.dedi-tier__list li::before { color: #4F46E5; }
.dedi-tier__cta { background: #4F46E5; }
.dedi-tier__cta:hover { background: #3730A3; }
.dedi-tier--featured { background: linear-gradient(180deg, #4F46E5, #312E81); }
.dedi-tier--featured .srv-tier__name { color: #fff; }
.dedi-cta { background: linear-gradient(135deg, #4F46E5, #312E81); box-shadow: 0 18px 40px -16px rgba(79,70,229,0.45); }
.dedi-cta__btn { background: #7C3AED; }
.dedi-cta__btn:hover { background: #4F46E5; transform: translateY(-2px); }

/* ========================================================================
   5) MANAGED DEDICATED — .mddc-* (violet #6366F1 → #8B5CF6)
   ======================================================================== */
.mddc-counter .srv-counter__num { background-image: linear-gradient(90deg, #6366F1, #8B5CF6); }
.mddc-feature-card__icon { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.mddc-checklist li::before { color: #6366F1; }
.mddc-tier__name { color: #6366F1; }
.mddc-tier__list li::before { color: #6366F1; }
.mddc-tier__cta { background: #6366F1; }
.mddc-tier__cta:hover { background: #4F46E5; }
.mddc-tier--featured { background: linear-gradient(180deg, #6366F1, #4338CA); }
.mddc-tier--featured .srv-tier__name { color: #fff; }
.mddc-cta { background: linear-gradient(135deg, #6366F1, #4338CA); box-shadow: 0 18px 40px -16px rgba(99,102,241,0.45); }
.mddc-cta__btn { background: #8B5CF6; }
.mddc-cta__btn:hover { background: #6366F1; transform: translateY(-2px); }

/* ========================================================================
   6) INFRASTRUCTURE MGMT — .infr-* (teal #0F766E → #14B8A6)
   ======================================================================== */
.infr-counter .srv-counter__num { background-image: linear-gradient(90deg, #0F766E, #14B8A6); }
.infr-feature-card__icon { background: linear-gradient(135deg, #0F766E, #14B8A6); }
.infr-checklist li::before { color: #0F766E; }
.infr-cta { background: linear-gradient(135deg, #0F766E, #115E59); box-shadow: 0 18px 40px -16px rgba(15,118,110,0.45); }
.infr-cta__btn { background: #14B8A6; }
.infr-cta__btn:hover { background: #0F766E; transform: translateY(-2px); }

/* ========================================================================
   7) CONTROL PANEL — .cpan-* (cyan #0891B2 → #06B6D4)
   ======================================================================== */
.cpan-counter .srv-counter__num { background-image: linear-gradient(90deg, #0891B2, #06B6D4); }
.cpan-feature-card__icon { background: linear-gradient(135deg, #0891B2, #06B6D4); }
.cpan-checklist li::before { color: #0891B2; }
.cpan-cta { background: linear-gradient(135deg, #0891B2, #155E75); box-shadow: 0 18px 40px -16px rgba(8,145,178,0.45); }
.cpan-cta__btn { background: #06B6D4; }
.cpan-cta__btn:hover { background: #0891B2; transform: translateY(-2px); }

/* Control panel grid */
.cpan-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.cpan-panel {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 16px; text-align: center; transition: all 0.25s ease;
}
.cpan-panel:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(8,145,178,0.25); border-color: #06B6D4; }
.cpan-panel__icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #0891B2, #06B6D4); color: #fff; display: grid; place-items: center; font-size: 20px; margin: 0 auto 10px; }
.cpan-panel__name { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0; }
.cpan-panel__desc { font-size: 12px; color: #4b5568; margin: 4px 0 0; }
@media (max-width: 900px) { .cpan-panels { grid-template-columns: repeat(2, 1fr); } }

/* ========================================================================
   8) SETUP & CONFIG — .stup-* (blue #1E40AF → #3B82F6)
   ======================================================================== */
.stup-counter .srv-counter__num { background-image: linear-gradient(90deg, #1E40AF, #3B82F6); }
.stup-feature-card__icon { background: linear-gradient(135deg, #1E40AF, #3B82F6); }
.stup-checklist li::before { color: #1E40AF; }
.stup-cta { background: linear-gradient(135deg, #1E40AF, #1E3A8A); box-shadow: 0 18px 40px -16px rgba(30,64,175,0.45); }
.stup-cta__btn { background: #3B82F6; }
.stup-cta__btn:hover { background: #1E40AF; transform: translateY(-2px); }

/* ========================================================================
   9) SERVER MIGRATION — .migr-* (violet #7C3AED → #A855F7)
   ======================================================================== */
.migr-counter .srv-counter__num { background-image: linear-gradient(90deg, #7C3AED, #A855F7); }
.migr-feature-card__icon { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.migr-checklist li::before { color: #7C3AED; }
.migr-cta { background: linear-gradient(135deg, #7C3AED, #5B21B6); box-shadow: 0 18px 40px -16px rgba(124,58,237,0.45); }
.migr-cta__btn { background: #A855F7; }
.migr-cta__btn:hover { background: #7C3AED; transform: translateY(-2px); }

/* Migration flow */
.migr-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 32px; position: relative; }
.migr-step { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 14px; text-align: center; position: relative; }
.migr-step::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: #A855F7; font-size: 14px; z-index: 1; }
.migr-step:last-child::after { display: none; }
.migr-step__num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #A855F7); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin: 0 auto 8px; }
.migr-step__label { font-size: 13px; font-weight: 700; color: #0b1020; margin: 0; }
.migr-step__hint { font-size: 11px; color: #6b7280; margin: 2px 0 0; }
@media (max-width: 900px) { .migr-flow { grid-template-columns: repeat(2, 1fr); gap: 20px; } .migr-step::after { display: none; } }

/* ========================================================================
   10) CLOUD SERVER MGMT — .clds-* (sky #0EA5E9 → #38BDF8)
   ======================================================================== */
.clds-counter .srv-counter__num { background-image: linear-gradient(90deg, #0EA5E9, #38BDF8); }
.clds-feature-card__icon { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
.clds-checklist li::before { color: #0EA5E9; }
.clds-cta { background: linear-gradient(135deg, #0EA5E9, #0284C7); box-shadow: 0 18px 40px -16px rgba(14,165,233,0.45); }
.clds-cta__btn { background: #38BDF8; }
.clds-cta__btn:hover { background: #0EA5E9; transform: translateY(-2px); }

/* ========================================================================
   11) VPS MANAGEMENT — .vmgt-* (orange #EA580C → #F97316)
   ======================================================================== */
.vmgt-counter .srv-counter__num { background-image: linear-gradient(90deg, #EA580C, #F97316); }
.vmgt-feature-card__icon { background: linear-gradient(135deg, #EA580C, #F97316); }
.vmgt-checklist li::before { color: #EA580C; }
.vmgt-cta { background: linear-gradient(135deg, #EA580C, #9A3412); box-shadow: 0 18px 40px -16px rgba(234,88,12,0.45); }
.vmgt-cta__btn { background: #F97316; }
.vmgt-cta__btn:hover { background: #EA580C; transform: translateY(-2px); }

/* ========================================================================
   12) SERVER SECURITY & HARDENING — .shrd-* (deep indigo #1E3A8A → #3730A3)
   ======================================================================== */
.shrd-counter .srv-counter__num { background-image: linear-gradient(90deg, #1E3A8A, #3730A3); }
.shrd-feature-card__icon { background: linear-gradient(135deg, #1E3A8A, #3730A3); }
.shrd-checklist li::before { color: #1E3A8A; }
.shrd-cta { background: linear-gradient(135deg, #1E3A8A, #0F172A); box-shadow: 0 18px 40px -16px rgba(30,58,138,0.45); }
.shrd-cta__btn { background: #3730A3; }
.shrd-cta__btn:hover { background: #1E3A8A; transform: translateY(-2px); }

/* ========================================================================
   13) CYBER SECURITY — .cybr-* (slate #0F172A → #475569)
   ======================================================================== */
.cybr-counter .srv-counter__num { background-image: linear-gradient(90deg, #0F172A, #475569); }
.cybr-feature-card__icon { background: linear-gradient(135deg, #0F172A, #475569); }
.cybr-checklist li::before { color: #0F172A; }
.cybr-cta { background: linear-gradient(135deg, #0F172A, #334155); box-shadow: 0 18px 40px -16px rgba(15,23,42,0.45); }
.cybr-cta__btn { background: #475569; }
.cybr-cta__btn:hover { background: #0F172A; transform: translateY(-2px); }

/* ========================================================================
   14) MALWARE DETECTION & REMOVAL — .malm-* (red #B91C1C → #EF4444)
   ======================================================================== */
.malm-counter .srv-counter__num { background-image: linear-gradient(90deg, #B91C1C, #EF4444); }
.malm-feature-card__icon { background: linear-gradient(135deg, #B91C1C, #EF4444); }
.malm-checklist li::before { color: #B91C1C; }
.malm-cta { background: linear-gradient(135deg, #B91C1C, #7F1D1D); box-shadow: 0 18px 40px -16px rgba(185,28,28,0.45); }
.malm-cta__btn { background: #EF4444; }
.malm-cta__btn:hover { background: #B91C1C; transform: translateY(-2px); }

/* ========================================================================
   15) FIREWALL & WAF — .fwaf-* (pink #BE185D → #EC4899)
   ======================================================================== */
.fwaf-counter .srv-counter__num { background-image: linear-gradient(90deg, #BE185D, #EC4899); }
.fwaf-feature-card__icon { background: linear-gradient(135deg, #BE185D, #EC4899); }
.fwaf-checklist li::before { color: #BE185D; }
.fwaf-cta { background: linear-gradient(135deg, #BE185D, #831843); box-shadow: 0 18px 40px -16px rgba(190,24,93,0.45); }
.fwaf-cta__btn { background: #EC4899; }
.fwaf-cta__btn:hover { background: #BE185D; transform: translateY(-2px); }

/* ========================================================================
   16) DDOS PROTECTION — .ddos-* (magenta #9D174D → #DB2777)
   ======================================================================== */
.ddos-counter .srv-counter__num { background-image: linear-gradient(90deg, #9D174D, #DB2777); }
.ddos-feature-card__icon { background: linear-gradient(135deg, #9D174D, #DB2777); }
.ddos-checklist li::before { color: #9D174D; }
.ddos-cta { background: linear-gradient(135deg, #9D174D, #500724); box-shadow: 0 18px 40px -16px rgba(157,23,77,0.45); }
.ddos-cta__btn { background: #DB2777; }
.ddos-cta__btn:hover { background: #9D174D; transform: translateY(-2px); }

/* ========================================================================
   17) SERVER MONITORING — .mont-* (teal #0D9488 → #2DD4BF)
   ======================================================================== */
.mont-counter .srv-counter__num { background-image: linear-gradient(90deg, #0D9488, #2DD4BF); }
.mont-feature-card__icon { background: linear-gradient(135deg, #0D9488, #2DD4BF); }
.mont-checklist li::before { color: #0D9488; }
.mont-cta { background: linear-gradient(135deg, #0D9488, #115E59); box-shadow: 0 18px 40px -16px rgba(13,148,136,0.45); }
.mont-cta__btn { background: #2DD4BF; }
.mont-cta__btn:hover { background: #0D9488; transform: translateY(-2px); }

/* ========================================================================
   18) PERFORMANCE OPTIMIZATION — .prfm-* (amber #B45309 → #F59E0B)
   ======================================================================== */
.prfm-counter .srv-counter__num { background-image: linear-gradient(90deg, #B45309, #F59E0B); }
.prfm-feature-card__icon { background: linear-gradient(135deg, #B45309, #F59E0B); }
.prfm-checklist li::before { color: #B45309; }
.prfm-cta { background: linear-gradient(135deg, #B45309, #78350F); box-shadow: 0 18px 40px -16px rgba(180,83,9,0.45); }
.prfm-cta__btn { background: #F59E0B; }
.prfm-cta__btn:hover { background: #B45309; transform: translateY(-2px); }

/* =========================================================================
   UNIQUE CENTERPIECE STYLES — added for the 9 newly built pages.
   Each is page-scoped (uses its own prefix) so no bleed between pages.
   ========================================================================= */

/* ---- Cloud server management: cost-savings breakdown (.clds-savings) ---- */
.clds-savings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
.clds-savings__item {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 18px 20px; font-size: 14px; color: #374151; line-height: 1.55;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    transition: all 0.25s ease;
}
.clds-savings__item:hover { border-color: #38BDF8; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(14,165,233,0.18); }
.clds-savings__item strong { color: #0b1020; font-weight: 700; }
.clds-savings__pct {
    margin-left: auto; flex: 0 0 auto;
    background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #fff;
    padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
@media (max-width: 900px) { .clds-savings { grid-template-columns: 1fr; } }

/* ---- VPS management: architecture rows (.vmgt-arch) ---- */
.vmgt-arch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.vmgt-arch__row {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 24px; display: flex; gap: 18px; align-items: flex-start;
    transition: all 0.25s ease;
}
.vmgt-arch__row:hover { border-color: #F97316; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(234,88,12,0.18); }
.vmgt-arch__row i { color: #EA580C; font-size: 24px; flex: 0 0 auto; margin-top: 2px; }
.vmgt-arch__row h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b1020; }
.vmgt-arch__row p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.55; }
@media (max-width: 900px) { .vmgt-arch { grid-template-columns: 1fr; } }

/* ---- Server security hardening: categorized checklist (.shrd-list) ---- */
.shrd-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.shrd-list__cat {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: #0b1020; margin: 0 0 10px;
    padding-bottom: 8px; border-bottom: 2px solid #1E3A8A;
}
.shrd-list__cat i { color: #1E3A8A; font-size: 18px; }
.shrd-list__cat strong { font-weight: 800; }
.shrd-list ul { list-style: none; padding: 0; margin: 0; }
.shrd-list li {
    position: relative; padding: 6px 0 6px 26px; color: #4b5568; font-size: 14px; line-height: 1.5;
}
.shrd-list li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 8px; font-size: 12px; color: #10B981;
}
@media (max-width: 900px) { .shrd-list { grid-template-columns: 1fr; } }

/* ---- Cyber security: MITRE ATT&CK tactics (.cybr-tactics) ---- */
.cybr-tactics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.cybr-tactic {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
    padding: 16px 20px; font-size: 14px; color: #374151; line-height: 1.55;
    transition: all 0.25s ease;
    border-left: 4px solid #475569;
}
.cybr-tactic:hover { border-color: #0F172A; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15,23,42,0.20); }
.cybr-tactic strong { color: #0F172A; font-weight: 700; }
@media (max-width: 900px) { .cybr-tactics { grid-template-columns: 1fr; } }

/* ---- Malware: 5-step IR process (.malm-process) ---- */
.malm-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; }
.malm-step {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 18px; transition: all 0.25s ease; position: relative;
}
.malm-step:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(185,28,28,0.25); border-color: #EF4444; }
.malm-step__num {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #B91C1C, #EF4444); color: #fff;
    font-weight: 800; font-size: 16px; display: grid; place-items: center;
    margin: 0 0 12px;
}
.malm-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b1020; }
.malm-step p { margin: 0; font-size: 13px; color: #4b5568; line-height: 1.55; }
@media (max-width: 900px) { .malm-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .malm-process { grid-template-columns: 1fr; } }

/* ---- Firewall & WAF: OWASP Top 10 rows (.fwaf-owasp) ---- */
.fwaf-owasp { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
.fwaf-owasp__row {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
    padding: 16px 22px; font-size: 14px; color: #374151; line-height: 1.55;
    transition: all 0.25s ease;
    border-left: 4px solid #EC4899;
}
.fwaf-owasp__row:hover { border-color: #BE185D; transform: translateX(4px); box-shadow: 0 10px 20px -8px rgba(190,24,93,0.18); }
.fwaf-owasp__row strong { color: #831843; font-weight: 800; margin-right: 4px; }

/* ---- DDoS: scrubbing layers (.ddos-layers) ---- */
.ddos-layers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.ddos-layer {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px;
    padding: 24px 26px; transition: all 0.25s ease;
    border-top: 4px solid #DB2777;
}
.ddos-layer:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -10px rgba(157,23,77,0.25); }
.ddos-layer__num {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #9D174D, #DB2777); color: #fff;
    font-weight: 800; font-size: 15px; display: grid; place-items: center;
    margin: 0 0 12px;
}
.ddos-layer h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0b1020; display: flex; align-items: center; gap: 10px; }
.ddos-layer h4 i { color: #9D174D; font-size: 18px; }
.ddos-layer p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.6; }
@media (max-width: 900px) { .ddos-layers { grid-template-columns: 1fr; } }

/* ---- Monitoring: global PoP network (.mont-pops) ---- */
.mont-pops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.mont-pop {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
    padding: 16px 22px; font-size: 14px; color: #374151; line-height: 1.5;
    transition: all 0.25s ease; display: flex; align-items: center; gap: 12px;
}
.mont-pop:hover { border-color: #2DD4BF; transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(13,148,136,0.20); }
.mont-pop i { color: #0D9488; font-size: 18px; }
.mont-pop strong { color: #0b1020; font-weight: 700; }
@media (max-width: 900px) { .mont-pops { grid-template-columns: 1fr; } }

/* ---- Performance: 4-step engagement process (.prfm-process) ---- */
.prfm-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.prfm-step {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px;
    padding: 24px 22px; transition: all 0.25s ease; position: relative;
}
.prfm-step:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -10px rgba(180,83,9,0.25); border-color: #F59E0B; }
.prfm-step__num {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #B45309, #F59E0B); color: #fff;
    font-weight: 800; font-size: 18px; display: grid; place-items: center;
    margin: 0 0 14px;
}
.prfm-step h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0b1020; }
.prfm-step p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.6; }
@media (max-width: 900px) { .prfm-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .prfm-process { grid-template-columns: 1fr; } }

/* =========================================================================
   UNIQUE PRE-CTA SECTIONS — one per page, themed to the page's brand.
   These are the signature "before-CTA" sections that make each page
   visually distinct (not just same hero + 9 cards + counters + CTA).
   ========================================================================= */

/* ---- 1) Linux VPS — distro grid (lvps-*) ---- */
.lvps-distros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.lvps-distro {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
    padding: 16px 18px; display: flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600; color: #0b1020;
    transition: all 0.25s ease;
}
.lvps-distro:hover { border-color: #F59E0B; transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(245,158,11,0.30); }
.lvps-distro i { color: #F59E0B; font-size: 22px; flex: 0 0 auto; }
@media (max-width: 900px) { .lvps-distros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lvps-distros { grid-template-columns: 1fr; } }

/* ---- 2) Windows VPS — use cases (wvps-*) ---- */
.wvps-usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.wvps-usecase {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px;
    padding: 24px 22px; transition: all 0.25s ease;
    border-top: 4px solid #0067B8;
}
.wvps-usecase:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(0,103,184,0.25); }
.wvps-usecase__icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #0067B8, #00A4EF); color: #fff;
    display: grid; place-items: center; font-size: 20px; margin-bottom: 14px;
}
.wvps-usecase h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b1020; }
.wvps-usecase p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.55; }
@media (max-width: 900px) { .wvps-usecases { grid-template-columns: 1fr; } }

/* ---- 3) Managed VPS — DIY vs Managed comparison (mvps-*) ---- */
.mvps-compare {
    background: #fff; border-radius: 18px; border: 1px solid #e7eaf0;
    overflow: hidden; margin-top: 32px;
    box-shadow: 0 10px 30px -12px rgba(16,185,129,0.18);
}
.mvps-compare table { width: 100%; border-collapse: collapse; }
.mvps-compare th { background: linear-gradient(135deg, #10B981, #047857); color: #fff; font-size: 14px; font-weight: 700; padding: 16px 20px; text-align: left; }
.mvps-compare th:not(:first-child) { text-align: center; }
.mvps-compare td { padding: 14px 20px; font-size: 14px; color: #374151; border-top: 1px solid #f3f4f6; }
.mvps-compare td:not(:first-child) { text-align: center; }
.mvps-compare tr:hover td { background: #f9fafb; }
.mvps-good { color: #047857 !important; font-weight: 700; }
.mvps-bad { color: #B91C1C !important; font-weight: 600; }
.mvps-good::before { content: "\f00c "; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.mvps-bad::before { content: "\f00d "; font-family: "Font Awesome 5 Free"; font-weight: 900; }
@media (max-width: 700px) { .mvps-compare { font-size: 13px; } .mvps-compare th, .mvps-compare td { padding: 10px 12px; } }

/* ---- 4) Dedicated — 8 use-case grid (dedi-*) ---- */
.dedi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.dedi-item {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 20px; text-align: center; transition: all 0.25s ease;
}
.dedi-item:hover { border-color: #4F46E5; transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgba(79,70,229,0.30); }
.dedi-item__icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff;
    display: grid; place-items: center; font-size: 20px; margin: 0 auto 12px;
}
.dedi-item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #0b1020; }
.dedi-item p { margin: 0; font-size: 13px; color: #4b5568; line-height: 1.5; }
@media (max-width: 900px) { .dedi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dedi-grid { grid-template-columns: 1fr; } }

/* ---- 5) Managed Dedicated — compliance badge wall (mddc-*) ---- */
.mddc-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 32px; }
.mddc-badge {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 20px 14px; text-align: center; transition: all 0.25s ease;
}
.mddc-badge:hover { border-color: #8B5CF6; transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(139,92,246,0.30); }
.mddc-badge__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff;
    display: grid; place-items: center; font-size: 20px; margin: 0 auto 10px;
}
.mddc-badge h4 { margin: 0 0 2px; font-size: 13px; font-weight: 800; color: #0b1020; letter-spacing: 0.04em; }
.mddc-badge p { margin: 0; font-size: 11px; color: #6b7280; }
@media (max-width: 900px) { .mddc-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .mddc-badges { grid-template-columns: repeat(2, 1fr); } }

/* ---- 6) Infrastructure Management — 6-step change management (infr-*) ---- */
.infr-change { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.infr-step {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 24px; transition: all 0.25s ease; position: relative;
    border-left: 4px solid #14B8A6;
}
.infr-step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,118,110,0.25); }
.infr-step__num {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #0F766E, #14B8A6); color: #fff;
    font-weight: 800; font-size: 15px; display: grid; place-items: center;
    margin-bottom: 12px;
}
.infr-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b1020; }
.infr-step p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.55; }
@media (max-width: 900px) { .infr-change { grid-template-columns: 1fr; } }

/* ---- 7) Control Panel — managed security stack list (cpan-*) ---- */
.cpan-stack {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 18px;
    padding: 24px 28px; margin-top: 32px;
    box-shadow: 0 10px 30px -12px rgba(8,145,178,0.18);
}
.cpan-stack__row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid #f3f4f6;
    font-size: 15px; color: #374151;
}
.cpan-stack__row:last-child { border-bottom: none; }
.cpan-stack__row i { color: #0891B2; font-size: 18px; flex: 0 0 auto; }
.cpan-stack__row strong { color: #0b1020; font-weight: 700; min-width: 200px; }
.cpan-stack__row span { color: #4b5568; font-size: 14px; }
@media (max-width: 700px) { .cpan-stack__row { flex-wrap: wrap; } .cpan-stack__row strong { min-width: 0; } }

/* ---- 8) Setup & Config — 6-step process (stup-*) ---- */
.stup-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.stup-step {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 24px 22px; transition: all 0.25s ease; position: relative;
}
.stup-step:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(30,64,175,0.25); border-color: #3B82F6; }
.stup-step__num {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #1E40AF, #3B82F6); color: #fff;
    font-weight: 800; font-size: 16px; display: grid; place-items: center;
    margin-bottom: 12px;
}
.stup-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b1020; }
.stup-step p { margin: 0; font-size: 14px; color: #4b5568; line-height: 1.55; }
@media (max-width: 900px) { .stup-process { grid-template-columns: 1fr; } }

/* ---- 9) Migration — 5-step process (migr-*, the new pre-CTA section) ---- */
.migr-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.migr-step {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 22px 18px; transition: all 0.25s ease; position: relative;
}
.migr-step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(124,58,237,0.30); border-color: #A855F7; }
.migr-step__num {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #A855F7); color: #fff;
    font-weight: 800; font-size: 15px; display: grid; place-items: center;
    margin-bottom: 12px;
}
.migr-step h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #0b1020; }
.migr-step p { margin: 0; font-size: 13px; color: #4b5568; line-height: 1.5; }
@media (max-width: 900px) { .migr-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .migr-process { grid-template-columns: 1fr; } }


/* =========================================================================
   NEW UNIQUE SECTION TYPES — added for the v3 rewrite of all 18 server pages.
   Each section type is page-scoped (uses its own prefix) so no bleeding.
   ========================================================================= */

/* ---- Shared building blocks ---- */
.srv-section-head-center { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.srv-section-head-center .phx-eyebrow { display: inline-block; margin-bottom: 10px; }

/* ---- LINUX VPS ---- */
.lvps-specsheet { display: flex; flex-direction: column; gap: 0; border: 1px solid #e7eaf0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px -12px rgba(11,16,32,0.10); }
.lvps-specsheet__row { display: grid; grid-template-columns: 1fr 1.2fr 1.8fr; padding: 18px 24px; border-bottom: 1px solid #f1f5f9; transition: background 0.2s ease; }
.lvps-specsheet__row:hover { background: #fafbfc; }
.lvps-specsheet__row--head { background: linear-gradient(135deg, #F59E0B, #B45309); color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.lvps-specsheet__row--head:hover { background: linear-gradient(135deg, #F59E0B, #B45309); }
.lvps-specsheet__row i { color: #F59E0B; margin-right: 8px; }
@media (max-width: 800px) { .lvps-specsheet__row { grid-template-columns: 1fr; gap: 4px; } }

.lvps-distro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.lvps-distro-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 20px 18px; transition: all 0.25s ease; }
.lvps-distro-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgba(245,158,11,0.25); border-color: #F59E0B; }
.lvps-distro-card--featured { border-color: #F59E0B; background: linear-gradient(180deg, #fffbf0, #fff); }
.lvps-distro-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lvps-distro-card__head i { font-size: 24px; color: #F59E0B; }
.lvps-distro-card__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; background: rgba(245,158,11,0.15); color: #B45309; border-radius: 999px; }
.lvps-distro-card h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.lvps-distro-card p { font-size: 12px; color: #4b5568; margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .lvps-distro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lvps-distro-grid { grid-template-columns: 1fr; } }

.lvps-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.lvps-plan { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 28px 26px; transition: all 0.25s ease; position: relative; }
.lvps-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -10px rgba(245,158,11,0.20); }
.lvps-plan--featured { border-color: #F59E0B; box-shadow: 0 12px 28px -10px rgba(245,158,11,0.30); }
.lvps-plan__badge { position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, #F59E0B, #B45309); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; letter-spacing: 0.05em; }
.lvps-plan__name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #F59E0B; }
.lvps-plan__price { font-size: 42px; font-weight: 800; color: #0b1020; margin: 8px 0; line-height: 1; }
.lvps-plan__price small { font-size: 14px; color: #6b7280; font-weight: 600; }
.lvps-plan__spec { font-size: 13px; color: #4b5568; padding: 8px 0; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; }
.lvps-plan ul { list-style: none; padding: 0; margin: 0 0 20px; }
.lvps-plan li { font-size: 14px; color: #374151; padding: 6px 0 6px 22px; position: relative; }
.lvps-plan li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 8px; font-size: 12px; color: #10B981; }
.lvps-plan__cta { display: block; text-align: center; padding: 13px 20px; background: #0b1020; color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; transition: all 0.2s ease; }
.lvps-plan--featured .lvps-plan__cta { background: linear-gradient(135deg, #F59E0B, #B45309); }
.lvps-plan__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.20); }
@media (max-width: 900px) { .lvps-plans { grid-template-columns: 1fr; } }

.lvps-bench { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 24px 28px; margin-top: 32px; box-shadow: 0 8px 24px -12px rgba(11,16,32,0.10); }
.lvps-bench__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; margin-bottom: 18px; font-size: 14px; }
.lvps-bench__head i { color: #10b981; }
.lvps-bench__bars { display: flex; flex-direction: column; gap: 14px; }
.lvps-bench__bar { display: grid; grid-template-columns: 1.4fr 3fr auto; gap: 16px; align-items: center; font-size: 14px; }
.lvps-bench__bar span { color: #4b5568; font-weight: 600; }
.lvps-bench__bar strong { color: #0b1020; font-weight: 800; min-width: 90px; text-align: right; }
.lvps-bench__track { background: #f1f5f9; height: 10px; border-radius: 999px; overflow: hidden; }
.lvps-bench__fill { height: 100%; border-radius: 999px; transition: width 1s ease; }
@media (max-width: 700px) { .lvps-bench__bar { grid-template-columns: 1fr; gap: 4px; } }

.lvps-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; max-width: 860px; margin-left: auto; margin-right: auto; }
.lvps-faq__item { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 0; transition: all 0.2s ease; }
.lvps-faq__item:hover { border-color: #F59E0B; }
.lvps-faq__item summary { padding: 16px 22px; cursor: pointer; font-weight: 700; color: #0b1020; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 12px; }
.lvps-faq__item summary::-webkit-details-marker { display: none; }
.lvps-faq__item summary::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; color: #F59E0B; transition: transform 0.2s; }
.lvps-faq__item[open] summary::after { transform: rotate(180deg); }
.lvps-faq__item i { color: #F59E0B; }
.lvps-faq__item p { padding: 0 22px 18px 48px; margin: 0; color: #4b5568; line-height: 1.65; font-size: 14px; }

/* ---- WINDOWS VPS ---- */
.wvps-editions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.wvps-edition { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 26px 22px; transition: all 0.25s ease; position: relative; }
.wvps-edition:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(0,103,184,0.20); border-color: #0067B8; }
.wvps-edition--featured { border-color: #0067B8; box-shadow: 0 12px 24px -10px rgba(0,103,184,0.25); }
.wvps-edition__logo { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #0067B8, #00A4EF); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.wvps-edition h3 { font-size: 17px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.wvps-edition__sub { font-size: 13px; color: #4b5568; margin-bottom: 14px; }
.wvps-edition__price { font-size: 24px; font-weight: 800; color: #0067B8; margin: 10px 0; }
.wvps-edition__price small { font-size: 12px; color: #6b7280; font-weight: 600; }
.wvps-edition ul { list-style: none; padding: 0; margin: 14px 0; border-top: 1px solid #f1f5f9; padding-top: 12px; }
.wvps-edition li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 18px; position: relative; }
.wvps-edition li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #0067B8; }
.wvps-edition__tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; background: #0067B8; color: #fff; border-radius: 999px; }
@media (max-width: 900px) { .wvps-editions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wvps-editions { grid-template-columns: 1fr; } }

.wvps-usecases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.wvps-usecase { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.wvps-usecase:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0,103,184,0.20); }
.wvps-usecase__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #0067B8, #00A4EF); color: #fff; display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }
.wvps-usecase h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.wvps-usecase p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .wvps-usecases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wvps-usecases { grid-template-columns: 1fr; } }

.wvps-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.wvps-stack__group { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 26px; transition: all 0.25s ease; }
.wvps-stack__group:hover { border-color: #0067B8; transform: translateY(-2px); }
.wvps-stack__group h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #0067B8; display: flex; align-items: center; gap: 10px; }
.wvps-stack__group ul { list-style: none; padding: 0; margin: 0; }
.wvps-stack__group li { font-size: 14px; color: #4b5568; padding: 6px 0 6px 22px; position: relative; }
.wvps-stack__group li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 8px; font-size: 11px; color: #10B981; }
@media (max-width: 800px) { .wvps-stack { grid-template-columns: 1fr; } }

.wvps-regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; }
.wvps-region { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 14px 18px; display: grid; grid-template-columns: 48px 1fr 80px; gap: 14px; align-items: center; transition: all 0.2s ease; }
.wvps-region:hover { border-color: #0067B8; }
.wvps-region__flag { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0067B8, #00A4EF); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.wvps-region__ping { font-weight: 800; color: #10B981; font-size: 14px; text-align: right; }
@media (max-width: 600px) { .wvps-regions { grid-template-columns: 1fr; } }

.wvps-quotes, .cybr-quotes, .ddos-quotes, .malm-quotes, .fwaf-quotes, .shrd-quotes, .cpan-quotes, .infr-quotes, .vmgt-quotes, .migr-quotes, .stup-quotes, .prfm-quotes, .clds-quotes, .mddc-quotes, .mvps-quotes, .dedi-quotes, .mont-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
[class*="-quote"] { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
[class*="-quote"]:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0,0,0,0.10); }
[class*="-quote__text"] { font-size: 14px; color: #374151; line-height: 1.65; margin-bottom: 16px; font-style: italic; }
[class*="-quote__author"] { font-size: 13px; color: #4b5568; padding-top: 14px; border-top: 1px solid #f1f5f9; }
[class*="-quote__author"] strong { color: #0b1020; font-weight: 700; }
@media (max-width: 900px) { .wvps-quotes, .cybr-quotes, .ddos-quotes, .malm-quotes, .fwaf-quotes, .shrd-quotes, .cpan-quotes, .infr-quotes, .vmgt-quotes, .migr-quotes, .stup-quotes, .prfm-quotes, .clds-quotes, .mddc-quotes, .mvps-quotes, .dedi-quotes, .mont-quotes { grid-template-columns: 1fr; } }

/* ---- MANAGED VPS ---- */
.mvps-handle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.mvps-handle__cat { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.mvps-handle__cat:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(16,185,129,0.20); border-color: #10B981; }
.mvps-handle__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #10B981, #34D399); color: #fff; display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }
.mvps-handle__cat h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #0b1020; }
.mvps-handle__cat ul { list-style: none; padding: 0; margin: 0; }
.mvps-handle__cat li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; line-height: 1.5; }
.mvps-handle__cat li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #10B981; }
@media (max-width: 900px) { .mvps-handle { grid-template-columns: 1fr; } }

.mvps-compare { background: #fff; border-radius: 18px; border: 1px solid #e7eaf0; overflow: hidden; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(16,185,129,0.18); }
.mvps-compare table { width: 100%; border-collapse: collapse; }
.mvps-compare th { background: linear-gradient(135deg, #10B981, #047857); color: #fff; font-size: 13px; font-weight: 800; padding: 16px 20px; text-align: left; text-transform: uppercase; letter-spacing: 0.05em; }
.mvps-compare th:not(:first-child) { text-align: center; }
.mvps-compare td { padding: 14px 20px; font-size: 14px; color: #374151; border-top: 1px solid #f3f4f6; }
.mvps-compare td:not(:first-child) { text-align: center; }
.mvps-compare tr:hover td { background: #f9fafb; }
.mvps-good { color: #047857 !important; font-weight: 700; }
.mvps-bad { color: #B91C1C !important; font-weight: 600; }
@media (max-width: 700px) { .mvps-compare { font-size: 12px; } .mvps-compare th, .mvps-compare td { padding: 10px 12px; } }

.mvps-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.mvps-team__member { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; text-align: center; transition: all 0.25s ease; }
.mvps-team__member:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(16,185,129,0.20); }
.mvps-team__avatar { width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 22px; font-weight: 800; display: grid; place-items: center; margin: 0 auto 12px; }
.mvps-team__member h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 2px; }
.mvps-team__role { font-size: 12px; color: #10B981; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.mvps-team__member p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .mvps-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mvps-team { grid-template-columns: 1fr; } }

.mvps-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.mvps-tier { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 28px 24px; transition: all 0.25s ease; position: relative; }
.mvps-tier:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -10px rgba(16,185,129,0.20); }
.mvps-tier--featured { border-color: #10B981; box-shadow: 0 12px 24px -10px rgba(16,185,129,0.25); }
.mvps-tier h3 { font-size: 22px; font-weight: 800; color: #0b1020; margin: 0 0 8px; }
.mvps-tier__price { font-size: 32px; font-weight: 800; color: #10B981; margin: 4px 0; }
.mvps-tier__price small { font-size: 13px; color: #6b7280; font-weight: 600; }
.mvps-tier__sub { font-size: 12px; color: #6b7280; margin-bottom: 14px; }
.mvps-tier ul { list-style: none; padding: 14px 0; margin: 0; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
.mvps-tier li { font-size: 13px; color: #374151; padding: 5px 0 5px 22px; position: relative; }
.mvps-tier li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 7px; font-size: 11px; color: #10B981; }
.mvps-tier__cta { display: block; text-align: center; padding: 12px 20px; background: linear-gradient(135deg, #10B981, #047857); color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; margin-top: 16px; }
.mvps-tier__cta:hover { transform: translateY(-2px); }
@media (max-width: 900px) { .mvps-tiers { grid-template-columns: 1fr; } }

.mvps-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; }
.mvps-timeline__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.mvps-timeline__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(16,185,129,0.20); border-color: #10B981; }
.mvps-timeline__day { font-size: 11px; font-weight: 800; color: #10B981; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.mvps-timeline__step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.mvps-timeline__step p { font-size: 13px; color: #4b5568; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .mvps-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mvps-timeline { grid-template-columns: 1fr; } }

/* ---- DEDICATED ---- */
.dedi-classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.dedi-class { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 26px 22px; transition: all 0.25s ease; position: relative; }
.dedi-class:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -10px rgba(79,70,229,0.25); border-color: #4F46E5; }
.dedi-class--featured { border-color: #4F46E5; box-shadow: 0 12px 24px -10px rgba(79,70,229,0.30); }
.dedi-class__badge { position: absolute; top: -12px; right: 18px; background: linear-gradient(135deg, #4F46E5, #312E81); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.06em; }
.dedi-class__name { font-size: 13px; font-weight: 800; color: #4F46E5; text-transform: uppercase; letter-spacing: 0.05em; }
.dedi-class__cpu { font-size: 18px; font-weight: 800; color: #0b1020; margin: 10px 0 4px; }
.dedi-class__spec, .dedi-class__ram, .dedi-class__disk, .dedi-class__net { font-size: 13px; color: #4b5568; padding: 4px 0; }
.dedi-class__price { font-size: 30px; font-weight: 800; color: #4F46E5; margin: 12px 0 4px; }
.dedi-class__price small { font-size: 12px; color: #6b7280; font-weight: 600; }
.dedi-class__setup { font-size: 12px; color: #10B981; font-weight: 700; margin-bottom: 14px; }
.dedi-class__cta { display: block; text-align: center; padding: 11px 20px; background: linear-gradient(135deg, #4F46E5, #312E81); color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; }
@media (max-width: 1100px) { .dedi-classes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dedi-classes { grid-template-columns: 1fr; } }

.dedi-workloads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.dedi-workload { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 26px; transition: all 0.25s ease; }
.dedi-workload:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(79,70,229,0.20); }
.dedi-workload__icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; display: grid; place-items: center; font-size: 20px; margin-bottom: 12px; }
.dedi-workload h4 { font-size: 17px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.dedi-workload p { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0 0 12px; }
.dedi-workload__case { font-size: 12px; color: #4F46E5; padding: 10px 14px; background: rgba(79,70,229,0.08); border-radius: 8px; border-left: 3px solid #4F46E5; }
.dedi-workload__case strong { color: #312E81; }
@media (max-width: 800px) { .dedi-workloads { grid-template-columns: 1fr; } }

.dedi-custom { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.dedi-custom__slot { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 20px 24px; transition: all 0.25s ease; }
.dedi-custom__slot:hover { border-color: #4F46E5; }
.dedi-custom__slot-name { font-size: 14px; font-weight: 800; color: #4F46E5; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.dedi-custom__slot-options { display: flex; flex-wrap: wrap; gap: 8px; }
.dedi-custom__slot-options span { font-size: 12px; padding: 5px 12px; background: rgba(79,70,229,0.08); color: #312E81; border-radius: 999px; font-weight: 600; }

.dedi-dcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.dedi-dc { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; border-top: 3px solid #4F46E5; }
.dedi-dc:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(79,70,229,0.20); }
.dedi-dc h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.dedi-dc__cert { font-size: 11px; color: #4F46E5; font-weight: 700; margin-bottom: 10px; }
.dedi-dc p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .dedi-dcs { grid-template-columns: 1fr; } }

/* ---- MANAGED DEDICATED ---- */
.mddc-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 32px; }
.mddc-badge { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 12px; text-align: center; transition: all 0.25s ease; }
.mddc-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(139,92,246,0.30); border-color: #8B5CF6; }
.mddc-badge__icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; display: grid; place-items: center; font-size: 18px; margin: 0 auto 8px; }
.mddc-badge h4 { font-size: 12px; font-weight: 800; color: #0b1020; margin: 0 0 2px; letter-spacing: 0.04em; }
.mddc-badge p { font-size: 10px; color: #6b7280; margin: 0; }
@media (max-width: 900px) { .mddc-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .mddc-badges { grid-template-columns: repeat(2, 1fr); } }

.mddc-runbook { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; overflow: hidden; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(139,92,246,0.20); }
.mddc-runbook__head { background: linear-gradient(135deg, #6366F1, #4338CA); color: #fff; padding: 18px 24px; font-size: 15px; display: flex; align-items: center; gap: 12px; }
.mddc-runbook__head i { color: #FCD34D; }
.mddc-runbook__head code { background: rgba(0,0,0,0.20); padding: 3px 8px; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 13px; }
.mddc-runbook__meta { background: #f8fafc; padding: 12px 24px; font-size: 13px; color: #4b5568; border-bottom: 1px solid #e7eaf0; }
.mddc-runbook__steps { padding: 18px 24px; }
.mddc-runbook__step { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #374151; }
.mddc-runbook__step:last-child { border-bottom: none; }
.mddc-runbook__t { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.mddc-runbook__step strong { color: #0b1020; }
.mddc-runbook__result { background: rgba(16,185,129,0.10); padding: 14px 24px; color: #065F46; font-size: 14px; border-top: 1px solid #e7eaf0; }
.mddc-runbook__result i { color: #10B981; }

.mddc-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 32px; }
.mddc-tier { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 20px 18px; transition: all 0.25s ease; position: relative; }
.mddc-tier:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(139,92,246,0.20); }
.mddc-tier--featured { border-color: #8B5CF6; box-shadow: 0 12px 24px -10px rgba(139,92,246,0.25); }
.mddc-tier__badge { position: absolute; top: -10px; right: 14px; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.05em; }
.mddc-tier h3 { font-size: 17px; font-weight: 800; color: #0b1020; margin: 0 0 6px; }
.mddc-tier__price { font-size: 24px; font-weight: 800; color: #6366F1; margin: 4px 0 12px; }
.mddc-tier__price small { font-size: 12px; color: #6b7280; font-weight: 600; }
.mddc-tier ul { list-style: none; padding: 0; margin: 0; }
.mddc-tier li { font-size: 12px; color: #4b5568; padding: 4px 0 4px 18px; position: relative; line-height: 1.45; }
.mddc-tier li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 9px; color: #6366F1; }
@media (max-width: 1100px) { .mddc-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mddc-tiers { grid-template-columns: 1fr; } }

.mddc-oncall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.mddc-oncall__shift { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 18px; transition: all 0.25s ease; }
.mddc-oncall__shift:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(139,92,246,0.20); }
.mddc-oncall__shift--lead { background: linear-gradient(135deg, #6366F1, #4338CA); color: #fff; border-color: transparent; }
.mddc-oncall__tz { font-size: 11px; font-weight: 800; color: #6366F1; text-transform: uppercase; letter-spacing: 0.08em; }
.mddc-oncall__shift--lead .mddc-oncall__tz { color: rgba(255,255,255,0.85); }
.mddc-oncall__hours { font-size: 14px; font-weight: 800; color: #0b1020; margin: 4px 0 8px; }
.mddc-oncall__shift--lead .mddc-oncall__hours { color: #fff; }
.mddc-oncall__name { font-size: 14px; font-weight: 700; }
.mddc-oncall__role { font-size: 11px; opacity: 0.85; margin-top: 2px; }
@media (max-width: 1000px) { .mddc-oncall { grid-template-columns: repeat(2, 1fr); } }

/* ---- INFRASTRUCTURE MGMT ---- */
.infr-layers { display: flex; flex-direction: column; gap: 0; border: 1px solid #e7eaf0; border-radius: 18px; overflow: hidden; margin-top: 32px; background: #fff; box-shadow: 0 8px 24px -12px rgba(15,118,110,0.15); }
.infr-layer { display: grid; grid-template-columns: 80px 1fr 2fr; padding: 18px 24px; border-bottom: 1px solid #f1f5f9; gap: 18px; align-items: center; transition: background 0.2s ease; }
.infr-layer:hover { background: #f0fdfa; }
.infr-layer:last-child { border-bottom: none; }
.infr-layer__num { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #0F766E, #14B8A6); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.infr-layer__name { font-size: 16px; font-weight: 700; color: #0b1020; }
.infr-layer__what { font-size: 14px; color: #4b5568; }
@media (max-width: 800px) { .infr-layer { grid-template-columns: 56px 1fr; gap: 12px; } .infr-layer__what { grid-column: 1 / -1; } }

.infr-trees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.infr-tree { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.infr-tree:hover { border-color: #14B8A6; transform: translateY(-2px); }
.infr-tree h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #0F766E; display: flex; align-items: center; gap: 10px; }
.infr-tree h4 i { color: #14B8A6; }
.infr-tree ul { list-style: none; padding: 0; margin: 0; }
.infr-tree li { font-size: 13px; color: #4b5568; padding: 5px 0; line-height: 1.5; }
.infr-tree li strong { color: #0F766E; }
@media (max-width: 800px) { .infr-trees { grid-template-columns: 1fr; } }

.infr-decisions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.infr-decision { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.infr-decision:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15,118,110,0.18); }
.infr-decision h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 10px; }
.infr-decision__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.infr-decision__opts span { font-size: 11px; padding: 4px 10px; background: rgba(20,184,166,0.10); color: #0F766E; border-radius: 999px; font-weight: 600; }
.infr-decision p { font-size: 13px; color: #4b5568; margin: 0; line-height: 1.5; }
.infr-decision p strong { color: #14B8A6; }
@media (max-width: 800px) { .infr-decisions { grid-template-columns: 1fr; } }

.infr-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.infr-result { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.infr-result:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,118,110,0.25); }
.infr-result__metric { font-size: 40px; font-weight: 800; background: linear-gradient(135deg, #0F766E, #14B8A6); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.infr-result__label { font-size: 13px; color: #4b5568; margin-top: 10px; line-height: 1.5; }
@media (max-width: 900px) { .infr-results { grid-template-columns: repeat(2, 1fr); } }

/* ---- CONTROL PANEL ---- */
.cpan-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.cpan-logo { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 18px; transition: all 0.25s ease; }
.cpan-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(8,145,178,0.20); border-color: #0891B2; }
.cpan-logo--featured { border-color: #06B6D4; background: linear-gradient(180deg, #ecfeff, #fff); }
.cpan-logo__big { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #0891B2, #06B6D4); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.cpan-logo h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.cpan-logo__license { font-size: 12px; color: #0891B2; font-weight: 700; margin-bottom: 10px; }
.cpan-logo ul { list-style: none; padding: 0; margin: 0; }
.cpan-logo li { font-size: 12px; color: #4b5568; padding: 3px 0 3px 18px; position: relative; line-height: 1.4; }
.cpan-logo li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 9px; color: #06B6D4; }
@media (max-width: 900px) { .cpan-logos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cpan-logos { grid-template-columns: 1fr; } }

.cpan-software { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.cpan-software__cat { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 20px; transition: all 0.25s ease; }
.cpan-software__cat:hover { border-color: #06B6D4; transform: translateY(-2px); }
.cpan-software__cat i { color: #0891B2; font-size: 22px; margin-bottom: 8px; display: block; }
.cpan-software__cat h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.cpan-software__cat p { font-size: 12px; color: #4b5568; margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .cpan-software { grid-template-columns: repeat(2, 1fr); } }

.cpan-hardening { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.cpan-hardening__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
.cpan-hardening__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(8,145,178,0.20); }
.cpan-hardening__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0891B2, #06B6D4); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.cpan-hardening__step h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.cpan-hardening__step p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .cpan-hardening { grid-template-columns: repeat(2, 1fr); } }

.cpan-case { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 28px; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(8,145,178,0.18); }
.cpan-case__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
.cpan-case__head strong { font-size: 18px; color: #0b1020; }
.cpan-case__head span { font-size: 13px; color: #4b5568; }
.cpan-case__tag { background: linear-gradient(135deg, #0891B2, #06B6D4); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.cpan-case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cpan-case__block h4 { font-size: 14px; font-weight: 800; color: #0891B2; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }
.cpan-case__block p { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .cpan-case__grid { grid-template-columns: 1fr; } }

/* ---- SETUP & CONFIG ---- */
.stup-wizard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.stup-wizard__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px 18px; transition: all 0.25s ease; position: relative; border-top: 4px solid #3B82F6; }
.stup-wizard__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(30,64,175,0.25); }
.stup-wizard__check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: #10B981; color: #fff; display: grid; place-items: center; font-size: 10px; }
.stup-wizard__num { font-size: 28px; font-weight: 800; color: #1E40AF; opacity: 0.4; line-height: 1; }
.stup-wizard__step h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 8px 0 8px; }
.stup-wizard__step p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0 0 12px; }
.stup-wizard__time { font-size: 12px; font-weight: 800; color: #1E40AF; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 900px) { .stup-wizard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stup-wizard { grid-template-columns: 1fr; } }

.stup-checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.stup-checklist__cat { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.stup-checklist__cat:hover { border-color: #3B82F6; transform: translateY(-2px); }
.stup-checklist__cat-num { font-size: 32px; font-weight: 800; color: #1E40AF; line-height: 1; margin-bottom: 6px; }
.stup-checklist__cat h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 12px; }
.stup-checklist__cat ul { list-style: none; padding: 0; margin: 0; }
.stup-checklist__cat li { font-size: 12px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; line-height: 1.45; }
.stup-checklist__cat li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 9px; color: #3B82F6; }
@media (max-width: 900px) { .stup-checklist { grid-template-columns: 1fr; } }

.stup-stacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.stup-stack { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 22px 22px; transition: all 0.25s ease; }
.stup-stack:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(30,64,175,0.20); border-color: #3B82F6; }
.stup-stack h4 { font-size: 22px; font-weight: 800; color: #1E40AF; margin: 0 0 2px; }
.stup-stack__sub { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.stup-stack ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.stup-stack li { font-size: 12px; color: #4b5568; padding: 3px 0; line-height: 1.45; }
@media (max-width: 900px) { .stup-stacks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stup-stacks { grid-template-columns: 1fr; } }

.stup-math { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; max-width: 800px; margin-left: auto; margin-right: auto; }
.stup-math__row { display: grid; grid-template-columns: 240px 1fr 120px; gap: 18px; align-items: center; }
.stup-math__label { font-size: 14px; color: #0b1020; font-weight: 700; }
.stup-math__row--us .stup-math__label { color: #1E40AF; }
.stup-math__bar { background: #f1f5f9; height: 14px; border-radius: 999px; overflow: hidden; }
.stup-math__fill { height: 100%; border-radius: 999px; transition: width 1s ease; }
.stup-math__num { font-size: 14px; font-weight: 800; color: #0b1020; text-align: right; }
.stup-math__row--us .stup-math__num { color: #1E40AF; }
@media (max-width: 700px) { .stup-math__row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- MIGRATION ---- */
.migr-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 32px; }
.migr-timeline__phase { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 16px; transition: all 0.25s ease; border-top: 3px solid #A855F7; }
.migr-timeline__phase:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(124,58,237,0.25); }
.migr-timeline__phase--prep { border-top-color: #94a3b8; }
.migr-timeline__phase--rehearse { border-top-color: #06B6D4; }
.migr-timeline__phase--pre { border-top-color: #F59E0B; }
.migr-timeline__phase--cut { border-top-color: #EF4444; }
.migr-timeline__phase--go { border-top-color: #10B981; background: linear-gradient(180deg, #ecfdf5, #fff); }
.migr-timeline__phase--post { border-top-color: #8B5CF6; }
.migr-timeline__phase--done { border-top-color: #6b7280; }
.migr-timeline__label { font-size: 11px; font-weight: 800; color: #7C3AED; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.migr-timeline__phase h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.migr-timeline__phase p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0; }
@media (max-width: 1100px) { .migr-timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .migr-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .migr-timeline { grid-template-columns: 1fr; } }

.migr-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.migr-cat { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.migr-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(124,58,237,0.20); border-color: #A855F7; }
.migr-cat__icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #7C3AED, #A855F7); color: #fff; display: grid; place-items: center; font-size: 20px; margin-bottom: 12px; }
.migr-cat h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 10px; }
.migr-cat ul { list-style: none; padding: 0; margin: 0 0 12px; }
.migr-cat li { font-size: 12px; color: #4b5568; padding: 3px 0 3px 18px; position: relative; line-height: 1.45; }
.migr-cat li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 9px; color: #7C3AED; }
.migr-cat__size { font-size: 11px; color: #7C3AED; font-weight: 800; padding: 6px 10px; background: rgba(124,58,237,0.10); border-radius: 6px; }
@media (max-width: 900px) { .migr-cats { grid-template-columns: 1fr; } }

.migr-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 32px; }
.migr-source { background: #fff; border: 1px solid #e7eaf0; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #0b1020; transition: all 0.2s ease; }
.migr-source i { color: #A855F7; }
.migr-source:hover { border-color: #A855F7; transform: translateY(-2px); }
@media (max-width: 900px) { .migr-sources { grid-template-columns: repeat(2, 1fr); } }

.migr-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.migr-price { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 26px 24px; transition: all 0.25s ease; }
.migr-price:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(124,58,237,0.20); }
.migr-price--featured { border-color: #A855F7; box-shadow: 0 12px 24px -10px rgba(124,58,237,0.25); }
.migr-price h4 { font-size: 19px; font-weight: 800; color: #0b1020; margin: 0 0 4px; }
.migr-price__sub { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.migr-price__cost { font-size: 36px; font-weight: 800; color: #7C3AED; margin: 6px 0 12px; }
.migr-price ul { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid #f1f5f9; }
.migr-price li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; }
.migr-price li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #7C3AED; }
@media (max-width: 900px) { .migr-pricing { grid-template-columns: 1fr; } }

/* ---- CLOUD MGMT ---- */
.clds-providers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.clds-provider { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.clds-provider:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,165,233,0.20); border-color: #0EA5E9; }
.clds-provider--featured { border-color: #0EA5E9; background: linear-gradient(180deg, #f0f9ff, #fff); }
.clds-provider__logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.clds-provider h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.clds-provider__tier { font-size: 11px; color: #0EA5E9; font-weight: 700; margin-bottom: 10px; }
.clds-provider ul { list-style: none; padding: 0; margin: 0 0 10px; }
.clds-provider li { font-size: 11px; color: #4b5568; padding: 3px 0; line-height: 1.4; }
.clds-provider__eng { font-size: 11px; color: #0EA5E9; font-weight: 800; padding: 6px 10px; background: rgba(14,165,233,0.10); border-radius: 6px; }
@media (max-width: 900px) { .clds-providers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clds-providers { grid-template-columns: 1fr; } }

.clds-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.clds-pillar { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; border-left: 4px solid #0EA5E9; }
.clds-pillar:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,165,233,0.20); }
.clds-pillar__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.clds-pillar h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.clds-pillar p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .clds-pillars { grid-template-columns: 1fr; } }

.clds-savings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.clds-saving { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; text-align: center; }
.clds-saving:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,165,233,0.20); }
.clds-saving__num { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #0EA5E9, #38BDF8); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.clds-saving__where { font-size: 13px; font-weight: 700; color: #0b1020; margin: 6px 0; }
.clds-saving p { font-size: 12px; color: #4b5568; margin: 0; line-height: 1.45; }
@media (max-width: 900px) { .clds-savings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clds-savings { grid-template-columns: 1fr; } }

.clds-case { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 28px; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(14,165,233,0.18); }
.clds-case__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
.clds-case__head strong { font-size: 18px; color: #0b1020; }
.clds-case__head span { font-size: 13px; color: #4b5568; }
.clds-case__tag { background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.clds-case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clds-case__block h4 { font-size: 14px; font-weight: 800; color: #0EA5E9; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }
.clds-case__block p { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .clds-case__grid { grid-template-columns: 1fr; } }

/* ---- VPS MANAGEMENT ---- */
.vmgt-hypervisors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.vmgt-hypervisor { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
.vmgt-hypervisor:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(234,88,12,0.20); border-color: #F97316; }
.vmgt-hypervisor__logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #EA580C, #F97316); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.vmgt-hypervisor h4 { font-size: 17px; font-weight: 700; color: #0b1020; margin: 0 0 4px; }
.vmgt-hypervisor__sub { font-size: 12px; color: #EA580C; font-weight: 700; margin-bottom: 12px; }
.vmgt-hypervisor ul { list-style: none; padding: 0; margin: 0 0 12px; }
.vmgt-hypervisor li { font-size: 12px; color: #4b5568; padding: 3px 0 3px 18px; position: relative; line-height: 1.4; }
.vmgt-hypervisor li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 9px; color: #EA580C; }
.vmgt-hypervisor__num { font-size: 12px; color: #EA580C; font-weight: 800; padding: 6px 10px; background: rgba(234,88,12,0.10); border-radius: 6px; }
@media (max-width: 900px) { .vmgt-hypervisors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vmgt-hypervisors { grid-template-columns: 1fr; } }

.vmgt-support { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.vmgt-support__tier { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
.vmgt-support__tier:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(234,88,12,0.20); }
.vmgt-support__tier--featured { border-color: #F97316; box-shadow: 0 12px 24px -10px rgba(234,88,12,0.25); }
.vmgt-support__tier h4 { font-size: 18px; font-weight: 800; color: #0b1020; margin: 0 0 4px; }
.vmgt-support__sub { font-size: 12px; color: #EA580C; font-weight: 700; margin-bottom: 12px; }
.vmgt-support__tier ul { list-style: none; padding: 0; margin: 0 0 12px; }
.vmgt-support__tier li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; line-height: 1.45; }
.vmgt-support__tier li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #EA580C; }
.vmgt-support__price { font-size: 14px; font-weight: 800; color: #EA580C; padding: 8px 12px; background: rgba(234,88,12,0.10); border-radius: 8px; }
@media (max-width: 900px) { .vmgt-support { grid-template-columns: 1fr; } }

.vmgt-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.vmgt-area { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.vmgt-area:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(234,88,12,0.20); }
.vmgt-area__num { font-size: 24px; font-weight: 800; color: #EA580C; opacity: 0.5; line-height: 1; margin-bottom: 8px; }
.vmgt-area h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 8px; }
.vmgt-area p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .vmgt-areas { grid-template-columns: 1fr; } }

.vmgt-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.vmgt-number { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.vmgt-number:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(234,88,12,0.20); }
.vmgt-number__big { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #EA580C, #F97316); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.vmgt-number__what { font-size: 14px; font-weight: 700; color: #0b1020; margin: 6px 0 4px; }
.vmgt-number__detail { font-size: 12px; color: #4b5568; line-height: 1.45; }
@media (max-width: 900px) { .vmgt-numbers { grid-template-columns: repeat(2, 1fr); } }

/* ---- SECURITY HARDENING ---- */
.shrd-scorecard { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 28px; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(30,58,138,0.20); }
.shrd-scorecard__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.shrd-scorecard__title { font-size: 16px; font-weight: 700; color: #0b1020; }
.shrd-scorecard__date { font-size: 12px; color: #6b7280; }
.shrd-scorecard__main { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
.shrd-scorecard__circle { position: relative; display: grid; place-items: center; }
.shrd-scorecard__num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 38px; font-weight: 800; color: #0b1020; }
.shrd-scorecard__num span { font-size: 20px; color: #6b7280; }
.shrd-scorecard__breakdown { display: flex; flex-direction: column; gap: 10px; }
.shrd-scorecard__cat { display: grid; grid-template-columns: 140px 1fr 60px; gap: 12px; align-items: center; }
.shrd-scorecard__cat span { font-size: 13px; color: #4b5568; font-weight: 600; }
.shrd-scorecard__bar { background: #f1f5f9; height: 10px; border-radius: 999px; overflow: hidden; }
.shrd-scorecard__bar div { height: 100%; border-radius: 999px; }
.shrd-scorecard__cat strong { font-size: 13px; font-weight: 800; color: #0b1020; text-align: right; }
.shrd-scorecard__footer { margin-top: 20px; padding: 14px 18px; background: rgba(16,185,129,0.10); border-radius: 10px; color: #065F46; font-size: 13px; font-weight: 600; }
@media (max-width: 800px) { .shrd-scorecard__main { grid-template-columns: 1fr; gap: 20px; } .shrd-scorecard__cat { grid-template-columns: 1fr 2fr 50px; } }

.shrd-defense { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.shrd-defense__layer { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 24px; transition: all 0.25s ease; border-left: 4px solid #1E3A8A; }
.shrd-defense__layer:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(30,58,138,0.20); }
.shrd-defense__num { font-size: 22px; font-weight: 800; color: #1E3A8A; opacity: 0.5; line-height: 1; margin-bottom: 6px; }
.shrd-defense__layer h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 10px; }
.shrd-defense__layer ul { list-style: none; padding: 0; margin: 0 0 12px; }
.shrd-defense__layer li { font-size: 13px; color: #4b5568; padding: 3px 0 3px 20px; position: relative; line-height: 1.5; }
.shrd-defense__layer li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 10px; color: #3730A3; }
.shrd-defense__blocks { font-size: 12px; font-weight: 800; color: #1E3A8A; padding: 6px 10px; background: rgba(30,58,138,0.10); border-radius: 6px; }
@media (max-width: 800px) { .shrd-defense { grid-template-columns: 1fr; } }

.shrd-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.shrd-process__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.shrd-process__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(30,58,138,0.20); }
.shrd-process__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #1E3A8A, #3730A3); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.shrd-process__step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.shrd-process__step p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0 0 10px; }
.shrd-process__time { font-size: 12px; font-weight: 800; color: #1E3A8A; }
@media (max-width: 900px) { .shrd-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shrd-process { grid-template-columns: 1fr; } }

.shrd-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.shrd-ba__col { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 26px; }
.shrd-ba__col h4 { font-size: 16px; font-weight: 800; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.shrd-ba__col--before { border-top: 4px solid #B91C1C; }
.shrd-ba__col--before h4 { color: #B91C1C; }
.shrd-ba__col--after { border-top: 4px solid #10B981; background: linear-gradient(180deg, #f0fdf4, #fff); }
.shrd-ba__col--after h4 { color: #065F46; }
.shrd-ba__col ul { list-style: none; padding: 0; margin: 0; }
.shrd-ba__col li { font-size: 13px; color: #4b5568; padding: 6px 0 6px 26px; position: relative; line-height: 1.45; }
.shrd-ba__col li i.fa-times { color: #B91C1C; position: absolute; left: 0; top: 9px; }
.shrd-ba__col li i.fa-check { color: #10B981; position: absolute; left: 0; top: 9px; }
@media (max-width: 800px) { .shrd-ba { grid-template-columns: 1fr; } }

/* ---- CYBER SECURITY ---- */
.cybr-attck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.cybr-attck__tile { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 18px; transition: all 0.25s ease; }
.cybr-attck__tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(15,23,42,0.30); }
.cybr-attck__id { font-size: 11px; font-weight: 800; color: #0F172A; padding: 3px 8px; background: #0F172A; color: #fff; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.cybr-attck__tile h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.cybr-attck__tile p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0 0 8px; }
.cybr-attck__cov { font-size: 11px; font-weight: 800; color: #10B981; }
@media (max-width: 1000px) { .cybr-attck { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cybr-attck { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cybr-attck { grid-template-columns: 1fr; } }

.cybr-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.cybr-tier { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.cybr-tier:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,23,42,0.30); }
.cybr-tier--featured { border-color: #0F172A; box-shadow: 0 12px 24px -10px rgba(15,23,42,0.30); background: linear-gradient(180deg, #f8fafc, #fff); }
.cybr-tier h4 { font-size: 17px; font-weight: 800; color: #0b1020; margin: 0 0 4px; }
.cybr-tier__sub { font-size: 12px; color: #0F172A; font-weight: 700; margin-bottom: 10px; }
.cybr-tier__price { font-size: 28px; font-weight: 800; color: #0F172A; margin: 4px 0 12px; }
.cybr-tier__price small { font-size: 12px; color: #6b7280; font-weight: 600; }
.cybr-tier ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.cybr-tier li { font-size: 12px; color: #4b5568; padding: 3px 0 3px 18px; position: relative; line-height: 1.4; }
.cybr-tier li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 9px; color: #10B981; }
@media (max-width: 1000px) { .cybr-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cybr-tiers { grid-template-columns: 1fr; } }

.cybr-playbooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.cybr-playbook { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
.cybr-playbook:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,23,42,0.30); }
.cybr-playbook__icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #0F172A, #475569); color: #fff; display: grid; place-items: center; font-size: 20px; margin-bottom: 12px; }
.cybr-playbook h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 8px; }
.cybr-playbook p { font-size: 13px; color: #4b5568; line-height: 1.55; margin: 0 0 10px; }
.cybr-playbook__time { font-size: 12px; font-weight: 800; color: #0F172A; padding: 6px 10px; background: rgba(15,23,42,0.08); border-radius: 6px; }
@media (max-width: 900px) { .cybr-playbooks { grid-template-columns: 1fr; } }

.cybr-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.cybr-number { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.cybr-number:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(15,23,42,0.30); }
.cybr-number__big { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #0F172A, #475569); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.cybr-number__what { font-size: 13px; font-weight: 700; color: #0b1020; margin: 6px 0 4px; }
.cybr-number__detail { font-size: 12px; color: #4b5568; line-height: 1.45; }
@media (max-width: 900px) { .cybr-numbers { grid-template-columns: repeat(2, 1fr); } }

/* ---- MALWARE ---- */
.malm-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.malm-type { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 20px 18px; transition: all 0.25s ease; }
.malm-type:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(185,28,28,0.25); border-color: #EF4444; }
.malm-type__icon { width: 48px; height: 48px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-size: 20px; margin-bottom: 10px; }
.malm-type h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.malm-type p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0 0 8px; }
.malm-type__stat { font-size: 11px; font-weight: 800; color: #B91C1C; padding: 4px 8px; background: rgba(185,28,28,0.10); border-radius: 6px; display: inline-block; }
@media (max-width: 1100px) { .malm-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .malm-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .malm-gallery { grid-template-columns: 1fr; } }

.malm-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.malm-step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.malm-step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(185,28,28,0.25); }
.malm-step__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #B91C1C, #EF4444); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.malm-step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.malm-step p { font-size: 12px; color: #4b5568; line-height: 1.5; margin: 0 0 8px; }
.malm-step__time { font-size: 11px; font-weight: 800; color: #B91C1C; }
@media (max-width: 1100px) { .malm-process { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .malm-process { grid-template-columns: 1fr; } }

.malm-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.malm-price { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 26px 24px; transition: all 0.25s ease; }
.malm-price:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(185,28,28,0.20); }
.malm-price--featured { border-color: #EF4444; box-shadow: 0 12px 24px -10px rgba(185,28,28,0.25); }
.malm-price h4 { font-size: 19px; font-weight: 800; color: #0b1020; margin: 0 0 4px; }
.malm-price__sub { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.malm-price__cost { font-size: 36px; font-weight: 800; color: #B91C1C; margin: 6px 0 12px; }
.malm-price ul { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid #f1f5f9; }
.malm-price li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; }
.malm-price li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #B91C1C; }
@media (max-width: 900px) { .malm-pricing { grid-template-columns: 1fr; } }

.malm-case { background: #fff; border: 1px solid #e7eaf0; border-radius: 18px; padding: 28px; margin-top: 32px; box-shadow: 0 10px 30px -12px rgba(185,28,28,0.18); }
.malm-case__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
.malm-case__head strong { font-size: 18px; color: #0b1020; }
.malm-case__head span { font-size: 13px; color: #4b5568; }
.malm-case__tag { background: linear-gradient(135deg, #B91C1C, #EF4444); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.malm-case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.malm-case__block h4 { font-size: 14px; font-weight: 800; color: #B91C1C; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }
.malm-case__block p { font-size: 14px; color: #4b5568; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .malm-case__grid { grid-template-columns: 1fr; } }

/* ---- FIREWALL & WAF ---- */
.fwaf-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.fwaf-layer { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.fwaf-layer:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(190,24,93,0.20); }
.fwaf-layer__num { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #BE185D, #EC4899); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.fwaf-layer h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 10px; }
.fwaf-layer ul { list-style: none; padding: 0; margin: 0 0 10px; }
.fwaf-layer li { font-size: 12px; color: #4b5568; padding: 3px 0 3px 20px; position: relative; line-height: 1.45; }
.fwaf-layer li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: 9px; color: #EC4899; }
.fwaf-layer__blocks { font-size: 11px; font-weight: 800; color: #BE185D; padding: 5px 9px; background: rgba(190,24,93,0.10); border-radius: 6px; }
@media (max-width: 900px) { .fwaf-layers { grid-template-columns: 1fr; } }

.fwaf-attacks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.fwaf-attack { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 18px; transition: all 0.25s ease; }
.fwaf-attack:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(190,24,93,0.25); }
.fwaf-attack__icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #BE185D, #EC4899); color: #fff; display: grid; place-items: center; font-size: 16px; margin-bottom: 10px; }
.fwaf-attack h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.fwaf-attack p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0; }
@media (max-width: 900px) { .fwaf-attacks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fwaf-attacks { grid-template-columns: 1fr; } }

.fwaf-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.fwaf-process__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.fwaf-process__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(190,24,93,0.20); }
.fwaf-process__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #BE185D, #EC4899); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.fwaf-process__step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.fwaf-process__step p { font-size: 13px; color: #4b5568; line-height: 1.5; margin: 0 0 8px; }
.fwaf-process__time { font-size: 12px; font-weight: 800; color: #BE185D; }
@media (max-width: 900px) { .fwaf-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fwaf-process { grid-template-columns: 1fr; } }

.fwaf-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.fwaf-number { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.fwaf-number:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(190,24,93,0.20); }
.fwaf-number__big { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #BE185D, #EC4899); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.fwaf-number__what { font-size: 13px; font-weight: 700; color: #0b1020; margin: 6px 0 4px; }
.fwaf-number__detail { font-size: 12px; color: #4b5568; line-height: 1.45; }
@media (max-width: 900px) { .fwaf-numbers { grid-template-columns: repeat(2, 1fr); } }

/* ---- DDOS ---- */
.ddos-attacks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.ddos-attack { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 18px 18px; transition: all 0.25s ease; }
.ddos-attack:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(157,23,77,0.30); border-color: #DB2777; }
.ddos-attack__icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #9D174D, #DB2777); color: #fff; display: grid; place-items: center; font-size: 16px; margin-bottom: 10px; }
.ddos-attack h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.ddos-attack p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0 0 8px; }
.ddos-attack__peak { font-size: 11px; font-weight: 800; color: #9D174D; padding: 4px 8px; background: rgba(157,23,77,0.10); border-radius: 6px; display: inline-block; }
@media (max-width: 900px) { .ddos-attacks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ddos-attacks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ddos-attacks { grid-template-columns: 1fr; } }

.ddos-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.ddos-scenario { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; }
.ddos-scenario:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(157,23,77,0.25); }
.ddos-scenario__peak { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, #9D174D, #DB2777); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 6px; }
.ddos-scenario h4 { font-size: 16px; font-weight: 700; color: #0b1020; margin: 0 0 10px; }
.ddos-scenario p { font-size: 13px; color: #4b5568; line-height: 1.6; margin: 0 0 12px; }
.ddos-scenario__out { font-size: 12px; color: #10B981; font-weight: 700; padding: 8px 12px; background: rgba(16,185,129,0.10); border-radius: 6px; }
@media (max-width: 900px) { .ddos-scenarios { grid-template-columns: 1fr; } }

.ddos-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.ddos-flow__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.ddos-flow__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(157,23,77,0.20); }
.ddos-flow__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #9D174D, #DB2777); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.ddos-flow__step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.ddos-flow__step p { font-size: 13px; color: #4b5568; line-height: 1.5; margin: 0 0 8px; }
.ddos-flow__time { font-size: 12px; font-weight: 800; color: #9D174D; }
@media (max-width: 900px) { .ddos-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ddos-flow { grid-template-columns: 1fr; } }

.ddos-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.ddos-price { background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 26px 24px; transition: all 0.25s ease; }
.ddos-price:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(157,23,77,0.20); }
.ddos-price--featured { border-color: #DB2777; box-shadow: 0 12px 24px -10px rgba(157,23,77,0.25); }
.ddos-price h4 { font-size: 19px; font-weight: 800; color: #0b1020; margin: 0 0 4px; }
.ddos-price__sub { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.ddos-price__cost { font-size: 32px; font-weight: 800; color: #9D174D; margin: 6px 0 12px; }
.ddos-price__cost small { font-size: 13px; color: #6b7280; font-weight: 600; }
.ddos-price ul { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid #f1f5f9; }
.ddos-price li { font-size: 13px; color: #4b5568; padding: 4px 0 4px 20px; position: relative; }
.ddos-price li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 10px; color: #9D174D; }
@media (max-width: 900px) { .ddos-pricing { grid-template-columns: 1fr; } }

/* ---- MONITORING ---- */
.mont-integrations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.mont-integration__cat { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 24px; transition: all 0.25s ease; }
.mont-integration__cat:hover { border-color: #2DD4BF; transform: translateY(-2px); }
.mont-integration__cat h4 { font-size: 16px; font-weight: 800; color: #0D9488; margin: 0 0 12px; }
.mont-integration__list { display: flex; flex-wrap: wrap; gap: 6px; }
.mont-integration__list span { font-size: 12px; padding: 5px 11px; background: rgba(13,148,136,0.10); color: #0D9488; border-radius: 999px; font-weight: 600; }
@media (max-width: 900px) { .mont-integrations { grid-template-columns: 1fr; } }

.mont-alertflow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 32px; }
.mont-alertflow__step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.mont-alertflow__step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(13,148,136,0.20); }
.mont-alertflow__num { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0D9488, #2DD4BF); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.mont-alertflow__step h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.mont-alertflow__step p { font-size: 12px; color: #4b5568; line-height: 1.5; margin: 0 0 8px; }
.mont-alertflow__time { font-size: 11px; font-weight: 800; color: #0D9488; }
@media (max-width: 1000px) { .mont-alertflow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mont-alertflow { grid-template-columns: 1fr; } }

.mont-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
.mont-check { background: #fff; border: 1px solid #e7eaf0; border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #374151; transition: all 0.2s ease; }
.mont-check:hover { border-color: #2DD4BF; transform: translateY(-2px); }
.mont-check i { color: #0D9488; font-size: 18px; flex: 0 0 auto; }
.mont-check strong { color: #0b1020; font-weight: 700; }
@media (max-width: 900px) { .mont-checks { grid-template-columns: 1fr; } }

.mont-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.mont-number { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.mont-number:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(13,148,136,0.20); }
.mont-number__big { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #0D9488, #2DD4BF); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.mont-number__what { font-size: 13px; font-weight: 700; color: #0b1020; margin: 6px 0 4px; }
.mont-number__detail { font-size: 12px; color: #4b5568; line-height: 1.45; }
@media (max-width: 900px) { .mont-numbers { grid-template-columns: repeat(2, 1fr); } }

/* ---- PERFORMANCE ---- */
.prfm-ba { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; max-width: 100%; margin-left: 0; margin-right: 0; }
.prfm-section-caption { text-align: center; max-width: 760px; margin: 24px auto 0 !important; }
.prfm-ba__row { display: grid; grid-template-columns: 1.5fr 1fr 50px 1fr 1.2fr; gap: 18px; align-items: center; padding: 16px 24px; background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; transition: all 0.2s ease; box-shadow: 0 2px 8px -2px rgba(11,16,32,0.04); }
.prfm-ba__row:hover { border-color: #B45309; transform: translateX(4px); }
.prfm-ba__label { font-size: 13px; color: #0b1020; font-weight: 700; }
.prfm-ba__before { font-size: 16px; font-weight: 800; color: #B91C1C; text-decoration: line-through; opacity: 0.7; }
.prfm-ba__arrow { color: #B45309; text-align: center; }
.prfm-ba__after { font-size: 16px; font-weight: 800; color: #10B981; }
.prfm-ba__improve { font-size: 13px; font-weight: 800; color: #B45309; text-align: right; }
@media (max-width: 800px) { .prfm-ba__row { grid-template-columns: 1fr 1fr; gap: 6px; } .prfm-ba__arrow { display: none; } .prfm-ba__improve { grid-column: 1 / -1; text-align: center; } }

.prfm-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.prfm-area { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 20px; transition: all 0.25s ease; }
.prfm-area:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(180,83,9,0.25); border-color: #B45309; }
.prfm-area__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #B45309, #F59E0B); color: #fff; display: grid; place-items: center; font-size: 18px; margin-bottom: 10px; }
.prfm-area h4 { font-size: 14px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.prfm-area p { font-size: 12px; color: #4b5568; line-height: 1.45; margin: 0 0 8px; }
.prfm-area__impact { font-size: 11px; font-weight: 800; color: #B45309; padding: 4px 8px; background: rgba(180,83,9,0.10); border-radius: 6px; display: inline-block; }
@media (max-width: 900px) { .prfm-areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .prfm-areas { grid-template-columns: 1fr; } }

.prfm-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.prfm-step { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px 22px; transition: all 0.25s ease; }
.prfm-step:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(180,83,9,0.25); }
.prfm-step__num { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #B45309, #F59E0B); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; margin-bottom: 10px; }
.prfm-step h4 { font-size: 15px; font-weight: 700; color: #0b1020; margin: 0 0 6px; }
.prfm-step p { font-size: 13px; color: #4b5568; line-height: 1.5; margin: 0 0 8px; }
.prfm-step__time { font-size: 12px; font-weight: 800; color: #B45309; }
@media (max-width: 900px) { .prfm-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prfm-process { grid-template-columns: 1fr; } }

.prfm-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.prfm-number { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 24px 22px; transition: all 0.25s ease; text-align: center; }
.prfm-number:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(180,83,9,0.25); }
.prfm-number__big { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #B45309, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.prfm-number__what { font-size: 13px; font-weight: 700; color: #0b1020; margin: 6px 0 4px; }
.prfm-number__detail { font-size: 12px; color: #4b5568; line-height: 1.45; }
@media (max-width: 900px) { .prfm-numbers { grid-template-columns: repeat(2, 1fr); } }