/* ---------- Base + Variables ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --cal-blue:#003262; --cal-gold:#FDB515; --light-blue:#4285f4;
  --text-dark:#1f2937; --text-light:#6b7280; --bg-light:#f8fafc;
  --white:#ffffff; --gradient-start:#003262; --gradient-end:#4285f4;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, sans-serif;
  line-height:1.6; color:var(--text-dark); overflow-x:hidden;
}

/* ---------- Header / Nav ---------- */
header{
  position:fixed; top:0; width:100%;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(10px);
  z-index:1000; transition:all .3s ease; border-bottom:1px solid rgba(59,130,246,.1);
}
nav{ max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; }
.logo{ font-size:1.5rem; font-weight:700; color:var(--cal-blue); text-decoration:none; }
.nav-links{ display:flex; list-style:none; gap:2rem; }
.nav-links a{ text-decoration:none; color:var(--text-dark); font-weight:500; position:relative; transition:color .3s ease; }
.nav-links a:hover{ color:var(--light-blue); }
.nav-links a::after{ content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--cal-gold); transition:width .3s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

/* ---------- Hero (background set per-page) ---------- */
.hero{
  background-size:cover; background-position:center; background-attachment:fixed;
  color:white; min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(28,28,28,.7) 0%, rgba(59,59,59,.6) 100%);
  z-index:1;
}
.hero-content{ max-width:1200px; margin:0 auto; padding:0 2rem; position:relative; z-index:2; text-align:left; }
.hero h1{ font-size:clamp(2.5rem,5vw,4rem); font-weight:700; margin-bottom:1rem; line-height:1.2; opacity:0; transform:translateY(30px); animation:heroFadeInUp 1s ease .3s forwards; }
.hero-subtitle{ font-size:1.5rem; margin-bottom:2rem; color:var(--cal-gold); font-weight:600; opacity:0; transform:translateY(30px); animation:heroFadeInUp 1s ease .6s forwards; }
.hero p{ font-size:1.2rem; margin-bottom:2rem; max-width:700px; opacity:0; transform:translateY(30px); animation:heroFadeInUp 1s ease .9s forwards; }
.cta-button{
  display:inline-block; background:var(--cal-gold); color:var(--cal-blue);
  padding:1rem 2rem; border-radius:50px; font-weight:600; border:none; cursor:pointer;
  transition:all .4s cubic-bezier(.25,.8,.25,1); position:relative; overflow:hidden;
  transform:translateY(30px); opacity:0; animation:heroFadeInUp 1s ease 1.2s forwards; font-size:1rem;
}
.cta-button::before{ content:''; position:absolute; inset:0; left:-100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left .5s; }
.cta-button:hover::before{ left:100%; }
.cta-button:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 15px 35px rgba(253,181,21,.4); }

/* ---------- Sections / Containers ---------- */
.content-section{ padding:5rem 2rem; }
.container{ max-width:1200px; margin:0 auto; }

/* Section title */
.section-title{
  text-align:center; font-size:2.5rem; font-weight:700; margin-bottom:3rem; color:var(--cal-blue);
  position:relative; opacity:0; transform:translateY(30px); transition:all .8s ease;
}
.section-title.visible{ opacity:1; transform:translateY(0); }
.section-title::after{ content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:80px; height:4px; background:var(--cal-gold); border-radius:2px; }

/* ---------- Cards ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
.card{
  background:white; padding:2rem; border-radius:20px; border-top:4px solid var(--cal-gold);
  box-shadow:0 5px 15px rgba(0,0,0,.1); position:relative; overflow:hidden;
  transition:all .4s cubic-bezier(.25,.8,.25,1); opacity:0; transform:translateY(30px);
}
.card::before{ content:''; position:absolute; inset:0; left:-100%; background:linear-gradient(90deg, transparent, rgba(253,181,21,.1), transparent); transition:left .6s; }
.card:hover::before{ left:100%; }
.card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,.15); border-top-color:var(--light-blue); }
.card.visible{ opacity:1; transform:translateY(0); }
.card h3{ color:var(--cal-blue); margin-bottom:1rem; font-size:1.4rem; transition:color .3s ease; }
.card:hover h3{ color:var(--light-blue); }
.card ul{ list-style:none; margin-top:1rem; }
.card li::before{ content:'→'; color:var(--cal-gold); margin-right:.5rem; font-weight:bold; }

/* ---------- About / Stats ---------- */
.about-section{ background:var(--bg-light); }
.about-content{ font-size:1.1rem; text-align:center; max-width:800px; margin:0 auto 3rem; color:var(--text-light); }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:2rem; margin-top:3rem; }
.stat-card{ background:white; padding:2rem; border-radius:15px; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,.1); opacity:0; transform:translateY(30px); }
.stat-card.visible{ opacity:1; transform:translateY(0); }
.stat-number{ font-size:2.5rem; font-weight:700; color:var(--cal-blue); margin-bottom:.5rem; }
.stat-label{ color:var(--text-light); font-weight:500; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:2rem; margin-top:3rem; }
.team-member{
  background:white; padding:2rem; border-radius:20px; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:all .4s cubic-bezier(.25,.8,.25,1); opacity:0; transform:translateY(30px); position:relative; overflow:hidden;
}
.team-member::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--cal-blue), var(--light-blue)); opacity:0; transition:opacity .3s ease; z-index:0; }
.team-member:hover::before{ opacity:.05; }
.team-member > *{ position:relative; z-index:1; }
.team-member.visible{ opacity:1; transform:translateY(0); }
.team-member:hover{ transform:translateY(-10px) scale(1.05); box-shadow:0 20px 40px rgba(0,0,0,.2); }
.member-avatar{
  width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--cal-blue), var(--light-blue));
  margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:white; transition:all .3s ease;
}
.team-member:hover .member-avatar{ transform:scale(1.1) rotate(5deg); }
.member-name{ font-size:1.2rem; font-weight:600; color:var(--cal-blue); margin-bottom:.5rem; }
.member-role{ color:var(--text-light); font-size:.9rem; }

/* ---------- Projects ---------- */
.project-card{
  background:white; padding:2.5rem; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,.1);
  position:relative; overflow:hidden; margin-bottom:2rem; opacity:0; transform:translateY(30px); transition:all .4s ease;
}
.project-card.visible{ opacity:1; transform:translateY(0); }
.project-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--light-blue), var(--cal-gold)); }
.project-meta{ display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.project-tag{ background:var(--bg-light); color:var(--cal-blue); padding:.3rem .8rem; border-radius:20px; font-size:.8rem; font-weight:500; }

/* ---------- Contact ---------- */
.contact-form{ max-width:600px; margin:0 auto; background:white; padding:2rem; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,.1); }
.form-group{ margin-bottom:1.5rem; }
.form-group label{ display:block; margin-bottom:.5rem; font-weight:500; color:var(--cal-blue); }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:.8rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; transition:border-color .3s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--cal-gold); }

/* ---------- Footer ---------- */
footer{ background:var(--cal-blue); color:white; padding:3rem 2rem 1rem; text-align:center; }
.footer-content{ max-width:1200px; margin:0 auto; }
.footer-logo{ font-size:2rem; font-weight:700; margin-bottom:1rem; color:var(--cal-gold); }
.footer-text{ opacity:.8; margin-bottom:2rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1rem; margin-top:2rem; opacity:.6; }

/* ---------- Animations ---------- */
@keyframes heroFadeInUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.fade-in{ animation:fadeInUp .8s ease forwards; }

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .nav-links{
    flex-direction:column; position:absolute; top:100%; left:0; width:100%;
    background:rgba(255,255,255,.98); backdrop-filter:blur(10px); padding:1rem 2rem; display:none;
  }
  .nav-links.mobile-open{ display:flex; }
  .mobile-menu-btn{ display:block; background:none; border:none; font-size:1.5rem; color:var(--cal-blue); cursor:pointer; }
  .hero h1{ font-size:2.5rem; }
  .hero-subtitle{ font-size:1.2rem; }
  .cards-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .team-grid{ grid-template-columns:1fr; }
}
@media (min-width:769px){ .mobile-menu-btn{ display:none; } }