/* =========================================================
   Global Theme Variables : Analogous Blue-Cyan Palette
   ========================================================= */
:root{
    /* Core Colors */
    --clr-base-h: 205;
    --clr-base-s: 70%;
    --clr-base-l: 52%;

    --clr-primary: hsl(var(--clr-base-h)  var(--clr-base-s) var(--clr-base-l));
    --clr-primary-dark: hsl(var(--clr-base-h) var(--clr-base-s) calc(var(--clr-base-l) - 15%));
    --clr-primary-light: hsl(var(--clr-base-h) var(--clr-base-s) calc(var(--clr-base-l) + 20%));
    --clr-accent: hsl(calc(var(--clr-base-h) + 25) 60% 55%);
    --clr-accent-dark: hsl(calc(var(--clr-base-h) + 25) 60% 40%);
    --clr-text-dark: #222222;
    --clr-text-light: #ffffff;
    --clr-muted: #727b8a;
    --bg-gradient: linear-gradient(135deg,
                      hsl(var(--clr-base-h) 70% 18%),
                      hsl(calc(var(--clr-base-h) + 30) 70% 14%));
    --glass-bg: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.25);
    --radius-lg: 1.2rem;
    --transition: .35s cubic-bezier(.4,.0,.2,1);
}

/* =========================================================
   Base Reset & Typography (modern-normalize already loaded)
   ========================================================= */
html{
    scroll-behavior:smooth;
    font-size: 16px;
}
body{
    font-family: 'DM Sans', sans-serif;
    color: var(--clr-text-dark);
    background: var(--bg-gradient);
    line-height: 1.6;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5{
    font-family: 'Space Grotesk', sans-serif;
    color: var(--clr-text-dark);
    margin:0 0 .6em;
    text-align:center;
}
.section-title{
    font-size:clamp(1.8rem,3vw,2.4rem);
    position:relative;
}
p{
    margin-bottom:1rem;
}
img{display:block;width:100%;height:auto;}
a{color:var(--clr-primary);text-decoration:none;}
a:hover,a:focus{color:var(--clr-accent-dark);text-decoration:underline;}

/* =========================================================
   Utility & Layout Helpers
   ========================================================= */
.container{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:1rem;
}
.grid-curved{
    position:relative;
    z-index:1;
}
.grid-curved::before{
    content:'';
    position:absolute;
    inset:0;
    background:inherit;
    z-index:-1;
    clip-path:path('M0 100 Q50 0 100 100 T200 100 T300 100 T400 100 V100 H0 Z');
    opacity:.04;
}
/* Glass effect */
.glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius:var(--radius-lg);
}

/* =========================================================
   Navigation
   ========================================================= */
.main-header{
    position:fixed;
    top:0;left:0;width:100%;
    backdrop-filter:blur(10px);
    z-index:1000;
}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 1rem;
}
.logo{
    font-size:1.4rem;
    font-weight:600;
    color:var(--clr-text-light);
}
.menu{
    display:flex;
    gap:1.2rem;
    list-style:none;
}
.menu a{
    color:var(--clr-text-light);
    font-weight:500;
}
.menu a:hover{color:var(--clr-accent);}
.burger{
    display:none;
    flex-direction:column;
    gap:.25rem;
    background:none;
    border:none;
    cursor:pointer;
}
.burger-line{
    width:22px;height:2px;
    background:var(--clr-text-light);
    transition:var(--transition);
}

/* Mobile Nav */
@media(max-width:768px){
    .menu{
        position:fixed;
        inset:0 0 auto auto;
        flex-direction:column;
        padding:5rem 2rem;
        background:var(--bg-gradient);
        transform:translateX(100%);
        transition:var(--transition);
        min-width:220px;
        height:100vh;
    }
    .menu.open{transform:translateX(0);}
    .burger{display:flex;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
    min-height:92vh;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:var(--clr-text-light);
    text-shadow:1px 1px 4px rgba(0,0,0,.8);
}
.hero-inner{
    text-align:center;
    margin-inline:auto;
}
.hero-title{
    font-size:clamp(2.2rem,5vw,3.5rem);
}
.hero-sub{
    max-width:600px;
    margin:1rem auto 2rem;
    color:var(--clr-text-light);
}

/* =========================================================
   Buttons & Links
   ========================================================= */
.btn,
button,
input[type='submit']{
    --btn-pad: .8rem 2.2rem;
    padding: var(--btn-pad);
    border:none;
    border-radius:50px;
    font-family:inherit;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    display:inline-block;
    text-align:center;
}
.btn-primary{
    background:var(--clr-primary);
    color:var(--clr-text-light);
}
.btn-primary:hover{
    background:var(--clr-primary-dark);
}
.btn-secondary{
    background:var(--clr-accent);
    color:var(--clr-text-light);
}
.btn-secondary:hover{
    background:var(--clr-accent-dark);
}
.btn-link{
    display:inline-block;
    color:var(--clr-primary-dark);
    font-weight:500;
    margin-top:.5rem;
}
.btn-link:hover{color:var(--clr-accent-dark);}

/* =========================================================
   Cards
   ========================================================= */
.card{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(12px);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:var(--transition);
}
.card:hover{transform:translateY(-6px);}
.card-image{
    width:100%;
    height:260px;
    overflow:hidden;
    border-radius:var(--radius-lg);
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img{
    height:100%;
    width:100%;
    object-fit:cover;
    margin:0 auto;
}

/* =========================================================
   Team & Blog Layout
   ========================================================= */
.team-grid,
.blog-cards,
.workshop-list{
    display:grid;
    gap:2rem;
}
@media(min-width:700px){
    .team-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
    .blog-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
    .workshop-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}
}

/* =========================================================
   Insights Carousel (basic horizontal scroll snap)
   ========================================================= */
.carousel{
    display:flex;
    overflow-x:auto;
    gap:1.5rem;
    scroll-snap-type:x mandatory;
    padding-bottom:1rem;
}
.carousel-item{
    flex:0 0 80%;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    padding:2rem;
    border-radius:var(--radius-lg);
    scroll-snap-align:center;
}
@media(min-width:600px){
    .carousel-item{flex:0 0 45%;}
}
@media(min-width:1000px){
    .carousel-item{flex:0 0 30%;}
}

/* =========================================================
   Contact Form
   ========================================================= */
.contact-form{
    max-width:650px;
    margin-inline:auto;
    display:grid;
    gap:1rem;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:.4rem;
}
input, textarea{
    padding:.75rem 1rem;
    border-radius:.5rem;
    border:1px solid var(--clr-primary-light);
    background:rgba(255,255,255,.8);
}
input:focus,textarea:focus{
    outline:2px solid var(--clr-accent);
}

/* =========================================================
   Footer
   ========================================================= */
.main-footer{
    margin-top:4rem;
    padding:3rem 1rem 1rem;
    color:var(--clr-text-light);
    background:linear-gradient(180deg,
                hsl(var(--clr-base-h) 70% 16%),
                hsl(calc(var(--clr-base-h) + 25) 70% 12%));
}
.footer-inner{
    display:grid;
    gap:2rem;
}
@media(min-width:700px){
    .footer-inner{
        grid-template-columns:repeat(3,1fr);
    }
}
.footer-col ul{
    list-style:none;
    padding:0;
}
.footer-col a{
    color:var(--clr-primary-light);
}
.footer-col a:hover{color:var(--clr-accent);}
.copyright{
    margin-top:2rem;
    text-align:center;
    font-size:.875rem;
    color:var(--clr-muted);
}

/* Social links */
.footer-col ul li{
    margin-bottom:.35rem;
}
.footer-col ul li a{
    position:relative;
    padding-left:1.5rem;
}
.footer-col ul li a::before{
    content:'›';
    position:absolute;left:0;
    color:var(--clr-accent);
}

/* =========================================================
   Modals
   ========================================================= */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    align-items:center;
    justify-content:center;
    z-index:2000;
    padding:1rem;
}
.modal-content{
    max-width:600px;
    padding:2rem;
    position:relative;
    text-align:center;
}
.modal-close{
    position:absolute;
    top:.5rem;right:.8rem;
    font-size:1.6rem;
    background:none;
    border:none;
    color:var(--clr-text-light);
    cursor:pointer;
}

/* =========================================================
   Parallax Effects & Scroll Reveal Helpers
   ========================================================= */
.parallax{
    position:relative;
    will-change:transform;
    transition:transform .2s ease-out;
}
/* Basic depth illusion */
[data-parallax-speed="fast"]{transform:translateY(-10%);}
[data-parallax-speed="slow"]{transform:translateY(-4%);}

/* =========================================================
   Page Specific
   ========================================================= */
.page-success{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
    color:var(--clr-text-light);
}
.page-legal{
    padding-top:100px; /* avoids header overlap */
    padding-inline:1rem;
    max-width:900px;
    margin-inline:auto;
}

/* =========================================================
   Cookie Popup
   ========================================================= */
#cookie-popup{
    font-size:.875rem;
}
#cookie-popup button:hover{
    filter:brightness(.9);
}

/* =========================================================
   Scrollbar (optional aesthetic)
   ========================================================= */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{
    background:var(--clr-primary);
    border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{background:var(--clr-accent);}

/* =========================================================
   Animations
   ========================================================= */
@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
    100%{transform:translateY(0);}
}
.float{
    animation:float 6s ease-in-out infinite;
}
p{
    color: white;
}