/* ============================================================
   veeamcloudbackup.de — 4its GmbH
   Designsystem: "Hamburg Precision"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Neutrals — warm-leaning */
  --paper:        oklch(98.5% 0.004 95);
  --paper-2:      oklch(96.5% 0.006 95);
  --stone:        oklch(93% 0.008 95);
  --edge:         oklch(88% 0.010 95);
  --edge-strong:  oklch(78% 0.012 95);
  --mute:         oklch(54% 0.012 240);
  --ink-soft:     oklch(32% 0.015 240);
  --ink:          oklch(18% 0.015 240);
  --ink-deep:     oklch(11% 0.015 240);

  /* Brand — 4its navy primary + orange accent */
  --brand:        #1F3A5F;          /* 4its navy */
  --brand-deep:   #15294A;
  --brand-press:  #0E1F3A;
  --brand-soft:   #E8EDF4;
  --brand-line:   #B6C2D4;

  /* Accent (4its orange — sparingly, for highlights) */
  --accent:       #E8954A;
  --accent-deep:  #C8762E;
  --accent-soft:  #FBEEDC;

  /* 4its secondary palette tones */
  --tile-blue:    #6BB8DC;
  --tile-green:   #7CC275;
  --tile-grey:    #D5D7D8;

  /* Secondary — cyan tech highlight, sparsam */
  --tech:         oklch(70% 0.110 220);
  --tech-soft:    oklch(94% 0.040 220);

  /* Signals */
  --warn:         oklch(70% 0.140 70);
  --danger:       oklch(58% 0.180 25);

  /* Type scale */
  --f-display:    'Manrope', system-ui, sans-serif;
  --f-body:       'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(15,20,30,.04), 0 1px 1px rgba(15,20,30,.03);
  --shadow-md: 0 6px 24px -8px rgba(15,20,30,.10), 0 2px 6px -2px rgba(15,20,30,.06);
  --shadow-lg: 0 24px 48px -16px rgba(15,20,30,.18), 0 6px 14px -6px rgba(15,20,30,.08);

  --max-w: 1240px;
  --gutter: 28px;
}

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

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.row { display: flex; }
.col { display: flex; flex-direction: column; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.eyebrow.center::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink-deep);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; }
h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
h4 { font-size: 16px; line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: 18px; color: var(--ink-soft); line-height: 1.55; max-width: 60ch; }

.mono { font-family: var(--f-mono); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink-deep);
  color: var(--paper);
  border-color: var(--ink-deep);
}
.btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: 0 8px 24px -8px oklch(42% 0.110 160 / 0.5);
}
.btn-brand {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.btn-brand:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: 0 8px 24px -8px oklch(42% 0.110 160 / 0.45);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn .arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Cards / surfaces ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: var(--edge-strong);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid var(--brand-line);
}
.tag-neutral {
  background: var(--paper-2);
  color: var(--ink-soft);
  border-color: var(--edge);
}

/* ---------- Sections ---------- */
section { padding: 96px 0; position: relative; }
section.tight { padding: 72px 0; }
section.dark {
  background: var(--ink-deep);
  color: var(--paper);
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--paper); }
section.dark .lead { color: oklch(78% 0.012 240); }
section.dark .eyebrow { color: var(--brand); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .lead { margin-top: 0; }

@media (max-width: 860px) {
  section { padding: 72px 0; }
  .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
}

/* ---------- Divider strokes ---------- */
.hairline {
  height: 1px;
  background: var(--edge);
  width: 100%;
}
.hairline.dark { background: oklch(28% 0.015 240); }

/* ---------- Number callout ---------- */
.idx {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.05em;
}

/* ---------- Reveal animation (subtle) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Util ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.flex { display: flex; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.muted { color: var(--mute); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* ---------- Selection ---------- */
::selection { background: var(--brand-soft); color: var(--brand-deep); }

/* ---------- 4its-derived mosaic mark ---------- */
.vc-mark { display: inline-block; flex-shrink: 0; }
.vc-lockup { display: inline-flex; align-items: center; gap: 12px; }
.vc-wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.025em;
  color: var(--brand);
  line-height: 1;
  font-size: 20px;
}
.vc-wordmark .tld { color: var(--accent); font-style: italic; }
.vc-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-top: 3px; }