/* ============================================================
   AD GARAGE — base tokens, reset, typography, layout
   Brand: red #BD0F1A · bone #ECE6D9 · ink #101015
   Voice: чесний, скромний гараж — «без зайвого шуму»
   ============================================================ */

:root{
  /* dark / ink surfaces */
  --ink:        #0f0f14;
  --ink-soft:   #16161e;
  --card-dark:  #1c1c25;
  --card-dark-2:#222230;

  /* paper / light surfaces */
  --paper:      #f2eee5;
  --paper-2:    #e9e3d6;
  --paper-card: #fbf9f3;

  /* type colors */
  --bone:       #ece6d9;
  --bone-dim:   #a7a195;
  --ink-text:   #16150f;
  --ink-dim:    #5d574c;

  /* brand */
  --red:        #c20d18;
  --red-bright: #e51c28;
  --red-deep:   #8d0a11;

  /* lines */
  --line-dark:  rgba(236,230,217,.13);
  --line-dark-2:rgba(236,230,217,.22);
  --line-light: rgba(22,21,15,.13);
  --line-light-2:rgba(22,21,15,.22);

  /* fonts (tweakable) */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* shape (tweakable: sharp vs soft) */
  --radius:   4px;
  --radius-lg:8px;

  /* rhythm */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 130px);

  --shadow-card: 0 24px 60px -28px rgba(0,0,0,.6);
  --shadow-soft: 0 14px 40px -22px rgba(20,18,12,.45);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- bold / contrast direction (tweak) ---- */
:root[data-dir="bold"]{
  --red: #e0121f;
  --red-bright: #ff2230;
}
:root[data-corners="soft"]{ --radius: 12px; --radius-lg: 22px; }
:root[data-corners="sharp"]{ --radius: 0px; --radius-lg: 0px; }

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--bone);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
input,select,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; padding:0; }

/* ---------- typography ---------- */
.display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
h1,h2,h3{ font-family: var(--font-display); font-weight:700; text-transform:uppercase; line-height:1.02; letter-spacing:-.005em; }

.eyebrow{
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 13px;
  color: var(--red);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--red); display:inline-block;
}
.eyebrow.on-dark{ color: var(--red-bright); }

.section-head{ max-width: 720px; }
.section-title{
  font-size: clamp(30px, 4.4vw, 56px);
  margin: .35em 0 0;
}
.section-sub{
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(16px,1.4vw,19px);
  line-height:1.55;
  margin-top: 16px;
  max-width: 60ch;
}
.on-paper .section-title{ color: var(--ink-text); }
.on-paper .section-sub{ color: var(--ink-dim); }

/* ---------- layout ---------- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: var(--section-y); position:relative; }
.section.on-paper{ background: var(--paper); color: var(--ink-text); }
.section.on-ink{ background: var(--ink); color: var(--bone); }
.section.on-ink-soft{ background: var(--ink-soft); color: var(--bone); }

.grid{ display:grid; gap: clamp(16px,2vw,28px); }

/* ---------- buttons ---------- */
.btn{
  --bg: var(--red);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 15px 26px;
  background: var(--bg);
  color:#fff;
  font-family: var(--font-display);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size: 15px;
  border-radius: var(--radius);
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 28px -14px rgba(194,13,24,.8);
  position:relative;
  white-space:nowrap;
}
.btn:hover{ background: var(--red-bright); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  --bg: transparent; color: var(--bone);
  border:1.5px solid var(--line-dark-2);
  box-shadow:none;
}
.btn.ghost:hover{ background: rgba(236,230,217,.07); border-color: var(--bone); transform:translateY(-2px); }
.on-paper .btn.ghost{ color: var(--ink-text); border-color: var(--line-light-2); }
.on-paper .btn.ghost:hover{ background: rgba(22,21,15,.05); border-color: var(--ink-text); }
.btn.big{ padding: 18px 34px; font-size: 16px; }
.btn .ico{ width:18px; height:18px; }

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:13.5px; font-weight:600;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line-dark-2);
  color: var(--bone-dim);
  white-space:nowrap;
}
.chip .dot{ width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(194,13,24,.18); }
.on-paper .chip{ border-color: var(--line-light-2); color: var(--ink-dim); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* utility */
.red{ color: var(--red); }
.muted{ color: var(--bone-dim); }
.on-paper .muted{ color: var(--ink-dim); }
.nowrap{ white-space:nowrap; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }