/* Custom styles override Tailwind here */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Geomanist:wght@300;400;500;600;700&display=swap');

:root {
  /* General palette */
  --bg-main: #0b0d12;
  --bg-glass: rgba(255,255,255,0.06);
  --border-glass: rgba(255,255,255,0.12);

  --accent: #6d5efc;
  --accent-2: #00d4ff;

  --text-main: #5858f7;
  --text-muted: #f3b15a;

  /* Secondary/hero palette */
  --primary: #ff9b26;
  --primary-dark: #ee4f27;
  --gradient-start: #ff9b26;
  --gradient-end: #ee4f27;
}

/* Base */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1f35 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-main), var(--bg-main));
  background-color: #0e0918; /* fallback / theme tone */
  color: var(--text-main);
}

/* Sections */
.section-padding { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) { .section-padding { padding-top: 3rem; padding-bottom: 3rem; } }

.landing-hero { padding: 120px 20px 100px; text-align: center; }
.landing-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.1; }
.landing-hero .accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { max-width: 700px; margin: 24px auto 40px; color: var(--text-muted); font-size: 18px; }
.landing-features { padding: 100px 20px; }
.landing-cta { position: relative; padding: 120px 20px; background: radial-gradient(600px at 50% 0%, rgba(109,94,252,.25), transparent 70%); }
.landing-cta .btn { font-size: 18px; padding: 16px 36px; }

/* Flags */
.flag { width: 18px; height: 12px; border-radius: 2px; display: inline-block; background-size: cover; background-position: center; }
.flag-fa { background: linear-gradient(to bottom,#239f40 0%,#239f40 33%,#ffffff 33%,#ffffff 66%,#da0000 66%,#da0000 100%); }
.flag-en { background: linear-gradient(to right,#012169 0%,#012169 40%,#c8102e 40%,#c8102e 60%,#012169 60%,#012169 100%); }
.flag-tr { background: #e30a17; }

/* Gradient helpers */
.gradient-bg { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); }
.gradient-text { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Cards */
.feature-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(99,102,241,0.15); }
.feature-card::after, .pricing-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--x) var(--y), rgba(255,255,255,.08), transparent 40%); opacity: 0; transition: opacity .3s; }
.feature-card:hover::after, .pricing-card:hover::after { opacity: 1; }

.pricing-card.highlight { transform: scale(1.05); border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }

/* Reveal animations */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: all .7s cubic-bezier(.2,.8,.2,1); }
.reveal-visible { opacity: 1; transform: translateY(0); }
.fade-in { animation: fadeIn 0.8s ease-out; }
.slide-up { animation: slideUp 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Glass */
.glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }

/* Fonts by locale */
.font-fa { font-family: Vazirmatn, sans-serif; }
.font-en, .font-tr { font-family: Inter, system-ui, sans-serif; }

/* RTL helpers */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* End of cleaned styles */

/* ===== Navbar improvements & emoji fixes ===== */
.nav-container {
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-logo { display:flex; align-items:center; gap:8px; font-weight:700; }
.nav-link { color: rgba(255,255,255,0.85); transition: color .2s, transform .15s; min-width: 120px; text-align: center; }
.nav-link:hover { color: #ffffff; transform: translateY(-2px); }
.nav-cta { padding: 8px 16px; border-radius: 10px; background: linear-gradient(90deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Ensure emoji flags render using color emoji fonts */
.flag-emoji { font-size:18px; line-height:1; }

/* ===== Hero animation additions ===== */
.animate-blob { animation: blob 8s infinite; transform-origin: center; }
.animation-delay-2000 { animation-delay: 2s; }
@keyframes blob {
  0% { transform: translateY(0) scale(1); }
  33% { transform: translateY(-12px) scale(1.05); }
  66% { transform: translateY(6px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* floating stat numbers */
.stat-float { animation: floatUp 3s ease-in-out infinite; }
@keyframes floatUp { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* small helper for subtle fade-in used by JS */
.animate-fade-in { animation: fadeIn 0.9s ease-out forwards; }