/* Vibro-Analytics GmbH — landing page */
:root {
  --ink: #0b0b0c;
  --cream: #f4f2ee;
  --red: #d9584a;
  --steel: #9aa3ad;
  --accent: #ce7530;
  --accent-2: #d96b1c;
  --wave: #f89f60;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One design unit: the 1920x1080 composition scaled to fit the viewport. */
  --s: calc(min(100vw / 1920, 100vh / 1080));
  --bs: calc(max(100vw, 100vh) / 1920);
  --glow-a: rgba(217, 107, 28, 0.55);
  --glow-b: rgba(217, 88, 74, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
p, h1, hr, address { margin: 0; }
address { font-style: normal; }
a { color: var(--cream); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }

/* Background: dark ground, soft moving glows, vignette */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #1a1817 0%, var(--ink) 70%);
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(40px);
  width: var(--size); height: var(--size);
  left: calc(var(--x) - var(--size) / 2); top: calc(var(--y) - var(--size) / 2);
  background: radial-gradient(circle, var(--color) 0%, transparent 70%);
  will-change: transform, opacity;
}
.blob-a { --x: 27%; --y: 24%; --size: calc(1100 * var(--bs)); --color: var(--glow-a); }
.blob-b { --x: 78%; --y: 76%; --size: calc(1000 * var(--bs)); --color: var(--glow-b); }
.blob-c { --x: 50%; --y: 102%; --size: calc(1400 * var(--bs)); --color: rgba(255, 255, 255, 0.05); }
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* Stage: the composition, centred in the viewport */
.stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; }
.column {
  width: calc(1920 * var(--s)); height: calc(1080 * var(--s));
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(64 * var(--s));
}

.notice { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--s)); text-align: center; }
.eyebrow {
  font-size: max(calc(15 * var(--s)), 11px); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--wave);
}
.notice-text {
  font-size: max(calc(30 * var(--s)), 18px); font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; color: var(--cream);
  text-wrap: balance;
}

.mark { display: block; overflow: visible; width: calc(460 * var(--s)); height: auto; margin-top: calc(66 * var(--s)); transform-origin: 50% 50%; }
.name { display: flex; justify-content: center; width: calc(960 * var(--s)); margin-top: calc(56 * var(--s)); transform-origin: 50% 50%; }
.wordmark { display: block; overflow: visible; width: 100%; height: auto; }
.signal { display: block; overflow: visible; width: calc(1000 * var(--s)); height: calc(90 * var(--s)); margin-top: calc(14 * var(--s)); }
.services {
  margin-top: calc(22 * var(--s));
  font-size: max(calc(18 * var(--s)), 12px); font-weight: 500; line-height: 1.2;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--steel); text-align: center; white-space: nowrap;
}
.rule {
  width: calc(800 * var(--s)); height: 1px; border: 0; margin-top: calc(106 * var(--s));
  background: linear-gradient(90deg, transparent, rgba(244, 242, 238, 0.5) 20%, rgba(244, 242, 238, 0.5) 80%, transparent);
  transform-origin: 50% 50%;
}
.contacts { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(140 * var(--s)); margin-top: calc(49 * var(--s)); }
.contact { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--s)); }
.label {
  font-size: max(calc(13 * var(--s)), 11px); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel);
}
.contact a { font-size: max(calc(26 * var(--s)), 15px); line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; }

/* Initial states — only when the script runs; without JS the finished page shows. */
.js .rise, .js .mark, .js .name, .js .ambient { opacity: 0; }
.js .rule { transform: scaleX(0); }
.js .signal path { stroke-dashoffset: 1000; }
.rise, .mark, .name, .rule, .ambient { will-change: transform, opacity; }

/* Narrow / portrait screens: flow layout with readable sizes */
@media (max-width: 899px), (orientation: portrait) {
  body { overflow: auto; }
  .stage { min-height: 100vh; min-height: 100svh; }
  .column { width: 100%; height: auto; padding: 48px 24px 56px; justify-content: center; min-height: 100vh; min-height: 100svh; }
  .notice { gap: 10px; }
  .eyebrow { font-size: 12px; }
  .notice-text { font-size: 20px; max-width: 26ch; }
  .mark { width: min(62vw, 340px); margin-top: 56px; }
  .name { width: min(88vw, 520px); margin-top: 32px; }
  .signal { width: min(88vw, 520px); height: auto; aspect-ratio: 1000 / 90; margin-top: 8px; }
  .services { margin-top: 18px; font-size: 11px; letter-spacing: 0.22em; white-space: normal; max-width: 34ch; line-height: 1.7; }
  .rule { width: min(70vw, 420px); margin-top: 44px; }
  .contacts { flex-direction: column; align-items: center; gap: 26px; margin-top: 36px; }
  .contact { gap: 8px; }
  .label { font-size: 11px; }
  .contact a { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .rise, .mark, .name, .rule, .ambient { transition: none !important; }
}