/* ==================================================
   Base & Tokens
   ================================================== */
:root{
    /* Monochrome Palette */
    --clr-bg:#f0f2f5;
    --clr-surface:#e8e9ef;
    --clr-surface-dark:#d4d6dc;
    --clr-shadow-dark:#b9bcc6;
    --clr-shadow-light:#ffffff;
    --clr-text:#222222;
    --clr-text-light:#ffffff;
    --clr-accent:#3b5bff;
    --clr-accent-dark:#2b45c7;

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

    /* Radii */
    --radius:18px;

    /* Shadows (Neumorphism) */
    --shadow-inset:inset -4px -4px 8px var(--clr-shadow-light),
                    inset 4px 4px 8px var(--clr-shadow-dark);
    --shadow-out:  -6px -6px 12px var(--clr-shadow-light),
                    6px  6px 12px var(--clr-shadow-dark);

    /* Transitions */
    --transition:all .35s ease;
}

/* ==================================================
   Resets & Globals
   ================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--ff-body);
    background:var(--clr-bg);
    color:var(--clr-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--clr-accent);transition:var(--transition);}
a:hover{color:var(--clr-accent-dark);}

.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}

.section{padding:4rem 0;}
.section-title{
    font-family:var(--ff-heading);
    font-size:2.2rem;
    text-align:center;
    margin-bottom:3rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.3);
}

/* ==================================================
   Header & Navigation
   ================================================== */
.header{
    position:fixed;
    top:0;left:0;right:0;
    background:var(--clr-surface);
    padding:.75rem 0;
    box-shadow:var(--shadow-out);
    z-index:1000;
}
.header .container{display:flex;align-items:center;justify-content:space-between;}
.logo{
    font-family:var(--ff-heading);
    font-weight:700;
    font-size:1.4rem;
    color:var(--clr-accent);
}
.nav ul{display:flex;gap:1.5rem;list-style:none;}
.nav a{font-weight:500;}
.nav a:hover{color:var(--clr-accent-dark);}
.burger{
    display:none;
    background:none;border:none;cursor:pointer;
    flex-direction:column;gap:4px;
}
.burger span{
    display:block;width:24px;height:3px;
    background:var(--clr-text);border-radius:3px;
}

/* Mobile Nav */
@media(max-width:768px){
    .desktop-nav{display:none;}
    .burger{display:flex;}
    .mobile-nav{
        position:fixed;top:70px;left:0;right:0;
        background:var(--clr-surface);
        transform:translateY(-120%);
        transition:var(--transition);
        box-shadow:var(--shadow-out);
    }
    .mobile-nav.open{transform:translateY(0);}
    .mobile-nav ul{flex-direction:column;align-items:center;padding:2rem 0;}
    .mobile-nav li+li{margin-top:1rem;}
}

/* ==================================================
   Hero
   ================================================== */
.hero{
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    padding:6rem 0 5rem;
    background-size:cover;background-repeat:no-repeat;background-position:center;
    position:relative;
    color:var(--clr-text-light);
}
.hero .hero-title{
    font-family:var(--ff-heading);
    font-size:2.8rem;
    margin-bottom:1rem;
}
.hero .hero-text{max-width:650px;margin-inline:auto 2rem 2.5rem;}
.hero .btn-primary{margin-top:1rem;}

/* ==================================================
   Buttons
   ================================================== */
.btn,.btn-primary,button,input[type='submit']{
    display:inline-block;
    padding:.8rem 2.2rem;
    font-family:var(--ff-heading);
    font-weight:600;
    background:var(--clr-surface);
    color:var(--clr-accent);
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow-out);
    cursor:pointer;
    transition:var(--transition);
}
.btn-primary{
    background:var(--clr-accent);
    color:var(--clr-text-light);
    box-shadow:0 4px 8px rgba(0,0,0,.15);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 12px rgba(0,0,0,.2);
}
.btn-primary:hover{background:var(--clr-accent-dark);}

/* ==================================================
   Card Components
   ================================================== */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}
.card{
    background:var(--clr-surface);
    border-radius:var(--radius);
    padding:1.8rem 1.4rem;
    text-align:center;
    box-shadow:var(--shadow-out);
    display:flex;flex-direction:column;align-items:center;
    transition:var(--transition);
}
.card:hover{box-shadow:var(--shadow-inset);}
.card-image{
    width:100%;
    height:320px;
    overflow:hidden;
    border-radius:var(--radius);
    margin-bottom:1.2rem;
    display:flex;align-items:center;justify-content:center;
}
.card-image img{
    width:100%;height:100%;object-fit:cover;
    border-radius:var(--radius);
}
.card-content h3{
    font-family:var(--ff-heading);
    margin-bottom:.6rem;
}
.card-content p{font-size:.95rem;}

/* ==================================================
   Timeline
   ================================================== */
.timeline{
    position:relative;
    padding-left:2rem;
}
.timeline::before{
    content:'';
    position:absolute;left:12px;top:0;bottom:0;width:2px;
    background:var(--clr-shadow-dark);
}
.timeline-item{
    position:relative;
    margin-bottom:2rem;
}
.timeline-date{
    position:absolute;left:-1.2rem;top:0;
    width:1.2rem;height:1.2rem;
    background:var(--clr-accent);
    border-radius:50%;
    box-shadow:0 0 0 4px var(--clr-surface);
}
.timeline-item p{margin-left:1rem;}

/* ==================================================
   Slider / Carousel
   ================================================== */
.carousel{
    overflow:hidden;
    position:relative;
}
.carousel-track{
    display:flex;
    animation:slide 20s infinite;
}
.carousel-item{
    min-width:100%;
    padding:1rem;
    text-align:center;
}
@keyframes slide{
    0%{transform:translateX(0);}
    33%{transform:translateX(-100%);}
    66%{transform:translateX(-200%);}
    100%{transform:translateX(0);}
}

/* Custom Content Slider (Innovation) */
.content-slider{
    position:relative;text-align:center;
}
.content-slider input{display:none;}
.slides{
    background:var(--clr-surface);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:var(--shadow-out);
    min-height:220px;
}
#slide1:checked ~ .slides #s1,
#slide2:checked ~ .slides #s2,
#slide3:checked ~ .slides #s3{display:block;}
.slide{display:none;}
.slider-nav{
    margin-top:1rem;display:flex;justify-content:center;gap:.6rem;
}
.slider-nav label{
    width:14px;height:14px;border-radius:50%;
    background:var(--clr-shadow-dark);cursor:pointer;
    transition:var(--transition);
}
#slide1:checked ~ .slider-nav label[for='slide1'],
#slide2:checked ~ .slider-nav label[for='slide2'],
#slide3:checked ~ .slider-nav label[for='slide3']{
    background:var(--clr-accent);
    transform:scale(1.2);
}

/* ==================================================
   Forms & Inputs
   ================================================== */
.contact-form{
    max-width:600px;margin-inline:auto;
    display:grid;gap:1.5rem;
}
.form-group{display:flex;flex-direction:column;}
label{margin-bottom:.4rem;font-weight:500;}
input[type='text'],input[type='email'],textarea{
    padding:.75rem 1rem;
    border:none;
    border-radius:var(--radius);
    background:var(--clr-surface);
    box-shadow:var(--shadow-inset);
    font-family:var(--ff-body);
    resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--clr-accent);}

/* ==================================================
   Footer
   ================================================== */
.footer{
    background:var(--clr-surface);
    padding:2rem 0;
    text-align:center;
    box-shadow:var(--shadow-inset);
}
.footer nav a{margin:0 .5rem;font-size:.95rem;}
.social-links{margin-top:.8rem;}
.social-links a{
    margin:0 .4rem;
    font-weight:500;
    position:relative;
}
.social-links a::after{
    content:'';
    position:absolute;left:0;bottom:-2px;
    width:100%;height:2px;
    background:var(--clr-accent);transform:scaleX(0);
    transition:var(--transition);transform-origin:right;
}
.social-links a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ==================================================
   Legal & Success Pages
   ================================================== */
.legal-page{padding-top:100px;}
.success-page{
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
}

/* ==================================================
   Utility Classes
   ================================================== */
.grey-bg{background:var(--clr-surface-dark);}
.text-center{text-align:center;}
.read-more{
    display:inline-block;
    margin-top:1rem;
    font-weight:600;
    color:var(--clr-accent);
}
.read-more:hover{color:var(--clr-accent-dark);}

/* ==================================================
   Animations – Morphing
   ================================================== */
@keyframes morph{
    0%  {border-radius:35% 65% 60% 40%/55% 45% 55% 45%;}
    50% {border-radius:55% 45% 35% 65%/40% 60% 35% 65%;}
    100%{border-radius:35% 65% 60% 40%/55% 45% 55% 45%;}
}
.morph{
    animation:morph 12s ease-in-out infinite;
}

/* ==================================================
   Parallax Helpers
   ================================================== */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ==================================================
   Media Queries
   ================================================== */
@media(max-width:576px){
    .section{padding:3rem 0;}
    .hero .hero-title{font-size:2.2rem;}
    .card-image{height:260px;}
}