     1→<!DOCTYPE html>
     2→<html lang="en">
     3→
     4→<head>
     5→    <meta charset="UTF-8">
     6→    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7→    <title>Talking Website Widget - Turn Your Website Into A Voice AI Assistant | Sunaiva</title>
     8→    <meta name="description"
     9→        content="Add a 24/7 voice AI assistant to your website in 5 minutes. Answer questions, capture leads, close sales - all through natural conversation. Early adopter special: $297/mo (save $700).">
    10→    <!-- Telnyx Raw WebRTC SDK v2.25.18 (Proven Zero-Touch Path) -->
    11→    <script src="https://unpkg.com/@telnyx/webrtc@2.25.18/lib/bundle.min.js"></script>
    12→    <!-- Lucide Icons -->
    13→    <script src="https://unpkg.com/lucide@latest"></script>
    14→    <style>
    15→        * {
    16→            margin: 0;
    17→            padding: 0;
    18→            box-sizing: border-box;
    19→        }
    20→
    21→        :root {
    22→            --cosmic-void: #0B0C0E;
    23→            --signal-blue: #3B82F6;
    24→            --electric-cyan: #06B6D4;
    25→            --void-gray: #1E1F23;
    26→            --slate-text: #94A3B8;
    27→            --white: #FFFFFF;
    28→            --success-green: #10B981;
    29→            --warning-amber: #F59E0B;
    30→        }
    31→
    32→        body {
    33→            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    34→            background: var(--cosmic-void);
    35→            color: var(--white);
    36→            line-height: 1.6;
    37→            overflow-x: hidden;
    38→        }
    39→
    40→        /* Container */
    41→        .container {
    42→            max-width: 1200px;
    43→            margin: 0 auto;
    44→            padding: 0 24px;
    45→        }
    46→
    47→        /* Header */
    48→        header {
    49→            padding: 24px 0;
    50→            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    51→            background: rgba(11, 12, 14, 0.95);
    52→            backdrop-filter: blur(10px);
    53→            position: sticky;
    54→            top: 0;
    55→            z-index: 1000;
    56→        }
    57→
    58→        .header-content {
    59→            display: flex;
    60→            justify-content: space-between;
    61→            align-items: center;
    62→        }
    63→
    64→        .logo {
    65→            font-size: 24px;
    66→            font-weight: 700;
    67→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
    68→            -webkit-background-clip: text;
    69→            -webkit-text-fill-color: transparent;
    70→            background-clip: text;
    71→        }
    72→
    73→        .cta-header {
    74→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
    75→            color: var(--white);
    76→            padding: 12px 28px;
    77→            border-radius: 8px;
    78→            border: none;
    79→            font-weight: 600;
    80→            font-size: 16px;
    81→            cursor: pointer;
    82→            transition: transform 0.2s, box-shadow 0.2s;
    83→            text-decoration: none;
    84→            display: inline-block;
    85→        }
    86→
    87→        .cta-header:hover {
    88→            transform: translateY(-2px);
    89→            box-shadow: 0 12px 28px rgba(59, 130, 246, 0.4);
    90→        }
    91→
    92→        /* Hero Section */
    93→        .hero {
    94→            padding: 120px 0 80px;
    95→            text-align: center;
    96→            position: relative;
    97→            overflow: hidden;
    98→        }
    99→
   100→        .hero::before {
   101→            content: '';
   102→            position: absolute;
   103→            top: 0;
   104→            left: 50%;
   105→            transform: translateX(-50%);
   106→            width: 800px;
   107→            height: 800px;
   108→            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
   109→            pointer-events: none;
   110→        }
   111→
   112→        .hero-content {
   113→            position: relative;
   114→            z-index: 1;
   115→        }
   116→
   117→        .hero h1 {
   118→            font-size: 64px;
   119→            font-weight: 800;
   120→            margin-bottom: 24px;
   121→            line-height: 1.1;
   122→            background: linear-gradient(135deg, var(--white) 0%, var(--electric-cyan) 100%);
   123→            -webkit-background-clip: text;
   124→            -webkit-text-fill-color: transparent;
   125→            background-clip: text;
   126→        }
   127→
   128→        .hero-subtext {
   129→            font-size: 24px;
   130→            color: var(--slate-text);
   131→            margin-bottom: 48px;
   132→            max-width: 700px;
   133→            margin-left: auto;
   134→            margin-right: auto;
   135→        }
   136→
   137→        .hero-stats {
   138→            display: flex;
   139→            justify-content: center;
   140→            gap: 48px;
   141→            margin-top: 64px;
   142→            flex-wrap: wrap;
   143→        }
   144→
   145→        .stat {
   146→            text-align: center;
   147→        }
   148→
   149→        .stat-number {
   150→            font-size: 48px;
   151→            font-weight: 700;
   152→            color: var(--signal-blue);
   153→            display: block;
   154→        }
   155→
   156→        .stat-label {
   157→            color: var(--slate-text);
   158→            font-size: 14px;
   159→            text-transform: uppercase;
   160→            letter-spacing: 1px;
   161→        }
   162→
   163→        /* Value Stack Section */
   164→        .value-stack {
   165→            padding: 80px 0;
   166→            background: linear-gradient(180deg, var(--cosmic-void) 0%, var(--void-gray) 100%);
   167→        }
   168→
   169→        .section-title {
   170→            text-align: center;
   171→            font-size: 48px;
   172→            font-weight: 700;
   173→            margin-bottom: 64px;
   174→            color: var(--white);
   175→        }
   176→
   177→        .value-grid {
   178→            display: grid;
   179→            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   180→            gap: 32px;
   181→        }
   182→
   183→        .value-card {
   184→            background: rgba(30, 31, 35, 0.6);
   185→            border: 1px solid rgba(255, 255, 255, 0.1);
   186→            border-radius: 16px;
   187→            padding: 40px;
   188→            text-align: center;
   189→            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
   190→        }
   191→
   192→        .value-card:hover {
   193→            transform: translateY(-8px);
   194→            border-color: var(--signal-blue);
   195→            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
   196→        }
   197→
   198→        .value-icon {
   199→            width: 80px;
   200→            height: 80px;
   201→            margin: 0 auto 24px;
   202→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   203→            border-radius: 16px;
   204→            display: flex;
   205→            align-items: center;
   206→            justify-content: center;
   207→            font-size: 40px;
   208→        }
   209→
   210→        .value-card h3 {
   211→            font-size: 28px;
   212→            margin-bottom: 16px;
   213→            color: var(--white);
   214→        }
   215→
   216→        .value-card p {
   217→            color: var(--slate-text);
   218→            font-size: 16px;
   219→            line-height: 1.8;
   220→        }
   221→
   222→        /* How It Works */
   223→        .how-it-works {
   224→            padding: 80px 0;
   225→            background: var(--cosmic-void);
   226→        }
   227→
   228→        .steps {
   229→            display: grid;
   230→            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   231→            gap: 48px;
   232→            margin-top: 64px;
   233→        }
   234→
   235→        .step {
   236→            text-align: center;
   237→            position: relative;
   238→        }
   239→
   240→        .step-number {
   241→            width: 60px;
   242→            height: 60px;
   243→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   244→            border-radius: 50%;
   245→            display: flex;
   246→            align-items: center;
   247→            justify-content: center;
   248→            font-size: 28px;
   249→            font-weight: 700;
   250→            margin: 0 auto 24px;
   251→        }
   252→
   253→        .step h3 {
   254→            font-size: 24px;
   255→            margin-bottom: 16px;
   256→            color: var(--white);
   257→        }
   258→
   259→        .step p {
   260→            color: var(--slate-text);
   261→            font-size: 16px;
   262→        }
   263→
   264→        /* Demo Section */
   265→        .demo {
   266→            padding: 80px 0;
   267→            background: linear-gradient(180deg, var(--cosmic-void) 0%, var(--void-gray) 100%);
   268→        }
   269→
   270→        .demo-container {
   271→            max-width: 900px;
   272→            margin: 64px auto 0;
   273→            background: rgba(30, 31, 35, 0.6);
   274→            border: 1px solid rgba(255, 255, 255, 0.1);
   275→            border-radius: 20px;
   276→            padding: 48px;
   277→            position: relative;
   278→            overflow: hidden;
   279→        }
   280→
   281→        .demo-container::before {
   282→            content: '';
   283→            position: absolute;
   284→            top: 0;
   285→            left: 0;
   286→            right: 0;
   287→            height: 4px;
   288→            background: linear-gradient(90deg, var(--signal-blue), var(--electric-cyan));
   289→        }
   290→
   291→        .browser-mockup {
   292→            background: #1a1b1e;
   293→            border-radius: 12px;
   294→            overflow: hidden;
   295→            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   296→        }
   297→
   298→        .browser-header {
   299→            background: #2d2e32;
   300→            padding: 12px 16px;
   301→            display: flex;
   302→            align-items: center;
   303→            gap: 8px;
   304→        }
   305→
   306→        .browser-dot {
   307→            width: 12px;
   308→            height: 12px;
   309→            border-radius: 50%;
   310→        }
   311→
   312→        .dot-red {
   313→            background: #FF5F56;
   314→        }
   315→
   316→        .dot-yellow {
   317→            background: #FFBD2E;
   318→        }
   319→
   320→        .dot-green {
   321→            background: #27C93F;
   322→        }
   323→
   324→        .browser-content {
   325→            padding: 40px;
   326→            min-height: 300px;
   327→            background: linear-gradient(135deg, #1a1b1e 0%, #252629 100%);
   328→            display: flex;
   329→            align-items: center;
   330→            justify-content: center;
   331→            flex-direction: column;
   332→            gap: 24px;
   333→        }
   334→
   335→        .widget-preview {
   336→            position: relative;
   337→        }
   338→
   339→        .widget-button {
   340→            width: 70px;
   341→            height: 70px;
   342→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   343→            border-radius: 50%;
   344→            display: flex;
   345→            align-items: center;
   346→            justify-content: center;
   347→            font-size: 32px;
   348→            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
   349→            cursor: pointer;
   350→            animation: pulse 2s infinite;
   351→        }
   352→
   353→        @keyframes pulse {
   354→
   355→            0%,
   356→            100% {
   357→                transform: scale(1);
   358→            }
   359→
   360→            50% {
   361→                transform: scale(1.05);
   362→            }
   363→        }
   364→
   365→        .widget-demo-text {
   366→            color: var(--slate-text);
   367→            text-align: center;
   368→            font-size: 18px;
   369→            margin-top: 16px;
   370→        }
   371→
   372→        /* Pricing Section */
   373→        .pricing {
   374→            padding: 80px 0;
   375→            background: var(--cosmic-void);
   376→        }
   377→
   378→        .pricing-grid {
   379→            display: grid;
   380→            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   381→            gap: 32px;
   382→            margin: 64px auto 0;
   383→            max-width: 1200px;
   384→        }
   385→
   386→        .pricing-card {
   387→            background: rgba(30, 31, 35, 0.8);
   388→            border: 2px solid rgba(255, 255, 255, 0.1);
   389→            border-radius: 20px;
   390→            padding: 40px;
   391→            position: relative;
   392→            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
   393→            display: flex;
   394→            flex-direction: column;
   395→        }
   396→
   397→        .pricing-card:hover {
   398→            transform: translateY(-4px);
   399→            border-color: var(--signal-blue);
   400→        }
   401→
   402→        .pricing-card.featured {
   403→            transform: scale(1.05);
   404→            border-color: var(--signal-blue);
   405→            box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
   406→            background: rgba(30, 31, 35, 0.95);
   407→        }
   408→
   409→        .pricing-card.featured:hover {
   410→            transform: scale(1.05) translateY(-4px);
   411→        }
   412→
   413→        .pricing-badge {
   414→            position: absolute;
   415→            top: -16px;
   416→            left: 50%;
   417→            transform: translateX(-50%);
   418→            background: linear-gradient(135deg, var(--success-green), #059669);
   419→            color: var(--white);
   420→            padding: 8px 20px;
   421→            border-radius: 20px;
   422→            font-weight: 700;
   423→            font-size: 14px;
   424→            text-transform: uppercase;
   425→            letter-spacing: 1px;
   426→            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
   427→            white-space: nowrap;
   428→        }
   429→
   430→        .popular-badge {
   431→            position: absolute;
   432→            top: -16px;
   433→            right: 24px;
   434→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   435→            color: var(--white);
   436→            padding: 8px 20px;
   437→            border-radius: 20px;
   438→            font-weight: 700;
   439→            font-size: 14px;
   440→            text-transform: uppercase;
   441→            letter-spacing: 1px;
   442→            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
   443→        }
   444→
   445→        .pricing-header {
   446→            text-align: center;
   447→            margin-bottom: 32px;
   448→        }
   449→
   450→        .pricing-title {
   451→            font-size: 28px;
   452→            font-weight: 700;
   453→            margin-bottom: 16px;
   454→            color: var(--white);
   455→        }
   456→
   457→        .pricing-amount {
   458→            display: flex;
   459→            align-items: baseline;
   460→            justify-content: center;
   461→            gap: 16px;
   462→            margin-bottom: 16px;
   463→            flex-wrap: wrap;
   464→        }
   465→
   466→        .old-price {
   467→            font-size: 28px;
   468→            color: var(--slate-text);
   469→            text-decoration: line-through;
   470→            opacity: 0.5;
   471→        }
   472→
   473→        .new-price {
   474→            font-size: 48px;
   475→            font-weight: 800;
   476→            color: var(--signal-blue);
   477→        }
   478→
   479→        .price-suffix {
   480→            font-size: 20px;
   481→            color: var(--slate-text);
   482→        }
   483→
   484→        .pricing-savings {
   485→            color: var(--success-green);
   486→            font-size: 16px;
   487→            font-weight: 600;
   488→            margin-bottom: 24px;
   489→        }
   490→
   491→        .pricing-features {
   492→            list-style: none;
   493→            margin-bottom: 32px;
   494→            flex-grow: 1;
   495→        }
   496→
   497→        .pricing-features li {
   498→            padding: 10px 0;
   499→            display: flex;
   500→            align-items: flex-start;
   501→            gap: 12px;
   502→            font-size: 15px;
   503→            color: var(--slate-text);
   504→            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   505→        }
   506→
   507→        .pricing-features li:last-child {
   508→            border-bottom: none;
   509→        }
   510→
   511→        .check-icon {
   512→            color: var(--success-green);
   513→            font-size: 18px;
   514→            flex-shrink: 0;
   515→            margin-top: 2px;
   516→        }
   517→
   518→        .pricing-cta {
   519→            width: 100%;
   520→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   521→            color: var(--white);
   522→            padding: 16px 32px;
   523→            border-radius: 12px;
   524→            border: none;
   525→            font-weight: 700;
   526→            font-size: 16px;
   527→            cursor: pointer;
   528→            transition: transform 0.2s, box-shadow 0.2s;
   529→            margin-top: auto;
   530→        }
   531→
   532→        .pricing-cta:hover {
   533→            transform: translateY(-2px);
   534→            box-shadow: 0 12px 28px rgba(59, 130, 246, 0.5);
   535→        }
   536→
   537→        .pricing-notes {
   538→            max-width: 900px;
   539→            margin: 48px auto 0;
   540→            text-align: center;
   541→        }
   542→
   543→        .pricing-note {
   544→            color: var(--slate-text);
   545→            font-size: 16px;
   546→            line-height: 1.8;
   547→            margin-bottom: 16px;
   548→            padding: 16px;
   549→            background: rgba(30, 31, 35, 0.4);
   550→            border: 1px solid rgba(255, 255, 255, 0.08);
   551→            border-radius: 12px;
   552→        }
   553→
   554→        .pricing-note strong {
   555→            color: var(--white);
   556→        }
   557→
   558→        /* Features Section */
   559→        .features {
   560→            padding: 80px 0;
   561→            background: linear-gradient(180deg, var(--cosmic-void) 0%, var(--void-gray) 100%);
   562→        }
   563→
   564→        .features-grid {
   565→            display: grid;
   566→            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   567→            gap: 24px;
   568→            margin-top: 64px;
   569→        }
   570→
   571→        .feature-card {
   572→            background: rgba(30, 31, 35, 0.4);
   573→            border: 1px solid rgba(255, 255, 255, 0.08);
   574→            border-radius: 12px;
   575→            padding: 32px;
   576→            transition: transform 0.3s, border-color 0.3s;
   577→        }
   578→
   579→        .feature-card:hover {
   580→            transform: translateY(-4px);
   581→            border-color: rgba(59, 130, 246, 0.5);
   582→        }
   583→
   584→        .feature-icon {
   585→            font-size: 32px;
   586→            margin-bottom: 16px;
   587→        }
   588→
   589→        .feature-card h3 {
   590→            font-size: 18px;
   591→            margin-bottom: 12px;
   592→            color: var(--white);
   593→        }
   594→
   595→        .feature-card p {
   596→            color: var(--slate-text);
   597→            font-size: 14px;
   598→            line-height: 1.6;
   599→        }
   600→
   601→        /* Platform Compatibility */
   602→        .platforms {
   603→            padding: 80px 0;
   604→            background: var(--cosmic-void);
   605→        }
   606→
   607→        .platform-logos {
   608→            display: flex;
   609→            justify-content: center;
   610→            align-items: center;
   611→            gap: 64px;
   612→            flex-wrap: wrap;
   613→            margin-top: 64px;
   614→        }
   615→
   616→        .platform-logo {
   617→            font-size: 18px;
   618→            font-weight: 600;
   619→            color: var(--slate-text);
   620→            padding: 20px 32px;
   621→            background: rgba(30, 31, 35, 0.4);
   622→            border: 1px solid rgba(255, 255, 255, 0.08);
   623→            border-radius: 12px;
   624→            transition: all 0.3s;
   625→        }
   626→
   627→        .platform-logo:hover {
   628→            color: var(--white);
   629→            border-color: var(--signal-blue);
   630→            transform: translateY(-4px);
   631→        }
   632→
   633→        /* FAQ Section */
   634→        .faq {
   635→            padding: 80px 0;
   636→            background: linear-gradient(180deg, var(--cosmic-void) 0%, var(--void-gray) 100%);
   637→        }
   638→
   639→        .faq-list {
   640→            max-width: 800px;
   641→            margin: 64px auto 0;
   642→        }
   643→
   644→        .faq-item {
   645→            background: rgba(30, 31, 35, 0.4);
   646→            border: 1px solid rgba(255, 255, 255, 0.08);
   647→            border-radius: 12px;
   648→            padding: 32px;
   649→            margin-bottom: 16px;
   650→            cursor: pointer;
   651→            transition: all 0.3s;
   652→        }
   653→
   654→        .faq-item:hover {
   655→            border-color: rgba(59, 130, 246, 0.5);
   656→        }
   657→
   658→        .faq-question {
   659→            font-size: 20px;
   660→            font-weight: 600;
   661→            color: var(--white);
   662→            margin-bottom: 16px;
   663→            display: flex;
   664→            justify-content: space-between;
   665→            align-items: center;
   666→        }
   667→
   668→        .faq-answer {
   669→            color: var(--slate-text);
   670→            line-height: 1.8;
   671→            font-size: 16px;
   672→        }
   673→
   674→        .faq-toggle {
   675→            color: var(--signal-blue);
   676→            font-size: 24px;
   677→            transition: transform 0.3s;
   678→        }
   679→
   680→        /* CTA Section */
   681→        .cta-section {
   682→            padding: 120px 0;
   683→            background: linear-gradient(135deg, var(--signal-blue) 0%, var(--electric-cyan) 100%);
   684→            text-align: center;
   685→        }
   686→
   687→        .cta-section h2 {
   688→            font-size: 48px;
   689→            font-weight: 800;
   690→            margin-bottom: 24px;
   691→            color: var(--white);
   692→        }
   693→
   694→        .cta-section p {
   695→            font-size: 20px;
   696→            margin-bottom: 48px;
   697→            color: rgba(255, 255, 255, 0.9);
   698→            max-width: 600px;
   699→            margin-left: auto;
   700→            margin-right: auto;
   701→        }
   702→
   703→        .cta-button {
   704→            background: var(--white);
   705→            color: var(--signal-blue);
   706→            padding: 20px 48px;
   707→            border-radius: 12px;
   708→            border: none;
   709→            font-weight: 700;
   710→            font-size: 20px;
   711→            cursor: pointer;
   712→            transition: transform 0.2s, box-shadow 0.2s;
   713→            text-decoration: none;
   714→            display: inline-block;
   715→        }
   716→
   717→        .cta-button:hover {
   718→            transform: translateY(-4px);
   719→            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
   720→        }
   721→
   722→        /* Footer */
   723→        footer {
   724→            padding: 48px 0;
   725→            background: var(--cosmic-void);
   726→            border-top: 1px solid rgba(255, 255, 255, 0.1);
   727→            text-align: center;
   728→        }
   729→
   730→        .footer-logo {
   731→            font-size: 28px;
   732→            font-weight: 700;
   733→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   734→            -webkit-background-clip: text;
   735→            -webkit-text-fill-color: transparent;
   736→            background-clip: text;
   737→            margin-bottom: 16px;
   738→        }
   739→
   740→        .footer-text {
   741→            color: var(--slate-text);
   742→            font-size: 14px;
   743→        }
   744→
   745→        /* ============================================
   746→           FLOATING VOICE WIDGET + TELNYX WEBRTC
   747→           ============================================ */
   748→
   749→        /* Custom FAB trigger (our pulsing button, replaces Telnyx default) */
   750→        .voice-widget-fab {
   751→            position: fixed;
   752→            bottom: 24px;
   753→            right: 24px;
   754→            width: 70px;
   755→            height: 70px;
   756→            border-radius: 50%;
   757→            background: linear-gradient(135deg, #3B82F6, #2563EB);
   758→            border: none;
   759→            cursor: pointer;
   760→            z-index: 9999;
   761→            display: flex;
   762→            align-items: center;
   763→            justify-content: center;
   764→            box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45);
   765→            animation: fab-pulse 2s ease-in-out infinite;
   766→            transition: box-shadow 0.3s, transform 0.3s;
   767→        }
   768→
   769→        .voice-widget-fab:hover {
   770→            box-shadow: 0 8px 40px rgba(59, 130, 246, 0.7);
   771→            transform: scale(1.1);
   772→            animation: none;
   773→        }
   774→
   775→        /* Green pulsing state while in a live call */
   776→        .voice-widget-fab.in-call {
   777→            background: linear-gradient(135deg, #10B981, #059669);
   778→            box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5);
   779→            animation: fab-call-pulse 1.5s ease-in-out infinite;
   780→        }
   781→
   782→        .voice-widget-fab.in-call:hover {
   783→            box-shadow: 0 8px 40px rgba(16, 185, 129, 0.7);
   784→        }
   785→
   786→        .voice-widget-fab svg {
   787→            width: 30px;
   788→            height: 30px;
   789→            color: #fff;
   790→        }
   791→
   792→        /* Swap icons: mic when idle, phone-off when in call */
   793→        .voice-widget-fab .fab-icon-end {
   794→            display: none;
   795→        }
   796→
   797→        .voice-widget-fab.in-call .fab-icon-mic {
   798→            display: none;
   799→        }
   800→
   801→        .voice-widget-fab.in-call .fab-icon-end {
   802→            display: block;
   803→        }
   804→
   805→        @keyframes fab-pulse {
   806→
   807→            0%,
   808→            100% {
   809→                transform: scale(1);
   810→                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45);
   811→            }
   812→
   813→            50% {
   814→                transform: scale(1.05);
   815→                box-shadow: 0 8px 40px rgba(59, 130, 246, 0.65);
   816→            }
   817→        }
   818→
   819→        @keyframes fab-call-pulse {
   820→
   821→            0%,
   822→            100% {
   823→                transform: scale(1);
   824→                box-shadow: 0 8px 32px rgba(16, 185, 129, 0.45);
   825→            }
   826→
   827→            50% {
   828→                transform: scale(1.05);
   829→                box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
   830→            }
   831→        }
   832→
   833→        /* "Live Voice Agent" tooltip */
   834→        .voice-widget-fab-label {
   835→            position: fixed;
   836→            bottom: 42px;
   837→            right: 104px;
   838→            background: #1E1F23;
   839→            color: #fff;
   840→            padding: 8px 16px;
   841→            border-radius: 8px;
   842→            font-size: 14px;
   843→            font-weight: 600;
   844→            z-index: 9999;
   845→            white-space: nowrap;
   846→            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   847→            pointer-events: none;
   848→            opacity: 1;
   849→            transition: opacity 0.3s;
   850→        }
   851→
   852→        .voice-widget-fab-label::after {
   853→            content: '';
   854→            position: absolute;
   855→            right: -6px;
   856→            top: 50%;
   857→            transform: translateY(-50%);
   858→            width: 0;
   859→            height: 0;
   860→            border-top: 6px solid transparent;
   861→            border-bottom: 6px solid transparent;
   862→            border-left: 6px solid #1E1F23;
   863→        }
   864→
   865→        .voice-widget-fab-label.hidden {
   866→            opacity: 0;
   867→        }
   868→
   869→        /*
   870→         * Hide the Telnyx widget's own default FAB button.
   871→         * The <telnyx-ai-agent> element renders a shadow-DOM widget
   872→         * with its own floating button. We visually hide that button
   873→         * via a wrapper and use our custom .voice-widget-fab instead.
   874→         * The Telnyx call panel still renders and functions normally.
   875→         */
   876→        .telnyx-widget-wrapper {
   877→            position: fixed;
   878→            bottom: 24px;
   879→            right: 24px;
   880→            z-index: 9998;
   881→        }
   882→
   883→        /* When wrapper is in hidden-btn mode, shrink to zero so only
   884→           the Telnyx call panel (if open) shows, not the button */
   885→        .telnyx-widget-wrapper.hide-btn {
   886→            width: 0;
   887→            height: 0;
   888→            overflow: visible;
   889→        }
   890→
   891→        /* HTTPS diagnostic toast */
   892→        .https-toast {
   893→            position: fixed;
   894→            bottom: 110px;
   895→            right: 24px;
   896→            max-width: 320px;
   897→            background: #1E1F23;
   898→            color: #fff;
   899→            padding: 16px 20px;
   900→            border-radius: 12px;
   901→            font-size: 14px;
   902→            line-height: 1.5;
   903→            z-index: 9999;
   904→            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
   905→            border: 1px solid rgba(255, 255, 255, 0.1);
   906→            opacity: 0;
   907→            transform: translateY(10px);
   908→            transition: opacity 0.3s, transform 0.3s;
   909→            pointer-events: none;
   910→        }
   911→
   912→        .https-toast.visible {
   913→            opacity: 1;
   914→            transform: translateY(0);
   915→            pointer-events: auto;
   916→        }
   917→
   918→        /* ============================================
   919→           INSTANT DEMO HERO SECTION
   920→           ============================================ */
   921→        .instant-demo {
   922→            padding: 80px 0;
   923→            background: linear-gradient(180deg, var(--cosmic-void) 0%, rgba(30, 31, 35, 0.3) 100%);
   924→            text-align: center;
   925→        }
   926→
   927→        .instant-demo-title {
   928→            font-size: 48px;
   929→            font-weight: 800;
   930→            margin-bottom: 16px;
   931→            background: linear-gradient(135deg, var(--white) 0%, var(--electric-cyan) 100%);
   932→            -webkit-background-clip: text;
   933→            -webkit-text-fill-color: transparent;
   934→            background-clip: text;
   935→        }
   936→
   937→        .instant-demo-sub {
   938→            font-size: 20px;
   939→            color: var(--slate-text);
   940→            margin-bottom: 40px;
   941→        }
   942→
   943→        .instant-demo-form {
   944→            display: flex;
   945→            align-items: center;
   946→            justify-content: center;
   947→            gap: 12px;
   948→            max-width: 600px;
   949→            margin: 0 auto 16px;
   950→            flex-wrap: wrap;
   951→        }
   952→
   953→        .instant-demo-input {
   954→            flex: 1;
   955→            min-width: 260px;
   956→            padding: 18px 24px;
   957→            border-radius: 12px;
   958→            border: 2px solid rgba(255, 255, 255, 0.12);
   959→            background: rgba(30, 31, 35, 0.6);
   960→            color: #fff;
   961→            font-size: 18px;
   962→            outline: none;
   963→            transition: border-color 0.2s;
   964→        }
   965→
   966→        .instant-demo-input::placeholder {
   967→            color: rgba(148, 163, 184, 0.5);
   968→        }
   969→
   970→        .instant-demo-input:focus {
   971→            border-color: var(--signal-blue);
   972→        }
   973→
   974→        .instant-demo-btn {
   975→            padding: 18px 36px;
   976→            border: none;
   977→            border-radius: 12px;
   978→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
   979→            color: #fff;
   980→            font-size: 18px;
   981→            font-weight: 700;
   982→            cursor: pointer;
   983→            transition: transform 0.2s, box-shadow 0.2s;
   984→            white-space: nowrap;
   985→        }
   986→
   987→        .instant-demo-btn:hover {
   988→            transform: translateY(-2px);
   989→            box-shadow: 0 12px 28px rgba(59, 130, 246, 0.4);
   990→        }
   991→
   992→        .instant-demo-btn:disabled {
   993→            opacity: 0.6;
   994→            cursor: not-allowed;
   995→            transform: none;
   996→            box-shadow: none;
   997→        }
   998→
   999→        .instant-demo-fine {
  1000→            font-size: 14px;
  1001→            color: var(--slate-text);
  1002→        }
  1003→
  1004→        /* Demo scanning progress */
  1005→        .instant-demo-progress {
  1006→            display: none;
  1007→            max-width: 600px;
  1008→            margin: 40px auto 0;
  1009→            text-align: left;
  1010→        }
  1011→
  1012→        .instant-demo-progress.visible {
  1013→            display: block;
  1014→        }
  1015→
  1016→        .demo-step {
  1017→            display: flex;
  1018→            align-items: center;
  1019→            gap: 14px;
  1020→            padding: 14px 0;
  1021→            opacity: 0.3;
  1022→            transition: opacity 0.4s;
  1023→        }
  1024→
  1025→        .demo-step.active {
  1026→            opacity: 1;
  1027→        }
  1028→
  1029→        .demo-step.done {
  1030→            opacity: 0.7;
  1031→        }
  1032→
  1033→        .demo-step-icon {
  1034→            width: 28px;
  1035→            height: 28px;
  1036→            border-radius: 50%;
  1037→            display: flex;
  1038→            align-items: center;
  1039→            justify-content: center;
  1040→            flex-shrink: 0;
  1041→            font-size: 14px;
  1042→            font-weight: 700;
  1043→        }
  1044→
  1045→        .demo-step.active .demo-step-icon {
  1046→            background: var(--signal-blue);
  1047→            color: #fff;
  1048→            animation: step-spin 1s linear infinite;
  1049→        }
  1050→
  1051→        .demo-step.done .demo-step-icon {
  1052→            background: var(--success-green);
  1053→            color: #fff;
  1054→        }
  1055→
  1056→        .demo-step.pending .demo-step-icon {
  1057→            background: rgba(255, 255, 255, 0.08);
  1058→            color: var(--slate-text);
  1059→        }
  1060→
  1061→        @keyframes step-spin {
  1062→            0% {
  1063→                transform: rotate(0deg);
  1064→            }
  1065→
  1066→            100% {
  1067→                transform: rotate(360deg);
  1068→            }
  1069→        }
  1070→
  1071→        .demo-step-text {
  1072→            font-size: 16px;
  1073→            color: var(--slate-text);
  1074→        }
  1075→
  1076→        .demo-step.active .demo-step-text {
  1077→            color: #fff;
  1078→        }
  1079→
  1080→        /* Mock preview result */
  1081→        .instant-demo-result {
  1082→            display: none;
  1083→            max-width: 700px;
  1084→            margin: 40px auto 0;
  1085→        }
  1086→
  1087→        .instant-demo-result.visible {
  1088→            display: block;
  1089→        }
  1090→
  1091→        .demo-result-browser {
  1092→            background: #1a1b1e;
  1093→            border-radius: 12px;
  1094→            overflow: hidden;
  1095→            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  1096→            position: relative;
  1097→        }
  1098→
  1099→        .demo-result-header {
  1100→            background: #2d2e32;
  1101→            padding: 10px 16px;
  1102→            display: flex;
  1103→            align-items: center;
  1104→            gap: 8px;
  1105→        }
  1106→
  1107→        .demo-result-body {
  1108→            min-height: 400px;
  1109→            background: #f8fafc;
  1110→            position: relative;
  1111→            display: flex;
  1112→            flex-direction: column;
  1113→            align-items: stretch;
  1114→        }
  1115→
  1116→        /* Mock website header */
  1117→        .demo-site-header {
  1118→            background: linear-gradient(135deg, #3B82F6, #2563EB);
  1119→            padding: 16px 24px;
  1120→            display: flex;
  1121→            justify-content: space-between;
  1122→            align-items: center;
  1123→            border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  1124→        }
  1125→
  1126→        .demo-site-logo {
  1127→            font-size: 20px;
  1128→            font-weight: 700;
  1129→            color: #fff;
  1130→        }
  1131→
  1132→        .demo-site-nav {
  1133→            display: flex;
  1134→            gap: 20px;
  1135→            font-size: 14px;
  1136→            color: rgba(255, 255, 255, 0.9);
  1137→        }
  1138→
  1139→        /* Mock hero section */
  1140→        .demo-site-hero {
  1141→            padding: 40px 24px;
  1142→            text-align: center;
  1143→            background: linear-gradient(180deg, #fff, #f1f5f9);
  1144→            flex-grow: 1;
  1145→        }
  1146→
  1147→        .demo-site-hero-title {
  1148→            font-size: 28px;
  1149→            font-weight: 700;
  1150→            color: #1e293b;
  1151→            margin-bottom: 12px;
  1152→        }
  1153→
  1154→        .demo-site-hero-subtitle {
  1155→            font-size: 16px;
  1156→            color: #64748b;
  1157→            margin-bottom: 32px;
  1158→        }
  1159→
  1160→        /* Mock services grid */
  1161→        .demo-site-services {
  1162→            display: flex;
  1163→            gap: 16px;
  1164→            justify-content: center;
  1165→            flex-wrap: wrap;
  1166→            padding: 0 24px;
  1167→        }
  1168→
  1169→        .demo-site-service-box {
  1170→            width: 140px;
  1171→            padding: 20px;
  1172→            background: #fff;
  1173→            border: 1px solid #e2e8f0;
  1174→            border-radius: 8px;
  1175→            text-align: center;
  1176→        }
  1177→
  1178→        .demo-site-service-icon {
  1179→            font-size: 32px;
  1180→            margin-bottom: 8px;
  1181→        }
  1182→
  1183→        .demo-site-service-label {
  1184→            font-size: 13px;
  1185→            color: #64748b;
  1186→            font-weight: 600;
  1187→        }
  1188→
  1189→        /* Overlaid widget mockup on the result */
  1190→        .demo-result-widget {
  1191→            position: absolute;
  1192→            bottom: 16px;
  1193→            right: 16px;
  1194→            width: 56px;
  1195→            height: 56px;
  1196→            border-radius: 50%;
  1197→            background: linear-gradient(135deg, #3B82F6, #2563EB);
  1198→            display: flex;
  1199→            align-items: center;
  1200→            justify-content: center;
  1201→            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  1202→            animation: fab-pulse 2s ease-in-out infinite;
  1203→        }
  1204→
  1205→        .demo-result-widget svg {
  1206→            width: 24px;
  1207→            height: 24px;
  1208→            color: #fff;
  1209→        }
  1210→
  1211→        .demo-result-info {
  1212→            padding: 24px;
  1213→            background: #111827;
  1214→            text-align: center;
  1215→        }
  1216→
  1217→        .demo-result-info-title {
  1218→            font-size: 18px;
  1219→            font-weight: 700;
  1220→            color: #fff;
  1221→            margin-bottom: 20px;
  1222→        }
  1223→
  1224→        .demo-result-ctas {
  1225→            display: flex;
  1226→            flex-direction: column;
  1227→            gap: 12px;
  1228→            align-items: center;
  1229→        }
  1230→
  1231→        .demo-result-cta-primary {
  1232→            padding: 14px 32px;
  1233→            border: none;
  1234→            border-radius: 10px;
  1235→            background: linear-gradient(135deg, var(--signal-blue), var(--electric-cyan));
  1236→            color: #fff;
  1237→            font-size: 16px;
  1238→            font-weight: 700;
  1239→            cursor: pointer;
  1240→            transition: transform 0.2s, box-shadow 0.2s;
  1241→        }
  1242→
  1243→        .demo-result-cta-primary:hover {
  1244→            transform: translateY(-2px);
  1245→            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
  1246→        }
  1247→
  1248→        .demo-result-cta-secondary {
  1249→            font-size: 14px;
  1250→            color: var(--signal-blue);
  1251→            text-decoration: none;
  1252→            transition: color 0.2s;
  1253→        }
  1254→
  1255→        .demo-result-cta-secondary:hover {
  1256→            color: var(--electric-cyan);
  1257→        }
  1258→
  1259→        /* Responsive */
  1260→        @media (max-width: 768px) {
  1261→            .hero h1 {
  1262→                font-size: 40px;
  1263→            }
  1264→
  1265→            .hero-subtext {
  1266→                font-size: 18px;
  1267→            }
  1268→
  1269→            .section-title {
  1270→                font-size: 36px;
  1271→            }
  1272→
  1273→            .value-grid,
  1274→            .steps,
  1275→            .features-grid {
  1276→                grid-template-columns: 1fr;
  1277→            }
  1278→
  1279→            .hero-stats {
  1280→                gap: 32px;
  1281→            }
  1282→
  1283→            .stat-number {
  1284→                font-size: 36px;
  1285→            }
  1286→
  1287→            .platform-logos {
  1288→                gap: 24px;
  1289→            }
  1290→
  1291→            .pricing-grid {
  1292→                grid-template-columns: 1fr;
  1293→            }
  1294→
  1295→            .pricing-card.featured {
  1296→                transform: scale(1);
  1297→            }
  1298→
  1299→            .pricing-card.featured:hover {
  1300→                transform: translateY(-4px);
  1301→            }
  1302→
  1303→            /* Floating widget mobile */
  1304→            .voice-widget-fab-label {
  1305→                display: none;
  1306→            }
  1307→
  1308→            /* Instant demo mobile */
  1309→            .instant-demo-title {
  1310→                font-size: 32px;
  1311→            }
  1312→
  1313→            .instant-demo-sub {
  1314→                font-size: 16px;
  1315→            }
  1316→
  1317→            .instant-demo-form {
  1318→                flex-direction: column;
  1319→            }
  1320→
  1321→            .instant-demo-input {
  1322→                min-width: 100%;
  1323→            }
  1324→
  1325→            .instant-demo-btn {
  1326→                width: 100%;
  1327→            }
  1328→
  1329→            .demo-result-site-text {
  1330→                font-size: 20px;
  1331→            }
  1332→
  1333→            .pricing-amount {
  1334→                flex-direction: column;
  1335→                gap: 8px;
  1336→            }
  1337→
  1338→            .old-price {
  1339→                font-size: 24px;
  1340→            }
  1341→
  1342→            .new-price {
  1343→                font-size: 40px;
  1344→            }
  1345→        }
  1346→    </style>
  1347→    <!-- Telnyx AI Agent Widget (WebRTC voice) -->
  1348→    <script async src="https://unpkg.com/@telnyx/ai-agent-widget@0.31.1/dist/bundle.min.js"></script>
  1349→</head>
  1350→
  1351→<body>
  1352→    <!-- Header -->
  1353→    <header>
  1354→        <div class="container">
  1355→            <div class="header-content">
  1356→                <div class="logo">Sunaiva</div>
  1357→                <nav style="display: flex; align-items: center; gap: 24px;">
  1358→                    <a href="https://api.sunaivadigital.com/login"
  1359→                        style="color: var(--slate-text); text-decoration: none; font-weight: 500; font-size: 16px; transition: color 0.2s;">Login</a>
  1360→                    <a href="https://api.sunaivadigital.com/signup" class="cta-header">Get Started</a>
  1361→                </nav>
  1362→            </div>
  1363→        </div>
  1364→    </header>
  1365→
  1366→    <!-- Hero Section -->
  1367→    <section class="hero">
  1368→        <div class="container">
  1369→            <div class="hero-content">
  1370→                <h1>Your Website Can Talk Now</h1>
  1371→                <p class="hero-subtext">Add a 24/7 voice AI assistant to your website in 5 minutes. Answer questions,
  1372→                    capture leads, and close sales through natural conversation.</p>
  1373→                <div style="display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap;">
  1374→                    <a href="https://api.sunaivadigital.com/signup" class="cta-header">Get Your Talking Widget</a>
  1375→                    <a href="#pricing" class="cta-header"
  1376→                        style="background: transparent; border: 2px solid rgba(255,255,255,0.3);">See Plans</a>
  1377→                </div>
  1378→
  1379→                <div class="hero-stats">
  1380→                    <div class="stat">
  1381→                        <span class="stat-number">24/7</span>
  1382→                        <span class="stat-label">Always Available</span>
  1383→                    </div>
  1384→                    <div class="stat">
  1385→                        <span class="stat-number">5 min</span>
  1386→                        <span class="stat-label">Setup Time</span>
  1387→                    </div>
  1388→                    <div class="stat">
  1389→                        <span class="stat-number">90%</span>
  1390→                        <span class="stat-label">Query Resolution</span>
  1391→                    </div>
  1392→                </div>
  1393→            </div>
  1394→        </div>
  1395→    </section>
  1396→
  1397→    <!-- Instant Demo -->
  1398→    <section class="instant-demo" id="instant-demo">
  1399→        <div class="container">
  1400→            <h2 class="instant-demo-title">See It On YOUR Website — In 60 Seconds</h2>
  1401→            <p class="instant-demo-sub">Enter your website URL and watch your AI voice agent come to life</p>
  1402→            <div class="instant-demo-form" id="instant-demo-form">
  1403→                <input type="url" class="instant-demo-input" id="demo-url-input" placeholder="https://yourwebsite.com"
  1404→                    autocomplete="url" />
  1405→                <button class="instant-demo-btn" id="demo-generate-btn" type="button">Generate My Demo</button>
  1406→            </div>
  1407→            <p class="instant-demo-fine">Free • No signup required • Takes 60 seconds</p>
  1408→            <div class="instant-demo-progress" id="demo-progress"></div>
  1409→            <div class="instant-demo-result" id="demo-result"></div>
  1410→        </div>
  1411→    </section>
  1412→
  1413→    <!-- Value Stack -->
  1414→    <section class="value-stack">
  1415→        <div class="container">
  1416→            <h2 class="section-title">Transform Your Website</h2>
  1417→            <div class="value-grid" id="value-grid"></div>
  1418→        </div>
  1419→    </section>
  1420→
  1421→    <!-- How It Works -->
  1422→    <section class="how-it-works">
  1423→        <div class="container">
  1424→            <h2 class="section-title">How It Works</h2>
  1425→            <div class="steps" id="steps"></div>
  1426→        </div>
  1427→    </section>
  1428→
  1429→    <!-- Demo -->
  1430→    <section class="demo">
  1431→        <div class="container">
  1432→            <h2 class="section-title">See It In Action</h2>
  1433→            <div class="demo-container">
  1434→                <div class="browser-mockup">
  1435→                    <div class="browser-header">
  1436→                        <div class="browser-dot dot-red"></div>
  1437→                        <div class="browser-dot dot-yellow"></div>
  1438→                        <div class="browser-dot dot-green"></div>
  1439→                    </div>
  1440→                    <div class="browser-content" id="browser-content"></div>
  1441→                </div>
  1442→            </div>
  1443→        </div>
  1444→    </section>
  1445→
  1446→    <!-- Pricing -->
  1447→    <section class="pricing" id="pricing">
  1448→        <div class="container">
  1449→            <h2 class="section-title">Beta Pricing (Australian Market)</h2>
  1450→            <p
  1451→                style="text-align: center; font-size: 18px; color: var(--slate-text); margin-bottom: 32px; max-width: 700px; margin-left: auto; margin-right: auto;">
  1452→                All plans priced in AUD. Lock in your beta rate now — prices increase after launch.</p>
  1453→            <div class="pricing-grid" id="pricing-grid"></div>
  1454→            <div class="pricing-notes" id="pricing-notes"></div>
  1455→        </div>
  1456→    </section>
  1457→
  1458→    <!-- Features -->
  1459→    <section class="features">
  1460→        <div class="container">
  1461→            <h2 class="section-title">Everything You Need</h2>
  1462→            <div class="features-grid" id="features-grid"></div>
  1463→        </div>
  1464→    </section>
  1465→
  1466→    <!-- Platforms -->
  1467→    <section class="platforms">
  1468→        <div class="container">
  1469→            <h2 class="section-title">Works With Your Platform</h2>
  1470→            <div class="platform-logos" id="platform-logos"></div>
  1471→        </div>
  1472→    </section>
  1473→
  1474→    <!-- FAQ -->
  1475→    <section class="faq">
  1476→        <div class="container">
  1477→            <h2 class="section-title">Frequently Asked Questions</h2>
  1478→            <div class="faq-list" id="faq-list"></div>
  1479→        </div>
  1480→    </section>
  1481→
  1482→    <!-- CTA -->
  1483→    <section class="cta-section">
  1484→        <div class="container">
  1485→            <h2>Ready to Make Your Website Talk?</h2>
  1486→            <p>Join the future of website engagement. Your voice AI assistant is 5 minutes away.</p>
  1487→            <a href="https://api.sunaivadigital.com/signup" class="cta-button">Get Your Talking Widget</a>
  1488→        </div>
  1489→    </section>
  1490→
  1491→    <!-- Footer -->
  1492→    <footer>
  1493→        <div class="container">
  1494→            <div class="footer-logo">Sunaiva</div>
  1495→            <p class="footer-text">The OS for AI Trust</p>
  1496→            <div style="margin-top: 16px; display: flex; justify-content: center; gap: 24px;">
  1497→                <a href="/terms"
  1498→                    style="color: var(--slate-text); text-decoration: none; font-size: 14px; transition: color 0.2s;">Terms
  1499→                    of Service</a>
  1500→                <a href="/privacy"
  1501→                    style="color: var(--slate-text); text-decoration: none; font-size: 14px; transition: color 0.2s;">Privacy
  1502→                    Policy</a>
  1503→                <a href="mailto:sales@sunaivadigital.com"
  1504→                    style="color: var(--slate-text); text-decoration: none; font-size: 14px; transition: color 0.2s;">Contact</a>
  1505→            </div>
  1506→        </div>
  1507→    </footer>
  1508→
  1509→    <!-- Floating Voice Widget (built by JS) -->
  1510→    <div id="voice-widget-root"></div>
  1511→
  1512→    <script>
  1513→        // Value Stack Data
  1514→        const valueData = [
  1515→            {
  1516→                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
  1517→                title: 'Save Time',
  1518→                description: 'Stop answering the same questions over and over. Your AI assistant handles FAQs, product info, and support 24/7 so you can focus on growing your business.'
  1519→            },
  1520→            {
  1521→                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
  1522→                title: 'Make Money',
  1523→                description: 'Capture leads while you sleep. Convert browsers into buyers with instant, personalized responses. Never miss a sales opportunity again.'
  1524→            },
  1525→            {
  1526→                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
  1527→                title: 'Build Capability',
  1528→                description: 'Scale your customer service without scaling your team. Handle unlimited conversations simultaneously with enterprise-grade AI.'
  1529→            }
  1530→        ];
  1531→
  1532→        // Steps Data
  1533→        const stepsData = [
  1534→            {
  1535→                number: '1',
  1536→                title: 'Install',
  1537→                description: 'Copy one line of code and paste it into your website. Works with any platform - WordPress, Shopify, custom HTML.'
  1538→            },
  1539→            {
  1540→                number: '2',
  1541→                title: 'Configure',
  1542→                description: 'Train your AI assistant on your business. Upload your FAQs, product info, and brand voice in minutes.'
  1543→            },
  1544→            {
  1545→                number: '3',
  1546→                title: 'Go Live',
  1547→                description: 'Your website can now talk to visitors. Answer questions, capture leads, and close sales automatically.'
  1548→            }
  1549→        ];
  1550→
  1551→        // Features Data
  1552→        const featuresData = [
  1553→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>', title: 'Natural Australian Voices', description: 'Aussie male and female AI voices that sound genuinely human, not robotic' },
  1554→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>', title: 'Analytics Dashboard', description: 'Track conversations, leads, and performance metrics' },
  1555→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>', title: 'CRM Integration', description: 'Sync leads directly to your existing tools' },
  1556→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>', title: 'Custom Branding', description: 'Match your brand colors, logo, and voice' },
  1557→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>', title: 'Mobile Optimized', description: 'Perfect experience on any device' },
  1558→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>', title: 'Enterprise Security', description: 'Bank-level encryption for all conversations' },
  1559→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>', title: 'Lightning Fast', description: 'Sub-second response times, every time' },
  1560→            { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>', title: 'Answer Engine Optimization', description: 'Boost your search rankings with cutting-edge voice AI technology. Search engines reward sites that increase engagement time and use leading-edge tech.' }
  1561→        ];
  1562→
  1563→        // Platforms Data
  1564→        const platformsData = ['WordPress', 'Shopify', 'Squarespace', 'Wix', 'Custom HTML'];
  1565→
  1566→        // FAQ Data
  1567→        const faqData = [
  1568→            {
  1569→                question: 'How long does setup take?',
  1570→                answer: 'Most customers are live in under 5 minutes. Just copy-paste one line of code into your website.'
  1571→            },
  1572→            {
  1573→                question: 'Do I need technical skills?',
  1574→                answer: 'No coding required. If you can copy-paste, you can install the widget. We also offer white-glove setup for $197 one-time.'
  1575→            },
  1576→            {
  1577→                question: 'What markets do you serve?',
  1578→                answer: 'We focus on Australian and US businesses, with English-language support optimized for these markets.'
  1579→            },
  1580→            {
  1581→                question: 'Can I customize the voice and appearance?',
  1582→                answer: 'Absolutely. Choose from natural male and female voices, customize colors, position, and behavior to match your brand perfectly.'
  1583→            },
  1584→            {
  1585→                question: 'How many conversations can it handle?',
  1586→                answer: 'Unlimited. Your widget can handle thousands of simultaneous conversations without breaking a sweat.'
  1587→            },
  1588→            {
  1589→                question: 'Does it integrate with my CRM?',
  1590→                answer: 'Yes. We integrate with all major CRMs including HubSpot, Salesforce, Pipedrive, and more via webhooks.'
  1591→            },
  1592→            {
  1593→                question: 'What happens after the early adopter period?',
  1594→                answer: 'Your rate is locked in forever. New customers will pay full price (Starter $994, High-Use $1,994, Enterprise $2,994), but you keep your discounted rate as long as you stay subscribed.'
  1595→            },
  1596→            {
  1597→                question: 'Is there a money-back guarantee?',
  1598→                answer: 'Yes. Try it risk-free for 14 days. If you\'re not delighted, we\'ll refund every penny - no questions asked.'
  1599→            },
  1600→            {
  1601→                question: 'Do you offer agency/partner programs?',
  1602→                answer: 'Yes! Agency partners earn 30% recurring commission on all tiers ($149.10/mo on Starter, $299.10/mo on High-Use, $449.10/mo on Enterprise). One agency with 50-200 clients means predictable recurring income for both of us.'
  1603→            }
  1604→        ];
  1605→
  1606→        // Pricing Tiers Data
  1607→        const pricingTiers = [
  1608→            {
  1609→                name: 'Starter',
  1610→                oldPrice: '$994',
  1611→                newPrice: '$497',
  1612→                savings: 'Beta: $248.50/mo',
  1613→                featured: false,
  1614→                cta: 'Get Started',
  1615→                ctaHref: 'https://api.sunaivadigital.com/signup',
  1616→                features: [
  1617→                    'Persistent Memory — your AI remembers every caller',
  1618→                    '1 Voice Widget',
  1619→                    'Calendar Booking (Google/Outlook)',
  1620→                    'Lead Capture (Email)',
  1621→                    'Basic Call Analytics (call count)',
  1622→                    '500 Monthly Minutes',
  1623→                    'Natural Australian male & female voices',
  1624→                    'Email Support',
  1625→                    'Self-install (embed code provided)'
  1626→                ]
  1627→            },
  1628→            {
  1629→                name: 'High-Use',
  1630→                oldPrice: '$1,994',
  1631→                newPrice: '$997',
  1632→                savings: 'Beta: $498.50/mo',
  1633→                featured: true,
  1634→                cta: 'Start Business Trial',
  1635→                ctaHref: 'https://api.sunaivadigital.com/signup?plan=pro',
  1636→                features: [
  1637→                    'Advanced Memory — learns your business patterns over time',
  1638→                    '1 Voice Widget',
  1639→                    'Calendar Booking (Google/Outlook)',
  1640→                    'CRM/Job Management Integration (Tradify, ServiceM8, SimPRO, HubSpot, GHL)',
  1641→                    'Lead Capture (Email + Phone + Notes)',
  1642→                    'Full Analytics Dashboard',
  1643→                    '2,000 Monthly Minutes',
  1644→                    'Natural Australian male & female voices',
  1645→                    'White Glove Setup Included ($197 value)',
  1646→                    'Priority Support'
  1647→                ]
  1648→            },
  1649→            {
  1650→                name: 'Enterprise',
  1651→                oldPrice: '$2,994',
  1652→                newPrice: '$1,497',
  1653→                savings: 'Beta: $748.50/mo',
  1654→                featured: false,
  1655→                cta: 'Contact Sales',
  1656→                ctaHref: 'mailto:sales@sunaivadigital.com?subject=Enterprise%20Plan%20Inquiry',
  1657→                features: [
  1658→                    'Infinite Memory — never forgets a customer, gets smarter every day',
  1659→                    '3 Voice Widgets (multi-location)',
  1660→                    'Calendar Booking (Google/Outlook)',
  1661→                    'All CRM Integrations + Custom Webhooks',
  1662→                    'Lead Capture (Email + Phone + Notes)',
  1663→                    'Full Analytics + Data Export',
  1664→                    '5,000 Monthly Minutes',
  1665→                    'Natural Australian male & female voices',
  1666→                    'White Glove Setup Included ($197 value)',
  1667→                    'Dedicated Onboarding'
  1668→                ]
  1669→            }
  1670→        ];
  1671→
  1672→        const pricingNotes = [
  1673→            'All plans include a 14-day money-back guarantee. No long-term contracts.',
  1674→            'Need Tradify, ServiceM8, or SimPRO integration? Our Pro plan connects directly to your job management system — leads flow straight into your pipeline.'
  1675→        ];
  1676→
  1677→        // Render Value Stack
  1678→        function renderValueStack() {
  1679→            const grid = document.getElementById('value-grid');
  1680→            valueData.forEach(item => {
  1681→                const card = document.createElement('div');
  1682→                card.className = 'value-card';
  1683→
  1684→                const iconDiv = document.createElement('div');
  1685→                iconDiv.className = 'value-icon';
  1686→                const tempDiv = document.createElement('div');
  1687→                tempDiv.innerHTML = item.icon;
  1688→                iconDiv.appendChild(tempDiv.firstChild);
  1689→
  1690→                const title = document.createElement('h3');
  1691→                title.textContent = item.title;
  1692→
  1693→                const description = document.createElement('p');
  1694→                description.textContent = item.description;
  1695→
  1696→                card.appendChild(iconDiv);
  1697→                card.appendChild(title);
  1698→                card.appendChild(description);
  1699→                grid.appendChild(card);
  1700→            });
  1701→        }
  1702→
  1703→        // Render Steps
  1704→        function renderSteps() {
  1705→            const stepsContainer = document.getElementById('steps');
  1706→            stepsData.forEach(step => {
  1707→                const stepDiv = document.createElement('div');
  1708→                stepDiv.className = 'step';
  1709→
  1710→                const number = document.createElement('div');
  1711→                number.className = 'step-number';
  1712→                number.textContent = step.number;
  1713→
  1714→                const title = document.createElement('h3');
  1715→                title.textContent = step.title;
  1716→
  1717→                const description = document.createElement('p');
  1718→                description.textContent = step.description;
  1719→
  1720→                stepDiv.appendChild(number);
  1721→                stepDiv.appendChild(title);
  1722→                stepDiv.appendChild(description);
  1723→                stepsContainer.appendChild(stepDiv);
  1724→            });
  1725→        }
  1726→
  1727→        // Render Demo
  1728→        function renderDemo() {
  1729→            const content = document.getElementById('browser-content');
  1730→
  1731→            const preview = document.createElement('div');
  1732→            preview.className = 'widget-preview';
  1733→
  1734→            const button = document.createElement('div');
  1735→            button.className = 'widget-button';
  1736→            button.textContent = '🎙';
  1737→
  1738→            const text = document.createElement('p');
  1739→            text.className = 'widget-demo-text';
  1740→            text.textContent = 'Click to start a voice conversation';
  1741→
  1742→            preview.appendChild(button);
  1743→            content.appendChild(preview);
  1744→            content.appendChild(text);
  1745→        }
  1746→
  1747→        // Render Pricing
  1748→        function renderPricing() {
  1749→            const grid = document.getElementById('pricing-grid');
  1750→
  1751→            pricingTiers.forEach(tier => {
  1752→                const card = document.createElement('div');
  1753→                card.className = tier.featured ? 'pricing-card featured' : 'pricing-card';
  1754→
  1755→                // Badge for savings
  1756→                const badge = document.createElement('div');
  1757→                badge.className = 'pricing-badge';
  1758→                badge.textContent = tier.savings;
  1759→                card.appendChild(badge);
  1760→
  1761→                // Popular badge for featured tier
  1762→                if (tier.featured) {
  1763→                    const popularBadge = document.createElement('div');
  1764→                    popularBadge.className = 'popular-badge';
  1765→                    popularBadge.textContent = 'MOST POPULAR';
  1766→                    card.appendChild(popularBadge);
  1767→                }
  1768→
  1769→                // Header
  1770→                const header = document.createElement('div');
  1771→                header.className = 'pricing-header';
  1772→
  1773→                const title = document.createElement('h3');
  1774→                title.className = 'pricing-title';
  1775→                title.textContent = tier.name;
  1776→
  1777→                const amount = document.createElement('div');
  1778→                amount.className = 'pricing-amount';
  1779→
  1780→                const oldPrice = document.createElement('div');
  1781→                oldPrice.className = 'old-price';
  1782→                oldPrice.textContent = tier.oldPrice;
  1783→
  1784→                const newPrice = document.createElement('div');
  1785→                newPrice.className = 'new-price';
  1786→                newPrice.textContent = tier.newPrice;
  1787→
  1788→                const suffix = document.createElement('span');
  1789→                suffix.className = 'price-suffix';
  1790→                suffix.textContent = '/mo';
  1791→
  1792→                newPrice.appendChild(suffix);
  1793→                amount.appendChild(oldPrice);
  1794→                amount.appendChild(newPrice);
  1795→
  1796→                header.appendChild(title);
  1797→                header.appendChild(amount);
  1798→                card.appendChild(header);
  1799→
  1800→                // Features list
  1801→                const featuresList = document.createElement('ul');
  1802→                featuresList.className = 'pricing-features';
  1803→
  1804→                tier.features.forEach(feature => {
  1805→                    const li = document.createElement('li');
  1806→                    const check = document.createElement('span');
  1807→                    check.className = 'check-icon';
  1808→                    check.textContent = '✓';
  1809→                    const text = document.createElement('span');
  1810→                    text.textContent = feature;
  1811→                    li.appendChild(check);
  1812→                    li.appendChild(text);
  1813→                    featuresList.appendChild(li);
  1814→                });
  1815→
  1816→                card.appendChild(featuresList);
  1817→
  1818→                // CTA button (as link)
  1819→                const cta = document.createElement('a');
  1820→                cta.className = 'pricing-cta';
  1821→                cta.textContent = tier.cta;
  1822→                cta.href = tier.ctaHref;
  1823→                cta.style.display = 'block';
  1824→                cta.style.textAlign = 'center';
  1825→                cta.style.textDecoration = 'none';
  1826→                cta.style.color = 'var(--white)';
  1827→                card.appendChild(cta);
  1828→
  1829→                grid.appendChild(card);
  1830→            });
  1831→
  1832→            // Render notes
  1833→            const notesContainer = document.getElementById('pricing-notes');
  1834→            pricingNotes.forEach(note => {
  1835→                const noteDiv = document.createElement('div');
  1836→                noteDiv.className = 'pricing-note';
  1837→                noteDiv.textContent = note;
  1838→                notesContainer.appendChild(noteDiv);
  1839→            });
  1840→        }
  1841→
  1842→        // Render Features
  1843→        function renderFeatures() {
  1844→            const grid = document.getElementById('features-grid');
  1845→            featuresData.forEach(feature => {
  1846→                const card = document.createElement('div');
  1847→                card.className = 'feature-card';
  1848→
  1849→                const iconDiv = document.createElement('div');
  1850→                iconDiv.className = 'feature-icon';
  1851→                const tempDiv = document.createElement('div');
  1852→                tempDiv.innerHTML = feature.icon;
  1853→                iconDiv.appendChild(tempDiv.firstChild);
  1854→
  1855→                const title = document.createElement('h3');
  1856→                title.textContent = feature.title;
  1857→
  1858→                const description = document.createElement('p');
  1859→                description.textContent = feature.description;
  1860→
  1861→                card.appendChild(iconDiv);
  1862→                card.appendChild(title);
  1863→                card.appendChild(description);
  1864→                grid.appendChild(card);
  1865→            });
  1866→        }
  1867→
  1868→        // Render Platforms
  1869→        function renderPlatforms() {
  1870→            const container = document.getElementById('platform-logos');
  1871→            platformsData.forEach(platform => {
  1872→                const logo = document.createElement('div');
  1873→                logo.className = 'platform-logo';
  1874→                logo.textContent = platform;
  1875→                container.appendChild(logo);
  1876→            });
  1877→        }
  1878→
  1879→        // Render FAQ
  1880→        function renderFAQ() {
  1881→            const list = document.getElementById('faq-list');
  1882→            faqData.forEach((item, index) => {
  1883→                const faqItem = document.createElement('div');
  1884→                faqItem.className = 'faq-item';
  1885→
  1886→                const question = document.createElement('div');
  1887→                question.className = 'faq-question';
  1888→
  1889→                const qText = document.createElement('span');
  1890→                qText.textContent = item.question;
  1891→
  1892→                const toggle = document.createElement('span');
  1893→                toggle.className = 'faq-toggle';
  1894→                toggle.textContent = '+';
  1895→
  1896→                const answer = document.createElement('div');
  1897→                answer.className = 'faq-answer';
  1898→                answer.textContent = item.answer;
  1899→
  1900→                question.appendChild(qText);
  1901→                question.appendChild(toggle);
  1902→                faqItem.appendChild(question);
  1903→                faqItem.appendChild(answer);
  1904→                list.appendChild(faqItem);
  1905→            });
  1906→        }
  1907→
  1908→
  1909→        // ============================================
  1910→        // SVG HELPERS (Lucide Instead of SVG Strings)
  1911→        // ============================================
  1912→        function createLucideIcon(iconName, w, h) {
  1913→            var i = document.createElement('i');
  1914→            i.setAttribute('data-lucide', iconName);
  1915→            i.setAttribute('width', w || 30);
  1916→            i.setAttribute('height', h || 30);
  1917→            return i;
  1918→        }
  1919→
  1920→        function micSVG(w, h) {
  1921→            return createLucideIcon('mic', w, h);
  1922→        }
  1923→
  1924→        function phoneEndSVG(w, h) {
  1925→            return createLucideIcon('phone-off', w, h);
  1926→        }
  1927→
  1928→        // ============================================
  1929→        // FLOATING VOICE WIDGET + TELNYX WEBRTC
  1930→        // ============================================
  1931→
  1932→        var TELNYX_AGENT_ID = 'assistant-696799a5-e994-4ac1-8f26-7b0923aee682';
  1933→
  1934→        // State Machine for the WebRTC Handoff
  1935→        var voiceWidgetState = {
  1936→            inCall: false,
  1937→            fabEl: null,
  1938→            fabLabelEl: null
  1939→        };
  1940→
  1941→        var telnyxClient = null;
  1942→        var activeCall = null;
  1943→
  1944→        /**
  1945→         * Build our custom FAB button and tooltip.
  1946→         */
  1947→        function buildVoiceWidget() {
  1948→            var root = document.getElementById('voice-widget-root');
  1949→
  1950→            // --- "Live Voice Agent" tooltip ---
  1951→            var label = document.createElement('div');
  1952→            label.className = 'voice-widget-fab-label';
  1953→            label.textContent = 'Live Voice Agent';
  1954→            label.id = 'voice-fab-label';
  1955→            root.appendChild(label);
  1956→            voiceWidgetState.fabLabelEl = label;
  1957→
  1958→            // --- Custom FAB button ---
  1959→            var fab = document.createElement('button');
  1960→            fab.className = 'voice-widget-fab';
  1961→            fab.id = 'voice-fab';
  1962→            fab.setAttribute('aria-label', 'Talk to our AI voice assistant');
  1963→
  1964→            // Mic icon (visible when idle)
  1965→            var micIcon = micSVG(30, 30);
  1966→            micIcon.classList.add('fab-icon-mic');
  1967→            fab.appendChild(micIcon);
  1968→
  1969→            // Phone-end icon (visible during call)
  1970→            var endIcon = phoneEndSVG(30, 30);
  1971→            endIcon.classList.add('fab-icon-end');
  1972→            fab.appendChild(endIcon);
  1973→
  1974→            root.appendChild(fab);
  1975→            voiceWidgetState.fabEl = fab;
  1976→        }
  1977→
  1978→        /**
  1979→         * Securely Trigger the WebRTC Pipeline
  1980→         */
  1981→        async function triggerTelnyxWidget() {
  1982→            // Check if we're on HTTPS or localhost
  1983→            var protocol = window.location.protocol;
  1984→            var hostname = window.location.hostname;
  1985→            var isSecure = (protocol === 'https:') || (hostname === 'localhost') || (hostname === '127.0.0.1');
  1986→
  1987→            if (!isSecure) {
  1988→                showHttpsToast();
  1989→                return;
  1990→            }
  1991→
  1992→            if (!telnyxClient) {
  1993→                await initTelnyxSDK();
  1994→            } else if (!activeCall) {
  1995→                startCall();
  1996→            } else {
  1997→                endCall();
  1998→            }
  1999→        }
  2000→
  2001→        /**
  2002→         * Ignite the Raw Zero-Dependency Telnyx SDK with Australian Nodes
  2003→         */
  2004→        async function initTelnyxSDK() {
  2005→            setFabCallState(false);
  2006→            const SDK = window.TelnyxWebRTC;
  2007→            if (!SDK || !SDK.TelnyxRTC) {
  2008→                console.error("AgileAdapt Error: SDK Failed to Load");
  2009→                return;
  2010→            }
  2011→
  2012→            try {
  2013→                if (!document.getElementById('agile-sink')) {
  2014→                    const audio = document.createElement('audio');
  2015→                    audio.id = 'agile-sink';
  2016→                    audio.autoplay = true;
  2017→                    audio.playsInline = true;
  2018→                    audio.style.display = 'none';
  2019→                    document.body.appendChild(audio);
  2020→                }
  2021→
  2022→                const response = await fetch('http://localhost:3000/api/orchestration/token', { method: 'POST' });
  2023→                const turnData = await response.json();
  2024→
  2025→                telnyxClient = new SDK.TelnyxRTC({
  2026→                    env: 'production',
  2027→                    anonymous_login: {
  2028→                        target_type: 'ai_assistant',
  2029→                        target_id: TELNYX_AGENT_ID
  2030→                    },
  2031→                    remoteElement: 'agile-sink',
  2032→                    iceServers: [
  2033→                        { urls: "stun:stun.telnyx.com:3843" },
  2034→                        {
  2035→                            urls: "turn:turn.telnyx.com:443?transport=tcp",
  2036→                            username: turnData.turn.username,
  2037→                            credential: turnData.turn.password
  2038→                        }
  2039→                    ],
  2040→                    iceTransportPolicy: "all"
  2041→                });
  2042→
  2043→                telnyxClient.on('telnyx.ready', function () {
  2044→                    console.log("AgileAdapt: Secure WebRTC environment initialized.");
  2045→                    startCall();
  2046→                });
  2047→
  2048→                telnyxClient.on('telnyx.notification', function (n) {
  2049→                    if (n.type === 'callUpdate' && n.call) {
  2050→                        if (n.call.state === 'active') {
  2051→                            setFabCallState(true);
  2052→                        } else if (n.call.state === 'destroy' || n.call.state === 'hangup') {
  2053→                            setFabCallState(false);
  2054→                            activeCall = null;
  2055→                        }
  2056→                    }
  2057→                });
  2058→
  2059→                telnyxClient.on('telnyx.error', function (err) {
  2060→                    console.error("Telnyx SDK Error:", err);
  2061→                    setFabCallState(false);
  2062→                });
  2063→
  2064→                telnyxClient.connect();
  2065→            } catch (err) {
  2066→                console.error("Pipeline initiation failed:", err);
  2067→                setFabCallState(false);
  2068→            }
  2069→        }
  2070→
  2071→        function startCall() {
  2072→            if (telnyxClient && !activeCall) {
  2073→                activeCall = telnyxClient.newCall({
  2074→                    destinationNumber: '',
  2075→                    callerName: 'Prospect',
  2076→                    callerNumber: 'anonymous',
  2077→                    audio: true,
  2078→                    video: false,
  2079→                    customHeaders: {
  2080→                        'X-Prospect-Source': 'Organic-Web'
  2081→                    }
  2082→                });
  2083→            }
  2084→        }
  2085→
  2086→        function endCall() {
  2087→            if (activeCall) {
  2088→                try { activeCall.hangup(); } catch (e) { }
  2089→                activeCall = null;
  2090→            }
  2091→            setFabCallState(false);
  2092→        }
  2093→
  2094→        /**
  2095→         * Show HTTPS diagnostic toast notification.
  2096→         */
  2097→        function showHttpsToast() {
  2098→            var root = document.getElementById('voice-widget-root');
  2099→            var existingToast = document.getElementById('https-toast');
  2100→
  2101→            if (existingToast) {
  2102→                existingToast.remove();
  2103→            }
  2104→
  2105→            var toast = document.createElement('div');
  2106→            toast.className = 'https-toast';
  2107→            toast.id = 'https-toast';
  2108→            toast.textContent = 'Voice requires HTTPS. Serving locally or deploying to Netlify will enable the live voice demo.';
  2109→            root.appendChild(toast);
  2110→
  2111→            setTimeout(function () {
  2112→                toast.classList.add('visible');
  2113→            }, 50);
  2114→
  2115→            setTimeout(function () {
  2116→                toast.classList.remove('visible');
  2117→                setTimeout(function () {
  2118→                    toast.remove();
  2119→                }, 300);
  2120→            }, 6000);
  2121→        }
  2122→
  2123→        /**
  2124→         * Update the FAB button visual state based on call status.
  2125→         */
  2126→        function setFabCallState(inCall) {
  2127→            voiceWidgetState.inCall = inCall;
  2128→            var fab = voiceWidgetState.fabEl;
  2129→            if (!fab) return;
  2130→            if (inCall) {
  2131→                fab.classList.add('in-call');
  2132→                fab.setAttribute('aria-label', 'End voice call');
  2133→            } else {
  2134→                fab.classList.remove('in-call');
  2135→                fab.setAttribute('aria-label', 'Talk to our AI voice assistant');
  2136→            }
  2137→        }
  2138→
  2139→        /**
  2140→         * Main initialization for the floating voice widget.
  2141→         */
  2142→        function initVoiceWidget() {
  2143→            buildVoiceWidget();
  2144→
  2145→            var fab = voiceWidgetState.fabEl;
  2146→            var label = voiceWidgetState.fabLabelEl;
  2147→
  2148→            // FAB click: trigger the Telnyx widget's WebRTC call
  2149→            fab.addEventListener('click', function () {
  2150→                label.classList.add('hidden');
  2151→                triggerTelnyxWidget();
  2152→            });
  2153→
  2154→            // Auto-hide "Try me!" label after 6 seconds
  2155→            setTimeout(function () {
  2156→                label.classList.add('hidden');
  2157→            }, 6000);
  2158→
  2159→            if (window.lucide) {
  2160→                lucide.createIcons();
  2161→            }
  2162→        }
  2163→
  2164→        // ============================================
  2165→        // INSTANT DEMO SECTION
  2166→        // ============================================
  2167→        function initInstantDemo() {
  2168→            var btn = document.getElementById('demo-generate-btn');
  2169→            var input = document.getElementById('demo-url-input');
  2170→            var progressWrap = document.getElementById('demo-progress');
  2171→            var resultWrap = document.getElementById('demo-result');
  2172→
  2173→            btn.addEventListener('click', function () {
  2174→                var url = input.value.trim();
  2175→                if (!url) {
  2176→                    input.focus();
  2177→                    return;
  2178→                }
  2179→                // Normalize
  2180→                if (url.indexOf('http') !== 0) {
  2181→                    url = 'https://' + url;
  2182→                }
  2183→
  2184→                // Extract domain for display
  2185→                var domain = url;
  2186→                try {
  2187→                    domain = new URL(url).hostname;
  2188→                } catch (e) {
  2189→                    domain = url.replace(/https?:\/\//, '').split('/')[0];
  2190→                }
  2191→                var businessName = domain.replace(/^www\./, '').split('.')[0];
  2192→                businessName = businessName.charAt(0).toUpperCase() + businessName.slice(1);
  2193→
  2194→                btn.disabled = true;
  2195→                resultWrap.classList.remove('visible');
  2196→
  2197→                // Build progress steps
  2198→                while (progressWrap.firstChild) progressWrap.removeChild(progressWrap.firstChild);
  2199→
  2200→                var steps = [
  2201→                    'Analyzing ' + domain + '...',
  2202→                    'Extracting business information...',
  2203→                    'Generating your AI assistant...',
  2204→                    'Your voice agent is ready!'
  2205→                ];
  2206→
  2207→                var stepEls = [];
  2208→                steps.forEach(function (text, i) {
  2209→                    var step = document.createElement('div');
  2210→                    step.className = 'demo-step pending';
  2211→
  2212→                    var icon = document.createElement('div');
  2213→                    icon.className = 'demo-step-icon';
  2214→                    icon.textContent = (i + 1).toString();
  2215→
  2216→                    var label = document.createElement('span');
  2217→                    label.className = 'demo-step-text';
  2218→                    label.textContent = text;
  2219→
  2220→                    step.appendChild(icon);
  2221→                    step.appendChild(label);
  2222→                    progressWrap.appendChild(step);
  2223→                    stepEls.push(step);
  2224→                });
  2225→
  2226→                progressWrap.classList.add('visible');
  2227→
  2228→                // Animate through steps
  2229→                var currentStep = 0;
  2230→
  2231→                function advanceStep() {
  2232→                    if (currentStep > 0) {
  2233→                        stepEls[currentStep - 1].className = 'demo-step done';
  2234→                        var doneIcon = stepEls[currentStep - 1].querySelector('.demo-step-icon');
  2235→                        doneIcon.textContent = '\u2713';
  2236→                    }
  2237→
  2238→                    if (currentStep < stepEls.length) {
  2239→                        stepEls[currentStep].className = 'demo-step active';
  2240→                        currentStep++;
  2241→                        var delay = currentStep === stepEls.length ? 800 : 1200;
  2242→                        setTimeout(advanceStep, delay);
  2243→                    } else {
  2244→                        // All done, show result
  2245→                        showDemoResult(domain, businessName);
  2246→                        btn.disabled = false;
  2247→                    }
  2248→                }
  2249→
  2250→                advanceStep();
  2251→            });
  2252→        }
  2253→
  2254→        function showDemoResult(domain, businessName) {
  2255→            var resultWrap = document.getElementById('demo-result');
  2256→            while (resultWrap.firstChild) resultWrap.removeChild(resultWrap.firstChild);
  2257→
  2258→            var browser = document.createElement('div');
  2259→            browser.className = 'demo-result-browser';
  2260→
  2261→            // Browser header with dots
  2262→            var bHeader = document.createElement('div');
  2263→            bHeader.className = 'demo-result-header';
  2264→
  2265→            var dotR = document.createElement('div');
  2266→            dotR.className = 'browser-dot dot-red';
  2267→            var dotY = document.createElement('div');
  2268→            dotY.className = 'browser-dot dot-yellow';
  2269→            var dotG = document.createElement('div');
  2270→            dotG.className = 'browser-dot dot-green';
  2271→
  2272→            var urlBar = document.createElement('span');
  2273→            urlBar.style.cssText = 'color: #94A3B8; font-size: 13px; margin-left: 12px;';
  2274→            urlBar.textContent = domain;
  2275→
  2276→            bHeader.appendChild(dotR);
  2277→            bHeader.appendChild(dotY);
  2278→            bHeader.appendChild(dotG);
  2279→            bHeader.appendChild(urlBar);
  2280→            browser.appendChild(bHeader);
  2281→
  2282→            // Body with realistic site mock
  2283→            var bBody = document.createElement('div');
  2284→            bBody.className = 'demo-result-body';
  2285→
  2286→            // Mock header
  2287→            var siteHeader = document.createElement('div');
  2288→            siteHeader.className = 'demo-site-header';
  2289→
  2290→            var siteLogo = document.createElement('div');
  2291→            siteLogo.className = 'demo-site-logo';
  2292→            siteLogo.textContent = businessName;
  2293→
  2294→            var siteNav = document.createElement('div');
  2295→            siteNav.className = 'demo-site-nav';
  2296→            siteNav.textContent = 'Home | About | Services | Contact';
  2297→
  2298→            siteHeader.appendChild(siteLogo);
  2299→            siteHeader.appendChild(siteNav);
  2300→            bBody.appendChild(siteHeader);
  2301→
  2302→            // Mock hero section
  2303→            var siteHero = document.createElement('div');
  2304→            siteHero.className = 'demo-site-hero';
  2305→
  2306→            var heroTitle = document.createElement('div');
  2307→            heroTitle.className = 'demo-site-hero-title';
  2308→            heroTitle.textContent = 'Welcome to ' + businessName;
  2309→
  2310→            var heroSubtitle = document.createElement('div');
  2311→            heroSubtitle.className = 'demo-site-hero-subtitle';
  2312→            heroSubtitle.textContent = 'Your trusted partner for quality service';
  2313→
  2314→            siteHero.appendChild(heroTitle);
  2315→            siteHero.appendChild(heroSubtitle);
  2316→
  2317→            // Mock services grid
  2318→            var servicesGrid = document.createElement('div');
  2319→            servicesGrid.className = 'demo-site-services';
  2320→
  2321→            var services = [
  2322→                { icon: '⚙', label: 'Service One' },
  2323→                { icon: '🛠', label: 'Service Two' },
  2324→                { icon: '📞', label: 'Support' }
  2325→            ];
  2326→
  2327→            services.forEach(function (svc) {
  2328→                var box = document.createElement('div');
  2329→                box.className = 'demo-site-service-box';
  2330→
  2331→                var icon = document.createElement('div');
  2332→                icon.className = 'demo-site-service-icon';
  2333→                icon.textContent = svc.icon;
  2334→
  2335→                var label = document.createElement('div');
  2336→                label.className = 'demo-site-service-label';
  2337→                label.textContent = svc.label;
  2338→
  2339→                box.appendChild(icon);
  2340→                box.appendChild(label);
  2341→                servicesGrid.appendChild(box);
  2342→            });
  2343→
  2344→            siteHero.appendChild(servicesGrid);
  2345→            bBody.appendChild(siteHero);
  2346→
  2347→            // Overlaid widget (pulsing at bottom-right)
  2348→            var widget = document.createElement('div');
  2349→            widget.className = 'demo-result-widget';
  2350→            widget.appendChild(micSVG(24, 24));
  2351→            bBody.appendChild(widget);
  2352→
  2353→            browser.appendChild(bBody);
  2354→
  2355→            // Info section
  2356→            var info = document.createElement('div');
  2357→            info.className = 'demo-result-info';
  2358→
  2359→            var infoTitle = document.createElement('div');
  2360→            infoTitle.className = 'demo-result-info-title';
  2361→            infoTitle.textContent = 'Your AI assistant is ready to answer questions about ' + businessName;
  2362→            info.appendChild(infoTitle);
  2363→
  2364→            var ctas = document.createElement('div');
  2365→            ctas.className = 'demo-result-ctas';
  2366→
  2367→            var primaryBtn = document.createElement('button');
  2368→            primaryBtn.className = 'demo-result-cta-primary';
  2369→            primaryBtn.textContent = 'Talk to Your Agent Now';
  2370→            primaryBtn.addEventListener('click', function () {
  2371→                // Trigger the Telnyx WebRTC voice call via our FAB
  2372→                var fab = document.getElementById('voice-fab');
  2373→                if (fab) {
  2374→                    fab.click();
  2375→                }
  2376→            });
  2377→
  2378→            var secondaryLink = document.createElement('a');
  2379→            secondaryLink.className = 'demo-result-cta-secondary';
  2380→            secondaryLink.href = '#pricing';
  2381→            secondaryLink.textContent = 'Like what you see? Get this on your website today \u2192';
  2382→
  2383→            ctas.appendChild(primaryBtn);
  2384→            ctas.appendChild(secondaryLink);
  2385→            info.appendChild(ctas);
  2386→
  2387→            browser.appendChild(info);
  2388→            resultWrap.appendChild(browser);
  2389→
  2390→            // Add disclaimer note after the browser mock
  2391→            var disclaimerNote = document.createElement('div');
  2392→            disclaimerNote.style.cssText = 'margin-top: 16px; padding: 16px; background: rgba(30,31,35,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; text-align: center; font-size: 14px; color: #94A3B8; line-height: 1.6;';
  2393→            disclaimerNote.textContent = 'This is a preview. The actual widget on your site will use real AI trained on YOUR website content, answering YOUR customers\' questions with a natural Australian voice.';
  2394→            resultWrap.appendChild(disclaimerNote);
  2395→
  2396→            resultWrap.classList.add('visible');
  2397→
  2398→            if (window.lucide) {
  2399→                lucide.createIcons();
  2400→            }
  2401→        }
  2402→
  2403→        // Initialize
  2404→        document.addEventListener('DOMContentLoaded', function () {
  2405→            renderValueStack();
  2406→            renderSteps();
  2407→            renderDemo();
  2408→            renderPricing();
  2409→            renderFeatures();
  2410→            renderPlatforms();
  2411→            renderFAQ();
  2412→            initVoiceWidget();
  2413→            initInstantDemo();
  2414→        });
  2415→    </script>
  2416→</body>
  2417→
  2418→</html>

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/auto_respawn.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/observability_logger.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/session_heartbeat.py