:root{
  --color-primary:#2F4F2F;
  --color-secondary:#4A6B4A;
  --color-accent:#FFB300;
}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{font-family:'Urbanist',system-ui,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%}

/* Premium focus rings */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 30%,transparent);
  border-radius:.75rem
}

/* Subtle ambient glow utility */
.ambient-glow{
  position:relative
}
.ambient-glow::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--color-accent) 25%,transparent),transparent 60%);
  filter:blur(16px);
  opacity:.9;
  z-index:-1
}

/* Decorative patterns */
.decor-grid-dots{
  background-image:radial-gradient(circle at 1px 1px,rgba(17,24,39,.16) 1px,transparent 0);
  background-size:22px 22px
}
.decor-grid-lines{
  background-image:
    linear-gradient(to right,rgba(17,24,39,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(17,24,39,.10) 1px,transparent 1px);
  background-size:28px 28px
}
.decor-diagonal{
  background-image:repeating-linear-gradient(135deg,rgba(17,24,39,.10) 0,rgba(17,24,39,.10) 1px,transparent 1px,transparent 10px)
}
.decor-mesh{
  background:
    radial-gradient(800px 400px at 10% 10%, color-mix(in srgb,var(--color-accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, color-mix(in srgb,var(--color-primary) 16%, transparent), transparent 60%),
    radial-gradient(700px 450px at 30% 95%, color-mix(in srgb,var(--color-secondary) 14%, transparent), transparent 65%)
}

/* Intensity modifiers */
.decor-subtle{opacity:.06}
.decor-moderate{opacity:.12}
.decor-bold{opacity:.20}

/* Corner accents */
.decor-corner-tr{position:relative}
.decor-corner-tr::after{
  content:"";
  position:absolute;
  top:-1px; right:-1px;
  width:140px; height:140px;
  background:radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--color-accent) 35%, transparent), transparent 70%);
  pointer-events:none
}
.decor-corner-bl{position:relative}
.decor-corner-bl::after{
  content:"";
  position:absolute;
  bottom:-1px; left:-1px;
  width:160px; height:160px;
  background:radial-gradient(circle at 0% 100%, color-mix(in srgb,var(--color-primary) 30%, transparent), transparent 72%);
  pointer-events:none
}

/* Gradient blur blobs */
.decor-gradient-blur{position:relative}
.decor-gradient-blur::before,.decor-gradient-blur::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  border-radius:9999px;
  filter:blur(48px);
  opacity:.28;
  z-index:-1;
  pointer-events:none
}
.decor-gradient-blur::before{
  left:-180px; top:-220px;
  background:radial-gradient(circle at 30% 30%, var(--color-accent), transparent 60%)
}
.decor-gradient-blur::after{
  right:-220px; bottom:-260px;
  background:radial-gradient(circle at 30% 30%, var(--color-primary), transparent 60%)
}

/* Glow element behind product */
.decor-glow-element{position:relative}
.decor-glow-element::after{
  content:"";
  position:absolute;
  inset:auto 10% 10% 10%;
  height:240px;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--color-accent) 26%, transparent), transparent 70%);
  filter:blur(24px);
  opacity:.75;
  z-index:-1;
  pointer-events:none
}

/* Concentric rings SVG helper */
.decor-rings-svg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='rgba(17,24,39,0.10)' stroke-width='2'%3E%3Ccircle cx='320' cy='320' r='70'/%3E%3Ccircle cx='320' cy='320' r='140'/%3E%3Ccircle cx='320' cy='320' r='210'/%3E%3Ccircle cx='320' cy='320' r='280'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain
}

/* Animations (context: slide_left) */
[data-animate]{
  opacity:0;
  transform:translateX(2rem);
  transition:opacity .6s ease-out,transform .6s ease-out
}
[data-animate].is-visible{
  opacity:1;
  transform:translateX(0)
}

/* Accordion icon rotation helper */
.rotate-180{transform:rotate(180deg)}

/* Form refinements */
.input-premium{
  border-radius: .75rem;
  border: 1px solid rgba(17,24,39,.14);
  background: #fff;
  padding: .85rem 1rem;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.input-premium:focus{
  border-color: color-mix(in srgb,var(--color-accent) 55%, rgba(17,24,39,.14));
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--color-accent) 22%, transparent);
}
.form-hint{
  font-size: .75rem;
  color: rgba(107,114,128,1);
}

/* Better tap targets on mobile */
@media (max-width: 768px){
  a,button{ -webkit-tap-highlight-color: transparent }
}