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

body{
    font-family:'Inter',sans-serif;
    background:#f8fbff;
    color:#0f172a;
}

/* =========================================
   BRAND PALETTE
========================================= */

:root{

    --qbit-cyan:#22c7f6;
    --qbit-cyan-light:#6fe3ff;

    --qbit-blue:#1187dc;
    --qbit-blue-dark:#0d3d9b;

    --qbit-navy:#101c73;

    --qbit-red:#ff1744;
    --qbit-red-dark:#d9043d;

    --qbit-dark:#0f172a;

    --qbit-bg:#f4f7fb;
}

/* =========================================
   TEXT GRADIENT
========================================= */

.gradient-text{
    background:linear-gradient(
        135deg,
        var(--qbit-cyan),
        var(--qbit-blue),
        var(--qbit-red)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.hero-bg{

    background:

        radial-gradient(
            circle at top left,
            rgba(34,199,246,.18),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(255,23,68,.14),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #ffffff,
            #eef5ff
        );
}

/* =========================================
   GLASS EFFECT
========================================= */

.glass{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:
        0 10px 40px rgba(17,135,220,.08);
}

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

.contact-bg{

    background:

        radial-gradient(
            circle at top right,
            rgba(255,23,68,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(34,199,246,.15),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #0b1220,
            #111827
        );
}

/* =========================================
   SERVICE CARD
========================================= */

.service-hover{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* GRADIENT OVERLAY */

.service-hover::before{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        var(--qbit-cyan),
        var(--qbit-blue),
        var(--qbit-red)
    );

    opacity:0;

    transition:.35s;

    z-index:0;
}

/* HOVER */

.service-hover:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 60px rgba(17,135,220,.18);
}

.service-hover:hover::before{
    opacity:1;
}

/* TEXT COLOR ON HOVER */

.service-hover:hover *{
    color:white !important;
}

/* KEEP CONTENT ABOVE OVERLAY */

.service-hover > *{

    position:relative;

    z-index:2;
}

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

.btn-qbit{

    background:linear-gradient(
        135deg,
        var(--qbit-cyan),
        var(--qbit-blue),
        var(--qbit-red)
    );

    box-shadow:
        0 10px 30px rgba(17,135,220,.25);

    transition:all .35s ease;
}

.btn-qbit:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 40px rgba(255,23,68,.28);
}

/* =========================================
   WHATSAPP FLOAT
========================================= */

.whatsapp-float{

    box-shadow:
        0 10px 30px rgba(34,197,94,.35);

    transition:all .3s ease;
}

.whatsapp-float:hover{

    transform:scale(1.08);

    box-shadow:
        0 15px 40px rgba(34,197,94,.45);
}

/* =========================================
   SMOOTH SCROLL
========================================= */

html{
    scroll-behavior:smooth;
}

/* =========================================
   SELECTION
========================================= */

::selection{

    background:var(--qbit-blue);

    color:white;
}