/* ============================================================
   ATRACK · Pyramide CH (FR / DE)
   Aesthetic: warm Swiss premium — cream + amber gold, serif
   display, generous whitespace, trust-led. (Opposite of OEM.)
   Charte Pyramide "web": amber #fab80f · ink #1a150a · cream #fffcf0
   ============================================================ */

:root {
  --bg:        #fffcf0;
  --surface:   #ffffff;
  --warm:      #fff7e4;
  --fill:      #fde9b5;
  --ink:       #1a150a;
  --ink-2:     #6f6452;
  --ink-3:     #9b8f79;
  --amber:     #fab80f;
  --amber-600: #e2a405;
  --amber-700: #c18c04;
  --amber-800: #a07403;
  --blue:      #007bff;
  --line:      #ece2cc;
  --line-2:    #e2d6b9;
  --footer-bg: #181308;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
  --pad: clamp(18px, 4vw, 56px);
  --radius: 14px;
  --shadow: 0 24px 60px -28px rgba(120, 84, 6, .28);
  --shadow-sm: 0 10px 30px -18px rgba(120, 84, 6, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}
/* Warm atmosphere: amber light + faint contour motif */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 85% -5%, rgba(250,184,15,.16), transparent 60%),
    radial-gradient(60% 45% at -5% 8%, rgba(250,184,15,.10), transparent 55%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%23fab80f' stroke-width='1' opacity='0.05'%3E%3Cpath d='M0 300 Q150 240 300 300 T600 300'/%3E%3Cpath d='M0 340 Q150 280 300 340 T600 340'/%3E%3Cpath d='M0 260 Q150 200 300 260 T600 260'/%3E%3Cpath d='M0 380 Q150 320 300 380 T600 380'/%3E%3Cpath d='M0 220 Q150 160 300 220 T600 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 760px 760px;
}

.wrap { position: relative; z-index: 1; }
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }

.kicker {
  font-family: var(--font-body); font-weight: 600;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-800);
}
.muted { color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-800); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--amber); border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  padding: 14px 26px; border-radius: 100px; cursor: pointer;
  border: 1.5px solid transparent; transition: .2s ease;
}
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 0 10px 26px -10px rgba(250,184,15,.7); }
.btn-amber:hover { background: var(--amber-600); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(250,184,15,.8); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-800); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 26px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.brand .sep { width: 1px; height: 22px; background: var(--line-2); }
.brand .ctx { font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .04em; color: var(--ink-2); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-weight: 500; font-size: .94rem; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.lang { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: 100px; padding: 3px; background: var(--surface); }
.lang a { font-weight: 600; font-size: .76rem; padding: 5px 11px; border-radius: 100px; color: var(--ink-3); }
.lang a.is-active { background: var(--ink); color: #fff; }
.lang a:hover:not(.is-active) { color: var(--amber-800); }
.to-oem { font-weight: 500; font-size: .82rem; color: var(--ink-3); }
.to-oem:hover { color: var(--amber-800); }

/* ---------- Hero ---------- */
.hero { padding: clamp(52px, 8vw, 104px) 0 clamp(40px,6vw,80px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px,5vw,68px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; margin: 6px 0 22px; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--amber-700); }
.hero .lede { font-size: clamp(1.06rem, 1.5vw, 1.26rem); color: var(--ink-2); max-width: 48ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.hero-trust .t { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.hero-trust .t b { color: var(--amber); font-size: 1.1rem; }

/* Trust card */
.tcard { position: relative; background: linear-gradient(165deg, var(--surface), var(--warm)); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); overflow: hidden; }
.tcard::before { content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(250,184,15,.25), transparent 70%); }
.tcard .swiss { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--amber-800); background: var(--fill); padding: 7px 14px; border-radius: 100px; }
.tcard .swiss::before { content: "✦"; }
.tcard h3 { font-size: 1.7rem; margin: 18px 0 6px; }
.tcard p { color: var(--ink-2); font-size: .96rem; }
.tcard .rows { margin-top: 22px; border-top: 1px solid var(--line); }
.tcard .rows .r { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.tcard .rows .r i { font-style: normal; width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--fill); color: var(--amber-800); border-radius: 9px; font-size: .95rem; }
.tcard .rows .r b { font-weight: 600; }
.tcard .rows .r span { color: var(--ink-2); font-size: .86rem; }

/* ---------- Sections ---------- */
section { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
.s-head { max-width: 60ch; margin-bottom: 44px; }
.s-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.s-head p { color: var(--ink-2); margin-top: 14px; font-size: 1.06rem; }

/* Products */
.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: .2s ease; box-shadow: var(--shadow-sm); }
.prod:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.prod .ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--fill); color: var(--amber-800); font-size: 1.4rem; margin-bottom: 18px; }
.prod .role { font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-800); }
.prod h3 { font-size: 1.7rem; margin: 4px 0 8px; }
.prod p { color: var(--ink-2); font-size: .95rem; }
.prod .meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.prod .meta b { color: var(--ink); font-weight: 600; }

/* Why pyramide */
.why { background: var(--warm); border-block: 1px solid var(--line); }
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 12px; }
.pillar { display: flex; gap: 16px; }
.pillar .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--amber); line-height: 1; }
.pillar h3 { font-size: 1.28rem; margin-bottom: 6px; font-weight: 600; }
.pillar p { color: var(--ink-2); font-size: .96rem; }

/* Use cases */
.uses { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.use { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--surface); box-shadow: var(--shadow-sm); }
.use .tag { font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-800); }
.use h3 { font-size: 1.4rem; margin: 10px 0 8px; font-weight: 600; }
.use p { color: var(--ink-2); font-size: .94rem; }

/* ---------- Contact / form ---------- */
.contact { position: relative; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,5vw,56px); align-items: start; }
.contact-aside h2 { font-size: clamp(2rem,3.6vw,2.9rem); }
.contact-aside p { color: var(--ink-2); margin-top: 14px; font-size: 1.05rem; }
.contact-aside .lines { margin-top: 26px; }
.contact-aside .lines a, .contact-aside .lines div { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 1rem; color: var(--ink); }
.contact-aside .lines i { font-style: normal; width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--fill); color: var(--amber-800); border-radius: 10px; }
form.quote { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px,3vw,34px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: block; font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: 7px; }
label .req { color: var(--amber-700); }
input, select, textarea {
  width: 100%; background: var(--bg); border: 1.5px solid var(--line-2); color: var(--ink);
  font-family: var(--font-body); font-size: .98rem; padding: 12px 14px; border-radius: 11px; transition: .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(250,184,15,.18); background: var(--surface); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 110px; }
.form-actions { display: flex; align-items: center; gap: 18px; }
.form-status { font-size: .88rem; font-weight: 500; }
.form-status[data-kind="ok"] { color: #2e7d32; }
.form-status[data-kind="err"] { color: #c0392b; }
.form-status[data-kind="sending"] { color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: #efe7d4; padding: 60px 0 30px; position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
.foot-grid img { height: 30px; margin-bottom: 16px; }
.foot-grid h4 { font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #b9a87f; margin-bottom: 14px; }
.foot-grid a { display: block; color: #d8ccb2; padding: 5px 0; font-size: .94rem; }
.foot-grid a:hover { color: var(--amber); }
.foot-about { color: #b3a482; font-size: .92rem; max-width: 40ch; line-height: 1.7; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; color: #9a8c6c; }

/* ---------- Reveal (bulletproof: base visible) ---------- */
[data-reveal] { animation: reveal .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .tcard { order: -1; }
  .prods, .uses, .pillars { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .prods, .uses, .pillars, .field-row, .foot-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}