/* ŠTREKNA bike center — design tokens
   Direction: the dark, cinematic, premium layout Lovro approved, rebuilt on the real
   ŠTREKNA palette sampled from the logo and flyers.
   Deep forest #0C2418 · cream #F0E4C0 · mountain green #6C9C3C · lime #8FC63F ·
   service green #173A24 · tire tan #B07A47
   Every section styles ONLY from these tokens. */

:root {
  /* ---- Palette ---- */
  --bg:          #0A1810;   /* forest black, base */
  --bg-2:        #0C2418;   /* logo badge green, alternating band */
  --surface:     #122A1B;   /* raised panel */
  --surface-2:   #17331F;   /* cards, inputs */
  --line:        rgba(240, 228, 192, 0.12);
  --line-strong: rgba(240, 228, 192, 0.22);

  --text:        #F3EDDC;   /* warm cream white */
  --text-dim:    #ADBBA4;   /* muted sage */
  --text-faint:  #74836E;

  --green:        #6C9C3C;  /* mountain green, from the logo */
  --green-bright: #8FC63F;  /* lime accent, CTAs and highlights */
  --green-deep:   #173A24;  /* deep forest, tints and borders */
  --cream:        #F0E4C0;  /* logo cream */
  --tan:          #B07A47;  /* tire sidewall tan, warm secondary accent */
  --tan-soft:     #C79A6B;

  /* ---- Typography ---- */
  --font-display: "General Sans", "Satoshi", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;

  --fs-hero:   clamp(2.9rem, 8vw, 6.75rem);
  --fs-h2:     clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3:     clamp(1.35rem, 2.2vw, 1.9rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-body:   1.6;
  --tracking-eyebrow: 0.16em;

  /* ---- Space ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 9rem;

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius / shadow / motion ---- */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow:    0 24px 60px -24px rgba(0, 0, 0, 0.75);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       0.5s;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0;
  letter-spacing: -0.015em;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-bright);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-small);
  padding: 0.9rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--green-bright); color: #0A1408; }
.btn--primary:hover { transform: translateY(-2px); background: #9fd44f; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.btn--cream { background: var(--cream); color: var(--bg-2); }
.btn--cream:hover { transform: translateY(-2px); background: #fff4d8; }