:root {
  --navy: #1F2D4C;
  --navy-deep: #16223C;
  --navy-soft: #2A3B5E;
  /* "coral" → mély arany-borostyán (a logó mustársárga/homok-családjából,
     piros/feminin hatás kerülése — 2026-05-12 user kérés) */
  --coral: #B07521;
  --coral-deep: #8B5C18;
  --coral-soft: #D6A45C;
  --sand: #B8A082;
  --sand-soft: #D4C2A8;
  --mustard: #F4B647;
  --mustard-soft: #F9CE7F;
  --frame: #B3B3B3;

  --bg: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-deep: #F2EDE5;
  --ink: #16223C;
  --ink-soft: #4A5568;
  --ink-mute: #7A8499;
  --line: #E8E1D5;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22,34,60,0.06), 0 1px 1px rgba(22,34,60,0.04);
  --shadow-md: 0 10px 30px -10px rgba(22,34,60,0.18), 0 4px 8px -4px rgba(22,34,60,0.08);
  --shadow-lg: 0 24px 60px -20px rgba(22,34,60,0.25), 0 8px 16px -8px rgba(22,34,60,0.12);

  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 48px);

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral-deep);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.reveal.is-visible .eyebrow::before,
.hero .eyebrow::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { transform: scaleX(1); transition: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--navy-soft); transform: translateY(-1px); }
.btn-coral {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-coral:hover { background: var(--coral-deep); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }