/* ------------------------- */
/*        THEME SETUP        */
/* ------------------------- */
:root{
    /* Palette – Monochrome Brutalism */
    --clr-bg:#f4f4f4;
    --clr-bg-dark:#111111;
    --clr-bg-muted:#e5e5e5;
    --clr-txt:#222222;
    --clr-txt-light:#ffffff;
    --clr-primary:#000000;
    --clr-accent:#444444;
    --clr-shadow:rgba(0,0,0,.12);
    --radius:4px;
    --transition:.35s cubic-bezier(.4,0,.2,1);
    --gap:2rem;
    --card-h:260px;           /* fixed img height for cards            */
    --blur-bg:rgba(255,255,255,.2);
}

/* ------------------------- */
/*       GLOBAL RESET        */
/* ------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    background:var(--clr-bg);
    color:var(--clr-txt);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:900;
    color:var(--clr-primary);
    letter-spacing:-.5px;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
    margin-bottom:1rem;
    text-align:center;
}
p,li{font-size:1rem;max-width:820px}
ul{list-style:none}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:var(--clr-primary);transition:color .25s}
a:hover,a:focus{color:var(--clr-accent)}
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
    padding-block:4rem;
}
.section-title{font-size:2rem;margin-bottom:2rem}

/* ------------------------- */
/*           HEADER          */
/* ------------------------- */
.site-header{
    position:sticky;top:0;left:0;z-index:100;
    background:var(--clr-bg);
    border-bottom:2px solid var(--clr-primary);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
.logo{font-size:1.5rem;font-weight:900;text-transform:uppercase}
.main-nav ul{display:flex;gap:2rem}
.main-nav a{font-weight:600}
.burger{display:none;background:none;border:none;cursor:pointer}
.burger span{
    display:block;width:24px;height:2px;background:var(--clr-primary);margin:5px 0;transition:var(--transition)
}
@media(max-width:840px){
    .main-nav{position:absolute;inset:0 0 auto auto;top:64px;background:var(--clr-bg-dark);width:220px;transform:translateX(100%);transition:var(--transition);padding:2rem}
    .main-nav.open{transform:translateX(0)}
    .main-nav ul{flex-direction:column}
    .main-nav a{color:var(--clr-txt-light)}
    .burger{display:block}
}

/* ------------------------- */
/*            HERO           */
/* ------------------------- */
.hero-section{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:var(--clr-txt-light);
    text-align:center;
    padding:6rem 0 8rem;
}
.hero-section::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.6) 100%);
    z-index:0;
}
.hero-section .container{position:relative;z-index:1}
.hero-title{font-size:3rem;margin-bottom:1.5rem;color:#fff}
.hero-sub{font-size:1.25rem;margin-bottom:2rem;color:#fff}

/* ------------------------- */
/*           BUTTONS         */
/* ------------------------- */
.btn,
button,
input[type='submit']{
    display:inline-block;
    padding:.75rem 2rem;
    border:2px solid var(--clr-primary);
    background:var(--clr-primary);
    color:var(--clr-txt-light);
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    transition:var(--transition);
    border-radius:var(--radius);
}
.btn-secondary{background:transparent;color:var(--clr-primary)}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-3px);
    box-shadow:4px 4px 0 0 var(--clr-accent);
    background:var(--clr-accent);
}
.btn-secondary:hover{background:var(--clr-primary);color:var(--clr-txt-light)}

/* ------------------------- */
/*  ACCORDIONS & TOGGLES     */
/* ------------------------- */
details{border:2px solid var(--clr-primary);padding:1rem;margin-bottom:1rem;border-radius:var(--radius)}
summary{cursor:pointer;font-weight:700;outline:none}
.toggle-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}
.switch{position:relative;display:inline-block;width:60px;height:34px}
.switch input{opacity:0;width:0;height:0}
.slider{
    position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
    background:var(--clr-accent);
    transition:.4s;border-radius:34px
}
.slider:before{
    position:absolute;content:'';height:26px;width:26px;left:4px;bottom:4px;
    background:white;transition:.4s;border-radius:50%
}
input:checked + .slider{background:var(--clr-primary)}
input:checked + .slider:before{transform:translateX(26px)}
.toggle-label{font-weight:600}

/* ------------------------- */
/*           CARDS           */
/* ------------------------- */
.card{
    background:var(--clr-bg-muted);
    border:2px solid var(--clr-primary);
    box-shadow:6px 6px 0 var(--clr-primary);
    border-radius:var(--radius);
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:1.5rem;gap:1rem;
    transition:var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--clr-accent)}
.card-image{width:100%;height:var(--card-h);overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-image img{height:100%;object-fit:cover;margin:0 auto}
.carousel{display:grid;grid-auto-flow:column;gap:var(--gap);overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
.carousel .card{scroll-snap-align:start;min-width:240px}

/* ------------------------- */
/*        RESOURCES          */
/* ------------------------- */
.resource-links{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.resource-links a{font-weight:600;border-bottom:2px solid transparent}
.resource-links a:hover{border-color:var(--clr-primary)}

/* ------------------------- */
/*        WEBINARS           */
/* ------------------------- */
.webinars-section details{background:var(--clr-bg-muted)}
.webinars-section summary{font-size:1.1rem}

/* ------------------------- */
/*          PRICING          */
/* ------------------------- */
.pricing-grid{
    display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* ------------------------- */
/*         CONTACT           */
/* ------------------------- */
.contact-section{
    background-size:cover;background-repeat:no-repeat;position:relative;
}
.contact-section::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.55) 100%);
    z-index:0;
}
.contact-section .container{position:relative;z-index:1}
form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
label{font-weight:700;color:var(--clr-txt-light)}
input,textarea{
    padding:.75rem;
    border:2px solid var(--clr-primary);
    border-radius:var(--radius);
    background:var(--clr-bg);
    font-family:inherit;
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-accent)}

/* ------------------------- */
/*          FOOTER           */
/* ------------------------- */
.site-footer{
    background:var(--clr-bg-dark);
    color:var(--clr-txt-light);
    text-align:center;
    padding:3rem 1rem;
}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-bottom:1rem}
.footer-nav a{color:var(--clr-txt-light)}
.footer-nav a:hover{color:var(--clr-bg-muted)}
.social a{color:var(--clr-bg-muted);font-weight:700}
.social a:hover{color:#fff}

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

/* ------------------------- */
/*       LEGAL PAGES         */
/* ------------------------- */
.legal-page{padding-top:100px}

/* ------------------------- */
/*       UTILITY CLASSES     */
/* ------------------------- */
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center}
.text-center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.glass{
    background:var(--blur-bg);
    backdrop-filter:blur(10px);
    box-shadow:0 4px 20px var(--clr-shadow);
}
.parallax{transform:translateZ(0);will-change:transform}

/* ------------------------- */
/*       HOVER EFFECTS       */
/* ------------------------- */
.read-more{font-weight:700;border-bottom:2px solid var(--clr-primary)}
.read-more:hover{background:var(--clr-primary);color:var(--clr-txt-light)}

/* ------------------------- */
/*  HAND-DRAWN ANIMATIONS    */
/* ------------------------- */
@keyframes scribble{
    0%{stroke-dashoffset:1000}
    100%{stroke-dashoffset:0}
}
.hand-drawn path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:scribble 3s ease forwards;
}

/* ------------------------- */
/*     SOCIAL ICON TEXT      */
/* ------------------------- */
.social a{position:relative;padding:.25rem .5rem}
.social a::after{
    content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--clr-txt-light);
    transition:width .3s
}
.social a:hover::after{width:100%}