PageSourceSearch

https://neeharaa.com/zoho-bigin.html

html neeharaa.com collected 2026-09-30 04:24:45 UTC 56,895 bytes, 1,359 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Zoho Bigin CRM | Neehara Premium IT Solutions</title>
7<link rel="preconnect" href="https://fonts.googleapis.com">
8<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
9<!-- EmailJS SDK -->
10<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
10
11<style>
12  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
13
14  :root {
15    --navy:    #0B1C3F;
16    --navy2:   #112656;
17    --blue:    #1462D4;
18    --blue2:   #2176FF;
19    --orange:  #FF6B1A;
20    --orange2: #FF8C42;
21    --white:   #FFFFFF;
22    --offwhite:#F4F7FF;
23    --gray:    #8A9BBF;
24    --light:   #E8EEFF;
25    --card-bg: rgba(255,255,255,0.04);
26    --border:  rgba(255,255,255,0.08);
27  }
28
29  html { scroll-behavior: smooth; }
30
31  body {
32    font-family: 'DM Sans', sans-serif;
33    background: var(--navy);
34    color: var(--white);
35    overflow-x: hidden;
36  }
37
38  /* ── HEADER ── */
39  header {
40    position: sticky; top: 0; z-index: 100;
41    background: rgba(11,28,63,0.9);
42    backdrop-filter: blur(16px);
43    border-bottom: 1px solid var(--border);
44    padding: 0 5%;
45    display: flex; align-items: center; justify-content: space-between;
46    height: 68px;
47  }
48  .logo-wrap { display: flex; align-items: center; gap: 12px; }
49  .logo-mark {
50    width: 40px; height: 40px;
51    background: linear-gradient(135deg, var(--blue), var(--orange));
52    border-radius: 10px;
53    display: flex; align-items: center; justify-content: center;
54    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px;
55    letter-spacing: -1px; color: #fff;
56  }
57  .logo-text { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2; }
58  .logo-text span { display: block; font-weight: 400; font-size: 11px; color: var(--gray); letter-spacing: 0.05em; }
59  nav { display: flex; align-items: center; gap: 28px; }
60  nav a { font-size: 14px; color: var(--gray); text-decoration: none; transition: color .2s; }
61  nav a:hover { color: #fff; }
62  .btn-nav {
63    background: var(--orange); color: #fff; border: none;
64    padding: 9px 22px; border-radius: 8px; font-size: 14px; font-weight: 600;
65    cursor: pointer; transition: background .2s, transform .15s;
66    font-family: inherit; text-decoration: none;
67  }
68  .btn-nav:hover { background: var(--orange2); transform: translateY(-1px); }
69
70  /* ── HERO ── */
71  .hero {
72    min-height: 92vh;
73    display: grid; grid-template-columns: 1fr 1fr;
74    align-items: center; gap: 60px;
75    padding: 80px 5% 80px;
76    position: relative; overflow: hidden;
77  }
78  .hero::before {
79    content: '';
80    position: absolute; inset: 0;
81    background:
82      radial-gradient(ellipse 60% 70% at 70% 40%, rgba(20,98,212,0.18) 0%, transparent 70%),
83      radial-gradient(ellipse 40% 50% at 20% 80%, rgba(255,107,26,0.10) 0%, transparent 60%);
84    pointer-events: none;
85  }
86  .hero-eyebrow {
87    display: inline-flex; align-items: center; gap: 8px;
88    background: rgba(255,107,26,0.12); border: 1px solid rgba(255,107,26,0.3);
89    color: var(--orange2); padding: 5px 14px; border-radius: 100px;
90    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
91    margin-bottom: 22px;
92  }
93  .hero-eyebrow::before { content: '●'; font-size: 8px; animation: pulse 2s infinite; }
94  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
95  .hero h1 {
96    font-family: 'arial', sans-serif; font-weight: 800;
97    font-size: clamp(36px, 4.5vw, 58px); line-height: 1.08;
98    letter-spacing: -0.03em; margin-bottom: 24px;
99  }
100  .hero h1 em { font-style: normal; color: var(--orange); }
101  .hero h1 strong { font-style: normal; color: var(--blue2); }
102  .hero-sub {
103    font-size: 17px; line-height: 1.65; color: #B0C0E0; max-width: 480px;
104    margin-bottom: 36px;
105  }
106  .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
107  .btn-primary {
108    background: linear-gradient(135deg, var(--orange), var(--orange2));
109    color: #fff; border: none;
110    padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600;
111    cursor: pointer; text-decoration: none;
112    box-shadow: 0 8px 28px rgba(255,107,26,0.35);
113    transition: transform .2s, box-shadow .2s; font-family: inherit;
114    display: inline-flex; align-items: center; gap: 8px;
115  }
116  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,107,26,0.45); }
117  .btn-secondary {
118    background: transparent; color: #fff;
119    border: 1px solid rgba(255,255,255,0.2);
120    padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 500;
121    cursor: pointer; text-decoration: none; font-family: inherit;
122    display: inline-flex; align-items: center; gap: 8px;
123    transition: border-color .2s, background .2s;
124  }
125  .btn-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
126  .hero-stats {
127    display: flex; gap: 32px; margin-top: 48px; padding-top: 40px;
128    border-top: 1px solid var(--border);
129  }
130  .stat { }
131  .stat-num {
132    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28px;
133    color: var(--white); line-height: 1;
134  }
135  .stat-num span { color: var(--orange); }
136  .stat-label { font-size: 12px; color: var(--gray); margin-top: 4px; letter-spacing: 0.04em; }
137
138  /* hero right: CRM mockup */
139  .hero-visual {
140    position: relative; display: flex; justify-content: center; align-items: center;
141  }
142  .crm-card {
143    background: rgba(255,255,255,0.05);
144    border: 1px solid var(--border);
145    border-radius: 20px;
146    padding: 24px;
147    width: 100%; max-width: 480px;
148    backdrop-filter: blur(12px);
149    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
150    animation: floatUp 3s ease-in-out infinite alternate;
151  }
152  @keyframes floatUp { from{transform:translateY(0)} to{transform:translateY(-10px)} }
153  .crm-header {
154    display: flex; align-items: center; justify-content: space-between;
155    margin-bottom: 20px;
156  }
157  .crm-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; }
158  .crm-badge {
159    background: rgba(20,98,212,0.2); border: 1px solid rgba(20,98,212,0.4);
160    color: #7BB3FF; font-size: 11px; padding: 3px 10px; border-radius: 100px;
161  }
162  .pipeline {
163    display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px;
164  }
165  .pipe-col {
166    flex: 0 0 110px;
167    background: rgba(255,255,255,0.03);
168    border: 1px solid var(--border);
169    border-radius: 12px; padding: 12px;
170  }
171  .pipe-col-head {
172    font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
173    color: var(--gray); margin-bottom: 10px;
174  }
175  .deal-card {
176    background: rgba(255,255,255,0.06);
177    border-radius: 8px; padding: 9px 10px; margin-bottom: 7px;
178    font-size: 11px;
179  }
180  .deal-name { font-weight: 600; margin-bottom: 3px; }
181  .deal-val { color: var(--orange2); font-size: 10px; }
182  .deal-card.blue { border-left: 3px solid var(--blue2); }
183  .deal-card.orange { border-left: 3px solid var(--orange); }
184  .deal-card.green { border-left: 3px solid #30D996; }
185  .crm-footer {
186    display: flex; align-items: center; justify-content: space-between;
187    padding-top: 16px; border-top: 1px solid var(--border);
188  }
189  .crm-metric { text-align: center; }
190  .crm-metric .val { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; color:#fff; }
191  .crm-metric .lbl { font-size:10px; color:var(--gray); margin-top:2px; }
192  .badge-float {
193    position: absolute; right: -20px; top: 60px;
194    background: var(--orange);
195    padding: 10px 14px; border-radius: 12px;
196    font-size: 12px; font-weight: 700;
197    box-shadow: 0 8px 24px rgba(255,107,26,0.4);
198    line-height: 1.3;
199  }
200  .badge-float2 {
201    position: absolute; left: -20px; bottom: 80px;
202    background: var(--navy2);
203    border: 1px solid var(--border);
204    padding: 10px 14px; border-radius: 12px;
205    font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
206    display: flex; align-items: center; gap: 8px;
207  }
208  .avatar-row { display: flex; }
209  .avatar-row .av {
210    width: 24px; height: 24px; border-radius: 50%;
211    margin-right: -8px; border: 2px solid var(--navy2);
212    font-size: 10px; font-weight: 700;
213    display: flex; align-items: center; justify-content: center;
214  }
215  .av1{background:#FF6B1A;} .av2{background:#1462D4;} .av3{background:#30D996;}
216
217  /* ── TRUST BAR ── */
218  .trust-bar {
219    background: var(--navy2);
220    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
221    padding: 20px 5%;
222    display: flex; align-items: center; justify-content: center; gap: 60px;
223    flex-wrap: wrap;
224  }
225  .trust-item {
226    display: flex; align-items: center; gap: 10px;
227    font-size: 13px; color: var(--gray); white-space: nowrap;
228  }
229  .trust-icon { font-size: 18px; }
230
231  /* ── SECTION BASE ── */
232  section { padding: 90px 5%; }
233  .section-eyebrow {
234    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
235    color: var(--orange); margin-bottom: 14px;
236  }
237  .section-title {
238    font-family: 'Arial', sans-serif; font-weight: 800;
239    font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
240    margin-bottom: 18px;
241  }
242  .section-sub {
243    font-size: 16px; color: #8A9BBF; line-height: 1.7; max-width: 560px;
244  }
245  .section-head { margin-bottom: 56px; }
246
247  /* ── WHY BIGIN ── */
248  .why-grid {
249    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
250  }
251  .why-card {
252    background: var(--card-bg);
253    border: 1px solid var(--border);
254    border-radius: 18px; padding: 28px;
255    transition: transform .25s, border-color .25s, box-shadow .25s;
256    position: relative; overflow: hidden;
257  }
258  .why-card::after {
259    content: '';
260    position: absolute; top: 0; left: 0; right: 0; height: 3px;
261    background: linear-gradient(90deg, var(--blue), var(--orange));
262    transform: scaleX(0); transform-origin: left; transition: transform .3s;
263    border-radius: 18px 18px 0 0;
264  }
265  .why-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.16); box-shadow: 0 20px 48px rgba(0,0,0,0.3); }
266  .why-card:hover::after { transform: scaleX(1); }
267  .why-icon {
268    width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
269    display: flex; align-items: center; justify-content: center; font-size: 22px;
270  }
271  .icon-blue { background: rgba(20,98,212,0.15); }
272  .icon-orange { background: rgba(255,107,26,0.15); }
273  .icon-green { background: rgba(48,217,150,0.15); }
274  .why-card h3 { font-family:'Arial',sans-serif; font-weight:700; font-size:17px; margin-bottom:10px; }
275  .why-card p { font-size:14px; color:#8A9BBF; line-height:1.65; }
276
277  /* ── FEATURES ── */
278  .features-layout {
279    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
280  }
281  .feature-list { display: flex; flex-direction: column; gap: 6px; }
282  .feature-item {
283    display: flex; align-items: flex-start; gap: 16px;
284    padding: 18px 20px; border-radius: 14px; cursor: pointer;
285    transition: background .2s; border: 1px solid transparent;
286  }
287  .feature-item.active {
288    background: rgba(255,255,255,0.05); border-color: var(--border);
289  }
290  .feature-item:hover:not(.active) { background: rgba(255,255,255,0.03); }
291  .fi-icon {
292    width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
293    display: flex; align-items: center; justify-content: center; font-size: 18px;
294    background: rgba(20,98,212,0.15);
295    transition: background .2s;
296  }
297  .feature-item.active .fi-icon { background: var(--orange); }
298  .fi-text h4 { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
299  .fi-text p { font-size: 13px; color: var(--gray); line-height: 1.55; }
300
301  .feature-preview {
302    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
303    border-radius: 20px; padding: 30px;
304    min-height: 360px; display: flex; flex-direction: column;
305  }
306  .fp-title { font-family:'Syne',sans-serif; font-weight:700; font-size:15px; margin-bottom:20px; color:var(--gray); }
307  .fp-chart { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
308  .bar-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
309  .bar-label { width: 60px; text-align: right; color: var(--gray); font-size: 11px; }
310  .bar-track { flex: 1; background: rgba(255,255,255,0.06); border-radius: 100px; height: 28px; overflow: hidden; }
311  .bar-fill { height: 100%; border-radius: 100px; display: flex; align-items: center; padding-left: 12px; font-size: 11px; font-weight: 600; }
312  .bar-blue { background: linear-gradient(90deg, var(--blue), var(--blue2)); }
313  .bar-orange { background: linear-gradient(90deg, var(--orange), var(--orange2)); }
314  .bar-green { background: linear-gradient(90deg, #1DB87A, #30D996); }
315  .bar-purple { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
316
317  /* ── PRICING ── */
318  .pricing-bg { background: var(--navy2); }
319  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
320  .pricing-card {
321    border: 1px solid var(--border); border-radius: 22px; padding: 32px;
322    position: relative; transition: transform .25s, box-shadow .25s;
323  }
324  .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0,0,0,0.35); }
325  .pricing-card.featured {
326    border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 24px 56px rgba(255,107,26,0.2);
327    background: rgba(255,107,26,0.05);
328  }
329  .featured-badge {
330    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
331    background: var(--orange); color: #fff;
332    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
333    padding: 4px 16px; border-radius: 100px;
334    white-space: nowrap;
335  }
336  .plan-name { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; margin-bottom:6px; }
337  .plan-tagline { font-size:13px; color:var(--gray); margin-bottom:24px; }
338  .plan-price { font-family:'Syne',sans-serif; font-weight:800; font-size:40px; line-height:1; }
339  .plan-price sub { font-size:14px; font-weight:400; color:var(--gray); }
340  .plan-price span { font-size:16px; font-weight:400; color:var(--gray); }
341  .plan-period { font-size:12px; color:var(--gray); margin-bottom:28px; margin-top:4px; }
342  .plan-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 24px; }
343  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
344  .plan-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
345  .plan-features li::before { content: '✓'; color: var(--orange); font-weight: 700; font-size: 14px; }
346  .btn-plan {
347    width: 100%; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600;
348    cursor: pointer; font-family: inherit; transition: all .2s; text-align: center;
349    text-decoration: none; display: block;
350  }
351  .btn-plan-outline {
352    background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff;
353  }
354  .btn-plan-outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
355  .btn-plan-filled { background: var(--orange); border: none; color: #fff;
356    box-shadow: 0 8px 20px rgba(255,107,26,0.35); }
357  .btn-plan-filled:hover { background: var(--orange2); box-shadow: 0 12px 28px rgba(255,107,26,0.45); transform: translateY(-2px); }
358
359  /* ── PROCESS ── */
360  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
361  .steps::before {
362    content: '';
363    position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 2px;
364    background: linear-gradient(90deg, var(--blue), var(--orange));
365    z-index: 0;
366  }
367  .step { text-align: center; position: relative; z-index: 1; }
368  .step-num {
369    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
370    background: var(--navy2); border: 2px solid var(--blue);
371    font-family:'Syne',sans-serif; font-weight:800; font-size:20px;
372    display: flex; align-items: center; justify-content: center; color: var(--blue2);
373  }
374  .step:nth-child(2) .step-num { border-color: #5599FF; color: #5599FF; }
375  .step:nth-child(3) .step-num { border-color: var(--orange); color: var(--orange); }
376  .step:nth-child(4) .step-num { border-color: #30D996; color: #30D996; }
377  .step h4 { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; }
378  .step p { font-size:13px; color:var(--gray); line-height:1.6; }
379
380  /* ── TESTIMONIALS ── */
381  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
382  .testi-card {
383    background: var(--card-bg); border: 1px solid var(--border);
384    border-radius: 18px; padding: 28px;
385    transition: transform .25s, border-color .25s;
386  }
387  .
387testi-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); }
388  .stars { color: #FFB800; font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; }
389  .testi-text { font-size: 14px; line-height: 1.7; color: #B0C0E0; margin-bottom: 20px; font-style: italic; }
390  .testi-author { display: flex; align-items: center; gap: 12px; }
391  .testi-av {
392    width: 40px; height: 40px; border-radius: 50%;
393    font-size: 14px; font-weight: 700;
394    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
395  }
396  .testi-name { font-weight: 600; font-size: 14px; }
397  .testi-role { font-size: 12px; color: var(--gray); }
398
399  /* ── CONTACT FORM ── */
400  .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
401  .contact-left h2 { font-family:'Arial',sans-serif; font-weight:800; font-size:clamp(28px,3vw,42px); margin-bottom:18px; letter-spacing:-0.02em; }
402  .contact-left p { font-size:15px; color:var(--gray); line-height:1.7; margin-bottom:32px; }
403  .contact-info { display: flex; flex-direction: column; gap: 16px; }
404  .ci-item { display: flex; align-items: center; gap: 14px; font-size: 14px; }
405  .ci-icon {
406    width: 42px; height: 42px; border-radius: 10px;
407    background: rgba(20,98,212,0.15);
408    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
409  }
410  .ci-lbl { font-size: 11px; color: var(--gray); margin-bottom: 2px; }
411  .ci-val { font-weight: 500; color: #fff; }
412  .form-card {
413    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
414    border-radius: 22px; padding: 36px;
415  }
416  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
417  .form-group { margin-bottom: 18px; }
418  .form-group label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 8px; text-transform: uppercase; }
419  .form-group input, .form-group select, .form-group textarea {
420    width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--border);
421    border-radius: 10px; padding: 12px 16px; color: #fff; font-size: 14px; font-family: inherit;
422    transition: border-color .2s, background .2s; outline: none;
423  }
424  .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
425  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
426    border-color: var(--blue2); background: rgba(255,255,255,0.08);
427  }
428  .form-group select option { background: var(--navy2); }
429  .form-group textarea { resize: vertical; min-height: 100px; }
430  .btn-submit {
431    width: 100%; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: 700;
432    background: linear-gradient(135deg, var(--orange), var(--orange2));
433    border: none; color: #fff; cursor: pointer; font-family: inherit;
434    box-shadow: 0 8px 28px rgba(255,107,26,0.35); transition: transform .2s, box-shadow .2s, opacity .2s;
435    display: flex; align-items: center; justify-content: center; gap: 10px;
436  }
437  .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,107,26,0.45); }
438  .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
439
440  /* Form feedback states */
441  .form-alert {
442    display: none; padding: 14px 18px; border-radius: 10px;
443    font-size: 14px; font-weight: 500; margin-bottom: 18px; text-align: center;
444  }
445  .form-alert.success {
446    display: block;
447    background: rgba(48,217,150,0.12); border: 1px solid rgba(48,217,150,0.3); color: #30D996;
448  }
449  .form-alert.error {
450    display: block;
451    background: rgba(255,107,26,0.12); border: 1px solid rgba(255,107,26,0.3); color: var(--orange2);
452  }
453  .field-error {
454    color: #FF8C42; font-size: 11px; margin-top: 5px; display: none;
455  }
456  .form-group.has-error input,
457  .form-group.has-error select,
458  .form-group.has-error textarea {
459    border-color: var(--orange);
460  }
461  .form-group.has-error .field-error { display: block; }
462
463  /* ── CTA BANNER ── */
464  .cta-section {
465    background: linear-gradient(135deg, var(--navy2) 0%, rgba(20,98,212,0.3) 100%);
466    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
467    padding: 80px 5%; text-align: center;
468    position: relative; overflow: hidden;
469  }
470  .cta-section::before {
471    content: '';
472    position: absolute; inset: 0;
473    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,107,26,0.12), transparent 70%);
474    pointer-events: none;
475  }
476  .cta-section h2 { font-family:'Arial',sans-serif; font-weight:800; font-size:clamp(30px,4vw,50px); margin-bottom:18px; letter-spacing:-0.02em; }
477  .cta-section p { font-size:17px; color:#8A9BBF; max-width:560px; margin:0 auto 36px; line-height:1.65; }
478  .cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
479
480  /* ── FOOTER ── */
481  footer {
482    background: var(--navy2); border-top: 1px solid var(--border);
483    padding: 48px 5% 28px;
484  }
485  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
486  .footer-brand p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-top: 14px; max-width: 280px; }
487  .footer-col h5 { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
488  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
489  .footer-col ul li a { font-size: 14px; color: var(--gray); text-decoration: none; transition: color .2s; }
490  .footer-col ul li a:hover { color: var(--white); }
491  .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
492  .footer-bottom p { font-size: 13px; color: var(--gray); }
493  .partner-badge {
494    display: flex; align-items: center; gap: 8px;
495    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
496    padding: 6px 14px; border-radius: 100px; font-size: 12px; color: var(--gray);
497  }
498  .partner-dot { width: 8px; height: 8px; background: #30D996; border-radius: 50%; }
499
500  /* ── WHATSAPP FLOATING BUTTON ── */
501  .whatsapp-float {
502    position: fixed;
503    bottom: 28px;
504    right: 28px;
505    z-index: 9999;
506    display: flex;
507    flex-direction: column;
508    align-items: flex-end;
509    gap: 10px;
510  }
511  .whatsapp-tooltip {
512    background: var(--navy2);
513    border: 1px solid var(--border);
514    color: #fff;
515    font-size: 13px;
516    font-weight: 500;
517    padding: 8px 14px;
518    border-radius: 10px;
519    white-space: nowrap;
520    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
521    opacity: 0;
522    transform: translateX(10px);
523    transition: opacity .25s, transform .25s;
524    pointer-events: none;
525  }
526  .whatsapp-float:hover .whatsapp-tooltip {
527    opacity: 1;
528    transform: translateX(0);
529  }
530  .whatsapp-btn {
531    width: 58px;
532    height: 58px;
533    background: #25D366;
534    border-radius: 50%;
535    display: flex;
536    align-items: center;
537    justify-content: center;
538    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
539    cursor: pointer;
540    text-decoration: none;
541    transition: transform .2s, box-shadow .2s;
542    position: relative;
543  }
544  .whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,0.65); }
545  .whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; }
546  .whatsapp-pulse {
547    position: absolute;
548    inset: 0;
549    border-radius: 50%;
550    background: rgba(37,211,102,0.4);
551    animation: wa-pulse 2.2s ease-out infinite;
552  }
553  @keyframes wa-pulse {
554    0% { transform: scale(1); opacity: 0.7; }
555    100% { transform: scale(1.7); opacity: 0; }
556  }
557
558  /* ── RESPONSIVE ── */
559  @media (max-width: 960px) {
560    .hero { grid-template-columns: 1fr; min-height: auto; padding: 60px 5%; }
561    .hero-visual { display: none; }
562    .why-grid { grid-template-columns: 1fr 1fr; }
563    .features-layout { grid-template-columns: 1fr; }
564    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
565    .steps { grid-template-columns: 1fr 1fr; }
566    .steps::before { display: none; }
567    .testi-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
568    .contact-layout { grid-template-columns: 1fr; }
569    .footer-grid { grid-template-columns: 1fr 1fr; }
570    nav { display: none; }
571    .trust-bar { gap: 28px; }
572  }
573  @media (max-width: 600px) {
574    .why-grid { grid-template-columns: 1fr; }
575    .steps { grid-template-columns: 1fr; }
576    .form-row { grid-template-columns: 1fr; }
577    .hero-stats { gap: 20px; }
578    .footer-grid { grid-template-columns: 1fr; }
579    .trust-bar { gap: 18px; }
580    .hero-actions { flex-direction: column; align-items: flex-start; }
581    .whatsapp-float { bottom: 18px; right: 18px; }
582  }
583</style>
584
585
586
587<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
587
588
589<script>
590emailjs.init({
591    publicKey: "0l7EVKolue36rEIZs"
592});
593</script>
593
594
595
596
597<script>
598
599const form = document.getElementById("demo-form");
600
601form.addEventListener("submit", function(e){
602
603    e.preventDefault();
604
605    let valid = true;
606
607    const firstname = document.getElementById("firstname");
608    const lastname = document.getElementById("lastname");
609    const email = document.getElementById("email");
610    const phone = document.getElementById("phone");
611
612    document.querySelectorAll(".form-group").forEach(el=>{
613        el.classList.remove("invalid");
614    });
615
616    if(firstname.value.trim()==""){
617        document.getElementById("fg-firstname").classList.add("invalid");
618        valid=false;
619    }
620
621    if(lastname.value.trim()==""){
622        document.getElementById("fg-lastname").classList.add("invalid");
623        valid=false;
624    }
625
626    if(email.value.trim()==""){
627        document.getElementById("fg-email").classList.add("invalid");
628        valid=false;
629    }
630
631    if(phone.value.trim()==""){
632        document.getElementById("fg-phone").classList.add("invalid");
633        valid=false;
634    }
635
636    if(!valid){
637        return;
638    }
639
640    const btn=document.getElementById("submit-btn");
641
642    btn.disabled=true;
643
644    btn.innerHTML="Sending...";
645
646    emailjs.send(
647        "service_zzyn9rl",
648        "template_2o5f2jq",
649        {
650            firstname: firstname.value,
651            lastname: lastname.value,
652            email: email.value,
653            phone: phone.value,
654            companysize: document.getElementById("companysize").value,
655            industry: document.getElementById("industry").value,
656            message: document.getElementById("message").value,
657            time:new Date().toLocaleString()
658        }
659    )
660
661    .then(function(){
662
663        document.getElementById("form-success").style.display="block";
664        document.getElementById("form-error").style.display="none";
665
666        form.reset();
667
668    })
669
670    .catch(function(error){
671
672    console.log("EmailJS Error:", error);
673
674    alert(JSON.stringify(error));
675
676    document.getElementById("form-error").style.display="block";
677    document.getElementById("form-success").style.display="none";
678
679});
680
681    .finally(function(){
682
683        btn.disabled=false;
684
685        btn.innerHTML="🚀 Book My Free Demo →";
686
687    });
688
689});
690
691</script>
691
692
693</head>
694<body>
695
696<!-- ─── HEADER ─── -->
697<header>
698  <div class="logo-wrap">
699    <div class="logo-mark">N</div>
700    <div class="logo-text">
701      Neehara
702      <span>Premium IT Solutions</span>
703    </div>
704  </div>
705  <nav>
706    <a href="#why">Why Bigin</a>
707    <a href="#features">Features</a>
708    <a href="#pricing">Pricing</a>
709    <a href="#process">Process</a>
710    <a href="#contact">Contact</a>
711  </nav>
712  <a href="#contact" class="btn-nav">Get Free Demo →</a>
713</header>
714
715<!-- ─── HERO ─── -->
716<section class="hero">
717  <div class="hero-content">
718    <div class="hero-eyebrow">Authorized Zoho Partner · Kerala</div>
719    <h1>
720      The Simplest CRM<br>
721      Your Small Business<br>
722      <em>Actually Needs</em>
723    </h1>
724    <p class="hero-sub">
725      Neehara helps you implement <strong>Zoho Bigin</strong> — a pipeline-centric CRM built for businesses like yours. Set up in under 30 minutes. No training required. Start free.
726    </p>
727    <div class="hero-actions">
728      <a href="#contact" class="btn-primary">🚀 Start Free with Bigin</a>
729      <a href="#features" class="btn-secondary">▶ See How It Works</a>
730    </div>
731    <div class="hero-stats">
732      <div class="stat">
733        <div class="stat-num">50<span>K+</span></div>
734        <div class="stat-label">Businesses on Bigin</div>
735      </div>
736      <div class="stat">
737        <div class="stat-num">30<span>min</span></div>
738        <div class="stat-label">Setup Time</div>
739      </div>
740      <div class="stat">
741        <div class="stat-num">₹<span>0</span></div>
742        <div class="stat-label">To Start (Free Plan)</div>
743      </div>
744    </div>
745  </div>
746  <div class="hero-visual">
747    <div class="crm-card">
748      <div class="crm-header">
749        <div class="crm-title">📊 Sales Pipeline · Q2 2025</div>
750        <div class="crm-badge">Live</div>
751      </div>
752      <div class="pipeline">
753        <div class="pipe-col">
754          <div class="pipe-col-head">New Leads</div>
755          <div class="deal-card blue"><div class="deal-name">Tech Corp</div><div class="deal-val">₹1.2L</div></div>
756          <div class="deal-card blue"><div class="deal-name">RetailPro</div><div class="deal-val">₹85K</div></div>
757        </div>
758        <div class="pipe-col">
759          <div class="pipe-col-head">Contacted</div>
760          <div class="deal-card orange"><div class="deal-name">HealthCo</div><div class="deal-val">₹2.5L</div></div>
761        </div>
762        <div class="pipe-col">
763          <div class="pipe-col-head">Proposal</div>
764          <div class="deal-card orange"><div class="deal-name">EduMart</div><div class="deal-val">₹1.8L</div></div>
765          <div class="deal-card green"><div class="deal-name">FinServ</div><div class="deal-val">₹3.1L</div></div>
766        </div>
767        <div class="pipe-col">
768          <div class="pipe-col-head">Won ✓</div>
769          <div class="deal-card green"><div class="deal-name">Buildex</div><div class="deal-val">₹4.2L</div></div>
770        </div>
771      </div>
772      <div class="crm-footer">
773        <div class="crm-metric"><div class="val">₹13.6L</div><div class="lbl">Pipeline Value</div></div>
774        <div class="crm-metric"><div class="val">6</div><div class="lbl">Active Deals</div></div>
775        <div class="crm-metric"><div class="val">68%</div><div class="lbl">Win Rate</div></div>
776      </div>
777    </div>
778    <div class="badge-float">🔔 New lead captured<br>from your website</div>
779    <div class="badge-float2">
780      <div class="avatar-row">
781        <div class="av av1">A</div><div class="av av2">R</div><div class="av av3">S</div>
782      </div>
783      <div style="font-size:12px;">3 deals closing today</div>
784    </div>
785  </div>
786</section>
787
788<!-- ─── TRUST BAR ─── -->
789<div class="trust-bar">
790  <div class="trust-item"><span class="trust-icon">🔒</span> ISO 27001 Certified</div>
791  <div class="trust-item"><span class="trust-icon">✅</span> GDPR Compliant</div>
792  <div class="trust-item"><span class="trust-icon">🏆</span> Authorized Zoho Partner</div>
793  <div class="trust-item"><span class="trust-icon">⭐</span> Rated #1 SMB CRM</div>
794  <div class="trust-item"><span class="trust-icon">📱</span> iOS & Android Apps</div>
795</div>
796
797<!-- ─── WHY BIGIN ─── -->
798<section id="why">
799  <div class="section-head">
800    <div class="section-eyebrow">Why Zoho Bigin</div>
801    <h2 class="section-title">Built for Small Business.<br>Not Watered-Down Enterprise.</h2>
802    <p class="section-sub">Most CRMs are built for large enterprises and stripped down for SMBs. Bigin was designed from scratch for businesses with 1–20 employees.</p>
803  </div>
804  <div class="why-grid">
805    <div class="why-card">
806      <div class="why-icon icon-orange">⚡</div>
807      <h3>30-Minute Setup</h3>
808      <p>No consultants, no long onboarding. Connect your email, import contacts, and start managing your pipeline in under 30 minutes — guaranteed.</p>
809    </div>
810    <div class="why-card">
811      <div class="why-icon icon-blue">💰</div>
812      <h3>Truly Affordable</h3>
813      <p>Start completely free. Paid plans from just $7/user/month — the most competitive pricing in the CRM market. No hidden fees, no forced upgrades.</p>
814    </div>
815    <div class="why-card">
816      <div class="why-icon icon-green">📊</div>
817      <h3>Pipeline-Centric</h3>
818      <p>Visual Kanban pipelines let you see exactly where every deal stands. Drag, drop, and close deals faster without drowning in spreadsheets.</p>
819    </div>
820    <div class="why-card">
821      <div class="why-icon icon-blue">🤖</div>
822      <h3>AI-Powered (Zia)</h3>
823      <p>Zia AI handles follow-ups, spots cross-sell opportunities, writes emails, and tells you exactly why you lost deals — automatically, around the clock.</p>
824    </div>
825    <div class="why-card">
826      <div class="why-icon icon-orange">🔗</div>
827      <h3>Deep Integrations</h3>
828      <p>Connect with Zoho Invoice, Gmail, Outlook, WhatsApp, Zoom, Teams, Mailchimp, and 50+ other tools your business already uses today.</p>
829    </div>
830    <div class="why-card">
831      <div class="why-icon icon-green">📱</div>
832      <h3>Mobile-First</h3>
833      <p>Full-featured iOS and Android apps with call logging, business card scanner, and Apple Intelligence/Galaxy AI features built right in.</p>
834    </div>
835  </div>
836</section>
837
838<!-- ─── FEATURES ─── -->
839<section id="features" style="padding-top:0;">
840  <div class="features-layout">
841    <div>
842      <div class="section-eyebrow">Key Features</div>
843      <h2 class="section-title" style="margin-bottom:36px;">Everything You Need.<br>Nothing You Don't.</h2>
844      <div class="feature-list">
845        <div class="feature-item active">
846          <div class="fi-icon">📊</div>
847          <div class="fi-text">
848            <h4>Visual Sales Pipelines</h4>
849            <p>Kanban-style board to track every deal from lead to close. Multiple pipelines for different product lines or regions.</p>
850          </div>
851        </div>
852        <div class="feature-item">
853          <div class="fi-icon">📧</div>
854          <div class="fi-text">
855            <h4>Multichannel Communication</h4>
856            <p>Email, phone, WhatsApp, and social media — manage all customer touchpoints from one unified inbox.</p>
857          </div>
858        </div>
859        <div class="feature-item">
860          <div class="fi-icon">⚙️</div>
861          <div class="fi-text">
862            <h4>Smart Automation</h4>
863            <p>Automate follow-ups, lead assignment, task creation, and email sequences. Eliminate manual, repetitive work entirely.</p>
864          </div>
865        </div>
866        <div class="feature-item">
867          <div class="fi-icon">📈</div>
868          <div class="fi-text">
869            <h4>Dashboards & Reports</h4>
870            <p>Real-time analytics on deal velocity, team performance, and revenue forecasts — all in one visual dashboard.</p>
871          </div>
872        </div>
873        <div class="feature-item">
874          <div class="fi-icon">🧠</div>
875          <div class="fi-text">
876            <h4>Zia AI Assistant</h4>
877            <p>Let AI summarize emails, draft responses, and surface insights about your pipeline health automatically.</p>
878          </div>
879        </div>
880      </div>
881    </div>
882    <div>
883      <div class="feature-preview">
884        <div class="fp-title">📈 Revenue by Stage — This Month</div>
885        <div class="fp-chart">
886          <div class="bar-row">
887            <div class="bar-label">New</div>
888            <div class="bar-track"><div class="bar-fill bar-blue" style="width:45%">₹4.5L</div></div>
889          </div>
890          <div class="bar-row">
891            <div class="bar-label">Contacted</div>
892            <div class="bar-track"><div class="bar-fill bar-blue" style="width:62%">₹6.2L</div></div>
893          </div>
894          <div class="bar-row">
895            <div class="bar-label">Proposal</div>
896            <div class="bar-track"><div class="bar-fill bar-orange" style="width:78%">₹7.8L</div></div>
897          </div>
898          <div class="bar-row">
899            <div class="bar-label">Negotiation</div>
900            <div class="bar-track"><div class="bar-fill bar-orange" style="width:55%">₹5.5L</div></div>
901          </div>
902          <div class="bar-row">
903            <div class="bar-label">Won ✓</div>
904            <div class="bar-track"><div class="bar-fill bar-green" style="width:88%">₹8.8L</div></div>
905          </div>
906        </div>
907        <div style="margin-top:20px; padding-top:20px; border-top:1px solid var(--border); display:flex; gap:24px;">
908          <div><div style="font-family:Syne,sans-serif;font-weight:800;font-size:22px;color:#fff;">₹32.8L</div><div style="font-size:11px;color:var(--gray);">Total Pipeline</div></div>
909          <div><div style="font-family:Syne,sans-serif;font-weight:800;font-size:22px;color:#30D996;">↑ 34%</div><div style="font-size:11px;color:var(--gray);">vs Last Month</div></div>
910        </div>
911      </div>
912    </div>
913  </div>
914</section>
915
916<!-- ─── PROCESS ─── -->
917<section id="process">
918  <div class="section-head" style="text-align:center; margin-left:auto; margin-right:auto; max-width:560px;">
919    <div class="section-eyebrow">Our Process</div>
920    <h2 class="section-title">From Zero to Running CRM<br>in 4 Simple Steps</h2>
921  </div>
922  <div class="steps">
923    <div class="step">
924      <div class="step-num">1</div>
925      <h4>Free Consultation</h4>
926      <p>We understand your business process, team size, and current pain points with a free 30-min call.</p>
927    </div>
928    <div class="step">
929      <div class="step-num">2</div>
930      <h4>Custom Setup</h4>
931      <p>Neehara configures Bigin to match your pipeline stages, fields, and automation rules precisely.</p>
932    </div>
933    <div class="step">
934      <div class="step-num">3</div>
935      <h4>Data Migration</h4>
936      <p>We import your existing contacts, deals, and history from spreadsheets or your old CRM for free.</p>
937    </div>
938    <div class="step">
939      <div class="step-num">4</div>
940      <h4>Training & Go Live</h4>
941      <p>Team training session included. Ongoing support via phone, email, and chat whenever you need it.</p>
942    </div>
943  </div>
944</section>
945
946<!-- ─── PRICING ─── -->
947<section id="pricing" class="pricing-bg">
948  <div class="section-head" style="text-align:center; max-width:560px; margin:0 auto 56px;">
949    <div class="section-eyebrow">
949Pricing</div>
950    <h2 class="section-title">Transparent Pricing.<br>No Surprises.</h2>
951    <p class="section-sub" style="margin:0 auto;">All plans include Neehara's free onboarding, migration assistance, and priority support.</p>
952  </div>
953  <div class="pricing-grid">
954    <div class="pricing-card">
955      <div class="plan-name">Free</div>
956      <div class="plan-tagline">For solopreneurs just starting out</div>
957      <div class="plan-price">₹<span>0</span></div>
958      <div class="plan-period">forever · 1 user only</div>
959      <hr class="plan-divider">
960      <ul class="plan-features">
961        <li>1 Pipeline</li>
962        <li>500 Contacts</li>
963        <li>Web Forms</li>
964        <li>Email Integration</li>
965        <li>Mobile App (iOS & Android)</li>
966        <li>Neehara Onboarding Support</li>
967      </ul>
968      <a href="#contact" class="btn-plan btn-plan-outline">Get Started Free</a>
969    </div>
970    <div class="pricing-card featured">
971      <div class="featured-badge">Most Popular</div>
972      <div class="plan-name">Express</div>
973      <div class="plan-tagline">For growing small teams</div>
974      <div class="plan-price"><sub>$</sub>7<span>/user</span></div>
975      <div class="plan-period">per month, billed annually</div>
976      <hr class="plan-divider">
977      <ul class="plan-features">
978        <li>3 Pipelines</li>
979        <li>50,000 Contacts</li>
980        <li>Workflow Automation</li>
981        <li>Bulk Email Campaigns</li>
982        <li>WhatsApp & Telephony</li>
983        <li>Custom Dashboards</li>
984        <li>Zia AI Assistant</li>
985        <li>Priority Neehara Support</li>
986      </ul>
987      <a href="#contact" class="btn-plan btn-plan-filled">Start with Express →</a>
988    </div>
989    <div class="pricing-card">
990      <div class="plan-name">Premier</div>
991      <div class="plan-tagline">For teams that need full power</div>
992      <div class="plan-price"><sub>$</sub>12<span>/user</span></div>
993      <div class="plan-period">per month, billed annually</div>
994      <hr class="plan-divider">
995      <ul class="plan-features">
996        <li>Unlimited Pipelines</li>
997        <li>Unlimited Contacts</li>
998        <li>Advanced Automations</li>
999        <li>Zoho Invoice Integration</li>
1000        <li>Multi-Currency Support</li>
1001        <li>Territory Management</li>
1002        <li>Full Zia AI Suite</li>
1003        <li>Dedicated Neehara Account Manager</li>
1004      </ul>
1005      <a href="#contact" class="btn-plan btn-plan-outline">Choose Premier</a>
1006    </div>
1007  </div>
1008  <p style="text-align:center;color:var(--gray);font-size:13px;margin-top:28px;">All prices are Zoho list prices. Contact Neehara for exclusive partner discounts. 15-day free trial on all paid plans.</p>
1009</section>
1010
1011<!-- ─── TESTIMONIALS ─── -->
1012<section>
1013  <div class="section-head" style="text-align:center; max-width:560px; margin:0 auto 56px;">
1014    <div class="section-eyebrow">Client Stories</div>
1015    <h2 class="section-title">Small Businesses. Big Results.</h2>
1016  </div>
1017  <div class="testi-grid">
1018    <div class="testi-card">
1019      <div class="stars">★★★★★</div>
1020      <p class="testi-text">"Neehara set up Bigin for our trading firm in just one afternoon. We went from chasing leads on WhatsApp to a proper pipeline. Our conversion rate doubled in 2 months."</p>
1021      <div class="testi-author">
1022        <div class="testi-av" style="background:#FF6B1A;">R</div>
1023        <div>
1024          <div class="testi-name">Prasanth Kurian </div>
1025          <div class="testi-role">Elba Living</div>
1026        </div>
1027      </div>
1028    </div>
1029    <div class="testi-card">
1030      <div class="stars">★★★★★</div>
1031      <p class="testi-text">"We were using 4 different spreadsheets to manage admissions. Bigin consolidated everything. The Neehara team handled all the migration — we didn't lose a single record."</p>
1032      <div class="testi-author">
1033        <div class="testi-av" style="background:#1462D4;">S</div>
1034        <div>
1035          <div class="testi-name">Steve Ben Philiph</div>
1036          <div class="testi-role">Athlene Sports</div>
1037        </div>
1038      </div>
1039    </div>
1040    <div class="testi-card">
1041      <div class="stars">★★★★★</div>
1042      <p class="testi-text">"As a clinic, patient follow-ups were always falling through the cracks. Bigin's automation now sends reminders automatically. Neehara customized it perfectly for healthcare."</p>
1043      <div class="testi-author">
1044        <div class="testi-av" style="background:#30D996;">A</div>
1045        <div>
1046          <div class="testi-name">Biju M R</div>
1047          <div class="testi-role">SB Packaging</div>
1048        </div>
1049      </div>
1050    </div>
1051  </div>
1052</section>
1053
1054<!-- ─── CTA ─── -->
1055<div class="cta-section">
1056  <h2>Ready to Stop Managing Deals on Spreadsheets?</h2>
1057  <p>Let Neehara set up Zoho Bigin for your business — free consultation, free migration, free onboarding. You're 30 minutes away from a real CRM.</p>
1058  <div class="cta-actions">
1059    <a href="#contact" class="btn-primary" style="font-size:16px;padding:16px 36px;">🚀 Book Free Consultation</a>
1060    <a href="https://www.bigin.com" target="_blank" class="btn-secondary" style="font-size:15px;padding:16px 28px;">Learn More About Bigin ↗</a>
1061  </div>
1062</div>
1063
1064<!-- ─── CONTACT ─── -->
1065<section id="contact">
1066  <div class="contact-layout">
1067    <div class="contact-left">
1068      <div class="section-eyebrow">Get In Touch</div>
1069      <h2>Let's Get Your CRM<br>Up & Running</h2>
1070      <p>Fill the form and our Zoho-certified consultant will reach out within one business day with a customized plan for your business.</p>
1071      <div class="contact-info">
1072        <div class="ci-item">
1073          <div class="ci-icon">📍</div>
1074          <div>
1075            <div class="ci-lbl">Address</div>
1076            <div class="ci-val">Neehara Premium IT Solutions
1077Kailasam Arcade, Room # 134/D Opposite Marian College Kuttikkanam,Kerala, India,685531 Phone:9400587871</div>
1078          </div>
1079        </div>
1080        <div class="ci-item">
1081          <div class="ci-icon">🌐</div>
1082          <div>
1083            <div class="ci-lbl">Website</div>
1084            <div class="ci-val">neeharaa.com</div>
1085          </div>
1086        </div>
1087        <div class="ci-item">
1088          <div class="ci-icon">🏆</div>
1089          <div>
1090            <div class="ci-lbl">Partnership</div>
1091            <div class="ci-val">Authorized Zoho Partner · Since 2019</div>
1092          </div>
1093        </div>
1094        <div class="ci-item">
1095          <div class="ci-icon">💬</div>
1096          <div>
1097            <div class="ci-lbl">WhatsApp</div>
1098            <div class="ci-val">+91 9400587871</div>
1099          </div>
1100        </div>
1101      </div>
1102    </div>
1103    <div class="form-card">
1104      <h3 style="font-family:Syne,sans-serif;font-weight:700;font-size:20px;margin-bottom:24px;">Book a Free Demo</h3>
1105
1106      <!-- Alert area -->
1107      <div id="form-success" class="form-alert success">
1108        ✅ Thank you! We'll contact you within 1 business day.
1109      </div>
1110      <div id="form-error" class="form-alert error">
1111        ⚠️ Something went wrong. Please try again or WhatsApp us directly.
1112      </div>
1113
1114      <form id="demo-form" novalidate>
1115        <div class="form-row">
1116          <div class="form-group" id="fg-firstname">
1117            <label>First Name</label>
1118            <input type="text" id="firstname" name="firstname" placeholder="Ravi">
1119            <div class="field-error">Please enter your first name.</div>
1120          </div>
1121          <div class="form-group" id="fg-lastname">
1122            <label>Last Name</label>
1123            <input type="text" id="lastname" name="lastname" placeholder="Menon">
1124            <div class="field-error">Please enter your last name.</div>
1125          </div>
1126        </div>
1127        <div class="form-group" id="fg-email">
1128          <label>Business Email</label>
1129          <input type="email" id="email" name="email" placeholder="[email protected]">
1130          <div class="field-error">Please enter a valid email address.</div>
1131        </div>
1132        <div class="form-row">
1133          <div class="form-group" id="fg-phone">
1134            <label>Phone</label>
1135            <input type="tel" id="phone" name="phone" placeholder="+91 98765 43210">
1136            <div class="field-error">Please enter your phone number.</div>
1137          </div>
1138          <div class="form-group">
1139            <label>Company Size</label>
1140            <select id="companysize" name="companysize">
1141              <option>1 – Just me</option>
1142              <option>2–5 employees</option>
1143              <option selected>6–15 employees</option>
1144              <option>16–50 employees</option>
1145              <option>50+ employees</option>
1146            </select>
1147          </div>
1148        </div>
1149        <div class="form-group">
1150          <label>Industry</label>
1151          <select id="industry" name="industry">
1152            <option>Retail / Trading</option>
1153            <option>Real Estate</option>
1154            <option>Healthcare / Clinic</option>
1155            <option>Education</option>
1156            <option>IT / Tech Services</option>
1157            <option>Manufacturing</option>
1158            <option>Other</option>
1159          </select>
1160        </div>
1161        <div class="form-group">
1162          <label>Message (Optional)</label>
1163          <textarea id="message" name="message" placeholder="Tell us about your current process and what you're looking to improve..."></textarea>
1164        </div>
1165        <button type="submit" class="btn-submit" id="submit-btn">
1166          🚀 Book My Free Demo &nbsp;→
1167        </button>
1168        <p style="font-size:11px;color:var(--gray);text-align:center;margin-top:14px;">No credit card needed. Our consultant will call you within 1 business day.</p>
1169      </form>
1170    </div>
1171  </div>
1172</section>
1173
1174<!-- ─── FOOTER ─── -->
1175<footer>
1176  <div class="footer-grid">
1177    <div class="footer-brand">
1178      <div class="logo-wrap">
1179        <div class="logo-mark">N</div>
1180        <div class="logo-text">Neehara<span>Premium IT Solutions</span></div>
1181      </div>
1182      <p>Your trusted Zoho Partner in Kerala, delivering IT consulting, CRM implementation, security solutions, and productivity tools since 2019.</p>
1183    </div>
1184    <div class="footer-col">
1185      <h5>Zoho Products</h5>
1186      <ul>
1187        <li><a href="#">Zoho Bigin CRM</a></li>
1188        <li><a href="#">Zoho CRM</a></li>
1189        <li><a href="#">Zoho Books</a></li>
1190        <li><a href="#">Zoho Campaigns</a></li>
1191        <li><a href="#">Zoho Invoice</a></li>
1192      </ul>
1193    </div>
1194    <div class="footer-col">
1195      <h5>Services</h5>
1196      <ul>
1197        <li><a href="#">CRM Implementation</a></li>
1198        <li><a href="#">IT Consulting</a></li>
1199        <li><a href="#">Network Solutions</a></li>
1200        <li><a href="#">Security Solutions</a></li>
1201        <li><a href="#">Business Intelligence</a></li>
1202      </ul>
1203    </div>
1204    <div class="footer-col">
1205      <h5>Company</h5>
1206      <ul>
1207        <li><a href="https://neeharaa.com" target="_blank">Website</a></li>
1208        <li><a href="#">About Us</a></li>
1209        <li><a href="#">Blog</a></li>
1210        <li><a href="#">Case Studies</a></li>
1211        <li><a href="#contact">Contact</a></li>
1212      </ul>
1213    </div>
1214  </div>
1215  <div class="footer-bottom">
1216    <p>© 2026 Neehara Premium IT Solutions. All rights reserved. · Peerumedu, Kerala, India</p>
1217    <div class="partner-badge"><div class="partner-dot"></div> Authorized Zoho Partner</div>
1218  </div>
1219</footer>
1220
1221<!-- ─── WHATSAPP FLOATING BUTTON ─── -->
1222<div class="whatsapp-float">
1223  <div class="whatsapp-tooltip">💬 Chat with us on WhatsApp</div>
1224  <a class="whatsapp-btn" href="https://wa.me/919400587871?text=Hi%20Neehara!%20I%27d%20like%20to%20know%20more%20about%20Zoho%20Bigin%20CRM." target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
1225    <div class="whatsapp-pulse"></div>
1226    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
1227      <path d="M16.002 2.667C8.637 2.667 2.667 8.637 2.667 16c0 2.346.63 4.548 1.727 6.448L2.667 29.333l7.07-1.693A13.274 13.274 0 0016.002 29.333c7.364 0 13.331-5.97 13.331-13.333S23.366 2.667 16.002 2.667zm0 24c-2.21 0-4.276-.627-6.024-1.713l-.432-.258-4.196 1.005 1.038-4.09-.282-.453A10.616 10.616 0 015.334 16c0-5.886 4.782-10.667 10.668-10.667S26.669 10.114 26.669 16 21.888 26.667 16.002 26.667zm5.844-7.99c-.32-.16-1.893-.934-2.187-1.04-.293-.107-.506-.16-.72.16-.214.32-.828 1.04-.983 1.254-.16.213-.32.24-.64.08-.32-.16-1.35-.497-2.573-1.587-.95-.847-1.592-1.893-1.778-2.213-.187-.32-.02-.493.14-.653.145-.144.32-.373.48-.56.16-.186.213-.32.32-.533.107-.213.053-.4-.027-.56-.08-.16-.72-1.733-.987-2.373-.26-.627-.52-.533-.72-.547-.186-.013-.4-.013-.613-.013s-.56.08-.853.4c-.293.32-1.12 1.093-1.12 2.666s1.147 3.094 1.307 3.307c.16.213 2.253 3.44 5.462 4.827.764.33 1.36.527 1.824.674.767.24 1.467.207 2.02.127.614-.093 1.893-.773 2.16-1.52.267-.746.267-1.386.187-1.52-.08-.133-.293-.213-.613-.373z"/>
1228    </svg>
1229  </a>
1230</div>
1231
1232<script>
1233  // ── Feature item tab switching ──
1234  document.querySelectorAll('.feature-item').forEach(item => {
1235    item.addEventListener('click', () => {
1236      document.querySelectorAll('.feature-item').forEach(i => i.classList.remove('active'));
1237      item.classList.add('active');
1238    });
1239  });
1240
1241  // ── Scroll animation ──
1242  const observer = new IntersectionObserver(entries => {
1243    entries.forEach(e => {
1244      if (e.isIntersecting) {
1245        e.target.style.opacity = '1';
1246        e.target.style.transform = 'translateY(0)';
1247      }
1248    });
1249  }, { threshold: 0.1 });
1250
1251  document.querySelectorAll('.why-card, .step, .testi-card, .pricing-card').forEach(el => {
1252    el.style.opacity = '0';
1253    el.style.transform = 'translateY(24px)';
1254    el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
1255    observer.observe(el);
1256  });
1257
1258  // ── EmailJS Contact Form ──
1259  // Initialize EmailJS with your public key
1260  // SETUP INSTRUCTIONS:
1261  // 1. Go to https://www.emailjs.com and create a free account
1262  // 2. Add an Email Service (Gmail) → copy the Service ID below
1263  // 3. Create an Email Template → copy the Template ID below
1264  // 4. Go to Account > Public Key → copy it below
1265  // 5. In your template, use these variables:
1266  //    {{from_name}}, {{from_email}}, {{phone}}, {{company_size}},
1267  //    {{industry}}, {{message}}, {{to_email}}
1268
1269  const EMAILJS_PUBLIC_KEY  = 'YOUR_PUBLIC_KEY';   // ← replace
1270  const EMAILJS_SERVICE_ID  = 'YOUR_SERVICE_ID';   // ← replace
1271  const EMAILJS_TEMPLATE_ID = 'YOUR_TEMPLATE_ID';  // ← replace
1272  const TO_EMAIL            = '[email protected]';
1273
1274  emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
1275
1276  // Validation helpers
1277  function showError(groupId, show) {
1278    const el = document.getElementById(groupId);
1279    if (!el) return;
1280    el.classList.toggle('has-error', show);
1281  }
1282
1283  function validateEmail(v) {
1284    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
1285  }
1286
1287  function validateForm() {
1288    let valid = true;
1289
1290    const firstname = document.getElementById('firstname').value.trim();
1291    showError('fg-firstname', !firstname);
1292    if (!firstname) valid = false;
1293
1294    const lastname = document.getElementById('lastname').value.trim();
1295    showError('fg-lastname', !lastname);
1296    if (!lastname) valid = false;
1297
1298    const email = document.getElementById('email').value.trim();
1299    showError('fg-email', !validateEmail(email));
1300    if (!validateEmail(email)) valid = false;
1301
1302    const phone = document.getElementById('phone').value.trim();
1303    showError('fg-phone', !phone);
1304    if (!phone) valid = false;
1305
1306    return valid;
1307  }
1308
1309  document.getElementById('demo-form').addEventListener('submit', async function(e) {
1310    e.preventDefault();
1311
1312    // Hide previous alerts
1313    document.getElementById('form-success').style.display = 'none';
1314    document.getElementById('form-error').style.display = 'none';
1315
1316    if (!validateForm()) return;
1317
1318    const btn = document.getElementById('submit-btn');
1319    btn.disabled = true;
1320    btn.innerHTML = '⏳ Sending…';
1321
1322    const templateParams = {
1323      to_email:     TO_EMAIL,
1324      from_name:    document.getElementById('firstname').value.trim() + ' ' + document.getElementById('lastname').value.trim(),
1325      from_email:   document.getElementById('email').value.trim(),
1326      phone:        document.getElementById('phone').value.trim(),
1327      company_size: document.getElementById('companysize').value,
1328      industry:     document.getElementById('industry').value,
1329      message:      document.getElementById('message').value.trim() || '(no message)',
1330    };
1331
1332    try {
1333      await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams);
1334      document.getElementById('form-success').style.display = 'block';
1335      document.getElementById('demo-form').reset();
1336      btn.innerHTML = '✅ Sent Successfully!';
1337      setTimeout(() => {
1338        btn.disabled = false;
1339        btn.innerHTML = '🚀 Book My Free Demo &nbsp;→';
1340      }, 4000);
1341    } catch (err) {
1342      console.error('EmailJS error:', err);
1343      document.getElementById('form-error').style.display = 'block';
1344      btn.disabled = false;
1345      btn.innerHTML = '🚀 Book My Free Demo &nbsp;→';
1346    }
1347  });
1348
1349  // Clear field errors on input
1350  ['firstname','lastname','email','phone'].forEach(id => {
1351    const el = document.getElementById(id);
1352    if (el) el.addEventListener('input', () => {
1353      const fg = document.getElementById('fg-' + id);
1354      if (fg) fg.classList.remove('has-error');
1355    });
1356  });
1357</script>
1357
1358</body>
1359</html>

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