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

:root {
  --public-bg: #070b17;
  --public-surface: rgba(255, 255, 255, 0.055);
  --public-surface-soft: rgba(255, 255, 255, 0.035);
  --public-border: rgba(255, 255, 255, 0.14);
  --public-border-soft: rgba(255, 255, 255, 0.09);
  --public-border-strong: rgba(167, 139, 250, 0.45);
  --public-text: #f8fafc;
  --public-muted: rgba(203, 213, 225, 0.88);
  --public-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  --public-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body {
  font-family: "Outfit", system-ui, sans-serif !important;
  background:
    linear-gradient(135deg, #070a12 0%, #0f172a 35%, #0c1220 70%, #070a12 100%),
    radial-gradient(ellipse 100% 80% at 15% 85%, rgba(99, 102, 241, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 85% 15%, rgba(129, 140, 248, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(20, 184, 166, 0.06) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--public-text) !important;
}

.about-wrapper,
.blog-wrapper,
.policy-wrapper,
.faq-wrapper {
  width: min(1220px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 76px) clamp(16px, 4.5vw, 44px) clamp(56px, 8vw, 110px) !important;
}

.about-hero,
.blog-header,
.policy-header,
.faq-header,
.featured-post,
.newsletter-section,
.cta-section {
  border-radius: 24px !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 52%, rgba(15, 23, 42, 0.42) 100%) !important;
  border: 1px solid var(--public-border) !important;
  box-shadow: var(--public-shadow), var(--public-inset) !important;
  backdrop-filter: blur(24px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.28) !important;
}

.blog-header,
.policy-header,
.faq-header {
  padding: clamp(30px, 5vw, 44px) clamp(20px, 4vw, 36px) !important;
}

.about-hero h1,
.blog-header h1,
.policy-header h1,
.faq-header h1 {
  font-family: "Syne", "Outfit", sans-serif !important;
  font-size: clamp(2rem, 5.2vw, 3.2rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}

.section-header h2,
.policy-section-header h2,
.faq-section-header h2 {
  font-family: "Syne", "Outfit", sans-serif;
  letter-spacing: -0.02em;
}

.about-hero .tagline,
.blog-header p,
.policy-header p,
.faq-header p,
.policy-section-body p,
.policy-section-body li,
.faq-section-body p,
.faq-section-body li,
.update-content p,
.tip-card p,
.community-card p,
.roadmap-card p,
.featured-content p {
  color: var(--public-muted) !important;
}

.about-section,
.blog-section {
  margin-bottom: clamp(30px, 6vw, 54px) !important;
}

.story-content,
.stat-card,
.feature-card,
.mission-card,
.timeline-content,
.tech-item,
.update-card,
.tip-card,
.community-card,
.roadmap-card,
.featured-image,
.policy-toc,
.faq-toc,
.policy-section,
.faq-section,
.faq-search input {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, var(--public-surface-soft) 55%, rgba(15, 23, 42, 0.36) 100%) !important;
  border: 1px solid var(--public-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--public-shadow), var(--public-inset) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}

.policy-toc a,
.faq-toc a {
  border-left: 3px solid transparent !important;
}

.policy-toc a:hover,
.faq-toc a:hover,
.policy-section-header:hover,
.faq-section-header:hover {
  background: rgba(129, 140, 248, 0.15) !important;
}

.policy-toc a.active,
.faq-toc a.active {
  background: rgba(129, 140, 248, 0.2) !important;
  border-left-color: var(--public-border-strong) !important;
}

.stat-card,
.feature-card,
.mission-card,
.timeline-content,
.tech-item,
.update-card,
.tip-card,
.community-card,
.roadmap-card,
.policy-section,
.faq-section {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.stat-card:hover,
.feature-card:hover,
.mission-card:hover,
.timeline-content:hover,
.tech-item:hover,
.update-card:hover,
.tip-card:hover,
.community-card:hover,
.roadmap-card:hover,
.policy-section:hover,
.faq-section:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: var(--public-shadow), 0 0 36px rgba(129, 140, 248, 0.12), var(--public-inset) !important;
}

.about-hero-logo,
.community-avatar,
.stat-icon,
.feature-icon,
.tip-icon {
  box-shadow: 0 10px 28px rgba(129, 140, 248, 0.3);
}

.btn-secondary,
.newsletter-cta .twitter-btn {
  background: var(--public-surface) !important;
  border-color: var(--public-border-soft) !important;
}

.btn-primary,
.read-more-btn,
.newsletter-cta .discord-btn {
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}

.faq-search {
  position: relative;
}

.faq-search i {
  left: calc(50% - 280px) !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1024px) {
  .policy-wrapper,
  .faq-wrapper {
    grid-template-columns: 1fr !important;
  }

  .faq-search i {
    left: 18px !important;
  }
}

@media (max-width: 768px) {
  .about-wrapper,
  .blog-wrapper,
  .policy-wrapper,
  .faq-wrapper {
    padding: 22px 14px 46px !important;
  }

  .section-header h2 {
    font-size: 1.45rem !important;
  }
}