PageSourceSearch

https://superelba.com/intro.php

html superelba.com collected 2026-10-02 01:44:51 UTC 50,040 bytes, 1,191 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>EMS | Business Management System</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7  <meta name="description" content="Transform your business with professional technology. Inventory control, online catalog, automatic sales and billing. Try 2 months FREE.">
8  <meta name="theme-color" content="#0f766e">
9  <link rel="icon" type="image/png" sizes="16x16" href="public/icons/icon-16.png">
10  <link rel="icon" type="image/png" sizes="32x32" href="public/icons/icon-32.png">
11  <link rel="icon" type="image/png" sizes="192x192" href="public/icons/icon-192.png">
12  <link rel="apple-touch-icon" sizes="180x180" href="public/icons/icon-192.png">
13  <link rel="shortcut icon" href="public/favicon.ico">
14  <link rel="manifest" href="public/manifest.php?global=1&v=1790905490">
15  <style>
16    :root{
17      --primary:#0f766e;
18      --primary-dark:color-mix(in srgb, var(--primary), black 20%);
19      --accent:#f59e0b;
20      --success:#10b981;
21      --danger:#ef4444;
22      --bg:#0f766e;
23      --card:#ffffff;
24      --text:#0f172a;
25      --muted:#64748b;
26      --light:#f8fafc;
27      --shadow:0 20px 30px rgba(0,0,0,.18);
28      --shadow-lg:0 25px 50px rgba(0,0,0,.25);
29      --radius:18px;
30    }
31    *{box-sizing:border-box; margin:0; padding:0}
32    body{
33      font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
34      background:#f8fafc;
35      color:var(--text);
36      line-height:1.6;
37    }
38    a{color:inherit; text-decoration:none}
39
40    /* Header */
41    .header{
42      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
43      padding:18px;
44      box-shadow:0 4px 12px rgba(0,0,0,.15);
45      position:sticky;
46      top:0;
47      z-index:100;
48    }
49    .nav{
50      max-width:1200px;
51      margin:0 auto;
52      display:flex;
53      justify-content:space-between;
54      align-items:center;
55      gap:20px;
56      flex-wrap:wrap;
57    }
58    .brand{
59      display:flex;
60      gap:12px;
61      align-items:center;
62      color:#fff;
63      font-weight:800;
64      font-size:24px;
65      letter-spacing:-.5px;
66    }
67    .brand img{
68      width:40px;
69      height:40px;
70      border-radius:10px;
71      background:#fff;
72      padding:4px;
73    }
74    .nav-links{
75      display:flex;
76      gap:12px;
77      flex-wrap:wrap;
78    }
79    .btn{
80      border:0;
81      cursor:pointer;
82      border-radius:999px;
83      padding:12px 24px;
84      font-weight:700;
85      font-size:15px;
86      display:inline-flex;
87      align-items:center;
88      gap:8px;
89      transition:all .3s ease;
90      white-space:nowrap;
91    }
92    .btn.primary{background:#fff; color:var(--primary); box-shadow:0 4px 12px rgba(0,0,0,.2)}
93    .btn.primary:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3)}
94    .btn.secondary{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3)}
95    .btn.secondary:hover{background:rgba(255,255,255,.25)}
96    .btn.accent{background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(245,158,11,.4)}
97    .btn.accent:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,158,11,.6)}
98    .btn.success{background:var(--success); color:#fff}
99    .btn.success:hover{background:#059669}
100    .lang-switch{display:inline-flex; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1)}
101    .lang-switch a{padding:8px 12px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); text-decoration:none; line-height:1}
102    .lang-switch a.active{background:#fff; color:var(--primary)}
103    .lang-switch a:not(.active):hover{background:rgba(255,255,255,.15)}
104
105    /* Hero Section */
106    .hero{
107      background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #14b8a6 100%);
108      padding:80px 20px;
109      color:#fff;
110      position:relative;
111      overflow:hidden;
112    }
113    .hero::before{
114      content:'';
115      position:absolute;
116      top:0;
117      left:0;
118      right:0;
119      bottom:0;
120      background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,.1)"/></svg>');
121      opacity:.3;
122    }
123    .hero-content{
124      max-width:1200px;
125      margin:0 auto;
126      text-align:center;
127      position:relative;
128      z-index:1;
129    }
130    .hero h1{
131      font-size:52px;
132      line-height:1.1;
133      margin-bottom:24px;
134      text-shadow:0 2px 20px rgba(0,0,0,.3);
135      letter-spacing:-1px;
136    }
137    .hero .subtitle{
138      font-size:22px;
139      color:rgba(255,255,255,.9);
140      margin-bottom:16px;
141      font-weight:500;
142    }
143    .hero .description{
144      font-size:18px;
145      color:rgba(255,255,255,.85);
146      max-width:800px;
147      margin:0 auto 40px;
148      line-height:1.7;
149    }
150    .hero-cta{
151      display:flex;
152      gap:16px;
153      justify-content:center;
154      flex-wrap:wrap;
155      margin-bottom:30px;
156    }
157    .offer-badge{
158      display:inline-block;
159      background:var(--accent);
160      color:#fff;
161      padding:8px 20px;
162      border-radius:999px;
163      font-weight:700;
164      font-size:14px;
165      margin-bottom:20px;
166      box-shadow:0 4px 12px rgba(245,158,11,.4);
167      animation:pulse 2s ease-in-out infinite;
168    }
169    @keyframes pulse{
170      0%, 100%{transform:scale(1)}
171      50%{transform:scale(1.05)}
172    }
173
174    /* Section */
175    .section{
176      padding:80px 20px;
177      max-width:1200px;
178      margin:0 auto;
179    }
180    .section.dark{
181      background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
182      color:#fff;
183      margin:0;
184      max-width:none;
185    }
186    .section-header{
187      text-align:center;
188      margin-bottom:60px;
189    }
190    .section-title{
191      font-size:42px;
192      margin-bottom:16px;
193      letter-spacing:-.5px;
194    }
195    .section-subtitle{
196      font-size:20px;
197      color:var(--muted);
198      max-width:700px;
199      margin:0 auto;
200    }
201    .section.dark .section-subtitle{
202      color:rgba(255,255,255,.7);
203    }
204
205    /* Problem/Solution */
206    .problem-solution{
207      display:grid;
208      grid-template-columns:1fr 1fr;
209      gap:40px;
210      margin-bottom:60px;
211    }
212    .problem-box, .solution-box{
213      background:var(--card);
214      border-radius:var(--radius);
215      padding:40px;
216      box-shadow:var(--shadow);
217    }
218    .problem-box{
219      border-left:6px solid var(--danger);
220    }
221    .solution-box{
222      border-left:6px solid var(--success);
223      background:linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
224    }
225    .problem-box h3{
226      color:var(--danger);
227      font-size:28px;
228      margin-bottom:20px;
229    }
230    .solution-box h3{
231      color:var(--success);
232      font-size:28px;
233      margin-bottom:20px;
234    }
235    .problem-list, .solution-list{
236      list-style:none;
237    }
238    .problem-list li{
239      padding:12px 0;
240      padding-left:35px;
241      position:relative;
242      color:var(--text);
243      font-size:16px;
244    }
245    .problem-list li::before{
246      content:'❌';
247      position:absolute;
248      left:0;
249      font-size:20px;
250    }
251    .solution-list li{
252      padding:12px 0;
253      padding-left:35px;
254      position:relative;
255      color:var(--text);
256      font-size:16px;
257      font-weight:500;
258    }
259    .solution-list li::before{
260      content:'✅';
261      position:absolute;
262      left:0;
263      font-size:20px;
264    }
265
266    /* Benefits Grid */
267    .benefits{
268      display:grid;
269      grid-template-columns:repeat(3, 1fr);
270      gap:30px;
271      margin-top:40px;
272    }
273    .benefit-card{
274      background:var(--card);
275      border-radius:var(--radius);
276      padding:35px;
277      box-shadow:var(--shadow);
278      transition:all .3s ease;
279      border-top:4px solid var(--primary);
280    }
281    .benefit-card:hover{
282      transform:translateY(-8px);
283      box-shadow:var(--shadow-lg);
284    }
285    .benefit-icon{
286      font-size:48px;
287      margin-bottom:20px;
288      display:block;
289    }
290    .benefit-card h3{
291      font-size:22px;
292      margin-bottom:12px;
293      color:var(--primary);
294    }
295    .benefit-card .before{
296      color:var(--muted);
297      font-size:14px;
298      margin-bottom:8px;
299    }
300    .benefit-card .after{
301      color:var(--success);
302      font-weight:600;
303      font-size:15px;
304      margin-bottom:12px;
305    }
306    .benefit-card .result{
307      background:linear-gradient(135deg, var(--accent) 0%, #f97316 100%);
308      color:#fff;
309      padding:10px 16px;
310      border-radius:8px;
311      font-weight:700;
312      font-size:14px;
313      margin-top:16px;
314      display:inline-block;
315    }
316
317    /* Pricing */
318    .pricing{
319      display:grid;
320      grid-template-columns:repeat(3, 1fr);
321      gap:30px;
322      margin-top:40px;
323    }
324    .price-card{
325      background:var(--card);
326      border-radius:var(--radius);
327      padding:40px;
328      box-shadow:var(--shadow);
329      text-align:center;
330      transition:all .3s ease;
331      position:relative;
332      border:2px solid transparent;
333    }
334    .price-card.featured{
335      border-color:var(--accent);
336      transform:scale(1.05);
337      box-shadow:var(--shadow-lg);
338    }
339    .price-card:hover{
340      transform:translateY(-8px);
341    }
342    .price-badge{
343      position:absolute;
344      top:-15px;
345      right:20px;
346      background:var(--accent);
347      color:#fff;
348      padding:6px 16px;
349      border-radius:999px;
350      font-size:12px;
351      font-weight:700;
352    }
353    .price-card h3{
354      font-size:28px;
355      margin-bottom:12px;
356      color:var(--primary);
357    }
358    .price-card .price{
359      font-size:48px;
360      font-weight:800;
361      color:var(--text);
362      margin-bottom:8px;
363    }
364    .price-card .period{
365      color:var(--muted);
366      font-size:16px;
367      margin-bottom:24px;
368    }
369    .price-card .perfect-for{
370      background:#f1f5f9;
371      padding:12px;
372      border-radius:8px;
373      font-size:14px;
374      margin-bottom:24px;
375      color:var(--text);
376    }
377    .price-features{
378      list-style:none;
379      text-align:left;
380      margin-bottom:30px;
381    }
382    .price-features li{
383      padding:10px 0;
384      padding-left:30px;
385      position:relative;
386      font-size:15px;
387    }
388    .price-features li::before{
389      content:'✓';
390      position:absolute;
391      left:0;
392      color:var(--success);
393      font-weight:800;
394      font-size:18px;
395    }
396
397    /* Testimonials */
398    .testimonials{
399      display:grid;
400      grid-template-columns:repeat(3, 1fr);
401      gap:30px;
402      margin-top:40px;
403    }
404    .testimonial{
405      background:var(--card);
406      border-radius:var(--radius);
407      padding:30px;
408      box-shadow:var(--shadow);
409    }
410    .testimonial-header{
411      display:flex;
412      gap:16px;
413      align-items:center;
414      margin-bottom:20px;
415    }
416    .testimonial-avatar{
417      width:60px;
418      height:60px;
419      border-radius:50%;
420      background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
421      display:flex;
422      align-items:center;
423      justify-content:center;
424      color:#fff;
425      font-size:24px;
426      font-weight:700;
427    }
428    .testimonial-info h4{
429      font-size:18px;
430      margin-bottom:4px;
431    }
432    .testimonial-info p{
433      color:var(--muted);
434      font-size:14px;
435    }
436    .testimonial-quote{
437      font-style:italic;
438      color:var(--text);
439      line-height:1.7;
440      margin-bottom:16px;
441    }
442    .testimonial-result{
443      background:linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
444      padding:12px 16px;
445      border-radius:8px;
446      font-weight:700;
447      color:var(--success);
448      font-size:14px;
449    }
450
451    /* FAQ */
452    .faq{
453      max-width:900px;
454      margin:40px auto 0;
455    }
456    .faq-item{
457      background:var(--card);
458      border-radius:12px;
459      padding:25px 30px;
460      margin-bottom:16px;
461      box-shadow:0 2px 8px rgba(0,0,0,.08);
462    }
463    .faq-question{
464      font-size:18px;
465      font-weight:700;
466      color:var(--primary);
467      margin-bottom:12px;
468    }
469    .faq-answer{
470      color:var(--text);
471      font-size:16px;
472      line-height:1.7;
473    }
474
475    /* CTA Section */
476    .cta-section{
477      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
478      color:#fff;
479      padding:80px 20px;
480      text-align:center;
481      margin-top:80px;
482    }
483    .cta-section h2{
484      font-size:42px;
485      margin-bottom:20px;
486    }
487    .cta-section p{
488      font-size:20px;
489      margin-bottom:40px;
490      color:rgba(255,255,255,.9);
491    }
492    .cta-section .urgency{
493      background:var(--danger);
494      display:inline-block;
495      padding:12px 24px;
496      border-radius:999px;
497      font-weight:700;
498      margin-bottom:30px;
499      animation:pulse 2s ease-in-out infinite;
500    }
501
502    /* Footer */
503    .footer{
504      background:var(--primary-dark);
505      color:rgba(255,255,255,.7);
506      padding:40px 20px;
507      text-align:center;
508    }
509    .footer-content{
510      max-width:1200px;
511      margin:0 auto;
512    }
513    .footer-brand{
514      font-size:24px;
515      font-weight:800;
516      color:#fff;
517      margin-bottom:16px;
518    }
519    .footer-text{
520      font-size:14px;
521      margin-bottom:8px;
522    }
523
524    /* Responsive */
525    @media (max-width: 1024px){
526      .benefits, .pricing, .testimonials{
527        grid-template-columns:repeat(2, 1fr);
528      }
529      .problem-solution{
530        grid-template-columns:1fr;
531      }
532    }
533    @media (max-width: 768px){
534      .hero h1{font-size:36px}
535      .hero .subtitle{font-size:18px}
536      .hero .description{font-size:16px}
537      .section-title{font-size:32px}
538      .benefits, .pricing, .testimonials{
539        grid-template-columns:1fr;
540      }
541      .price-card.featured{
542        transform:scale(1);
543      }
544      .nav{
545        justify-content:center;
546      }
547      .nav-links{
548        width:100%;
549        justify-content:center;
550      }
551    }
552
553  /* PWA Splash */
554  #pwa-splash{position:fixed;inset:0;z-index:99999;background:#0d6660;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;transition:opacity .4s ease;pointer-events:all}
555  #pwa-splash.pwa-splash-out{opacity:0;pointer-events:none}
556  #pwa-splash .ps-ring{position:relative;width:160px;height:160px}
557  #pwa-splash canvas{position:absolute;top:0;left:0;width:160px;height:160px}
558  #pwa-splash .ps-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;overflow:hidden}
559  #pwa-splash .ps-logo img{width:74px;height:74px;object-fit:contain}
560  #pwa-splash .ps-lbl{color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
561  </style>
562</head>
563<body>
564
565<!-- PWA Splash Overlay -->
566<div id="pwa-splash" aria-hidden="true">
567  <div class="ps-ring">
568    <canvas id="pwa-splash-c" width="160" height="160"></canvas>
569    <div class="ps-logo"><img src="public/icons/icon-192.png" alt="EMS" onerror="this.style.display='none'"></div>
570  </div>
571  <span class="ps-lbl">Loading…</span>
572</div>
573
574  <!-- Header -->
575  <div class="header">
576    <div class="nav">
577      <div class="brand">
578        <img src="public/logo.png" alt="EMS Logo">
579        <span>EMS</span>
580      </div>
581      <div class="nav-links">
582        <div class="lang-switch" role="group" aria-label="Language">
583          <select class="ems-language-select" aria-label="Language / Idioma" onchange="if(this.value){window.location.href=this.value;}" style="background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 30px 7px 12px;font:700 12px system-ui;max-width:190px;cursor:pointer;outline:none"><option value="?lang=en" selected>EN · English</option><option value="?lang=es">ES · Español</option><option value="?lang=fr">FR · Français</option><option value="?lang=hi">HI · हिन्दी</option><option value="?lang=it">IT · Italiano</option><option value="?lang=zh">ZH · 中文</option><option value="?lang=de">DE · Deutsch</option><option value="?lang=id">ID · Bahasa Indonesia</option><option value="?lang=ja">JA · 日本語</option><option value="?lang=ko">KO · 한국어</option><option value="?lang=pt">PT · Português</option><option value="?lang=ar">AR · العربية</option><option value="?lang=ru">RU · Русский</option><option value="?lang=bn">BN · বাংলা</option><option value="?lang=ur">UR · اردو</option></select>        </div>
584        <a class="btn secondary" href="index.php?catalog=1&amp;global=1">📦 Demo Catalog</a>
585        <a class="btn secondary" href="public/directorio.php">🔍 Directory</a>
586                <button class="btn success" onclick="openRegModal()">📝 Sign Up</button>
587        <button class="btn primary" onclick="openLoginSelectionModal()">Login</button>
588              </div>
589    </div>
590  </div>
591
592  <style>
593/* Shared login and registration selectors: web, intro and installed PWA. */
594:is(#loginSelectionModal, #regModal), #roleSelectModal { background:rgba(0,115,110,.94)!important; padding:20px!important; box-sizing:border-box; overflow-y:auto; }
595:is(#loginSelectionModal, #regModal) > div, #roleSelectModal .role-modal-card { position:relative; box-sizing:border-box; width:100%!important; max-width:460px!important; padding:32px 24px!important; border-radius:24px!important; background:#fff!important; max-height:calc(100dvh - 40px); overflow-y:auto; }
596:is(#loginSelectionModal, #regModal) > div > div:first-child { justify-content:center!important; }
597:is(#loginSelectionModal, #regModal) h3, #roleSelectModal h3 { color:#151919!important; text-align:center; font-size:28px!important; font-weight:700!important; margin:8px 28px 28px!important; }
598:is(#loginSelectionModal, #regModal) > div > div:first-child button { position:absolute; right:20px; top:16px; color:#151919!important; font-size:36px!important; }
599:is(#loginSelectionModal, #regModal) .ems-role-pick-grid, #roleSelectModal .role-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
600:is(#loginSelectionModal, #regModal) .ems-role-pick-tile, #roleSelectModal .role-btn { box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; min-height:142px; padding:18px 8px; gap:12px; background:#fff; border:1px solid #dedede; border-radius:16px; box-shadow:none; text-decoration:none; color:#151919; }
601:is(#loginSelectionModal, #regModal) .ems-role-pick-tile h4, #roleSelectModal .role-btn > span:last-child { margin:0; font-size:20px; font-weight:500; color:inherit; }
602:is(#loginSelectionModal, #regModal) .ems-role-pick-tile p { display:none; }
603:is(#loginSelectionModal, #regModal) .ico, #roleSelectModal .role-icon { background:none!important; border-radius:0; width:56px; height:56px; font-size:0!important; color:#414545; flex-shrink:0; }
604:is(#loginSelectionModal, #regModal) .ico::before, #roleSelectModal .role-icon::before { content:''; display:block; width:100%; height:100%; background:currentColor; mask:var(--role-icon) center/contain no-repeat; -webkit-mask:var(--role-icon) center/contain no-repeat; }
605.ems-role-pick-tile:nth-child(1), .role-btn:nth-child(1) { --role-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h10l8 36h30M19 19h39l-6 23H23'/%3E%3Ccircle cx='27' cy='53' r='4'/%3E%3Ccircle cx='49' cy='53' r='4'/%3E%3C/svg%3E"); }
606.ems-role-pick-tile:nth-child(2), .role-btn:nth-child(2) { --role-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8 25l7-15h34l7 15H8zm4 8v23h40V33M25 56V38h14v18M8 25v4q6 12 12 0 6 12 12 0 6 12 12 0 6 12 12 0v
606-4'/%3E%3C/svg%3E"); }
607.ems-role-pick-tile:nth-child(3), .role-btn:nth-child(3) { --role-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M10 30l7-17h30l7 17M10 30h44l4 8v14H6V38l4-8zm0 22v7h8v-7m28 0v7h8v-7M25 43h14'/%3E%3Ccircle cx='16' cy='41' r='4'/%3E%3Ccircle cx='48' cy='41' r='4'/%3E%3C/svg%3E"); }
608.ems-role-pick-tile:nth-child(4), .role-btn:nth-child(4) { --role-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 18L46 7l5 12M10 19h42v35H10q-4 0-4-5V24q0-5 4-5zm31 12h17v14H41q-7-7 0-14z'/%3E%3Ccircle cx='44' cy='38' r='1'/%3E%3C/svg%3E"); }
609.ems-role-pick-company, .role-btn-full { --role-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M10 58V7h27v51M37 22l16 8v28M5 58h54M20 58V44h8v14M18 16h5m5 0h3m-13 9h5m5 0h3m-13 9h5m5 0h3m13 2h4m-4 9h4'/%3E%3C/svg%3E"); }
610:is(#loginSelectionModal, #regModal) .ems-role-pick-company, #roleSelectModal .role-btn-full { box-sizing:border-box; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; grid-column:1/-1; width:100%; min-height:96px; padding:18px; gap:16px; border:0; border-radius:14px; background:#00837e; color:#fff; text-align:left; }
611:is(#loginSelectionModal, #regModal) .ems-role-pick-company { margin-top:24px; }
612:is(#loginSelectionModal, #regModal) .ems-role-pick-company .ico, #roleSelectModal .role-btn-full .role-icon { color:#fff; }
613:is(#loginSelectionModal, #regModal) .ems-role-pick-company h4, #roleSelectModal .role-btn-full strong { display:block; margin:0 0 4px; color:white; font-size:25px; font-weight:700; }
614:is(#loginSelectionModal, #regModal) .ems-role-pick-company p, #roleSelectModal .role-btn-full small { display:block; margin:0; font-size:15px; line-height:1.4; color:#fff; font-weight:400; }
615:is(#loginSelectionModal, #regModal) a:focus-visible, #roleSelectModal button:focus-visible { outline:3px solid #36bcb4; outline-offset:3px; }
616:is(#loginSelectionModal, #regModal) .ems-role-pick-tile:hover, #roleSelectModal .role-btn:not(.role-btn-full):hover { background:#f1fbfa; border-color:#00837e; color:#151919; transform:none; }
617@media(max-width:360px) { :is(#loginSelectionModal, #regModal) > div, #roleSelectModal .role-modal-card { padding:24px 16px!important; } :is(#loginSelectionModal, #regModal) .ems-role-pick-tile, #roleSelectModal .role-btn { min-height:120px; } }
618@media(max-width:480px) {
619  :is(#loginSelectionModal, #regModal), #roleSelectModal { padding:12px!important; padding-bottom:max(12px, env(safe-area-inset-bottom))!important; }
620  :is(#loginSelectionModal, #regModal) .ems-role-pick-tile, #roleSelectModal .role-btn { min-height:120px; }
621  :is(#loginSelectionModal, #regModal) h3, #roleSelectModal h3 { font-size:22px!important; margin:8px 28px 18px!important; }
622}
623</style>
624  <!-- Login Selection Modal -->
625  <div id="loginSelectionModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px);">
626      <div style="background:white; width:90%; max-width:500px; border-radius:24px; padding:30px; box-shadow:0 20px 50px rgba(0,0,0,0.3); animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">
627          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
628              <h3 style="margin:0; font-size:24px; color:#0f172a; font-weight:800;">Sign In</h3>
629              <button onclick="closeLoginSelectionModal()" aria-label="Close" style="background:none; border:none; font-size:28px; color:#64748b; cursor:pointer; padding:0; line-height:1;">&times;</button>
630          </div>
631          <div class="ems-role-pick-grid">
632              <a href="public/cliente-login.php" class="ems-role-pick-tile">
633                  <span class="ico" style="background:#e0f2fe;">👤</span>
634                  <h4>Customer</h4>
635                  <p>Access your orders</p>
636              </a>
637              <a href="public/login.php" class="ems-role-pick-tile">
638                  <span class="ico" style="background:#dcfce7;">🏪</span>
639                  <h4>Business</h4>
640                  <p>Manage your store</p>
641              </a>
642              <a href="public/conductor-login.php" class="ems-role-pick-tile">
643                  <span class="ico" style="background:#fef3c7;">🛵</span>
644                  <h4>Driver</h4>
645                  <p>Delivery panel</p>
646              </a>
647              <a href="public/acreedores.php?login=1" class="ems-role-pick-tile">
648                  <span class="ico" style="background:#fae8ff;">💰</span>
649                  <h4>Creditor</h4>
650                  <p>Investment panel</p>
651              </a>
652          </div>
653          <a href="public/compania-login.php" class="ems-role-pick-company">
654              <span class="ico">🏢</span>
655              <span>
656                  <h4>Compañía</h4>
657                  <p>Panel de flota y conductores</p>
658              </span>
659          </a>
660      </div>
661  </div>
662
663  <!-- Registration Modal -->
664  <div id="regModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px);">
665      <div style="background:white; width:90%; max-width:500px; border-radius:24px; padding:30px; box-shadow:0 20px 50px rgba(0,0,0,0.3); animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">
666          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
667              <h3 style="margin:0; font-size:24px; color:#0f172a; font-weight:800;">Select your profile</h3>
668              <button onclick="closeRegModal()" aria-label="Close" style="background:none; border:none; font-size:28px; color:#64748b; cursor:pointer; padding:0; line-height:1;">&times;</button>
669          </div>
670          <div class="ems-role-pick-grid">
671              <a href="public/cliente-login.php?tab=register" class="ems-role-pick-tile">
672                  <span class="ico" style="background:#e0f2fe;">👤</span>
673                  <h4>Customer</h4>
674                  <p>Shop at your favorite stores</p>
675              </a>
676              <a href="#precios" onclick="closeRegModal()" class="ems-role-pick-tile">
677                  <span class="ico" style="background:#dcfce7;">🏪</span>
678                  <h4>Business</h4>
679                  <p>Manage your store or supermarket</p>
680              </a>
681              <a href="public/conductor-login.php?tab=register" class="ems-role-pick-tile">
682                  <span class="ico" style="background:#fef3c7;">🛵</span>
683                  <h4>Driver</h4>
684                  <p>Earn money delivering orders</p>
685              </a>
686              <a href="public/acreedores.php?register=1" class="ems-role-pick-tile">
687                  <span class="ico" style="background:#fae8ff;">💰</span>
688                  <h4>Creditor</h4>
689                  <p>Manage investments and loans</p>
690              </a>
691          </div>
692          <a href="public/compania-registro.php" class="ems-role-pick-company">
693              <span class="ico">🏢</span>
694              <span>
695                  <h4>Compañía</h4>
696                  <p>Panel de flota y conductores</p>
697              </span>
698          </a>
699      </div>
700  </div>
701  <style>
702  @keyframes modalPop {
703      0% { transform: scale(0.9); opacity: 0; }
704      100% { transform: scale(1); opacity: 1; }
705  }
706  .ems-role-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
707  .ems-role-pick-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px;border:2px solid #f1f5f9;border-radius:16px;text-decoration:none;color:#334155;background:#fff;min-height:108px}
708  .ems-role-pick-tile:hover{border-color:#0f766e;background:#f8fafc}
709  .ems-role-pick-tile .ico{font-size:26px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px}
710  .ems-role-pick-tile h4{margin:0;font-size:14px;color:#0f172a;font-weight:700}
711  .ems-role-pick-tile p{margin:0;font-size:11px;color:#64748b;line-height:1.3}
712  .ems-role-pick-company{margin-top:12px;display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:16px 18px;background:#0f766e;color:#fff;border-radius:16px;text-decoration:none}
713  .ems-role-pick-company:hover{background:#0c5e57;color:#fff}
714  .ems-role-pick-company .ico{font-size:26px;width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border-radius:12px}
715  .ems-role-pick-company h4{margin:0 0 2px;font-size:18px;font-weight:700;color:#fff}
716  .ems-role-pick-company p{margin:0;font-size:13px;color:rgba(255,255,255,.85)}
717  </style>
718  
718<script>
719  window.CLIENT_ALREADY_LOGGED_IN = false;
720  </script>
720
721  
721<script>
722  function openRegModal() {
723      document.getElementById('regModal').style.display = 'flex';
724  }
725  function closeRegModal() {
726      document.getElementById('regModal').style.display = 'none';
727  }
728  document.getElementById('regModal').addEventListener('click', function(e) {
729      if (e.target === this) closeRegModal();
730  });
731
732  function openLoginSelectionModal() {
733      // Si el cliente ya tiene sesión activa, ir directo a vecindario
734      if (window.CLIENT_ALREADY_LOGGED_IN) {
735          window.location.href = 'public/vecindario.php';
736          return;
737      }
738      document.getElementById('loginSelectionModal').style.display = 'flex';
739  }
740  function closeLoginSelectionModal() {
741      document.getElementById('loginSelectionModal').style.display = 'none';
742  }
743  document.getElementById('loginSelectionModal').addEventListener('click', function(e) {
744      if (e.target === this) closeLoginSelectionModal();
745  });
746  </script>
746
747
748  <!-- Hero -->
749  <div class="hero">
750    <div class="hero-content">
751      <div class="offer-badge">🔥 OFFER: 2 MONTHS FREE - FIRST 50 CUSTOMERS</div>
752      <h1>Transform Your Business with Professional Technology</h1>
753      <p class="subtitle">The Management System that Businesses in the Dominican Republic and the World Need</p>
754      <p class="description">
755        Total inventory control, 24/7 online catalog, automatic sales, and professional billing. All in one platform.      </p>
756      <div class="hero-cta">
757        <a class="btn accent" href="#precios" style="font-size:18px; padding:16px 32px">🚀 🚀 Try 2 Months FREE</a>
758        <a class="btn secondary" href="index.php?catalog=1&amp;global=1">See Live Demo</a>
759        <a class="btn secondary" href="public/directorio.php">🔍 Directory</a>
760      </div>
761      <p style="font-size:14px; color:rgba(255,255,255,.75)">✅ No credit card required • ✅ No commitment • ✅ Cancel anytime</p>
762    </div>
763  </div>
764
765  <!-- Problem & Solution -->
766  <div class="section">
767    <div class="section-header">
768      <h2 class="section-title">Does This Sound Familiar?</h2>
769      <p class="section-subtitle">Small businesses face these challenges every day</p>
770    </div>
771
772    <div class="problem-solution">
773      <div class="problem-box">
774        <h3>😰 The Problem</h3>
775        <ul class="problem-list">
776          <li>Product loss due to poor inventory control</li>
777          <li>You don't know how much you really earn</li>
778          <li>Errors in accounting and cash balancing</li>
779          <li>Hours wasted on manual calculations</li>
780          <li>No online presence - you lose sales</li>
781          <li>Competition outpaces you with technology</li>
782          <li>Expired products you didn't sell in time</li>
783          <li>Unnecessary expenses due to disorganization</li>
784        </ul>
785      </div>
786
787      <div class="solution-box">
788        <h3>✨ The Solution: EMS</h3>
789        <ul class="solution-list">
790          <li>Total real-time inventory control</li>
791          <li>Profits and expenses calculated automatically</li>
792          <li>Error-free system - everything automated</li>
793          <li>Save 5-10 hours per week</li>
794          <li>24/7 online catalog for more sales</li>
795          <li>Project professionalism and seriousness</li>
796          <li>Alerts when products are running out</li>
797          <li>Financial reports in seconds</li>
798        </ul>
799      </div>
800    </div>
801  </div>
802
803  <!-- Benefits -->
804  <div class="section dark">
805    <div class="section-header">
806      <h2 class="section-title">💎 Real Benefits, Immediate Results</h2>
807      <p class="section-subtitle">See how EMS transforms your business from day one</p>
808    </div>
809
810    <div class="benefits">
811      <div class="benefit-card">
812        <span class="benefit-icon">📦</span>
813        <h3>Total Inventory Control</h3>
814        <p class="before"><strong>Before:</strong> Notebooks, confusing Excel, lost products</p>
815        <p class="after">✅ Know exactly what you have<br>✅ Low stock alerts<br>✅ Control of losses and damages</p>
816        <span class="result">Reduce losses by 30-40%</span>
817      </div>
818
819      <div class="benefit-card">
820        <span class="benefit-icon">🛒</span>
821        <h3>More Online Sales</h3>
822        <p class="before"><strong>Before:</strong> Only in-store sales</p>
823        <p class="after">✅ 24/7 online catalog<br>✅ WhatsApp orders<br>✅ Reach more customers</p>
824        <span class="result">Increase sales by 20-50%</span>
825      </div>
826
827      <div class="benefit-card">
828        <span class="benefit-icon">⏱️</span>
829        <h3>Time Savings</h3>
830        <p class="before"><strong>Before:</strong> Hours doing manual calculations</p>
831        <p class="after">✅ Automatic calculations<br>✅ Reports in seconds<br>✅ More time for customers</p>
832        <span class="result">Save 5-10 hours/week</span>
833      </div>
834
835      <div class="benefit-card">
836        <span class="benefit-icon">📄</span>
837        <h3>Professional Billing</h3>
838        <p class="before"><strong>Before:</strong> Invoices by hand or in Word</p>
839        <p class="after">✅ Automatic PDF invoices<br>✅ Send via WhatsApp<br>✅ Complete history</p>
840        <span class="result">Project seriousness</span>
841      </div>
842
843      <div class="benefit-card">
844        <span class="benefit-icon">🎤</span>
845        <h3>Voice Assistant "Super Elba"</h3>
846        <p class="before"><strong>Unique in DR:</strong> Voice search in Dominican Spanish</p>
847        <p class="after">✅ "Super Elba, find Presidente"<br>✅ Responds with local phrases<br>✅ Sell faster</p>
848        <span class="result">Sell 2x faster</span>
849      </div>
850
851      <div class="benefit-card">
852        <span class="benefit-icon">🛵</span>
853        <h3>Smart Delivery</h3>
854        <p class="before"><strong>Before:</strong> Lost orders, delays</p>
855        <p class="after">✅ Real-time GPS tracking<br>✅ Optimized routes<br>✅ Automatic assignment</p>
856        <span class="result">2x faster deliveries</span>
857      </div>
858
859      <div class="benefit-card">
860        <span class="benefit-icon">💬</span>
861        <h3>Total Communication</h3>
862        <p class="before"><strong>Before:</strong> Missed calls, chaos</p>
863        <p class="after">✅ Integrated in-app chat<br>✅ WebRTC calls<br>✅ Direct support</p>
864        <span class="result">Happier customers</span>
865      </div>
866
867      <div class="benefit-card">
868        <span class="benefit-icon">💰</span>
869        <h3>Immediate ROI</h3>
870        <p class="before"><strong>Cost:</strong> $16/month</p>
871        <p class="after">✅ Save $100 in losses<br>✅ Save $150 in time<br>✅ Earn $300 in online sales</p>
872        <span class="result">Profit: $450/month</span>
873      </div>
874    </div>
875  </div>
876
877  <!-- Restaurant Features -->
878  <div class="section dark" style="background: linear-gradient(135deg, #4c1d95 0%, #312e81 100%);">
879    <div class="section-header">
880      <h2 class="section-title">🍽️ Do You Have a Restaurant or Diner?</h2>
881      <p class="section-subtitle">EMS includes advanced kitchen tools at no extra cost</p>
882    </div>
883
884    <div class="benefits">
885      <div class="benefit-card">
886        <span class="benefit-icon">🥗</span>
887        <h3>Recipes & Costing</h3>
888        <p class="before"><strong>Before:</strong> You don't know how much you earn per dish</p>
889        <p class="after">✅ Exact cost per ingredient<br>✅ Portion control<br>✅ Real profit margin</p>
890        <span class="result">Maximize profits</span>
891      </div>
892
893      <div class="benefit-card">
894        <span class="benefit-icon">⚖️</span>
895        <h3>Sale by Weight and Unit</h3>
896        <p class="before"><strong>Before:</strong> Complicated to charge for pounds and units</p>
897        <p class="after">✅ Sell salami by the pound<br>✅ Sell sodas by the unit<br>✅ All on the same invoice</p>
898        <span class="result">Total flexibility</span>
899      </div>
900
901      <div class="benefit-card">
902        <span class="benefit-icon">📝</span>
903        <h3>Options and Extras</h3>
904        <p class="before"><strong>Before:</strong> Manual notes in the kitchen</p>
905        <p class="after">✅ "No onions", "Extra cheese"<br>✅ Combos and offers (2x1)<br>✅ Direct printing in the kitchen</p>
906        <span class="result">Zero errors in orders</span>
907      </div>
908    </div>
909  </div>
910
911  <!-- Pricing -->
912  <div class="section" id="precios">
913    <div class="section-header">
914      <h2 class="section-title">💵 Plans That Fit Your Business</h2>
915      <p class="section-subtitle">Choose the perfect plan for you - All include 2 months FREE</p>
916      <p class="section-subtitle">💵 $16/mo before $25 - $16/mo before $50 - $16/mo before $100</p>
917    </div>
918
919    <div class="pricing">
920      <div class="price-card">
921        <h3>📦 Basic</h3>
922        <div class="price">$16 <span style="font-size:24px; color:var(--muted)">/month</span></div>
923        <p class="period">After 2 free months</p>
924        <div class="perfect-for"><strong>Perfect for:</strong> Small shops, convenience stores</div>
925        <ul class="price-features">
926          <li>1 Administrator</li>
927          <li>2 Employees</li>
928          <li>Up to 100 products</li>
929          <li>Online catalog</li>
930          <li>Basic sales system</li>
931          <li>Email support</li>
932        </ul>
933        <a href="registro.php?plan=basico" class="btn success" style="width:100%">Try for Free</a>
934      </div>
935
936      <div class="price-card featured">
937        <div class="price-badge">⭐ MOST POPULAR</div>
938        <h3>📦 Professional</h3>
939        <div class="price">$16<span style="font-size:24px; color:var(--muted)">/month</span></div>
940        <p class="period">After 2 free months</p>
941        <div class="perfect-for"><strong>Perfect for:</strong> Small/medium supermarkets</div>
942        <ul class="price-features">
943          <li>1 Administrator</li>
944          <li>5 Employees</li>
945          <li>Unlimited products</li>
946          <li>Online catalog</li>
947          <li>Complete sales system</li>
948          <li>Professional billing</li>
949          <li>Voice assistant "Super Elba"</li>
950          <li>Advanced reports</li>
951          <li>
951Priority support</li>
952        </ul>
953        <a href="registro.php?plan=profesional" class="btn accent" style="width:100%">Try for Free</a>
954      </div>
955
956      <div class="price-card">
957        <h3>📦 Enterprise</h3>
958        <div class="price">$16<span style="font-size:24px; color:var(--muted)">/month</span></div>
959        <p class="period">After 2 free months</p>
960        <div class="perfect-for"><strong>Perfect for:</strong> Large supermarkets, chains</div>
961        <ul class="price-features">
962          <li>Everything in Professional</li>
963          <li>10+ Employees</li>
964          <li>Custom logo</li>
965          <li>Own domain (optional)</li>
966          <li>Extended training</li>
967          <li>24/7 support</li>
968          <li>Daily backups</li>
969          <li>Dedicated account manager</li>
970        </ul>
971        <a href="registro.php?plan=empresarial" class="btn success" style="width:100%">Try for Free</a>
972      </div>
973    </div>
974
975    <div style="text-align:center; margin-top:40px; padding:30px; background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius:16px">
976      <h3 style="font-size:24px; margin-bottom:12px">💰 Money-Back Guarantee</h3>
977      <p style="font-size:18px; color:var(--text)">If in 60 days you don't save time, increase sales, or reduce losses, <strong>you can cancel at no cost and with no questions asked.</strong></p>
978    </div>
979  </div>
980
981  <!-- Testimonials -->
982  <div class="section dark">
983    <div class="section-header">
984      <h2 class="section-title">🏆 Success Stories</h2>
985      <p class="section-subtitle">Real businesses, real results</p>
986    </div>
987
988    <div class="testimonials">
989      <div class="testimonial">
990        <div class="testimonial-header">
991          <div class="testimonial-avatar">MB</div>
992          <div class="testimonial-info">
993            <h4>María Burgos</h4>
994            <p>"La Bendición" Store, San Pedro</p>
995          </div>
996        </div>
997        <div class="testimonial-quote">
998          "The online catalog brought me new customers who didn't even know my store existed. I save 2 hours daily on accounting and I know exactly what I have."
999        </div>
1000        <div class="testimonial-result">📈 Sales +60% in 3 months</div>
1001      </div>
1002
1003      <div class="testimonial">
1004        <div class="testimonial-header">
1005          <div class="testimonial-avatar">JR</div>
1006          <div class="testimonial-info">
1007            <h4>José Rodríguez</h4>
1008            <p>"Don José" Supermarket, Santiago</p>
1009          </div>
1010        </div>
1011        <div class="testimonial-quote">
1012          "I used to lose about $300 a month in damaged products. Now with EMS alerts, I only lose $80. The automatic invoices save me a lot of time."
1013        </div>
1014        <div class="testimonial-result">💰 Reduce losses by -73%</div>
1015      </div>
1016
1017      <div class="testimonial">
1018        <div class="testimonial-header">
1019          <div class="testimonial-avatar">RM</div>
1020          <div class="testimonial-info">
1021            <h4>Rosa Martínez</h4>
1022            <p>"El Buen Precio" Mini Market, SD</p>
1023          </div>
1024        </div>
1025        <div class="testimonial-quote">
1026          "Customers order from me on WhatsApp at any time. 40% of my sales now come from online. Super Elba makes sales in the store much faster."
1027        </div>
1028        <div class="testimonial-result">🚀 40% online sales</div>
1029      </div>
1030    </div>
1031  </div>
1032
1033  <!-- FAQ -->
1034  <div class="section">
1035    <div class="section-header">
1036      <h2 class="section-title">❓ Frequently Asked Questions</h2>
1037      <p class="section-subtitle">Answers to the most common questions</p>
1038    </div>
1039
1040    <div class="faq">
1041      <div class="faq-item">
1042        <div class="faq-question">Is it hard to use?</div>
1043        <div class="faq-answer">No. It is designed for people with no technical experience. If you know how to use WhatsApp, you can use EMS. It also includes training and manuals in Spanish.</div>
1044      </div>
1045
1046      <div class="faq-item">
1047        <div class="faq-question">Do I always need internet?</div>
1048        <div class="faq-answer">For the online catalog, yes, but the system works even with a slow internet connection. Once loaded, many functions work locally.</div>
1049      </div>
1050
1051      <div class="faq-item">
1052        <div class="faq-question">Can I cancel anytime?</div>
1053        <div class="faq-answer">Yes, without penalties. It is month to month. If you decide it is not for you, you just cancel.</div>
1054      </div>
1055
1056      <div class="faq-item">
1057        <div class="faq-question">What about my data?</div>
1058        <div class="faq-answer">It is yours. It is safe and protected on secure servers. We do automatic daily backups. If you cancel, you can export all your information.</div>
1059      </div>
1060
1061      <div class="faq-item">
1062        <div class="faq-question">Does it work on my phone?</div>
1063        <div class="faq-answer">Yes, it works perfectly on a phone, tablet, and computer. It can even be installed as an app on the phone.</div>
1064      </div>
1065
1066      <div class="faq-item">
1067        <div class="faq-question">What is the setup process like?</div>
1068        <div class="faq-answer">Simple: (1) You sign up, (2) We upload your products, (3) We train your team. All in 1 day and we guide you through the process.</div>
1069      </div>
1070    </div>
1071  </div>
1072
1073  <!-- Final CTA -->
1074  <div class="cta-section">
1075    <div style="max-width:800px; margin:0 auto">
1076      <div class="urgency">⏰ Only 32 spots left with launch pricing</div>
1077      <h2>Don't Waste Any More Time!</h2>
1078      <p>Every day without EMS is lost money, sales you didn't make, and wasted t
1078ime.</p>
1079      <p style="font-size:24px; font-weight:700; margin-bottom:30px">Join the 18 businesses that are already growing with EMS</p>
1080      <a href="registro.php" class="btn" style="background:#fff; color:var(--primary); font-size:20px; padding:18px 40px">🚀 Try 2 Months FREE Now</a>
1081      <p style="font-size:14px; margin-top:20px; color:rgba(255,255,255,.8)">✅ No credit card required • ✅ Setup in 1 day • ✅ Support included</p>
1082    </div>
1083  </div>
1084
1085  <!-- Footer -->
1086  <div class="footer">
1087    <div class="footer-content">
1088      <div class="footer-brand">EMS</div>
1089      <div class="footer-text">Business Management System for Supermarkets and Convenience Stores</div>
1090      <div class="footer-text">CEO: Juan Ramon Guerrero Garcia</div>
1091      <div class="footer-text">Santa Lucia, La Higuera, El Seibo, Dominican Republic</div>
1092      <div class="footer-text" style="margin-top:16px; font-size:12px">
1093        <a href="index.php?catalog=1&amp;global=1" style="color:var(--accent); font-weight:600">View Demo Catalog</a> •
1094        <a href="public/login.php" style="color:var(--accent); font-weight:600; margin-left:12px">System Login</a>
1095      </div>
1096      <div style="margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:12px">
1097        © 2025 EMS. All rights reserved. • <span style="color:var(--success)">✅ 100% Functional System</span>      </div>
1098    </div>
1099  </div>
1100
1101  
1101<script>
1102    // Smooth scroll para los enlaces internos
1103    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1104      anchor.addEventListener('click', function (e) {
1105        e.preventDefault();
1106        const target = document.querySelector(this.getAttribute('href'));
1107        if (target) {
1108          target.scrollIntoView({behavior: 'smooth', block: 'start'});
1109        }
1110      });
1111    });
1112  </script>
vendor: 1 bytes, line 1112
1112
1113<script>
1114window.EMS_PWA_ENABLED = true;
1115window.EMS_LANG = "en";
1116window.EMS_LANG_EXPLICIT = false;
1117window.EMS_SUPPORTED_LANGS = ["en","es","fr","hi","it","zh","de","id","ja","ko","pt","ar","ru","bn","ur"];
1118window.introI18n = {
1119  pwaReady: "Ready \u2713"};
1120/* Sync device language — fires once if navigator.language differs from server lang.
1121   Covers PWA/standalone on iOS where HTTP_ACCEPT_LANGUAGE can be absent. */
1122(function(){
1123  if (!navigator.language || window.EMS_LANG_EXPLICIT) return;
1124  var supported = window.EMS_SUPPORTED_LANGS || ['en','es','fr','hi','it','zh','de','id','ja','ko','pt'];
1125  var urlLang = new URLSearchParams(window.location.search).get('lang');
1126  if (supported.indexOf(urlLang) !== -1) return;
1127  var cookieMatch = document.cookie.match(/(?:^|;\s*)ems_device_lang=([^;]+)/);
1128  var cookieLang = cookieMatch ? decodeURIComponent(cookieMatch[1]).toLowerCase().substring(0, 2) : '';
1129  if (supported.indexOf(cookieLang) !== -1) return;
1130  var devLang = navigator.language.toLowerCase().substring(0, 2);
1131  if (supported.indexOf(devLang) !== -1 && devLang !== window.EMS_LANG
1132      && !sessionStorage.getItem('ems_lang_synced')) {
1133    sessionStorage.setItem('ems_lang_synced', '1');
1134    document.cookie = 'ems_device_lang=' + devLang + ';path=/;max-age=31536000;SameSite=Lax';
1135    window.location.reload();
1136  }
1137})();
1138</script>
vendor: 1 bytes, line 1138
1138
1139<script src="public/modules/common/js/pwa-install.js?v=1790896244"></script>
vendor: 1 bytes, line 1139
1139
1140<script>
1141/* PWA Splash — anillo en loop hasta window.load, luego fade out */
1142(function(){
1143  var canvas=document.getElementById('pwa-splash-c');
1144  if(!canvas)return;
1145  var ctx=canvas.getContext('2d');
1146  var CX=80,CY=80,R=65,LW=8,ANIM=1600;
1147  var t0=null,dismissed=false;
1148  function draw(p){
1149    ctx.clearRect(0,0,160,160);
1150    ctx.beginPath();ctx.arc(CX,CY,R,0,2*Math.PI);
1151    ctx.strokeStyle='rgba(255,255,255,0.25)';ctx.lineWidth=LW;ctx.stroke();
1152    if(p>0.001){
1153      ctx.beginPath();ctx.arc(CX,CY,R,-Math.PI/2,-Math.PI/2+2*Math.PI*p);
1154      ctx.strokeStyle='#fff';ctx.lineWidth=LW;ctx.lineCap='round';ctx.stroke();
1155    }
1156  }
1157  draw(0);
1158  function ease(t){return t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2}
1159  function frame(ts){
1160    if(dismissed)return;
1161    if(!t0)t0=ts;
1162    var p=Math.min((ts-t0)/ANIM,1);
1163    draw(ease(p));
1164    if(p<1){requestAnimationFrame(frame);}
1165    else{t0=null;requestAnimationFrame(frame);}
1166  }
1167  requestAnimationFrame(frame);
1168  function dismiss(){
1169    if(dismissed)return;
1170    dismissed=true;
1171    var s=document.getElementById('pwa-splash');
1172    if(!s)return;
1173    var lbl=s.querySelector('.ps-lbl');
1174    if(lbl)lbl.textContent=(window.introI18n&&window.introI18n.pwaReady)||'Ready ✓';
1175    draw(1);
1176    setTimeout(function(){
1177      s.classList.add('pwa-splash-out');
1178      setTimeout(function(){s.remove();},420);
1179    },250);
1180  }
1181  window.addEventListener('load',dismiss);
1182  if(document.readyState==='complete'){dismiss();}
1183  else{setTimeout(dismiss,10000);}
1184})();
1185</script>
vendor: 1 bytes, line 1185
1185
1186<script>window.USER_ROLE = "";</script>
vendor: 1 bytes, line 1186
1186
1187<script src="public/modules/common/js/api.js?v=1790896243"></script>
vendor: 1 bytes, line 1187
1187
1188<script src="public/modules/common/js/active_trip_fab.js?v=1790896241"></script>
vendor: 1 bytes, line 1188
1188
1189<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"87eae1bbfa6d43db85f8954ec4121938","r":1,"spa":2}' crossorigin="anonymous"></script>
1189
1190</body>
1191</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.