/* Base styles - simplified single theme */
:root {
  --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
  --font-vazir: 'Vazirmatn', system-ui, sans-serif;
  --font-stack: var(--font-inter), var(--font-vazir);
  
  /* Fixed dark theme */
  --bg: #0b0f1a;
  --card: #121826;
  --muted: #aab3c5;
  --text: #e9eef7;
  --primary: #48c6ef;
  --secondary: #b36ff4;
  --accent: #f7971e;
  --border: #1e2a3f;
  
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

* { box-sizing: border-box; }

body { margin: 0; font-family: var(--font-stack); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
body[dir="rtl"] { font-family: var(--font-vazir), var(--font-inter); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; } h3 { font-size: 1.5rem; }
p { margin: 0 0 var(--space-md) 0; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--secondary); }

.bg { position: fixed; inset: 0; z-index: -2; background: var(--bg); background-size: cover; background-position: center; }
.bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 80% 0%, rgba(72,198,239,0.12), transparent), radial-gradient(900px 500px at 20% 0%, rgba(179,111,244,0.10), transparent), linear-gradient(180deg, rgba(11,15,26,0.15), rgba(11,15,26,0.75)); z-index: 1; }

.loading-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.3s ease; }
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: var(--space-md); }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

header { position: relative; min-height: 60vh; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-lg); z-index: 2; }
.hero { position: relative; z-index: 3; max-width: 1100px; width: 100%; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-sm); }
.subtitle { font-size: 1.25rem; background: linear-gradient(90deg, var(--accent), var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; margin-bottom: var(--space-lg); }

/* Larger avatar */
.avatar.floating { position: fixed; left: var(--space-md); top: var(--space-md); width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-xl); z-index: 10; transition: transform 0.3s ease; }
.avatar.floating:hover { transform: scale(1.05); }

.lang { position: fixed; top: var(--space-md); right: var(--space-md); background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); cursor: pointer; z-index: 10; transition: all 0.2s ease; font-family: inherit; }
.lang:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

main { position: relative; z-index: 5; max-width: 1100px; margin: -2rem auto 2rem; padding: 0 var(--space-md); }
.tabs { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-xl); z-index: 6; }
.tab { background: var(--card); border: 1px solid var(--border); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; font-weight: 500; position: relative; overflow: hidden; }
.tab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary), var(--secondary)); opacity: 0; transition: opacity 0.2s ease; }
.tab.active::after { opacity: 0.1; }
.tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tab span { position: relative; z-index: 1; }

.content-section { display: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm); }
.content-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.content-section h2 { margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--primary); }

.contacts { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }
.contact-item { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.9rem; transition: all 0.2s ease; }
.contact-item:hover { background: rgba(0,0,0,0.5); transform: translateY(-1px); }

.contact-form { max-width: 600px; margin: 0 auto; display: grid; gap: var(--space-md); }
.contact-form input, .contact-form textarea { width: 100%; padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,0.2); color: var(--text); font-family: inherit; font-size: 1rem; transition: border-color 0.2s ease; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); }
.contact-form button { justify-self: start; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; color: white; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-weight: 600; transition: transform 0.2s ease; }
.contact-form button:hover { transform: translateY(-1px); }

.floating-actions { position: fixed; bottom: var(--space-xl); right: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); z-index: 20; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all 0.2s ease; }
.fab:hover { transform: scale(1.1); box-shadow: var(--shadow-xl); }

.toast-container { position: fixed; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm); }
.toast { background: var(--card); border: 1px solid var(--border); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; min-width: 300px; text-align: center; }
.toast.success { border-color: #22c55e; color: #22c55e; }
.toast.error { border-color: #ef4444; color: #ef4444; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-content { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; position: relative; max-width: 400px; width: 90%; }
.modal .close { position: absolute; top: var(--space-md); right: var(--space-md); font-size: 1.5rem; cursor: pointer; color: var(--muted); }
.modal .close:hover { color: var(--text); }

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .subtitle { font-size: 1rem; }
  .tabs { gap: var(--space-xs); }
  .tab { padding: var(--space-xs) var(--space-sm); font-size: 0.875rem; }
  .content-section { padding: var(--space-lg); }
  .avatar.floating { width: 90px; height: 90px; left: var(--space-sm); top: var(--space-sm); }
  .lang { top: var(--space-sm); right: var(--space-sm); }
  .floating-actions { bottom: var(--space-lg); right: var(--space-lg); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }