:root {
    --systek-bg: #04080f;
    --systek-surface: #080f1e;
    --systek-surface-2: #0c1628;
    --systek-cyan: #00d4ff;
    --systek-green: #00f087;
    --systek-text: #e2eeff;
    --systek-muted: #8da2bd;
    --systek-border: rgba(255, 255, 255, 0.08);
}


/* ========================================================= */
/* GLOBAL */
/* ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    background: var(--systek-bg);
    color: var(--systek-text);
}

body {
    min-height: 100vh;
}

.rz-body {
    background: var(--systek-bg);
}

.systek-main {
    min-height: 70vh;
}


/* ========================================================= */
/* HEADER */
/* ========================================================= */

.systek-header {
    background: rgba(4, 8, 15, 0.96);
    border-bottom: 1px solid var(--systek-border);
    backdrop-filter: blur(12px);
}

.systek-logo {
    color: var(--systek-text);
    font-weight: 700;
}

.systek-logo-subtitle {
    color: var(--systek-muted);
}

.systek-menu {
    background: transparent;
}


/* ========================================================= */
/* HERO */
/* ========================================================= */

.systek-hero {
    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(0, 212, 255, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(0, 240, 135, 0.08),
            transparent 30%
        ),
        var(--systek-bg);
}

.systek-badge {
    width: fit-content;
}

.systek-hero-title {
    max-width: 850px;
    font-weight: 800;
    line-height: 1.05;
}

.systek-hero-description {
    max-width: 720px;
    color: var(--systek-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.systek-hero-card {
    background:
        linear-gradient(
            145deg,
            rgba(0, 212, 255, 0.10),
            rgba(0, 240, 135, 0.04)
        ),
        var(--systek-surface);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 20px;
    padding: 2rem;
}

.systek-hero-icon {
    font-size: 72px;
    color: var(--systek-cyan);
}

.systek-stat-value {
    color: var(--systek-cyan);
    font-weight: 800;
}


/* ========================================================= */
/* SECTIONS */
/* ========================================================= */

.systek-section {
    background: var(--systek-bg);
}

.systek-section-alt {
    background: var(--systek-surface);
}

.systek-section-title {
    font-weight: 800;
}

.systek-section-description {
    max-width: 700px;
    color: var(--systek-muted);
}


/* ========================================================= */
/* SERVICES */
/* ========================================================= */

.systek-service-card,
.systek-feature-card,
.systek-service-detail {
    height: 100%;
    background: var(--systek-surface);
    border: 1px solid var(--systek-border);
    border-radius: 16px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.systek-service-card:hover,
.systek-feature-card:hover,
.systek-service-detail:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.30);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

.systek-service-icon {
    font-size: 42px;
    color: var(--systek-cyan);
}

.systek-service-icon-large {
    font-size: 48px;
    color: var(--systek-cyan);
}

.systek-feature-icon {
    font-size: 42px;
    color: var(--systek-green);
}

.systek-card-title {
    font-weight: 700;
}

.systek-card-description {
    color: var(--systek-muted);
    line-height: 1.6;
}


/* ========================================================= */
/* CTA */
/* ========================================================= */

.systek-cta {
    background:
        radial-gradient(
            circle at center,
            rgba(0, 212, 255, 0.10),
            transparent 55%
        ),
        var(--systek-surface-2);
}

.systek-cta-title {
    font-weight: 800;
}

.systek-cta-description {
    max-width: 650px;
    color: var(--systek-muted);
}

.systek-inline-cta {
    background: var(--systek-surface-2);
    border: 1px solid rgba(0, 212, 255, 0.15);
}


/* ========================================================= */
/* PAGE HEADER */
/* ========================================================= */

.systek-page-header {
    background:
        radial-gradient(
            circle at center,
            rgba(0, 212, 255, 0.10),
            transparent 50%
        ),
        var(--systek-bg);
}

.systek-page-title {
    font-weight: 800;
}

.systek-page-description {
    max-width: 750px;
    color: var(--systek-muted);
}


/* ========================================================= */
/* ABOUT */
/* ========================================================= */

.systek-about-card {
    min-height: 280px;
    display: flex;
    justify-content: center;
    background: var(--systek-surface);
    border: 1px solid var(--systek-border);
    border-radius: 20px;
}

.systek-about-icon {
    font-size: 70px;
    color: var(--systek-green);
}


/* ========================================================= */
/* CONTACT */
/* ========================================================= */

.systek-contact-card,
.systek-form-card {
    background: var(--systek-surface);
    border: 1px solid var(--systek-border);
    border-radius: 16px;
}

.systek-contact-icon {
    font-size: 32px;
    color: var(--systek-cyan);
}


/* ========================================================= */
/* FOOTER */
/* ========================================================= */

.systek-footer {
    background: #02050a;
    border-top: 1px solid var(--systek-border);
}

.systek-footer-title {
    color: var(--systek-text);
}

.systek-footer-heading {
    color: var(--systek-text);
    font-weight: 700;
}

.systek-footer-text {
    color: var(--systek-muted);
}


/* ========================================================= */
/* 404 */
/* ========================================================= */

.systek-notfound {
    min-height: 65vh;
}

.systek-notfound-icon {
    font-size: 72px;
    color: var(--systek-cyan);
}

.systek-notfound-number {
    font-size: 6rem;
    font-weight: 900;
}


/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media (max-width: 768px) {

    .systek-hero-title {
        font-size: 2.5rem;
    }

    .systek-page-title {
        font-size: 2.5rem;
    }

    .systek-notfound-number {
        font-size: 4rem;
    }

}