<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrishulSankalp Solutions</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">

<!-- EmailJS — replace YOUR_PUBLIC_KEY with your key from emailjs.com -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script>
  // STEP 1: Replace 'YOUR_PUBLIC_KEY' with the Public Key from your EmailJS account
  (function(){ emailjs.init({ publicKey: 'YOUR_PUBLIC_KEY' }); })();
</script>

<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary: #0078D4;
    --accent:  #00BCF2;
    --bg:      #FFFFFF;
    --bg2:     #F8F9FA;
    --bg3:     #F1F3F5;
    --text:    #1F2328;
    --muted:   #656D76;
    --border:  rgba(0, 120, 212, 0.15);
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.7;
  }

  /* ── NAV ── */
  nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 5%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  }

  .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
  .logo-mark { width: 36px; height: 36px; }

  .nav-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
  .nav-wordmark .full {
    font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
    letter-spacing: 0.05em; color: var(--text);
  }
  .nav-wordmark .nick {
    font-size: 10px; font-weight: 500; letter-spacing: 0.2em;
    color: var(--primary); text-transform: uppercase;
  }

  .nav-links { display: flex; gap: 2.2rem; list-style: none; }
  .nav-links a {
    font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--muted); text-decoration: none; transition: color 0.25s;
    cursor: pointer;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--primary); }

  .nav-cta {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--primary) !important; border: 1px solid var(--primary);
    padding: 0.45rem 1.1rem; border-radius: 4px;
    transition: all 0.3s ease !important;
  }
  .nav-cta:hover { background: var(--primary) !important; color: #fff !important; }

  /* ── HERO ── */
  .hero {
    min-height: 95vh; display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center; padding: 6rem 5% 4rem;
    position: relative; overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 120, 212, 0.05) 0%, transparent 70%);
  }
  .hero-grid {
    position: absolute; inset: 0; z-index: 0;
    background-image:
      linear-gradient(rgba(0, 120, 212, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 120, 212, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  }
  .hero-trishul {
    position: relative; z-index: 1;
    animation: floatY 4s ease-in-out infinite; margin-bottom: 2.5rem;
  }
  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }
  .hero-eyebrow {
    position: relative; z-index: 1; font-size: 11px; font-weight: 600;
    letter-spacing: 0.35em; text-transform: uppercase; color: var(--primary);
    margin-bottom: 1.2rem; display: flex; align-items: center; gap: 1rem;
  }
  .hero-eyebrow::before, .hero-eyebrow::after {
    content: ''; display: block; width: 40px; height: 1px;
    background: var(--primary); opacity: 0.3;
  }
  h1 {
    position: relative; z-index: 1; font-family: 'Cinzel', serif;
    font-size: clamp(2.4rem, 5.5vw, 5rem); font-weight: 900;
    line-height: 1.05; letter-spacing: -0.01em;
    color: var(--text); margin-bottom: 0.3rem;
  }
  .hero-nick {
    position: relative; z-index: 1; font-family: 'Cinzel', serif;
    font-size: clamp(0.9rem, 2vw, 1.4rem); font-weight: 600;
    letter-spacing: 0.4em; color: var(--primary); margin-bottom: 2rem; opacity: 0.9;
  }
  .hero-tagline {
    position: relative; z-index: 1; font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 400; color: var(--muted); max-width: 650px;
    margin: 0 auto 3rem; line-height: 1.8;
  }
  .hero-tagline strong { color: var(--text); font-weight: 600; }
  .hero-actions {
    position: relative; z-index: 1;
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  }

  /* ── BUTTONS ── */
  .btn-primary {
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: var(--primary); border: none;
    padding: 0.9rem 2.2rem; border-radius: 4px;
    text-decoration: none; transition: all 0.3s; cursor: pointer;
    display: inline-block;
  }
  .btn-primary:hover { background: #005A9E; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,120,212,0.2); }
  .btn-ghost {
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--text);
    background: transparent; border: 1px solid rgba(0,0,0,0.1);
    padding: 0.9rem 2.2rem; border-radius: 4px;
    text-decoration: none; transition: all 0.3s; cursor: pointer;
    display: inline-block;
  }
  .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

  .scroll-hint {
    position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
    z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); opacity: 0.6;
  }
  .scroll-dot {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--primary), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @keyframes scrollPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

  /* ── SECTIONS ── */
  section { padding: 7rem 5%; }
  .section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 0.8rem;
  }
  .section-title {
    font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700; line-height: 1.15; margin-bottom: 1.5rem; color: var(--text);
  }
  .section-sub {
    font-size: 1.05rem; font-weight: 400; color: var(--muted);
    max-width: 520px; line-height: 1.9;
  }

  /* ── ABOUT ── */
  .about {
    background: var(--bg2);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .about-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center;
  }
  .about-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem;
  }
  .stat-card {
    padding: 1.5rem; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg); box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  }
  .stat-num {
    font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900;
    color: var(--primary); line-height: 1;
  }
  .stat-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .about-visual {
    display: flex; justify-content: center; align-items: center; position: relative;
  }
  .glow-ring {
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    border: 1px solid rgba(0, 120, 212, 0.15); animation: spinRing 20s linear infinite;
  }
  .glow-ring:nth-child(2) {
    width: 260px; height: 260px; border-style: dashed;
    animation: spinRing 12s linear infinite reverse; border-color: rgba(0, 188, 242, 0.15);
  }
  @keyframes spinRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* ── SERVICES ── */
  .services { max-width: 1100px; margin: 0 auto; }
  .services-header { margin-bottom: 4rem; }
  .services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  .service-card {
    background: var(--bg); padding: 2.5rem; border-radius: 8px;
    border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.3s; position: relative; overflow: hidden;
  }
  .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    transform: scaleX(0); transition: transform 0.4s;
  }
  .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-icon { width: 44px; height: 44px; margin-bottom: 1.5rem; }
  .service-name { font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--text); }
  .service-desc { font-size: 0.95rem; font-weight: 400; color: var(--muted); line-height: 1.8; }
  .service-tag {
    display: inline-block; margin-top: 1.5rem;
    font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--primary); border: 1px solid rgba(0, 120, 212, 0.2);
    padding: 0.25rem 0.7rem; border-radius: 4px; background: rgba(0, 120, 212, 0.05);
  }

  /* ── IT SOLUTIONS ── */
  .it-solutions {
    background: var(--bg3);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .it-solutions-inner { max-width: 1100px; margin: 0 auto; }
  .it-solutions-header { margin-bottom: 4rem; }

  .it-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-bottom: 4rem;
  }
  .it-card {
    background: var(--bg); padding: 3rem; border-radius: 8px; border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); transition: all 0.3s;
  }
  .it-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }

  .it-card-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--primary); border: 1px solid rgba(0, 120, 212, 0.2); background: rgba(0, 120, 212, 0.05);
    padding: 0.4rem 1rem; border-radius: 4px; margin-bottom: 2rem;
  }
  .it-icon { width: 52px; height: 52px; margin-bottom: 1.8rem; }
  .it-card-title { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; color: var(--text); }
  .it-card-desc { font-size: 1rem; font-weight: 400; color: var(--muted); line-height: 1.8; margin-bottom: 2rem; }
  .it-features { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
  .it-features li {
    display: flex; align-items: flex-start; gap: 0.75rem;
    font-size: 0.95rem; color: var(--text); font-weight: 500; line-height: 1.6;
  }
  .it-features li::before {
    content: ''; display: block; flex-shrink: 0; width: 14px; height: 14px; margin-top: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7L5.5 10.5L12 3.5' stroke='%230078D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
  }

  .it-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .it-stat { background: var(--bg); padding: 2rem 1.5rem; text-align: center; border-radius: 6px; border: 1px solid var(--border); }
  .it-stat-num { font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; }
  .it-stat-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }

  /* ── PHILOSOPHY ── */
  .philosophy {
    background: var(--bg);
    text-align: center;
  }
  .philosophy-inner { max-width: 800px; margin: 0 auto; }
  .quote-mark {
    font-family: 'Cinzel', serif; font-size: 6rem; line-height: 0.5;
    color: var(--primary); opacity: 0.2; display: block; margin-bottom: 2rem;
  }
  .philosophy-quote {
    font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    font-weight: 600; line-height: 1.6; color: var(--text); margin-bottom: 2rem; font-style: italic;
  }
  .philosophy-attr { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

  /* ── CONTACT ── */
  .contact { max-width: 1100px; margin: 0 auto; }
  .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
  .contact-form { display: flex; flex-direction: column; gap: 1.2rem; background: var(--bg); padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
  .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
  .form-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
  .form-input {
    background: var(--bg2); border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
    padding: 0.85rem 1rem; color: var(--text); font-family: 'DM Sans', sans-serif;
    font-size: 14px; outline: none; transition: all 0.3s;
  }
  .form-input:focus { border-color: var(--primary); background: var(--bg); box-shadow: 0 0 0 3px rgba(0,120,212,0.1); }
  textarea.form-input { resize: vertical; min-height: 120px; }

  .form-select {
    background: var(--bg2); border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
    padding: 0.85rem 1rem; color: var(--text); font-family: 'DM Sans', sans-serif;
    font-size: 14px; outline: none; transition: all 0.3s;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23656D76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  }
  .form-select:focus { border-color: var(--primary); background: var(--bg); box-shadow: 0 0 0 3px rgba(0,120,212,0.1); }

  .info-item {
    display: flex; gap: 1.2rem; align-items: flex-start;
    margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border);
  }
  .info-item:last-child { border-bottom: none; }
  .info-icon {
    width: 42px; height: 42px; flex-shrink: 0; background: rgba(0, 120, 212, 0.05);
    border: 1px solid rgba(0, 120, 212, 0.2); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .info-label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.3rem; }
  .info-value { font-size: 15px; color: var(--text); font-weight: 500; }

  .form-success {
    display: none; padding: 1rem;
    background: rgba(0, 120, 212, 0.05); border: 1px solid rgba(0, 120, 212, 0.2);
    border-radius: 4px; font-size: 14px; color: var(--text); font-weight: 500;
  }

  /* ── FOOTER ── */
  footer {
    background: var(--bg2);
    border-top: 1px solid var(--border); padding: 3rem 5%;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  }
  .footer-logo { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; color: var(--text); }
  .footer-logo span { color: var(--primary); }
  .footer-copy { font-size: 13px; color: var(--muted); font-weight: 500;}
  .footer-nick { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .about-inner, .contact-inner { grid-template-columns: 1fr; gap: 3rem; }
    .about-visual { display: none; }
    .nav-links { display: none; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .it-grid { grid-template-columns: 1fr; }
    .it-stats { grid-template-columns: 1fr 1fr; }
  }
</style>
</head>
<body>

<nav id="main-nav">
  <a class="nav-logo" href="#hero">
    <svg class="logo-mark" viewBox="0 0 36 36" fill="none">
      <line x1="18" y1="4" x2="18" y2="32" stroke="#0078D4" stroke-width="2.5" stroke-linecap="round"/>
      <path d="M18 4 L13 10 M18 4 L23 10" stroke="#0078D4" stroke-width="2" stroke-linecap="round"/>
      <path d="M11 13 L7 9 M11 13 L9 8" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
      <path d="M25 13 L29 9 M25 13 L27 8" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="9" y1="13" x2="27" y2="13" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="18" cy="28" r="3" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
    </svg>
    <div class="nav-wordmark">
      <span class="full">TrishulSankalp</span>
      <span class="nick">Trishul x</span>
    </div>
  </a>
  <ul class="nav-links">
    <li><a href="#about" onclick="smoothScrollTo('about');return false;">About</a></li>
    <li><a href="#services" onclick="smoothScrollTo('services');return false;">Services</a></li>
    <li><a href="#it-solutions" onclick="smoothScrollTo('it-solutions');return false;">IT Solutions</a></li>
    <li><a href="#philosophy" onclick="smoothScrollTo('philosophy');return false;">Philosophy</a></li>
    <li><a href="#contact" onclick="smoothScrollTo('contact');return false;" class="nav-cta">Connect</a></li>
  </ul>
</nav>

<section class="hero" id="hero">
  <div class="hero-bg"></div>
  <div class="hero-grid"></div>
  <div class="hero-trishul">
    <svg width="100" height="160" viewBox="0 0 100 160" fill="none">
      <line x1="50" y1="20" x2="50" y2="145" stroke="#0078D4" stroke-width="3.5" stroke-linecap="round"/>
      <path d="M50 20 L43 36 M50 20 L57 36" stroke="#0078D4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M26 42 L20 22 M26 42 L22 20" stroke="#00BCF2" stroke-width="2.5" stroke-linecap="round"/>
      <path d="M74 42 L80 22 M74 42 L78 20" stroke="#00BCF2" stroke-width="2.5" stroke-linecap="round"/>
      <line x1="20" y1="42" x2="80" y2="42" stroke="#0078D4" stroke-width="2.5" stroke-linecap="round"/>
      <rect x="44" y="72" width="12" height="8" rx="2" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
      <ellipse cx="50" cy="140" rx="8" ry="5" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
      <circle cx="50" cy="20" r="3" fill="#0078D4"/>
      <circle cx="21" cy="21" r="2.5" fill="#00BCF2"/>
      <circle cx="79" cy="21" r="2.5" fill="#00BCF2"/>
    </svg>
  </div>
  <div class="hero-eyebrow">Trishul x</div>
  <h1>TrishulSankalp<br>Solutions</h1>
  <p class="hero-nick">— Resolve. Purpose. Power. —</p>
  <p class="hero-tagline">We forge <strong>bold ideas</strong> into decisive outcomes. Built on the principle of <strong>Sankalp</strong> — unwavering resolve — we deliver solutions that cut sharp and stand tall. From <strong>IT Staffing</strong> to <strong>end-to-end IT Services</strong>, we power your entire technology journey.</p>
  <div class="hero-actions">
    <a class="btn-primary" href="#services" onclick="smoothScrollTo('services');return false;">Explore Our Work</a>
    <a class="btn-ghost" href="#contact" onclick="smoothScrollTo('contact');return false;">Get in Touch</a>
  </div>
  <div class="scroll-hint"><div class="scroll-dot"></div>Scroll</div>
</section>

<section class="about" id="about">
  <div class="about-inner">
    <div>
      <p class="section-label">Who We Are</p>
      <h2 class="section-title">Power forged from<br>purpose</h2>
      <p class="section-sub">TrishulSankalp Solutions is a modern consulting and technology firm rooted in the spirit of the Trishul — three prongs of Strategy, Technology, and Execution working in perfect unity. We don't just advise. We act.</p>
      <div class="about-stats">
        <div class="stat-card"><div class="stat-num">3×</div><div class="stat-label">Faster Delivery</div></div>
        <div class="stat-card"><div class="stat-num">100+</div><div class="stat-label">Projects Delivered</div></div>
        <div class="stat-card"><div class="stat-num">50+</div><div class="stat-label">Clients Served</div></div>
        <div class="stat-card"><div class="stat-num">9+</div><div class="stat-label">Years of Sankalp</div></div>
      </div>
    </div>
    <div class="about-visual">
      <div class="glow-ring"></div><div class="glow-ring"></div>
      <svg width="180" height="280" viewBox="0 0 100 160" fill="none">
        <line x1="50" y1="20" x2="50" y2="145" stroke="#0078D4" stroke-width="3.5" stroke-linecap="round"/>
        <path d="M50 20 L43 36 M50 20 L57 36" stroke="#0078D4" stroke-width="3" stroke-linecap="round"/>
        <path d="M26 42 L20 22 M26 42 L22 20" stroke="#00BCF2" stroke-width="2.5" stroke-linecap="round"/>
        <path d="M74 42 L80 22 M74 42 L78 20" stroke="#00BCF2" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="20" y1="42" x2="80" y2="42" stroke="#0078D4" stroke-width="2.5" stroke-linecap="round"/>
        <rect x="44" y="72" width="12" height="8" rx="2" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
        <ellipse cx="50" cy="140" rx="8" ry="5" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
        <circle cx="50" cy="20" r="3.5" fill="#0078D4"/>
        <circle cx="21" cy="21" r="3" fill="#00BCF2"/>
        <circle cx="79" cy="21" r="3" fill="#00BCF2"/>
      </svg>
    </div>
  </div>
</section>

<section id="services">
  <div class="services">
    <div class="services-header">
      <p class="section-label">What We Do</p>
      <h2 class="section-title">The Three Prongs</h2>
      <p class="section-sub">Like the Trishul itself, our three pillars work in concert — each sharp on its own, unstoppable together.</p>
    </div>
    <div class="services-grid">
      <div class="service-card">
        <svg class="service-icon" viewBox="0 0 44 44" fill="none">
          <rect x="4" y="4" width="36" height="36" rx="3" stroke="#0078D4" stroke-width="1.5"/>
          <line x1="14" y1="14" x2="30" y2="14" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="14" y1="20" x2="26" y2="20" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="14" y1="26" x2="22" y2="26" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round"/>
          <circle cx="32" cy="30" r="6" fill="none" stroke="#00BCF2" stroke-width="1.5"/>
          <line x1="36.2" y1="34.2" x2="40" y2="38" stroke="#00BCF2" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <div class="service-name">Strategy &amp; Consulting</div>
        <p class="service-desc">Market intelligence, growth blueprints, and competitive positioning that cut through noise. We map the battlefield before you step onto it.</p>
        <span class="service-tag">Prong One</span>
      </div>
      <div class="service-card">
        <svg class="service-icon" viewBox="0 0 44 44" fill="none">
          <polyline points="4,36 14,22 22,28 30,12 40,18" stroke="#0078D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          <circle cx="14" cy="22" r="2.5" fill="#00BCF2"/>
          <circle cx="22" cy="28" r="2.5" fill="#00BCF2"/>
          <circle cx="30" cy="12" r="2.5" fill="#0078D4"/>
          <line x1="4" y1="38" x2="40" y2="38" stroke="#656D76" stroke-width="1" stroke-linecap="round"/>
          <line x1="4" y1="8" x2="4" y2="38" stroke="#656D76" stroke-width="1" stroke-linecap="round"/>
        </svg>
        <div class="service-name">Technology Solutions</div>
        <p class="service-desc">End-to-end digital transformation, software development, and data platforms. From MVP to enterprise scale — we build with precision.</p>
        <span class="service-tag">Prong Two</span>
      </div>
      <div class="service-card">
        <svg class="service-icon" viewBox="0 0 44 44" fill="none">
          <circle cx="22" cy="14" r="7" stroke="#0078D4" stroke-width="1.5"/>
          <path d="M10 38 C10 28 34 28 34 38" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round" fill="none"/>
          <circle cx="34" cy="24" r="4.5" stroke="#00BCF2" stroke-width="1.5"/>
          <path d="M38.5 28 C38.5 23 44 23 44 28" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round" fill="none"/>
          <line x1="20" y1="12" x2="24" y2="16" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="24" y1="12" x2="20" y2="16" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        <div class="service-name">Execution &amp; Delivery</div>
        <p class="service-desc">Program management, team augmentation, and operational excellence. Strategy means nothing without relentless execution — that's our Sankalp.</p>
        <span class="service-tag">Prong Three</span>
      </div>
    </div>
  </div>
</section>

<section class="it-solutions" id="it-solutions">
  <div class="it-solutions-inner">
    <div class="it-solutions-header">
      <p class="section-label">Specialist Capabilities</p>
      <h2 class="section-title">IT Staffing &amp;<br>IT Services</h2>
      <p class="section-sub">Beyond consulting, we power your technology operations from the inside — placing the right talent and delivering the right services so your business never misses a beat.</p>
    </div>
    <div class="it-grid">
      <div class="it-card">
        <div class="it-card-badge">IT Staffing</div>
        <svg class="it-icon" viewBox="0 0 52 52" fill="none">
          <circle cx="17" cy="14" r="6" stroke="#0078D4" stroke-width="1.5"/>
          <path d="M6 38 C6 27 28 27 28 38" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round" fill="none"/>
          <circle cx="36" cy="18" r="5" stroke="#00BCF2" stroke-width="1.5"/>
          <path d="M26 40 C26 31 46 31 46 40" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round" fill="none"/>
          <circle cx="44" cy="10" r="6" fill="#FFFFFF" stroke="#0078D4" stroke-width="1.5"/>
          <line x1="44" y1="7" x2="44" y2="13" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="41" y1="10" x2="47" y2="10" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        <div class="it-card-title">Right Talent,<br>Right Time</div>
        <p class="it-card-desc">We source, vet, and place technology professionals who fit your culture and deliver from day one. Whether you need a single specialist or a full squad, we build your bench with precision.</p>
        <ul class="it-features">
          <li>Contract, contract-to-hire &amp; permanent placements</li>
          <li>Full-stack developers, cloud architects &amp; DevOps engineers</li>
          <li>Data scientists, QA engineers &amp; cybersecurity specialists</li>
          <li>Project managers, Scrum masters &amp; business analysts</li>
          <li>Rapid deployment — talent on board in under 2 weeks</li>
          <li>Deep domain expertise across BFSI, healthcare &amp; SaaS</li>
        </ul>
      </div>
      <div class="it-card">
        <div class="it-card-badge">IT Services</div>
        <svg class="it-icon" viewBox="0 0 52 52" fill="none">
          <rect x="6" y="8" width="32" height="9" rx="2" stroke="#00BCF2" stroke-width="1.5"/>
          <rect x="6" y="21" width="32" height="9" rx="2" stroke="#00BCF2" stroke-width="1.5"/>
          <rect x="6" y="34" width="32" height="9" rx="2" stroke="#0078D4" stroke-width="1.5"/>
          <circle cx="33" cy="12.5" r="2" fill="#0078D4"/>
          <circle cx="33" cy="25.5" r="2" fill="#0078D4"/>
          <circle cx="33" cy="38.5" r="2" fill="#00BCF2"/>
          <line x1="11" y1="12.5" x2="20" y2="12.5" stroke="#656D76" stroke-width="1.5" stroke-linecap="round"/>
          <line x1="11" y1="25.5" x2="20" y2="25.5" stroke="#656D76" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M40 28 C40 24 46 22 47 26 C49 26 51 29 49 31 L40 31 Z" stroke="#0078D4" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <div class="it-card-title">End-to-End IT<br>Operations</div>
        <p class="it-card-desc">From infrastructure to application support, we manage your entire technology stack so your teams can focus on what they do best. Predictable, scalable, and always-on IT services.</p>
        <ul class="it-features">
          <li>Managed IT support &amp; 24/7 helpdesk services</li>
          <li>Cloud migration, management &amp; cost optimisation (AWS, Azure, GCP)</li>
          <li>Application development, maintenance &amp; modernisation</li>
          <li>Cybersecurity audits, compliance &amp; threat monitoring</li>
          <li>Network design, setup &amp; ongoing infrastructure management</li>
          <li>ERP implementation, integration &amp; support</li>
        </ul>
      </div>
    </div>
    <div class="it-stats">
      <div class="it-stat"><div class="it-stat-num">500+</div><div class="it-stat-label">Professionals Placed</div></div>
      <div class="it-stat"><div class="it-stat-num">12</div><div class="it-stat-label">Avg. Days to Deploy</div></div>
      <div class="it-stat"><div class="it-stat-num">30+</div><div class="it-stat-label">Technology Domains</div></div>
      <div class="it-stat"><div class="it-stat-num">99%</div><div class="it-stat-label">Client Retention Rate</div></div>
    </div>
  </div>
</section>

<section class="philosophy" id="philosophy">
  <div class="philosophy-inner">
    <p class="section-label" style="text-align:center;">Our Sankalp</p>
    <span class="quote-mark">"</span>
    <p class="philosophy-quote">The Trishul does not waver. It strikes with the full weight of purpose, the clarity of intent, and the force of resolve. So do we.</p>
    <p class="philosophy-attr">— Founding Principle, TrishulSankalp Solutions</p>
  </div>
</section>

<section id="contact" style="padding: 7rem 5%;">
  <div class="contact">
    <div class="contact-inner">
      <div>
        <p class="section-label">Reach Out</p>
        <h2 class="section-title">Ready to forge<br>something great?</h2>
        <p class="section-sub" style="margin-bottom: 3rem;">Whether you're looking for a strategic partner, a technology team, IT staffing, or simply want to explore — we'd love to hear from you.</p>
        
        <div class="info-item">
          <div class="info-icon">
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
              <path d="M14.5 11.5C14.5 11.5 12.5 11.5 11.5 10.5C10.5 9.5 9.5 10.5 8.5 9.5C7.5 8.5 8.5 7.5 7.5 6.5C6.5 5.5 6.5 3.5 6.5 3.5C6.5 3.5 5.5 1.5 4.5 1.5C3.5 1.5 1.5 2.5 1.5 3.5C1.5 6.5 4.5 10.5 8.5 14.5C12.5 14.5 14.5 14.5 14.5 14.5Z" stroke="#0078D4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div><div class="info-label">Phone Number</div><div class="info-value">+918247767004</div></div>
        </div>
        
        <div class="info-item">
          <div class="info-icon">
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect x="1" y="3" width="14" height="10" rx="1.5" stroke="#0078D4" stroke-width="1.5"/>
              <path d="M1.5 3.5L8 9L14.5 3.5" stroke="#00BCF2" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </div>
          <div><div class="info-label">Email Address</div><div class="info-value">contact@trishulsankalp.com</div></div>
        </div>
        
        <div class="info-item">
          <div class="info-icon">
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
              <path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6C3.5 9.5 8 14.5 8 14.5C8 14.5 12.5 9.5 12.5 6C12.5 3.5 10.5 1.5 8 1.5Z" stroke="#0078D4" stroke-width="1.5"/>
              <circle cx="8" cy="6" r="1.5" stroke="#00BCF2" stroke-width="1.5"/>
            </svg>
          </div>
          <div><div class="info-label">Headquarters</div><div class="info-value">Bengaluru, India</div></div>
        </div>
        
      </div>
      <div class="contact-form">
        <div class="form-group">
          <label class="form-label">Your Name</label>
          <input type="text" id="inputName" class="form-input" placeholder="Full name">
        </div>
        <div class="form-group">
          <label class="form-label">Email Address</label>
          <input type="email" id="inputEmail" class="form-input" placeholder="you@company.com">
        </div>
        <div class="form-group">
          <label class="form-label">What Are You Looking For?</label>
          <select id="dropdownService" class="form-select">
            <option value="" disabled selected>Select a service…</option>
            <option value="Strategy & Consulting">Strategy &amp; Consulting</option>
            <option value="Technology Solutions">Technology Solutions</option>
            <option value="Execution & Delivery">Execution &amp; Delivery</option>
            <option value="IT Staffing">IT Staffing</option>
            <option value="IT Services">IT Services</option>
            <option value="Other">Other / General Enquiry</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Message</label>
          <textarea id="textareaMessage" class="form-input" placeholder="Tell us about your challenge or vision…"></textarea>
        </div>
        <div class="form-success" id="formSuccess"></div>
        <button class="btn-primary" id="btnSend" style="width:100%;margin-top:1rem;">Send Message</button>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="footer-logo">Trishul<span>Sankalp</span> Solutions</div>
  <div class="footer-copy">&copy; 2026 TrishulSankalp Solutions. All rights reserved.</div>
  <div class="footer-nick">Trishul x</div>
</footer>

<script>
/* ============================================================
   Zoho Sites — Clean JavaScript (no Wix postMessage)
   ============================================================ */

// ── 1. Smooth scroll (native, no parent iframe messaging needed)
function smoothScrollTo(sectionId) {
  const el = document.getElementById(sectionId);
  if (el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// ── 2. Active nav highlight on scroll
const sections = document.querySelectorAll('section[id]');
const navLinks  = document.querySelectorAll('.nav-links a');

document.addEventListener('scroll', () => {
  let current = '';
  sections.forEach(sec => {
    if (window.scrollY >= sec.offsetTop - 150) current = sec.id;
  });
  navLinks.forEach(a => {
    const href = a.getAttribute('href') || '';
    a.classList.toggle('active', href === '#' + current);
  });
}, { passive: true });

// ── 3. Contact form — EmailJS
//
// SETUP STEPS:
//   a) Sign up free at https://www.emailjs.com
//   b) Add an Email Service (Gmail, Outlook, etc.)
//   c) Create an Email Template — use these variables in the template body:
//        {{from_name}}, {{from_email}}, {{service}}, {{message}}
//   d) Replace the three placeholder values below:
//      - 'YOUR_SERVICE_ID'  → your EmailJS Service ID
//      - 'YOUR_TEMPLATE_ID' → your EmailJS Template ID
//      - 'YOUR_PUBLIC_KEY'  → your EmailJS Public Key (also in the <head> above)
//
const EMAILJS_SERVICE_ID  = 'YOUR_SERVICE_ID';
const EMAILJS_TEMPLATE_ID = 'YOUR_TEMPLATE_ID';

const btnSend = document.getElementById('btnSend');
const formMsg = document.getElementById('formSuccess');

btnSend.addEventListener('click', async () => {
  const name    = document.getElementById('inputName').value.trim();
  const email   = document.getElementById('inputEmail').value.trim();
  const service = document.getElementById('dropdownService').value;
  const message = document.getElementById('textareaMessage').value.trim();

  if (!name || !email || !message) {
    showFormMsg('⚠ Please fill in all required fields.', '#0078D4');
    return;
  }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    showFormMsg('⚠ Please enter a valid email address.', '#0078D4');
    return;
  }

  btnSend.textContent = 'Sending…';
  btnSend.disabled = true;

  try {
    await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, {
      from_name:  name,
      from_email: email,
      service:    service || 'Not specified',
      message:    message,
      reply_to:   email
    });
    showFormMsg('✓ Message sent — we\'ll respond within 24 hours.', '#0078D4');
    btnSend.textContent = 'Sent ✓';
    btnSend.style.background = '#2a7a2a';
  } catch (err) {
    console.error('EmailJS error:', err);
    showFormMsg('✗ Something went wrong. Please email us directly at contact@trishulsankalp.com', '#D04020');
    btnSend.textContent = 'Send Message';
    btnSend.disabled = false;
  }
});

function showFormMsg(text, color) {
  formMsg.textContent = text;
  formMsg.style.display     = 'block';
  formMsg.style.borderColor = color;
  formMsg.style.color       = color;
}
</script>
</body>
</html>