/* ===================================================================
   GLOBAL IMPORTS & ROOT VARIABLES
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&family=Rubik:wght@300;400;500&display=swap');

:root{
  /* Neutral palette */
  --bg-light:#E8ECF1;
  --bg-dark:#CDD4DE;
  --surface:#F6F8FA;
  --text-primary:#222222;
  --text-secondary:#555555;
  --text-invert:#FFFFFF;
  /* Accent palette */
  --accent:#6C63FF;
  --accent-dark:#524BDA;
  --accent-light:#8F8AFF;

  /* Gradients */
  --gradient-primary:linear-gradient(135deg,#e8ecf1 0%,#dfe5ee 50%,#cdd4de 100%);
  --gradient-accent:linear-gradient(135deg,#6C63FF 0%,#8F8AFF 100%);

  /* Elevation */
  --shadow-light:8px 8px 16px rgba(0,0,0,0.1),
                 -8px -8px 16px rgba(255,255,255,0.7);
  --shadow-inner:inset 4px 4px 8px rgba(0,0,0,0.08),
                 inset -4px -4px 8px rgba(255,255,255,0.8);

  /* Radius & transition */
  --radius:18px;
  --transition:all .3s ease;
}

/* ================================================================
   RESET & BASE TYPOGRAPHY
================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Rubik',sans-serif;
  color:var(--text-primary);
  background:var(--gradient-primary);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  text-align:center;
  color:var(--text-primary);
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
p,li{font-size:1rem;color:var(--text-secondary);}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ================================================================
   LAYOUT UTILITIES
================================================================ */
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.is-two-thirds{width:66.666%;margin:0 auto;}
.section{padding:4rem 0;}
.neomorph{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-light);
}
.parallax-bg{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}
.parallax-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  border-radius:var(--radius);
}

/* ================================================================
   NAVIGATION
================================================================ */
header{
  position:fixed;
  top:0;left:0;width:100%;
  background:var(--surface);
  box-shadow:var(--shadow-light);
  z-index:500;
}
nav.container{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 0;
}
.logo{
  font-family:'Manrope',sans-serif;
  font-size:1.5rem;
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.nav-list{
  display:flex;gap:1.25rem;
}
.nav-list a{
  color:var(--text-primary);
  text-decoration:none;
  font-weight:500;
  position:relative;
  transition:var(--transition);
}
.nav-list a::after{
  content:'';
  position:absolute;left:0;bottom:-4px;
  width:0;height:2px;
  background:var(--accent);
  transition:var(--transition);
}
.nav-list a:hover,
.nav-list a:focus{
  color:var(--accent-dark);
}
.nav-list a:hover::after{width:100%;}
.burger{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;border:none;
}
.burger span{
  width:24px;height:2px;background:var(--text-primary);
  transition:var(--transition);
}
/* Mobile nav */
@media(max-width:768px){
  .nav-list{position:absolute;top:100%;right:0;
    flex-direction:column;background:var(--surface);
    padding:1rem;width:200px;display:none;
    border-radius:0 0 var(--radius) var(--radius);
  }
  .nav-list.active{display:flex;}
  .burger{display:flex;}
}

/* ================================================================
   HERO
================================================================ */
#hero{
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-repeat:no-repeat;
  position:relative;
}
#hero::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.35));
}
.hero-content{
  position:relative;
  text-align:center;
  color:var(--text-invert);
  max-width:800px;
}
.hero-sub{margin:1rem 0 2rem;}
.btn-primary{background:var(--accent);}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent);}

/* ================================================================
   BUTTONS & LINKS
================================================================ */
.btn,.btn-primary,.btn-outline,
button,input[type='submit']{
  display:inline-block;
  padding:.75rem 1.5rem;
  border:none;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:1rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  text-align:center;
  color:var(--text-invert);
}
.btn-primary{
  background:var(--accent);
  box-shadow:var(--shadow-light);
}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{
  color:var(--accent);border:2px solid var(--accent);
}
.btn-outline:hover{
  background:var(--accent);color:var(--text-invert);
}
/* Read more link */
.read-more{
  color:var(--accent);
  font-weight:500;
  position:relative;
}
.read-more::after{
  content:'→';
  margin-left:.25rem;
  transition:transform .3s ease;
}
.read-more:hover::after{transform:translateX(4px);}

/* ================================================================
   CARD COMPONENT
================================================================ */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-light);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.card-image{
  width:100%;
  height:220px;
  overflow:hidden;
  border-radius:calc(var(--radius) - 4px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin:0 auto;
}
.card-content h3{margin-bottom:.5rem;}

/* ================================================================
   TIMELINE
================================================================ */
.timeline{display:grid;gap:2rem;position:relative;}
.timeline::before{
  content:'';
  position:absolute;left:50%;top:0;
  width:4px;height:100%;
  background:var(--bg-dark);
  transform:translateX(-50%);
}
.timeline-item{
  display:grid;gap:1rem;grid-template-columns:1fr 1fr;
  align-items:center;
}
.timeline-date{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:1.25rem;
  text-align:right;
}
.timeline-item:nth-child(even) .timeline-date{text-align:left;}
.timeline-item:nth-child(even) .card{grid-column:1;}
.timeline-item:nth-child(even) .timeline-date{grid-column:2;}
@media(max-width:768px){
  .timeline{gap:3rem;}
  .timeline::before{left:8px;}
  .timeline-item{grid-template-columns:1fr;padding-left:2rem;}
  .timeline-date{text-align:left;}
}

/* ================================================================
   GALLERY GRID
================================================================ */
.gallery-grid, .team-grid, .resource-cards{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

/* ================================================================
   FORM
================================================================ */
form{
  display:flex;flex-direction:column;
  gap:1rem;
}
.form-group label{font-weight:500;}
.form-group input,
.form-group textarea{
  width:100%;
  padding:.75rem 1rem;
  border:none;
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-inner);
  font-family:'Rubik',sans-serif;
  transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus{outline:none;box-shadow:var(--shadow-light);}

/* ================================================================
   FOOTER
================================================================ */
footer{
  margin-top:4rem;
  padding:2rem 0;
  background:var(--surface);
  box-shadow:var(--shadow-inner);
}
.footer-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-bottom:1.5rem;
}
footer h3{margin-bottom:1rem;font-size:1.25rem;}
footer a{
  color:var(--accent);
  text-decoration:none;
  transition:color .3s ease;
}
footer a:hover{color:var(--accent-dark);}
footer p{font-size:.9rem;color:var(--text-secondary);}
footer ul li+li{margin-top:.25rem;}

/* ================================================================
   SOCIAL LINKS (TEXT ONLY)
================================================================ */
footer ul li a::before{
  content:'• ';
  color:var(--accent-dark);
}

/* ================================================================
   COOKIES POPUP
================================================================ */
#cookiePopup{
  font-size:.9rem;
}
#cookiePopup button{border-radius:8px;}

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

/* ================================================================
   PRIVACY & TERMS TOP PADDING
================================================================ */
.legal-page{padding-top:100px;}

/* ================================================================
   SCROLL EFFECTS (utility)
================================================================ */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* ================================================================
   MEDIA QUERIES
================================================================ */
@media(max-width:576px){
  .container{width:92%;}
  h1{font-size:2rem;}
  h2{font-size:1.5rem;}
  .timeline-date{font-size:1rem;}
}