/* =========================================================
   style.css  |  INVESTReady
   Minimalist + Neumorphic (volumetric) UI with Analog Scheme
   ========================================================= */

/* -------- ROOT & THEME VARIABLES -------- */
:root{
    /* Analog color palette (greens & teals) */
    --clr-primary: #28a37f;       /* base green-teal */
    --clr-primary-dark: #1e7d61;  /* darker for hover */
    --clr-secondary: #3fbf8c;     /* lighter adjacent */
    --clr-accent: #57d9a0;        /* accent highlight */
    --clr-bg: #f7f9f8;            /* light background */
    --clr-surface: #ffffff;       /* card/background */
    --clr-text: #222222;          /* primary text */
    --clr-text-light: #ffffff;    /* light text */
    --clr-muted: #666666;         /* muted text */

    /* Shadows & Radius */
    --radius:   12px;
    --shadow-sm:0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:0 10px 25px rgba(0,0,0,0.12);

    /* Typography */
    --ff-heading: 'Archivo Black', sans-serif;
    --ff-body:    'Roboto', sans-serif;
    --fs-base:    16px;

    /* Transitions */
    --transition: all .35s ease;
}

/* -------- CSS RESET (minimal) -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:var(--fs-base)}
body{
    font-family:var(--ff-body);
    background:var(--clr-bg);
    color:var(--clr-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

/* -------- GLOBAL UTILS -------- */
.container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 1rem;
}
.is-two-thirds{width:100%} /* fine-tuned via container */

.section-title{
    font-family:var(--ff-heading);
    font-size:2.2rem;
    text-align:center;
    margin-bottom:2rem;
    color:var(--clr-primary-dark);
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
p{margin-bottom:1.25rem;font-size:1rem;}

/* -------- BUTTONS -------- */
.btn-primary,
button,
input[type="submit"]{
    display:inline-block;
    background:var(--clr-primary);
    color:var(--clr-text-light);
    font-weight:600;
    padding:.9rem 2.2rem;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
}
.btn-primary:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--clr-primary-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}
.btn-primary:focus{outline:2px dashed var(--clr-accent);outline-offset:2px}

/* -------- HEADER -------- */
.site-header{
    position:fixed;
    top:0;left:0;width:100%;
    background:rgba(255,255,255,0.9);
    backdrop-filter:saturate(180%) blur(12px);
    z-index:999;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
}
.logo{font-family:var(--ff-heading);font-size:1.5rem;color:var(--clr-primary);text-decoration:none}
.main-nav ul{display:flex;gap:1.5rem;list-style:none}
.main-nav a{
    text-decoration:none;
    color:var(--clr-text);
    font-weight:500;
    transition:color .2s;
}
.main-nav a:hover{color:var(--clr-primary-dark)}

/* Burger (mobile) */
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px}
.burger span{
    width:25px;height:3px;background:var(--clr-text);transition:var(--transition);
}
/* Mobile Overrides */
@media(max-width:768px){
    .main-nav{position:absolute;top:72px;right:0;background:var(--clr-surface);width:240px;transform:translateX(100%);transition:var(--transition);box-shadow:-2px 0 8px rgba(0,0,0,0.08)}
    .main-nav.open{transform:translateX(0)}
    .main-nav ul{flex-direction:column;padding:1.5rem}
    .burger{display:flex}
}

/* -------- HERO -------- */
.hero-section{
    position:relative;
    color:var(--clr-text-light);
    padding:160px 0 120px;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.hero-section::after{ /* subtle overlay for contrast */
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.75) 100%);
}
.hero-section .container{position:relative;z-index:2;text-align:center;}
.hero-title{font-family:var(--ff-heading);font-size:3rem;margin-bottom:1rem;color:#FFFFFF}
.hero-subtitle{font-size:1.1rem;margin-bottom:2rem;color:#e6e6e6}

/* Canvas particle layer */
#particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* -------- SECTIONS GENERAL -------- */
section{padding:80px 0}
section:nth-child(even){background:var(--clr-surface)}
@media(max-width:600px){section{padding:60px 0}}

/* -------- STATS WIDGET -------- */
.stats-widget{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:1.5rem;
    margin-top:2.5rem;
}
.stat{background:var(--clr-surface);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow-sm);text-align:center}
.stat-number{font-family:var(--ff-heading);font-size:2rem;color:var(--clr-primary)}
.stat-label{font-size:.9rem;color:var(--clr-muted)}

/* -------- TIMELINE -------- */
.timeline{position:relative;margin:2rem auto;padding-left:25px;border-left:3px solid var(--clr-primary)}
.timeline-step{margin-bottom:2rem;padding-left:1rem;position:relative}
.timeline-marker{
    position:absolute;left:-11px;top:4px;
    width:18px;height:18px;border-radius:50%;
    background:var(--clr-primary);box-shadow:0 0 0 4px var(--clr-surface);
}
.timeline-content h3{font-weight:700;margin-bottom:.3rem;font-size:1.1rem;color:var(--clr-primary-dark)}

/* -------- CARDS -------- */
.card-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
    background:var(--clr-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:1rem;
    display:flex;flex-direction:column;align-items:center;
    transition:var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-image{
    width:100%;height:220px;
    overflow:hidden;
    border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
}
.card-image img{
    width:100%;height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{text-align:center;padding:1rem}
.card-content h3{font-family:var(--ff-heading);font-size:1.1rem;margin-bottom:.5rem;color:var(--clr-primary-dark)}
.card-content p{font-size:.95rem;color:var(--clr-muted)}

/* -------- COMMUNITY & SUSTAINABILITY BG -------- */
.community-section,
.sustainability-section,
.innovation-section,
.contact-section{
    background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
    color:#FFFFFF;
}
.community-section::after,
.sustainability-section::after,
.innovation-section::after,
.contact-section::after{
   
}
.community-section .container,
.sustainability-section .container,
.innovation-section .container,
.contact-section .container{position:relative;z-index:2}

/* -------- FORM -------- */
form{max-width:650px;margin:0 auto}
.form-group{display:flex;flex-direction:column;margin-bottom:1.25rem}
label{margin-bottom:.35rem;font-weight:500;color:var(--clr-text)}
input,textarea{
    padding:.75rem 1rem;border:1px solid #cccccc;border-radius:var(--radius);
    font-family:var(--ff-body);
    transition:var(--transition);
}
input:focus,textarea:focus{border-color:var(--clr-primary);outline:none;box-shadow:0 0 0 3px rgba(40,163,127,.2)}

/* -------- LINK (Read more) -------- */
a.read-more{
    color:var(--clr-accent);
    text-decoration:none;
    font-weight:600;
    position:relative;
}
a.read-more::after{
    content:'→';margin-left:.25rem;transition:var(--transition);
}
a.read-more:hover{color:var(--clr-primary-dark)}
a.read-more:hover::after{transform:translateX(4px)}

/* -------- FOOTER -------- */
.site-footer{
    background:var(--clr-primary-dark);
    color:var(--clr-text-light);
    padding:60px 0 30px;
}
.footer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:2rem}
.footer-col h3{font-family:var(--ff-heading);font-size:1.2rem;margin-bottom:1rem}
.footer-col ul{list-style:none}
.footer-col a{
    text-decoration:none;
    color:var(--clr-text-light);
    display:block;
    margin-bottom:.5rem;
    transition:var(--transition);
}
.footer-col a:hover{color:var(--clr-accent)}
/* Social text link accent */
.footer-col ul li:nth-child(1) a{color:#1877f2}
.footer-col ul li:nth-child(2) a{color:#1da1f2}
.footer-col ul li:nth-child(3) a{color:#e1306c}

copyright{font-size:.85rem;color:#d4f5e8;text-align:center}

/* -------- COOKIE POPUP -------- */
#cookiePopup .btn-primary{background:var(--clr-accent)}
#cookiePopup .btn-primary:hover{background:var(--clr-secondary)}

/* -------- SUCCESS PAGE -------- */
.success-page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;text-align:center;
    padding:2rem;
}
.success-page h1{font-family:var(--ff-heading);color:var(--clr-primary);margin-bottom:1rem}
.success-page p{max-width:500px;color:var(--clr-muted)}

/* -------- PRIVACY & TERMS -------- */
.legal-page{padding-top:100px;padding-bottom:60px}
.legal-page h1{font-family:var(--ff-heading);margin-bottom:1rem;color:var(--clr-primary-dark)}
.legal-page h2{margin:1.5rem 0 .75rem;font-size:1.25rem;color:var(--clr-primary)}

/* -------- GLASSMORPHISM UTILITY -------- */
.glass{
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:var(--radius);
}

/* -------- PARALLAX (simple) -------- */
.parallax{background-attachment:fixed}

/* -------- ANIMATIONS & HOVERS ADD-ONS -------- */
[data-aos]{will-change:transform,opacity}
.card,.btn-primary,input,textarea{transition:var(--transition)}
.card:hover .card-image img{transform:scale(1.05);}

/* -------- RESPONSIVE TWEAKS -------- */
@media(max-width:480px){
    .hero-title{font-size:2rem}
    .section-title{font-size:1.7rem}
    .stats-widget{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
    .card-image{height:180px}
}