1/* 2 * shared/sections.js â universal sections injected at runtime 3 * Sections: header, footer, products, videos, insights, contact 4 * Edit a template here once; both pages update. 5 * 6 * Usage in page HTML: 7 * <div data-section="header"></div> 8 * <div data-section="products"></div> 9 * ... 10 * <script src="shared/sections.js"></script> (from index.html) 11 * <script src="../shared/sections.js"></script> (from services/*.html) 12 */ 13(function () { 14 'use strict'; 15 16 // Compute base path so all asset URLs resolve correctly from any page depth. 17 // Pages under /services/ or /blog/ need '../'; pages at root use '' 18 var BASE = (location.pathname.indexOf('/services/') >= 0 || 19 location.pathname.indexOf('/products/') >= 0 || 20 location.pathname.indexOf('/blog/') >= 0) ? '../' : ''; 21 22 // ââ Section templates ââââââââââââââââââââââââââââââââââââââââââââââââââ 23 // ââ Shared section CSS â injected at runtime so it works reliably under file:// ââ 24 var STYLES = `/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 25 shared/sections.css â universal CSS for shared sections 26 Loaded by index.html, services/camera-ai.html, services/iot.html. 27 28 Mirrors shared/sections.js: edit a rule here once; 29 all pages get the same visual. 30 31 Class prefixes covered: 32 #nav, .nav-row, .n-*, .mega-*, .mc-*, .mic-* 33 .btn-pill, .btn-o, .btn-ghost 34 .cap-videos__*, .cap-video* 35 .blog-grid, .bcard* 36 .ft-* 37 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 38 39/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 40 HEADER · nav, mega menus, buttons, mobile (extracted from index.html L175âL368) 41 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 42#nav { 43 position:fixed; inset:0 0 auto; height:var(--NH); z-index:1000; 44 display:flex; align-items:center; 45 transition:background .5s, backdrop-filter .5s; 46} 47#nav.opaque { 48 background:rgba(5,5,5,.92); 49 backdrop-filter:blur(24px) saturate(180%); 50 border-bottom:1px solid var(--b-dark); 51} 52.nav-row { display:flex; align-items:center; gap:0; } 53/* Logo */ 54.n-logo { display:flex; align-items:center; gap:9px; flex-shrink:0; } 55.n-mark { 56 width:32px; height:32px; background:var(--o); border-radius:7px; 57 display:flex; align-items:center; justify-content:center; 58 font-family:var(--f-h); font-weight:800; font-size:13px; color:#fff; 59 position:relative; overflow:hidden; flex-shrink:0; 60 transition:transform .35s var(--ease1); 61} 62.n-mark:hover { transform:rotate(-12deg) scale(1.1); } 63.n-mark::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%); } 64.n-mark span { position:relative; z-index:1; letter-spacing:-.5px; } 65.n-word { font-family:var(--f-h); font-weight:800; font-size:16px; color:#fff; letter-spacing:-.3px; } 66.n-word em { font-style:normal; color:var(--o); } 67/* Links */ 68.n-links { display:flex; align-items:center; gap:0; list-style:none; margin-left:auto; height:100%; } 69.n-item { position:relative; height:100%; display:flex; align-items:center; } 70/* Invisible bridge below button so hover stays alive while travelling to mega menu */ 71.n-item::after { 72 content:""; position:absolute; 73 top:100%; left:-12px; right:-12px; 74 height:18px; 75 pointer-events:none; 76} 77.n-item:hover::after, .n-item.is-open::after { pointer-events:auto; } 78.n-btn { 79 display:flex; align-items:center; gap:4px; 80 padding:8px 14px; border-radius:6px; 81 font-size:13.5px; font-weight:500; color:rgba(255,255,255,.6); 82 cursor:pointer; transition:color .2s, background .2s; user-select:none; 83 font-family:var(--f-b); 84} 85.n-btn:hover, 86.n-item:hover > .n-btn, 87.n-item.is-open > .n-btn { color:#fff; background:rgba(255,255,255,.06); } 88.n-caret { font-size:9px; transition:transform .25s; } 89.n-item:hover .n-caret, 90.n-item.is-open .n-caret { transform:rotate(180deg); } 91 92/* ââ FULL-WIDTH BANNER MEGA MENU ââ */ 93.n-mega { 94 position:fixed; top:var(--NH); left:0; right:0; 95 background:rgba(6,6,6,.97);
96 backdrop-filter:blur(28px) saturate(180%); 97 border-bottom:1px solid rgba(255,255,255,.08); 98 box-shadow:0 24px 80px rgba(0,0,0,.7); 99 opacity:0; pointer-events:none; z-index:999; 100 transform:translateY(-6px); 101 transition:opacity .22s var(--ease2), transform .22s var(--ease2); 102} 103.n-item:hover .n-mega, 104.n-item.is-open .n-mega { opacity:1; pointer-events:all; transform:translateY(0); } 105.n-mega-inner { 106 max-width:var(--W); margin:0 auto; 107 padding:0 var(--G); 108 display:grid; align-items:stretch; 109} 110/* Services: 3 cards + featured image */ 111.n-mega-inner.mega-services { grid-template-columns:1fr 1fr 1fr 1.5fr; gap:0; } 112/* Products: 6 cards in 3Ã2 grid, no featured image */ 113.n-mega-inner.mega-products { grid-template-columns:1fr 1fr 1fr; gap:0; } 114.n-mega-inner.mega-products .mega-card { border-bottom:1px solid rgba(255,255,255,.06); padding:22px 22px; } 115.n-mega-inner.mega-products .mega-card:nth-child(3n) { border-right:none; } 116.n-mega-inner.mega-products .mega-card:nth-last-child(-n+3) { border-bottom:none; } 117.n-mega-inner.mega-products .mc-tag { font-size:8.5px; letter-spacing:1.6px; } 118.n-mega-inner.mega-products .mc-desc { font-size:11.5px; } 119/* Company: 3 links + featured stat */ 120.n-mega-inner.mega-company { grid-template-columns:1fr 1fr 1.5fr; gap:0; } 121 122/* Each mega card */ 123.mega-card { 124 padding:28px 24px; border-right:1px solid rgba(255,255,255,.06); 125 display:flex; flex-direction:column; gap:12px; 126 transition:background .2s; cursor:pointer; text-decoration:none; 127} 128.mega-card:last-child { border-right:none; } 129.mega-card:hover { background:rgba(255,255,255,.04); } 130/* Image card on right */ 131.mega-img-card { 132 position:relative; overflow:hidden; min-height:220px; 133 display:flex; flex-direction:column; justify-content:flex-end; 134 padding:24px; text-decoration:none; 135} 136.mega-img-card img { 137 position:absolute; inset:0; width:100%; height:100%; 138 object-fit:cover; opacity:.5; transition:opacity .3s, transform .5s; 139} 140.mega-img-card:hover img { opacity:.65; transform:scale(1.04); } 141.mega-img-card::after { 142 content:''; position:absolute; inset:0; 143 background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 55%,transparent 100%); 144} 145/* Card parts */ 146.mc-tag { 147 font-family:var(--f-m); font-size:9px; letter-spacing:2px; 148 text-transform:uppercase; color:var(--o2); margin-bottom:4px; 149} 150.mc-ico { 151 width:44px; height:44px; border-radius:11px; 152 background:rgba(232,98,42,.12); border:1px solid rgba(232,98,42,.2); 153 display:flex; align-items:center; justify-content:center; flex-shrink:0; 154 transition:background .2s, border-color .2s; 155} 156.mega-card:hover .mc-ico { background:var(--o); border-color:var(--o); } 157.mc-ico i { color:var(--o2); font-size:18px; transition:color .2s; } 158.mega-card:hover .mc-ico i { color:#fff; } 159.mc-name { 160 font-family:var(--f-h); font-weight:800; font-size:15px; 161 color:#fff; letter-spacing:-.3px; line-height:1.2; 162} 163.mc-desc { font-size:12px; color:rgba(255,255,255,.5); line-height:1.55; } 164.mc-link { 165 display:inline-flex; align-items:center; gap:5px; 166 font-family:var(--f-m); font-size:10.5px; color:var(--o2); 167 font-weight:600; margin-top:auto; letter-spacing:.2px; 168 transition:gap .2s; 169} 170.mega-card:hover .mc-link { gap:9px; } 171/* Image card text overlay */ 172.mega-img-card .mic-label { 173 position:relative; z-index:2; 174 font-family:var(--f-m); font-size:9px; color:var(--o2); 175 letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; 176} 177.mega-img-card .mic-title { 178 position:relative; z-index:2; 179 font-family:var(--f-h); font-weight:800; font-size:22px; 180 color:#fff; letter-spacing:-.5px; line-height:1.15; margin-bottom:10px; 181} 182.mega-img-card .mic-desc { 183 position:relative; z-index:2; 184 font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:16px; 185} 186.mega-img-card .mic-cta { 187 position:relative; z-index:2; 188 display:inline-flex; align-items:center; gap:8px; 189 padding:9px 18px; background:var(--o); border-radius:100px; 190 font-family:var(--f-b); font-weight:700; font-size:12.5px; color:#fff; 191 transition:background .2s; width:fit-content; 192} 193.mega-img-card:hover .mic-cta { background:var(--o2); } 194/* Bottom bar inside mega */ 195.mega-footer { 196 border-top:1px solid rgba(255,255,255,.06); 197 padding:14px 24px; 198 display:flex; align-items:center; justify-content:space-between; 199 grid-column:1/-1; 200} 201.mega-footer-left { 202 font-family:var(--f-m); font-size:10px; 203 color:rgba(255,255,255,.28); letter-spacing:.5px; 204} 205.mega-footer-links { display:flex; gap:20px; } 206.mega-footer-links a { 207 font-family:var(--f-m); font-size:11px; color:rgba(255,255,255,.35); 208 text-decoration:none; transition:color .2s; letter-spacing:.3px; 209} 210.mega-footer-links a:hover { color:var(--o2); } 211/* Right CTAs */ 212.n-right { display:flex; align-items:center; gap:8px; margin-left:24px; flex-shrink:0; } 213.btn-pill { 214 display:inline-flex; align-items:center; gap:7px; 215 padding:9px 20px; border-radius:100px; 216 font-family:var(--f-b); font-weight:600; font-size:13.5px; 217 cursor:pointer; transition:all .25s var(--ease1); white-space:nowrap; border:none; 218} 219.btn-o { background:var(--o); color:#fff; box-shadow:0 0 28px var(--o-glow); } 220.btn-o:hover { background:var(--o2); transform:translateY(-2px); box-shadow:0 6px 40px var(--o-glow); } 221.btn-ghost { background:transparent; color:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.14); } 222.btn-ghost:hover { border-color:rgba(255,255,255,.3); color:#fff; }
223/* Mobile */ 224.n-hbg { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; } 225.n-hbg span { display:block; width:22px; height:1.5px; background:#fff; border-radius:2px; transition:all .3s; } 226.n-mob { 227 display:none; position:fixed; top:calc(var(--NH)+8px); left:14px; right:14px; 228 background:rgba(12,12,12,.98); border:1px solid var(--b-dark); border-radius:18px; 229 padding:16px; z-index:999; backdrop-filter:blur(20px); 230} 231.n-mob.on { display:block; } 232.n-mob a { display:block; padding:11px 13px; border-radius:8px; font-size:15px; font-weight:600; color:rgba(255,255,255,.8); transition:background .15s; } 233.n-mob a:hover { background:rgba(255,255,255,.06); color:var(--o2); } 234.n-mob-cta { margin-top:12px; display:flex; flex-direction:column; gap:8px; } 235 236/* ââ Mobile nav: collapse desktop bar to logo + hamburger (â¤768px). 237 Without this the desktop .n-links / .n-mega / .n-right pills stay laid out 238 for wide screens and spill off the right edge on phones. CTAs live in .n-mob. */ 239@media (max-width:768px) { 240 .n-links { display:none; } 241 .n-mega { display:none !important; } 242 .n-right { margin-left:auto; } 243 .n-right .btn-pill { display:none; } 244 .n-hbg { display:flex; } 245} 246 247/* ââ Cert / trust badge grid: the badges are injected with an inline 248 grid-template-columns:repeat(5,1fr); these !important rules override that 249 inline style so the 5 badges wrap instead of overflowing narrow screens. */ 250@media (max-width:900px) { .cert-grid { grid-template-columns:repeat(2,1fr) !important; } } 251@media (max-width:560px) { .cert-grid { grid-template-columns:1fr !important; } } 252 253/* ââ Contact "Build With Us" split (founder photo 260px + CTA copy 1fr): the grid 254 is injected with an inline grid-template-columns:260px 1fr. Collapse it on mobile 255 so the CTA copy column isn't pushed off-screen and clipped. */ 256@media (max-width:768px) { [style*="grid-template-columns:260px 1fr"] { grid-template-columns:1fr !important; } } 257 258 259/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 260 FOOTER · Premium MNC layout 261 Newsletter band â 4-col grid â Connect strip â Wordmark â Legal 262 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 263.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } 264 265.ft { 266 position:relative; 267 background:#050505; 268 border-top:1px solid rgba(255,255,255,.06); 269 overflow:hidden; 270 isolation:isolate; 271} 272.ft__line { 273 position:absolute;top:0;left:0;right:0;height:1px; 274 background:linear-gradient(90deg,transparent,rgba(232,98,42,.55) 25%,var(--o) 50%,rgba(232,98,42,.55) 75%,transparent); 275 z-index:1; 276} 277.ft__glow { 278 position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);z-index:0; 279} 280.ft__glow--orange { 281 width:900px;height:520px; 282 background:radial-gradient(ellipse,rgba(232,98,42,.18) 0%,transparent 60%); 283 bottom:-260px;left:50%;transform:translateX(-50%); 284} 285.ft__glow--blue { 286 width:560px;height:380px; 287 background:radial-gradient(ellipse,rgba(70,140,255,.10) 0%,transparent 65%); 288 top:80px;right:-160px; 289} 290.ft__grid-bg { 291 position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none; 292 background-image: 293 linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), 294 linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); 295 background-size:48px 48px; 296 mask-image:radial-gradient(ellipse at top,rgba(0,0,0,.6),transparent 70%); 297 -webkit-mask-image:radial-gradient(ellipse at top,rgba(0,0,0,.6),transparent 70%); 298} 299.ft__inner { position:relative;z-index:2;padding:88px 0 0; } 300 301/* ââ Newsletter band âââââââââââââââââââââââââââââââââââââââââââ */ 302.ft-news { 303 display:grid; 304 grid-template-columns:1.1fr .9fr; 305 gap:56px; 306 align-items:center; 307 padding:38px 44px; 308 border-radius:24px; 309 background: 310 linear-gradient(135deg,rgba(232,98,42,.10) 0%,rgba(232,98,42,0) 55%), 311 linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 100%); 312 border:1px solid rgba(255,255,255,.08); 313 box-shadow:0 30px 80px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); 314 margin-bottom:80px; 315 position:relative; 316 overflow:hidden; 317} 318.ft-news::before { 319 content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px; 320 background:linear-gradient(135deg,rgba(232,98,42,.45),transparent 40%,transparent 60%,rgba(232,98,42,.25)); 321 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); 322 -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; 323} 324.ft-news__copy { min-width:0; } 325.ft-news__tag { 326 display:inline-flex;align-items:center;gap:8px; 327 font-family:var(--f-m);font-size:11px;letter-spacing:1.6px;text-transform:uppercase; 328 color:rgba(255,255,255,.62); 329 padding:6px 12px;border-radius:999px; 330 background:rgba(232,98,42,.10);border:1px solid rgba(232,98,42,.25); 331 margin-bottom:14px; 332} 333.ft-news__dot { width:6px;height:6px;border-radius:50%;background:var(--o);box-shadow:0 0 10px rgba(232,98,42,.7); animation:ftDot 2.4s ease-in-out infinite; } 334@keyframes ftDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} } 335.ft-news__h { 336 font-family:var(--f-h);font-weight:700;letter-spacing:-.02em;line-height:1.08; 337 font-size:clamp(24px,2.4vw,32px);color:#fff;margin:0 0 8px; 338} 339.ft-news__sub { 340 font-family:var(--f-b);font-size:14.5px;line-height:1.55; 341 color:rgba(255,255,255,.6);margin:0;max-width:480px; 342} 343.ft-news__form { display:flex;gap:10px;align-items:stretch;min-width:0; } 344.ft-news__field { 345 position:relative;flex:1;min-width:0; 346 display:flex;align-items:center; 347 background:rgba(0,0,0,.45); 348 border:1px solid rgba(255,255,255,.10); 349 border-radius:14px; 350 transition:border-color .25s,box-shadow .25s,background .25s; 351} 352.ft-news__field:focus-within { 353 border-color:rgba(232,98,42,.6); 354 background:rgba(0,0,0,.6); 355 box-shadow:0 0 0 3px rgba(232,98,42,.15); 356} 357.ft-news__field > i { 358 position:absolute;
358left:16px;color:rgba(255,255,255,.4);font-size:14px;pointer-events:none; 359} 360.ft-news__field input { 361 flex:1;min-width:0;background:transparent;border:0;outline:0; 362 padding:16px 16px 16px 44px; 363 font-family:var(--f-b);font-size:15px;color:#fff;letter-spacing:-.1px; 364} 365.ft-news__field input::placeholder { color:rgba(255,255,255,.36); } 366.ft-news__btn { 367 display:inline-flex;align-items:center;gap:8px; 368 padding:0 22px;border:0;border-radius:14px;cursor:pointer; 369 background:linear-gradient(135deg,var(--o) 0%,#FF7A42 100%); 370 color:#fff;font-family:var(--f-m);font-weight:600;font-size:14.5px;letter-spacing:.1px; 371 box-shadow:0 12px 30px -10px rgba(232,98,42,.55), inset 0 1px 0 rgba(255,255,255,.18); 372 transition:transform .25s var(--ease1),box-shadow .25s,filter .25s; 373 white-space:nowrap; 374} 375.ft-news__btn:hover { transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(232,98,42,.7); filter:brightness(1.06); } 376.ft-news__btn:active { transform:translateY(0); } 377.ft-news__btn i { font-size:12px;transition:transform .25s; } 378.ft-news__btn:hover i { transform:translateX(3px); } 379 380/* ââ Main 4-col grid âââââââââââââââââââââââââââââââââââââââââââ */ 381.ft-grid { 382 display:grid; 383 grid-template-columns:1.7fr 1fr 1fr 1fr; 384 gap:64px; 385 padding-bottom:64px; 386} 387.ft-col { min-width:0; } 388.ft-col--brand { max-width:380px; } 389.ft-brand { display:inline-block;margin-bottom:18px; } 390.ft-brand img { height:42px;width:auto;display:block;object-fit:contain; } 391.ft-brand__line { 392 font-family:var(--f-b);font-size:14.5px;line-height:1.65; 393 color:rgba(255,255,255,.62);margin:0 0 24px;letter-spacing:-.1px; 394} 395.ft-contacts { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px; } 396.ft-contacts li { display:flex;align-items:flex-start;gap:12px; } 397.ft-contact__ico { 398 flex:0 0 32px;width:32px;height:32px;border-radius:9px; 399 display:inline-flex;align-items:center;justify-content:center; 400 background:rgba(232,98,42,.10);border:1px solid rgba(232,98,42,.22); 401 color:var(--o2);font-size:12px; 402} 403.ft-contact__txt { 404 font-family:var(--f-b);font-size:14px;color:rgba(255,255,255,.82); 405 text-decoration:none;line-height:1.45;padding-top:6px;letter-spacing:-.1px; 406 transition:color .22s; 407} 408a.ft-contact__txt:hover { color:var(--o2); } 409.ft-contact__sub { display:block;font-size:12.5px;color:rgba(255,255,255,.42);margin-top:2px; } 410 411.ft-h { 412 font-family:var(--f-m);font-weight:600;font-size:11px;letter-spacing:2.2px; 413 color:rgba(255,255,255,.45);text-transform:uppercase; 414 margin:6px 0 22px; 415} 416.ft-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px; } 417.ft-list a { 418 position:relative;display:inline-flex;align-items:center;gap:8px; 419 font-family:var(--f-b);font-size:15px;font-weight:400; 420 color:rgba(255,255,255,.78);text-decoration:none;letter-spacing:-.1px; 421 transition:color .22s,transform .22s; 422} 423.ft-list a::before { 424 content:"";width:0;height:1px;background:var(--o2); 425 transition:width .25s var(--ease1); 426} 427.ft-list a:hover { color:var(--o2);transform:translateX(2px); } 428.ft-list a:hover::before { width:14px; } 429.ft-pill-soon { 430 display:inline-block;font-size:9.5px;font-family:var(--f-m);font-weight:600; 431 letter-spacing:1px;text-transform:uppercase; 432 padding:2px 7px;border-radius:6px; 433 background:rgba(255,255,255,.06);color:rgba(255,255,255,.55); 434 border:1px solid rgba(255,255,255,.08); 435} 436 437/* ââ Connect strip âââââââââââââââââââââââââââââââââââââââââââââ */ 438.ft-strip { 439 display:flex;align-items:center;justify-content:space-between;gap:32px; 440 padding:24px 0; 441 border-top:1px solid rgba(255,255,255,.06); 442 border-bottom:1px solid rgba(255,255,255,.06); 443 flex-wrap:wrap; 444} 445.ft-strip__left { display:flex;align-items:center;gap:18px;flex-wrap:wrap; } 446.ft-strip__label { 447 font-family:var(--f-m);font-size:11px;letter-spacing:2px;text-transform:uppercase; 448 color:rgba(255,255,255,.42); 449} 450.ft-trust { 451 list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap; 452} 453.ft-trust li { 454 display:inline-flex;align-items:center;gap:8px; 455 font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.62); 456 padding:8px 14px;border-radius:999px; 457 background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08); 458 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); 459} 460.ft-trust li i { color:var(--o2);font-size:11px; } 461 462/* Social tiles (kept brand-color, sized for strip) */ 463.ft-social { 464 display:inline-flex;gap:8px; 465} 466.ft-social-tile { 467 position:relative;display:inline-flex;align-items:center;justify-content:center; 468 width:38px;height:38px;border-radius:10px;text-decoration:none;font-size:14px; 469 border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03); 470 color:rgba(255,255,255,.82); 471 transition:background .25s cubic-bezier(.2,.7,.2,1),border-color .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s; 472} 473.ft-social-tile::before { 474 content:"";position:absolute;inset:0;border-radius:inherit; 475 background:var(--brand,#FFFFFF);opacity:0; 476 transition:opacity .25s cubic-bezier(.2,.7,.2,1);z-index:0; 477} 478.ft-social-tile > i { position:relative;z-index:1;transition:color .25s; } 479.ft-social-tile:hover { 480 transform:translateY(-3px);color:#fff; 481 border-color:var(--brand-border,rgba(255,255,255,.18));
482 box-shadow:0 12px 26px -8px var(--brand-shadow,rgba(255,255,255,.18)); 483} 484.ft-social-tile:hover::before { opacity:1; } 485.ft-social-tile[data-net="linkedin"] { --brand:#0A66C2; --brand-border:rgba(10,102,194,.50); --brand-shadow:rgba(10,102,194,.45); color:#4F9CE0; } 486.ft-social-tile[data-net="x"] { --brand:#000000; --brand-border:rgba(255,255,255,.40); --brand-shadow:rgba(0,0,0,.65); color:#FFFFFF; } 487.ft-social-tile[data-net="youtube"] { --brand:#FF0033; --brand-border:rgba(255,0,51,.55); --brand-shadow:rgba(255,0,51,.50); color:#FF6680; } 488.ft-social-tile[data-net="instagram"] { --brand-border:rgba(220,57,148,.55); --brand-shadow:rgba(220,57,148,.50); color:#E1306C; } 489.ft-social-tile[data-net="instagram"]::before { background:linear-gradient(135deg,#F58529 0%,#DD2A7B 40%,#8134AF 75%,#515BD4 100%); } 490.ft-social-tile[data-net="facebook"] { --brand:#1877F2; --brand-border:rgba(24,119,242,.55); --brand-shadow:rgba(24,119,242,.45); color:#4D94F5; } 491.ft-social-tile[data-net="whatsapp"] { --brand:#25D366; --brand-border:rgba(37,211,102,.55); --brand-shadow:rgba(37,211,102,.40); color:#4ADE80; } 492 493/* ââ Giant wordmark + back-to-top ââââââââââââââââââââââââââââââ */ 494.ft-mark { 495 position:relative; 496 padding:36px 0 28px; 497 display:flex;align-items:center;justify-content:center; 498} 499.ft-mark__word { 500 font-family:var(--f-h);font-weight:800; 501 font-size:clamp(70px,15vw,220px); 502 line-height:.95;letter-spacing:-0.06em; 503 white-space:nowrap;user-select:none;pointer-events:none;text-align:center; 504 background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 100%); 505 -webkit-background-clip:text;background-clip:text; 506 -webkit-text-fill-color:transparent;color:transparent; 507} 508.ft-mark__word em { 509 font-family:var(--f-s);font-style:italic;font-weight:400; 510 background:linear-gradient(180deg,var(--o) 0%,rgba(232,98,42,.3) 100%); 511 -webkit-background-clip:text;background-clip:text; 512 -webkit-text-fill-color:transparent; 513} 514.ft-up-btn { 515 position:absolute;right:0;top:50%;transform:translateY(-50%); 516 width:64px;height:64px;border-radius:50%; 517 background:linear-gradient(135deg,var(--o) 0%,#FF7A42 100%);color:#fff; 518 display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px; 519 transition:all .3s var(--ease1); 520 box-shadow:0 14px 36px -8px rgba(232,98,42,.55), inset 0 1px 0 rgba(255,255,255,.2); 521 z-index:5; 522} 523.ft-up-btn:hover { transform:translateY(calc(-50% - 4px));box-shadow:0 20px 48px -8px rgba(232,98,42,.7); } 524.ft-up-btn:active { transform:translateY(calc(-50% - 1px)); } 525 526/* ââ Legal bottom ââââââââââââââââââââââââââââââââââââââââââââââ */ 527.ft-legal { 528 display:flex;align-items:center;justify-content:space-between;gap:16px; 529 padding:22px 0 36px;border-top:1px solid rgba(255,255,255,.06); 530 flex-wrap:wrap; 531} 532.ft-legal__left span, 533.ft-legal__right a, 534.ft-legal__right span { 535 font-family:var(--f-m);font-size:11.5px;color:rgba(255,255,255,.42); 536 text-decoration:none;letter-spacing:.2px; 537} 538.ft-legal__right { display:flex;align-items:center;gap:14px;flex-wrap:wrap; } 539.ft-legal__right a { transition:color .22s; } 540.ft-legal__right a:hover { color:var(--o2); } 541.ft-sep { width:1px;height:12px;background:rgba(255,255,255,.12);display:inline-block; } 542 543/* ââ Responsive ââââââââââââââââââââââââââââââââââââââââââââââââ */ 544@media (max-width:1100px) { 545 .ft-grid { grid-template-columns:1fr 1fr 1fr;gap:48px; } 546 .ft-col--brand { grid-column:1 / -1;max-width:560px; } 547 .ft-news { grid-template-columns:1fr;gap:24px;padding:32px; } 548} 549@media (max-width:760px) { 550 .ft__inner { padding-top:64px; } 551 .ft-news { padding:26px;margin-bottom:56px; } 552 .ft-news__h { font-size:22px; } 553 .ft-news__form { flex-direction:column; } 554 .ft-news__btn { padding:14px 22px;justify-content:center; } 555 .ft-grid { grid-template-columns:1fr 1fr;gap:36px;padding-bottom:48px; } 556 .ft-col--brand { grid-column:1 / -1; } 557 .ft-strip { flex-direction:column;align-items:flex-start;gap:18px; } 558 .ft-mark { padding:24px 0 16px; } 559 .ft-up-btn { position:static;transform:none;margin-top:18px;width:56px;height:56px; } 560 .ft-up-btn:hover { transform:translateY(-3px); } 561 .ft-mark { flex-direction:column;gap:6px; } 562 .ft-legal { flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:28px; } 563} 564@media (max-width:460px) { 565 .ft-grid { grid-template-columns:1fr;gap:32px; } 566 .ft-mark__word { font-size:clamp(56px,18vw,90px); } 567} 568 569@media (prefers-reduced-motion:reduce) { 570 .ft-news__dot, 571 .ft-list a, 572 .ft-up-btn, 573 .ft-social-tile, 574 .ft-news__btn { transition:none !important;animation:none !important; } 575} 576 577/* ââââââââââââââââââââââââââââââââââââââââ 578 SERVICE SECTIONS â BOLD SPLIT LAYOUT 579 Each one is a FULL immersive section 580 NOT a two-column card 581ââââââââââââââââââââââââââââââââââââââââ */ 582
583/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 584 BLOG / INSIGHTS · .blog-grid + .bcard* (extracted from index.html L1714âL1732) 585 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 586.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } 587.bcard { background:var(--paper); border:1px solid var(--b-light2); border-radius:18px; overflow:hidden; cursor:pointer; transition:all .3s var(--ease1); box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; flex-direction:column; } 588.bcard:hover { transform:translateY(-6px); box-shadow:0 20px 52px rgba(0,0,0,.12); border-color:rgba(232,98,42,.25); } 589.bcard.feat { display:flex; flex-direction:column; } 590.bcard-img { position:relative; overflow:hidden; aspect-ratio:16/9; } 591.bcard.feat .bcard-img { aspect-ratio:16/9; } 592.bcard-img-sm { aspect-ratio:16/9; } 593.bcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; } 594.bcard:hover .bcard-img img { transform:scale(1.04); } 595.bcard-ov { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 55%); } 596.bcard-cat { position:absolute; top:10px; left:10px; padding:3px 8px; background:var(--o); border-radius:100px; font-family:var(--f-m); font-size:8.5px; letter-spacing:.7px; color:#fff; text-transform:uppercase; } 597.bcard-body { padding:18px; flex:1; display:flex; flex-direction:column; } 598.bcard-title { font-family:var(--f-h); font-size:16px; font-weight:700; color:var(--t-dark); letter-spacing:-.2px; line-height:1.3; margin-bottom:8px; } 599.bcard.feat .bcard-title { font-size:21px; } 600.bcard-exc { font-size:12.5px; color:var(--t-muted); line-height:1.6; margin-bottom:12px; font-weight:300; } 601.bcard-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; } 602.bcard-date { font-family:var(--f-m); font-size:9.5px; color:var(--t-muted); } 603.bcard-more { font-size:12px; color:var(--o); font-weight:600; display:flex; align-items:center; gap:4px; transition:gap .2s; } 604.bcard:hover .bcard-more { gap:7px; } 605 606/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 607 HEADER · premium mega image card (services dropdown) (extracted from index.html L3035âL3210) 608 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 609 610/* Tighten the grid gap since there's no longer a framed-card gap */ 611.ea-premium-hero__grid { 612 gap: clamp(16px, 2vw, 32px) !important; 613} 614 615/* ==== end PREMIUM HERO V3 ==== */ 616 617 618/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 619 PREMIUM SERVICES MEGA â featured image card upgrade 620 To revert: delete this block + the mic-trust/mic-content markup, 621 restore the original mega-img-card HTML. 622ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 623 624.mega-img-card.mega-img-card--premium { 625 position: relative; 626 overflow: hidden; 627 min-height: 280px; 628 padding: 0; 629 isolation: isolate; 630 border-left: 1px solid rgba(255,255,255,.06); 631} 632 633/* Background image â bolder presence than default */ 634.mega-img-card--premium img { 635 position: absolute; 636 inset: 0; 637 width: 100%; 638 height: 100%; 639 object-fit: cover; 640 opacity: .68; 641 transform: scale(1.02); 642 transition: opacity .4s, transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; 643 filter: saturate(1.05) contrast(1.04); 644} 645.mega-img-card--premium:hover img { 646 opacity: .82; 647 transform: scale(1.06); 648 filter: saturate(1.1) contrast(1.06); 649} 650 651/* Layered overlays â orange edge glow + bottom dark gradient + subtle vignette */ 652.mega-img-card--premium::before { 653 content: ""; 654 position: absolute; 655 inset: 0; 656 z-index: 1; 657 background: 658 radial-gradient(circle at 18% 22%, rgba(232,98,42,.20), transparent 38%), 659 radial-gradient(circle at 86% 14%, rgba(255,122,66,.14), transparent 32%), 660 linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.94) 100%); 661 pointer-events: none; 662} 663 664.mega-img-card--premium::after {
665 content: ""; 666 position: absolute; 667 inset: 0; 668 z-index: 1; 669 background: 670 linear-gradient(135deg, transparent 0%, transparent 60%, rgba(232,98,42,.06) 100%); 671 pointer-events: none; 672 opacity: 0; 673 transition: opacity .4s; 674} 675.mega-img-card--premium:hover::after { opacity: 1; } 676 677/* Trust badge â top left */ 678.mega-img-card--premium .mic-trust { 679 position: absolute; 680 top: 14px; 681 left: 14px; 682 right: 14px; 683 z-index: 3; 684 display: inline-flex; 685 align-items: center; 686 gap: 8px; 687 padding: 7px 12px; 688 border-radius: 100px; 689 background: linear-gradient(135deg, rgba(10,10,14,.78), rgba(6,6,8,.66)); 690 border: 1px solid rgba(255,255,255,.12); 691 backdrop-filter: blur(14px); 692 -webkit-backdrop-filter: blur(14px); 693 width: fit-content; 694 box-shadow: 0 8px 24px rgba(0,0,0,.35); 695} 696.mega-img-card--premium .mic-trust-dot { 697 width: 6px; 698 height: 6px; 699 border-radius: 50%; 700 background: #5CFF8D; 701 box-shadow: 0 0 10px rgba(92,255,141,.7); 702 animation: micTrustPulse 1.9s infinite; 703 flex-shrink: 0; 704} 705@keyframes micTrustPulse { 0%,100% { opacity:1 } 50% { opacity:.42 } } 706.mega-img-card--premium .mic-trust-text { 707 font-family: var(--f-m); 708 font-size: 9.5px; 709 letter-spacing: .5px; 710 color: rgba(255,255,255,.74); 711 white-space: nowrap; 712} 713.mega-img-card--premium .mic-trust-text b { 714 color: #fff; 715 font-weight: 700; 716} 717 718/* Bottom content block â glassmorphic */ 719.mega-img-card--premium .mic-content { 720 position: relative; 721 z-index: 2; 722 margin-top: auto; 723 padding: 22px 22px 22px; 724 background: linear-gradient(180deg, transparent 0%, rgba(8,8,10,.55) 30%, rgba(5,5,7,.92) 100%); 725 backdrop-filter: blur(2px); 726 -webkit-backdrop-filter: blur(2px); 727} 728 729.mega-img-card--premium .mic-label { 730 position: relative; 731 font-family: var(--f-m); 732 font-size: 9px; 733 color: var(--o2); 734 letter-spacing: 2px; 735 text-transform: uppercase; 736 margin-bottom: 8px; 737 display: inline-flex; 738 align-items: center; 739 gap: 8px; 740} 741.mega-img-card--premium .mic-label::before { 742 content: ""; 743 width: 18px; 744 height: 1px; 745 background: var(--o); 746} 747 748.mega-img-card--premium .mic-title { 749 font-family: var(--f-h); 750 font-weight: 800; 751 font-size: 19px; 752 color: #fff; 753 letter-spacing: -.5px; 754 line-height: 1.2; 755 margin-bottom: 8px; 756} 757 758.mega-img-card--premium .mic-desc { 759 font-size: 11.5px; 760 color: rgba(255,255,255,.62); 761 line-height: 1.55; 762 margin-bottom: 14px; 763} 764 765/* CTA â premium pill */ 766.mega-img-card--premium .mic-cta { 767 display: inline-flex; 768 align-items: center; 769 gap: 8px; 770 padding: 10px 18px 10px 16px; 771 border-radius: 100px; 772 background: linear-gradient(135deg, #E8622A 0%, #FF7A42 100%); 773 box-shadow: 774 0 8px 22px rgba(232,98,42,.42), 775 inset 0 1px 0 rgba(255,255,255,.22); 776 font-family: var(--f-h); 777 font-weight: 700; 778 font-size: 12px; 779 color: #fff; 780 width: fit-content; 781 transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; 782 letter-spacing: .1px; 783} 784 785/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 786 VIDEOS · .cap-videos__* + .cap-video* (extracted from index.html L3826âL3904) 787 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 788.cap-videos__grid { 789 display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; 790} 791.cap-video { 792 position: relative; border-radius: 18px; 793 overflow: hidden; 794 border: 1px solid rgba(255,255,255,.06); 795 background: var(--ink3); 796 aspect-ratio: 16/10; 797 cursor: pointer; 798 transition: transform .35s var(--ease1), border-color .35s, box-shadow .35s; 799} 800.cap-video:hover { 801 transform: translateY(-4px); 802 border-color: rgba(232,98,42,.32); 803 box-shadow: 0 24px 50px rgba(0,0,0,.5), 0 0 40px rgba(232,98,42,.08); 804} 805.cap-video img { 806 position: absolute; inset: 0; 807 width: 100%; height: 100%; 808 object-fit: cover; opacity: .72; 809 transition: opacity .35s, transform .8s var(--ease1); 810} 811.cap-video:hover img { opacity: .9; transform: scale(1.04); } 812.cap-video::after {
813 content: ""; position: absolute; inset: 0; 814 background: linear-gradient(180deg, transparent 50%, rgba(8,8,10,.86) 100%); 815} 816.cap-video__badge { 817 position: absolute; top: 12px; left: 12px; 818 z-index: 2; 819 padding: 5px 10px; border-radius: 100px; 820 background: rgba(8,8,10,.78); 821 border: 1px solid rgba(255,255,255,.14); 822 backdrop-filter: blur(10px); 823 font-family: var(--f-m); font-size: 8.5px; 824 letter-spacing: 1.1px; text-transform: uppercase; 825 color: rgba(255,198,150,.94); 826} 827.cap-video__dur { 828 position: absolute; top: 12px; right: 12px; 829 z-index: 2; 830 padding: 4px 8px; border-radius: 6px; 831 background: rgba(0,0,0,.72); 832 font-family: var(--f-m); font-size: 10px; 833 color: rgba(255,255,255,.85); 834} 835.cap-video__play { 836 position: absolute; top: 50%; left: 50%; 837 transform: translate(-50%, -50%); 838 width: 60px; height: 60px; border-radius: 50%; 839 background: rgba(232,98,42,.92); 840 border: 2px solid #fff; 841 display: flex; align-items: center; justify-content: center; 842 color: #fff; font-size: 18px; 843 z-index: 2; 844 transition: transform .35s var(--ease1), background .35s; 845 box-shadow: 0 12px 32px rgba(232,98,42,.5); 846} 847.cap-video__play i { margin-left: 4px; } 848.cap-video:hover .cap-video__play { 849 transform: translate(-50%, -50%) scale(1.1); 850 background: var(--o); 851} 852.cap-video__title { 853 position: absolute; bottom: 14px; left: 16px; right: 16px; 854 z-index: 2; 855 font-family: var(--f-h); font-weight: 700; font-size: 14px; 856 color: #fff; letter-spacing: -.2px; 857} 858.cap-video__caption { 859 margin-top: 22px; 860 text-align: center; 861 font-size: 13px; 862 color: rgba(255,255,255,.5); 863 font-family: var(--f-m); letter-spacing: .3px; 864} 865@media (max-width: 900px) { .cap-videos__grid { grid-template-columns: 1fr 1fr; } } 866@media (max-width: 560px) { .cap-videos__grid { grid-template-columns: 1fr; } } 867 868`; 869 870 function injectStyles() {
871 if (document.getElementById('ea-shared-styles')) return; 872 var el = document.createElement('style'); 873 el.id = 'ea-shared-styles'; 874 el.textContent = STYLES; 875 // Insert as the FIRST stylesheet so inline page <style> can still override 876 var first = document.head.firstChild; 877 document.head.insertBefore(el, first); 878 } 879 880 var SECTIONS = { 881 header: `<header role="banner"> 882<!-- NAV --> 883<nav id="nav" aria-label="Primary"> 884 <div class="W" style="width:100%;max-width:100%"> 885 <div class="nav-row" style="padding:0 var(--G)"> 886 <a href="${BASE}index.html" class="n-logo" style="padding:0" aria-label="EAlphabits home"> 887 <img src="${BASE}assets/logo-ealphabits-1.png" width="1200" height="147" decoding="async" fetchpriority="high" alt="EAlphabits" style="height:32px;width:auto;display:block;object-fit:contain"> 888 </a> 889 <ul class="n-links"> 890 891 <!-- SERVICES MEGA --> 892 <li class="n-item"> 893 <div class="n-btn">Services <i class="fas fa-chevron-down n-caret"></i></div> 894 <div class="n-mega"> 895 <div class="n-mega-inner mega-services"> 896 <!-- Card 1 â Camera AI (matches home hero) --> 897 <a href="${BASE}services/camera-ai.html" class="mega-card"> 898 <div class="mc-tag">Domain 01</div> 899 <div class="mc-ico"><i class="fas fa-camera"></i></div> 900 <div class="mc-name">Camera AI</div> 901 <div class="mc-desc">Upgrade existing camera systems with edge intelligence, real-time alerts, and enterprise-grade analytics for practical deployment.</div> 902 <span class="mc-link">Explore <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 903 </a> 904 <!-- Card 2 â IoT (matches home hero) --> 905 <a href="${BASE}services/iot.html" class="mega-card"> 906 <div class="mc-tag">Domain 02</div> 907 <div class="mc-ico"><i class="fas fa-wifi"></i></div> 908 <div class="mc-name">IoT</div> 909 <div class="mc-desc">Design and build complete products across hardware, firmware, and mechanical engineering with scalable edge connectivity.</div> 910 <span class="mc-link">Explore <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 911 </a> 912 <!-- Card 3 â AI Automation (matches home hero) --> 913 <a href="${BASE}services/ai-automation.html" class="mega-card"> 914 <div class="mc-tag">Domain 03</div> 915 <div class="mc-ico"><i class="fas fa-robot"></i></div> 916 <div class="mc-name">AI Automation</div> 917 <div class="mc-desc">Deploy bots and custom LLM workflows that understand business data, streamline operations, and automate complex processes.</div> 918 <span class="mc-link">Explore <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 919 </a> 920 <!-- Featured image â premium v2 --> 921 <a href="#contact" class="mega-img-card mega-img-card--premium"> 922 <img src="${BASE}assets/hero-camera-ai.jpg" alt="EAlphabits AI engineering" loading="lazy" decoding="async"> 923 <div class="mic-trust" aria-hidden="false"> 924 <span class="mic-trust-dot"></span> 925 <span class="mic-trust-text"><b>NVIDIA Inception</b> · 50+ deployments</span> 926 </div> 927 <div class="mic-content"> 928 <div class="mic-label">Engineering on demand</div> 929 <div class="mic-title">Production AI across vision, IoT & automation.</div> 930 <div class="mic-desc">Free 30-min architecture call with an engineer â no pitch decks, just a clear plan for your use case.</div> 931 <div class="mic-cta"><i class="fas fa-calendar-check"></i> Book a Demo <i class="fas fa-arrow-right mic-cta-arrow"></i></div> 932 </div> 933 </a> 934 </div> 935 <div class="mega-footer"> 936 <span class="mega-footer-left">EAlphabits · Camera AI · IoT · AI Automation · Ahmedabad, India</span> 937 <div class="mega-footer-links"> 938 <a href="${BASE}about.html">About Us</a> 939 <a href="${BASE}index.html#products">Our Products</a> 940 <a href="${BASE}index.html#contact">Book a Consultation</a> 941 </div> 942 </div> 943 </div> 944 </li> 945 946 <!-- PRODUCTS MEGA â 5 products --> 947 <li class="n-item"> 948 <div class="n-btn">Products <i class="fas fa-chevron-down n-caret"></i></div> 949 <div class="n-mega"> 950 <div class="n-mega-inner mega-products"> 951 952 <!-- AI Software (4) --> 953 <a href="${BASE}products/campus-ai.html" class="mega-card"> 954 <div class="mc-tag">01 · Education · Flagship</div> 955 <div class="mc-ico"><i class="fas fa-graduation-cap"></i></div> 956 <div class="mc-name">Campus AI</div> 957 <div class="mc-desc">Classroom attentiveness, face attendance & per-student analytics â 100% on-premise.</div>
958 <span class="mc-link">View Product <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 959 </a> 960 <a href="${BASE}index.html#prod-workplace" class="mega-card"> 961 <div class="mc-tag">02 · Workplace Intelligence</div> 962 <div class="mc-ico"><i class="fas fa-briefcase"></i></div> 963 <div class="mc-name">Workplace AI</div> 964 <div class="mc-desc">Desk presence, focus-time and break analytics. Privacy-first, edge-processed, no inbox snooping.</div> 965 <span class="mc-link">View Product <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 966 </a> 967 <a href="${BASE}index.html#prod-safety" class="mega-card"> 968 <div class="mc-tag">03 · Heavy Industry</div> 969 <div class="mc-ico"><i class="fas fa-helmet-safety"></i></div> 970 <div class="mc-name">Safety AI</div> 971 <div class="mc-desc">PPE compliance, restricted-zone breach & fall detection, perimeter security â from your cameras.</div> 972 <span class="mc-link">View Product <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 973 </a> 974 975 <!-- AI Hardware (2) â stealth: name only, no concept text --> 976 <a href="${BASE}index.html#prod-arjun" class="mega-card mega-card--soon"> 977 <div class="mc-tag">04 · Coming Soon</div> 978 <div class="mc-ico"><i class="fas fa-lock"></i></div> 979 <div class="mc-name">Arjun 1.0</div> 980 <div class="mc-desc mc-desc--blur">Plug-and-play Edge AI box. Upgrade any RTSP/ONVIF camera to intelligent security in under an hour.</div> 981 <span class="mc-link">Notify Me <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 982 </a> 983 <a href="${BASE}index.html#prod-saarthi" class="mega-card mega-card--soon"> 984 <div class="mc-tag">05 · Coming Soon</div> 985 <div class="mc-ico"><i class="fas fa-lock"></i></div> 986 <div class="mc-name">Saarthi 1.0</div> 987 <div class="mc-desc mc-desc--blur">In-cabin Driver Monitoring System hardware â drowsiness, distraction & fatigue alerts in real time.</div> 988 <span class="mc-link">Notify Me <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 989 </a> 990 991 </div> 992 <div class="mega-footer"> 993 <span class="mega-footer-left">5 Products · 3 AI Software · 2 AI Hardware · Ahmedabad, India</span> 994 <div class="mega-footer-links"> 995 <a href="${BASE}index.html#products">All Products</a> 996 <a href="${BASE}index.html#contact">Book a Demo</a> 997 </div> 998 </div> 999 </div> 1000 </li> 1001 1002 <!-- COMPANY MEGA --> 1003 <li class="n-item"> 1004 <div class="n-btn">Company <i class="fas fa-chevron-down n-caret"></i></div> 1005 <div class="n-mega"> 1006 <div class="n-mega-inner mega-company"> 1007 <a href="${BASE}about.html" class="mega-card"> 1008 <div class="mc-tag">Who We Are</div> 1009 <div class="mc-ico"><i class="fas fa-building"></i></div> 1010 <div class="mc-name">About EAlphabits</div> 1011 <div class="mc-desc">5+ years engineering AI systems for production. 50+ deployments. Based in Ahmedabad, India.</div> 1012 <span class="mc-link">Our Story <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 1013 </a> 1014 <a href="${BASE}blog/index.html" class="mega-card"> 1015 <div class="mc-tag">Thought Leadership</div> 1016 <div class="mc-ico"><i class="fas fa-pen-nib"></i></div> 1017 <div class="mc-name">Insights & Blog</div> 1018 <div class="mc-desc">Field notes from production â no pitch decks. Deep dives on Camera AI, IoT and AI Automation.</div> 1019 <span class="mc-link">Read Articles <i class="fas fa-arrow-right" style="font-size:9px"></i></span> 1020 </a> 1021 <!-- Featured stat panel --> 1022 <a href="#contact" class="mega-img-card"> 1023 <img src="${BASE}assets/photo-1552664730-d307ca884978" alt="Company"> 1024 <div class="mic-label">By the numbers</div> 1025 <div class="mic-title">5 years. 50+ deployments. Zero excuses.</div> 1026 <div class="mic-desc">Production-grade AI from a team that genuinely cares about your outcome â not just the invoice.</div> 1027 <div class="mic-cta"><i class="fas fa-handshake"></i> Let's Work Together</div> 1028 </a> 1029 </div> 1030 <div class="mega-footer">
1031 <span class="mega-footer-left">EAlphabits Technology Pvt. Ltd. · Founded 2022 · Privacy-first · Edge-first</span> 1032 <div class="mega-footer-links"> 1033 <a href="${BASE}about.html">Our Story</a> 1034 <a href="${BASE}blog/index.html">Insights</a> 1035 <a href="${BASE}index.html#contact">Contact Us</a> 1036 </div> 1037 </div> 1038 </div> 1039 </li> 1040 1041 </ul> 1042 <div class="n-right"> 1043 <a href="#products" class="btn-pill" style="background:transparent;border:1.5px solid var(--b-light2);color:var(--t-dark)">Products</a> 1044 <a href="#contact" class="btn-pill btn-o" style="padding:9px 20px;font-size:13px"><i class="fas fa-calendar"></i> Book a Call</a> 1045 <button class="n-hbg" id="nhbg"><span></span><span></span><span></span></button> 1046 </div> 1047 </div> 1048 </div> 1049</nav> 1050<div class="n-mob" id="nmob"> 1051 <a href="${BASE}services/camera-ai.html" onclick="cM()">Camera AI</a> 1052 <a href="${BASE}index.html#domains" onclick="cM()">IoT</a> 1053 <a href="${BASE}index.html#domains" onclick="cM()">AI Automation</a> 1054 <a href="#products" onclick="cM()">Products</a> 1055 <a href="${BASE}blog/index.html" onclick="cM()">Insights</a> 1056 <div class="n-mob-cta"> 1057 <a href="#contact" class="btn-pill btn-o" style="border-radius:10px;justify-content:center;padding:13px" onclick="cM()"><i class="fas fa-calendar"></i> Book Consultation</a> 1058 <a href="tel:+919737208790" class="btn-pill btn-ghost" style="border-radius:10px;justify-content:center;padding:13px" onclick="cM()"><i class="fas fa-phone"></i> Call Now</a> 1059 </div> 1060</div> 1061</header>`, 1062 products: `<section class="sec sec--ink" id="products" aria-labelledby="products-title"> 1063 <div class="W"> 1064 <div class="sec__eyebrow">Productized Solutions</div> 1065 <h2 id="products-title" class="sec__title">Five AI products. <em>Plus custom builds.</em></h2> 1066 <p class="sec__intro">Scroll through each one. Click any product in the list to jump straight to it.</p> 1067 1068 <div class="cap-products__layout"> 1069 1070 <!-- LEFT: sticky product nav --> 1071 <aside class="cap-products__sticky" aria-label="Products navigation"> 1072 <div class="cap-products__counter" aria-hidden="true"> 1073 <span class="cap-products__counter-num" id="prodCounter">01</span> 1074 <span class="cap-products__counter-sep">/</span> 1075 <span class="cap-products__counter-total">05</span> 1076 </div> 1077 <div class="cap-products__nav-eyebrow">Our Products</div> 1078 <nav class="cap-products__nav" role="tablist"> 1079 <div class="cap-products__nav-cat cap-products__nav-cat--sw"> 1080 <span>AI Software</span> 1081 <span class="cap-products__nav-cat-count">03</span> 1082 </div> 1083 <a href="${BASE}products/campus-ai.html" class="cap-products__nav-item is-active" data-target="prod-campus"> 1084 <span class="cap-products__nav-num">01</span> 1085 <span class="cap-products__nav-name">Campus AI</span> 1086 <span class="cap-products__nav-chip cap-products__nav-chip--live">Live</span> 1087 </a> 1088 <a href="${BASE}products/workplace-ai.html" class="cap-products__nav-item" data-target="prod-workplace"> 1089 <span class="cap-products__nav-num">02</span> 1090 <span class="cap-products__nav-name">Workplace AI</span> 1091 <span class="cap-products__nav-chip cap-products__nav-chip--live">Live</span> 1092 </a> 1093 <a href="#prod-safety" class="cap-products__nav-item" data-target="prod-safety"> 1094 <span class="cap-products__nav-num">03</span> 1095 <span class="cap-products__nav-name">Safety AI</span> 1096 <span class="cap-products__nav-chip cap-products__nav-chip--live">Live</span> 1097 </a> 1098 1099 <div class="cap-products__nav-cat cap-products__nav-cat--hw"> 1100 <span>AI Hardware</span> 1101 <span class="cap-products__nav-cat-count">02</span> 1102 </div> 1103 <a href="#prod-arjun" class="cap-products__nav-item" data-target="prod-arjun"> 1104 <span class="cap-products__nav-num">04</span>
1105 <span class="cap-products__nav-name">Arjun 1.0</span> 1106 <span class="cap-products__nav-chip cap-products__nav-chip--soon">Soon</span> 1107 </a> 1108 <a href="#prod-saarthi" class="cap-products__nav-item" data-target="prod-saarthi"> 1109 <span class="cap-products__nav-num">05</span> 1110 <span class="cap-products__nav-name">Saarthi 1.0</span> 1111 <span class="cap-products__nav-chip cap-products__nav-chip--soon">Soon</span> 1112 </a> 1113 </nav> 1114 </aside> 1115 1116 <!-- RIGHT: stacked product panels --> 1117 <div class="cap-products__panels"> 1118 1119 <!-- 01 · Campus AI --> 1120 <article class="cap-product-panel" id="prod-campus"> 1121 <div class="cap-product-panel__img"> 1122 <span class="cap-product-panel__img-badge">Education</span> 1123 <span class="cap-product-panel__img-chip cap-product-panel__img-chip--live">Live · 6 campuses</span> 1124 <img src="${BASE}assets/campus_ai_solution.jpeg" alt="Campus AI behavioral analytics â live solution" loading="lazy"> 1125 </div> 1126 <div class="cap-product-panel__category">Product 01</div> 1127 <h3 class="cap-product-panel__name">Campus AI <small>Behavior Analytics</small></h3> 1128 <p class="cap-product-panel__desc">Turn every classroom camera into a behavioral insight engine â engagement, attentiveness, distress & safety patterns analysed in real time on the cameras you already own.</p> 1129 <ul class="cap-product-panel__features"> 1130 <li><i class="fas fa-check"></i>Real-time engagement & attentiveness analytics</li> 1131 <li><i class="fas fa-check"></i>Distress, panic & safety pattern detection</li> 1132 <li><i class="fas fa-check"></i>Face-based attendance + parent alerts</li> 1133 <li><i class="fas fa-check"></i>Centralized multi-campus dashboard</li> 1134 </ul> 1135 <a href="${BASE}products/campus-ai.html" class="cap-product-panel__cta">Explore Campus AI <i class="fas fa-arrow-right"></i></a> 1136 </article> 1137 1138 <!-- 02 · Workplace AI --> 1139 <article class="cap-product-panel" id="prod-workplace"> 1140 <div class="cap-product-panel__img"> 1141 <span class="cap-product-panel__img-badge">Workplace</span> 1142 <span class="cap-product-panel__img-chip cap-product-panel__img-chip--live">Live · enterprise teams</span> 1143 <img src="${BASE}assets/productivity-sdk.jpeg" alt="Workplace AI workplace productivity analytics" loading="lazy"> 1144 </div> 1145 <div class="cap-product-panel__category">Product 02</div> 1146 <h3 class="cap-product-panel__name">Workplace AI <small>Productivity Analytics</small></h3> 1147 <p class="cap-product-panel__desc">Measure what work actually happens â desk presence, focus time, mobile-usage and break patterns. Privacy-first, edge-processed, no inbox-snooping.</p> 1148 <ul class="cap-product-panel__features"> 1149 <li><i class="fas fa-check"></i>Desk presence & focus-time tracking</li> 1150 <li><i class="fas fa-check"></i>Mobile-usage & break-pattern analytics</li> 1151 <li><i class="fas fa-check"></i>Privacy-first â on-prem or cloud</li> 1152 <li><i class="fas fa-check"></i>Manager dashboards + team insights</li> 1153 </ul> 1154 <a href="${BASE}products/workplace-ai.html" class="cap-product-panel__cta">Explore Workplace AI <i class="fas fa-arrow-right"></i></a> 1155 </article> 1156 1157 <!-- 03 · Safety AI --> 1158 <article class="cap-product-panel" id="prod-safety"> 1159 <div class="cap-product-panel__img"> 1160 <span class="cap-product-panel__img-badge">Heavy Industry · Plants</span> 1161 <span class="cap-product-panel__img-chip cap-product-panel__img-chip--live">Deployed · 8 plants</span> 1162 <img src="${BASE}assets/safety_ai.jpg" alt="Safety AI â real-time PPE compliance, restricted-zone breach and slip-risk detection on a factory floor" loading="lazy"> 1163 </div> 1164 <div class="cap-product-panel__category">Product 03</div> 1165 <h3 class="cap-product-panel__name">Safety AI <small>Factory Safety</small></h3> 1166 <p class="cap-product-panel__desc">A complete safety & compliance layer for industrial floors â PPE checks, restricted-zone enforcement, security monitoring and live analytics, all from your existing cameras.</p> 1167 <ul class="cap-product-panel__features"> 1168 <li><i class="fas fa-check"></i>PPE compliance â helmet, vest, gloves, goggles</li> 1169 <li><i class="fas fa-check"></i>Restricted-zone breach & fall detection</li> 1170 <li><i class="fas fa-check"></i>Perimeter & access security monitoring</li> 1171 <li><i class="fas fa-check"></i>Compliance dashboards & audit reports</li> 1172 </ul> 1173 <a href="#contact" class="cap-product-panel__cta">Explore Safety AI <i class="fas fa-arrow-right"></i></a> 1174 </article> 1175 1176 <!-- 04 · Arjun 1.0 (HW Coming Soon) --> 1177 <article class="cap-product-panel cap-product-panel--soon" id="prod-arjun"> 1178 <div class="cap-product-panel__img">
1179 <span class="cap-product-panel__img-badge">Edge Hardware</span> 1180 <span class="cap-product-panel__img-chip cap-product-panel__img-chip--soon"><i class="far fa-clock"></i> Coming Soon</span> 1181 <img src="${BASE}assets/arjun-edge-device.jpg" alt="Arjun 1.0 plug-and-play Edge AI device" loading="lazy"> 1182 </div> 1183 <div class="cap-product-panel__category">Product 04 · Hardware</div> 1184 <h3 class="cap-product-panel__name">Arjun 1.0 <small>Edge AI Device</small></h3> 1185 <p class="cap-product-panel__desc">Plug-and-play Edge AI box. Upgrade any camera to intelligent security in under an hour.</p> 1186 <ul class="cap-product-panel__features"> 1187 <li><i class="fas fa-check"></i>Real-time 30fps inference at the edge</li> 1188 <li><i class="fas fa-check"></i>Connects to any RTSP / ONVIF camera</li> 1189 <li><i class="fas fa-check"></i>Secure boot & encrypted firmware ready</li> 1190 <li><i class="fas fa-check"></i>FIPS / FIDO certified hardware available</li> 1191 </ul> 1192 <a href="#contact" class="cap-product-panel__cta">Notify Me at Launch <i class="fas fa-arrow-right"></i></a> 1193 </article> 1194 1195 <!-- 05 · Saarthi (HW Coming Soon) --> 1196 <article class="cap-product-panel cap-product-panel--soon" id="prod-saarthi"> 1197 <div class="cap-product-panel__img"> 1198 <span class="cap-product-panel__img-chip cap-product-panel__img-chip--soon"><i class="far fa-clock"></i> Coming Soon</span> 1199 <img src="${BASE}assets/saarthi1.0.jpeg" alt="Saarthi 1.0 â in-cabin driver monitoring system (DMS) hardware" loading="lazy"> 1200 </div> 1201 <div class="cap-product-panel__category">Product 05 · Hardware</div> 1202 <h3 class="cap-product-panel__name">Saarthi 1.0 <small>In-cabin DMS Hardware</small></h3> 1203 <p class="cap-product-panel__desc">A compact in-cabin device that watches the driver, not the road. Detects drowsiness, distraction and phone use â alerts the driver instantly & dispatches to fleet operations.</p> 1204 <ul class="cap-product-panel__features"> 1205 <li><i class="fas fa-check"></i>Drowsiness â eye-closure & yawn detection</li> 1206 <li><i class="fas fa-check"></i>Mobile-phone-while-driving detection</li> 1207 <li><i class="fas fa-check"></i>Distraction & out-of-seat alerts</li> 1208 <li><i class="fas fa-check"></i>Edge HW + cloud fleet API</li> 1209 </ul> 1210 <a href="#contact" class="cap-product-panel__cta">Notify Me at Launch <i class="fas fa-arrow-right"></i></a> 1211 </article> 1212 1213 </div> 1214 </div> 1215 </div> 1216</section>`, 1217 /* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1218 VIDEOS SECTION â Temporarily disabled until we have enough live clips. 1219 To restore: replace the `videos:` template below with this archived one. 1220 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1221 /* 1222 videos_ARCHIVED: \`<section class="sec sec--dark" id="testimonials"> 1223 <div class="W"> 1224 <div class="sec__eyebrow">Video Library</div> 1225 <h2 class="sec__title">Real deployments. <em>Captured on-site.</em></h2> 1226 <p class="sec__intro">A growing library of short clips from live production environments â pick a use case to see exactly what the AI sees.</p> 1227 <div class="cap-videos__grid"> 1228 <div class="cap-video" data-video="campus-attendance"><img src="\${BASE}assets/campus-ai-behavioural.jpg" alt="Campus AI attendance demo" loading="lazy"><span class="cap-video__badge">Campus AI</span><span class="cap-video__dur">1:24</span><div class="cap-video__play"><i class="fas fa-play"></i></div><div class="cap-video__title">Face-based attendance · live classroom</div></div> 1229 <div class="cap-video" data-video="ppe"><img src="\${BASE}assets/hero-iot.jpg" alt="PPE detection demo" loading="lazy"><span class="cap-video__badge">Factory · PPE</span><span class="cap-video__dur">0:48</span><div class="cap-video__play"><i class="fas fa-play"></i></div><div class="cap-video__title">Helmet / vest detection â gate entry</div></div> 1230 <div class="cap-video" data-video="zone"><img src="\${BASE}assets/hero-camera-ai.jpg" alt="Zone breach detection" loading="lazy"><span class="cap-video__badge">Factory · Zones</span><span class="cap-video__dur">0:36</span><div class="cap-video__play"><i class="fas fa-play"></i></div><div class="cap-video__title">Restricted zone breach â forklift path</div></div> 1231 <div class="cap-video" data-video="drowsy"><img src="\${BASE}assets/hero-ai-automation.jpg" alt="Driver drowsiness demo" loading="lazy"><span class="cap-video__badge">Transport</span><span class="cap-video__dur">0:54</span><div class="cap-video__play"><i class="fas fa-play"></i></div><div class="cap-video__title">Driver drowsiness · in-cabin detection</div></div> 1232 <div class="cap-video" data-video="arjun-install"><img src="\${BASE}assets/arjun-edge-device.jpg" alt="Arjun 1.0 install" loading="lazy"><span class="cap-video__badge">Arjun 1.0</span><span class="cap-video__dur">2:10</span><div class="cap-video__play"><i class="fas fa-play"></i></div><div class="cap-video__title">Plug & play install · < 1 hour</div></div> 1233 </div> 1234 <p class="cap-video__caption">More demos uploaded weekly · contact sales for full case-study videos & client references.</p> 1235 </div> 1236</section>\`, 1237 */ 1238 1239 /* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1240 CLIENT FEEDBACK â Premium testimonial grid (replaces video section) 1241 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1242 videos: `<style> 1243.t2-wrap { position: relative; overflow: hidden; } 1244.t2-glow-a, .t2-glow-b { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 0; } 1245.t2-glow-a { width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,98,42,.08), transparent 65%); top: -180px; right: -160px; } 1246.t2-glow-b { width: 460px; height: 460px; background: radial-gradient(circle, rgba(70,140,255,.06), transparent 70%); bottom: -150px; left: -120px; } 1247.t2-inner { position: relative; z-index: 1; } 1248.t2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; } 1249.t2-head__copy { flex: 1; min-width: 280px; } 1250.t2-rating { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } 1251.t2-rating__stars { display: inline-flex; gap: 3px; color: var(--o); font-size: 13px; } 1252.t2-rating__num { font-family: var(--f-h); font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1; } 1253.t2-rating__count { font-family: var(--f-m); font-size: 10px; letter-spacing: .8px; color: rgba(255,255,255,.45); text-transform: uppercase; } 1254 1255.t2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } 1256@media (max-width: 980px) { .t2-grid { grid-template-columns: repeat(2, 1fr); } } 1257@media (max-width: 620px) { .t2-grid { grid-template-columns: 1fr; } } 1258 1259.t2-card { 1260 position: relative; overflow: hidden; 1261 padding: 34px 30px 26px; 1262 border-radius: 20px; 1263 background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%); 1264 border: 1px solid rgba(255,255,255,.07); 1265 display: flex; flex-direction: column; gap: 18px; 1266 transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; 1267 box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -28px rgba(0,0,0,.6); 1268} 1269.t2-card::before { 1270 content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; 1271 background: linear-gradient(90deg, #E8622A 0%, rgba(232,98,42,.4) 55%, transparent 100%); 1272} 1273.t2-card::after {
1274 content: '\\201C'; position: absolute; top: 14px; right: 22px; 1275 font-family: var(--f-s); font-size: 96px; line-height: 1; 1276 color: rgba(232,98,42,.10); pointer-events: none; user-select: none; 1277} 1278.t2-card:hover { 1279 transform: translateY(-4px); 1280 border-color: rgba(232,98,42,.32); 1281 box-shadow: 1282 0 24px 60px -20px rgba(232,98,42,.30), 1283 0 12px 32px -12px rgba(0,0,0,.5), 1284 inset 0 1px 0 rgba(255,255,255,.08); 1285} 1286.t2-card__stars { display: flex; gap: 3px; color: var(--o); font-size: 12px; position: relative; z-index: 1; } 1287.t2-card__quote { 1288 position: relative; z-index: 1; 1289 font-family: var(--f-h); font-weight: 500; 1290 font-size: 14.5px; line-height: 1.65; letter-spacing: -.1px; 1291 color: rgba(255,255,255,.88); 1292 margin: 0; flex: 1; 1293} 1294.t2-card__foot { 1295 position: relative; z-index: 1; 1296 display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; 1297 padding-top: 18px; 1298 border-top: 1px solid rgba(255,255,255,.07); 1299} 1300.t2-card__meta { min-width: 0; } 1301.t2-card__name { 1302 font-family: var(--f-h); font-weight: 700; font-size: 13.5px; 1303 color: #fff; letter-spacing: -.2px; 1304} 1305.t2-card__role { 1306 font-family: var(--f-m); font-size: 9.5px; letter-spacing: 1.2px; 1307 color: rgba(255,255,255,.48); text-transform: uppercase; 1308 margin-top: 4px; 1309} 1310.t2-card__tag { 1311 display: inline-flex; align-items: center; 1312 font-family: var(--f-m); font-size: 9px; letter-spacing: 1.5px; 1313 padding: 5px 11px; border-radius: 100px; 1314 background: rgba(232,98,42,.12); 1315 border: 1px solid rgba(232,98,42,.32); 1316 color: var(--o2); text-transform: uppercase; font-weight: 700; 1317 flex-shrink: 0; white-space: nowrap; 1318} 1319 1320.t2-foot-cta { 1321 margin-top: 36px; padding: 18px 22px; border-radius: 14px; 1322 background: linear-gradient(135deg, rgba(232,98,42,.08), rgba(232,98,42,.02)); 1323 border: 1px solid rgba(232,98,42,.18); 1324 display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; 1325} 1326.t2-foot-cta__txt { font-family: var(--f-m); font-size: 12px; letter-spacing: .4px; color: rgba(255,255,255,.7); } 1327.t2-foot-cta__txt b { color: #fff; font-weight: 700; } 1328.t2-foot-cta__btn { 1329 display: inline-flex; align-items: center; gap: 8px; 1330 padding: 11px 20px; border-radius: 100px; 1331 background: linear-gradient(135deg, var(--o), #FF7A42); 1332 color: #fff; text-decoration: none; 1333 font-family: var(--f-b); font-weight: 600; font-size: 13px; 1334 letter-spacing: .2px; 1335 box-shadow: 0 12px 30px -10px rgba(232,98,42,.55), inset 0 1px 0 rgba(255,255,255,.18); 1336 transition: transform .25s, box-shadow .25s, filter .25s; 1337} 1338.t2-foot-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(232,98,42,.7); filter: brightness(1.06); } 1339.t2-foot-cta__btn i { font-size: 11px; transition: transform .25s; } 1340.t2-foot-cta__btn:hover i { transform: translateX(3px); } 1341</style> 1342 1343<section class="sec sec--dark t2-wrap" id="testimonials"> 1344 <div class="t2-glow-a" aria-hidden="true"></div> 1345 <div class="t2-glow-b" aria-hidden="true"></div> 1346 1347 <div class="W t2-inner"> 1348 1349 <div class="t2-head"> 1350 <div class="t2-head__copy"> 1351 <div class="sec__eyebrow"><span class="ey-dot"></span>Leaders Say</div> 1352 <h2 class="sec__title d1">Built for real environments. <em>Trusted by real teams.</em></h2> 1353 <p class="sec__intro">Engineering and operations leaders across India share what it’s like to ship production AI with us â in their own words.</p> 1354 </div> 1355 <div class="t2-rating"> 1356 <div class="t2-rating__stars" aria-label="5 out of 5 stars"> 1357 <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> 1358 </div> 1359 <div> 1360 <div class="t2-rating__num">5.0</div> 1361 <div class="t2-rating__count">from 6 reviews</div> 1362 </div> 1363 </div> 1364 </div> 1365 1366 <div class="t2-grid"> 1367 1368 <article class="t2-card"> 1369 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1370 <p class="t2-card__quote">EAlphabits brought behavioural intelligence into our educational environment through Camera AI. From attentiveness tracking to live classroom insights, the system delivered reliable performance while remaining simple to manage at scale.</p> 1371 <div class="t2-card__foot"> 1372 <div class="t2-card__meta"> 1373 <div class="t2-card__name">School Principal</div> 1374 <div class="t2-card__role">K-12 Educational Institution</div> 1375 </div>
1376 <span class="t2-card__tag">Camera AI</span> 1377 </div> 1378 </article> 1379 1380 <article class="t2-card"> 1381 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1382 <p class="t2-card__quote">What stood out about EAlphabits was their ability to handle the complete IoT stack â hardware, firmware, and system integration â under one team. Their engineering approach made the entire process faster, cleaner, and far more reliable.</p> 1383 <div class="t2-card__foot"> 1384 <div class="t2-card__meta"> 1385 <div class="t2-card__name">Head of Operations</div> 1386 <div class="t2-card__role">Industrial Manufacturing Firm</div> 1387 </div> 1388 <span class="t2-card__tag">IoT</span> 1389 </div> 1390 </article> 1391 1392 <article class="t2-card"> 1393 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1394 <p class="t2-card__quote">The team integrated AI agents into our enterprise workflows without disrupting existing systems. The fine-tuned LLMs we now use have reduced repetitive processing dramatically and improved decision quality across departments.</p> 1395 <div class="t2-card__foot"> 1396 <div class="t2-card__meta"> 1397 <div class="t2-card__name">VP of Engineering</div> 1398 <div class="t2-card__role">Enterprise Logistics Group</div> 1399 </div> 1400 <span class="t2-card__tag">AI Automation</span> 1401 </div> 1402 </article> 1403 1404 <article class="t2-card"> 1405 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1406 <p class="t2-card__quote">EAlphabits gave us access to intelligent security without the complexity or cost usually associated with AI systems. The setup was simple, alerts were instant, and it worked perfectly with our existing cameras.</p> 1407 <div class="t2-card__foot"> 1408 <div class="t2-card__meta"> 1409 <div class="t2-card__name">Chief Financial Officer</div> 1410 <div class="t2-card__role">EdTech Enterprise Group</div> 1411 </div> 1412 <span class="t2-card__tag">Camera AI</span> 1413 </div> 1414 </article> 1415 1416 <article class="t2-card"> 1417 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1418 <p class="t2-card__quote">EAlphabits helped us automate financial workflows using custom AI models tailored to our operations. The system reduced manual effort, improved processing speed, and integrated smoothly into our existing infrastructure.</p> 1419 <div class="t2-card__foot"> 1420 <div class="t2-card__meta"> 1421 <div class="t2-card__name">Chief Technology Officer</div> 1422 <div class="t2-card__role">Financial Services Firm</div> 1423 </div> 1424 <span class="t2-card__tag">AI Automation</span> 1425 </div> 1426 </article> 1427 1428 <article class="t2-card"> 1429 <div class="t2-card__stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div> 1430 <p class="t2-card__quote">Our medical data processing workflows required both accuracy and strict operational control. EAlphabits developed an AI automation system that streamlined analysis while ensuring the entire pipeline remained secure and manageable internally.</p> 1431 <div class="t2-card__foot"> 1432 <div class="t2-card__meta"> 1433 <div class="t2-card__name">Founder & Director</div> 1434 <div class="t2-card__role">Healthcare Analytics Company</div> 1435 </div> 1436 <span class="t2-card__tag">AI Automation</span> 1437 </div> 1438 </article> 1439 1440 </div> 1441 1442 <div class="t2-foot-cta">
1443 <span class="t2-foot-cta__txt"><b>Want to talk to a reference?</b> We’ll connect you with a current customer in your industry.</span> 1444 <a href="#contact" class="t2-foot-cta__btn">Request a reference <i class="fas fa-arrow-right"></i></a> 1445 </div> 1446 1447 </div> 1448</section>`, 1449 blog: `<!-- BLOG â Cream --> 1450<section class="sec" id="blog" style="background:var(--cream2);color:var(--t-dark)"> 1451 <div class="W"> 1452 <div class="blog-head-row"> 1453 <div> 1454 <div class="eyebrow ey-l rv"><span class="ey-dot"></span>Insights & Ideas</div> 1455 <h2 class="sh sh--dark rv d1" style="letter-spacing:-2.5px">Field notes from production.<br><em>No pitch decks.</em></h2> 1456 </div> 1457 </div> 1458 1459 <!-- 3 Blog Cards --> 1460 <div class="rv" style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px"> 1461 1462 <!-- Card 1: Custom Enterprise LLMs for Business Workflows (latest) --> 1463 <article style="background:var(--paper);border:1px solid var(--b-light2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:all .28s;box-shadow:0 2px 16px rgba(0,0,0,.05)" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 12px 40px rgba(0,0,0,.12)'" onmouseout="this.style.transform='none';this.style.boxShadow='0 2px 16px rgba(0,0,0,.05)'"> 1464 <div style="position:relative;aspect-ratio:16/10;overflow:hidden;flex-shrink:0"> 1465 <img src="${BASE}assets/blog/custom-enterprise-llm-business-workflows-card.jpg" alt="How Custom Enterprise LLMs Automate Business Workflows" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='none'" onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #14141A, #0A0A0A)';"> 1466 <div style="position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 60%);pointer-events:none"></div> 1467 <span style="position:absolute;top:14px;left:14px;padding:5px 12px;background:var(--o);border-radius:100px;font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;color:#fff;text-transform:uppercase;font-weight:600">Enterprise AI · Automation</span> 1468 </div> 1469 <div style="padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;gap:12px"> 1470 <div style="display:flex;align-items:center;gap:10px;font-family:var(--f-m);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t-muted)"> 1471 <span style="color:var(--o);font-weight:600">Sep 22, 2026</span> 1472 <span style="width:1px;height:10px;background:rgba(0,0,0,.15)"></span> 1473 <span>8 min read</span> 1474 </div> 1475 <h3 style="font-family:var(--f-h);font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.5px;color:var(--t-dark);margin:0">How Custom Enterprise LLMs Automate Business Workflows</h3> 1476 <p style="font-size:13px;color:var(--t-muted);line-height:1.7;font-weight:300;margin:0;flex:1">Client records, contracts, invoices and forms are scattered across folders and systems â a Custom Enterprise LLM built around your own data helps employees search, summarize, generate documents and automate repetitive work.</p> 1477 <a href="${BASE}blog/custom-enterprise-llm-business-workflows.html" style="display:inline-flex;align-items:center;gap:8px;font-family:var(--f-b);font-size:13px;font-weight:700;color:var(--o);text-decoration:none;padding-top:4px;border-top:1px solid var(--b-light2);transition:gap .2s" onmouseover="this.style.gap='12px'" onmouseout="this.style.gap='8px'">Read Article <i class="fas fa-arrow-right"></i></a> 1478 </div> 1479 </article> 1480 1481 <!-- Card 2: Custom LLM for Supply Chain & Logistics --> 1482 <article style="background:var(--paper);border:1px solid var(--b-light2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:all .28s;box-shadow:0 2px 16px rgba(0,0,0,.05)" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 12px 40px rgba(0,0,0,.12)'" onmouseout="this.style.transform='none';this.style.boxShadow='0 2px 16px rgba(0,0,0,.05)'"> 1483 <div style="position:relative;aspect-ratio:16/10;overflow:hidden;flex-shrink:0"> 1484 <img src="${BASE}assets/blog/custom-llm-solution-supplychain-card.jpg" alt="How Custom LLM Solutions Are Making Supply Chain and Logistics Smarter and More Efficient" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='none'" onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #14141A, #0A0A0A)';"> 1485 <div style="position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 60%);pointer-events:none"></div>
1486 <span style="position:absolute;top:14px;left:14px;padding:5px 12px;background:var(--o);border-radius:100px;font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;color:#fff;text-transform:uppercase;font-weight:600">Enterprise AI · Supply Chain</span> 1487 </div> 1488 <div style="padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;gap:12px"> 1489 <div style="display:flex;align-items:center;gap:10px;font-family:var(--f-m);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t-muted)"> 1490 <span style="color:var(--o);font-weight:600">Sep 17, 2026</span> 1491 <span style="width:1px;height:10px;background:rgba(0,0,0,.15)"></span> 1492 <span>8 min read</span> 1493 </div> 1494 <h3 style="font-family:var(--f-h);font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.5px;color:var(--t-dark);margin:0">How Custom LLM Solutions Are Making Supply Chain and Logistics Smarter and More Efficient</h3> 1495 <p style="font-size:13px;color:var(--t-muted);line-height:1.7;font-weight:300;margin:0;flex:1">Purchase orders, invoices, shipment records and supplier documents pile up across disconnected systems every day â a Custom LLM built around your own data turns that into something employees can search, summarize and act on.</p> 1496 <a href="${BASE}blog/custom-llm-solution-supplychain.html" style="display:inline-flex;align-items:center;gap:8px;font-family:var(--f-b);font-size:13px;font-weight:700;color:var(--o);text-decoration:none;padding-top:4px;border-top:1px solid var(--b-light2);transition:gap .2s" onmouseover="this.style.gap='12px'" onmouseout="this.style.gap='8px'">Read Article <i class="fas fa-arrow-right"></i></a> 1497 </div> 1498 </article> 1499 1500 <!-- Card 3: Edge AI vs Cloud AI for CCTV Monitoring --> 1501 <article style="background:var(--paper);border:1px solid var(--b-light2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:all .28s;box-shadow:0 2px 16px rgba(0,0,0,.05)" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 12px 40px rgba(0,0,0,.12)'" onmouseout="this.style.transform='none';this.style.boxShadow='0 2px 16px rgba(0,0,0,.05)'"> 1502 <div style="position:relative;aspect-ratio:16/10;overflow:hidden;flex-shrink:0"> 1503 <img src="${BASE}assets/blog/edge-ai-vs-cloud-card.jpg" alt="Edge AI vs Cloud AI for CCTV Monitoring: Which Approach Works Better for Businesses?" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease" onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='none'" onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #14141A, #0A0A0A)';"> 1504 <div style="position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 60%);pointer-events:none"></div> 1505 <span style="position:absolute;top:14px;left:14px;padding:5px 12px;background:var(--o);border-radius:100px;font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;color:#fff;text-transform:uppercase;font-weight:600">Camera AI · Architecture</span> 1506 </div> 1507 <div style="padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;gap:12px"> 1508 <div style="display:flex;align-items:center;gap:10px;font-family:var(--f-m);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t-muted)"> 1509 <span style="color:var(--o);font-weight:600">Sep 9, 2026</span> 1510 <span style="width:1px;height:10px;background:rgba(0,0,0,.15)"></span> 1511 <span>8 min read</span> 1512 </div> 1513 <h3 style="font-family:var(--f-h);font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.5px;color:var(--t-dark);margin:0">Edge AI vs Cloud AI for CCTV Monitoring: Which Approach Works Better for Businesses?</h3> 1514 <p style="font-size:13px;color:var(--t-muted);line-height:1.7;font-weight:300;margin:0;flex:1">Where the video gets processed decides how fast you respond, how much bandwidth you burn and whether footage ever leaves the building â a practical comparison of edge, cloud and hybrid Camera AI.</p> 1515 <a href="${BASE}blog/edge-ai-vs-cloud-ai-cctv-monitoring.html" style="display:inline-flex;align-items:center;gap:8px;font-family:var(--f-b);font-size:13px;font-weight:700;color:var(--o);text-decoration:none;padding-top:4px;border-top:1px solid var(--b-light2);transition:gap .2s" onmouseover="this.style.gap='12px'" onmouseout="this.style.gap='8px'">Read Article <i class="fas fa-arrow-right"></i></a> 1516 </div> 1517 </article> 1518 1519 </div> 1520 1521 </div> 1522</section>`, 1523 certifications: `<!-- âââ CERTIFICATIONS â Official badge cards (matches home page) âââ --> 1524<div style="background:var(--paper);border-top:1px solid var(--b-light2);border-bottom:1px solid var(--b-light2);padding:clamp(40px,5vw,60px) 0"> 1525 <div class="W"> 1526 <div style="text-align:center;margin-bottom:40px"> 1527 <div style="font-family:var(--f-m);font-size:9.5px;letter-spacing:2.5px;color:var(--t-muted);text-transform:uppercase;margin-bottom:8px">Recognitions & Certifications</div> 1528 <h3 style="font-family:var(--f-h);font-weight:800;font-size:clamp(22px,2.8vw,32px);color:var(--t-dark);letter-spacing:-1px;margin:0">Trusted. Certified. Recognised.</h3> 1529 </div> 1530 <div class="cert-grid" style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px"> 1531 1532 <!-- NVIDIA Inception --> 1533 <div class="cert-card" style="background:var(--paper);border:1.5px solid var(--b-light2);border-radius:16px;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:all .28s;cursor:default" onmouseover="this.style.borderColor='rgba(118,185,0,.4)';this.style.boxShadow='0 8px 28px rgba(118,185,0,.12)';this.style.transform='translateY(-5px)'" onmouseout="this.style.borderColor='var(--b-light2)';this.style.boxShadow='none';this.style.transform='none'"> 1534 <svg width="72" height="42" viewBox="0 0 72 42" xmlns="http://www.w3.org/2000/svg" aria-label="NVIDIA Inception"> 1535 <rect width="72" height="42" rx="6" fill="#000"></rect> 1536 <path d="M16 28V14.5c1.8-.3 3.5-.4 5-.4 7.2 0 11.5 4.2 11.5 10.2 0 7.5-5.8 12-13 12V28h-3.5z" fill="#76b900" opacity=".6"></path> 1537 <path d="M16 25.5V17c1.2-.15 2.5-.2 3.8-.2 5.5 0 8.8 3 8.8 7.5 0 5.5-4 8.7-9.5 8.7H16v-7.5z" fill="#76b900"></path> 1538 <text x="44" y="18" font-family="Plus Jakarta Sans,sans-serif" font-size="6" fill="#76b900" font-weight="800" letter-spacing="1.5">NVIDIA</text> 1539 <text x="44" y="28" font-family="Plus Jakarta Sans,sans-serif" font-size="5.5" fill="rgba(255,255,255,.6)" letter-spacing=".8">INCEPTION</text> 1540 </svg> 1541 <div><div style="font-family:var(--f-h);font-weight:800;font-size:13.5px;color:var(--t-dark);letter-spacing:-.2px">NVIDIA</div><div style="font-family:var(--f-m);font-size:9px;color:var(--t-muted);letter-spacing:.4px;margin-top:3px;text-transform:uppercase">Inception</div></div> 1542 </div> 1543 1544 <!-- Startup India DPIIT --> 1545 <div class="cert-card" style="background:var(--paper);border:1.5px solid var(--b-light2);border-radius:16px;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:all .28s;cursor:default" onmouseover="this.style.borderColor='rgba(255,153,0,.4)';this.style.boxShadow='0 8px 28px rgba(255,153,0,.12)';this.style.transform='translateY(-5px)'" onmouseout="this.style.borderColor='var(--b-light2)';this.style.boxShadow='none';this.style.transform='none'"> 1546 <svg width="72" height="42" viewBox="0 0 72 42" xmlns="http://www.w3.org/2000/svg" aria-label="Startup India DPIIT"> 1547 <rect width="72" height="42" rx="6" fill="#fff" stroke="#e5e7eb" stroke-width="1"></rect> 1548 <rect x="6" y="8" width="18" height="6" rx="1" fill="#FF9933"></rect> 1549 <rect x="6" y="14" width="18" height="6" rx="0" fill="#fff" stroke="#e5e7eb" stroke-width=".5"></rect> 1550 <rect x="6" y="20" width="18" height="6" rx="1" fill="#138808"></rect> 1551 <circle cx="15" cy="17" r="3" fill="none" stroke="#000080" stroke-width=".8"></circle> 1552 <circle cx="15" cy="17" r=".6" fill="#000080"></circle> 1553 <text x="30" y="15" font-family="Plus Jakarta Sans,sans-serif" font-size="5.5" fill="#1a1a1a" font-weight="800" letter-spacing=".3">
1553STARTUP</text> 1554 <text x="30" y="22" font-family="Plus Jakarta Sans,sans-serif" font-size="5.5" fill="#1a1a1a" font-weight="800" letter-spacing=".3">INDIA</text> 1555 <text x="30" y="31" font-family="Plus Jakarta Sans,sans-serif" font-size="4" fill="#888" letter-spacing=".5">DPIIT RECOGNISED</text> 1556 </svg> 1557 <div><div style="font-family:var(--f-h);font-weight:800;font-size:13.5px;color:var(--t-dark);letter-spacing:-.2px">Startup India</div><div style="font-family:var(--f-m);font-size:9px;color:var(--t-muted);letter-spacing:.4px;margin-top:3px;text-transform:uppercase">DPIIT</div></div> 1558 </div> 1559 1560 <!-- ISO 27001 --> 1561 <div class="cert-card" style="background:var(--paper);border:1.5px solid var(--b-light2);border-radius:16px;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:all .28s;cursor:default" onmouseover="this.style.borderColor='rgba(59,130,246,.4)';this.style.boxShadow='0 8px 28px rgba(59,130,246,.12)';this.style.transform='translateY(-5px)'" onmouseout="this.style.borderColor='var(--b-light2)';this.style.boxShadow='none';this.style.transform='none'"> 1562 <svg width="88" height="48" viewBox="0 0 88 48" xmlns="http://www.w3.org/2000/svg" aria-label="ISO 27001"> 1563 <rect width="88" height="48" rx="6" fill="#1a365d"></rect> 1564 <text x="44" y="14" text-anchor="middle" font-family="Arial,sans-serif" font-size="8" fill="#fff" font-weight="800" letter-spacing="2">ISO</text> 1565 <line x1="12" y1="18" x2="76" y2="18" stroke="rgba(255,255,255,.2)" stroke-width=".5"></line> 1566 <text x="44" y="33" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#60a5fa" font-weight="800" letter-spacing="0.5">27001</text> 1567 <text x="44" y="43" text-anchor="middle" font-family="Arial,sans-serif" font-size="6" fill="rgba(255,255,255,.5)" letter-spacing="1">2015</text> 1568 </svg> 1569 <div><div style="font-family:var(--f-h);font-weight:800;font-size:13.5px;color:var(--t-dark);letter-spacing:-.2px">ISO 27001</div><div style="font-family:var(--f-m);font-size:9px;color:var(--t-muted);letter-spacing:.4px;margin-top:3px;text-transform:uppercase">Information Security</div></div> 1570 </div> 1571 1572 <!-- ISTQB --> 1573 <div class="cert-card" style="background:var(--paper);border:1.5px solid var(--b-light2);border-radius:16px;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:all .28s;cursor:default" onmouseover="this.style.borderColor='rgba(26,26,110,.4)';this.style.boxShadow='0 8px 28px rgba(26,26,110,.12)';this.style.transform='translateY(-5px)'" onmouseout="this.style.borderColor='var(--b-light2)';this.style.boxShadow='none';this.style.transform='none'"> 1574 <svg width="72" height="42" viewBox="0 0 72 42" xmlns="http://www.w3.org/2000/svg" aria-label="ISTQB Certified"> 1575 <rect width="72" height="42" rx="6" fill="#1a1a6e"></rect> 1576 <text x="36" y="20" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-size="12" fill="#fff" font-weight="800" letter-spacing="2">ISTQB</text> 1577 <line x1="14" y1="25" x2="58" y2="25" stroke="rgba(255,255,255,.2)" stroke-width=".5"></line> 1578 <text x="36" y="34" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-size="4.5" fill="rgba(255,255,255,.5)" letter-spacing="1">CERTIFIED</text> 1579 </svg> 1580 <div><div style="font-family:var(--f-h);font-weight:800;font-size:13.5px;color:var(--t-dark);letter-spacing:-.2px">ISTQB</div><div style="font-family:var(--f-m);font-size:9px;color:var(--t-muted);letter-spacing:.4px;margin-top:3px;text-transform:uppercase">Certified</div></div> 1581 </div> 1582 1583 <!-- DevOps --> 1584 <div class="cert-card" style="background:var(--paper);border:1.5px solid var(--b-light2);border-radius:16px;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:all .28s;cursor:default" onmouseover="this.style.borderColor='rgba(232,98,42,.4)';this.style.boxShadow='0 8px 28px rgba(232,98,42,.12)';this.style.transform='translateY(-5px)'" onmouseout="this.style.borderColor='var(--b-light2)';this.style.boxShadow='none';this.style.transform='none'"> 1585 <svg width="72" height="42" viewBox="0 0 72 42" xmlns="http://www.w3.org/2000/svg" aria-label="DevOps Certified"> 1586 <defs><linearGradient id="dvg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#E8622A"></stop><stop offset="100%" stop-color="#FF7A42"></stop></linearGradient></defs> 1587 <rect width="72" height="42" rx="6" fill="url(#dvg)"></rect> 1588 <path d="M24 21c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm18 0c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path> 1589 <text x="36" y="36" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-size="4.5" fill="rgba(255,255,255,.7)" letter-spacing="1.5">CERTIFIED</text> 1590 </svg> 1591 <div><div style="font-family:var(--f-h);font-weight:800;font-size:13.5px;color:var(--t-dark);letter-spacing:-.2px">DevOps</div><div style="font-family:var(--f-m);font-size:9px;color:var(--t-muted);letter-spacing:.4px;margin-top:3px;text-transform:uppercase">Certified</div></div> 1592 </div> 1593 1594 </div> 1595 </div> 1596</div>`, 1597 contact: `<section id="contact" style="background:var(--ink);padding:clamp(60px,7vw,88px) 0;position:relative;overflow:hidden">
1598 <div style="position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 25% 50%,rgba(232,98,42,.08),transparent 65%);pointer-events:none"></div> 1599 <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:52px 52px;pointer-events:none;mask-image:radial-gradient(ellipse 60% 80% at 25% 50%,black,transparent)"></div> 1600 1601 <div class="W" style="position:relative;z-index:2"> 1602 <div style="display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:start"> 1603 1604 <!-- Founder --> 1605 <div> 1606 <div style="border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);position:relative;box-shadow:0 24px 72px rgba(0,0,0,.6)"> 1607 <img src="${BASE}assets/hardik-kamothi.jpg" width="750" height="1000" decoding="async" loading="lazy" alt="Hardik Kamothi" style="width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;object-position:top"> 1608 <div style="position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 45%,transparent 70%)"></div> 1609 <div style="position:absolute;bottom:0;left:0;right:0;padding:18px"> 1610 <div style="font-family:var(--f-h);font-weight:800;font-size:17px;color:#fff">Hardik Kamothi</div> 1611 <div style="font-family:var(--f-m);font-size:9px;color:var(--o2);letter-spacing:.8px;text-transform:uppercase;margin-top:2px">Founder & CEO</div> 1612 </div> 1613 </div> 1614 <!-- Quick contacts --> 1615 <div style="margin-top:12px;display:flex;flex-direction:column;gap:7px"> 1616 <a href="tel:+919737208790" style="display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--ink3);border:1px solid rgba(255,255,255,.07);border-radius:10px;text-decoration:none;transition:border-color .2s" onmouseover="this.style.borderColor='rgba(232,98,42,.3)'" onmouseout="this.style.borderColor='rgba(255,255,255,.07)'"> 1617 <div style="width:30px;height:30px;border-radius:7px;background:rgba(232,98,42,.12);border:1px solid rgba(232,98,42,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fas fa-phone" style="color:var(--o2);font-size:11px"></i></div> 1618 <div><div style="font-family:var(--f-m);font-size:8.5px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.8px">Call Direct</div><div style="font-size:12.5px;color:#fff;font-weight:600;margin-top:1px">+91 97372 08790</div></div> 1619 </a> 1620 <a href="https://wa.me/919737208790" target="_blank" style="display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--ink3);border:1px solid rgba(255,255,255,.07);border-radius:10px;text-decoration:none;transition:border-color .2s" onmouseover="this.style.borderColor='rgba(74,222,128,.3)'" onmouseout="this.style.borderColor='rgba(255,255,255,.07)'"> 1621 <div style="width:30px;height:30px;border-radius:7px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0"><i class="fab fa-whatsapp" style="color:#4ade80;font-size:13px"></i></div> 1622 <div><div style="font-family:var(--f-m);font-size:8.5px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.8px">WhatsApp</div><div style="font-size:12.5px;color:#fff;font-weight:600;margin-top:1px">Chat Now â</div></div> 1623 </a> 1624 </div> 1625 </div> 1626 1627 <!-- Form --> 1628 <div> 1629 <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"> 1630 <div style="width:24px;height:1px;background:var(--o)"></div> 1631 <span style="font-family:var(--f-m);font-size:9.5px;letter-spacing:2px;color:rgba(232,98,42,.85);text-transform:uppercase">Build With Us</span> 1632 </div> 1633 <h2 style="font-family:var(--f-h);font-size:clamp(30px,3.8vw,48px);font-weight:800;letter-spacing:-2px;line-height:1.06;color:#fff;margin-bottom:8px">Ready to build <span style="font-family:var(--f-s);font-style:italic;font-weight:300;color:var(--o)">innovation?</span></h2> 1634 <p style="font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:24px;font-weight:300;max-width:460px">
1634Tell us your challenge. We reply within 24 hours with a clear plan and honest timelines.</p> 1635 1636 <form id="inquiryForm" action="https://formsubmit.co/[email protected]" method="POST" style="display:flex;flex-direction:column;gap:11px"> 1637 <!-- FormSubmit config --> 1638 <input type="hidden" name="_subject" value="New EAlphabits website inquiry"> 1639 <input type="hidden" name="_template" value="table"> 1640 <input type="hidden" name="_captcha" value="false"> 1641 <input type="hidden" name="_autoresponse" value="Thanks for reaching out to EAlphabits. We received your inquiry and will reply within 24 hours with a clear plan and honest timelines. â Hardik & the EAlphabits team"> 1642 <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off"> 1643 1644 <div style="display:grid;grid-template-columns:1fr 1fr;gap:11px"> 1645 <div><label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Full Name</label><input name="Full Name" type="text" placeholder="Rajesh Patel" required style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:#fff;outline:none" onfocus="this.style.borderColor='rgba(232,98,42,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.09)'"></div> 1646 <div><label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Company</label><input name="Company" type="text" placeholder="Acme Industries" required style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:#fff;outline:none" onfocus="this.style.borderColor='rgba(232,98,42,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.09)'"></div> 1647 </div> 1648 <div style="display:grid;grid-template-columns:1fr 1fr;gap:11px"> 1649 <div><label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Email</label><input name="email" type="email" placeholder="[email protected]" required style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:#fff;outline:none" onfocus="this.style.borderColor='rgba(232,98,42,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.09)'"></div> 1650 <div><label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Phone</label><input name="Phone" type="tel" placeholder="+91 97372 08790" style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:#fff;outline:none" onfocus="this.style.borderColor='rgba(232,98,42,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.09)'"></div> 1651 </div> 1652 <div> 1653 <label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Interested In</label> 1654 <select name="Interested In" required style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:rgba(255,255,255,.7);outline:none;appearance:none;background-image:url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' stroke=\'rgba(255,255,255,0.3)\' stroke-width=\'2\' viewBox=\'0 0 24 24\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:36px" onfocus="this.style.borderColor='rgba(232,98,42,.5)'
1654" onblur="this.style.borderColor='rgba(255,255,255,.09)'"> 1655 <option value="" style="background:#111">Select service or productâ¦</option> 1656 <optgroup label="Services" style="background:#111"><option style="background:#111">Camera AI / Video Analytics</option><option style="background:#111">IoT System Development</option><option style="background:#111">AI Process Automation</option></optgroup> 1657 <optgroup label="Products" style="background:#111"><option style="background:#111">Campus AI</option><option style="background:#111">Workplace AI</option><option style="background:#111">Safety AI</option><option style="background:#111">Arjun 1.0</option><option style="background:#111">Saarthi 1.0</option></optgroup> 1658 <option style="background:#111">Custom / Not Sure Yet</option> 1659 </select> 1660 </div> 1661 <div> 1662 <label style="font-family:var(--f-m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-bottom:4px">Your Project</label> 1663 <textarea name="Project Details" placeholder="Describe your challenge or goalâ¦" rows="3" required style="width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;font-family:var(--f-b);font-size:14px;color:#fff;outline:none;resize:none" onfocus="this.style.borderColor='rgba(232,98,42,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.09)'"></textarea> 1664 </div> 1665 <button type="submit" style="width:100%;padding:15px 24px;background:var(--o);color:#fff;border:none;border-radius:10px;font-family:var(--f-b);font-weight:700;font-size:15px;cursor:pointer;transition:all .28s;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 6px 28px rgba(232,98,42,.3)" onmouseover="this.style.background='#FF7A42';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='var(--o)';this.style.transform='none'"><i class="fas fa-paper-plane"></i> Send â Let's Build Together</button> 1666 </form> 1667 <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:2px"> 1668 <a href="https://calendly.com/" target="_blank" style="padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:rgba(255,255,255,.5);font-family:var(--f-b);font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:all .2s" onmouseover="this.style.borderColor='rgba(232,98,42,.4)';this.style.color='var(--o2)'" onmouseout="this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.5)'"><i class="fas fa-calendar"></i>Schedule</a> 1669 <a href="https://wa.me/919737208790" target="_blank" style="padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:rgba(255,255,255,.5);font-family:var(--f-b);font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:all .2s" onmouseover="this.style.borderColor='rgba(74,222,128,.35)';this.style.color='#4ade80'" onmouseout="this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.5)'"><i class="fab fa-whatsapp"></i>WhatsApp</a> 1670 <a href="#" style="padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:rgba(255,255,255,.5);font-family:var(--f-b);font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:all .2s" onmouseover="this.style.borderColor='rgba(232,98,42,.4)';this.style.color='var(--o2)'" onmouseout="this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.5)'"><i class="fas fa-envelope"></i>Email</a> 1671 </div> 1672 </div> 1673 </div> 1674 1675 </div> 1676 </div> 1677</section>`, 1678 footer: `<!-- FOOTER â Premium MNC layout: newsletter band + 4-col grid + connect strip + giant wordmark + legal --> 1679<footer class="ft" role="contentinfo"> 1680 1681 <!-- Atmospheric layers --> 1682 <div class="ft__line" aria-hidden="true"></div> 1683 <div class="ft__glow ft__glow--orange" aria-hidden="true"></div> 1684 <div class="ft__glow ft__glow--blue" aria-hidden="true"></div> 1685 <div class="ft__grid-bg" aria-hidden="true"></div> 1686 1687 <div class="W ft__inner"> 1688 1689 <!-- ââ Newsletter band ââââââââââââââââââââââââââââââââââââ --> 1690 <div class="ft-news"> 1691 <div class="ft-news__copy">
1692 <span class="ft-news__tag"><span class="ft-news__dot"></span>Field notes, monthly</span> 1693 <h3 class="ft-news__h">Engineering essays in your inbox.</h3> 1694 <p class="ft-news__sub">Production stories from camera AI, IoT and AI automation. No fluff. Unsubscribe anytime.</p> 1695 </div> 1696 <form class="ft-news__form" action="https://formsubmit.co/[email protected]" method="POST" autocomplete="email"> 1697 <input type="hidden" name="_subject" value="New newsletter signup â EAlphabits"> 1698 <input type="hidden" name="_template" value="table"> 1699 <input type="hidden" name="_captcha" value="false"> 1700 <input type="hidden" name="_next" value="${BASE}index.html#newsletter-thanks"> 1701 <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off"> 1702 <label for="ftNewsEmail" class="sr-only">Email address</label> 1703 <div class="ft-news__field"> 1704 <i class="fas fa-envelope" aria-hidden="true"></i> 1705 <input id="ftNewsEmail" type="email" name="email" placeholder="[email protected]" required> 1706 </div> 1707 <button class="ft-news__btn" type="submit">Subscribe <i class="fas fa-arrow-right"></i></button> 1708 </form> 1709 </div> 1710 1711 <!-- ââ Main grid ââââââââââââââââââââââââââââââââââââââââââ --> 1712 <div class="ft-grid"> 1713 1714 <!-- Col 1: Brand --> 1715 <div class="ft-col ft-col--brand"> 1716 <a href="${BASE}index.html" class="ft-brand" aria-label="EAlphabits home"> 1717 <img src="${BASE}assets/logo-ealphabits-2.png" width="1200" height="147" decoding="async" loading="lazy" alt="EAlphabits"> 1718 </a> 1719 <p class="ft-brand__line">Crafted in Ahmedabad. Trusted in production. We engineer real-time computer vision, edge IoT systems and custom LLM agents â the kind that stay shipped, not shelved. Since 2022.</p> 1720 1721 <ul class="ft-contacts"> 1722 <li> 1723 <span class="ft-contact__ico"><i class="fas fa-location-dot"></i></span> 1724 <span class="ft-contact__txt">Ahmedabad, Gujarat <span class="ft-contact__sub">India â 380001</span></span> 1725 </li> 1726 <li> 1727 <span class="ft-contact__ico"><i class="fas fa-envelope"></i></span> 1728 <a class="ft-contact__txt" href="mailto:[email protected]">[email protected]</a> 1729 </li> 1730 <li> 1731 <span class="ft-contact__ico"><i class="fas fa-phone"></i></span> 1732 <a class="ft-contact__txt" href="tel:+919737208790">+91 97372 08790</a> 1733 </li> 1734 </ul> 1735 </div> 1736 1737 <!-- Col 2: Solutions --> 1738 <div class="ft-col"> 1739 <h5 class="ft-h">Solutions</h5> 1740 <ul class="ft-list"> 1741 <li><a href="${BASE}services/camera-ai.html">Camera AI</a></li> 1742 <li><a href="${BASE}services/iot.html">IoT Engineering</a></li> 1743 <li><a href="${BASE}services/ai-automation.html">AI Automation</a></li> 1744 <li><a href="${BASE}index.html#domains">All Services</a></li> 1745 </ul> 1746 </div> 1747 1748 <!-- Col 3: Products --> 1749 <div class="ft-col"> 1750 <h5 class="ft-h">Products</h5> 1751 <ul class="ft-list"> 1752 <li><a href="${BASE}products/campus-ai.html">Campus AI</a></li> 1753 <li><a href="${BASE}products/workplace-ai.html">Workplace AI</a></li> 1754 <li><a href="${BASE}index.html#prod-safety">Safety AI</a></li> 1755 <li><a href="${BASE}index.html#prod-arjun">Arjun 1.0 <span class="ft-pill-soon">Soon</span></a></li> 1756 <li><a href="${BASE}index.html#prod-saarthi">Saarthi 1.0 <span class="ft-pill-soon">Soon</span></a></li> 1757 </ul> 1758 </div> 1759 1760 <!-- Col 4: Company --> 1761 <div class="ft-col"> 1762 <h5 class="ft-h">Company</h5> 1763 <ul class="ft-list"> 1764 <li><a href="${BASE}about.html">About Us</a></li> 1765 <li><a href="${BASE}blog/index.html">Insights & Blog</a></li> 1766 <li><a href="${BASE}index.html#testimonials">Field Deployments</a></li> 1767 <li><a href="${BASE}index.html#contact">Book a Consultation</a></li> 1768 <li><a href="https://wa.me/919737208790" target="_blank" rel="noopener">Chat on WhatsApp</a></li> 1769 </ul> 1770 </div> 1771 1772 </div> 1773 1774 <!-- ââ Connect strip: socials + trust signals âââââââââââââ --> 1775 <div class="ft-strip"> 1776 <div class="ft-strip__left">
1777 <span class="ft-strip__label">Follow EAlphabits</span> 1778 <div class="ft-social" aria-label="Social media links"> 1779 <a class="ft-social-tile" data-net="linkedin" href="https://www.linkedin.com/company/ealphabits/" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a> 1780 <a class="ft-social-tile" data-net="x" href="https://x.com/E_Alphabits" target="_blank" rel="noopener" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a> 1781 <a class="ft-social-tile" data-net="youtube" href="https://www.youtube.com/@e-alphabits" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a> 1782 <a class="ft-social-tile" data-net="instagram" href="https://www.instagram.com/e_alphabits/" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a> 1783 <a class="ft-social-tile" data-net="facebook" href="https://www.facebook.com/profile.php?id=100086004608848" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a> 1784 <a class="ft-social-tile" data-net="whatsapp" href="https://wa.me/919737208790" target="_blank" rel="noopener" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a> 1785 </div> 1786 </div> 1787 <ul class="ft-trust" aria-label="Trust signals"> 1788 <li><i class="fas fa-shield-halved"></i> Privacy-first deployments</li> 1789 <li><i class="fas fa-microchip"></i> Edge-first architecture</li> 1790 <li><i class="fas fa-flag"></i> Engineered in India</li> 1791 </ul> 1792 </div> 1793 1794 <!-- ââ Giant wordmark + back-to-top âââââââââââââââââââââââ --> 1795 <div class="ft-mark"> 1796 <div class="ft-mark__word" aria-hidden="true"> 1797 <span>EAlphabits<em>.</em></span> 1798 </div> 1799 <a href="${BASE}index.html#home" class="ft-up-btn" aria-label="Back to top"> 1800 <i class="fas fa-arrow-up"></i> 1801 </a> 1802 </div> 1803 1804 <!-- ââ Legal bottom âââââââââââââââââââââââââââââââââââââââ --> 1805 <div class="ft-legal"> 1806 <div class="ft-legal__left"> 1807 <span>© <span id="ftYear">2026</span> EAlphabits Technology Pvt. Ltd. â All rights reserved.</span> 1808 </div> 1809 <div class="ft-legal__right"> 1810 <a href="${BASE}index.html#contact">Terms & Conditions</a> 1811 <span class="ft-sep"></span> 1812 <a href="${BASE}index.html#contact">Privacy Policy</a> 1813 <span class="ft-sep"></span> 1814 <a href="${BASE}index.html#contact">Cookies</a> 1815 <span class="ft-sep"></span> 1816 <a href="${BASE}sitemap.xml">Sitemap</a> 1817 </div> 1818 </div> 1819 1820 </div> 1821</footer>`, 1822 }; 1823 1824 // ââ Inject HTML into placeholders âââââââââââââââââââââââââââââââââââââââ 1825 function inject() { 1826 document.querySelectorAll('[data-section]').forEach(function (el) { 1827 var name = el.getAttribute('data-section'); 1828 if (!SECTIONS[name]) { 1829 console.warn('[sections] Unknown section:', name); 1830 return; 1831 } 1832 // Resolve template with BASE 1833 var html = SECTIONS[name].replace(/\$\{BASE\}/g, BASE); 1834 // Replace placeholder element with rendered HTML 1835 var wrap = document.createElement('div'); 1836 wrap.innerHTML = html; 1837 var nodes = Array.prototype.slice.call(wrap.childNodes); 1838 el.replaceWith.apply(el, nodes); 1839 }); 1840 } 1841 1842 // ââ Section initializers ââââââââââââââââââââââââââââââââââââââââââââââââ 1843 function initHeader() { 1844 var nav = document.getElementById('nav'); 1845 if (nav) { 1846 var onScroll = function () { nav.classList.toggle('opaque', scrollY > 20); }; 1847 onScroll(); 1848 window.addEventListener('scroll', onScroll, { passive: true }); 1849 } 1850 // Mobile hamburger 1851 var nhbg = document.getElementById('nhbg'); 1852 var nmob = document.getElementById('nmob'); 1853 if (nhbg && nmob) { 1854 window.cM = function () { nmob.classList.remove('on'); }; 1855 nhbg.addEventListener('click', function () { nmob.classList.toggle('on'); }); 1856 document.addEventListener('click', function (e) { 1857 if (!nmob.contains(e.target) && !nhbg.contains(e.target)) window.cM(); 1858 }); 1859 } 1860 // Mega menu hover-intent (220ms grace) 1861 var items = document.querySelectorAll('.n-item'); 1862 if (items.length) { 1863 var GRACE = 220;
1864 items.forEach(function (item) { 1865 if (!item.querySelector('.n-mega')) return; 1866 var t; 1867 var open = function () { 1868 clearTimeout(t); 1869 items.forEach(function (i) { if (i !== item) i.classList.remove('is-open'); }); 1870 item.classList.add('is-open'); 1871 }; 1872 var close = function () { 1873 clearTimeout(t); 1874 t = setTimeout(function () { item.classList.remove('is-open'); }, GRACE); 1875 }; 1876 item.addEventListener('mouseenter', open); 1877 item.addEventListener('mouseleave', close); 1878 var btn = item.querySelector('.n-btn'); 1879 if (btn) btn.addEventListener('click', function (e) { 1880 if (window.matchMedia('(hover: none)').matches) { 1881 e.preventDefault(); 1882 item.classList.toggle('is-open'); 1883 } 1884 }); 1885 }); 1886 document.addEventListener('click', function (e) { 1887 if (nav && !nav.contains(e.target)) items.forEach(function (i) { i.classList.remove('is-open'); }); 1888 }); 1889 } 1890 } 1891 1892 function initProducts() { 1893 var navItems = document.querySelectorAll('.cap-products__nav-item'); 1894 var panels = document.querySelectorAll('.cap-product-panel'); 1895 var counter = document.getElementById('prodCounter'); 1896 if (!navItems.length || !panels.length || !('IntersectionObserver' in window)) return; 1897 1898 var panelIdToIndex = {}; 1899 panels.forEach(function (p, i) { panelIdToIndex[p.id] = i + 1; }); 1900 1901 var setActive = function (id) { 1902 navItems.forEach(function (item) { 1903 item.classList.toggle('is-active', item.dataset.target === id); 1904 }); 1905 panels.forEach(function (p) { p.classList.toggle('is-active', p.id === id); }); 1906 if (counter) counter.textContent = String(panelIdToIndex[id] || 1).padStart(2, '0'); 1907 }; 1908 1909 var io = new IntersectionObserver(function (entries) { 1910 var visible = entries.filter(function (e) { return e.isIntersecting; }) 1911 .sort(function (a, b) { return a.boundingClientRect.top - b.boundingClientRect.top; }); 1912 if (visible.length) setActive(visible[0].target.id); 1913 }, { rootMargin: '-30% 0px -55% 0px', threshold: 0 }); 1914 1915 panels.forEach(function (p) { io.observe(p); }); 1916 if (panels[0]) panels[0].classList.add('is-active'); 1917 1918 navItems.forEach(function (item) { 1919 item.addEventListener('click', function (e) { 1920 // Items linking to a real product page (href not starting with "#") 1921 // navigate normally; in-page anchors scroll to the panel instead. 1922 var href = item.getAttribute('href') || ''; 1923 if (href && href.charAt(0) !== '#') return; 1924 e.preventDefault(); 1925 var id = item.dataset.target; 1926 var t = document.getElementById(id); 1927 if (t) {
1928 setActive(id); 1929 t.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1930 } 1931 }); 1932 }); 1933 } 1934 1935 function initVideos() { 1936 // Inject the video lightbox (once per page) 1937 if (!document.getElementById('eaVideoLbox')) { 1938 var css = '' 1939 + '.ea-vlbox{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:clamp(20px,4vw,60px);opacity:0;transition:opacity .25s cubic-bezier(.2,.7,.2,1)}' 1940 + '.ea-vlbox.is-open{display:flex;opacity:1}' 1941 + '.ea-vlbox__stage{position:relative;width:100%;max-width:1200px;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 60px 120px rgba(0,0,0,.7);transform:scale(.97);transition:transform .3s cubic-bezier(.2,.7,.2,1)}' 1942 + '.ea-vlbox.is-open .ea-vlbox__stage{transform:scale(1)}' 1943 + '.ea-vlbox__stage video{width:100%;height:100%;object-fit:contain;background:#000;display:block}' 1944 + '.ea-vlbox__cap{position:absolute;left:0;right:0;bottom:-32px;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center}' 1945 + '.ea-vlbox__error{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#0A0A0A;text-align:center;color:rgba(255,255,255,.85)}' 1946 + '.ea-vlbox__error.on{display:flex}' 1947 + '.ea-vlbox__error i{font-size:46px;color:#FF7A42}' 1948 + '.ea-vlbox__error h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:22px;margin:0;color:#fff}' 1949 + '.ea-vlbox__error p{margin:0;max-width:520px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.6}' 1950 + '.ea-vlbox__error code{color:#FFB088;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:4px;font-family:"Space Mono",ui-monospace,monospace;font-size:13px}' 1951 + '.ea-vlbox__close{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:44px;height:44px;border-radius:50%;background:#fff;color:#0A0A0A;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:18px;z-index:3;box-shadow:0 8px 28px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}' 1952 + '.ea-vlbox__close:hover{transform:scale(1.08) rotate(90deg);background:#E8622A;color:#fff}' 1953 + '@media(max-width:600px){.ea-vlbox__close{top:-52px;right:0}}'; 1954 var styleEl = document.createElement('style'); 1955 styleEl.id = 'eaVideoLboxCSS'; 1956 styleEl.textContent = css; 1957 document.head.appendChild(styleEl); 1958 1959 var html = '' 1960 + '<div class="ea-vlbox" id="eaVideoLbox" role="dialog" aria-modal="true" aria-label="Video player">' 1961 + '<button class="ea-vlbox__close" id="eaVideoLboxClose" aria-label="Close video"><i class="fas fa-xmark"></i></button>' 1962 + '<div class="ea-vlbox__stage">' 1963 + '<video id="eaVideoEl" controls playsinline></video>' 1964 + '<div class="ea-vlbox__error" id="eaVideoError">' 1965 + '<i class="fas fa-film"></i>' 1966 + '<h3>Video coming soon</h3>' 1967 + '<p id="eaVideoErrorMsg">Real clip will appear here. Drop the file as <code>assets/videos/<slug>.mp4</code> and the player picks it up automatically.</p>' 1968 + '</div>' 1969 + '<div class="ea-vlbox__cap" id="eaVideoTitle"></div>' 1970 + '</div>' 1971 + '</div>'; 1972 document.body.insertAdjacentHTML('beforeend', html); 1973 1974 var modal = document.getElementById('eaVideoLbox'); 1975 var videoEl = document.getElementById('eaVideoEl'); 1976 var closeBtn = document.getElementById('eaVideoLboxClose'); 1977 var closeIt = function () { 1978 modal.classList.remove('is-open'); 1979 document.body.style.overflow = ''; 1980 videoEl.pause(); 1981 videoEl.removeAttribute('src'); 1982 videoEl.load(); 1983 }; 1984 closeBtn.addEventListener('click', closeIt); 1985 modal.addEventListener('click', function (e) { if (e.target === modal) closeIt(); }); 1986 document.addEventListener('keydown', function (e) { 1987 if (e.key === 'Escape' && modal.classList.contains('is-open')) closeIt(); 1988 }); 1989 } 1990 1991 // Wire each video card 1992 document.querySelectorAll('.cap-video').forEach(function (v) { 1993 if (v.dataset.lboxWired) return; 1994 v.dataset.lboxWired = '1'; 1995 v.addEventListener('click', function () { 1996 var slug = v.dataset.video || 'demo'; 1997 var title = (v.querySelector('.cap-video__title') || {}).textContent || ''; 1998 var poster = (v.querySelector('img') || {}).src || ''; 1999 var src = BASE + 'assets/videos/' + slug + '.mp4'; 2000 2001 var modal = document.getElementById('eaVideoLbox'); 2002 var videoEl = document.getElementById('eaVideoEl'); 2003 var errEl = document.getElementById('eaVideoError'); 2004 var errMsg = document.getElementById('eaVideoErrorMsg'); 2005 var titleEl = document.getElementById('eaVideoTitle'); 2006 2007 titleEl.textContent = title; 2008 errEl.classList.remove('on'); 2009 videoEl.style.display = ''; 2010 if (poster) videoEl.setAttribute('poster', poster); 2011 videoEl.src = src; 2012 errMsg.innerHTML = 'Real clip will appear here. Drop the file as <code>assets/videos/' + slug + '.mp4</code> and the player picks it up automatically.';
2013 2014 // If the file isn't there yet â swap to the friendly "coming soon" overlay 2015 videoEl.onerror = function () { 2016 videoEl.style.display = 'none'; 2017 errEl.classList.add('on'); 2018 }; 2019 videoEl.onloadeddata = function () { 2020 videoEl.style.display = ''; 2021 errEl.classList.remove('on'); 2022 }; 2023 2024 modal.classList.add('is-open'); 2025 document.body.style.overflow = 'hidden'; 2026 videoEl.play().catch(function () { /* autoplay may be blocked â controls still work */ }); 2027 }); 2028 }); 2029 } 2030 2031 function initContact() { 2032 var form = document.getElementById('inquiryForm') || document.querySelector('#contact form'); 2033 if (!form) return; 2034 if (form.dataset.wired) return; 2035 form.dataset.wired = '1'; 2036 2037 // ââ Natural form POST (no AJAX) ââââââââââââââââââââââââââââââââââââââââ 2038 // The form posts directly to its `action` attribute (FormSubmit). This is 2039 // the most reliable approach: works under file://, no CORS, no auth keys, 2040 // no silent failures. FormSubmit handles the one-time activation flow. 2041 // Only thing we add: a "Sendingâ¦" spinner so the user knows it's working 2042 // until the browser navigates away to FormSubmit's confirmation page. 2043 form.addEventListener('submit', function () { 2044 var btn = form.querySelector('button[type=submit]') || form.querySelector('button'); 2045 if (!btn) return; 2046 btn.disabled = true; 2047 btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Sendingâ¦'; 2048 }); 2049 } 2050 2051 function initCardReveal() { 2052 if (!('IntersectionObserver' in window)) return; 2053 if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; 2054 var els = document.querySelectorAll('.cap-product-panel, .cap-video, .bcard'); 2055 var io = new IntersectionObserver(function (entries) { 2056 entries.forEach(function (e) { 2057 if (e.isIntersecting) { 2058 e.target.style.opacity = '1'; 2059 e.target.style.transform = 'none'; 2060 io.unobserve(e.target); 2061 } 2062 }); 2063 }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' }); 2064 els.forEach(function (el) { 2065 el.style.opacity = '0'; 2066 el.style.transform = 'translateY(20px)'; 2067 el.style.transition = 'opacity .6s ease, transform .6s ease'; 2068 io.observe(el); 2069 }); 2070 } 2071 2072 // Reveal any `.rv` elements that were injected by inject() AFTER the page's own 2073 // parse-time IntersectionObserver already ran. Without this, sections injected by 2074 // sections.js (e.g. the universal blog block) keep their CSS `.rv { opacity:0 }` 2075 // forever â the page observer never saw them, so `.in` is never added and the 2076 // whole section renders fully transparent. Adding `.in` is idempotent, so this is 2077 // harmless for elements the page already revealed. 2078 function initRvReveal() { 2079 var els = document.querySelectorAll('.rv:not(.in)'); 2080 if (!els.length) return; 2081 if (!('IntersectionObserver' in window) || 2082 window.matchMedia('(prefers-reduced-motion: reduce)').matches) { 2083 // No observer / reduced motion: just show everything immediately. 2084 els.forEach(function (el) { el.classList.add('in'); }); 2085 return; 2086 } 2087 var io = new IntersectionObserver(function (entries) { 2088 entries.forEach(function (e) { 2089 if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } 2090 }); 2091 }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }); 2092 els.forEach(function (el) { io.observe(el); }); 2093 } 2094 2095 // Make blog teaser cards fully tappable on every page (the inline-styled <article> 2096 // blocks aren't anchors, so only the small "Read Article" link is clickable by default). 2097 function initBlogTeaserClicks() { 2098 document.querySelectorAll('article').forEach(function (el) { 2099 if (el.dataset.blogWired) return; 2100 var link = el.querySelector('a[href*="blog/"]'); 2101 if (!link) return; 2102 el.dataset.blogWired = '1'; 2103 el.style.cursor = 'pointer'; 2104 el.addEventListener('click', function (e) { 2105 // Don't double-navigate when an inner <a> or <button> handled the click 2106 if (e.target.closest('a, button')) return; 2107 window.location.href = link.href; 2108 }); 2109 }); 2110 } 2111 2112 // Re-trigger hash scroll after sections.js has injected the templates. 2113 // Without this, navigating from another page to e.g. /index.html#prod-campus 2114 // fails on the first try: the browser tries to scroll before the products 2115 // section exists, so the target element isn't in the DOM yet. 2116 function scrollToHashAfterInject() { 2117 if (!location.hash || location.hash.length < 2) return; 2118 // Wait for the layout + IntersectionObservers (used by products) to settle 2119 requestAnimationFrame(function () { 2120 setTimeout(function () { 2121 var el = null; 2122 try { el = document.querySelector(location.hash); } catch (e) { return; } 2123 if (!el) return; 2124 el.scrollIntoView({ behavior: 'smooth', block: 'start' }); 2125 // Nudge the products section observer so the matching nav item highlights 2126 if (typeof el.click === 'function' && el.closest && el.closest('.cap-products__panels')) { 2127 var navItem = document.querySelector('.cap-products__nav-item[data-target="' + el.id + '"]'); 2128 if (navItem) navItem.classList.add('is-active'); 2129 } 2130 }, 80); 2131 }); 2132 } 2133 2134 // ââ Premium chat widget (launcher + nudge + overlay panel) ââââââââââââââ 2135 function initChatWidget() { 2136 if (document.getElementById('eaChat')) return; 2137 2138 var WHATSAPP_NUM = '919737208790';
2139 var EMAIL = '[email protected]'; 2140 var PHONE = '+919737208790'; 2141 // To enable Tawk.to live chat: paste 'PROPERTY_ID/WIDGET_ID' below. 2142 // Leave empty to use WhatsApp as the live channel. 2143 var TAWK_ID = ''; 2144 2145 if (TAWK_ID) { 2146 window.Tawk_API = window.Tawk_API || {}; 2147 window.Tawk_LoadStart = new Date(); 2148 var ts = document.createElement('script'); 2149 ts.async = true; 2150 ts.src = 'https://embed.tawk.to/' + TAWK_ID; 2151 ts.charset = 'UTF-8'; 2152 ts.setAttribute('crossorigin', '*'); 2153 ts.onload = function () { 2154 try { window.Tawk_API.hideWidget && window.Tawk_API.hideWidget(); } catch (e) {} 2155 }; 2156 document.head.appendChild(ts); 2157 } 2158 2159 var css = '' 2160 + '.eac{position:fixed;bottom:24px;right:24px;z-index:9999;font-family:var(--f-b,system-ui,-apple-system,Segoe UI,sans-serif);}' 2161 + '.eac-launcher{position:relative;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#E8622A 0%,#FF7A42 100%);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px -8px rgba(232,98,42,.55),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;z-index:2;}' 2162 + '.eac-launcher:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 48px -8px rgba(232,98,42,.7);}' 2163 + '.eac-launcher__ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(232,98,42,.55);animation:eacPulse 2.4s ease-out infinite;pointer-events:none;}' 2164 + '@keyframes eacPulse{0%{transform:scale(.85);opacity:.85;}100%{transform:scale(1.4);opacity:0;}}' 2165 + '.eac-launcher__ico-chat,.eac-launcher__ico-x{position:absolute;width:30px;height:30px;color:#fff;transition:opacity .28s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}' 2166 + '.eac-launcher__ico-x{width:22px;height:22px;opacity:0;transform:rotate(-90deg) scale(.7);}' 2167 + '.eac-launcher.is-open .eac-launcher__ico-chat{opacity:0;transform:rotate(90deg) scale(.7);}' 2168 + '.eac-launcher.is-open .eac-launcher__ico-x{opacity:1;transform:rotate(0) scale(1);}' 2169 + '.eac-spark{transform-box:fill-box;transform-origin:center;animation:eacSparkle 3.4s ease-in-out infinite;}' 2170 + '.eac-spark--sm{animation:eacSparkle 3.4s ease-in-out infinite 1.1s;}' 2171 + '@keyframes eacSparkle{0%,100%{opacity:.95;transform:scale(1);}50%{opacity:.35;transform:scale(.55);}}' 2172 + '.eac-dots circle{animation:eacDot 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}' 2173 + '.eac-dots circle:nth-child(2){animation-delay:.18s;}' 2174 + '.eac-dots circle:nth-child(3){animation-delay:.36s;}' 2175 + '@keyframes eacDot{0%,80%,100%{opacity:.35;transform:translateY(0);}40%{opacity:1;transform:translateY(-1.2px);}}' 2176 /* ââ Premium floating "Live chat" pill above launcher ââ */ 2177 + '.eac-launcher__label{position:absolute;bottom:calc(100% + 16px);right:-6px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(20,20,22,.95) 0%,rgba(10,10,12,.95) 100%);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 36px -10px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;animation:eacLabelBob 3.2s ease-in-out infinite;transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1);font-family:inherit;}' 2178 + '.eac-launcher__label::after{content:"";position:absolute;bottom:-5px;right:24px;width:10px;height:10px;background:linear-gradient(135deg,rgba(20,20,22,.95),rgba(10,10,12,.95));transform:rotate(45deg);border-right:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);}' 2179 + '.eac-launcher__label-pulse{position:relative;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;}' 2180 + '.eac-launcher__label-pulse::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:rgba(37,211,102,.4);animation:eacLabelPulse 1.8s ease-out infinite;}' 2181 + '.eac-launcher__label-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 10px rgba(37,211,102,.8),inset 0 -1px 1px rgba(0,0,0,.15);z-index:1;}' 2182 + '.eac-launcher__label-txt{display:inline-flex;flex-direction:column;line-height:1;gap:2px;}' 2183 + '.eac-launcher__label-txt b{font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.6px;text-transform:uppercase;}' 2184 + '.eac-launcher__label-txt i{font-size:9.5px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.3px;font-style:normal;}' 2185 + '@keyframes eacLabelBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}' 2186 + '@keyframes eacLabelPulse{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(2);opacity:0;}}' 2187 + '.eac-launcher.is-open .eac-launcher__label,.eac-nudge.is-open ~ .eac-launcher .eac-launcher__label{opacity:0;transform:translateY(8px) scale(.92);}' 2188 + '.eac-launcher__badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:#E8622A;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25);border:2px solid #050505;}' 2189 + '.eac-launcher.is-open .eac-launcher__badge{display:none;}' 2190 + '.eac-launcher.is-buzz{animation:eacBuzz 1s cubic-bezier(.36,.07,.19,.97) both;}' 2191 + '@keyframes eacBuzz{10%,90%{transform:translateX(-1px) rotate(-3deg);}20%,80%{transform:translateX(2px) rotate(3deg);}30%,50%,70%{transform:translateX(-3px) rotate(-6deg);}40%,60%{transform:translateX(3px) rotate(6deg);}}' 2192 2193 + '.eac-nudge{position:absolute;bottom:84px;right:0;width:280px;padding:14px 38px 14px 14px;background:#fff;border-radius:16px;box-shadow:0 18px 40px -10px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.12);display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1);cursor:pointer;}' 2194 + '.eac-nudge.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}' 2195 + '.eac-nudge::after{content:"";position:absolute;bottom:-8px;right:22px;width:16px;height:16px;background:#fff;transform:rotate(45deg);}' 2196 + '.eac-nudge__avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#E8622A 0%,#FF7A42 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}' 2197 + '.eac-nudge__txt{font-size:13px;line-height:1.45;
2197color:#1a1a1a;}' 2198 + '.eac-nudge__txt strong{display:block;font-size:13.5px;margin-bottom:2px;color:#050505;font-weight:600;}' 2199 + '.eac-nudge__txt span{color:#555;}' 2200 + '.eac-nudge__close{position:absolute;top:8px;right:10px;width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:#999;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}' 2201 + '.eac-nudge__close:hover{background:rgba(0,0,0,.06);color:#333;}' 2202 2203 + '.eac-panel{position:absolute;bottom:84px;right:0;width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 120px);border-radius:22px;background:#0E0E10;border:1px solid rgba(255,255,255,.08);box-shadow:0 36px 80px -20px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1);z-index:1;}' 2204 + '.eac-panel.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}' 2205 + '.eac-panel__head{position:relative;padding:24px 24px 26px;background:linear-gradient(135deg,#E8622A 0%,#C44A1F 100%);color:#fff;overflow:hidden;flex-shrink:0;}' 2206 + '.eac-panel__head-glow{position:absolute;top:-40%;right:-10%;width:240px;height:240px;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 60%);pointer-events:none;}' 2207 + '.eac-panel__close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.22);color:#fff;border:1px solid rgba(255,255,255,.18);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s;z-index:2;}' 2208 + '.eac-panel__close:hover{background:rgba(0,0,0,.4);transform:rotate(90deg);}' 2209 + '.eac-panel__avatars{display:flex;align-items:center;margin-bottom:14px;position:relative;width:fit-content;}' 2210 + '.eac-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid #E8622A;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;margin-left:-10px;backdrop-filter:blur(4px);}' 2211 + '.eac-av:first-child{margin-left:0;}' 2212 + '.eac-online{position:absolute;left:28px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#25D366;border:2px solid #E8622A;}' 2213 + '.eac-panel__greeting h4{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.2px;font-family:var(--f-h,inherit);}' 2214 + '.eac-panel__greeting p{font-size:13px;line-height:1.5;margin:0;opacity:.92;}' 2215 2216 + '.eac-panel__body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:18px;background:#0E0E10;}' 2217 + '.eac-panel__body::-webkit-scrollbar{width:6px;}' 2218 + '.eac-panel__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}' 2219 + '.eac-card{display:flex;flex-direction:column;gap:10px;}' 2220 + '.eac-card__label{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;}' 2221 + '.eac-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}' 2222 + '.eac-chip{padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);font-size:12.5px;font-weight:500;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;line-height:1.3;font-family:inherit;}' 2223 + '.eac-chip:hover{background:rgba(232,98,42,.12);border-color:rgba(232,98,42,.4);color:#fff;transform:translateY(-1px);}' 2224 2225 + '.eac-channels{display:flex;flex-direction:column;gap:8px;}' 2226 + '.eac-ch{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:background .2s,border-color .2s,transform .2s;}' 2227 + '.eac-ch:hover{transform:translateY(-2px);}' 2228 + '.eac-ch__ico{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}' 2229 + '.eac-ch__txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}' 2230 + '.eac-ch__txt strong{font-size:13.5px;color:#fff;font-weight:600;}' 2231 + '.eac-ch__txt small{font-size:11.5px;color:rgba(255,255,255,.55);}' 2232 + '.eac-ch__arrow{color:rgba(255,255,255,.35);font-size:12px;transition:transform .2s,color .2s;}' 2233 + '.eac-ch:hover .eac-ch__arrow{color:#E8622A;transform:translateX(3px);}' 2234 + '.eac-ch--wa .eac-ch__ico{background:linear-gradient(135deg,#25D366,#20BA5A);}' 2235 + '.eac-ch--wa:hover{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.3);}' 2236 + '.eac-ch--em .eac-ch__ico{background:linear-gradient(135deg,#E8622A,#FF7A42);}' 2237 + '.eac-ch--em:hover{background:rgba(232,98,42,.08);border-color:rgba(232,98,42,.3);}' 2238 + '.eac-ch--ph .eac-ch__ico{background:linear-gradient(135deg,#4F9CE0,#2871C8);}' 2239 + '.eac-ch--ph:hover{background:rgba(79,156,224,.08);border-color:rgba(79,156,224,.3);}' 2240 2241 + '.eac-panel__foot{padding:12px 20px;background:rgba(0,0,0,.45);border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.6);flex-shrink:0;}' 2242 + '.eac-foot__dot{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 8px rgba(37,211,102,.7);animation:eacOnline 2s ease-in-out infinite;}' 2243 + '@keyframes eacOnline{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.85);}}' 2244 2245 + '@media (max-width:520px){.eac{bottom:16px;right:16px;}.eac-launcher{width:56px;height:56px;}.eac-panel{width:calc(100vw - 24px);height:calc(100vh - 96px);max-height:82vh;right:-4px;}.eac-nudge{width:240px;}}' 2246 + '@media (prefers-reduced-motion:reduce){.eac-launcher__ring,.eac-foot__dot,.eac-launcher.is-buzz,.eac-spark,.eac-dots circle,.eac-launcher__label,.eac-launcher__label-pulse::before{animation:none !important;}.eac-launcher,.eac-nudge,.eac-panel,.eac-chip,.eac-ch,.eac-launcher__label{transition:none !important;}}'; 2247 2248 var styleEl = document.createElement('style'); 2249 styleEl.id = 'eaChatStyles'; 2250 styleEl.textContent = css; 2251 document.head.appendChild(styleEl); 2252 2253 var html = '' 2254 + '<div id="eaChat" class="eac">' 2255 + '<div class="eac-nudge" id="eacNudge" role="button" tabindex="0" aria-label="Open chat: Need help?">' 2256 + '<button class="eac-nudge__close" id="eacNudgeClose" aria-label="Dismiss">×</button>' 2257 + '<div class="eac-nudge__avatar"><i class="fas fa-comment-dots"></i></div>' 2258 + '<div class="eac-nudge__txt">' 2259 + '<strong>Hi there <span aria-hidden="true">ð</span></strong>' 2260 + '<span>Have a question about AI for your business? Tap to chat.</span>' 2261 + '</div>' 2262 + '</div>' 2263 2264 + '<div class="eac-panel" id="eacPanel" role="dialog" aria-modal="false" aria-label="Chat with EAlphabits" aria-hidden="true">' 2265 + '<div class="eac-panel__head">' 2266 + '<div class="eac-panel__head-glow"></div>' 2267 + '<button class="eac-panel__close" id="eacClose" aria-label="Close chat"><i class="fas fa-times"></i></button>' 2268 + '<div class="eac-panel__greeting">' 2269 + '<div class="eac-panel__avatars">' 2270 + '<span class="eac-av"><i class="fas fa-user-tie"></i></span>' 2271 + '<span class="eac-av"><i class="fas fa-headset"></i></span>' 2272 + '<span class="eac-online" aria-label="Online"></span>' 2273 + '</div>' 2274 + '<h4>Hi, weâre EAlphabits.</h4>' 2275 + '<p>The team typically replies in minutes â ask us anything about Camera AI, IoT or AI automation.</p>' 2276 + '</div>' 2277 + '</div>' 2278 2279 + '<div class="eac-panel__body">' 2280 + '<div class="eac-card">' 2281 + '<span class="eac-card__label">Quick start</span>' 2282 + '<div class="eac-chips">' 2283 + '<button class="eac-chip" data-msg="Hi! Iâd like to see a live demo of your Camera AI / IoT products.">ðº Get a live demo</button>' 2284 + '<button class="eac-chip" data-msg="Hi! Can you share pricing & ROI examples for your AI solutions?">ð° Pricing & ROI</button>' 2285 + '<button class="eac-chip" data-msg="Hi Hardik! Iâd like to speak directly with the founder.">ð¤ Talk to founder</button>' 2286 + '<button class="eac-chip" data-msg="Hi! I have a custom AI / IoT project I want to discu
2286ss.">ð Custom AI build</button>' 2287 + '</div>' 2288 + '</div>' 2289 2290 + '<div class="eac-card">' 2291 + '<span class="eac-card__label">Reach us directly</span>' 2292 + '<div class="eac-channels">' 2293 + '<a class="eac-ch eac-ch--wa" href="https://wa.me/' + WHATSAPP_NUM + '?text=' + encodeURIComponent('Hi EAlphabits ð â I have a question.') + '" target="_blank" rel="noopener">' 2294 + '<span class="eac-ch__ico"><i class="fab fa-whatsapp"></i></span>' 2295 + '<span class="eac-ch__txt"><strong>WhatsApp</strong><small>Fastest · Replies in minutes</small></span>' 2296 + '<i class="fas fa-arrow-right eac-ch__arrow"></i>' 2297 + '</a>' 2298 + '<a class="eac-ch eac-ch--em" href="mailto:' + EMAIL + '?subject=' + encodeURIComponent('Enquiry via ealphabits.com') + '">' 2299 + '<span class="eac-ch__ico"><i class="fas fa-envelope"></i></span>' 2300 + '<span class="eac-ch__txt"><strong>Email</strong><small>' + EMAIL + '</small></span>' 2301 + '<i class="fas fa-arrow-right eac-ch__arrow"></i>' 2302 + '</a>' 2303 + '<a class="eac-ch eac-ch--ph" href="tel:' + PHONE + '">' 2304 + '<span class="eac-ch__ico"><i class="fas fa-phone"></i></span>' 2305 + '<span class="eac-ch__txt"><strong>Call us</strong><small>+91 97372 08790 · MonâSat</small></span>' 2306 + '<i class="fas fa-arrow-right eac-ch__arrow"></i>' 2307 + '</a>' 2308 + '</div>' 2309 + '</div>' 2310 + '</div>' 2311 2312 + '<div class="eac-panel__foot">' 2313 + '<span class="eac-foot__dot" aria-hidden="true"></span>' 2314 + '<span>Weâre online â letâs build something brilliant.</span>' 2315 + '</div>' 2316 + '</div>' 2317 2318 + '<button class="eac-launcher" id="eacLauncher" aria-label="Open chat" aria-expanded="false">' 2319 + '<span class="eac-launcher__ring" aria-hidden="true"></span>' 2320 + '<span class="eac-launcher__label" aria-hidden="true">' 2321 + '<span class="eac-launcher__label-pulse"><span class="eac-launcher__label-dot"></span></span>' 2322 + '<span class="eac-launcher__label-txt"><b>Live chat</b><i>Weâre online · Reply in mins</i></span>' 2323 + '</span>' 2324 + '<svg class="eac-launcher__ico-chat" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' 2325 + '<path class="eac-spark" d="M22.6 2.2l.62 2.16 2.16.62-2.16.62-.62 2.16-.62-2.16-2.16-.62 2.16-.62L22.6 2.2z" fill="currentColor"/>' 2326 + '<path class="eac-spark eac-spark--sm" d="M25.6 8.4l.34 1.18 1.18.34-1.18.34-.34 1.18-.34-1.18-1.18-.34 1.18-.34.34-1.18z" fill="currentColor" opacity=".75"/>' 2327 + '<path d="M5 9.6C5 7.61 6.61 6 8.6 6h10.3C20.89 6 22.5 7.61 22.5 9.6v6.2c0 1.99-1.61 3.6-3.6 3.6h-5.7l-4.05 3.24a.65.65 0 01-1.05-.51V19.4H8.6C6.61 19.4 5 17.79 5 15.8V9.6z" fill="currentColor"/>' 2328 + '<g class="eac-dots" fill="#E8622A">' 2329 + '<circle cx="10" cy="12.6" r="1.1"/>' 2330 + '<circle cx="13.75" cy="12.6" r="1.1"/>' 2331 + '<circle cx="17.5" cy="12.6" r="1.1"/>' 2332 + '</g>' 2333 + '</svg>' 2334 + '<svg class="eac-launcher__ico-x" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' 2335 + '<path d="M6.5 6.5l11 11M17.5 6.5l-11 11" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>' 2336 + '</svg>' 2337 + '<span class="eac-launcher__badge" id="eacBadge" aria-hidden="true">1</span>' 2338 + '</button>' 2339 + '</div>'; 2340 2341 var holder = document.createElement('div'); 2342 holder.innerHTML = html; 2343 document.body.appendChild(holder.firstElementChild); 2344 2345 var launcher = document.getElementById('eacLauncher'); 2346 var panel = document.getElementById('eacPanel'); 2347 var nudge = document.getElementById('eacNudge'); 2348 var closeBtn = document.getElementById('eacClose'); 2349 var nudgeX = document.getElementById('eacNudgeClose'); 2350 var badge = document.getElementById('eacBadge'); 2351 var open = false;
2352 2353 function lsGet(k) { try { return localStorage.getItem(k); } catch (e) { return null; } } 2354 function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (e) {} } 2355 2356 function setOpen(state) { 2357 open = state; 2358 launcher.classList.toggle('is-open', open); 2359 launcher.setAttribute('aria-expanded', open ? 'true' : 'false'); 2360 panel.classList.toggle('is-open', open); 2361 panel.setAttribute('aria-hidden', open ? 'false' : 'true'); 2362 if (open) { 2363 hideNudge(true); 2364 if (badge) badge.style.display = 'none'; 2365 lsSet('eac_opened', '1'); 2366 } 2367 } 2368 function hideNudge(persist) { 2369 nudge.classList.remove('is-open'); 2370 if (persist) lsSet('eac_nudge_dismissed', '1'); 2371 } 2372 2373 launcher.addEventListener('click', function () { setOpen(!open); }); 2374 closeBtn.addEventListener('click', function () { setOpen(false); }); 2375 nudgeX.addEventListener('click', function (e) { e.stopPropagation(); hideNudge(true); }); 2376 nudge.addEventListener('click', function () { setOpen(true); }); 2377 nudge.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(true); } }); 2378 document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && open) setOpen(false); }); 2379 2380 var chips = document.querySelectorAll('.eac-chip'); 2381 chips.forEach(function (c) { 2382 c.addEventListener('click', function () { 2383 var msg = c.getAttribute('data-msg') || 'Hi EAlphabits'; 2384 if (window.Tawk_API && typeof window.Tawk_API.maximize === 'function') { 2385 try { 2386 window.Tawk_API.maximize(); 2387 if (typeof window.Tawk_API.sendMessage === 'function') { 2388 setTimeout(function () { try { window.Tawk_API.sendMessage(msg); } catch (e) {} }, 600); 2389 } 2390 return; 2391 } catch (e) {} 2392 } 2393 var url = 'https://wa.me/' + WHATSAPP_NUM + '?text=' + encodeURIComponent(msg + ' (via ealphabits.com)'); 2394 window.open(url, '_blank', 'noopener'); 2395 }); 2396 }); 2397 2398 // Auto-show nudge once per visit (6s after load, auto-hide after 14s) 2399 if (lsGet('eac_nudge_dismissed') !== '1') { 2400 setTimeout(function () { 2401 if (!open) { 2402 nudge.classList.add('is-open'); 2403 setTimeout(function () { if (!open) hideNudge(false); }, 14000); 2404 } 2405 }, 6000); 2406 } 2407 2408 // Periodic buzz to draw attention until the user opens the panel 2409 if (lsGet('eac_opened') !== '1') { 2410 setInterval(function () { 2411 if (!open) { 2412 launcher.classList.add('is-buzz'); 2413 setTimeout(function () { launcher.classList.remove('is-buzz'); }, 1100); 2414 } 2415 }, 18000); 2416 } else if (badge) { 2417 badge.style.display = 'none'; 2418 } 2419 } 2420 2421 // ââ Google Analytics (GA4) â runs on every page that loads this script ââ 2422 // Single source of truth. Edit GA_ID here once; do not re-paste into individual page heads. 2423 var GA_ID = 'G-LXNP33G35V'; 2424 function initGoogleAnalytics() { 2425 if (window._eaGaInjected) return; 2426 window._eaGaInjected = true; 2427 2428 window.dataLayer = window.dataLayer || []; 2429 window.gtag = window.gtag || function () { window.dataLayer.push(arguments); }; 2430 window.gtag('js', new Date()); 2431 window.gtag('config', GA_ID); 2432 2433 var s = document.createElement('script'); 2434 s.async = true; 2435 s.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_ID; 2436 (document.head || document.documentElement).appendChild(s); 2437 } 2438 2439 // ââ Boot ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 2440 function boot() { 2441 initGoogleAnalytics(); 2442 injectStyles(); 2443 inject(); 2444 initHeader(); 2445 initProducts(); 2446 initVideos(); 2447 initContact(); 2448 initCardReveal(); 2449 initRvReveal(); 2450 initBlogTeaserClicks(); 2451 scrollToHashAfterInject(); 2452 initChatWidget(); 2453 // Year stamps (footer + any element using id="year") 2454 var yearIds = ['year', 'ftYear']; 2455 yearIds.forEach(function (id) { 2456 var el = document.getElementById(id); 2457 if (el) el.textContent = new Date().getFullYear(); 2458 }); 2459 } 2460 2461 if (document.readyState === 'loading') { 2462 document.addEventListener('DOMContentLoaded', boot); 2463 } else {
2464 boot(); 2465 } 2466})();
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.