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

html { scroll-behavior: smooth; }
body { background-color: #00070C; color: #E8EDF5; }

.gradient-text {
  background: linear-gradient(135deg, #02D095 0%, #33DAAA 50%, #02D095 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(2,208,149,0.12) 0%, transparent 70%);
  top: -200px; left: 50%; transform: translateX(-50%); pointer-events: none;
}

.card-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(2,208,149,0.06) 0%, transparent 70%);
  top: -50px; left: 50%; transform: translateX(-50%); pointer-events: none;
}

.phase-connector { position: relative; }
.phase-connector::after {
  content: ''; position: absolute; top: 50%; right: -24px; width: 48px; height: 2px;
  background: linear-gradient(90deg, #02D095, transparent);
}
@media (max-width: 768px) { .phase-connector::after { display: none; } }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-answer.open { max-height: 500px; padding-top: 12px; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

.range-slider {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: #1A2B45; outline: none; width: 100%;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #02D095; cursor: pointer; box-shadow: 0 0 10px rgba(2,208,149,0.4);
}
.range-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #02D095; cursor: pointer;
  border: none; box-shadow: 0 0 10px rgba(2,208,149,0.4);
}

.comparison-highlight { background-color: rgba(2,208,149,0.08); }
.comparison-cell-check { color: #02D095; }
.comparison-cell-cross { color: #EF4444; }
.comparison-cell-neutral { color: #6B7A90; }

.btn-primary {
  background: linear-gradient(135deg, #02D095, #01a876); color: #00070C;
  font-weight: 600; padding: 14px 32px; border-radius: 12px;
  transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border: none; cursor: pointer;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(2,208,149,0.3); }

.btn-secondary {
  background: transparent; border: 1px solid #02D095; color: #02D095;
  font-weight: 500; padding: 12px 28px; border-radius: 12px;
  transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer;
}
.btn-secondary:hover { background: rgba(2,208,149,0.1); }

.btn-back {
  background: rgba(2,208,149,0.1); border: 1px solid rgba(2,208,149,0.3); color: #02D095;
  font-weight: 500; padding: 10px 20px; border-radius: 10px;
  transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-size: 14px;
}
.btn-back:hover { background: rgba(2,208,149,0.2); border-color: #02D095; }

.stat-number { font-variant-numeric: tabular-nums; }

.feature-card {
  background: linear-gradient(180deg, #0A1628 0%, #00070C 100%);
  border: 1px solid #1A2B45; border-radius: 16px; padding: 32px;
  position: relative; overflow: hidden; transition: all 0.2s ease;
}
.feature-card:hover { border-color: rgba(2,208,149,0.3); transform: translateY(-2px); }

.section-divider { height: 1px; background: linear-gradient(90deg, transparent, #1A2B45, transparent); }

.calc-result {
  background: linear-gradient(135deg, rgba(2,208,149,0.1), rgba(2,208,149,0.02));
  border: 1px solid rgba(2,208,149,0.2); border-radius: 12px; padding: 20px;
}

.newsletter-input {
  background: #0A1628; border: 1px solid #1A2B45; border-radius: 10px;
  padding: 12px 16px; color: #E8EDF5; outline: none; transition: border-color 0.2s ease;
}
.newsletter-input:focus { border-color: #02D095; }
.newsletter-input::placeholder { color: #4A5C73; }