:root{
  --color-primary:#2C1810;
  --color-secondary:#4A2C20;
  --color-accent:#DC2626;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Button fixes */
button, .btn, [class*="btn-"], a[href="#order_form"] {
  white-space: nowrap;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
form button[type="submit"] { white-space: normal; width: 100%; }

/* Better tap targets on mobile */
a, button { -webkit-tap-highlight-color: transparent; }

/* Animations (context: zoom_in) */
[data-animate]{
  opacity: 0;
  transform: scale(.95);
  transition: transform .5s ease-out, opacity .5s ease-out;
  will-change: transform, opacity;
}
[data-animate].is-visible{
  opacity: 1;
  transform: scale(1);
}

/* FAQ chevron rotation utility */
.rotate-180{ transform: rotate(180deg); }

/* Premium decorative utilities */
.decor-grid-dots{
  background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 18px 18px;
}
.decor-grid-lines{
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.decor-diagonal{
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.07) 0, rgba(0,0,0,.07) 1px, transparent 1px, transparent 12px);
}
.decor-mesh{
  background-image:
    radial-gradient(800px 400px at 10% 10%, rgba(220,38,38,.22), transparent 60%),
    radial-gradient(700px 380px at 90% 20%, rgba(220,38,38,.14), transparent 60%),
    radial-gradient(700px 380px at 50% 100%, rgba(44,24,16,.10), transparent 60%);
}

.decor-subtle{ opacity: .06; }
.decor-moderate{ opacity: .12; }
.decor-bold{ opacity: .20; }

/* Accent glow element */
.decor-glow-element::before{
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 30%, rgba(220,38,38,.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(220,38,38,.16), transparent 55%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

/* Form focus */
input:focus, select:focus, textarea:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(220,38,38,.15);
  border-color: rgba(220,38,38,.45);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  [data-animate]{ transition: none; }
}