/* ═══ TranscriptGrab Design System ═══ */

/* ── 1. Variables ── */
:root {
  --bg: #09090b; --bg2: #111113; --bg3: #1a1a1f;
  --surface: rgba(17,17,19,0.8); --surface2: rgba(255,255,255,0.03);
  --text: #f4f4f5; --text2: #a1a1aa; --text3: #52525b;
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.04);
  --accent: #a855f7; --accent2: #9333ea; --accent3: #7c3aed;
  --accent-glow: rgba(168,85,247,0.25); --accent-subtle: rgba(168,85,247,0.08);
  --radius: 16px; --radius-sm: 10px; --radius-xs: 6px;
  --font: 'Inter',system-ui,sans-serif; --font-ar: 'Cairo',sans-serif;
  --shadow: 0 8px 40px -12px rgba(0,0,0,0.7);
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg: #ffffff; --bg2: #f8f8fa; --bg3: #f0f0f3;
  --surface: rgba(255,255,255,0.85); --surface2: rgba(0,0,0,0.02);
  --text: #09090b; --text2: #52525b; --text3: #a1a1aa;
  --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.04);
  --accent-glow: rgba(168,85,247,0.15); --accent-subtle: rgba(168,85,247,0.06);
  --shadow: 0 8px 32px -12px rgba(0,0,0,0.12);
}

/* ── 2. Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; overflow-x:hidden; transition:background var(--transition),color var(--transition); }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
a { color:inherit; text-decoration:none; }
input { font-family:inherit; border:none; outline:none; background:none; }
::selection { background:var(--accent); color:#fff; }

/* ── 3. Layout ── */
.container { width:100%; max-width:1100px; margin:0 auto; padding:0 20px; }
.container-sm { max-width:760px; }
.section { padding:80px 0; }
.hidden { display:none!important; }
.ml-auto { margin-inline-start:auto; }

/* ── 4. Background Effects ── */
.bg-grid { position:fixed; inset:0; z-index:-2; background-size:48px 48px;
  background-image:linear-gradient(to right,var(--border2) 1px,transparent 1px),linear-gradient(to bottom,var(--border2) 1px,transparent 1px);
  mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent); }
.glow-orb { position:fixed; border-radius:50%; filter:blur(100px); opacity:0.4; z-index:-1; pointer-events:none; animation:orbFloat 12s ease-in-out infinite alternate; }
.glow-orb-1 { width:400px; height:400px; background:var(--accent); top:-10%; left:-5%; }
.glow-orb-2 { width:300px; height:300px; background:#6366f1; bottom:-8%; right:-5%; animation-delay:-6s; }
[data-theme="light"] .glow-orb { opacity:0.15; }
@keyframes orbFloat { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(40px,30px) scale(1.1)} }

/* ── 5. Navigation ── */
.nav { position:sticky; top:0; z-index:100; padding:16px 0;
  background:rgba(9,9,11,0.6); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border); }
[data-theme="light"] .nav { background:rgba(255,255,255,0.7); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.1rem; }
.logo-img { width:34px; height:34px; max-width:34px; max-height:34px; flex-shrink:0; object-fit:contain; display:block; transition:transform var(--transition); }
.logo-img:hover { transform:scale(1.05); }
.logo-img-footer { width:28px; height:28px; }
.nav-actions { display:flex; align-items:center; gap:8px; }

/* Theme Toggle */
.theme-toggle { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text2);
  transition:background var(--transition),color var(--transition); }
.theme-toggle:hover { background:var(--surface2); color:var(--text); }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:block; }
[data-theme="light"] .theme-toggle .icon-sun { display:block; }
[data-theme="light"] .theme-toggle .icon-moon { display:none; }

/* Language Switcher */
.lang-switcher { position:relative; }
.lang-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--radius-xs); font-size:0.8rem; font-weight:600; color:var(--text2);
  transition:all var(--transition); border:1px solid var(--border); }
.lang-btn:hover { color:var(--text); background:var(--surface2); }
.lang-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:140px; padding:6px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  max-height:280px; overflow-y:auto; }
.lang-dropdown.open { display:block; animation:fadeDown .2s ease; }
.lang-option { display:block; width:100%; padding:8px 12px; border-radius:var(--radius-xs); font-size:0.82rem; font-weight:500; color:var(--text2);
  text-align:start; transition:all var(--transition); }
.lang-option:hover,.lang-option.active { background:var(--accent-subtle); color:var(--accent); }

/* ── 6. Hero ── */
.hero { text-align:center; padding:80px 0 40px; }
.hero-title { font-size:clamp(2rem,5.5vw,3.6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin-bottom:16px; color:var(--text); }
.gradient-text { background:linear-gradient(135deg,var(--accent),#818cf8,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:clamp(1rem,2vw,1.2rem); color:var(--text2); max-width:520px; margin:0 auto 40px; font-weight:500; }

/* ── 7. Input Card ── */
.input-card { max-width:640px; margin:0 auto; padding:6px; border-radius:var(--radius); }
.input-card form { display:flex; gap:6px; }
.input-wrapper { position:relative; flex:1; display:flex; align-items:center; }
.input-icon { position:absolute; left:16px; color:var(--text3); width:20px; height:20px; pointer-events:none; }
.input-wrapper input { width:100%; padding:14px 16px 14px 48px; font-size:0.95rem; color:var(--text); border-radius:var(--radius-sm); background:transparent; }
.input-wrapper input::placeholder { color:var(--text3); }
.input-error { margin-top:8px; padding:0 16px 8px; font-size:0.85rem; color:#ef4444; font-weight:500; }

/* ── 8. Glass Card ── */
.glass { background:var(--surface); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
[data-theme="light"] .glass { box-shadow:0 4px 24px -8px rgba(0,0,0,0.06); }

/* ── 9. Buttons ── */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--accent),var(--accent3)); color:#fff; font-weight:600; font-size:0.92rem;
  box-shadow:0 4px 20px var(--accent-glow); transition:all var(--transition); white-space:nowrap; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px var(--accent-glow); filter:brightness(1.1); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:0.6; pointer-events:none; }
.btn-primary.copied { background:linear-gradient(135deg,#22c55e,#16a34a)!important; box-shadow:0 4px 20px rgba(34,197,94,0.3)!important; }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--border); color:var(--text); font-weight:600; font-size:0.85rem; background:var(--bg2);
  transition:all var(--transition); white-space:nowrap; }
.btn-secondary:hover { background:var(--bg3); border-color:var(--text3); }
.btn-sm { padding:10px 18px; font-size:0.85rem; }
.btn-icon { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-xs); font-size:0.82rem; font-weight:500;
  color:var(--text2); border:1px solid var(--border); transition:all var(--transition); }
.btn-icon:hover,.btn-icon.active { color:var(--accent); border-color:var(--accent); background:var(--accent-subtle); }

/* ── 10. Result Section ── */
.result-layout { max-width:760px; }
.result-card { padding:28px; }
.video-info { display:flex; gap:20px; align-items:flex-start; margin-bottom:24px; }
.video-thumb { width:180px; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); flex-shrink:0; }
.video-meta { flex:1; min-width:0; }
.video-title { font-size:1.1rem; font-weight:700; line-height:1.4; margin-bottom:10px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--radius-xs);
  background:var(--accent-subtle); color:var(--accent); font-size:0.75rem; font-weight:600; border:1px solid rgba(168,85,247,0.15); }

/* Transcript Search */
.transcript-search { display:flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:16px;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); transition:border-color var(--transition); }
.transcript-search:focus-within { border-color:var(--accent); }
.search-icon { width:16px; height:16px; color:var(--text3); flex-shrink:0; }
.transcript-search input { flex:1; font-size:0.85rem; color:var(--text); }
.search-count { font-size:0.75rem; color:var(--text3); font-weight:500; white-space:nowrap; }

/* Transcript Box */
.transcript-box { max-height:400px; overflow-y:auto; padding:20px; border-radius:var(--radius-sm);
  background:var(--surface2); border:1px solid var(--border); font-size:0.88rem; line-height:1.85; color:var(--text2); }
.transcript-para { margin-bottom:14px; }
.timestamp { color:var(--accent); font-size:0.75rem; font-weight:700; cursor:pointer; border-radius:3px; padding:1px 4px;
  transition:background var(--transition); font-variant-numeric:tabular-nums; }
.timestamp:hover { background:var(--accent-subtle); }
.transcript-box.hide-timestamps .timestamp { display: none; }
.transcript-text { color:var(--text2); }
[dir="rtl"] .transcript-box { text-align:right; font-family:var(--font-ar); }

/* Search Highlights */
.search-highlight { background:rgba(168,85,247,0.2); border-radius:2px; padding:1px 0; }
.search-highlight.active { background:var(--accent); color:#fff; }

/* Transcript Controls */
.transcript-controls { display:flex; align-items:center; gap:8px; margin:12px 0; flex-wrap:wrap; }
.speed-control { display:flex; gap:4px; }
.speed-control button { padding:4px 10px; font-size:0.75rem; border-radius:var(--radius-xs); color:var(--text3);
  border:1px solid var(--border); transition:all var(--transition); }
.speed-control button.active { color:var(--accent); border-color:var(--accent); background:var(--accent-subtle); }

/* Actions */
.actions { display:flex; flex-wrap:wrap; gap:10px; padding-top:16px; border-top:1px solid var(--border); margin-top:16px; }

/* ── 11. AI Tools ── */
.ai-tools { margin-top:20px; padding:24px; }
.ai-tabs { display:flex; gap:4px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; }
.ai-tab { display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-xs); font-size:0.82rem; font-weight:600;
  color:var(--text3); transition:all var(--transition); white-space:nowrap; border:1px solid transparent; }
.ai-tab:hover { color:var(--text2); background:var(--surface2); }
.ai-tab.active { color:var(--accent); background:var(--accent-subtle); border-color:rgba(168,85,247,0.15); }
.ai-tab i,.ai-tab svg { width:15px; height:15px; }
#aiContent { min-height:80px; }
.ai-loading { display:flex; align-items:center; gap:10px; color:var(--text3); font-size:0.85rem; padding:20px 0; }
.ai-result-text { font-size:0.9rem; line-height:1.8; color:var(--text2); }
.ai-list { list-style:none; padding:0; }
.ai-list li { padding:8px 0; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--text2); line-height:1.6; }
.ai-list li::before { content:"→ "; color:var(--accent); font-weight:700; }
.ai-list.compact li { padding:5px 0; font-size:0.84rem; }
.ai-tags { display:flex; flex-wrap:wrap; gap:8px; }
.keyword-tag { padding:5px 14px; border-radius:20px; font-size:0.8rem; font-weight:600;
  background:var(--accent-subtle); color:var(--accent); border:1px solid rgba(168,85,247,0.12); }
.ai-quote { border-left:3px solid var(--accent); padding:10px 16px; margin-bottom:12px; font-style:italic;
  color:var(--text2); font-size:0.88rem; background:var(--surface2); border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.btn-copy-ai { display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:6px 14px; border-radius:var(--radius-xs);
  font-size:0.78rem; font-weight:600; color:var(--text3); border:1px solid var(--border); cursor:pointer; background:var(--bg2); transition:all var(--transition); }
.btn-copy-ai:hover { color:var(--accent); border-color:var(--accent); }

/* ── 12. Error Card ── */
.error-card { text-align:center; padding:32px; }
.error-icon { width:52px; height:52px; border-radius:50%; background:rgba(239,68,68,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:#ef4444; }

/* ── 13. Skeleton ── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skeleton { background:linear-gradient(90deg,var(--surface2) 25%,rgba(255,255,255,0.05) 50%,var(--surface2) 75%);
  background-size:800px 100%; animation:shimmer 1.5s infinite ease-in-out; border-radius:var(--radius-xs); }
[data-theme="light"] .skeleton { background:linear-gradient(90deg,rgba(0,0,0,0.04) 25%,rgba(0,0,0,0.08) 50%,rgba(0,0,0,0.04) 75%); background-size:800px 100%; }
.skeleton-thumb { width:180px; aspect-ratio:16/9; border-radius:var(--radius-sm); flex-shrink:0; }
.skeleton-text-group { flex:1; display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.skeleton-line { height:14px; width:100%; }
.skeleton-line-lg { height:18px; width:75%; }
.skeleton-line-md { height:14px; width:60%; }
.skeleton-line-sm { height:14px; width:30%; }
.skeleton-lines { display:flex; flex-direction:column; gap:10px; margin-top:24px; }

/* ── 14. How It Works ── */
.section-title { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; text-align:center; margin-bottom:12px; letter-spacing:-0.02em; }
.section-subtitle { text-align:center; color:var(--text2); max-width:480px; margin:0 auto 48px; font-size:0.95rem; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.step-card { text-align:center; padding:32px 24px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2);
  transition:all 300ms ease; position:relative; }
.step-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 8px 32px var(--accent-glow); }
.step-num { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent3));
  color:#fff; font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  box-shadow:0 4px 16px var(--accent-glow); }
.step-icon { width:48px; height:48px; margin:0 auto 12px; color:var(--accent); }
.step-title { font-weight:700; font-size:1rem; margin-bottom:8px; }
.step-desc { font-size:0.85rem; color:var(--text2); line-height:1.6; }

/* ── 15. Features Grid ── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { padding:28px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2);
  transition:all 300ms ease; }
.feature-card:hover { border-color:rgba(168,85,247,0.3); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.feature-icon { width:42px; height:42px; border-radius:var(--radius-sm); background:var(--accent-subtle);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent); }
.feature-icon svg,.feature-icon i { width:20px; height:20px; }
.feature-title { font-weight:700; font-size:0.95rem; margin-bottom:8px; }
.feature-desc { font-size:0.84rem; color:var(--text2); line-height:1.6; }

/* ── 16. Stats ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat-card { text-align:center; padding:28px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); transition:all 300ms ease; }
.stat-card:hover { border-color:var(--accent); }
.stat-icon { width:36px; height:36px; margin:0 auto 12px; color:var(--accent); }
.stat-value { font-size:0.95rem; font-weight:700; margin-bottom:4px; }

/* ── 17. FAQ ── */
.faq-list { max-width:680px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; transition:border-color 300ms ease; }
.faq-item:hover,.faq-item.open { border-color:rgba(168,85,247,0.2); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  font-weight:600; font-size:0.92rem; color:var(--text); text-align:start; cursor:pointer; transition:color var(--transition); }
.faq-question:hover { color:var(--accent); }
.faq-chevron { width:18px; height:18px; color:var(--text3); transition:transform 300ms ease; flex-shrink:0; }
.faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--accent); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 400ms ease,padding 300ms ease; }
.faq-item.open .faq-answer { max-height:200px; }
.faq-answer-inner { padding:0 20px 18px; font-size:0.87rem; color:var(--text2); line-height:1.7; }

/* ── 18. Ad Zones ── */
.ad-zone { border:1px dashed var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:0.7rem; font-weight:500; min-height:100px; margin:24px auto; max-width:728px; background:var(--surface2); }
.ad-zone-sidebar { width:100%; min-height:250px; }

/* ── 19. Breadcrumbs ── */
.breadcrumbs { padding:12px 20px; }
.breadcrumbs ol { display:flex; align-items:center; gap:8px; list-style:none; flex-wrap:wrap; }
.breadcrumbs li { font-size:0.8rem; color:var(--text3); font-weight:500; }
.breadcrumbs li a { color:var(--text2); transition:color var(--transition); }
.breadcrumbs li a:hover { color:var(--accent); }
.breadcrumbs li:not(:last-child)::after { content:"›"; margin-left:8px; color:var(--text3); }

/* ── 20. Related Tools Grid ── */
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card { display:block; padding:28px; border-radius:var(--radius); transition:all 300ms ease; text-decoration:none; }
.related-card:hover { border-color:rgba(168,85,247,0.3); transform:translateY(-4px); box-shadow:0 8px 32px var(--accent-glow); }
.related-title { font-size:1rem; font-weight:700; margin-bottom:8px; color:var(--text); }
.related-desc { font-size:0.84rem; color:var(--text2); line-height:1.6; margin-bottom:12px; }
.related-arrow { color:var(--accent); display:inline-flex; transition:transform var(--transition); }
.related-card:hover .related-arrow { transform:translateX(4px); }

/* ── 21. Footer ── */
.footer { padding:48px 0 32px; border-top:1px solid var(--border); }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:32px; }
.footer-brand-section { }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand-name { font-weight:700; font-size:1rem; }
.footer-tagline { font-size:0.84rem; color:var(--text2); line-height:1.6; max-width:280px; }
.footer-links h4 { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text3); margin-bottom:14px; }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a { font-size:0.84rem; color:var(--text2); transition:color var(--transition); }
.footer-links a:hover { color:var(--accent); }
.footer-bottom { padding-top:24px; border-top:1px solid var(--border); text-align:center; }
.footer-copy { font-size:0.75rem; color:var(--text3); }

/* ── 22. Spinner ── */
@keyframes spin { to{transform:rotate(360deg)} }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.2); border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite; }

/* ── 21. Reveal Animations ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.fade-up { animation:fadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }

/* ── 22. Scrollbar ── */
.custom-scroll::-webkit-scrollbar { width:5px; }
.custom-scroll::-webkit-scrollbar-track { background:transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background:var(--text3); border-radius:99px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background:var(--text2); }

/* ── 23. Responsive ── */
@media(max-width:768px) {
  .hero { padding:48px 0 24px; }
  .hero-title { font-size:1.8rem; }
  .input-card form { flex-direction:column; }
  .btn-primary { width:100%; }
  .video-info { flex-direction:column; }
  .video-thumb { width:100%; }
  .skeleton-thumb { width:100%; }
  .steps { grid-template-columns:1fr; gap:16px; }
  .features-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .actions .ml-auto { margin-inline-start:0; grid-column:span 2; }
  .result-card { padding:20px; }
  .section { padding:48px 0; }
  .ai-tabs { gap:2px; }
  .ai-tab { padding:7px 10px; font-size:0.78rem; }
  .related-grid { grid-template-columns:1fr; gap:14px; }
  .footer-main { grid-template-columns:1fr; gap:24px; text-align:center; }
  .footer-tagline { margin:0 auto; }
  .footer-links ul { display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; }
  .footer-links li { margin-bottom:0; }
}
@media(min-width:769px) and (max-width:1024px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px) {
  .nav-brand span { display:none; }
  .hero-title { font-size:1.5rem; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:12px; }
}

/* ── 24. RTL ── */
[dir="rtl"] { direction:rtl; }
[dir="rtl"] body { font-family:var(--font-ar); }
[dir="rtl"] .input-icon { left:auto; right:16px; }
[dir="rtl"] .input-wrapper input { padding:14px 48px 14px 16px; }
[dir="rtl"] .ai-list li::before { content:" ←"; }
[dir="rtl"] .ai-quote { border-left:none; border-right:3px solid var(--accent); }

/* ── 25. Ad Architecture & Placements ── */
.ad-slot-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: all var(--transition);
}
.ad-slot-wrapper:hover {
  border-color: rgba(168,85,247,0.25);
  box-shadow: 0 4px 20px var(--accent-subtle);
}
.ad-label {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.08em;
  pointer-events: none;
}
[dir="rtl"] .ad-label {
  left: auto;
  right: 10px;
}

/* Reserved heights to prevent CLS */
.hero-ad { min-height: 122px; }
.result-mid-ad { min-height: 122px; }
.result-bottom-ad { min-height: 282px; }
.result-sidebar-ad { min-height: 632px; width: 100%; }
.blog-top-ad { min-height: 122px; }
.blog-bottom-ad { min-height: 282px; }

/* Mobile-first overrides to prevent excessive white space on small viewports */
@media (max-width: 768px) {
  .hero-ad { min-height: 82px; }
  .result-mid-ad { min-height: 82px; }
  .result-bottom-ad { min-height: 282px; }
  .blog-top-ad { min-height: 82px; }
  .blog-bottom-ad { min-height: 282px; }
}

/* Fallback style for blocked / loading ads */
.ad-slot.ad-blocked-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text3);
  padding: 12px;
}
.ad-slot.ad-blocked-fallback p {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text2);
}
.ad-slot.ad-blocked-fallback span {
  font-size: 0.7rem;
}

/* Responsive grid for results and sidebar */
.result-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
.result-main-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.result-sidebar-col {
  display: none;
  width: 100%;
}

@media (min-width: 1100px) {
  .result-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 24px !important;
    max-width: 1100px !important;
  }
  .result-sidebar-col {
    display: block;
  }
  .result-sidebar-ad {
    position: sticky;
    top: 88px; /* Safe below navigation height */
  }
}