@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-primary: #0a0a1a;
  --bg-secondary: linear-gradient(135deg, #1e1e3f 0%, #2a1e5c 100%);
  --glass: rgba(255,255,255,0.05);
  --text-primary: #ffffff;
  --text-secondary: #b8b8ff;
  --accent: linear-gradient(45deg, #7c3aed, #3b82f6);
  --border-glass: rgba(255,255,255,0.1);
  --nav-bg: rgba(10,10,26,0.9);
}

body { margin: 0; overflow-x: hidden; font-family: 'Inter', sans-serif; }
body.light {
  --bg-primary: #f8fafc;
  --bg-secondary: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  --glass: rgba(0,0,0,0.05);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --border-glass: rgba(0,0,0,0.1);
   --nav-bg: rgba(255,255,255,0.85);
}
body.dark { background: var(--bg-primary); color: var(--text-primary); }

.glass-card {
  background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--border-glass);
  border-radius: 20px; padding: 2rem; transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.glass-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.25); }

nav {
  bbackground: var(--nav-bg); backdrop-filter: blur(20px); position: fixed; width: 100%; z-index: 1000;
}
nav ul { display: flex; list-style: none; margin: 0; padding: 1rem 2rem; gap: 2rem; }
nav a { color: var(--text-primary); text-decoration: none; font-weight: 500; transition: color 0.3s; }
nav a:hover { color: #7c3aed; }
nav a {
  color: inherit;
}
nav {
  color: var(--text-primary);
}
.hero { background: var(--bg-secondary); padding: 150px 0 100px; text-align: center; }
.hero h1 {
  font-size: clamp(3rem, 8vw, 6rem); background: var(--accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0 0 1rem; animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.section { padding: 100px 5%; max-width: 1400px; margin: 0 auto; }
.services-grid, .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px,1fr)); gap: 2rem; }

.theme-toggle {
  position: fixed; top: 20px; right: 20px; background: var(--glass); border: 1px solid var(--border-glass);
  border-radius: 50%; width: 50px; height: 50px; cursor: pointer; z-index: 1001; display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.theme-toggle:hover { transform: scale(1.1); }

form { max-width: 500px; margin: 0 auto; }
form input, form textarea, form button {
  width: 100%; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border-glass); border-radius: 10px;
  background: var(--glass); color: var(--text-primary); box-sizing: border-box;
}
form button { background: var(--accent); border: none; font-weight: 600; cursor: pointer; transition: transform 0.3s; }
form button:hover { transform: scale(1.02); }