/* ==========================================================================
   Futurist-Neobrutal Triad Design System
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&family=Oswald:wght@400;600&display=swap');

/* Root Variables – Color Triad + Utility Shades */
:root{
    /* Hues: 210°(Primary Blue) | 90°(Lime Accent) | 330°(Magenta Accent) */
    --clr-primary-500:hsl(210,100%,50%);
    --clr-primary-600:hsl(210,100%,42%);
    --clr-primary-700:hsl(210,100%,35%);

    --clr-accent-500:hsl(90,90%,55%);
    --clr-accent-600:hsl(90,90%,45%);
    --clr-accent-700:hsl(90,90%,35%);

    --clr-tertiary-500:hsl(330,85%,55%);
    --clr-tertiary-600:hsl(330,85%,45%);
    --clr-tertiary-700:hsl(330,85%,35%);

    --clr-light:#FFFFFF;
    --clr-dark:#111111;
    --clr-grey-100:#f5f5f5;
    --clr-grey-600:#666666;

    /* Gradients */
    --grad-primary:linear-gradient(135deg, var(--clr-primary-500) 0%, var(--clr-tertiary-500) 100%);
    --grad-glass:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 100%);

    /* Shadows */
    --shadow-neobrutal:4px 4px 0 var(--clr-dark);

    /* Motion */
    --easing:cubic-bezier(.4,0,.2,1);
    --transition:all .35s var(--easing);
}

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

html{scroll-behavior:smooth;}

body{
    font-family:'Nunito',system-ui,Arial,Helvetica,sans-serif;
    color:var(--clr-dark);
    background-color:var(--clr-grey-100);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Oswald',Impact,Helvetica,sans-serif;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--clr-dark);
}

img{max-width:100%;display:block;}

a{color:var(--clr-primary-600);text-decoration:none;transition:color .2s ease;}
a:hover,a:focus{color:var(--clr-tertiary-500);}

ul{list-style:none;}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}

.section{
    padding:4rem 0;
}

.is-two-thirds{max-width:66ch;margin-inline:auto;}

.grid{
    display:grid;
    gap:2rem;
}

/* ==========================================================================
   Buttons – global styles (IMPORTANT)
   ========================================================================== */
.btn,
button,
input[type='submit']{
    appearance:none;
    display:inline-block;
    padding:.85rem 2.5rem;
    font-family:'Oswald',sans-serif;
    font-size:1rem;
    border:2px solid var(--clr-dark);
    background:var(--clr-accent-500);
    color:var(--clr-dark);
    cursor:pointer;
    transition:var(--transition);
    box-shadow:var(--shadow-neobrutal);
    text-transform:uppercase;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-accent-600);
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 var(--clr-dark);
}
.btn--ghost{
    background:transparent;
    color:var(--clr-light);
    border-color:var(--clr-light);
}
.btn--ghost:hover{background:var(--clr-light);color:var(--clr-dark);}

/* ==========================================================================
   Navigation (fixed)
   ========================================================================== */
.header{
    position:fixed;
    top:0;left:0;width:100%;
    background:var(--clr-light);
    box-shadow:0 2px 4px rgba(0,0,0,.08);
    z-index:999;
}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;}
.header .logo a{font-size:1.5rem;font-weight:600;}
.main-nav ul{display:flex;gap:1.25rem;}
.main-nav a{font-family:'Oswald';}
#burger{display:none;border:none;background:none;cursor:pointer;}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero{
    position:relative;
    color:var(--clr-light);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6rem 1rem;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.hero::after{ /* overlay gradient */
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6));
}
.hero > .container{
    position:relative;
    z-index:1;
}
.hero-title{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:1rem;}
.hero-text{font-size:1.25rem;margin-bottom:2rem;max-width:46ch;margin-inline:auto;}

/* ==========================================================================
   Morphing Animation (custom) – can be used on .blob
   ========================================================================== */
@keyframes morph{
    0%{border-radius:42% 58% 63% 37%/45% 43% 57% 55%;}
    50%{border-radius:65% 35% 25% 75%/55% 65% 35% 45%;}
    100%{border-radius:42% 58% 63% 37%/45% 43% 57% 55%;}
}
.blob{
    animation:morph 8s ease-in-out infinite alternate;
    background:var(--grad-primary);
}

/* ==========================================================================
   Card Components (STRICT CENTERING)
   ========================================================================== */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--clr-light);
    padding:2rem 1.5rem;
    border:2px solid var(--clr-dark);
    box-shadow:var(--shadow-neobrutal);
    transition:var(--transition);
}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--clr-dark);}

.card-image,
.item-image,
.product-card-image{
    width:100%;
    height:260px;                 /* fixed height */
    overflow:hidden;
    border:2px solid var(--clr-dark);
    margin-bottom:1rem;
}
.card-image img,
.item-image img,
.product-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;                /* center guarantee */
}

/* ==========================================================================
   Workshops Grid
   ========================================================================== */
.workshops .cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
}

/* ==========================================================================
   Methodology, Innovation, Sustainability, Events
   ========================================================================== */
.methodology p,
.innovation p,
.sustainability p,
.events p{max-width:60ch;margin-inline:auto;}

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

/* Innovation section with glass • neobrutal hybrid   */
.innovation{
    position:relative;
    color:var(--clr-light);
    background-size:cover;
    background-repeat:no-repeat;
}
.innovation::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
}
.innovation .container{
    position:relative;
    backdrop-filter:blur(6px);
    background:var(--grad-glass);
    border:2px solid rgba(255,255,255,0.3);
    border-radius:12px;
    padding:3rem;
}

/* ==========================================================================
   Events Calendar
   ========================================================================== */
.events-list li{margin-bottom:.5rem;font-weight:600;}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing .cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:2rem;
}
.price{font-size:2rem;font-weight:800;margin-top:1rem;color:var(--clr-tertiary-500);}

/* ==========================================================================
   Contact Form
   ========================================================================== */
form{
    display:grid;
    gap:1.25rem;
}
.form-group{
    display:flex;
    flex-direction:column;
}
label{font-weight:600;margin-bottom:.25rem;}
input,textarea{
    font-family:inherit;
    border:2px solid var(--clr-dark);
    padding:.75rem 1rem;
    background:#fff;
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-primary-600);}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
    background:var(--clr-dark);
    color:var(--clr-light);
    padding:3rem 0;
}
.footer nav ul{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:1rem;}
.footer a{color:var(--clr-light);position:relative;padding-bottom:2px;}
.footer a::after{
    content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
    background:var(--clr-accent-500);transform:scaleX(0);transition:transform .25s var(--easing);
}
.footer a:hover::after{transform:scaleX(1);}
.footer p{text-align:center;margin-top:.5rem;}
/* Social links */
.footer .social a{font-weight:700;margin:0 .5rem;}

/* ==========================================================================
   Success Page
   ========================================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem;
    background:var(--grad-primary);
    color:var(--clr-light);
}

/* ==========================================================================
   Privacy & Terms Padding
   ========================================================================== */
.legal-page{padding-top:100px;padding-bottom:3rem;}

/* ==========================================================================
   Helper Classes
   ========================================================================== */
.text-center{text-align:center;}
.mt-2{margin-top:.5rem;}
.mt-4{margin-top:1rem;}
.mb-4{margin-bottom:1rem;}
.hide{display:none;}

.read-more{
    display:inline-block;
    font-weight:700;
    color:var(--clr-tertiary-500);
    position:relative;
    padding-right:1.75rem;
    transition:var(--transition);
}
.read-more::after{
    content:'→';
    position:absolute;
    right:.25rem;top:0;
    transition:transform .3s var(--easing);
}
.read-more:hover{color:var(--clr-tertiary-600);}
.read-more:hover::after{transform:translateX(4px);}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media(max-width:768px){
    .main-nav ul{display:none;}
    #burger{display:block;}
}

/* ==========================================================================
   Animate.css integration tweaks (override defaults subtly)
   ========================================================================== */
.animate__animated{--animate-duration:0.9s;}