:root {

    --primary: #38bdf8;
    --primary-dark: #0284c7;

    --secondary: #2563eb;

    --background: #020617;
    --surface: #0f172a;
    --card: #1e293b;

    --text: #f8fafc;
    --muted: #94a3b8;

    --border: rgba(255,255,255,.08);

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

}



/* Light Theme */

body.light {


    --background:#f8fafc;

    --surface:#ffffff;

    --card:#ffffff;


    --text:#0f172a;

    --muted:#475569;


    --border:
    rgba(15,23,42,.1);


    --shadow:
    0 20px 50px rgba(15,23,42,.15);


}



/* Apply Theme Colors */


body {


    background:
    var(--background);

    color:
    var(--text);


    transition:

    background .4s ease,

    color .4s ease;


}



/* Cards */


.card,
.service-card,
.project-card,
.plan,
.testimonial,
.step {


    background:
    var(--card);


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


    box-shadow:
    var(--shadow);


    transition:.3s;


}



/* Header */


header {


    background:
    color-mix(
        in srgb,
        var(--background) 80%,
        transparent
    );


}



/* Text */


p {

    color:
    var(--muted);

}



h1,
h2,
h3,
h4 {


    color:
    var(--text);


}



/* Buttons */


.button {


    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );


}



/* Secondary Button */


.button.secondary {


    background:

    transparent;


    border:

    1px solid var(--primary);


    color:

    var(--text);


}



/* Links */


nav a {


    color:

    var(--muted);


}


nav a:hover,
nav .active {


    color:

    var(--primary);


}



/* Theme Toggle Button */


.theme-toggle {


    width:45px;

    height:45px;


    border-radius:50%;


    border:none;


    cursor:pointer;


    background:

    var(--card);


    color:

    var(--text);


    display:flex;

    align-items:center;

    justify-content:center;


    transition:.3s;


}



.theme-toggle:hover {


    transform:

    rotate(20deg)

    scale(1.1);


}



/* Glass Effect */


.glass {


    background:

    rgba(255,255,255,.08);


    backdrop-filter:

    blur(20px);


    border:

    1px solid var(--border);


}



/* Gradient Text */


.gradient-text {


    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );


    -webkit-background-clip:text;

    background-clip:text;


    color:transparent;


}



/* Highlight Box */


.highlight {


    padding:25px;


    border-radius:20px;


    background:

    linear-gradient(

        135deg,

        rgba(56,189,248,.15),

        rgba(37,99,235,.15)

    );


    border:

    1px solid rgba(56,189,248,.25);


}



/* Premium Section */


.dark-section {


    background:

    var(--surface);


}



/* Smooth Theme Changes */


* {


    transition:

    background-color .3s ease,

    border-color .3s ease,

    color .3s ease;


}



/* Remove transition on page load */


.no-transition * {


    transition:none !important;


}