/* ========================================
   HOME PAGE SPECIFIC STYLES
   ======================================== */

/* ---------- Hero Section ---------- */
.hero{background:#fff;position:relative;overflow:hidden}
.hero .container{padding:80px 24px 70px;position:relative;z-index:2;max-width:1000px}
.hero h1{font-size:64px;letter-spacing:-1px;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero p.lead{font-size:19px;color:var(--ink-soft);max-width:620px;margin-bottom:34px}

/* ---------- Search Bar ---------- */
.search-bar{
    background:#fff;border:2px solid #1d1b29;border-radius:999px;
    display:flex;align-items:center;max-width:840px;overflow:hidden;
    box-shadow:0 14px 30px rgba(29,27,41,.08);
}
.search-field{flex:1 1 0;display:flex;align-items:center;gap:10px;padding:6px 22px;min-width:0}
.search-field + .search-field{border-left:1px solid var(--line)}
.search-field .ico{color:var(--purple);font-size:18px;flex:0 0 auto}
.search-field input{border:none;outline:none;font-family:inherit;font-size:16px;width:100%;padding:14px 0;background:transparent;color:var(--ink)}
.search-bar .btn{border-radius:999px;margin:6px;padding:14px 42px;flex:0 0 auto;font-size:17px}
.upload-hint{margin-top:18px;font-size:15px;color:var(--ink-soft)}
.upload-hint a{color:var(--purple);font-weight:600;font-family:'Proxima Nova SemiBold',Arial,sans-serif;text-decoration:underline;text-underline-offset:2px}

/* ---------- Popular Searches ---------- */
.popular{margin-top:34px}
.popular .label{font-family:'Proxima Nova SemiBold',Arial,sans-serif;font-weight:600;color:#1d1b29;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags a{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;color:var(--ink);transition:.18s}
.tags a:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-soft)}
.relative-position { position: relative; }
.section-scroll-div { position: absolute; top: -77px; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
    .hero h1{font-size:48px}
}
@media (max-width:640px){
    .hero{padding:0}
    .hero .container{padding:54px 24px 50px}
    .hero h1{font-size:36px}
    .search-bar{flex-direction:column;border-radius:18px;align-items:stretch}
    .search-field + .search-field{border-left:none;border-top:1px solid var(--line)}
    .search-bar .btn{width:auto}
}