/* ==========================================================
   Guru Nanak Digital - Design System
   ========================================================== */

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: #0f172a;
  background-color: #f8fafc;
}
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* Mesh background used behind every section, with slow-drifting animated glow blobs */
.bg-mesh-light {
  background-color: #f8fafc;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,0.06), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(168,85,247,0.06), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(16,185,129,0.06), transparent 40%);
  position: relative;
  overflow: hidden;
}
.bg-mesh-light::before,
.bg-mesh-light::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.bg-mesh-light::before {
  top: -120px; left: -100px;
  background: radial-gradient(circle, #2563eb, transparent 70%);
  animation: gnd-blob-drift-a 22s ease-in-out infinite;
}
.bg-mesh-light::after {
  bottom: -140px; right: -100px;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  animation: gnd-blob-drift-b 26s ease-in-out infinite;
}
.bg-mesh-light > * { position: relative; z-index: 1; }
@keyframes gnd-blob-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes gnd-blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-mesh-light::before, .bg-mesh-light::after { animation: none; }
}

/* Gradient text helpers (hero title gets a slow shimmer sweep) */
.gradient-text-hero {
  background: linear-gradient(90deg,#1d4ed8,#4f46e5,#0ea5e9,#4f46e5,#1d4ed8);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gnd-shimmer 6s linear infinite;
}
@keyframes gnd-shimmer {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-text-hero { animation: none; }
}
.gradient-text-blue {
  background: linear-gradient(90deg,#2563eb,#0ea5e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-purple {
  background: linear-gradient(90deg,#7c3aed,#a855f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-emerald {
  background: linear-gradient(90deg,#059669,#10b981);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-sunset {
  background: linear-gradient(90deg,#d97706,#f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-cyan {
  background: linear-gradient(90deg,#0891b2,#06b6d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-indigo {
  background: linear-gradient(90deg,#4338ca,#6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Reference cards */
.card-reference,
.card-reference-purple,
.card-reference-emerald {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.card-reference:hover { border-color: #93c5fd; }
.card-reference-purple:hover { border-color: #d8b4fe; }
.card-reference-emerald:hover { border-color: #6ee7b7; }

/* Staggered scroll-reveal: children of a grid/flex row fade in one after another */
.grid > .gnd-animate:nth-child(1), .flex > .gnd-animate:nth-child(1) { transition-delay: 0ms; }
.grid > .gnd-animate:nth-child(2), .flex > .gnd-animate:nth-child(2) { transition-delay: 90ms; }
.grid > .gnd-animate:nth-child(3), .flex > .gnd-animate:nth-child(3) { transition-delay: 180ms; }
.grid > .gnd-animate:nth-child(4), .flex > .gnd-animate:nth-child(4) { transition-delay: 270ms; }
.grid > .gnd-animate:nth-child(5), .flex > .gnd-animate:nth-child(5) { transition-delay: 360ms; }
.grid > .gnd-animate:nth-child(6), .flex > .gnd-animate:nth-child(6) { transition-delay: 450ms; }

/* Button hover glow + press feedback (layered on top of Tailwind hover:scale classes) */
a, button { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
a:active, button:active { transform: scale(0.97); }

/* Count-up numbers use tabular figures so digits don't jitter in width while animating */
.gnd-counter-value { font-variant-numeric: tabular-nums; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Simple fade-up entrance animation (replaces framer-motion) */
.gnd-animate {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gnd-animate.gnd-in {
  opacity: 1;
  transform: translateY(0);
}

/* Modal - smooth fade + scale pop-in instead of an instant show/hide */
.gnd-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center; justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.gnd-modal-overlay.open { opacity: 1; visibility: visible; }
.gnd-modal-overlay > * {
  transform: scale(0.94) translateY(10px);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.gnd-modal-overlay.open > * { transform: scale(1) translateY(0); }

/* FAQ accordion - smooth height transition via JS-set max-height (see main.js) */
.gnd-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
  opacity: 0;
}
.gnd-faq-item.open .gnd-faq-answer { opacity: 1; }
.gnd-faq-item.open .gnd-faq-chevron-down { display: none; }
.gnd-faq-item:not(.open) .gnd-faq-chevron-up { display: none; }
.gnd-faq-chevron-down, .gnd-faq-chevron-up { transition: transform 0.3s ease; }
.gnd-faq-trigger:hover .gnd-faq-chevron-down { transform: translateY(2px); }

/* Tabs */
.gnd-tab-panel { display: none; }
.gnd-tab-panel.active { display: block; }

/* Floating actions */
.gnd-floating { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40; }
.gnd-pulse-ring {
  position: absolute; inset: 0; border-radius: 9999px;
  background: #34d399; opacity: 0.4;
  animation: gnd-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes gnd-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ==========================================================
   Neon "digital marketing" glow panels (service cards, hero,
   case-study defaults) - dark navy background, glowing blurred
   orbs, a floating/pulsing icon, and twinkling particle dots.
   ========================================================== */
.gnd-neon-panel {
  position: relative;
  background: radial-gradient(circle at 30% 20%, #1e2a4a, #0b1220 70%);
  overflow: hidden;
}
.gnd-neon-panel .gnd-neon-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(30px);
  opacity: 0.55;
}
.gnd-neon-panel .gnd-neon-glow-a { width: 140px; height: 140px; top: -30px; left: -20px; animation: gnd-neon-drift-a 7s ease-in-out infinite; }
.gnd-neon-panel .gnd-neon-glow-b { width: 120px; height: 120px; bottom: -30px; right: -10px; animation: gnd-neon-drift-b 8s ease-in-out infinite; }
@keyframes gnd-neon-drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,10px); } }
@keyframes gnd-neon-drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12px,-8px); } }

.gnd-neon-panel .gnd-neon-icon-wrap {
  position: relative; z-index: 2;
  width: 72px; height: 72px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  animation: gnd-neon-float 3.6s ease-in-out infinite;
}
.gnd-neon-panel .gnd-neon-icon-wrap svg { filter: drop-shadow(0 0 10px currentColor); }
@keyframes gnd-neon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.gnd-neon-panel .gnd-neon-ring {
  position: absolute; z-index: 1;
  width: 110px; height: 110px;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.16);
  animation: gnd-neon-pulse-ring 2.6s ease-out infinite;
}
@keyframes gnd-neon-pulse-ring {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.gnd-neon-panel .gnd-neon-dot {
  position: absolute; z-index: 1;
  width: 5px; height: 5px; border-radius: 9999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: gnd-neon-twinkle 2.2s ease-in-out infinite;
}
@keyframes gnd-neon-twinkle { 0%,100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

.gnd-neon-cyan   { color: #22d3ee; }
.gnd-neon-blue   { color: #60a5fa; }
.gnd-neon-purple { color: #c084fc; }
.gnd-neon-emerald{ color: #34d399; }
.gnd-neon-amber  { color: #fbbf24; }
.gnd-neon-indigo { color: #818cf8; }

@media (prefers-reduced-motion: reduce) {
  .gnd-neon-panel .gnd-neon-glow-a, .gnd-neon-panel .gnd-neon-glow-b,
  .gnd-neon-panel .gnd-neon-icon-wrap, .gnd-neon-panel .gnd-neon-ring,
  .gnd-neon-panel .gnd-neon-dot { animation: none; }
}

/* Animated flowing connector lines (hero graphic) */
.gnd-flow-line {
  stroke-dasharray: 8 6;
  animation: gnd-flow-dash 1.4s linear infinite;
}
@keyframes gnd-flow-dash { to { stroke-dashoffset: -28; } }
.gnd-node-pulse { animation: gnd-node-pulse-kf 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes gnd-node-pulse-kf { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.gnd-bar-rise { animation: gnd-bar-rise-kf 1.1s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes gnd-bar-rise-kf { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .gnd-flow-line { animation: none; }
  .gnd-node-pulse { animation: none; }
}

/* Scroll progress bar */
#gnd-scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg,#2563eb,#4f46e5,#0ea5e9);
  z-index: 1000;
  transition: width 0.1s ease-out;
}

/* Metric bar fill animation (case study before/after) */
.gnd-metric-bar-track { height: 5px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.gnd-metric-bar-fill { height: 100%; border-radius: 9999px; width: 0%; transition: width 1s cubic-bezier(0.16,1,0.3,1); }
.gnd-metric-bar-fill.gnd-fill-in { width: var(--gnd-fill, 100%); }

/* Animated glowing conic border for the "Most Popular" pricing card */
.gnd-glow-border { position: relative; }
.gnd-glow-border::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(120deg,#2563eb,#a855f7,#0ea5e9,#2563eb);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gnd-border-flow 5s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes gnd-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Gentle looping pulse, available for any standout icon accent */
.gnd-icon-pulse { animation: gnd-icon-pulse-kf 2.4s ease-in-out infinite; }
@keyframes gnd-icon-pulse-kf {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .gnd-glow-border::before, .gnd-icon-pulse { animation: none; }
}
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4\/3 { aspect-ratio: 4 / 3; }
.aspect-16\/9 { aspect-ratio: 16 / 9; }
.aspect-21\/9 { aspect-ratio: 21 / 9; }

img { max-width: 100%; height: auto; }