/* ============ MOBILE HOMEPAGE CSS ============ */
.mobile-experience { display: none; }

/* Sirf 768px se chhote screen par chalega */
@media (max-width: 768px) {
  .desktop-experience { display: none !important; }
  .mobile-experience { display: block; }
  
  .mobile-experience {
    --app-navy: #0B1024; --app-blue: #4C6EF5; --app-blue2: #7C5CFC;
    --app-grad: linear-gradient(135deg, #4C6EF5 0%, #7C5CFC 55%, #B24BF3 100%);
    --app-bg: #FFFFFF; --app-card: #FFFFFF; --app-line: #ECEFF8; --app-ink: #0B1024;
    --app-ink-soft: #6B7280; --app-ink-faint: #9CA3AF;
    font-family: 'Inter', sans-serif; background: var(--app-bg); min-height: 100vh; position: relative; padding-bottom: 92px;
  }
  
  .mobile-experience * { box-sizing: border-box; }
  .mobile-experience h1, .mobile-experience h2, .mobile-experience h3, .mobile-experience h4 { font-family: 'Plus Jakarta Sans', sans-serif; }
  .mobile-experience svg { fill: none; max-width: 100%; }
  
  /* App Header */
  .app-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.85); backdrop-filter: blur(18px) saturate(160%); padding: 16px 18px 12px; border-bottom: 1px solid var(--app-line); }
  .app-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .app-greet { display: flex; align-items: center; gap: 11px; }
  .app-avatar { width: 44px; height: 44px; border-radius: 14px; background: var(--app-grad); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 18px rgba(76,110,245,.35); flex-shrink: 0; }
  .app-avatar svg { width: 22px; height: 22px; }
  .app-greet-text { line-height: 1.25; }
  .app-greet-text .hi { font-size: 11.5px; color: var(--app-ink-faint); font-weight: 600; }
  .app-greet-text .name { font-size: 15.5px; font-weight: 800; color: var(--app-ink); display: block; }
  .app-icon-btn { width: 42px; height: 42px; border-radius: 13px; background: var(--app-card); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 14px rgba(11,16,36,.06); border: 1px solid var(--app-line); flex-shrink: 0; }
  .app-icon-btn svg { width: 19px; height: 19px; color: var(--app-ink); }
  .app-dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #FF4D6D; border: 2px solid var(--app-card); }
  .app-header-actions { display: flex; gap: 10px; }
  
  .app-search { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: var(--app-card); border-radius: 16px; padding: 0 16px; height: 48px; box-shadow: 0 6px 20px rgba(11,16,36,.06); border: 1px solid var(--app-line); }
  .app-search svg { width: 19px; height: 19px; color: var(--app-ink-faint); flex-shrink: 0; }
  .app-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--app-ink); }
  .app-search input::placeholder { color: var(--app-ink-faint); }
  .app-search-filter { width: 32px; height: 32px; border-radius: 10px; background: var(--app-grad); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .app-search-filter svg { width: 15px; height: 15px; color: #fff; }
  
  /* Generic Sections */
  .app-section { padding: 22px 18px 6px; }
  .app-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .app-section-head h3 { font-size: 17px; font-weight: 800; color: var(--app-ink); letter-spacing: -.2px; }
  .app-see-all { font-size: 12.5px; font-weight: 700; color: var(--app-blue); display: flex; align-items: center; gap: 3px; }
  .app-see-all svg { width: 13px; height: 13px; }
  
  /* Quick Nav */
  .app-nav4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 18px 4px; }
  .nav4-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; background: var(--app-card); border-radius: 18px; padding: 16px 6px; border: 1px solid var(--app-line); box-shadow: 0 6px 16px rgba(11,16,36,.05); transition: transform .18s; }
  .nav4-tile:active { transform: scale(.94); }
  .nav4-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
  .nav4-icon svg { width: 20px; height: 20px; }
  .nav4-tile span { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--app-ink); }
  
  /* Stats Row */
  .app-stats-row { display: flex; gap: 10px; padding: 18px 18px 4px; overflow-x: auto; }
  .app-stats-row::-webkit-scrollbar { display: none; }
  .app-stat-pill { flex-shrink: 0; background: var(--app-card); border-radius: 16px; padding: 12px 16px; min-width: 118px; box-shadow: 0 6px 18px rgba(11,16,36,.06); border: 1px solid var(--app-line); display: flex; flex-direction: column; gap: 6px; }
  .app-stat-pill svg { width: 18px; height: 18px; color: var(--app-blue); }
  .app-stat-pill b { font-size: 16px; font-weight: 800; color: var(--app-ink); }
  .app-stat-pill span { font-size: 10.5px; color: var(--app-ink-faint); font-weight: 600; }
  
  /* Pricing Banner */
  .app-pricing { margin: 18px 18px 0; border-radius: 20px; padding: 3px; background: linear-gradient(135deg,#34D399,#10B981,#059669); box-shadow: 0 14px 28px rgba(16,185,129,.25); }
  .app-pricing-inner { background: var(--app-navy); border-radius: 17px; padding: 16px 18px; position: relative; overflow: hidden; }
  .app-pricing-inner::before { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle,rgba(52,211,153,.3),transparent 70%); top: -50px; right: -30px; }
  .ap-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(52,211,153,.15); color: #34D399; border-radius: 20px; padding: 4px 11px; font-size: 10px; font-weight: 800; letter-spacing: .4px; position: relative; z-index: 2; }
  .ap-badge svg { width: 11px; height: 11px; }
  .ap-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; position: relative; z-index: 2; }
  .ap-price { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -1px; }
  .ap-price sup { font-size: 13px; top: -10px; }
  .ap-old-price { font-size: 12.5px; color: #6B7494; text-decoration: line-through; font-weight: 600; }
  .ap-price-label { font-size: 10.5px; color: #9AA3C7; margin-top: 1px; position: relative; z-index: 2; }
  .ap-cta { margin-top: 12px; width: 100%; background: linear-gradient(135deg,#34D399,#059669); color: #04261B; border: none; border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 7px; position: relative; z-index: 2; box-shadow: 0 8px 18px rgba(16,185,129,.3); text-align: center; line-height: 1.2; }
  .ap-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
  
  /* Horizontal Scroll Chips */
  .hscroll { display: flex; gap: 14px; overflow-x: auto; padding: 2px 18px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .hscroll::-webkit-scrollbar { display: none; }
  .qcat { scroll-snap-align: start; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 68px; }
  .qcat-icon { width: 60px; height: 60px; border-radius: 19px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(11,16,36,.08); transition: transform .18s; }
  .qcat:active .qcat-icon { transform: scale(.92); }
  .qcat-icon svg { width: 26px; height: 26px; }
  .qcat span { font-size: 11px; font-weight: 700; color: var(--app-ink-soft); text-align: center; line-height: 1.25; }
  
  /* Hero Card */
  .app-hero-card { margin: 4px 18px 0; border-radius: 26px; padding: 24px; position: relative; overflow: hidden; background: var(--app-grad); box-shadow: 0 20px 40px rgba(76,110,245,.35); }
  .app-hero-card::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.14); top: -90px; right: -60px; }
  .app-hero-card::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.10); bottom: -60px; left: -40px; }
  .ahc-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
  .ahc-badge { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border-radius: 20px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: #fff; backdrop-filter: blur(6px); }
  .ahc-badge svg { width: 13px; height: 13px; }
  .ahc-ring { width: 50px; height: 50px; border-radius: 50%; position: relative; flex-shrink: 0; background: conic-gradient(#fff 0% 68%, rgba(255,255,255,.25) 68% 100%); display: flex; align-items: center; justify-content: center; }
  .ahc-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #5F6EF7; background: linear-gradient(135deg,#4C6EF5,#7C5CFC); }
  .ahc-ring span { position: relative; z-index: 2; font-size: 11px; font-weight: 800; color: #fff; }
  .app-hero-card h2 { color: #fff; font-size: 21px; font-weight: 800; margin-top: 16px; position: relative; z-index: 2; line-height: 1.25; }
  .app-hero-card p { color: rgba(255,255,255,.85); font-size: 12.5px; margin-top: 6px; position: relative; z-index: 2; line-height: 1.6; }
  .ahc-btn { margin-top: 18px; background: #fff; color: #4C3AE0; border: none; border-radius: 14px; padding: 13px 20px; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; box-shadow: 0 10px 22px rgba(0,0,0,.15); }
  .ahc-btn svg { width: 15px; height: 15px; }
  
  /* Article Horizontal Scroll */
  .acard { scroll-snap-align: start; flex-shrink: 0; width: 230px; background: var(--app-card); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 22px rgba(11,16,36,.07); border: 1px solid var(--app-line); }
  .acard-media { height: 110px; display: flex; align-items: center; justify-content: center; position: relative; }
  .acard-media svg { width: 36px; height: 36px; }
  .acard-tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 9.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); }
  .acard-body { padding: 14px; }
  .acard-body h4 { font-size: 13px; font-weight: 800; color: var(--app-ink); line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .acard-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--app-ink-faint); font-weight: 600; }
  .acard-meta svg { width: 11px; height: 11px; }
  
  /* MCQ Grid */
  .app-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 2px 18px 4px; }
  .mqcard { background: var(--app-card); border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(11,16,36,.06); border: 1px solid var(--app-line); display: flex; flex-direction: column; gap: 10px; }
  .mqcard-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
  .mqcard-icon svg { width: 20px; height: 20px; }
  .mqcard h4 { font-size: 13px; font-weight: 800; color: var(--app-ink); }
  .mqcard span { font-size: 10.5px; color: var(--app-ink-faint); font-weight: 600; }
  .mqcard-btn { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--app-bg); border-radius: 10px; padding: 8px; font-size: 11.5px; font-weight: 700; color: var(--app-blue); }
  .mqcard-btn svg { width: 12px; height: 12px; }
  
  /* PDF List */
  .app-pdf-list { padding: 2px 18px 4px; display: flex; flex-direction: column; gap: 10px; }
  .appdf-item { display: flex; align-items: center; gap: 12px; background: var(--app-card); border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 16px rgba(11,16,36,.06); border: 1px solid var(--app-line); }
  .appdf-badge { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,#FF7A7A,#E0526B); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .appdf-badge svg { width: 19px; height: 19px; color: #fff; }
  .appdf-info { flex: 1; min-width: 0; }
  .appdf-info h5 { font-size: 12.5px; font-weight: 800; color: var(--app-ink); margin-bottom: 2px; }
  .appdf-info span { font-size: 10.5px; color: var(--app-ink-faint); font-weight: 600; }
  .appdf-dl { width: 36px; height: 36px; border-radius: 11px; background: var(--app-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .appdf-dl svg { width: 15px; height: 15px; color: #fff; }
  
  /* Top Reads List */
  .app-reads { padding: 2px 18px 4px; background: var(--app-card); margin: 2px 18px 0; border-radius: 20px; box-shadow: 0 6px 18px rgba(11,16,36,.06); border: 1px solid var(--app-line); }
  .aread-item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--app-line); }
  .aread-item:last-child { border-bottom: none; }
  .aread-num { width: 26px; height: 26px; border-radius: 9px; background: var(--app-bg); color: var(--app-blue); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .aread-title { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--app-ink); line-height: 1.4; }
  .aread-views { font-size: 10px; color: var(--app-ink-faint); font-weight: 600; flex-shrink: 0; }
  
  /* Referral Banner */
  .app-banner { margin: 22px 18px 0; border-radius: 22px; padding: 22px; background: var(--app-navy); position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; }
  .app-banner::before { content: ""; position: absolute; width: 180px; height: 180px; background: var(--app-grad); opacity: .35; border-radius: 50%; top: -90px; right: -60px; filter: blur(6px); }
  .app-banner-icon { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 2; }
  .app-banner-icon svg { width: 24px; height: 24px; color: #FFD166; }
  .app-banner-text { position: relative; z-index: 2; flex: 1; }
  .app-banner-text h4 { font-size: 14.5px; font-weight: 800; color: #fff; margin-bottom: 4px; }
  .app-banner-text p { font-size: 11.5px; color: #9AA3C7; line-height: 1.5; }
}