/* ═══════════════════════════════════════════════
   Bookane.ir - استایل اصلی
   نسخه ۲.۰ - طراحی حرفه‌ای
═══════════════════════════════════════════════ */

/* ─── متغیرها ─────────────────────────────────── */
:root {
  --primary:       #4F46E5;
  --primary-dark:  #3730A3;
  --primary-light: #EEF2FF;
  --secondary:     #06B6D4;
  --success:       #10B981;
  --warning:       #F59E0B;
  --danger:        #EF4444;

  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --border:        #E5E7EB;
  --text:          #1F2937;
  --text-muted:    #6B7280;
  --text-light:    #9CA3AF;

  --shadow-sm:     0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:     0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

  --radius-sm:     6px;
  --radius:        12px;
  --radius-lg:     20px;
  --radius-xl:     28px;

  --font-fa:       'Vazirmatn', 'Tahoma', sans-serif;
  --transition:    0.25s cubic-bezier(.4,0,.2,1);
  --sidebar-w:     280px;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg:       #0F172A;
  --surface:  #1E293B;
  --border:   #334155;
  --text:     #F1F5F9;
  --text-muted: #94A3B8;
  --text-light: #64748B;
  --primary-light: #1E1B4B;
}

/* ─── Reset & Base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-fa);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.8;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}

/* ─── Typography ──────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* ─── Layout ──────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }

/* ─── Navbar ──────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  transition: all var(--transition);
}

[data-theme="dark"] .navbar {
  background: rgba(15,23,42,0.95);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}

.navbar-brand .brand-icon {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.navbar-brand .brand-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  line-height: 1;
}

/* Search Bar در Navbar */
.navbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.navbar-search input {
  width: 100%;
  padding: 0.6rem 3rem 0.6rem 1rem;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  font-size: 0.9rem;
  transition: all var(--transition);
}

.navbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}

.navbar-search-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}

.navbar-search-btn:hover { color: var(--primary); }

/* Autocomplete */
.autocomplete-box {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  overflow: hidden;
  display: none;
}

.autocomplete-box.show { display: block; }

.autocomplete-item {
  padding: 0.65rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--transition);
  font-size: 0.9rem;
}

.autocomplete-item:hover { background: var(--primary-light); color: var(--primary); }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition);
  color: var(--text-muted);
}

.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: rotate(15deg);
}

/* ─── Hero Section ────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 50%, var(--secondary) 100%);
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content { position: relative; z-index: 1; }

.hero h1 {
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}

.hero p {
  color: rgba(255,255,255,0.85);
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.hero-stat {
  text-align: center;
  color: white;
}

.hero-stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  display: block;
}

.hero-stat-label {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* Hero Search */
.hero-search {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.hero-search input {
  width: 100%;
  padding: 1rem 5rem 1rem 1.5rem;
  font-size: 1.1rem;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: white;
  font-family: var(--font-fa);
  transition: all var(--transition);
}

.hero-search input::placeholder { color: rgba(255,255,255,0.65); }
.hero-search input:focus {
  outline: none;
  border-color: white;
  background: rgba(255,255,255,0.25);
}

.hero-search-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: var(--primary);
  border: none;
  border-radius: 50px;
  padding: 0.65rem 1.25rem;
  font-family: var(--font-fa);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.9rem;
}

.hero-search-btn:hover {
  background: var(--primary-light);
  transform: translateY(-50%) scale(1.05);
}

/* ─── Cards ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* Category Card */
.category-card {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text);
}

.category-card-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: var(--primary-light);
}

.category-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.category-card-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Tutorial Card */
.tutorial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tutorial-card-body { padding: 1.25rem; flex: 1; }
.tutorial-card-footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}

.tutorial-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tutorial-card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Badges ──────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-primary  { background: var(--primary-light); color: var(--primary); }
.badge-success  { background: #ECFDF5; color: var(--success); }
.badge-warning  { background: #FFFBEB; color: var(--warning); }
.badge-danger   { background: #FEF2F2; color: var(--danger); }
.badge-secondary{ background: #F0F9FF; color: var(--secondary); }
.badge-gray     { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

[data-theme="dark"] .badge-success  { background: #052e16; color: #4ade80; }
[data-theme="dark"] .badge-warning  { background: #1c1404; color: #fbbf24; }
[data-theme="dark"] .badge-danger   { background: #1f0a0a; color: #f87171; }

.difficulty-beginner  { background: #ECFDF5; color: #059669; }
.difficulty-mid       { background: #FFFBEB; color: #D97706; }
.difficulty-advanced  { background: #FEF2F2; color: #DC2626; }

/* ─── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-fa);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.btn-danger:hover {
  background: #DC2626;
  transform: translateY(-1px);
}

.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1.05rem; }
.btn-icon { padding: 0.5rem; border-radius: 8px; }

/* ─── Section Headers ─────────────────────────── */
.section { padding: 4rem 0; }
.section-sm { padding: 2.5rem 0; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.section-title-bar {
  width: 5px;
  height: 28px;
  background: linear-gradient(to bottom, var(--primary), var(--secondary));
  border-radius: 3px;
}

/* ─── Grid Layouts ────────────────────────────── */
.grid-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.grid-tutorials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-tutorials-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

/* ─── Sidebar Layout ──────────────────────────── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 2rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sidebar-widget-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
}

.sidebar-widget-body { padding: 0.75rem; }

.sidebar-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition);
  font-size: 0.875rem;
}

.sidebar-cat-item:hover,
.sidebar-cat-item.active {
  background: var(--primary-light);
  color: var(--primary);
}

.sidebar-cat-item .count-pill {
  background: var(--border);
  color: var(--text-muted);
  padding: 0.1rem 0.5rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ─── Search Results ──────────────────────────── */
.search-header {
  background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%);
  padding: 2.5rem 0;
  margin-bottom: 0;
}

.search-header h1 { color: white; }
.search-header p  { color: rgba(255,255,255,0.8); }

.search-form-wrap {
  max-width: 700px;
  margin: 0 auto;
}

.search-input-group {
  display: flex;
  background: white;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.search-input-group input {
  flex: 1;
  padding: 0.9rem 1.5rem;
  border: none;
  font-family: var(--font-fa);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
}

.search-input-group input:focus { outline: none; }

.search-input-group button {
  padding: 0.9rem 1.75rem;
  background: var(--primary);
  color: white;
  border: none;
  font-family: var(--font-fa);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 0.95rem;
}

.search-input-group button:hover { background: var(--primary-dark); }

/* فیلترها */
.search-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  align-items: center;
}

.filter-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 600;
}

.filter-chip {
  padding: 0.35rem 1rem;
  border-radius: 50px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-fa);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-weight: 600;
}

.filter-chip:hover,
.filter-chip.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

/* نتایج */
.search-result-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all var(--transition);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.search-result-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateX(-3px);
}

.search-result-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.search-result-content { flex: 1; min-width: 0; }

.search-result-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.search-result-title:hover { color: var(--primary); }

.search-result-highlight {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.search-result-highlight mark {
  background: rgba(79,70,229,0.15);
  color: var(--primary);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-weight: 600;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ─── Tutorial Page ───────────────────────────── */
.tutorial-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}

.tutorial-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.tutorial-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.tutorial-breadcrumb a { color: var(--primary); }
.tutorial-breadcrumb span { color: var(--text-muted); }

.tutorial-meta-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* محتوای آموزش */
.tutorial-content-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tutorial-content-frame {
  width: 100%;
  min-height: 600px;
  border: none;
  display: block;
}

/* ─── Pagination ──────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 2.5rem 0;
}

.page-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-fa);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}

.page-btn:hover,
.page-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.page-btn:disabled,
.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Tags ────────────────────────────────────── */
.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  padding: 0.2rem 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
}

.tag:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Empty State ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* ─── Toast Notifications ─────────────────────── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  min-width: 280px;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  animation: slideUp 0.35s ease forwards;
}

.toast-success { border-right: 4px solid var(--success); }
.toast-error   { border-right: 4px solid var(--danger);  }
.toast-info    { border-right: 4px solid var(--primary);  }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Footer ──────────────────────────────────── */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 1.5rem;
  margin-top: 5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 0.75rem;
  line-height: 1.8;
}

.footer-title {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.825rem;
}

/* ─── Loading Spinner ─────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 2rem auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .layout-with-sidebar,
  .tutorial-layout {
    grid-template-columns: 1fr;
  }

  .sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .navbar-search { display: none; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero-stats { gap: 1.5rem; }
  .hero-stat-num { font-size: 1.75rem; }
  .grid-categories { grid-template-columns: repeat(2, 1fr); }
  .grid-tutorials { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .search-result-item { flex-direction: column; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .grid-categories { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 1.75rem; }
}

/* ═══ Knowledge-first homepage ═════════════════════════════ */
.knowledge-hero{position:relative;overflow:hidden;padding:clamp(4rem,8vw,7rem) 0 2rem;background:radial-gradient(circle at 15% 10%,rgba(34,211,238,.17),transparent 30%),radial-gradient(circle at 80% 30%,rgba(168,85,247,.18),transparent 34%),#0b1025;color:#fff}
.knowledge-hero::before{content:'';position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent)}
.knowledge-hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center}
.eyebrow{display:inline-flex;color:#67e8f9;font-size:.78rem;font-weight:800;letter-spacing:.04em;margin-bottom:.8rem}
.knowledge-hero h1{color:#fff;font-size:clamp(2.7rem,6vw,5.3rem);line-height:1.17;letter-spacing:-.045em;margin-bottom:1.2rem}.knowledge-hero h1 span{background:linear-gradient(90deg,#67e8f9,#c4b5fd,#f9a8d4);-webkit-background-clip:text;color:transparent}
.knowledge-hero-copy>p{max-width:670px;color:#cbd5e1;font-size:clamp(1rem,1.7vw,1.15rem);line-height:2}
.knowledge-search{display:flex;align-items:center;gap:.7rem;max-width:720px;margin-top:2rem;padding:.45rem .55rem .45rem .45rem;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3)}.knowledge-search>span{color:#64748b;font-size:1.5rem;padding-right:.5rem}.knowledge-search input{flex:1;min-width:0;border:0;outline:0;padding:.75rem .25rem;font:inherit;color:#0f172a}.knowledge-search button{border:0;border-radius:11px;padding:.8rem 1.4rem;background:#6d4aff;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.hero-quick-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem;color:#94a3b8;font-size:.8rem}.hero-quick-links a{color:#e2e8f0;padding:.25rem .65rem;border:1px solid rgba(255,255,255,.16);border-radius:99px}
.knowledge-map{position:relative;aspect-ratio:1;max-width:430px;margin:auto;border:1px solid rgba(255,255,255,.12);border-radius:34px;background:rgba(255,255,255,.045);backdrop-filter:blur(10px)}.map-core,.map-node{position:absolute;display:grid;place-items:center;text-align:center;border:1px solid rgba(255,255,255,.16);background:#151b38;box-shadow:0 14px 35px rgba(0,0,0,.25)}.map-core{width:42%;aspect-ratio:1;top:29%;right:29%;border-radius:50%;font-size:1.4rem;font-weight:900;z-index:2}.map-core span{display:block;color:#94a3b8;font-size:.61rem;font-weight:500}.map-node{width:68px;aspect-ratio:1;border-radius:20px;font-weight:800;color:#a5f3fc;z-index:2}.node-1{top:8%;right:16%}.node-2{top:21%;left:6%}.node-3{bottom:12%;right:9%}.node-4{bottom:8%;left:14%}.map-orbit{position:absolute;border:1px dashed rgba(103,232,249,.25);border-radius:50%}.orbit-one{inset:15%}.orbit-two{inset:5%}
.hero-proof{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:4.5rem;border-top:1px solid rgba(255,255,255,.12)}.hero-proof>div{padding:1.5rem;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.1)}.hero-proof>div:last-child{border-left:0}.hero-proof strong{font-size:1.5rem}.hero-proof span{color:#94a3b8;font-size:.78rem}
.knowledge-section{background:var(--bg)}.knowledge-featured{background:linear-gradient(180deg,var(--primary-light),var(--bg))}.knowledge-section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem}.knowledge-section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.35rem}.knowledge-section-head p{color:var(--text-muted)}.knowledge-section .eyebrow,.knowledge-featured .eyebrow,.knowledge-cta .eyebrow{color:var(--primary)}.text-link{font-weight:800;white-space:nowrap}
.knowledge-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.knowledge-category{position:relative;min-height:190px;display:flex;flex-direction:column;align-items:flex-start;padding:1.3rem;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);transition:.25s ease}.knowledge-category::after{content:'';position:absolute;width:100px;height:100px;left:-35px;bottom:-45px;border-radius:50%;background:var(--category-color);opacity:.08}.knowledge-category:hover{transform:translateY(-5px);border-color:var(--category-color);box-shadow:var(--shadow-lg);color:var(--text)}.knowledge-category-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--category-color) 12%,transparent);font-size:1.35rem;margin-bottom:1rem}.knowledge-category-content{display:flex;flex-direction:column;gap:.35rem}.knowledge-category-content strong{font-size:1rem}.knowledge-category-content small{color:var(--text-muted);line-height:1.7}.knowledge-category-count{margin-top:auto;padding-top:1rem;font-size:.74rem;color:var(--category-color);font-weight:800}
.knowledge-cta{padding:3.5rem 0;background:#0b1025;color:#fff}.knowledge-cta .container{display:flex;align-items:center;justify-content:space-between;gap:2rem}.knowledge-cta h2{color:#fff;font-size:clamp(1.7rem,4vw,3rem)}
@media(max-width:900px){.knowledge-hero-grid{grid-template-columns:1fr}.knowledge-map{display:none}.knowledge-categories{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.knowledge-search{border-radius:13px}.knowledge-search button{padding:.8rem}.hero-proof{grid-template-columns:repeat(2,1fr)}.hero-proof>div:nth-child(2){border-left:0}.knowledge-categories{grid-template-columns:1fr}.knowledge-section-head,.knowledge-cta .container{align-items:flex-start;flex-direction:column}}

/* ─── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ─── Selection ───────────────────────────────── */
::selection { background: rgba(79,70,229,0.2); color: var(--primary); }