* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --forest:#0F4C3A; --forest-deep:#0A3528; --forest-light:#176B52;
  --gold:#D4AF37; --gold-light:#E6C758; --gold-dark:#A8861E;
  --cream:#FDFBF7; --cream-deep:#F6F1E7;
  --ink:#1A1A1A; --ink-soft:rgba(26,26,26,.72); --ink-mute:rgba(26,26,26,.55);
  --border:#E5E0D8;
  --hero-dark:#04121c;
}


/* ============ HERO ============ */
.hero{
    position: relative;
    overflow: hidden;
    color: #fff;

display: block;
    background:
        linear-gradient(
            90deg,
            rgba(2,16,27,0.95) 0%,
            rgba(2,16,27,0.90) 35%,
            rgba(2,16,27,0.55) 60%,
            rgba(2,16,27,0.15) 75%,
            rgba(2,16,27,0.05) 100%
        ),
        url("../images/explore-ideas.82d7aad9c1bc.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
.hero-container{max-width:1400px;margin:0 auto;padding:60px clamp(14px,4vw,28px) 0;grid-template-columns:240px 1fr;gap:24px;align-items:start;width:100%}
@media(max-width:960px){.hero-container{grid-template-columns:1fr;padding-top:48px}}
/* Right content */
.hero-body{
    max-width:650px;
    margin-bottom:30px;
}
@media(max-width:1000px){.hero-body{grid-template-columns:1fr}}

.hero-title{font-family:'Playfair Display',serif;font-size:clamp(38px,5vw,60px);font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.01em}
.hero-desc{color:rgba(255,255,255,.78);font-size:15.5px;margin-top:14px;max-width:560px;line-height:1.7}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;max-width:560px}
@media(max-width:640px){.pillars{grid-template-columns:1fr}}
.pillar{display:flex;gap:12px;align-items:flex-start}
.pillar-ic{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid rgba(212,175,55,.45);color:var(--gold);display:grid;place-items:center;font-size:15px}
.pillar-txt strong{display:block;color:#fff;font-size:14px;font-weight:700;margin-bottom:3px}
.pillar-txt span{color:rgba(255,255,255,.62);font-size:12px;line-height:1.45}

/* hero visual (lightbulb + people) */
.hero-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.hero-visual::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(ellipse at center,rgba(212,175,55,.22),transparent 60%);
  filter:blur(20px);
}
.hero-visual img{position:relative;max-width:100%;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.4)}

/* Stats bar (white) */
.stats-bar{
  background:#fff;
  border-radius:14px;
  padding:20px 24px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
   margin-top:40px;
    position:relative;
    z-index:2;
}
@media(max-width:960px){.stats-bar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.stats-bar{grid-template-columns:repeat(2,1fr);padding:16px}}
.stat-item{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:12px}
.stat-ic{width:42px;height:42px;border-radius:50%;background:#fdf7e5;color:var(--gold-dark);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.stat-ic.b{background:#e6f4ea;color:#0d9488}
.stat-ic.c{background:#e7effe;color:#3b82f6}
.stat-ic.d{background:#f0e6fe;color:#8b5cf6}
.stat-ic.e{background:#fdf7e5;color:var(--gold-dark)}
.stat-ic.f{background:#e6f4ea;color:#22c55e}
.stat-num{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:22px;color:var(--forest);line-height:1.2;letter-spacing:0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-lbl{font-size:12px;color:var(--ink-mute);margin-top:4px;letter-spacing:.03em}

/* ============ BROWSE IDEAS ============ */
.section{max-width:1400px;margin:0 auto;padding:44px 28px}
.section-title{font-family:'Playfair Display',serif;font-size:30px;font-weight:800;color:var(--forest);margin-bottom:22px}

.filters-row{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:12px;margin-bottom:22px;
}
@media(max-width:1000px){.filters-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.filters-row{grid-template-columns:1fr}}
.search-wrap{position:relative}
.search-wrap input{width:100%;padding:12px 40px 12px 18px;border-radius:10px;background:#fff;border:1px solid var(--border);font-size:13.5px;outline:none;color:var(--ink)}
.search-wrap input:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(15,76,58,.1)}
.search-wrap .ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}
.select-wrap{position:relative}
.select-wrap select{
  width:100%;padding:12px 40px 12px 16px;border-radius:10px;background:#fff;border:1px solid var(--border);
  font-size:13.5px;color:var(--ink-soft);appearance:none;outline:none;cursor:pointer;
}
.select-wrap::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-mute);font-size:12px;pointer-events:none}
.filter-btn{
  padding:12px 22px;border-radius:10px;background:#fff;border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;
}
.filter-btn:hover{border-color:var(--forest);color:var(--forest)}

/* Category & Sector tabs */
.cat-tabs{display:flex;align-items:center;gap:8px;margin-bottom:22px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.cat-tabs::-webkit-scrollbar{height:6px}
.cat-tabs::-webkit-scrollbar-thumb{background:#e5e0d8;border-radius:3px}
.cat-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;
  background:#fff;border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  flex-shrink:0;transition:.25s;height:42px;box-sizing:border-box;white-space:nowrap;
}
.cat-tab i{font-size:15px;color:var(--forest)}
.cat-tab:hover{background:#fff;border-color:var(--forest);color:var(--forest)}
.cat-tab.active{background:var(--forest);color:#fff;border-color:var(--forest)}
.cat-tab.active i{color:var(--gold)}

/* Ideas grid */
.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:100%;min-width:0}
@media(max-width:1000px){.ideas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ideas-grid{grid-template-columns:1fr;width:100%}}
.idea-card{background:#fff;border-radius:14px;border:1px solid var(--border);overflow:hidden;transition:.3s;display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.idea-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.10)}
.idea-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eee;width:100%;max-width:100%}
.idea-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.idea-card:hover .idea-thumb img{transform:scale(1.06)}
.badge{
  position:absolute;left:12px;top:12px;padding:5px 12px;border-radius:6px;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;z-index:2;
}
.badge.trending{background:#0f7c46}
.badge.toprated{background:#2563eb}
.badge.popular{background:#0f7c46}
.badge.new{background:#22c55e}
.idea-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;min-width:0;max-width:100%;overflow:hidden;word-break:break-word;overflow-wrap:anywhere}
.idea-title{font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:var(--forest);line-height:1.3;margin-bottom:8px;min-width:0;max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.idea-desc{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-bottom:12px;min-width:0;max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.idea-loc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gold-dark);font-weight:600;margin-bottom:10px;min-width:0;max-width:100%;flex-wrap:wrap}
.idea-loc i{font-size:12px}
.idea-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;min-width:0;max-width:100%}
.idea-tag{
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:#f0fdf4;color:#0f7c46;max-width:100%;word-break:break-word;white-space:normal;
}
.idea-tag.b{background:#e0f2fe;color:#0369a1}
.idea-tag.g{background:#f0fdf4;color:#16a34a}
.idea-foot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-mute);min-width:0;max-width:100%;
}
.idea-meta{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.idea-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.idea-status{color:var(--gold-dark);font-weight:700;font-size:12px;white-space:nowrap}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:30px}
.pg-btn{
  min-width:38px;height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--border);
  background:#fff;font-size:13px;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;
}
.pg-btn:hover{border-color:var(--forest);color:var(--forest)}
.pg-btn.active{background:var(--forest);color:#fff;border-color:var(--forest)}
.pg-dots{color:var(--ink-mute);padding:0 6px}

/* ============ CTA / HOW IT WORKS ============ */
.cta-panel{
  background:#f5f1e6;border-radius:16px;padding:26px 28px;
  display:grid;grid-template-columns:auto 1.3fr 1.3fr;gap:26px;align-items:center;
  margin-top:32px;
}
@media(max-width:1000px){.cta-panel{grid-template-columns:1fr}}
.cta-illustration{
  width:170px;height:170px;border-radius:14px;overflow:hidden;background:#e8e2d0;
  display:grid;place-items:center;position:relative;
}
.cta-illustration img{width:100%;height:100%;object-fit:cover}
.cta-content h3{font-family:'Playfair Display',serif;font-size:26px;color:var(--forest);margin-bottom:8px}
.cta-content p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:16px;max-width:400px}
.cta-submit{
  background:var(--forest);color:#fff;padding:12px 22px;border-radius:8px;font-weight:700;font-size:13.5px;
  display:inline-flex;align-items:center;gap:10px;border:none;transition:.25s;
}
.cta-submit:hover{background:var(--forest-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,76,58,.3)}

.how-it-works{position:relative}
.hiw-title{font-size:13px;font-weight:800;color:var(--forest);letter-spacing:.06em;margin-bottom:18px}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.hiw-step{text-align:center;position:relative}
.hiw-step::after{
  content:'';position:absolute;top:22px;left:calc(50% + 30px);right:calc(-50% + 30px);height:2px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px);
}
.hiw-step:last-child::after{display:none}
.hiw-num{
  position:absolute;top:-6px;right:calc(50% - 30px);width:16px;height:16px;border-radius:50%;
  background:var(--gold);color:#1a1a1a;display:grid;place-items:center;font-size:12px;font-weight:800;z-index:2;
}
.hiw-ic{
  width:46px;height:46px;border-radius:12px;background:#fff;color:var(--gold-dark);
  display:grid;place-items:center;font-size:18px;margin:0 auto 10px;
  box-shadow:0 6px 16px rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.25);
}
.hiw-step h5{font-size:13px;font-weight:800;color:var(--forest);margin-bottom:4px}
.hiw-step p{font-size:12px;color:var(--ink-mute);line-height:1.4}

/* ============ TOP CONTRIBUTORS ============ */
.contributors{max-width:1400px;margin:32px auto ;padding:0 28px}
.contrib-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.contrib-hd h2{font-family:'Playfair Display',serif;font-size:22px;color:var(--forest);font-weight:800}
.contrib-hd a{font-size:13px;color:var(--forest);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.contrib-hd a:hover{color:var(--gold-dark)}

.contrib-wrap{position:relative;width:100%;max-width:100%;min-width:0}
.contrib-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;scroll-behavior:smooth}
/* A card will not render narrower than ~178px, so four across need ~762px of
   grid width — only available above ~1240px viewport. Dropping to two columns
   at 1000px left the 1001-1240px band overflowing, so switch over earlier. */
@media(max-width:1240px){.contrib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .contrib-grid{
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .contrib-grid::-webkit-scrollbar{display:none}
  .contrib-card{
    min-width:84% !important;
    max-width:85% !important;
    flex-shrink:0 !important;
    scroll-snap-align:start;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
  }
  .arrow-sm{display:none !important}
}
.contrib-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;
  display:flex;gap:14px;align-items:center;transition:.25s;box-sizing:border-box;
}
.contrib-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.contrib-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--gold-light)}
.contrib-avatar img{width:100%;height:100%;object-fit:cover}
.contrib-info h5{font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;color:var(--forest);margin-bottom:2px}
.contrib-info .city{font-size:12px;color:var(--ink-mute);margin-bottom:6px}
.contrib-info .row{font-size:12px;color:var(--ink-soft);margin-top:2px}
.contrib-info .row b{color:var(--forest);font-weight:700}
.contrib-tag{
  display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
}
.contrib-tag.innovator{background:#dcfce7;color:#0f7c46}
.contrib-tag.changer{background:#fef3c7;color:#a16207}

.arrow-sm{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--ink-soft);box-shadow:0 6px 16px rgba(0,0,0,.06);z-index:2;cursor:pointer;
}
.arrow-sm.prev{left:-16px}
.arrow-sm.next{right:-16px}
.arrow-sm:hover{background:var(--forest);color:#fff;border-color:var(--forest)}


@media(max-width:640px){
  .hero{padding:24px 0 32px}
  .section{padding:32px 20px}
}