Response:
```html
<!DOCTYPE html>
<html lang="en-AU">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Voice Agent for Tradie Businesses | Never Miss Another Call</title>
    <meta name="description" content="AI voice agent that answers calls, books jobs, and handles enquiries 24/7. Stop missing calls while on the tools. Start your free trial today.">

    <style>
        :root {
            --bg-primary: #0B0C0E;
            --bg-secondary: #151820;
            --bg-tertiary: #1C2029;
            --text-primary: #E5E7EB;
            --text-secondary: #9CA3AF;
            --accent: #3B82F6;
            --accent-hover: #2563EB;
            --green: #10B981;
            --green-light: #34D399;
            --orange: #F59E0B;
            --red: #EF4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Navigation */
        nav {
            background: rgba(11, 12, 14, 0.95);
            backdrop-filter: blur(10px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
        }

        .logo span {
            color: var(--accent);
        }

        .nav-cta {
            background: var(--accent);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .nav-cta:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }

        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            text-align: center;
            background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero h1 .highlight {
            color: var(--accent);
            background: linear-gradient(135deg, var(--accent), var(--green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent);
            color: white;
            padding: 16px 32px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        }

        .hero-cta:hover {
            background: var(--accent-hover);
            transform: translateY(-3px);
            box-shadow: 0 6px 30px rgba(59, 130, 246, 0.5);
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-top: 60px;
            flex-wrap: wrap;
        }

        .stat {
            text-align: center;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--green);
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* Before/After Section */
        .comparison {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 60px;
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .comparison-card {
            padding: 40px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .comparison-card.before {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
            border: 2px solid rgba(239, 68, 68, 0.3);
        }

        .comparison-card.after {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
            border: 2px solid rgba(16, 185, 129, 0.3);
        }

        .comparison-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .comparison-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .before .comparison-icon {
            background: rgba(239, 68, 68, 0.2);
            color: var(--red);
        }

        .after .comparison-icon {
            background: rgba(16, 185, 129, 0.2);
            color: var(--green);
        }

        .comparison-title {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .before .comparison-title {
            color: var(--red);
        }

        .after .comparison-title {
            color: var(--green);
        }

        .comparison-list {
            list-style: none;
        }

        .comparison-list li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .comparison-list li:last-child {
            border-bottom: none;
        }

        .check-x {
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .before .check-x {
            color: var(--red);
        }

        .after .check-x {
            color: var(--green);
        }

        /* Pain Points Section */
        .pain-points {
            padding: 100px 0;
        }

        .pain-points-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .pain-point-card {
            background: var(--bg-secondary);
            padding: 40px 30px;
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .pain-point-card:hover {
            transform: translateY(-10px);
            border-color: var(--accent);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        .pain-point-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), #6366F1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 20px;
        }

        .pain-point-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .pain-point-desc {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        /* ROI Calculator Section */
        .roi-calculator {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .roi-container {
            background: var(--bg-tertiary);
            border-radius: 24px;
            padding: 50px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .roi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .roi-inputs {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .roi-input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .roi-input-group label {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .roi-input-group input {
            background: var(--bg-secondary);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent);
        }

        .roi-results {
            background: var(--bg-secondary);
            padding: 40px;
            border-radius: 16px;
            text-align: center;
        }

        .roi-result-title {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }

        .roi-result-value {
            font-size: 3rem;
            font-weight: 800;
            color: var(--red);
            margin-bottom: 20px;
        }

        .roi-result-value.positive {
            color: var(--green);
        }

        .roi-cost {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .roi-cost-label {
            color: var(--text-secondary);
        }

        .roi-cost-value {
            font-weight: 700;
            color: var(--text-primary);
        }

        .roi-roi {
            margin-top: 20px;
            padding: 20px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 12px;
        }

        .roi-roi-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--green);
        }

        .roi-roi-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* Features Section */
        .features {
            padding: 100px 0;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .feature-card {
            background: var(--bg-secondary);
            padding: 30px;
            border-radius: 16px;
            display: flex;
            gap: 20px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .feature-card:hover {
            border-color: var(--accent);
            transform: translateX(10px);
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent), #6366F1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .feature-content h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .feature-content p {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* Demo Section */
        .demo {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .demo-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .demo-phone {
            background: var(--bg-tertiary);
            border-radius: 30px;
            padding: 30px;
            border: 3px solid rgba(255,255,255,0.1);
            position: relative;
        }

        .demo-phone::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 6px;
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
        }

        .demo-header {
            text-align: center;
            padding-top: 20px;
            margin-bottom: 20px;
        }

        .demo-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--green));
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .demo-name {
            font-weight: 700;
            font-size: 1.1rem;
        }

        .demo-status {
            font-size: 0.8rem;
            color: var(--green);
        }

        .demo-transcript {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: 400px;
            overflow-y: auto;
        }

        .demo-message {
            padding: 15px;
            border-radius: 15px;
            font-size: 0.9rem;
        }

        .demo-message.ai {
            background: var(--accent);
            align-self: flex-start;
            border-bottom-left-radius: 5px;
        }

        .demo-message.customer {
            background: var(--bg-primary);
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }

        .demo-message .time {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 5px;
        }

        .demo-info h3 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .demo-info p {
            color: var(--text-secondary);
            margin-bottom: 30px;
        }

        .demo-features {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .demo-feature {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .demo-feature-check {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        /* Pricing Section */
        .pricing {
            padding: 100px 0;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .pricing-card {
            background: var(--bg-secondary);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
        }

        .pricing-card.featured {
            border-color: var(--accent);
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), var(--bg-secondary));
        }

        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .pricing-name {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .pricing-price {
            font-size: 3rem;
            font-weight: 800;
            color: var(--accent);
            margin-bottom: 5px;
        }

        .pricing-price span {
            font-size: 1rem;
            color: var(--text-secondary);
            font-weight: 400;
        }

        .pricing-desc {
            color: var(--text-secondary);
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .pricing-features {
            text-align: left;
            margin-bottom: 30px;
        }

        .pricing-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            color: var(--text-secondary);
        }

        .pricing-feature.included {
            color: var(--text-primary);
        }

        .pricing-feature .check {
            color: var(--green);
        }

        .pricing-feature .x {
            color: var(--text-secondary);
            opacity: 0.3;
        }

        .pricing-cta {
            display: inline-block;
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .pricing-card.featured .pricing-cta {
            background: var(--accent);
            color: white;
        }

        .pricing-card:not(.featured) .pricing-cta {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .pricing-cta:hover {
            transform: translateY(-3px);
        }

        /* Testimonial Section */
        .testimonial {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .testimonial-card {
            background: var(--bg-tertiary);
            border-radius: 24px;
            padding: 60px;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .testimonial-quote {
            font-size: 1.5rem;
            font-style: italic;
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .testimonial-quote::before {
            content: '"';
            font-size: 4rem;
            color: var(--accent);
            display: block;
            line-height: 1;
            margin-bottom: 20px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .testimonial-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--green));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .testimonial-info {
            text-align: left;
        }

        .testimonial-name {
            font-weight: 700;
        }

        .testimonial-role {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .testimonial-stats {
            display: flex;
            gap: 30px;
            justify-content: center;
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .testimonial-stat {
            text-align: center;
        }

        .testimonial-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--green);
        }

        .testimonial-stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* FAQ Section */
        .faq {
            padding: 100px 0;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .faq-item {
            background: var(--bg-secondary);
            padding: 30px;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .faq-item:hover {
            border-color: var(--accent);
        }

        .faq-question {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-question::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent);
            transition: all 0.3s ease;
        }

        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            color: var(--text-secondary);
            font-size: 0.95rem;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        /* CTA Section */
        .cta {
            padding: 100px 0;
            background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
            text-align: center;
        }

        .cta h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .cta p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin-bottom: 40px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent);
            color: white;
            padding: 18px 40px;
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        }

        .cta-button:hover {
            background: var(--accent-hover);
            transform: translateY(-3px);
            box-shadow: 0 6px 30px rgba(59, 130, 246, 0.5);
        }

        /* Footer */
        footer {
            padding: 40px 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            text-align: center;
        }

        .footer-powered {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .footer-powered a {
            color: var(--accent);
            text-decoration: none;
        }

        /* Responsive */
        @media (max-width: 968px) {
            .hero h1 {
                font-size: 2.5rem;
            }

            .comparison-grid,
            .roi-grid,
            .demo-container {
                grid-template-columns: 1fr;
            }

            .pain-points-grid,
            .pricing-grid,
            .features-grid,
            .faq-grid {
                grid-template-columns: 1fr;
            }

            .hero-stats {
                gap: 30px;
            }

            .roi-container {
                padding: 30px;
            }
        }

        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .pricing-card {
                padding: 30px 20px;
            }

            .testimonial-card {
                padding: 40px 20px;
            }

            .testimonial-quote {
                font-size: 1.2rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate {
            animation: fadeInUp 0.6s ease forwards;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav>
        <div class="container nav-content">
            <a href="#" class="logo">Tradie<span>Automation</span></a>
            <a href="#pricing" class="nav-cta">Start Free Trial</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="animate">AI Voice Agent for <span class="highlight">Tradie Businesses</span></h1>
            <p class="animate delay-1">Never miss another call while you're on the tools. Our AI answers 24/7, books jobs directly into your calendar, and follows up quotes — so you can focus on work, not admin.</p>
            <a href="#pricing" class="hero-cta animate delay-2">
                Start Your Free Trial
                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <div class="hero-stats animate delay-3">
                <div class="stat">
                    <div class="stat-value">62%</div>
                    <div class="stat-label">of calls missed</div>
                </div>
                <div class="stat">
                    <div class="stat-value">$4,800</div>
                    <div class="stat-label">Avg. monthly lost</div>
                </div>
                <div class="stat">
                    <div class="stat-value">24/7</div>
                    <div class="stat-label">AI coverage</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="comparison">
        <div class="container">
            <h2 class="section-title">Your Business, Transformed</h2>
            <div class="comparison-grid">
                <div class="comparison-card before">
                    <div class="comparison-header">
                        <div class="comparison-icon">✗</div>
                        <div class="comparison-title">Your Current Setup</div>
                    </div>
                    <ul class="comparison-list">
                        <li><span class="check-x">✗</span> Phone rings while you're on a job</li>
                        <li><span class="check-x">✗</span> Call goes to voicemail, customer moves on</li>
                        <li><span class="check-x">✗</span> You call back 2 hours later — too late</li>
                        <li><span class="check-x">✗</span> Emergency jobs go to competitors</li>
                        <li><span class="check-x">✗</span> Spend 3 hours every night doing admin</li>
                        <li><span class="check-x">✗</span> Quotes sent but never followed up</li>
                    </ul>
                </div>
                <div class="comparison-card after">
                    <div class="comparison-header">
                        <div class="comparison-icon">✓</div>
                        <div class="comparison-title">With AI Voice Agent</div>
                    </div>
                    <ul class="comparison-list">
                        <li><span class="check-x">✓</span> AI answers instantly, every time</li>
                        <li><span class="check-x">✓</span> Customer gets immediate response</li>
                        <li><span class="check-x">✓</span> Jobs booked while you're working</li>
                        <li><span class="check-x">✓</span> Emergencies prioritised and escalated</li>
                        <li><span class="check-x">✓</span> Evenings free for family time</li>
                        <li><span class="check-x">✓</span> Automated quote follow-ups</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Pain Points Section -->
    <section class="pain-points">
        <div class="container">
            <h2 class="section-title">The Real Cost of Missed Calls</h2>
            <div class="pain-points-grid">
                <div class="pain-point-card">
                    <div class="pain-point-icon">📞</div>
                    <h3 class="pain-point-title">Missing Calls While On The Tools</h3>
                    <p class="pain-point-desc">When you're on a job, you can't answer. But 62% of callers won't leave a message — they call your competitor instead.</p>
                </div>
                <div class="pain-point-card">
                    <div class="pain-point-icon">🚨</div>
                    <h3 class="pain-point-title">Losing Emergency Jobs</h3>
                    <p class="pain-point-desc">Burst pipe, no hot water, electrical fault — emergencies don't wait. If you don't answer first, the job goes to someone else.</p>
                </div>
                <div class="pain-point-card">
                    <div class="pain-point-icon">🌙</div>
                    <h3 class="pain-point-title">Spending Nights On Admin</h3>
                    <p class="pain-point-desc">After 10-hour days on the tools, you're stuck doing paperwork until 10pm. That's 3 hours every night — 90 hours a month.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ROI Calculator Section -->
    <section class="roi-calculator">
        <div class="container">
            <h2 class="section-title">Calculate Your Lost Revenue</h2>
            <div class="roi-container">
                <div class="roi-grid">
                    <div class="roi-inputs">
                        <div class="roi-input-group">
                            <label>Calls per week</label>
                            <input type="number" id="callsPerWeek" value="20" onchange="calculateROI()">
                        </div>
                        <div class="roi-input-group">
                            <label>Missed call rate (%)</label>
                            <input type="number" id="missedRate" value="40" onchange="calculateROI()">
                        </div>
                        <div class="roi-input-group">
                            <label>Average job value ($)</label>
                            <input type="number" id="avgJobValue" value="850" onchange="calculateROI()">
                        </div>
                        <div class="roi-input-group">
                            <label>Conversion rate (%)</label>
                            <input type="number" id="conversionRate" value="25" onchange="calculateROI()">
                        </div>
                    </div>
                    <div class="roi-results">
                        <div class="roi-result-title">Monthly Revenue Lost</div>
                        <div class="roi-result-value" id="revenueLost">$4,250</div>
                        <div class="roi-cost">
                            <span class="roi-cost-label">Sunaiva cost (Essentials)</span>
                            <span class="roi-cost-value">$197/mo</span>
                        </div>
                        <div class="roi-roi">
                            <div class="roi-roi-value" id="roiPercent">2,058%</div>
                            <div class="roi-roi-label">Return on Investment</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <h2 class="section-title">Built for Tradie Businesses</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📅</div>
                    <div class="feature-content">
                        <h3>Smart Job Booking</h3>
                        <p>AI collects address, job details, and preferred times, then books directly into your calendar.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💰</div>
                    <div class="feature-content">
                        <h3>Quote Follow-Up</h3>
                        <p>Automatically follows up on quotes after 3 days. Converts more quotes into paid jobs.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🧾</div>
                    <div class="feature-content">
                        <h3>Invoice Reminders</h3>
                        <p>AI sends friendly reminders for outstanding invoices. Get paid faster without the awkwardness.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⭐</div>
                    <div class="feature-content">
                        <h3>Review Collection</h3>
                        <p>After job completion, AI asks for reviews. Build your online reputation automatically.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <div class="feature-content">
                        <h3>Emergency Detection</h3>
                        <p>AI identifies urgent jobs and prioritises them. You'll never miss a money-making emergency.</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔧</div>
                    <div class="feature-content">
                        <h3>Trade-Specific Understanding</h3>
                        <p>Trained on tradie terminology. Understands service types, parts, and job requirements.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Demo Section -->
    <section class="demo">
        <div class="container">
            <h2 class="section-title">See It In Action</h2>
            <div class="demo-container">
                <div class="demo-phone">
                    <div class="demo-header">
                        <div class="demo-avatar">🤖</div>
                        <div class="demo-name">Sunaiva AI</div>
                        <div class="demo-status">● Online</div>
                    </div>
                    <div class="demo-transcript">
                        <div class="demo-message customer">
                            Hi, I've got a leaking tap that needs fixing
                            <div class="time">2:30 PM</div>
                        </div>
                        <div class="demo-message ai">
                            Hi! I'd be happy to help you with that leaking tap. Can I get your address so I can book you in?
                            <div class="time">2:30 PM</div>
                        </div>
                        <div class="demo-message customer">
                            It's 42 Miller Street, Everton Park
                            <div class="time">2:31 PM</div>
                        </div>
                        <div class="demo-message ai">
                            Great! And how urgent is this? Is it a steady leak or an emergency?
                            <div class="time">2:31 PM</div>
                        </div>
                        <div class="demo-message customer">
                            It's been getting worse over a few days, so fairly urgent
                            <div class="time">2:31 PM</div>
                        </div>
                        <div class="demo-message ai">
                            I understand. I can book you in for tomorrow morning at 9am or Thursday afternoon at 2pm. Which works better?
                            <div class="time">2:32 PM</div>
                        </div>
                        <div class="demo-message customer">
                            Tomorrow morning 9am works
                            <div class="time">2:32 PM</div>
                        </div>
                        <div class="demo-message ai">
                            Perfect! I've booked you in for 9am tomorrow at 42 Miller Street, Everton Park. You'll receive a confirmation SMS shortly. Is there anything else I can help with?
                            <div class="time">2:32 PM</div>
                        </div>
                    </div>
                </div>
                <div class="demo-info">
                    <h3>Natural Conversations, Professional Results</h3>
                    <p>Our AI speaks with a natural Australian accent and handles the entire booking process without any intervention from you.</p>
                    <div class="demo-features">
                        <div class="demo-feature">
                            <div class="demo-feature-check">✓</div>
                            <span>Collects full job details automatically</span>
                        </div>
                        <div class="demo-feature">
                            <div class="demo-feature-check">✓</div>
                            <span>Books directly into your calendar</span>
                        </div>
                        <div class="demo-feature">
                            <div class="demo-feature-check">✓</div>
                            <span>Sends SMS confirmations to customers</span>
                        </div>
                        <div class="demo-feature">
                            <div class="demo-feature-check">✓</div>
                            <span>Escalates emergencies to you immediately</span>
                        </div>
                        <div class="demo-feature">
                            <div class="demo-feature-check">✓</div>
                            <span>Works 24/7, even when you're sleeping</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing" id="pricing">
        <div class="container">
            <h2 class="section-title">Simple, Transparent Pricing</h2>
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-name">Essentials</div>
                    <div class="pricing-price">$197<span>/mo</span></div>
                    <div class="pricing-desc">Perfect for solo tradies</div>
                    <div class="pricing-features">
                        <div class="pricing-feature included"><span class="check">✓</span> AI voice agent</div>
                        <div class="pricing-feature included"><span class="check">✓</span> 250 calls/month</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Job booking</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Calendar integration</div>
                        <div class="pricing-feature included"><span class="check">✓</span> SMS notifications</div>
                        <div class="pricing-feature"><span class="x">×</span> Quote follow-up</div>
                        <div class="pricing-feature"><span class="x">×</span> Invoice reminders</div>
                        <div class="pricing-feature"><span class="x">×</span> Review collection</div>
                    </div>
                    <a href="#" class="pricing-cta">Start Free Trial</a>
                </div>
                <div class="pricing-card featured">
                    <div class="pricing-badge">Most Popular</div>
                    <div class="pricing-name">Business</div>
                    <div class="pricing-price">$397<span>/mo</span></div>
                    <div class="pricing-desc">For growing businesses</div>
                    <div class="pricing-features">
                        <div class="pricing-feature included"><span class="check">✓</span> Everything in Essentials</div>
                        <div class="pricing-feature included"><span class="check">✓</span> 750 calls/month</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Quote follow-up</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Invoice reminders</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Review collection</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Multi-calendar sync</div>
                        <div class="pricing-feature"><span class="x">×</span> Custom workflows</div>
                        <div class="pricing-feature"><span class="x">×</span> Priority support</div>
                    </div>
                    <a href="#" class="pricing-cta">Start Free Trial</a>
                </div>
                <div class="pricing-card">
                    <div class="pricing-name">Growth</div>
                    <div class="pricing-price">$597<span>/mo</span></div>
                    <div class="pricing-desc">For established businesses</div>
                    <div class="pricing-features">
                        <div class="pricing-feature included"><span class="check">✓</span> Everything in Business</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Unlimited calls</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Custom workflows</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Priority support</div>
                        <div class="pricing-feature included"><span class="check">✓</span> CRM integration</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Analytics dashboard</div>
                        <div class="pricing-feature included"><span class="check">✓</span> Multiple locations</div>
                        <div class="pricing-feature included"><span class="check">✓</span> White-label option</div>
                    </div>
                    <a href="#" class="pricing-cta">Start Free Trial</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial Section -->
    <section class="testimonial">
        <div class="container">
            <div class="testimonial-card">
                <div class="testimonial-quote">
                    Since getting Sunaiva, I've not missed a single call. The AI booked 12 jobs last month that I would have otherwise lost. That's an extra $8,400 in revenue. And I'm home by 6pm instead of doing admin until 9pm. It's literally paying for itself 20 times over.
                </div>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">MJ</div>
                    <div class="testimonial-info">
                        <div class="testimonial-name">Michael Johnson</div>
                        <div class="testimonial-role">Owner, MJ Plumbing & Gas</div>
                    </div>
                </div>
                <div class="testimonial-stats">
                    <div class="testimonial-stat">
                        <div class="testimonial-stat-value">+12</div>
                        <div class="testimonial-stat-label">Jobs/mo booked</div>
                    </div>
                    <div class="testimonial-stat">
                        <div class="testimonial-stat-value">$8.4K</div>
                        <div class="testimonial-stat-label">Extra revenue/mo</div>
                    </div>
                    <div class="testimonial-stat">
                        <div class="testimonial-stat-value">3hrs</div>
                        <div class="testimonial-stat-label">Saved daily</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq">
        <div class="container">
            <h2 class="section-title">Frequently Asked Questions</h2>
            <div class="faq-grid">
                <div class="faq-item" onclick="toggleFAQ(this)">
                    <div class="faq-question">Will it understand tradie-specific terminology?</div>
                    <div class="faq-answer">Yes! Our AI is trained on common trade terms and scenarios. It understands plumbing issues, electrical faults, HVAC problems, appliance installations, and more. It knows the difference between a gas leak and a water leak, and can appropriately escalate genuine emergencies.</div>
                </div>
                <div class="faq-item" onclick="toggleFAQ(this)">
                    <div class="faq-question">How does it integrate with my existing systems?</div>
                    <div class="faq-answer">Sunaiva integrates with Google Calendar, Outlook, and most job management software. It can also send job details via SMS or email to your existing system. Setup takes about 10 minutes — no coding required.</div>
                </div>
                <div class="faq-item" onclick="toggleFAQ(this)">
                    <div class="faq-question">What happens with genuine emergencies?</div>
                    <div class="faq-answer">The AI is programmed to detect emergency keywords (gas leak, no power, burst pipe, etc.). When detected, it immediately sends an alert to your phone so you can call the customer back within minutes. Emergencies are never left waiting.</div>
                </div>
                <div class="faq-item" onclick="toggleFAQ(this)">
                    <div class="faq-question">Is there a free trial?</div>
                    <div class="faq-answer">Yes! We offer a 14-day free trial with full access to all features. No credit card required to start. You can cancel anytime during the trial with no obligations.</div>
                </div>
                <div class="faq-item" onclick="toggleFAQ(this)">
                    <div class="faq-question">What if the AI can't handle a customer?</div>
                    <div class="faq-answer">The AI is designed to handle 95% of enquiries autonomously. For complex situations, it can take a detailed message and immediately notify you. You can also set up "warm transfers" where the AI patches through high-value or emergency calls in real-time.</div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
        <div class="container">
            <h2>Ready to Never Miss Another Call?</h2>
            <p>Join hundreds of tradies who are winning more jobs and spending less time on admin. Start your free 14-day trial today.</p>
            <a href="#pricing" class="cta-button">
                Start Your Free Trial
                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p class="footer-powered">Powered by <a href="https://sunaiva.com" target="_blank">Sunaiva</a> — AI Voice Agents for Australian Businesses</p>
        </div>
    </footer>

    <!-- Schema.org JSON-LD -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Service",
        "name": "Sunaiva AI Voice Agent for Tradie Businesses",
        "description": "AI voice agent that answers calls, books jobs, and handles enquiries 24/7 for tradie businesses in Australia.",
        "provider": {
            "@type": "Organization",
            "name": "Sunaiva",
            "url": "https://sunaiva.com"
        },
        "areaServed": {
            "@type": "Country",
            "name": "Australia"
        },
        "priceRange": "$$",
        "serviceType": "AI Voice Agent",
        "offers": {
            "@type": "Offer",
            "price": "197",
            "priceCurrency": "AUD",
            "availability": "https://schema.org/InStock"
        }
    }
    </script>

    <script>
        // ROI Calculator
        function calculateROI() {
            const callsPerWeek = parseInt(document.getElementById('callsPerWeek').value) || 0;
            const missedRate = parseInt(document.getElementById('missedRate').value) || 0;
            const avgJobValue = parseInt(document.getElementById('avgJobValue').value) || 0;
            const conversionRate = parseInt(document.getElementById('conversionRate').value) || 0;

            const missedCalls = callsPerWeek * (missedRate / 100) * 4;
            const jobsLost = missedCalls * (conversionRate / 100);
            const revenueLost = Math.round(jobsLost * avgJobValue);

            const cost = 197;
            const roi = Math.round(((revenueLost - cost) / cost) * 100);

            document.getElementById('revenueLost').textContent = '$' + revenueLost.toLocaleString();
            document.getElementById('roiPercent').textContent = roi.toLocaleString() + '%';

            const revenueEl = document.getElementById('revenueLost');
            if (revenueLost > cost) {
                revenueEl.classList.remove('positive');
            } else {
                revenueEl.classList.add('positive');
            }
        }

        // FAQ Toggle
        function toggleFAQ(element) {
            element.classList.toggle('active');
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Initial calculation
        calculateROI();
    </script>
</body>
</html>
```


Response:
```html
<!DOCTYPE html>
<html lang="en-AU">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Voice Agent for Tradie Businesses | Never Miss Another Call</title>
    <meta name="description" content="Your AI receptionist works 24/7 answering calls, booking jobs, and handling emergencies. Stop losing $3,000+ monthly to missed calls. Start free trial.">

    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg-primary: #0B0C0E;
            --bg-secondary: #151720;
            --bg-card: #1C1F2E;
            --text-primary: #E5E7EB;
            --text-secondary: #9CA3AF;
            --accent: #3B82F6;
            --accent-green: #10B981;
            --accent-orange: #F59E0B;
            --accent-red: #EF4444;
            --border: #2D3748;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(11, 12, 14, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            padding: 15px 0;
        }

        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .logo span {
            color: var(--accent);
        }

        .nav-links {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--accent);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
        }

        .btn-primary {
            background: var(--accent);
            color: white;
        }

        .btn-primary:hover {
            background: #2563EB;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--border);
            color: var(--text-primary);
        }

        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Hero Section */
        .hero {
            padding: 180px 0 100px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero-content {
            max-width: 800px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            color: var(--accent);
            margin-bottom: 24px;
        }

        .badge-dot {
            width: 8px;
            height: 8px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 24px;
        }

        .hero h1 .highlight {
            color: var(--accent);
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 40px;
            max-width: 600px;
        }

        .hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid var(--border);
        }

        .stat {
            text-align: left;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-green);
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* Pain Points */
        .pain-points {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 60px;
        }

        .section-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }

        .pain-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .pain-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.3s;
        }

        .pain-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent);
        }

        .pain-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .pain-icon.red { background: rgba(239, 68, 68, 0.15); }
        .pain-icon.orange { background: rgba(245, 158, 11, 0.15); }
        .pain-icon.blue { background: rgba(59, 130, 246, 0.15); }

        .pain-card h3 {
            font-size: 1.25rem;
            margin-bottom: 12px;
        }

        .pain-card p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        /* Emergency Banner */
        .emergency-banner {
            background: linear-gradient(135deg, #7C2D12 0%, #991B1B 100%);
            padding: 60px 0;
            text-align: center;
        }

        .emergency-banner h2 {
            font-size: 2rem;
            margin-bottom: 16px;
        }

        .emergency-banner p {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* ROI Calculator */
        .roi-section {
            padding: 100px 0;
        }

        .roi-calculator {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 48px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .roi-inputs h3 {
            font-size: 1.5rem;
            margin-bottom: 24px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .input-group .value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--accent);
        }

        .roi-results {
            background: var(--bg-secondary);
            border-radius: 16px;
            padding: 32px;
            text-align: center;
        }

        .roi-results h4 {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 24px;
        }

        .result-item {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border);
        }

        .result-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .result-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .result-value {
            font-size: 2rem;
            font-weight: 700;
            margin-top: 8px;
        }

        .result-value.red { color: var(--accent-red); }
        .result-value.green { color: var(--accent-green); }
        .result-value.blue { color: var(--accent); }

        .roi-highlight {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
        }

        .roi-highlight .value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-green);
        }

        /* Features */
        .features-section {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.3s;
        }

        .feature-card:hover {
            border-color: var(--accent);
        }

        .feature-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            background: var(--accent);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .feature-card h3 {
            font-size: 1.15rem;
        }

        .feature-card p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        /* Widget Demo */
        .demo-section {
            padding: 100px 0;
        }

        .demo-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
        }

        .demo-header {
            background: var(--bg-secondary);
            padding: 20px 32px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .demo-status {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            background: var(--accent-green);
            border-radius: 50%;
        }

        .demo-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .demo-visual {
            padding: 48px;
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1px solid var(--border);
        }

        .phone-mockup {
            width: 280px;
            background: var(--bg-card);
            border-radius: 32px;
            padding: 24px;
            border: 3px solid var(--border);
        }

        .phone-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .phone-avatar {
            width: 60px;
            height: 60px;
            background: var(--accent);
            border-radius: 50%;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .phone-name {
            font-weight: 600;
            font-size: 1rem;
        }

        .phone-status {
            font-size: 0.8rem;
            color: var(--accent-green);
        }

        .phone-waveform {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 40px;
        }

        .wave-bar {
            width: 4px;
            background: var(--accent);
            border-radius: 2px;
            animation: wave 1s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { height: 10px; }
            50% { height: 30px; }
        }

        .demo-transcript {
            padding: 32px;
            max-height: 500px;
            overflow-y: auto;
        }

        .demo-transcript h4 {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        .message {
            margin-bottom: 20px;
            padding: 16px;
            border-radius: 12px;
            max-width: 90%;
        }

        .message.customer {
            background: var(--bg-secondary);
            margin-right: auto;
        }

        .message.ai {
            background: rgba(59, 130, 246, 0.15);
            margin-left: auto;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .message-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .message-text {
            font-size: 0.95rem;
        }

        /* Pricing */
        .pricing-section {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .pricing-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 40px 32px;
            position: relative;
            transition: all 0.3s;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent);
        }

        .pricing-card.featured {
            border-color: var(--accent);
            box-shadow: 0 0 60px rgba(59, 130, 246, 0.15);
        }

        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .pricing-card h3 {
            font-size: 1.25rem;
            margin-bottom: 8px;
        }

        .pricing-card .price {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .pricing-card .price span {
            font-size: 1rem;
            color: var(--text-secondary);
            font-weight: 400;
        }