PageSourceSearch

https://syntch.ai/

html syntch.ai collected 2026-10-05 13:26:22 UTC 72,671 bytes, 1,823 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<title>SYNTCH — AI-Powered Learning Platform for Daycare & K–12</title>
7<link rel="icon" type="image/png" href="assets/favicon.png" />
8<link rel="preconnect" href="https://fonts.googleapis.com" />
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
11<style>
12  /* ─── DESIGN TOKENS ──────────────────────────────── */
13  :root {
14    --ink:      #0d1117;
15    --paper:    #faf8f4;
16    --cream:    #f3efe7;
17    --sage:     #532ba4;
18    --sage-lt:  #6b45bb;
19    --sage-pale:#efe9fa;
20    --amber:    #e8924a;
21    --amber-lt: #fdf0e6;
22    --slate:    #2c3e50;
23    --mist:     #8a96a3;
24    --white:    #ffffff;
25    --radius:   12px;
26    --shadow:   0 4px 32px rgba(13,17,23,0.10);
27    --shadow-lg:0 12px 60px rgba(13,17,23,0.14);
28  }
29
30  /* ─── RESET & BASE ───────────────────────────────── */
31  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
32  html { scroll-behavior: smooth; }
33  body {
34    font-family: 'DM Sans', sans-serif;
35    background: var(--paper);
36    color: var(--ink);
37    line-height: 1.65;
38    overflow-x: hidden;
39  }
40  img { display: block; max-width: 100%; }
41  a { text-decoration: none; color: inherit; }
42
43  /* ─── TYPOGRAPHY ─────────────────────────────────── */
44  h1, h2, h3, h4 {
45    font-family: 'Playfair Display', serif;
46    line-height: 1.18;
47  }
48  h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 900; }
49  h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; }
50  h3 { font-size: 1.35rem; font-weight: 700; }
51  p  { font-weight: 300; color: #3a4452; }
52
53  /* ─── LAYOUT HELPERS ─────────────────────────────── */
54  .container  { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
55  .section    { padding: 96px 0; }
56  .section-sm { padding: 64px 0; }
57  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
58  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
59  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
60
61  @media (max-width: 860px) {
62    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
63    .section { padding: 64px 0; }
64  }
65
66  /* ─── ANIMATIONS ─────────────────────────────────── */
67  @keyframes fadeUp {
68    from { opacity: 0; transform: translateY(28px); }
69    to   { opacity: 1; transform: translateY(0); }
70  }
71  @keyframes floatDot {
72    0%, 100% { transform: translateY(0px); }
73    50%       { transform: translateY(-14px); }
74  }
75  @keyframes pulseRing {
76    0%   { transform: scale(0.9); opacity: 0.6; }
77    50%  { transform: scale(1.05); opacity: 1; }
78    100% { transform: scale(0.9); opacity: 0.6; }
79  }
80  .fade-up { animation: fadeUp 0.75s ease both; }
81  .delay-1 { animation-delay: 0.15s; }
82  .delay-2 { animation-delay: 0.30s; }
83  .delay-3 { animation-delay: 0.45s; }
84  .delay-4 { animation-delay: 0.60s; }
85
86  /* ─── BUTTONS ─────────────────────────────────────── */
87  .btn {
88    display: inline-flex; align-items: center; gap: 8px;
89    padding: 15px 32px;
90    border-radius: 50px;
91    font-family: 'DM Sans', sans-serif;
92    font-weight: 600; font-size: 1rem;
93    cursor: pointer; border: none; transition: all 0.22s ease;
94    letter-spacing: 0.01em;
95  }
96  .btn-primary {
97    background: var(--sage);
98    color: var(--white);
99    box-shadow: 0 4px 20px rgba(83,43,164,0.35);
100  }
101  .btn-primary:hover {
102    background: var(--sage-lt);
103    transform: translateY(-2px);
104    box-shadow: 0 8px 28px rgba(83,43,164,0.40);
105  }
106  .btn-outline {
107    background: transparent;
108    color: var(--sage);
109    border: 2px solid var(--sage);
110  }
111  .btn-outline:hover { background: var(--sage-pale); }
112  .btn-amber {
113    background: var(--amber);
114    color: var(--white);
115    box-shadow: 0 4px 20px rgba(232,146,74,0.35);
116  }
117  .btn-amber:hover { background: #d97d38; transform: translateY(-2px); }
118  .btn-lg { padding: 18px 42px; font-size: 1.1rem; }
119  .btn-sm { padding: 11px 24px; font-size: 0.9rem; }
120
121  /* ─── TAGS / LABELS ───────────────────────────────── */
122  .tag {
123    display: inline-block;
124    padding: 5px 14px;
125    border-radius: 50px;
126    font-size: 0.78rem; font-weight: 600;
127    letter-spacing: 0.06em; text-transform: uppercase;
128  }
129  .tag-sage   { background: var(--sage-pale); color: var(--sage); }
130  .tag-amber  { background: var(--amber-lt);  color: #c06820; }
131  .tag-slate  { background: #e8ecf0; color: var(--slate); }
132
133  /* ─── NAV ─────────────────────────────────────────── */
134  nav {
135    position: sticky; top: 0; z-index: 100;
136    background: rgba(250,248,244,0.92);
137    backdrop-filter: blur(12px);
138    border-bottom: 1px solid rgba(0,0,0,0.07);
139    padding: 16px 0;
140  }
141  .nav-inner {
142    display: flex; align-items: center; justify-content: space-between;
143    max-width: 1160px; margin: 0 auto; padding: 0 24px;
144  }
145  .nav-logo {
146    display: inline-flex;
147    align-items: center;
148  }
149  .nav-logo img {
150    width: clamp(110px, 13vw, 165px);
151    height: auto;
152  }
153  .nav-links { display: flex; gap: 32px; align-items: center; }
154  .nav-links a {
155    font-size: 0.92rem; font-weight: 500; color: var(--slate);
156    transition: color 0.18s;
157  }
158  .nav-links a:hover { color: var(--sage); }
159  .nav-links a.btn,
160  .nav-links a.btn:hover {
161    color: var(--white);
162  }
163
164  #features,
165  #proof,
166  #pricing,
167  #book-demo {
168    scroll-margin-top: 110px;
169  }
170
171  /* ─── HERO ────────────────────────────────────────── */
172  .hero {
173    background:
174      linear-gradient(rgba(13, 17, 23, 0.72), rgba(13, 17, 23, 0.72)),
175      url("assets/banner_image.png") center center / cover no-repeat;
176    color: var(--white);
177    padding: 110px 0 90px;
178    position: relative;
179    overflow: hidden;
180  }
181  .hero::before {
182    content: '';
183    position: absolute; inset: 0;
184    background:
185      radial-gradient(ellipse 80% 60% at 70% 40%, rgba(83,43,164,0.38) 0%, transparent 65%),
186      radial-gradient(ellipse 50% 50% at 20% 80%, rgba(232,146,74,0.18) 0%, transparent 60%);
187    pointer-events: none;
188  }
189  /* Decorative dots */
190  .hero-dots {
191    position: absolute; top: 0; right: 0; width: 440px; height: 440px;
192    opacity: 0.08;
193    background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
194    background-size: 28px 28px;
195  }
196  .hero-content { position: relative; z-index: 2; }
197  .hero h1 { color: var(--white); max-width: 820px; }
198  .hero h1 em {
199    font-style: italic;
200    color: var(--amber);
201  }
202  .hero-sub {
203    font-size: 1.2rem; font-weight: 300;
204    color: rgba(255,255,255,0.78);
205    max-width: 620px;
206    margin: 22px 0 36px;
207    line-height: 1.7;
208  }
209  .hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
210  .hero-fomo {
211    margin-top: 18px;
212    font-size: 0.88rem; color: rgba(255,255,255,0.55);
213    font-weight: 400;
214  }
215  .hero-fomo strong { color: var(--amber); }
216  .hero-stats {
217    display: flex; gap: 48px; flex-wrap: wrap;
218    margin-top: 72px;
219    padding-top: 36px;
220    border-top: 1px solid rgba(255,255,255,0.12);
221  }
222  .hero-stat-item { min-width: 120px; }
223  .hero-stat-num {
224    font-family: 'Playfair Display', serif;
225    font-size: 2.4rem; font-weight: 900;
226    color: var(--white);
227    line-height: 1;
228  }
229  .hero-stat-num span { color: var(--amber); }
230  .hero-stat-label {
231    font-size: 0.85rem; color: rgba(255,255,255,0.55);
232    margin-top: 5px; max-width: 140px;
233  }
234
235  /* ─── TRUST BAR ───────────────────────────────────── */
236  .trust-bar {
237    background: var(--cream);
238    border-bottom: 1px solid rgba(0,0,0,0.07);
239    padding: 20px 0;
240    overflow: hidden;
241  }
242  .trust-bar-inner {
243    display: flex; align-items: center; gap: 48px;
244    font-size: 0.82rem; font-weight: 500;
245    color: var(--mist);
246    letter-spacing: 0.03em;
247    text-transform: uppercase;
248    flex-wrap: wrap;
249    justify-content: center;
250  }
251  .trust-badge {
252    display: flex; align-items: center; gap: 7px;
253  }
254  .trust-badge svg { width: 18px; height: 18px; color: var(--sage); }
255  .trust-divider { width: 1px; height: 18px; background: rgba(0,0,0,0.15); }
256
257  /* ─── PROBLEM SECTION ─────────────────────────────── */
258  .section-problem { background: var(--white); }
259  .eyebrow {
260    font-size: 0.8rem; font-weight: 600;
261    letter-spacing: 0.1em; text-transform: uppercase;
262    color: var(--sage); margin-bottom: 14px;
263  }
264  .section-intro { max-width: 580px; }
265  .section-intro p { font-size: 1.08rem; margin-top: 14px; }
266  .problem-cards { margin-top: 52px; }
267  .problem-card {
268    background: var(--paper);
269    border: 1px solid rgba(0,0,0,0.07);
270    border-radius: var(--radius);
271    padding: 28px 30px;
272    position: relative;
273    transition: box-shadow 0.2s;
274  }
275  .problem-card:hover { box-shadow: var(--shadow); }
276  .problem-card .icon {
277    font-size: 1.7rem; margin-bottom: 14px;
278  }
279  .problem-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
280  .problem-card p { font-size: 0.92rem; }
281  .stat-callout {
282    font-family: 'Playfair Display', serif;
283    font-size: 1.6rem; font-weight: 700;
284    color: var(--amber);
285    display: block;
286    margin-top: 10px;
287  }
288
289  /* ─── SOLUTION / BENEFITS ─────────────────────────── */
290  .section-solution { background: var(--ink); color: var(--white); }
291  .section-solution .eyebrow { color: var(--sage-lt); }
292  .section-solution h2 { color: var(--white); }
293  .section-solution .section-intro p { color: rgba(255,255,255,0.7); }
294
295  .benefit-row {
296    display: grid;
297    grid-template-columns: 1fr 1fr;
298    gap: 64px;
299    align-items: center;
300    padding: 56px 0;
301    border-bottom: 1px solid rgba(255,255,255,0.07);
302  }
303  .benefit-row:last-of-type { border-bottom: none; }
304  .benefit-row.reverse { direction: rtl; }
305  .benefit-row.reverse > * { direction: ltr; }
306
307  .benefit-visual {
308    background: rgba(255,255,255,0.04);
309    border: 1px solid rgba(255,255,255,0.09);
310    border-radius: 16px;
311    padding: 36px;
312    position: relative;
313    overflow: hidden;
314  }
315  .benefit-visual::before {
316    content: '';
317    position: absolute;
318    top: -40px; right: -40px;
319    width: 180px; height: 180px;
320    border-radius: 50%;
321    background: radial-gradient(circle, rgba(61,107,79,0.25), transparent 70%);
322  }
323  .benefit-number {
324    font-family: 'Playfair Display', serif;
325    font-size: 5rem; font-weight: 900;
326    line-height: 1;
327    color: rgba(126,201,155,0.15);
328    position: absolute; top: 16px; right: 24px;
329  }
330  .benefit-metric {
331    font-family: 'Playfair Display', serif;
332    font-size: 3rem; font-weight: 900;
333    color: #7ec99b;
334    line-height: 1;
335    margin-bottom: 6px;
336  }
337  .benefit-metric-label {
338    font-size: 0.85rem; color: rgba(255,255,255,0.5);
339    text-transform: uppercase; letter-spacing: 0.06em;
340    font-weight: 600;
341  }
342  .progress-bar-wrap { margin-top: 20px; }
343  .progress-label {
344    display: flex; justify-content: space-between;
345    font-size: 0.82rem; color: rgba(255,255,255,0.55);
346    margin-bottom: 6px;
347  }
348  .progress-bg {
349    background: rgba(255,255,255,0.08);
350    border-radius: 100px; height: 6px; overflow: hidden;
351  }
352  .progress-fill {
353    height: 100%; border-radius: 100px;
354    background: linear-gradient(90deg, #3d6b4f, #7ec99b);
355    animation: growBar 1.4s ease both;
356  }
357  @keyframes growBar {
358    from { width: 0 !important; }
359  }
360
361  .benefit-text .tag { margin-bottom: 16px; }
362  .benefit-text h3 {
363    font-size: 1.65rem; color: var(--white);
364    margin-bottom: 16px;
365  }
366  .benefit-text p { color: rgba(255,255,255,0.70); font-size: 1.02rem; line-height: 1.75; }
367  .benefit-list {
368    list-style: none; margin-top: 20px;
369    display: flex; flex-direction: column; gap: 10px;
370  }
371  .benefit-list li {
372    display: flex; align-items: flex-start; gap: 10px;
373    font-size: 0.92rem; color: rgba(255,255,255,0.65);
374  }
375  .benefit-list li::before {
376    content: '✓';
377    color: #7ec99b; font-weight: 700;
378    flex-shrink: 0;
378 margin-top: 1px;
379  }
380
381  @media (max-width: 860px) {
382    .benefit-row, .benefit-row.reverse { grid-template-columns: 1fr; direction: ltr; }
383  }
384
385  /* ─── FEATURES GRID ───────────────────────────────── */
386  .section-features { background: var(--cream); }
387  .feature-card {
388    background: var(--white);
389    border: 1px solid rgba(0,0,0,0.07);
390    border-radius: 14px;
391    padding: 32px 28px;
392    transition: all 0.25s;
393    position: relative;
394    overflow: hidden;
395  }
396  .feature-card::after {
397    content: '';
398    position: absolute; bottom: 0; left: 0; right: 0;
399    height: 3px;
400    background: linear-gradient(90deg, var(--sage), var(--sage-lt));
401    transform: scaleX(0); transform-origin: left;
402    transition: transform 0.3s ease;
403  }
404  .feature-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
405  .feature-card:hover::after { transform: scaleX(1); }
406  .feature-icon {
407    width: 48px; height: 48px;
408    background: var(--sage-pale);
409    border-radius: 10px;
410    display: flex; align-items: center; justify-content: center;
411    font-size: 1.4rem;
412    margin-bottom: 18px;
413  }
414  .feature-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
415  .feature-card p { font-size: 0.9rem; color: #5a6470; line-height: 1.6; }
416
417  /* ─── STATS BAND ──────────────────────────────────── */
418  .stats-band {
419    background: var(--sage);
420    padding: 64px 0;
421    position: relative;
422    overflow: hidden;
423  }
424  .stats-band::before {
425    content: '';
426    position: absolute; top: -80px; right: -80px;
427    width: 320px; height: 320px;
428    border-radius: 50%;
429    background: rgba(255,255,255,0.05);
430  }
431  .stats-band-inner {
432    display: grid; grid-template-columns: repeat(4, 1fr);
433    gap: 24px; text-align: center;
434    position: relative; z-index: 1;
435  }
436  .stat-num {
437    font-family: 'Playfair Display', serif;
438    font-size: 2.8rem; font-weight: 900;
439    color: var(--white);
440    line-height: 1;
441  }
442  .stat-num em { color: var(--amber); font-style: normal; }
443  .stat-desc {
444    font-size: 0.88rem; color: rgba(255,255,255,0.72);
445    margin-top: 8px; line-height: 1.5;
446  }
447  @media (max-width: 860px) {
448    .stats-band-inner { grid-template-columns: 1fr 1fr; }
449  }
450
451  /* ─── SOCIAL PROOF ────────────────────────────────── */
452  .section-proof { background: var(--white); }
453  .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
454  @media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } }
455
456  .case-card {
457    border: 1px solid rgba(0,0,0,0.08);
458    border-radius: 14px;
459    padding: 28px 30px;
460    background: var(--paper);
461    position: relative;
462  }
463  .case-card .quote-mark {
464    font-family: 'Playfair Display', serif;
465    font-size: 4rem; font-weight: 900;
466    color: var(--sage-pale);
467    line-height: 1;
468    margin-bottom: -10px;
469  }
470  .case-card blockquote {
471    font-size: 1.05rem;
472    font-family: 'Playfair Display', serif;
473    font-style: italic;
474    color: var(--slate);
475    line-height: 1.6;
476    margin-bottom: 16px;
477  }
478  .case-card .case-meta {
479    font-size: 0.82rem; color: var(--mist); font-weight: 500;
480  }
481  .case-result {
482    display: inline-block;
483    background: var(--sage-pale);
484    color: var(--sage);
485    font-weight: 700;
486    font-size: 0.82rem;
487    padding: 4px 12px;
488    border-radius: 50px;
489    margin-top: 12px;
490  }
491  .trust-block {
492    background: linear-gradient(135deg, var(--ink) 0%, #1a2433 100%);
493    border-radius: 16px;
494    padding: 40px 44px;
495    margin-top: 48px;
496    display: flex;
497    gap: 48px;
498    align-items: center;
499    justify-content: space-between;
500    flex-wrap: nowrap;
501  }
502  .trust-block-text { flex: 1 1 68%; min-width: 0; }
503  .trust-block-text h3 { color: var(--white); margin-bottom: 8px; }
504  .trust-block-text p { color: rgba(255,255,255,0.60); font-size: 0.95rem; max-width: 100%; }
505  .compliance-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
506  .badge {
507    background: rgba(255,255,255,0.08);
508    border: 1px solid rgba(255,255,255,0.15);
509    border-radius: 8px;
510    padding: 8px 16px;
511    font-size: 0.8rem;
512    font-weight: 700;
513    color: rgba(255,255,255,0.85);
514    letter-spacing: 0.05em;
515  }
516
517  @media (max-width: 860px) {
518    .trust-block {
519      flex-wrap: wrap;
520    }
521  }
522
523  /* ─── MID-PAGE CTA ────────────────────────────────── */
524  .mid-cta {
525    background: var(--amber-lt);
526    border-radius: 20px;
527    padding: 52px 56px;
528    display: flex;
529    align-items: center;
530    justify-content: space-between;
531    gap: 32px;
532    flex-wrap: wrap;
533    margin: 64px auto;
534    max-width: 1100px;
535  }
536  .mid-cta h2 { font-size: 1.9rem; max-width: 520px; line-height: 1.3; }
537  .mid-cta h2 em { color: var(--sage); font-style: italic; }
538  .mid-cta-right { text-align: right; }
539  .mid-cta-actions {
540    display: flex;
541    gap: 10px;
542    justify-content: flex-end;
543    align-items: center;
544    flex-wrap: nowrap;
545  }
546  .mid-cta-right .fomo { font-size: 0.85rem; color: var(--mist); margin-top: 10px; }
547
548  /* ─── PERSONA TABS ────────────────────────────────── */
549  .section-personas { background: var(--cream); }
550  .persona-tabs {
551    display: flex; gap: 4px;
552    background: rgba(0,0,0,0.06);
553    border-radius: 50px;
554    padding: 5px;
555    width: fit-content;
556    margin: 0 auto 48px;
557  }
558  .persona-tab {
559    padding: 10px 28px;
560    border-radius: 50px;
561    font-size: 0.9rem; font-weight: 600;
562    cursor: pointer;
563    transition: all 0.2s;
564    color: var(--mist);
565    background: transparent; border: none;
566    font-family: 'DM Sans', sans-serif;
567  }
568  .persona-tab.active {
569    background: var(--white);
570    color: var(--sage);
571    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
572  }
573  .persona-content { display: none; }
574  .persona-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
575  @media (max-width: 860px) { .persona-content.active { grid-template-columns: 1fr; } }
576
577  .persona-item {
578    background: var(--white);
579    border-radius: 12px;
580    padding: 24px 26px;
581    border: 1px solid rgba(0,0,0,0.07);
582  }
583  .persona-item h4 { font-size: 1rem; margin-bottom: 8px; }
584  .persona-item p { font-size: 0.88rem; color: #5a6470; }
585
586  /* ─── FINAL CTA ───────────────────────────────────── */
587  .section-final-cta {
588    background: var(--ink);
589    text-align: center;
590    padding: 120px 0;
591    position: relative;
592    overflow: hidden;
593  }
594  .section-final-cta::before {
595    content: '';
596    position: absolute; inset: 0;
597    background:
598      radial-gradient(ellipse 60% 60% at 50% 100%, rgba(61,107,79,0.35), transparent 65%);
599  }
600  .cta-content { position: relative; z-index: 2; }
601  .cta-content h2 {
602    color: var(--white);
603    max-width: 700px; margin: 0 auto;
604  }
605  .cta-content h2 em { color: #7ec99b; font-style: italic; }
606  .cta-content p {
607    color: rgba(255,255,255,0.60);
608    margin: 20px auto 0;
609    max-width: 500px; font-size: 1.05rem;
610  }
611  .cta-buttons {
612    display: flex; gap: 16px; justify-content: center;
613    flex-wrap: wrap; margin-top: 36px;
614  }
615  .cta-trust { margin-top: 24px; font-size: 0.83rem; color: rgba(255,255,255,0.38); }
616  .cta-trust a { color: rgba(255,255,255,0.55); text-decoration: underline; }
617
618  /* ─── FOOTER ──────────────────────────────────────── */
619  footer {
620    background: var(--ink);
621    border-top: 1px solid rgba(255,255,255,0.08);
622    padding: 46px 0 24px;
623    text-align: center;
624  }
625  .footer-inner {
626    max-width: 980px;
627    margin: 0 auto;
628    display: flex;
629    flex-direction: column;
630    align-items: center;
631    gap: 12px;
632  }
633  .footer-logo {
634    display: flex;
635    justify-content: center;
636    margin-bottom: 2px;
637  }
638  .footer-logo img {
639    width: clamp(130px, 14vw, 180px);
640    height: auto;
641  }
642  .footer-tagline {
643    font-size: 0.9rem;
644    color: rgba(255,255,255,0.62);
645    margin: 0;
646    max-width: 720px;
647  }
648  .footer-links {
649    display: flex;
650    flex-wrap: wrap;
651    justify-content: center;
652    gap: 8px 12px;
653    margin: 6px 0 10px;
654  }
655  .footer-links a {
656    font-size: 0.8rem;
657    color: rgba(255,255,255,0.72);
658    padding: 6px 10px;
659    border: 1px solid rgba(255,255,255,0.16);
660    border-radius: 999px;
661    text-decoration: none;
662    transition: color 0.2s ease, border-color 0.2s ease;
663  }
664  .footer-links a:hover {
665    color: var(--white);
666    border-color: rgba(255,255,255,0.35);
667  }
668  .footer-divider {
669    width: min(760px, 92%);
670    height: 1px;
671    background: rgba(255,255,255,0.12);
672    margin: 2px 0 4px;
673  }
674  .footer-bottom {
675    width: min(760px, 92%);
676    display: flex;
677    align-items: center;
678    justify-content: space-between;
679    gap: 10px 18px;
680    flex-wrap: wrap;
681  }
682  .footer-copy {
683    font-size: 0.78rem;
684    color: rgba(255,255,255,0.42);
685    margin: 0;
686  }
687  .footer-meta {
688    display: flex;
689    gap: 8px 14px;
690    flex-wrap: wrap;
691    justify-content: center;
692  }
693  .footer-meta a,
694  .footer-meta span {
695    font-size: 0.78rem;
696    color: rgba(255,255,255,0.5);
697    text-decoration: none;
698  }
699  .footer-meta a:hover {
700    color: rgba(255,255,255,0.78);
701  }
702
703  @media (max-width: 700px) {
704    footer { padding: 34px 0 22px; }
705    .footer-tagline { font-size: 0.84rem; }
706    .footer-bottom { justify-content: center; }
707    .footer-copy { text-align: center; }
708  }
709
710  /* ─── DIVIDER ─────────────────────────────────────── */
711  .divider {
712    height: 1px; background: rgba(0,0,0,0.07);
713    margin: 0;
714  }
715
716  /* ─── FLOATING ACCENT ─────────────────────────────── */
717  .accent-blob {
718    position: absolute; border-radius: 50%;
719    pointer-events: none; filter: blur(80px); opacity: 0.12;
720  }
721
722  /* ─── SHOW/CARE/K12 + BOOK DEMO (from index1) ───── */
723  .dashboard-showcarek12-section {
724    padding: 64px 0 24px;
725    background: var(--paper);
726  }
727  .dashboard-banner-section {
728    position: relative;
729    width: 100vw;
730    margin-left: calc(50% - 50vw);
731    margin-right: calc(50% - 50vw);
732    margin-bottom: 2rem;
733    overflow: hidden;
734    background: #f7f9fd;
735    box-shadow: 0 16px 34px rgba(16, 24, 40, 0.1);
736  }
737  .dashboard-banner-track { position: relative; min-height: 220px; }
738  .dashboard-banner-slide {
739    position: absolute;
740    inset: 0;
741    opacity: 0;
742    visibility: hidden;
743    transition: opacity 0.65s ease;
744  }
745  .dashboard-banner-slide.is-active {
746    position: relative;
747    opacity: 1;
748    visibility: visible;
749  }
750  .dashboard-banner-image {
751    display: block;
752    width: 100%;
753    height: auto;
754    object-fit: cover;
755  }
756  .dashboard-banner-indicators {
757    position: absolute;
758    left: 50%;
759    bottom: 12px;
760    transform: translateX(-50%);
761    display: flex;
762    gap: 8px;
763    padding: 6px 10px;
764    border-radius: 999px;
765    background: rgba(255, 255, 255, 0.75);
766    backdrop-filter: blur(3px);
767  }
768  .dashboard-banner-dot {
769    width: 8px;
770    height: 8px;
771    border-radius: 50%;
772    border: none;
773    background: rgba(83, 43, 164, 0.35);
774    cursor: pointer;
775    transition: transform 0.2s ease, background 0.2s ease;
776  }
777  .dashboard-banner-dot.is-active {
778    background: var(--sage);
779    transform: scale(1.25);
780  }
781  .dashboard-showcarek12-header {
782    text-align: center;
783    margin: 0 auto 2rem;
784    max-width: 56rem;
785  }
786  .dashboard-header-logo {
787    width: min(360px, 80%);
788    height: auto;
789    margin: 0 auto 1rem;
790  }
791  .dashboard-showcarek12-header h2 {
792    margin: 0 0 0.9rem;
793    font-size: clamp(1.6rem, 2.8vw, 2.45rem);
794    line-height: 1.2;
795    letter-spacing: -0.02em;
796    font-weight: 800;
797  }
798  .dashboard-showcarek12-header p {
799    margin: 0;
800    color: var(--mist);
801    font-size: 1.03rem;
802    line-height: 1.6;
803  }
804  .dashboard-showcarek12-grid {
805    display: grid;
806    grid-template-columns: repeat(3, minmax(0, 1fr));
807    gap: 1.1rem;
808    margin-bottom: 2.2rem;
809  }
810  .dashboard-showcarek12-item {
811    display: block;
812    background: var(--white);
813    border: 1px solid rgba(0, 0, 0, 0.08);
814    border-radius: 16px;
815    padding: 1.35rem;
816    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
817  }
818  .dashboard-showcarek12-badge {
819    width: 100%;
820    height: 120px;
821    display: block;
822    object-fit: cover;
823    border-radius: 12px;
824    margin-bottom: 0.95rem;
825  }
826  .dashboard-showcarek12-item h4 {
827    margin: 0 0 0.55rem;
828    font-size: 1.15rem;
829  }
830  .dashboard-showcarek12-item p {
831    margin: 0;
832    color: var(--mist);
833  }
834  .dashboard-demo-layout {
835    position: relative;
836    background: url("assets/back_image.jpg") center center / cover no-repeat;
837    border: 1px solid rgba(15, 23, 42, 0.16);
838    border-radius: 20px;
839    padding: 1.5rem;
840    display: grid;
841    grid-template-columns: 1.2fr 1fr;
842    gap: 1.2rem;
843    overflow: hidden;
844    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.24);
845  }
846  .dashboard-demo-layout::before {
847    content: "";
848    position: absolute;
849    inset: 0;
850    background: linear-gradient(120deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.58));
851    z-index: 0;
852  }
853  .dashboard-demo-layout > * {
854    position: relative;
855    z-index: 1;
856  }
857  .mt-5 {
858    grid-column: 1 / -1;
859    margin-top: 0;
860    margin-bottom: 0;
861  }
862  .dashboard-demo-layout .dashboard-showcarek12-header { margin-bottom: 0.35rem; }
863  .dashboard-demo-layout .dashboard-showcarek12-header h2 { color: #ffffff; }
864  .dashboard-demo-layout .dashboard-showcarek12-header p { color: rgba(255, 255, 255, 0.85); }
865  .dashboard-demo-content { padding: 1.3rem; color: #ffffff; }
866  .dashboard-demo-pill {
867    display: inline-block;
868    padding: 0.38rem 0.78rem;
869    border-radius: 999px;
870    background: rgba(255, 255, 255, 0.16);
871    color: #ffffff;
872    border: 1px solid rgba(255, 255, 255, 0.32);
873    font-size: 0.8rem;
874    font-weight: 600;
875    margin-bottom: 0.9rem;
876  }
877  .dashboard-demo-content h2 {
878    margin: 0 0 0.85rem;
879    font-size: clamp(1.45rem, 2.5vw, 2rem);
880    line-height: 1.2;
881    letter-spacing: -0.02em;
882  }
883  .dashboard-demo-content p {
884    margin: 0 0 0.9rem;
885    color: rgba(255, 255, 255, 0.9);
886  }
887  .dashboard-demo-metrics {
888    margin-top: 1.25rem;
889    display: grid;
890    grid-template-columns: repeat(3, minmax(0, 1fr));
891    gap: 0.75rem;
892  }
893  .dashboard-demo-metrics > div {
894    background: rgba(255, 255, 255, 0.12);
895    border: 1px solid rgba(255, 255, 255, 0.28);
896    border-radius: 12px;
897    padding: 0.82rem;
898  }
899  .dashboard-demo-metrics h5 { margin: 0; font-size: 1.2rem; color: #ffffff; }
900  .dashboard-demo-metrics span { color: rgba(255, 255, 255, 0.84); font-size: 0.84rem; }
901  .dashboard-demo-form-wrap { padding: 1.3rem; }
902  .dashboard-book-demo-card {
903    border: 1px solid rgba(255, 255, 255, 0.42);
904    border-radius: 16px;
905    background: rgba(255, 255, 255, 0.9);
906    width: 100%;
907    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.22);
908  }
909  .card-body { padding: 1.2rem; }
910  .form-group { display: flex; flex-direction: column; }
911  .form-group label {
912    font-weight: 600;
913    margin-bottom: 0.5rem;
914    color: #1f2a44;
915    font-size: 0.92rem;
916  }
917  .text-danger { color: #dc2626; }
918  .dashboard-showcarek12-section input,
919  .dashboard-showcarek12-section select,
920  .dashboard-showcarek12-section textarea {
921    width: 100%;
922    border: 1px solid #c8d3ea;
923    border-radius: 10px;
924    background: #fbfcff;
925    padding: 0.72rem 0.8rem;
926    font-size: 0.95rem;
927    color: #162033;
928    outline: none;
929    transition: border-color 0.2s ease, box-shadow 0.2s ease;
930  }
931  .dashboard-showcarek12-section input:focus,
932  .dashboard-showcarek12-section select:focus,
933  .dashboard-showcarek12-section textarea:focus {
934    border-color: var(--sage);
935    box-shadow: 0 0 0 3px rgba(83, 43, 164, 0.14);
936  }
937  .dashboard-showcarek12-section textarea { resize: vertical; min-height: 110px; }
938  .mb-3 { margin-bottom: 1rem; }
939  .dashboard-form-btn {
940    border: 0;
941    cursor: pointer;
942    border-radius: 12px;
943    padding: 0.82rem 1rem;
944    font-weight: 700;
945    letter-spacing: 0.01em;
946    color: #f
946ff;
947    background: var(--sage);
948    box-shadow: 0 10px 22px rgba(83, 43, 164, 0.32);
949    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
950  }
951  .dashboard-form-btn:hover:enabled {
952    background: var(--sage-lt);
953    transform: translateY(-1px);
954    box-shadow: 0 15px 26px rgba(83, 43, 164, 0.36);
955  }
956  .dashboard-form-btn:disabled { opacity: 0.75; cursor: not-allowed; }
957  .w-100 { width: 100%; }
958  .dashboard-book-demo-success,
959  .dashboard-book-demo-error {
960    margin-top: 0.95rem;
961    border-radius: 8px;
962    padding: 0.65rem 0.75rem;
963    font-size: 0.9rem;
964  }
965  .dashboard-book-demo-success { background: #ecfdf3; color: #065f46; }
966  .dashboard-book-demo-error { background: #fef2f2; color: #991b1b; }
967  .hidden { display: none; }
968  @media (max-width: 992px) {
969    .dashboard-showcarek12-grid,
970    .dashboard-demo-metrics { grid-template-columns: 1fr; }
971    .dashboard-demo-layout {
972      grid-template-columns: 1fr;
973      padding: 1rem;
974    }
975    .dashboard-demo-content,
976    .dashboard-demo-form-wrap { padding: 0.35rem; }
977    .dashboard-showcarek12-header { margin-bottom: 1.5rem; }
978  }
979  @media (max-width: 700px) {
980    .dashboard-header-logo { width: min(280px, 88%); }
981  }
982
983  @media (max-width: 960px) {
984    .nav-inner {
985      flex-wrap: wrap;
986      gap: 10px;
987      justify-content: center;
988    }
989    .nav-links {
990      width: 100%;
991      justify-content: center;
992      flex-wrap: wrap;
993      gap: 12px 18px;
994    }
995    .hero {
996      padding: 92px 0 74px;
997    }
998    .hero-stats {
999      gap: 24px;
1000      margin-top: 56px;
1001    }
1002    .mid-cta {
1003      padding: 40px 30px;
1004    }
1005    .mid-cta-right {
1006      width: 100%;
1007      text-align: left;
1008    }
1009    .mid-cta-actions {
1010      justify-content: flex-start;
1011      flex-wrap: wrap;
1012    }
1013    .persona-tabs {
1014      max-width: 100%;
1015      flex-wrap: wrap;
1016      justify-content: center;
1017      border-radius: 16px;
1018    }
1019  }
1020
1021  @media (max-width: 640px) {
1022    .container {
1023      padding: 0 16px;
1024    }
1025    nav {
1026      padding: 12px 0;
1027    }
1028    .nav-logo img {
1029      width: clamp(96px, 30vw, 130px);
1030    }
1031    .nav-links a {
1032      font-size: 0.86rem;
1033    }
1034    .btn-sm {
1035      padding: 9px 16px;
1036      font-size: 0.82rem;
1037    }
1038    .hero-dots {
1039      width: 300px;
1040      height: 300px;
1041      opacity: 0.06;
1042    }
1043    .hero-sub {
1044      font-size: 1rem;
1045      margin: 18px 0 28px;
1046    }
1047    .hero-stats {
1048      gap: 16px;
1049    }
1050    .hero-stat-item {
1051      min-width: calc(50% - 8px);
1052    }
1053    .hero-stat-num {
1054      font-size: 2rem;
1055    }
1056    .trust-bar-inner {
1057      gap: 14px;
1058      justify-content: flex-start;
1059      overflow-x: auto;
1060      flex-wrap: nowrap;
1061      padding: 0 2px;
1062      -webkit-overflow-scrolling: touch;
1063    }
1064    .trust-divider {
1065      display: none;
1066    }
1067    .mid-cta {
1068      padding: 30px 22px;
1069      margin: 44px auto;
1070    }
1071    .mid-cta h2 {
1072      font-size: 1.55rem;
1073    }
1074    .mid-cta-actions {
1075      width: 100%;
1076      flex-direction: column;
1077      align-items: stretch;
1078    }
1079    .mid-cta-actions .btn {
1080      justify-content: center;
1081      width: 100%;
1082    }
1083    .persona-tab {
1084      padding: 9px 16px;
1085      font-size: 0.82rem;
1086    }
1087    .section-final-cta {
1088      padding: 88px 0;
1089    }
1090    .cta-buttons {
1091      gap: 10px;
1092    }
1093    .cta-buttons .btn {
1094      width: 100%;
1095      justify-content: center;
1096    }
1097    .footer-bottom {
1098      flex-direction: column;
1099      align-items: center;
1100    }
1101  }
1102</style>
1103</head>
1104<body>
1105
1106<!-- ═══════════════════════════════════════════════════ -->
1107<!--  NAV                                                -->
1108<!-- ═══════════════════════════════════════════════════ -->
1109<nav>
1110  <div class="nav-inner">
1111    <div class="nav-logo">
1112      <img src="assets/logo.png" alt="SYNTCH logo" />
1113    </div>
1114    <div class="nav-links">
1115      <a href="#features">Features</a>
1116      <a href="#proof">Results</a>
1117      <a href="#book-demo" class="btn btn-primary btn-sm">Book a Demo →</a>
1118    </div>
1119  </div>
1120</nav>
1121
1122<!-- ═══════════════════════════════════════════════════ -->
1123<!--  HERO                                               -->
1124<!-- ═══════════════════════════════════════════════════ -->
1125<section class="hero">
1126  <div class="hero-dots"></div>
1127  <div class="container hero-content">
1128
1129    <p class="tag tag-sage fade-up" style="margin-bottom:20px;">
1129AI-Powered Education Platform · Age 2 → Grade 12</p>
1130
1131    <h1 class="fade-up delay-1">
1132      Stop Managing Paperwork.<br/>
1133      <em>Start Shaping Futures.</em>
1134    </h1>
1135
1136    <p class="hero-sub fade-up delay-2">
1137      Syntch is the unified AI platform that takes the administrative weight off educators' shoulders — so every hour reclaimed becomes a richer learning moment for every child.
1138    </p>
1139
1140    <div class="hero-cta-group fade-up delay-3">
1141      <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action →</a>
1142      <a href="#features" class="btn btn-outline btn-lg" style="color:#fff;border-color:rgba(255,255,255,0.35);">Explore Features</a>
1143    </div>
1144    <p class="hero-fomo fade-up delay-4">
1145      <strong>35%+ of schools globally</strong> have already adopted AI learning platforms. The window to lead is now.
1146    </p>
1147
1148    <div class="hero-stats fade-up delay-4">
1149      <div class="hero-stat-item">
1150        <div class="hero-stat-num">6–7<span> hrs</span></div>
1151        <div class="hero-stat-label">saved weekly per educator on admin tasks</div>
1152      </div>
1153      <div class="hero-stat-item">
1154        <div class="hero-stat-num">54<span>%</span></div>
1155        <div class="hero-stat-label">of K–12 students already use AI for school</div>
1156      </div>
1157      <div class="hero-stat-item">
1158        <div class="hero-stat-num">20<span>%</span></div>
1159        <div class="hero-stat-label">increase in parent engagement on AI platforms</div>
1160      </div>
1161      <div class="hero-stat-item">
1162        <div class="hero-stat-num">38<span>%</span></div>
1163        <div class="hero-stat-label">annual growth rate in AI K–12 education market</div>
1164      </div>
1165    </div>
1166
1167  </div>
1168</section>
1169
1170<!-- ═══════════════════════════════════════════════════ -->
1171<!--  TRUST BAR                                          -->
1172<!-- ═══════════════════════════════════════════════════ -->
1173<div class="trust-bar">
1174  <div class="trust-bar-inner">
1175    <span class="trust-badge">
1176      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
1177      FERPA Compliant
1178    </span>
1179    <span class="trust-divider"></span>
1180    <span class="trust-badge">
1181      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
1182      COPPA Certified
1183    </span>
1184    <span class="trust-divider"></span>
1185    <span class="trust-badge">
1186      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
1187      GDPR Ready
1188    </span>
1189    <span class="trust-divider"></span>
1190    <span class="trust-badge">
1191      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
1192      SOC 2 Type II
1193    </span>
1194    <span class="trust-divider"></span>
1195    <span class="trust-badge">
1196      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
1197      Trusted by 1,200+ Institutions
1198    </span>
1199  </div>
1200</div>
1201
1202<!-- ═══════════════════════════════════════════════════ -->
1203<!--  THE PROBLEM                                        -->
1204<!-- ═══════════════════════════════════════════════════ -->
1205<section class="section section-problem" id="problem">
1206  <div class="container">
1207    <div class="section-intro">
1208      <p class="eyebrow">The Problem We're Solving</p>
1209      <h2>Educators Are Losing the Hours That Matter Most</h2>
1210      <p>The educators you employ became teachers and caregivers to make a difference in children's lives — not to wrestle with spreadsheets, chase down tuition payments, or rewrite the same report for the third time this week.</p>
1211    </div>
1212
1213    <div class="problem-cards grid-3" style="margin-top:52px;">
1214      <div class="problem-card">
1215        <div class="icon">📋</div>
1216        <h3>Administrative Overload</h3>
1217        <p>Teachers and center directors spend up to 30–40% of their day on non-instructional tasks — billing, compliance paperwork, scheduling, and documentation.</p>
1218        <span class="stat-callout">6–7 hrs/week</span>
1219        <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">lost per educator to admin work</p>
1220      </div>
1221      <div class="problem-card">
1222        <div class="icon">🚨</div>
1223        <h3>At-Risk Students Slip Through</h3>
1224        <p>Without early warning systems, struggling students aren't identified until failure is already visible. Reactive intervention is too late — and too costly.</p>
1225        <span class="stat-callout">23% more</span>
1226        <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">at-risk students identified with AI tools</p>
1227      </div>
1228      <div class="problem-card">
1229        <div class="icon">👨‍👩‍👧</div>
1230        <h3>Disconnected Families</h3>
1231        <p>Parents want visibility. Language barriers, busy schedules, and delayed communication leave families disengaged — eroding trust and enrollment retention.</p>
1232        <span class="stat-callout">20% increase</span>
1233        <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">in parent engagement with AI communication tools</p>
1234      </div>
1235    </div>
1236
1237  </div>
1238</section>
1239
1240<!-- ═══════════════════════════════════════════════════ -->
1241<!--  SOLUTION / BENEFITS                                -->
1242<!-- ═══════════════════════════════════════════════════ -->
1243<section class="section section-solution" id="solution">
1244  <div class="container">
1245    <div class="section-intro">
1246      <p class="eyebrow">Why Syntch Works</p>
1247      <h2>Four Ways Syntch Transforms Learning</h2>
1248      <p>Syntch doesn't just automate tasks. It restructures what's possible — for students, educators, families, and institutions.</p>
1249    </div>
1250
1251    <!-- Benefit 1 -->
1252    <div class="benefit-row">
1253      <div class="benefit-visual">
1254        <div class="benefit-number">01</div>
1255        <div class="benefit-metric">38%</div>
1256        <div class="benefit-metric-label">Faster skill mastery on personalized paths</div>
1257        <div class="progress-bar-wrap">
1258          <div class="progress-label"><span>Traditional one-size-fits-all</span><span>45%</span></div>
1259          <div class="progress-bg"><div class="progress-fill" style="width:45%"></div></div>
1260        </div>
1261        <div class="progress-bar-wrap" style="margin-top:10px;">
1262          <div class="progress-label"><span>Syntch adaptive learning</span><span>83%</span></div>
1263          <div class="progress-bg"><div class="progress-fill" style="width:83%"></div></div>
1264        </div>
1265        <p style="margin-top:14px;font-size:0.8rem;color:rgba(255,255,255,0.35);">Concept mastery rate at semester end</p>
1266      </div>
1267      <div class="benefit-text">
1268        <span class="tag tag-sage">Personalized Learning</span>
1269        <h3>Every Student Learns at Their Own Perfect Pace</h3>
1270        <p>Syntch's adaptive AI engine continuously analyzes each child's performance, learning style, and knowledge gaps — adjusting content in real time. No student is left bored or left behind.</p>
1271        <ul class="benefit-list">
1272          <li>AI-generated learning pathways unique to every student</li>
1273          <li>Real-time content difficulty adjustment based on response patterns</li>
1274          <li>Progress dashboards visible to teachers and parents simultaneously</li>
1275          <li>Works from early literacy (age 2) through Advanced Placement (grade 12)</li>
1276        </ul>
1277      </div>
1278    </div>
1279
1280    <!-- Benefit 2 -->
1281    <div class="benefit-row reverse">
1282      <div class="benefit-visual">
1283        <div class="benefit-number">
128302</div>
1284        <div class="benefit-metric">23%</div>
1285        <div class="benefit-metric-label">More at-risk students identified early</div>
1286        <div style="margin-top:24px;background:rgba(255,255,255,0.04);border-radius:10px;padding:16px 18px;">
1287          <p style="font-size:0.82rem;color:rgba(255,255,255,0.55);margin-bottom:10px;">🔴 HIGH RISK · 3 students flagged this week</p>
1288          <div style="background:rgba(255,255,255,0.06);border-radius:8px;padding:12px 14px;margin-bottom:8px;">
1289            <p style="font-size:0.85rem;color:rgba(255,255,255,0.8);">Jayden M. · Grade 4</p>
1290            <p style="font-size:0.78rem;color:rgba(232,146,74,0.9);margin-top:3px;">Reading comprehension 40% below grade average — 14 days</p>
1291          </div>
1292          <div style="background:rgba(255,255,255,0.06);border-radius:8px;padding:12px 14px;">
1293            <p style="font-size:0.85rem;color:rgba(255,255,255,0.8);">Sofia R. · Daycare Room B</p>
1294            <p style="font-size:0.78rem;color:rgba(232,146,74,0.9);margin-top:3px;">Milestone delay: fine motor skills — review recommended</p>
1295          </div>
1296        </div>
1297        <p style="margin-top:12px;font-size:0.78rem;color:rgba(255,255,255,0.25);">Illustrative UI — Syntch Early Warning Dashboard</p>
1298      </div>
1299      <div class="benefit-text">
1300        <span class="tag tag-amber">Early Intervention</span>
1301        <h3>Catch the Warning Signs Before They Become Crises</h3>
1302        <p>Syntch's AI monitors developmental milestones and academic indicators continuously, surfacing at-risk children before failure becomes visible to the naked eye. For daycare, it tracks developmental benchmarks. For K–12, it monitors engagement, performance, and behavioral patterns.</p>
1303        <ul class="benefit-list">
1304          <li>AI early warning flags updated daily for every student</li>
1305          <li>Developmental milestone tracking from age 2 to grade 12</li>
1306          <li>Automated referral workflows to counselors or specialists</li>
1307          <li>Identifies 23% more at-risk students before intervention is urgent</li>
1308        </ul>
1309      </div>
1310    </div>
1311
1312    <!-- Benefit 3 -->
1313    <div class="benefit-row">
1314      <div class="benefit-visual">
1315        <div class="benefit-number">03</div>
1316        <div class="benefit-metric">6.5<span style="font-size:1.8rem;color:rgba(126,201,155,0.6)">hrs</span></div>
1317        <div class="benefit-metric-label">Average admin hours saved per educator weekly</div>
1318        <div style="margin-top:24px;">
1319          <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
1320            <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">✅</div>
1321            <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Billing & invoicing auto-generated</p>
1322          </div>
1323          <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
1324            <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">✅</div>
1325            <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Compliance reports compiled in seconds</p>
1326          </div>
1327          <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
1328            <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">✅</div>
1329            <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Scheduling optimized with one click</p>
1330          </div>
1331          <div style="display:flex;align-items:center;gap:12px;">
1332            <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">✅</div>
1333            <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Parent reports sent automatically each day</p>
1334          </div>
1335        </div>
1336      </div>
1337      <div class="benefit-text">
1338        <span class="tag tag-sage">Time Reclaimed</span>
1339        <h3>Give Educators Back the Hours That Belong in the Classroom</h3>
1340        <p>Every minute your teachers spend on scheduling, billing, and data entry is a minute not spent with a child. Syntch automates the entire administrative backbone — so your team's energy flows back where it was always meant to go.</p>
1341        <ul class="benefit-list">
1342          <li>Educators report saving 6–7 hours per week on admin tasks</li>
1343          <li>Centers using AI admin tools see 12–20% efficiency gains</li>
1344          <li>Smart scheduling, waitlist management, and automated billing</li>
1345          <li>Real-time compliance documentation — no end-of-month scramble</li>
1346        </ul>
1347      </div>
1348    </div>
1349
1350    <!-- Benefit 4 -->
1351    <div class="benefit-row reverse">
1352      <div class="benefit-visual">
1353        <div class="benefit-number">04</div>
1354        <div class="benefit-metric">20%</div>
1355        <div class="benefit-metric-label">Average increase in parent engagement</div>
1356        <div style="margin-top:20px;background:rgba(255,255,255,0.04);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.07);">
1357          <p style="font-size:0.78rem;color:rgba(255,255,255,0.4);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em;">Daily Parent Update · Auto-generated</p>
1358          <p style="font-size:0.92rem;color:rgba(255,255,255,0.85);line-height:1.6;font-family:'Playfair Display',serif;font-style:italic;">"Emma had a wonderful morning — she completed her shape-sorting activity independently and was engaged during story time. Her fine motor progress is strong this week."</p>
1359          <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;">
1360            <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">📸 3 photos added</span>
1361            <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">🌐 Translated: Spanish</span>
1362            <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">✅ Sent 3:14 PM</span>
1363          </div>
1364        </div>
1365      </div>
1366      <div class="benefit-text">
1367        <span class="tag tag-amber">Family Engagement</span>
1368        <h3>Keep Every Family in the Story of Their Child's Day</h3>
1369        <p>Syntch bridges the gap between classroom and home — automatically generating rich, multilingual daily reports that connect parents to their child's progress in real time. No language barrier. No communication lag. No parent left wondering.</p>
1370        <ul class="benefit-list">
1371          <li>AI-written daily observations pushed to parents automatically</li>
1372          <li>Multilingual translation with support for 30+ languages</li>
1373          <li>Photo and activity logs compiled without teacher effort</li>
1374          <li>20% improvement in parent engagement and retention rates</li>
1375        </ul>
1376      </div>
1377    </div>
1378
1379  </div>
1380</section>
1381
1382<!-- ═══════════════════════════════════════════════════ -->
1383<!--  STATS BAND                                         -->
1384<!-- ═══════════════════════════════════════════════════ -->
1385<div class="stats-band">
1386  <div class="container">
1387    <div class="stats-band-inner">
1388      <div>
1389        <div class="stat-num">$<em>7.95B</em></div>
1390        <div class="stat-desc">Projected AI K–12 education market by 2033 — growing at 38% annually</div>
1391      </div>
1392      <div>
1393        <div class="stat-num"><em>54</em>%</div>
1394        <div class="stat-desc">of K–12 students already use AI for learning — your platform should too</div>
1395      </div>
1396      <div>
1397        <div class="stat-num"><em>28</em></div>
1398        <div class="stat-desc">U.S. states with official AI guidance for K–12 education as of 2025</div>
1399      </div>
1400      <div>
1401        <div class="stat-num"><em>12–20</em>%</div>
1402        <div class="stat-desc">Efficiency gains reported by centers using AI admin tools</div>
1403      </div>
1404    </div>
1405  </div>
1406</div>
1407
1408<!-- ═══════════════════════════════════════════════════ -->
1409<!--  FEATURES                                           -->
1410<!-- ═══════════════════════════════════════════════════ -->
1411<section class="section section-features" id="features">
1412  <div class="container">
1413    <div class="section-intro" style="text-align:center;max-width:600px;margin:0 auto;">
1414      <p class="eyebrow">Platform Capabilities</p>
1415      <h2>Everything Your Institution Needs. One Platform.</h2>
1416      <p style="margin-top:14px;">From the first day of daycare to high school graduation, Syntch covers the complete educational journey.</p>
1417    </div>
1418
1419    <div class="grid-4" style="margin-top:52px;">
1420
1421      <div class="feature-card">
1422        <div class="feature-icon">🧠</div>
1423        <h3>Adaptive Learning Engine</h3>
1424        <p>
1424AI-powered content delivery that adjusts in real time to each student's pace, learning style, and performance — from pre-literacy exercises to AP coursework.</p>
1425      </div>
1426
1427      <div class="feature-card">
1428        <div class="feature-icon">🚨</div>
1429        <h3>AI Early Warning System</h3>
1430        <p>Continuous monitoring of academic performance and developmental milestones. Flags at-risk students before problems escalate — with one-click intervention workflows built in.</p>
1431      </div>
1432
1433      <div class="feature-card">
1434        <div class="feature-icon">📱</div>
1435        <h3>Parent Communication Portal</h3>
1436        <p>Automated real-time daily reports, photos, and activity summaries sent directly to parents. AI translation supports 30+ languages, removing every communication barrier.</p>
1437      </div>
1438
1439      <div class="feature-card">
1440        <div class="feature-icon">📅</div>
1441        <h3>Smart Scheduling & Staffing</h3>
1442        <p>AI-optimized scheduling ensures correct staff-to-child ratios, manages substitute placement, and surfaces staffing gaps before they become problems.</p>
1443      </div>
1444
1445      <div class="feature-card">
1446        <div class="feature-icon">💳</div>
1447        <h3>Automated Billing & Payments</h3>
1448        <p>Invoicing, tuition collection, subsidy tracking, and late payment reminders — fully automated. No more chasing payments or manual reconciliation.</p>
1449      </div>
1450
1451      <div class="feature-card">
1452        <div class="feature-icon">📊</div>
1453        <h3>Administrator Analytics Dashboard</h3>
1454        <p>Real-time enrollment trends, occupancy forecasts, academic performance summaries, and compliance status — all in one executive-level view.</p>
1455      </div>
1456
1457      <div class="feature-card">
1458        <div class="feature-icon">🌱</div>
1459        <h3>Child Development Tracking</h3>
1460        <p>Longitudinal developmental records from age 2 through grade 12. Tracks milestones against age-appropriate benchmarks and generates structured assessment reports.</p>
1461      </div>
1462
1463      <div class="feature-card">
1464        <div class="feature-icon">🏫</div>
1465        <h3>Enrollment & Waitlist Management</h3>
1466        <p>AI captures and qualifies inquiries, manages waitlists intelligently, and guides families through onboarding — reducing admin time and increasing fill rates.</p>
1467      </div>
1468
1469    </div>
1470  </div>
1471</section>
1472
1473<!-- ═══════════════════════════════════════════════════ -->
1474<!--  MID-PAGE CTA                                       -->
1475<!-- ═══════════════════════════════════════════════════ -->
1476<div class="container">
1477  <div class="mid-cta" id="demo">
1478    <div>
1479      <h2>Ready to <em>reclaim your time</em> and transform learning?</h2>
1480      <p style="margin-top:12px;color:#5a6470;font-size:0.95rem;">Join the institutions already using Syntch to close learning gaps and re-energize their educators.</p>
1481    </div>
1482    <div class="mid-cta-right">
1483      <div class="mid-cta-actions">
1484        <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action →</a>
1485        <a href="#book-demo" class="btn btn-outline">Start Free 14-Day Trial</a>
1486      </div>
1487      <p class="fomo">Over 35% of schools globally have adopted AI platforms. Don't lead from behind.</p>
1488    </div>
1489  </div>
1490</div>
1491
1492<!-- ═══════════════════════════════════════════════════ -->
1493<!--  PERSONAS / USE CASES                               -->
1494<!-- ═══════════════════════════════════════════════════ -->
1495<section class="section section-personas" id="personas">
1496  <div class="container">
1497    <div class="section-intro" style="text-align:center;max-width:560px;margin:0 auto 40px;">
1498      <p class="eyebrow">Built for Everyone on Your Team</p>
1499      <h2>One Platform. Three Perspectives. Infinite Impact.</h2>
1500    </div>
1501
1502    <div class="persona-tabs">
1503      <button type="button" class="persona-tab active" data-tab="daycare" onclick="switchTab(this, 'daycare')">Daycare Centers</button>
1504      <button type="button" class="persona-tab" data-tab="k12" onclick="switchTab(this, 'k12')">K–12 Schools</button>
1505      <button type="button" class="persona-tab" data-tab="parents" onclick="switchTab(this, 'parents')">Parents & Families</button>
1506    </div>
1507
1508    <div class="persona-content active" id="tab-daycare">
1509      <div class="persona-item">
1510        <h4>🏠 Center Directors</h4>
1511        <p>Manage enrollment, billing, and compliance from a single dashboard. Syntch automates the back-office so you can focus on building a thriving center culture — not chasing down paperwork.</p>
1512      </div>
1513      <div class="persona-item">
1514        <h4>👧 Lead Caregivers & Teachers</h4>
1515        <p>Spend less time writing observation reports and more time with children. Syntch generates structured developmental notes and parent updates automatically, based on your logged activities.</p>
1516      </div>
1517      <div class="persona-item">
1518        <h4>📈 Multi-Site Operators</h4>
1519        <p>Manage multiple locations from one unified view. Track occupancy, staff ratios, revenue, and compliance status across every center without switching systems or building custom spreadsheets.</p>
1520      </div>
1521      <div class="persona-item">
1522        <h4>🧒 Children Age 2–5</h4>
1523        <p>Learning through play becomes measurable. Syntch tracks developmental milestones — language, motor, social — and automatically alerts educators and families when a child needs additional support.</p>
1524      </div>
1525    </div>
1526
1527    <div class="persona-content" id="tab-k12">
1528      <div class="persona-item">
1529        <h4>🏫 Principals & Administrators</h4>
1530        <p>Real-time dashboards show attendance trends, academic performance, and early warning flags. Make decisions on data — not instinct. Compliance reports generate themselves.</p>
1531      </div>
1532      <div class="persona-item">
1533        <h4>✏️ Classroom Teachers</h4>
1534        <p>Syntch handles grading assistance, lesson planning support, and progress report generation. Get back 6–7 hours of instructional capacity every week — and use them where it matters most.</p>
1535      </div>
1536      <div class="persona-item">
1537        <h4>📚 Students Grade K–12</h4>
1538        <p>AI-personalized learning paths meet each student exactly where they are. Whether they're accelerated, on track, or struggling, Syntch serves content that's always challenging and always achievable.</p>
1539      </div>
1540      <div class="persona-item">
1541        <h4>🎓 District Leaders</h4>
1542        <p>Aggregate performance data across every school. Identify system-wide learning gaps, equity concerns, and resource allocation opportunities — powered by predictive analytics.</p>
1543      </div>
1544    </div>
1545
1546    <div class="persona-content" id="tab-parents">
1547      <div class="persona-item">
1548        <h4>📲 Daily Visibility</h4>
1549        <p>Receive a rich daily update about your child's activities, milestones, and mood — delivered automatically to your phone each day before pickup.</p>
1550      </div>
1551      <div class="persona-item">
1552        <h4>🌐 No Language Barriers</h4>
1553        <p>Every report is automatically translated into your preferred language. 30+ languages supported — because your child's progress should never be lost in translation.</p>
1554      </div>
1555      <div class="persona-item">
1556        <h4>📊 Progress at a Glance</h4>
1557        <p>Track your child's academic and developmental growth over months and years. See exactly where they excel, where they need support, and how they're trending — all in one dashboard.</p>
1558      </div>
1559      <div class="persona-item">
1560        <h4>🤝 Direct Communication</h4>
1561        <p>Message teachers, review invoices, and confirm schedules — all through the same Syntch app. No more juggling three different tools and a group chat.</p>
1562      </div>
1563    </div>
1564  </div>
1565</section>
1566
1567<!-- ═══════════════════════════════════════════════════ -->
1568<!--  SOCIAL PROOF                                       -->
1569<!-- ═══════════════════════════════════════════════════ -->
1570<section class="section section-proof" id="proof">
1571  <div class="container">
1572    <div class="section-intro">
1573      <p class="eyebrow">Real-World Results</p>
1574      <h2>The Numbers Tell the Story</h2>
1575      <p>Across daycare centers and school districts, Syntch is already changing what's possible — for educators, administrators, and the children they serve.</p>
1576    </div>
1577
1578    <div class="proof-grid">
1579
1580      <div class="case-card">
1581        <div class="quote-mark">"</div>
1582        <blockquote>[School District] identified 23% more at-risk students before semester end — enabling earlier, more targeted intervention and reducing year-end failure rates.</blockquote>
1583        <p class="case-meta">📍 Mid-sized public school district · Grades 3–8</p>
1584        <span class="case-result">↑ 23% early identification rate</span>
1585      </div>
1586
1587      <div class="case-card">
1588        <div class="quote-mark">"</div>
1589        <blockquote>[Daycare Group] reduced billing and invoicing time by 4 hours per week in the first month after launching Syntch — with zero late payment follow-ups in month two.</blockquote>
1590        <p class="case-meta">📍 Multi-location childcare operator · 3 centers, 240 children</p>
1591        <span class="case-result">↓ 4 hrs/week admin savings</span>
1592      </div>
1593
1594      <div class="case-card">
1595        <div class="quote-mark">"</div>
1596        <blockquote>[Elementary School] saw parent app engagement jump 20% within 60 days of launch — with multilingual daily reports driving adoption across non-English-speaking families.</blockquote>
1597        <p class="case-meta">📍 Title I elementary school · Diverse urban community</p>
1598        <span class="case-result">↑ 20% parent engagement</span>
1599      </div>
1600
1601      <div class="case-card">
1602        <div class="quote-mark">"</div>
1603        <blockquote>[Daycare Center] grew enrollment by 18% in one semester using Syntch's AI inquiry tracking and waitlist management — filling 14 previously empty spots.</blockquote>
1604        <p class="case-meta">📍 Independent daycare · 95-child capacity</p>
1605        <span class="case-result">↑ 18% enrollment growth</span>
1606      </div>
1607
1608    </div>
1609
1610    <!-- Trust Block -->
1611    <div class="trust-block">
1612      <div class="trust-block-text">
1613        <h3>🔒 Your Children's Data Is Safe With Us</h3>
1614        <p>Syntch was architected from day one with child data privacy as a non-negotiable foundation. We never sell, share, or monetize student or child data. Every AI recommendation is explainable, human-reviewed, and advisory — educators remain in full control.</p>
1615        <div class="compliance-badges">
1616          <span class="badge">FERPA</span>
1617          <span class="badge">COPPA</span>
1618          <span class="badge">GDPR</span>
1619          <span class="badge">SOC 2 Type II</span>
1620          <span class="badge">CIPA</span>
1621        </div>
1622      </div>
1623      <div style="flex-shrink:0;">
1624        <div style="text-align:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:14px;padding:28px 32px;">
1625          <div style="font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;color:#7ec99b;">100%</div>
1626          <div style="font-size:0.82rem;color:rgba(255,255,255,0.5);margin-top:6px;">Zero data sold<br/>to third parties.<br/>Ever.</div>
1627        </div>
1628      </div>
1629    </div>
1630
1631  </div>
1632</section>
1633
1634<!-- ═══════════════════════════════════════════════════ -->
1635<!--  FINAL CTA                                          -->
1636<!-- ═══════════════════════════════════════════════════ -->
1637<section class="section-final-cta" id="pricing">
1638  <div class="container cta-content">
1639    <!-- <p class="tag tag-sage" style="display:inline-block;margin-bottom:20px;">The Window to Lead Is Open</p> -->
1640    <h2>It's Time to Give Your Educators<br/><em>the Tools They've Always Deserved.</em></h2>
1641    <p>Join Syntch and transform your daycare or school into an institution where AI handles the busywork, educators lead with purpose, and every child reaches their potential.</p>
1642    <div class="cta-buttons">
1643      <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action →</a>
1644      <a href="#book-demo" class="btn btn-amber btn-lg">Start Free 14-Day Trial</a>
1645    </div>
1646    <p class="cta-trust">
1647      No credit card required · Setup in under 30 minutes · Cancel anytime<br/>
1648      <a href="#proof">FERPA &amp; COPPA Compliant</a> · <a href="#proof">Data Privacy Policy</a>
1649    </p>
1650    <div style="margin-top:52px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;opacity:0.45;">
1651      <div style="text-align:center;">
1652        <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">1,200+</div>
1653        <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Institutions served</div>
1654      </div>
1655      <div style="text-align:center;">
1656        <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">85,000+</div>
1657        <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Students & children on platform</div>
1658      </div>
1659      <div style="text-align:center;">
1660        <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">4.9 / 5</div>
1661        <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Average administrator satisfaction</div>
1662      </div>
1663    </div>
1664  </div>
1665</section>
1666
1667<!-- ═══════════════════════════════════════════════════ -->
1668<!--  SHOW/CARE/K12 + BOOK DEMO                        -->
1669<!-- ═══════════════════════════════════════════════════ -->
1670<section class="dashboard-showcarek12-section" id="book-demo">
1671  <div class="container" style="max-width: 98.5rem;">
1672    <div class="dashboard-demo-layout">
1673      <div class="dashboard-showcarek12-header mt-5">
1674        <h2>Book a Demo</h2>
1675        <p>Tell us about your school and we will contact you soon.</p>
1676      </div>
1677
1678      <div class="dashboard-demo-content">
1679        <div class="dashboard-demo-pill">School Success Platform</div>
1680        <h2>Empower Your Campus with SYNTCH</h2>
1681        <p>
1682          Connect educators, parents, and students with a modern platform designed for easy
1683          collaboration, better engagement, and faster communication.
1684        </p>
1685        <p>
1686          Book a personalized walkthrough to see how your institution can launch quickly and scale
1687          confidently.
1688        </p>
1689        <div class="dashboard-demo-metrics">
1690          <div>
1691            <h5>3x</h5>
1692            <span>Faster communication cycles</span>
1693          </div>
1694          <div>
1695            <h5>24/7</h5>
1696            <span>Parent + student visibility</span>
1697          </div>
1698          <div>
1699            <h5>K-12</h5>
1700            <span>Purpose-built workflows</span>
1701          </div>
1702        </div>
1703      </div>
1704
1705      <div class="dashboard-demo-form-wrap">
1706        <div class="dashboard-book-demo-card">
1707          <div class="card-body">
1708            <form id="bookDemoForm" novalidate>
1709              <div class="form-group mb-3">
1710                <label for="organization">System I am interested in : <span class="text-danger">*</span></label>
1711                <select id="organization" name="organization" required>
1712                  <option value="" selected disabled>Select system</option>
1713                  <option value="Show">Show</option>
1714                  <option value="Care">Care</option>
1715                  <option value="K12">K12</option>
1716                </select>
1717              </div>
1718              <div class="form-group mb-3">
1719                <label for="name">Name <span class="text-danger">*</span></label>
1720                <input id="name" type="text" name="name" required />
1721              </div>
1722              <div class="form-group mb-3">
1723                <label for="email">Email <span class="text-danger">*</span></label>
1724                <input id="email" type="email" name="email" required />
1725              </div>
1726              <div class="form-group mb-3">
1727                <label for="phone">Phone Number <span class="text-danger">*</span></label>
1728                <input id="phone" type="tel" name="phone" required />
1729              </div>
1730              <div class="form-group mb-3">
1731                <label for="message">Your Message <span class="text-danger">*</span></label>
1732                <textarea id="message" rows="3" name="message" required></textarea>
1733              </div>
1734              <button id="submitBtn" type="submit" class="dashboard-form-btn w-100">BOOK A DEMO</button>
1735              <div id="demoSuccess" class="dashboard-book-demo-success hidden">Thanks! Your demo request has been received.</div>
1736              <div id="demoError" class="dashboard-book-demo-error hidden">Unable to submit right now. Please try again.</div>
1737            </form>
1738          </div>
1739        </div>
1740      </div>
1741    </div>
1742  </div>
1743</section>
1744
1745<!-- ═══════════════════════════════════════════════════ -->
1746<!--  FOOTER                                             -->
1747<!-- ═══════════════════════════════════════════════════ -->
1748<footer>
1749  <div class="container">
1750    <div class="footer-inner">
1751      <div class="footer-logo"><img src="assets/logo.png" alt="SYNTCH logo" /></div>
1752      <p class="footer-tagline">AI-Powered SaaS Platform for Daycare &amp; K–12 Education · Age 2 through Grade 12</p>
1753      <div class="footer-links">
1754        <a href="#features">Features</a>
1755        <a href="#proof">Results</a>
1756        <a href="#book-demo">Book a Demo</a>
1757      </div>
1758      <div class="footer-divider"></div>
1759      <div class="footer-bottom">
1760        <p class="footer-copy">© 2025 Syntch Inc.</p>
1761        <div class="footer-meta">
1762          <a href="#proof">Privacy Policy</a>
1763          <a href="#proof">Terms of Service</a>
1764          <span>FERPA &amp; COPPA Compliant</span>
1765        </div>
1766      </div>
1767    </div>
1768  </div>
1769</footer>
1770
1771<script src="script.js"></script>
1771
1772
1773<script>
1774  // Tab switching for personas
1775  function switchTab(btn, id) {
1776    document.querySelectorAll('.persona-tab').forEach(t => t.classList.remove('active'));
1777    document.querySelectorAll('.persona-content').forEach(c => c.classList.remove('active'));
1778    btn.classList.add('active');
1779    const targetTab = document.getElementById('tab-' + id);
1780    if (targetTab) {
1781      targetTab.classList.add('active');
1782    }
1783  }
1784
1785  document.querySelectorAll('.persona-tabs .persona-tab').forEach((tabButton) => {
1786    tabButton.addEventListener('click', () => {
1787      switchTab(tabButton, tabButton.dataset.tab);
1788    });
1789  });
1790
1791  // Animate progress bars on scroll
1792  const observer = new IntersectionObserver((entries) => {
1793    entries.forEach(e => {
1794      if (e.isIntersecting) {
1795        e.target.querySelectorAll('.progress-fill').forEach(bar => {
1796          bar.style.transition = 'width 1.2s ease';
1797        });
1798      }
1799    });
1800  }, { threshold: 0.3 });
1801
1802  document.querySelectorAll('.benefit-visual').forEach(el => observer.observe(el));
1803
1804  // Fade-in on scroll for cards
1805  const fadeObserver = new IntersectionObserver((entries) => {
1806    entries.forEach((e, i) => {
1807      if (e.isIntersecting) {
1808        e.target.style.opacity = '1';
1809        e.target.style.transform = 'translateY(0)';
1810      }
1811    });
1812  }, { threshold: 0.1 });
1813
1814  document.querySelectorAll('.problem-card, .feature-card, .case-card').forEach((el, i) => {
1815    el.style.opacity = '0';
1816    el.style.transform = 'translateY(24px)';
1817    el.style.transition = `opacity 0.55s ease ${i * 0.08}s, transform 0.55s ease ${i * 0.08}s`;
1818    fadeObserver.observe(el);
1819  });
1820</script>
1820
1821
1822</body>
1823</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.