@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700;800&display=swap');
:root {
  /* متغیرها را برای تم روشن اصلاح کن */
  --bg: #F2EBE9; /* اینجا قبلاً مشکی بود، به رنگ روشن برند تغییرش دادیم */
  --text: #1a1a1a;
  --muted: rgba(26, 26, 26, 0.72);
  --border: rgba(26, 26, 26, 0.08); /* حاشیه هم تیره شد */
  --container: 1200px;
  --radius: 18px;

  --bg-light: #F2EBE9;
  --primary: #6B131C;
  --accent: #EE1C25;
  --text-white: #F2EBE9;
}

body {
  margin: 0;
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  
  /* اینجا هم از متغیر جدید استفاده کن */
  background-color: var(--bg); 
  
  /* اگر همچنان می‌خواهی گرادینت‌های قبلی باشند: */
  background-image: 
    radial-gradient(1200px 700px at 80% -10%, rgba(139,92,246,.08), transparent 55%),
    radial-gradient(900px 600px at 10% 0%, rgba(34,211,238,.05), transparent 50%),
    radial-gradient(900px 600px at 70% 90%, rgba(77,163,255,.05), transparent 55%);
    
  color: var(--text);
  line-height: 1.8;
  min-height: 100vh; /* این خط حیاتی است */
}



*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* فقط یک بار تعریف بادی */

/* باقی استایل‌ها */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}

/* اصلاح رنگ کارت‌ها و پنل‌ها تا با بک‌گراند روشن همخوانی داشته باشند */
.card, .panel, .service, .post-card {
  background: rgba(255,255,255,0.5); /* کمی شفاف برای حالت شیشه‌ای */
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* هدر ( Noir-Tech ) */
.topbar {
  position: fixed;
  top: 0;
  z-index: 1000;
  background: rgba(7, 4, 5, 0.95); /* هدر را مشکی نگه داشتیم چون استایل برند است */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* بقیه کلاس‌ها را به همین ترتیب پایین قرار بده ... */


.topbar,
header.topbar,
.topbar::before,
.topbar::after {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  background-color: rgba(7, 4, 5, 0.85) !important;
}

.topbar::before,
.topbar::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  direction: rtl;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.2px;
}

.logo-container img {
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(238, 28, 37, 0.3));
  transition: transform 0.3s ease;
}

.brand span {
  font-weight: 900;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.2;
  opacity: .95;
}

.logo{
  width:38px;
  height:38px;
  border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.9), rgba(77,163,255,.35) 40%, rgba(139,92,246,.55));
  box-shadow: 0 10px 30px rgba(77,163,255,.2);
  border:1px solid rgba(255,255,255,.10);
}

.menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu a {
  position: relative;
  padding: 10px 16px;
  color: rgba(240, 238, 233, 0.7);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: none !important;
  background: transparent !important;
}

.menu a:hover {
  color: #fff;
}

.menu a.active::after,
.menu a:hover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  border-radius: 10px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-cta .auth-btn,
.auth-btn {
  background: linear-gradient(180deg, #EE1C25 0%, #B3151B 100%) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 12px !important;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(238, 28, 37, 0.3);
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-cta .auth-btn:hover,
.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(238, 28, 37, 0.5);
  filter: brightness(1.1);
}

.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--text);
}

/* Theme helpers */
.highlight {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(238, 28, 37, 0.25);
  font-weight: 800;
}


/* اصلاح بخش بادی برای حذف سیاهی و ثابت ماندن بک‌گراند */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* همیشه کل ارتفاع صفحه را پر می‌کند */
  overflow-x: hidden; /* جلوگیری از اسکرول افقی بی‌مورد */
  background: 
    radial-gradient(1200px 700px at 80% -10%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(900px 600px at 10% 0%, rgba(34,211,238,.12), transparent 50%),
    radial-gradient(900px 600px at 70% 90%, rgba(77,163,255,.10), transparent 55%),
    #F2EBE9; /* رنگ روشن برند داریا */
  background-attachment: fixed; /* اینجا جادو اتفاق می‌افتد؛ بک‌گراند فیکس می‌شود و اسکرول نمی‌خورد */
  background-repeat: no-repeat;
  background-size: cover;
  color: #1a1a1a; /* رنگ متن را برای پس‌زمینه روشن تنظیم کن */
  line-height: 1.8;
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}

@media (max-width: 920px){
  .menu{display:none}
  .mobile-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    left:18px;
    right:18px;
    top:72px;
    background: rgba(11,16,32,.95);
    border:1px solid var(--border);
    border-radius:18px;
    padding:10px;
  }
  .menu.open a{padding:12px}
}