<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
  <a href="#" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
  <div style="display:flex;align-items:center;gap:32px;">
    <a href="product.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Product</a>
    <a href="team.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Team</a>
    <a href="contact.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
    <a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
  </div>
</nav>

<!-- Hero Section -->
<section style="position:relative;background-color:#0f172a;padding:100px 48px 120px;text-align:center;overflow:hidden;font-family:'Inter',sans-serif;">
  <div style="position:absolute;top:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,0.3),transparent 70%);border-radius:50%;"></div>
  <div style="position:absolute;bottom:-100px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,0.2),transparent 70%);border-radius:50%;"></div>
  <div style="position:relative;max-width:800px;margin:0 auto;z-index:1;">
    <h1 style="font-size:56px;font-weight:800;color:#ffffff;line-height:1.1;margin:0 0 24px;letter-spacing:-1.5px;">Build the Future with AI&#8209;Powered Analytics</h1>
    <p style="font-size:19px;color:#94a3b8;line-height:1.7;margin:0 0 40px;max-width:600px;margin-left:auto;margin-right:auto;">Transform raw data into actionable insights. NovaTech helps teams make smarter decisions faster with real-time dashboards and intelligent automation.</p>
    <div style="display:flex;gap:16px;justify-content:center;">
      <a href="#" style="background-color:#6366f1;color:#ffffff;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">Get Started</a>
      <a href="#" style="border:1px solid #475569;color:#e2e8f0;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">See Demo</a>
    </div>
  </div>
</section>

<!-- Trusted By -->
<section style="background-color:#0f172a;border-top:1px solid #1e293b;padding:48px;font-family:'Inter',sans-serif;text-align:center;">
  <p style="font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#64748b;margin:0 0 32px;font-weight:600;">Trusted by innovative teams worldwide</p>
  <div style="display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;">
    <span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Acme Corp</span>
    <span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Globex</span>
    <span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Initech</span>
    <span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Umbrella</span>
    <span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Stark Ind.</span>
  </div>
</section>

<!-- Features -->
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;text-align:center;">
    <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">Everything you need to grow</h2>
    <p style="font-size:17px;color:#64748b;margin:0 0 56px;max-width:560px;margin-left:auto;margin-right:auto;">Powerful features designed to help your team move faster and make better decisions.</p>
    <div style="display:flex;gap:32px;flex-wrap:wrap;justify-content:center;">
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
        <div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9679;</div>
        <h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Real-time Analytics</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Monitor your key metrics as they happen. Interactive dashboards update in real time so you never miss a trend.</p>
      </div>
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
        <div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9881;</div>
        <h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Smart Automation</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Automate repetitive tasks with AI-driven workflows. Set triggers, define actions, and let NovaTech handle the rest.</p>
      </div>
      <div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
        <div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">&#9733;</div>
        <h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Team Collaboration</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Share dashboards, leave comments, and collaborate in real time. Keep your entire team aligned and informed.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1000px;margin:0 auto;text-align:center;">
    <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">How it works</h2>
    <p style="font-size:17px;color:#64748b;margin:0 0 56px;">Get started in three simple steps.</p>
    <div style="display:flex;gap:40px;flex-wrap:wrap;justify-content:center;">
      <div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
        <div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">1</div>
        <h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Connect Your Data</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Integrate with your existing tools in minutes. We support 200+ data sources out of the box.</p>
      </div>
      <div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
        <div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">2</div>
        <h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Build Dashboards</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Drag and drop widgets to create custom dashboards. No code required, just point and click.</p>
      </div>
      <div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
        <div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">3</div>
        <h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Get Insights</h3>
        <p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Our AI surfaces trends and anomalies automatically. Make data-driven decisions with confidence.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section style="padding:96px 48px;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#6366f1,#4338ca);text-align:center;">
  <div style="max-width:600px;margin:0 auto;">
    <h2 style="font-size:38px;font-weight:800;color:#ffffff;margin:0 0 16px;letter-spacing:-1px;">Start Your Free Trial</h2>
    <p style="font-size:17px;color:#c7d2fe;line-height:1.7;margin:0 0 36px;">No credit card required. Get full access for 14 days and see how NovaTech can transform your workflow.</p>
    <a href="#" style="display:inline-block;background-color:#ffffff;color:#4338ca;padding:14px 36px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:700;">Get Started Free</a>
  </div>
</section>

<!-- Footer -->
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
  <div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
    <span style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;">NovaTech</span>
    <div style="display:flex;gap:28px;">
      <a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
      <a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
      <a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
      <a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
    </div>
    <p style="color:#475569;font-size:13px;margin:0;">&copy; 2026 NovaTech. All rights reserved.</p>
  </div>
</footer>
