/* ============================================================
   index.css - Styles for index.html
   ============================================================ */

/* ─── Hero اصلی ─── */
    .hero {
      min-height: 88vh; display:flex; align-items:center;
      background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(200,169,110,.1) 0%, transparent 65%), var(--dark);
      padding: 5rem 2rem; text-align:center; position:relative; overflow:hidden;
    }
    .hero::before {
      content:''; position:absolute; inset:0;
      background: repeating-linear-gradient(45deg, transparent, transparent 70px, rgba(200,169,110,.012) 70px, rgba(200,169,110,.012) 71px);
    }
    .hero-inner { max-width:720px; margin:0 auto; position:relative; }
    .hero-badge { display:inline-block; background:rgba(200,169,110,.14); border:1px solid rgba(200,169,110,.3); color:var(--gold); padding:.4rem 1.2rem; border-radius:40px; font-size:.83rem; margin-bottom:1.5rem; }
    .hero h1 { font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:900; line-height:1.18; margin-bottom:1.2rem; }
    .hero h1 span { color:var(--gold); }
    .hero p { font-size:1.05rem; color:var(--text-muted); margin-bottom:2.5rem; line-height:1.9; }
    .hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
    .hero-stats { display:flex; gap:2.5rem; justify-content:center; margin-top:3.5rem; flex-wrap:wrap; }
    .hero-stat .num { font-size:2rem; font-weight:900; color:var(--gold); }
    .hero-stat .lbl { font-size:.8rem; color:var(--text-muted); }

    /* ─── تیکر اعلان ─── */
    .ticker { background:var(--gold); color:var(--dark); padding:.5rem 0; overflow:hidden; font-size:.85rem; font-weight:600; }
    .ticker-inner { display:flex; gap:4rem; animation:ticker 30s linear infinite; white-space:nowrap; }
    @keyframes ticker { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }

    /* ─── بخش‌ها ─── */
    .section { padding:4rem 2rem; max-width:1200px; margin:0 auto; }

    /* ─── ویژگی‌ها ─── */
    .features { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
    .feat-card { background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--r-lg); padding:1.4rem; text-align:center; transition:border-color .2s; }
    .feat-card:hover { border-color:var(--gold-dark); }
    .feat-icon { font-size:2rem; margin-bottom:.7rem; }
    .feat-title { font-size:.9rem; font-weight:600; margin-bottom:.3rem; }
    .feat-desc { font-size:.77rem; color:var(--text-muted); }

    /* ─── دسته‌بندی‌ها ─── */
    .cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.9rem; }
    .cat-card { background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--r-lg); padding:1.2rem .8rem; text-align:center; cursor:pointer; transition:all .2s; display:block; color:var(--text); }
    .cat-card:hover { border-color:var(--gold); background:var(--dark3); transform:translateY(-3px); }
    .cat-icon { font-size:2.2rem; margin-bottom:.6rem; }
    .cat-name { font-size:.85rem; font-weight:500; }
    .cat-count { font-size:.72rem; color:var(--text-faint); margin-top:3px; }

    /* ─── بنر ترکیبی ─── */
    .banners { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .banner { border-radius:var(--r-xl); padding:2rem; overflow:hidden; cursor:pointer; position:relative; transition:transform .25s; min-height:160px; display:flex; flex-direction:column; justify-content:flex-end; }
    .banner:hover { transform:scale(1.01); }
    .banner-1 { background:linear-gradient(135deg, #1C1A16, #2A2620); border:1px solid rgba(200,169,110,.3); }
    .banner-2 { background:linear-gradient(135deg, #1A1A2E, #16213E); border:1px solid rgba(41,128,185,.3); }
    .banner h3 { font-size:1.2rem; color:var(--gold); margin-bottom:.3rem; }
    .banner p  { font-size:.82rem; color:var(--text-muted); margin-bottom:.8rem; }
    .banner-emoji { position:absolute; top:1rem; left:1rem; font-size:3.5rem; opacity:.25; }

    /* ─── برندها ─── */
    .brands { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
    .brand-pill { background:var(--dark2); border:1px solid var(--dark4); border-radius:30px; padding:.5rem 1.5rem; font-size:.82rem; color:var(--text-muted); transition:all .2s; cursor:pointer; }
    .brand-pill:hover { border-color:var(--gold); color:var(--gold); }

    /* ─── بنر CTA ─── */
    .cta-banner { background:linear-gradient(135deg,var(--dark2),var(--dark3)); border:1px solid rgba(200,169,110,.25); border-radius:var(--r-xl); padding:3rem 2rem; text-align:center; }
    .cta-banner h2 { font-size:1.8rem; margin-bottom:.7rem; }
    .cta-banner h2 span { color:var(--gold); }
    .cta-banner p { color:var(--text-muted); margin-bottom:1.5rem; }

    /* ─── شمارش معکوس ─── */
    .countdown { display:flex; gap:.8rem; justify-content:center; margin-bottom:1.5rem; }
    .cd-item { background:var(--dark4); border-radius:10px; padding:.7rem 1rem; min-width:68px; text-align:center; }
    .cd-num { font-size:1.6rem; font-weight:900; color:var(--gold); line-height:1; }
    .cd-lbl { font-size:.7rem; color:var(--text-muted); margin-top:3px; }

    /* ─── بلاگ/مقالات ─── */
    .blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
    .blog-card { background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:all .25s; }
    .blog-card:hover { border-color:var(--gold-dark); transform:translateY(-3px); }
    .blog-img { height:130px; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-size:3rem; }
    .blog-body { padding:1rem; }
    .blog-tag { font-size:.72rem; color:var(--gold); margin-bottom:.4rem; }
    .blog-title { font-size:.95rem; font-weight:600; margin-bottom:.4rem; }
    .blog-meta { font-size:.75rem; color:var(--text-faint); }

    /* ─── گواهینامه‌ها ─── */
    .trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
    .trust-card { background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--r-lg); padding:1.2rem; text-align:center; }
    .trust-icon { font-size:2rem; margin-bottom:.5rem; }
    .trust-title { font-size:.85rem; font-weight:600; }
    .trust-sub { font-size:.75rem; color:var(--text-muted); margin-top:3px; }