/* ==========================================================================
   AMUREX GLOBAL LLC — Stylesheet
   ========================================================================== */

@import url("tokens.css");

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

html {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--t-body);
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* HEADER ---------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 56px; position: relative; z-index: 10;
}
.logo {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: 0.22em; font-size: 12px; color: var(--cream);
}
.nav {
  display: flex; gap: 28px;
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--mute);
}
.nav a { transition: color 220ms var(--ease-out); }
.nav a:hover { color: var(--cream); }
.nav a:last-child { color: var(--cream); }
.nav .sep { color: var(--mute-faint); padding: 0 6px; }

/* HERO ------------------------------------------------------------------ */
.hero {
  position: relative; min-height: 600px;
  padding: 0 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 35% at 52% 48%, rgba(208,138,54,0.55) 0%, rgba(208,138,54,0) 60%),
    radial-gradient(ellipse 22% 28% at 44% 60%, rgba(122,138,110,0.45) 0%, rgba(122,138,110,0) 65%),
    radial-gradient(ellipse 18% 22% at 60% 38%, rgba(229,164,90,0.40) 0%, rgba(229,164,90,0) 60%),
    radial-gradient(ellipse 24% 30% at 56% 62%, rgba(184,119,44,0.35) 0%, rgba(184,119,44,0) 65%),
    radial-gradient(ellipse 16% 20% at 38% 42%, rgba(122,138,110,0.30) 0%, rgba(122,138,110,0) 60%);
  filter: blur(40px);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 820px; }
.hero-mark {
  font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--mute-soft); margin-bottom: 48px; text-transform: uppercase;
}
.h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.022em;
  color: var(--cream); margin: 0;
}
.h1 .it {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.012em;
}
.sub {
  font-family: var(--font-body); font-size: var(--t-sub); line-height: 1.7;
  color: var(--mute); margin: 36px auto 0; max-width: 480px;
}
.cta-row {
  display: flex; align-items: center; gap: 20px; justify-content: center; margin-top: 48px;
}
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; font-family: var(--font-display); font-size: 12px;
  font-weight: 500; letter-spacing: 0.16em; border-radius: var(--r-sm);
  text-transform: uppercase; cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.cta.primary {
  background: transparent; color: var(--copper-light);
  border: 1px solid rgba(208,138,54,0.45);
}
.cta.primary:hover { background: rgba(184,119,44,0.10); border-color: rgba(208,138,54,0.7); }
.cta.primary::after { content: "↓"; font-weight: 400; }
.cta.text {
  color: var(--mute); background: transparent; border: none; padding: 14px 0;
  text-transform: uppercase;
}
.cta.text:hover { color: var(--cream); }

/* SECTION FRAME --------------------------------------------------------- */
.section { padding: var(--s-14) 56px; position: relative; border-top: 0.5px solid var(--line-mid); }
.eb {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-8);
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.24em; color: var(--mute-faint);
  padding-bottom: 22px; border-bottom: 0.5px solid var(--line-mid);
}
.eb b { color: var(--copper-warm); font-weight: 500; }
.display {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--cream); margin: 0 0 24px; max-width: 760px;
}
.display-sub {
  font-family: var(--font-body); font-size: var(--t-sub); line-height: 1.7;
  color: var(--mute); margin: 0; max-width: 580px;
}

/* OPERATING MODEL ------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-10); gap: 0; }
.pillar { padding: 48px 36px; position: relative; display: flex; flex-direction: column; gap: 24px; }
.pillar:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 32px; bottom: 32px;
  width: 0.5px; background: var(--line-mid);
}
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar-num {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.22em; color: var(--copper-warm);
}
.pillar-name {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  letter-spacing: -0.014em; color: var(--cream); margin: 0; line-height: 1;
}
.pillar-body {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.7;
  color: var(--mute); margin: 0; max-width: 320px;
}
.pillar-caps {
  display: flex; flex-direction: column;
  padding-top: 16px; border-top: 0.5px solid var(--line-mid);
}
.pillar-cap {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-family: var(--font-display); font-size: 13px; color: var(--mute);
  border-bottom: 0.5px solid var(--line);
}
.pillar-cap::before {
  content: ""; width: 5px; height: 0.5px; background: var(--copper-warm);
}
.pillar-cap:last-child { border-bottom: none; }

/* PRINCIPLES ------------------------------------------------------------ */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-10); gap: 0; }
.principle { padding: 48px 36px; position: relative; }
.principle:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 32px; bottom: 32px;
  width: 0.5px; background: var(--line-mid);
}
.principle:first-child { padding-left: 0; }
.principle:last-child { padding-right: 0; }
.principle-num {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.22em; color: var(--mute-soft); margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.principle-num::before { content: ""; width: 5px; height: 5px; background: var(--copper); border-radius: 50%; }
.principle-name {
  font-family: var(--font-display); font-size: var(--t-name); font-weight: 400;
  letter-spacing: -0.012em; color: var(--cream); margin: 0 0 18px; line-height: 1.15;
}
.principle-body {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.7;
  color: var(--mute); margin: 0; max-width: 280px;
}

/* MISSION --------------------------------------------------------------- */
.mission {
  position: relative; padding: var(--s-16) 56px;
  border-top: 0.5px solid var(--line-mid);
  text-align: center; overflow: hidden;
}
.mission::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 28% 32% at 50% 50%, rgba(208,138,54,0.45) 0%, rgba(208,138,54,0) 65%),
    radial-gradient(ellipse 20% 24% at 42% 58%, rgba(122,138,110,0.30) 0%, rgba(122,138,110,0) 65%),
    radial-gradient(ellipse 18% 22% at 58% 42%, rgba(229,164,90,0.35) 0%, rgba(229,164,90,0) 60%);
  filter: blur(48px);
  pointer-events: none;
}
.mission::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>");
  opacity: 0.30;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mission > * { position: relative; z-index: 2; }
.mission-eb {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; color: var(--mute-soft); margin-bottom: 56px;
}
.mission-q {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-mq); line-height: 1.22; letter-spacing: -0.018em;
  color: var(--cream); max-width: 820px; margin: 0 auto;
}
.mission-q .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mission-attr {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; color: var(--mute-soft); margin-top: 56px;
}

/* CONTACT --------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-10); gap: 0; }
.channel { padding: 48px 36px; position: relative; display: flex; flex-direction: column; gap: 16px; }
.channel:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 32px; bottom: 32px;
  width: 0.5px; background: var(--line-mid);
}
.channel:first-child { padding-left: 0; }
.channel:last-child { padding-right: 0; }
.c-name {
  font-family: var(--font-display); font-size: var(--t-name); font-weight: 400;
  letter-spacing: -0.008em; color: var(--cream); margin: 0; line-height: 1;
}
.c-body {
  font-family: var(--font-body); font-size: 0.90625rem; line-height: 1.7;
  color: var(--mute); margin: 0; max-width: 280px; flex: 1;
}
.c-mail {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--copper-light); border-bottom: 0.5px solid rgba(208,138,54,0.4);
  padding-bottom: 4px; align-self: flex-start;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.c-mail:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* CONTACT FORM ---------------------------------------------------------- */
.form-wrap { margin-top: var(--s-10); padding-top: 40px; border-top: 0.5px solid var(--line-mid); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.form-intro h3 {
  font-family: var(--font-display); font-size: var(--t-name); font-weight: 400;
  letter-spacing: -0.008em; color: var(--cream); margin: 0 0 16px; line-height: 1.15;
}
.form-intro p {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.7;
  color: var(--mute); margin: 0; max-width: 360px;
}
.form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase;
}
.form-row input, .form-row select, .form-row textarea {
  background: transparent; color: var(--cream);
  border: none; border-bottom: 0.5px solid var(--line-strong);
  padding: 12px 0; font-family: var(--font-body); font-size: 15px;
  outline: none; width: 100%;
  transition: border-color 220ms var(--ease-out);
}
.form-row textarea { resize: vertical; min-height: 96px; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-bottom-color: var(--copper-warm);
}
.form-row select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 5 L10 0' stroke='rgba(240,235,224,0.5)' stroke-width='1' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center;
}
.form-row option { background: var(--ink); color: var(--cream); }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-submit {
  align-self: flex-start; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; background: transparent; color: var(--copper-light);
  border: 1px solid rgba(208,138,54,0.45); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.form-submit:hover { background: rgba(184,119,44,0.10); border-color: rgba(208,138,54,0.7); }
.form-submit::after { content: "→"; }
.form-msg {
  margin-top: 16px; font-family: var(--font-body); font-size: 14px;
  padding: 14px 18px; border: 0.5px solid var(--line-mid); border-radius: var(--r-sm);
}
.form-msg.ok { color: var(--copper-light); border-color: rgba(208,138,54,0.4); background: rgba(184,119,44,0.06); }
.form-msg.err { color: #E58A8A; border-color: rgba(229,138,138,0.35); background: rgba(229,138,138,0.06); }

/* FOOTER ---------------------------------------------------------------- */
.foot {
  padding: 36px 56px; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-top: 0.5px solid var(--line-mid);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em; color: var(--mute);
}
.foot-l b { color: var(--cream); font-weight: 500; letter-spacing: 0.22em; }
.foot-mid { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.foot-mid a {
  color: var(--mute); transition: color 220ms var(--ease-out);
  border-bottom: 0.5px solid transparent; padding-bottom: 1px;
}
.foot-mid a:hover { color: var(--cream); border-bottom-color: var(--copper-warm); }
.foot-mid .sep { color: var(--mute-faint); }
.foot-r {
  display: flex; align-items: center; gap: 14px;
  color: var(--mute-faint); font-size: 11px; letter-spacing: 0.18em;
}
.foot-r .mark { width: 9px; height: 9px; transform: rotate(45deg); border: 0.5px solid var(--copper-warm); }

/* LEGAL PAGES (Impressum / Datenschutz) -------------------------------- */
.legal {
  max-width: 760px; margin: 0 auto; padding: var(--s-12) 56px var(--s-10);
  font-family: var(--font-body);
}
.legal h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--cream); margin: 0 0 16px;
}
.legal .legal-eb {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.24em; color: var(--mute-faint); margin-bottom: 32px;
  text-transform: uppercase;
}
.legal h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; letter-spacing: -0.005em;
  color: var(--cream); margin: 56px 0 12px;
}
.legal h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1rem; letter-spacing: 0.02em;
  color: var(--cream); margin: 32px 0 8px;
}
.legal p, .legal li {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.75;
  color: var(--mute); margin: 0 0 14px;
}
.legal ul { margin: 0 0 14px; padding-left: 18px; }
.legal a {
  color: var(--copper-light);
  border-bottom: 0.5px solid rgba(208,138,54,0.4); padding-bottom: 1px;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.legal a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.legal hr {
  border: none; border-top: 0.5px solid var(--line-mid);
  margin: 64px 0 32px;
}
.legal .legal-meta {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; color: var(--mute-faint);
  margin-top: 64px; padding-top: 24px; border-top: 0.5px solid var(--line-mid);
}
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--mute);
  margin-bottom: 48px; text-transform: uppercase;
}
.legal-back::before { content: '←'; }
.legal-back:hover { color: var(--cream); }

@media (max-width: 720px) {
  .legal { padding: var(--s-8) 24px var(--s-8); }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot-mid { flex-wrap: wrap; }
}

/* MOBILE ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .bar { padding: 18px 22px; }
  .nav { gap: 14px; font-size: 11px; }
  .hero { padding: 0 24px; min-height: 480px; }
  .sub { font-size: 15px; }
  .section { padding: var(--s-10) 24px; }
  .pillars, .principles, .contact { grid-template-columns: 1fr; }
  .pillar, .principle, .channel { padding: 36px 0; }
  .pillar::after, .principle::after, .channel::after { display: none; }
  .pillar:not(:last-child),
  .principle:not(:last-child),
  .channel:not(:last-child) { border-bottom: 0.5px solid var(--line-mid); }
  .mission { padding: var(--s-12) 24px; }
  .form-wrap { grid-template-columns: 1fr; gap: 32px; }
  .foot { padding: 22px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta { justify-content: center; }
}

/* MOTION — respect prefers-reduced-motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}