/*======================================================
CLOUDBRIDGE TECHNOLOGIES
Premium Cloud Consulting Website
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --primary:#0ea5e9;
    --secondary:#2563eb;
    --accent:#38bdf8;
    --dark:#020617;
    --dark2:#071426;
    --card:#0f172a;
    --white:#ffffff;
    --gray:#94a3b8;
    --shadow:0 20px 45px rgba(0,0,0,.35);
    --radius:18px;
}

/*==========================
RESET
==========================*/
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Poppins',sans-serif;
    background:var(--dark);
    color:white;
    overflow-x:hidden;
    line-height:1.7;
}

/*==========================
SCROLLBAR
==========================*/
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#08111f; }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#38bdf8,#2563eb);
    border-radius:50px;
}

/*==========================
LINKS / GLOBAL
==========================*/
a{ text-decoration:none; color:white; transition:.35s; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.sectionTitle{
    text-align:center;
    max-width:720px;
    margin:0 auto 60px;
    padding:0 20px;
}
.sectionTitle span{
    color:var(--accent);
    font-weight:600;
    letter-spacing:3px;
    font-size:13px;
}
.sectionTitle h2{
    font-size:42px;
    font-weight:700;
    margin:14px 0 18px;
}
.sectionTitle p{ color:var(--gray); font-size:16px; }

section{ padding:120px 8%; position:relative; }

/*==========================
AWS-STYLE ICON SET
(original line-art icons designed for this site — not the
official AWS Architecture Icons. See setup note for how to
swap in the official set.)
==========================*/
.awsIcon{
    display:inline-block;
    width:46px;
    height:46px;
    background-color:var(--accent);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}
.badge .awsIcon{ width:20px; height:20px; }
.tech .awsIcon{ width:38px; height:38px; margin:0 auto 14px; background-color:var(--accent); }

.awsIcon-mark{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 16a4 4 0 0 1 .6-7.96A5.5 5.5 0 0 1 18 10a3.5 3.5 0 0 1-.5 6.98z'/%3E%3Cpath d='M4 19c3 1.6 6 1.8 8.5.2M11.5 19.2c2.5 1.6 5.5 1.4 8.5-.2' stroke='%23020617' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 16a4 4 0 0 1 .6-7.96A5.5 5.5 0 0 1 18 10a3.5 3.5 0 0 1-.5 6.98z'/%3E%3C/svg%3E");
}
.awsIcon-architecture{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='6' height='6' rx='1'/%3E%3Crect x='16' y='3' width='6' height='6' rx='1'/%3E%3Crect x='9' y='15' width='6' height='6' rx='1'/%3E%3Cpath d='M5 9v3a3 3 0 0 0 3 3h1M19 9v3a3 3 0 0 1-3 3h-1' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='6' height='6' rx='1'/%3E%3Crect x='16' y='3' width='6' height='6' rx='1'/%3E%3Crect x='9' y='15' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}
.awsIcon-iam{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z'/%3E%3Ccircle cx='12' cy='11' r='2.1' fill='%23000'/%3E%3Crect x='11.1' y='12.5' width='1.8' height='4' fill='%23000'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z'/%3E%3C/svg%3E");
}
.awsIcon-vpc{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M7 9v6M17 9v6M9 7h6M9 17h6' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3'/%3E%3C/svg%3E");
}
.awsIcon-cloudfront{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.awsIcon-ec2{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.4'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.4'/%3E%3Ccircle cx='6.5' cy='7' r='1' fill='%23000'/%3E%3Ccircle cx='6.5' cy='17' r='1' fill='%23000'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.4'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.4'/%3E%3C/svg%3E");
}
.awsIcon-rds{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3C/svg%3E");
}
.awsIcon-ecs{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='9' height='9' rx='1.4'/%3E%3Crect x='13' y='2' width='9' height='9' rx='1.4'/%3E%3Crect x='2' y='13' width='9' height='9' rx='1.4'/%3E%3Crect x='13' y='13' width='9' height='9' rx='1.4'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='9' height='9' rx='1.4'/%3E%3Crect x='13' y='2' width='9' height='9' rx='1.4'/%3E%3Crect x='2' y='13' width='9' height='9' rx='1.4'/%3E%3Crect x='13' y='13' width='9' height='9' rx='1.4'/%3E%3C/svg%3E");
}
.awsIcon-eks{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z'/%3E%3Ccircle cx='12' cy='12' r='3.4' fill='%23000'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z'/%3E%3C/svg%3E");
}
.awsIcon-route53{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7'/%3E%3Cpath d='M12 22c3-4 3-9 0-13' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='9' r='2' fill='%23000'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='7'/%3E%3Cpath d='M12 22c3-4 3-9 0-13'/%3E%3C/svg%3E");
}
.awsIcon-cloudwatch{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 12l2.5-3L12 12l4-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
}

/*==========================
LOADER
==========================*/
#loader{
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:#020617;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    z-index:999999;
    transition:opacity .5s ease, visibility .5s ease;
}
#loader.hide{ opacity:0; visibility:hidden; }
.loaderCloud{
    width:130px; height:130px; border-radius:50%;
    display:flex; justify-content:center; align-items:center; font-size:65px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    animation:spin 2s linear infinite;
    box-shadow:0 0 70px rgba(14,165,233,.5);
}
#loader h2{ margin-top:25px; letter-spacing:5px; font-size:36px; }
#loader p{ color:#94a3b8; margin-top:10px; }
@keyframes spin{ 100%{ transform:rotate(360deg); } }

/*==========================
HEADER + NAV (with hamburger)
==========================*/
header{
    position:fixed; top:0; left:0; width:100%;
    padding:22px 8%;
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(2,6,23,.70);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06);
    z-index:9999;
}
.logo{ display:flex; align-items:center; gap:12px; font-size:28px; font-weight:700; }
.logo i{ font-size:35px; color:var(--primary); }

nav ul{ display:flex; gap:35px; }
nav ul li a{ font-weight:500; color:#cbd5e1; }
nav ul li a:hover{ color:#38bdf8; }

.hireBtn{
    padding:14px 28px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    border-radius:50px; font-weight:600;
    box-shadow:0 10px 35px rgba(37,99,235,.35);
}
.hireBtn:hover{ transform:translateY(-4px); }

/* Hamburger button (hidden on desktop) */
.navToggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px; height:42px;
    background:rgba(15,23,42,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:0;
}
.navToggle span{
    width:20px; height:2px; margin:0 auto;
    background:white; border-radius:2px;
    transition:.3s;
}
.navToggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navToggle.open span:nth-child(2){ opacity:0; }
.navToggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/*==========================
HERO
==========================*/
.hero{
    min-height:100vh;
    display:flex; align-items:center;
    padding:150px 8% 80px;
    position:relative; overflow:hidden;
    background:
        radial-gradient(circle at top left,#1d4ed822,transparent),
        radial-gradient(circle at bottom right,#2563eb22,transparent),
        #020617;
}
.cloud1, .cloud2, .cloud3{
    position:absolute; border-radius:50%; filter:blur(70px); z-index:0;
    background:radial-gradient(circle,#2563eb55,transparent 70%);
}
.cloud1{ width:340px; height:340px; top:-80px; left:-60px; }
.cloud2{ width:260px; height:260px; bottom:0; right:-40px; background:radial-gradient(circle,#0ea5e955,transparent 70%); }
.cloud3{ width:200px; height:200px; top:40%; left:45%; background:radial-gradient(circle,#38bdf844,transparent 70%); }

.heroContainer{
    display:grid; grid-template-columns:1.2fr .8fr;
    gap:80px; align-items:center; width:100%;
    position:relative; z-index:1;
}
.badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 22px;
    background:#082032;
    border:1px solid rgba(56,189,248,.35);
    border-radius:40px; color:#38bdf8; font-weight:600;
    margin-bottom:25px;
}
.hero h1{ font-size:64px; font-weight:800; line-height:1.1; margin-bottom:30px; }
.hero h1 span{ color:#38bdf8; display:block; }
.hero p{ font-size:19px; color:#94a3b8; margin-bottom:40px; max-width:640px; }

.heroButtons{ display:flex; gap:20px; margin-bottom:55px; flex-wrap:wrap; }
.primary{
    display:inline-flex; align-items:center; gap:12px;
    padding:18px 36px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    border-radius:50px; font-weight:600;
    box-shadow:0 15px 40px rgba(14,165,233,.35);
    transition:.35s; border:none; color:white;
}
.primary:hover{ transform:translateY(-6px); box-shadow:0 25px 60px rgba(14,165,233,.55); }
.secondary{
    display:inline-flex; align-items:center; justify-content:center;
    padding:18px 36px; border-radius:50px;
    border:2px solid #38bdf8; background:transparent; font-weight:600;
    transition:.35s;
}
.secondary:hover{ background:#38bdf8; color:#020617; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:10px; }
.stats div{
    background:rgba(15,23,42,.85);
    padding:22px 14px; border-radius:18px; text-align:center;
    border:1px solid rgba(255,255,255,.05);
    transition:.35s; backdrop-filter:blur(15px);
}
.stats div:hover{ transform:translateY(-8px); border-color:#38bdf8; box-shadow:0 15px 40px rgba(56,189,248,.20); }
.stats h2{ font-size:38px; color:#38bdf8; font-weight:700; margin-bottom:6px; }
.stats p{ font-size:13px; color:var(--gray); margin:0; }

.heroRight{ position:relative; z-index:1; }
.imageCard{
    background:var(--card);
    border-radius:24px; overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:var(--shadow);
}
.imageCard img{ width:100%; height:380px; object-fit:cover; }
.experience{ padding:26px; }
.experience h3{ font-size:20px; margin-bottom:4px; }
.experience p{ color:var(--gray); font-size:14px; }
.experience hr{ border:none; border-top:1px solid rgba(255,255,255,.08); margin:14px 0; }

/*==========================
ABOUT
==========================*/
.aboutGrid{
    display:grid; grid-template-columns:1.3fr .9fr;
    gap:60px; max-width:1200px; margin:0 auto;
}
.aboutGrid h3{ font-size:26px; margin-bottom:16px; }
.aboutGrid > div > p{ color:var(--gray); margin-bottom:16px; }
.aboutCard{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); padding:34px; height:fit-content;
}
.aboutCard h3{ margin-bottom:18px; }
.aboutCard ul li{
    display:flex; align-items:center; gap:12px;
    padding:10px 0; color:#cbd5e1;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.aboutCard ul li:last-child{ border-bottom:none; }
.aboutCard ul li i{ color:#38bdf8; }

/*==========================
SERVICES
==========================*/
.serviceGrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px; max-width:1200px; margin:0 auto;
}
.serviceCard{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); padding:36px 30px;
    transition:.35s;
}
.serviceCard:hover{ transform:translateY(-8px); border-color:#38bdf8; box-shadow:var(--shadow); }
.serviceCard i, .serviceCard .awsIcon{ font-size:34px; color:#38bdf8; margin-bottom:20px; }
.serviceCard h3{ font-size:20px; margin-bottom:12px; }
.serviceCard p{ color:var(--gray); font-size:15px; }

/*==========================
TECHNOLOGY
==========================*/
.techGrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:20px; max-width:1200px; margin:0 auto;
}
.tech{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:16px; padding:28px 12px; text-align:center;
    transition:.3s;
}
.tech:hover{ transform:translateY(-6px); border-color:#38bdf8; }
.tech i{ font-size:32px; color:#38bdf8; margin-bottom:14px; display:block; }
.tech p{ font-size:14px; color:#cbd5e1; font-weight:500; }

/*==========================
CONSULTING
==========================*/
#consulting{ background:var(--dark2); }
.consultContainer{
    display:grid; grid-template-columns:1.2fr .8fr;
    gap:60px; align-items:center; max-width:1200px; margin:0 auto;
}
.consultText .badge{ margin-bottom:20px; }
.consultText h2{ font-size:36px; margin-bottom:20px; }
.consultText p{ color:var(--gray); margin-bottom:16px; }
.consultImage img{
    border-radius:20px; border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow); height:360px; width:100%; object-fit:cover;
}

/*==========================
TRAINING
==========================*/
.trainingGrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:26px; max-width:1200px; margin:0 auto;
}
.trainingCard{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); padding:32px 26px; text-align:center;
    transition:.3s;
}
.trainingCard:hover{ transform:translateY(-8px); border-color:#38bdf8; }
.trainingCard i, .trainingCard .awsIcon{ font-size:32px; color:#38bdf8; margin:0 auto 16px; }
.trainingCard h3{ font-size:18px; margin-bottom:10px; }
.trainingCard p{ color:var(--gray); font-size:14px; }

/*==========================
PORTFOLIO
==========================*/
.portfolioGrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:34px; max-width:1200px; margin:0 auto;
}
.portfolioCard{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); overflow:hidden; transition:.35s;
}
.portfolioCard:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.portfolioCard img{ width:100%; height:280px; object-fit:cover; }
.portfolioContent{ padding:28px; }
.portfolioContent h3{ margin-bottom:10px; }
.portfolioContent p{ color:var(--gray); font-size:14.5px; margin-bottom:20px; }

/*==========================
CONTACT
==========================*/
.contactWrapper{
    display:grid; grid-template-columns:1fr 1fr;
    gap:50px; max-width:1200px; margin:0 auto;
}
.contactInfo h3{ font-size:22px; margin-bottom:24px; }
.contactCard{
    display:flex; gap:18px; align-items:flex-start;
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:16px; padding:20px 22px; margin-bottom:16px;
}
.contactCard i{ font-size:22px; color:#38bdf8; margin-top:4px; }
.contactCard h4{ font-size:15px; margin-bottom:6px; }
.contactCard a{ color:var(--gray); font-size:14px; display:inline-block; }
.contactCard a:hover{ color:#38bdf8; }

.contactForm form{
    background:var(--card); border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius); padding:34px; display:flex; flex-direction:column; gap:16px;
}
.contactForm input, .contactForm textarea{
    background:#0b1729; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:16px 18px; color:white; font-family:inherit; font-size:15px;
    resize:vertical;
}
.contactForm input:focus, .contactForm textarea:focus{ outline:none; border-color:#38bdf8; }
.contactForm button{ margin-top:6px; }
.formNote{ color:var(--gray); font-size:12.5px; margin-top:4px; }

/*==========================
FOOTER
==========================*/
footer{ background:var(--dark2); padding:70px 8% 30px; }
.footerGrid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr;
    gap:50px; max-width:1200px; margin:0 auto 40px;
}
.footerGrid h3{ margin-bottom:18px; font-size:19px; }
.footerGrid p, .footerGrid ul li{ color:var(--gray); font-size:14.5px; padding:4px 0; }
.footerSocial{ display:flex; gap:14px; }
.footerSocial a{
    width:42px; height:42px; border-radius:50%;
    background:#0f172a; border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
}
.footerSocial a:hover{ background:#38bdf8; color:#020617; transform:translateY(-4px); }
footer hr{ border:none; border-top:1px solid rgba(255,255,255,.06); max-width:1200px; margin:0 auto; }
.copyright{ text-align:center; color:var(--gray); font-size:13.5px; padding-top:26px; max-width:1200px; margin:0 auto; }

/*==========================
FLOATING WHATSAPP
==========================*/
.floatingWhatsapp{
    position:fixed; bottom:26px; right:26px;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    font-size:26px; box-shadow:0 10px 30px rgba(37,211,102,.45);
    z-index:9998; animation:pulse 2.4s infinite;
}
@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
    70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/*==========================
SCROLL REVEAL
==========================*/
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
}

/*======================================================
RESPONSIVE / HAMBURGER NAV
======================================================*/
@media (max-width: 1080px){
    .hero h1{ font-size:52px; }
    .heroContainer{ grid-template-columns:1fr; gap:50px; }
    .heroRight{ order:-1; }
    .aboutGrid{ grid-template-columns:1fr; }
    .consultContainer{ grid-template-columns:1fr; }
    .consultImage{ order:-1; }
}

@media (max-width: 900px){
    nav{
        position:fixed; top:0; right:-100%;
        width:78%; max-width:340px; height:100vh;
        background:rgba(2,6,23,.98);
        backdrop-filter:blur(20px);
        border-left:1px solid rgba(255,255,255,.06);
        padding:110px 40px;
        transition:right .4s ease;
        z-index:9998;
    }
    nav.open{ right:0; }
    nav ul{ flex-direction:column; gap:6px; }
    nav ul li a{
        display:block; padding:14px 0;
        font-size:17px;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .hireBtn{ display:none; }
    .navToggle{ display:flex; }
    .navOverlay{
        display:none;
        position:fixed; inset:0; background:rgba(0,0,0,.5);
        z-index:9997;
    }
    .navOverlay.open{ display:block; }

    .stats{ grid-template-columns:repeat(2,1fr); }
    section{ padding:90px 6%; }
    .contactWrapper{ grid-template-columns:1fr; }
    .footerGrid{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width: 560px){
    .hero{ padding:130px 6% 60px; }
    .hero h1{ font-size:38px; }
    .hero p{ font-size:16px; }
    .heroButtons{ flex-direction:column; }
    .heroButtons a{ width:100%; text-align:center; }
    .sectionTitle h2{ font-size:30px; }
    .imageCard img{ height:280px; }
}