/* ===========================================================
   ArkStahl — Design Tokens
   Konzept: Roher Stahl trifft auf gluehenden Schweissfunken.
   Kein Rundungsradius — Metall hat scharfe Kanten, keine weichen Kurven.
   =========================================================== */

:root {
  /* Farben */
  --steel-950: #16181B;
  --steel-900: #1A1D21;
  --steel-800: #24282D;
  --steel-700: #33383F;
  --steel-line: rgba(255, 255, 255, 0.09);

  --silver: #B8C0C8;
  --silver-dim: #8A929A;

  --weld-orange: #FF7A1A;
  --weld-hot: #FFC46B;

  --off-white: #F2F3F5;
  --off-white-dim: #E4E6E9;

  --text-hi: #F5F6F7;
  --text-mid: rgba(245, 246, 247, 0.72);
  --text-low: rgba(245, 246, 247, 0.48);

  --text-hi-dark: #14161A;
  --text-mid-dark: rgba(20, 22, 26, 0.68);

  /* Weld-seam gradient — wiederkehrendes Signature-Element */
  --weld-gradient: linear-gradient(90deg, #6B7178 0%, #B8C0C8 35%, #FF7A1A 72%, #FFC46B 100%);

  /* Typografie — bewusst anders als ArkTherm/Solar Ark */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--steel-900);
  color: var(--text-hi);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
}

p { margin: 0; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }

/* Weld underline — signature accent */
.weld-underline { position: relative; display: inline-block; }
.weld-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.08em;
  height: 3px;
  background: var(--weld-gradient);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.btn-primary {
  background: var(--weld-gradient);
  background-size: 220% 100%;
  background-position: 70% 0;
  color: #14161A;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 122, 26, 0.3); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--steel-line);
  color: var(--text-hi);
  clip-path: none;
}
.btn-ghost:hover { border-color: var(--weld-orange); color: var(--weld-orange); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--weld-orange);
  margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--weld-orange); }

section { position: relative; }
.section-pad { padding: 120px 0; }

@media (max-width: 900px) {
  .section-pad { padding: 80px 0; }
  .container { padding: 0 24px; }
}

:focus-visible { outline: 2px solid var(--weld-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}