/* =========================================================
   Global Theme Variables  |  Bright Corporate Palette
========================================================= */
:root{
    /* Brand Colors */
    --primary-color:#00C2FF;
    --primary-dark:#0090c1;
    --secondary-color:#FF4778;
    --secondary-dark:#c13860;
    --accent-color:#FFD400;
    --neutral-dark:#222222;
    --neutral:#333333;
    --neutral-light:#f7f7f7;
    --white:#ffffff;

    /* Gradients & Shadows */
    --bg-gradient:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);
    --glass-bg:rgba(255,255,255,0.15);
    --card-shadow:0 4px 18px rgba(0,0,0,0.08);
    --transition:all .35s ease-in-out;

    /* Typography */
    --font-heading:'Manrope',sans-serif;
    --font-body:'Rubik',sans-serif;

    /* Border Radius */
    --radius-sm:6px;
    --radius-md:12px;
}

/* =========================================================
   Base Reset & Utilities
========================================================= */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--neutral);
    line-height:1.6;
    background:var(--neutral-light);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--neutral-dark);
    line-height:1.3;
    text-align:center;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:var(--primary-color);transition:var(--transition)}
a:hover,a:focus{color:var(--secondary-color)}
.read-more{font-weight:600;position:relative;padding-right:18px}
.read-more::after{
    content:'→';
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    transition:var(--transition)
}
.read-more:hover::after{right:-4px}

/* Layout Utilities */
.container{
    width:90%;
    max-width:1280px;
    margin:0 auto;
}
.section-title{margin-bottom:2rem;font-size:clamp(1.8rem,4vw,2.4rem)}
.flex-center{display:flex;justify-content:center;align-items:center}
.grid{display:grid;gap:2rem}

/* =========================================================
   Navigation / Header
========================================================= */
.header{
    position:fixed;top:0;left:0;width:100%;
    background:var(--bg-gradient);
    padding:12px 0;
    z-index:999;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.logo a{font-size:1.6rem;font-weight:800;color:var(--white)}
.nav ul{list-style:none;display:flex;gap:1.5rem}
.nav a{color:var(--white);font-weight:500}
.nav a:hover{color:var(--accent-color)}
/* Burger */
.burger{display:none;background:none;border:0;width:30px;cursor:pointer}
.burger span{
    display:block;height:3px;background:var(--white);
    margin:5px 0;border-radius:2px;transition:var(--transition)
}
/* Mobile */
@media(max-width:820px){
  .nav{position:fixed;top:70px;left:-100%;width:100%;height:calc(100vh - 70px);
        background:var(--bg-gradient);flex-direction:column;align-items:center;
        justify-content:center;transition:var(--transition)}
  .nav.active{left:0}
  .burger{display:block}
}

/* =========================================================
   Hero Section
========================================================= */
.hero{
    position:relative;
    padding:120px 0 100px;
    background:var(--bg-gradient);
    color:var(--white);
    text-align:center;
    overflow:hidden;
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.3));
    z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}
.hero h2{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:1rem}
.hero p{font-size:1.1rem;margin-bottom:2rem}
#particles-bg{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:0;pointer-events:none;
}

/* =========================================================
   Buttons
========================================================= */
.btn,button,input[type='submit']{
    display:inline-block;
    padding:.9rem 2.2rem;
    border:none;border-radius:var(--radius-sm);
    font-family:var(--font-heading);
    font-weight:600;
    cursor:pointer;
    background:var(--secondary-color);
    color:var(--white);
    transition:var(--transition);
}
.btn-primary{background:var(--primary-color)}
.btn-secondary{background:var(--secondary-color)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}

/* =========================================================
   Timeline
========================================================= */
.timeline{position:relative;margin-top:3rem;border-left:3px solid var(--accent-color);padding-left:1.5rem}
.timeline-item{margin-bottom:1.5rem;position:relative}
.timeline-year{
    font-family:var(--font-heading);
    background:var(--accent-color);
    padding:.1rem .6rem;
    border-radius:var(--radius-sm);
    margin-right:.6rem;
}

/* =========================================================
   Statistics
========================================================= */
.statistics .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.5rem;
    margin-top:2rem;
}
.stat{
    background:var(--white);
    padding:1.8rem;
    border-radius:var(--radius-md);
    box-shadow:var(--card-shadow);
    text-align:center;
}
.stat strong{font-size:2rem;color:var(--primary-color);display:block;margin-bottom:.4rem}

/* =========================================================
   Process / Cards
========================================================= */
.card{
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:var(--card-shadow);
    padding:1.2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:var(--transition);
}
.card:hover{transform:translateY(-4px)}
.card-image{
    width:100%;max-width:400px;height:250px;overflow:hidden;
    border-radius:var(--radius-sm);margin-bottom:1rem;
    display:flex;justify-content:center;align-items:center;
}
.card-image img{height:100%;width:100%;object-fit:cover}

/* =========================================================
   Carousel
========================================================= */
.carousel{position:relative;overflow:hidden}
.carousel-track{
    display:flex;gap:1.5rem;
    transition:transform .5s ease;
}
.carousel-item{min-width:300px}
.carousel-control{
    position:absolute;top:50%;transform:translateY(-50%);
    background:var(--glass-bg);backdrop-filter:blur(5px);
    border:none;width:38px;height:38px;border-radius:50%;
    color:var(--white);font-size:1.5rem;cursor:pointer;
}
.carousel-control.prev{left:10px}
.carousel-control.next{right:10px}

/* =========================================================
   Gallery / Projects
========================================================= */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.5rem;
    margin-top:2rem;
}
.image-container{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-sm);
    display:flex;flex-direction:column;align-items:center;
}
.image-container img{
    width:100%;height:200px;object-fit:cover;
    transition:var(--transition);
}
.image-container:hover img{transform:scale(1.08)}
.image-container figcaption{
    background:var(--glass-bg);
    backdrop-filter:blur(6px);
    color:var(--white);
    width:100%;padding:.6rem;text-align:center;
    position:absolute;bottom:0;left:0;
}

/* =========================================================
   External Resources
========================================================= */
.resources-list{display:grid;gap:1.5rem;margin-top:1.5rem}
.resource{
    background:var(--white);padding:1.2rem;border-radius:var(--radius-sm);
    box-shadow:var(--card-shadow);
}
.resource h3 a{color:var(--secondary-color)}
.resource p{margin-top:.5rem;font-size:.95rem}

/* =========================================================
   Careers
========================================================= */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.8rem;
    margin-top:2rem;
}

/* =========================================================
   Contact Form
========================================================= */
.contact-form{max-width:680px;margin:2rem auto}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;margin-bottom:.4rem;font-weight:500}
.form-group input,
.form-group textarea{
    width:100%;padding:.8rem 1rem;border:1px solid #ccc;
    border-radius:var(--radius-sm);font-family:var(--font-body);
    transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px rgba(0,194,255,.2)}

/* =========================================================
   Footer
========================================================= */
.footer{
    background:var(--neutral-dark);
    color:var(--white);
    padding:2rem 0;
    text-align:center;
}
.footer a{color:var(--primary-color);margin:0 .4rem}
.footer a:hover{color:var(--accent-color)}
.socials{margin-top:1rem;font-size:.95rem}

/* Social Link Emphasis */
.socials a{font-weight:600;}

/* =========================================================
   Pages: success / privacy / terms
========================================================= */
.success-page{
    min-height:100vh;
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    text-align:center;
    background:var(--bg-gradient);
    color:var(--white);
}
.legal-page{padding-top:100px;padding-bottom:3rem}
.legal-page h2{text-align:left;margin-bottom:1rem}
.legal-page p{margin-bottom:1rem}

/* =========================================================
   Particle-Like Background Animations
========================================================= */
@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-20px)}
    100%{transform:translateY(0)}
}
.particle{
    position:absolute;width:8px;height:8px;border-radius:50%;
    background:var(--accent-color);opacity:.65;
    animation:float 6s ease-in-out infinite;
}
.particle:nth-child(odd){background:var(--secondary-color)}
.particle:nth-child(even){animation-duration:8s}

/* =========================================================
   ScrollReveal Placeholder Styles
========================================================= */
[data-sr]{opacity:0;transform:translateY(40px);transition:var(--transition)}
[data-sr].is-visible{opacity:1;transform:none}

/* =========================================================
   Responsive Enhancements
========================================================= */
@media(max-width:600px){
    .section-title{font-size:1.6rem}
    .timeline{border:none;padding-left:0}
    .timeline-year{display:inline-block;margin-bottom:.3rem}
    .header .nav ul{gap:1rem}
}
@media (max-width: 768px) {
    #nav-main{
        display: none;
    }

}