/* EarnHex - Royal Blue + Emerald palette (WizyPay-inspired) */

/* ==================== PALETTE REFERENCE ====================
   Navy / Slate-900       #0F172A   primary dark
   Twilight (blue-950)    #172554   alt dark sections
   Brand-600 (blue)       #2563EB   PRIMARY — trust, technology
   Brand-700 (hover)      #1D4ED8
   Brand-500 (lighter)    #3B82F6
   Brand-400 (accent)     #60A5FA
   Emerald-500            #10B981   SECONDARY — earning, growth
   Emerald-600 (hover)    #059669
   Emerald-400 (light)    #34D399
   Gold (amber-600)       #D97706   premium emphasis (Featured)
   Slate-500              #64748B   muted text
============================================================ */

/* ==================== BENGALI TYPOGRAPHY ==================== */
html[lang="bn"] body,
html[lang="bn"] input,
html[lang="bn"] textarea,
html[lang="bn"] button,
html[lang="bn"] select {
  font-family: 'Hind Siliguri', 'Inter', system-ui, sans-serif;
}
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3,
html[lang="bn"] h4, html[lang="bn"] h5,
html[lang="bn"] .gradient-text {
  line-height: 1.4 !important;
  padding-top: 0.15em;
  padding-bottom: 0.05em;
}
html[lang="bn"] h1 { line-height: 1.35 !important; }
html[lang="bn"] body { line-height: 1.6; }

/* ==================== GRADIENT TEXT (blue → emerald) ==================== */
.gradient-text {
  background: linear-gradient(135deg, #2563EB 0%, #10B981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB;
  padding: 0.1em 0;
  display: inline-block;
}
html[lang="bn"] .gradient-text { padding: 0.25em 0 0.1em; }

/* Gold gradient for premium emphasis */
.gradient-text-gold {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #D97706;
  padding: 0.1em 0;
  display: inline-block;
}

/* Emerald gradient — for "earn"-themed elements */
.gradient-text-emerald {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #10B981;
  padding: 0.1em 0;
  display: inline-block;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* ==================== BRAND BACKGROUNDS ==================== */
.bg-brand-gradient {
  background: linear-gradient(135deg, #2563EB 0%, #10B981 100%);
}
.bg-brand-gradient-soft {
  background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(16,185,129,0.05) 100%);
}
.bg-blue-emerald {
  background: linear-gradient(135deg, #2563EB 0%, #10B981 100%);
}

/* Dark mesh — for hero / dark sections */
.bg-brand-mesh-dark {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(37,99,235,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(16,185,129,0.35) 0%, transparent 55%),
    #0F172A;
}

/* Light mesh — for hero on light pages */
.bg-brand-mesh {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(37,99,235,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgba(16,185,129,0.07) 0%, transparent 55%),
    #fafafa;
}

.bg-twilight { background: #172554; }
.bg-navy     { background: #0F172A; }

/* ==================== GLASS ==================== */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.glass-dark {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Gradient border card */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 1.25rem;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, #2563EB, #10B981);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ==================== UI ELEMENTS ==================== */
::selection { background: #2563EB; color: #fff; }
input:focus, textarea:focus, select:focus { outline: none; }

.bg-grid {
  background-image: linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-grid-dark {
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-dots {
  background-image: radial-gradient(rgba(37,99,235,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Orbs */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(50px);
  opacity: 0.32;
  pointer-events: none;
  will-change: transform;
}
.orb-purple  { background: #2563EB; }   /* legacy alias → blue */
.orb-blue    { background: #2563EB; }
.orb-emerald { background: #10B981; }
.orb-indigo  { background: #3B82F6; }
.orb-cyan    { background: #10B981; }   /* legacy alias → emerald */
.orb-gold    { background: #D97706; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-20px) translateX(10px); }
  66%      { transform: translateY(10px) translateX(-10px); }
}
.animate-float       { animation: float 7s ease-in-out infinite; }
.animate-float-slow  { animation: float 11s ease-in-out infinite; }

/* Prose tweaks */
.prose-hda h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: #1E3A8A; }
.prose-hda h3 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #1E3A8A; }
.prose-hda p  { margin: .75rem 0; line-height: 1.7; color: #334155; }
.prose-hda ul { margin: .75rem 0; padding-left: 1.5rem; list-style: disc; }
.prose-hda li { margin: .35rem 0; line-height: 1.6; color: #334155; }
.prose-hda a  { color: #1D4ED8; text-decoration: underline; }
.prose-hda strong { color: #1E3A8A; }
.prose-hda code { background: #F1F5F9; padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* Form input */
.form-input {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  background: white;
  transition: border-color .15s ease, box-shadow .15s ease;
  color: #0F172A;
}
.form-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-slow { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Line-clamp fallbacks */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ==================== GUARANTEED CUSTOM COLOR CLASSES ==================== */
.text-navy     { color: #0F172A; }
.bg-navy       { background-color: #0F172A; }
.border-navy   { border-color: #0F172A; }

.text-gold     { color: #D97706; }
.bg-gold       { background-color: #D97706; }
.border-gold   { border-color: #D97706; }
.hover\:bg-gold:hover { background-color: #B45309; }

.text-cyan2    { color: #10B981; }   /* legacy alias → emerald */
.bg-cyan2      { background-color: #10B981; }
.border-cyan2  { border-color: #10B981; }

.text-emerald  { color: #10B981; }
.bg-emerald    { background-color: #10B981; }
.border-emerald{ border-color: #10B981; }

.text-twilight { color: #172554; }
.bg-twilight   { background-color: #172554; }

.text-slate2   { color: #64748B; }
.bg-slate2     { background-color: #64748B; }

/* Brand scale (blue) */
.text-brand-50  { color: #EFF6FF; }
.text-brand-100 { color: #DBEAFE; }
.text-brand-200 { color: #BFDBFE; }
.text-brand-300 { color: #93C5FD; }
.text-brand-400 { color: #60A5FA; }
.text-brand-500 { color: #3B82F6; }
.text-brand-600 { color: #2563EB; }
.text-brand-700 { color: #1D4ED8; }
.text-brand-800 { color: #1E40AF; }
.text-brand-900 { color: #1E3A8A; }
.text-brand-950 { color: #172554; }
.bg-brand-50    { background-color: #EFF6FF; }
.bg-brand-100   { background-color: #DBEAFE; }
.bg-brand-500   { background-color: #3B82F6; }
.bg-brand-600   { background-color: #2563EB; }
.bg-brand-700   { background-color: #1D4ED8; }
.bg-brand-900   { background-color: #1E3A8A; }
.bg-brand-950   { background-color: #172554; }
.border-brand-50  { border-color: #EFF6FF; }
.border-brand-100 { border-color: #DBEAFE; }
.border-brand-200 { border-color: #BFDBFE; }
.border-brand-300 { border-color: #93C5FD; }
.border-brand-400 { border-color: #60A5FA; }
.border-brand-700 { border-color: #1D4ED8; }
.border-brand-900 { border-color: #1E3A8A; }

/* Legacy class aliases (existing markup safety) */
.text-magenta  { color: #2563EB; }
.bg-magenta    { background-color: #2563EB; }
.border-magenta{ border-color: #2563EB; }

/* Hover states */
.hover\:bg-brand-50:hover  { background-color: #EFF6FF; }
.hover\:bg-brand-100:hover { background-color: #DBEAFE; }
.hover\:bg-brand-700:hover { background-color: #1D4ED8; }
.hover\:bg-brand-800:hover { background-color: #1E40AF; }
.hover\:text-brand-600:hover { color: #2563EB; }
.hover\:text-brand-700:hover { color: #1D4ED8; }
.hover\:text-brand-900:hover { color: #1E3A8A; }
.hover\:text-emerald:hover { color: #10B981; }
.hover\:border-brand-300:hover { border-color: #93C5FD; }
.hover\:border-brand-400:hover { border-color: #60A5FA; }
.hover\:border-brand-900:hover { border-color: #1E3A8A; }
.hover\:border-emerald:hover { border-color: #10B981; }

/* Opacity variants */
.bg-gold\/10    { background-color: rgba(217,119,6,0.10); }
.bg-gold\/15    { background-color: rgba(217,119,6,0.15); }
.bg-gold\/20    { background-color: rgba(217,119,6,0.20); }
.bg-emerald\/10 { background-color: rgba(16,185,129,0.10); }
.bg-emerald\/15 { background-color: rgba(16,185,129,0.15); }
.bg-emerald\/20 { background-color: rgba(16,185,129,0.20); }
.bg-cyan2\/10   { background-color: rgba(16,185,129,0.10); }
.bg-cyan2\/15   { background-color: rgba(16,185,129,0.15); }
.border-gold\/30 { border-color: rgba(217,119,6,0.30); }
.border-emerald\/30 { border-color: rgba(16,185,129,0.30); }
.border-cyan2\/30 { border-color: rgba(16,185,129,0.30); }
.border-brand-400\/20 { border-color: rgba(96,165,250,0.20); }

/* Focus rings */
.focus\:ring-brand-500:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.40); }
.focus\:ring-magenta:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.40); }
.focus\:ring-emerald:focus { box-shadow: 0 0 0 3px rgba(16,185,129,0.40); }

/* Safety net */
[class*="bg-white"]:not([class*="text-"]):not(.glass) { color: #0F172A; }