/* === Variables === */
:root {
  --bg-light: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
  --bg-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
  --text-light: #333;
  --text-dark: #f0f0f0;
  --navbar-light: rgba(44, 62, 80, 0.9);
  --navbar-dark: rgba(30,30,30,0.95);
  --card-light: white;
  --card-dark: #2c2c2c;
  --btn-light: #27ae60;
  --btn-dark: #16a085;
  --btn-hover-light: #219150;
  --btn-hover-dark: #138d75;
}

/* Global Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-light);
  color: var(--text-light);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.5s, color 0.5s;
  scroll-behavior: smooth;
}
body.dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* Loading Screen */
#loading-screen {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: var(--bg-light);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 9999;
}
body.dark #loading-screen { background: var(--bg-dark); }
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #27ae60;
  border-radius: 50%;
  width: 60px; height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Navbar */
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navbar-light);
  padding: 15px 40px; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px);
  transition: background 0.5s;
}
body.dark .navbar { background: var(--navbar-dark); }
.logo { display: flex; align-items: center; font-size: 20px; font-weight: bold; color: white; }
.logo img { width: 40px; margin-right: 10px; }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { color: white; text-decoration: none; font-weight: bold; transition: 0.3s; }
.nav-links a:hover { color: #74ebd5; }
#theme-toggle { background: none; border: none; font-size: 22px; cursor: pointer; color: white; transition: transform 0.3s; }
#theme-toggle:hover { transform: rotate(20deg); }

/* Hero */
.hero { height: 90vh; display: flex; justify-content: center; align-items: center; text-align: center;
       background: url("assets/grass1.png") no-repeat center/200px; perspective: 1000px; }
.hero-content {
  background: rgba(255,255,255,0.8); padding:50px; border-radius:20px; animation: fadeUp 1s ease-in-out;
  transform-style: preserve-3d;
}
body.dark .hero-content { background: rgba(0,0,0,0.6); }
.hero h1 { font-size:40px; margin-bottom:20px; text-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
.hero p { font-size:18px; margin-bottom:20px; }
.btn { display:inline-block; padding:12px 24px; background: var(--btn-light); color:white;
      border-radius:8px; text-decoration:none; font-weight:bold; transition: all 0.3s; }
body.dark .btn { background: var(--btn-dark); }
.btn:hover { background: var(--btn-hover-light); transform: scale(1.05) rotate(1deg); box-shadow: 0 0 20px rgba(0,0,0,0.3);}
body.dark .btn:hover { background: var(--btn-hover-dark); }
.pulse { animation: pulse 2s infinite; }

/* Sections */
.section { padding:80px 20px; text-align:center; }
.section h2 { font-size:28px; margin-bottom:20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.cards .card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:30px; }
.card { background: var(--card-light); padding:20px; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,0.1);
       transition: transform 0.3s, background 0.5s; transform-style: preserve-3d; }
body.dark .card { background: var(--card-dark); }
.card:hover { transform: rotateY(15deg) rotateX(5deg) translateY(-10px); }

/* Footer */
footer { background: var(--navbar-light); color:white; text-align:center; padding:15px 0; transition: background 0.5s;}
body.dark footer { background: var(--navbar-dark); }

/* Animations */
@keyframes fadeUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes pulse {0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Scroll Progress Bar */
#progress-bar { position: fixed; top:0; left:0; height:5px; background:#27ae60; width:0; z-index:10000; transition: width 0.25s; }
body.dark #progress-bar { background: #16a085; }

/* Smooth hover for cards */
.card { cursor: pointer; }