/* ============================================================
   FLOREA GRUP — Design System
   Brand red #B50F1A · charcoal #1A1A1A · warm off-white #F5F4F2
   Manrope (display) · Inter (body)
   ============================================================ */

:root {
  /* Brand */
  --red: #b50f1a;
  --red-bright: #c91d2b;
  --red-dark: #8e0c14;
  --red-wash: #f6e9ea;

  /* Neutrals — warm */
  --ink: #181715;          /* near-black charcoal, warm */
  --ink-2: #2b2a27;        /* dark surface */
  --graphite: #4a4843;     /* secondary dark */
  --steel: #6a6862;        /* logo "grup" gray family */
  --concrete: #9a978f;     /* muted captions */
  --line: #dcd8d1;         /* hairlines on light */
  --line-dark: #36342f;    /* hairlines on dark */
  --surface: #ffffff;
  --paper: #f5f4f2;        /* warm off-white bg */
  --paper-2: #ecebe6;      /* slightly deeper warm */
  --paper-3: #e4e2db;

  /* Type */
  --display: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { display: block; max-width: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 9vw, 140px); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }

.dark { background: var(--ink); color: #f3f1ed; }
.dark h1, .dark h2, .dark h3 { color: #fff; }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h-xl { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.h-lg { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.h-md { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--graphite);
}
.dark .lead { color: #c9c6c0; }

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--steel); }
.dark .muted { color: #a9a59d; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.95em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-2); }

/* Text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: all 0.25s var(--ease);
}
.tlink svg { width: 1em; height: 1em; transition: transform 0.25s var(--ease); }
.tlink:hover { color: var(--red); }
.tlink:hover svg { transform: translateX(4px); }
.dark .tlink { color: #fff; }
.dark .tlink:hover { color: var(--red-bright); }

/* ---------- Image placeholders ---------- */
.ph {
  position: relative;
  background-color: var(--paper-2);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.035) 0 2px,
      transparent 2px 11px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete);
  background: rgba(245,244,242,0.82);
  padding: 0.4em 0.7em;
  border: 1px solid var(--line);
  border-radius: 3px;
  max-width: 80%;
  text-align: center;
}
.ph--dark {
  background-color: #232220;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.04) 0 2px,
      transparent 2px 11px);
}
.ph--dark::after {
  color: #88857d;
  background: rgba(24,23,21,0.7);
  border-color: var(--line-dark);
}
.ph--red {
  background-color: var(--red);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.08) 0 2px,
      transparent 2px 11px);
}
.ph--red::after { color:#fff; background: rgba(142,12,20,.5); border-color: rgba(255,255,255,.25); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }
.reveal[data-d="5"] { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(24,23,21,0.4);
  border-color: var(--concrete);
}

/* hairline divider */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.dark .hr { background: var(--line-dark); }

/* utility */
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }

/* Number tabular */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* focus visible */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }