/**
 * RIKXEL Premium Design System Tokens
 */
:root {
  --bg: #fafafa;
  --fg: #0a0a0a;
  --stone: #888780;
  --border: #c4c7c8;
  --aqua: #4dffdf;
  --card-dark: #141414;
  --border-dark: #2a2a2a;
}

* {
  transition-property: background-color, color, border-color;
  transition-duration: 0ms;
}

html {
  overflow-x: hidden;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 800ms ease-in-out,
    color 800ms ease-in-out;
}

body.dark-mode {
  background-color: #0a0a0a;
  color: #fafafa;
}

body.dark-mode .light-only {
  opacity: 0;
  pointer-events: none;
}

body.dark-mode .dark-show {
  display: block !important;
}

/* ── HERO CANVAS AMBIENT ORB ── */
#hero-orb {
  position: absolute;
  top: 50%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%);
  overflow: visible;
  opacity: 0.28;
}

#hero-orb-inner {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  animation: orb-spin-rev 16s linear infinite reverse;
  background:
    radial-gradient(ellipse 60% 55% at 30% 30%, #ff6ec7 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 75% 25%, #ffb347 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 65% 70%, #4dffdf 0%, transparent 58%),
    radial-gradient(ellipse 50% 65% at 20% 75%, #a855f7 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 50%, #ff4f6d 0%, transparent 65%);
  filter: blur(80px);
}

/* ── PERSISTENT SCROLL AMBIENT SYSTEM ── */
@keyframes orb-spin-rev {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.08);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

#orb {
  position: fixed;
  top: 38vh;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left;
  overflow: visible;
  opacity: 0;
}

body.past-dark #orb {
  opacity: 0.55;
}

#orb-inner {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  animation: orb-spin-rev 12s linear infinite;
  background:
    radial-gradient(ellipse 60% 55% at 30% 30%, #ff6ec7 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 75% 25%, #ffb347 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at 65% 70%, #4dffdf 0%, transparent 58%),
    radial-gradient(ellipse 50% 65% at 20% 75%, #a855f7 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 50%, #ff4f6d 0%, transparent 65%);
  filter: blur(48px);
}

/* ── STRUCTURAL RENDERING SYSTEM LAYERS ── */
main > section:not(.dark-section):not(.hero-section) {
  position: relative;
  z-index: 3;
  background: #fafafa;
}

.hero-section {
  position: relative;
  z-index: 3;
  background-color: #fafafa;
}

.blueprint-grid {
  background-color: #fafafa;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.07) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0.5px, transparent 0.5px);
  background-size: 80px 80px;
}

.ruled-line {
  height: 0.5px;
  background-color: #747878;
  width: 100%;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 24;
}

/* ── DARK CONTEXT ENGINE CONTEXTS ── */
.dark-section {
  background-color: transparent;
  color: #fafafa;
  position: relative;
  z-index: 2;
}

.dark-section .text-secondary,
.dark-section .text-on-surface-variant {
  color: #888780 !important;
}

.dark-section .border-outline-variant {
  border-color: #2a2a2a !important;
}

.dark-section .ruled-line {
  background-color: #2a2a2a;
}

.dark-card {
  background-color: #141414;
  border-color: #2a2a2a;
}

body.past-dark {
  background-color: #0a0a0a;
}

/* ── MICRO-ANIMATIONS ── */
@keyframes bee-float {
  0%,
  100% {
    transform: translateY(0px) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

.bee-anim {
  animation: bee-float 2.8s ease-in-out infinite;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .bee-anim {
    animation: none;
  }
}

/* ── INTERACTIVE COMPONENTS (FAQ) ── */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.faq-item.open .faq-body {
  max-height: 200px;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 300ms ease;
}

/* ── NAVIGATION ADAPTIVE OVERRIDES ── */
header.dark-nav {
  background-color: rgba(10, 10, 10, 0.96) !important;
  border-color: #2a2a2a !important;
}

header.dark-nav a,
header.dark-nav .nav-logo {
  color: #fafafa !important;
}

header.dark-nav .nav-cta {
  background-color: #4dffdf !important;
  color: #0a0a0a !important;
}

.nav-logo img {
  filter: invert(0);
  transition: filter 600ms ease;
}

header.dark-nav .nav-logo img {
  filter: invert(1);
}

/* ── STANDARDIZED CORE INTERACTIVE FORMS ── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: transparent !important;
  border: none;
  border-bottom: 0.5px solid #2a2a2a;
  color: #fafafa;
  padding: 12px 0;
  outline: none;
  box-shadow: none !important;
  transition: border-color 300ms;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #4dffdf;
}

.form-input,
.form-textarea {
  font-family: "Inter", sans-serif;
  font-size: 16px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #444;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

/* Dropdown Matching Framework Specs */
.form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #444;
}

.form-select:valid {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #fafafa;
}

.form-select option {
  background: #141414;
  color: #fafafa;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}

.form-select option:disabled {
  color: #444;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.form-textarea {
  幕esize: none;
}

.tier-card {
  transition: border-color 300ms;
}

.tier-card:hover {
  border-color: #4a4a4a;
}

.tier-card.featured {
  border-color: #4dffdf !important;
}