/*
 * GiGo Soft Premium — CENTRAL THEME
 * =====================================
 * थीम बदलनी हो तो सिर्फ नीचे :root वाली वैल्यू बदलो।
 * सभी पेज css/gigo-theme.css से रंग लेते हैं।
 */

:root {
  /* Primary brand (buttons, links, accents) */
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;

  /* Surfaces (Soft Premium) */
  --surface-page: #fafaf9;
  --surface-card: #ffffff;
  --surface-muted: #f5f5f4;
  --text-main: #1c1917;
  --text-muted: #78716c;
  --border-soft: #e7e5e4;

  /* Derived */
  --brand-rgb: 5, 150, 105;
  --brand-700-rgb: 4, 120, 87;
}

/* Page base */
body.gigo-soft {
  background-color: var(--surface-page) !important;
  color: var(--text-main);
}

/* ===== Tailwind brand utilities → CSS variables ===== */
.bg-brand-50  { background-color: var(--brand-50)  !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-200 { background-color: var(--brand-200) !important; }
.bg-brand-300 { background-color: var(--brand-300) !important; }
.bg-brand-400 { background-color: var(--brand-400) !important; }
.bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-700 { background-color: var(--brand-700) !important; }
.bg-brand-800 { background-color: var(--brand-800) !important; }

.text-brand-50  { color: var(--brand-50)  !important; }
.text-brand-100 { color: var(--brand-100) !important; }
.text-brand-200 { color: var(--brand-200) !important; }
.text-brand-300 { color: var(--brand-300) !important; }
.text-brand-400 { color: var(--brand-400) !important; }
.text-brand-500 { color: var(--brand-500) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.text-brand-800 { color: var(--brand-800) !important; }

.border-brand-200 { border-color: var(--brand-200) !important; }
.border-brand-300 { border-color: var(--brand-300) !important; }
.border-brand-500 { border-color: var(--brand-500) !important; }
.border-brand-600 { border-color: var(--brand-600) !important; }
.border-brand-700 { border-color: var(--brand-700) !important; }

.hover\:bg-brand-50:hover  { background-color: var(--brand-50)  !important; }
.hover\:bg-brand-100:hover { background-color: var(--brand-100) !important; }
.hover\:bg-brand-600:hover { background-color: var(--brand-600) !important; }
.hover\:bg-brand-700:hover { background-color: var(--brand-700) !important; }
.hover\:text-brand-600:hover { color: var(--brand-600) !important; }
.hover\:text-brand-700:hover { color: var(--brand-700) !important; }
.hover\:border-brand-300:hover { border-color: var(--brand-300) !important; }
.hover\:border-brand-600:hover { border-color: var(--brand-600) !important; }

.from-brand-500 { --tw-gradient-from: var(--brand-500) !important; }
.from-brand-600 { --tw-gradient-from: var(--brand-600) !important; }
.to-brand-600   { --tw-gradient-to: var(--brand-600) !important; }
.to-brand-700   { --tw-gradient-to: var(--brand-700) !important; }

.shadow-brand-600\/20 { --tw-shadow-color: rgba(var(--brand-rgb), 0.2) !important; }
.shadow-brand-600\/25 { --tw-shadow-color: rgba(var(--brand-rgb), 0.25) !important; }

/* Soft page gradients used site-wide */
.bg-gradient-to-b.from-stone-100.to-stone-50,
.bg-gradient-to-b.from-slate-50.to-white {
  background-image: linear-gradient(to bottom, var(--surface-muted), var(--surface-page)) !important;
}

/* Nav underline uses brand */
.nav-link::after {
  background: var(--brand-600) !important;
}
.nav-link:hover {
  color: var(--brand-700) !important;
}

/* Focus rings */
.form-input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15) !important;
}

/* ===== Download App + header CTAs ===== */
.btn-app-download {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 45%, var(--brand-700) 100%) !important;
  box-shadow: 0 4px 14px -2px rgba(var(--brand-700-rgb), 0.4);
  animation: gigoAppPulse 2.4s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, filter 0.2s ease;
  border: none;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.75rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-app-download::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent 40%, transparent 60%, rgba(255,255,255,0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.btn-app-download::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-120%) skewX(-12deg);
  animation: gigoAppShine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.btn-app-download i,
.btn-app-download span { position: relative; z-index: 1; }
.btn-app-download:hover {
  transform: translateY(-3px) scale(1.045);
  filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 12px 28px -6px rgba(var(--brand-700-rgb), 0.55), 0 0 0 3px rgba(var(--brand-rgb), 0.15);
  animation: none;
}
.btn-app-download:hover::after { animation: gigoAppShine 1.1s ease-in-out infinite; }
.btn-app-download:hover i { animation: gigoAppIconBounce 0.55s ease; }
.btn-app-download:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 12px -2px rgba(var(--brand-700-rgb), 0.4);
}
@keyframes gigoAppPulse {
  0%, 100% { box-shadow: 0 4px 14px -2px rgba(var(--brand-700-rgb), 0.35), 0 0 0 0 rgba(var(--brand-rgb), 0.4); }
  50% { box-shadow: 0 6px 18px -2px rgba(var(--brand-700-rgb), 0.45), 0 0 0 10px rgba(var(--brand-rgb), 0); }
}
@keyframes gigoAppShine {
  0% { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}
@keyframes gigoAppIconBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  60% { transform: translateY(0); }
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.header-actions .btn-app-download {
  height: 2.5rem;
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}
.header-actions .lang-switch-btn {
  height: 2.5rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.header-actions .lang-switch-btn::after { display: none !important; }
.header-actions .lang-switch-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  border-color: #d6d3d1 !important;
  background: #fff !important;
}
.header-actions .lang-switch-btn:active {
  transform: none !important;
  background: #f5f5f4 !important;
}

header .max-w-6xl > a.btn:not(.btn-app-download),
.header-actions a.btn:not(.btn-app-download),
header a.btn-header-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 45%, var(--brand-700) 100%) !important;
  box-shadow: 0 4px 14px -2px rgba(var(--brand-700-rgb), 0.4);
  animation: gigoAppPulse 2.4s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, filter 0.2s ease;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
}
header .max-w-6xl > a.btn:not(.btn-app-download)::after,
.header-actions a.btn:not(.btn-app-download)::after,
header a.btn-header-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: translateX(-120%) skewX(-12deg);
  animation: gigoAppShine 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
header .max-w-6xl > a.btn:not(.btn-app-download):hover,
.header-actions a.btn:not(.btn-app-download):hover,
header a.btn-header-cta:hover {
  transform: translateY(-3px) scale(1.045);
  filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 12px 28px -6px rgba(var(--brand-700-rgb), 0.55), 0 0 0 3px rgba(var(--brand-rgb), 0.15);
  animation: none;
}
header .max-w-6xl > a.btn:not(.btn-app-download):hover::after,
.header-actions a.btn:not(.btn-app-download):hover::after,
header a.btn-header-cta:hover::after {
  animation: gigoAppShine 1.1s ease-in-out infinite;
}
header .max-w-6xl > a.btn:not(.btn-app-download):active,
.header-actions a.btn:not(.btn-app-download):active,
header a.btn-header-cta:active {
  transform: translateY(-1px) scale(0.98);
}

header nav .nav-link {
  transition: color 0.2s ease, transform 0.2s ease;
}
header nav .nav-link:hover {
  color: var(--brand-700) !important;
  transform: translateY(-1px);
}
header nav .nav-link::after {
  background: var(--brand-600) !important;
}

/* Cards soft hover tint */
.card:hover {
  box-shadow: 0 20px 40px -12px rgba(var(--brand-rgb), 0.18) !important;
  border-color: var(--brand-300) !important;
}


/* Main H1 under page hero kickers — keep strong but secondary to kicker label */
body.gigo-soft section h1.text-3xl,
body.gigo-soft section h1.text-4xl {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Section H2 titles */
body.gigo-soft section h2.text-2xl,
body.gigo-soft section h2.text-3xl {
  font-size: clamp(1.2rem, 3vw, 1.55rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

/* Body copy under sections — slightly tighter */
body.gigo-soft section > div > p.text-slate-600,
body.gigo-soft section p.text-slate-600.text-sm,
body.gigo-soft section p.text-slate-600.leading-relaxed {
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
}

body.gigo-soft section .card p,
body.gigo-soft section .bg-white p.text-slate-600 {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
}


/* ========== CLEAR hierarchy: label BIG, title medium, body SMALL ========== */
body.gigo-soft section > div > p.text-brand-600.font-semibold.text-sm.uppercase,
body.gigo-soft section p.text-brand-600.font-semibold.text-sm.uppercase.tracking-wide,
body.gigo-soft section .text-brand-600.font-semibold.text-sm.uppercase.tracking-wide,
body.gigo-soft section .inv-section-label {
  font-size: clamp(1.35rem, 3.8vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
  color: #047857 !important;
  margin-bottom: 0.5rem !important;
}
body.gigo-soft section h1.text-3xl,
body.gigo-soft section h1.text-4xl,
body.gigo-soft section h1.inv-h-main,
body.gigo-soft section .inv-h-main {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body.gigo-soft section h2.text-2xl,
body.gigo-soft section h2.text-3xl,
body.gigo-soft section h2.text-4xl {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body.gigo-soft section p.text-slate-600,
body.gigo-soft section p.text-slate-500,
body.gigo-soft section .card p,
body.gigo-soft section li {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
}

/* GREEN label = main heading BIG; dark h1/h2 under it SMALLER */
body.gigo-soft section p.text-brand-600.font-semibold.text-sm.uppercase,
body.gigo-soft section p.text-brand-600.font-semibold.uppercase.tracking-wide,
body.gigo-soft section .inv-section-label,
body.gigo-soft section .text-brand-600.font-semibold.text-sm.uppercase.tracking-wide {
  font-size: clamp(1.45rem, 4.2vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  color: #047857 !important;
}
body.gigo-soft section h1,
body.gigo-soft section h2,
body.gigo-soft section .inv-h-main {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body.gigo-soft section p.text-slate-600,
body.gigo-soft section p.text-slate-500,
body.gigo-soft section .card p,
body.gigo-soft section li {
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
}