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

:root {
    --primary: #1F73E8;
    --primary-light: #4EA6FF;
    --accent: #7BC4FF;

    --dark: #1b1b1b;
    --light: #f5f6f8;
    --white: #ffffff;
    --gray: #7a7a7a;

    --shadow: 0 10px 25px rgba(0,0,0,.12);
    --radius: 14px;
    --transition: .3s ease;

    --max-width: 1280px;
}

/* ==========================================
   RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    color:var(--dark);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef7ff 40%,
            #ffffff 100%
        );

    line-height:1.7;

    overflow-x:hidden;

}

/* ==========================================
   IMAGES
========================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* ==========================================
   LINKS
========================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* ==========================================
   LISTS
========================================== */

ul{

    list-style:none;

}

/* ==========================================
   LAYOUT
========================================== */

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

.section{

    padding:90px 0;

}


/* ==========================================
   TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4{

    font-family:'Poppins',sans-serif;

    line-height:1.2;

    margin-bottom:1rem;

}

h1{

    font-size:3.4rem;

}

h2{

    font-size:2.5rem;

}

h3{

    font-size:1.45rem;

}

p{

    color:#444;

    margin-bottom:1rem;

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-block;

    padding:14px 30px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn.primary{

    background:var(--primary);

    color:white;

}

.btn.primary:hover{

    background:#155bc0;

    transform:translateY(-3px);

}

.btn.secondary{

    background:white;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn.secondary:hover{

    background:var(--primary);

    color:white;

}

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

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

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

    backdrop-filter:blur(14px);

    border-bottom:1px solid #e6eef9;

}

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

.navbar{

    width:min(95%,1400px);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

}

.brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.brand img{

    height:64px;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:24px;

}

/* ==========================================
   DROPDOWN
========================================== */

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:240px;

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

}

.dropdown-menu a{

    display:block;

    padding:10px 18px;

}

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

#hero{

    position:relative;

    overflow:hidden;

    min-height:92vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
        radial-gradient(circle at top right,
        rgba(31,115,232,.15),
        transparent 35%),

        radial-gradient(circle at bottom left,
        rgba(78,166,255,.15),
        transparent 40%);

}

.hero-content{

    max-width:900px;

}

.hero-logo{

    width:320px;

    margin:0 auto 30px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:30px;

}

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

@media (max-width:900px){

    .nav-links{

        display:none;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .hero-logo{

        width:220px;

    }

}

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

.section-title{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}

.section-title h2{
    color:var(--dark);
    margin-bottom:15px;
}

.section-title p{
    font-size:1.1rem;
    color:var(--gray);
}

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

#about{
    padding:120px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.about-card{
    background:#fff;
    padding:35px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.about-card:hover{
    transform:translateY(-10px);
}

.about-card h3{
    color:var(--primary);
}

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

#services{
    padding:120px 0;
    background:#f8fbff;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.service-card{
    background:#fff;
    border-radius:var(--radius);
    padding:35px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--primary);
}

.service-card:hover{
    transform:translateY(-12px);
}

.service-card h3{
    margin-bottom:10px;
    color:var(--primary);
}

/* ==========================================================
   WHY CHOOSE US
========================================================== */

#why-us{
    padding:120px 0;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.why-card{
    background:#fff;
    padding:35px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.why-card:hover{
    transform:translateY(-10px);
}

.why-card h3{
    color:var(--primary);
}

/* ==========================================================
   STATISTICS
========================================================== */

#statistics{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );
    color:#fff;
    padding:120px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.stat-card{
    text-align:center;
}

.stat-card h2{
    font-size:3.5rem;
    margin-bottom:10px;
    color:#fff;
}

.stat-card p{
    color:#fff;
}

/* ==========================================================
   PROCESS
========================================================== */

#process{
    padding:120px 0;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.process-step{
    background:#fff;
    padding:35px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-align:center;
    transition:var(--transition);
}

.process-step:hover{
    transform:translateY(-10px);
}

.process-step span{
    display:flex;
    justify-content:center;
    align-items:center;
    width:60px;
    height:60px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    font-size:1.4rem;
}

/* ==========================================================
   FEATURED PORTFOLIO
========================================================== */

#featured-work{
    padding:120px 0;
    background:#f8fbff;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.portfolio-card{
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.portfolio-card:hover{
    transform:translateY(-10px);
}

.portfolio-card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.portfolio-info{
    padding:25px;
}

.center-button{
    text-align:center;
    margin-top:50px;
}

/* ==========================================================
   BLUE SMOKE GLOW EFFECTS
========================================================== */

.blue-glow{
    position:relative;
}

.blue-glow::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(31,115,232,.15);
    filter:blur(120px);
    z-index:-1;
}

.blue-glow-left::before{
    left:-150px;
    top:-150px;
}

.blue-glow-right::before{
    right:-150px;
    top:-150px;
}

/* ==========================================================
   REVEAL ANIMATIONS
========================================================== */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================================
   FEATURED PORTFOLIO
========================================== */

#featured-work{
    padding:100px 0;
    background:#ffffff;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    margin-top:50px;
}

.portfolio-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    cursor:pointer;
}

.portfolio-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.15);
}

.portfolio-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

.portfolio-card:hover img{
    transform:scale(1.08);
}

.portfolio-info{
    padding:30px;
}

.portfolio-info h3{
    margin-bottom:15px;
    color:var(--primary);
}

.portfolio-info p{
    margin:0;
    color:#555;
}

.center-button{
    margin-top:60px;
    text-align:center;
}

/* ==========================================
   TESTIMONIALS
========================================== */

#testimonials{

    padding:100px 0;

    background:linear-gradient(
        180deg,
        #eef6ff,
        #ffffff
    );

}

.testimonial-slider{

    display:grid;

    gap:30px;

    margin-top:50px;

}

.testimonial-slider blockquote{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    font-size:1.05rem;

    position:relative;

}

.testimonial-slider footer{

    margin-top:20px;

    color:#f7b500;

    font-weight:700;

}

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

#faq{

    padding:100px 0;

    background:white;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:20px;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.faq-question{

    width:100%;

    background:var(--primary);

    color:white;

    border:none;

    padding:22px;

    text-align:left;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;

}

.faq-question:hover{

    background:#155bc0;

}

.faq-answer{

    display:none;

    background:white;

    padding:25px;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    display:block;

}

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

#final-cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    text-align:center;

    padding:120px 0;

}

.cta-logo{

    width:220px;

    margin:auto auto 35px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:40px;

}

/* ==========================================
   NEWSLETTER
========================================== */

#newsletter{

    padding:100px 0;

    background:#f8fbff;

}

.newsletter-content{

    max-width:700px;

    margin:auto;

    text-align:center;

}

#newsletterForm{

    display:grid;

    gap:20px;

    margin-top:35px;

}

#newsletterForm input{

    padding:18px;

    border-radius:12px;

    border:1px solid #d7e5ff;

    font-size:1rem;

}

#newsletterForm button{

    width:220px;

    justify-self:center;

}

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

#contact-preview{

    padding:100px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-list{

    margin:30px 0;

}

.contact-list li{

    margin-bottom:18px;

    font-size:1.05rem;

}

.contact-logo{

    width:100%;

    max-width:420px;

    margin:auto;

}

/* ==========================================
   SOCIAL PREVIEW
========================================== */

#social-preview{

    padding:100px 0;

    text-align:center;

}

.social-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:40px;

}

.social-btn{

    background:white;

    padding:18px 32px;

    border-radius:50px;

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

    transition:.3s;

}

.social-btn:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-6px);

}

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

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

text-align:center;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.social-buttons{

flex-direction:column;

align-items:center;

}

}

/* ==========================================
   BUSINESS HOURS
========================================== */

#business-hours{
    padding:100px 0;
    background:#ffffff;
    text-align: center;
    text-align: center;
}

.hours-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:50px;
    align-items: center;
}

.hours-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
    align-items: center;
}

.hours-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(0,0,0,.15);
}

.hours-card h3{
    color:var(--primary);
}


/* ==========================================
   START PROJECT BANNER
========================================== */

#start-project-banner{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
    text-align:center;
    padding:120px 20px;
}

.banner-logo{
    width:220px;
    margin:0 auto 35px;
}

.large-button{
    margin-top:35px;
    font-size:1.15rem;
    padding:18px 40px;
}

/* ==========================================
   BACK TO TOP BUTTON
========================================== */

#backToTop{
    position:fixed;
    right:30px;
    bottom:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    font-size:1.5rem;
    display:none;
    box-shadow:0 15px 30px rgba(0,0,0,.25);
    transition:.3s;
    z-index:999;
}

#backToTop:hover{
    transform:translateY(-6px);
    background:#155bc0;
}

/* ==========================================
   MODALS
========================================== */

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    z-index:2000;
}

.hidden{
    display:none;
}

.modal-content{
    background:#fff;
    width:min(900px,100%);
    border-radius:20px;
    padding:40px;
    position:relative;
    max-height:90vh;
    overflow:auto;
}

.close-modal{
    position:absolute;
    top:20px;
    right:25px;
    background:none;
    border:none;
    font-size:2rem;
    cursor:pointer;
}

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

#site-footer{
    background:#111;
    color:#fff;
    padding:80px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:50px;
}

.footer-logo{
    width:180px;
    margin-bottom:20px;
}

.footer-column h3{
    margin-bottom:20px;
    color:var(--accent);
}

.footer-column ul{
    padding:0;
    align-content: center;
}

.footer-column li{
    margin-bottom:12px;
}

.footer-column a{
    color:#ddd;
    transition:.3s;
}

.footer-column a:hover{
    color:#fff;
}

.social-icons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

.social-icons a{
    padding:10px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
}

.social-icons a:hover{
    background:var(--primary);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    margin-top:40px;
    gap:20px;
}

.footer-links{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/* ==========================================
   SCROLL REVEAL
========================================== */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all .9s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================================
   FLOATING ANIMATION
========================================== */

.float{
    animation:float 5s ease-in-out infinite;
}

@keyframes float{

0%{
transform:translateY(0px);
}

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

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

}

/* ==========================================
   FADE IN
========================================== */

.fade-in{
    animation:fadeIn 1.2s ease;
}

@keyframes fadeIn{

from{
opacity:0;
}

to{
opacity:1;
}

}

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

.btn.primary:hover{
    box-shadow:
    0 0 15px rgba(31,115,232,.45),
    0 0 35px rgba(31,115,232,.25);
}

/* ==========================================
   BLUE SMOKE BACKGROUND
========================================== */

.blue-smoke{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%,rgba(31,115,232,.18),transparent 30%),
        radial-gradient(circle at 80% 20%,rgba(78,166,255,.18),transparent 35%),
        radial-gradient(circle at 50% 80%,rgba(123,196,255,.18),transparent 35%);
    filter:blur(70px);
    animation:smokeMove 18s linear infinite alternate;
    pointer-events:none;
}

@keyframes smokeMove{

0%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(-30px,20px) scale(1.08);
}

100%{
transform:translate(40px,-20px) scale(.95);
}

}

/* ==========================================
   CUSTOM SCROLLBAR
========================================== */

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#eef5ff;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{
    background:#155bc0;
}

/* ==========================================
   UTILITY CLASSES
========================================== */

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

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}

.shadow{
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.rounded{
    border-radius:18px;
}

.hidden-mobile{
    display:block;
}

.visible-mobile{
    display:none;
}

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

@media(max-width:900px){

.footer-bottom{
    flex-direction:column;
    text-align:center;
}

.footer-links{
    justify-content:center;
}

.hidden-mobile{
    display:none;
}

.visible-mobile{
    display:block;
}

.hours-grid,
.footer-grid{
    grid-template-columns:1fr;
}

.modal-content{
    padding:25px;
}

}

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

.wave-divider{
    position:relative;
    overflow:hidden;
}

.wave-divider::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:120px;
    background:url("../images/wave-divider.svg") center bottom/cover no-repeat;
    pointer-events:none;
}

.section-divider{
    width:120px;
    height:5px;
    margin:25px auto 45px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );
}

/* ==========================================
   GLASS CARDS
========================================== */

.glass-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:35px;

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

}

/* ==========================================
   PREMIUM SERVICE CARDS
========================================== */

.service-card{

    position:relative;

    overflow:hidden;
    

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(31,115,232,.08),
        rgba(255,255,255,0)
    );

    opacity:0;

    transition:.45s;

}

.service-card:hover::before{

    opacity:1;

}

.service-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transition:.8s;

}

.service-card:hover::after{

    left:120%;

}

.service-card h3{

    transition:.35s;

}

.service-card:hover h3{

    color:var(--primary);

}

/* ==========================================
   ICON CIRCLES
========================================== */

.icon-circle{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    font-size:2rem;

    margin:0 auto 25px;

    box-shadow:0 15px 30px rgba(31,115,232,.25);

}

/* ==========================================
   RIBBONS
========================================== */

.ribbon{

    position:absolute;

    top:18px;

    right:-40px;

    background:#ffb400;

    color:white;

    padding:8px 55px;

    transform:rotate(45deg);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

/* ==========================================
   IMAGE OVERLAY
========================================== */

.image-overlay{

    position:relative;

    overflow:hidden;

}

.image-overlay img{

    transition:.5s;

}

.image-overlay:hover img{

    transform:scale(1.12);

}

.image-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(31,115,232,.55);

    opacity:0;

    transition:.4s;

    z-index:1;

}

.image-overlay:hover::before{

    opacity:1;

}

.image-overlay span{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    color:white;

    font-weight:700;

    font-size:1.2rem;

    opacity:0;

    transition:.35s;

    z-index:2;

}

.image-overlay:hover span{

    opacity:1;

}

/* ==========================================
   FEATURE BADGES
========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:999px;

    background:#eef6ff;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    margin:6px;

}

/* ==========================================
   FEATURE LIST
========================================== */

.feature-list{

    display:grid;

    gap:16px;

    margin-top:25px;

}

.feature-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.feature-list li::before{

    content:"✔";

    color:#34b233;

    font-weight:bold;

}

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

.glow-hover{

    transition:.35s;

}

.glow-hover:hover{

    box-shadow:
        0 0 20px rgba(31,115,232,.30),
        0 0 40px rgba(31,115,232,.15);

}

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

.gradient-text{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/* ==========================================
   PARALLAX BACKGROUND
========================================== */

.parallax{

    background-attachment:fixed;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

}

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

.shadow-lg{

    box-shadow:0 35px 80px rgba(0,0,0,.12);

}

.shadow-xl{

    box-shadow:0 45px 100px rgba(0,0,0,.16);

}

/* ==========================================
   HOVER LIFT
========================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-12px);

}

/* ==========================================
   ANIMATED BORDER
========================================== */

.animated-border{

    position:relative;

}

.animated-border::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:3px;

    background:var(--primary);

    transition:.35s;

}

.animated-border:hover::after{

    width:100%;

}

/* ==========================================
   BLUE SMOKE DECORATION
========================================== */

.smoke-decoration{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(
        rgba(31,115,232,.18),
        transparent 70%
    );

    filter:blur(90px);

    animation:float 10s ease-in-out infinite;

    pointer-events:none;

}

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

@media(max-width:768px){

.ribbon{

display:none;

}

.icon-circle{

width:70px;
height:70px;
font-size:1.5rem;

}

.wave-divider::after{

height:60px;

}

}

/* =====================================================
   STAGE 6
   PRICING PAGE
===================================================== */

#pricing-hero{
    padding:120px 0;
    text-align:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
}

#pricing-hero h1{
    font-size:3.2rem;
    margin-bottom:20px;
}

#pricing-hero p{
    max-width:800px;
    margin:auto;
    color:#fff;
}

/* Pricing Grid */

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

    margin-top:70px;

}

/* Pricing Cards */

.pricing-card{

    position:relative;

    background:white;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

}

.pricing-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.pricing-card-header{

    padding:40px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    text-align:center;

}

.pricing-card-header h2{

    margin-bottom:15px;

}

.price{

    font-size:3rem;

    font-weight:700;

}

.price small{

    font-size:1rem;

}

.pricing-card-body{

    padding:35px;

}

.pricing-card-body ul{

    display:grid;

    gap:18px;

}

.pricing-card-body li{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.pricing-card-body li::before{

    content:"✔";

    color:#3ab34a;

    font-weight:bold;

}

/* Featured Plan */

.featured-plan{

    transform:scale(1.04);

    border:3px solid var(--primary);

}

.featured-plan:hover{

    transform:scale(1.08);

}

/* Most Popular Ribbon */

.popular{

    position:absolute;

    top:18px;

    right:-55px;

    background:#ffb300;

    color:white;

    padding:10px 70px;

    transform:rotate(45deg);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

}

/* Add-On Services */

.addon-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:60px;

}

.addon-card{

    background:white;

    padding:30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.addon-card:hover{

    transform:translateY(-8px);

}

.addon-price{

    color:var(--primary);

    font-size:2rem;

    font-weight:700;

    margin:20px 0;

}

/* Quantity Table */

.quantity-table{

    width:100%;

    border-collapse:collapse;

    margin-top:50px;

}

.quantity-table th{

    background:var(--primary);

    color:white;

    padding:18px;

}

.quantity-table td{

    padding:18px;

    border:1px solid #ddd;

    text-align:center;

}

.quantity-table tr:nth-child(even){

    background:#f7fbff;

}

/* Feature Comparison */

.comparison-table{

    width:100%;

    border-collapse:collapse;

    margin-top:60px;

}

.comparison-table th{

    background:var(--primary);

    color:white;

    padding:20px;

}

.comparison-table td{

    padding:18px;

    border:1px solid #ddd;

    text-align:center;

}

.comparison-table tr:nth-child(even){

    background:#f9fcff;

}

/* Included */

.included{

    color:#33b249;

    font-weight:700;

}

/* Not Included */

.not-included{

    color:#d9534f;

    font-weight:700;

}

/* Callout Box */

.pricing-note{

    margin-top:60px;

    padding:35px;

    border-left:6px solid var(--primary);

    background:#eef7ff;

    border-radius:18px;

}

/* Discount Banner */

.discount-banner{

    margin-top:70px;

    padding:30px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #29c66f,
        #45d483
    );

    color:white;

    border-radius:18px;

    font-size:1.2rem;

    font-weight:600;

}

/* Square Payment */

.square-payment{

    margin-top:80px;

    background:white;

    border-radius:20px;

    padding:45px;

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

}

.square-payment h2{

    color:var(--primary);

}

.square-payment .btn{

    margin-top:25px;

}

/* FAQ */

.pricing-faq{

    margin-top:90px;

}

/* Responsive */

@media(max-width:900px){

.featured-plan{

transform:none;

}

.featured-plan:hover{

transform:none;

}

.price{

font-size:2.5rem;

}

.pricing-grid{

grid-template-columns:1fr;

}

.addon-grid{

grid-template-columns:1fr;

}

.quantity-table{

display:block;

overflow-x:auto;

}

.comparison-table{

display:block;

overflow-x:auto;

}

}

/* =====================================================
   STAGE 7
   ORDER FORM
===================================================== */

/* Order Page Hero */

#order-hero{
    padding:120px 0;
    text-align:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
}

#order-hero h1{
    font-size:3rem;
    margin-bottom:20px;
}

#order-hero p{
    max-width:850px;
    margin:auto;
    color:#fff;
}

/* Main Form */

.order-form{

    max-width:1200px;

    margin:70px auto;

    background:#fff;

    border-radius:24px;

    padding:50px;

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

/* Progress Bar */

.form-progress{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

    gap:15px;

}

.progress-step{

    flex:1;

    text-align:center;

    position:relative;

}

.progress-step::after{

    content:"";

    position:absolute;

    top:18px;

    left:55%;

    width:100%;

    height:4px;

    background:#d9e8ff;

    z-index:0;

}

.progress-step:last-child::after{

    display:none;

}

.progress-circle{

    width:38px;

    height:38px;

    border-radius:50%;

    margin:auto;

    background:#d9e8ff;

    color:#555;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    position:relative;

    z-index:2;

}

.progress-step.active .progress-circle{

    background:var(--primary);

    color:#fff;

}

.progress-step.active::after{

    background:var(--primary);

}

/* Form Sections */

.form-section{

    margin-bottom:60px;

}

.form-section h2{

    margin-bottom:25px;

    color:var(--primary);

    border-bottom:3px solid var(--primary-light);

    padding-bottom:10px;

}

/* Grid Layout */

.form-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}

/* Labels */

.order-form label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

/* Inputs */

.order-form input,
.order-form select,
.order-form textarea{

    width:100%;

    padding:16px;

    border:1px solid #cfd9ea;

    border-radius:12px;

    font-size:1rem;

    transition:.3s;

    background:#fff;

}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(31,115,232,.15);

}

textarea{

    min-height:140px;

    resize:vertical;

}

/* Checkbox Groups */

.checkbox-group{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:12px;

}

.checkbox-group label{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    border:1px solid #dfe8f8;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.checkbox-group label:hover{

    background:#eef6ff;

}

/* Radio Cards */

.radio-card{

    border:2px solid #dfe8f8;

    padding:18px;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

}

.radio-card:hover{

    border-color:var(--primary);

    background:#f4f9ff;

}

/* Color Picker */

.color-picker-group{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.color-picker-group input[type=color]{

    width:100%;

    height:65px;

    padding:6px;

    cursor:pointer;

}

/* Upload Area */

.upload-area{

    border:3px dashed var(--primary-light);

    border-radius:20px;

    padding:45px;

    text-align:center;

    background:#f7fbff;

    transition:.3s;

}

.upload-area:hover{

    background:#eef6ff;

}

/* Signature Pad */

.signature-container{

    border:2px solid #d9e8ff;

    border-radius:18px;

    padding:20px;

    background:#fff;

}

.signature-pad{

    width:100%;

    height:220px;

    border:1px solid #cfd9ea;

    border-radius:12px;

    background:#fff;

    cursor:crosshair;

}

/* Employee Cards */

.employee-card{

    background:#f8fbff;

    border:1px solid #d9e8ff;

    border-radius:18px;

    padding:25px;

    margin-top:20px;

}

/* Deadline Banner */

.deadline-banner{

    background:#eef6ff;

    border-left:6px solid var(--primary);

    padding:22px;

    border-radius:14px;

    margin:30px 0;

}

/* Success */

.success-message{

    padding:20px;

    background:#eaf9ef;

    color:#2d8b42;

    border-radius:12px;

    border-left:5px solid #35b34a;

}

/* Error */

.error-message{

    padding:20px;

    background:#fff2f2;

    color:#d64040;

    border-radius:12px;

    border-left:5px solid #d64040;

}

/* Required Field */

.required{

    color:#d64040;

}

/* Submit Buttons */

.form-actions{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

    margin-top:50px;

}

.form-actions .btn{

    min-width:220px;

}

/* Service Cards */

.service-selection{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.service-option{

    border:2px solid #dfe8f8;

    border-radius:18px;

    padding:25px;

    cursor:pointer;

    transition:.3s;

}

.service-option:hover{

    border-color:var(--primary);

    transform:translateY(-6px);

}

.service-option.selected{

    border-color:var(--primary);

    background:#eef6ff;

}

/* Responsive */

@media(max-width:900px){

.order-form{

padding:30px;

}

.form-progress{

flex-direction:column;

}

.progress-step::after{

display:none;

}

.form-grid{

grid-template-columns:1fr;

}

.checkbox-group{

grid-template-columns:1fr;

}

.color-picker-group{

grid-template-columns:1fr;

}

.service-selection{

grid-template-columns:1fr;

}

.form-actions{

flex-direction:column;

}

.form-actions .btn{

width:100%;

}

}

/* =====================================================
   STAGE 8
   PORTFOLIO • CONTACT • POLICIES • UTILITIES
===================================================== */

/* ==========================================
   PORTFOLIO PAGE
========================================== */

#portfolio-hero{
    padding:120px 0;
    text-align:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
}

.portfolio-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin:50px 0;
}

.filter-btn{
    padding:14px 28px;
    border:none;
    border-radius:50px;
    background:#eef6ff;
    cursor:pointer;
    transition:.3s;
    font-weight:600;
}

.filter-btn:hover,
.filter-btn.active{
    background:var(--primary);
    color:#fff;
}

.portfolio-gallery{

    column-count:3;

    column-gap:25px;

    margin-top:50px;

}

.portfolio-item{

    display:inline-block;

    width:100%;

    margin-bottom:25px;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.portfolio-item img{

    width:100%;

    display:block;

    transition:.45s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:rgba(31,115,232,.82);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    opacity:0;

    transition:.35s;

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

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

.contact-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

    margin-top:60px;

}

.contact-form{

    background:#fff;

    padding:45px;

    border-radius:22px;

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

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    margin-bottom:22px;

    padding:16px;

    border:1px solid #d9e8ff;

    border-radius:12px;

}

.contact-info{

    background:#f8fbff;

    padding:35px;

    border-radius:20px;

    border:1px solid #dbe9ff;

}

.contact-info h3{

    color:var(--primary);

    margin-bottom:25px;

}

.contact-info p{

    margin-bottom:18px;

}

/* ==========================================
   POLICY PAGE
========================================== */

.policy-section{

    margin:70px 0;

}

.policy-card{

    background:white;

    border-left:6px solid var(--primary);

    padding:35px;

    border-radius:18px;

    margin-bottom:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.policy-card h2{

    color:var(--primary);

    margin-bottom:20px;

}

/* ==========================================
   PROCESS TIMELINE
========================================== */

.timeline{

    position:relative;

    max-width:1100px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:5px;

    background:var(--primary-light);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px 50px;

}

.timeline-item:nth-child(odd){

    left:0;

}

.timeline-item:nth-child(even){

    left:50%;

}

.timeline-dot{

    position:absolute;

    top:40px;

    right:-18px;

    width:32px;

    height:32px;

    background:var(--primary);

    border-radius:50%;

}

.timeline-item:nth-child(even) .timeline-dot{

    left:-16px;

}

/* ==========================================
   TOAST NOTIFICATIONS
========================================== */

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    background:#222;

    color:white;

    padding:18px 28px;

    border-radius:14px;

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

    opacity:0;

    transform:translateY(40px);

    transition:.35s;

    z-index:4000;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   LOADING SPINNER
========================================== */

.spinner{

    width:60px;

    height:60px;

    border:6px solid #dce8ff;

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/* ==========================================
   COOKIE NOTICE
========================================== */

.cookie-banner{

    position:fixed;

    left:20px;

    right:20px;

    bottom:20px;

    background:#fff;

    padding:25px;

    border-radius:18px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    z-index:5000;

}

.cookie-buttons{

    display:flex;

    gap:15px;

}

/* ==========================================
   STATUS BADGES
========================================== */

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:700;

}

.status.success{

    background:#dff6e7;

    color:#2d8b42;

}

.status.pending{

    background:#fff6d8;

    color:#a96a00;

}

.status.error{

    background:#ffe1e1;

    color:#c62828;

}

/* ==========================================
   PRINT STYLES
========================================== */

@media print{

nav,
footer,
.btn,
#backToTop,
.cookie-banner{

display:none !important;

}

body{

background:white;

color:black;

}

a{

text-decoration:none;

color:black;

}

}

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

@media(max-width:992px){

.portfolio-gallery{

column-count:2;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

left:0 !important;

padding-left:70px;

padding-right:20px;

}

.timeline-dot{

left:10px !important;

right:auto;

}

.cookie-banner{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:600px){

.portfolio-gallery{

column-count:1;

}

.portfolio-filter{

flex-direction:column;

align-items:center;

}

.filter-btn{

width:250px;

}

}

/* =====================================================
   STAGE 9
   PREMIUM EFFECTS & MICRO-INTERACTIONS
===================================================== */

/* ==========================================
   MOUSE GLOW EFFECT
========================================== */

.mouse-glow{

    position:fixed;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(31,115,232,.18),
        rgba(31,115,232,0)
    );

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:0;

    transition:
        left .08s linear,
        top .08s linear;

}

/* ==========================================
   FLOATING BACKGROUND BLOBS
========================================== */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.22;

    animation:blobFloat 20s ease-in-out infinite;

}

.blob.one{

    width:450px;

    height:450px;

    background:#1F73E8;

    top:-120px;

    left:-120px;

}

.blob.two{

    width:350px;

    height:350px;

    background:#66B3FF;

    bottom:-80px;

    right:-80px;

    animation-delay:6s;

}

@keyframes blobFloat{

0%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(-45px) scale(1.08);

}

100%{

transform:translateY(0) scale(1);

}

}

/* ==========================================
   CARD HOVER GLOW
========================================== */

.card-premium{

    transition:.4s;

    border:1px solid transparent;

}

.card-premium:hover{

    transform:translateY(-12px);

    border-color:rgba(31,115,232,.25);

    box-shadow:
        0 25px 60px rgba(0,0,0,.12),
        0 0 30px rgba(31,115,232,.18);

}

/* ==========================================
   IMAGE LIGHTBOX
========================================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:92%;

    max-height:92%;

    border-radius:18px;

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

}

/* ==========================================
   HERO TEXT ANIMATION
========================================== */

.hero-title{

    animation:heroFade .9s ease;

}

.hero-subtitle{

    animation:heroFade 1.4s ease;

}

.hero-buttons{

    animation:heroFade 1.8s ease;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
   PULSE BUTTON
========================================== */

.btn-pulse{

    position:relative;

}

.btn-pulse::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:2px solid var(--primary);

    animation:pulseRing 2s infinite;

}

@keyframes pulseRing{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(1.6);

opacity:0;

}

}

/* ==========================================
   ICON SPIN
========================================== */

.icon-spin:hover{

    transform:rotate(360deg);

    transition:.7s;

}

/* ==========================================
   FEATURE TAGS
========================================== */

.tag{

    display:inline-block;

    padding:7px 16px;

    border-radius:999px;

    background:#eef7ff;

    color:var(--primary);

    margin:5px;

    font-size:.85rem;

    font-weight:600;

}

/* ==========================================
   DASHBOARD CARDS
========================================== */

.dashboard-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.dashboard-card h3{

    color:var(--primary);

}

/* ==========================================
   ALERTS
========================================== */

.alert{

    padding:18px 24px;

    border-radius:14px;

    margin:20px 0;

}

.alert-info{

    background:#eef7ff;

    color:#155bc0;

}

.alert-success{

    background:#eaf8ee;

    color:#2b8d42;

}

.alert-warning{

    background:#fff8df;

    color:#9b6a00;

}

.alert-danger{

    background:#ffeaea;

    color:#b82727;

}

/* ==========================================
   LOADING BAR
========================================== */

.loading-bar{

    width:100%;

    height:8px;

    border-radius:999px;

    overflow:hidden;

    background:#dce8ff;

}

.loading-bar span{

    display:block;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    animation:loadingBar 2.2s infinite;

}

@keyframes loadingBar{

0%{

width:0;

}

50%{

width:75%;

}

100%{

width:100%;

}

}

/* ==========================================
   RIPPLE EFFECT
========================================== */

.ripple{

    overflow:hidden;

    position:relative;

}

.ripple::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

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

    border-radius:50%;

    transform:scale(1);

    opacity:0;

}

.ripple:active::after{

    animation:ripple .5s;

}

@keyframes ripple{

from{

transform:scale(1);

opacity:.6;

}

to{

transform:scale(30);

opacity:0;

}

}

/* ==========================================
   PREMIUM INPUTS
========================================== */

.input-group{

    position:relative;

}

.input-group input{

    padding-left:50px;

}

.input-group i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--primary);

}

/* ==========================================
   DIVIDER
========================================== */

.gradient-divider{

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

    margin:70px 0;

}

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

@media(max-width:768px){

.mouse-glow,
.blob{

display:none;

}

.hero-title{

font-size:2.4rem;

}

.dashboard-card{

padding:22px;

}

}

/* =====================================================
   STAGE 10
   FINAL UTILITIES • ACCESSIBILITY • PRODUCTION
===================================================== */

/* ==========================================
   ACCESSIBILITY
========================================== */

:focus-visible{
    outline:3px solid var(--primary-light);
    outline-offset:3px;
    border-radius:6px;
}

html{
    scroll-padding-top:100px;
}

::selection{
    background:var(--primary);
    color:#fff;
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce){

*{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}

}

/* ==========================================
   IMAGE UTILITIES
========================================== */

.img-cover{
width:100%;
height:100%;
object-fit:cover;
}

.img-contain{
width:100%;
height:100%;
object-fit:contain;
}

.img-rounded{
border-radius:18px;
}

.img-circle{
border-radius:50%;
}

/* ==========================================
   FLEX UTILITIES
========================================== */

.flex{
display:flex;
}

.flex-center{
display:flex;
justify-content:center;
align-items:center;
}

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

.flex-column{
display:flex;
flex-direction:column;
}

/* ==========================================
   GRID UTILITIES
========================================== */

.grid{
display:grid;
gap:25px;
}

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

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

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

/* ==========================================
   WIDTH UTILITIES
========================================== */

.w-25{width:25%;}
.w-33{width:33.333%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

.max-600{max-width:600px;}
.max-800{max-width:800px;}
.max-1000{max-width:1000px;}
.max-1200{max-width:1200px;margin:auto;}

/* ==========================================
   SPACING UTILITIES
========================================== */

.p-1{padding:1rem;}
.p-2{padding:2rem;}
.p-3{padding:3rem;}
.p-4{padding:4rem;}

.pt-5{padding-top:5rem;}
.pb-5{padding-bottom:5rem;}

.m-auto{margin:auto;}
.mx-auto{
margin-left:auto;
margin-right:auto;
}

.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}

/* ==========================================
   BORDER UTILITIES
========================================== */

.border{
border:1px solid #ddd;
}

.border-primary{
border:2px solid var(--primary);
}

.rounded-sm{
border-radius:8px;
}

.rounded-md{
border-radius:16px;
}

.rounded-lg{
border-radius:30px;
}

/* ==========================================
   BACKGROUND HELPERS
========================================== */

.bg-primary{
background:var(--primary);
color:white;
}

.bg-light{
background:#f8fbff;
}

.bg-white{
background:white;
}

.bg-gradient{
background:linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);
color:white;
}

/* ==========================================
   TEXT HELPERS
========================================== */

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

.text-light{
color:#666;
}

.text-white{
color:white;
}

.text-bold{
font-weight:700;
}

.text-uppercase{
text-transform:uppercase;
letter-spacing:1px;
}

/* ==========================================
   OPACITY
========================================== */

.opacity-25{opacity:.25;}
.opacity-50{opacity:.5;}
.opacity-75{opacity:.75;}
.opacity-100{opacity:1;}

/* ==========================================
   CURSORS
========================================== */

.cursor-pointer{
cursor:pointer;
}

.cursor-default{
cursor:default;
}

/* ==========================================
   TRANSITIONS
========================================== */

.transition{
transition:.35s ease;
}

.transition-fast{
transition:.2s ease;
}

.transition-slow{
transition:.6s ease;
}

/* ==========================================
   ANIMATION UTILITIES
========================================== */

.fade-up{
animation:fadeUp .8s ease;
}

.fade-down{
animation:fadeDown .8s ease;
}

.zoom-in{
animation:zoomIn .7s ease;
}

.slide-left{
animation:slideLeft .8s ease;
}

.slide-right{
animation:slideRight .8s ease;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:none;
}

}

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-40px);
}

to{
opacity:1;
transform:none;
}

}

@keyframes zoomIn{

from{
opacity:0;
transform:scale(.85);
}

to{
opacity:1;
transform:scale(1);
}

}

@keyframes slideLeft{

from{
opacity:0;
transform:translateX(-60px);
}

to{
opacity:1;
transform:none;
}

}

@keyframes slideRight{

from{
opacity:0;
transform:translateX(60px);
}

to{
opacity:1;
transform:none;
}

}

/* ==========================================
   DARK MODE FOUNDATION
========================================== */

body.dark-mode{

background:#121212;
color:#f3f3f3;

}

body.dark-mode .card,
body.dark-mode .pricing-card,
body.dark-mode .service-card,
body.dark-mode .glass-card{

background:#1d1d1d;
color:white;

}

body.dark-mode a{

color:#fff;

}

/* ==========================================
   LARGE SCREEN OPTIMIZATION
========================================== */

@media(min-width:1600px){

.container{

max-width:1500px;

}

.hero-content{

max-width:1100px;

}

}

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

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.flex-between{

flex-direction:column;

gap:20px;

}

.w-25,
.w-33,
.w-50,
.w-75{

width:100%;

}

h1{

font-size:2.3rem;

}

h2{

font-size:1.9rem;

}

.section{

padding:70px 0;

}

}

/* =====================================================
   STAGE 11
   ADVANCED NAVIGATION & PAGE COMPONENTS
   The Creative Studio
===================================================== */

/* ==========================================
   MEGA MENU
========================================== */

.mega-menu{
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    background:#fff;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    border-radius:0 0 20px 20px;
    display:none;
    padding:45px;
    z-index:1000;
}

.dropdown:hover .mega-menu{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.mega-column h3{
    color:var(--primary);
    margin-bottom:15px;
}

.mega-column a{
    display:block;
    padding:8px 0;
    color:#555;
    transition:.3s;
}

.mega-column a:hover{
    color:var(--primary);
    padding-left:10px;
}

/* ==========================================
   STICKY NAVIGATION EFFECT
========================================== */

.site-header.scrolled{
    padding:4px 0;
    background:rgba(255,255,255,.97);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

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

.page-banner{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:140px 20px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

}

.page-banner h1{

    font-size:3.5rem;

}

.page-banner p{

    max-width:850px;

    margin:25px auto 0;

    color:white;

}

/* ==========================================
   BREADCRUMBS
========================================== */

.breadcrumb{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:20px;

    flex-wrap:wrap;

}

.breadcrumb a{

    color:white;

    opacity:.85;

}

.breadcrumb a:hover{

    opacity:1;

}

.breadcrumb span{

    opacity:.65;

}

/* ==========================================
   PAGE TITLE DECORATION
========================================== */

.title-decoration{

    width:120px;

    height:6px;

    border-radius:50px;

    margin:25px auto;

    background:linear-gradient(
        90deg,
        white,
        rgba(255,255,255,.25)
    );

}

/* ==========================================
   SEARCH BAR
========================================== */

.search-wrapper{

    position:relative;

    max-width:700px;

    margin:50px auto;

}

.search-wrapper input{

    width:100%;

    padding:20px 70px 20px 25px;

    border:none;

    border-radius:50px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.search-wrapper button{

    position:absolute;

    right:8px;

    top:8px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

}

/* ==========================================
   ANNOUNCEMENT BAR
========================================== */

.announcement{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    text-align:center;

    padding:12px;

    font-weight:600;

}

/* ==========================================
   FEATURE ICON BOXES
========================================== */

.feature-boxes{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.feature-box{

    background:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-10px);

}

.feature-box i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

}

/* ==========================================
   STAT BOXES
========================================== */

.stat-box{

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.stat-box h2{

    color:var(--primary);

    font-size:3rem;

}

.stat-box p{

    margin-top:12px;

}

/* ==========================================
   IMAGE FRAMES
========================================== */

.image-frame{

    padding:12px;

    background:white;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.image-frame img{

    border-radius:14px;

}

/* ==========================================
   DIVIDER
========================================== */

.section-break{

    width:100%;

    height:2px;

    margin:90px 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(31,115,232,.5),
        transparent
    );

}

/* ==========================================
   PAGE TRANSITION
========================================== */

.page-fade{

    animation:pageFade .6s ease;

}

@keyframes pageFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

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

@media(max-width:992px){

.mega-menu{

display:block;

padding:25px;

}

.page-banner h1{

font-size:2.5rem;

}

.search-wrapper{

margin-top:30px;

}

}

@media(max-width:768px){

.feature-boxes{

grid-template-columns:1fr;

}

.search-wrapper input{

padding:18px;

}

.search-wrapper button{

display:none;

}

.breadcrumb{

font-size:.9rem;

}

}

/* =====================================================
   STAGE 12
   CUSTOMER PORTAL • ORDER TRACKING • PAYMENT
   The Creative Studio
===================================================== */

/* ==========================================
   CUSTOMER DASHBOARD
========================================== */

.customer-dashboard{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:35px;
    margin:60px 0;
}

.dashboard-sidebar{
    background:#ffffff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    position:sticky;
    top:110px;
}

.dashboard-sidebar h3{
    color:var(--primary);
    margin-bottom:25px;
}

.dashboard-sidebar ul{
    display:grid;
    gap:10px;
}

.dashboard-sidebar a{
    display:block;
    padding:14px 18px;
    border-radius:12px;
    transition:.3s;
}

.dashboard-sidebar a:hover,
.dashboard-sidebar a.active{
    background:var(--primary);
    color:white;
}

.dashboard-content{
    display:grid;
    gap:30px;
}

/* ==========================================
   PROJECT STATUS CARDS
========================================== */

.project-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.3s;
}

.project-card:hover{
    transform:translateY(-6px);
}

.project-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.project-title{
    color:var(--primary);
    font-size:1.5rem;
}

.project-number{
    font-size:.9rem;
    color:#888;
}

/* ==========================================
   PROGRESS BAR
========================================== */

.progress-container{
    width:100%;
    height:18px;
    background:#e8eef9;
    border-radius:999px;
    overflow:hidden;
    margin:25px 0;
}

.progress-fill{
    height:100%;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );
    width:0%;
    transition:width .8s ease;
}

/* ==========================================
   PROJECT TIMELINE
========================================== */

.order-timeline{
    position:relative;
    margin-top:40px;
}

.order-timeline::before{
    content:"";
    position:absolute;
    left:22px;
    top:0;
    bottom:0;
    width:4px;
    background:#d9e7fb;
}

.timeline-step{
    position:relative;
    padding-left:70px;
    margin-bottom:40px;
}

.timeline-step::before{
    content:"";
    position:absolute;
    left:10px;
    top:0;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#d9e7fb;
}

.timeline-step.complete::before{
    background:#34b233;
}

.timeline-step.current::before{
    background:var(--primary);
}

.timeline-step h4{
    color:var(--primary);
    margin-bottom:8px;
}

/* ==========================================
   QUOTE SUMMARY
========================================== */

.quote-summary{
    background:#f7fbff;
    border:2px solid #dce9ff;
    border-radius:20px;
    padding:35px;
}

.quote-summary h2{
    color:var(--primary);
    margin-bottom:25px;
}

.quote-row{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid #e6eef9;
}

.quote-total{
    font-size:1.6rem;
    font-weight:700;
    color:var(--primary);
    margin-top:25px;
}

/* ==========================================
   INVOICE TABLE
========================================== */

.invoice-table{
    width:100%;
    border-collapse:collapse;
    margin-top:30px;
}

.invoice-table th{
    background:var(--primary);
    color:white;
    padding:18px;
}

.invoice-table td{
    padding:18px;
    border:1px solid #e2e2e2;
}

.invoice-table tr:nth-child(even){
    background:#f8fbff;
}

/* ==========================================
   PAYMENT CARD
========================================== */

.payment-card{
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.payment-card h3{
    color:var(--primary);
}

.payment-methods{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:25px;
}

.payment-method{
    flex:1;
    min-width:180px;
    border:2px solid #d9e7fb;
    border-radius:16px;
    padding:20px;
    text-align:center;
    cursor:pointer;
    transition:.3s;
}

.payment-method:hover,
.payment-method.selected{
    border-color:var(--primary);
    background:#eef7ff;
}

/* ==========================================
   SQUARE PAYMENT
========================================== */

.square-checkout{
    background:linear-gradient(
        135deg,
        #eef7ff,
        white
    );
    padding:40px;
    border-radius:20px;
    border:2px solid #d9e7fb;
    text-align:center;
}

.square-logo{
    width:160px;
    margin:0 auto 25px;
}

.square-checkout .btn{
    margin-top:25px;
}

/* ==========================================
   ORDER REVIEW
========================================== */

.review-card{
    background:white;
    border-radius:20px;
    padding:30px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.review-stars{
    color:#f7b500;
    font-size:1.3rem;
    margin-bottom:20px;
}

/* ==========================================
   DOWNLOAD BOXES
========================================== */

.download-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#f8fbff;
    padding:25px;
    border-radius:18px;
    margin-top:20px;
    border:1px solid #dce9ff;
}

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

@media(max-width:992px){

.customer-dashboard{
    grid-template-columns:1fr;
}

.dashboard-sidebar{
    position:relative;
    top:0;
}

.project-header{
    flex-direction:column;
    align-items:flex-start;
}

.quote-row{
    flex-direction:column;
    gap:6px;
}

.payment-methods{
    flex-direction:column;
}

.download-box{
    flex-direction:column;
    text-align:center;
}

}

/* ==========================================
   END OF STYLESHEET
   THE CREATIVE STUDIO
===================================================== */

/* ==========================================
   CROSS-BROWSER CONSISTENCY
   Safari • Chrome • Edge • Firefox • Opera
   iOS • iPadOS • Android
========================================== */

/*
   Normalize browser defaults without changing the intended design.
   These rules are deliberately placed at the end of the master
   stylesheet so that supported browsers receive consistent sizing,
   typography, controls, sticky-header behavior, and motion behavior.
*/

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    color-scheme: light;
    scrollbar-color: var(--primary) #eef5ff;
    scrollbar-width: auto;
}

body {
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: 1.5;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input[type="checkbox"],
input[type="radio"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
input[type="month"],
input[type="range"],
input[type="time"],
input[type="week"],
select {
    -webkit-appearance: auto;
    appearance: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::placeholder {
    color: #7a7a7a;
    opacity: 1;
}

a,
button,
input,
select,
textarea,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
[role="button"] {
    touch-action: manipulation;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .7;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

svg:not(:root) {
    overflow: hidden;
}

table {
    border-spacing: 0;
}

.container {
    width: 92%;
    max-width: var(--max-width);
}

.navbar {
    width: 95%;
    max-width: 1400px;
}

@supports (width: min(92%, 1280px)) {
    .container {
        width: min(92%, var(--max-width));
        max-width: none;
    }

    .navbar {
        width: min(95%, 1400px);
        max-width: none;
    }
}

.site-header {
    position: -webkit-sticky;
    position: sticky;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.glass-card {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header {
        background: rgba(255, 255, 255, .98);
    }

    .glass-card {
        background: rgba(255, 255, 255, .94);
    }
}

.gradient-text {
    color: var(--primary);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-text {
        color: transparent;
    }
}

#hero {
    min-height: 92vh;
}

@supports (height: 100svh) {
    #hero {
        min-height: 92svh;
    }
}

/* Prevent grid and flex children from forcing horizontal overflow. */
.about-grid > *,
.services-grid > *,
.why-grid > *,
.stats-grid > *,
.process-grid > *,
.portfolio-grid > *,
.hours-grid > *,
.footer-grid > *,
.pricing-grid > *,
.addon-grid > *,
.form-grid > *,
.checkbox-group > *,
.color-picker-group > *,
.service-selection > *,
.contact-grid > *,
.customer-dashboard > * {
    min-width: 0;
}

.btn {
    line-height: 1.2;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}

.faq-question {
    -webkit-appearance: none;
    appearance: none;
}

.modal-content,
.nav-links,
.dropdown-menu {
    -webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
    .parallax {
        background-attachment: scroll;
    }
}

@media (hover: none) {
    .about-card:hover,
    .service-card:hover,
    .why-card:hover,
    .process-step:hover,
    .portfolio-card:hover,
    .hours-card:hover,
    .pricing-card:hover,
    .addon-card:hover,
    .service-option:hover,
    .social-btn:hover,
    .hover-lift:hover {
        transform: none;
    }

    .portfolio-card:hover img,
    .image-overlay:hover img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

@media print {
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* END CROSS-BROWSER CONSISTENCY */

/* ==========================================
   SITEWIDE HEADER AND NAVIGATION
   Matched to the working portfolio header
   Safari • Chrome • Edge • Firefox • Opera
   iOS • iPadOS • Android
========================================== */

/*
   This final block intentionally uses header-scoped selectors so that
   page-specific styles cannot distort the primary navigation. It matches
   the navigation presentation used by portfolio.html while preserving
   the existing site colors, HTML, dropdown links, and JavaScript classes.
*/

/* ---------- Header shell ---------- */

.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e6eef9;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-header.scrolled {
    padding: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* ---------- Main navigation layout ---------- */

.site-header .navbar {
    position: relative;
    display: flex;
    width: 95%;
    max-width: 1400px;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 auto;
    padding: 14px 0;
}

@supports (width: min(95%, 1400px)) {
    .site-header .navbar {
        width: min(95%, 1400px);
        max-width: none;
    }
}

/* ---------- Brand ---------- */

.site-header .brand {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    color: var(--dark);
    text-decoration: none;
}

.site-header .brand img {
    display: block;
    width: auto;
    height: 64px;
    max-width: 94px;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-header .brand > div {
    min-width: 0;
}

.site-header .brand h1 {
    margin: 0;
    color: var(--dark);
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.12rem, 1.45vw, 1.55rem);
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
}

.site-header .brand p {
    margin: 4px 0 0;
    color: #566273;
    font-size: clamp(.68rem, .82vw, .79rem);
    font-weight: 500;
    line-height: 1.28;
}

/* ---------- Desktop links ---------- */

.site-header .nav-links {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(3px, .6vw, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .nav-links > li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .nav-links > li > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px clamp(8px, .8vw, 13px);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #172033;
    font-family: "Inter", sans-serif;
    font-size: clamp(.82rem, .82vw, .95rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.site-header .nav-links > li > a:hover,
.site-header .nav-links > li > a:focus-visible {
    border-color: #cfe0f8;
    background: #eef6ff;
    color: var(--primary);
    outline: none;
}

.site-header .nav-links > li > a:focus-visible {
    box-shadow: 0 0 0 4px rgba(31, 115, 232, .14);
}

.site-header .nav-links > li > a.active:not(.button-link),
.site-header .nav-links > li > a[aria-current="page"]:not(.button-link) {
    border-color: #cfe0f8;
    background: #eef6ff;
    color: var(--primary);
}

/* ---------- Start Your Project button ---------- */

.site-header .nav-links .button-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(31, 115, 232, .17);
}

.site-header .nav-links .button-link:hover,
.site-header .nav-links .button-link:focus-visible,
.site-header .nav-links .button-link.active,
.site-header .nav-links .button-link[aria-current="page"] {
    border-color: #1764cc;
    background: #1764cc;
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Services dropdown ---------- */

.site-header .dropdown {
    position: relative;
}

.site-header .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1200;
    display: block;
    width: max-content;
    min-width: 240px;
    max-width: min(320px, 90vw);
    margin: 0;
    padding: 8px;
    border: 1px solid #dbe9ff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 38, 75, .16);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.site-header .dropdown:hover > .dropdown-menu,
.site-header .dropdown:focus-within > .dropdown-menu,
.site-header .dropdown.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.site-header .dropdown-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-header .dropdown-menu a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    color: #344054;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.site-header .dropdown-menu a:hover,
.site-header .dropdown-menu a:focus-visible {
    background: #eef6ff;
    color: var(--primary);
    outline: none;
}

/* ---------- Mobile-menu button ---------- */

#mobileMenuBtn,
#mobileMenuButton {
    display: none;
}

/* ---------- Compact desktop widths ---------- */

@media (min-width: 901px) and (max-width: 1120px) {
    .site-header .navbar {
        gap: 10px;
    }

    .site-header .brand {
        gap: 9px;
    }

    .site-header .brand img {
        height: 54px;
        max-width: 75px;
    }

    .site-header .brand h1 {
        font-size: 1rem;
    }

    .site-header .brand p {
        font-size: .62rem;
    }

    .site-header .nav-links {
        gap: 2px;
    }

    .site-header .nav-links > li > a {
        padding-right: 7px;
        padding-left: 7px;
        font-size: .78rem;
    }

    .site-header .nav-links .button-link {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* ---------- Mobile and tablet navigation ---------- */

@media (max-width: 900px) {
    .site-header .navbar {
        min-height: 78px;
        gap: 14px;
        padding: 10px 0;
    }

    .site-header .brand {
        max-width: calc(100% - 62px);
    }

    .site-header .brand img {
        height: 54px;
        max-width: 75px;
    }

    .site-header .brand h1 {
        overflow: hidden;
        font-size: clamp(.98rem, 4vw, 1.2rem);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-header .brand p {
        overflow: hidden;
        max-width: 260px;
        font-size: .66rem;
        text-overflow: ellipsis;
    }

    #mobileMenuBtn,
    #mobileMenuButton {
        display: inline-flex;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #d7e4f7;
        border-radius: 12px;
        background: #fff;
        color: var(--primary);
        box-shadow: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 1.55rem;
        line-height: 1;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }

    #mobileMenuBtn:hover,
    #mobileMenuBtn:focus-visible,
    #mobileMenuButton:hover,
    #mobileMenuButton:focus-visible,
    #mobileMenuBtn.active,
    #mobileMenuButton.active {
        border-color: var(--primary);
        background: #eef6ff;
        color: var(--primary);
        outline: none;
    }

    .site-header .nav-links {
        display: none;
    }

    .site-header .nav-links.active {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1100;
        display: flex;
        max-height: calc(100vh - 78px);
        max-height: calc(100dvh - 78px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        padding: 14px;
        border: 1px solid #dbe9ff;
        border-top: 0;
        border-radius: 0 0 16px 16px;
        background: rgba(255, 255, 255, .99);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .12);
        -webkit-overflow-scrolling: touch;
    }

    .site-header .nav-links.active > li,
    .site-header .nav-links.active > li > a {
        width: 100%;
    }

    .site-header .nav-links.active > li > a {
        display: flex;
        min-height: 46px;
        justify-content: flex-start;
        padding: 11px 13px;
        border-radius: 10px;
        font-size: .95rem;
        text-align: left;
        white-space: normal;
    }

    .site-header .nav-links.active .button-link {
        justify-content: center;
        border-radius: 10px;
        color: #fff;
        text-align: center;
    }

    .site-header .nav-links.active .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 5px 0 2px;
        padding: 6px;
        border-radius: 10px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .site-header .nav-links.active .dropdown.open > .dropdown-menu,
    .site-header .nav-links.active .dropdown:focus-within > .dropdown-menu,
    .site-header .nav-links.active .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .site-header .nav-links.active .dropdown-menu a {
        padding: 10px 12px 10px 20px;
        white-space: normal;
    }
}

@media (max-width: 520px) {
    .site-header .navbar {
        width: 94%;
    }

    .site-header .brand {
        gap: 8px;
    }

    .site-header .brand img {
        height: 48px;
        max-width: 64px;
    }

    .site-header .brand h1 {
        font-size: .94rem;
    }

    .site-header .brand p {
        max-width: 190px;
        font-size: .58rem;
        line-height: 1.2;
    }
}

/* ---------- Browser fallback ---------- */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header {
        background: rgba(255, 255, 255, .99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .nav-links > li > a,
    .site-header .dropdown-menu,
    #mobileMenuBtn,
    #mobileMenuButton {
        transition: none !important;
    }
}

/* END SITEWIDE HEADER AND NAVIGATION */