/* Jha Technology — custom styles layered on top of Tailwind CDN */

:root {
  --brand-from: #16a34a;
  --brand-via: #22c55e;
  --brand-to: #84cc16;
}

html {
  scroll-behavior: smooth;
}

/* Alpine hides [x-cloak] elements itself once initialized, but until that JS
   runs there's nothing else suppressing them — this rule prevents the mobile
   nav menu from flashing visible for a frame on page load. */
[x-cloak] {
  display: none !important;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8faf7;
  color: #1e293b;
  line-height: 1.65;
}

p { color: #334155; }

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', sans-serif;
}

.text-gradient {
  background-image: linear-gradient(90deg, var(--brand-from), var(--brand-via), var(--brand-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-grid {
  background-image: linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.glow-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.card-hover {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 20px 45px -15px rgba(22, 163, 74, 0.30);
}

.btn-primary {
  background-image: linear-gradient(90deg, var(--brand-from), var(--brand-via));
  transition: filter .25s ease, transform .25s ease;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0%; height: 2px;
  background-image: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  transition: width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

#site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
#site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 10px 30px -18px rgba(15,23,42,.25);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f4; }
::-webkit-scrollbar-thumb { background: #16a34a; border-radius: 6px; }

.fade-in { animation: fadeIn .8s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.float-anim { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------------- Big banner / hero effects ---------------- */

.bg-grid-dark {
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

.bg-mesh {
  background-image:
    radial-gradient(circle at 18% 20%, rgba(16,185,129,.30), transparent 42%),
    radial-gradient(circle at 82% 8%, rgba(132,204,22,.22), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(34,211,238,.20), transparent 42%);
}

.blob-anim { animation: blobMove 16s ease-in-out infinite; }
.blob-anim-delay { animation: blobMove 16s ease-in-out infinite; animation-delay: -8s; }
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -40px) scale(1.18); }
}

.glass-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.text-gradient-anim {
  background-image: linear-gradient(90deg, var(--brand-from), var(--brand-via), #22d3ee, var(--brand-to), var(--brand-from));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 7s linear infinite;
}
@keyframes gradientShift {
  to { background-position: 250% center; }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}

/* ---------------- Redesign: banners, illustrations, image frames ---------------- */

.wave-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C240,100 480,0 720,30 C960,60 1200,100 1440,40 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
}
.wave-divider.to-slate-50 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f8fafc' d='M0,40 C240,100 480,0 720,30 C960,60 1200,100 1440,40 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
}

.dot-grid {
  background-image: radial-gradient(rgba(15,23,42,.14) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}
.dot-grid-light {
  background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

.img-frame {
  position: relative;
  isolation: isolate;
}
.img-frame::before {
  content: '';
  position: absolute;
  inset: -14px -14px auto auto;
  top: -18px; right: -18px;
  width: 90px; height: 90px;
  border: 2px dashed rgba(34, 197, 94, 0.4);
  border-radius: 20px;
  z-index: -1;
}
.img-frame::after {
  content: '';
  position: absolute;
  left: -16px; bottom: -16px;
  width: 70px; height: 70px;
  background-image: radial-gradient(rgba(34,197,94,.5) 1.6px, transparent 1.6px);
  background-size: 10px 10px;
  z-index: -1;
}

.orbit-shape {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
}
.orbit-spin { animation: orbitSpin 30s linear infinite; }
.orbit-spin-rev { animation: orbitSpin 40s linear infinite reverse; }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-slow { animation: spinSlow 22s linear infinite; }
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.draw-line {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: drawLine 2.6s ease forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

.chip-float { animation: chipFloat 5s ease-in-out infinite; }
.chip-float-delay { animation: chipFloat 5s ease-in-out infinite; animation-delay: -2.4s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.banner-title-shadow {
  text-shadow: 0 2px 30px rgba(16, 185, 129, .25);
}

.divider-fade-b {
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(34,197,94,.5), transparent);
}

/* reCAPTCHA v3 badge hidden per Google's terms, since the required attribution
   text is shown inline next to the contact form's submit button instead. */
.grecaptcha-badge { visibility: hidden; }