* { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: #F8F4EE; color: #2C2C2C; padding-top: 100px; }
@media (max-width: 639px) { body { padding-top: 124px; } }

/* ── Sticky header with scroll-hide animation ──────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.35s ease;
}
#site-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.wood-border { border: 3px solid #8B6914; box-shadow: inset 0 0 0 1px rgba(139,105,20,0.3), 0 4px 24px rgba(45,74,62,0.12); }
.chalk-card  { background: #3D5A50; color: #F8F4EE; position: relative; overflow: hidden; }
.chalk-card::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; }

.hero-gradient { background: linear-gradient(135deg, #2D4A3E 0%, #3D5A50 50%, #2D4A3E 100%); }
.page-hero     { background: linear-gradient(135deg, #2D4A3E 0%, #3D5A50 100%); }

.category-hover   { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.category-hover:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(45,74,62,0.22); }

.hamburger-icon { width: 22px; height: 16px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger-line { display: block; height: 2px; width: 100%; background: #2D4A3E; border-radius: 2px; transform-origin: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; }
.hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #E8731A; transition: width 0.2s ease; }
.nav-link:hover::after { width: 100%; }
.nav-link.active::after { width: 100%; }

.btn-primary  { background: #E8731A; color: white; transition: background 0.2s, transform 0.1s; display: inline-block; text-align: center; }
.btn-primary:hover  { background: #C45E10; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: #F8F4EE; border: 2px solid rgba(248,244,238,0.6); transition: all 0.2s; display: inline-block; text-align: center; }
.btn-secondary:hover { background: rgba(248,244,238,0.1); border-color: #F8F4EE; }
.btn-outline  { background: transparent; color: #2D4A3E; border: 2px solid #2D4A3E; transition: all 0.2s; display: inline-block; text-align: center; }
.btn-outline:hover  { background: #2D4A3E; color: #F8F4EE; }

.wood-frame { border: 4px solid #8B6914; border-radius: 4px; padding: 2px; background: linear-gradient(135deg, #A07D1E, #6B5010, #A07D1E); }
.wood-frame-inner { background: #3D5A50; border-radius: 2px; }

input:focus, textarea:focus, select:focus { outline: none; border-color: #2D4A3E; box-shadow: 0 0 0 3px rgba(45,74,62,0.1); }

/* ── Preloader ───────────────────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #2D4A3E 0%, #3D5A50 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
#preloader.preloader-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.preloading { overflow: hidden; }

.preloader-leaf {
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  opacity: 0.85;
  animation: preloaderSway 2s ease-in-out infinite;
}
@keyframes preloaderSway {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%       { transform: rotate(4deg)  scale(1.05); }
}

.preloader-name {
  font-family: 'Inter', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #F8F4EE;
  line-height: 1;
  letter-spacing: 0.02em;
}
.preloader-dots {
  display: flex;
  gap: 7px;
  margin-top: 2rem;
}
.preloader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8731A;
  animation: dotPulse 1.3s ease-in-out infinite;
}
.preloader-dots span:nth-child(2) { animation-delay: 0.18s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.4; }
  40%           { transform: scale(1);    opacity: 1;   }
}