PageSourceSearch

https://smartclinician.ai/

html smartclinician.ai collected 2026-10-05 15:05:35 UTC 67,293 bytes, 1,759 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="description" content="Smart Clinician - AI-Powered Clinical Decision Support System. Advanced differential diagnosis, treatment planning, and evidence-based medical guidance.">
7    <meta name="keywords" content="medical AI, clinical decision support, differential diagnosis, treatment planning, medical software">
8    <title>Smart Clinician AI - Intelligent Clinical Decision Support</title>
9
10    <!-- PWA Meta Tags -->
11    <meta name="theme-color" content="#1a73e8">
12    <meta name="mobile-web-app-capable" content="yes">
13    <meta name="apple-mobile-web-app-capable" content="yes">
14    <meta name="apple-mobile-web-app-status-bar-style" content="default">
15    <meta name="apple-mobile-web-app-title" content="SmartClinician">
16    <link rel="manifest" href="/manifest.json">
17
18    <!-- Apple Touch Icons -->
19    <link rel="apple-touch-icon" sizes="72x72" href="/assets/icons/icon-72x72.png">
20    <link rel="apple-touch-icon" sizes="96x96" href="/assets/icons/icon-96x96.png">
21    <link rel="apple-touch-icon" sizes="128x128" href="/assets/icons/icon-128x128.png">
22    <link rel="apple-touch-icon" sizes="144x144" href="/assets/icons/icon-144x144.png">
23    <link rel="apple-touch-icon" sizes="152x152" href="/assets/icons/icon-152x152.png">
24    <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/icon-192x192.png">
25    <link rel="apple-touch-icon" sizes="192x192" href="/assets/icons/icon-192x192.png">
26
27    <!-- Favicon -->
28    <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/icon-72x72.png">
29    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/icon-72x72.png">
30
31    <!-- Fonts -->
32    <link rel="preconnect" href="https://fonts.googleapis.com">
33    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
34    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
35
36    <style>
37        * {
38            margin: 0;
39            padding: 0;
40            box-sizing: border-box;
41        }
42
43        :root {
44            --primary: #1a73e8;
45            --primary-deep: #0d47a1;
46            --accent: #06b6d4;
47            --ink: #0f172a;
48            --ink-soft: #334155;
49            --muted: #64748b;
50            --line: #e2e8f0;
51            --surface: #f8fafc;
52            --card: #ffffff;
53            --success: #059669;
54            --warn: #d97706;
55            --danger: #dc2626;
56            --grad: linear-gradient(120deg, #1a73e8 0%, #06b6d4 100%);
57            --grad-deep: linear-gradient(135deg, #0b1f4b 0%, #123a8f 55%, #0e7490 100%);
58            --radius: 18px;
59            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
60            --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.10);
61            --shadow-lg: 0 20px 50px rgba(11, 31, 75, 0.18);
62        }
63
64        html { scroll-behavior: smooth; }
65
66        body {
67            font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
68            line-height: 1.6;
69            color: var(--ink);
70            background: var(--card);
71            -webkit-font-smoothing: antialiased;
72        }
73
74        h1, h2, h3, .logo {
75            font-family: 'Sora', 'Inter', sans-serif;
76            letter-spacing: -0.02em;
77        }
78
79        .container {
80            max-width: 1180px;
81            margin: 0 auto;
82            padding: 0 24px;
83        }
84
85        /* ============ Buttons ============ */
86        .btn {
87            display: inline-flex;
88            align-items: center;
89            justify-content: center;
90            gap: 8px;
91            padding: 13px 26px;
92            border-radius: 12px;
93            font-weight: 600;
94            font-size: 15.5px;
95            text-decoration: none;
96            transition: all 0.25s ease;
97            border: none;
98            cursor: pointer;
99            font-family: 'Inter', sans-serif;
100        }
101
102        .btn-primary {
103            background: var(--grad);
104            color: #fff;
105            box-shadow: 0 6px 18px rgba(26, 115, 232, 0.35);
106        }
107
108        .btn-primary:hover {
109            transform: translateY(-2px);
110            box-shadow: 0 12px 28px rgba(26, 115, 232, 0.45);
111        }
112
113        .btn-outline {
114            background: transparent;
115            color: var(--primary);
116            border: 1.5px solid #bcd3f5;
117        }
118
119        .btn-outline:hover {
120            border-color: var(--primary);
121            background: #eff6ff;
122        }
123
124        .btn-ghost-light {
125            background: rgba(255, 255, 255, 0.12);
126            color: #fff;
127            border: 1.5px solid rgba(255, 255, 255, 0.45);
128            backdrop-filter: blur(4px);
129        }
130
131        .btn-ghost-light:hover {
132            background: rgba(255, 255, 255, 0.22);
133            border-color: #fff;
134        }
135
136        .btn-white {
137            background: #fff;
138            color: var(--primary-deep);
139            box-shadow: 0 6px 18px rgba(2, 8, 30, 0.25);
140        }
141
142        .btn-white:hover {
143            transform: translateY(-2px);
144            box-shadow: 0 12px 30px rgba(2, 8, 30, 0.35);
145        }
146
147        .btn-lg { padding: 16px 34px; font-size: 17px; }
148        .btn-block { width: 100%; }
149
150        /* ============ Navigation ============ */
151        nav {
152            position: sticky;
153            top: 0;
154            z-index: 1000;
155            background: rgba(255, 255, 255, 0.85);
156            backdrop-filter: blur(14px);
157            -webkit-backdrop-filter: blur(14px);
158            border-bottom: 1px solid var(--line);
159        }
160
161        .nav-container {
162            max-width: 1180px;
163            margin: 0 auto;
164            padding: 14px 24px;
165            display: flex;
166            justify-content: space-between;
167            align-items: center;
168            gap: 16px;
169        }
170
171        .logo {
172            display: flex;
173            align-items: center;
174            gap: 10px;
175            font-size: 21px;
176            font-weight: 700;
177            color: var(--ink);
178            text-decoration: none;
179            white-space: nowrap;
180        }
181
182        .logo-icon {
183            width: 40px;
184            height: 40px;
185            border-radius: 11px;
186            background: var(--grad);
187            display: inline-flex;
188            align-items: center;
189            justify-content: center;
190            font-size: 21px;
191            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
192        }
193
194        .logo .brand-ai { color: var(--primary); }
195
196        .nav-links {
197            display: flex;
198            gap: 26px;
199            align-items: center;
200        }
201
202        .nav-links a:not(.btn) {
203            color: var(--ink-soft);
204            text-decoration: none;
205            font-weight: 500;
206            font-size: 15px;
207            transition: color 0.2s;
208        }
209
210        .nav-links a:not(.btn):hover { color: var(--primary); }
211
212        .nav-links .btn { padding: 10px 20px; font-size: 14.5px; }
213
214        .nav-toggle {
215            display: none;
216            background: none;
217            border: none;
218            cursor: pointer;
219            padding: 6px;
220            flex-direction: column;
221            gap: 5px;
222        }
223
224        .nav-toggle span {
225            width: 24px;
226            height: 2.5px;
227            background: var(--ink);
228            border-radius: 2px;
229            transition: all 0.3s;
230        }
231
232        .mobile-menu {
233            display: none;
234            background: #fff;
235            border-bottom: 1px solid var(--line);
236            padding: 10px 24px 20px;
237        }
238
239        .mobile-menu.open { display: block; }
240
241        .mobile-menu a {
242            display: block;
243            padding: 12px 4px;
244            color: var(--ink-soft);
245            text-decoration: none;
246            font-weight: 500;
247            border-bottom: 1px solid var(--surface);
248        }
249
250        .mobile-menu .btn { margin-top: 14px; width: 100%; }
251
252        /* ============ Hero ============ */
253        .hero {
254            position: relative;
255            background: var(--grad-deep);
256            color: #fff;
257            padding: 110px 24px 130px;
258            overflow: hidden;
259        }
260
261        .hero::before,
262        .hero::after {
263            content: "";
264            position: absolute;
265            border-radius: 50%;
266            filter: blur(80px);
267            opacity: 0.45;
268            pointer-events: none;
269        }
270
271        .hero::before {
272            width: 560px;
273            height: 560px;
274            background: #06b6d4;
275            top: -220px;
276            right: -140px;
277        }
278
279        .hero::after {
280            width: 480px;
281            height: 480px;
282            background: #4f46e5;
283            bottom: -240px;
284            left: -120px;
285        }
286
287        .hero-grid-lines {
288            position: absolute;
289            inset: 0;
290            background-image:
291                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
292                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
293            background-size: 56px 56px;
294            mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
295            -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
296            pointer-events: none;
297        }
298
299        .hero-container {
300            position: relative;
301            max-width: 940px;
302            margin: 0 auto;
303            text-align: center;
304            z-index: 1;
305        }
306
307        .hero-badge {
308            display: inline-flex;
309            align-items: center;
310            gap: 8px;
311            background: rgba(255, 255, 255, 0.12);
312            border: 1px solid rgba(255, 255, 255, 0.25);
313            border-radius: 999px;
314            padding: 7px 18px;
315            font-size: 13.5px;
316            font-weight: 600;
317            letter-spacing: 0.02em;
318            margin-bottom: 28px;
319            backdrop-filter: blur(6px);
320        }
321
322        .hero-badge .dot {
323            width: 8px;
324            height: 8px;
325            border-radius: 50%;
326            background: #34d399;
327            box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
328        }
329
330        .hero h1 {
331            font-size: clamp(38px, 6vw, 62px);
332            font-weight: 800;
333            line-height: 1.12;
334            margin-bottom: 24px;
335        }
336
337        .hero h1 .grad-text {
338            background: linear-gradient(90deg, #7dd3fc, #5eead4);
339            -webkit-background-clip: text;
340            background-clip: text;
341            color: transparent;
342        }
343
344        .hero p.lede {
345            font-size: clamp(17px, 2.2vw, 21px);
346            color: rgba(255, 255, 255, 0.88);
347            max-width: 760px;
348            margin: 0 auto 40px;
349            line-height: 1.65;
350        }
351
352        .hero-buttons {
353            display: flex;
354            gap: 16px;
355            justify-content: center;
356            flex-wrap: wrap;
357            margin-bottom: 52px;
358        }
359
360        .hero-trust {
361            display: flex;
362            gap: 12px;
363            justify-content: center;
364            flex-wrap: wrap;
365        }
366
367        .trust-chip {
368            display: inline-flex;
369            align-items: center;
370            gap: 7px;
371            background: rgba(255, 255, 255, 0.08);
372            border: 1px solid rgba(255, 255, 255, 0.18);
373            border-radius: 999px;
374            padding: 8px 16px;
375            font-size: 13px;
376            font-weight: 500;
377            color: rgba(255, 255, 255, 0.92);
378        }
379
380        /* ============ Stats ============ */
381        .stats {
382            position: relative;
383            margin-top: -56px;
384            padding: 0 24px;
385            z-index: 2;
386        }
387
388        .stats-card {
389            max-width: 1180px;
390            margin: 0 auto;
391            background: #fff;
392            border: 1px solid var(--line);
393            border-radius: var(--radius);
394            box-shadow: var(--shadow-lg);
395            display: grid;
396            grid-template-columns: repeat(4, 1fr);
397            overflow: hidden;
398        }
399
400        .stat-item {
401            padding: 30px 20px;
402            text-align: center;
403            border-right: 1px solid var(--line);
404        }
405
406        .stat-item:last-child { border-right: none; }
407
408        .stat-number {
409            font-family: 'Sora', sans-serif;
410            font-size: 34px;
411            font-weight: 800;
412            background: var(--grad);
413            -webkit-background-clip: text;
414            background-clip: text;
415            color: transparent;
416            margin-bottom: 4px;
417        }
418
419        .stat-label {
420            font-size: 14px;
421            color: var(--muted);
422            font-weight: 500;
423        }
424
425        /* ============ Sections ============ */
426        section { padding: 96px 24px; }
427
428        .section-eyebrow {
429            display: inline-block;
430            font-size: 13px;
431            font-weight: 700;
432            letter-spacing: 0.12em;
433            text-transform: uppercase;
434            color: var(--primary);
435            background: #eff6ff;
436            border: 1px solid #dbeafe;
437            border-radius: 999px;
438            padding: 6px 16px;
439            margin-bottom: 18px;
440        }
441
442        .section-head {
443            text-align: center;
444            max-width: 720px;
445            margin: 0 auto 60px;
446        }
447
448        .section-title {
449            font-size: clamp(30px, 4vw, 42px);
450            font-weight: 800;
451            line-height: 1.18;
452            margin-bottom: 16px;
453            color: var(--ink);
454        }
455
456        .section-sub {
457            font-size: 17.5px;
458            color: var(--muted);
459            line-height: 1.7;
460        }
461
462        /* ============ Features ============ */
463        .features { background: #fff; padding-top: 110px; }
464
465        .features-grid {
466            display: grid;
467            grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
468            gap: 26px;
469        }
470
471        .feature-card {
472            position: relative;
473            background: var(--card);
474            border: 1px solid var(--line);
475            border-radius: var(--radius);
476            padding: 34px 30px 30px;
477            transition: all 0.3s ease;
478            box-shadow: var(--shadow-sm);
479        }
480
481        .feature-card:hover {
482            transform: translateY(-6px);
483            box-shadow: var(--shadow-md);
484            border-color: #c7dbf7;
485        }
486
487        .feature-top {
488            display: flex;
489            align-items: center;
490            justify-content: space-between;
491            margin-bottom: 20px;
492        }
493
494        .feature-icon {
495            width: 56px;
496            height: 56px;
497            border-radius: 15px;
498            display: inline-flex;
499            align-items: center;
500            justify-content: center;
501            font-size: 27px;
502            background: linear-gradient(135deg, #eff6ff, #e0f2fe);
503            border: 1px solid #dbeafe;
504        }
505
506        .credit-chip {
507            font-size: 12px;
508            font-weight: 700;
509            color: var(--primary-deep);
510            background: #eff6ff;
511            border: 1px solid #dbeafe;
512            border-radius: 999px;
513            padding: 5px 12px;
514            white-space: nowrap;
515        }
516
517        .feature-card h3 {
518            font-size: 21px;
519            margin-bottom: 10px;
520            color: var(--ink);
521        }
522
523        .feature-card > p {
524            color: var(--muted);
525            font-size: 15px;
526            line-height: 1.7;
527            margin-bottom: 16px;
528        }
529
530        .feature-list { list-style: none; }
531
532        .feature-list li {
533            padding: 7px 0;
534            color: var(--ink-soft);
535            display: flex;
536            align-items: flex-start;
537            gap: 10px;
538            font-size: 14.5px;
539        }
540
541        .feature-list li::before {
542            content: "✓";
543            color: var(--success);
544            font-weight: 700;
545            font-size: 15px;
546            flex-shrink: 0;
547            margin-top: 1px;
548        }
549
550        .tier-tag {
551            display: inline-block;
552            margin-top: 16px;
553            font-size: 12.5px;
554            font-weight: 600;
555            border-radius: 999px;
556            padding: 5px 13px;
557        }
558
559        .tier-tag.free {
560            color: var(--success);
561            background: #ecfdf5;
562            border: 1px solid #d1fae5;
563        }
564
565        .tier-tag.paid {
566            color: #7c3aed;
567            background: #f5f3ff;
568            border: 1px solid #ede9fe;
569        }
570
571        /* ============ How It Works ============ */
572        .how { background: var(--surface); }
573
574        .how-grid {
575            display: grid;
576            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
577            gap: 26px;
578            max-width: 1060px;
579            margin: 0 auto;
580        }
581
582        .how-card {
583            background: #fff;
584            border: 1px solid var(--line);
585            border-radius: var(--radius);
586            padding: 36px 30px;
587            text-align: center;
588            box-shadow: var(--shadow-sm);
589        }
590
591        .how-step {
592            width: 46px;
593            height: 46px;
594            margin: 0 auto 20px;
595            border-radius: 50%;
596            background: var(--grad);
597            color: #fff;
598            display: flex;
599            align-items: center;
600            justify-content: center;
601            font-family: 'Sora', sans-serif;
602            font-weight: 700;
603            font-size: 19px;
604            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.35);
605        }
606
607        .how-card h3 { font-size: 19px; margin-bottom: 10px; }
608
609        .how-card p {
610            font-size: 14.5px;
611            color: var(--muted);
612            line-height: 1.7;
613        }
614
615        /* ============ Demos ============ */
616        .demos { background: #fff; }
617
618        .video-card {
619            position: relative;
620            width: 100%;
621            height: 300px;
622            background: #0b1220;
623            overflow: hidden;
624        }
625
626        .video-card video {
627            width: 100%;
628            height: 100%;
629            object-fit: contain;
630            display: block;
631            position: absolute;
632            top: 0;
633            left: 0;
634            z-index: 1;
635            background: #0b1220;
636        }
637
638        .hidden { display: none !important; }
639
640        .video-overlay {
641            position: absolute;
642            inset: 0;
643            background: linear-gradient(135deg, rgba(13, 47, 110, 0.92) 0%, rgba(8, 96, 125, 0.92) 100%);
644            display: flex;
645            flex-direction: column;
646            align-items: center;
647            justify-content: center;
648            color: #fff;
649            cursor: pointer;
650            transition: all 0.3s;
651            z-index: 2;
652        }
653
654        .video-overlay:hover { filter: brightness(1.12); }
655
656        .video-play-icon {
657            width: 66px;
658            height: 66px;
659            border-radius: 50%;
660            background: rgba(255, 255, 255, 0.16);
661            border: 2px solid rgba(255, 255, 255, 0.7);
662            display: flex;
663            align-items: center;
664            justify-content: center;
665            font-size: 24px;
666            margin-bottom: 16px;
667            transition: transform 0.25s;
668        }
669
670        .video-overlay:hover .video-play-icon { transform: scale(1.1); }
671
672        .video-play-text { font-size: 17px; font-weight: 600; }
673
674        .featured-demo {
675            max-width: 980px;
676            margin: 0 auto 64px;
677            border-radius: var(--radius);
678            overflow: hidden;
679            box-shadow: var(--shadow-lg);
680            border: 1px solid var(--line);
681        }
682
683        .featured-demo .video-card { height: 551px; }
684
685        .demos-subtitle {
686            text-align: center;
687            font-size: 23px;
688            font-weight: 700;
689            margin-bottom: 34px;
690            color: var(--ink);
691        }
692
693        .screenshots-grid {
694            display: grid;
695            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
696            gap: 26px;
697        }
698
699        .screenshot-card {
700            background: #fff;
701            border: 1px solid var(--line);
702            border-radius: var(--radius);
703            overflow: hidden;
704            box-shadow: var(--shadow-sm);
705            transition: all 0.3s;
706        }
707
708        .screenshot-card:hover {
709            transform: translateY(-5px);
710            box-shadow: var(--shadow-md);
711        }
712
713        .screenshot-info { padding: 22px 24px; }
714
715        .screenshot-info h3 {
716            font-size: 18px;
717            margin-bottom: 8px;
718            color: var(--ink);
719        }
720
721        .screenshot-info p {
722            color: var(--muted);
723            font-size: 14px;
724            line-height: 1.65;
725        }
726
727        /* ============ Pricing ============ */
728        .pricing { background: var(--surface); }
729
730        .billing-switch {
731            display: inline-flex;
732            background: #e9eef5;
733            border-radius: 999px;
734            padding: 5px;
735            margin: 0 auto 48px;
736        }
737
738        .billing-toggle {
739            padding: 10px 28px;
740            border: none;
741            border-radius: 999px;
742            background: transparent;
743            cursor: pointer;
744            font-weight: 600;
745            font-size: 14.5px;
746            font-family: 'Inter', sans-serif;
747            color: var(--ink-soft);
748            transition: all 0.25s;
749        }
750
751        .billing-toggle.active {
752            background: #fff;
753            color: var(--ink);
754            box-shadow: var(--shadow-sm);
755        }
756
757        .save-pill {
758            background: #059669;
759            color: #fff;
760            padding: 2px 9px;
761            border-radius: 999px;
762            font-size: 11px;
763            margin-left: 6px;
764        }
765
766        .pricing-grid {
767            display: grid;
768            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
769            gap: 24px;
770            max-width: 1180px;
771            margin: 0 auto;
772        }
773
774        .pricing-card {
775            position: relative;
776            background: #fff;
777            border: 1px solid var(--line);
778            border-radius: var(--radius);
779            padding: 36px 30px 30px;
780            display: flex;
781            flex-direction: column;
782            box-shadow: var(--shadow-sm);
783            transition: all 0.3s;
784        }
785
786        .pricing-card:hover {
787            transform: translateY(-6px);
788            box-shadow: var(--shadow-md);
789        }
790
791        .pricing-card.featured {
792            border: 2px solid var(--primary);
793            box-shadow: 0 16px 44px rgba(26, 115, 232, 0.18);
794        }
795
796        .popular-ribbon {
797            position: absolute;
798            top: -14px;
799            left: 50%;
800            transform: translateX(-50%);
801            background: var(--grad);
802            color: #fff;
803            padding: 5px 18px;
804            border-radius: 999px;
805            font-size: 11.5px;
806            font-weight: 700;
807            letter-spacing: 0.06em;
808            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35);
809            white-space: nowrap;
810        }
811
812        .plan-name {
813            font-size: 19px;
814            font-weight: 700;
815            margin-bottom: 12px;
816            color: var(--ink);
817        }
818
819        .plan-price {
820            font-family: 'Sora', sans-serif;
821            font-size: 42px;
822            font-weight: 800;
823            color: var(--ink);
824            line-height: 1.1;
825        }
826
827        .plan-price .per {
828            font-size: 16px;
829            font-weight: 500;
830            color: var(--muted);
831        }
832
833        .plan-period {
834            color: var(--muted);
835            font-size: 13.5px;
836            margin: 8px 0 24px;
837            min-height: 20px;
838        }
839
840        .plan-features {
841            list-style: none;
842            margin-bottom: 28px;
843            text-align: left;
844            flex-grow: 1;
845        }
846
847        .plan-features li {
848            padding: 9px 0;
849            border-bottom: 1px solid var(--surface);
850            display: flex;
851            align-items: flex-start;
852            gap: 10px;
853            font-size: 14px;
854            color: var(--ink-soft);
855        }
856
857        .plan-features li:last-child { border-bottom: none; }
858
859        .check-icon { color: var(--success); font-weight: 700; flex-shrink: 0; }
860        .x-icon { color: #cbd5e1; font-weight: 700; flex-shrink: 0; }
861        .plan-features li.unavailable { color: #94a3b8; }
862
863        .plan-note {
864            margin-top: 10px;
865            font-size: 12px;
866            color: var(--muted);
867            text-align: center;
868        }
869
870        .pricing-extra {
871            text-align: center;
872            margin-top: 44px;
873            color: var(--muted);
874            font-size: 14.5px;
875            line-height: 2;
876        }
877
878        .pricing-extra strong { color: var(--ink-soft); }
879
880        /* ============ Credit Guide ============ */
881        .credit-guide {
882            max-width: 980px;
883            margin: 56px auto 0;
884            background: #fff;
885            border: 1px solid var(--line);
886            border-radius: var(--radius);
887            padding: 38px 34px;
888            box-shadow: var(--shadow-sm);
889        }
890
891        .credit-guide h3 {
892            text-align: center;
893            font-size: 23px;
894            margin-bottom: 8px;
895        }
896
897        .credit-guide .guide-sub {
898            text-align: center;
899            color: var(--muted);
900            font-size: 14.5px;
901            margin-bottom: 28px;
902        }
903
904        .credit-costs-grid {
905            display: grid;
906            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
907            gap: 12px;
908            margin-bottom: 30px;
909        }
910
911        .credit-cost-item {
912            background: var(--surface);
913            border: 1px solid var(--line);
914            border-radius: 12px;
915            padding: 14px 12px;
916            text-align: center;
917        }
918
919        .credit-cost-item .cost-action {
920            font-size: 12.5px;
921            font-weight: 600;
922            color: var(--ink-soft);
923            margin-bottom: 4px;
924        }
925
926        .credit-cost-item .cost-value {
927            font-family: 'Sora', sans-serif;
928            font-size: 19px;
929            font-weight: 700;
930            color: var(--primary);
931        }
932
933        .case-examples {
934            display: grid;
935            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
936            gap: 14px;
937        }
938
939        .case-example {
940            border-radius: 12px;
941            padding: 18px;
942            border: 1px solid var(--line);
943        }
944
945        .case-example.light { background: #f0fdf4; border-color: #bbf7d0; }
946        .case-example.standard { background: #fffbeb; border-color: #fde68a; }
947        .case-example.full { background: #fef2f2; border-color: #fecaca; }
948
949        .case-example .case-name {
950            font-weight: 700;
951            font-size: 14.5px;
952            margin-bottom: 5px;
953        }
954
955        .case-example .case-detail {
956            font-size: 13px;
957            color: var(--ink-soft);
958            margin-bottom: 8px;
959        }
960
961        .case-example .case-cost {
962            font-family: 'Sora', sans-serif;
963            font-weight: 700;
964            font-size: 16px;
965        }
966
967        .case-example.light .case-cost { color: var(--success); }
968        .case-example.standard .case-cost { color: var(--warn); }
969        .case-example.full .case-cost { color: var(--danger); }
970
971        /* ============ CTA ============ */
972        .cta {
973            position: relative;
974            background: var(--grad-deep);
975            color: #fff;
976            text-align: center;
977            overflow: hidden;
978        }
979
980        .cta::before {
981            content: "";
982            position: absolute;
983            width: 500px;
984            height: 500px;
985            border-radius: 50%;
986            background: #06b6d4;
987            filter: blur(110px);
988            opacity: 0.35;
989            top: -200px;
990            right: -100px;
991        }
992
993        .cta .container { position: relative; z-index: 1; }
994
995        .cta h2 {
996            font-size: clamp(28px, 4vw, 40px);
997            margin-bottom: 18px;
998            font-weight: 800;
999        }
1000
1001        .cta p {
1002            font-size: 18px;
1003            margin-bottom: 38px;
1004            opacity: 0.92;
1005            max-width: 620px;
1006            margin-left: auto;
1007            margin-right: auto;
1008        }
1009
1010        .cta-buttons {
1011            display: flex;
1012            gap: 16px;
1013            justify-content: center;
1014            flex-wrap: wrap;
1015        }
1016
1017        /* ============ Footer ============ */
1018        footer {
1019            background: #0b1220;
1020            color: #cbd5e1;
1021            padding: 64px 24px 36px;
1022        }
1023
1024        .footer-grid {
1025            max-width: 1180px;
1026            margin: 0 auto 44px;
1027            display: grid;
1028            grid-template-columns: 1.4fr 1fr 1fr;
1029            gap: 48px;
1030        }
1031
1032        .footer-brand .logo { color: #fff; margin-bottom: 18px; }
1033
1034        .footer-brand p {
1035            font-size: 13.5px;
1036            line-height: 1.75;
1037            color: #94a3b8;
1038        }
1039
1040        .footer-col h4 {
1041            color: #fff;
1042            font-size: 14px;
1043            font-weight: 700;
1044            letter-spacing: 0.06em;
1045            text-transform: uppercase;
1046            margin-bottom: 18px;
1047        }
1048
1049        .footer-col a {
1050            display: block;
1051            color: #94a3b8;
1052            text-decoration: none;
1053            font-size: 14.5px;
1054            padding: 5px 0;
1055            transition: color 0.2s;
1056        }
1057
1058        .footer-col a:hover { color: #fff; }
1059
1060        .footer-bottom {
1061            max-width: 1180px;
1062            margin: 0 auto;
1063            border-top: 1px solid #1e293b;
1064            padding-top: 28px;
1065            text-align: center;
1066            font-size: 13px;
1067            color: #64748b;
1068        }
1069
1070        /* ============ Responsive ============ */
1071        @media (max-width: 980px) {
1072            .stats-card { grid-template-columns: repeat(2, 1fr); }
1073            .stat-item:nth-child(2) { border-right: none; }
1074            .stat-item:nth-child(1),
1075            .stat-item:nth-child(2) { border-bottom: 1px solid var(--line); }
1076            .footer-grid { grid-template-columns: 1fr; gap: 32px; }
1077        }
1078
1079        @media (max-width: 860px) {
1080            .nav-links { display: none; }
1081            .nav-toggle { display: flex; }
1082            section { padding: 70px 20px; }
1083            .hero { padding: 80px 20px 110px; }
1084            .featured-demo .video-card { height: 300px; }
1085        }
1086    </style>
1087</head>
1088<body>
1089    <!-- Navigation -->
1090    <nav>
1091        <div class="nav-container">
1092            <a href="/" class="logo">
1093                <span class="logo-icon">🩺</span>
1094                <span>Smart Clinician<span class="brand-ai">.AI</span></span>
1095            </a>
1096            <div class="nav-links" id="nav-links">
1097                <a href="#features">Features</a>
1098                <a href="#how">How It Works</a>
1099                <a href="#demos">Demos</a>
1100                <a href="#pricing">Pricing</a>
1101                <a href="contact.html">Contact</a>
1102                <a href="login.html" class="btn btn-outline">Login</a>
1103                <a href="register.html" class="btn btn-primary">Get Started Free</a>
1104            </div>
1105            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
1106                <span></span><span></span><span></span>
1107            </button>
1108        </div>
1109        <div class="mobile-menu" id="mobile-menu">
1110            <a href="#features">Features</a>
1111            <a href="#how">How It Works</a>
1112            <a href="#demos">Demos</a>
1113            <a href="#pricing">Pricing</a>
1114            <a href="contact.html">Contact</a>
1115            <a href="login.html">Login</a>
1116            <a href="register.html" class="btn btn-primary">Get Started Free</a>
1117        </div>
1118    </nav>
1119
1120    <!-- Hero -->
1121    <header class="hero">
1122        <div class="hero-grid-lines"></div>
1123        <div class="hero-container">
1124            <div class="hero-badge"><span class="dot"></span> 6 specialized AI agents &nbsp;•&nbsp; Evidence-based medicine</div>
1125            <h1>Clinical Decisions,<br><span class="grad-text">Powered by AI</span></h1>
1126            <p class="lede">From differential diagnosis to step-by-step treatment protocols — Smart Clinician combines GPT-4o and DeepSeek models with PubMed-backed evidence to support faster, safer clinical reasoning.</p>
1127            <div class="hero-buttons">
1128                <a href="register.html" class="btn btn-white btn-lg">Start Free — 150 Credits/Month</a>
1129                <a href="#demos" class="btn btn-ghost-light btn-lg">▶ Watch Demos</a>
1130            </div>
1131            <div class="hero-trust">
1132                <span class="trust-chip">🧬 ICD-10 coded outputs</span>
1133                <span class="trust-chip">📚 PubMed &amp; guideline citations</span>
1134                <span class="trust-chip">⚡ Urgency-aware protocols</span>
1135                <span class="trust-chip">🔒 HIPAA-ready architecture</span>
1136            </div>
1137        </div>
1138    </header>
1139
1140    <!-- Stats -->
1141    <div class="stats">
1142        <div class="stats-card">
1143            <div class="stat-item">
1144                <div class="stat-number">6</div>
1145                <div class="stat-label">Specialized AI Agents</div>
1146            </div>
1147            <div class="stat-item">
1148                <div class="stat-number">150</div>
1149                <div class="stat-label">Free Credits Every Month</div>
1150            </div>
1151            <div class="stat-item">
1152                <div class="stat-number">24/7</div>
1153                <div class="stat-label">Always Available</div>
1154            </div>
1155            <div class="stat-item">
1156                <div class="stat-number">3</div>
1157                <div class="stat-label">Treatment Detail Levels</div>
1158            </div>
1159        </div>
1160    </div>
1161
1162    <!-- Features -->
1163    <section class="features" id="features">
1164        <div class="container">
1165            <div class="section-head">
1166                <span class="section-eyebrow">AI Agents</span>
1167                <h2 class="section-title">A Complete Clinical AI Team</h2>
1168                <p class="section-sub">Six purpose-built agents covering the full clinical workflow — each tuned for its task, with transparent credit costs per use.</p>
1169            </div>
1170            <div class="features-grid">
1171                <!-- Diagnosis Pro -->
1172                <div class="feature-card">
1173                    <div class="feature-top">
1174                        <span class="feature-icon">🔍</span>
1175                        <span class="credit-chip">45 credits / case</span>
1176                    </div>
1177                    <h3>Diagnosis Pro</h3>
1178                    <p>Differential diagnosis engine that analyzes patient presentations and generates ranked diagnostic possibilities with confidence scores.</p>
1179                    <ul class="feature-list">
1180                        <li>Multi-specialty support</li>
1181                        <li>ICD-10 coding on every diagnosis</li>
1182                        <li>Recommended investigations &amp; initial management</li>
1183                        <li>Case refinements from 10 credits</li>
1184                    </ul>
1185                    <span class="tier-tag free">Included in Free tier</span>
1186                </div>
1187
1188                <!-- Treatment AI -->
1189                <div class="feature-card">
1190                    <div class="feature-top">
1191                        <span class="feature-icon">💊</span>
1192                        <span class="credit-chip">25 credits / plan</span>
1193                    </div>
1194                    <h3>Treatment AI</h3>
1195                    <p>Urgency-aware treatment protocols — automatically distinguishes emergency, urgent, and routine care with matching timelines.</p>
1196                    <ul class="feature-list">
1197                        <li>Hour-by-hour emergency protocols</li>
1198                        <li>Severity-based management pathways</li>
1199                        <li>3 detail levels: Basic, Intermediate, Detailed</li>
1200                        <li>Exact dosing with patient-specific adjustments</li>
1201                    </ul>
1202                    <span class="tier-tag paid">Entry plan and above</span>
1203                </div>
1204
1205                <!-- Radiology Expert -->
1206                <div class="feature-card">
1207                    <div class="feature-top">
1208                        <span class="feature-icon">📷</span>
1209                        <span class="credit-chip">30 credits / study</span>
1210                    </div>
1211                    <h3>Radiology Expert</h3>
1212                    <p>Interprets described imaging findings and produces structured radiological assessments with differential diagnoses.</p>
1213                    <ul class="feature-list">
1214                        <li>CT, MRI, X-ray, ultrasound &amp; more</li>
1215                        <li>Key findings with clinical significance</li>
1216                        <li>Urgency assessment (routine / urgent / emergent)</li>
1217                        <li>Follow-up imaging recommendations</li>
1218                    </ul>
1219                    <span class="tier-tag paid">Intermediate plan and above</span>
1220                </div>
1221
1222                <!-- Pharma Assistant -->
1223                <div class="feature-card">
1224                    <div class="feature-top">
1225                        <span class="feature-icon">⚕️</span>
1226                        <span class="credit-chip">15 credits / query</span>
1227                    </div>
1228                    <h3>Pharma Assistant</h3>
1229                    <p>Comprehensive drug information with interaction checking and dose guidance tailored to organ function.</p>
1230                    <ul class="feature-list">
1231                        <li>Drug–drug interaction alerts</li>
1232                        <li>Renal &amp; hepatic dose adjustments</li>
1233                        <li>Adverse effect profiles</li>
1234                        <li>Patient counseling points</li>
1235                    </ul>
1236                    <span class="tier-tag free">Included in Free tier</span>
1237                </div>
1238
1239                <!-- Research Bot -->
1240                <div class="feature-card">
1241                    <div class="feature-top">
1242                        <span class="feature-icon">📚</span>
1243                        <span class="credit-chip">15 credits / search</span>
1244                    </div>
1245                    <h3>Research Bot</h3>
1246                    <p>Synthesizes current medical literature, clinical trials, and society guidelines for any condition or treatment question.</p>
1247                    <ul class="feature-list">
1248                        <li>PubMed integration with DOI/PMID citations</li>
1249                        <li>Clinical trial summaries with study types</li>
1250                        <li>Guideline recommendations with evidence class</li>
1251                        <li>Evidence quality ratings</li>
1252                    </ul>
1253                    <span class="tier-tag paid">Student plan and above</span>
1254                </div>
1255
1256                <!-- Knowledge Base -->
1257                <div class="feature-card">
1258                    <div class="feature-top">
1259                        <span class="feature-icon">🎓</span>
1260                        <span class="credit-chip">5 credits / query</span>
1261                    </div>
1262                    <h3>Knowledge Base</h3>
1263                    <p>A learning companion for students and trainees — structured clinical summaries of any medical condition.</p>
1264                    <ul class="feature-list">
1265                        <li>History &amp; examination findings</li>
1266                        <li>Investigation protocols</li>
1267                        <li>Management outlines</li>
1268                        <li>Lowest-cost agent — ideal for study sessions</li>
1269                    </ul>
1270                    <span class="tier-tag free">Included in Free tier</span>
1271                </div>
1272            </div>
1273        </div>
1274    </section>
1275
1276    <!-- How It Works -->
1277    <section class="how" id="how">
1278        <div class="container">
1279            <div class="section-head">
1280                <span class="section-eyebrow">Workflow</span>
1281                <h2 class="section-title">From Presentation to Plan in Minutes</h2>
1282                <p class="section-sub">A streamlined workflow designed around how clinicians actually think.</p>
1283            </div>
1284            <div class="how-grid">
1285                <div class="how-card">
1286                    <div class="how-step">1</div>
1287                    <h3>Enter the Case</h3>
1288                    <p>Capture demographics, symptoms, vitals, allergies, medications, and comorbidities in a structured case form — or refine an existing case.</p>
1289                </div>
1290                <div class="how-card">
1291                    <div class="how-step">2</div>
1292                    <h3>AI Analyzes</h3>
1293                    <p>Diagnosis Pro generates ranked differentials with confidence scores and ICD-10 codes. Add imaging interpretation, drug checks, or literature evidence as needed.</p>
1294                </div>
1295                <div class="how-card">
1296                    <div class="how-step">3</div>
1297                    <h3>Get an Actionable Plan</h3>
1298                    <p>Treatment AI builds severity-graded, time-based protocols — with exact doses, monitoring intervals, red flags, and guideline citations. Export to PDF.</p>
1299                </div>
1300            </div>
1301        </div>
1302    </section>
1303
1304    <!-- Demos -->
1305    <section class="demos" id="demos">
1306        <div class="container">
1307            <div class="section-head">
1308                <span class="section-eyebrow">See It Live</span>
1309                <h2 class="section-title">Smart Clinician in Action</h2>
1310                <p class="section-sub">Watch a complete platform walkthrough, then explore each AI agent individually.</p>
1311            </div>
1312
1313            <!-- Full Demo Video -->
1314            <div class="featured-demo">
1315                <div class="video-card" id="full-demo-video-card">
1316                    <div class="video-overlay" onclick="playLocalVideo('full-demo-video')">
1317                        <div class="video-play-icon">▶</div>
1318                        <div class="video-play-text" style="font-size: 24px;">Full Platform Demo</div>
1319                        <div style="font-size: 15px; margin-top: 10px; opacity: 0.85; font-weight: 400;">Watch the complete Smart Clinician experience</div>
1320                    </div>
1321                    <video id="full-demo-video" class="hidden" c
1321ontrols preload="none">
1322                        <source src="/assets/videos/SmartClinicianFull.mp4" type="video/mp4">
1323                        Your browser does not support the video tag.
1324                    </video>
1325                </div>
1326            </div>
1327
1328            <h3 class="demos-subtitle">Individual AI Agent Demonstrations</h3>
1329            <div class="screenshots-grid">
1330                <!-- Diagnosis Pro Video -->
1331                <div class="screenshot-card">
1332                    <div class="video-card" id="diagnosis-video-card">
1333                        <div class="video-overlay" onclick="playLocalVideo('diagnosis-video')">
1334                            <div class="video-play-icon">▶</div>
1335                            <div class="video-play-text">Diagnosis Pro Demo</div>
1336                        </div>
1337                        <video id="diagnosis-video" class="hidden" controls preload="none">
1338                            <source src="/assets/videos/diagnosis-pro-demo.mp4" type="video/mp4">
1339                            Your browser does not support the video tag.
1340                        </video>
1341                    </div>
1342                    <div class="screenshot-info">
1343                        <h3>🔍 Diagnosis Pro</h3>
1344                        <p>Differential diagnosis with confidence scores, ICD-10 codes, and clinical reasoning for each possibility.</p>
1345                    </div>
1346                </div>
1347
1348                <!-- Treatment AI Video -->
1349                <div class="screenshot-card">
1350                    <div class="video-card" id="treatment-video-card">
1351                        <div class="video-overlay" onclick="playLocalVideo('treatment-video')">
1352                            <div class="video-play-icon">▶</div>
1353                            <div class="video-play-text">Treatment AI Demo</div>
1354                        </div>
1355                        <video id="treatment-video" class="hidden" c
1355ontrols preload="none">
1356                            <source src="/assets/videos/treatment-ai-demo.mp4" type="video/mp4">
1357                            Your browser does not support the video tag.
1358                        </video>
1359                    </div>
1360                    <div class="screenshot-info">
1361                        <h3>💊 Treatment AI</h3>
1362                        <p>Step-by-step protocols adapted to urgency — from hour-by-hour emergency care to monthly chronic management.</p>
1363                    </div>
1364                </div>
1365
1366                <!-- Radiology Expert Video -->
1367                <div class="screenshot-card">
1368                    <div class="video-card" id="radiology-video-card">
1369                        <div class="video-overlay" onclick="playLocalVideo('radiology-video')">
1370                            <div class="video-play-icon">▶</div>
1371                            <div class="video-play-text">Radiology Expert Demo</div>
1372                        </div>
1373                        <video id="radiology-video" class="hidden" c
1373ontrols preload="none">
1374                            <source src="/assets/videos/radiology-expert-demo.mp4" type="video/mp4">
1375                            Your browser does not support the video tag.
1376                        </video>
1377                    </div>
1378                    <div class="screenshot-info">
1379                        <h3>📷 Radiology Expert</h3>
1380                        <p>Structured imaging interpretation with differential diagnoses based on radiological findings.</p>
1381                    </div>
1382                </div>
1383
1384                <!-- Pharma Assistant Video -->
1385                <div class="screenshot-card">
1386                    <div class="video-card" id="pharma-video-card">
1387                        <div class="video-overlay" onclick="playLocalVideo('pharma-video')">
1388                            <div class="video-play-icon">▶</div>
1389                            <div class="video-play-text">Pharma Assistant Demo</div>
1390                        </div>
1391                        <video id="pharma-video" class="hidden" c
1391ontrols preload="none">
1392                            <source src="/assets/videos/pharma-assistant-demo.mp4" type="video/mp4">
1393                            Your browser does not support the video tag.
1394                        </video>
1395                    </div>
1396                    <div class="screenshot-info">
1397                        <h3>⚕️ Pharma Assistant</h3>
1398                        <p>Pharmaceutical analysis including interactions, dosing, adverse effects, and patient counseling.</p>
1399                    </div>
1400                </div>
1401
1402                <!-- Research Bot Video -->
1403                <div class="screenshot-card">
1404                    <div class="video-card" id="research-video-card">
1405                        <div class="video-overlay" onclick="playLocalVideo('research-video')">
1406                            <div class="video-play-icon">▶</div>
1407                            <div class="video-play-text">Research Bot Demo</div>
1408                        </div>
1409                        <video id="research-video" class="hidden" c
1409ontrols preload="none">
1410                            <source src="/assets/videos/research-bot-demo.mp4" type="video/mp4">
1411                            Your browser does not support the video tag.
1412                        </video>
1413                    </div>
1414                    <div class="screenshot-info">
1415                        <h3>📚 Research Bot</h3>
1416                        <p>PubMed articles, clinical trials, and current guidelines with links to original sources.</p>
1417                    </div>
1418                </div>
1419
1420                <!-- Knowledge Base Video -->
1421                <div class="screenshot-card">
1422                    <div class="video-card" id="knowledge-video-card">
1423                        <div class="video-overlay" onclick="playLocalVideo('knowledge-video')">
1424                            <div class="video-play-icon">▶</div>
1425                            <div class="video-play-text">Knowledge Base Demo</div>
1426                        </div>
1427                        <video id="knowledge-video" class="hidden" controls preload="none">
1428                            <source src="/assets/videos/knowledge-base-demo.mp4" type="video/mp4">
1429                            Your browser does not support the video tag.
1430                        </video>
1431                    </div>
1432                    <div class="screenshot-info">
1433                        <h3>🎓 Knowledge Base</h3>
1434                        <p>Structured clinical information about any medical condition — built for students and trainees.</p>
1435                    </div>
1436                </div>
1437            </div>
1438        </div>
1439    </section>
1440
1441    <!-- Pricing -->
1442    <section class="pricing" id="pricing">
1443        <div class="container">
1444            <div class="section-head">
1445                <span class="section-eyebrow">Pricing</span>
1446                <h2 class="section-title">Simple, Credit-Based Plans</h2>
1447                <p class="section-sub">Every plan includes a monthly credit allowance. Credits are spent per AI action — you only pay for what you use.</p>
1448            </div>
1449
1450            <!-- Billing Toggle -->
1451            <div style="text-align: center;">
1452                <div class="billing-switch">
1453                    <button id="monthly-toggle" class="billing-toggle active" onclick="switchBilling('monthly')">Monthly</button>
1454                    <button id="annual-toggle" class="billing-toggle" onclick="switchBilling('annual')">Annual <span class="save-pill">Save 17%</span></button>
1455                </div>
1456            </div>
1457
1458            <div class="pricing-grid">
1459                <!-- Free Plan -->
1460                <div class="pricing-card">
1461                    <div class="plan-name">Free</div>
1462                    <div class="plan-price monthly-price">$0</div>
1463                    <div class="plan-price annual-price" style="display: none;">$0</div>
1464                    <div class="plan-period">Forever free</div>
1465                    <ul class="plan-features">
1466                        <li><span class="check-icon">✓</span> 150 credits/month (~3 light cases)</li>
1467                        <li><span class="check-icon">✓</span> Diagnosis Pro</li>
1468                        <li><span class="check-icon">✓</span> Knowledge Base</li>
1469                        <li class="unavailable"><span class="x-icon">✗</span> Treatment AI</li>
1470                        <li class="unavailable"><span class="x-icon">✗</span> Pharma Assistant</li>
1471                        <li class="unavailable"><span class="x-icon">✗</span> Research Bot</li>
1472                    </ul>
1473                    <a href="register.html" class="btn btn-outline btn-block">Start Free</a>
1474                </div>
1475
1476                <!-- Student Plan -->
1477                <div class="pricing-card">
1478                    <div class="plan-name">Student</div>
1479                    <div class="plan-price monthly-price">$10<span class="per">/mo</span></div>
1480                    <div class="plan-price annual-price" style="display: none;">$100<span class="per">/yr</span></div>
1481                    <div class="plan-period monthly-period">600 credits per month</div>
1482                    <div class="plan-period annual-period" style="display: none;">$8.33/mo • Save $20/year</div>
1483                    <ul class="plan-features">
1484                        <li><span class="check-icon">✓</span> 600 credits/month (~8–12 cases)</li>
1485                        <li><span class="check-icon">✓</span> All Free features</li>
1486                        <li><span class="check-icon">✓</span> Research Bot access</li>
1487                        <li><span class="check-icon">✓</span> Pharma Assistant</li>
1488                        <li><span class="check-icon">✓</span> Export to PDF</li>
1489                        <li><span class="check-icon">✓</span> Email support</li>
1490                        <li><span class="check-icon">✓</span> 30-day case history</li>
1491                    </ul>
1492                    <a href="checkout.html?plan=student&billing=monthly" class="btn btn-outline btn-block">Get Started</a>
1493                    <div class="plan-note">.edu email required</div>
1494                </div>
1495
1496                <!-- Entry Plan -->
1497                <div class="pricing-card">
1498                    <div class="plan-name">Entry</div>
1499                    <div class="plan-price monthly-price">$20<span class="per">/mo</span></div>
1500                    <div class="plan-price annual-price" style="display: none;">$200<span class="per">/yr</span></div>
1501                    <div class="plan-period monthly-period">1,100 credits per month</div>
1502                    <div class="plan-period annual-period" style="display: none;">$16.67/mo • Save $40/year</div>
1503                    <ul class="plan-features">
1504                        <li><span class="check-icon">✓</span> 1,100 credits/month (~15–22 cases)</li>
1505                        <li><span class="check-icon">✓</span> All Student features</li>
1506                        <li><span class="check-icon">✓</span> Treatment AI (Basic &amp; Intermediate)</li>
1507                        <li><span class="check-icon">✓</span> Priority email support</li>
1508                        <li><span class="check-icon">✓</span> Mobile access</li>
1509                        <li><span class="check-icon">✓</span> 60-day case history</li>
1510                    </ul>
1511                    <a href="checkout.html?plan=entry&billing=monthly" class="btn btn-outline btn-block">Get Started</a>
1512                </div>
1513
1514                <!-- Intermediate Plan (Most Popular) -->
1515                <div class="pricing-card featured">
1516                    <div class="popular-ribbon">MOST POPULAR</div>
1517                    <div class="plan-name">Intermediate</div>
1518                    <div class="plan-price monthly-price">$40<span class="per">/mo</span></div>
1519                    <div class="plan-price annual-price" style="display: none;">$400<span class="per">/yr</span></div>
1520                    <div class="plan-period monthly-period">2,400 credits per month</div>
1521                    <div class="plan-period annual-period" style="display: none;">$33.33/mo • Save $80/year</div>
1522                    <ul class="plan-features">
1523                        <li><span class="check-icon">✓</span> 2,400 credits/month (~34–48 cases)</li>
1524                        <li><span class="check-icon">✓</span> All 6 AI agents unlocked</li>
1525                        <li><span class="check-icon">✓</span> Treatment AI (all detail levels)</li>
1526                        <li><span class="check-icon">✓</span> Radiology Expert</li>
1527                        <li><span class="check-icon">✓</span> Team workspace (3 seats)</li>
1528                        <li><span class="check-icon">✓</span> Analytics dashboard &amp; 90-day history</li>
1529                    </ul>
1530                    <a href="checkout.html?plan=intermediate&billing=monthly" class="btn btn-primary btn-block">Get Started</a>
1531                </div>
1532
1533                <!-- Advanced Plan -->
1534                <div class="pricing-card">
1535                    <div class="plan-name">Advanced</div>
1536                    <div class="plan-price monthly-price">$60<span class="per">/mo</span></div>
1537                    <div class="plan-price annual-price" style="display: none;">$600<span class="per">/yr</span></div>
1538                    <div class="plan-period monthly-period">3,900 credits per month</div>
1539                    <div class="plan-period annual-period" style="display: none;">$50.00/mo • Save $120/year</div>
1540                    <ul class="plan-features">
1541                        <li><span class="check-icon">✓</span> 3,900 credits/month (~55–78 cases)</li>
1542                        <li><span class="check-icon">✓</span> All Intermediate features</li>
1543                        <li><span class="check-icon">✓</span> 6 team seats included</li>
1544                        <li><span class="check-icon">✓</span>
1544 Enhanced analytics &amp; reporting</li>
1545                        <li><span class="check-icon">✓</span> Quarterly success call</li>
1546                        <li><span class="check-icon">✓</span> White-label exports &amp; same-day support</li>
1547                    </ul>
1548                    <a href="checkout.html?plan=advanced&billing=monthly" class="btn btn-outline btn-block">Get Started</a>
1549                </div>
1550
1551                <!-- Enterprise Plan -->
1552                <div class="pricing-card">
1553                    <div class="plan-name">Enterprise</div>
1554                    <div class="plan-price monthly-price" style="font-size: 30px;">Custom</div>
1555                    <div class="plan-price annual-price" style="display: none; font-size: 30px;">Custom</div>
1556                    <div class="plan-period">Tailored pricing &amp; SLAs</div>
1557                    <ul class="plan-features">
1558                        <li><span class="check-icon">✓</span> Custom credit pools &amp; SLAs</li>
1559                        <li><span class="check-icon">✓</span> All Advanced features</li>
1560                        <li><span class="check-icon">✓</span> Multi-user (10–50 seats)</li>
1561                        <li><span class="check-icon">✓</span> Custom integrations</li>
1562                        <li><span class="check-icon">✓</span> HIPAA compliance support</li>
1563                        <li><span class="check-icon">✓</span> Dedicated support</li>
1564                    </ul>
1565                    <a href="contact.html?interest=Enterprise" class="btn btn-outline btn-block">Contact Sales</a>
1566                </div>
1567            </div>
1568
1569            <!-- Additional Info -->
1570            <div class="pricing-extra">
1571                <p>✨ <strong>Special pricing available:</strong> Geographic &amp; institutional discounts up to 50% • Student discounts with .edu email</p>
1572                <p>💳 <strong>Payment methods:</strong> PayPal, credit/debit cards &nbsp;•&nbsp; 💰 <strong>Credit top-ups:</strong> $10 → 333 credits, $20 → 667 credits, $40 → 1,334 credits</p>
1573            </div>
1574
1575            <!-- Credit Guide -->
1576            <div class="credit-guide">
1577                <h3>How Credits Work</h3>
1578                <p class="guide-sub">Each AI action has a fixed credit cost — no surprises, no hidden charges.</p>
1579
1580                <div class="credit-costs-grid">
1581                    <div class="credit-cost-item">
1582                        <div class="cost-action">🔍 New Case Diagnosis</div>
1583                        <div class="cost-value">45</div>
1584                    </div>
1585                    <div class="credit-cost-item">
1586                        <div class="cost-action">📷 Radiology Analysis</div>
1587                        <div class="cost-value">30</div>
1588                    </div>
1589                    <div class="credit-cost-item">
1590                        <div class="cost-action">💊 Treatment Plan</div>
1591                        <div class="cost-value">25</div>
1592                    </div>
1593                    <div class="credit-cost-item">
1594                        <div class="cost-action">📚 Literature Search</div>
1595                        <div class="cost-value">15</div>
1596                    </div>
1597                    <div class="credit-cost-item">
1598                        <div class="cost-action">
1598⚕️ Drug Information</div>
1599                        <div class="cost-value">15</div>
1600                    </div>
1601                    <div class="credit-cost-item">
1602                        <div class="cost-action">🔄 Case Refinement</div>
1603                        <div class="cost-value">10</div>
1604                    </div>
1605                    <div class="credit-cost-item">
1606                        <div class="cost-action">🎓 Knowledge Base Query</div>
1607                        <div class="cost-value">5</div>
1608                    </div>
1609                    <div class="credit-cost-item">
1610                        <div class="cost-action">🔗 PubMed Lookup</div>
1611                        <div class="cost-value">1</div>
1612                    </div>
1613                </div>
1614
1615                <div class="case-examples">
1616                    <div class="case-example light">
1617                        <div class="case-name">🟢 Light Case</div>
1618                        <div class="case-detail">Diagnosis + Knowledge Base query</div>
1619                        <div class="case-cost">≈ 50 credits</div>
1620                    </div>
1621                    <div class="case-example standard">
1622                        <div class="case-name">🟡 Standard Case</div>
1623                        <div class="case-detail">Diagnosis + Treatment plan + Drug check</div>
1624                        <div class="case-cost">≈ 85 credits</div>
1625                    </div>
1626                    <div class="case-example full">
1627                        <div class="case-name">🔴 Full Workup</div>
1628                        <div class="case-detail">All agents + refinement (diagnosis, treatment, radiology, research, pharma)</div>
1629                        <div class="case-cost">≈ 140–150 credits</div>
1630                    </div>
1631                </div>
1632            </div>
1633        </div>
1634    </section>
1635
1636    <!-- CTA -->
1637    <section class="cta">
1638        <div class="container">
1639            <h2>Ready to Transform Your Clinical Practice?</h2>
1640            <p>Join healthcare professionals and students using AI to support faster, more confident clinical decisions. Free tier — no credit card required.</p>
1641            <div class="cta-buttons">
1642                <a href="register.html" class="btn btn-white btn-lg">Get Started Free</a>
1643                <a href="login.html" class="btn btn-ghost-light btn-lg">Sign In</a>
1644            </div>
1645        </div>
1646    </section>
1647
1648    <!-- Footer -->
1649    <footer>
1650        <div class="footer-grid">
1651            <div class="footer-brand">
1652                <div class="logo">
1653                    <span class="logo-icon">🩺</span>
1654                    <span>Smart Clinician<span style="color: #38bdf8;">.AI</span></span>
1655                </div>
1656                <p>
1657                    <strong>Medical Disclaimer:</strong> Smart Clinician AI is a clinical decision support tool for guidance only.
1658                    All AI-generated diagnoses and treatment recommendations are for informational purposes and do not replace
1659                    professional medical judgment. Healthcare providers remain fully responsible for all clinical decisions.
1660                </p>
1661            </div>
1662            <div class="footer-col">
1663                <h4>Product</h4>
1664                <a href="#features">Features</a>
1665                <a href="#how">How It Works</a>
1666                <a href="#demos">Demos</a>
1667                <a href="#pricing">Pricing</a>
1668            </div>
1669            <div class="footer-col">
1670                <h4>Account</h4>
1671                <a href="login.html">Login</a>
1672                <a href="register.html">Register</a>
1673                <a href="contact.html">Contact Us</a>
1674            </div>
1675        </div>
1676        <div class="footer-bottom">
1677            &copy; 2026 Smart Clinician AI. All rights reserved.
1678        </div>
1679    </footer>
1680
1681    
1681<script>
1682        // Smooth scrolling for anchor links
1683        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1684            anchor.addEventListener('click', function (e) {
1685                e.preventDefault();
1686                const target = document.querySelector(this.getAttribute('href'));
1687                if (target) {
1688                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
1689                }
1690                // Close mobile menu if open
1691                document.getElementById('mobile-menu').classList.remove('open');
1692            });
1693        });
1694
1695        // Mobile menu toggle
1696        document.getElementById('nav-toggle').addEventListener('click', () => {
1697            document.getElementById('mobile-menu').classList.toggle('open');
1698        });
1699
1700        // Show dashboard link if user is logged in
1701        if (localStorage.getItem('token')) {
1702            const navLinks = document.getElementById('nav-links');
1703            if (navLinks) {
1704                navLinks.innerHTML = `
1705                    <a href="#features">Features</a>
1706                    <a href="#demos">Demos</a>
1707                    <a href="#pricing">Pricing</a>
1708                    <a href="smartclinician.html" class="btn btn-primary">Go to Dashboard</a>
1709                `;
1710            }
1711            const mobileMenu = document.getElementById('mobile-menu');
1712            if (mobileMenu) {
1713                mobileMenu.innerHTML = `
1714                    <a href="#features">Features</a>
1715                    <a href="#demos">Demos</a>
1716                    <a href="#pricing">Pricing</a>
1717                    <a href="smartclinician.html" class="btn btn-primary">Go to Dashboard</a>
1718                `;
1719            }
1720        }
1721
1722        // Local video player
1723        function playLocalVideo(videoId) {
1724            const video = document.getElementById(videoId);
1725            if (!video) {
1726                console.error('Video element not found:', videoId);
1727                return;
1728            }
1729            const overlay = video.previousElementSibling;
1730
1731            video.classList.remove('hidden');
1732            if (overlay) overlay.classList.add('hidden');
1733
1734            video.play().catch(error => {
1735                console.error('Error playing video:', error);
1736                // Controls remain available for manual play
1737            });
1738        }
1739
1740        // Billing toggle
1741        function switchBilling(type) {
1742            const monthlyToggle = document.getElementById('monthly-toggle');
1743            const annualToggle = document.getElementById('annual-toggle');
1744            const isMonthly = type === 'monthly';
1745
1746            monthlyToggle.classList.toggle('active', isMonthly);
1747            annualToggle.classList.toggle('active', !isMonthly);
1748
1749            document.querySelectorAll('.monthly-price').forEach(el => el.style.display = isMonthly ? 'block' : 'none');
1750            document.querySelectorAll('.annual-price').forEach(el => el.style.display = isMonthly ? 'none' : 'block');
1751            document.querySelectorAll('.monthly-period').forEach(el => el.style.display = isMonthly ? 'block' : 'none');
1752            document.querySelectorAll('.annual-period').forEach(el => el.style.display = isMonthly ? 'none' : 'block');
1753        }
1754    </script>
1754
1755
1756    <!-- PWA Service Worker Registration -->
1757    
1757<script src="/assets/js/pwa.js"></script>
1757
1758</body>
1759</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.