/* ============================================================
   ServerExperte - Client Area Theme
   MSP with Cyber Security, Rescue & Data Recovery
   ============================================================ */

:root {
    --se-navy: #0f2440;
    --se-navy-2: #16345c;
    --se-blue: #2563eb;
    --se-blue-2: #1d4ed8;
    --se-cyan: #0ea5e9;
    --se-teal: #0f9d8c;
    --se-red: #e11d48;
    --se-red-2: #be123c;
    --se-amber: #f59e0b;
    --se-bg: #f4f7fb;
    --se-surface: #ffffff;
    --se-border: #e3e9f2;
    --se-text: #334155;
    --se-heading: #0f2440;
    --se-muted: #64748b;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--se-bg);
    color: var(--se-text);
    font-family: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif;
}

a { color: var(--se-blue); }
a:hover { color: var(--se-blue-2); }

h1, h2, h3, h4, h5, h6 {
    color: var(--se-heading);
    font-weight: 700;
}

.container { max-width: 1240px; }

/* ---------- Top utility bar ---------- */
.se-topbar {
    background: var(--se-navy);
    color: #b9c7dd;
    font-size: 13px;
}
.se-topbar a { color: #cfddf4; text-decoration: none; }
.se-topbar a:hover { color: #ffffff; }
.se-topbar .se-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}
.se-topbar .se-emergency {
    color: #ffd7de;
}
.se-topbar .se-emergency i { color: #fb7185; }

/* ---------- Main header / navbar ---------- */
.se-header {
    background: var(--se-surface);
    border-bottom: 1px solid var(--se-border);
    box-shadow: 0 2px 10px rgba(15, 36, 64, 0.06);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.se-header .se-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--se-navy);
    line-height: 1;
}
.se-header .se-brand img.se-brand-logo {
    height: 40px;
    width: auto;
    margin-right: 10px;
}
.se-header .se-brand .se-brand-text {
    display: flex;
    flex-direction: column;
}
.se-header .se-brand .se-brand-name {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.3px;
    color: var(--se-navy);
}
.se-header .se-brand .se-brand-sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--se-muted);
    text-transform: uppercase;
    margin-top: 2px;
}
.se-nav .se-nav-link {
    color: var(--se-navy);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
}
.se-nav .se-nav-link:hover {
    color: var(--se-blue);
    background: #eef4ff;
}
.se-nav .se-nav-link.se-nav-alert {
    color: var(--se-red);
}
.se-nav .se-nav-link.se-nav-alert:hover {
    color: var(--se-red-2);
    background: #ffeef2;
}
.se-header .se-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--se-blue);
    color: #fff;
    border-radius: 50px;
    font-size: 0.7rem;
    padding: 1px 6px;
    font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn-se-primary {
    background: var(--se-blue);
    border: 1px solid var(--se-blue);
    color: #fff !important;
    font-weight: 700;
    border-radius: 6px;
}
.btn-se-primary:hover {
    background: var(--se-blue-2);
    border-color: var(--se-blue-2);
    color: #fff !important;
}
.btn-se-outline {
    border: 1px solid var(--se-blue);
    color: var(--se-blue) !important;
    font-weight: 700;
    border-radius: 6px;
    background: transparent;
}
.btn-se-outline:hover {
    background: var(--se-blue);
    color: #fff !important;
}
.btn-se-navy {
    background: var(--se-navy);
    border: 1px solid var(--se-navy);
    color: #fff !important;
    font-weight: 700;
    border-radius: 6px;
}
.btn-se-navy:hover { background: var(--se-navy-2); color: #fff !important; }
.btn-se-danger {
    background: var(--se-red);
    border: 1px solid var(--se-red);
    color: #fff !important;
    font-weight: 700;
    border-radius: 6px;
}
.btn-se-danger:hover { background: var(--se-red-2); border-color: var(--se-red-2); color: #fff !important; }
.btn-se-teal {
    background: var(--se-teal);
    border: 1px solid var(--se-teal);
    color: #fff !important;
    font-weight: 700;
    border-radius: 6px;
}
.btn-se-teal:hover { background: #0c8a7c; border-color: #0c8a7c; color: #fff !important; }
.btn-se-outline-danger {
    border: 1px solid var(--se-red);
    color: var(--se-red) !important;
    font-weight: 700;
    border-radius: 6px;
    background: transparent;
}
.btn-se-outline-danger:hover { background: var(--se-red); color: #fff !important; }

/* ---------- Hero ---------- */
.se-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(37, 99, 235, 0.22), transparent 60%),
        radial-gradient(900px 400px at 10% 110%, rgba(14, 165, 233, 0.16), transparent 60%),
        linear-gradient(160deg, #0f2440 0%, #16345c 55%, #0f2440 100%);
    color: #e6edf8;
    padding: 96px 0 110px;
    overflow: hidden;
}
.se-hero .se-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-bg.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    pointer-events: none;
}
.se-hero .container { position: relative; z-index: 2; }
.se-hero h1 {
    color: #ffffff;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    max-width: 760px;
}
.se-hero h1 .hl { color: #7cc7ff; }
.se-hero .se-hero-sub {
    color: #b9cbe7;
    font-size: 1.15rem;
    max-width: 640px;
}
.se-hero .se-cta-row { margin-top: 30px; }
.se-hero .se-cta-row .btn { padding: 12px 26px; font-size: 1rem; }
.se-hero .se-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9fecff;
    margin-bottom: 22px;
}
.se-hero .se-hero-stats { margin-top: 55px; }
.se-hero .se-hero-stat { border-left: 3px solid var(--se-cyan); padding-left: 16px; }
.se-hero .se-hero-stat .num {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
}
.se-hero .se-hero-stat .lbl {
    font-size: 0.85rem;
    color: #93a8c9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.se-hero-slider { position: relative; min-height: 330px; }
.se-hero-slide { display: none; }
.se-hero-slide.active { display: block; animation: seSlideFade .55s ease; }
@keyframes seSlideFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.se-hero-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}
.se-hero-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    color: #e6edf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
}
.se-hero-arrow:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.se-hero-dots { display: flex; gap: 8px; align-items: center; }
.se-hero-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: all .3s;
}
.se-hero-dots .dot.active { background: #7cc7ff; width: 26px; border-radius: 6px; }

/* ---------- Section helpers ---------- */
.se-section { padding: 72px 0; }
.se-section .se-eyebrow {
    color: var(--se-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 0.78rem;
}
.se-section h2 { font-size: 2rem; font-weight: 800; }
.se-section .se-section-lead { color: var(--se-muted); max-width: 660px; }
.se-section-alt { background: var(--se-surface); border-top: 1px solid var(--se-border); border-bottom: 1px solid var(--se-border); }

/* ---------- Pillars (flagship services) ---------- */
.se-pillar {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.se-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 36, 64, 0.12);
    border-color: #c7d7f0;
}
.se-pillar .se-pillar-img {
    height: 168px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0f2440 0%, #16345c 70%, #0f2440 100%);
}
.se-pillar .se-pillar-img img { height: 132px; width: auto; }
.se-pillar .se-pillar-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.se-pillar .se-pillar-body h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.se-pillar .se-pillar-body p { color: var(--se-muted); font-size: 0.93rem; flex: 1; }
.se-pillar .se-pillar-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
.se-pillar.se-pillar-cyber .se-pillar-tag { background: #eaf2ff; color: var(--se-blue); }
.se-pillar.se-pillar-rescue .se-pillar-tag { background: #ffeef2; color: var(--se-red); }
.se-pillar.se-pillar-recovery .se-pillar-tag { background: #e6f7f5; color: var(--se-teal); }

/* ---------- Service cards ---------- */
.se-card {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.se-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 36, 64, 0.10);
    border-color: #c7d7f0;
}
.se-card .se-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--se-blue);
    font-size: 1.35rem;
    margin-bottom: 18px;
}
.se-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.se-card p { color: var(--se-muted); font-size: 0.93rem; }
.se-card .se-card-more {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--se-blue);
    text-decoration: none;
    margin-top: 14px;
    display: inline-block;
}
.se-card .se-card-more:hover { color: var(--se-blue-2); }

/* ---------- Emergency / rescue band ---------- */
.se-emergency-band {
    background:
        radial-gradient(900px 380px at 90% -20%, rgba(225, 29, 72, 0.35), transparent 60%),
        linear-gradient(150deg, #3b0a16 0%, #7f1228 60%, #4c0b19 100%);
    color: #fddde4;
    border-radius: 18px;
    padding: 46px 50px;
}
.se-emergency-band h2 { color: #fff; font-size: 1.7rem; }
.se-emergency-band p { color: rgba(255, 220, 228, 0.9); margin-bottom: 0; }
.se-emergency-band .se-emergency-phone {
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
}
.se-emergency-band .btn {
    background: #fff;
    color: var(--se-red) !important;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
}
.se-emergency-band .btn:hover { background: #ffeef2; }

/* ---------- Service detail blocks ---------- */
.se-service {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.se-service:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(15, 36, 64, 0.10);
    border-color: #c7d7f0;
}
.se-service .se-service-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.se-service .se-service-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--se-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}
.se-service.se-service-red .se-service-ico { background: #ffeef2; color: var(--se-red); }
.se-service.se-service-teal .se-service-ico { background: #e6f7f5; color: var(--se-teal); }
.se-service h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.se-service .se-service-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--se-blue);
    margin-top: 2px;
}
.se-service > p { color: var(--se-muted); font-size: 0.92rem; }
.se-what-covered { list-style: none; padding: 0; margin: 0; }
.se-what-covered li {
    padding: 5px 0;
    color: var(--se-text);
    font-size: 0.9rem;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.se-what-covered li i { color: var(--se-teal); margin-top: 3px; font-size: 0.8rem; }
.se-pillar .se-what-covered { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--se-border); }
.se-pillar .se-what-covered-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--se-navy);
    margin-bottom: 4px;
}

/* ---------- Service pages ---------- */
.se-svc-hero {
    border-radius: 16px;
    padding: 58px 0 62px;
    color: #e6edf8;
    margin-bottom: 42px;
    position: relative;
    overflow: hidden;
}
.se-svc-hero.se-svc-cyber {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(37, 99, 235, 0.35), transparent 60%),
        linear-gradient(150deg, #0f2440 0%, #16345c 70%, #0f2440 100%);
}
.se-svc-hero.se-svc-rescue {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(225, 29, 72, 0.35), transparent 60%),
        linear-gradient(150deg, #3b0a16 0%, #7f1228 70%, #4c0b19 100%);
}
.se-svc-hero.se-svc-recovery {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(20, 184, 166, 0.3), transparent 60%),
        linear-gradient(150deg, #073c37 0%, #0d5f57 70%, #073c37 100%);
}
.se-svc-hero.se-svc-soc {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(37, 99, 235, 0.35), transparent 60%),
        linear-gradient(150deg, #0f2440 0%, #16345c 70%, #0f2440 100%);
}
.se-svc-hero.se-svc-endpoint {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(99, 102, 241, 0.35), transparent 60%),
        linear-gradient(150deg, #1e1b4b 0%, #3730a3 70%, #1e1b4b 100%);
}
.se-svc-hero.se-svc-backup {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(20, 184, 166, 0.3), transparent 60%),
        linear-gradient(150deg, #073c37 0%, #0d5f57 70%, #073c37 100%);
}
.se-svc-hero.se-svc-compliance {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(168, 85, 247, 0.3), transparent 60%),
        linear-gradient(150deg, #2e1065 0%, #5b21b6 70%, #2e1065 100%);
}
.se-svc-hero.se-svc-managed {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(148, 163, 184, 0.25), transparent 60%),
        linear-gradient(150deg, #0f172a 0%, #1e293b 70%, #0f172a 100%);
}
.se-svc-hero.se-svc-helpdesk {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(34, 197, 94, 0.3), transparent 60%),
        linear-gradient(150deg, #052e16 0%, #15803d 70%, #052e16 100%);
}
.se-svc-hero.se-svc-pentest {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(249, 115, 22, 0.3), transparent 60%),
        linear-gradient(150deg, #431407 0%, #9a3412 70%, #431407 100%);
}
.se-svc-hero.se-svc-training {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(234, 179, 8, 0.3), transparent 60%),
        linear-gradient(150deg, #422006 0%, #a16207 70%, #422006 100%);
}
.se-svc-hero .se-svc-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9fecff;
    margin-bottom: 20px;
}
.se-svc-hero h1 { color: #fff; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.5px; }
.se-svc-hero .lead { color: #b9cbe7; font-size: 1.12rem; max-width: 720px; }
.se-svc-hero .se-svc-ctas { margin-top: 26px; }
.se-svc-hero .btn { padding: 12px 26px; font-size: 1rem; }

.se-svc-section { padding: 14px 0 46px; }
.se-svc-section h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 18px; }
.se-svc-section h3 { font-size: 1.05rem; font-weight: 800; }
.se-svc-section .se-eyebrow { margin-bottom: 10px; }
.se-svc-section p { color: var(--se-muted); }
.se-svc-divider { border-top: 1px solid var(--se-border); margin: 26px 0 44px; }

.se-svc-feature {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 26px;
    height: 100%;
}
.se-svc-feature .se-svc-feature-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--se-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.se-svc-feature p { font-size: 0.92rem; margin: 0; }

.se-svc-steps { counter-reset: svcstep; }
.se-svc-step {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 26px;
    height: 100%;
    position: relative;
}
.se-svc-step .se-svc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--se-blue), var(--se-cyan));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 14px;
}
.se-svc-step p { font-size: 0.92rem; margin: 0; }

.se-svc-why { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 14px; padding: 26px; }
.se-svc-why .se-svc-why-item { display: flex; gap: 14px; padding: 12px 0; }
.se-svc-why .se-svc-why-item i { color: var(--se-teal); font-size: 1.1rem; margin-top: 3px; }
.se-svc-why .se-svc-why-item p { margin: 0; font-size: 0.93rem; }
.se-svc-why .se-svc-why-item strong { color: var(--se-navy); display: block; }

.se-svc-cta {
    background: linear-gradient(120deg, var(--se-blue) 0%, var(--se-cyan) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 44px 50px;
}
.se-svc-cta h2 { color: #fff; font-size: 1.6rem; }
.se-svc-cta p { color: rgba(255,255,255,0.9); margin-bottom: 0; }
.se-svc-cta .btn { background: #fff; color: var(--se-blue) !important; font-weight: 800; border: none; border-radius: 8px; padding: 12px 28px; }
.se-svc-cta .btn:hover { background: #eef4ff; }
.se-svc-cta.se-svc-cta-red { background: linear-gradient(120deg, var(--se-red) 0%, #fb7185 100%); }
.se-svc-cta.se-svc-cta-red .btn { color: var(--se-red) !important; }
.se-svc-cta.se-svc-cta-teal { background: linear-gradient(120deg, var(--se-teal) 0%, #14b8a6 100%); }
.se-svc-cta.se-svc-cta-teal .btn { color: var(--se-teal) !important; }

/* ---------- Feature list / process ---------- */
.se-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--se-blue), var(--se-cyan));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.se-checklist { list-style: none; padding-left: 0; margin: 0; }
.se-checklist li {
    padding: 7px 0;
    color: var(--se-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.se-checklist li i { color: var(--se-teal); }

.se-step {
    background: #fff;
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 28px 26px;
    height: 100%;
}
.se-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.se-step p { color: var(--se-muted); font-size: 0.92rem; margin: 0; }

/* ---------- Products (WHMCS groups) ---------- */
.se-products .se-card .price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--se-navy);
}

/* ---------- CTA band ---------- */
.se-cta-band {
    background: linear-gradient(120deg, var(--se-blue) 0%, var(--se-cyan) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 46px 50px;
}
.se-cta-band h2 { color: #fff; font-size: 1.7rem; }
.se-cta-band p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.se-cta-band .btn {
    background: #fff;
    color: var(--se-blue) !important;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
}
.se-cta-band .btn:hover { background: #eef4ff; }

/* ---------- Footer ---------- */
#footer {
    background: var(--se-navy);
    color: #9fb1cc;
    padding: 60px 0 0;
}
#footer h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
#footer ul { list-style: none; padding: 0; margin: 0; }
#footer li { margin-bottom: 9px; }
#footer a { color: #9fb1cc; text-decoration: none; }
#footer a:hover { color: #fff; }
#footer .se-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 45px;
    padding: 18px 0 22px;
    font-size: 0.85rem;
}
#footer .se-footer-legal a {
    color: #9fb1cc;
    margin-right: 20px;
}
#footer .se-footer-legal a:hover { color: #fff; }
#footer .se-footer-brand img {
    height: 46px;
    width: auto;
    vertical-align: middle;
}
#footer .se-footer-brand {
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

/* ---------- Page chrome (client area pages) ---------- */
#main-body { padding: 35px 0 60px; }
.master-breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid var(--se-border);
    padding: 12px 0;
    font-size: 0.88rem;
}
.master-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
}
.card {
    border: 1px solid var(--se-border);
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(15, 36, 64, 0.05);
}
.card-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--se-border);
    font-weight: 700;
    color: var(--se-navy);
}
.btn-primary {
    background: var(--se-blue);
    border-color: var(--se-blue);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--se-blue-2);
    border-color: var(--se-blue-2);
}
.btn-outline-primary {
    border-color: var(--se-blue);
    color: var(--se-blue);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--se-blue);
    border-color: var(--se-blue);
}
.form-control:focus { border-color: var(--se-blue); box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); }
.alert-primary { background: #eef4ff; border-color: #d3e1ff; color: #1e3a8a; }

/* ---------- Login page ---------- */
.se-login-wrap { max-width: 480px; margin: 30px auto; }
.se-login-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 36, 64, 0.12); }
.se-login-card .login-logo { text-align: center; padding: 30px 30px 6px; }
.se-login-card .login-logo img { height: 54px; width: auto; }
.se-login-card .card-header { background: transparent; border-bottom: none; text-align: center; padding-top: 10px; }
.se-login-card .card-body { padding: 24px 34px 34px; }
.se-login-card .btn { width: 100%; padding: 12px; }

/* ---------- Misc overrides ---------- */
.primary-bg-color { background-color: var(--se-bg); }
.navbar-light .navbar-nav .nav-link { color: var(--se-navy); }
.text-muted { color: var(--se-muted) !important; }
.nav-tabs .nav-link.active { color: var(--se-blue); }

@media (max-width: 991px) {
    .se-hero h1 { font-size: 2.2rem; }
    .se-hero { padding: 60px 0 70px; }
    .se-hero-slider { min-height: 0; }
    .se-section { padding: 50px 0; }
    .se-cta-band { padding: 34px; }
    .se-emergency-band { padding: 32px; }
}

/* ---------- About / legal content pages ---------- */
.se-page-hero {
    border-radius: 16px;
    padding: 52px 0 58px;
    color: #e6edf8;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(37, 99, 235, 0.35), transparent 60%),
        radial-gradient(500px 260px at -10% 120%, rgba(20, 184, 166, 0.18), transparent 60%),
        linear-gradient(150deg, #0f2440 0%, #16345c 70%, #0f2440 100%);
}
.se-page-hero h1 { color: #ffffff; font-size: 2.3rem; font-weight: 800; margin: 0 0 12px; }
.se-page-hero .lead { color: #b9cbe7; font-size: 1.12rem; max-width: 780px; margin: 0; }

.se-prose { font-size: 0.98rem; color: #42526b; line-height: 1.7; }
.se-prose p { margin: 0 0 14px; }
.se-prose ul { margin: 0 0 14px; padding-left: 20px; }
.se-prose ol { margin: 0 0 14px; padding-left: 20px; }
.se-prose li { margin-bottom: 6px; }
.se-prose h2 { font-size: 1.3rem; font-weight: 800; color: var(--se-navy); margin: 36px 0 12px; padding-top: 14px; border-top: 1px solid var(--se-border); }
.se-prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.se-prose h3 { font-size: 1.02rem; font-weight: 800; color: var(--se-navy); margin: 22px 0 8px; }
.se-prose a { color: var(--se-blue); }
.se-prose .se-meta { color: var(--se-muted); font-size: 0.85rem; }
.se-prose .se-toc { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 12px; padding: 22px 26px; }
.se-prose .se-toc ul { margin: 0; }
.se-prose .se-toc li { margin-bottom: 6px; }
.se-prose-card { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 14px; padding: 40px; margin-bottom: 44px; }
.se-prose-card hr { border-top: 1px solid var(--se-border); margin: 30px 0; }

.se-about-mission { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 14px; padding: 36px 40px; margin-bottom: 44px; }
.se-about-mission .se-about-big { font-size: 1.25rem; font-weight: 600; color: var(--se-navy); line-height: 1.6; }
.se-about-pillars .se-svc-section-title { margin-top: 0; }
.se-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.se-team-card { background: var(--se-surface); border: 1px solid var(--se-border); border-radius: 14px; padding: 26px; }
.se-team-card .se-team-initials { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, var(--se-blue), var(--se-teal)); color: #fff; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.se-team-card h4 { font-size: 1rem; font-weight: 800; margin: 0 0 2px; }
.se-team-card .se-team-role { color: var(--se-muted); font-size: 0.85rem; margin: 0 0 10px; }
.se-team-card p { font-size: 0.88rem; margin: 0; }

/* ---------- FAQ ---------- */
.se-faq-group { margin-bottom: 40px; }
.se-faq-group h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--se-navy);
    border-left: 4px solid var(--se-blue);
    padding-left: 14px;
    margin-bottom: 18px;
}
.se-faq-item {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
}
.se-faq-item h4 { font-size: 1rem; font-weight: 700; color: var(--se-navy); margin: 0 0 8px; }
.se-faq-item p { margin: 0; font-size: 0.93rem; }

/* ---------- Testimonials ---------- */
.se-testimonial {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.se-testimonial .se-t-stars { color: var(--se-amber); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 12px; }
.se-testimonial .se-t-quote { font-size: 0.94rem; line-height: 1.65; color: var(--se-text); flex: 1; margin: 0; }
.se-testimonial .se-t-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--se-border); }
.se-testimonial .se-t-initials { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--se-blue), var(--se-teal)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.se-testimonial .se-t-name { font-weight: 700; color: var(--se-navy); font-size: 0.95rem; }
.se-testimonial .se-t-role { color: var(--se-muted); font-size: 0.82rem; }
.se-testimonial .se-t-service { align-self: flex-start; margin-top: 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--se-blue); }

/* ---------- Case studies ---------- */
.se-cs {
    background: var(--se-surface);
    border: 1px solid var(--se-border);
    border-radius: 14px;
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.se-cs h3 { font-size: 1.05rem; font-weight: 800; color: var(--se-navy); margin: 14px 0 12px; }
.se-cs p { font-size: 0.88rem; margin: 0 0 10px; }
.se-cs .se-cs-result {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--se-border);
    color: var(--se-teal);
    font-weight: 700;
    font-size: 0.9rem;
}
.se-cs .se-cs-result strong { color: var(--se-navy); font-weight: 800; }


/* ---------- Used Hardware service page ---------- */
.se-svc-hero.se-svc-hardware {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(56, 189, 248, 0.3), transparent 60%),
        linear-gradient(150deg, #0c1726 0%, #334155 70%, #0c1726 100%);
}

/* ---------- Shop Used Server Hardware (homepage) ---------- */
.se-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--se-blue-2);
    margin: 4px 0 12px;
}
#shop .se-card { display: flex; flex-direction: column; }
#shop .se-card .se-card-more { margin-top: auto; }
#shop .btn-outline-primary { margin-left: 8px; }

.se-nav .se-nav-link.se-nav-shop {
    color: var(--se-blue);
    background: #eef4ff;
}
.se-nav .se-nav-link.se-nav-shop:hover {
    color: var(--se-blue-2);
    background: #dbe7ff;
}

/* ---------- Post-Warranty Maintenance (service page) ---------- */
.se-svc-table .table {
    background: var(--se-surface);
    border-color: var(--se-border);
    margin-bottom: 0;
}
.se-svc-table .table th {
    background: var(--se-blue);
    color: #fff;
    font-weight: 700;
    border-color: var(--se-border);
}
.se-svc-table .table td {
    border-color: var(--se-border);
}
.se-svc-table .table tbody tr:last-child td {
    border-bottom: none;
}
/* ---------- New service pages (hero gradients) ---------- */
.se-svc-hero.se-svc-erasure {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(244, 63, 94, 0.35), transparent 60%),
        linear-gradient(150deg, #4c0519 0%, #9f1239 70%, #500724 100%);
}
.se-svc-hero.se-svc-sourcing {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(251, 191, 36, 0.3), transparent 60%),
        linear-gradient(150deg, #451a03 0%, #92400e 70%, #451a03 100%);
}
.se-svc-hero.se-svc-refresh {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(56, 189, 248, 0.35), transparent 60%),
        linear-gradient(150deg, #082f49 0%, #0369a1 70%, #082f49 100%);
}
.se-svc-hero.se-svc-email {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(236, 72, 153, 0.3), transparent 60%),
        linear-gradient(150deg, #4a044e 0%, #86198f 70%, #4a044e 100%);
}
.se-svc-hero.se-svc-identity {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(52, 211, 153, 0.3), transparent 60%),
        linear-gradient(150deg, #064e3b 0%, #059669 70%, #064e3b 100%);
}
.se-svc-hero.se-svc-patch {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(163, 230, 53, 0.25), transparent 60%),
        linear-gradient(150deg, #1a2e05 0%, #3f6212 70%, #1a2e05 100%);
}
.se-svc-hero.se-svc-darkweb {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(139, 92, 246, 0.3), transparent 60%),
        linear-gradient(150deg, #0f172a 0%, #1e1b4b 70%, #0f172a 100%);
}
.se-svc-hero.se-svc-vciso {
    background:
        radial-gradient(700px 300px at 90% -20%, rgba(37, 99, 235, 0.35), transparent 60%),
        linear-gradient(150deg, #0f2440 0%, #1e3a5f 70%, #0f2440 100%);
}
/* ---------- Footer: two-column services list ---------- */
#footer ul.se-footer-cols {
    columns: 2;
    column-gap: 24px;
}