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

:root {
  --color-bg: #09090b;
  --color-surface: #18181b;
  --color-text: #fafafa;
  --color-muted: #a1a1aa;
  --color-accent: #10b981;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* Reveal animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Header scroll state */
.site-header.scrolled .header-backdrop {
  background: rgba(9, 9, 11, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hero glow */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  pointer-events: none;
  transition: transform 0.3s ease;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}

/* Section alternation */
.section-light {
  background: rgba(255, 255, 255, 0.02);
}

.section-light .advantage-card h3 {
  color: #fafafa;
}

/* Article content */
.article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fafafa;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-content ul,
.article-content ol {
  padding-left: 1.25rem;
  margin: 1rem 0;
}

.article-content li {
  margin: 0.5rem 0;
}

.article-content strong {
  color: #fafafa;
}

.portfolio-filter.active {
  background: #10b981;
  color: #09090b;
}

/* FAQ */
details[open] summary {
  color: #10b981;
}

details summary::-webkit-details-marker {
  display: none;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Print */
@media print {
  .site-header,
  .fixed.bottom-6 {
    display: none !important;
  }
}