/* ========================================================================
   ДЕЛЕГАТ — Design tokens
   Brand: institutional bureau of AI specialists
   ======================================================================== */

:root {
  /* Paper & ink */
  --paper: #F4F0E6;
  --paper-2: #ECE6D6;     /* card / inset */
  --paper-3: #E4DDC9;     /* deeper inset */
  --ink: #1A1A1A;
  --ink-2: #3A372F;        /* secondary text */
  --ink-3: #6B6657;        /* tertiary */
  --ink-4: #9A9485;        /* placeholder */
  --rule: #C7BFAA;         /* fine lines */
  --rule-2: #D9D2C2;

  /* Brand accents */
  --forest: #1F3A36;       /* primary institutional */
  --forest-2: #2A5048;
  --forest-tint: #DDE3DC;
  --burgundy: #6E2A2A;     /* alarm, important */
  --burgundy-tint: #E8D8D2;
  --ochre: #B88A3A;        /* gold-leaf detail */
  --ochre-tint: #EFE2BE;
  --olive: #6F6A2A;

  /* Type scale */
  --font-display: "PT Serif", "Times New Roman", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;

  --fs-display: clamp(56px, 7vw, 96px);
  --fs-h1: clamp(40px, 5vw, 64px);
  --fs-h2: clamp(28px, 3.5vw, 44px);
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --fs-eyebrow: 11px;

  /* Layout */
  --max: 1320px;
  --pad: 32px;
  --radius: 4px;          /* deliberately small / institutional */
  --radius-lg: 8px;
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern";
}

button { font-family: inherit; }

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

/* ---------- Type helpers ---------- */
.serif { font-family: var(--font-display); }
.sans  { font-family: var(--font-body); }
.mono  { font-family: var(--font-mono); font-feature-settings: "tnum"; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.case-no {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0; }
p + p { margin-top: 12px; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.container-wide {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Rules ---------- */
.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-thick { height: 2px; background: var(--ink); width: 100%; }
.rule-dotted { height: 1px; width: 100%; background-image: linear-gradient(to right, var(--rule) 50%, transparent 50%); background-size: 6px 1px; background-repeat: repeat-x; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4,0,.2,1), color 180ms, border-color 180ms, transform 120ms;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}
.btn-primary:hover { background: var(--forest-2); border-color: var(--forest-2); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.btn-ghost:hover { color: var(--forest); border-color: var(--forest); }

.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ---------- Badges / stamps ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-3);
  background: transparent;
}
.badge-forest { color: var(--forest); }
.badge-burgundy { color: var(--burgundy); }
.badge-filled-forest { background: var(--forest); color: var(--paper); border-color: var(--forest); }

/* Stamp: rotated, like a real document stamp */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transform: rotate(-3deg);
  color: var(--forest);
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
}

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 150ms;
}
.input:focus { outline: 0; border-color: var(--ink); }

/* ---------- Utility ---------- */
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-xs { gap: 6px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 32px; }
.gap-xl { gap: 48px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.grow { flex-grow: 1; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-2); }

/* ---------- Avatar (case-file style monogram) ---------- */
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
  position: relative;
}
.monogram .mono-no {
  position: absolute;
  top: 4px; left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 500;
  opacity: 0.7;
}

/* Hover lift */
.lift { transition: transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms; }
.lift:hover { transform: translateY(-2px); }

/* Section spacing */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* Scoped header */
.app-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 240, 230, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

/* Marginalia */
.marginalia {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.45;
}

/* Grid */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Page transition */
.page { animation: fade 260ms cubic-bezier(.4,0,.2,1); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* Compact density modifier */
[data-density="compact"] { --pad: 24px; }
[data-density="compact"] .section { padding: 64px 0; }
[data-density="compact"] .card { padding: 18px; }

/* Dark mode (inverted) */
[data-mode="dark"] {
  --paper: #1A1814;
  --paper-2: #232017;
  --paper-3: #2C281E;
  --ink: #F0EAD8;
  --ink-2: #C9C3B0;
  --ink-3: #948D7A;
  --ink-4: #6B6655;
  --rule: #3A372E;
  --rule-2: #2F2C25;
  --forest: #6B9985;
  --forest-2: #84B69E;
  --forest-tint: #2A3530;
  --burgundy: #C28181;
  --burgundy-tint: #3A2828;
}

/* ========================================================================
   MOBILE OPTIMIZATION
   ======================================================================== */

/* Tablet & smaller */
@media (max-width: 900px) {
  :root {
    --pad: 20px;
    --fs-display: clamp(40px, 11vw, 72px);
    --fs-h1: clamp(32px, 8vw, 52px);
    --fs-h2: clamp(24px, 6vw, 36px);
  }
  .section { padding: 64px 0; }
  .container-wide, .container { padding: 0 20px; }
}

/* Mobile */
@media (max-width: 720px) {
  /* — Header: скрываем nav, ужимаем header */
  .app-nav nav { display: none !important; }
  .app-nav > .container-wide > div { height: 56px !important; }
  .app-nav .mono { display: none !important; }
  .app-nav .btn-sm { padding: 6px 10px !important; font-size: 12px !important; }

  /* — Top strip (Hero header / page eyebrow): стак вертикально */
  .m-row-stack { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }

  /* — Hero grid 1.4fr 1fr → 1 col */
  .m-grid-stack { grid-template-columns: 1fr !important; gap: 32px !important; align-items: stretch !important; }
  .m-grid-stack > * { max-width: 100% !important; }

  /* — Specimen card width */
  .m-full { max-width: 100% !important; width: 100% !important; }

  /* — Section labels: одностолбцовые */
  h1.serif, h2.serif { letter-spacing: -0.02em !important; }

  /* — AgentRow: 5 cols 80/1fr/2fr/auto/auto → компактный 2-3 col */
  .m-agent-row { grid-template-columns: 48px 1fr !important; gap: 14px !important; grid-template-areas: "ava info" "ava desc" "price price" !important; }
  .m-agent-row > :nth-child(1) { grid-area: ava; }
  .m-agent-row > :nth-child(2) { grid-area: info; }
  .m-agent-row > :nth-child(3) { grid-area: desc; }
  .m-agent-row > :nth-child(4) { grid-area: price; padding-top: 4px; }
  .m-agent-row > :nth-child(5) { display: none !important; }

  /* — Differentiation 3 col / Pricing 3 col / Comparison 3 col → 1 col */
  .m-grid-3to1 { grid-template-columns: 1fr !important; }

  /* — Footer 2fr 1fr 1fr 1fr → 1 col */
  .m-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

  /* — Buttons чуть меньше */
  .btn { padding: 10px 18px !important; font-size: 14px !important; }
  .btn-sm { padding: 8px 12px !important; }

  /* — Catalog filter bar */
  .m-filter-bar { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }

  /* — Catalog cards: min-width меньше */
  .m-catalog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* — Pricing Period toggle */
  .m-pricing-header { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* — Tables overflow */
  .m-table-wrap { overflow-x: auto; }

  /* — Specimen Card компактнее */
  .m-specimen { padding: 20px !important; }
  .m-specimen-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* — Final CTA */
  .m-cta-stack { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }

  /* — Waitlist form в FinalCTA: стак вертикально */
  .m-cta-form { grid-template-columns: 1fr !important; }

  /* — body horizontal overflow guard */
  html, body { overflow-x: hidden; }
}

/* Very small phones */
@media (max-width: 420px) {
  .m-footer-grid { grid-template-columns: 1fr !important; }
  .m-specimen-grid { grid-template-columns: 1fr !important; }
  :root { --pad: 16px; }
  .container-wide, .container { padding: 0 16px; }
}