/* ------------------------------------------------------------------
   FuturaConsult – style.css
   Futuristic ✕ Neo-Brutalism ✕ Pastel
------------------------------------------------------------------ */

/* ========= VARIABLES ========= */
:root{
    /* Palette: Pastel & high-contrast companions */
    --primary          : #A6CFE2;   /* pastel blue */
    --primary-dark     : #6294AF;
    --secondary        : #F7D6E0;   /* pastel pink */
    --secondary-dark   : #D9A8B5;
    --accent           : #FFC37B;   /* pastel orange */
    --accent-dark      : #E8A14D;
    --neutral-100      : #FFFFFF;
    --neutral-900      : #111111;
    --text-main        : #333333;   /* high contrast on light bg */
    --text-light       : #FFFFFF;   /* for dark / overlay bg */
    --shadow           : rgba(0,0,0,.15);
    --radius           : 8px;
    --transition       : all .35s cubic-bezier(.4,0,.2,1);
}

/* ========= RESET & GLOBAL ========= */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Source Sans Pro',sans-serif;
    color:var(--text-main);
    background:var(--neutral-100);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Playfair Display',serif;
    color:var(--neutral-900);
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
    line-height:1.2;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--primary-dark);text-decoration:none;transition:var(--transition);}
a:hover,a:focus{color:var(--accent-dark);text-decoration:underline;}

/* ========= LAYOUT UTILS ========= */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;}
.pastel-bg{background:var(--secondary);}
.pastel-bg-light{background:#FAEEF2;}
section{padding:4rem 0;}
/* offset for fixed header on anchor nav */
[id]:target::before{content:"";display:block;height:70px;margin-top:-70px;}

/* ========= HEADER ========= */
.site-header{
    position:fixed;top:0;left:0;width:100%;z-index:990;
    background:var(--neutral-100);
    box-shadow:0 2px 6px var(--shadow);
    transition:var(--transition);
}
.logo{font-weight:700;font-size:1.5rem;color:var(--neutral-900);}
.main-nav ul{display:flex;gap:1.5rem;list-style:none;}
.main-nav a{font-weight:600;}
.burger{
    display:none;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;
}
.burger span{
    width:25px;height:3px;background:var(--neutral-900);
    transition:var(--transition);
}

/* Mobile Nav */
.mobile-nav{
    position:fixed;top:70px;left:0;width:100%;
    background:var(--neutral-100);transform:translateY(-140%);
    transition:var(--transition);box-shadow:0 8px 16px var(--shadow);
}
.mobile-nav ul{list-style:none;padding:1.5rem;}
.mobile-nav a{display:block;padding:.75rem 0;font-weight:600;border-bottom:1px solid #eee;}
.mobile-nav.open{transform:translateY(0);}
@media (max-width:900px){
    .main-nav{display:none;}
    .burger{display:flex;}
}

/* ========= HERO ========= */
.hero-section{
    position:relative;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed;
    color:var(--text-light);
}
.hero-content{
    padding:8rem 0 6rem;
    text-align:center;
}
.hero-title{font-size:clamp(2rem,5vw,3.5rem);color:var(--text-light);}
.hero-subtitle{margin:1rem auto 2rem;color:var(--text-light);max-width:800px;font-size:1.125rem;}
@media (max-width:600px){.hero-content{padding:6rem 0 4rem;}}

/* ========= BUTTONS ========= */
.btn,
button,
input[type='submit']{
    --btn-bg       : var(--primary);
    --btn-bg-hover : var(--primary-dark);
    --btn-color    : var(--neutral-900);

    display:inline-block;
    padding:.9rem 2.2rem;
    font-weight:700;
    border:2px solid var(--neutral-900);
    border-radius:var(--radius);
    background:var(--btn-bg);
    color:var(--btn-color);
    cursor:pointer;
    transition:var(--transition);
    text-align:center;
}
.btn-primary{--btn-bg:var(--accent);--btn-bg-hover:var(--accent-dark);}
.btn-secondary{--btn-bg:var(--secondary);--btn-bg-hover:var(--secondary-dark);}
.btn:hover,
.btn:focus,
button:hover,
button:focus,
input[type='submit']:hover{
    background:var(--btn-bg-hover);
    transform:translateY(-3px);
    box-shadow:0 6px 12px var(--shadow);
}

/* ========= CARDS ========= */
.card{
    background:var(--neutral-100);
    border:3px solid var(--neutral-900);
    border-radius:var(--radius);
    width:270px;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    transition:var(--transition);
}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px var(--shadow);}
.card-image{width:100%;height:180px;overflow:hidden;}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto;}
.card-content{padding:1.5rem;}
.card-content h3{margin-bottom:.5rem;font-size:1.25rem;}
.card-content p{font-size:.95rem;}

/* ========= PROCESS GRID ========= */
.process-steps .card{flex:1 1 230px;max-width:300px;}

/* ========= WEBINAR CARD ========= */
.webinar-card{max-width:640px;margin:0 auto;}
.webinar-card .card-image{height:320px;}
.webinar-card .btn-secondary{margin-top:1rem;}

/* ========= CLIENT LOGOS ========= */
.clients-logos{gap:2rem;flex-wrap:wrap;margin-top:2rem;}
.clients-logos img{
    width:160px;height:80px;object-fit:contain;filter:grayscale(80%);
    transition:var(--transition);
}
.clients-logos img:hover{filter:grayscale(0%);transform:scale(1.05);}

/* ========= FORM ========= */
.contact-form{max-width:700px;margin:2rem auto 0;display:grid;gap:1.25rem;}
.form-group{display:flex;flex-direction:column;}
label{font-weight:600;margin-bottom:.4rem;}
input,textarea{
    padding:.8rem 1rem;font-size:1rem;border:2px solid var(--neutral-900);
    border-radius:var(--radius);background:#fff;resize:none;
    transition:border-color .25s ease;
}
input:focus,textarea:focus{outline:none;border-color:var(--primary-dark);}

/* ========= MODAL ========= */
.modal{
    position:fixed;inset:0;background:rgba(0,0,0,.75);
    display:none;justify-content:center;align-items:center;z-index:9990;
}
.modal-content{
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(8px);
    border:3px solid var(--neutral-900);
    border-radius:var(--radius);
    padding:2rem;max-width:440px;width:90%;
    text-align:center;
}
.close-modal{
    position:absolute;top:15px;right:18px;font-size:1.5rem;
    background:none;border:none;color:var(--neutral-900);cursor:pointer;
}
.modal.open{display:flex;}
.modal-form{display:grid;gap:1rem;margin-top:1rem;}

/* ========= FOOTER ========= */
.site-footer{
    background:var(--neutral-900);
    color:var(--text-light);
    padding:2rem 0;
}
.footer-info p{margin-bottom:.5rem;}
.footer-nav a{color:var(--text-light);margin:0 .25rem;}
.footer-nav a:hover{text-decoration:underline;}
.social-links a{color:var(--accent);margin:0 .25rem;font-weight:700;}
.social-links a:hover{color:var(--accent-dark);}

/* ========= PARALLAX EFFECT ========= */
@media (prefers-reduced-motion:no-preference){
    .hero-section, .sustainability-section{
        background-attachment:fixed;
        will-change:background-position;
    }
}

/* ========= READ-MORE LINKS ========= */
a.read-more{
    display:inline-block;margin-top:1rem;font-weight:700;
    color:var(--primary-dark);position:relative;padding-right:1.75rem;
}
a.read-more::after{
    content:'→';position:absolute;right:0;top:0;color:var(--accent-dark);
    transition:transform .3s ease;
}
a.read-more:hover::after{transform:translateX(5px);}

/* ========= PAGE: SUCCESS ========= */
.page-success{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:2rem;
}

/* ========= PAGES: PRIVACY & TERMS ========= */
.page-legal{padding-top:100px;padding-bottom:4rem;}
.page-legal h1{text-align:left;margin-bottom:1.5rem;}

/* ========= GLASS-OVERLAY HERO TEXT ========== */
.hero-section::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
    z-index:0;
}
.hero-content{position:relative;z-index:1;}

/* ========= COOKIE POPUP BUTTON (override inline) ========= */
#acceptCookie:hover{background:var(--accent-dark);}

/* ========= UTILITIES ========= */
.text-center{text-align:center;}
.mt-2{margin-top:.5rem;}
.mt-4{margin-top:1rem;}
.mb-4{margin-bottom:1rem;}
.is-two-thirds{flex:0 0 66.666%;max-width:66.666%;}

/* ========= MEDIA QUERIES ========= */
@media (max-width:600px){
    h1{font-size:1.75rem;}h2{font-size:1.5rem;}
    .card{width:90%;}
}