<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>International Cultural Bible Ministries of India</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    :root {
      --bg-dark: #050505;
      --bg-light: #ffffff;
      --accent: #ffd600; /* bold yellow */
      --text-main: #f5f5f5;
      --text-muted: #b3b3b3;
      --border-soft: #222222;
      --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.6);
      --radius-card: 18px;
      --radius-pill: 999px;
      --transition-fast: 0.25s ease-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      background: radial-gradient(circle at top, #1a1a1a 0, #000 45%, #000 100%);
      color: var(--text-main);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* Layout */

    .page-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.7),
        transparent
      );
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav {
      max-width: 1120px;
      margin: 0 auto;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: conic-gradient(
        from 220deg,
        #ffffff,
        #ffd600,
        #ffef8a,
        #ffffff
      );
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-weight: 800;
      font-size: 18px;
      box-shadow: var(--shadow-strong);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-title {
      font-size: 15px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 700;
    }

    .brand-subtitle {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--text-muted);
    }

    .nav-links {
      display: flex;
      gap: 18px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .nav-links a {
      position: relative;
      padding-bottom: 4px;
      color: var(--text-muted);
      transition: color var(--transition-fast);
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 2px;
      background: var(--accent);
      transition: width var(--transition-fast);
    }

    .nav-links a:hover {
      color: var(--bg-light);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      display: none;
    }

    main {
      flex: 1;
    }

    .hero {
      max-width: 1120px;
      margin: 0 auto;
      padding: 60px 20px 72px;
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 40px;
      align-items: center;
    }

    .badge-row {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 4px 10px 4px 4px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 20px;
    }

    .badge-dot {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, #fffbe0, #ffd600, #b38f00);
      box-shadow: 0 0 18px rgba(255, 214, 0, 0.8);
    }

    .badge-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
    }

    .hero-title {
      font-size: clamp(2.4rem, 4vw, 3rem);
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 16px;
    }

    .hero-title span {
      display: block;
    }

    .hero-title-highlight {
      color: var(--accent);
    }

    .hero-body {
      max-width: 520px;
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 26px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast),
        transform var(--transition-fast), box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    }

    .btn-primary {
      background: var(--accent);
      color: #000;
      font-weight: 700;
      box-shadow: var(--shadow-strong);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75);
    }

    .btn-ghost {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--text-main);
    }

    .btn-ghost:hover {
      border-color: var(--accent);
      background: rgba(255, 255, 255, 0.02);
    }

    .hero-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 22px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
    }

    .hero-metric strong {
      color: var(--accent);
      font-size: 13px;
      margin-right: 6px;
    }

    .hero-card {
      border-radius: 26px;
      background: radial-gradient(circle at top left, #ffd600 0, #000 45%, #000 100%);
      padding: 22px 22px 22px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow-strong);
      position: relative;
      overflow: hidden;
    }

    .hero-card-tag {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .hero-card-title {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 14px;
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

    .hero-card-item {
      padding: 10px 11px;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 11px;
      color: var(--text-muted);
    }

    .hero-card-item strong {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--bg-light);
      margin-bottom: 4px;
    }

    .hero-card-accent {
      position: absolute;
      inset: auto -20px -40px auto;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle at 30% 30%, #fffbe5, #ffd600, #b38f00);
      opacity: 0.8;
      filter: blur(6px);
      mix-blend-mode: screen;
    }

    /* Section base */

    section {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .section-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 40px 20px 48px;
    }

    .section-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .section-header-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .section-title {
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    .section-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      max-width: 460px;
    }

    /* About */

    .about-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 26px;
      align-items: flex-start;
    }

    .about-copy p {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .about-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .about-pill {
      padding: 6px 12px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-muted);
    }

    .about-highlight-card {
      padding: 16px 16px 14px;
      border-radius: 18px;
      background: linear-gradient(
        135deg,
        rgba(255, 214, 0, 0.18),
        rgba(0, 0, 0, 0.9)
      );
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow-strong);
      font-size: 12px;
      color: var(--text-main);
    }

    .about-highlight-card strong {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 11px;
      display: block;
      margin-bottom: 6px;
    }

    /* Projects */

    .grid-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .card {
      border-radius: var(--radius-card);
      background: rgba(8, 8, 8, 0.9);
      border: 1px solid var(--border-soft);
      padding: 16px 16px 14px;
      box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-muted);
    }

    .card-title {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--bg-light);
    }

    .card-body {
      font-size: 12px;
      color: var(--text-muted);
      flex: 1;
    }

    .card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .pill-small {
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, 0.14);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .pill-accent {
      background: var(--accent);
      color: #000;
      border-color: var(--accent);
      font-weight: 600;
    }

    /* Get Involved */

    .involved-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 22px;
      align-items: flex-start;
    }

    .involved-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .step {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.7);
      font-size: 12px;
      color: var(--text-muted);
    }

    .step-index {
      width: 26px;
      height: 26px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--accent);
      flex-shrink: 0;
    }

    .step-body strong {
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 11px;
      color: var(--bg-light);
      margin-bottom: 2px;
    }

    .involved-side {
      padding: 14px 14px 12px;
      border-radius: 18px;
      border: 1px dashed rgba(255, 255, 255, 0.22);
      background: radial-gradient(circle at top, #1a1a1a 0, #000 70%);
      font-size: 12px;
      color: var(--text-muted);
    }

    .involved-side strong {
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 11px;
      color: var(--accent);
      margin-bottom: 6px;
    }

    /* Achievements */

    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .achievement {
      padding: 12px 12px 10px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(0, 0, 0, 0.75);
      text-align: left;
      font-size: 11px;
      color: var(--text-muted);
    }

    .achievement strong {
      display: block;
      font-size: 22px;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .achievement span {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 10px;
      color: var(--bg-light);
    }

    /* Contact */

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 24px;
      align-items: flex-start;
    }

    .contact-card {
      padding: 18px 18px 16px;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow-strong);
    }

    .contact-card h3 {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 4px;
    }

    .contact-card p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    form {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 9px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.8);
      color: var(--text-main);
      font-size: 12px;
      outline: none;
      transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast), background var(--transition-fast);
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(255, 214, 0, 0.5);
      background: rgba(0, 0, 0, 0.95);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    .contact-meta {
      font-size: 12px;
      color: var(--text-muted);
    }

    .contact-meta strong {
      color: var(--accent);
    }

    .contact-meta-item {
      margin-top: 8px;
    }

    footer {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 18px 20px 24px;
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .footer-inner {
      max-width: 1120px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
    }

    .footer-inner a {
      color: var(--accent);
    }

    /* Responsive */

    @media (max-width: 960px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 40px;
      }

      .hero-card {
        order: -1;
      }

      .about-layout,
      .involved-layout,
      .contact-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .nav-links {
        display: none;
      }

      .nav-cta {
        display: inline-flex;
      }
    }

    @media (max-width: 640px) {
      .grid-cards {
        grid-template-columns: minmax(0, 1fr);
      }

      .achievements-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .section-header-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero {
        padding-bottom: 52px;
      }
    }
  </style>
</head>
<body>
  <div class="page-shell">
    <!-- Header -->
    <header>
      <nav class="nav">
        <div class="brand-lockup">
          <div class="brand-mark">IC</div>
          <div class="brand-text">
            <div class="brand-title">International Cultural Bible Ministries</div>
            <div class="brand-subtitle">India · Church Planting & Urban Missions</div>
          </div>
        </div>
        <div class="nav-links">
          <a href="#home">Home</a>
          <a href="#about">About Us</a>
          <a href="#projects">Our Projects</a>
          <a href="#involved">Get Involved</a>
          <a href="#achievements">Achievements</a>
          <a href="#contact">Contact</a>
        </div>
        <button class="btn btn-primary nav-cta" onclick="document.querySelector('#contact').scrollIntoView({behavior:'smooth'})">
          Connect
        </button>
      </nav>
    </header>

    <main>
      <!-- Home / Hero -->
      <section id="home">
        <div class="hero">
          <div>
            <div class="badge-row">
              <div class="badge-dot"></div>
              <div class="badge-label">Urban Church Planting · India</div>
            </div>
            <h1 class="hero-title">
              <span>Planting Churches</span>
              <span class="hero-title-highlight">Across Cultures. Across Cities.</span>
            </h1>
            <p class="hero-body">
              International Cultural Bible Ministries of India is a Christ-centered, city-facing ministry
              dedicated to planting healthy churches, equipping leaders, and serving communities across
              diverse cultures and languages.
            </p>
            <div class="hero-actions">
              <button class="btn btn-primary" onclick="document.querySelector('#involved').scrollIntoView({behavior:'smooth'})">
                Join the movement
              </button>
              <button class="btn btn-ghost" onclick="document.querySelector('#projects').scrollIntoView({behavior:'smooth'})">
                Explore our projects
              </button>
            </div>
            <div class="hero-metrics">
              <div class="hero-metric">
                <strong>15+</strong>Church plants & preaching points
              </div>
              <div class="hero-metric">
                <strong>8</strong>States and major urban centers
              </div>
              <div class="hero-metric">
                <strong>1000+</strong>Leaders, youth, and families impacted
              </div>
            </div>
          </div>
          <aside class="hero-card">
            <div class="hero-card-tag">Vision snapshot</div>
            <div class="hero-card-title">Bible. City. Culture.</div>
            <p style="font-size:12px;color:var(--text-muted);margin-bottom:8px;">
              We carry the Gospel into the heart of India’s cities—planting contextual churches, discipling
              next-gen leaders, and serving communities with practical compassion.
            </p>
            <div class="hero-card-grid">
              <div class="hero-card-item">
                <strong>Church Planting</strong>
                New fellowships launched in neighborhoods, campuses, and workplaces.
              </div>
              <div class="hero-card-item">
                <strong>Leader Formation</strong>
                Intensive training and coaching for planters and ministry teams.
              </div>
              <div class="hero-card-item">
                <strong>Urban Mercy</strong>
                Food, after-school support, and care initiatives in high-need areas.
              </div>
              <div class="hero-card-item">
                <strong>Global Partnerships</strong>
                Collaborating with churches, networks, and NGOs worldwide.
              </div>
            </div>
            <div class="hero-card-accent"></div>
          </aside>
        </div>
      </section>

      <!-- About Us -->
      <section id="about">
        <div class="section-inner">
          <div class="section-label">About us</div>
          <div class="section-header-row">
            <h2 class="section-title">International Cultural Bible Ministries of India</h2>
            <p class="section-subtitle">
              We exist to see multiplying, Bible-rooted churches in every culture and city of India—where
              people encounter Jesus, experience community, and are equipped to live on mission.
            </p>
          </div>
          <div class="about-layout">
            <div class="about-copy">
              <p>
                International Cultural Bible Ministries of India is a non-governmental, Christian missions
                organization focused on urban church planting, cross-cultural outreach, and leadership
                development. We work across linguistic, generational, and socio-economic lines to see the
                Gospel embodied in real neighborhoods and real stories.
              </p>
              <p>
                Our teams partner with local churches, networks, and volunteers to identify new planting
                locations, equip church planters, and nurture new congregations until they are healthy,
                reproducible, and self-sustaining. Every initiative is grounded in Scripture, prayer, and a
                deep love for the cities and communities we serve.
              </p>
              <div class="about-pill-row">
                <div class="about-pill">Bible-centered proclamation</div>
                <div class="about-pill">Urban & campus focus</div>
                <div class="about-pill">Cross-cultural engagement</div>
                <div class="about-pill">Next-gen discipleship</div>
              </div>
            </div>
            <aside class="about-highlight-card">
              <strong>Our core convictions</strong>
              We believe that healthy, multiplying local churches are the primary way God brings
              long-term spiritual and social transformation to a city. We prioritize prayer, discipleship,
              and contextual mission—communicating the unchanging Gospel in the language, rhythms, and
              culture of the people we serve.
            </aside>
          </div>
        </div>
      </section>

      <!-- Our Projects -->
      <section id="projects">
        <div class="section-inner">
          <div class="section-label">Our projects</div>
          <div class="section-header-row">
            <h2 class="section-title">Church planting & city initiatives</h2>
            <p class="section-subtitle">
              From new church plants to community care and leadership intensives, each project is designed
              to see disciples made, leaders raised, and cities served for the glory of God.
            </p>
          </div>
          <div class="grid-cards">
            <article class="card">
              <div class="card-label">Project 01</div>
              <h3 class="card-title">Urban Church Planting Hubs</h3>
              <p class="card-body">
                Strategically launching and supporting new church plants in key neighborhoods of major
                Indian cities—focusing on unreached communities, young professionals, and students.
              </p>
              <div class="card-meta">
                <span class="pill-small">Cities · 6+ hubs</span>
                <span class="pill-small pill-accent">Active</span>
              </div>
            </article>

            <article class="card">
              <div class="card-label">Project 02</div>
              <h3 class="card-title">Planter & Leader Residency</h3>
              <p class="card-body">
                A hands-on training pathway that combines theological formation, character development,
                and practical urban ministry experience for emerging pastors and church-planting teams.
              </p>
              <div class="card-meta">
                <span class="pill-small">Leaders · 50+ trained</span>
                <span class="pill-small">Cohorts · annual</span>
              </div>
            </article>

            <article class="card">
              <div class="card-label">Project 03</div>
              <h3 class="card-title">Neighborhood Mercy & Justice</h3>
              <p class="card-body">
                Partnering with local congregations to run food distribution, after-school tutoring,
                skill-building workshops, and counseling support in under-resourced communities.
              </p>
              <div class="card-meta">
                <span class="pill-small">Families · 400+ served</span>
                <span class="pill-small">Partnerships · NGOs</span>
              </div>
            </article>

            <article class="card">
              <div class="card-label">Project 04</div>
              <h3 class="card-title">Youth & Campus Outreach</h3>
              <p class="card-body">
                Missional communities, Bible studies, and creative spaces for students and young adults
                in colleges and tech corridors—shaping a generation to follow Jesus in public life.
              </p>
              <div class="card-meta">
                <span class="pill-small">Campuses · 12+</span>
                <span class="pill-small">Events · monthly</span>
              </div>
            </article>

            <article class="card">
              <div class="card-label">Project 05</div>
              <h3 class="card-title">Cross-Cultural Engagement</h3>
              <p class="card-body">
                Initiatives that connect different language groups, migrant workers, and international
                communities through contextual worship gatherings and relational outreach.
              </p>
              <div class="card-meta">
                <span class="pill-small">Languages · multi</span>
                <span class="pill-small">Urban & peri-urban</span>
              </div>
            </article>

            <article class="card">
              <div class="card-label">Project 06</div>
              <h3 class="card-title">Digital & Media Ministry</h3>
              <p class="card-body">
                Online Bible teaching, podcasts, and digital resources crafted for urban India—equipping
                both believers and seekers to engage with Scripture wherever they are.
              </p>
              <div class="card-meta">
                <span class="pill-small">Resources · ongoing</span>
                <span class="pill-small">Platforms · multi-channel</span>
              </div>
            </article>
          </div>
        </div>
      </section>

      <!-- Get Involved -->
      <section id="involved">
        <div class="section-inner">
          <div class="section-label">Get involved</div>
          <div class="section-header-row">
            <h2 class="section-title">Pray. Give. Go. Partner.</h2>
            <p class="section-subtitle">
              Whether you are across the street or across the world, there is a clear next step for you to
              stand with International Cultural Bible Ministries of India in urban church planting.
            </p>
          </div>
          <div class="involved-layout">
            <div class="involved-steps">
              <div class="step">
                <div class="step-index">01</div>
                <div class="step-body">
                  <strong>Pray with us</strong>
                  Join our prayer updates for specific cities, planters, and projects. Set aside regular
                  time to intercede for new churches, open doors, and lasting transformation.
                </div>
              </div>
              <div class="step">
                <div class="step-index">02</div>
                <div class="step-body">
                  <strong>Give strategically</strong>
                  Invest in church plants, leader training, and mercy initiatives. You can support monthly,
                  sponsor a project, or fund a specific city or church plant.
                </div>
              </div>
              <div class="step">
                <div class="step-index">03</div>
                <div class="step-body">
                  <strong>Serve on the ground</strong>
                  Explore short-term teams, internships, or long-term roles in church planting,
                  discipleship, media, or community development alongside our local leaders.
                </div>
              </div>
              <div class="step">
                <div class="step-index">04</div>
                <div class="step-body">
                  <strong>Partner as a church</strong>
                  If you are a pastor or missions leader, we would love to explore partnership—sharing
                  vision, resources, and teams to plant churches in urban India.
                </div>
              </div>
            </div>
            <aside class="involved-side">
              <strong>Your next step</strong>
              Share a few details through the contact form below and our team will connect with you to
              help discern how you or your church can engage. You can indicate interest in prayer
              updates, giving, serving, or long-term partnership.
            </aside>
          </div>
        </div>
      </section>

      <!-- Achievements -->
      <section id="achievements">
        <div class="section-inner">
          <div class="section-label">Achievements</div>
          <div class="section-header-row">
            <h2 class="section-title">What God has done so far</h2>
            <p class="section-subtitle">
              Every number represents people, stories, and communities being transformed by the Gospel.
              We celebrate God’s faithfulness and look ahead with expectant faith.
            </p>
          </div>
          <div class="achievements-grid">
            <div class="achievement">
              <strong>15+</strong>
              <span>Church plants & emerging congregations</span>
              Multiplying worshipping communities in cities, towns, and campuses.
            </div>
            <div class="achievement">
              <strong>50+</strong>
              <span>Leaders equipped & mentored</span>
              Pastors, planters, and marketplace leaders trained for urban mission.
            </div>
            <div class="achievement">
              <strong>1000+</strong>
              <span>Lives directly reached</span>
              Through gatherings, outreach events, small groups, and mercy projects.
            </div>
            <div class="achievement">
              <strong>8</strong>
              <span>States & regions engaged</span>
              Cross-cultural, multilingual ministry across urban India and beyond.
            </div>
          </div>
        </div>
      </section>

      <!-- Contact Us -->
      <section id="contact">
        <div class="section-inner">
          <div class="section-label">Contact us</div>
          <div class="section-header-row">
            <h2 class="section-title">Start a conversation</h2>
            <p class="section-subtitle">
              Share a bit about yourself, your city, and how you would like to connect. Our team will
              respond with next steps and ways to partner together.
            </p>
          </div>
          <div class="contact-layout">
            <div class="contact-card">
              <h3>Send us a message</h3>
              <p>
                Use the form to ask a question, request more information, or express interest in prayer,
                giving, serving, or partnership. Required fields are marked with an asterisk (*).
              </p>
              <form action="#" method="post">
                <div>
                  <label for="name">Full name *</label>
                  <input type="text" id="name" name="name" required />
                </div>
                <div>
                  <label for="email">Email *</label>
                  <input type="email" id="email" name="email" required />
                </div>
                <div>
                  <label for="phone">Phone / WhatsApp</label>
                  <input type="tel" id="phone" name="phone" />
                </div>
                <div>
                  <label for="city">City & state</label>
                  <input type="text" id="city" name="city" placeholder="e.g., Hyderabad, Telangana" />
                </div>
                <div>
                  <label for="interest">I’m interested in</label>
                  <select id="interest" name="interest">
                    <option value="">Select one</option>
                    <option value="prayer">Prayer & updates</option>
                    <option value="giving">Giving / financial partnership</option>
                    <option value="serving">Serving on the ground</option>
                    <option value="church-partner">Church or network partnership</option>
                    <option value="other">Other</option>
                  </select>
                </div>
                <div>
                  <label for="message">Message *</label>
                  <textarea id="message" name="message" required placeholder="Share how we can serve or partner with you."></textarea>
                </div>
                <div>
                  <button type="submit" class="btn btn-primary">Submit message</button>
                </div>
              </form>
            </div>
            <div class="contact-meta">
              <div class="contact-meta-item">
                <strong>Office / base</strong><br />
                (Add your city and address here)<br />
                India
              </div>
              <div class="contact-meta-item" style="margin-top:10px;">
                <strong>Email & phone</strong><br />
                info@icbmi.org (example)<br />
                +91-00000-00000
              </div>
              <div class="contact-meta-item" style="margin-top:10px;">
                <strong>Stay connected</strong><br />
                Add links to your social media, YouTube, podcast, or newsletter once they are ready.
              </div>
              <div class="contact-meta-item" style="margin-top:10px;">
                <strong>Legal & NGO details</strong><br />
                Include your NGO registration number, PAN, and giving/foreign contribution compliance
                statements as required.
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer>
      <div class="footer-inner">
        <div>
          © <span id="year"></span> International Cultural Bible Ministries of India · All rights reserved.
        </div>
        <div>
          Built for urban church planting & cross-cultural mission.
        </div>
      </div>
    </footer>
  </div>

  <script>
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>
</body>
</html>
