:root{ /* brand hues — the deep-blue→green sweep used across gradients. Royal-blue/deep-blue double as plain accent text/border color in a few spots too, so they get brightened (not just the gradients) in the dark override below for readable contrast. */ --deep-blue:#0B2F8F; --royal-blue:#1657D6; --royal-blue-rgb:22,87,214; --azure:#1494C9; --teal:#0C8CA0; --green:#17A62E; --green-bright:#2FC24A; --mint:#6FE3B4; /* semantic surface/text tokens — these are the ones that flip below */ --ink:#0A1224; --ink-rgb:10,18,36; /* Deliberately NOT redefined for dark mode — this is for scrims that sit on top of a photo (e.g. the hero slider), not a themed page surface. It needs to stay dark in both themes so white overlay text stays readable regardless of the site's theme or the photo's own brightness; --ink-rgb itself flips to near-white in dark mode and would defeat the purpose here. */ --scrim-rgb:10,18,36; --slate:#4B5670; --mist:#F3F7FB; --mist-2:#EAF1F8; --white:#FFFFFF; --line:#E2E9F2; --page-bg:#FCFDFF; --wave-grad: linear-gradient(120deg, var(--deep-blue) 0%, var(--royal-blue) 30%, var(--teal) 65%, var(--green) 100%); --wave-grad-medium: linear-gradient(120deg, var(--royal-blue) 0%, var(--azure) 35%, var(--teal) 68%, var(--green-bright) 100%); /* button-specific gradient: a shade lighter/brighter than --wave-grad so CTAs blend with the page instead of reading as a heavy dark slab */ --btn-grad: linear-gradient(120deg, var(--royal-blue) 0%, var(--azure) 42%, var(--teal) 72%, var(--green-bright) 100%); --wave-grad-dark: linear-gradient(120deg, #12368F 0%, #1A5FD4 45%, #0F8CA0 100%); --wave-grad-pale: linear-gradient(120deg, #91A1CD 0%, #92CBD4 50%, #97D8A1 100%); --pale-start:#91A1CD; --pale-end:#97D8A1; --wave-grad-soft: linear-gradient(120deg, rgba(11,47,143,0.08), rgba(12,140,160,0.08), rgba(23,166,46,0.08)); --wave-grad-alt: linear-gradient(120deg, var(--azure), var(--mint)); --panel-grad: linear-gradient(180deg,#F6F9FC,#EFF4F9); --muffled-bar:#C7D0DC; --wash: radial-gradient(circle at 12% 12%, rgba(11,47,143,0.055), transparent 42%), radial-gradient(circle at 88% 22%, rgba(12,140,160,0.06), transparent 42%), radial-gradient(circle at 50% 95%, rgba(23,166,46,0.05), transparent 48%), var(--page-bg); --success-bg:#EAFAF0; --success-text:#178A3F; --danger-bg:#FDECEC; --danger-text:#C0392B; --shadow-lg: 0 30px 60px -20px rgba(11,47,143,0.25); --shadow-sm: 0 10px 25px -10px rgba(11,47,143,0.15); --radius: 20px; color-scheme: light; } /* ---------- Dark theme ---------- Follows the system preference by default; an explicit toggle (see wzInitThemeToggle in data.js) stamps data-theme on to override it in either direction and remembers the choice. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --royal-blue:#5B93FF; --royal-blue-rgb:91,147,255; --deep-blue:#6EA1FF; --ink:#EDF2FC; --ink-rgb:237,242,252; --slate:#93A1C4; --mist:#0B1224; --mist-2:#16213F; --white:#111A31; --line:rgba(255,255,255,0.09); --page-bg:#080C18; --wave-grad-pale: linear-gradient(120deg, #101B3D 0%, #0F3244 55%, #0E3323 100%); --pale-start:#101B3D; --pale-end:#0E3323; --wave-grad-soft: linear-gradient(120deg, rgba(91,147,255,0.18), rgba(47,190,214,0.18), rgba(60,209,110,0.16)); --panel-grad: linear-gradient(180deg,#111A33,#0B1224); --muffled-bar:#293355; --success-bg:rgba(47,194,74,0.16); --success-text:#4ADE80; --danger-bg:rgba(231,76,60,0.18); --danger-text:#FF7A6B; --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.55); --shadow-sm: 0 10px 25px -10px rgba(0,0,0,0.4); color-scheme: dark; } } :root[data-theme="dark"]{ --royal-blue:#5B93FF; --royal-blue-rgb:91,147,255; --deep-blue:#6EA1FF; --ink:#EDF2FC; --ink-rgb:237,242,252; --slate:#93A1C4; --mist:#0B1224; --mist-2:#16213F; --white:#111A31; --line:rgba(255,255,255,0.09); --page-bg:#080C18; --wave-grad-pale: linear-gradient(120deg, #101B3D 0%, #0F3244 55%, #0E3323 100%); --pale-start:#101B3D; --pale-end:#0E3323; --wave-grad-soft: linear-gradient(120deg, rgba(91,147,255,0.18), rgba(47,190,214,0.18), rgba(60,209,110,0.16)); --panel-grad: linear-gradient(180deg,#111A33,#0B1224); --muffled-bar:#293355; --success-bg:rgba(47,194,74,0.16); --success-text:#4ADE80; --danger-bg:rgba(231,76,60,0.18); --danger-text:#FF7A6B; --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.55); --shadow-sm: 0 10px 25px -10px rgba(0,0,0,0.4); color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light; } /* Theme transition: smooth cross-fade instead of an abrupt color snap, but not on first paint (that would make the FOUC-prevention script pointless) or for users who'd rather not see motion at all. */ body.wz-theme-ready, body.wz-theme-ready *{ transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } @media (prefers-reduced-motion: reduce){ body.wz-theme-ready, body.wz-theme-ready *{ transition:none; } } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;} body{ font-family:'Inter','Noto Sans Malayalam',sans-serif; color:var(--ink); background:var(--page-bg); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Sora','Noto Sans Malayalam',sans-serif; font-weight:700; letter-spacing:-0.02em; color:var(--ink); } img,svg{display:block;max-width:100%;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} .container{width:min(1240px, 92%);margin-inline:auto;} .grad-text{ background:var(--wave-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--royal-blue); margin-bottom:16px; } .eyebrow::before{ content:""; width:22px;height:2px; background:var(--wave-grad); border-radius:2px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:100px; font-weight:600; font-size:0.95rem; transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease; white-space:nowrap; } .btn-primary{ background:var(--btn-grad); color:#fff; box-shadow:var(--shadow-sm); } .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);} .btn-outline{ background:transparent; color:var(--deep-blue); border:1.5px solid var(--line); } .btn-outline:hover{border-color:var(--royal-blue);background:var(--mist);} .btn-ghost-white{ background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.35); backdrop-filter:blur(6px); } .btn-ghost-white:hover{background:rgba(255,255,255,0.22);} /* ---------- Theme toggle ---------- */ [data-theme-toggle] .theme-icon-moon{display:none;} :root[data-theme="dark"] [data-theme-toggle] .theme-icon-sun{display:none;} :root[data-theme="dark"] [data-theme-toggle] .theme-icon-moon{display:block;} :root[data-theme="dark"] [data-theme-toggle] .theme-switch-knob{transform:translateX(18px);} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) [data-theme-toggle] .theme-icon-sun{display:none;} :root:not([data-theme="light"]) [data-theme-toggle] .theme-icon-moon{display:block;} :root:not([data-theme="light"]) [data-theme-toggle] .theme-switch-knob{transform:translateX(18px);} } .theme-toggle-icon{ width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line); background:var(--white);color:var(--slate);display:flex;align-items:center;justify-content:center; flex-shrink:0;transition:border-color .2s ease, color .2s ease, background .2s ease; } .theme-toggle-icon:hover{border-color:var(--royal-blue);color:var(--royal-blue);} .theme-toggle-icon svg{width:18px;height:18px;} .theme-toggle-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line); background:var(--white);color:var(--ink);font-weight:700;font-size:0.9rem; } .theme-toggle-row-label{display:flex;align-items:center;gap:10px;} .theme-toggle-row-label svg{width:18px;height:18px;color:var(--royal-blue);flex-shrink:0;} .theme-switch{ position:relative;width:40px;height:23px;border-radius:100px;background:var(--mist-2); border:1px solid var(--line);flex-shrink:0; } .theme-switch-knob{ position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%; background:var(--btn-grad);transition:transform .25s ease; } /* ---------- Translate to Malayalam ---------- */ .translate-toggle-row{ display:flex;align-items:center;gap:10px; width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line); background:var(--white);color:var(--ink);font-weight:700;font-size:0.9rem; } .translate-toggle-row svg{width:18px;height:18px;color:var(--royal-blue);flex-shrink:0;} /* ---------- Generic admin settings switch ---------- Same visual as the theme switch but its state is driven by aria-pressed on the button itself, independent of the dark-mode [data-theme] mechanism the theme toggle uses. */ .settings-toggle-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line); background:var(--white);color:var(--ink);font-weight:600;font-size:0.88rem;text-align:left; } .settings-toggle-row[aria-pressed="true"] .theme-switch-knob{transform:translateX(18px);} .settings-toggle-row[aria-pressed="true"] .theme-switch{background:var(--mist-2);} /* ---------- Google Translate widget overrides ---------- The widget is triggered entirely through our own button (via the googtrans cookie) — its default toolbar/banner/tooltip UI is hidden so it never shows Google's own chrome or pushes the page down. */ body{top:0 !important;position:static !important;} /* Google's banner toolbar class is a hashed/obfuscated name that changes across releases (e.g. "VIpgJd-ZVi9od-ORHb-OEVmcd") — targeting that directly is fragile. "skiptranslate" on the other hand is the one stable class Google has kept on every iframe/element belonging to its own UI for years, so hide every top-level iframe carrying it instead. */ iframe.skiptranslate, .goog-te-gadget-icon, .goog-te-gadget-simple .goog-te-menu-value span:first-child, #google_translate_element{display:none !important;} .goog-tooltip, .goog-tooltip:hover{display:none !important;} .goog-text-highlight{background:none !important;box-shadow:none !important;border:none !important;} /* ---------- Top utility bar ---------- */ .topbar{ background:var(--deep-blue); color:rgba(255,255,255,0.85); font-size:0.82rem; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; } .topbar-links{display:flex;gap:22px;align-items:center;} .topbar-links a{display:flex;align-items:center;gap:6px;color:inherit;opacity:.92;} .topbar-social{display:flex;gap:14px;} .topbar-social a{opacity:.75;transition:opacity .2s;} .topbar-social a:hover{opacity:1;} @media (max-width:760px){ .topbar{display:none;} } /* ---------- Header ---------- */ header.site{ position:sticky;top:0;z-index:200; border-bottom:1px solid var(--line); transition:box-shadow .3s ease, padding .3s ease; } /* Blur lives on a pseudo-element, not on header.site itself — backdrop-filter on an ancestor creates a new containing block for position:fixed descendants (like the mobile nav drawer), which breaks it. Keeping header.site free of transform/filter/backdrop-filter keeps position:fixed anchored to the real viewport. */ header.site::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--white); } header.site.scrolled{box-shadow:0 8px 30px -12px rgba(15,46,138,0.18);} .nav-wrap{ display:flex;align-items:center;justify-content:space-between; padding:14px 0; width:min(1360px,94%);margin-inline:auto; gap:20px; } .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;} .logo-mark{object-fit:contain;flex-shrink:0;} .logo .logotype{font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.28rem;line-height:1;white-space:nowrap;} .logo .logotype .care{ display:block;font-family:'Inter','Noto Sans Malayalam',sans-serif;font-weight:600;font-size:0.62rem;letter-spacing:0.22em; color:var(--royal-blue);margin-top:3px;white-space:normal;max-width:150px;text-align:center; } nav.primary{display:flex;align-items:center;gap:24px;flex-shrink:1;} nav.primary a{ font-size:0.89rem;font-weight:600;color:var(--ink);position:relative;padding:6px 0; white-space:nowrap; } nav.primary a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:2px; background:var(--wave-grad);transition:width .25s ease;border-radius:2px; } nav.primary a:hover::after{width:100%;} nav.primary a .nav-link-ic{display:none;} .nav-drawer-head, .nav-drawer-foot{display:none;} .nav-drawer-links{display:contents;} .nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;} .nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;color:var(--deep-blue);white-space:nowrap;} .burger{display:none;flex-direction:column;gap:5px;width:26px;flex-shrink:0;} .burger span{height:2px;background:var(--ink);border-radius:2px;transition:.3s;} .nav-backdrop{ position:fixed;inset:0;background:rgba(8,15,30,0.52); opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:190; backdrop-filter:blur(2px); } .nav-backdrop.show{opacity:1;pointer-events:auto;} body.nav-open{overflow:hidden;} @media (max-width:1220px){ /* ---------- Mobile side menu (drawer) ---------- Restructured into head (brand + close) / scrollable link list / foot (phone, CTA, theme toggle) instead of a bare centered list, with a soft brand-gradient glow and a rounded "sheet" edge. */ nav.primary{ position:fixed;inset:0 0 0 auto;width:min(340px,86%);height:100vh;height:100dvh; background:var(--wave-grad-pale); flex-direction:column;align-items:stretch;justify-content:flex-start; padding:0;gap:0; transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1); box-shadow:-30px 0 70px rgba(8,15,30,0.28); z-index:260; border-radius:28px 0 0 28px; overflow:hidden; } nav.primary::before{ content:"";position:absolute;top:-90px;right:-90px;width:240px;height:240px; border-radius:50%;background:var(--wave-grad);filter:blur(54px);opacity:0.28; pointer-events:none; } nav.primary.open{transform:translateX(0);} .nav-drawer-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:22px 20px;border-bottom:1px solid var(--line); position:relative;z-index:1;flex-shrink:0; } .nav-drawer-brand{display:flex;align-items:center;gap:10px;font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.02rem;color:var(--ink);} .nav-drawer-brand img{width:24px;height:27px;object-fit:contain;flex-shrink:0;} .nav-drawer-close{ width:36px;height:36px;border-radius:50%;background:rgba(var(--ink-rgb),0.07); display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0; transition:background .2s ease, transform .3s ease; } .nav-drawer-close:hover{background:rgba(var(--ink-rgb),0.14);transform:rotate(90deg);} .nav-drawer-close svg{width:16px;height:16px;} .nav-drawer-links{ display:flex;flex-direction:column;gap:3px;padding:14px 14px;overflow-y:auto; flex:1 1 auto;min-height:0;position:relative;z-index:1; } nav.primary a{ font-size:0.98rem;color:var(--ink);padding:13px 14px;border-radius:14px; display:flex;align-items:center;gap:14px; transition:background .2s ease; opacity:0;transform:translateX(16px); white-space:normal;line-height:1.3; } nav.primary a::after{display:none;} nav.primary a:hover{background:rgba(var(--ink-rgb),0.07);} nav.primary.open a{ opacity:1;transform:translateX(0); transition:background .2s ease, opacity .4s ease, transform .4s ease; } nav.primary.open a:nth-child(1){transition-delay:.05s;} nav.primary.open a:nth-child(2){transition-delay:.09s;} nav.primary.open a:nth-child(3){transition-delay:.13s;} nav.primary.open a:nth-child(4){transition-delay:.17s;} nav.primary.open a:nth-child(5){transition-delay:.21s;} nav.primary.open a:nth-child(6){transition-delay:.25s;} nav.primary.open a:nth-child(7){transition-delay:.29s;} nav.primary a .nav-link-ic{ display:flex;width:19px;height:19px;flex-shrink:0;color:var(--royal-blue); } .nav-drawer-foot{ display:flex;flex-direction:column;gap:12px;padding:18px 20px 24px; border-top:1px solid var(--line);position:relative;z-index:1;flex-shrink:0; } .nav-drawer-phone{display:flex;align-items:center;gap:10px;font-weight:700;font-size:0.92rem;color:var(--ink);} .nav-drawer-phone svg{color:var(--royal-blue);flex-shrink:0;} .nav-drawer-foot .btn-primary{width:100%;padding:14px;} .nav-phone span.txt{display:none;} /* The drawer has its own close button now, so the burger fades out instead of morphing into a second, overlapping close affordance. */ .nav-cta .theme-toggle-icon{display:none;} .burger{display:flex;z-index:270;transition:opacity .2s ease;} nav.primary.open ~ .nav-cta .burger{opacity:0;pointer-events:none;} /* "Book Free Trial" translated into another language can run noticeably longer than the English original — wrapping it onto a second line keeps the header row from being pushed wider than the screen, instead of the fixed-width, no-wrap button forcing an overflow (this was cutting content off the edge of the screen under Google Translate). Applies regardless of which language the button ends up in, not just Malayalam. */ .nav-cta .btn-primary{white-space:normal;text-align:center;max-width:130px;line-height:1.25;} /* Belt-and-braces: if the translated CTA text is STILL too wide to share a row with the burger button even after wrapping/capping its width above, let the row wrap instead of pushing the burger off-screen — the burger (the only way to open the menu on mobile) must never become inaccessible, in any language. */ .nav-cta{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;} } @media (max-width:1220px) and (prefers-reduced-motion: reduce){ nav.primary a{opacity:1;transform:none;transition:background .2s ease;} } @media (max-width:460px){ .nav-cta .btn-primary{padding:11px 16px !important;font-size:0.78rem !important;} .nav-phone{display:none;} .hero-points{grid-template-columns:1fr;} .hero-points li{font-size:0.86rem;} } /* ---------- Hero ---------- */ .hero{ position:relative; padding:76px 0 100px; background: radial-gradient(circle at 85% 8%, rgba(11,166,160,0.10), transparent 45%), radial-gradient(circle at 8% 90%, rgba(34,178,76,0.10), transparent 45%), var(--mist); overflow:hidden; } .hero-grid{ display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center; } .hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem); line-height:1.08; margin-bottom:22px; } .hero p.lead{ font-size:1.08rem;color:var(--slate);max-width:520px;margin-bottom:32px; } .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;} @media(max-width:640px){ .hero-ctas{justify-content:center;} } .hero-points{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px; text-align:left; } .hero-points li{ display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;font-weight:700;color:var(--ink); text-align:left;line-height:1.35; } .hero-points svg{flex-shrink:0;margin-top:1px;} .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;} .orb{ position:absolute;width:430px;height:430px;border-radius:50%; background:var(--wave-grad); filter:blur(2px); opacity:0.14; } .hero-card{ position:relative;z-index:2; background:var(--white); border-radius:28px; box-shadow:var(--shadow-lg); padding:34px; width:100%; max-width:440px; } .hero-card .badge-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;} .hero-card .pill{ background:var(--mist-2);color:var(--royal-blue);font-weight:700;font-size:0.72rem; padding:6px 12px;border-radius:100px;letter-spacing:.03em; } .wave-bars{display:flex;align-items:flex-end;gap:5px;height:34px;} .wave-bars span{ width:4px;border-radius:3px;background:var(--wave-grad); animation:bar 1.1s ease-in-out infinite; } .wave-bars span:nth-child(1){height:40%;animation-delay:0s;} .wave-bars span:nth-child(2){height:80%;animation-delay:.1s;} .wave-bars span:nth-child(3){height:100%;animation-delay:.2s;} .wave-bars span:nth-child(4){height:60%;animation-delay:.3s;} .wave-bars span:nth-child(5){height:90%;animation-delay:.4s;} .wave-bars span:nth-child(6){height:45%;animation-delay:.5s;} @keyframes bar{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}} @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;} .hero-visual{order:-1;margin-bottom:10px;} } /* ---------- Trust strip ---------- */ .trust{ background:var(--ink); padding:26px 0; } .trust .container{ display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center; } .trust-item{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:0.85rem;font-weight:600;opacity:.9;} /* ---------- Section shared ---------- */ section{padding:52px 0;} .section-head{max-width:640px;margin-bottom:34px;} .section-head.center{margin-inline:auto;text-align:center;} .section-head h2{font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:16px;} .section-head p{color:var(--slate);font-size:1.03rem;} /* ---------- About ---------- */ .about{background:var(--wash);padding-top:40px;} .lab{background:var(--wash);} .scan-ring{animation:scanSpin 14s linear infinite;transform-origin:170px 180px;} @keyframes scanSpin{to{transform:rotate(360deg);}} .scan-ticks line{opacity:0.7;} #brand-products{padding-top:44px;padding-bottom:36px;background:var(--wash);} .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;} .about-visual{position:relative;} .about-visual .frame{ position:relative; border-radius:26px;overflow:hidden;background:var(--wave-grad-soft); aspect-ratio:1/1.05; display:flex;align-items:center;justify-content:center; border:1px solid var(--line); } .diagram-tag{ position:absolute;max-width:158px; background:var(--white);border:1px solid var(--line);border-radius:12px; padding:8px 11px;font-size:0.7rem;font-weight:700;color:var(--ink);line-height:1.35; box-shadow:var(--shadow-sm);display:flex;gap:7px;align-items:flex-start; } .diagram-tag i{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;} .pulse-ring{transform-origin:170px 180px;animation:pulseRing 3.6s ease-in-out infinite;} @keyframes pulseRing{0%,100%{opacity:0.06;transform:scale(1);}50%{opacity:0.13;transform:scale(1.06);}} .callout-dots circle{animation:dotBlip 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;} .callout-dots circle:nth-child(2){animation-delay:.35s;} .callout-dots circle:nth-child(3){animation-delay:.7s;} @keyframes dotBlip{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}} @media(max-width:640px){ .diagram-tag{font-size:0.64rem;max-width:118px;padding:6px 8px;} } .about-list{display:grid;gap:22px;margin-top:30px;} .about-list li{display:flex;gap:16px;align-items:flex-start;} /* Soft tinted circles instead of solid gradient squares — each item cycles through a brand hue (tint behind, same hue for the icon itself) so the list reads as more varied and less "block of gradient" heavy. */ .about-list .ic{ width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; background:color-mix(in srgb, var(--deep-blue) 13%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--deep-blue) 22%, transparent); color:var(--deep-blue); } .about-list li:nth-child(4n+2) .ic{ background:color-mix(in srgb, var(--azure) 13%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--azure) 22%, transparent); color:var(--azure); } .about-list li:nth-child(4n+3) .ic{ background:color-mix(in srgb, var(--teal) 13%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--teal) 22%, transparent); color:var(--teal); } .about-list li:nth-child(4n) .ic{ background:color-mix(in srgb, var(--green) 13%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 22%, transparent); color:var(--green); } .about-list h4{font-size:1.02rem;margin-bottom:4px;} .about-list p{color:var(--slate);font-size:0.92rem;} @media(max-width:900px){.about-grid{grid-template-columns:1fr;}} /* ---------- Signs grid ---------- */ .signs{background:var(--wash);} .signs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .sign-card{ background:var(--white);border-radius:20px;padding:30px 26px;border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; } .sign-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);} .sign-card .ic{ width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center;margin-bottom:18px; background:color-mix(in srgb, var(--deep-blue) 13%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--deep-blue) 22%, transparent); color:var(--deep-blue); } .sign-card:nth-child(4n+2) .ic{background:color-mix(in srgb, var(--azure) 13%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--azure) 22%, transparent);color:var(--azure);} .sign-card:nth-child(4n+3) .ic{background:color-mix(in srgb, var(--teal) 13%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--teal) 22%, transparent);color:var(--teal);} .sign-card:nth-child(4n) .ic{background:color-mix(in srgb, var(--green) 13%, transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 22%, transparent);color:var(--green);} .sign-card h4{font-size:1.02rem;margin-bottom:8px;} .sign-card p{font-size:0.88rem;color:var(--slate);} @media(max-width:980px){.signs-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.signs-grid{grid-template-columns:1fr;}} /* ---------- Products ---------- */ .cat-strip{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px;} .cat-chip{ display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px; background:var(--mist);border:1px solid var(--line);font-size:0.82rem;font-weight:600;color:var(--ink); } @media(max-width:640px){ .cat-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .cat-chip{justify-content:center;text-align:center;font-size:0.74rem;padding:9px 8px;} } .products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .prod-card{ border-radius:24px;padding:30px 26px;position:relative;overflow:hidden; border:1px solid var(--line);background:var(--white); display:flex;flex-direction:column;gap:14px; transition:transform .3s ease, box-shadow .3s ease; } .prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);} .prod-card .top-ic{ width:58px;height:58px;border-radius:16px;background:var(--wave-grad); display:flex;align-items:center;justify-content:center; } .prod-thumb{ width:calc(100% + 52px);margin:-30px -26px 4px; aspect-ratio:1/0.66;border-radius:20px 20px 0 0; background:var(--wave-grad-soft); display:flex;align-items:center;justify-content:center; } .prod-thumb svg{width:46%;height:auto;} .prod-card h4{font-size:1.08rem;} .prod-card p{font-size:0.87rem;color:var(--slate);flex-grow:1;} .prod-card .link{font-size:0.85rem;font-weight:700;color:var(--royal-blue);display:flex;align-items:center;gap:6px;} @media(max-width:980px){.products-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.products-grid{grid-template-columns:1fr;}} /* ---------- CTA banner ---------- */ .cta-banner{background:transparent;padding:48px 0;border:none;} .cta-banner-inner{ background:var(--wave-grad-pale);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-sm); padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; position:relative;overflow:hidden; } .cta-banner-inner::before{ content:"";position:absolute;top:-40%;right:-6%;width:220px;height:220px;border-radius:50%; background:var(--wave-grad);opacity:0.10;pointer-events:none; } .cta-banner-inner h3{color:var(--ink);font-size:1.3rem;margin-bottom:4px;position:relative;} .cta-banner-inner p{color:var(--slate);font-size:0.92rem;position:relative;} .cta-banner-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;position:relative;} .cta-banner-btns .btn-outline{color:var(--deep-blue);border-color:var(--line);background:var(--white);} .cta-banner-btns .btn-outline:hover{background:var(--mist);border-color:var(--royal-blue);} @media(max-width:700px){ .cta-banner{padding:32px 0;} .cta-banner-inner{flex-direction:column;text-align:center;padding:30px 24px;border-radius:22px;} .cta-banner-btns{justify-content:center;width:100%;flex-direction:column;} .cta-banner-btns .btn{width:100%;text-align:center;} } /* ---------- Services ---------- */ .services{background:var(--white);} .services-grid{ display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 175px)); justify-content:center;gap:16px; } .service-card{ background:var(--wash);border:1px solid var(--line);border-radius:18px;padding:16px 14px; display:flex;flex-direction:column;gap:6px;transition:transform .3s ease, box-shadow .3s ease; } .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);} .service-img{ width:100%;aspect-ratio:16/9;border-radius:11px;background:var(--wave-grad-medium); display:flex;align-items:center;justify-content:center;margin-bottom:4px; flex-shrink:0;overflow:hidden; } .service-img svg{width:22px;height:22px;} .service-img img{width:100%;height:100%;object-fit:cover;display:block;} .service-card h4{font-size:0.92rem;font-weight:800;line-height:1.25;} .service-card p{font-size:0.78rem;color:var(--slate);flex-grow:1;line-height:1.4;} .service-card .link{font-size:0.76rem;font-weight:700;color:var(--royal-blue);display:flex;align-items:center;gap:4px;} @media(max-width:560px){.services-grid{grid-template-columns:repeat(2,1fr);}} /* ---------- Brands ---------- */ .brands{background:var(--wash);padding-bottom:44px;} .brands-grid{ display:grid;grid-template-columns:repeat(6,1fr);gap:18px; } .brand-card{ background:var(--white);border:1px solid var(--line);border-radius:18px; padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:12px; text-align:center;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .brand-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:transparent;} .brand-mark{ font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-0.01em; background:var(--wave-grad);-webkit-background-clip:text;background-clip:text;color:transparent; } .brand-logo{width:100%;height:36px;display:flex;align-items:center;justify-content:center;} .brand-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;} .brand-tag{font-size:0.72rem;color:var(--slate);font-weight:600;} @media(max-width:980px){.brands-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:560px){.brands-grid{grid-template-columns:repeat(2,1fr);}} /* ---------- Products by brand ---------- */ .bp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .bp-card{ border-radius:22px;border:1px solid var(--line);background:var(--white);overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; } .bp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .bp-head{ padding:20px 22px 0;background:var(--wave-grad-soft);border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:2px; } .bp-head .brand-mark{align-self:flex-start;} .bp-thumb{display:flex;align-items:center;justify-content:center;height:108px;} .bp-thumb svg{width:78px;height:78px;} .bp-body{padding:22px 24px 26px;} .bp-body h4{font-size:1rem;margin-bottom:8px;} .bp-body p{font-size:0.86rem;color:var(--slate);margin-bottom:16px;} .bp-price{font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:14px;} .bp-price span{font-family:'Inter','Noto Sans Malayalam',sans-serif;font-weight:600;font-size:0.75rem;color:var(--slate);} @media(max-width:980px){.bp-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.bp-grid{grid-template-columns:1fr;}} /* ---------- Tech banner ---------- */ .tech{ background:var(--wave-grad-pale); color:var(--ink); position:relative; overflow:hidden; } .tech::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 90% 20%, rgba(11,47,143,0.05), transparent 40%); } .tech .container{position:relative;z-index:1;} .tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} .tech h2{color:var(--ink);font-size:clamp(1.9rem,3vw,2.4rem);margin-bottom:18px;} .tech p{color:var(--slate);margin-bottom:28px;max-width:480px;} .tech-feats{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .tech-feat{ background:var(--white);border:1px solid var(--line); border-radius:16px;padding:20px;box-shadow:var(--shadow-sm); } .tech-feat .ic{margin-bottom:12px;color:var(--royal-blue);} .tech-feat h4{color:var(--ink);font-size:0.95rem;margin-bottom:4px;} .tech-feat p{color:var(--slate);font-size:0.82rem;margin:0;} @media(max-width:900px){.tech-grid{grid-template-columns:1fr;}} /* ---------- Process ---------- */ #process{background:var(--wash);} .process-steps{ display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative; } .process-steps::before{ /* Line must land on the exact center of the circles, both axes: horizontally 12.5%/87.5% (center of the outer columns in a 4x 1fr grid), vertically the .idx's own center — 22px (.p-step padding-top) + 28px (half of the 56px circle) = 50px from the top of .p-step. */ content:"";position:absolute;top:50px;left:12.5%;right:12.5%;height:2px; background:var(--wave-grad);opacity:0.3; z-index:0; } .p-step{ position:relative;z-index:1;text-align:center;padding:22px 16px;border-radius:20px; transition:background .25s ease, transform .25s ease; } .p-step:hover{background:var(--white);transform:translateY(-4px);box-shadow:var(--shadow-sm);} .p-step .idx{ width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;margin:0 auto 20px; font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800; background-clip:padding-box;position:relative; /* Mixed with --page-bg (the solid color under this section's --wash gradient wash — --wash itself is a multi-layer background image, not a , so color-mix() silently rejects it and the circle ends up fully transparent). The connecting line sits behind these circles, so they need a real opaque fill or the line bleeds straight through. */ background:color-mix(in srgb, var(--deep-blue) 13%, var(--page-bg)); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--deep-blue) 26%, transparent); color:var(--deep-blue); } .p-step:nth-child(4n+2) .idx{background:color-mix(in srgb, var(--azure) 13%, var(--page-bg));box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--azure) 26%, transparent);color:var(--azure);} .p-step:nth-child(4n+3) .idx{background:color-mix(in srgb, var(--teal) 13%, var(--page-bg));box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--teal) 26%, transparent);color:var(--teal);} .p-step:nth-child(4n) .idx{background:color-mix(in srgb, var(--green) 13%, var(--page-bg));box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--green) 26%, transparent);color:var(--green);} .p-step h4{font-size:1rem;margin-bottom:8px;} .p-step p{font-size:0.85rem;color:var(--slate);} @media(max-width:900px){ .process-steps{grid-template-columns:1fr;gap:0;padding-left:6px;} .process-steps::before{display:none;} .p-step{text-align:left;padding:0 0 30px 58px;border-radius:14px;} .p-step:hover{background:transparent;transform:none;box-shadow:none;} .p-step:last-child{padding-bottom:0;} .p-step .idx{position:absolute;left:0;top:0;margin:0;width:44px;height:44px;font-size:0.92rem;} .p-step::after{ content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px; background:color-mix(in srgb, var(--deep-blue) 20%, transparent); } .p-step:last-child::after{display:none;} .p-step h4{padding-top:8px;margin-bottom:4px;} } /* ---------- Testimonials ---------- */ .testimonials{background:var(--wash);} .test-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .test-card{ background:var(--white);border-radius:20px;padding:30px;border:1px solid var(--line); display:flex;flex-direction:column;gap:18px; } .stars{display:flex;gap:4px;} .test-card p.quote{font-size:0.94rem;color:var(--ink);line-height:1.65;} .test-person{display:flex;align-items:center;gap:12px;margin-top:auto;} .avatar{ width:42px;height:42px;border-radius:50%;background:var(--wave-grad); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.9rem; } .test-person .name{font-weight:700;font-size:0.9rem;} .test-person .loc{font-size:0.78rem;color:var(--slate);} @media(max-width:900px){.test-track{grid-template-columns:1fr;}} /* ---------- CTA / Contact ---------- */ .contact{position:relative;background:var(--wash);} .contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:0; border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg); } .contact-info{ background:var(--wave-grad-pale);color:var(--ink);padding:54px 46px; display:flex;flex-direction:column;justify-content:center;gap:26px; } .contact-info h3{color:var(--ink);font-size:1.7rem;} .contact-info p{color:var(--slate);font-size:0.95rem;} .contact-detail{display:flex;gap:14px;align-items:flex-start;} .contact-detail .ic{ width:42px;height:42px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; background:color-mix(in srgb, var(--deep-blue) 14%, var(--white)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--deep-blue) 24%, transparent); color:var(--deep-blue); } .contact-detail:nth-of-type(4n+2) .ic{background:color-mix(in srgb, var(--azure) 14%, var(--white));box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--azure) 24%, transparent);color:var(--azure);} .contact-detail:nth-of-type(4n+3) .ic{background:color-mix(in srgb, var(--teal) 14%, var(--white));box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--teal) 24%, transparent);color:var(--teal);} .contact-detail:nth-of-type(4n) .ic{background:color-mix(in srgb, var(--green) 14%, var(--white));box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 24%, transparent);color:var(--green);} .contact-detail h5{color:var(--ink);font-size:0.9rem;margin-bottom:3px;} .contact-detail span{color:var(--slate);font-size:0.85rem;} .contact-form{background:var(--white);padding:54px 46px;} .contact-social{margin:18px 0 14px;text-align:center;} .contact-social-title{margin-bottom:10px;color:var(--ink);font-size:0.9rem;font-weight:700;} .contact-social-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;} .contact-social-links a{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:42px;padding:9px 14px;border:1px solid var(--line);border-radius:10px; color:var(--ink);font-size:0.86rem;font-weight:700;transition:background .2s ease,border-color .2s ease; } .contact-social-links a:hover{background:var(--mist);border-color:var(--royal-blue);} .contact-social-links a:focus-visible{outline:3px solid color-mix(in srgb,var(--royal-blue) 45%,transparent);outline-offset:2px;} .contact-social-links svg{width:19px;height:19px;flex:none;fill:currentColor;} .contact-social-links a:first-child svg{color:#25D366;} .contact-social-links a:last-child .instagram-icon{fill:none;stroke:url(#instagramGradient);stroke-width:1.8;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:0.8rem;font-weight:700;color:var(--ink);} .field input, .field select, .field textarea{ border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit; font-size:0.92rem;color:var(--ink);transition:border-color .2s ease, box-shadow .2s ease; background:var(--mist); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none;border-color:var(--royal-blue);box-shadow:0 0 0 4px rgba(var(--royal-blue-rgb),0.16);background:var(--white); } @media(max-width:640px){ .contact-info,.contact-form{padding:38px 26px;} /* 16px minimum keeps iOS Safari from auto-zooming the page on input focus */ .field input, .field select, .field textarea, .search-box input{font-size:16px;} } .field textarea{resize:vertical;min-height:100px;} .full{grid-column:1/-1;} .form-note{font-size:0.78rem;color:var(--slate);margin-top:12px;} .form-success{ display:none;align-items:center;gap:10px;background:var(--success-bg);color:var(--success-text); padding:14px 16px;border-radius:12px;font-size:0.88rem;font-weight:600;margin-top:16px; } .form-success.show{display:flex;} .form-error{ display:none;align-items:center;gap:10px;background:var(--danger-bg);color:var(--danger-text); padding:14px 16px;border-radius:12px;font-size:0.88rem;font-weight:600;margin-top:16px; } .form-error.show{display:flex;} @media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} } /* ---------- Footer ---------- */ footer{background:var(--wave-grad-pale);color:var(--slate);padding-top:80px;} .footer-grid{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:50px;padding-bottom:56px; border-bottom:1px solid var(--line); } .footer-grid-home{grid-template-columns:repeat(3,minmax(0,1fr));} .footer-brand .logotype{color:var(--ink);font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.3rem;} .footer-brand p{margin:16px 0 22px;font-size:0.88rem;color:var(--slate);max-width:280px;} .footer-social{display:flex;gap:12px;} .footer-social a{ width:38px;height:38px;border-radius:50%;background:rgba(var(--ink-rgb),0.06);color:var(--ink); display:flex;align-items:center;justify-content:center;transition:background .2s ease, color .2s ease; } .footer-social a:hover{background:var(--wave-grad);color:#fff;} footer h5{color:var(--ink);font-size:0.92rem;margin-bottom:20px;letter-spacing:.03em;} footer ul{display:grid;gap:12px;} footer ul li{font-size:0.87rem;color:var(--slate);line-height:1.5;} footer ul a{font-size:inherit;color:inherit;transition:color .2s ease;} footer ul a:hover{color:var(--royal-blue);} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;padding:26px 0; font-size:0.8rem;color:var(--slate);flex-wrap:wrap;gap:12px; } .footer-bottom-home{justify-content:center;text-align:center;} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){ .footer-grid{grid-template-columns:1fr;} .footer-grid > div{text-align:center;} .footer-brand p{margin-left:auto;margin-right:auto;} .footer-social{justify-content:center;} .footer-bottom{justify-content:center;text-align:center;} } /* ---------- Reveal animation ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1;transform:translateY(0);} /* Back to top */ .to-top{ position:fixed;right:24px;bottom:96px;z-index:150; width:48px;height:48px;border-radius:50%;background:var(--btn-grad); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm); opacity:0;pointer-events:none;transform:translateY(10px);transition:all .3s ease; } .to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);} @media(max-width:480px){ .to-top{right:16px;bottom:82px;width:44px;height:44px;} } ::selection{background:rgba(11,166,160,0.25);} /* ============================================================ Shared: sub-page header (used on products / product / admin) ============================================================ */ .page-hero{ background: radial-gradient(circle at 85% 8%, rgba(11,166,160,0.10), transparent 45%), radial-gradient(circle at 8% 90%, rgba(34,178,76,0.10), transparent 45%), var(--wash); padding:56px 0 44px; border-bottom:1px solid var(--line); } .breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--slate);margin-bottom:14px;} .breadcrumb a{color:var(--royal-blue);font-weight:600;} .page-hero h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:10px;} .page-hero p{color:var(--slate);max-width:560px;} /* ---------- Product listing ---------- */ .catalog{padding:56px 0 104px;background:var(--wash);} .catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;} .filters{ background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px; position:sticky;top:100px; } .filters h4{font-size:0.92rem;margin-bottom:16px;} .filter-group{margin-bottom:24px;} .filter-group:last-child{margin-bottom:0;} .filter-group .flabel{font-size:0.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-bottom:10px;display:block;} .chip-list{display:flex;flex-wrap:wrap;gap:8px;} .chip{ padding:7px 14px;border-radius:100px;border:1.5px solid var(--line);font-size:0.8rem;font-weight:600; cursor:pointer;transition:all .2s ease;background:var(--white);color:var(--ink); } .chip.active{background:var(--btn-grad);border-color:transparent;color:#fff;} .search-box{position:relative;} .search-box input{ width:100%;padding:11px 14px 11px 38px;border:1.5px solid var(--line);border-radius:12px; font-family:inherit;font-size:0.88rem;background:var(--mist); } .search-box input:focus{outline:none;border-color:var(--royal-blue);background:var(--white);} .search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--slate);} .catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .catalog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;} .catalog-count{font-size:0.88rem;color:var(--slate);} .empty-state{ grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--slate); border:1.5px dashed var(--line);border-radius:20px; } @media(max-width:980px){ .catalog-layout{grid-template-columns:1fr;} .filters{position:static;} .catalog-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:640px){.catalog-grid{grid-template-columns:1fr;}} /* ---------- Product detail ---------- */ .product-detail{padding:64px 0 104px;background:var(--wash);} .pd-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:flex-start;} .pd-visual{ background:var(--wave-grad-soft);border:1px solid var(--line);border-radius:26px; aspect-ratio:1/0.95;display:flex;align-items:center;justify-content:center;position:sticky;top:100px; } .pd-badge{display:inline-flex;align-items:center;gap:8px;background:var(--mist-2);color:var(--royal-blue); font-weight:700;font-size:0.76rem;padding:6px 14px;border-radius:100px;margin-bottom:16px;} .pd-info h1{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:10px;} .pd-tagline{color:var(--slate);font-size:1.02rem;margin-bottom:22px;} .pd-price{font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:2rem;margin-bottom:6px;} .pd-price span{font-family:'Inter','Noto Sans Malayalam',sans-serif;font-weight:600;font-size:0.8rem;color:var(--slate);} .pd-ctas{display:flex;gap:14px;margin:26px 0 36px;flex-wrap:wrap;} .pd-section{margin-bottom:32px;} .pd-section h3{font-size:1.1rem;margin-bottom:14px;} .pd-section p{color:var(--slate);font-size:0.96rem;} .feature-list{display:grid;gap:12px;} .feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:0.92rem;color:var(--ink);} .spec-table{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;} .spec-row{display:grid;grid-template-columns:1fr 1.4fr;padding:13px 18px;font-size:0.88rem;} .spec-row:nth-child(odd){background:var(--mist);} .spec-row .k{font-weight:700;color:var(--slate);} @media(max-width:900px){.pd-grid{grid-template-columns:1fr;} .pd-visual{position:static;}} /* ============================================================ Admin — login ============================================================ */ .admin-login-wrap{ min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px; background: var(--wave-grad-pale); } .admin-login-card{ background:var(--white);border-radius:26px;padding:44px 40px;width:100%;max-width:400px; box-shadow:var(--shadow-lg); } @media(max-width:460px){ .admin-login-wrap{padding:16px;} .admin-login-card{padding:32px 24px;border-radius:20px;} } .admin-login-card .logo{justify-content:center;margin-bottom:26px;} .admin-login-card h2{text-align:center;font-size:1.35rem;margin-bottom:8px;} .admin-login-card .sub{text-align:center;color:var(--slate);font-size:0.88rem;margin-bottom:30px;} .admin-error{ display:none;background:var(--danger-bg);color:var(--danger-text);padding:12px 14px;border-radius:12px; font-size:0.85rem;font-weight:600;margin-bottom:18px;align-items:center;gap:8px; } .admin-error.show{display:flex;} .admin-hint{ margin-top:22px;padding:14px 16px;background:var(--mist);border-radius:12px; font-size:0.78rem;color:var(--slate);text-align:center; } /* ============================================================ Admin — dashboard ============================================================ */ .admin-shell{min-height:100vh;background:var(--wash);} .admin-topbar{ background:var(--white); border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:0;z-index:100; } .admin-topbar .container{display:flex;justify-content:space-between;align-items:center;gap:10px;} .admin-user{display:flex;align-items:center;gap:12px;} @media(max-width:480px){ .admin-user a{display:none;} .admin-user #adminEmailLabel{display:none !important;} .admin-user .btn{padding:8px 12px !important;font-size:0.76rem !important;} .logo .logotype .care{display:none;} } .admin-user .av{width:36px;height:36px;border-radius:50%;background:var(--wave-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.85rem;} .admin-main{padding:44px 0 90px;} .admin-mobile-menu{display:none;} .admin-tabs{display:flex;gap:8px;margin-bottom:28px;border-bottom:1px solid var(--line);} .admin-tab{ padding:12px 18px;font-weight:700;font-size:0.9rem;color:var(--slate);border-bottom:2px solid transparent; margin-bottom:-1px;cursor:pointer;transition:color .2s ease, border-color .2s ease; } .admin-tab:hover{color:var(--ink);} .admin-tab.active{color:var(--royal-blue);border-bottom-color:var(--royal-blue);} .admin-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;flex-wrap:wrap;gap:16px;} .admin-head h1{font-size:1.7rem;} .admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px;} .astat{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px;} .astat .num{font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.6rem;} .astat .lbl{font-size:0.8rem;color:var(--slate);font-weight:600;} @media(max-width:900px){.admin-stats{grid-template-columns:repeat(2,1fr);}} @media(max-width:900px){ .admin-tabs{ overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin; -webkit-overflow-scrolling:touch;padding-bottom:2px; } .admin-tab{flex:0 0 auto;white-space:nowrap;} } .admin-table-wrap{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow-x:auto;} .admin-table{width:100%;border-collapse:collapse;min-width:640px;} .admin-table th{ text-align:left;font-size:0.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--slate); padding:16px 20px;background:var(--mist);border-bottom:1px solid var(--line); } .admin-table td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:0.9rem;vertical-align:middle;} .admin-table tr:last-child td{border-bottom:none;} .admin-table .pname{font-weight:700;} .admin-table .pbrand{font-size:0.78rem;color:var(--slate);} .row-actions{display:flex;gap:8px;} .icon-btn{ width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center; justify-content:center;transition:all .2s ease;color:var(--slate); } .icon-btn:hover{border-color:var(--royal-blue);color:var(--royal-blue);background:var(--mist);} .icon-btn.danger:hover{border-color:#E74C3C;color:#E74C3C;} .tag{display:inline-block;padding:4px 10px;border-radius:100px;background:var(--mist-2);color:var(--royal-blue);font-size:0.74rem;font-weight:700;} /* ---------- Modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(10,18,36,0.55);display:none;align-items:center;justify-content:center; z-index:400;padding:24px;backdrop-filter:blur(3px); } .modal-overlay.show{display:flex;} .modal{ background:var(--white);border-radius:24px;width:100%;max-width:620px;max-height:88vh;overflow-y:auto; padding:36px 38px;box-shadow:var(--shadow-lg); } .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;} .modal-head h3{font-size:1.25rem;} .modal-close{width:34px;height:34px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;} .modal .field{margin-bottom:16px;} .img-dropzone{ position:relative;border:1.5px dashed var(--line);border-radius:14px;padding:20px; background:var(--mist);transition:border-color .2s ease, background .2s ease;text-align:center; } .img-dropzone:hover{border-color:var(--royal-blue);background:var(--mist-2);} #imgEmptyState{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--slate);pointer-events:none;} #imgEmptyState span{font-size:0.85rem;font-weight:600;color:var(--ink);} .img-dropzone-hint{font-size:0.72rem !important;font-weight:500 !important;color:var(--slate) !important;} #imgPreviewWrap{display:flex;flex-direction:column;align-items:center;gap:12px;} #imgPreview{max-width:160px;max-height:120px;border-radius:10px;object-fit:contain;background:var(--white);border:1px solid var(--line);} #svImgPreview{width:100%;max-width:280px;aspect-ratio:16/9;border-radius:10px;object-fit:cover;background:var(--white);border:1px solid var(--line);} #imgRemoveBtn{position:relative;z-index:2;} .prod-thumbnail-sm{width:36px;height:36px;border-radius:8px;object-fit:contain;background:var(--mist);border:1px solid var(--line);flex-shrink:0;} .modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;} @media(max-width:640px){ .modal{padding:26px 22px;border-radius:18px;} .modal .form-row{grid-template-columns:1fr;} .modal .field input, .modal .field select, .modal .field textarea{font-size:16px;} .modal-actions{flex-direction:column-reverse;} .modal-actions .btn{width:100%;} } @media(max-width:640px){ .admin-main{padding:28px 0 64px;} .admin-mobile-menu{display:block;position:relative;margin-bottom:18px;z-index:20;} .admin-mobile-menu-trigger{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:10px; background:var(--white);color:var(--ink);font:600 0.92rem 'Inter','Noto Sans Malayalam',sans-serif; text-align:left;box-shadow:0 2px 8px rgba(10,18,36,0.05); } .admin-mobile-menu-trigger svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s ease;} .admin-mobile-menu-trigger[aria-expanded="true"] svg{transform:rotate(180deg);} .admin-mobile-menu-popup{ position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:min(60vh,420px);overflow-y:auto; padding:6px;background:var(--white);border:1px solid var(--line);border-radius:10px; box-shadow:0 14px 34px rgba(10,18,36,0.18);overscroll-behavior:contain; } .admin-mobile-menu-popup[hidden]{display:none;} .admin-mobile-menu-popup button{ display:block;width:100%;min-height:44px;padding:10px 12px;border-radius:7px; color:var(--ink);font:500 0.9rem 'Inter','Noto Sans Malayalam',sans-serif;text-align:left; } .admin-mobile-menu-popup button:hover,.admin-mobile-menu-popup button[aria-selected="true"]{background:var(--mist);color:var(--royal-blue);} .admin-mobile-menu-trigger:focus-visible,.admin-mobile-menu-popup button:focus-visible{outline:3px solid color-mix(in srgb,var(--royal-blue) 45%,transparent);outline-offset:2px;} .admin-tabs{display:none;} .admin-main input,.admin-main select,.admin-main textarea{font-size:16px !important;} .admin-head{align-items:stretch;} .admin-head > div{min-width:0;} .admin-head > .btn{align-self:flex-start;} .admin-head h1{font-size:1.45rem;} .admin-stats{gap:10px;margin-bottom:22px;} .astat{padding:16px;min-width:0;} .admin-table-wrap{border-radius:14px;} .admin-main #addStaffForm{flex-direction:column;} .admin-main #addStaffForm input,.admin-main #addStaffForm .btn{width:100%;} .toast{right:16px;bottom:16px;left:16px;justify-content:center;max-width:calc(100vw - 32px);} } @media(max-width:380px){ .nav-wrap{gap:8px;} .logo{gap:6px;} .logo-mark{width:30px;height:34px;} .logo .logotype{font-size:1.08rem;} .nav-cta{gap:8px;} .nav-cta .btn-primary{max-width:108px;padding:9px 10px !important;font-size:0.72rem !important;} .admin-topbar{padding:12px 0;} .admin-topbar .container{gap:8px;} .admin-topbar .logo{gap:6px;} .admin-topbar .logo .logo-mark{width:24px;height:27px;} .admin-user{gap:6px;} .admin-user .av{width:32px;height:32px;} .admin-user .btn{padding:7px 8px !important;font-size:0.72rem !important;} .admin-stats{grid-template-columns:1fr 1fr;} .astat{padding:12px;} .astat .lbl{font-size:0.72rem;} } .toast{ /* intentionally always-dark (like a snackbar), independent of --ink, which flips to near-white in dark mode and would swallow the text */ position:fixed;bottom:28px;right:28px;background:#101A33;color:#fff;padding:14px 20px;border-radius:14px; font-size:0.88rem;font-weight:600;display:flex;align-items:center;gap:10px;z-index:500; transform:translateY(20px);opacity:0;pointer-events:none;transition:all .3s ease; } .toast.show{transform:translateY(0);opacity:1;} /* ============================================================ WOW LAYER — hero service slider, wave dividers, marquee, count-up stats, headline flourish, card hover glow ============================================================ */ /* ---------- Hero visual: "What We Do" service slider ---------- Content (title/tagline/points/image) is entirely admin-managed via the Firestore "slides" collection — see wzInitServiceSlider in data.js. Hidden by CSS default (inline style) until at least one slide loads. Design: full-bleed photo per slide (fixed aspect-ratio + object-fit:cover, so every slide behaves identically regardless of the uploaded image's own size/shape), heading+points overlaid directly on the image on a brand-ink gradient scrim so they stay readable no matter what the photo looks like. min-width:0 on .hero-visual/.service-slider is not decorative — without it, these being flex/grid items with default min-width:auto means the browser sizes them to fit the image's intrinsic width instead of shrinking to the mobile viewport, which is what was cutting the card off the right edge of the screen and throwing off the swipe math. */ .hero-visual{min-width:0;} .service-slider{ position:relative;z-index:2; width:100%; max-width:460px; min-width:0; border-radius:24px; box-shadow:var(--shadow-lg); overflow:hidden; background:var(--white); } .ss-head{ position:absolute;top:0;left:0;right:0;z-index:3; display:flex;justify-content:space-between;align-items:center;gap:10px; padding:18px;pointer-events:none; } .ss-head > *{pointer-events:auto;} .ss-eyebrow{ display:flex;align-items:center;gap:8px;flex-shrink:0; background:rgba(var(--scrim-rgb),0.45);backdrop-filter:blur(10px);color:#fff; font-weight:700;font-size:0.72rem;text-shadow:0 1px 4px rgba(0,0,0,0.35); padding:6px 12px;border-radius:100px;letter-spacing:.03em; border:1px solid rgba(255,255,255,0.3); } .ss-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);animation:ssDotPulse 1.6s ease-in-out infinite;} @keyframes ssDotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);}} .ss-arrows{display:flex;gap:8px;flex-shrink:0;} .ss-arrow{ width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.3); background:rgba(var(--scrim-rgb),0.45);backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center;color:#fff; transition:background .2s ease, transform .2s ease;flex-shrink:0; } .ss-arrow:hover{background:rgba(var(--scrim-rgb),0.65);} .ss-arrow:active{transform:scale(0.92);} .ss-viewport{min-width:0;touch-action:pan-y;cursor:grab;} .ss-viewport:active{cursor:grabbing;} .ss-track{display:flex;transition:transform .55s cubic-bezier(.65,0,.35,1);} .ss-slide{flex:0 0 100%;min-width:0;} .ss-media{position:relative;width:100%;aspect-ratio:4/5;background:var(--panel-grad);overflow:hidden;} .ss-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .5s ease, transform 9.5s ease-out;transform:scale(1.02); } .ss-media img.ss-loaded{opacity:1;} .ss-slide.ss-active .ss-media img{transform:scale(1.08);} .ss-scrim{ /* Dual vignette — darkest at the bottom (behind the heading/points), a light but present tint at the very top (behind the eyebrow/arrows), clearest in the middle so the photo itself still reads. This is what keeps every overlay legible regardless of how light or dark the admin's uploaded photo happens to be. */ position:absolute;inset:0; background:linear-gradient(to top, rgba(var(--scrim-rgb),0.97) 0%, rgba(var(--scrim-rgb),0.82) 32%, rgba(var(--scrim-rgb),0.18) 58%, rgba(var(--scrim-rgb),0.3) 82%, rgba(var(--scrim-rgb),0.5) 100%); } .ss-content{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:20px 27px 24px;color:#fff; /* Extra dark backing behind the text itself (on top of .ss-scrim), so the heading reads as clearly "highlighted" against the photo regardless of how busy or light that photo is. */ background:linear-gradient(to top, rgba(6,12,24,0.88) 0%, rgba(6,12,24,0.88) 60%, rgba(6,12,24,0) 100%); } .ss-title{font-weight:800;font-size:1.56rem;line-height:1.26;margin-bottom:6px;color:var(--mint);text-shadow:0 2px 10px rgba(0,0,0,0.45);} .ss-tagline{font-size:0.8rem;color:rgba(255,255,255,0.85);font-weight:700;margin-bottom:13px;letter-spacing:.01em;line-height:1.4;} .ss-points{display:grid;gap:8px;} .ss-points li{ display:flex;align-items:flex-start;gap:8px;font-size:0.91rem;color:rgba(255,255,255,0.94);line-height:1.42; } .ss-points li svg{flex-shrink:0;margin-top:3px;color:var(--green-bright);} .ss-dots{ position:absolute;left:0;right:0;bottom:12px;z-index:3; display:flex;justify-content:center;gap:7px;pointer-events:none; } .ss-dot{ width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.4); transition:all .25s ease;cursor:pointer;border:none;padding:0;flex-shrink:0;pointer-events:auto; } .ss-dot.active{width:22px;border-radius:4px;background:#fff;} /* dots sit right under the points, not floating over them — push content up to make room */ .ss-content{padding-bottom:34px;} @media(max-width:460px){ .ss-media{aspect-ratio:3/4;} .ss-title{font-size:1.32rem;} .ss-points li{font-size:0.86rem;} } @media (prefers-reduced-motion: reduce){ .ss-media img{transition:opacity .3s ease;} .ss-slide.ss-active .ss-media img{transform:none;} } .stat-block{display:flex;gap:26px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);} .stat-block .num{font-family:'Sora','Noto Sans Malayalam',sans-serif;font-weight:800;font-size:1.7rem;} .stat-block .lbl{font-size:0.76rem;color:var(--slate);font-weight:600;} @media(max-width:460px){ .stat-block{gap:14px;} .stat-block .num{font-size:1.4rem;} } /* ---------- Wave section divider ---------- */ .wave-divider{display:block;width:100%;line-height:0;position:relative;z-index:2;} .wave-divider svg{width:100%;height:auto;display:block;} /* ---------- Trust marquee ---------- */ .trust{background:var(--wave-grad-pale);padding:24px 0;overflow:hidden;position:relative;} .trust::before,.trust::after{ content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none; } .trust::before{left:0;background:linear-gradient(90deg,var(--pale-start),transparent);} .trust::after{right:0;background:linear-gradient(270deg,var(--pale-end),transparent);} .trust-track{display:flex;gap:0;width:max-content;animation:marquee 28s linear infinite;} .trust:hover .trust-track{animation-play-state:paused;} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} .trust-item{ display:flex;align-items:center;gap:10px;color:var(--ink);font-size:0.85rem;font-weight:600;opacity:.9; white-space:nowrap;padding:0 34px;border-right:1px solid var(--line); } @media (prefers-reduced-motion: reduce){ .trust-track{animation:none;} .ss-eyebrow .dot{animation:none;} .pulse-ring{animation:none;} .callout-dots circle{animation:none;} .scan-ring{animation:none;} } /* ---------- Card hover glow ---------- */ .prod-card, .bp-card, .sign-card, .test-card, .brand-card{position:relative;} .prod-card::before, .bp-card::before{ content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px; background:var(--wave-grad); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0;transition:opacity .3s ease;pointer-events:none; } .prod-card:hover::before, .bp-card:hover::before{opacity:1;} /* ---------- Count-up number ready state ---------- */ .num[data-count]{font-variant-numeric:tabular-nums;} /* ============================================================ Chat Widget — "Wavey", WaveZone's rule-based care assistant ============================================================ */ #wzChatWrap{position:fixed;right:24px;bottom:24px;z-index:500;font-family:'Inter','Noto Sans Malayalam',sans-serif;} #wzChatToggle{ width:60px;height:60px;border-radius:50%;background:var(--btn-grad); display:flex;align-items:center;justify-content:center;position:relative; box-shadow:0 14px 30px -8px rgba(11,47,143,0.4);border:none;cursor:pointer; transition:transform .25s ease; } #wzChatToggle:hover{transform:scale(1.06);} #wzChatToggle.wz-pulse::before{ content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid var(--teal);animation:wzPulse 1.8s ease-out infinite; } @keyframes wzPulse{ 0%{transform:scale(0.9);opacity:0.8;} 100%{transform:scale(1.35);opacity:0;} } #wzChatWindow{ position:absolute;bottom:76px;right:0;width:372px;max-width:calc(100vw - 32px); height:530px;max-height:72vh;background:var(--wash);border-radius:22px; box-shadow:0 30px 70px -20px rgba(10,18,36,0.35); display:flex;flex-direction:column;overflow:hidden; opacity:0;transform:translateY(16px) scale(0.97);pointer-events:none; transition:opacity .25s ease, transform .25s ease; border:1px solid var(--line); } #wzChatWindow.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} #wzChatHeader{ background:var(--wave-grad);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0; } #wzChatAvatar{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.2); display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Sora','Noto Sans Malayalam',sans-serif;flex-shrink:0; } #wzChatName{font-weight:700;font-size:0.98rem;font-family:'Sora','Noto Sans Malayalam',sans-serif;} #wzChatStatus{font-size:0.76rem;opacity:0.9;display:flex;align-items:center;gap:6px;margin-top:2px;} #wzChatReset{ width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.16);border:none; display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer; transition:background .2s ease, transform .3s ease; } #wzChatReset:hover{background:rgba(255,255,255,0.3);transform:rotate(-45deg);} .wz-dot{width:6px;height:6px;border-radius:50%;background:#6FE3B4;display:inline-block;flex-shrink:0;} #wzChatBody{ flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px;background:transparent; } .wz-row{display:flex;gap:8px;max-width:88%;} .wz-row.wz-bot{align-self:flex-start;} .wz-row.wz-user{align-self:flex-end;flex-direction:row-reverse;} .wz-avatar{ width:26px;height:26px;border-radius:50%;background:var(--wave-grad);color:#fff; display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;flex-shrink:0; font-family:'Sora','Noto Sans Malayalam',sans-serif; } .wz-bubble{ background:var(--white);border:1px solid var(--line);padding:11px 14px;border-radius:14px 14px 14px 4px; font-size:0.86rem;line-height:1.55;color:var(--ink);box-shadow:0 2px 8px rgba(10,18,36,0.04); } .wz-row.wz-user .wz-bubble{ background:var(--wave-grad);color:#fff;border:none;border-radius:14px 14px 4px 14px; } .wz-bubble b{font-weight:700;} .wz-bubble a{text-decoration:underline;} .wz-typing{display:flex;gap:4px;align-items:center;padding:14px;} .wz-typing span{width:6px;height:6px;border-radius:50%;background:var(--slate);animation:wzTyping 1.2s infinite ease-in-out;display:inline-block;} .wz-typing span:nth-child(2){animation-delay:.2s;} .wz-typing span:nth-child(3){animation-delay:.4s;} @keyframes wzTyping{0%,60%,100%{transform:translateY(0);opacity:0.4;}30%{transform:translateY(-4px);opacity:1;}} #wzChatChips{ display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;background:transparent;flex-shrink:0; } .wz-chip{ background:var(--wave-grad-soft);border:1.5px solid var(--line);border-radius:100px;padding:7px 13px; font-size:0.76rem;font-weight:600;color:var(--royal-blue);cursor:pointer;transition:all .2s ease; } .wz-chip:hover{border-color:var(--royal-blue);background:var(--mist-2);} #wzChatForm{ display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:var(--wash);flex-shrink:0; } #wzChatInput{ flex:1;border:1.5px solid var(--line);border-radius:100px;padding:10px 16px;font-family:inherit; font-size:0.86rem;color:var(--ink);background:var(--white);min-width:0; } #wzChatInput:focus{outline:none;border-color:var(--royal-blue);background:var(--white);} #wzChatForm button{ width:40px;height:40px;border-radius:50%;background:var(--btn-grad);border:none; display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer; } @media(max-width:480px){ #wzChatWrap{right:16px;bottom:16px;} #wzChatToggle{width:54px;height:54px;} #wzChatWindow{ width:calc(100vw - 24px);height:72vh;max-height:72vh;bottom:66px;right:-8px; } #wzChatInput{font-size:16px;} } @media (prefers-reduced-motion: reduce){ #wzChatToggle.wz-pulse::before{animation:none;} .wz-typing span{animation:none;} }