/* =========================================================
       ROOT
       ========================================================= */

    :root {

        /* =========================
           BRAND — CRYSTAL SKY BLUE
           ========================= */

        --primary: #42c8ff;
        --primary-dark: #159bd0;
        --primary-light: #8be3ff;

        /* =========================
           MAIN DARK COLORS
           ========================= */

        --dark: #080b10;
        --dark-2: #0d1117;
        --dark-3: #151b23;

        /* =========================
           TEXT COLORS
           ========================= */

        --text: #f3f8fc;
        --text-light: #ffffff;
        --muted: #9aa8b6;
        --muted-light: #b0bcc8;
        --muted-dark: #7a8794;

        /* =========================
           SURFACE COLORS
           ========================= */

        --white: #ffffff;
        --light: #10161e;
        --surface: #121820;
        --surface-2: #181f28;
        --surface-3: #202934;

        /* =========================
           DASHBOARD COLORS
           ========================= */

        --dashboard: #0f141b;
        --dashboard-body: #141b24;
        --dashboard-card: #1a222c;
        --dashboard-card-2: #202a35;

        /* =========================
           BORDERS
           ========================= */

        --border: rgba(139, 227, 255, .10);
        --border-light: rgba(255, 255, 255, .08);
        --border-medium: rgba(139, 227, 255, .18);
        --border-primary: rgba(66, 200, 255, .40);

        /* =========================
           CRYSTAL BLUE TRANSPARENCIES
           ========================= */

        --primary-bg-soft: rgba(66, 200, 255, .06);
        --primary-bg: rgba(66, 200, 255, .10);
        --primary-bg-medium: rgba(66, 200, 255, .13);
        --primary-bg-strong: rgba(66, 200, 255, .18);

        /* =========================
           WHITE TRANSPARENCIES
           ========================= */

        --white-03: rgba(255, 255, 255, .03);
        --white-035: rgba(255, 255, 255, .035);
        --white-05: rgba(255, 255, 255, .05);
        --white-06: rgba(255, 255, 255, .06);
        --white-08: rgba(255, 255, 255, .08);
        --white-10: rgba(255, 255, 255, .10);
        --white-90: rgba(255, 255, 255, .90);

        /* =========================
           BLACK TRANSPARENCIES
           ========================= */

        --black-06: rgba(0, 0, 0, .06);
        --black-08: rgba(0, 0, 0, .08);
        --black-10: rgba(0, 0, 0, .10);
        --black-18: rgba(0, 0, 0, .18);
        --black-25: rgba(0, 0, 0, .25);
        --black-45: rgba(0, 0, 0, .45);

        /* =========================
           GLOW
           ========================= */

        --glow-color: rgba(66, 200, 255, .13);
        --glow-primary: rgba(66, 200, 255, .30);
        --glow-strong: rgba(66, 200, 255, .40);

        /* =========================
           SHADOW
           ========================= */

        --shadow:
            0 20px 60px rgba(0, 0, 0, .45);

        --shadow-heavy:
            0 40px 100px rgba(0, 0, 0, .55);

        /* =========================
           OTHER
           ========================= */

        --gray-dot: #555;
        --gray-dark: #6f7b88;
        --gray: #8d9aa8;
        --gray-light: #a8b3bf;

        --radius: 22px;
        --container: 1180px;
    }


    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }


    html {
        scroll-behavior: smooth;
    }


    body {
        font-family: "Noto Sans Arabic", sans-serif;
        background: var(--dark);
        color: var(--text);
        line-height: 1.8;
        overflow-x: hidden;
    }


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


    button {
        font-family: inherit;
    }


    .container {
        width: min(var(--container), calc(100% - 40px));
        margin: auto;
    }


    /* =========================================================
       BACKGROUND EFFECT
    ========================================================= */

    .glow {
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;

        background: var(--glow-color);

        filter: blur(100px);
        pointer-events: none;
    }


    /* =========================================================
       NAVBAR
    ========================================================= */

    .navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;

        transition: .3s;
    }


    .navbar.scrolled {
        background: rgba(8, 11, 16, .92);

        backdrop-filter: blur(15px);

        box-shadow:
            0 5px 30px rgba(0, 0, 0, .30);

        border-bottom:
            1px solid var(--border);
    }


    .nav-inner {
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .logo {
        display: flex;
        align-items: center;
        gap: 11px;

        font-weight: 900;
        font-size: 22px;
    }


    .logo-box {
        width: 43px;
        height: 43px;

        border-radius: 13px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: var(--primary);
        color: var(--dark);

        box-shadow:
            0 10px 25px var(--glow-primary);
    }


    .logo small {
        display: block;
        font-size: 8px;
        color: var(--muted);
        font-weight: 600;
        line-height: 1.2;
    }


    .nav-links {
        display: flex;
        align-items: center;
        gap: 30px;

        font-size: 14px;
        font-weight: 600;
    }


    .nav-links a {
        transition: .2s;
    }


    .nav-links a:hover {
        color: var(--primary);
    }


    .nav-cta {
        padding: 10px 20px;
        border-radius: 12px;

        background: var(--dark-3);
        color: var(--text-light) !important;

        border: 1px solid var(--border);
    }


    .nav-cta:hover {
        background: var(--primary);
        color: var(--dark) !important;
    }


    .menu-btn {
        display: none;

        border: 0;
        background: none;

        color: var(--text);

        font-size: 23px;
        cursor: pointer;
    }


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

    .hero {
        min-height: 100vh;

        padding-top: 140px;
        padding-bottom: 80px;

        position: relative;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 80% 30%,
                rgba(66, 200, 255, .13),
                transparent 30%
            ),
            radial-gradient(
                circle at 10% 80%,
                rgba(21, 155, 208, .07),
                transparent 30%
            ),
            linear-gradient(
                180deg,
                var(--dark) 0%,
                var(--dark-2) 100%
            );
    }


    .hero-content {
        display: grid;
        grid-template-columns: 1.05fr .95fr;

        align-items: center;
        gap: 70px;
    }


    .hero-text {
        position: relative;
        z-index: 2;
    }


    .badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;

        padding: 8px 14px;
        border-radius: 50px;

        background: var(--primary-bg);
        color: var(--primary-light);

        font-size: 13px;
        font-weight: 700;

        margin-bottom: 20px;

        border: 1px solid var(--border);
    }


    .badge i {
        font-size: 11px;
    }


    .hero h1 {
        font-size: clamp(42px, 5vw, 74px);

        line-height: 1.08;
        letter-spacing: -2px;

        font-weight: 900;

        margin-bottom: 25px;
    }


    .hero h1 span {
        color: var(--primary);

        text-shadow:
            0 0 35px rgba(66, 200, 255, .20);
    }


    .hero-description {
        color: var(--muted);

        font-size: 18px;
        max-width: 650px;

        margin-bottom: 30px;
    }


    .hero-buttons {
        display: flex;
        gap: 13px;
        flex-wrap: wrap;
    }


    .btn {
        border: 0;
        cursor: pointer;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        padding: 14px 23px;
        border-radius: 14px;

        font-size: 14px;
        font-weight: 800;

        transition: .25s;
    }


    .btn-primary {
        color: var(--dark);

        background: var(--primary);

        box-shadow:
            0 12px 30px var(--glow-primary);
    }


    .btn-primary:hover {
        transform: translateY(-3px);

        background: var(--primary-light);

        box-shadow:
            0 15px 35px var(--glow-strong);
    }


    .btn-dark {
        color: var(--text-light);

        background: var(--dark-3);

        border: 1px solid var(--border);
    }


    .btn-dark:hover {
        transform: translateY(-3px);

        background: var(--surface-3);

        border-color: var(--border-primary);
    }


    .hero-note {
        display: flex;
        gap: 22px;

        margin-top: 30px;

        color: var(--muted);
        font-size: 12px;
    }


    .hero-note span {
        display: flex;
        align-items: center;
        gap: 7px;
    }


    .hero-note i {
        color: var(--primary);
    }


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

    .hero-visual {
        position: relative;
    }


    .dashboard {
        position: relative;

        background: var(--dashboard);

        border-radius: 27px;
        padding: 17px;

        box-shadow:
            var(--shadow-heavy),
            0 0 0 1px var(--border-light);

        transform:
            perspective(1000px)
            rotateY(-5deg)
            rotateX(2deg);

        transition: .5s;

        border:
            1px solid var(--border);
    }


    .dashboard:hover {
        transform:
            perspective(1000px)
            rotateY(0deg)
            rotateX(0deg);
    }


    .dash-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        color: var(--text-light);

        padding: 5px 5px 15px;
    }


    .dash-logo {
        display: flex;
        align-items: center;
        gap: 8px;

        font-weight: 800;
    }


    .dash-logo span {
        width: 28px;
        height: 28px;

        border-radius: 8px;

        background: var(--primary);

        color: var(--dark);

        display: grid;
        place-items: center;

        font-size: 11px;

        box-shadow:
            0 0 20px rgba(66, 200, 255, .20);
    }


    .dash-dots {
        display: flex;
        gap: 5px;
    }


    .dash-dots i {
        width: 6px;
        height: 6px;

        background: var(--gray-dot);

        border-radius: 50%;
    }


    .dash-body {
        background: var(--dashboard-body);

        border-radius: 18px;
        padding: 20px;

        border:
            1px solid var(--border);
    }


    .dash-title {
        color: var(--text);

        font-size: 13px;
        font-weight: 800;

        margin-bottom: 15px;
    }


    .dash-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 10px;

        margin-bottom: 12px;
    }


    .dash-card {
        background: var(--dashboard-card);

        border-radius: 13px;
        padding: 13px;

        border:
            1px solid var(--border);
    }


    .dash-card small {
        display: block;

        color: var(--muted-dark);

        font-size: 9px;

        margin-bottom: 3px;
    }


    .dash-card strong {
        color: var(--text);

        font-size: 17px;
    }


    .chart {
        height: 150px;

        background: var(--dashboard-card);

        border-radius: 13px;

        padding: 15px;

        position: relative;
        overflow: hidden;

        border:
            1px solid var(--border);
    }


    .chart-line {
        position: absolute;

        left: 8%;
        right: 8%;
        bottom: 30px;

        height: 80px;
    }


    .chart-line svg {
        width: 100%;
        height: 100%;
    }


    .chart-line path {
        fill: none;

        stroke: var(--primary);

        stroke-width: 4;

        stroke-linecap: round;

        filter:
            drop-shadow(0 0 7px rgba(66, 200, 255, .35));
    }


    .chart-label {
        font-size: 9px;

        color: var(--muted-dark);
    }


    .ai-card {
        position: absolute;

        bottom: -25px;
        left: -35px;

        width: 230px;

        background: var(--surface);

        border-radius: 18px;

        padding: 15px;

        box-shadow:
            0 20px 50px rgba(0, 0, 0, .45);

        border:
            1px solid var(--border);

        animation:
            float 4s ease-in-out infinite;
    }


    .ai-title {
        display: flex;
        align-items: center;
        gap: 9px;

        color: var(--text);

        font-weight: 800;
        font-size: 12px;

        margin-bottom: 7px;
    }


    .ai-icon {
        width: 29px;
        height: 29px;

        display: grid;
        place-items: center;

        border-radius: 9px;

        background: var(--primary-bg-medium);

        color: var(--primary);

        box-shadow:
            0 0 18px rgba(66, 200, 255, .12);
    }


    .ai-card p {
        font-size: 10px;

        color: var(--muted);

        line-height: 1.7;
    }


    @keyframes float {

        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }


    /* =========================================================
       STATS
    ========================================================= */

    .stats {
        background: var(--dark-2);

        color: var(--text-light);

        padding: 30px 0;

        border-top:
            1px solid var(--border);

        border-bottom:
            1px solid var(--border);
    }


    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        gap: 20px;
    }


    .stat {
        text-align: center;
        padding: 10px;
    }


    .stat strong {
        display: block;

        color: var(--primary);

        font-size: 25px;
        font-weight: 900;

        text-shadow:
            0 0 25px rgba(66, 200, 255, .18);
    }


    .stat span {
        color: var(--muted);

        font-size: 11px;
    }


    /* =========================================================
       SECTION
    ========================================================= */

    section {
        padding: 110px 0;

        background: var(--dark);
    }


    .section-head {
        text-align: center;

        max-width: 720px;

        margin: 0 auto 55px;
    }


    .section-kicker {
        color: var(--primary);

        font-size: 12px;
        font-weight: 900;

        margin-bottom: 8px;
    }


    .section-head h2 {
        color: var(--text);

        font-size: clamp(30px, 4vw, 48px);

        line-height: 1.2;

        margin-bottom: 14px;

        font-weight: 900;
    }


    .section-head p {
        color: var(--muted);

        font-size: 15px;
    }


    /* =========================================================
       AI SECTION
    ========================================================= */

    .ai-section {
        background:
            radial-gradient(
                circle at 85% 20%,
                rgba(66, 200, 255, .08),
                transparent 30%
            ),
            var(--dark-2);

        color: var(--text-light);

        position: relative;
        overflow: hidden;
    }


    .ai-section .glow {
        right: -150px;
        top: -150px;
    }


    .ai-layout {
        display: grid;

        grid-template-columns: .9fr 1.1fr;

        gap: 70px;

        align-items: center;
    }


    .ai-big-text h2 {
        color: var(--text);

        font-size: clamp(35px, 5vw, 60px);

        line-height: 1.15;

        margin-bottom: 20px;
    }


    .ai-big-text h2 span {
        color: var(--primary);

        text-shadow:
            0 0 35px rgba(66, 200, 255, .20);
    }


    .ai-big-text p {
        color: var(--muted);

        font-size: 16px;
    }


    .recommendations {
        display: grid;
        gap: 13px;
    }


    .recommendation {
        display: flex;

        align-items: flex-start;

        gap: 15px;

        padding: 19px;

        border:
            1px solid var(--border-light);

        border-radius: 17px;

        background:
            var(--white-035);

        transition: .3s;
    }


    .recommendation:hover {
        transform: translateX(-7px);

        border-color:
            var(--border-primary);

        background:
            rgba(66, 200, 255, .045);
    }


    .rec-icon {
        flex: 0 0 43px;

        height: 43px;

        display: grid;
        place-items: center;

        background:
            var(--primary-bg-medium);

        color: var(--primary);

        border-radius: 12px;
    }


    .recommendation h4 {
        color: var(--text);

        font-size: 13px;

        margin-bottom: 3px;
    }


    .recommendation p {
        color: var(--muted);

        font-size: 11px;
    }


    /* =========================================================
       FEATURES
    ========================================================= */

    .features {
        background: var(--light);
    }


    .features-grid {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 18px;
    }


    .feature {
        background: var(--surface);

        color: var(--text);

        padding: 28px;

        border-radius: var(--radius);

        border:
            1px solid var(--border);

        transition: .3s;
    }


    .feature:hover {
        transform: translateY(-7px);

        box-shadow:
            var(--shadow);

        border-color:
            var(--border-medium);
    }


    .feature-icon {
        width: 48px;
        height: 48px;

        display: grid;
        place-items: center;

        border-radius: 14px;

        background:
            var(--primary-bg);

        color: var(--primary);

        font-size: 19px;

        margin-bottom: 17px;
    }


    .feature h3 {
        color: var(--text);

        font-size: 15px;

        margin-bottom: 7px;
    }


    .feature p {
        color: var(--muted);

        font-size: 12px;
    }


    /* =========================================================
       FINANCIAL SUMMARY
    ========================================================= */

    .summary-layout {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 70px;

        align-items: center;
    }


    .summary-screen {
        background: var(--dashboard);

        padding: 20px;

        border-radius: 25px;

        box-shadow:
            var(--shadow);

        border:
            1px solid var(--border);
    }


    .summary-head {
        display: flex;

        justify-content: space-between;

        color: var(--text-light);

        font-size: 12px;

        margin-bottom: 18px;
    }


    .summary-boxes {
        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 10px;
    }


    .summary-box {
        background: var(--dashboard-card);

        border-radius: 13px;

        padding: 18px;

        border:
            1px solid var(--border);
    }


    .summary-box small {
        color: var(--muted-dark);

        display: block;

        font-size: 9px;
    }


    .summary-box strong {
        color: var(--text-light);

        font-size: 19px;
    }


    .summary-box.highlight strong {
        color: var(--primary);

        text-shadow:
            0 0 20px rgba(66, 200, 255, .15);
    }


    .summary-text h2 {
        color: var(--text);

        font-size: clamp(30px,4vw,48px);

        line-height: 1.2;

        margin-bottom: 20px;
    }


    .summary-text p {
        color: var(--muted);

        margin-bottom: 20px;
    }


    .check-list {
        display: grid;

        gap: 9px;
    }


    .check-list div {
        display: flex;

        gap: 9px;

        align-items: center;

        color: var(--text);

        font-size: 13px;

        font-weight: 600;
    }


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


    /* =========================================================
       PLATFORMS
    ========================================================= */

    .platforms {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(66, 200, 255, .08),
                transparent 35%
            ),
            var(--dark-2);

        color: var(--text-light);

        text-align: center;
    }


    .platforms .section-head p {
        color: var(--muted);
    }


    .platform-grid {
        display: grid;

        grid-template-columns: repeat(4,1fr);

        gap: 15px;

        max-width: 900px;

        margin: auto;
    }


    .platform {
        border:
            1px solid var(--border-light);

        background:
            var(--white-03);

        border-radius: 20px;

        padding: 25px 15px;

        transition: .3s;
    }


    .platform:hover {
        transform: translateY(-6px);

        border-color:
            var(--border-primary);

        background:
            rgba(66, 200, 255, .045);
    }


    .platform i {
        font-size: 27px;

        color: var(--primary);

        margin-bottom: 10px;

        text-shadow:
            0 0 20px rgba(66, 200, 255, .20);
    }


    .platform strong {
        display: block;

        font-size: 13px;
    }


    .platform span {
        color: var(--muted-dark);

        font-size: 10px;
    }


    /* =========================================================
       PROJECTS
    ========================================================= */

    .project-card {
        background:
            radial-gradient(
                circle at 90% 20%,
                rgba(66, 200, 255, .10),
                transparent 35%
            ),
            var(--dark-2);

        color: var(--text-light);

        border-radius: 28px;

        padding: 55px;

        position: relative;

        overflow: hidden;

        border:
            1px solid var(--border);
    }


    .project-card .glow {
        left: -100px;
        bottom: -250px;
    }


    .project-layout {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 60px;

        align-items: center;

        position: relative;

        z-index: 1;
    }


    .project-text h2 {
        color: var(--text);

        font-size: clamp(30px,4vw,50px);

        line-height: 1.2;

        margin-bottom: 17px;
    }


    .project-text h2 span {
        color: var(--primary);
    }


    .project-text p {
        color: var(--muted);

        font-size: 14px;
    }


    .project-numbers {
        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 12px;
    }


    .project-number {
        padding: 22px;

        border-radius: 16px;

        background:
            var(--white-05);

        border:
            1px solid var(--border-light);
    }


    .project-number i {
        color: var(--primary);

        margin-bottom: 10px;
    }


    .project-number strong {
        display: block;

        color: var(--text);

        font-size: 14px;
    }


    .project-number span {
        display: block;

        color: var(--muted-dark);

        font-size: 10px;
    }


    /* =========================================================
       SPECIAL FEATURES
    ========================================================= */

    .special-grid {
        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 18px;
    }


    .special {
        padding: 27px;

        border-radius: 20px;

        border:
            1px solid var(--border);

        display: flex;

        gap: 17px;

        align-items: flex-start;

        transition: .3s;

        background:
            var(--surface);
    }


    .special:hover {
        border-color:
            var(--border-primary);

        box-shadow:
            var(--shadow);

        transform: translateY(-4px);
    }


    .special-icon {
        flex: 0 0 48px;

        width: 48px;
        height: 48px;

        display: grid;
        place-items: center;

        background:
            var(--primary-bg);

        color: var(--primary);

        border-radius: 14px;
    }


    .special h3 {
        color: var(--text);

        font-size: 14px;

        margin-bottom: 5px;
    }


    .special p {
        color: var(--muted);

        font-size: 11px;
    }


    /* =========================================================
       SIMPLE SYSTEM
    ========================================================= */

    .simple {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(66, 200, 255, .08),
                transparent 40%
            ),
            var(--dark-2);

        border-top:
            1px solid var(--border);

        border-bottom:
            1px solid var(--border);
    }


    .simple-box {
        max-width: 900px;

        margin: auto;

        text-align: center;
    }


    .simple-box h2 {
        color: var(--text);

        font-size: clamp(32px,5vw,55px);

        line-height: 1.2;

        margin-bottom: 18px;
    }


    .simple-box h2 span {
        color: var(--primary);
    }


    .simple-box p {
        color: var(--muted);

        font-size: 15px;

        max-width: 700px;

        margin: auto auto 35px;
    }


    .simple-points {
        display: flex;

        justify-content: center;

        gap: 30px;

        flex-wrap: wrap;
    }


    .simple-point {
        display: flex;

        align-items: center;

        gap: 8px;

        color: var(--text);

        font-size: 13px;

        font-weight: 700;
    }


    .simple-point i {
        color: var(--primary);
    }


    /* =========================================================
       PRICE
    ========================================================= */

    .pricing {
        background: var(--light);
    }


    .price-card {
        max-width: 680px;

        margin: auto;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(66, 200, 255, .10),
                transparent 40%
            ),
            var(--dark-2);

        color: var(--text-light);

        border-radius: 30px;

        padding: 50px;

        text-align: center;

        box-shadow:
            0 35px 90px rgba(0, 0, 0, .45);

        position: relative;

        overflow: hidden;

        border:
            1px solid var(--border);
    }


    .price-card .glow {
        width: 300px;
        height: 300px;

        top: -200px;
        right: 50%;

        transform: translateX(50%);
    }


    .price-content {
        position: relative;
        z-index: 1;
    }


    .price-label {
        color: var(--muted-light);

        font-size: 13px;

        margin-bottom: 5px;
    }


    .price {
        font-size: 65px;

        line-height: 1;

        font-weight: 900;

        color: var(--primary);

        text-shadow:
            0 0 35px rgba(66, 200, 255, .18);
    }


    .price small {
        font-size: 16px;

        color: var(--muted-light);
    }


    .price-desc {
        color: var(--muted);

        font-size: 12px;

        margin: 13px 0 25px;
    }


    .price-features {
        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 12px 25px;

        margin-bottom: 30px;
    }


    .price-features span {
        font-size: 11px;

        color: var(--muted-light);
    }


    .price-features i {
        color: var(--primary);

        margin-left: 4px;
    }


    /* =========================================================
       FAQ
    ========================================================= */

    .faq {
        background: var(--dark);
    }

    .faq-grid {
        display: grid;
        gap: 14px;
        max-width: 820px;
        margin: 0 auto;
    }

    .faq-item {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 20px 22px;
        transition: .25s;
    }

    .faq-item:hover {
        border-color: var(--border-primary);
    }

    .faq-item h4 {
        color: var(--text);
        font-size: 14px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .faq-item h4 i {
        color: var(--primary);
        font-size: 13px;
    }

    .faq-item p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
    }


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

    .contact {
        text-align: center;

        background: var(--dark);
    }


    .contact h2 {
        color: var(--text);

        font-size: clamp(32px,5vw,55px);

        line-height: 1.2;

        margin-bottom: 14px;
    }


    .contact p {
        color: var(--muted);

        margin-bottom: 30px;
    }


    .contact-links {
        display: flex;

        justify-content: center;

        gap: 13px;

        flex-wrap: wrap;
    }


    .contact-link {
        display: flex;

        align-items: center;

        gap: 10px;

        border:
            1px solid var(--border);

        padding: 13px 19px;

        border-radius: 13px;

        color: var(--text);

        background:
            var(--surface);

        font-size: 13px;

        font-weight: 700;

        transition: .25s;
    }


    .contact-link:hover {
        transform: translateY(-3px);

        border-color:
            var(--primary);

        color: var(--primary);

        box-shadow:
            0 10px 30px rgba(66, 200, 255, .08);
    }


    .contact-link i {
        color: var(--primary);

        font-size: 17px;
    }


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

    footer {
        background: #05070a;

        color: var(--text-light);

        padding: 35px 0;

        border-top:
            1px solid var(--border);
    }


    .footer-inner {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;
    }


    .footer-logo {
        font-weight: 900;
    }


    .footer-logo span {
        color: var(--primary);
    }


    footer p {
        color: var(--muted-dark);

        font-size: 10px;
    }


    .back-top {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 11px;

        background:
            var(--white-06);

        color: var(--primary);

        border:
            1px solid var(--border);

        cursor: pointer;

        transition: .25s;
    }


    .back-top:hover {
        background:
            var(--primary);

        color:
            var(--dark);
    }


    /* =========================================================
       SCROLL ANIMATION
    ========================================================= */

    .reveal {
        opacity: 0;

        transform: translateY(35px);

        transition: .7s ease;
    }


    .reveal.show {
        opacity: 1;

        transform: translateY(0);
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 900px) {

        .nav-links {
            position: absolute;

            top: 75px;

            right: 20px;
            left: 20px;

            display: none;

            flex-direction: column;

            gap: 0;

            background:
                rgba(13, 17, 23, .97);

            border:
                1px solid var(--border);

            border-radius: 17px;

            padding: 10px;

            box-shadow:
                var(--shadow);

            backdrop-filter:
                blur(15px);
        }


        .nav-links.active {
            display: flex;
        }


        .nav-links a {
            width: 100%;

            padding: 12px;

            border-radius: 9px;
        }


        .nav-links a:hover {
            background:
                var(--primary-bg);
        }


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


        .menu-btn {
            display: block;
        }


        .hero-content,
        .ai-layout,
        .summary-layout,
        .project-layout {
            grid-template-columns: 1fr;
        }


        .hero-content {
            gap: 50px;
        }


        .hero {
            padding-top: 115px;
        }


        .hero h1 {
            letter-spacing: -1px;
        }


        .dashboard {
            transform: none;
        }


        .ai-layout,
        .summary-layout,
        .project-layout {
            gap: 40px;
        }


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


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


    @media (max-width: 600px) {

        .container {
            width: min(100% - 28px, var(--container));
        }


        section {
            padding: 75px 0;
        }


        .nav-inner {
            height: 68px;
        }


        .logo {
            font-size: 18px;
        }


        .logo-box {
            width: 38px;
            height: 38px;
        }


        .hero {
            padding-top: 100px;
            padding-bottom: 60px;
        }


        .hero h1 {
            font-size: 42px;
        }


        .hero-description {
            font-size: 15px;
        }


        .hero-buttons {
            display: grid;

            grid-template-columns: 1fr;
        }


        .btn {
            width: 100%;
        }


        .hero-note {
            gap: 12px;

            flex-direction: column;
        }


        .dashboard {
            padding: 10px;

            border-radius: 20px;
        }


        .dash-body {
            padding: 12px;
        }


        .dash-cards {
            gap: 6px;
        }


        .dash-card {
            padding: 9px;
        }


        .dash-card strong {
            font-size: 13px;
        }


        .ai-card {
            left: 8px;

            bottom: -35px;

            width: 210px;
        }


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


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


        .feature {
            padding: 23px;
        }


        .summary-layout {
            gap: 30px;
        }


        .summary-boxes {
            grid-template-columns: 1fr 1fr;
        }


        .project-card {
            padding: 30px 20px;

            border-radius: 22px;
        }


        .project-numbers {
            grid-template-columns: 1fr 1fr;
        }


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


        .special {
            padding: 20px;
        }


        .price-card {
            padding: 38px 20px;

            border-radius: 23px;
        }


        .price {
            font-size: 55px;
        }


        .contact-links {
            display: grid;

            grid-template-columns: 1fr;
        }


        .contact-link {
            justify-content: center;
        }


        .footer-inner {
            flex-direction: column;

            text-align: center;
        }
    }