
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SONDIGIT Private Limited — Digital Marketing | IT Solutions | Online Services</title>
<meta name="description" content="SONDIGIT Private Limited — Website Development, SEO, Google & Meta Ads, AI Automation and Branding for startups, MSMEs and enterprises.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --navy-900:#0c2440;
    --navy-800:#123458;
    --navy-700:#1a4a7a;
    --orange-500:#f0791c;
    --orange-400:#ff9a45;
    --orange-050:#fff1e4;
    --paper:#f6f7f9;
    --paper-2:#ffffff;
    --ink:#10202f;
    --muted:#5c6b7a;
    --line:#e2e6eb;
    --radius:14px;
    --shadow:0 12px 32px -16px rgba(12,36,64,.25);
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Sora', sans-serif; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--orange-500);
    font-weight:600;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  section{padding:96px 0;}
  @media(max-width:720px){ section{padding:64px 0;} }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:999px;
    font-family:'Sora', sans-serif; font-weight:600; font-size:.95rem;
    border:1.5px solid transparent; cursor:pointer; transition:.25s ease;
  }
  .btn-primary{background:var(--orange-500); color:#fff; box-shadow:0 10px 24px -10px rgba(240,121,28,.6);}
  .btn-primary:hover{background:#d9660d; transform:translateY(-2px);}
  .btn-ghost{border-color:rgba(255,255,255,.35); color:#fff;}
  .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff;}
  .btn-outline-navy{border-color:var(--navy-800); color:var(--navy-800);}
  .btn-outline-navy:hover{background:var(--navy-800); color:#fff;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(246,247,249,.86); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; color:var(--navy-900);}
  .brand img{height:38px; width:38px; object-fit:contain;}
  .navlinks{display:flex; gap:28px; font-size:.92rem; font-weight:500;}
  .navlinks a{color:var(--muted); transition:.2s;}
  .navlinks a:hover{color:var(--orange-500);}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .nav-cta .btn{padding:10px 20px; font-size:.85rem;}
  #menu-toggle{display:none;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
  .burger span{width:24px; height:2px; background:var(--navy-900); display:block;}
  @media(max-width:900px){
    .navlinks{
      position:fixed; top:66px; left:0; right:0; background:var(--paper-2);
      flex-direction:column; padding:20px 28px; gap:16px;
      border-bottom:1px solid var(--line);
      transform:translateY(-140%); transition:.3s ease; z-index:40;
    }
    #menu-toggle:checked ~ .navlinks{ transform:translateY(0); }
    .burger{display:flex;}
    .nav-cta .btn-outline-navy{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #0c2c50 100%);
    color:#fff; padding:120px 0 80px;
  }
  .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
  @media(max-width:900px){ .hero .wrap{grid-template-columns:1fr;} .hero{padding:90px 0 56px;} }
  .hero h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); font-weight:700; line-height:1.12; margin:18px 0 20px;}
  .hero h1 span{color:var(--orange-400);}
  .hero p.lead{color:#c9d6e4; font-size:1.08rem; max-width:520px; margin-bottom:30px;}
  .hero .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-services{margin-top:36px; display:flex; flex-wrap:wrap; gap:10px;}
  .pill{font-size:.78rem; font-family:'IBM Plex Mono',monospace; border:1px solid rgba(255,255,255,.22); color:#dbe6f0; padding:6px 12px; border-radius:999px;}

  /* Signature: ascending bar / arrow growth graphic */
  .growth-graphic{position:relative; height:340px;}
  .bars{position:absolute; bottom:30px; left:0; display:flex; align-items:flex-end; gap:14px; width:100%;}
  .bars .bar{flex:1; background:linear-gradient(180deg, var(--orange-400), var(--orange-500)); border-radius:6px 6px 2px 2px; transform-origin:bottom; animation:rise 1.1s cubic-bezier(.2,.9,.25,1) both;}
  .bars .bar:nth-child(1){height:34%; animation-delay:.05s;}
  .bars .bar:nth-child(2){height:52%; animation-delay:.15s;}
  .bars .bar:nth-child(3){height:44%; animation-delay:.25s;}
  .bars .bar:nth-child(4){height:74%; animation-delay:.35s;}
  .bars .bar:nth-child(5){height:100%; background:linear-gradient(180deg,#fff,var(--orange-400));animation-delay:.45s;}
  @keyframes rise{ from{transform:scaleY(0);} to{transform:scaleY(1);} }
  .growth-graphic svg.arrow{position:absolute; top:0; right:0; width:70%; opacity:.9;}
  @media(prefers-reduced-motion: reduce){ .bars .bar{animation:none;} }

  /* ---------- Section headers ---------- */
  .sec-head{max-width:640px; margin-bottom:46px;}
  .sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-top:10px; color:var(--navy-900);}
  .sec-head p{color:var(--muted); margin-top:12px; font-size:1.02rem;}
  .sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}

  /* ---------- About ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  @media(max-width:820px){ .about-grid{grid-template-columns:1fr;} }
  .value-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px;}
  .value-list li{list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--navy-800); font-weight:500;}
  .value-list li::before{content:"↗"; color:var(--orange-500); font-weight:700;}
  .mv-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:16px;}
  .mv-card h4{color:var(--orange-500); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; margin-bottom:8px;}
  .mv-card p{color:var(--navy-900); font-size:1.02rem; font-weight:500;}

  /* ---------- Services ---------- */
  .why-band{background:var(--navy-900); color:#fff;}
  .why-band .sec-head p{color:#b9c7d6;}
  .why-band .sec-head h2{color:#fff;}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .grid-3{grid-template-columns:1fr;} }
  .service-card{
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 24px; transition:.25s;
  }
  .service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
  .service-card .ic{font-size:1.6rem; margin-bottom:14px; display:inline-block;}
  .service-card h3{font-size:1.08rem; color:var(--navy-900); margin-bottom:8px;}
  .service-card ul{margin-top:12px; padding-left:0;}
  .service-card li{list-style:none; font-size:.88rem; color:var(--muted); padding:3px 0; border-top:1px dashed var(--line);}
  .service-card li:first-child{border-top:none; padding-top:0;}

  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .why-grid{grid-template-columns:1fr;} }
  .why-item{border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:20px; background:rgba(255,255,255,.04);}
  .why-item .num{font-family:'IBM Plex Mono',monospace; color:var(--orange-400); font-size:.8rem;}
  .why-item h4{margin-top:10px; font-size:1rem;}

  /* ---------- Portfolio ---------- */
  .port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:820px){ .port-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .port-grid{grid-template-columns:1fr;} }
  .port-card{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
    background:var(--paper-2);
  }
  .port-thumb{height:150px; background:linear-gradient(135deg,var(--navy-800),var(--navy-700)); position:relative;}
  .port-thumb::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(240,121,28,.18) 0 2px, transparent 2px 26px);}
  .port-card .body{padding:18px 20px;}
  .port-card .tag{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--orange-500); text-transform:uppercase; letter-spacing:.08em;}
  .port-card h4{margin-top:6px; font-size:1rem; color:var(--navy-900);}

  /* ---------- Pricing ---------- */
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
  @media(max-width:900px){ .price-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;} }
  .price-card{
    background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:32px 26px;
    display:flex; flex-direction:column;
  }
  .price-card.feature{border:2px solid var(--orange-500); box-shadow:var(--shadow); position:relative;}
  .price-card.feature::before{
    content:"सबसे लोकप्रिय"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--orange-500); color:#fff; font-size:.72rem; padding:4px 14px; border-radius:999px;
    font-family:'IBM Plex Mono',monospace;
  }
  .price-card h3{font-size:1.1rem; color:var(--navy-900);}
  .price-card .amount{font-family:'Sora',sans-serif; font-size:2.2rem; font-weight:700; color:var(--navy-900); margin:14px 0 4px;}
  .price-card .amount span{font-size:.9rem; color:var(--muted); font-weight:500;}
  .price-card ul{margin:20px 0 26px; flex:1;}
  .price-card li{list-style:none; padding:7px 0; font-size:.92rem; color:var(--navy-800); display:flex; gap:8px;}
  .price-card li::before{content:"✓"; color:var(--orange-500); font-weight:700;}

  /* ---------- Learning / Careers ---------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media(max-width:820px){ .split{grid-template-columns:1fr;} }
  .tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .tag-cloud span{background:var(--orange-050); color:#b5590f; font-size:.85rem; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid #f6d9b8;}
  .job-list{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
  .job-row{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px;}
  .job-row span{font-weight:600; color:var(--navy-900); font-size:.95rem;}
  .job-row a{font-family:'Sora',sans-serif; font-size:.82rem; font-weight:600; color:var(--orange-500);}

  /* ---------- Blog ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:820px){ .blog-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .blog-grid{grid-template-columns:1fr;} }
  .blog-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-2);}
  .blog-strip{height:8px; background:linear-gradient(90deg,var(--orange-500),var(--navy-800));}
  .blog-card .body{padding:20px;}
  .blog-card h4{font-size:1rem; color:var(--navy-900); margin-bottom:8px;}
  .blog-card p{font-size:.88rem; color:var(--muted);}

  /* ---------- Contact ---------- */
  .contact-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px;}
  @media(max-width:900px){ .contact-wrap{grid-template-columns:1fr;} }
  .info-card{background:var(--navy-900); color:#fff; border-radius:18px; padding:34px 30px;}
  .info-card h3{font-size:1.2rem; margin-bottom:22px;}
  .info-row{display:flex; gap:14px; margin-bottom:18px; font-size:.94rem; color:#d3dee9;}
  .info-row b{color:#fff; display:block; margin-bottom:2px; font-family:'Sora',sans-serif; font-size:.9rem;}
  .form-card{background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:34px 30px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:520px){ .form-grid{grid-template-columns:1fr;} }
  .field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:.82rem; font-weight:600; color:var(--navy-800);}
  .field input, .field select, .field textarea{
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:.94rem; background:var(--paper); color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--orange-400); outline-offset:1px; border-color:var(--orange-500);}
  .field.full{grid-column:1/-1;}

  /* ---------- Footer ---------- */
  footer{background:#081a30; color:#c6d3e0; padding-top:64px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08);}
  @media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
  .foot-grid h5{color:#fff; font-family:'Sora',sans-serif; font-size:.88rem; margin-bottom:16px; letter-spacing:.04em; text-transform:uppercase;}
  .foot-grid ul{list-style:none;}
  .foot-grid li{margin-bottom:10px; font-size:.9rem;}
  .foot-grid a:hover{color:var(--orange-400);}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .foot-brand img{height:34px;}
  .foot-brand span{font-family:'Sora',sans-serif; color:#fff; font-weight:700; font-size:1.05rem;}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:.82rem; color:#8ea1b4; flex-wrap:wrap; gap:10px;}
  .social-row{display:flex; gap:12px;}
  .social-row a{width:36px; height:36px; border:1px solid rgba(255,255,255,.16); border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:.85rem;}
  .social-row a:hover{background:var(--orange-500); border-color:var(--orange-500);}

  .whatsapp-fab{
    position:fixed; bottom:22px; right:22px; z-index:60;
    width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  }
</style>
</head>
<body>

<header>
  <nav class="nav">
    <a href="#home" class="brand"><img src="logo-320.png" alt="SONDIGIT logo"> SONDIGIT</a>
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle" class="burger"><span></span><span></span><span></span></label>
    <div class="navlinks">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#pricing">Pricing</a>
      <a href="#learning">Learning</a>
      <a href="#careers">Careers</a>
      <a href="#blog">Blog</a>
      <a href="#contact">Contact</a>
    </div>
    <div class="nav-cta">
      <a href="tel:+918085582738" class="btn btn-outline-navy">📞 Call Now</a>
      <a href="#contact" class="btn btn-primary">Get a Free Consultation</a>
    </div>
  </nav>
</header>

<!-- HOME / HERO -->
<section class="hero" id="home">
  <div class="wrap">
    <div>
      <span class="eyebrow">Digital Marketing · IT Solutions · Online Services</span>
      <h1>Transform Your Business with Digital Marketing, IT &amp; <span>AI Solutions</span></h1>
      <p class="lead">Website Development · SEO · Google Ads · Meta Ads · AI Automation · Branding — SONDIGIT Private Limited आपके व्यवसाय को डिजिटल माध्यम से तेज़ी से आगे बढ़ाने में मदद करता है।</p>
      <div class="cta-row">
        <a href="#contact" class="btn btn-primary">Get a Free Consultation</a>
        <a href="#pricing" class="btn btn-ghost">Request a Quote</a>
      </div>
      <div class="hero-services">
        <span class="pill">🌐 Website Development</span>
        <span class="pill">🔍 SEO</span>
        <span class="pill">📢 Google &amp; Meta Ads</span>
        <span class="pill">🤖 AI Automation</span>
        <span class="pill">🎨 Branding</span>
      </div>
    </div>
    <div class="growth-graphic" aria-hidden="true">
      <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">About SONDIGIT</span>
      <h2>भारत की उभरती हुई डिजिटल पार्टनर</h2>
      <p>SONDIGIT Private Limited एक आधुनिक Digital Marketing, Website Development और IT Solutions कंपनी है। हम Startups, MSMEs और Enterprises को डिजिटल माध्यम से तेज़ी से आगे बढ़ाने में सहायता करते हैं।</p>
    </div>
    <div class="about-grid">
      <div>
        <div class="mv-card">
          <h4>Who We Are</h4>
          <p>SONDIGIT Private Limited भारत की एक उभरती हुई Digital Marketing एवं IT Solutions कंपनी है, जो व्यवसायों को डिजिटल तकनीक के माध्यम से आगे बढ़ाने के लिए समर्पित है।</p>
        </div>
        <div class="mv-card">
          <h4>Our Mission</h4>
          <p>हर व्यवसाय को डिजिटल रूप से सशक्त बनाना।</p>
        </div>
        <div class="mv-card">
          <h4>Our Vision</h4>
          <p>भारत की विश्वसनीय Digital Marketing और AI Solutions कंपनी बनना।</p>
        </div>
      </div>
      <div>
        <h3 style="color:var(--navy-900); margin-bottom:6px;">Core Values</h3>
        <ul class="value-list">
          <li>Innovation</li>
          <li>Quality</li>
          <li>Integrity</li>
          <li>Customer Success</li>
          <li>Continuous Learning</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- WHY CHOOSE US -->
<section class="why-band">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">Why Choose Us</span>
      <h2>हर प्रोजेक्ट में भरोसेमंद परिणाम</h2>
    </div>
    <div class="why-grid">
      <div class="why-item"><div class="num">01</div><h4>Experienced Professionals</h4></div>
      <div class="why-item"><div class="num">02</div><h4>Affordable Pricing</h4></div>
      <div class="why-item"><div class="num">03</div><h4>Custom Solutions</h4></div>
      <div class="why-item"><div class="num">04</div><h4>SEO-Friendly Websites</h4></div>
      <div class="why-item"><div class="num">05</div><h4>Mobile Responsive Design</h4></div>
      <div class="why-item"><div class="num">06</div><h4>Transparent Communication</h4></div>
      <div class="why-item"><div class="num">07</div><h4>On-Time Delivery</h4></div>
      <div class="why-item"><div class="num">08</div><h4>Dedicated Support</h4></div>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section id="services">
  <div class="wrap">
    <div class="sec-head center" style="margin-left:auto;margin-right:auto;">
      <span class="eyebrow">Our Services</span>
      <h2>पूरे डिजिटल सफ़र के लिए एक ही पार्टनर</h2>
      <p>Website Design से लेकर AI Automation तक — हर सेवा एक ही छत के नीचे।</p>
    </div>
    <div class="grid-3">
      <div class="service-card">
        <span class="ic">🌐</span>
        <h3>Website Design &amp; Development</h3>
        <ul>
          <li>Business &amp; Corporate Website</li>
          <li>Portfolio &amp; Landing Page</li>
          <li>WordPress Website</li>
          <li>E-commerce Website</li>
        </ul>
      </div>
      <div class="service-card">
        <span class="ic">📈</span>
        <h3>Digital Marketing</h3>
        <ul>
          <li>Social Media Marketing</li>
          <li>Facebook &amp; Instagram Ads</li>
          <li>Google Ads · YouTube Marketing</li>
          <li>Content &amp; Email Marketing</li>
        </ul>
      </div>
      <div class="service-card">
        <span class="ic">🔍</span>
        <h3>Search Engine Optimization</h3>
        <ul>
          <li>On-Page &amp; Off-Page SEO</li>
          <li>Technical SEO</li>
          <li>Local SEO</li>
          <li>Google Business Profile Optimization</li>
        </ul>
      </div>
      <div class="service-card">
        <span class="ic">🤖</span>
        <h3>AI Solutions</h3>
        <ul>
          <li>AI Chatbots</li>
          <li>AI Automation</li>
          <li>AI Content Creation</li>
          <li>AI Image &amp; Video Generation</li>
        </ul>
      </div>
      <div class="service-card">
        <span class="ic">🎨</span>
        <h3>Graphic Design &amp; Branding</h3>
        <ul>
          <li>Logo Design</li>
          <li>Business Cards &amp; Brochures</li>
          <li>Company Profile</li>
          <li>Social Media Creatives</li>
        </ul>
      </div>
      <div class="service-card">
        <span class="ic">💼</span>
        <h3>E-commerce &amp; Consulting</h3>
        <ul>
          <li>E-commerce Website Development</li>
          <li>Social Media Management</li>
          <li>Business Consulting</li>
          <li>📢 Google Ads &amp; Meta Ads</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- PORTFOLIO -->
<section id="portfolio" style="background:var(--paper-2);">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">Portfolio</span>
      <h2>Our Recent Projects</h2>
      <p>अलग-अलग इंडस्ट्री के व्यवसायों के लिए डिज़ाइन और डिलीवर किए गए प्रोजेक्ट्स।</p>
    </div>
    <div class="port-grid">
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">Website</span><h4>Business Websites</h4></div></div>
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">E-commerce</span><h4>E-commerce Stores</h4></div></div>
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">SEO</span><h4>SEO Campaigns</h4></div></div>
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">Ads</span><h4>Google Ads Campaigns</h4></div></div>
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">Social</span><h4>Social Media Management</h4></div></div>
      <div class="port-card"><div class="port-thumb"></div><div class="body"><span class="tag">Branding</span><h4>Branding Projects</h4></div></div>
    </div>
  </div>
</section>

<!-- PRICING -->
<section id="pricing">
  <div class="wrap">
    <div class="sec-head center">
      <span class="eyebrow">Pricing</span>
      <h2>Website Packages</h2>
      <p>अपने बिज़नेस के लिए सही पैकेज चुनें — पारदर्शी कीमत, कोई छुपी हुई लागत नहीं।</p>
    </div>
    <div class="price-grid">
      <div class="price-card">
        <h3>Basic</h3>
        <div class="amount">₹4,999</div>
        <ul>
          <li>Up to 5 Pages</li>
          <li>Mobile Responsive</li>
          <li>Contact Form</li>
          <li>Basic SEO</li>
        </ul>
        <a href="#contact" class="btn btn-outline-navy">Request a Quote</a>
      </div>
      <div class="price-card feature">
        <h3>Standard</h3>
        <div class="amount">₹9,999</div>
        <ul>
          <li>Up to 10 Pages</li>
          <li>Premium Design</li>
          <li>WhatsApp Integration</li>
          <li>Speed Optimization</li>
          <li>Advanced SEO</li>
        </ul>
        <a href="#contact" class="btn btn-primary">Request a Quote</a>
      </div>
      <div class="price-card">
        <h3>Premium</h3>
        <div class="amount">₹19,999</div>
        <ul>
          <li>Custom Website</li>
          <li>E-commerce</li>
          <li>Payment Gateway</li>
          <li>Complete SEO</li>
          <li>1 Year Support</li>
        </ul>
        <a href="#contact" class="btn btn-outline-navy">Request a Quote</a>
      </div>
    </div>
  </div>
</section>

<!-- LEARNING + CAREERS -->
<section id="learning" style="background:var(--paper-2);">
  <div class="wrap split">
    <div>
      <span class="eyebrow">Learning</span>
      <h2 style="margin-top:10px;color:var(--navy-900);">Digital Marketing Courses</h2>
      <p style="color:var(--muted); margin-top:12px;">Practical, industry-ready training — beginners से लेकर freelancers तक।</p>
      <div class="tag-cloud">
        <span>SEO Mastery</span>
        <span>WordPress Website Design</span>
        <span>Google Ads</span>
        <span>Social Media Marketing</span>
        <span>AI Tools Training</span>
        <span>Freelancing</span>
      </div>
      <a href="#contact" class="btn btn-primary" style="margin-top:26px;">Enquire About Courses</a>
    </div>
    <div id="careers">
      <span class="eyebrow">Careers</span>
      <h2 style="margin-top:10px;color:var(--navy-900);">Join Our Team</h2>
      <p style="color:var(--muted); margin-top:12px;">हम हमेशा प्रतिभाशाली लोगों की तलाश में रहते हैं।</p>
      <div class="job-list">
        <div class="job-row"><span>Digital Marketing Executive</span><a href="#contact">Apply Now →</a></div>
        <div class="job-row"><span>SEO Executive</span><a href="#contact">Apply Now →</a></div>
        <div class="job-row"><span>Website Developer</span><a href="#contact">Apply Now →</a></div>
        <div class="job-row"><span>Graphic Designer</span><a href="#contact">Apply Now →</a></div>
        <div class="job-row"><span>Social Media Manager</span><a href="#contact">Apply Now →</a></div>
      </div>
    </div>
  </div>
</section>

<!-- BLOG -->
<section id="blog">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">Blog</span>
      <h2>Insights &amp; Guides</h2>
      <p>हमारे नवीनतम लेख — जो आपके व्यवसाय को डिजिटल रूप से आगे बढ़ने में मदद करते हैं।</p>
    </div>
    <div class="blog-grid">
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>SEO Tips</h4><p>आपकी वेबसाइट को गूगल पर ऊपर लाने के व्यावहारिक तरीके।</p></div></div>
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>Digital Marketing Trends</h4><p>इस साल के सबसे असरदार मार्केटिंग ट्रेंड्स।</p></div></div>
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>AI Tools</h4><p>बिज़नेस को तेज़ बनाने वाले AI टूल्स की सूची।</p></div></div>
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>Website Design</h4><p>एक कन्वर्जन-फ्रेंडली वेबसाइट के मुख्य तत्व।</p></div></div>
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>Google Ads Guide</h4><p>कम बजट में ज़्यादा नतीजे पाने की रणनीति।</p></div></div>
      <div class="blog-card"><div class="blog-strip"></div><div class="body"><h4>Business Growth Tips</h4><p>छोटे व्यवसायों के लिए डिजिटल ग्रोथ आइडियाज़।</p></div></div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact" style="background:var(--paper-2);">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">Contact Us</span>
      <h2>बात करते हैं आपके अगले प्रोजेक्ट पर</h2>
    </div>
    <div class="contact-wrap">
      <div class="info-card">
        <h3>SONDIGIT Private Limited</h3>
        <div class="info-row">📍 <div><b>Address</b>Shahpura, Dindori, Madhya Pradesh, India</div></div>
        <div class="info-row">📞 <div><b>Phone</b><a href="tel:+918085582738">+91 80855 82738</a></div></div>
        <div class="info-row">📧 <div><b>Email</b><a href="mailto:sondigit40@gmail.com">sondigit40@gmail.com</a></div></div>
        <div class="info-row">🕒 <div><b>Working Hours</b>सोमवार – शनिवार: सुबह 9:00 बजे से शाम 6:00 बजे तक</div></div>
        <div class="social-row" style="margin-top:26px;">
          <a href="#" aria-label="Facebook">f</a>
          <a href="#" aria-label="Instagram">ig</a>
          <a href="#" aria-label="LinkedIn">in</a>
          <a href="#" aria-label="YouTube">▶</a>
        </div>
      </div>
      <form class="form-card" id="contact-form" method="POST" action="contact.php">
        <div class="form-grid">
          <div class="field"><label for="name">Name</label><input id="name" name="name" type="text" placeholder="आपका नाम" required></div>
          <div class="field"><label for="mobile">Mobile Number</label><input id="mobile" name="mobile" type="tel" placeholder="+91"></div>
        </div>
        <div class="field"><label for="email">Email</label><input id="email" name="email" type="email" placeholder="you@example.com" required></div>
        <div class="field">
          <label for="service">Service Required</label>
          <select id="service" name="service">
            <option>Website Development</option>
            <option>Digital Marketing</option>
            <option>SEO</option>
            <option>Google / Meta Ads</option>
            <option>AI Automation</option>
            <option>Graphic Design</option>
            <option>Other</option>
          </select>
        </div>
        <div class="field"><label for="message">Message</label><textarea id="message" name="message" rows="4" placeholder="अपनी ज़रूरत के बारे में बताएं..."></textarea></div>
        <input type="text" name="website" id="website" style="position:absolute; left:-9999px;" tabindex="-1" autocomplete="off">
        <button class="btn btn-primary" type="submit" style="width:100%; justify-content:center;">Send Message</button>
        <p id="form-status" style="margin-top:14px; font-size:.88rem; display:none;"></p>
      </form>
      <script>
        document.getElementById('contact-form').addEventListener('submit', async function(e){
          e.preventDefault();
          const form = e.target;
          const status = document.getElementById('form-status');
          const btn = form.querySelector('button[type="submit"]');
          const originalText = btn.textContent;
          btn.textContent = 'Sending...';
          btn.disabled = true;
          try{
            const res = await fetch(form.action, { method:'POST', body:new FormData(form) });
            const data = await res.json();
            status.style.display = 'block';
            if(data.success){
              status.style.color = '#1a7a3c';
              status.textContent = 'धन्यवाद! आपका संदेश भेज दिया गया है — हम जल्द संपर्क करेंगे।';
              form.reset();
            } else {
              status.style.color = '#c0392b';
              status.textContent = data.message || 'कुछ गड़बड़ हुई, कृपया दोबारा कोशिश करें।';
            }
          } catch(err){
            status.style.display = 'block';
            status.style.color = '#c0392b';
            status.textContent = 'फॉर्म भेजने में समस्या आई। कृपया सीधे कॉल या WhatsApp करें।';
          } finally {
            btn.textContent = originalText;
            btn.disabled = false;
          }
        });
      </script>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <div class="foot-brand"><img src="logo-320.png" alt="SONDIGIT logo"><span>SONDIGIT</span></div>
        <p style="font-size:.9rem; color:#9fb0c1; max-width:280px;">Digital Marketing, IT Solutions &amp; Online Services — आपके व्यवसाय को डिजिटल रूप से सशक्त बनाना।</p>
      </div>
      <div>
        <h5>Quick Links</h5>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#learning">Learning</a></li>
          <li><a href="#careers">Careers</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
      <div>
        <h5>Our Services</h5>
        <ul>
          <li><a href="#services">Website Development</a></li>
          <li><a href="#services">Digital Marketing</a></li>
          <li><a href="#services">SEO</a></li>
          <li><a href="#services">Google Ads</a></li>
          <li><a href="#services">Meta Ads</a></li>
          <li><a href="#services">AI Automation</a></li>
          <li><a href="#services">Graphic Design</a></li>
        </ul>
      </div>
      <div>
        <h5>Follow Us</h5>
        <ul>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">LinkedIn</a></li>
          <li><a href="#">YouTube</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2026 SONDIGIT Private Limited. All rights reserved.</span>
      <span>Shahpura, Dindori, Madhya Pradesh · +91 80855 82738</span>
    </div>
  </div>
</footer>

<a class="whatsapp-fab" href="https://wa.me/918085582738" aria-label="Chat on WhatsApp" target="_blank">🟢</a>

</body>
</html>
