/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #0a0a0a;
  color: #e8e8e8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
a { text-decoration: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-animate { animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-animate-1 { animation-delay: 0.05s; }
.hero-animate-2 { animation-delay: 0.15s; }
.hero-animate-3 { animation-delay: 0.28s; }
.hero-animate-4 { animation-delay: 0.38s; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0f0f0; color: #0d0d0d; border: none;
  border-radius: 10px; padding: 13px 28px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.18s, transform 0.13s, box-shadow 0.18s;
}
.btn-primary:hover { background: #e2e2e2; transform: translateY(-1px); box-shadow: 0 4px 24px rgba(240,240,240,0.15); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #e8e8e8;
  border: 1.5px solid rgba(232,232,232,0.18);
  border-radius: 10px; padding: 13px 28px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.13s;
}
.btn-secondary:hover { border-color: rgba(232,232,232,0.45); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }

.step-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 32px 28px;
  transition: border-color 0.2s, background 0.2s;
}
.step-card:hover { border-color: rgba(240,240,240,0.15); background: rgba(240,240,240,0.03); }

.feature-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 28px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.feature-card:hover { border-color: rgba(240,240,240,0.15); background: rgba(240,240,240,0.03); }

.nav-logo {
  color: #f0f0f0; font-size: 18px; font-weight: 700;
  font-family: monospace; letter-spacing: -0.3px; transition: color 0.18s;
}
.nav-logo:hover { color: #e2e2e2; }
.nav-link {
  font-size: 14px; font-weight: 500;
  color: rgba(232,232,232,0.55); padding: 7px 14px; transition: color 0.18s;
}
.nav-link:hover { color: #f0f0f0; }
.nav-cta {
  font-size: 14px; font-weight: 600; color: #0d0d0d;
  background: #f0f0f0; padding: 7px 16px; border-radius: 8px; transition: background 0.15s;
}
.nav-cta:hover { background: #e2e2e2; }

@media (max-width: 768px) {
  .hero-heading { font-size: 36px !important; }
  .hero-sub { font-size: 16px !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .btn-row { flex-direction: column !important; align-items: stretch !important; }
  .btn-primary, .btn-secondary { justify-content: center; }
  nav { padding: 0 20px !important; }
}