/* ─────────────────────────────────────────────────────────────
   Natur Agro Hungária — Base element styles & brand utilities
   Mirrors the live site's globals.css element layer.
   ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  body { font-size: 16px; }
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  line-height: var(--line-tight);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  margin: 0;
}
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: -0.01em; }

/* Eyebrow label — uppercase pill */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--text-eyebrow);
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  background: var(--white);
}

/* Layout helpers */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section-py { padding-top: var(--section-py); padding-bottom: var(--section-py); }

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

/* Card base */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-reveal);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

/* Glass */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.glass-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: blur(var(--glass-dark-blur));
  -webkit-backdrop-filter: blur(var(--glass-dark-blur));
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-duration) var(--ease-reveal),
              transform var(--reveal-duration) var(--ease-reveal);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Pentagon decoration */
.pentagon {
  clip-path: var(--pentagon-clip);
  pointer-events: none;
  position: absolute;
}
@keyframes pentagonFloat {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(20px,-15px) rotate(2deg); }
  50%  { transform: translate(-15px,20px) rotate(-2deg); }
  75%  { transform: translate(15px,15px) rotate(1.5deg); }
}