/* ============================================================
   BASE.CSS – Spark-Nex Design System
   Reset · CSS-Variablen · Typografie · Buttons · Utilities
   ============================================================ */

/* ----- SELF-HOSTED FONTS ----- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ----- RESET ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font-body);
  background-color: var(--color-purple-deep);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  animation: none;
}
body.page-exit {
  animation: pageFadeOut 0.2s ease both;
  pointer-events: none;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(.4375rem); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-.4375rem); }
}
@media (prefers-reduced-motion: reduce) {
  body, body.page-exit { animation: none; }
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ----- CSS CUSTOM PROPERTIES ----- */
:root {
  /* Brand palette: neutral base, purple support, orange focus */
  --color-purple-deep:   #0B0A0E;
  --color-purple-dark:   #111016;
  --color-purple-mid:    #393344;
  --color-purple-accent: #5F477C;
  --color-purple-bright: #8265A8;
  --color-purple-light:  #B1A3C4;
  --color-purple-pale:   #D0C8DA;

  /* Orange Palette */
  --color-orange-hot:    #E8571F;
  --color-orange-main:   #FF6B35;
  --color-orange-light:  #FF8A5C;

  /* Neutral */
  --color-white:         #FFFFFF;
  --color-text-primary:  #F4F1ED;
  --color-text-secondary:#B7B1BB;
  --color-text-muted:    #918B96;

  /* Glass */
  --glass-bg:            #111016;
  --glass-bg-hover:      #15131A;
  --glass-border:        rgba(255, 255, 255, 0.10);
  --glass-blur:          0;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Typography */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Border Radius */
  --radius-sm:   .4375rem;
  --radius-md:   .75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-pill: 624.9375rem;

  /* Shadows / Glows */
  --glow-purple: none;
  --glow-orange: none;
  --shadow-card: none;

  /* Nav height */
  --nav-height: 4.5rem;

  /* Section padding */
  --section-py: clamp(4.5rem, 8vw, 7rem);
}

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text-primary);
}

h1 { font-size: clamp(2.2rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.75;
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ----- GRADIENT TEXT ----- */
.gradient-text {
  color: var(--color-orange-light);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.gradient-text-purple {
  color: var(--color-purple-light);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ----- SECTION WRAPPER ----- */
.section {
  padding: var(--section-py) 0;
  position: relative;
}

.container {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange-main);
  margin-bottom: 0.75rem;
}

.section-title {
  margin-bottom: 1rem;
  max-width: 48.75rem;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.section-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--color-text-secondary);
  max-width: 37.5rem;
  margin-bottom: var(--space-md);
}

/* ----- BUTTONS ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: none;
  white-space: nowrap;
}

.btn::after { display: none; }

.btn--orange {
  background: var(--color-orange-main);
  color: #140C08;
  box-shadow: none;
}
.btn--orange:hover {
  background: var(--color-orange-light);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: .0625rem solid rgba(255, 255, 255, 0.18);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-white);
}

.btn--sm {
  padding: 0.55rem 1.3rem;
  font-size: 0.875rem;
}

/* ----- BADGE / PILL ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.badge--orange {
  background: rgba(249, 115, 22, 0.15);
  color: var(--color-orange-light);
  border: .0625rem solid rgba(249, 115, 22, 0.3);
}

.badge--purple {
  background: rgba(124, 58, 237, 0.15);
  color: var(--color-purple-light);
  border: .0625rem solid rgba(124, 58, 237, 0.3);
}

/* ----- DIVIDER ----- */
.divider {
  width: 3.75rem;
  height: .0625rem;
  background: var(--color-orange-main);
  border-radius: 0;
  margin: 1rem 0 1.5rem;
}

/* ----- SCROLL REVEAL ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(.875rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal="fadeInLeft"],
[data-reveal="fadeInRight"],
[data-reveal="fadeInUp"],
[data-reveal="zoomIn"] { transform: translateY(.875rem); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays */
[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }

/* ----- UTILITIES ----- */
.text-center { text-align: center; }
.text-center .section-title {
  margin-right: auto;
  margin-left: auto;
}
.text-left   { text-align: left; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.d-flex      { display: flex; }
.align-center{ align-items: center; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.visually-hidden {
  position: absolute; width: .0625rem; height: .0625rem;
  padding: 0; margin: -.0625rem; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.no-select { user-select: none; }

/* ----- SCROLLBAR ----- */
::-webkit-scrollbar { width: .5rem; }
::-webkit-scrollbar-track { background: var(--color-purple-deep); }
::-webkit-scrollbar-thumb {
  background: var(--color-purple-mid);
  border-radius: .25rem;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-purple-bright); }

/* ----- SELECTION ----- */
::selection {
  background: rgba(124, 58, 237, 0.4);
  color: var(--color-white);
}

/* ----- FOCUS ----- */
:focus-visible {
  outline: .125rem solid var(--color-orange-main);
  outline-offset: .1875rem;
  border-radius: .25rem;
}