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-powered voice agent for tradies. Never miss a call, book more jobs, stop doing admin at night. Start your free trial today.">
    <link rel="canonical" href="https://aitradie.au/">

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

        * {
            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;
            overflow-x: hidden;
        }

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

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

        nav .container {
            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 24px;
            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;
            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-content {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .hero-badge {
            display: inline-block;
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: var(--accent);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.875rem;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease forwards;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease 0.1s forwards;
            opacity: 0;
        }

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

        .hero h1 .highlight::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--accent);
            opacity: 0.3;
            border-radius: 4px;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 40px;
            animation: fadeInUp 0.6s ease 0.2s forwards;
            opacity: 0;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 0.6s ease 0.3s forwards;
            opacity: 0;
        }

        .btn-primary {
            background: var(--accent);
            color: white;
            padding: 16px 32px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-3px);
            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            padding: 16px 32px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
        }

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

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-top: 60px;
            flex-wrap: wrap;
            animation: fadeInUp 0.6s ease 0.4s forwards;
            opacity: 0;
        }

        .stat {
            text-align: center;
        }

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

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

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

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .pain-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

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

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

        .pain-icon {
            width: 60px;
            height: 60px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }

        .pain-card h3 {
            font-size: 1.3rem;
            margin-bottom: 12px;
            color: var(--text-primary);
        }

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

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

        .roi-calculator {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 50px;
            max-width: 800px;
            margin: 0 auto;
        }

        .roi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .roi-item {
            text-align: center;
            padding: 20px;
            background: var(--bg-tertiary);
            border-radius: 12px;
        }

        .roi-item .label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .roi-item .value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .roi-item .value.lost {
            color: var(--red);
        }

        .roi-item .value.saved {
            color: var(--green);
        }

        .roi-divider {
            height: 1px;
            background: var(--border);
            margin: 30px 0;
        }

        .roi-result {
            text-align: center;
            padding: 30px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
        }

        .roi-result h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--green);
        }

        .roi-result .roi-percent {
            font-size: 3rem;
            font-weight: 800;
            color: var(--green);
        }

        .roi-result p {
            color: var(--text-secondary);
            margin-top: 10px;
        }

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

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

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

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

        .feature-icon {
            width: 50px;
            height: 50px;
            background: rgba(59, 130, 246, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.3rem;
        }

        .feature-card h3 {
            font-size: 1.2rem;
            margin-bottom: 12px;
        }

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

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

        .demo-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            max-width: 900px;
            margin: 0 auto;
        }

        .demo-header {
            background: var(--bg-tertiary);
            padding: 20px 30px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .demo-dot.red { background: var(--red); }
        .demo-dot.yellow { background: var(--orange); }
        .demo-dot.green { background: var(--green); }

        .demo-title {
            margin-left: auto;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .demo-content {
            padding: 40px;
        }

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

        .message {
            display: flex;
            gap: 15px;
            animation: fadeInUp 0.5s ease forwards;
        }

        .message:nth-child(1) { animation-delay: 0.1s; }
        .message:nth-child(2) { animation-delay: 0.8s; }
        .message:nth-child(3) { animation-delay: 1.5s; }
        .message:nth-child(4) { animation-delay: 2.2s; }
        .message:nth-child(5) { animation-delay: 2.9s; }
        .message:nth-child(6) { animation-delay: 3.6s; }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .message.customer .message-avatar {
            background: var(--accent);
            color: white;
        }

        .message.ai .message-avatar {
            background: var(--green);
            color: white;
        }

        .message-bubble {
            background: var(--bg-tertiary);
            padding: 15px 20px;
            border-radius: 15px;
            border-top-left-radius: 5px;
            max-width: 80%;
        }

        .message.ai .message-bubble {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-top-left-radius: 5px;
            border-top-right-radius: 15px;
        }

        .message.customer .message-bubble {
            border-top-right-radius: 5px;
        }

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

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

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

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

        .pricing-card.featured {
            border-color: var(--accent);
            transform: scale(1.05);
        }

        .pricing-card.featured::before {
            content: 'Most Popular';
            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:hover {
            transform: translateY(-5px);
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-5px);
        }

        .pricing-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

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

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

        .pricing-desc {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 30px;
        }

        .pricing-features li {
            padding: 10px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .pricing-features li::before {
            content: '✓';
            color: var(--green);
            font-weight: 700;
        }

        .pricing-cta {
            display: block;
            text-align: center;
            padding: 14px;
            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.featured .pricing-cta:hover {
            background: var(--accent-hover);
        }

        .pricing-card:not(.featured) .pricing-cta {
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
        }

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

        /* Testimonial Section */
        .testimonial-section {
            padding: 100px 0;
        }

        .testimonial-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 50px;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .testimonial-quote {
            font-size: 1.4rem;
            line-height: 1.8;
            margin-bottom: 30px;
            color: var(--text-primary);
        }

        .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: 15px;
        }

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

        .testimonial-info h4 {
            font-size: 1.1rem;
            margin-bottom: 4px;
        }

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

        /* FAQ Section */
        .faq-section {
            padding: 100px 0;
            background: var(--bg-secondary);
        }

        .faq-grid {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .faq-item {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }

        .faq-question {
            padding: 20px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            transition: all 0.3s ease;
        }

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

        .faq-icon {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }

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

        .faq-answer {
            padding: 0 25px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-item.active .faq-answer {
            padding: 0 25px 20px;
            max-height: 200px;
        }

        .faq-answer p {
            color: var(--text-secondary);
            line-height: 1.7;
        }

        /* CTA Section */
        .cta-section {
            padding: 100px 0;
        }

        .cta-box {
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
            border: 1px solid var(--accent);
            border-radius: 24px;
            padding: 60px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .cta-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
            animation: pulse 4s ease-in-out infinite;
        }

        .cta-box h2 {
            font-size: 2.5rem;
            margin-bottom: 16px;
            position: relative;
        }

        .cta-box p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin-bottom: 30px;
            position: relative;
        }

        .cta-box .btn-primary {
            position: relative;
            padding: 18px 48px;
            font-size: 1.2rem;
        }

        /* Footer */
        footer {
            padding: 40px 0;
            border-top: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        footer .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-brand {
            font-size: 1.2rem;
            font-weight: 700;
        }

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

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

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

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

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

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .hero {
                padding: 120px 0 60px;
            }

            .hero-stats {
                gap: 30px;
            }

            .stat-value {
                font-size: 2rem;
            }

            .roi-calculator {
                padding: 30px 20px;
            }

            .pricing-card.featured {
                transform: none;
            }

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

            .cta-box {
                padding: 40px 20px;
            }

            .cta-box h2 {
                font-size: 1.8rem;
            }

            .demo-content {
                padding: 20px;
            }

            .message-bubble {
                max-width: 90%;
                padding: 12px 15px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav>
        <div class="container">
            <a href="#" class="logo">AI<span>Tradie</span></a>
            <a href="#pricing" class="nav-cta">Start Free Trial</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">🚀 AI-Powered Tradie Solutions</div>
                <h1>You're On a Job And Your Phone Won't Stop Ringing.<br><span class="highlight">Every Missed Call Is Money Walking Out The Door.</span></h1>
                <p class="hero-subtitle">Let AI answer every call, book every job, and handle every enquiry — even when you're elbow-deep in a job. Never miss another emergency call again.</p>
                <div class="hero-buttons">
                    <a href="#pricing" class="btn-primary">Start Your Free Trial</a>
                    <a href="#demo" class="btn-secondary">See It In Action</a>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <div class="stat-value">62%</div>
                        <div class="stat-label">Of Calls Missed by Tradies</div>
                    </div>
                    <div class="stat">
                        <div class="stat-value">$2,400+</div>
                        <div class="stat-label">Lost Per Month (Average)</div>
                    </div>
                    <div class="stat">
                        <div class="stat-value">24/7</div>
                        <div class="stat-label">AI Always Answers</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pain Points Section -->
    <section class="pain-points">
        <div class="container">
            <div class="section-header">
                <h2>Why Tradies Lose Thousands Every Month</h2>
                <p>These are the calls that cost you real money. Every tradie knows this pain.</p>
            </div>
            <div class="pain-grid">
                <div class="pain-card">
                    <div class="pain-icon">📞</div>
                    <h3>Missing Calls While On The Tools</h3>
                    <p>You're on a paid job and your phone rings constantly. You can't answer. By the time you call back, they've already booked someone else. Every hour you're on a job is an hour you're losing leads.</p>
                </div>
                <div class="pain-card">
                    <div class="pain-icon">🚨</div>
                    <h3>Losing Emergency Jobs To Competitors</h3>
                    <p>A burst pipe, a power outage, a broken gate. Emergency calls are your most profitable jobs — and they go straight to whoever answers first. Miss the call, lose the $500+ job to the competitor down the road.</p>
                </div>
                <div class="pain-card">
                    <div class="pain-icon">📋</div>
                    <h3>Spending Evenings Doing Admin Instead Of Family</h3>
                    <p>After 10-hour days on the tools, you're stuck entering quotes, scheduling jobs, and returning missed calls. Your nights and weekends belong to spreadsheets, not your family. There's got to be a better way.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ROI Calculator Section -->
    <section class="roi-section">
        <div class="container">
            <div class="section-header">
                <h2>The Real Cost Of Missing Calls</h2>
                <p>Here's exactly how much money you're leaving on the table every month.</p>
            </div>
            <div class="roi-calculator">
                <div class="roi-grid">
                    <div class="roi-item">
                        <div class="label">Weekly Calls Received</div>
                        <div class="value">20</div>
                    </div>
                    <div class="roi-item">
                        <div class="label">Calls Missed (40%)</div>
                        <div class="value lost">8</div>
                    </div>
                    <div class="roi-item">
                        <div class="label">Avg Job Value</div>
                        <div class="value">$850</div>
                    </div>
                    <div class="roi-item">
                        <div class="label">Conversion Rate</div>
                        <div class="value">25%</div>
                    </div>
                </div>
                <div class="roi-divider"></div>
                <div class="roi-item">
                    <div class="label">Monthly Revenue Lost</div>
                    <div class="value lost">$1,700</div>
                </div>
                <div class="roi-divider"></div>
                <div class="roi-result">
                    <h3>With Sunaiva AI Voice Agent</h3>
                    <div class="roi-percent">762%</div>
                    <p>Return on Investment • Pay $197/mo • Save $1,700+ every month</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
        <div class="container">
            <div class="section-header">
                <h2>Built For Smart Tradie Businesses</h2>
                <p>Our AI understands tradie work and handles enquiries the way you would.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📝</div>
                    <h3>Smart Quote Enquiries</h3>
                    <p>AI understands questions about AI-enhanced quoting, provides estimates based on your pricing matrix, and schedules site visits for complex jobs.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📅</div>
                    <h3>Intelligent Scheduling</h3>
                    <p>Customers can book directly into your calendar. The AI checks your availability, avoids conflicts, and confirms appointments instantly.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔧</div>
                    <h3>Predictive Maintenance</h3>
                    <p>AI reminds customers about scheduled maintenance, tracks service history, and automatically books follow-up appointments for recurring work.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💬</div>
                    <h3>Automated Customer Comms</h3>
                    <p>Job updates, appointment reminders, quote follow-ups — all handled automatically. Customers stay informed, you stay focused on the job.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📍</div>
                    <h3>Job Detail Collection</h3>
                    <p>AI collects address, urgency level, access information, photos, and specific requirements before you even see the job.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Emergency Priority</h3>
                    <p>Urgent jobs get flagged and routed to you immediately. Never miss a high-value emergency call again.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Widget Demo Section -->
    <section class="demo-section" id="demo">
        <div class="container">
            <div class="section-header">
                <h2>See Your New AI Receptionist In Action</h2>
                <p>Watch how naturally the AI handles a tradie enquiry about quoting.</p>
            </div>
            <div class="demo-container">
                <div class="demo-header">
                    <div class="demo-dot red"></div>
                    <div class="demo-dot yellow"></div>
                    <div class="demo-dot green"></div>
                    <span class="demo-title">aitradie.au/call</span>
                </div>
                <div class="demo-content">
                    <div class="transcript">
                        <div class="message customer">
                            <div class="message-avatar">C</div>
                            <div class="message-bubble">
                                <div class="message-label">Customer</div>
                                Hi, I'm looking for a tradie to do some work on my place. I've got a kitchen reno that needs doing.
                            </div>
                        </div>
                        <div class="message ai">
                            <div class="message-avatar">AI</div>
                            <div class="message-bubble">
                                <div class="message-label">Sunaiva AI</div>
                                Hi there! I'd love to help you with your kitchen renovation. Just so I can get you the right information, can I ask what type of work you're looking for? Are we talking plumbing, electrical, cabinetry, or a bit of everything?
                            </div>
                        </div>
                        <div class="message customer">
                            <div class="message-avatar">C</div>
                            <div class="message-bubble">
                                <div class="message-label">Customer</div>
                                Yeah, mostly plumbing and some electrical for new appliances. When can someone come out and have a look?
                            </div>
                        </div>
                        <div class="message ai">
                            <div class="message-avatar">AI</div>
                            <div class="message-bubble">
                                <div class="message-label">Sunaiva AI</div>
                                Perfect. I can book you in for a site visit so we can assess the work and provide an accurate quote. What address is the work at? And do you have any flexibility with timing — would weekday or weekend work better for you?
                            </div>
                        </div>
                        <div class="message customer">
                            <div class="message-avatar">C</div>
                            <div class="message-bubble">
                                <div class="message-label">Customer</div>
                                It's 42 Miller Street in West End. I'm free most Saturdays if that helps.
                            </div>
                        </div>
                        <div class="message ai">
                            <div class="message-avatar">AI</div>
                            <div class="message-bubble">
                                <div class="message-label">Sunaiva AI</div>
                                Great, I've got that down. I can book you in for Saturday the 15th at 10am for a site visit. Does that work for you? I'll send you a confirmation with all the details.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing-section" id="pricing">
        <div class="container">
            <div class="section-header">
                <h2>Simple, Transparent Pricing</h2>
                <p>No hidden fees. No lock-in contracts. Cancel anytime.</p>
            </div>
            <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 just starting out</div>
                    <ul class="pricing-features">
                        <li>Unlimited AI calls</li>
                        <li>Australian accent voice</li>
                        <li>Calendar booking</li>
                        <li>Job detail collection</li>
                        <li>SMS & email notifications</li>
                        <li>Basic FAQ training</li>
                    </ul>
                    <a href="#" class="pricing-cta">Start Free Trial</a>
                </div>
                <div class="pricing-card featured">
                    <div class="pricing-name">Business</div>
                    <div class="pricing-price">$397<span>/mo</span></div>
                    <div class="pricing-desc">For established tradies wanting more automation</div>
                    <ul class="pricing-features">
                        <li>Everything in Essentials</li>
                        <li>Multi-line support</li>
                        <li>Priority emergency routing</li>
                        <li>Custom voice phrases</li>
                        <li>CRM integration</li>
                        <li>Advanced analytics</li>
                        <li>Lead scoring</li>
                    </ul>
                    <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 tradie businesses with multiple teams</div>
                    <ul class="pricing-features">
                        <li>Everything in Business</li>
                        <li>5 team members</li>
                        <li>Multi-location support</li>
                        <li>Custom AI training</li>
                        <li>API access</li>
                        <li>Dedicated account manager</li>
                        <li>White-label options</li>
                    </ul>
                    <a href="#" class="pricing-cta">Start Free Trial</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial Section -->
    <section class="testimonial-section">
        <div class="container">
            <div class="testimonial-card">
                <p class="testimonial-quote">I was losing about $2,000 a month in missed calls — jobs going to my competitors because I couldn't answer the phone while on a job. Since getting Sunaiva, I've caught every single lead. The AI booked 12 jobs in the first month alone. It's like having a receptionist who never sleeps.</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">MJ</div>
                    <div class="testimonial-info">
                        <h4>Matt Jackson</h4>
                        <p>Owner, Jackson Plumbing & Gas • Brisbane</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq-section">
        <div class="container">
            <div class="section-header">
                <h2>Frequently Asked Questions</h2>
                <p>Everything tradies need to know about AI voice agents.</p>
            </div>
            <div class="faq-grid">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Will it understand Australian accents?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Absolutely. Our AI is trained specifically on Australian English and understands regional accents, slang, and the way Australian customers speak. It sounds natural and conversational, not robotic.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What happens if it's a real emergency?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>The AI identifies emergency situations based on keywords and urgency indicators. It immediately flags these calls, sends you an instant notification with all the details, and can optionally connect the call directly to your phone.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Can it handle complex job enquiries?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Yes. The AI can discuss your services, provide rough estimates based on your pricing, collect detailed job requirements, and determine if a site visit is needed. For complex jobs, it schedules consultations rather than trying to quote on the spot.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>How long does setup take?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Most tradies are up and running in under 10 minutes. We provide a simple setup wizard that walks you through connecting your calendar, customising your greetings, and training the AI on your specific services and FAQs.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What if I need to cancel or pause?</span>
                        <span class="faq-icon">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>No lock-in contracts. You can pause or cancel your subscription at any time from your dashboard. There are no termination fees. You only pay for the months you use the service.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-box">
                <h2>Ready To Stop Missing Calls?</h2>
                <p>Join hundreds of Australian tradies who never miss a lead. Start your 14-day free trial today.</p>
                <a href="#" class="btn-primary">Start Your Free Trial</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-brand">AI<span>Tradie</span></div>
            <div class="footer-powered">Powered by <a href="https://sunaiva.com.au" target="_blank">Sunaiva</a></div>
        </div>
    </footer>

    <script>
        // FAQ Accordion
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                const item = question.parentElement;
                const isActive = item.classList.contains('active');

                // Close all items
                document.querySelectorAll('.faq-item').forEach(faq => {
                    faq.classList.remove('active');
                });

                // Open clicked item if it wasn't active
                if (!isActive) {
                    item.classList.add('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'
                    });
                }
            });
        });

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.pain-card, .feature-card, .pricing-card').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease';
            observer.observe(el);
        });
    </script>

    <!-- Schema.org JSON-LD -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Service",
        "name": "AI Voice Agent for Tradie Businesses",
        "description": "AI-powered 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.au"
        },
        "areaServed": {
            "@type": "Country",
            "name": "Australia"
        },
        "priceRange": "$$",
        "offers": {
            "@type": "AggregateOffer",
            "lowPrice": "197",
            "highPrice": "597",
            "priceCurrency": "AUD",
            "offerCount": "3"
        },
        "serviceType": ["AI Voice Agent", "Business Phone Service", "Appointment Scheduling"],
        "category": "Business Services"
    }
    </script>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "name": "AI Tradie",
        "description": "AI-powered voice agent services for Australian tradie businesses",
        "url": "https://aitradie.au",
        "areaServed": {
            "@type": "Country",
            "name": "Australia"
        },
        "priceRange": "$$"
    }
    </script>
</body>
</html>
```


Response:
<!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 24/7, books jobs directly into your calendar, and turns missed calls into revenue. Start free trial.">

    <style>
        :root {
            --bg-primary: #0B0C0E;
            --bg-secondary: #15171A;
            --bg-card: #1C1F24;
            --text-primary: #E5E7EB;
            --text-secondary: #9CA3AF;
            --accent-blue: #3B82F6;
            --accent-green: #10B981;
            --accent-orange: #F59E0B;
            --accent-red: #EF4444;
            --gradient-blue: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
            --gradient-green: linear-gradient(135deg, #10B981 0%, #059669 100%);
        }

        * {
            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;
            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 rgba(59, 130, 246, 0.1);
            padding: 15px 0;
        }

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

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

        .logo-icon {
            width: 32px;
            height: 32px;
            background: var(--gradient-blue);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cta-button {
            background: var(--gradient-blue);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
        }

        .cta-button.secondary {
            background: transparent;
            border: 2px solid var(--accent-blue);
        }

        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            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: 700px;
        }

        .hero-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.875rem;
            color: var(--accent-blue);
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease forwards;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease 0.1s forwards;
            opacity: 0;
        }

        .hero h1 span {
            background: var(--gradient-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 40px;
            animation: fadeInUp 0.6s ease 0.2s forwards;
            opacity: 0;
        }

        .hero-cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            animation: fadeInUp 0.6s ease 0.3s forwards;
            opacity: 0;
        }

        .hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeInUp 0.6s ease 0.4s forwards;
            opacity: 0;
        }

        .stat {
            text-align: left;
        }

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

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

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

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .section-header p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        .pain-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

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

        .pain-card:hover {
            transform: translateY(-5px);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .pain-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            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);
        }

        /* ROI Calculator */
        .roi-section {
            padding: 100px 0;
            background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }

        .roi-calculator {
            background: var(--bg-card);
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 24px;
            padding: 48px;
            max-width: 900px;
            margin: 0 auto;
        }

        .roi-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .roi-title h3 {
            font-size: 1.5rem;
            margin-bottom: 8px;
        }

        .roi-title p {
            color: var(--text-secondary);
        }

        .roi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .roi-item {
            text-align: center;
            padding: 24px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
        }

        .roi-item .label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .roi-item .value {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .roi-item .value.highlight-green { color: var(--accent-green); }
        .roi-item .value.highlight-red { color: var(--accent-red); }
        .roi-item .value.highlight-blue { color: var(--accent-blue); }

        .roi-calculation {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
        }

        .roi-calculation h4 {
            font-size: 1.125rem;
            margin-bottom: 16px;
        }

        .roi-result {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .roi-result-item {
            text-align: center;
        }

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

        .roi-result-item .value {
            font-size: 2.5rem;
            font-weight: 800;
        }

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

        .roi-note {
            margin-top: 20px;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

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

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

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

        .feature-card:hover {
            border-color: rgba(59, 130, 246, 0.3);
        }

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

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

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

        .feature-card p {
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

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

        .feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            font-size: 0.9375rem;
            color: var(--text-secondary);
        }

        .feature-list li::before {
            content: '✓';
            color: var(--accent-green);
            font-weight: 700;
            flex-shrink: 0;
        }

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

        .demo-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .demo-widget {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
        }

        .demo-header-bar {
            background: rgba(255, 255, 255, 0.05);
            padding: 16px 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .demo-dot.red { background: #EF4444; }
        .demo-dot.yellow { background: #F59E0B; }
        .demo-dot.green { background: #10B981; }

        .demo-title {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-left: 12px;
        }

        .demo-content {
            padding: 32px;
        }

        .demo-status {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            padding: 12px 16px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 8px;
            font-size: 0.875rem;
            color: var(--accent-green);
        }

        .demo-status::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .chat-message {
            max-width: 85%;
            padding: 16px 20px;
            border-radius: 16px;
            font-size: 0.9375rem;
            line-height: 1.5;
        }

        .chat-message.ai {
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.2);
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }

        .chat-message.customer {
            background: rgba(255, 255, 255, 0.08);
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }

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

        .demo-cta {
            text-align: center;
            margin-top: 32px;
        }

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

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

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

        .pricing-card:hover {
            transform: translateY(-5px);
            border-color: rgba(59, 130, 246, 0.3);
        }


Response:
```html
<!DOCTYPE html>
<html lang="en-AU">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="AI Voice Agent for Tradie Businesses - Never miss a call, book jobs 24/7, cost less than a receptionist. Start your free trial today.">
    <title>AI Voice Agent for Tradie Businesses | aitradie.au</title>

    <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-tertiary: #1C1F2E;
            --text-primary: #E5E7EB;
            --text-secondary: #9CA3AF;
            --accent-blue: #3B82F6;
            --accent-blue-hover: #2563EB;
            --accent-green: #10B981;
            --accent-orange: #F59E0B;
            --accent-red: #EF4444;
            --border-color: #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-color);
            padding: 15px 0;
        }

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

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

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

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

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

        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            text-align: center;
            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-badge {
            display: inline-block;
            background: var(--bg-tertiary);
            border: 1px solid var(--accent-blue);
            color: var(--accent-blue);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease-out;
        }

        .hero h1 {
            font-size: clamp(32px, 5vw, 56px);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 24px;
            animation: fadeInUp 0.6s ease-out 0.1s both;
        }

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

        .hero p {
            font-size: clamp(16px, 2vw, 20px);
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 40px;
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        .hero-cta-group {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 0.6s ease-out 0.3s both;
        }

        .btn {
            display: inline-block;
            padding: 16px 32px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }

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

        .btn-primary:hover {
            background: var(--accent-blue-hover);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: var(--bg-secondary);
            border-color: var(--accent-blue);
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 48px;
            margin-top: 60px;
            flex-wrap: wrap;
            animation: fadeInUp 0.6s ease-out 0.4s both;
        }

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

        .stat-number {
            font-size: 36px;
            font-weight: 700;
            color: var(--accent-green);
        }

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

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

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .section-header p {
            font-size: 18px;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        .pain-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

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

        .pain-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-red);
            box-shadow: 0 20px 40px rgba(239, 68, 68, 0.1);
        }

        .pain-icon {
            width: 60px;
            height: 60px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .pain-card h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
        }

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

        .pain-stat {
            display: inline-block;
            background: rgba(239, 68, 68, 0.1);
            color: var(--accent-red);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 16px;
        }

        /* Before/After Section */
        .comparison {
            padding: 100px 0;
        }

        .comparison-table {
            display: grid;
            grid-template-columns: 1fr 80px 1fr;
            gap: 0;
            align-items: center;
            margin-top: 40px;
        }

        @media (max-width: 768px) {
            .comparison-table {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        .comparison-col {
            padding: 40px;
            border-radius: 16px;
        }

        .comparison-col.before {
            background: var(--bg-secondary);
            border: 1px solid var(--accent-red);
        }

        .comparison-col.after {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
            border: 1px solid var(--accent-green);
        }

        .comparison-col h3 {
            font-size: 24px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .comparison-col.before h3 {
            color: var(--accent-red);
        }

        .comparison-col.after h3 {
            color: var(--accent-green);
        }

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

        .comparison-list li {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-secondary);
        }

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

        .comparison-list .icon {
            font-size: 20px;
        }

        .comparison-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: var(--accent-blue);
        }

        @media (max-width: 768px) {
            .comparison-arrow {
                transform: rotate(90deg);
            }
        }

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

        .roi-box {
            background: var(--bg-primary);
            border: 1px solid var(--accent-blue);
            border-radius: 24px;
            padding: 48px;
            max-width: 900px;
            margin: 0 auto;
        }

        .roi-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .roi-title h3 {
            font-size: 24px;
            color: var(--accent-blue);
            margin-bottom: 8px;
        }

        .roi-calc {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .roi-item {
            background: var(--bg-secondary);
            padding: 24px;
            border-radius: 12px;
            text-align: center;
        }

        .roi-item .label {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .roi-item .value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .roi-item.lost .value {
            color: var(--accent-red);
        }

        .roi-item.saved .value {
            color: var(--accent-green);
        }

        .roi-item.cost .value {
            color: var(--accent-blue);
        }

        .roi-result {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
            border-radius: 12px;
            padding: 32px;
            text-align: center;
        }

        .roi-result .label {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .roi-result .value {
            font-size: 48px;
            font-weight: 700;
            color: var(--accent-green);
        }

        .roi-note {
            text-align: center;
            margin-top: 24px;
            font-size: 14px;
            color: var(--text-secondary);
        }

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

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

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

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

        .feature-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
        }

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

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

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

        @media (max-width: 900px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }

        .demo-widget {
            background: var(--bg-primary);
            border: 1px solid var(--accent-blue);
            border-radius: 24px;
            padding: 32px;
            position: relative;
            overflow: hidden;
        }

        .demo-widget::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
        }

        .widget-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .widget-avatar {
            width: 48px;
            height: 48px;
            background: var(--accent-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .widget-info h4 {
            font-size: 16px;
            font-weight: 600;
        }

        .widget-info span {
            font-size: 13px;
            color: var(--accent-green);
        }

        .widget-status {
            margin-left: auto;
            background: rgba(16, 185, 129, 0.1);
            color: var(--accent-green);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .chat-messages {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .message {
            max-width: 85%;
            padding: 14px 18px;
            border-radius: 16px;
            font-size: 15px;
            line-height: 1.5;
            animation: fadeInUp 0.4s ease-out;
        }

        .message.customer {
            background: var(--bg-secondary);
            border-bottom-left-radius: 4px;
            align-self: flex-start;
        }

        .message.ai {
            background: var(--accent-blue);
            color: white;
            border-bottom-right-radius: 4px;


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="The AI receptionist that answers your phone 24/7. Text and voice chat for trade enquiries, instant quotes, booking confirmation. Start free trial.">

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

        * {
            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;
        }

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

        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

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

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

        .cta-button {
            background: var(--accent);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

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

        .cta-button.green {
            background: var(--green);
        }

        .cta-button.green:hover {
            background: var(--green-light);
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
        }

        /* Hero */
        .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: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 70% 70%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(-20px, -20px); }
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

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

        .hero h1 .highlight {
            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-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-top: 60px;
        }

        .stat {
            text-align: center;
        }

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

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

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

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

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

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

        .pain-card {
            background: var(--bg-tertiary);
            padding: 40px 30px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .pain-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--orange);
        }

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

        .pain-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .pain-card h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

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

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

        .roi-calculator {
            background: var(--bg-secondary);
            border-radius: 24px;
            padding: 60px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            max-width: 900px;
            margin: 0 auto;
        }

        .roi-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .roi-header h2 {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .roi-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .roi-item {
            background: var(--bg-tertiary);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
        }

        .roi-item .value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 5px;
        }

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

        .roi-result {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
            border-radius: 16px;
            padding: 40px;
            text-align: center;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

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

        .roi-result .amount {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--green);
            margin-bottom: 5px;
        }

        .roi-result .per {
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        .roi-result .comparison {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .comparison-item {
            text-align: center;
        }

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

        .comparison-item .val.red {
            color: #EF4444;
        }

        .comparison-item .val.green {
            color: var(--green);
        }

        .comparison-item .lbl {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

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

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

        .feature-card {
            background: var(--bg-tertiary);
            padding: 35px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

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

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

        .feature-card h3 {
            font-size: 1.2rem;
            margin-bottom: 12px;
        }

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

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

        .demo-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-window {
            background: var(--bg-secondary);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .demo-header {
            background: var(--bg-tertiary);
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .demo-dot.red { background: #EF4444; }
        .demo-dot.yellow { background: #F59E0B; }
        .demo-dot.green { background: #10B981; }

        .demo-title {
            margin-left: 15px;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .demo-body {
            padding: 30px;
            min-height: 400px;
        }

        .chat-message {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            animation: fadeInUp 0.5s ease forwards;
            opacity: 0;
        }

        .chat-message:nth-child(1) { animation-delay: 0.2s; }
        .chat-message:nth-child(2) { animation-delay: 1s; }
        .chat-message:nth-child(3) { animation-delay: 2s; }
        .chat-message:nth-child(4) { animation-delay: 3s; }
        .chat-message:nth-child(5) { animation-delay: 4s; }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .chat-avatar.ai {
            background: var(--accent);
        }

        .chat-avatar.user {
            background: var(--green);
        }

        .chat-content {
            flex: 1;
        }

        .chat-bubble {
            background: var(--bg-tertiary);
            padding: 15px 20px;
            border-radius: 18px;
            border-top-left-radius: 4px;
            font-size: 0.95rem;
        }

        .chat-message.user .chat-bubble {
            background: var(--bg-tertiary);
            border-top-left-radius: 18px;
            border-top-right-radius: 4px;
        }

        .chat-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 5px;
            margin-left: 5px;
        }

        .demo-note {
            text-align: center;
            margin-top: 30px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

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

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

        .pricing-card {
            background: var(--bg-tertiary);
            border-radius: 20px;
            padding: 40px 30px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }

        .pricing-card.featured {
            border-color: var(--accent);
            transform: scale(1.05);
        }

        .pricing-card.featured::before {
            content: 'Most Popular';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            padding: 5