/* Reset & global */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Inter',sans-serif;scroll-behavior:smooth;transition:background 0.8s ease,color 0.8s ease;}
a{text-decoration:none;color:inherit;}

/* THEMES */
body.light{background:#FFF9F0;color:#111;}
body.dark{background:#0D1B2A;color:#fff;}

/* Sticky nav */
nav.sticky-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 15px;
  z-index: 2001;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}
nav.sticky-header.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.3);
}
nav.sticky-header a{color:inherit;font-weight:bold; transition: 0.5s;}
nav.sticky-header a:hover{color:#ffb361;transform:scale(1.1);}

/* Theme toggle */
#themeToggle {position: fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;background: rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:3000;transition:all 0.4s;}
#themeToggle svg { width:28px;height:28px;fill:currentColor;}
#themeToggle:hover {transform:scale(1.1);background: rgba(255,255,255,0.25);}

/* Hamburger menu for mobile */
#menuBtn{display:none;width:40px;height:40px;background:rgba(255,255,255,0.2);border:none;border-radius:10px;cursor:pointer;backdrop-filter:blur(6px);position:fixed;top:20px;left:20px;z-index:2002;}
#menuBtn span{display:block;width:25px;height:3px;margin:5px auto;background:#fff;border-radius:2px;transition:0.4s;}
#menuOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:scale(0);transition:transform 0.4s ease;z-index:2000;}
#menuOverlay.show{transform:scale(1);}
#menuOverlay a{color:#fff;font-size:2rem;margin:20px;transition:color 0.3s;}
#menuOverlay a:hover{color:#FFA94D;transform:scale(1.1);}

/* Hero section (optional) */
header.center {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;

}
header.explore {
  padding: 0px 0px 90px 50px;
}
header.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 40px 20px;
  position: relative; overflow: hidden;
  background-size: 200% 200%;
  transition: background 1s ease;
}
header.hero h1, header.hero p{opacity:0;transform:translateY(20px);animation:fadeInUp 1s ease forwards;}
header.hero h1{font-size:3rem;margin-bottom:20px;}
header.hero p{font-size:1.3rem;margin-bottom:30px;}
.btn{padding:15px 30px;font-weight:bold;border:none;border-radius:50px;background:rgba(255,255,255,0.2);backdrop-filter:blur(8px);cursor:pointer;transition:all 0.4s;}
.btn:hover{transform:scale(1.05) rotate(-1deg);background:rgba(255,255,255,0.3);}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0);}}

/* Page Title for secondary page or hero page text */
.page-title {
  width: 100%;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.5s ease;
}
.page-title h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.4);
}
body.light .page-title h1 {color: #111; text-shadow:0 0 6px rgba(0,0,0,0.2);}
.page-title p {
  font-size: 1.4rem;
  max-width: 800px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  text-shadow:0 0 6px rgba(255,255,255,0.3);
}
body.light .page-title p {color: rgba(0,0,0,0.85); text-shadow:0 0 4px rgba(0,0,0,0.2);}

/* Sections */
.section{width:100%;padding:120px 5%;display:flex;justify-content:center;align-items:center;transition:background 0.8s ease;position:relative;overflow:hidden;}
.section.alt-bg{background: rgba(255,255,255,0.03);}
.section-content{display:flex;max-width:1200px;width:100%;gap:60px;align-items:center;}
.section-content.reverse{flex-direction:row-reverse;}
.section .text{flex:1;}
.section .text h2{font-size:3rem;margin-bottom:30px;color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.4);}
body.light .section .text h2{color:#111;text-shadow:0 0 8px rgba(0,0,0,0.2);}
.section .text p{font-size:1.2rem;line-height:1.8;margin-bottom:20px;}
.section .image{flex:1;display:flex;justify-content:center;align-items:center;}

/* Frosted cards */
.frosted-card{width:100%;max-width:500px;height:500px;border-radius:20px;background: rgba(255,255,255,0.05);backdrop-filter: blur(18px);border:1px solid rgba(255,255,255,0.05);box-shadow:0 0 20px rgba(0,0,0,0.1);display:flex;justify-content:center;align-items:center;font-weight:bold;color:#fff;transition:all 0.5s ease;text-align:center;}
body.light .frosted-card{background: rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.05);box-shadow:0 0 20px rgba(0,0,0,0.05);color:#111;}
.frosted-card:hover{transform: scale(1.08) translateY(-12px);}

/* Footer */
footer{padding:40px 20px;text-align:center;background:rgba(0,0,0,0.2);backdrop-filter:blur(12px);color:#fff;transition:all 0.5s;}
footer a{margin:0 15px;color:#fff;transition:color 0.3s;}
footer a:hover{color:#FFA94D;transform:scale(1.1);}

.footer {
  position: fixed;
  bottom: 3px;
  left: 6px;
  color: #96989c;
}

.footer a {
  text-decoration: none;
  color: #96989c;
}

/* Hero particles */
.particle{position:absolute;border-radius:50%;opacity:0.8;pointer-events:none;}

/* Responsive */
@media(max-width:768px){
  #menuBtn{display:block;}
  header.hero h1,.page-title h1 {font-size:2.2rem;}
  header.hero p,.page-title p {font-size:1.1rem;}
  section h2{font-size:2rem;}
  .section-content,.section-content.reverse{flex-direction:column;gap:40px;}
}