:root{
  --cream:#F4F1EC;
  --beige:#D9CFC4;
  --navy:#0B2C4A;
  --black:#0A0A0A;
  --white:#ffffff;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Segoe UI, sans-serif;
}

.logo{
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: #0B2C4A; /* navy from your palette */
}

body{
  background:var(--cream);
  color:var(--black);
}

/* HEADER */
.header{
  position:fixed;
  top:0;
  width:100%;
  height:80px;
  background:var(--cream);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 80px;
  z-index:1000;
}

nav a{
  margin-left:28px;
  text-decoration:none;
  font-weight:600;
  color:var(--black);
}

/* HERO */
.hero{
  height:100vh;
  padding-top:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(
    180deg,
    var(--cream),
    var(--beige),
    var(--cream)
  );
}

.hero-content{
  text-align:center;
}

.hero h1{
  font-size:56px;
  color:var(--navy);
}

.hero h1 span{
  color:var(--black);
}

.hero p{
  margin-top:10px;
  opacity:.8;
}

.cta{
  margin-top:30px;
  padding:14px 34px;
  background:var(--beige);
  border:none;
  cursor:pointer;
  font-weight:600;
}

/* SECTIONS */
.section{
  padding:120px 10%;
}

.section-title{
  font-size:38px;
  margin-bottom:40px;
}

.white{color:white}

/* ABOUT */
.about{
  display:flex;
  gap:60px;
  align-items:center;
}

.about img{
  width:320px;
  border-radius:16px;
}

/* STATS */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:var(--navy);
  color:white;
  padding:80px 10%;
  text-align:center;
}

.stat h3{
  font-size:40px;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
}

.card{
  background:white;
  padding:50px;
  border-radius:16px;
  text-align:center;
}

/* PROJECTS */
.projects{
  background:var(--navy);
  padding:120px 10%;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.project-card{
  background:linear-gradient(180deg,#152f4d,#000);
  color:white;
  padding:80px 30px;
  border-radius:20px;
}

/* VISION */
.vision-text{
  max-width:700px;
  font-size:18px;
}

/* CONTACT */
.contact{
  background:var(--navy);
  color:white;
  padding:120px 10%;
}

.contact form{
  max-width:500px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact input,.contact textarea{
  padding:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:white;
}

.contact button{
  background:var(--beige);
  border:none;
  padding:14px;
}

.socials{
  margin-top:30px;
}

.socials a{
  margin-right:15px;
  color:var(--beige);
}

/* FOOTER */
footer{
  background:black;
  color:white;
  text-align:center;
  padding:30px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .about{
    flex-direction:column;
    text-align:center;
  }
  .header{
    padding:0 30px;
  }
}





/* ===== Scroll Progress Indicator ===== */
#scroll-indicator{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    #0B2C4A,  /* navy */
    #D9CFC4   /* beige */
  );
  z-index: 9999;
}



/* ===== Magnetic Button Base ===== */
.magnetic{
  transition: transform 0.25s ease;
  will-change: transform;
}



/* ===== Magnetic Elements Smoothness ===== */
.magnetic,
.magnetic-card,
.magnetic-project{
  transition: transform 0.25s ease;
  will-change: transform;
}





/* ===== Cinematic Reveal Base ===== */
/* ===== Cinematic Reveal (Safe Version) ===== */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.9s ease;
}

.reveal.active{
  opacity: 1;
  transform: translateY(0);
}

/* FAILSAFE: prevent permanent invisibility */
.no-js .reveal{
  opacity: 1;
  transform: none;
}



/* ===== Blueprint Micro Aesthetic ===== */

/* Hero blueprint text */
.blueprint-overlay{
  position:absolute;
  bottom:40px;
  display:flex;
  gap:26px;
  font-size:12px;
  letter-spacing:4px;
  color:#0B2C4A;
  opacity:0.45;
  animation: blueprintFloat 14s ease-in-out infinite alternate;
}

@keyframes blueprintFloat{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-16px); }
}

/* Vision subtle line */
.blueprint-line{
  width:120px;
  height:2px;
  background:linear-gradient(
    90deg,
    #0B2C4A,
    #D9CFC4
  );
  margin-top:40px;
  opacity:0.6;
  animation: blueprintScan 6s linear infinite;
}

@keyframes blueprintScan{
  0%   { width:0; }
  100% { width:120px; }
}