:root{
  --color-primary:#0D4F6F;
  --color-secondary:#1E6B8A;
  --color-accent:#00BCD4;
  --color-bg-light:#ECFEFF;
  --color-bg-alt:#CFFAFE;
}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:'Manrope',system-ui,sans-serif}

::selection{background:rgba(0,188,212,.25)}

/* 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 */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,188,212,.25);
  border-radius:16px
}

/* Animations (default fade-in, no layout shift) */
[data-animate]{
  opacity:0;
  transition:opacity .5s ease-out
}
[data-animate].is-visible{opacity:1}
[data-animate="fade_up"]{transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}
[data-animate="fade_up"].is-visible{transform:translateY(0)}
[data-animate="slide_left"]{transform:translateX(18px);transition:opacity .6s ease-out,transform .6s ease-out}
[data-animate="slide_left"].is-visible{transform:translateX(0)}
[data-animate="slide_right"]{transform:translateX(-18px);transition:opacity .6s ease-out,transform .6s ease-out}
[data-animate="slide_right"].is-visible{transform:translateX(0)}
[data-animate="zoom_in"]{transform:scale(.96);transition:opacity .6s ease-out,transform .6s ease-out}
[data-animate="zoom_in"].is-visible{transform:scale(1)}

/* Utilities */
.rotate-180{transform:rotate(180deg)}

/* Decorative backgrounds */
.decor-grid-dots{
  background-image:radial-gradient(rgba(13,79,111,.22) 1px,transparent 1px);
  background-size:18px 18px
}
.decor-grid-lines{
  background-image:
    linear-gradient(to right, rgba(13,79,111,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,79,111,.10) 1px, transparent 1px);
  background-size:40px 40px
}
.decor-diagonal{
  background-image:repeating-linear-gradient(135deg, rgba(0,188,212,.12), rgba(0,188,212,.12) 10px, transparent 10px, transparent 22px)
}
.decor-mesh{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(0,188,212,.22), transparent 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(30,107,138,.20), transparent 55%),
    radial-gradient(1000px 600px at 50% 95%, rgba(13,79,111,.18), transparent 60%)
}
.decor-subtle{opacity:.06}
.decor-moderate{opacity:.12}
.decor-bold{opacity:.20}

/* 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:.22;
  pointer-events:none
}
.decor-gradient-blur::before{
  top:-240px; left:-200px;
  background:radial-gradient(circle at 30% 30%, rgba(0,188,212,.85), transparent 60%)
}
.decor-gradient-blur::after{
  bottom:-280px; right:-220px;
  background:radial-gradient(circle at 60% 40%, rgba(30,107,138,.75), transparent 62%)
}

/* Corner accents */
.decor-corner-tr{position:relative}
.decor-corner-tr::after{
  content:"";
  position:absolute;
  top:-1px; right:-1px;
  width:120px; height:120px;
  background:radial-gradient(circle at 100% 0%, rgba(0,188,212,.25), transparent 65%);
  pointer-events:none
}
.decor-corner-bl{position:relative}
.decor-corner-bl::before{
  content:"";
  position:absolute;
  bottom:-1px; left:-1px;
  width:140px; height:140px;
  background:radial-gradient(circle at 0% 100%, rgba(13,79,111,.18), transparent 65%);
  pointer-events:none
}

/* Glow element */
.decor-glow-element{
  position:absolute;
  inset:auto;
  width:360px;
  height:360px;
  border-radius:9999px;
  background:radial-gradient(circle at 50% 50%, rgba(0,188,212,.35), transparent 65%);
  filter:blur(22px);
  opacity:.6;
  pointer-events:none
}

/* Rings SVG pattern */
.decor-rings-svg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2300BCD4' stroke-opacity='.22'%3E%3Ccircle cx='120' cy='120' r='36'/%3E%3Ccircle cx='120' cy='120' r='64'/%3E%3Ccircle cx='120' cy='120' r='92'/%3E%3Ccircle cx='120' cy='120' r='118'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:240px 240px
}

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