/* Lucide navigation and generated 3D feature art */
.feature-card > img { display: none; }
.feature-card::before { content: ""; width: 108px; height: 72px; display: block; border-radius: 18px; background-image: url("./assets/feature-illustrations-3d-v2.png"); background-repeat: no-repeat; background-size: 300% 200%; filter: drop-shadow(0 12px 14px rgba(40, 85, 170, .12)); }
.feature-anonymous::before { background-position: 0% 0%; }
.feature-classmates::before { background-position: 50% 0%; }
.feature-market::before { background-position: 100% 0%; }
.feature-friends::before { background-position: 0% 100%; }
.feature-ai::before { background-image: url("./assets/ai-study-assistant-3d.png"); background-position: center; background-size: cover; }
.feature-events::before { background-position: 50% 100%; }
.feature-study::before { background-position: 100% 100%; }
.feature-ai { position: relative; overflow: hidden; text-decoration: none; }
.feature-ai::before { border: 1px solid #e1e9ff; box-shadow: 0 12px 22px rgba(62, 98, 186, .14); }
.feature-ai strong { color: #102862; }
.feature-ai small { max-width: 28ch; }
.feature-ai .ai-arrow { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #2d70ed; background: #eef4ff; font-size: 1.35rem; line-height: 1; }
.feature-ai .ai-badge { position: absolute; top: 64px; right: 22px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #6366f1, #2f70ee); box-shadow: 0 8px 16px rgba(67, 89, 217, .25); font-size: .72rem; font-weight: 900; direction: ltr; }
.bottom-nav a { grid-template-columns: 1fr; }
.bottom-nav a > svg { width: 21px; height: 21px; stroke-width: 1.9; }
.bottom-nav a > span { font-size: .72rem; }
.feature-ai::after { content: "ارتقا"; position:absolute; top:14px; left:14px; z-index:2; display:flex; align-items:center; min-height:28px; border:1px solid #f7d46b; border-radius:999px; padding:0 10px; color:#9b6500; background:linear-gradient(135deg,#fff9d9,#ffe899); box-shadow:0 7px 15px rgba(185,130,0,.14); font-size:.63rem; font-weight:900; }
.feature-ai::before { z-index:0; }
.feature-ai strong,.feature-ai small,.feature-ai .ai-arrow,.feature-ai .ai-badge { position:relative; z-index:1; }
@media (min-width:900px) { .bottom-nav a { grid-template-columns: 27px 1fr; }.bottom-nav a > span { font-size: .78rem; }.bottom-nav a > svg { width: 20px; height: 20px; } .feature-card::before { width: 132px; height: 88px; border-radius: 20px; } }