/* ========================================================
   Design-System Variables
   ====================================================== */
:root{
    /* ---- Color Palette (Analogic) ---- */
    --clr-primary-500: hsl(205 100% 55%);
    --clr-primary-400: hsl(205 80% 60%);
    --clr-primary-300: hsl(205 60% 68%);
    --clr-accent-500 : hsl(195 100% 45%);
    --clr-accent-400 : hsl(195 80% 52%);
    --clr-accent-300 : hsl(195 60% 60%);
    --clr-tertiary-500: hsl(215 100% 63%);
    --clr-tertiary-400: hsl(215 80% 70%);
    --clr-tertiary-300: hsl(215 60% 78%);

    --clr-neutral-900: hsl(215 30% 7%);
    --clr-neutral-700: hsl(215 19% 21%);
    --clr-neutral-500: hsl(215 14% 38%);
    --clr-neutral-300: hsl(215 18% 78%);
    --clr-neutral-100: hsl(0 0% 100%);

    /* ---- Glassmorphism ---- */
    --glass-bg   : rgba(255,255,255,0.14);
    --glass-brdr : rgba(255,255,255,0.25);
    --blur-level : 14px;

    /* ---- Typography ---- */
    --ff-heading : "Raleway", system-ui, sans-serif;
    --ff-body    : "Open Sans", system-ui, sans-serif;

    --fs-900: clamp(2.5rem, 6vw + 1rem, 4rem);
    --fs-700: 2rem;
    --fs-600: 1.375rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;

    /* ---- Animation ---- */
    --duration-fast: .25s;
    --duration-med : .5s;
    --duration-slow: .8s;

    /* ---- Shadows ---- */
    --shadow-m : 0 8px 24px -6px rgba(0,0,0,.2);
    --shadow-s : 0 4px 12px -4px rgba(0,0,0,.15);
}

/* ========================================================
   Base / Reset Enhancements
   ====================================================== */
html{
    scroll-behavior: smooth;
}
body{
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    color: var(--clr-neutral-100);
    background: var(--clr-neutral-900);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,h2,h3,h4,h5,h6{
    font-family: var(--ff-heading);
    line-height: 1.2;
    margin-block-end: .5em;
}
h1{font-size:var(--fs-900);}
h2{font-size:var(--fs-700);}
h3{font-size:var(--fs-600);}
h4{font-size:var(--fs-500);}

/* Links */
a{
    color: var(--clr-accent-300);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
a:hover,
a:focus-visible{
    color: var(--clr-accent-500);
}

/* Containers */
.container{
    width: min(90%, 70rem);
    margin-inline: auto;
}
.is-two-thirds{
    max-width: 66vw;
}
.section{
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
}

/* ========================================================
   Utility Classes
   ====================================================== */
.text-center{ text-align:center; }
.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}
.grid-auto{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
    gap:2rem;
}

/* ========================================================
   Glassmorphism Wrapper
   ====================================================== */
.glassmorphic{
    background: var(--glass-bg);
    border: 1px solid var(--glass-brdr);
    backdrop-filter: blur(var(--blur-level)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-level)) saturate(180%);
}

/* ========================================================
   Navigation
   ====================================================== */
.header{
    position:fixed;
    top:0; left:0; width:100%;
    z-index:1000;
    padding-block:.75rem;
    background:linear-gradient(135deg,hsla(215,30%,10%,.7),hsla(215,30%,5%,.3));
    backdrop-filter:blur(8px);
}
.logo{
    font-family:var(--ff-heading);
    font-size:1.5rem;
    font-weight:800;
    color:var(--clr-primary-300);
}
.nav ul{
    list-style:none;
    display:flex;
    gap:2rem;
}
.nav a{font-weight:600;}

/* Burger */
.burger{
    display:none;
    background:none;
    border:none;
}
@media(max-width: 768px){
    .nav{display:none;}
    .nav.nav-open{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:100%;
        right:0;
        background:var(--clr-neutral-700);
        width:60vw;
        padding:2rem;
        box-shadow:var(--shadow-s);
    }
    .burger{
        display:block;
        width:2rem;
        aspect-ratio:1/1;
        position:relative;
    }
    .burger span{
        position:absolute;
        width:100%;
        height:2px;
        background:var(--clr-neutral-100);
        left:0;
        transition:all .3s ease;
    }
    .burger span:nth-child(1){top:25%;}
    .burger span:nth-child(2){top:50%;}
    .burger span:nth-child(3){top:75%;}
    .burger.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .burger.is-active span:nth-child(2){opacity:0;}
    .burger.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

/* ========================================================
   Hero Section
   ====================================================== */
.hero-area{
    min-height:100vh;
    display:flex;
    align-items:center;
    text-align:left;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    color:#fff; /* Ensures white text */
}
.hero-title{
    font-size:clamp(2.5rem,5vw + 1rem,5rem);
    font-weight:800;
}
.hero-subtitle{
    font-size:var(--fs-600);
    max-width:40rem;
    margin-block:1.25rem 2rem;
}

/* ========================================================
   Buttons
   ====================================================== */
.btn,
button,
input[type='submit']{
    --btn-bg: var(--clr-primary-500);
    --btn-bg-hover: var(--clr-accent-500);
    --btn-text: var(--clr-neutral-100);

    display:inline-block;
    padding:.75rem 2.25rem;
    font-family:var(--ff-heading);
    font-weight:600;
    font-size:var(--fs-400);
    color:var(--btn-text);
    background:var(--btn-bg);
    border:none;
    border-radius:4px;
    cursor:pointer;
    transition:background var(--duration-fast) ease,transform var(--duration-fast) ease;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--btn-bg-hover);
    transform:translateY(-2px);
}
.btn-secondary{
    --btn-bg:var(--clr-accent-400);
    --btn-bg-hover:var(--clr-accent-500);
}
.btn-tertiary{
    --btn-bg:var(--clr-tertiary-400);
    --btn-bg-hover:var(--clr-tertiary-500);
}

/* ========================================================
   Cards (Generic)
   ====================================================== */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--glass-bg);
    border:1px solid var(--glass-brdr);
    backdrop-filter:blur(var(--blur-level)) saturate(160%);
    padding:1.5rem;
    border-radius:12px;
    box-shadow:var(--shadow-s);
}
.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:8px;
    margin-bottom:1rem;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    margin:0 auto;
}

/* ========================================================
   Our Process (Accordion)
   ====================================================== */
.accordion-item{
    border-bottom:1px solid var(--clr-neutral-500);
}
.accordion-header{
    background:none;
    border:none;
    width:100%;
    text-align:left;
    padding:1rem 0;
    font-family:var(--ff-heading);
    font-size:var(--fs-500);
    color:var(--clr-primary-300);
    cursor:pointer;
    position:relative;
}
.accordion-header::after{
    content:"+";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    transition:transform var(--duration-fast);
}
.accordion-header[aria-expanded="true"]::after{
    content:"–";
    transform:translateY(-50%);
}
.accordion-body{
    max-height:0;
    overflow:hidden;
    transition:max-height var(--duration-med) ease;
    color:var(--clr-neutral-300);
}
.accordion-header[aria-expanded="true"] + .accordion-body{
    max-height:20rem;
}

/* ========================================================
   Pricing Grid
   ====================================================== */
.pricing-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.price{
    font-size:var(--fs-600);
    font-weight:700;
    margin-block:1rem;
}

/* ========================================================
   Events & News
   ====================================================== */
.events-gallery,
.news-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
    gap:2rem;
}
.news-cards .card-content a{
    display:inline-block;
    margin-top:1rem;
    font-weight:700;
}

/* 'Read More' link style */
.news-cards .card-content a{
    color:var(--clr-primary-400);
    position:relative;
}
.news-cards .card-content a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}
.news-cards .card-content a:hover::after{
    transform:scaleX(1);
}

/* ========================================================
   Footer
   ====================================================== */
.footer{
    background:linear-gradient(135deg,hsla(215,30%,15%,.8),hsla(215,30%,10%,.8));
    padding-block:4rem 2rem;
    font-size:.875rem;
}
.footer-links,
.footer-social{
    display:flex;
    flex-wrap:wrap;
    gap:1.25rem;
    justify-content:center;
    margin-bottom:1rem;
}
.footer a{
    color:var(--clr-neutral-300);
    font-weight:600;
}
.footer a:hover{color:var(--clr-primary-300);}
.footer-social a{
    border:1px solid var(--clr-neutral-500);
    padding:.25rem .75rem;
    border-radius:4px;
    transition:all var(--duration-fast);
}
.footer-social a:hover{
    background:var(--clr-neutral-500);
    color:var(--clr-neutral-100);
}

/* ========================================================
   Success Page
   ====================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-inline:1.5rem;
    text-align:center;
}

/* ========================================================
   Privacy & Terms Pages
   ====================================================== */
.legal-page{
    padding-top:100px;
}

/* ========================================================
   Scroll-Dependent Effects
   ====================================================== */
/* Fallback animation on .animate class when enters viewport (to be toggled via JS) */
@keyframes fadeSlide{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:translateY(0);}
}
.animate{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .3s ease-out, transform .5s ease-out;
}
.animate.in-view{
    opacity:1;
    transform:translateY(0);
}
/* Experimental CSS Scroll-Timeline for supporting browsers */
@supports (animation-timeline: scroll()){
    @keyframes scroll-reveal{
        from{opacity:0; transform:translateY(20px);}
        to{opacity:1; transform:translateY(0);}
    }
    .animate{
        animation:scroll-reveal linear forwards;
        animation-timeline: view();
        animation-range: entry 20% cover 40%;
    }
}

/* ========================================================
   Media Queries
   ====================================================== */
@media (min-width:60rem){
    .hero-subtitle{font-size:var(--fs-500);}
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}