/* ============================================================
   SCAUT — Landing styles (built on ЗЕБРА design system)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- BRAND (from ЗЕБРА) ---- */
  --brand-orange:        #F84808;
  --brand-orange-deep:   #D43806;
  --brand-orange-bright: #FF5A1F;
  --brand-navy:          #183848;
  --brand-navy-deep:     #0D2430;
  --brand-navy-soft:     #2A4E60;

  /* ---- NEUTRALS ---- */
  --ink-900:  #0D2430;
  --ink-800:  #183848;
  --ink-700:  #2A4E60;
  --ink-600:  #4A6878;
  --ink-500:  #6B8494;
  --ink-400:  #9AADB9;
  --ink-300:  #C7D3DB;
  --ink-200:  #E4EAEE;
  --ink-100:  #F2F5F7;
  --ink-050:  #F9FBFC;
  --white:    #FFFFFF;

  /* ---- SEMANTIC ---- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-inv: var(--white);

  --bg-page:    var(--white);
  --bg-surface: var(--ink-050);
  --bg-dark:    var(--ink-900);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-800);

  --accent: var(--brand-orange);
  --accent-hover: var(--brand-orange-deep);

  --danger: #D93829;
  --success: #2E9E6A;

  /* ---- TYPE ---- */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* ---- SPACING ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* ---- RADII ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

  /* ---- SHADOW ---- */
  --shadow-xs: 0 1px 2px rgba(13, 36, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(13, 36, 48, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(13, 36, 48, 0.14);
  --shadow-lg: 0 18px 40px -10px rgba(13, 36, 48, 0.22);
  --shadow-xl: 0 32px 60px -14px rgba(13, 36, 48, 0.28);
  --shadow-accent: 0 10px 30px -8px rgba(248, 72, 8, 0.45);

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'calt';
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
h1 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -0.028em; font-weight: 600; }
h3 { font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.02em; font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: 20px; letter-spacing: -0.01em; font-weight: 600; line-height: var(--lh-snug); }

p { margin: 0; line-height: var(--lh-normal); }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mono  { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--brand-orange);
}

.num-tabular { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-orange); color: #fff; }

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

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: 120px 0;
}
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .container { padding: 0 20px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--brand-orange-deep); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-300);
}
.btn-secondary:hover { border-color: var(--ink-800); background: var(--ink-050); }
.btn-secondary:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  padding: 10px 14px;
}
.btn-ghost:hover { background: var(--ink-100); }

.btn-dark {
  background: var(--ink-900);
  color: #fff;
}
.btn-dark:hover { background: var(--brand-navy); }

.btn-lg { padding: 18px 28px; font-size: 16px; }

/* ============================================================
   CHIP / BADGE
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  background: #fff;
}
.chip-solid-navy {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.chip-orange-soft {
  background: rgba(248, 72, 8, 0.08);
  color: var(--brand-orange-deep);
  border-color: rgba(248, 72, 8, 0.25);
}
.chip-danger-soft {
  background: rgba(217, 56, 41, 0.08);
  color: var(--danger);
  border-color: rgba(217, 56, 41, 0.25);
}
.chip-success-soft {
  background: rgba(46, 158, 106, 0.09);
  color: var(--success);
  border-color: rgba(46, 158, 106, 0.26);
}

/* Diagonal-stripe motif */
.stripes-orange {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--brand-orange) 0 6px,
    transparent 6px 12px
  );
}
.stripes-navy {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(24,56,72,0.1) 0 6px,
    transparent 6px 12px
  );
}

/* Fade/slide in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Utility */
.divider {
  height: 1px; background: var(--border-1); border: 0; margin: 0;
}