:root { color-scheme: dark; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,87,34,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(99,102,241,.10), transparent 55%),
    #0a0a0f;
  background-attachment: fixed;
}

/* Glassmorphism card */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.glass-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(255,138,61,.45);
  box-shadow: 0 20px 60px -20px rgba(255,87,34,.45);
}

.gradient-text {
  background: linear-gradient(100deg,#fff 10%,#ff8a3d 55%,#ff5722 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.75rem; padding:.75rem 1.25rem; font-weight:600; transition:all .25s; cursor:pointer; }
.btn-primary { background: linear-gradient(100deg,#ff5722,#ff8a3d); color:#0a0a0f; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost { border:1px solid rgba(255,255,255,.15); color:#f1f5f9; }
.btn-ghost:hover { border-color: rgba(255,138,61,.6); }

/* Animated hero glow */
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes pan { 0%{ background-position:0% 50% } 100%{ background-position:100% 50% } }
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
}

.fade-up { opacity:0; transform: translateY(18px); animation: fadeUp .7s forwards; }
@keyframes fadeUp { to { opacity:1; transform:none } }

/* hide htmx indicator by default */
.htmx-indicator{ opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator{ opacity:1; }
.htmx-request.htmx-indicator{ opacity:1; }

/* Enquiry form field defaults */
#enquiry-wrap input[type="text"],
#enquiry-wrap input[type="email"],
#enquiry-wrap input[type="tel"],
#enquiry-wrap textarea {
  width: 100%;
  background: rgba(18,18,26,.8);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  padding: .6rem .8rem;
  font-size: .9rem;
  color: #e2e8f0;
  outline: none;
}
#enquiry-wrap input:focus, #enquiry-wrap textarea:focus { border-color: #ff8a3d; }