/* ════════════════════════════════════════
   BASE  –  Variablen, Reset, Body, Grain
   ════════════════════════════════════════ */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-Bold.ttf') format('ttf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-ExtraBold.ttf') format('ttf');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-Black.ttf') format('ttf');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow-Light.ttf') format('ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow-Regular.ttf') format('ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow-Medium.ttf') format('ttf');
  font-weight: 500;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Regular.ttf') format('ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Medium.ttf') format('ttf');
  font-weight: 500;
}


:root {
    --purple: #9B1FC4;
    --orange: #F5A020;
    --pink:   #E0206A;
    --cyan:   #1EC8D4;
    --bg:     #08080A;
    --bg2:    #0E0E12;
    --bg3:    #141418;
    --text:   #E4E0D8;
    --muted:  #666270;
    --border: rgba(155, 31, 196, 0.2);
    --bs:     rgba(232, 230, 225, 0.06);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    cursor: crosshair;
}

/* Grain overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .45;
}

/* Shared typography utilities */
.mono-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.mono-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--orange);
}

.section-headline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
}

.section-headline em {
    color: var(--purple);
    font-style: normal;
}