/* ════════════════════════════════════════════════════════════════════
ZupiChat — DEEPOTSAV · LAUNCH EDITION 2026 (v3 · FRESH / LIGHT)
Ek hi root class: html.zdl-on. Theme hatana = class hatana.
Aditya (24 Oct): "puri website darker lag rahi hai, fresh banao" —
isliye v3 ivory + champagne gold + brand teal hai, jaise ek premium
Diwali nimantran-patra. Gehra rang sirf teen jagah: footer, featured
pricing card, CTA panel (aur code editor) — wahi "anchor" dete hain.
Site ka hara-kaala sweep (zdl.js) halka karta hai, safed text ko ink
banata hai, aur glass cards ko safed cards — selector-by-selector
nahi, computed colour se, taaki 133 pages ek jaise rahein.
Motion do tier me (memory: reduced-motion-tiering):
tier 1 — sabke liye: opacity / colour / glow
tier 2 — sirf no-preference: translate / rotate / scale
════════════════════════════════════════════════════════════════════ */
html.zdl-on {
--zdl-ivory: #FFFCF6;
--zdl-cream: #FBF4E6;
--zdl-card: #FFFFFF;
--zdl-ink: #10262A;
--zdl-body: rgba(16, 38, 42, .74);
--zdl-muted: rgba(16, 38, 42, .55);
--zdl-gold: #B8862F;
--zdl-gold-hi: #E2B65C;
--zdl-gold-deep: #8A5F1A;
--zdl-marigold: #EE8A22;
--zdl-rani: #D23F72;
--zdl-teal: #0A474C;
--zdl-teal-deep: #0A2E31;
--zdl-line: #EFE4D0;
--zdl-line-hi: rgba(184, 134, 47, .5);
--zdl-foil: linear-gradient(100deg, #7A5216 0%, #B8862F 24%, #D9AC5E 40%, #AE7C29 58%, #7E5618 78%, #BF9142 100%);
--zdl-foil-bright: linear-gradient(100deg, #B8862F 0%, #EFCB7E 22%, #FFF3D2 38%, #E7BE6A 54%, #B9883A 76%, #F0D08C 100%);
--zdl-ease: cubic-bezier(.22, .8, .24, 1);
--zdl-fast: 180ms;
--zdl-serif: "Cormorant Garamond", Georgia, serif;
--zdl-deva: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;
--zdl-shadow: 0 1px 2px rgba(120, 84, 24, .06), 0 8px 24px -12px rgba(120, 84, 24, .16), 0 24px 48px -28px rgba(120, 84, 24, .22);
--zdl-shadow-hi: 0 1px 2px rgba(120, 84, 24, .08), 0 14px 32px -12px rgba(120, 84, 24, .24), 0 32px 64px -30px rgba(184, 134, 47, .34);
scrollbar-color: #D9C29A var(--zdl-ivory);
}
html.zdl-on ::selection { background: rgba(226, 182, 92, .38); color: var(--zdl-ink); }
/* ── pehla paint: jaane-pehchaane hare dabbe seedha ivory ─────────────
JS sweep baad me baaki sab pakad leta hai; ye sirf flash rokta hai. */
html.zdl-on :is(.zh-hero, .custom-hero, .zc-trust-bar, .zc-wall, #features, .zc-shots, .zcg-cb,
.zg-intg, .zc-devapi, .comparison-section, #faq, .zgc-sec):not(#_) {
background-color: var(--zdl-ivory) !important;
}
html.zdl-on:not(.zdl-ready) :is(.zh-hero, .custom-hero) :is(h1, h2, p, .zh-sub, .zh-meta-note):not(.zdl-x) {
color: var(--zdl-ink) !important; -webkit-text-fill-color: var(--zdl-ink) !important;
}
html.zdl-on .zh-hero:not(#_),
html.zdl-on .custom-hero:not(#_) {
background-image:
radial-gradient(46% 60% at 8% 0%, rgba(255, 196, 140, .42) 0%, rgba(255, 196, 140, 0) 70%),
radial-gradient(40% 50% at 96% 10%, rgba(240, 130, 170, .20) 0%, rgba(240, 130, 170, 0) 70%),
radial-gradient(60% 46% at 50% 0%, rgba(239, 203, 126, .34) 0%, rgba(239, 203, 126, 0) 70%),
linear-gradient(180deg, #FFFCF6 0%, #FFF8EC 100%) !important;
}
/* ── header: safed kaanch + sona hairline + genda toran ─────────────── */
html.zdl-on header.zc-header:not(#_) {
background-color: rgba(255, 252, 246, .9) !important;
box-shadow: 0 1px 0 var(--zdl-line), 0 8px 24px -16px rgba(120, 84, 24, .2) !important;
-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
html.zdl-on header.zc-header .zc-brand-normal:not(#_) { display: none !important; }
html.zdl-on header.zc-header .zc-brand-light:not(#_) { display: block !important; opacity: 1 !important; visibility: visible !important; position: static !important; }
html.zdl-on .zc-dropdown:not(#_) {
background-color: rgba(255, 255, 255, .98) !important;
border: 1px solid var(--zdl-line) !important; box-shadow: var(--zdl-shadow-hi) !important;
}
html.zdl-on .zdl-toran {
position: absolute; left: 0; right: 0; top: 100%; height: 40px; pointer-events: none; z-index: 1;
overflow: hidden;
}
html.zdl-on .zdl-toran svg { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) { html.zdl-on .zdl-toran { height: 28px; } }
html.zdl-on .zdl-toran svg { filter: drop-shadow(0 2px 2px rgba(120, 84, 24, .18)); }
html.zdl-on .zdl-glint { opacity: .35; }
/* ── gold foil text (halke ground ke liye gehra sona) ─────────────────── */
html.zdl-on .zdl-foil:not(#_):not(#_),
html.zdl-on .zh-rotor:not(#_):not(#_) {
background-image: var(--zdl-foil) !important;
background-size: 220% 100% !important;
background-position: 0% 50%;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* chamak sirf badi headings par — pricing odometer ke 300+ span par
animation chalana CPU khaata */
html.zdl-on :is(.zh-rotor, .zdl-band-h, .zdl-sign-h, .zcb-grad, h1 .zdl-foil, h2 .zdl-foil, h2.zdl-foil):not(#_) { animation: zdl-foil 7s ease-in-out infinite; }
/* site ka logo filter (brightness(0) invert(1)) halke header par safed kar deta */
html.zdl-on header.zc-header .zc-brand-light:not(#_) { filter: none !important; }
/* compare pages ka "Talk to sales" — live site par bhi teal par teal fill
(text-fill-color #0a474c) tha, yani adrishya. Yahan currentcolor. */
html.zdl-on .cmp-cta a:not(#_) { -webkit-text-fill-color: currentcolor !important; }
/* FAQ ka WhatsApp bubble hara hi rehta hai — uska text safed */
html.zdl-on .zpq-bubble:not(#_), html.zdl-on .zpq-bubble:not(#_) * { color: #F2FFF9 !important; -webkit-text-fill-color: #F2FFF9 !important; }
html.zdl-on .zdl-keep .zdl-foil:not(#_):not(#_),
html.zdl-on footer .zdl-foil:not(#_):not(#_) { background-image: var(--zdl-foil-bright) !important; }
@keyframes zdl-foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* ── gold buttons ─────────────────────────────────────────────────── */
html.zdl-on .zdl-btn-gold:not(#_) {
overflow: hidden; isolation: isolate;
background-color: #D9A84E !important;
background-image: linear-gradient(135deg, #FFE7A8 0%, #E7BC66 36%, #C38D34 70%, #E2B35C 100%) !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
border-color: rgba(184, 134, 47, .55) !important;
box-shadow: 0 1px 2px rgba(120, 84, 24, .22), 0 10px 24px -10px rgba(195, 141, 52, .65), inset 0 1px 0 rgba(255, 250, 230, .8) !important;
transition: transform var(--zdl-fast) var(--zdl-ease), box-shadow var(--zdl-fast) var(--zdl-ease), filter var(--zdl-fast) var(--zdl-ease) !important;
}
html.zdl-on .zdl-btn-gold:not(#_) :is(i, span, b, svg) { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; fill: currentColor; }
html.zdl-on .zdl-btn-gold::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 252, 238, .8) 50%, rgba(255, 255, 255, 0) 70%);
background-size: 250% 100%; background-position: 130% 0;
transition: background-position .7s var(--zdl-ease);
}
html.zdl-on .zdl-btn-gold:hover::after { background-position: -30% 0; }
html.zdl-on .zdl-btn-gold:hover { filter: brightness(1.04) saturate(1.05); box-shadow: 0 1px 2px rgba(120, 84, 24, .22), 0 16px 32px -12px rgba(195, 141, 52, .75), inset 0 1px 0 rgba(255, 250, 230, .9) !important; }
html.zdl-on .zdl-btn-gold:active { transform: scale(.98) !important; }
html.zdl-on .zdl-btn-gold:focus-visible { outline: 2px solid var(--zdl-teal) !important; outline-offset: 3px !important; }
/* position sirf static buttons par — fixed "scroll to top" ko relative karte the
to wo flow me aa kar header ke upar 48px ki khaali patti bana deta tha */
html.zdl-on .zdl-btn-gold:not(.zdl-keep-pos):not(#_) { position: relative; }
/* deep teal buttons (site ke gehre button halke ground par) */
html.zdl-on .zdl-btn-teal:not(#_) {
transition: transform var(--zdl-fast) var(--zdl-ease), box-shadow var(--zdl-fast) var(--zdl-ease) !important;
box-shadow: 0 1px 2px rgba(10, 46, 49, .2), 0 10px 22px -12px rgba(10, 71, 76, .55) !important;
}
html.zdl-on .zdl-btn-teal:not(#_):hover { box-shadow: 0 1px 2px rgba(10, 46, 49, .2), 0 14px 28px -12px rgba(10, 71, 76, .7), 0 0 0 1px rgba(226, 182, 92, .55) !important; }
html.zdl-on .zdl-btn-teal:not(#_):active { transform: scale(.98); }
/* ── cards: safed, garam hairline, teen-parat chhaya ─────────────────── */
html.zdl-on .zdl-card:not(#_) {
border: 1px solid var(--zdl-line) !important;
box-shadow: var(--zdl-shadow) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
transition: border-color var(--zdl-fast) var(--zdl-ease), box-shadow .24s var(--zdl-ease), transform .24s var(--zdl-ease) !important;
}
html.zdl-on .zdl-card.zdl-flat:not(#_) { box-shadow: none !important; }
html.zdl-on .zdl-card:not(.zdl-flat):not(#_):hover {
border-color: var(--zdl-line-hi) !important;
box-shadow: var(--zdl-shadow-hi) !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-card:not(.zdl-flat):not(#_):hover { transform: translateY(-2px); }
}
html.zdl-on .custom-plan.featured:not(#_) {
box-shadow: 0 0 0 1px rgba(226, 182, 92, .6), 0 30px 60px -26px rgba(10, 71, 76, .55), 0 18px 40px -24px rgba(184, 134, 47, .45) !important;
}
/* ── integration logos: ek jaisi safed tile ───────────────────────── */
html.zdl-on .zc-intg-icon.zdl-ilogo:not(#_) {
width: 72px !important; height: 72px !important; margin: 0 auto 24px !important; padding: 0 !important;
display: grid !important; place-items: center; border-radius: 20px !important;
background: linear-gradient(180deg, #FFFFFF, #FFF9EE) !important;
box-shadow: inset 0 0 0 1px var(--zdl-line), 0 1px 2px rgba(120, 84, 24, .08), 0 10px 22px -12px rgba(120, 84, 24, .32) !important;
transform: none !important; filter: none !important;
transition: box-shadow .24s var(--zdl-ease), transform .24s var(--zdl-ease) !important;
}
/* lambi copy wala card (Payment) content ko beech me khiskata tha — sab upar se shuru */
html.zdl-on .zc-intg-card:not(#_) { justify-content: flex-start !important; }
html.zdl-on .zc-intg-icon.zdl-ilogo::before,
html.zdl-on .zc-intg-icon.zdl-ilogo::after { content: none !important; }
html.zdl-on .zc-intg-icon.zdl-ilogo img { width: 44px; height: 44px; display: block; object-fit: contain; }
html.zdl-on .zdl-glyph {
width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -4px rgba(16, 38, 42, .35);
}
html.zdl-on .zdl-glyph i:not(#_) { font-size: 20px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html.zdl-on .zc-intg-card:hover .zc-intg-icon.zdl-ilogo:not(#_) {
box-shadow: inset 0 0 0 1px var(--zdl-line-hi), 0 1px 2px rgba(120, 84, 24, .08), 0 16px 30px -14px rgba(184, 134, 47, .45) !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zc-intg-card:hover .zc-intg-icon.zdl-ilogo:not(#_) { transform: translateY(-2px) !important; }
}
/* ── scroll progress ──────────────────────────────────────────────── */
html.zdl-on .zdl-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147482000;
pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--zdl-p, 0));
background-image: linear-gradient(90deg, var(--zdl-marigold), var(--zdl-gold-hi) 50%, var(--zdl-gold));
}
/* ════ HERO ══════════════════════════════════════════════════════════ */
html.zdl-on .zdl-hero-fx {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
html.zdl-on .zdl-lift { position: relative; z-index: 2; }
html.zdl-on .zdl-mandala {
position: absolute; left: 50%; top: 0; width: 1100px; height: 1100px;
margin: -330px 0 0 -550px; z-index: 0; pointer-events: none;
color: var(--zdl-gold); opacity: .2;
-webkit-mask-image: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0) 100%);
mask-image: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0) 100%);
}
html.zdl-on .zdl-mandala svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-mandala svg { animation: zdl-spin 240s linear infinite; }
}
@keyframes zdl-spin { to { transform: rotate(360deg); } }
/* ════ HERO "Happy Diwali" — liquid-gold glass text ════════════════
Sone ka translucent bhaaw (peeche ka mandala halka jhalakta hai),
safed specular kinara (text-stroke), do-parat emboss (drop-shadow),
aur har 6s me ek chamak jo akshar par se guzarti hai. Dono taraf
filigree bel + timtimate sparkle. */
html.zdl-on .zdl-eyebrow:not(#_) {
display: flex; align-items: center; justify-content: center; gap: 12px;
margin: 0 0 16px; opacity: 1 !important; line-height: 1;
}
html.zdl-on .zdl-eyebrow::before, html.zdl-on .zdl-eyebrow::after { content: none !important; }
html.zdl-on .zdl-fil { display: block; width: 150px; height: 25px; flex: none; }
html.zdl-on .zdl-fil.r { transform: scaleX(-1); }
html.zdl-on .zdl-fil svg, html.zdl-on .zdl-spk svg { display: block; width: 100%; height: 100%; }
html.zdl-on .zdl-spk { display: block; width: 24px; height: 24px; flex: none; animation: zdl-twinkle 3.2s ease-in-out infinite; }
html.zdl-on .zdl-spk.r { animation-delay: -1.6s; }
@keyframes zdl-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-spk { animation: zdl-twinkle-s 3.2s ease-in-out infinite; }
html.zdl-on .zdl-spk.r { animation-delay: -1.6s; }
}
@keyframes zdl-twinkle-s { 0%, 100% { opacity: .55; transform: scale(.78) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(45deg); } }
html.zdl-on .zdl-glasstext:not(#_):not(#_) {
position: relative; display: inline-block; padding: 2px 6px 8px;
font: italic 700 clamp(64px, 6vw, 84px)/1.02 var(--zdl-serif) !important; letter-spacing: -.01em; text-transform: none; white-space: nowrap;
/* gehra sona (padhne layak) + patli safed chamak-patti; stroke halka —
pehla version safed jhalak se dhundhla lagta tha */
background-image:
linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 252, 238, .85) 50%, rgba(255, 255, 255, 0) 56%),
linear-gradient(180deg, #E8C27A 0%, #B8862F 30%, #7A5216 60%, #A9772A 82%, #D4A54E 100%) !important;
background-size: 260% 100%, 100% 100% !important;
background-repeat: no-repeat !important;
background-position: 160% 0, 0 0;
-webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; -webkit-text-fill-color: transparent !important;
-webkit-text-stroke: .4px rgba(255, 248, 225, .55);
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 1.5px rgba(110, 72, 18, .32)) drop-shadow(0 12px 20px rgba(184, 134, 47, .32));
animation: zdl-glint 6s cubic-bezier(.4, 0, .2, 1) infinite !important;
}
@keyframes zdl-glint { 0%, 55% { background-position: 160% 0, 0 0; } 85%, 100% { background-position: -60% 0, 0 0; } }
/* site ka "Runs on official API" island */
html.zdl-on .zh-island:not(#_) {
background: rgba(255, 255, 255, .85) !important;
border: 1px solid var(--zdl-line) !important;
box-shadow: 0 1px 2px rgba(120, 84, 24, .06), 0 6px 16px -10px rgba(120, 84, 24, .22) !important;
}
html.zdl-on .zh-island:not(#_) i { color: var(--zdl-gold) !important; -webkit-text-fill-color: var(--zdl-gold) !important; }
html.zdl-on .zh-island:not(#_) span { color: var(--zdl-ink) !important; -webkit-text-fill-color: var(--zdl-ink) !important; }
html.zdl-on .zh-film__frame:not(#_) {
box-shadow: 0 0 0 1px rgba(184, 134, 47, .28), 0 40px 80px -36px rgba(120, 84, 24, .45), 0 20px 40px -24px rgba(10, 46, 49, .3) !important;
}
/* akash kandil */
html.zdl-on .zdl-lantern {
position: absolute; top: 0; z-index: 1; width: 104px; pointer-events: none;
transform-origin: 50% 0;
filter: drop-shadow(0 22px 22px rgba(160, 56, 24, .2)) drop-shadow(0 4px 6px rgba(90, 30, 10, .18));
}
html.zdl-on .zdl-lantern svg { display: block; width: 100%; height: auto; overflow: visible; }
html.zdl-on .zdl-lantern.l { left: 5%; }
html.zdl-on .zdl-lantern.r { right: 5%; }
html.zdl-on .zdl-lantern .zdl-lglow { animation: zdl-flick 3.4s ease-in-out infinite; }
html.zdl-on .zdl-lantern .zdl-lcore { animation: zdl-core 2.3s ease-in-out infinite; }
html.zdl-on .zdl-lantern.r :is(.zdl-lglow, .zdl-lcore) { animation-delay: -1.4s; }
html.zdl-on .zdl-lantern .zdl-tail { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-lantern { animation: zdl-swing 6.5s ease-in-out infinite; }
html.zdl-on .zdl-lantern.r { animation-duration: 7.6s; animation-delay: -2.2s; }
html.zdl-on .zdl-lantern .zdl-tail { animation: zdl-tail 2.8s ease-in-out infinite; }
}
@keyframes zdl-swing { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
/* kandil ki roshni deewar par — neeche garam ujala (tier 1: sirf opacity) */
html.zdl-on .zdl-lantern::after {
content: ""; position: absolute; left: 50%; top: 58%; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: -1;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 168, 80, .26), rgba(255, 168, 80, .1) 50%, rgba(255, 168, 80, 0));
animation: zdl-flick 3.4s ease-in-out infinite;
}
html.zdl-on .zdl-lantern.r::after { animation-delay: -1.4s; background: radial-gradient(closest-side, rgba(236, 110, 150, .22), rgba(236, 110, 150, .08) 50%, rgba(236, 110, 150, 0)); }
@media (min-width: 1600px) { html.zdl-on .zdl-lantern { width: 120px; } }
@keyframes zdl-tail { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@keyframes zdl-flick { 0%, 100% { opacity: .78; } 22% { opacity: 1; } 47% { opacity: .66; } 71% { opacity: .95; } }
@keyframes zdl-core { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .72; } 80% { opacity: .95; } }
@media (max-width: 1199px) { html.zdl-on .zdl-lantern { width: 72px; } }
@media (max-width: 767px) { html.zdl-on .zdl-lantern { display: none; } html.zdl-on .zdl-mandala { width: 720px; height: 720px; margin: -200px 0 0 -360px; } }
/* ════ DIYA (shared) ════════════════════════════════════════════════ */
html.zdl-on .zdl-diya { position: relative; display: inline-block; width: 56px; height: 44px; }
html.zdl-on .zdl-diya svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(110, 52, 18, .18)); }
html.zdl-on .zdl-flame {
position: absolute; left: 50%; bottom: 20px; width: 12px; height: 22px; margin-left: -6px;
border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
background: radial-gradient(60% 70% at 50% 72%, #FFFBEA 0%, #FFD86A 30%, #FF9A2A 66%, rgba(255, 110, 20, 0) 100%);
transform-origin: 50% 100%;
animation: zdl-flame-o 1.8s ease-in-out infinite;
}
html.zdl-on .zdl-flame::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -36px 0 0 -32px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 170, 60, .38), rgba(255, 170, 60, 0));
animation: zdl-flick 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-flame { animation: zdl-flame-o 1.8s ease-in-out infinite, zdl-flame-m 1.1s ease-in-out infinite; }
}
@keyframes zdl-flame-o { 0%, 100% { opacity: .92; } 40% { opacity: 1; } 70% { opacity: .8; } }
@keyframes zdl-flame-m { 0%, 100% { transform: scale(1, 1) skewX(0); } 33% { transform: scale(.94, 1.06) skewX(2deg); } 66% { transform: scale(1.04, .95) skewX(-2deg); } }
/* ════ LAUNCH BAND ══════════════════════════════════════════════════ */
html.zdl-on .zdl-band {
position: relative; isolation: isolate; overflow: hidden;
padding: 88px 24px 0; background-color: var(--zdl-ivory);
background-image:
radial-gradient(50% 60% at 50% 100%, rgba(255, 180, 90, .22) 0%, rgba(255, 180, 90, 0) 70%),
radial-gradient(40% 50% at 0% 30%, rgba(240, 130, 170, .10) 0%, rgba(240, 130, 170, 0) 70%);
}
html.zdl-on .zdl-band-card {
position: relative; max-width: 1120px; margin: 0 auto; padding: 56px 64px 48px;
border-radius: 24px; overflow: hidden;
background: linear-gradient(160deg, #FFFFFF 0%, #FFFBF2 55%, #FFF5E2 100%);
box-shadow: 0 1px 2px rgba(120, 84, 24, .08), 0 24px 56px -28px rgba(120, 84, 24, .32), 0 48px 100px -60px rgba(226, 150, 60, .5);
}
html.zdl-on .zdl-band-card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: linear-gradient(135deg, #E7BE6A, rgba(226, 182, 92, .25) 30%, rgba(226, 182, 92, .15) 60%, #D9A84E);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
html.zdl-on .zdl-band-pat {
position: absolute; right: -170px; top: 50%; width: 540px; height: 540px; margin-top: -270px;
pointer-events: none; opacity: .55;
}
html.zdl-on .zdl-band-pat svg { width: 100%; height: 100%; }
html.zdl-on .zdl-band-pat.l { right: auto; left: -280px; opacity: .3; }
html.zdl-on .zdl-band-grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center;
}
html.zdl-on .zdl-x .zdl-band-eyebrow:not(#_) {
margin: 0 0 16px; font: 700 12px/1.4 var(--body-font, system-ui); letter-spacing: .26em; text-transform: uppercase;
color: var(--zdl-marigold) !important;
}
html.zdl-on .zdl-band-h {
margin: 0 0 8px !important; font: italic 600 clamp(56px, 6.2vw, 80px)/1.04 var(--zdl-serif) !important; letter-spacing: -.01em !important;
padding-bottom: 4px;
}
html.zdl-on .zdl-x .zdl-band-tag:not(#_) {
margin: 0 0 16px; font: italic 600 25px/1.3 var(--zdl-serif); color: var(--zdl-teal) !important;
}
html.zdl-on .zdl-x .zdl-band-sub:not(#_) {
margin: 0 0 32px; max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--zdl-body) !important;
}
html.zdl-on .zdl-band-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
html.zdl-on .zdl-band-cta {
display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 32px; border-radius: 999px;
font-size: 16px; font-weight: 700; text-decoration: none !important; border: 1px solid transparent;
}
html.zdl-on .zdl-x .zdl-band-link:not(#_) {
font-size: 14px; font-weight: 700; color: var(--zdl-teal) !important; text-decoration: none !important;
border-bottom: 1px solid rgba(10, 71, 76, .3); padding-bottom: 2px;
transition: color var(--zdl-fast) var(--zdl-ease), border-color var(--zdl-fast) var(--zdl-ease);
}
html.zdl-on .zdl-band-link:hover { border-color: var(--zdl-teal) !important; }
html.zdl-on .zdl-band-link:focus-visible { outline: 2px solid var(--zdl-teal); outline-offset: 4px; border-radius: 4px; }
html.zdl-on .zdl-x .zdl-band-trust:not(#_) { margin: 16px 0 0; font-size: 12px; color: var(--zdl-muted) !important; letter-spacing: .02em; }
/* countdown */
html.zdl-on .zdl-cd { text-align: center; }
html.zdl-on .zdl-x .zdl-cd-lbl:not(#_) { margin: 0 0 16px; font: italic 600 22px/1.3 var(--zdl-serif); color: var(--zdl-teal) !important; }
html.zdl-on .zdl-x .zdl-cd-lbl i:not(#_) { font: 700 11px/1 var(--body-font, system-ui); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--zdl-muted) !important; display: block; margin-top: 8px; }
html.zdl-on .zdl-cd-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.zdl-on .zdl-cd-cell {
position: relative; padding: 20px 8px 16px; border-radius: 16px; text-align: center;
background: linear-gradient(180deg, #FFFFFF, #FFF6E6);
box-shadow: inset 0 0 0 1px var(--zdl-line), 0 1px 2px rgba(120, 84, 24, .06), 0 10px 20px -14px rgba(120, 84, 24, .3);
}
html.zdl-on .zdl-cd-n {
display: block; font: 600 49px/1 var(--zdl-serif); font-style: normal; font-variant-numeric: lining-nums tabular-nums;
background-image: var(--zdl-foil); background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
transition: opacity .3s ease-out;
}
html.zdl-on .zdl-cd-n.tick { opacity: .45; }
html.zdl-on .zdl-x .zdl-cd-u:not(#_) { font-style: normal; display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zdl-muted) !important; }
html.zdl-on .zdl-cd-done { font: italic 600 49px/1.1 var(--zdl-serif); }
/* diyon ki kataar */
html.zdl-on .zdl-diyas {
position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; height: 88px;
display: flex; justify-content: space-between; align-items: flex-end; padding: 0 24px 8px;
}
html.zdl-on .zdl-diyas::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, rgba(184, 134, 47, 0), rgba(184, 134, 47, .55) 50%, rgba(184, 134, 47, 0));
}
html.zdl-on .zdl-diyas .zdl-diya { opacity: .35; transition: opacity .6s ease-out; }
html.zdl-on .zdl-diyas .zdl-diya .zdl-flame { opacity: 0; transition: opacity .5s ease-out; animation-play-state: paused; }
html.zdl-on .zdl-diyas .zdl-diya.lit { opacity: 1; }
html.zdl-on .zdl-diyas .zdl-diya.lit .zdl-flame { opacity: 1; animation-play-state: running; }
/* section ornament */
html.zdl-on .zdl-orn {
display: flex; align-items: center; justify-content: center; gap: 16px;
margin: 0 auto 32px; color: var(--zdl-gold); pointer-events: none;
}
html.zdl-on .zdl-orn::before,
html.zdl-on .zdl-orn::after { content: ""; width: 88px; height: 1px; background: linear-gradient(90deg, rgba(184, 134, 47, 0), rgba(184, 134, 47, .7)); }
html.zdl-on .zdl-orn::after { transform: scaleX(-1); }
html.zdl-on .zdl-orn svg { width: 34px; height: 22px; display: block; }
/* sections: halki garam roshni kinare par */
html.zdl-on .zdl-sec.zdl-lit:not(#_) {
background-image:
radial-gradient(40% 40% at 0% 0%, rgba(255, 196, 140, .16) 0%, rgba(255, 196, 140, 0) 70%),
radial-gradient(36% 40% at 100% 100%, rgba(239, 203, 126, .18) 0%, rgba(239, 203, 126, 0) 70%) !important;
}
/* ════ FOOTER — gehra teal, sona, ek "closing card" ═════════════════
Footer sweep se BAHAR hai (zdl.js SKIP) — iske inline styles bina
!important ke hain, isliye yahan ka :not(#_) + !important jeet'ta hai
aur poora design ek jagah se control hota hai. */
html.zdl-on footer.custom-footer:not(#_) {
position: relative; overflow: hidden; isolation: isolate;
padding: 0 0 32px !important; color: rgba(247, 238, 221, .74);
background-color: #082528 !important;
background-image:
radial-gradient(56% 34% at 50% 0%, rgba(226, 182, 92, .16) 0%, rgba(226, 182, 92, 0) 70%),
radial-gradient(40% 40% at 100% 100%, rgba(238, 138, 34, .10) 0%, rgba(238, 138, 34, 0) 70%),
radial-gradient(36% 40% at 0% 70%, rgba(10, 143, 138, .14) 0%, rgba(10, 143, 138, 0) 70%),
linear-gradient(180deg, #0B3437 0%, #082528 52%, #061C1F 100%) !important;
}
/* zari border — do sone ki rekhaayein, beech me heere */
html.zdl-on .zdl-fedge {
position: relative; height: 22px; margin: 0 0 64px; pointer-events: none;
background:
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .7) 18%, rgba(255, 231, 168, .95) 50%, rgba(226, 182, 92, .7) 82%, rgba(226, 182, 92, 0)) 0 3px / 100% 1px no-repeat,
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .7) 18%, rgba(255, 231, 168, .95) 50%, rgba(226, 182, 92, .7) 82%, rgba(226, 182, 92, 0)) 0 18px / 100% 1px no-repeat;
}
html.zdl-on .zdl-fedge::before {
content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Cpath d='M14 0l5 5-5 5-5-5z' fill='%23E2B65C'/%3E%3Ccircle cx='0' cy='5' r='1.3' fill='%23E2B65C'/%3E%3Ccircle cx='28' cy='5' r='1.3' fill='%23E2B65C'/%3E%3C/svg%3E");
background-repeat: repeat-x; background-position: center;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
opacity: .85;
}
html.zdl-on .zdl-fmandala {
position: absolute; z-index: -1; right: -220px; bottom: -260px; width: 720px; height: 720px;
color: #E2B65C; opacity: .06; pointer-events: none;
}
html.zdl-on .zdl-fmandala svg { width: 100%; height: 100%; }
/* closing card */
html.zdl-on .zdl-sign {
position: relative; overflow: hidden; max-width: 880px; margin: 0 auto 72px; padding: 48px 40px 40px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
border-radius: 24px;
background: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
box-shadow: 0 1px 2px rgba(0, 10, 12, .3), 0 30px 60px -30px rgba(0, 10, 12, .6), inset 0 1px 0 rgba(255, 241, 201, .08);
}
html.zdl-on .zdl-sign::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(135deg, rgba(255, 231, 168, .7), rgba(226, 182, 92, .14) 35%, rgba(226, 182, 92, .1) 65%, rgba(255, 231, 168, .55));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
html.zdl-on .zdl-sign-pat {
position: absolute; z-index: 0; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px;
color: #E2B65C; opacity: .07; pointer-events: none;
}
html.zdl-on .zdl-sign-pat svg { width: 100%; height: 100%; }
html.zdl-on .zdl-sign > :not(.zdl-sign-pat) { position: relative; z-index: 1; }
html.zdl-on .zdl-sign-lamps { display: flex; gap: 24px; justify-content: center; margin: 0 0 16px; }
html.zdl-on .zdl-sign-lamps .zdl-diya { transform: scale(.78); transform-origin: 50% 100%; }
html.zdl-on .zdl-x .zdl-sign-e:not(#_) {
margin: 0 0 8px; font: 700 12px/1.4 var(--body-font, system-ui); letter-spacing: .26em; text-transform: uppercase;
color: #F0A04B !important; -webkit-text-fill-color: #F0A04B !important;
}
html.zdl-on .zdl-sign-h { margin: 0 0 8px !important; font: italic 600 61px/1.08 var(--zdl-serif) !important; letter-spacing: -.01em !important; }
html.zdl-on .zdl-x .zdl-sign-s:not(#_) {
margin: 0 0 32px; max-width: 32em; font: italic 500 20px/1.5 var(--zdl-serif);
color: rgba(255, 246, 228, .82) !important; -webkit-text-fill-color: rgba(255, 246, 228, .82) !important;
}
html.zdl-on .zdl-sign-cta {
display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 32px; border-radius: 999px;
font-size: 16px; font-weight: 700; text-decoration: none !important;
}
html.zdl-on .zdl-x .zdl-sign-t:not(#_) {
margin: 16px 0 0; font-size: 12px; letter-spacing: .04em;
color: rgba(247, 238, 221, .56) !important; -webkit-text-fill-color: rgba(247, 238, 221, .56) !important;
}
/* columns */
html.zdl-on footer.custom-footer .custom-footer-logo img:not(#_) { max-height: 40px !important; }
html.zdl-on footer.custom-footer .custom-footer-desc:not(#_) {
margin: 16px 0 0 !important; max-width: 30em; font-size: 14px !important; line-height: 1.7 !important;
color: rgba(247, 238, 221, .7) !important; -webkit-text-fill-color: rgba(247, 238, 221, .7) !important;
}
html.zdl-on footer.custom-footer .custom-footer-title:not(#_) {
position: relative; margin: 0 0 24px !important; padding-bottom: 12px;
font-size: 12px !important; font-weight: 700 !important; letter-spacing: .2em !important; text-transform: uppercase;
color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important;
}
html.zdl-on footer.custom-footer .custom-footer-title:not(#_)::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 1px;
background: linear-gradient(90deg, #E2B65C, rgba(226, 182, 92, 0));
}
html.zdl-on footer.custom-footer .custom-footer-links:not(#_) { padding: 0 !important; margin: 0 !important; list-style: none; }
html.zdl-on footer.custom-footer .custom-footer-links li:not(#_) { margin: 0 0 8px !important; padding: 0 !important; }
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_) {
display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: 14px !important; line-height: 1.45 !important; text-decoration: none !important;
color: rgba(247, 238, 221, .72) !important; -webkit-text-fill-color: rgba(247, 238, 221, .72) !important;
transition: color var(--zdl-fast) var(--zdl-ease), transform var(--zdl-fast) var(--zdl-ease);
}
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_)::before {
content: ""; width: 0; height: 1px; background: #E2B65C; transition: width var(--zdl-fast) var(--zdl-ease);
}
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_):hover,
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_):focus-visible { color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important; }
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_):hover::before { width: 12px; }
html.zdl-on footer.custom-footer a:not(#_):focus-visible { outline: 2px solid #E2B65C; outline-offset: 3px; border-radius: 4px; }
/* "Start free" form — pill, iOS zoom-safe 16px */
html.zdl-on footer.custom-footer form:not(#_) {
background: rgba(255, 255, 255, .06) !important; border-radius: 999px !important; padding: 4px !important;
box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .3), 0 12px 28px -18px rgba(0, 0, 0, .6) !important;
transition: box-shadow var(--zdl-fast) var(--zdl-ease);
}
html.zdl-on footer.custom-footer form:not(#_):focus-within { box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .8), 0 0 0 4px rgba(226, 182, 92, .16) !important; }
html.zdl-on footer.custom-footer form input:not(#_) {
font-size: 16px !important; color: #FFF6E4 !important; padding: 12px 12px 12px 40px !important;
background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 999px !important;
}
html.zdl-on footer.custom-footer form > div:not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.zdl-on footer.custom-footer .custom-footer-title[style*="margin-top"]:not(#_) { margin-top: 40px !important; }
/* desktop: Quick Links do column me — ek lambi kataar ke neeche khaali deewar banti thi */
@media (min-width: 1200px) {
html.zdl-on footer.custom-footer .row > div:nth-child(1):not(#_) { flex: 0 0 30%; max-width: 30%; }
html.zdl-on footer.custom-footer .row > div:nth-child(2):not(#_) { flex: 0 0 28%; max-width: 28%; }
html.zdl-on footer.custom-footer .row > div:nth-child(n+3):not(#_) { flex: 0 0 14%; max-width: 14%; }
html.zdl-on footer.custom-footer .row > div:nth-child(2) .custom-footer-links:not(#_) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
html.zdl-on footer.custom-footer form input:not(#_)::placeholder { color: rgba(247, 238, 221, .5); }
html.zdl-on footer.custom-footer form i:not(#_) { color: #E2B65C !important; font-size: 16px !important; left: 16px !important; }
html.zdl-on footer.custom-footer form button:not(#_) {
border-radius: 999px !important; padding: 0 24px !important; min-height: 44px; font-size: 14px !important; font-weight: 700 !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
background: linear-gradient(135deg, #FFE7A8 0%, #E7BC66 40%, #C38D34 100%) !important;
box-shadow: 0 8px 18px -10px rgba(226, 182, 92, .8) !important;
transition: filter var(--zdl-fast) var(--zdl-ease), transform var(--zdl-fast) var(--zdl-ease) !important;
}
html.zdl-on footer.custom-footer form button:not(#_):hover { filter: brightness(1.06); }
html.zdl-on footer.custom-footer form button:not(#_):active { transform: scale(.98); }
html.zdl-on footer.custom-footer .footer-item p:not(.custom-footer-desc):not(#_) {
font-size: 13px !important; color: rgba(247, 238, 221, .86) !important; -webkit-text-fill-color: rgba(247, 238, 221, .86) !important;
}
html.zdl-on footer.custom-footer .footer-item :is(i.la-rocket, i.la-check):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; }
html.zdl-on footer.custom-footer form + div span:not(#_) {
font-size: 12px !important; color: rgba(247, 238, 221, .62) !important; -webkit-text-fill-color: rgba(247, 238, 221, .62) !important;
}
/* contact */
html.zdl-on footer.custom-footer .custom-footer-contact:not(#_) { padding: 0 !important; margin: 0 !important; list-style: none; }
html.zdl-on footer.custom-footer .custom-footer-contact li:not(#_) { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; }
html.zdl-on footer.custom-footer .custom-footer-contact li i:not(#_) {
flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
font-size: 15px !important; margin: 0 !important;
color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important;
background: rgba(226, 182, 92, .1); box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .24);
}
html.zdl-on footer.custom-footer .custom-footer-contact a:not(#_) {
font-size: 14px !important; text-decoration: none !important;
color: rgba(247, 238, 221, .84) !important; -webkit-text-fill-color: rgba(247, 238, 221, .84) !important;
transition: color var(--zdl-fast) var(--zdl-ease);
}
html.zdl-on footer.custom-footer .custom-footer-contact a:not(#_):hover { color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important; }
/* referral — sona outline pill */
html.zdl-on footer.custom-footer .share-btn-wrapper:not(#_) { background: none !important; border: 0 !important; padding: 0 !important; margin-top: 24px !important; }
html.zdl-on footer.custom-footer .share-btn-wrapper a:not(#_) {
display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
border-radius: 999px !important; font-size: 14px !important; font-weight: 700 !important;
color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important;
background: rgba(226, 182, 92, .08) !important; border: 1px solid rgba(226, 182, 92, .45) !important; box-shadow: none !important;
transition: background-color var(--zdl-fast) var(--zdl-ease), color var(--zdl-fast) var(--zdl-ease), transform var(--zdl-fast) var(--zdl-ease) !important;
}
html.zdl-on footer.custom-footer .share-btn-wrapper a:not(#_) i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html.zdl-on footer.custom-footer .share-btn-wrapper a:not(#_):hover {
background: linear-gradient(135deg, #FFE7A8 0%, #E7BC66 40%, #C38D34 100%) !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
}
html.zdl-on footer.custom-footer .share-btn-wrapper a:not(#_):active { transform: scale(.98); }
/* bottom bar */
html.zdl-on footer.custom-footer .custom-footer-bottom:not(#_) {
position: relative; margin-top: 64px !important; padding: 24px 0 0 !important; border: 0 !important;
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
html.zdl-on footer.custom-footer .custom-footer-bottom:not(#_)::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .5) 20%, rgba(226, 182, 92, .5) 80%, rgba(226, 182, 92, 0));
}
html.zdl-on footer.custom-footer .bottom-footer-text:not(#_) {
flex: 1 1 520px; font-size: 13px !important; line-height: 1.6 !important;
color: rgba(247, 238, 221, .74) !important; -webkit-text-fill-color: rgba(247, 238, 221, .74) !important;
}
html.zdl-on footer.custom-footer .bottom-footer-text a:not(#_) {
color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important;
text-decoration: none !important; border-bottom: 1px solid rgba(226, 182, 92, .45);
}
html.zdl-on footer.custom-footer .bottom-footer-text span:not(#_) {
margin-top: 8px !important; opacity: 1 !important; font-size: 12px !important; line-height: 1.6 !important;
color: rgba(247, 238, 221, .5) !important; -webkit-text-fill-color: rgba(247, 238, 221, .5) !important;
}
html.zdl-on footer.custom-footer .custom-footer-socials:not(#_) { display: flex; gap: 12px; }
html.zdl-on footer.custom-footer .custom-footer-socials a:not(#_) {
width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(226, 182, 92, .32) !important;
color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important; font-size: 17px; text-decoration: none !important;
transition: background-color var(--zdl-fast) var(--zdl-ease), color var(--zdl-fast) var(--zdl-ease), transform var(--zdl-fast) var(--zdl-ease), border-color var(--zdl-fast) var(--zdl-ease) !important;
}
html.zdl-on footer.custom-footer .custom-footer-socials a:not(#_) i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html.zdl-on footer.custom-footer .custom-footer-socials a:not(#_):hover {
background: linear-gradient(135deg, #FFE7A8, #C38D34) !important; border-color: transparent !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on footer.custom-footer .custom-footer-links a:not(#_):hover { transform: translateX(2px); }
html.zdl-on footer.custom-footer .custom-footer-socials a:not(#_):hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
html.zdl-on .zdl-fedge { margin-bottom: 40px; }
html.zdl-on .zdl-sign { padding: 40px 20px 32px; margin-bottom: 48px; border-radius: 20px; }
html.zdl-on .zdl-sign-lamps { gap: 8px; }
html.zdl-on .zdl-sign-h { font-size: 44px !important; }
html.zdl-on .zdl-x .zdl-sign-s:not(#_) { font-size: 17px; margin-bottom: 24px; }
html.zdl-on .zdl-sign-cta { width: 100%; justify-content: center; }
html.zdl-on footer.custom-footer .custom-footer-bottom:not(#_) { flex-direction: column; align-items: flex-start; margin-top: 48px !important; }
html.zdl-on footer.custom-footer .bottom-footer-text:not(#_) { flex-basis: auto; }
}
/* bursts / sparkle canvas */
html.zdl-on .zdl-fx {
position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2147481000; pointer-events: none;
}
/* ── mobile ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
html.zdl-on .zdl-band-card { padding: 48px 32px 40px; }
html.zdl-on .zdl-band-grid { grid-template-columns: 1fr; gap: 40px; }
html.zdl-on .zdl-cd { text-align: left; }
}
@media (max-width: 767px) {
html.zdl-on .zdl-band { padding: 56px 16px 0 !important; }
html.zdl-on .zdl-band-card { padding: 40px 20px 32px; border-radius: 20px; }
html.zdl-on .zdl-band-h { font-size: 49px !important; }
html.zdl-on .zdl-x .zdl-band-tag:not(#_) { font-size: 20px; }
html.zdl-on .zdl-x .zdl-band-sub:not(#_) { font-size: 16px; margin-bottom: 24px; }
html.zdl-on .zdl-band-cta { width: 100%; justify-content: center; }
html.zdl-on .zdl-band-pat { display: none; }
html.zdl-on .zdl-cd-row { gap: 8px; }
html.zdl-on .zdl-cd-cell { padding: 16px 4px 12px; border-radius: 12px; }
html.zdl-on .zdl-cd-n { font-size: 31px; }
html.zdl-on .zdl-x .zdl-cd-u:not(#_) { font-size: 10px; letter-spacing: .12em; }
html.zdl-on .zdl-diyas { height: 64px; padding: 0 8px 8px; }
html.zdl-on .zdl-diyas .zdl-diya { transform: scale(.72); transform-origin: 50% 100%; }
html.zdl-on .zdl-eyebrow:not(#_) { gap: 6px; }
html.zdl-on .zdl-fil { width: 40px; height: 10px; }
html.zdl-on .zdl-eyebrow:not(#_) { margin-bottom: 12px; }
html.zdl-on .zdl-spk { width: 14px; height: 14px; }
html.zdl-on .zdl-glasstext:not(#_):not(#_) { font-size: 52px !important; padding: 2px 4px 6px; }
html.zdl-on .zdl-sign-h { font-size: 44px !important; }
html.zdl-on .zdl-x .zdl-sign-s:not(#_) { font-size: 16px; }
html.zdl-on .zdl-orn { margin-bottom: 24px; }
html.zdl-on .zdl-orn::before, html.zdl-on .zdl-orn::after { width: 56px; }
}
/* ════ LIQUID GLASS (iOS-style) ══════════════════════════════════════
Aditya: "puri website me kahin glass nahi — iOS jaisa lagao".
Glass tabhi dikhta hai jab peeche rang ho, isliye sections ko halki
aurora roshni di. Teen parat: (1) translucent safed + blur + saturate,
(2) upar-baayein specular chamak (background layer — pseudo nahi, site
ke ::before/::after se takraav na ho), (3) andar ka safed kinara +
garam chhaya. Mobile par bade cards ka blur band (scroll jank). */
html.zdl-on {
--zdl-glass-bg: rgba(255, 255, 255, .56);
--zdl-glass-hi: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
--zdl-glass-blur: blur(20px) saturate(1.8);
--zdl-glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(184, 134, 47, .1), inset 0 0 0 1px rgba(255, 255, 255, .38);
--zdl-glass-shadow: 0 1px 2px rgba(120, 84, 24, .06), 0 10px 28px -14px rgba(120, 84, 24, .26), 0 30px 60px -36px rgba(184, 134, 47, .3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.zdl-on { --zdl-glass-bg: rgba(255, 255, 255, .92); }
}
/* aurora — har section ke kinaron par rang, taaki kaanch jeeta lage */
html.zdl-on .zdl-sec:not(#_) {
background-image:
radial-gradient(34% 40% at 4% 10%, rgba(255, 178, 110, .30) 0%, rgba(255, 178, 110, 0) 70%),
radial-gradient(30% 36% at 97% 22%, rgba(236, 128, 166, .20) 0%, rgba(236, 128, 166, 0) 70%),
radial-gradient(36% 40% at 80% 98%, rgba(84, 186, 176, .16) 0%, rgba(84, 186, 176, 0) 70%),
radial-gradient(30% 34% at 20% 94%, rgba(239, 203, 126, .28) 0%, rgba(239, 203, 126, 0) 70%) !important;
}
html.zdl-on .zdl-sec.zdl-lit:not(#_) {
background-image:
radial-gradient(34% 40% at 96% 8%, rgba(255, 178, 110, .28) 0%, rgba(255, 178, 110, 0) 70%),
radial-gradient(30% 36% at 3% 40%, rgba(84, 186, 176, .15) 0%, rgba(84, 186, 176, 0) 70%),
radial-gradient(36% 40% at 30% 100%, rgba(236, 128, 166, .18) 0%, rgba(236, 128, 166, 0) 70%),
radial-gradient(30% 34% at 84% 90%, rgba(239, 203, 126, .30) 0%, rgba(239, 203, 126, 0) 70%) !important;
}
/* cards (sweep inline var(--zdl-glass-bg/hi) likhta hai) */
html.zdl-on .zdl-card:not(#_) {
-webkit-backdrop-filter: var(--zdl-glass-blur) !important; backdrop-filter: var(--zdl-glass-blur) !important;
border: 1px solid rgba(255, 255, 255, .78) !important;
box-shadow: var(--zdl-glass-edge), var(--zdl-glass-shadow) !important;
}
html.zdl-on .zdl-card.zdl-flat:not(#_) { box-shadow: var(--zdl-glass-edge) !important; }
html.zdl-on .zdl-card:not(.zdl-flat):not(#_):hover {
border-color: rgba(226, 182, 92, .7) !important;
box-shadow: var(--zdl-glass-edge), 0 0 0 1px rgba(226, 182, 92, .25), 0 18px 40px -16px rgba(184, 134, 47, .42) !important;
}
/* site ke apne safed cards (sweep ne nahi chhue) bhi kaanch */
html.zdl-on :is(.blog-item, .custom-plan:not(.featured), .zpc-calc, .cmp-wrap):not(#_) {
background-color: var(--zdl-glass-bg) !important; background-image: var(--zdl-glass-hi) !important;
-webkit-backdrop-filter: var(--zdl-glass-blur); backdrop-filter: var(--zdl-glass-blur);
border: 1px solid rgba(255, 255, 255, .78) !important;
box-shadow: var(--zdl-glass-edge), var(--zdl-glass-shadow) !important;
}
/* header — asli liquid glass */
html.zdl-on header.zc-header:not(#_) {
background-color: rgba(255, 253, 248, .7) !important;
background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12)) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.9) !important; backdrop-filter: blur(22px) saturate(1.9) !important;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .85), 0 1px 0 rgba(184, 134, 47, .16), 0 10px 30px -18px rgba(120, 84, 24, .3) !important;
}
html.zdl-on .zc-dropdown:not(#_) {
background-color: rgba(255, 255, 255, .7) !important; background-image: var(--zdl-glass-hi) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, .8) !important;
box-shadow: var(--zdl-glass-edge), 0 24px 48px -20px rgba(120, 84, 24, .35) !important;
}
/* pills: hero island, "See how it works" */
html.zdl-on .zh-island:not(#_),
html.zdl-on .zh-cta-text:not(#_) {
background-color: rgba(255, 255, 255, .5) !important; background-image: var(--zdl-glass-hi) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, .85) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(184, 134, 47, .12), 0 6px 18px -10px rgba(120, 84, 24, .3) !important;
}
html.zdl-on .zh-cta-text:not(#_) {
display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px !important; border-radius: 999px;
text-decoration: none !important;
transition: background-color var(--zdl-fast) var(--zdl-ease), box-shadow var(--zdl-fast) var(--zdl-ease), transform var(--zdl-fast) var(--zdl-ease) !important;
}
html.zdl-on .zh-cta-text:not(#_)::after { content: none !important; }
html.zdl-on .zh-cta-text:not(#_):hover { background-color: rgba(255, 255, 255, .78) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(226, 182, 92, .45), 0 10px 24px -12px rgba(184, 134, 47, .45) !important; }
html.zdl-on .zh-cta-text:not(#_):active { transform: scale(.98); }
html.zdl-on .zh-cta-text:not(#_):focus-visible { outline: 2px solid var(--zdl-teal); outline-offset: 3px; }
/* trust rail */
html.zdl-on .zc-trust-inner:not(#_) {
background-color: rgba(255, 255, 255, .5) !important; background-image: var(--zdl-glass-hi) !important;
-webkit-backdrop-filter: var(--zdl-glass-blur); backdrop-filter: var(--zdl-glass-blur);
border: 1px solid rgba(255, 255, 255, .8) !important;
box-shadow: var(--zdl-glass-edge), var(--zdl-glass-shadow) !important;
}
@media (min-width: 768px) {
html.zdl-on .zc-trust-inner .zc-trust-item.zdl-card:not(#_) {
background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border-color: rgba(255, 255, 255, .6) !important; box-shadow: none !important;
}
}
/* launch band + countdown */
html.zdl-on .zdl-band-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .7) 0%, rgba(255, 251, 242, .5) 55%, rgba(255, 245, 226, .42) 100%) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
}
html.zdl-on .zdl-cd-cell {
background: var(--zdl-glass-hi), rgba(255, 255, 255, .52) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(184, 134, 47, .14), 0 12px 24px -14px rgba(120, 84, 24, .34) !important;
}
/* countdown ke ank — glass-gold, hero jaisa */
html.zdl-on .zdl-cd-n {
background-image: linear-gradient(180deg, #E9C67A 0%, #B8862F 42%, #7E5618 70%, #B48434 100%) !important;
background-size: 100% 100% !important;
-webkit-text-stroke: .3px rgba(255, 248, 225, .5);
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 3px 4px rgba(110, 72, 18, .26));
}
/* site ke card accent (hari patli rekha) — sona */
html.zdl-on :is(.custom-feat-card, .custom-plan:not(.featured)):not(#_)::before {
background-image: linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .75), rgba(184, 134, 47, .5), rgba(226, 182, 92, 0)) !important;
}
html.zdl-on .custom-plan.featured:not(#_)::before {
background-image: linear-gradient(90deg, rgba(255, 231, 168, 0), rgba(255, 231, 168, .8), rgba(255, 231, 168, 0)) !important;
}
/* ════ GLASS STAGE — card sections me asli liquid glass ═════════════
Peeche rangeen blobs (zdl.js glassStage), aur yahan ke cards ke
--zdl-glass-* variables gehre kaanch wale. Cards par sweep inline
`var(--zdl-glass-bg/hi)` likhta hai — variable section se aata hai,
isliye inline styles chhuye bina sirf yahan ke cards badalte hain. */
html.zdl-on .zdl-gstage {
--zdl-glass-bg: rgba(255, 255, 255, .34);
--zdl-glass-hi:
linear-gradient(118deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 26%, rgba(255, 255, 255, 0) 42%),
radial-gradient(80% 70% at 100% 100%, rgba(255, 214, 150, .2) 0%, rgba(255, 214, 150, 0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
--zdl-glass-blur: blur(26px) saturate(2.1);
--zdl-glass-edge:
inset 1px 1px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .35),
inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -18px 30px -24px rgba(184, 134, 47, .22);
--zdl-glass-shadow: 0 1px 2px rgba(120, 84, 24, .06), 0 14px 34px -16px rgba(120, 84, 24, .3), 0 34px 70px -40px rgba(184, 134, 47, .38);
}
html.zdl-on .zdl-gstage :is(.zdl-card, .custom-feat-card, .zc-intg-card):not(#_) {
border: 1px solid rgba(255, 255, 255, .72) !important;
-webkit-backdrop-filter: var(--zdl-glass-blur) !important; backdrop-filter: var(--zdl-glass-blur) !important;
}
html.zdl-on .zdl-gstage :is(.custom-feat-card, .zc-intg-card):not(.zdl-card):not(#_) {
background-color: var(--zdl-glass-bg) !important; background-image: var(--zdl-glass-hi) !important;
box-shadow: var(--zdl-glass-edge), var(--zdl-glass-shadow) !important;
}
html.zdl-on .zdl-blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html.zdl-on .zdl-blobs i { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; }
html.zdl-on .zdl-blobs i:nth-child(1) { left: -4%; top: 6%; background: radial-gradient(closest-side, rgba(255, 168, 86, .5), rgba(255, 168, 86, 0)); }
html.zdl-on .zdl-blobs i:nth-child(2) { right: -6%; top: -4%; background: radial-gradient(closest-side, rgba(236, 118, 160, .4), rgba(236, 118, 160, 0)); }
html.zdl-on .zdl-blobs i:nth-child(3) { left: 30%; bottom: -18%; background: radial-gradient(closest-side, rgba(58, 170, 160, .34), rgba(58, 170, 160, 0)); }
html.zdl-on .zdl-blobs i:nth-child(4) { right: 18%; bottom: 2%; width: 34vw; background: radial-gradient(closest-side, rgba(239, 196, 110, .5), rgba(239, 196, 110, 0)); }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-blobs i { animation: zdl-blob 22s ease-in-out infinite alternate; }
html.zdl-on .zdl-blobs i:nth-child(2) { animation-duration: 27s; animation-delay: -6s; }
html.zdl-on .zdl-blobs i:nth-child(3) { animation-duration: 31s; animation-delay: -12s; }
html.zdl-on .zdl-blobs i:nth-child(4) { animation-duration: 25s; animation-delay: -3s; }
}
@keyframes zdl-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -5%) scale(1.08); } 100% { transform: translate(-5%, 4%) scale(.96); } }
@media (max-width: 767px) {
html.zdl-on { --zdl-glass-bg: rgba(255, 255, 255, .84); }
/* phone par blur band (jank) — kaanch ka bhaaw gloss + halki paardarshita se */
html.zdl-on .zdl-gstage { --zdl-glass-bg: rgba(255, 255, 255, .62); }
html.zdl-on .zdl-gstage :is(.zdl-card, .custom-feat-card, .zc-intg-card):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.zdl-on :is(.zdl-card, .blog-item, .custom-plan:not(.featured), .zpc-calc, .cmp-wrap, .zc-trust-inner, .zdl-band-card):not(#_) {
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.zdl-on header.zc-header:not(#_) { -webkit-backdrop-filter: blur(14px) saturate(1.6) !important; backdrop-filter: blur(14px) saturate(1.6) !important; background-color: rgba(255, 253, 248, .84) !important; }
html.zdl-on .zh-cta-text:not(#_) { justify-content: center; }
html.zdl-on .zdl-band-card { background: linear-gradient(160deg, #FFFFFF 0%, #FFFBF2 55%, #FFF5E2 100%) !important; }
}
/* ════ INTEGRATION CARDS — brand aura glass (file ke aakhir me: .zdl-gstage ke baad jeete) ════ */
/* ── integration cards: premium liquid glass ─────────────────────────
Har card ke kaanch ke peeche uske brand ka aura (--zdl-aura, zdl.js
logos() set karta hai) — sweep inline background-image me
var(--zdl-glass-hi) likhta hai, isliye wahi variable yahan card par
badal kar aura jod diya (inline ko chhede bina). Hover par cursor
spotlight (::before — site ka ::after pehle se shine ke liye hai). */
html.zdl-on .zc-intg-card.zdl-icard:not(#_) {
--zdl-glass-bg: rgba(255, 255, 255, .4);
--zdl-glass-hi:
radial-gradient(70% 46% at 50% 0%, rgba(var(--zdl-aura, 226,182,92), .2) 0%, rgba(var(--zdl-aura, 226,182,92), 0) 72%),
radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 46%),
linear-gradient(165deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 60%, rgba(var(--zdl-aura, 226,182,92), .06));
position: relative; overflow: hidden; isolation: isolate;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow:
inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--zdl-aura, 226,182,92), .14), inset 0 0 0 1px rgba(255, 255, 255, .35),
0 0 0 1px rgba(184, 134, 47, .1), 0 2px 4px rgba(120, 84, 24, .05),
0 18px 40px -22px rgba(var(--zdl-aura, 184,134,47), .35), 0 34px 60px -40px rgba(120, 84, 24, .35) !important;
transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s cubic-bezier(.22, .8, .24, 1), border-color .25s ease-out !important;
}
html.zdl-on .zc-intg-card.zdl-icard::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: radial-gradient(280px circle at var(--zdl-mx, 50%) var(--zdl-my, 0%), rgba(var(--zdl-aura, 226,182,92), .2), rgba(var(--zdl-aura, 226,182,92), 0) 65%);
opacity: 0; transition: opacity .3s ease-out;
}
html.zdl-on .zc-intg-card.zdl-icard:hover::before { opacity: 1; }
html.zdl-on .zc-intg-card.zdl-icard:not(#_):hover {
border-color: rgba(255, 255, 255, 1) !important;
box-shadow:
inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .5),
0 0 0 1px rgba(var(--zdl-aura, 226,182,92), .3), 0 4px 8px rgba(120, 84, 24, .06),
0 26px 50px -22px rgba(var(--zdl-aura, 184,134,47), .5), 0 40px 70px -40px rgba(120, 84, 24, .4) !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zc-intg-card.zdl-icard:not(#_):hover { transform: translateY(-6px) !important; }
}
html.zdl-on .zc-intg-card.zdl-icard :is(h5, h4, h3):not(#_) { letter-spacing: -.01em; }
/* icon tile — glass + brand halo (andar ki chamak) */
html.zdl-on .zc-intg-card.zdl-icard .zc-intg-icon.zdl-ilogo:not(#_):not(#_) {
position: relative;
background: radial-gradient(90% 70% at 30% 0%, #FFFFFF 0%, rgba(255, 255, 255, .72) 60%, rgba(255, 255, 255, .55) 100%) !important;
box-shadow:
inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 -2px 6px rgba(var(--zdl-aura, 226,182,92), .12),
0 0 0 1px rgba(var(--zdl-aura, 184,134,47), .14), 0 10px 24px -10px rgba(var(--zdl-aura, 184,134,47), .55) !important;
}
html.zdl-on .zc-intg-card.zdl-icard .zc-intg-icon.zdl-ilogo::after {
content: "" !important; position: absolute; inset: -14px; z-index: -1; border-radius: 28px; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--zdl-aura, 226,182,92), .28), rgba(var(--zdl-aura, 226,182,92), 0));
opacity: .55; transition: opacity .3s ease-out;
}
html.zdl-on .zc-intg-card.zdl-icard:hover .zc-intg-icon.zdl-ilogo::after { opacity: 1; }
html.zdl-on .zc-intg-card.zdl-icard .zc-intg-icon.zdl-ilogo img,
html.zdl-on .zc-intg-card.zdl-icard .zdl-glyph { transition: transform .35s cubic-bezier(.22, .8, .24, 1); }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zc-intg-card.zdl-icard:hover .zc-intg-icon.zdl-ilogo :is(img, .zdl-glyph) { transform: scale(1.08); }
}
/* ════ PRICING — iOS liquid glass ═══════════════════════════════════
Halke plans = gstage ka safed kaanch (variables se). Featured = gehra
teal kaanch, sone ka rim. Toggle, plan-chip, CTA bhi kaanch. */
html.zdl-on .zdl-gstage .custom-plan:not(.featured):not(#_) {
-webkit-backdrop-filter: var(--zdl-glass-blur) !important; backdrop-filter: var(--zdl-glass-blur) !important;
}
html.zdl-on .custom-plan.zdl-glass-dark:not(#_):not(#_) {
background-color: rgba(10, 52, 56, .8) !important;
background-image:
linear-gradient(118deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 42%),
radial-gradient(90% 55% at 100% 0%, rgba(226, 182, 92, .26) 0%, rgba(226, 182, 92, 0) 60%),
radial-gradient(70% 50% at 0% 100%, rgba(58, 170, 160, .22) 0%, rgba(58, 170, 160, 0) 60%),
linear-gradient(180deg, rgba(16, 78, 82, .55), rgba(6, 32, 35, .75)) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.7) !important; backdrop-filter: blur(26px) saturate(1.7) !important;
border: 1px solid rgba(255, 231, 168, .38) !important;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .05),
0 0 0 1px rgba(226, 182, 92, .22), 0 34px 70px -30px rgba(10, 46, 49, .65), 0 18px 40px -24px rgba(184, 134, 47, .45) !important;
}
/* "+18% GST" aur "₹33 a day" ek ke upar ek — per-day ki negative margin GST
note se pehle ke design ki thi (live site par bhi yahi bug) */
html.zdl-on .custom-plan-header .zpp-gst-note:not(#_) { display: block; margin: 6px 0 0 !important; }
html.zdl-on .custom-plan-header .cpf-perday:not(#_) { margin-top: 4px !important; position: static !important; }
/* monthly/yearly toggle */
html.zdl-on .zpp-toggle:not(#_) {
background: var(--zdl-glass-hi, none), rgba(255, 255, 255, .5) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.9); backdrop-filter: blur(18px) saturate(1.9);
border: 1px solid rgba(255, 255, 255, .85) !important;
box-shadow: inset 1px 1px 0 #fff, inset 0 -1px 0 rgba(184, 134, 47, .14), 0 10px 26px -14px rgba(120, 84, 24, .35) !important;
}
html.zdl-on .zpp-toggle .zpp-save:not(#_) {
background: linear-gradient(135deg, #FFE7A8, #E7BC66 45%, #C38D34) !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
}
/* plan naam ki chip */
html.zdl-on .custom-plan .custom-plan-name:not(#_) {
background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(120, 84, 24, .3) !important;
}
html.zdl-on .custom-plan.zdl-glass-dark .custom-plan-name:not(#_) {
background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 231, 168, .4) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
color: #F3DDA6 !important; -webkit-text-fill-color: #F3DDA6 !important;
}
/* CTA: halke cards par kaanch ka button, featured par chamakta safed kaanch */
html.zdl-on .custom-plan .custom-plan-cta-outline:not(#_) {
background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .95) !important;
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(184, 134, 47, .12), 0 8px 20px -12px rgba(120, 84, 24, .4) !important;
transition: box-shadow .18s ease-out, background-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .custom-plan .custom-plan-cta-outline:not(#_):hover {
background: rgba(255, 255, 255, .85) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(226, 182, 92, .6), 0 12px 26px -12px rgba(184, 134, 47, .55) !important;
}
html.zdl-on .custom-plan.zdl-glass-dark .custom-plan-cta:not(#_) {
background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 249, 236, .88)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 231, 168, .6), 0 12px 28px -12px rgba(0, 0, 0, .45) !important;
}
html.zdl-on .custom-plan :is(.custom-plan-cta):not(#_):active { transform: scale(.98); }
html.zdl-on .custom-plan .cpf-upsell:not(#_) {
background: rgba(255, 255, 255, .45) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
box-shadow: inset 0 1px 0 #fff !important;
}
@media (max-width: 767px) {
html.zdl-on .custom-plan.zdl-glass-dark:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(10, 52, 56, .94) !important; }
html.zdl-on .zpp-toggle:not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .8) !important; }
}
/* ════ CTA JEWEL — "Get Started" panel: gehra teal ratn, sone ka kinara ═══
Panel sweep se bahar hai (zdl.js SKIP) — saari styling yahin. Decor
(.zdl-cta-deco: mandala, bokeh, gloss, sheen) zdl.js ctaJewel() daalta hai. */
html.zdl-on .zgc-panel:not(#_):not(#_) {
position: relative; overflow: hidden; isolation: isolate; border-radius: 28px !important;
background-color: #0A3A3E !important;
background-image:
radial-gradient(50% 70% at 0% 100%, rgba(226, 182, 92, .26) 0%, rgba(226, 182, 92, 0) 70%),
radial-gradient(45% 60% at 100% 0%, rgba(238, 138, 34, .2) 0%, rgba(238, 138, 34, 0) 70%),
radial-gradient(60% 80% at 50% 50%, rgba(20, 110, 112, .45) 0%, rgba(20, 110, 112, 0) 70%),
linear-gradient(150deg, #0F4D52 0%, #0A3438 46%, #062427 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -60px 90px -50px rgba(2, 18, 20, .55),
0 2px 4px rgba(7, 38, 40, .2), 0 30px 70px -30px rgba(10, 58, 62, .7), 0 60px 120px -60px rgba(226, 182, 92, .5) !important;
}
/* site ka safed border (::after) → sone ka gradient kinara */
html.zdl-on .zgc-panel:not(#_)::after {
border: 0 !important; padding: 1.5px; z-index: 4 !important;
background: linear-gradient(135deg, rgba(255, 236, 190, .95), rgba(226, 182, 92, .3) 28%, rgba(226, 182, 92, .12) 55%, rgba(255, 236, 190, .8)) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html.zdl-on .zgc-panel .zgc-orb--a:not(#_) { background: radial-gradient(circle, rgba(255, 196, 110, .32), rgba(255, 196, 110, 0) 70%) !important; }
html.zdl-on .zgc-panel .zgc-orb--b:not(#_) { background: radial-gradient(circle, rgba(236, 118, 160, .22), rgba(236, 118, 160, 0) 70%) !important; }
html.zdl-on .zgc-panel .zgc-glow:not(#_) { background: radial-gradient(58% 100% at 50% 0%, rgba(255, 236, 190, .18), rgba(255, 236, 190, 0) 70%) !important; }
html.zdl-on .zgc-panel .zgc-inner:not(#_) { position: relative; z-index: 3; }
/* decor */
html.zdl-on .zdl-cta-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
html.zdl-on .zdl-cta-m { position: absolute; top: 50%; width: 460px; height: 460px; margin-top: -230px; color: #E2B65C; opacity: .12; }
html.zdl-on .zdl-cta-m.l { left: -170px; } html.zdl-on .zdl-cta-m.r { right: -170px; }
html.zdl-on .zdl-cta-m svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-cta-m svg { animation: zdl-spin 160s linear infinite; }
html.zdl-on .zdl-cta-m.r svg { animation-direction: reverse; }
}
html.zdl-on .zdl-cta-bokeh i {
position: absolute; border-radius: 50%;
/* grey bulbule nahi — chamakti sone ki roshni (core + glow) */
background: radial-gradient(circle, #FFF6DA 0%, rgba(255, 220, 140, .95) 30%, rgba(240, 180, 80, .35) 60%, rgba(226, 182, 92, 0) 72%);
box-shadow: 0 0 10px 2px rgba(255, 206, 120, .55), 0 0 22px 6px rgba(240, 170, 70, .22);
opacity: .6; animation: zdl-bokeh 6s ease-in-out infinite;
}
@keyframes zdl-bokeh { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-cta-bokeh i { animation: zdl-bokeh 6s ease-in-out infinite, zdl-bokeh-f 9s ease-in-out infinite alternate; }
}
@keyframes zdl-bokeh-f { from { transform: translateY(0); } to { transform: translateY(-18px); } }
/* kaanch ka gumbad — upar se chamakti chikni parat */
html.zdl-on .zdl-cta-gloss {
position: absolute; left: 4%; right: 4%; top: 0; height: 52%;
border-radius: 0 0 50% 50% / 0 0 34% 34%;
background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, 0) 100%);
}
/* diagonal chamak — har 6s */
html.zdl-on .zdl-cta-sheen {
position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%;
background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 246, 220, .2) 50%, rgba(255, 255, 255, 0));
transform: translateX(0) skewX(-14deg);
animation: zdl-cta-sheen 6.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}
@keyframes zdl-cta-sheen { 0% { transform: translateX(0) skewX(-14deg); } 35%, 100% { transform: translateX(720%) skewX(-14deg); } }
/* content */
html.zdl-on .zgc-panel .zgc-pill:not(#_) {
background: rgba(255, 231, 168, .14) !important; border: 1px solid rgba(255, 231, 168, .5) !important;
color: #F6DFA4 !important; -webkit-text-fill-color: #F6DFA4 !important; letter-spacing: .18em !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -10px rgba(226, 182, 92, .6) !important;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.zdl-on .zgc-panel .zgc-h2:not(#_) {
background-image: linear-gradient(180deg, #FFFFFF 0%, #FFF4DA 52%, #F0CF88 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; -webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 2px 0 rgba(2, 24, 26, .35)) drop-shadow(0 12px 24px rgba(2, 24, 26, .35));
letter-spacing: -.02em;
}
html.zdl-on .zgc-panel .zgc-sub:not(#_) { color: rgba(255, 246, 228, .82) !important; -webkit-text-fill-color: rgba(255, 246, 228, .82) !important; }
html.zdl-on .zgc-panel .zgc-btn--primary:not(#_) {
border: 0 !important; border-radius: 999px !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
background: linear-gradient(135deg, #FFEDB8 0%, #E7BC66 38%, #C38D34 72%, #E8C886 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 252, 238, .9), 0 2px 4px rgba(2, 24, 26, .3), 0 14px 30px -10px rgba(226, 182, 92, .75) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out !important;
}
html.zdl-on .zgc-panel .zgc-btn--primary:not(#_) i { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-on .zgc-panel .zgc-btn--primary:not(#_):hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 #FFFCEE, 0 2px 4px rgba(2, 24, 26, .3), 0 20px 40px -12px rgba(226, 182, 92, .9) !important; }
html.zdl-on .zgc-panel .zgc-btn--ghost:not(#_) {
border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .38) !important;
color: #FFF8EA !important; -webkit-text-fill-color: #FFF8EA !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px -12px rgba(2, 24, 26, .6) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .zgc-panel .zgc-btn--ghost:not(#_):hover { background: rgba(255, 255, 255, .2) !important; border-color: rgba(255, 231, 168, .7) !important; }
html.zdl-on .zgc-panel .zgc-btn:not(#_):active { transform: scale(.98); }
html.zdl-on .zgc-panel .zgc-btn:not(#_):focus-visible { outline: 2px solid #F6DFA4; outline-offset: 3px; }
html.zdl-on .zgc-panel .zgc-trust:not(#_) { color: rgba(255, 246, 228, .75) !important; -webkit-text-fill-color: rgba(255, 246, 228, .75) !important; }
html.zdl-on .zgc-panel .zgc-trust i:not(#_) { color: #E7BE6A !important; -webkit-text-fill-color: #E7BE6A !important; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zgc-panel .zgc-btn:not(#_):hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
html.zdl-on .zdl-cta-m { width: 300px; height: 300px; margin-top: -150px; opacity: .08; }
html.zdl-on .zdl-cta-m.l { left: -150px; } html.zdl-on .zdl-cta-m.r { right: -150px; }
html.zdl-on .zgc-panel :is(.zgc-pill, .zgc-btn--ghost):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.zdl-on .custom-plan.zdl-glass-dark .zpp-gst-note:not(#_) { color: rgba(247, 238, 221, .68) !important; -webkit-text-fill-color: rgba(247, 238, 221, .68) !important; }
/* ════ PRICING — Diwali sajawat (zdl.js pricingDiwali) ═════════════ */
html.zdl-on .zdl-prs .custom-plan:not(#_) { isolation: isolate; }
html.zdl-on .zdl-pdeco { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
html.zdl-on .zdl-prang { position: absolute; right: -86px; bottom: -86px; width: 240px; height: 240px; opacity: .26; }
html.zdl-on .zdl-prang svg { width: 100%; height: 100%; display: block; }
html.zdl-on .custom-plan.featured .zdl-prang { opacity: .2; right: auto; left: -90px; bottom: -90px; }
@media (prefers-reduced-motion: no-preference) { html.zdl-on .zdl-prang { animation: zdl-spin 90s linear infinite; } }
/* bagal ke plans par mini jewel toran */
html.zdl-on .zdl-ptoran { position: absolute; left: 28px; right: 28px; top: 0; height: 30px; z-index: 1; pointer-events: none; }
html.zdl-on .zdl-ptoran svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(120, 84, 24, .18)); }
/* featured: jalta diya beech me upar */
html.zdl-on .zdl-pdiya { position: absolute; left: 50%; top: 10px; z-index: 2; margin-left: -28px; pointer-events: none; }
html.zdl-on .zdl-pdiya .zdl-diya { transform: scale(.82); transform-origin: 50% 100%; }
html.zdl-on .zdl-pdiya .zdl-flame::after { width: 90px; height: 90px; margin: -50px 0 0 -45px; background: radial-gradient(closest-side, rgba(255, 190, 90, .5), rgba(255, 190, 90, 0)); }
html.zdl-on .zdl-prs .custom-plan .custom-plan-badge:not(#_) { z-index: 3; }
/* timtimate sone ke sitare */
html.zdl-on .zdl-pstars b {
position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
background: radial-gradient(circle, #FFF3CC 0%, rgba(255, 231, 168, 0) 70%);
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
animation: zdl-pstar 3.2s ease-in-out infinite;
}
@keyframes zdl-pstar { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (max-width: 767px) {
html.zdl-on .zdl-prang { width: 180px; height: 180px; right: -64px; bottom: -64px; }
html.zdl-on .zdl-ptoran { left: 20px; right: 20px; height: 24px; }
}
/* ════ COMPARISON TABLE — premium, background se alag ═════════════════
Pehle table ka kaanch aur section ka ivory ek jaise the — table "ghul"
jaata tha. Ab: crisp safed card, sone ka gradient kinara, gehri teal +
sunehri chhaya, aur ZupiChat column ek roshan teal "spotlight".
.cmp-wrap sweep se bahar hai (zdl.js SKIP) — saari styling yahin. */
html.zdl-on .cmp-wrap:not(#_):not(#_) {
position: relative; isolation: isolate; border-radius: 24px !important; overflow: hidden;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%) !important;
border: 0 !important;
box-shadow:
0 1px 2px rgba(120, 84, 24, .08), 0 18px 40px -18px rgba(120, 84, 24, .28),
0 50px 90px -46px rgba(10, 71, 76, .42), 0 30px 70px -40px rgba(226, 182, 92, .45) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* sone ka gradient kinara (::after khaali tha) */
html.zdl-on .cmp-wrap:not(#_)::after {
content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: linear-gradient(135deg, #F3D594, rgba(226, 182, 92, .35) 30%, rgba(226, 182, 92, .2) 60%, #E7BE6A);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* upar ki hari rekha → sone ki */
html.zdl-on .cmp-wrap:not(#_)::before {
background: linear-gradient(90deg, rgba(226, 182, 92, 0), #C9973B 25%, #FFE7A8 50%, #C9973B 75%, rgba(226, 182, 92, 0)) !important;
height: 3px !important;
}
html.zdl-on .cmp-wrap .cmp-table:not(#_) { background: transparent !important; border-collapse: separate; border-spacing: 0; }
/* header */
html.zdl-on .cmp-wrap thead tr:not(#_),
html.zdl-on .cmp-wrap thead th:not(#_):not(.cmp-th-zc) {
background: linear-gradient(180deg, #FFF8EA 0%, #FFFDF8 100%) !important;
border-bottom: 1px solid rgba(184, 134, 47, .22) !important;
}
html.zdl-on .cmp-wrap .cmp-th-feat:not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; letter-spacing: -.01em; }
html.zdl-on .cmp-wrap .cmp-th:not(.cmp-th-zc):not(#_) { color: rgba(16, 38, 42, .6) !important; -webkit-text-fill-color: rgba(16, 38, 42, .6) !important; }
/* ZupiChat header — jewel teal + sone ka taj */
html.zdl-on .cmp-wrap .cmp-th-zc:not(#_):not(#_) {
position: relative;
background:
radial-gradient(90% 80% at 50% 0%, rgba(255, 236, 190, .22) 0%, rgba(255, 236, 190, 0) 60%),
linear-gradient(160deg, #11555A 0%, #0A3A3E 55%, #072A2D 100%) !important;
box-shadow: inset 0 3px 0 #E2B65C, inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 34px -14px rgba(10, 71, 76, .55) !important;
border: 0 !important;
}
/* ZupiChat column — halki teal roshni + sone ke kinare */
html.zdl-on .cmp-wrap .cmp-col-zc:not(#_):not(#_) {
background: linear-gradient(90deg, rgba(10, 71, 76, .05), rgba(10, 71, 76, .085) 50%, rgba(10, 71, 76, .05)) !important;
border-left: 1px solid rgba(226, 182, 92, .45) !important; border-right: 1px solid rgba(226, 182, 92, .45) !important;
}
html.zdl-on .cmp-wrap tbody tr:last-child .cmp-col-zc:not(#_) { box-shadow: inset 0 -3px 0 #E2B65C !important; }
/* rows — halke stripes + sunehra hover */
html.zdl-on .cmp-wrap tbody tr:not(#_) { background: transparent !important; transition: background-color .2s ease-out; }
html.zdl-on .cmp-wrap tbody tr:nth-child(even):not(#_) { background: rgba(251, 244, 230, .55) !important; }
html.zdl-on .cmp-wrap tbody tr:not(#_):hover { background: rgba(226, 182, 92, .1) !important; }
html.zdl-on .cmp-wrap tbody td:not(#_) { border-bottom: 1px solid rgba(184, 134, 47, .12) !important; }
html.zdl-on .cmp-wrap tbody tr:last-child td:not(#_) { border-bottom: 0 !important; }
html.zdl-on .cmp-wrap .cmp-feat:not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .cmp-wrap .cmp-feat i:not(#_) { color: #C9973B !important; -webkit-text-fill-color: #C9973B !important; }
/* ZupiChat ke check — teal ratn + sone ki ring */
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_) {
background: radial-gradient(70% 70% at 35% 30%, #2E8C90 0%, #0E4E52 55%, #0A3A3E 100%) !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 3.5px rgba(226, 182, 92, .7), 0 10px 22px -8px rgba(10, 71, 76, .6), inset 0 1.5px 0 rgba(255, 255, 255, .35) !important;
}
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_) svg,
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_) path { stroke: #FFF4D6 !important; color: #FFF4D6 !important; }
/* CTA neeche */
html.zdl-on .cmp-cta .cmp-cta-btn:not(#_):not(#_) {
border: 0 !important; border-radius: 999px !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
background: linear-gradient(135deg, #FFEDB8 0%, #E7BC66 38%, #C38D34 72%, #E8C886 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 252, 238, .9), 0 2px 4px rgba(120, 84, 24, .2), 0 14px 30px -10px rgba(195, 141, 52, .7) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out !important;
}
html.zdl-on .cmp-cta .cmp-cta-btn:not(#_) i { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-on .cmp-cta .cmp-cta-btn:not(#_):hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 #FFFCEE, 0 2px 4px rgba(120, 84, 24, .2), 0 20px 40px -12px rgba(195, 141, 52, .85) !important; }
html.zdl-on .cmp-cta .cmp-cta-btn:not(#_):active { transform: scale(.98); }
html.zdl-on .cmp-cta .cmp-cta-btn:not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 3px; }
html.zdl-on .cmp-cta .cmp-cta-note i:not(#_) { color: #B8862F !important; -webkit-text-fill-color: #B8862F !important; }
/* ════ BILL CALCULATOR — iOS glass + Diwali (zdl.js calcGlass) ═════ */
html.zdl-on .zpc-calc:not(#_)::before { background-image: linear-gradient(90deg, rgba(226, 182, 92, 0), #C9973B 25%, #FFE7A8 50%, #C9973B 75%, rgba(226, 182, 92, 0)) !important; }
html.zdl-on .zpc-card.zdl-pcard:not(#_) {
background-color: var(--zdl-glass-bg, rgba(255, 255, 255, .4)) !important; background-image: var(--zdl-glass-hi) !important;
-webkit-backdrop-filter: var(--zdl-glass-blur, blur(22px) saturate(1.9)) !important; backdrop-filter: var(--zdl-glass-blur, blur(22px) saturate(1.9)) !important;
border: 1px solid rgba(255, 255, 255, .8) !important;
box-shadow: var(--zdl-glass-edge), var(--zdl-glass-shadow) !important;
transition: transform .24s cubic-bezier(.22, .8, .24, 1), box-shadow .24s ease-out !important;
}
html.zdl-on .zpc-card.zdl-pcard:not(#_):hover { box-shadow: var(--zdl-glass-edge), 0 0 0 1px rgba(226, 182, 92, .35), 0 18px 40px -18px rgba(184, 134, 47, .45) !important; }
html.zdl-on .zpc-card.zdl-glass-dark:not(#_):not(#_) {
position: relative; isolation: isolate; overflow: visible;
background-color: rgba(10, 52, 56, .82) !important;
background-image:
linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 42%),
radial-gradient(90% 60% at 100% 0%, rgba(226, 182, 92, .3) 0%, rgba(226, 182, 92, 0) 60%),
linear-gradient(180deg, rgba(16, 78, 82, .6), rgba(6, 32, 35, .78)) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.7) !important; backdrop-filter: blur(24px) saturate(1.7) !important;
border: 1px solid rgba(255, 231, 168, .42) !important;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(226, 182, 92, .25), 0 24px 50px -22px rgba(10, 46, 49, .6), 0 14px 30px -18px rgba(184, 134, 47, .5) !important;
}
html.zdl-on .zdl-cstars { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
html.zdl-on .zpc-card.zdl-glass-dark > :not(.zdl-cstars) { position: relative; z-index: 1; }
html.zdl-on .zpc-card.zdl-glass-dark .zpc-crown:not(#_) { position: absolute; z-index: 2; }
/* slider: sone ka bharta track + kaanch ka thumb */
html.zdl-on #zpc-range:not(#_) {
-webkit-appearance: none; appearance: none; height: 8px !important; border-radius: 999px !important; outline: none;
background: linear-gradient(90deg, #E7BE6A 0%, #C38D34 var(--zdl-pct, 9%), rgba(255, 255, 255, .7) var(--zdl-pct, 9%), rgba(255, 255, 255, .55) 100%) !important;
box-shadow: inset 0 1px 2px rgba(120, 84, 24, .28), 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 10px -6px rgba(184, 134, 47, .5) !important;
}
html.zdl-on #zpc-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; cursor: grab;
background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFF6DE 45%, #F3DDA6 100%) !important;
border: 2px solid #C9973B !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(226, 182, 92, .22), 0 4px 12px rgba(184, 134, 47, .5), 0 0 18px rgba(255, 196, 110, .55) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out;
}
html.zdl-on #zpc-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(226, 182, 92, .28), 0 6px 16px rgba(184, 134, 47, .6), 0 0 26px rgba(255, 196, 110, .8) !important; }
html.zdl-on #zpc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #0A474C, 0 0 18px rgba(255, 196, 110, .55) !important; }
html.zdl-on #zpc-range::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9973B;
background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFF6DE 45%, #F3DDA6 100%);
box-shadow: 0 0 0 4px rgba(226, 182, 92, .22), 0 4px 12px rgba(184, 134, 47, .5);
}
/* savings — sone ka kaanch pill, rakam foil me */
html.zdl-on .zpc-save.zdl-psave:not(#_) {
position: relative; overflow: hidden; border-radius: 999px !important;
background: linear-gradient(118deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, rgba(255, 233, 186, .72), rgba(255, 249, 236, .55) 55%, rgba(255, 226, 170, .65)) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.9); backdrop-filter: blur(18px) saturate(1.9);
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: inset 1px 1px 0 #fff, inset 0 -1px 0 rgba(184, 134, 47, .2), 0 0 0 1px rgba(226, 182, 92, .35), 0 14px 30px -16px rgba(184, 134, 47, .5) !important;
}
html.zdl-on .zpc-save.zdl-psave::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; pointer-events: none;
background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
transform: skewX(-14deg); animation: zdl-savesheen 5.5s ease-in-out infinite;
}
@keyframes zdl-savesheen { 0%, 62% { transform: translateX(0) skewX(-14deg); } 100% { transform: translateX(640%) skewX(-14deg); } }
html.zdl-on .zpc-save.zdl-psave i:not(#_) { color: #B8862F !important; -webkit-text-fill-color: #B8862F !important; }
html.zdl-on .zpc-save.zdl-psave #zpc-save-amt:not(#_) {
background-image: linear-gradient(180deg, #C9973B 0%, #7A5216 60%, #A9772A 100%); -webkit-background-clip: text; background-clip: text;
color: transparent !important; -webkit-text-fill-color: transparent !important; font-size: 1.12em;
}
@media (max-width: 767px) {
html.zdl-on .zpc-card.zdl-glass-dark:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(10, 52, 56, .94) !important; }
html.zdl-on .zpc-card.zdl-pcard:not(#_), html.zdl-on .zpc-save.zdl-psave:not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.zdl-on .zpc-save.zdl-psave:not(#_) { border-radius: 20px !important; }
}
/* cmp-zc-badge mobile — site ka purana bug: "RECOMMENDED" logo ke bagal me
ek line me baith kar WATI column me ghus jaata tha. Ab logo ke neeche. */
@media (max-width: 767px) {
html.zdl-on .cmp-wrap .cmp-th-zc .cmp-zc-badge:not(#_) {
display: block !important; width: max-content; max-width: 100%; margin: 8px auto 0 !important;
font-size: 9.5px !important; letter-spacing: .08em !important; padding: 4px 8px !important; white-space: nowrap;
}
}
/* ════ FAQ — iOS glass + Diwali (sirf CSS) ═════════════════════════ */
/* tabs: kaanch ki pill; active tab sone ka (tab badalne par bhi — class se, sweep se nahi) */
html.zdl-on .zgq-sec .custom--tab:not(#_):not(#_) {
background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .2) 45%), rgba(255, 255, 255, .45) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.9); backdrop-filter: blur(18px) saturate(1.9);
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: inset 1px 1px 0 #fff, inset 0 -1px 0 rgba(184, 134, 47, .14), 0 10px 26px -14px rgba(120, 84, 24, .35) !important;
}
html.zdl-on .zgq-sec .custom--tab .nav-link:not(#_):not(#_) {
position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important;
color: rgba(16, 38, 42, .72) !important; -webkit-text-fill-color: currentcolor !important;
transition: color .18s ease-out, background-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .zgq-sec .custom--tab .nav-link:not(.active):not(#_):not(#_):hover { color: #10262A !important; background: rgba(255, 255, 255, .6) !important; }
html.zdl-on .zgq-sec .custom--tab .nav-link.active:not(#_):not(#_) {
background: linear-gradient(135deg, #FFE7A8 0%, #E7BC66 40%, #C38D34 75%, #E2B35C 100%) !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .85), 0 6px 16px -8px rgba(184, 134, 47, .7) !important;
}
html.zdl-on .zgq-sec .custom--tab .nav-link.active::after {
content: ""; position: absolute; top: -5px; right: -3px; width: 12px; height: 12px; pointer-events: none;
background: radial-gradient(circle, #FFF6DA 0%, rgba(255, 231, 168, 0) 70%);
clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
animation: zdl-pstar 2.6s ease-in-out infinite;
}
html.zdl-on .zgq-sec .custom--tab .nav-link:not(#_):active { transform: scale(.97); }
html.zdl-on .zgq-sec .custom--tab .nav-link:not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 2px; }
/* khula sawaal: sone ki patti + halki sunehri chamak */
html.zdl-on .zgq-sec .accordion-item:not(#_)::before { background-image: linear-gradient(180deg, #FFE7A8, #C9973B 55%, #8A5F1A) !important; }
html.zdl-on .zgq-sec .accordion-item.zpq-open:not(#_):not(#_) {
border-color: rgba(226, 182, 92, .55) !important;
box-shadow: inset 1px 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 1px rgba(226, 182, 92, .22), 0 22px 50px -24px rgba(184, 134, 47, .5) !important;
}
/* jawab ka bubble: gehra brand-teal kaanch (WhatsApp jaisa chat, par theme ke rang me) */
html.zdl-on .zgq-sec .zpq-bubble:not(#_):not(#_) {
background:
linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 48%),
radial-gradient(90% 70% at 100% 0%, rgba(226, 182, 92, .28) 0%, rgba(226, 182, 92, 0) 60%),
linear-gradient(160deg, #10565B 0%, #0A3F43 55%, #072E31 100%) !important;
border: 1px solid rgba(255, 231, 168, .35) !important;
border-radius: 18px 18px 18px 6px !important;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -16px rgba(10, 46, 49, .6), 0 0 0 1px rgba(226, 182, 92, .15) !important;
}
html.zdl-on .zgq-sec .zpq-bubble:not(#_)::before { display: none !important; }
html.zdl-on .zgq-sec .zpq-bubble:not(#_):not(#_) :is(svg, svg *) { color: #E7BE6A !important; stroke: #E7BE6A !important; -webkit-text-fill-color: #E7BE6A !important; }
html.zdl-on .zgq-sec .zpq-bubble :is(small, time, [class*=time], [class*=meta]):not(#_):not(#_) { color: rgba(243, 221, 166, .8) !important; -webkit-text-fill-color: rgba(243, 221, 166, .8) !important; }
@media (max-width: 767px) {
html.zdl-on .zgq-sec .custom--tab:not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .82) !important; }
}
/* ════ RELOAD INTRO — har reload par (jab preloader skip hota hai) ═══
Sirf CSS, html.zdl-pre-skip (boot script repeat visit par lagata hai)
par — isliye pehle frame se chalta hai, bhaari page ke JS ka intezaar
nahi. Tier 1 (sabke liye): roshni ki lehar + fade. Tier 2: uthna/girna. */
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-hero, .custom-hero):not(#_)::after {
content: "" !important; position: absolute; inset: 0; z-index: 6; pointer-events: none;
background:
radial-gradient(60% 55% at 50% 0%, rgba(255, 244, 214, .98) 0%, rgba(255, 226, 170, .7) 38%, rgba(255, 214, 150, 0) 72%),
radial-gradient(30% 40% at 12% 8%, rgba(255, 196, 120, .5), rgba(255, 196, 120, 0) 70%),
radial-gradient(30% 40% at 88% 8%, rgba(240, 150, 180, .4), rgba(240, 150, 180, 0) 70%) !important;
animation: zdl-wash 1.15s cubic-bezier(.4, 0, .2, 1) calc(.7s + var(--zdl-rlo, 0s)) both;
}
@keyframes zdl-wash { 0% { opacity: 1; } 35% { opacity: .85; } 100% { opacity: 0; } } /* visibility/filter MAT — GPU se hatti hai, JS block me atakti hai */
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-island, .zh-h1, .zh-sub, .zh-ctas, .zh-meta, .zh-film,
.custom-hero h1, .custom-hero h1 ~ p, .custom-hero .btn, .custom-hero [class*=cta]):not(#_) {
animation: zdl-rise-o .7s cubic-bezier(.2, .8, .2, 1) both;
}
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zh-island:not(#_) { animation-delay: calc(.9s + var(--zdl-rlo, 0s)); }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-h1, .custom-hero h1):not(#_) { animation-delay: calc(1s + var(--zdl-rlo, 0s)); }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-sub, .custom-hero h1 ~ p):not(#_) { animation-delay: calc(1.1s + var(--zdl-rlo, 0s)); }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-ctas, .custom-hero .btn, .custom-hero [class*=cta]):not(#_) { animation-delay: calc(1.2s + var(--zdl-rlo, 0s)); }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zh-meta:not(#_) { animation-delay: calc(1.3s + var(--zdl-rlo, 0s)); }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zh-film:not(#_) { animation-delay: calc(1.38s + var(--zdl-rlo, 0s)); }
@keyframes zdl-rise-o { from { opacity: 0; } to { opacity: 1; } }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zdl-eyebrow:not(#_) { animation: zdl-rise-o .8s ease-out calc(.8s + var(--zdl-rlo, 0s)) both; }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zdl-lantern svg { animation: zdl-rise-o .6s ease-out calc(.9s + var(--zdl-rlo, 0s)) both; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) :is(.zh-island, .zh-h1, .zh-sub, .zh-ctas, .zh-meta,
.custom-hero h1, .custom-hero h1 ~ p, .custom-hero .btn, .custom-hero [class*=cta]):not(#_) { animation-name: zdl-rise; }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zh-film:not(#_) { animation-name: zdl-rise-film; animation-duration: .9s; }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zdl-eyebrow:not(#_) { animation-name: zdl-pop; }
/* kandil toran se jhoolte hue utarte hain (svg par — wrapper ka apna swing bacha rahe) */
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zdl-lantern svg { transform-origin: 50% 0; animation: zdl-drop 1.1s cubic-bezier(.3, 1.45, .45, 1) calc(.85s + var(--zdl-rlo, 0s)) both; }
html.zdl-on.zdl-pre-skip:is(:not(.zdl-rl), .zdl-rl-out) .zdl-lantern.r svg { animation-delay: calc(1s + var(--zdl-rlo, 0s)); }
}
@keyframes zdl-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes zdl-rise-film { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes zdl-pop { 0% { opacity: 0; transform: scale(.86); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes zdl-drop { 0% { opacity: 0; transform: translateY(-70px) rotate(-8deg); } 55% { opacity: 1; transform: translateY(6px) rotate(5deg); } 100% { opacity: 1; transform: none; } }
/* veil v2 (rl.css) hatne ke pal se hero uthe — upar ki delays ko 0.75s peeche khiskao */
html.zdl-rl-out { --zdl-rlo: -.75s; }
/* glow patakhe (reduce-motion par — hilte nahi, sirf chamakte) */
html.zdl-on .zdl-glows { position: fixed; inset: 0; z-index: 2147481000; pointer-events: none; }
html.zdl-on .zdl-glows i { position: absolute; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; opacity: 0; animation: zdl-glowpop 1.5s ease-out both; }
@keyframes zdl-glowpop { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
/* ════ RELOAD VEIL — har reload / repeat visit par poori screen ka intro ════
Purana hero-fade dikhta nahi tha: reload scroll wapas neeche le jaata hai, aur
zdl.js build (~1-3s main thread) ke beech JS animation atakti thi. Ye sirf
html::before/::after + sirf opacity (compositor) — scroll ya JS block se
bekaar nahi hota. Keyframes me visibility MAT daalna — ek bhi non-GPU property = poori animation main thread par = JS block me atakti hai. Pehli visit par film preloader hai (pre-skip nahi), wahan ye nahi. */
html.zdl-on.zdl-pre-skip:not(.zdl-rl)::before,
html.zdl-on.zdl-pre-skip:not(.zdl-rl)::after { pointer-events: none; will-change: opacity; }
html.zdl-on.zdl-pre-skip:not(.zdl-rl)::before {
content: ""; position: fixed; inset: 0; z-index: 2147483646;
background:
radial-gradient(2px 2px at 18% 26%, rgba(217, 168, 78, .9), transparent),
radial-gradient(2px 2px at 78% 22%, rgba(217, 168, 78, .8), transparent),
radial-gradient(1.5px 1.5px at 64% 72%, rgba(217, 168, 78, .8), transparent),
radial-gradient(1.5px 1.5px at 30% 68%, rgba(217, 168, 78, .7), transparent),
radial-gradient(2px 2px at 88% 58%, rgba(217, 168, 78, .7), transparent),
radial-gradient(1.5px 1.5px at 10% 52%, rgba(217, 168, 78, .6), transparent),
linear-gradient(90deg, rgba(201, 151, 59, 0), rgba(201, 151, 59, .7), rgba(201, 151, 59, 0)) 50% calc(50% + clamp(40px, 5.4vw, 72px)) / 200px 1px no-repeat,
radial-gradient(42% 34% at 50% 50%, rgba(255, 200, 120, .45), rgba(255, 200, 120, 0) 70%),
linear-gradient(180deg, #FFFCF6 0%, #FFF4E2 60%, #FBE6C6 100%);
animation: zdl-rl-veil 1.5s cubic-bezier(.4, 0, .2, 1) both;
}
html.zdl-on.zdl-pre-skip:not(.zdl-rl)::after {
/* poori screen par flex-center — translate(-50%) NAHI: percent transform wali
animation main thread par chali aur JS block me aadhi fade hokar atak gayi
(page ke upar "Happy Diwali" ka bhoot). Ab parde jaisi sirf-opacity = GPU. */
content: "Happy Diwali"; position: fixed; inset: 0; z-index: 2147483647;
display: flex; align-items: center; justify-content: center;
font: italic 600 clamp(44px, 6.4vw, 88px)/1.1 var(--zdl-serif, "Cormorant Garamond", Georgia, serif);
letter-spacing: .01em; white-space: nowrap;
background: linear-gradient(100deg, #8A5A14 0%, #B8862F 30%, #E9C877 50%, #B8862F 70%, #7A4C10 100%) 50% 50% / min(640px, 92vw) 100% no-repeat;
-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 14px rgba(232, 160, 60, .35));
animation: zdl-rl-word 1.5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes zdl-rl-veil {
0%, 46% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes zdl-rl-word {
0% { opacity: 0; }
20%, 44% { opacity: 1; }
78%, 100% { opacity: 0; } /* text parde se pehle jaaye — page par parchhai na dikhe */
}
@media print { html.zdl-on.zdl-pre-skip:not(.zdl-rl)::before, html.zdl-on.zdl-pre-skip:not(.zdl-rl)::after { display: none; } }
/* ════ LAUNCH BAND — liquid glass ═════════════════════════════════════
Kaanch tabhi "kaanch" lagta hai jab peeche rang ho: band ke peeche tez
rangeen roshni (kesariya / rani / teal / sona), upar card asli frosted
glass — peeche ka rang dhundhla dikhta hai. Safed-sone ka specular
rim, upar gloss ki parat (::after), aur har 7s ek chamak guzarti hai. */
html.zdl-on .zdl-band:not(#_) {
background-color: #FFF8EC !important;
background-image:
radial-gradient(28% 46% at 14% 34%, rgba(255, 150, 60, .55) 0%, rgba(255, 150, 60, 0) 70%),
radial-gradient(26% 44% at 86% 26%, rgba(226, 80, 130, .42) 0%, rgba(226, 80, 130, 0) 70%),
radial-gradient(30% 40% at 62% 86%, rgba(22, 133, 127, .38) 0%, rgba(22, 133, 127, 0) 70%),
radial-gradient(30% 44% at 34% 80%, rgba(239, 190, 90, .55) 0%, rgba(239, 190, 90, 0) 70%),
radial-gradient(60% 60% at 50% 100%, rgba(255, 180, 90, .25) 0%, rgba(255, 180, 90, 0) 70%) !important;
}
html.zdl-on .zdl-band .zdl-band-card:not(#_):not(#_) {
background:
linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .22) 24%, rgba(255, 255, 255, 0) 40%),
radial-gradient(70% 60% at 100% 100%, rgba(255, 220, 160, .22) 0%, rgba(255, 220, 160, 0) 60%),
linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .2)) !important;
-webkit-backdrop-filter: blur(30px) saturate(2.1) !important; backdrop-filter: blur(30px) saturate(2.1) !important;
box-shadow:
inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .45),
inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -30px 50px -40px rgba(184, 134, 47, .35),
0 2px 6px rgba(120, 84, 24, .08), 0 30px 70px -30px rgba(120, 84, 24, .4), 0 60px 120px -60px rgba(226, 120, 60, .45) !important;
}
/* rim: safed → sona → safed */
html.zdl-on .zdl-band .zdl-band-card:not(#_)::before {
padding: 1.5px !important;
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 236, 190, .7) 25%, rgba(226, 182, 92, .35) 50%, rgba(255, 255, 255, .6) 75%, rgba(231, 190, 106, .9)) !important;
}
/* gloss parat + guzarti chamak */
html.zdl-on .zdl-band .zdl-band-card:not(#_)::after {
content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
background:
linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 58%) no-repeat,
radial-gradient(120% 55% at 50% -12%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%);
background-size: 280% 100%, 100% 100%;
background-position: 160% 0, 0 0;
animation: zdl-band-gloss 7s cubic-bezier(.4, 0, .2, 1) 1.5s infinite;
}
@keyframes zdl-band-gloss { 0%, 62% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
/* rangoli kaanch me "khudi hui" — halki */
html.zdl-on .zdl-band .zdl-band-pat:not(#_) { opacity: .32 !important; mix-blend-mode: multiply; }
html.zdl-on .zdl-band .zdl-band-pat.l:not(#_) { opacity: .2 !important; }
html.zdl-on .zdl-band .zdl-band-grid:not(#_) { z-index: 2; }
/* countdown — kaanch ki boondein */
html.zdl-on .zdl-band .zdl-cd-cell:not(#_):not(#_) {
background:
radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .16)) !important;
-webkit-backdrop-filter: blur(16px) saturate(2) !important; backdrop-filter: blur(16px) saturate(2) !important;
border-radius: 20px !important;
box-shadow:
inset 1.5px 1.5px 0 rgba(255, 255, 255, 1), inset -1px -1px 0 rgba(255, 255, 255, .5),
inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -10px 18px -12px rgba(184, 134, 47, .45),
0 14px 30px -14px rgba(120, 84, 24, .45), 0 4px 10px -6px rgba(226, 120, 60, .35) !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zdl-band .zdl-cd-cell:not(#_) { transition: transform .3s cubic-bezier(.22, .8, .24, 1); }
html.zdl-on .zdl-band .zdl-cd-cell:not(#_):hover { transform: translateY(-4px) scale(1.03); }
}
/* See pricing — glass pill */
html.zdl-on .zdl-band .zdl-band-link:not(#_):not(#_) {
display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
box-shadow: inset 1px 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(184, 134, 47, .22), 0 8px 18px -10px rgba(120, 84, 24, .4);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.zdl-on .zdl-band .zdl-band-link:not(#_):hover { background: rgba(255, 255, 255, .9); }
@media (max-width: 767px) {
html.zdl-on .zdl-band .zdl-band-card:not(#_):not(#_) { -webkit-backdrop-filter: blur(16px) saturate(1.8) !important; backdrop-filter: blur(16px) saturate(1.8) !important; }
html.zdl-on .zdl-band .zdl-cd-cell:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)) !important; }
html.zdl-on .zdl-band .zdl-band-link:not(#_):not(#_) { justify-content: center; width: 100%; }
}
/* ════ AKASH KANDIL — Maharashtrian (zdl.js akashKandil / sideKandils) ═══════
u = kandil chaudai/100. Saamne ke face hi dikhte (backface hidden) — convex
shape, isliye sahi. Ghoomna sabke liye (reduce par dheema, band nahi —
Aditya ki machine par reduce ON hai). SPEED: GPU layer gino — har animated
::after / clip-path wala 3D face = alag layer; chhaaya sirf diamond par. */
html.zdl-on .zdl-lantern { --u: 1.04px; }
html.zdl-on .zdl-lantern:has(.k3) { filter: none !important; }
@media (max-width: 1199px) { html.zdl-on .zdl-lantern { --u: .72px; } }
@media (min-width: 1600px) { html.zdl-on .zdl-lantern:not(.zdl-ksmall) { --u: 1.2px; } }
html.zdl-on .k3 {
--kdur: calc(var(--kspd, 34s) * var(--kslow, 1));
position: relative; width: calc(100 * var(--u)); height: calc(262 * var(--u)); perspective: calc(620 * var(--u));
}
@media (prefers-reduced-motion: reduce) { html.zdl-on { --kslow: 1.8; } }
html.zdl-on .kd-hook {
position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
border: 1.6px solid #C9973B; box-shadow: 0 0 4px rgba(255, 214, 140, .6);
}
html.zdl-on .kd-cord { position: absolute; left: 50%; top: 3px; width: 1.4px; margin-left: -.7px; background: linear-gradient(#8A5F1A, #D9A84E); }
html.zdl-on .kd-spin {
position: absolute; left: 50%; width: 0; height: 0; transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(20deg);
animation: kd-spin var(--kdur) linear infinite; animation-delay: calc(-1 * var(--k0, 0s));
}
@keyframes kd-spin { from { transform: rotateX(10deg) rotateY(0deg); } to { transform: rotateX(10deg) rotateY(360deg); } }
html.zdl-on .kd-spin b { position: absolute; left: 0; top: 0; display: block; }
html.zdl-on :is(.kd-f, .kd-g) { backface-visibility: hidden; }
html.zdl-on .kd-f { overflow: hidden; }
html.zdl-on .kd-f::after {
content: ""; position: absolute; inset: 0; background: #1C0A26; opacity: .1;
animation: kd-shade var(--kdur) linear infinite; animation-delay: calc(var(--a) * var(--kdur) / -360 - var(--k0, 0s));
}
/* saamne (0%) sabse ujla, roshni baayein-upar se — daayan kinara gehra */
@keyframes kd-shade {
0%, 100% { opacity: .02; } 12.5% { opacity: .12; } 25% { opacity: .42; } 37.5% { opacity: .62; }
50% { opacity: .66; } 62.5% { opacity: .5; } 75% { opacity: .22; } 87.5% { opacity: .06; }
}
html.zdl-on .kd-tri { clip-path: polygon(0 0, 100% 0, 50% 100%); }
html.zdl-on .kd-tri.kd-lo { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* rangeen kaagaz + mandala + andar ki roshni */
html.zdl-on .kd-dia { background: url("data:image/svg+xml,") 0 0 / 100% 100%,
radial-gradient(closest-side, rgba(255, 238, 180, .5), rgba(255, 238, 180, 0)),
radial-gradient(130% 130% at 15% 15%, var(--c1), var(--c2)); }
html.zdl-on .kd-tri { background: url("data:image/svg+xml,") 0 0 / 100% 100%, radial-gradient(120% 100% at 35% 20%, var(--c1), var(--c2)); }
html.zdl-on .kd-tri.kd-lo { background: url("data:image/svg+xml,") 0 0 / 100% 100%, radial-gradient(120% 100% at 35% 80%, var(--c1), var(--c2)); }
html.zdl-on .kd-band { background: url("data:image/svg+xml,") 0 0 / 100% 100%, linear-gradient(180deg, #1BA3A0, #0B6A73); }
/* neeche ka khula munh — andar ki roshni */
html.zdl-on .kd-lid { backface-visibility: hidden; background: radial-gradient(closest-side, #FFF6D6, #FFC861 45%, #D9822B 80%, #9A4A1A); }
html.zdl-on .kd-str { min-width: 1px; background: linear-gradient(#B8862F, #E7BE6A); }
html.zdl-on .kd-bp { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
html.zdl-on .kd-bell {
position: absolute; left: calc(-2.3 * var(--u)); top: calc(.6 * var(--u)); width: calc(4.6 * var(--u)); height: calc(6.4 * var(--u));
border-radius: 46% 46% 14% 14% / 72% 72% 20% 20%;
background: radial-gradient(circle at 50% 100%, #6B4510 0 18%, transparent 20%), linear-gradient(90deg, #8A5F1A, #FFE9AE 38%, #D9A84E 64%, #7A5214);
}
/* jhaalar: poora parat hilta hai (compositor), SVG ke andar kuch animate nahi */
html.zdl-on .kd-ribw {
position: absolute; left: 50%; width: calc(120 * var(--u)); height: calc(150 * var(--u)); margin-left: calc(-60 * var(--u));
transform-origin: 50% 0; animation: kd-ribsway 4.4s ease-in-out infinite;
}
html.zdl-on .kd-ribw.kd-fr { animation-duration: 3.7s; animation-delay: -1.9s; }
@keyframes kd-ribsway { 0%, 100% { transform: skewX(-2deg); } 50% { transform: skewX(2deg); } }
html.zdl-on .zdl-lantern svg.kd-rib {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
overflow: visible; animation: none !important; transform: none !important; fill: none;
}
html.zdl-on .kd-rd { stroke: #FFE7A6; stroke-width: 1.1; stroke-dasharray: .1 2.5; stroke-linecap: round; }
/* side ke chhote kandil — WebP (kandil-*.webp), upar se lambi dori, door wale halke */
html.zdl-on .zdl-ksmall { position: absolute; z-index: 0; width: calc(100 * var(--u)) !important; height: calc(232 * var(--u)); pointer-events: none; }
html.zdl-on .zdl-ksmall .kd-img { display: block; width: calc(120 * var(--u)); height: calc(236 * var(--u)); max-width: none; margin: calc(-4 * var(--u)) 0 0 calc(-10 * var(--u)); }
html.zdl-on .zdl-ksmall.far { opacity: .8; }
html.zdl-on .zdl-ksmall .k3-long { position: absolute; left: 50%; bottom: 100%; width: 1px; margin-left: -.5px; background: linear-gradient(rgba(138, 95, 26, 0), #B8862F); }
html.zdl-on .zdl-ksmall::after { width: 180px !important; height: 180px !important; margin: -90px 0 0 -90px !important; animation: none !important; }
@media (max-width: 1399px) { html.zdl-on .zdl-ksmall { display: none; } }
/* ════ DIYA — ornate kamal-diya + do parat ki lau + rangoli thali ════
Purana diya ek saada katora tha. Ab peetal ka kamal-diya (zdl.js
diya()), heera timtimata hai, lau me safed-neela core; kataar me har
diya rangoli thali par, neeche zari patti (heere + sone ki rekhayein). */
html.zdl-on .zdl-diya:not(#_) { width: 64px; height: 62px; }
html.zdl-on .zdl-diya:not(#_) svg { filter: drop-shadow(0 3px 3px rgba(110, 60, 14, .28)) drop-shadow(0 8px 14px rgba(184, 120, 40, .22)); }
html.zdl-on .zdl-diya .zdl-flame:not(#_) {
bottom: 30px; width: 14px; height: 30px; margin-left: -7px;
background: radial-gradient(60% 75% at 50% 78%, #FFF8D8 0%, #FFD45E 28%, #FF9A2A 62%, rgba(255, 96, 20, .35) 82%, rgba(255, 96, 20, 0) 100%);
filter: blur(.2px);
}
/* andar ka core — neeche halka neela, upar safed */
html.zdl-on .zdl-diya .zdl-flame b {
position: absolute; left: 50%; bottom: 2px; width: 6px; height: 12px; margin-left: -3px;
border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
background: radial-gradient(60% 80% at 50% 85%, rgba(170, 210, 255, .95) 0%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, 0) 100%);
}
html.zdl-on .zdl-diya .zdl-flame:not(#_)::after {
width: 90px; height: 90px; margin: -50px 0 0 -45px;
background: radial-gradient(closest-side, rgba(255, 170, 60, .42), rgba(255, 170, 60, .12) 55%, rgba(255, 170, 60, 0));
}
/* heere ki chamak */
html.zdl-on .zdl-diya .zdl-gspark { transform-box: fill-box; transform-origin: center; animation: zdl-gspark 2.6s ease-in-out infinite; }
@keyframes zdl-gspark { 0%, 70%, 100% { opacity: .15; } 82% { opacity: 1; } }
/* kataar: diya + thali */
html.zdl-on .zdl-diyas:not(#_) { height: 104px; align-items: flex-end; }
html.zdl-on .zdl-dslot { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
html.zdl-on .zdl-dslot .zdl-diya { position: relative; z-index: 2; margin-bottom: -14px; }
html.zdl-on .zdl-dslot .zdl-plate { position: relative; z-index: 1; width: 96px; height: auto; display: block; }
html.zdl-on .zdl-diyas .zdl-dslot .zdl-plate { opacity: .45; transition: opacity .6s ease-out; }
html.zdl-on .zdl-diyas .zdl-diya.lit + .zdl-plate { opacity: 1; } /* sibling, :has nahi — lit par poora page invalidate hota tha */
/* zari patti — do sone ki rekha + beech me heere */
html.zdl-on .zdl-diyas:not(#_)::after {
height: 14px !important; bottom: -4px !important;
background:
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .75) 15%, #FFE7A8 50%, rgba(226, 182, 92, .75) 85%, rgba(226, 182, 92, 0)) 0 1px / 100% 1px no-repeat,
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .75) 15%, #FFE7A8 50%, rgba(226, 182, 92, .75) 85%, rgba(226, 182, 92, 0)) 0 12px / 100% 1px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M13 2.5l4 4.5-4 4.5-4-4.5z' fill='%23FFFFFF' stroke='%23C99436' stroke-width='.8'/%3E%3Ccircle cx='0' cy='7' r='1.4' fill='%23E2557F'/%3E%3Ccircle cx='26' cy='7' r='1.4' fill='%23E2557F'/%3E%3C/svg%3E") center / 26px 14px repeat-x !important;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 767px) {
html.zdl-on .zdl-diyas:not(#_) { height: 80px; padding: 0 8px 8px; }
html.zdl-on .zdl-diyas .zdl-dslot .zdl-diya { transform: scale(.74); transform-origin: 50% 100%; margin-bottom: -10px; }
html.zdl-on .zdl-diyas .zdl-dslot .zdl-plate { width: 66px; }
}
/* pricing ka featured diya — naya diya 64px chauda */
html.zdl-on .zdl-pdiya:not(#_) { margin-left: -32px; top: 0; }
/* ZDS-BEGIN ════ STEPS — "3 Simple Steps" launch timeline ═════════════
zdl.js steps() ka CSS. Site ka baingani .zhw-wrap chhupta hai, hamara
.zds dikhta hai (teal + sona). JS na chale to site ka apna section. */
html.zdl-on .zhw-sec.zds-on .zhw-wrap { display: none !important; }
html.zdl-on .zhw-sec .custom-section-tag:not(#_) {
color: #8A5A12 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 246, 226, .6)) !important;
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .28), 0 6px 16px -8px rgba(120, 84, 24, .35) !important; border: 0 !important;
}
html.zdl-on .zhw-sec .custom-section-h2:not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .zhw-sec .custom-section-h2 span:not(#_) {
background: linear-gradient(100deg, #7A4A12 0%, #B8862F 40%, #E2B65C 70%, #9C6A22 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html.zdl-on .zhw-sec .custom-section-sub:not(#_) { color: rgba(16, 38, 42, .68) !important; -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .zds { --g1: #FFE7A8; --g2: #E2B65C; --g3: #B8862F; --g4: #7A4A12; --ink: #10262A; --teal: #0A474C;
position: relative; max-width: 1080px; margin: 0 auto; padding-top: 8px; color: var(--ink); }
/* rangeen roshni — kaanch ke peeche */
html.zdl-on .zds::before {
content: ""; position: absolute; left: -4%; right: -4%; top: 64px; bottom: 72px; z-index: 0; pointer-events: none; filter: blur(40px);
background:
radial-gradient(30% 50% at 10% 30%, rgba(255, 150, 60, .5), transparent 70%),
radial-gradient(28% 50% at 90% 25%, rgba(226, 80, 130, .34), transparent 70%),
radial-gradient(34% 46% at 62% 92%, rgba(22, 133, 127, .36), transparent 70%),
radial-gradient(30% 46% at 34% 86%, rgba(239, 190, 90, .5), transparent 70%);
}
/* ghadi */
html.zdl-on .zds-clock {
position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: max-content; margin: 0 auto 24px; padding: 8px 20px 8px 8px; border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5));
-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .25), 0 12px 28px -14px rgba(120, 84, 24, .45);
}
html.zdl-on .zds-clock svg { width: 40px; height: 40px; transform: rotate(-90deg); }
html.zdl-on .zds-clock circle { fill: none; stroke-width: 3.5; }
html.zdl-on .zds-clock .t { stroke: rgba(184, 134, 47, .18); }
html.zdl-on .zds-clock .f { stroke: #C99436; stroke-linecap: round; }
html.zdl-on .zds-clock-txt { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; transition: opacity .3s ease-out; }
html.zdl-on .zds-clock-txt small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(16, 38, 42, .55); }
html.zdl-on .zds-clock-txt b { font: 600 24px/1 "Cormorant Garamond", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; color: var(--g4); min-width: 44px; }
html.zdl-on .zds-clock-live {
position: absolute; left: 56px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .35s ease-out;
font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #0B7A4B; white-space: nowrap;
}
html.zdl-on .zds.live .zds-clock-txt { opacity: 0; }
html.zdl-on .zds.live .zds-clock-live { opacity: 1; }
html.zdl-on .zds.live .zds-clock .f { stroke: #1E8E5A; }
html.zdl-on .zds.live .zds-clock { box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(30, 142, 90, .35), 0 0 0 6px rgba(30, 142, 90, .08), 0 12px 28px -14px rgba(30, 142, 90, .55); }
html.zdl-on .zds-fw { position: absolute; left: 28px; top: 50%; width: 0; height: 0; pointer-events: none; }
html.zdl-on .zds-fw i {
position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
background: hsl(var(--h), 92%, 60%); box-shadow: 0 0 6px hsl(var(--h), 92%, 62%);
}
html.zdl-on .zds-fw.go i { animation: zds-fwo 1.1s ease-out forwards; }
@keyframes zds-fwo { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zds-fw.go i { animation: zds-fw 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes zds-fw { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.4); } }
}
/* liquid-glass panel */
html.zdl-on .zds-panel {
position: relative; z-index: 1; border-radius: 32px; overflow: hidden; isolation: isolate;
background:
linear-gradient(118deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .22) 26%, rgba(255, 255, 255, 0) 42%),
linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .26));
-webkit-backdrop-filter: blur(28px) saturate(2); backdrop-filter: blur(28px) saturate(2);
box-shadow:
inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .4),
inset 0 -40px 60px -50px rgba(184, 134, 47, .4),
0 2px 6px rgba(120, 84, 24, .08), 0 32px 72px -32px rgba(120, 84, 24, .42);
}
html.zdl-on .zds-panel::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
background: linear-gradient(135deg, #fff, rgba(255, 236, 190, .7) 25%, rgba(226, 182, 92, .35) 50%, rgba(255, 255, 255, .6) 75%, rgba(231, 190, 106, .9));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
html.zdl-on .zds-gloss {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 58%) no-repeat;
background-size: 280% 100%; background-position: 160% 0; animation: zds-gloss 8s cubic-bezier(.4, 0, .2, 1) 2s infinite;
}
@keyframes zds-gloss { 0%, 66% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* zari rail + lau */
html.zdl-on .zds-rail {
position: absolute; z-index: 1; left: calc(32px + 28px); width: calc((100% - 0px) * 2 / 3); top: calc(40px + 28px - 3px); height: 6px;
background:
linear-gradient(90deg, rgba(184, 134, 47, .35), rgba(184, 134, 47, .35)) 0 0 / 100% 1px no-repeat,
linear-gradient(90deg, rgba(184, 134, 47, .35), rgba(184, 134, 47, .35)) 0 5px / 100% 1px no-repeat,
radial-gradient(circle, rgba(184, 134, 47, .45) 1px, transparent 1.5px) 0 0 / 12px 6px repeat-x;
}
html.zdl-on .zds-fill {
position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.4, 0, .2, 1);
background: linear-gradient(90deg, #B8862F, #FFE7A8 50%, #E2B65C); border-radius: 3px;
box-shadow: 0 0 12px rgba(255, 190, 90, .7);
}
html.zdl-on .zds-spark {
position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; opacity: 0;
background: radial-gradient(circle, #fff 0 18%, #FFD45E 40%, rgba(255, 140, 30, .5) 62%, rgba(255, 140, 30, 0) 72%);
transition: left .6s cubic-bezier(.4, 0, .2, 1), opacity .3s ease-out;
}
html.zdl-on .zds.p1:not(.live) .zds-spark { opacity: 1; }
html.zdl-on .zds-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
html.zdl-on .zds-step { position: relative; display: flex; flex-direction: column; padding: 40px 32px 32px; min-width: 0; }
html.zdl-on .zds-step + .zds-step::before {
content: ""; position: absolute; left: 0; top: 18%; bottom: 14%; width: 1px;
background: linear-gradient(180deg, transparent, rgba(184, 134, 47, .3), transparent);
}
html.zdl-on .zds-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
html.zdl-on .zds-time {
font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A5A12; padding: 6px 12px; border-radius: 999px;
background: linear-gradient(180deg, #fff, #FFF6E2); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 4px 10px -6px rgba(120, 84, 24, .4);
}
/* sone ka sikka */
html.zdl-on .zds-coin {
position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 248, 232, .7));
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .28), 0 6px 14px -8px rgba(120, 84, 24, .4);
transition: box-shadow .5s ease-out, background .5s ease-out;
}
html.zdl-on .zds-coin::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .5s ease-out;
background:
radial-gradient(circle at 34% 28%, #FFF7DC 0 10%, rgba(255, 247, 220, 0) 36%),
conic-gradient(from 200deg, #B8862F, #FFE9B0, #C99436, #FFF3CF, #9C6A22, #E8B85A, #B8862F);
box-shadow: inset 0 0 0 3px rgba(122, 74, 18, .35), inset 0 0 0 5px rgba(255, 236, 190, .6), inset 0 -6px 10px rgba(110, 67, 16, .45);
}
html.zdl-on .zds-coin em {
position: relative; font: 700 22px/1 "Cormorant Garamond", Georgia, serif; font-variant-numeric: lining-nums; color: rgba(16, 38, 42, .4); transition: color .5s ease-out;
}
html.zdl-on .zds-fl { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease-out; pointer-events: none; }
html.zdl-on .zds-coin .zdl-flame:not(#_) { left: 50%; bottom: calc(100% - 6px); width: 10px; height: 20px; margin-left: -5px; }
html.zdl-on .zds-coin .zdl-flame:not(#_)::after { width: 70px; height: 70px; margin: -38px 0 0 -35px; }
html.zdl-on .zds-burst { position: absolute; inset: 0; pointer-events: none; }
html.zdl-on .zds-burst b {
position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; opacity: 0;
background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 2px rgba(255, 210, 120, .9));
}
html.zdl-on .zds.p1 .s1 .zds-coin::before, html.zdl-on .zds.p2 .s2 .zds-coin::before, html.zdl-on .zds.p3 .s3 .zds-coin::before { opacity: 1; }
html.zdl-on .zds.p1 .s1 .zds-coin em, html.zdl-on .zds.p2 .s2 .zds-coin em, html.zdl-on .zds.p3 .s3 .zds-coin em { color: #4A2C08; text-shadow: 0 1px 0 rgba(255, 240, 200, .8); }
html.zdl-on .zds.p1 .s1 .zds-fl, html.zdl-on .zds.p2 .s2 .zds-fl, html.zdl-on .zds.p3 .s3 .zds-fl { opacity: 1; }
html.zdl-on .zds.p1 .s1 .zds-coin, html.zdl-on .zds.p2 .s2 .zds-coin, html.zdl-on .zds.p3 .s3 .zds-coin {
box-shadow: 0 0 0 6px rgba(255, 214, 140, .22), 0 0 28px rgba(255, 190, 90, .55), 0 10px 20px -8px rgba(120, 74, 18, .55);
}
html.zdl-on .zds.p1 .s1 .zds-burst b, html.zdl-on .zds.p2 .s2 .zds-burst b, html.zdl-on .zds.p3 .s3 .zds-burst b { animation: zds-bo .9s ease-out forwards; }
@keyframes zds-bo { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zds.p1 .s1 .zds-burst b, html.zdl-on .zds.p2 .s2 .zds-burst b, html.zdl-on .zds.p3 .s3 .zds-burst b { animation: zds-b .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes zds-b { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-44px) scale(1); } }
}
html.zdl-on .zds-title:not(#_) { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink) !important; -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .zds-desc:not(#_) { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: rgba(16, 38, 42, .66) !important; -webkit-text-fill-color: currentcolor !important; }
/* mini demo card */
html.zdl-on .zds-viz {
flex: 1; min-height: 160px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66));
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .16), 0 2px 4px rgba(120, 84, 24, .05), 0 14px 30px -18px rgba(120, 84, 24, .4);
font-size: 13px; color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zds-viz { transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease-out; }
html.zdl-on .zds-step:hover .zds-viz { transform: translateY(-4px); box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 4px 8px rgba(120, 84, 24, .06), 0 22px 40px -18px rgba(120, 84, 24, .5); }
}
/* step 1 — form */
html.zdl-on .zds-in {
position: relative; display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; overflow: hidden; white-space: nowrap;
background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 38, 42, .12);
}
html.zdl-on .zds.p1 .s1 .zds-in:first-child { box-shadow: inset 0 0 0 1.5px #C99436, 0 0 0 3px rgba(226, 182, 92, .2); }
html.zdl-on .zds.p1b .s1 .zds-in:first-child { box-shadow: inset 0 0 0 1px rgba(16, 38, 42, .12); }
html.zdl-on .zds-ph { position: absolute; left: 12px; color: rgba(16, 38, 42, .4); transition: opacity .15s; }
html.zdl-on .zds-typed { font-weight: 600; }
html.zdl-on .s1 .zds-in:first-child:has(.zds-typed:not(:empty)) .zds-ph { opacity: 0; }
html.zdl-on .zds-caret { width: 1.5px; height: 16px; margin-left: 2px; background: #B8862F; opacity: 0; }
html.zdl-on .zds.p1:not(.p1b) .zds-caret { opacity: 1; animation: zds-caret 1s steps(1) infinite; }
@keyframes zds-caret { 50% { opacity: 0; } }
html.zdl-on .zds-num { font-weight: 600; opacity: 0; transition: opacity .3s ease-out; }
html.zdl-on .zds.p1b .zds-num { opacity: 1; }
html.zdl-on .zds.p1b .zds-in2 .zds-ph { opacity: 0; }
html.zdl-on .zds-btn {
position: relative; height: 32px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 13px;
color: #fff; background: linear-gradient(180deg, #0F5A60, #0A474C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(10, 71, 76, .5);
transition: background .4s ease-out;
}
html.zdl-on .zds-btn span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s ease-out; }
html.zdl-on .zds-btn .b { opacity: 0; }
html.zdl-on .zds.p1c .zds-btn { background: linear-gradient(180deg, #23A06A, #1A8457); }
html.zdl-on .zds.p1c .zds-btn .a { opacity: 0; }
html.zdl-on .zds.p1c .zds-btn .b { opacity: 1; }
html.zdl-on .zds-btn .zds-tk path { stroke: #fff; }
html.zdl-on .zds-tk { width: 15px; height: 11px; flex: none; }
html.zdl-on .zds-tk path, html.zdl-on .zds-tk2 path { fill: none; stroke: #1E8E5A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* step 2 — CSV */
html.zdl-on .zds-file {
display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px;
background: #F3FBF6; box-shadow: inset 0 0 0 1px rgba(30, 142, 90, .22); opacity: .45; transition: opacity .3s ease-out;
}
html.zdl-on .zds.p2 .zds-file { opacity: 1; }
html.zdl-on .zds-file svg { width: 14px; height: 18px; flex: none; }
html.zdl-on .zds-bar { flex: 1; height: 4px; margin-left: 8px; border-radius: 4px; background: rgba(30, 142, 90, .14); overflow: hidden; }
html.zdl-on .zds-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1E8E5A, #5BD39A); transform-origin: 0 50%; transform: scaleX(0); }
html.zdl-on .zds-crow { display: flex; align-items: center; gap: 8px; height: 24px; opacity: 0; transition: opacity .3s ease-out calc(var(--i) * .22s); }
html.zdl-on .zds.p2b .zds-crow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zds-crow { transform: translateY(6px); transition: opacity .3s ease-out calc(var(--i) * .22s), transform .4s cubic-bezier(.22, .8, .24, 1) calc(var(--i) * .22s); }
html.zdl-on .zds.p2b .zds-crow { transform: none; }
}
html.zdl-on .zds-ava { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; font-size: 11px; font-weight: 800; color: #fff; }
html.zdl-on .zds-ava.a0 { background: linear-gradient(135deg, #0F5A60, #0A474C); }
html.zdl-on .zds-ava.a1 { background: linear-gradient(135deg, #E2B65C, #B8862F); }
html.zdl-on .zds-ava.a2 { background: linear-gradient(135deg, #E86A8E, #C2416A); }
html.zdl-on .zds-cname { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.zdl-on .zds-tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8A5A12; background: #FFF4DA; padding: 2px 8px; border-radius: 999px; }
html.zdl-on .zds-cnt { font-size: 12px; color: rgba(16, 38, 42, .6); }
html.zdl-on .zds-cnt b { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }
/* step 3 — WhatsApp */
html.zdl-on .zds-chat {
display: flex; justify-content: flex-end; padding: 12px; border-radius: 12px;
background: #EFE7DC radial-gradient(rgba(122, 90, 50, .08) 1px, transparent 1.4px) 0 0 / 10px 10px;
}
html.zdl-on .zds-bub {
position: relative; max-width: 92%; padding: 8px 12px; border-radius: 12px 4px 12px 12px; background: #D9FDD3; color: #111B21;
font-size: 12.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(11, 20, 26, .14); opacity: 0; transition: opacity .3s ease-out;
}
html.zdl-on .zds.p3 .zds-bub { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zds-bub { transform: translateY(8px) scale(.96); transform-origin: 100% 100%; transition: opacity .3s ease-out, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
html.zdl-on .zds.p3 .zds-bub { transform: none; }
}
html.zdl-on .zds-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10px; color: rgba(17, 27, 33, .45); vertical-align: bottom; }
html.zdl-on .zds-tk2 { width: 16px; height: 10px; }
html.zdl-on .zds-tk2 path { stroke: #8696A0; stroke-width: 1.8; opacity: 0; transition: opacity .2s, stroke .3s; }
html.zdl-on .zds.p3b .zds-tk2 path { opacity: 1; }
html.zdl-on .zds.p3c .zds-tk2 path { stroke: #53BDEB; }
html.zdl-on .zds-stats { display: flex; gap: 16px; font-size: 12px; color: rgba(16, 38, 42, .6); }
html.zdl-on .zds-stats b { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }
html.zdl-on .zds-live {
display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
color: #0B7A4B; background: #E7F7EE; box-shadow: inset 0 0 0 1px rgba(30, 142, 90, .25); opacity: .35; transition: opacity .3s ease-out;
}
html.zdl-on .zds.live .zds-live { opacity: 1; }
html.zdl-on .zds-live i { width: 8px; height: 8px; border-radius: 50%; background: #1E8E5A; }
html.zdl-on .zds.live .zds-live i { animation: zds-pulse 1.6s ease-out infinite; }
@keyframes zds-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 90, .5); } 100% { box-shadow: 0 0 0 8px rgba(30, 142, 90, 0); } }
/* CTA */
html.zdl-on .zds-cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
html.zdl-on .zds-go:not(#_) {
display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 32px; border-radius: 999px; text-decoration: none;
font-size: 16px; font-weight: 700; color: #3A2306 !important; -webkit-text-fill-color: currentcolor !important;
background: linear-gradient(180deg, #FFEBB8 0%, #E8BE62 48%, #C99436 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 4px rgba(122, 74, 18, .3), 0 0 0 1px rgba(150, 100, 30, .35), 0 2px 4px rgba(120, 84, 24, .15), 0 14px 30px -12px rgba(184, 120, 40, .65);
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out;
}
html.zdl-on .zds-go:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 4px rgba(122, 74, 18, .3), 0 0 0 1px rgba(150, 100, 30, .45), 0 4px 8px rgba(120, 84, 24, .18), 0 20px 40px -12px rgba(184, 120, 40, .75); }
html.zdl-on .zds-go:active { transform: scale(.98); }
html.zdl-on .zds-go:focus-visible { outline: 3px solid #0A474C; outline-offset: 3px; }
html.zdl-on .zds-go span { transition: transform .18s ease-out; }
html.zdl-on .zds-go:hover span { transform: translateX(4px); }
html.zdl-on .zds-trust { font-size: 13px; color: rgba(16, 38, 42, .6); text-align: center; }
@media (max-width: 767px) {
html.zdl-on .zds::before { top: 56px; bottom: 96px; filter: blur(28px); }
html.zdl-on .zds-panel { border-radius: 24px; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
html.zdl-on .zds-grid { grid-template-columns: 1fr; }
html.zdl-on .zds-step { padding: 24px 16px 24px 80px; }
html.zdl-on .zds-step + .zds-step::before { left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 134, 47, .3), transparent); }
html.zdl-on .zds-top { margin-bottom: 12px; min-height: 32px; }
html.zdl-on .zds-coin { position: absolute; left: 16px; top: 24px; width: 48px; height: 48px; }
html.zdl-on .zds-coin em { font-size: 21px; }
/* rail khadi — sikkon ke beech */
html.zdl-on .zds-rail { display: none; }
html.zdl-on .zds-step:not(:last-child)::after {
content: ""; position: absolute; left: 39px; top: 80px; bottom: -24px; width: 2px; border-radius: 2px; z-index: -1;
background: rgba(184, 134, 47, .25); transition: background .5s ease-out;
}
html.zdl-on .zds.p2 .s1::after, html.zdl-on .zds.p3 .s2::after { background: linear-gradient(180deg, #E2B65C, #FFE7A8); box-shadow: 0 0 8px rgba(255, 190, 90, .6); }
html.zdl-on .zds-viz { min-height: 0; }
html.zdl-on .zds-desc:not(#_) { margin-bottom: 16px; }
html.zdl-on .zds-go:not(#_) { width: 100%; justify-content: center; padding: 0 16px; font-size: 15px; }
html.zdl-on .zds-clock { margin-bottom: 16px; }
}
/* ZDS-END */
/* ════ PRICING OFFER — Diwali coupon (zdl.js pricingOffer) ═══════════
html.zdl-offer ke bina kuch nahi; ek visit band: ?offer=off.
Saare daam site ke apne monthly/yearly se — koi naya offer nahi. */
/* bug: plan ka naam glass chip poori chaudai me failta tha (patti / dabba) */
html.zdl-on .zdl-prs .custom-plan-name:not(#_):not(#_) { display: inline-flex !important; width: auto !important; max-width: max-content; align-self: flex-start; }
/* yearly: site ka bada "₹9,990 / year" hata ke ~~₹999~~ ₹833/mo */
html.zdl-offer .zdl-prs.zdl-yr .custom-plan-price:has(.zdl-ofr) > .yearly_price:not(#_) { display: none !important; }
html.zdl-offer .zdl-ofr { display: none; }
html.zdl-offer .zdl-prs.zdl-yr .zdl-ofr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html.zdl-offer .zdl-ofr-row { display: inline-flex; align-items: baseline; gap: 10px; line-height: 1; }
html.zdl-offer .zdl-ofr s { font-size: 22px; font-weight: 600; opacity: .55; text-decoration-thickness: 2px; text-decoration-color: #D9A84E; }
html.zdl-offer .zdl-ofr b { font-size: clamp(40px, 4.2vw, 56px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.zdl-offer .zdl-ofr i { font-style: normal; font-size: 15px; opacity: .7; }
html.zdl-offer .zdl-ofr-sub { font-size: 13px; font-weight: 500; opacity: .7; letter-spacing: .01em; }
html.zdl-offer .zdl-save {
position: relative; display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #3A2408; -webkit-text-fill-color: #3A2408;
background: linear-gradient(100deg, #E8BE63, #FBE6AE 45%, #D9A84E);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(184, 134, 47, .45), 0 6px 16px -8px rgba(184, 134, 47, .8);
}
html.zdl-offer .zdl-save.pop { animation: zdl-save-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zdl-save-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
html.zdl-offer .zdl-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
html.zdl-offer .zdl-burst i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #F6D27A; box-shadow: 0 0 6px #FFC860; animation: zdl-burst .8s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes zdl-burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
html.zdl-offer .zdl-ofr-hint {
display: none; margin: 10px 0 0; padding: 6px 12px; min-height: 32px; border: 0; border-radius: 999px; cursor: pointer;
font: 700 13px/1.2 inherit; color: #8A5F1A; -webkit-text-fill-color: #8A5F1A;
background: rgba(255, 238, 200, .75); box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .35);
transition: background-color .18s ease-out, transform .18s ease-out;
}
html.zdl-offer .zdl-prs:not(.zdl-yr) .zdl-ofr-hint { display: inline-flex; }
html.zdl-offer .zdl-ofr-hint:hover { background: rgba(255, 228, 170, .95); }
html.zdl-offer .zdl-ofr-hint:active { transform: scale(.98); }
html.zdl-offer .zdl-ofr-hint:focus-visible { outline: 2px solid #B8862F; outline-offset: 2px; }
html.zdl-offer .custom-plan.featured .zdl-ofr-hint { color: #FBE6AE; -webkit-text-fill-color: #FBE6AE; background: rgba(255, 231, 168, .12); box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .4); }
/* ── Growth = sone ka Diwali coupon ── */
html.zdl-offer .zdl-cp-col { filter: drop-shadow(0 30px 34px rgba(10, 71, 76, .28)) drop-shadow(0 10px 16px rgba(184, 134, 47, .25)); }
html.zdl-offer .custom-plan.zdl-coupon:not(#_):not(#_) {
overflow: hidden; box-shadow: none !important; padding-top: 64px !important;
/* perforation: dono kinaaron par aadha gol kata hua */
-webkit-mask: radial-gradient(circle 13px at 0 var(--tear, 260px), #0000 96%, #000 100%) left / 51% 100% no-repeat,
radial-gradient(circle 13px at 100% var(--tear, 260px), #0000 96%, #000 100%) right / 51% 100% no-repeat;
mask: radial-gradient(circle 13px at 0 var(--tear, 260px), #0000 96%, #000 100%) left / 51% 100% no-repeat,
radial-gradient(circle 13px at 100% var(--tear, 260px), #0000 96%, #000 100%) right / 51% 100% no-repeat;
}
html.zdl-offer .custom-plan.zdl-coupon .custom-plan-badge:not(#_):not(#_) { display: none !important; }
html.zdl-offer .zdl-cp-rib {
position: absolute; left: 0; right: 0; top: 0; z-index: 3; margin: 0; padding: 10px 16px; text-align: center;
font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
color: #3A2408; -webkit-text-fill-color: #3A2408;
background: linear-gradient(100deg, #C9973B, #F6DC97 30%, #E2B65C 55%, #FBE6AE 75%, #C9973B);
background-size: 220% 100%; animation: zdl-rib-foil 6s linear infinite;
box-shadow: inset 0 -1px 0 rgba(120, 76, 16, .35), inset 0 1px 0 rgba(255, 250, 230, .8);
}
html.zdl-offer .zdl-cp-rib span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@keyframes zdl-rib-foil { to { background-position: -220% 0; } }
html.zdl-offer .zdl-coupon .zdl-pdiya:not(#_):not(#_) { top: 52px; left: auto; right: 28px; margin-left: 0; }
html.zdl-offer .zdl-cp-tear {
position: absolute; left: 20px; right: 20px; top: var(--tear, 260px); z-index: 2; pointer-events: none;
border-top: 2px dashed rgba(255, 231, 168, .38);
}
@property --zdl-ang { syntax: ""; inherits: false; initial-value: 0deg; }
html.zdl-offer .zdl-cp-ring {
position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.5px;
background: conic-gradient(from var(--zdl-ang), rgba(255, 231, 168, .15), #FBE6AE 12%, rgba(255, 231, 168, .15) 25%, rgba(226, 182, 92, .55) 50%, rgba(255, 231, 168, .15) 62%, #F6DC97 75%, rgba(255, 231, 168, .15));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: zdl-ring 7s linear infinite;
}
@keyframes zdl-ring { to { --zdl-ang: 360deg; } }
/* price ke peeche diya ki roshni */
html.zdl-offer .zdl-coupon .custom-plan-price:not(#_) { position: relative; }
html.zdl-offer .zdl-coupon .custom-plan-price:not(#_)::before {
content: ""; position: absolute; left: -40px; top: -30px; width: 260px; height: 160px; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 196, 110, .32), rgba(255, 196, 110, 0));
}
html.zdl-offer .zdl-cp-cd {
display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 5px 12px 5px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 246, 228, .85); -webkit-text-fill-color: currentcolor;
background: rgba(255, 231, 168, .1); box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .3);
}
html.zdl-offer .zdl-cp-cd i { width: 7px; height: 7px; border-radius: 50%; background: #F6C35A; box-shadow: 0 0 0 3px rgba(246, 195, 90, .25); animation: zdl-cd-dot 1.6s ease-in-out infinite; }
@keyframes zdl-cd-dot { 50% { opacity: .35; } }
html.zdl-offer .zdl-cp-cd b { color: #FBE6AE; -webkit-text-fill-color: #FBE6AE; font-variant-numeric: tabular-nums; }
html.zdl-offer .custom-plan-cta.zdl-cp-cta:not(#_):not(#_) { min-height: 52px; display: flex !important; align-items: center; justify-content: center; font-size: 15px !important; font-weight: 800 !important; border: 0 !important; }
html.zdl-offer .zdl-cp-trust { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; text-align: center; }
html.zdl-offer .zdl-cp-trust span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 246, 228, .72); -webkit-text-fill-color: currentcolor; }
html.zdl-offer .zdl-cp-trust svg { width: 14px; height: 14px; fill: none; stroke: #F6D27A; stroke-width: 2; stroke-linecap: round; }
html.zdl-offer .zdl-cp-trust a { min-height: 32px; display: inline-flex; align-items: center; font-weight: 700; color: #FBE6AE !important; -webkit-text-fill-color: #FBE6AE !important; text-decoration: underline; text-decoration-color: rgba(251, 230, 174, .4); text-underline-offset: 4px; }
html.zdl-offer .zdl-cp-trust a:hover { text-decoration-color: #FBE6AE; }
html.zdl-offer .zdl-coupon .custom-plan-trust:not(#_) { margin-top: 8px !important; }
html.zdl-offer .zdl-startup { margin: 24px 0 0; text-align: center; font-size: 15px; }
html.zdl-offer .zdl-startup b { color: #8A5F1A; -webkit-text-fill-color: #8A5F1A; }
html.zdl-offer .zdl-startup a { font-weight: 700; color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; text-decoration: underline; text-decoration-color: rgba(184, 134, 47, .5); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
html.zdl-offer .zdl-cp-ring { animation-duration: 16s; }
html.zdl-offer .zdl-cp-rib { animation: none; }
}
@media (max-width: 767px) {
html.zdl-offer .zdl-cp-rib { font-size: 10px; letter-spacing: .1em; }
html.zdl-offer .zdl-coupon .zdl-pdiya:not(#_):not(#_) { right: 16px; transform: scale(.85); }
}
/* offer: rang pakke (featured card ke andar ka cream text inherit ho raha tha) */
html.zdl-offer .zdl-prs .zdl-save:not(#_):not(#_) { color: #3A2408 !important; -webkit-text-fill-color: #3A2408 !important; }
html.zdl-offer .zdl-coupon .zdl-cp-trust span:not(#_):not(#_) { color: rgba(255, 246, 228, .88) !important; -webkit-text-fill-color: rgba(255, 246, 228, .88) !important; }
html.zdl-offer .zdl-prs .zdl-startup:not(#_):not(#_) { color: #3E5559 !important; -webkit-text-fill-color: #3E5559 !important; }
html.zdl-offer .zdl-coupon .custom-plan-body:not(#_):not(#_) { padding-top: 24px !important; }
html.zdl-offer .zdl-coupon .custom-plan-cta.zdl-cp-cta:not(#_):not(#_) {
position: relative; overflow: hidden;
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 0 0 1px rgba(255, 231, 168, .5), 0 14px 30px -12px rgba(232, 160, 60, .75) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out !important;
}
html.zdl-offer .zdl-coupon .custom-plan-cta.zdl-cp-cta:not(#_):not(#_):hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 0 0 1px rgba(255, 231, 168, .8), 0 18px 36px -12px rgba(232, 160, 60, .9) !important; }
html.zdl-offer .zdl-coupon .custom-plan-cta.zdl-cp-cta:not(#_):not(#_):active { transform: scale(.98); }
html.zdl-offer .zdl-coupon .custom-plan-cta.zdl-cp-cta:not(#_):not(#_):focus-visible { outline: 2px solid #FBE6AE; outline-offset: 3px; }
/* offer (/pricing): desc nahi hai to countdown naam ke bagal me chipakta tha — apni line;
naam ka chip dono pages par ek jaisa pill */
html.zdl-offer .zdl-prs .zdl-cp-cd:not(#_) { display: flex; width: max-content; max-width: 100%; }
html.zdl-on .zdl-prs .custom-plan-name:not(#_):not(#_) { border-radius: 999px !important; padding: 4px 12px !important; }
/* ZSC-BEGIN — "Inside ZupiChat" screens (zdl.js screens()) · ?scr=off · /root/zdl-scr-revert.sh */
html.zdl-on .zc-shots.zdl-scr-on .zc-shots__grid:not(#_) { display: none !important; }
/* chaudai screen ki oonchai se — tabs + poori screen + caption ek nazar me (1440x900 par ~990px) */
html.zdl-on .zdl-scr { position: relative; max-width: clamp(720px, calc((100vh - 300px) * 1.63 + 16px), 1120px); margin: 40px auto 0; }
/* tabs — liquid glass pill jo spring ke saath sarakti hai */
html.zdl-on .zdl-scr-tabs {
position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 24px; padding: 6px;
border-radius: 999px; overflow-x: auto; scrollbar-width: none;
background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 .5px rgba(160, 120, 50, .22), 0 8px 24px -14px rgba(120, 84, 24, .4);
}
html.zdl-on .zdl-scr-tabs::-webkit-scrollbar { display: none; }
html.zdl-on .zdl-scr-tabs .sm { display: none; }
html.zdl-on .zdl-scr-pill {
position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 999px; pointer-events: none;
background: linear-gradient(170deg, #fff, rgba(255, 255, 255, .72) 55%, rgba(255, 246, 228, .92));
box-shadow: inset 0 1.5px 0 #fff, inset 0 -3px 8px rgba(226, 182, 92, .2), 0 0 0 .5px rgba(184, 134, 47, .3), 0 6px 16px -8px rgba(120, 84, 24, .45);
transition: transform .5s cubic-bezier(.3, 1.32, .5, 1), width .5s cubic-bezier(.3, 1.32, .5, 1);
}
html.zdl-on .zdl-scr-tabs button:not(#_) {
position: relative; z-index: 1; flex: none; min-height: 44px; padding: 0 20px; margin: 0; border: 0; border-radius: 999px;
background: none !important; cursor: pointer; overflow: hidden;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
color: rgba(16, 38, 42, .6) !important; -webkit-text-fill-color: currentcolor !important;
transition: color .18s ease-out, transform .15s ease-out;
}
html.zdl-on .zdl-scr-tabs button:not(#_):hover { color: #10262A !important; }
html.zdl-on .zdl-scr-tabs button:not(#_):active { transform: scale(.98); }
html.zdl-on .zdl-scr-tabs button:not(#_):focus-visible { outline: 2px solid rgba(184, 134, 47, .7); outline-offset: -2px; }
html.zdl-on .zdl-scr-tabs button[aria-selected="true"]:not(#_) { color: #10262A !important; }
html.zdl-on .zdl-scr-tabs .pg {
position: absolute; left: 20px; right: 20px; bottom: 6px; height: 2px; border-radius: 2px; pointer-events: none;
background: linear-gradient(90deg, #E8C374, #B8862F); transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
html.zdl-on .zdl-scr-tabs button[aria-selected="true"] .pg.run { opacity: 1; animation: zdl-scr-pg 7s linear forwards; }
html.zdl-on .zdl-scr:is(.hold, .away) .pg { animation-play-state: paused !important; }
@keyframes zdl-scr-pg { to { transform: scaleX(1); } }
/* stage — toran + glass browser window + diye */
html.zdl-on .zdl-scr-stage { position: relative; padding-top: 32px; }
html.zdl-on .zdl-scr-stage::after {
content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -48px; height: 128px; pointer-events: none;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 190, 110, .38), rgba(255, 190, 110, 0) 70%);
}
html.zdl-on .zdl-scr-toran { position: absolute; z-index: 3; left: 32px; right: 32px; top: 8px; height: 40px; pointer-events: none; }
html.zdl-on .zdl-scr-toran svg { display: block; width: 100%; height: 28px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(120, 84, 24, .3)); }
html.zdl-on .zdl-scr-toran i {
position: absolute; top: 14px; width: 8px; height: 12px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%), var(--c);
box-shadow: 0 0 0 1.5px #D9A84E, 0 3px 5px rgba(120, 84, 24, .35);
transform-origin: 50% -8px; animation: zdl-scr-sway 3.2s ease-in-out infinite;
}
@keyframes zdl-scr-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
html.zdl-on .zdl-scr-win {
position: relative; z-index: 1; padding: 0 8px 8px; border-radius: 20px;
background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(201, 151, 59, .32),
0 2px 6px -2px rgba(120, 84, 24, .18), 0 40px 80px -36px rgba(120, 84, 24, .55);
}
html.zdl-on .zdl-scr-win::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.2px;
background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .2) 28%, rgba(226, 182, 92, .45) 55%, rgba(255, 255, 255, .85));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.zdl-on .zdl-scr-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; }
html.zdl-on .zdl-scr-bar > i { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .18), inset 0 1px 1px rgba(255, 255, 255, .6); }
html.zdl-on .zdl-scr-bar > i:nth-child(1) { background: #EE6A5F; }
html.zdl-on .zdl-scr-bar > i:nth-child(2) { background: #F5BE4F; }
html.zdl-on .zdl-scr-bar > i:nth-child(3) { background: #62C554; }
html.zdl-on .zdl-scr-bar .url {
flex: 1; min-width: 0; max-width: 420px; height: 32px; margin: 0 auto; padding: 0 16px; border-radius: 999px;
display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; white-space: nowrap;
font-size: 13px; color: rgba(16, 38, 42, .55) !important; -webkit-text-fill-color: currentcolor !important;
background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(16, 38, 42, .06), inset 0 1px 2px rgba(16, 38, 42, .05);
}
html.zdl-on .zdl-scr-bar .url svg { flex: none; color: #8A5F1A; }
html.zdl-on .zdl-scr-bar .url b { color: #10262A !important; -webkit-text-fill-color: currentcolor !important; font-weight: 600; }
html.zdl-on .zdl-scr-full:not(#_) {
flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600; color: #8A5F1A !important; -webkit-text-fill-color: currentcolor !important;
background: rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .35), 0 4px 10px -6px rgba(120, 84, 24, .4);
transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .15s ease-out;
}
html.zdl-on .zdl-scr-full:not(#_):hover { background: #fff !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .6), 0 8px 18px -8px rgba(184, 134, 47, .55); }
html.zdl-on .zdl-scr-full:not(#_):active { transform: scale(.98); }
html.zdl-on .zdl-scr-full:not(#_):focus-visible { outline: 2px solid rgba(184, 134, 47, .7); outline-offset: 2px; }
html.zdl-on .zdl-scr-view {
position: relative; z-index: 1; aspect-ratio: 1500 / 919; border-radius: 12px; overflow: hidden; cursor: zoom-in;
background: #F4F1EA; box-shadow: 0 0 0 1px rgba(16, 38, 42, .08);
}
html.zdl-on .zdl-scr-pane:not(#_) {
position: absolute; inset: 0; margin: 0; padding: 0; opacity: 0; transform: scale(1.015);
transition: opacity .5s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1);
}
html.zdl-on .zdl-scr-pane.on:not(#_) { z-index: 1; opacity: 1; transform: none; }
html.zdl-on .zdl-scr-pane img:not(#_) { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
/* hotspots — sone ke bindu, ring halki si dhadakti hai */
html.zdl-on .zdl-hs:not(#_) {
position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0;
border: 0; border-radius: 50%; background: none !important; cursor: pointer; --tx: -50%;
}
html.zdl-on .zdl-hs::before {
content: ""; position: absolute; inset: 10px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #FFE7A8, #C9973B 70%); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(120, 84, 24, .5);
}
html.zdl-on .zdl-hs::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(201, 151, 59, .75); animation: zdl-hs-ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes zdl-hs-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
html.zdl-on .zdl-hs:not(#_):focus-visible { outline: 2px solid rgba(184, 134, 47, .8); outline-offset: 2px; }
html.zdl-on .zdl-hs .tip {
position: absolute; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 224px; padding: 8px 12px; border-radius: 12px;
font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal;
color: #10262A !important; -webkit-text-fill-color: currentcolor !important;
background: rgba(255, 253, 248, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .38), 0 10px 24px -12px rgba(120, 84, 24, .55);
opacity: 0; pointer-events: none; transform: translate(var(--tx), 4px); transition: opacity .2s ease-out, transform .25s ease-out;
}
html.zdl-on .zdl-hs.b .tip { bottom: auto; top: calc(100% + 8px); }
html.zdl-on .zdl-hs.l:not(#_) { --tx: 0px; }
html.zdl-on .zdl-hs.l .tip { left: auto; right: -8px; }
html.zdl-on .zdl-hs.r:not(#_) { --tx: 0px; }
html.zdl-on .zdl-hs.r .tip { left: -8px; }
html.zdl-on .zdl-hs:is(:hover, :focus-visible, .show) .tip { opacity: 1; transform: translate(var(--tx), 0); }
html.zdl-on .zdl-hs.show::before { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(201, 151, 59, .35), 0 2px 6px rgba(120, 84, 24, .5); }
/* tour cursor */
html.zdl-on .zdl-scr-cur {
position: absolute; left: 0; top: 0; z-index: 5; width: 24px; height: 24px; pointer-events: none; opacity: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9.5-6.6 1.4L16 20l-2.8 1.3-3.6-7.1L4 19z' fill='%2310262A' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
filter: drop-shadow(0 3px 4px rgba(16, 38, 42, .35));
transition: transform 1s cubic-bezier(.45, 0, .2, 1), opacity .3s ease-out;
}
html.zdl-on .zdl-scr-cur.on { opacity: 1; }
html.zdl-on .zdl-scr-cur.tap::after {
content: ""; position: absolute; left: -8px; top: -10px; width: 24px; height: 24px; border-radius: 50%;
background: rgba(201, 151, 59, .5); animation: zdl-cur-tap .5s ease-out forwards;
}
@keyframes zdl-cur-tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
/* zoom lens — glass ki boond jisme screen 2.4x */
html.zdl-on .zdl-scr-lens {
position: absolute; left: 0; top: 0; z-index: 3; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%;
pointer-events: none; opacity: 0; scale: .6; background-color: #fff; background-repeat: no-repeat;
box-shadow: inset 0 2px 1px rgba(255, 255, 255, .9), inset 0 -6px 14px rgba(201, 151, 59, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .75),
0 0 0 1px rgba(201, 151, 59, .45), 0 18px 40px -14px rgba(16, 38, 42, .45);
transition: opacity .2s ease-out, scale .35s cubic-bezier(.3, 1.4, .5, 1);
}
html.zdl-on .zdl-scr-lens::after {
content: ""; position: absolute; left: 18%; right: 30%; top: 6px; height: 34%; border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}
html.zdl-on .zdl-scr-lens.on { opacity: 1; scale: 1; }
html.zdl-on .zdl-scr-view:has(.zdl-hs:hover) .zdl-scr-lens { opacity: 0; }
/* diye — window ke kono par */
html.zdl-on .zdl-scr-diya { position: absolute; z-index: 2; bottom: -16px; width: 56px; height: 44px; pointer-events: none; }
html.zdl-on .zdl-scr-diya.l { left: -12px; }
html.zdl-on .zdl-scr-diya.r { right: -12px; }
html.zdl-on .zdl-scr-diya b {
position: absolute; left: 0; right: 0; bottom: 0; height: 20px; border-radius: 6px 6px 50% 50% / 4px 4px 100% 100%;
background: linear-gradient(180deg, #B4532A 0%, #8E3F1C 55%, #5E2810 100%);
box-shadow: inset 0 3px 0 #D9A441, inset 0 -4px 6px rgba(40, 14, 4, .3), 0 6px 12px -6px rgba(94, 40, 16, .6);
}
html.zdl-on .zdl-scr-diya b::before { content: ""; position: absolute; left: 12%; right: 12%; top: 9px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #F7E7C2 0 3px, transparent 3px 7px); }
html.zdl-on .zdl-scr-diya b::after { content: ""; position: absolute; left: 4px; right: 4px; top: -3px; height: 7px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #7A4410, #3A1606); box-shadow: 0 0 0 2px #C77A3A; }
html.zdl-on .zdl-scr-diya .fl {
position: absolute; left: 50%; bottom: 20px; width: 12px; height: 22px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: radial-gradient(ellipse at 50% 75%, #fff 0%, #FFF0B0 22%, #FFB43C 55%, rgba(240, 104, 24, .9) 80%, rgba(240, 104, 24, 0) 100%);
transform-origin: 50% 100%; animation: zdl-scr-flick 1.6s ease-in-out infinite;
}
html.zdl-on .zdl-scr-diya .fl::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 190, 110, .45), rgba(255, 190, 110, 0));
}
html.zdl-on .zdl-scr-diya.r .fl { animation-delay: -.7s; }
@keyframes zdl-scr-flick { 0%, 100% { transform: scale(1, 1) rotate(-1deg); } 30% { transform: scale(.94, 1.07) rotate(1.5deg); } 60% { transform: scale(1.04, .95) rotate(-.5deg); } }
html.zdl-on .zdl-scr-cap:not(#_) { margin: 32px 0 0; text-align: center; font-size: 16px; line-height: 1.5; color: rgba(16, 38, 42, .62) !important; -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .zdl-scr-cap strong { margin-right: 8px; font-weight: 700; color: #10262A !important; -webkit-text-fill-color: currentcolor !important; }
/* lightbox */
html.zdl-on .zdl-lb {
position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 64px 80px;
background: rgba(16, 38, 42, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
opacity: 0; transition: opacity .25s ease-out;
}
html.zdl-on .zdl-lb.on { opacity: 1; }
html.zdl-on .zdl-lb-in {
position: relative; max-width: min(1500px, 100%); max-height: 100%; overflow: auto; border-radius: 16px; background: #fff;
box-shadow: 0 0 0 1px rgba(201, 151, 59, .5), 0 40px 100px -30px rgba(6, 20, 22, .6);
transform: scale(.96); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1);
}
html.zdl-on .zdl-lb.on .zdl-lb-in { transform: none; }
html.zdl-on .zdl-lb img { display: block; width: 100%; height: auto; max-width: none; }
html.zdl-on .zdl-lb p { margin: 0; padding: 12px 16px; font-size: 14px; color: rgba(16, 38, 42, .7) !important; -webkit-text-fill-color: currentcolor !important; background: #FFFCF6; }
html.zdl-on .zdl-lb p strong { margin-right: 8px; color: #10262A !important; -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .zdl-lb button:not(#_) {
position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
font-family: inherit; font-size: 28px; line-height: 1; color: #10262A !important; -webkit-text-fill-color: currentcolor !important;
background: rgba(255, 253, 248, .92) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .4), 0 8px 20px -8px rgba(6, 20, 22, .45);
transition: background-color .15s ease-out, transform .15s ease-out;
}
html.zdl-on .zdl-lb button:not(#_):hover { background: #fff !important; }
html.zdl-on .zdl-lb button:not(#_):active { transform: scale(.96); }
html.zdl-on .zdl-lb button:not(#_):focus-visible { outline: 2px solid #E8C374; outline-offset: 2px; }
html.zdl-on .zdl-lb .x { top: 16px; right: 16px; }
html.zdl-on .zdl-lb .pv { left: 16px; top: 50%; margin-top: -24px; }
html.zdl-on .zdl-lb .nx { right: 16px; top: 50%; margin-top: -24px; }
@media (max-width: 767px) {
html.zdl-on .zdl-scr { margin-top: 32px; }
html.zdl-on .zdl-scr-tabs { width: 100%; margin-bottom: 16px; }
html.zdl-on .zdl-scr-tabs button:not(#_) { padding: 0 16px; font-size: 14px; }
html.zdl-on .zdl-scr-tabs .pg { left: 16px; right: 16px; }
html.zdl-on .zdl-scr-tabs { justify-content: space-between; }
html.zdl-on .zdl-scr-tabs .lg { display: none; }
html.zdl-on .zdl-scr-tabs .sm { display: inline; }
html.zdl-on .zdl-scr-tabs button:not(#_) { padding: 0 12px; }
html.zdl-on .zdl-scr-tabs .pg { left: 12px; right: 12px; }
html.zdl-on .zdl-scr-stage { padding-top: 24px; }
html.zdl-on .zdl-scr-toran { left: 16px; right: 16px; top: 4px; }
html.zdl-on .zdl-scr-toran i:nth-child(2n+1) { display: none; }
html.zdl-on .zdl-scr-win { padding: 0 4px 4px; border-radius: 16px; }
html.zdl-on .zdl-scr-bar { height: 40px; gap: 6px; padding: 0 6px; }
html.zdl-on .zdl-scr-bar > i { width: 8px; height: 8px; }
html.zdl-on .zdl-scr-bar .url { height: 28px; padding: 0 10px; font-size: 12px; }
html.zdl-on .zdl-scr-full:not(#_) { min-height: 32px; min-width: 44px; padding: 0 10px; justify-content: center; }
html.zdl-on .zdl-scr-full span { display: none; }
html.zdl-on .zdl-scr-view { border-radius: 10px; cursor: pointer; }
html.zdl-on .zdl-hs:not(#_) { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
html.zdl-on .zdl-hs::before { inset: 9px; }
html.zdl-on .zdl-hs::after { inset: 5px; }
html.zdl-on .zdl-hs .tip { max-width: 168px; padding: 6px 10px; font-size: 12px; }
html.zdl-on .zdl-scr-cur { display: none; }
html.zdl-on .zdl-scr-diya { transform: scale(.75); bottom: -14px; }
html.zdl-on .zdl-scr-diya.l { left: -4px; transform-origin: 0 100%; }
html.zdl-on .zdl-scr-diya.r { right: -4px; transform-origin: 100% 100%; }
html.zdl-on .zdl-scr-cap:not(#_) { margin-top: 24px; font-size: 14px; padding: 0 8px; }
html.zdl-on .zdl-lb { padding: 64px 0 80px; }
html.zdl-on .zdl-lb-in { max-width: 100%; border-radius: 0; }
html.zdl-on .zdl-lb img { width: 1100px; }
html.zdl-on .zdl-lb .pv, html.zdl-on .zdl-lb .nx { top: auto; bottom: 16px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { /* tier 1: roshni + fade, uchhal / jhoola nahi */
html.zdl-on .zdl-scr-pill { transition: transform .25s ease-out, width .25s ease-out; }
html.zdl-on .zdl-scr-pane:not(#_) { transform: none; transition: opacity .4s ease-out; }
html.zdl-on .zdl-hs::after, html.zdl-on .zdl-scr-toran i { animation: none; }
html.zdl-on .zdl-scr-diya .fl { animation: zdl-scr-glow 2s ease-in-out infinite; }
@keyframes zdl-scr-glow { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
html.zdl-on .zdl-scr-lens { transition: opacity .2s ease-out; }
}
/* ZSC-END */
/* ════ PRICING — sab plan gehra liquid glass, bahar ki shadow nahi ═════
zdl.js plansDark(): halke plans par .zdl-glass-dark .zdl-plan-dark.
Growth alag dikhta hai sone ke ribbon/rim/CTA se. */
html.zdl-on .zdl-prs .custom-plan:not(#_):not(#_),
html.zdl-on .zdl-prs .custom-plan:not(#_):not(#_):hover {
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .24), inset -1px -1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(255, 231, 168, .1) !important;
}
html.zdl-offer .zdl-prs .zdl-cp-col:not(#_) { filter: none; }
html.zdl-on .zdl-prs .zdl-plan-dark :is(p, span, li, div, small, em, i, s, label):not(.custom-plan-name):not(.zdl-save):not(.zdl-save *):not(#_) {
color: rgba(247, 238, 221, .8) !important; -webkit-text-fill-color: currentcolor !important;
}
html.zdl-on .zdl-prs .zdl-plan-dark :is(strong, b, .custom-plan-price, .custom-plan-price > span, .zdl-ofr b):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-price > span > span:not(#_):not(#_),
html.zdl-on .zdl-prs .zdl-plan-dark .zdl-ofr :is(s, i, .zdl-ofr-sub):not(#_):not(#_) { color: rgba(247, 238, 221, .6) !important; -webkit-text-fill-color: rgba(247, 238, 221, .6) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .cpf-plus:not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; border-color: rgba(255, 231, 168, .3) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-features li:not(#_) { border-color: rgba(255, 231, 168, .14) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-features li > i:not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; background: rgba(255, 231, 168, .12) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark :is(.custom-plan-header, .cpf-perday, hr):not(#_) { border-color: rgba(255, 231, 168, .22) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .cpf-upsell:not(#_):not(#_) { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 231, 168, .22) !important; box-shadow: none !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .zdl-prang:not(#_) { opacity: .16; }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-cta:not(#_):not(#_) {
background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 231, 168, .45) !important;
color: #FBE6AE !important; -webkit-text-fill-color: #FBE6AE !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
transition: background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-cta:not(#_):not(#_):hover { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 231, 168, .8) !important; }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-cta:not(#_):not(#_):focus-visible { outline: 2px solid #FBE6AE; outline-offset: 3px; }
html.zdl-offer .zdl-prs .zdl-plan-dark .zdl-ofr-hint:not(#_) { color: #FBE6AE; -webkit-text-fill-color: #FBE6AE; background: rgba(255, 231, 168, .12); box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .4); }
html.zdl-on .zdl-prs .zdl-plan-dark .custom-plan-features:not(#_):not(#_) { border-top-color: rgba(255, 231, 168, .22) !important; }
/* ════ SPEED PASS ═══════════════════════════════════════════════════════
1) screen se bahar ke section (.zdl-zz, zdl.js park) ki animation paused.
2) backdrop-filter har card par = har ek alag GPU blur pass (206 the).
Cream bg par in repeat hone wale cards ke peeche blur karne ko kuch
hai hi nahi — sirf glass rang + kinara + chhaaya rakho. Asli blur
sirf wahan jahan peeche content chalta hai (header, dropdown, hero
island, CTA, pricing). */
html.zdl-on .zdl-zz, html.zdl-on .zdl-zz *, html.zdl-on .zdl-zz *::before, html.zdl-on .zdl-zz *::after { animation-play-state: paused !important; }
html.zdl-on body :is(.zc-wall__tile, .zc-wall__logo, .tip, .custom-feat-card, .zpq-typing, .accordion-item, .blog-item, .zcb-feat,
.zdl-cd-cell, .zhw-chip, .zhw-time, .zhw-viz, .zhw-done, .zhw-live, .zh-meta-sep, .custom-section-tag, .zdl3d-card, .zdl-pcard,
.zc-wall__eyebrow, .zc-shots__eyebrow, .zcb-eyebrow, .zc-devapi__k, .zc-trust-icon):not(#_):not(#_) {
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* pricing: cards par safed sheen / roshni nahi (Aditya: "upar abhi bhi light effect") —
gehra, lagbhag opaque teal kaanch; sirf patli sunehri rim */
html.zdl-on .zdl-prs .custom-plan.zdl-glass-dark:not(#_):not(#_) {
background-color: #0B3A3E !important;
background-image: linear-gradient(180deg, #0F4246 0%, #0A3337 55%, #072629 100%) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid rgba(255, 231, 168, .22) !important;
}
html.zdl-on .zdl-prs .custom-plan.zdl-glass-dark:not(#_):not(#_),
html.zdl-on .zdl-prs .custom-plan.zdl-glass-dark:not(#_):not(#_):hover {
box-shadow: inset 0 1px 0 rgba(255, 231, 168, .22), inset 0 0 0 1px rgba(255, 255, 255, .03) !important;
}
html.zdl-on .zdl-prs .custom-plan .zdl-prang:not(#_):not(#_) { opacity: .07; }
html.zdl-offer .zdl-prs .zdl-coupon .custom-plan-price:not(#_)::before { background: radial-gradient(closest-side, rgba(255, 196, 110, .1), rgba(255, 196, 110, 0)); }
/* ════ PRICING — gehra LIQUID glass (zdl.js plansLiquid) ════════════
Dhuaandaar kaanch: peeche ka cream brightness(.42) se dab jaata hai, rang
(blobs) halke se jhalakte hain; safed wash NAHI. Kinaaron par rim + refraction. */
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_) {
background-color: rgba(5, 46, 50, .7) !important;
background-image: linear-gradient(180deg, rgba(14, 70, 74, .3) 0%, rgba(3, 24, 27, .4) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(.42) !important; backdrop-filter: blur(20px) saturate(1.9) brightness(.42) !important;
border: 0 !important;
}
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_),
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_):hover {
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .3), inset 0 -1px 1px rgba(255, 255, 255, .08),
inset 1px 0 1px rgba(255, 255, 255, .1), inset -1px 0 1px rgba(255, 255, 255, .06),
inset 0 0 28px rgba(120, 220, 210, .06), inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
}
html.zdl-on .zdl-plq-rim {
position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
background: linear-gradient(150deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, 0) 48%, rgba(255, 231, 168, .14) 76%, rgba(255, 255, 255, .42));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.zdl-on .zdl-plq-glint {
position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0;
background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(160, 240, 230, .08), rgba(160, 240, 230, 0) 70%);
transition: opacity .3s ease-out;
}
html.zdl-on .zdl-prs .custom-plan.zdl-plq:hover .zdl-plq-glint { opacity: 1; }
@media (max-width: 767px) {
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(8, 48, 52, .97) !important; }
}
/* liquid v2: grey nahi, gehra teal; kinaaron par paani jaisi chamak (meniscus),
neeche teal caustic — poore card par wash nahi */
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_) {
background-color: rgba(4, 52, 56, .78) !important;
background-image: linear-gradient(180deg, rgba(10, 74, 78, .35) 0%, rgba(2, 30, 33, .45) 100%) !important;
}
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_),
html.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_):hover {
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .14),
inset 1px 0 0 rgba(255, 255, 255, .12), inset -1px 0 0 rgba(255, 255, 255, .08),
inset 0 16px 26px -20px rgba(255, 255, 255, .26),
inset 0 -22px 36px -24px rgba(110, 230, 215, .26),
inset 10px 0 24px -22px rgba(160, 240, 230, .18), inset -10px 0 24px -22px rgba(160, 240, 230, .14) !important;
}
html.zdl-on .zdl-plq-rim:not(#_) {
padding: 1.6px;
background: linear-gradient(160deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .22) 12%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, rgba(160, 240, 230, .38) 88%, rgba(255, 255, 255, .7) 100%);
}
html.zdl-on .zdl-plq-glint:not(#_) { opacity: .55; }
@media (min-width: 768px) {
html.zdl-on.zdl-on .zdl-prs .custom-plan.zdl-plq:not(#_):not(#_) { -webkit-backdrop-filter: blur(20px) saturate(2.2) brightness(.35) !important; backdrop-filter: blur(20px) saturate(2.2) brightness(.35) !important; }
}
/* ZDH-BEGIN ════ DHANTERAS OFFER — kumkum maroon + sona ════════════════
zdl.js dhanteras(): plans par .zdh-card, paid par .zdh-paid + .zdh-offer.
Pehle ke teal / liquid layers (2× :not) ko 3× :not se harate hain. */
html.zdl-on .zdl-prs .custom-plan.zdh-card:not(#_):not(#_):not(#_) {
background-color: #4A0A18 !important;
background-image:
radial-gradient(80% 45% at 100% 0%, rgba(255, 150, 50, .26) 0%, rgba(255, 150, 50, 0) 60%),
radial-gradient(70% 40% at 0% 100%, rgba(226, 182, 92, .16) 0%, rgba(226, 182, 92, 0) 60%),
linear-gradient(180deg, #62101F 0%, #4A0A18 55%, #300612 100%) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid rgba(255, 214, 140, .35) !important;
box-shadow: inset 0 1px 0 rgba(255, 220, 160, .3), 0 2px 6px rgba(74, 10, 24, .2), 0 28px 56px -28px rgba(74, 10, 24, .6) !important;
}
html.zdl-on .zdl-prs .custom-plan.zdh-card.featured:not(#_):not(#_):not(#_) {
background-color: #6A1020 !important;
background-image:
radial-gradient(90% 40% at 50% 0%, rgba(255, 170, 60, .4) 0%, rgba(255, 170, 60, 0) 65%),
radial-gradient(60% 40% at 100% 100%, rgba(255, 120, 60, .22) 0%, rgba(255, 120, 60, 0) 60%),
linear-gradient(180deg, #8A1A2A 0%, #6A1020 45%, #420816 100%) !important;
}
html.zdl-on .zdl-prs .zdh-card .zdl-prang:not(#_):not(#_) { opacity: .12; }
/* site ka monthly daam offer ke neeche chhupta hai; yearly me offer chhupta hai */
html.zdl-on .zdl-prs .custom-plan-price:has(.zdh-offer) .monthly_price:not(#_) { display: none !important; }
html.zdl-on .zdl-prs.zdl-yr .zdh-offer:not(#_) { display: none; }
html.zdl-on .zdl-prs:not(.zdl-yr) .zdh-paid .zdl-ofr-hint:not(#_) { display: none !important; }
html.zdl-on .zdl-prs .zdh-card .zdh-offer { letter-spacing: normal; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
html.zdl-on .zdl-prs .zdh-card .zdh-tag:not(#_):not(#_):not(#_) {
display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: #3A1406 !important; -webkit-text-fill-color: currentcolor !important;
background: linear-gradient(135deg, #FFD27A, #F59E2B 55%, #E8742A);
box-shadow: inset 0 1px 0 rgba(255, 245, 220, .8), 0 6px 14px -6px rgba(245, 140, 40, .7);
}
html.zdl-on .zdl-prs .zdh-card .zdh-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; line-height: 1; }
html.zdl-on .zdl-prs .zdh-card .zdh-row s:not(#_):not(#_):not(#_) { font-size: 22px; font-weight: 700; color: rgba(255, 236, 210, .55) !important; -webkit-text-fill-color: rgba(255, 236, 210, .55) !important; text-decoration-color: #F59E2B; text-decoration-thickness: 2px; }
html.zdl-on .zdl-prs .zdh-card .zdh-row b:not(#_):not(#_):not(#_) {
font-size: 48px; font-weight: 800; letter-spacing: -.02em;
background: linear-gradient(180deg, #FFF6DA 0%, #FFD98A 55%, #E8B45A 100%); -webkit-background-clip: text; background-clip: text;
color: transparent !important; -webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 2px 10px rgba(255, 170, 60, .35));
}
html.zdl-on .zdl-prs .zdh-card .zdh-row i:not(#_):not(#_):not(#_) { font-style: normal; font-size: 14px; font-weight: 700; color: #FFD27A !important; -webkit-text-fill-color: #FFD27A !important; }
html.zdl-on .zdl-prs .zdh-card .zdh-sub:not(#_):not(#_):not(#_) { font-size: 14px; color: rgba(255, 236, 210, .72) !important; -webkit-text-fill-color: rgba(255, 236, 210, .72) !important; }
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_) {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 16px; border-radius: 10px; cursor: pointer;
font: inherit; font-size: 13px; letter-spacing: normal; color: rgba(255, 236, 210, .85) !important; -webkit-text-fill-color: rgba(255, 236, 210, .85) !important;
background: rgba(255, 210, 122, .08); border: 1.5px dashed rgba(255, 210, 122, .7);
transition: background .18s ease-out, border-color .18s ease-out, transform .18s ease-out;
}
html.zdl-on .zdl-prs .zdh-card .zdh-code b:not(#_):not(#_):not(#_) { font-weight: 800; letter-spacing: .06em; color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; }
html.zdl-on .zdl-prs .zdh-card .zdh-code span:not(#_):not(#_):not(#_) {
padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 800;
color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; background: linear-gradient(180deg, #FFE7A8, #E2B65C);
}
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_):hover { background: rgba(255, 210, 122, .16); border-color: #FFD27A; }
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_):focus-visible { outline: 2px solid #FFE7A8; outline-offset: 3px; }
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_).ok span { background: linear-gradient(180deg, #B8F0CF, #5BC98E); }
html.zdl-on .zdl-prs .zdh-card .zdh-cd:not(#_):not(#_):not(#_) { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 236, 210, .78) !important; -webkit-text-fill-color: rgba(255, 236, 210, .78) !important; }
html.zdl-on .zdl-prs .zdh-card .zdh-cd:not(#_):not(#_):not(#_)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F59E2B; box-shadow: 0 0 0 0 rgba(245, 158, 43, .6); animation: zdh-pulse 1.8s ease-out infinite; }
html.zdl-on .zdl-prs .zdh-card .zdh-cd b:not(#_):not(#_):not(#_) { color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; font-variant-numeric: tabular-nums; }
@keyframes zdh-pulse { 100% { box-shadow: 0 0 0 8px rgba(245, 158, 43, 0); } }
/* toggle par "50% off" chip */
html.zdl-on .zdh-tg:not(#_) {
display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; color: #fff !important; -webkit-text-fill-color: #fff !important;
background: linear-gradient(135deg, #E8742A, #C2283C); vertical-align: middle;
}
@media (max-width: 767px) {
html.zdl-on .zdl-prs .zdh-card .zdh-row b:not(#_):not(#_):not(#_) { font-size: 44px; }
html.zdl-on .zdl-prs .zdh-card .zdh-code:not(#_):not(#_):not(#_) { width: 100%; justify-content: space-between; }
/* phone: chip label ke upar sticker — toggle ki chaudai nahi badhti */
html.zdl-on :has(> .zdh-tg):not(#_) { position: relative; }
html.zdl-on .zdh-tg:not(#_) { position: absolute; left: 50%; top: auto; bottom: calc(100% - 4px); margin: 0; padding: 2px 6px; font-size: 10px; letter-spacing: 0; white-space: nowrap; transform: translateX(-50%); }
}
/* text: safed-sunehra, gehre maroon par saaf (Aditya 25 Oct) */
html.zdl-on .zdl-prs .custom-plan.zdh-card:not(#_):not(#_):not(#_)::before { background: linear-gradient(90deg, rgba(255, 231, 168, 0), rgba(255, 231, 168, .8), rgba(255, 231, 168, 0)) !important; }
html.zdl-on .zdl-prs .zdh-card :is(p, li, span, small, div, label):not(.zdl-x):not(.zdl-x *):not(.custom-plan-name):not(#_):not(#_):not(#_) {
color: rgba(255, 241, 226, .9) !important; -webkit-text-fill-color: rgba(255, 241, 226, .9) !important;
}
html.zdl-on .zdl-prs .zdh-card :is(b, strong, .custom-plan-price, .custom-plan-price > span):not(.zdl-x *):not(#_):not(#_):not(#_) { color: #FFF8EC !important; -webkit-text-fill-color: #FFF8EC !important; }
html.zdl-on .zdl-prs .zdh-card :is(.cpf-plus, .cpf-section-title, .custom-plan-features-title):not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on .zdl-prs .zdh-card .custom-plan-features li > i:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; background: rgba(242, 198, 109, .14) !important; }
/* baaki plan surfaces (zdl.js dhSurfaces): calculator ka ZupiChat card, referral
cards, ROI quiz result = wahi gehra kumkum maroon; comparison table me
ZupiChat row par maroon patti + pill. */
html.zdl-on .zdh-dark:not(#_):not(#_):not(#_) {
background-color: #24040C !important;
background-image:
radial-gradient(80% 50% at 100% 0%, rgba(255, 150, 50, .18) 0%, rgba(255, 150, 50, 0) 60%),
linear-gradient(180deg, #3E0915 0%, #26050D 55%, #160207 100%) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border-color: rgba(226, 182, 92, .45) !important;
}
html.zdl-on .zdh-rp.featured:not(#_):not(#_):not(#_) {
background-image:
radial-gradient(90% 34% at 50% 0%, rgba(255, 160, 50, .28) 0%, rgba(255, 160, 50, 0) 65%),
linear-gradient(180deg, #4C0B19 0%, #300612 45%, #1A0309 100%) !important;
}
html.zdl-on .zdh-rp :is(.rp-earn-box):not(#_):not(#_):not(#_) { background: rgba(255, 214, 140, .06) !important; border-color: rgba(242, 198, 109, .45) !important; }
html.zdl-on .zdh-rp :is(.rp-plan-icon-ring):not(#_):not(#_):not(#_) { background: rgba(255, 214, 140, .08) !important; border-color: rgba(242, 198, 109, .45) !important; }
html.zdl-on .zdh-rp :is(.rp-plan-features li):not(#_):not(#_):not(#_) { border-color: rgba(255, 214, 140, .14) !important; }
/* chhoti offer pill */
html.zdl-on .zdh-pill { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; letter-spacing: normal; }
html.zdl-on .zdh-pill-t:not(#_):not(#_):not(#_) {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important;
background: linear-gradient(135deg, #FFD27A, #F59E2B 55%, #E8742A);
box-shadow: inset 0 1px 0 rgba(255, 245, 220, .8), 0 4px 10px -6px rgba(245, 140, 40, .7);
}
html.zdl-on .zdh-pill-t b:not(#_):not(#_):not(#_) { color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; font-weight: 900; }
html.zdl-on .zdh-code.zdh-code-s:not(#_):not(#_):not(#_) {
display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 12px; border-radius: 8px; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em;
color: #6A1A12 !important; -webkit-text-fill-color: #6A1A12 !important;
background: rgba(245, 158, 43, .1); border: 1.5px dashed rgba(200, 110, 40, .7);
transition: background .18s ease-out, transform .18s ease-out;
}
html.zdl-on .zdh-dark .zdh-code.zdh-code-s:not(#_):not(#_):not(#_) { color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; background: rgba(255, 210, 122, .08); border-color: rgba(255, 210, 122, .7); }
html.zdl-on .zdh-code.zdh-code-s span:not(#_):not(#_):not(#_) {
padding: 4px 8px; border-radius: 6px; font-size: 11px; letter-spacing: 0;
color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; background: linear-gradient(180deg, #FFE7A8, #E2B65C);
}
html.zdl-on .zdh-code.zdh-code-s:hover { background: rgba(245, 158, 43, .18); }
html.zdl-on .zdh-code.zdh-code-s:active { transform: scale(.98); }
html.zdl-on .zdh-code.zdh-code-s:focus-visible { outline: 2px solid #E8742A; outline-offset: 2px; }
html.zdl-on .zdh-code.zdh-code-s.ok span:not(#_):not(#_):not(#_) { background: linear-gradient(180deg, #B8F0CF, #5BC98E); }
/* comparison table: ZupiChat row */
html.zdl-on tr.zdh-row-us:not(#_):not(#_) > td { background: rgba(106, 16, 32, .05) !important; }
html.zdl-on tr.zdh-row-us:not(#_):not(#_) > td:first-child { box-shadow: inset 4px 0 0 #8A1A2A !important; }
/* table: pill column ko chauda na kare (390 par table 720px scroll hota hai, pehla column ~92px) */
html.zdl-on tr.zdh-row-us .zdh-pill { flex-direction: column; align-items: flex-start; gap: 6px; max-width: 160px; }
html.zdl-on tr.zdh-row-us .zdh-pill-t:not(#_):not(#_):not(#_) { display: inline-block; white-space: normal; word-break: keep-all; overflow-wrap: normal; hyphens: none; font-size: 11px; line-height: 1.3; padding: 4px 10px; border-radius: 10px; }
/* quiz hero */
html.zdl-on .qr-hero.zdh-dark .zdh-pill { margin-top: 16px; }
/* ZDH-END */
/* ZDHG-BEGIN ════ DHANTERAS CARDS — gehra kumkum LIQUID glass, roshni ki chamak nahi ════
Aditya: "thoda dark, light effect hatao, liquid glassness add karo".
ZDH ka opaque maroon + narangi radial glows → paardarshi gehra kaanch: peeche ka page
plansLiquid() ke refraction + brightness(.35) se dab ke dhundhla jhalakta hai.
Glow / sparkle / text-glow band. ZDH ko 4× :not se harata hai. Hatana: ZDHG block delete. */
html.zdl-on .zdl-prs .custom-plan.zdh-card:not(#_):not(#_):not(#_):not(#_) {
background-color: rgba(24, 2, 8, .92) !important; /* gehra kumkum — Aditya 25 Oct: "aur dark" */
background-image:
linear-gradient(125deg, rgba(255, 240, 230, .1) 0%, rgba(255, 240, 230, .02) 22%, rgba(255, 240, 230, 0) 40%), /* kaanch ki tirchhi chamak */
linear-gradient(180deg, rgba(10, 0, 4, 0) 62%, rgba(10, 0, 4, .3) 100%) !important;
border: 0 !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 236, 214, .34), inset 0 -1px 0 rgba(255, 236, 214, .1),
inset 1px 0 0 rgba(255, 236, 214, .1), inset -1px 0 0 rgba(255, 236, 214, .06),
inset 0 18px 28px -22px rgba(255, 236, 214, .22),
inset 0 -26px 40px -28px rgba(255, 150, 120, .16),
0 2px 6px rgba(30, 4, 10, .25), 0 30px 60px -30px rgba(30, 4, 10, .7) !important;
}
html.zdl-on .zdl-prs .custom-plan.zdh-card.featured:not(#_):not(#_):not(#_):not(#_) {
background-color: rgba(36, 4, 12, .92) !important;
background-image:
linear-gradient(125deg, rgba(255, 236, 200, .12) 0%, rgba(255, 236, 200, .03) 22%, rgba(255, 236, 200, 0) 40%),
linear-gradient(180deg, rgba(10, 0, 4, 0) 62%, rgba(10, 0, 4, .32) 100%) !important;
}
/* kinaare ka rim — safed-sone, kaanch ki motai */
html.zdl-on .zdl-prs .zdh-card .zdl-plq-rim:not(#_):not(#_) {
background: linear-gradient(160deg, rgba(255, 240, 220, .85) 0%, rgba(255, 240, 220, .18) 14%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(226, 182, 92, .34) 86%, rgba(255, 240, 220, .6) 100%);
}
html.zdl-on .zdl-prs .zdh-card.featured .zdl-plq-rim:not(#_):not(#_) {
background: linear-gradient(160deg, rgba(255, 231, 168, .95) 0%, rgba(255, 231, 168, .3) 14%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(226, 182, 92, .5) 86%, rgba(255, 231, 168, .8) 100%);
}
/* roshni ki chamak band: cursor glint, daam ke peeche diya-glow, sitaare, rangoli, text glow */
html.zdl-on .zdl-prs .zdh-card .zdl-plq-glint:not(#_):not(#_),
html.zdl-on .zdl-prs .zdh-card .zdl-pstars:not(#_):not(#_),
html.zdl-on .zdl-prs .zdh-card .zdl-cp-ring:not(#_):not(#_) { display: none !important; }
html.zdl-offer .zdl-prs .zdh-card .custom-plan-price:not(#_):not(#_)::before { display: none !important; }
html.zdl-on .zdl-prs .zdh-card .zdl-prang:not(#_):not(#_):not(#_) { opacity: .05 !important; }
html.zdl-on .zdl-prs .zdh-card .zdl-pdiya .zdl-flame::after { opacity: .35; }
html.zdl-on .zdl-prs .zdh-card .zdh-row b:not(#_):not(#_):not(#_):not(#_) { filter: none; }
html.zdl-on .zdl-prs .zdh-card .zdh-tag:not(#_):not(#_):not(#_):not(#_) { box-shadow: inset 0 1px 0 rgba(255, 245, 220, .7); }
/* phone: blur band (jank) — thos gehra kaanch-rang, rim wahi */
@media (max-width: 767px) {
html.zdl-on .zdl-prs .custom-plan.zdh-card:not(#_):not(#_):not(#_):not(#_) { background-color: rgba(24, 2, 8, .98) !important; }
html.zdl-on .zdl-prs .custom-plan.zdh-card.featured:not(#_):not(#_):not(#_):not(#_) { background-color: rgba(36, 4, 12, .98) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.zdl-on .zdl-prs .custom-plan.zdh-card:not(#_):not(#_):not(#_):not(#_) { background-color: rgba(24, 2, 8, .98) !important; }
}
/* ZDHG-END */
/* ════ REFER & EARN — Deepotsav 30% (zdl.js refOffer, band ?ref30=off) ════
Commission cards + hub + calculator = wahi gehra liquid glass jo pricing par. */
html.zdl-ref .rp-reveal:not(#_) { opacity: 1 !important; transform: none !important; }
html.zdl-ref .zdl-ref-offer {
display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 16px; border-radius: 999px;
font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #3A2408; -webkit-text-fill-color: #3A2408;
background: linear-gradient(100deg, #E8BE63, #FBE6AE 45%, #D9A84E); background-size: 220% 100%; animation: zdl-rib-foil 6s linear infinite;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 1px rgba(184, 134, 47, .45);
}
html.zdl-ref .zdl-ref-offer b { font-size: 16px; font-weight: 900; }
html.zdl-ref .zdl-ref-offer i { font-style: normal; color: #8A5A14; }
/* gehra liquid glass — hub, commission cards, calculator */
html.zdl-ref :is(.rp-hub-card.zdl-ref-hub, .rp-plan.zdl-ref-card, .rpc-glass-card):not(#_):not(#_) {
position: relative; border: 0 !important;
background-color: rgba(4, 52, 56, .9) !important;
background-image: linear-gradient(180deg, rgba(10, 74, 78, .4) 0%, rgba(2, 30, 33, .5) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(2) brightness(.4) !important; backdrop-filter: blur(20px) saturate(2) brightness(.4) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .12),
inset 1px 0 0 rgba(255, 255, 255, .1), inset -1px 0 0 rgba(255, 255, 255, .07),
inset 0 16px 26px -20px rgba(255, 255, 255, .24), inset 0 -22px 36px -24px rgba(110, 230, 215, .24) !important;
}
html.zdl-ref .rp-plan.zdl-ref-card:not(#_):not(#_) { overflow: visible; }
html.zdl-ref .rp-plan.zdl-ref-card.featured:not(#_):not(#_) {
box-shadow:
inset 0 1.5px 0 rgba(255, 240, 200, .55), inset 0 0 0 1px rgba(255, 231, 168, .45),
inset 0 16px 26px -20px rgba(255, 220, 150, .3), inset 0 -22px 36px -24px rgba(226, 182, 92, .3) !important;
}
html.zdl-ref .zdl-ref-card .zdl-plq-rim, html.zdl-ref .zdl-ref-hub::after {
position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.6px;
background: linear-gradient(160deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .2) 12%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, rgba(160, 240, 230, .35) 88%, rgba(255, 255, 255, .65) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.zdl-ref .zdl-ref-hub::after { content: ""; }
/* text: cream, headings ivory, accents sona */
html.zdl-ref :is(.zdl-ref-hub, .zdl-ref-card, .rpc-glass-card) :is(p, span, li, div, small, em, strong, b, label, h3, h4):not(.zdl-ref-yr *):not(.rp-plan-badge):not(.rp-plan-badge *):not(#_) {
color: rgba(247, 238, 221, .82) !important; -webkit-text-fill-color: currentcolor !important;
}
html.zdl-ref :is(.zdl-ref-card :is(.rp-plan-name, .rp-plan-price), .rpc-glass-card :is(.rpc-sname, .rpc-total-amount, .rpc-total-amount span, .rpc-sum-val, .rpc-sum-val span), .zdl-ref-hub .rp-hub-row-text):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; }
html.zdl-ref :is(.zdl-ref-hub .rp-hub-label, .rpc-glass-card :is(.rpc-panel-title, .rpc-total-label), .zdl-ref-card .rp-earn-tag):not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; }
html.zdl-ref :is(.zdl-ref-hub .rp-hub-row-val, .rpc-glass-card .rpc-scommission):not(#_):not(#_) { color: #F6D27A !important; -webkit-text-fill-color: #F6D27A !important; font-weight: 800 !important; }
html.zdl-ref .zdl-ref-hub :is(.rp-hub-row, .rp-hub-head):not(#_) { border-color: rgba(255, 231, 168, .16) !important; }
html.zdl-ref .rpc-glass-card :is(.rpc-sum-row, .rpc-srow, .rpc-panel-right, .rpc-summary):not(#_) { border-color: rgba(255, 231, 168, .16) !important; background-color: transparent !important; }
html.zdl-ref .rpc-glass-card .rpc-panel-right:not(#_):not(#_) { background: rgba(255, 231, 168, .05) !important; }
html.zdl-ref .rpc-glass-card .rpc-total-amount:not(#_):not(#_) { font-size: clamp(44px, 5vw, 64px) !important; }
html.zdl-ref .rpc-glass-card .rpc-sicon:not(#_):not(#_) { background: rgba(255, 231, 168, .12) !important; color: #E2B65C !important; box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .3) !important; }
html.zdl-ref .rpc-glass-card .rpc-gslider:not(#_)::-webkit-slider-thumb { background: #FBE6AE !important; border-color: #C9973B !important; }
/* hub: bada sone ka 30% */
html.zdl-ref .zdl-ref-big { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 231, 168, .16); }
html.zdl-ref .zdl-ref-big b {
font-size: clamp(56px, 6vw, 80px); font-weight: 900; line-height: .9; letter-spacing: -.03em;
background: linear-gradient(100deg, #C9973B, #FBE6AE 40%, #E2B65C 60%, #F6DC97); -webkit-background-clip: text; background-clip: text;
color: transparent !important; -webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 4px 18px rgba(232, 160, 60, .35));
}
html.zdl-ref .zdl-ref-big span { font-size: 14px; line-height: 1.5; }
/* commission cards */
html.zdl-ref .zdl-ref-card .rp-plan-badge:not(#_):not(#_) {
color: #3A2408 !important; -webkit-text-fill-color: #3A2408 !important; white-space: nowrap;
background: linear-gradient(100deg, #C9973B, #F6DC97 35%, #E2B65C 60%, #FBE6AE) !important; background-size: 220% 100% !important;
animation: zdl-rib-foil 6s linear infinite; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .8), 0 6px 16px -8px rgba(184, 134, 47, .8) !important; border: 0 !important;
}
html.zdl-ref .zdl-ref-card .rp-plan-icon-ring:not(#_):not(#_) { background: rgba(255, 231, 168, .1) !important; color: #E2B65C !important; box-shadow: inset 0 0 0 1px rgba(255, 231, 168, .35) !important; }
html.zdl-ref .zdl-ref-card .rp-plan-icon-ring i:not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; }
html.zdl-ref .zdl-ref-card .rp-earn-box:not(#_):not(#_) {
background: linear-gradient(160deg, rgba(255, 231, 168, .16), rgba(255, 231, 168, .05)) !important;
border: 1px dashed rgba(255, 231, 168, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
html.zdl-ref .zdl-ref-card .rp-earn-amount:not(#_):not(#_) {
background: linear-gradient(100deg, #E2B65C, #FBE6AE 45%, #F6D27A); -webkit-background-clip: text; background-clip: text;
color: transparent !important; -webkit-text-fill-color: transparent !important; font-weight: 900 !important;
}
html.zdl-ref .zdl-ref-yr { margin-top: 8px; font-size: 12px; color: rgba(247, 238, 221, .75); }
html.zdl-ref .zdl-ref-yr b { color: #FBE6AE; -webkit-text-fill-color: #FBE6AE; font-weight: 800; }
html.zdl-ref .zdl-ref-card .rp-feat-check:not(#_):not(#_) { background: rgba(255, 231, 168, .14) !important; color: #E2B65C !important; }
html.zdl-ref .zdl-ref-card .rp-feat-check i:not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; }
html.zdl-ref .zdl-ref-card .rp-plan-features li:not(#_) { border-color: rgba(255, 231, 168, .12) !important; }
html.zdl-ref .zdl-ref-card .rp-plan-cta:not(#_):not(#_) {
background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 231, 168, .45) !important;
color: #FBE6AE !important; -webkit-text-fill-color: #FBE6AE !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
transition: background-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-ref .zdl-ref-card .rp-plan-cta:not(#_):not(#_):hover { background: rgba(255, 255, 255, .16) !important; }
html.zdl-ref .zdl-ref-card .rp-plan-cta:not(#_):not(#_):active { transform: scale(.98); }
html.zdl-ref .zdl-ref-card.featured .rp-plan-cta:not(#_):not(#_) {
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; border: 0 !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 26px -12px rgba(232, 160, 60, .7) !important;
}
@media (min-width: 992px) {
html.zdl-ref #commissions .row > .col-lg-4:not(#_) { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (max-width: 767px) {
html.zdl-ref :is(.rp-hub-card.zdl-ref-hub, .rp-plan.zdl-ref-card, .rpc-glass-card):not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(8, 48, 52, .97) !important; }
}
/* ref30 fixes: 30% ek line; calculator ka baaya panel bhi gehra */
html.zdl-ref .zdl-ref-big b { white-space: nowrap; flex: 0 0 auto; }
html.zdl-ref .rpc-glass-card .rpc-panel-left:not(#_):not(#_) { background: transparent !important; }
html.zdl-ref .rpc-glass-card .rpc-sprice-tag:not(#_):not(#_) { color: rgba(247, 238, 221, .62) !important; -webkit-text-fill-color: rgba(247, 238, 221, .62) !important; }
html.zdl-ref .rpc-glass-card .rpc-sref-count:not(#_):not(#_), html.zdl-ref .rpc-glass-card .rpc-sref-count strong:not(#_):not(#_) { color: rgba(247, 238, 221, .75) !important; -webkit-text-fill-color: rgba(247, 238, 221, .75) !important; }
/* ref30: offer patti ek saaf line (flex text ko tukdon me todta tha) */
html.zdl-ref .zdl-ref-offer:not(#_) { display: inline-block; line-height: 1.4; }
@media (max-width: 767px) { html.zdl-ref .zdl-ref-offer:not(#_) { font-size: 13px; padding: 8px 14px; } }
/* live bug (theme ke bina bhi): phone par "3 Simple Steps" card 165px me akshar-akshar tootte the */
@media (max-width: 767px) {
html.zdl-on #how-it-works .rp-steps-wrapper .row > [class*="col-"]:not(#_) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
html.zdl-on #how-it-works .rp-step:not(#_) { width: 100% !important; max-width: 100% !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
html.zdl-on #how-it-works .rp-step > *:not(#_) { max-width: 100%; writing-mode: horizontal-tb !important; }
}
/* Homepage "For developers" (#developer-api) — Aditya: preview se hatao (25 Oct). Sirf CSS, wapas laane ke liye ye block hatao. */
html.zdl-on #developer-api { display: none !important; }
/* ════ TORAN v2 (premium, shuru se ant tak) — zdl.js toran() ═════════ */
html.zdl-on .zdl-toran:not(#_) { height: 54px; }
@media (max-width: 767px) { html.zdl-on .zdl-toran:not(#_) { height: 40px; } }
html.zdl-on .zdl-toran svg:not(#_) { filter: drop-shadow(0 2px 2px rgba(120, 84, 24, .2)) drop-shadow(0 0 6px rgba(255, 210, 120, .25)); }
html.zdl-on .zdl-toran .zdl-glint { animation: zdl-tw 3.6s ease-in-out infinite; }
@keyframes zdl-tw { 0%, 64%, 100% { opacity: .3; } 80% { opacity: 1; } }
/* ════ REFER & EARN — steps + calculator Diwali (zdl.js refDiwali) ═════ */
html.zdl-ref #how-it-works .rp-step.zdl-ref-step:not(#_):not(#_) {
position: relative; padding-top: 48px !important;
background: linear-gradient(180deg, rgba(255, 253, 248, .95), rgba(255, 246, 228, .9)) !important;
border: 1px solid rgba(226, 182, 92, .35) !important;
box-shadow: inset 0 1px 0 #fff, 0 2px 4px -2px rgba(120, 84, 24, .14), 0 18px 40px -24px rgba(120, 84, 24, .35) !important;
}
html.zdl-ref #how-it-works .rp-step .zdl-ptoran:not(#_) { top: 0; }
html.zdl-ref #how-it-works .rp-step-icon-box:not(#_):not(#_) {
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6DC97 60%, #E2B65C) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .35), 0 10px 24px -10px rgba(232, 160, 60, .65), 0 0 28px rgba(255, 196, 110, .35) !important;
}
html.zdl-ref #how-it-works .rp-step-icon-box :is(svg, path, circle, line, rect, polyline):not(#_) { stroke: #7A4C10 !important; }
html.zdl-ref #how-it-works .rp-step-badge:not(#_):not(#_) {
color: #3A2408 !important; -webkit-text-fill-color: #3A2408 !important;
background: linear-gradient(100deg, #E8BE63, #FBE6AE 45%, #D9A84E) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(184, 134, 47, .4) !important;
}
html.zdl-ref #how-it-works .rp-step-badge-dot:not(#_):not(#_) { background: #E8701C !important; box-shadow: 0 0 6px 2px rgba(255, 150, 40, .6) !important; }
html.zdl-ref #how-it-works .rp-step-tag:not(#_):not(#_) { color: #8A5F1A !important; -webkit-text-fill-color: #8A5F1A !important; }
html.zdl-ref #how-it-works .rp-arrow-col :is(svg, path, line):not(#_) { stroke: #C9973B !important; }
html.zdl-ref #how-it-works .rp-steps-line:not(#_) { background-image: repeating-linear-gradient(90deg, rgba(201, 151, 59, .55) 0 8px, transparent 8px 16px) !important; }
/* calculator: diya, rangoli, taare, sone ka total */
html.zdl-ref .rpc-glass-card.zdl-ref-calc:not(#_):not(#_) { overflow: hidden; isolation: isolate; }
html.zdl-ref .zdl-ref-calc .rpc-panel-right:not(#_) { position: relative; }
html.zdl-ref .zdl-ref-calc .zdl-prang:not(#_):not(#_) { left: -90px; right: auto; bottom: -90px; opacity: .1; z-index: 0; }
html.zdl-ref .zdl-ref-calc .zdl-pdiya:not(#_):not(#_) { left: auto; right: 28px; top: 20px; margin-left: 0; }
html.zdl-ref .zdl-ref-calc .zdl-pstars:not(#_) { z-index: 0; }
html.zdl-ref .zdl-ref-calc :is(.rpc-panel-left, .rpc-panel-right) > :not(.zdl-x):not(#_) { position: relative; z-index: 1; }
html.zdl-ref .zdl-ref-calc .rpc-total-amount:not(#_):not(#_),
html.zdl-ref .zdl-ref-calc .rpc-total-amount span:not(#_):not(#_) {
background: linear-gradient(100deg, #E2B65C, #FBE6AE 42%, #F6D27A 62%, #D9A84E); -webkit-background-clip: text; background-clip: text;
color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html.zdl-ref .zdl-ref-calc .rpc-total-amount:not(#_) { filter: drop-shadow(0 4px 18px rgba(232, 160, 60, .35)); }
html.zdl-ref .zdl-ref-calc .rpc-gslider:not(#_)::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(226, 182, 92, .25), 0 0 14px rgba(255, 190, 90, .75) !important; }
html.zdl-ref .zdl-ref-calc .rpc-gslider:not(#_)::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(226, 182, 92, .25), 0 0 14px rgba(255, 190, 90, .75); }
/* gehre kaanch par text select karo to padhne layak rahe */
html.zdl-ref :is(.zdl-ref-calc, .zdl-ref-card, .zdl-ref-hub) ::selection { background: rgba(226, 182, 92, .45); color: #fff; -webkit-text-fill-color: #fff; }
@media (max-width: 767px) {
html.zdl-ref .zdl-ref-calc .zdl-pdiya:not(#_):not(#_) { right: 16px; top: 12px; transform: scale(.85); }
}
/* calc total: background-clip:text parent par hi — andar ka span apna bg le to number gayab hota tha */
html.zdl-ref .zdl-ref-calc .rpc-total-amount span:not(#_):not(#_):not(#_) { background: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }
/* calc total: clip-text andar ke number par nahi chala (Chrome) — thos sona + chamak */
html.zdl-ref .zdl-ref-calc .rpc-total-amount:not(#_):not(#_):not(#_),
html.zdl-ref .zdl-ref-calc .rpc-total-amount span:not(#_):not(#_):not(#_):not(#_) {
background: none !important; -webkit-background-clip: border-box; background-clip: border-box;
color: #F6D27A !important; -webkit-text-fill-color: #F6D27A !important;
}
html.zdl-ref .zdl-ref-calc .rpc-total-amount:not(#_):not(#_):not(#_) { filter: none; text-shadow: 0 0 22px rgba(255, 190, 90, .35), 0 2px 0 rgba(120, 76, 16, .35); }
/* ZFAB-BEGIN ════ FLOATING chat + WhatsApp — iOS liquid glass, Diwali sone ka rim ════
Site (zupi-chat-widget.css) ka 3D gola: safed radial highlight + ::after gloss + gehri
inset/drop shadow. Preview me: rangeen liquid-glass disc (peeche ka page dhundhla jhalakta),
patli safed meniscus, sone ka rim (::after) + chhota sone ka ✦. Live site untouched.
Hatana: ZFAB block delete. */
html.zdl-on body .zcw-launcher:not(#_),
html.zdl-on body .zcw-wa:not(#_) {
border: 0 !important;
-webkit-backdrop-filter: blur(14px) saturate(1.9); backdrop-filter: blur(14px) saturate(1.9);
transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease-out, background-color .2s ease-out !important;
}
html.zdl-on body .zcw-launcher:not(#_) {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.1 3.9L10 5 6.1 6.1 5 10 3.9 6.1 0 5l3.9-1.1z' fill='%23FFE7A8'/%3E%3C/svg%3E") no-repeat 11px 10px / 9px 9px,
rgba(10, 71, 76, .74) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -10px 16px -12px rgba(160, 240, 230, .55),
inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 18px -8px rgba(10, 71, 76, .55) !important;
}
html.zdl-on body .zcw-wa:not(#_) {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.1 3.9L10 5 6.1 6.1 5 10 3.9 6.1 0 5l3.9-1.1z' fill='%23FFF4D2'/%3E%3C/svg%3E") no-repeat 11px 10px / 9px 9px,
rgba(28, 186, 90, .8) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -10px 16px -12px rgba(220, 255, 230, .6),
inset 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 18px -8px rgba(18, 140, 70, .55) !important;
}
html.zdl-on body .zcw-launcher:not(#_):hover {
background-color: rgba(10, 71, 76, .88) !important; transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -10px 16px -12px rgba(160, 240, 230, .6), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 22px -8px rgba(10, 71, 76, .6) !important;
}
html.zdl-on body .zcw-wa:not(#_):hover {
background-color: rgba(28, 186, 90, .92) !important; transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), inset 0 -10px 16px -12px rgba(220, 255, 230, .66), inset 0 0 0 1px rgba(255, 255, 255, .24), 0 10px 22px -8px rgba(18, 140, 70, .6) !important;
}
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):active { transform: scale(.96); }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):focus-visible { outline: 2px solid #E2B65C; outline-offset: 3px; }
/* ::after — site ka 3D gloss hata ke sone ka patla rim */
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_)::after {
content: "" !important; position: absolute; inset: 0; top: 0; left: 0; right: 0; height: auto;
border-radius: 50%; padding: 1.5px; pointer-events: none;
background: linear-gradient(150deg, #FFE7A8 0%, rgba(255, 231, 168, .22) 32%, rgba(201, 151, 59, .12) 62%, #E2B65C 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_) svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .16)); }
html.zdl-on body .zcw-launcher:not(#_)::before { border-color: rgba(226, 182, 92, .85); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.zdl-on body .zcw-launcher:not(#_) { background-color: #0A474C !important; }
html.zdl-on body .zcw-wa:not(#_) { background-color: #1FB45A !important; }
}
/* ZFAB-END */
/* ZBC-BEGIN ════ BLOG COVERS — panel screenshot wale premium cover ═══════
zdl.js blogCovers(). Container units (cqw/cqh) se card / sidebar / article
teeno size par ek hi design; purane browser par px fallback. */
html.zdl-on .zbc-src:not(#_) { visibility: hidden !important; }
html.zdl-on .zbc {
position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none;
container-type: size;
background:
radial-gradient(60% 70% at 88% 18%, rgba(255, 170, 70, .3) 0%, rgba(255, 170, 70, 0) 60%),
radial-gradient(50% 60% at 6% 100%, rgba(30, 150, 140, .45) 0%, rgba(30, 150, 140, 0) 65%),
linear-gradient(135deg, #0D4247 0%, #08292C 55%, #04181A 100%);
}
html.zdl-on .zbc::after {
content: ""; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .38);
}
html.zdl-on .zbc-aura {
position: absolute; right: -10%; top: 10%; width: 70%; height: 90%; border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 210, 122, .32), rgba(255, 210, 122, 0)); filter: blur(10px);
}
html.zdl-on .zbc-txt {
position: absolute; left: 7cqw; top: 0; bottom: 0; width: 43cqw; z-index: 2;
display: flex; flex-direction: column; justify-content: center; gap: 8px; gap: 3cqh;
}
html.zdl-on .zbc-cat:not(#_) {
align-self: flex-start; padding: 3px 8px; padding: .8cqw 2.2cqw; border-radius: 999px;
font-size: 9px; font-size: clamp(8px, 2.5cqw, 13px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
background: linear-gradient(135deg, #FFE7A8, #E2B65C);
}
html.zdl-on .zbc-t:not(#_) {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
font-family: var(--font-heading, inherit); font-size: 17px; font-size: clamp(13px, 5.2cqw, 38px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em;
color: #FFF8EC !important; -webkit-text-fill-color: #FFF8EC !important;
}
html.zdl-on .zbc-brand:not(#_) {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-size: clamp(8px, 2.6cqw, 14px); font-weight: 700; letter-spacing: .04em;
color: rgba(242, 198, 109, .9) !important; -webkit-text-fill-color: rgba(242, 198, 109, .9) !important;
}
html.zdl-on .zbc-brand i { width: 14px; width: 4cqw; max-width: 24px; height: 1.5px; background: linear-gradient(90deg, #E2B65C, rgba(226, 182, 92, 0)); }
html.zdl-on .zbc-shot { position: absolute; right: -14cqw; top: 15cqh; width: 62cqw; z-index: 1; perspective: 900px; }
html.zdl-on .zbc-win {
border-radius: 8px; border-radius: 1.8cqw; overflow: hidden; background: #fff;
transform: rotateY(-18deg) rotateX(6deg) rotateZ(1deg); transform-origin: 0 50%;
box-shadow: 0 0 0 1px rgba(255, 231, 168, .7), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}
html.zdl-on .zbc-bar { display: flex; gap: 4px; gap: 1cqw; align-items: center; height: 10px; height: 3.4cqw; padding: 0 2cqw; background: #F3EEE4; }
html.zdl-on .zbc-bar b { width: 4px; height: 4px; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #E2B65C; }
html.zdl-on .zbc-bar b:first-child { background: #E86A5A; }
html.zdl-on .zbc-bar b:last-child { background: #5BC98E; }
html.zdl-on .zbc-win img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zbc-win { transition: transform .45s cubic-bezier(.22, .8, .24, 1); }
html.zdl-on :is(.blog-item, a, li):hover > * > .zbc .zbc-win,
html.zdl-on :is(.blog-item, a, li):hover > .zbc .zbc-win { transform: rotateY(-10deg) rotateX(3deg) translateY(-4px); }
}
/* chhote sidebar thumbs: sirf screenshot */
html.zdl-on .zbc.zbc-s .zbc-txt { display: none; }
html.zdl-on .zbc.zbc-s .zbc-shot { left: 10%; right: auto; top: 16%; width: 86%; }
html.zdl-on .zbc.zbc-s .zbc-win { transform: none; border-radius: 4px; }
html.zdl-on .zbc.zbc-s::after { inset: 3px; border-radius: 6px; }
/* ZBC-END */
/* FAQ section (zgq-sec: home, pricing, contact) — Aditya: hatao (25 Oct). Wapas: ye block hatao */
html.zdl-on section.zgq-sec:not(#_) { display: none !important; }
html.zdl-on a.zc-ct-chan[href="#faq"]:not(#_) { display: none !important; }
/* ════ FLOATING ORBS — CONCIERGE DOCK (25 Oct, v4 — structure redesign) ════════════
3 baar sirf golon ka rang badla, structure wahi = "basic" hi laga. Ab site ke apne
.zcw-btns dabbe ko ek liquid-glass CAPSULE (dock) banaya: frosted kaanch, safed
meniscus, sone ki hairline rim + neeche halki diye ki roshni. Andar dono buttons
rangeen GEMS (app-icon jaise gloss): bot gehra teal, WhatsApp hara; beech me sunehri
hairline. Hover par naam ki kaanch-pill baayein se nikalti hai. scroll-top dock ki
material wali chhoti goli. HTML nahi badla. Revert: ye block hatao. */
html.zdl-on body .zcw-btns:not(#_):not(#_) {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
padding: 8px; border-radius: 999px; isolation: isolate;
background:
radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(120% 34% at 50% 104%, rgba(255, 200, 112, .4) 0%, rgba(255, 200, 112, 0) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 249, 236, .34) 100%);
-webkit-backdrop-filter: blur(18px) saturate(2) brightness(1.04); backdrop-filter: blur(18px) saturate(2) brightness(1.04);
box-shadow:
inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .55),
inset 0 0 0 .5px rgba(184, 134, 47, .38), inset 0 0 16px rgba(255, 255, 255, .4),
0 1px 2px rgba(74, 52, 16, .08), 0 12px 30px -10px rgba(74, 52, 16, .28), 0 30px 60px -26px rgba(184, 134, 47, .4);
}
/* rim — patli safed-sone ki dhaar (mask se sirf kinara) */
html.zdl-on body .zcw-btns:not(#_):not(#_)::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
background: linear-gradient(165deg, rgba(255, 255, 255, 1) 0%, rgba(240, 206, 130, .75) 38%, rgba(255, 255, 255, .15) 62%, rgba(217, 168, 78, .8) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* gems */
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_) {
--g1: #26A79D; --g2: #0B5E62; --g3: #053A3D; --gs: 10, 71, 76;
width: 48px !important; height: 48px !important; border: 0 !important; border-radius: 50% !important; overflow: visible !important;
color: #fff !important; -webkit-text-fill-color: #fff !important;
background:
radial-gradient(64% 40% at 50% 4%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 100%),
radial-gradient(70% 50% at 50% 108%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(150deg, var(--g1) 0%, var(--g2) 58%, var(--g3) 100%) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .18),
inset 0 -8px 12px -8px rgba(0, 0, 0, .3),
0 1px 2px rgba(var(--gs), .3), 0 6px 14px -6px rgba(var(--gs), .55) !important;
transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease-out, filter .2s ease-out !important;
animation: none !important;
}
html.zdl-on body .zcw-wa:not(#_):not(#_) { --g1: #5FE393; --g2: #1FB257; --g3: #0E7F3E; --gs: 18, 128, 64; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_) svg {
position: relative; z-index: 1; width: 25px !important; height: 25px !important; fill: #fff !important;
filter: drop-shadow(0 1px 1px rgba(0, 30, 20, .35)) !important;
}
html.zdl-on body .zcw-launcher:not(#_):not(#_) .zcw-ic-bot { width: 26px !important; height: 26px !important; }
html.zdl-on body .zcw-launcher:not(#_):not(#_) .zcw-ic-x { width: 18px !important; height: 18px !important; }
/* bot ka purana pulse-ring band (dock ke bahar latakta tha); sunehri hairline gems ke beech */
html.zdl-on body .zcw-launcher:not(#_):not(#_)::before { content: none !important; }
html.zdl-on body .zcw-wa:not(#_):not(#_)::before {
content: "" !important; position: absolute; left: 50%; top: -5.5px; width: 22px; height: 1px; margin-left: -11px; pointer-events: none;
background: linear-gradient(90deg, rgba(201, 151, 59, 0), rgba(201, 151, 59, .75), rgba(201, 151, 59, 0)) !important;
border: 0 !important; animation: none !important; transform: none !important; opacity: 1 !important;
}
/* hover label — gehre teal kaanch ki pill, baayein se (sirf asli mouse par) */
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_)::after {
content: attr(aria-label) !important; position: absolute; right: calc(100% + 18px); top: 50%; left: auto; bottom: auto; inset-inline-start: auto;
width: auto; height: auto; padding: 9px 14px !important; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 2;
font: 600 13px/1 var(--body-font, system-ui, sans-serif); letter-spacing: .01em; color: #FFF3D6; -webkit-text-fill-color: #FFF3D6;
background: linear-gradient(180deg, rgba(14, 76, 80, .9), rgba(5, 42, 46, .92)) !important;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 .5px rgba(226, 182, 92, .45), 0 10px 24px -10px rgba(5, 42, 46, .6) !important;
-webkit-mask: none !important; mask: none !important;
opacity: 0; transform: translate(6px, -50%); transition: opacity .18s ease-out, transform .18s ease-out;
}
@media (hover: hover) and (pointer: fine) {
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):hover::after { opacity: 1; transform: translate(0, -50%); }
}
html.zdl-on body .zcw.is-open .zcw-launcher:not(#_):not(#_)::after { content: none !important; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):hover {
transform: translateY(-1px) scale(1.07); filter: brightness(1.06) saturate(1.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .18), inset 0 -8px 12px -8px rgba(0, 0, 0, .3),
0 2px 4px rgba(var(--gs), .3), 0 10px 22px -8px rgba(var(--gs), .65) !important;
}
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):active { transform: scale(.94); transition-duration: .1s !important; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):focus-visible { outline: 2px solid #C9973B; outline-offset: 3px; }
/* ✦ sunehra sitara — dock ke upar-daayein kone par latka hua */
html.zdl-on body .zcw-btns:not(#_):not(#_)::after {
content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.1 3.9L10 5 6.1 6.1 5 10 3.9 6.1 0 5l3.9-1.1z' fill='%23D9A84E'/%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 0 4px rgba(255, 210, 120, .9));
}
/* notification badge — teal moti, sone ka ghera */
html.zdl-on body .zcw-badge:not(#_):not(#_) {
z-index: 3; top: -4px !important; right: -4px !important; background: linear-gradient(135deg, #1A9089, #0A474C) !important; border: 2px solid #FBE7B4 !important;
box-shadow: 0 2px 6px rgba(10, 71, 76, .45) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* scroll-top — dock ki hi material, chhoti goli, sone ka teer */
html.zdl-on body .scroll-top:not(#_):not(#_) {
width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; isolation: isolate;
background:
radial-gradient(80% 44% at 50% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 249, 236, .38) 100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(2) !important; backdrop-filter: blur(16px) saturate(2) !important;
box-shadow:
inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .5), inset 0 0 0 .5px rgba(184, 134, 47, .4),
0 1px 2px rgba(74, 52, 16, .08), 0 10px 24px -10px rgba(74, 52, 16, .3) !important;
transition: transform .22s cubic-bezier(.3, 1.4, .5, 1) !important;
}
html.zdl-on body .scroll-top:not(#_):not(#_)::before, html.zdl-on body .scroll-top:not(#_):not(#_)::after { content: none !important; }
html.zdl-on body .scroll-top:not(#_):not(#_):not(#_) :is(i, i::before) { color: #A7741F !important; -webkit-text-fill-color: #A7741F !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
html.zdl-on body .scroll-top:not(#_):not(#_):hover { transform: translateY(-2px); }
html.zdl-on body .scroll-top:not(#_):not(#_):active { transform: scale(.94); }
/* phone: blur band (scroll par mehnga) — dock ka kaanch bhara */
@media (max-width: 767px) {
html.zdl-on body .zcw-btns:not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 252, 245, .86); padding: 6px; gap: 8px; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_) { width: 46px !important; height: 46px !important; }
html.zdl-on body .scroll-top:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255, 252, 245, .9) !important; }
}
/* ════ DEMO POPUP — Diwali dark liquid glass (zdl.js demoDiwali) ═══════ */
html.zdl-on #zc-demo-overlay.zdl-demo:not(#_) { background: rgba(3, 24, 29, .62) !important; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
html.zdl-on .zdl-demo #zc-demo-modal:not(#_):not(#_) {
position: relative; overflow: hidden; isolation: isolate; padding-top: 56px !important; border: 0 !important; border-radius: 24px !important;
background-color: rgba(5, 46, 50, .9) !important;
background-image: linear-gradient(180deg, rgba(12, 76, 80, .45) 0%, rgba(3, 26, 29, .55) 100%) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.8) !important; backdrop-filter: blur(22px) saturate(1.8) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 240, 200, .45), inset 0 -1px 0 rgba(255, 255, 255, .1),
inset 1px 0 0 rgba(255, 255, 255, .1), inset -1px 0 0 rgba(255, 255, 255, .06),
inset 0 0 0 1px rgba(255, 231, 168, .28),
inset 0 16px 26px -20px rgba(255, 220, 150, .22), inset 0 -22px 36px -24px rgba(110, 230, 215, .2) !important;
}
html.zdl-on .zdl-demo #zc-demo-modal > :not(.zdl-x):not(#_) { position: relative; z-index: 1; }
html.zdl-on .zdl-dm-toran { position: absolute; left: 24px; right: 24px; top: 0; height: 30px; z-index: 2; pointer-events: none; }
html.zdl-on .zdl-dm-toran svg { width: 100%; height: 100%; display: block; overflow: visible; }
html.zdl-on .zdl-dm-diya { position: absolute; right: 22px; top: 30px; z-index: 2; pointer-events: none; transform: scale(.72); transform-origin: 100% 0; }
html.zdl-on .zdl-demo .zdl-pstars:not(#_) { z-index: 0; }
html.zdl-on .zdl-dm-hd {
margin: 0 0 4px; font: italic 600 26px/1.1 "Cormorant Garamond", Georgia, serif; text-align: center;
color: #F6D27A; -webkit-text-fill-color: #F6D27A;
}
html.zdl-on .zdl-dm-hd i { font-style: normal; font-size: .6em; vertical-align: middle; }
html.zdl-on .zdl-demo .zc-demo-icon:not(#_):not(#_) {
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6DC97 60%, #E2B65C) !important; color: #7A4C10 !important; border: 0 !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(226, 182, 92, .14) !important;
}
html.zdl-on .zdl-demo .zc-demo-icon i:not(#_):not(#_) { color: #7A4C10 !important; -webkit-text-fill-color: #7A4C10 !important; }
html.zdl-on .zdl-demo .zc-demo-title:not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; letter-spacing: -.02em; }
html.zdl-on .zdl-demo :is(.zc-demo-sub, .zc-demo-note):not(#_):not(#_) { color: rgba(247, 238, 221, .72) !important; -webkit-text-fill-color: rgba(247, 238, 221, .72) !important; }
html.zdl-on .zdl-demo .zc-demo-note i:not(#_):not(#_) { color: #E2B65C !important; -webkit-text-fill-color: #E2B65C !important; }
html.zdl-on .zdl-demo .zc-demo-input:not(#_):not(#_) {
background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 231, 168, .28) !important;
color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
transition: border-color .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out !important;
}
html.zdl-on .zdl-demo .zc-demo-input:not(#_):not(#_)::placeholder { color: rgba(247, 238, 221, .45) !important; -webkit-text-fill-color: rgba(247, 238, 221, .45) !important; }
html.zdl-on .zdl-demo .zc-demo-input:not(#_):not(#_):focus { outline: none; border-color: #E2B65C !important; background: rgba(255, 255, 255, .09) !important; box-shadow: 0 0 0 3px rgba(226, 182, 92, .22) !important; }
html.zdl-on .zdl-demo .zc-demo-btn:not(#_):not(#_) {
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; border: 0 !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; font-weight: 800 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 26px -12px rgba(232, 160, 60, .7) !important;
transition: filter .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .zdl-demo .zc-demo-btn:not(#_):not(#_) i { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-on .zdl-demo .zc-demo-btn:not(#_):not(#_):hover { filter: brightness(1.05); }
html.zdl-on .zdl-demo .zc-demo-btn:not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .zdl-demo #zc-demo-close:not(#_):not(#_) {
z-index: 3; color: #F6D27A !important; -webkit-text-fill-color: #F6D27A !important;
background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 231, 168, .3) !important; border-radius: 999px !important;
}
html.zdl-on .zdl-demo #zc-demo-close:not(#_):not(#_):hover { background: rgba(255, 255, 255, .16) !important; }
@media (max-width: 767px) {
html.zdl-on .zdl-demo #zc-demo-modal:not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(6, 46, 50, .98) !important; }
html.zdl-on .zdl-demo .zc-demo-input:not(#_):not(#_) { font-size: 16px !important; }
html.zdl-on .zdl-dm-diya { right: 14px; }
}
/* demo popup: "position:relative" wale niyam ne × button ko beech me la diya tha — wapas kone me; diya baayein */
html.zdl-on .zdl-demo #zc-demo-close:not(#_):not(#_):not(#_) { position: absolute !important; top: 40px !important; right: 16px !important; left: auto !important; width: 34px; height: 34px; display: grid; place-items: center; line-height: 1; font-size: 20px; }
html.zdl-on .zdl-dm-diya:not(#_) { right: auto; left: 18px; transform-origin: 0 0; }
@media (max-width: 767px) { html.zdl-on .zdl-dm-diya:not(#_) { left: 12px; right: auto; } }
/* ZFAB2-BEGIN ════ DOCK — paardarshi iOS liquid glass (25 Oct) ════════════════
Aditya: "transparent type, liquid morphic like iOS". Concierge dock v4 ke gems
(radial safed spot + gehra gradient + inner shadow) 3D lagte the aur capsule
bhara-bhara safed. Ab: capsule = saaf kaanch (peeche ka page dhundhla dikhe),
buttons = rangeen paardarshi kaanch — upar patli meniscus, neeche halka caustic,
koi gola/spot nahi. Hover label, ✦, badge, scroll-top v4 wale hi. 3× :not = v4 se upar.
Hatana: ZFAB2 block delete. */
html.zdl-on body .zcw-btns:not(#_):not(#_):not(#_) {
background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .1) 100%);
-webkit-backdrop-filter: blur(16px) saturate(1.9); backdrop-filter: blur(16px) saturate(1.9);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .3),
inset 0 0 0 .5px rgba(255, 255, 255, .35),
0 1px 2px rgba(40, 30, 10, .06), 0 10px 28px -14px rgba(40, 30, 10, .3);
}
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):not(#_) {
--gl: 10, 71, 76;
background: rgba(var(--gl), .66) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.8) !important; backdrop-filter: blur(8px) saturate(1.8) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .6),
inset 0 -10px 16px -12px rgba(255, 255, 255, .5),
inset 0 0 0 .5px rgba(255, 255, 255, .4),
0 4px 12px -6px rgba(var(--gl), .45) !important;
}
html.zdl-on body .zcw-wa:not(#_):not(#_):not(#_) { --gl: 24, 170, 84; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):not(#_):hover {
background: rgba(var(--gl), .78) !important; filter: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .7),
inset 0 -10px 16px -12px rgba(255, 255, 255, .55),
inset 0 0 0 .5px rgba(255, 255, 255, .45),
0 8px 18px -8px rgba(var(--gl), .55) !important;
}
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):not(#_) svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)) !important; }
/* phone: chhota dock — blur sasta hai, paardarshita rakho */
@media (max-width: 767px) {
html.zdl-on body .zcw-btns:not(#_):not(#_):not(#_) {
-webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8);
background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 100%);
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.zdl-on body .zcw-btns:not(#_):not(#_):not(#_) { background: rgba(255, 252, 245, .9); }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):not(#_) { background: rgb(var(--gl)) !important; }
}
/* ZFAB2-END */
/* ZFAB3 (26 Oct, Aditya: "mobile me perfect karo") — site ki purani notch rule
(custom-redesign.css: .zcw-launcher { bottom: 18px !important }) dock ke andar
position:relative bot ko 18px UPAR dhakel deti thi → bot capsule se bahar latakta.
Dock ke andar offset band; phone par gems thode thos (dark section par dhundhle the). */
html.zdl-on body .zcw-btns .zcw-launcher:not(#_):not(#_):not(#_):not(#_) { bottom: auto !important; top: auto !important; }
@media (max-width: 767px) {
html.zdl-on body .zcw-btns:not(#_):not(#_):not(#_):not(#_) { padding: 6px; gap: 8px; }
html.zdl-on body :is(.zcw-launcher, .zcw-wa):not(#_):not(#_):not(#_):not(#_) { width: 46px !important; height: 46px !important; background: rgba(var(--gl), .88) !important; }
}
/* ZRD-BEGIN ════ REFERRAL DASHBOARD (logged-in) + 3 steps — premium ═══════
referral_program.blade.php ka @auth hissa (.rp-user-panel) aur "Earn in 3
Simple Steps" (.rp-step). Cards gehra teal liquid glass + sone ke number,
link box safed kaanch + sone ka Copy, steps ke icon sone ke sikke. */
html.zdl-on .rp-user-panel :is(.rp-up-ring, .rp-user-panel-scan):not(#_):not(#_):not(#_) { opacity: .25; border-color: rgba(226, 182, 92, .35) !important; }
html.zdl-on .rp-up-greeting:not(#_):not(#_):not(#_) {
color: #8A5A12 !important; -webkit-text-fill-color: #8A5A12 !important; border: 0 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 226, .65)) !important;
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 6px 14px -8px rgba(120, 84, 24, .35) !important;
}
html.zdl-on .rp-up-greeting-dot:not(#_):not(#_):not(#_) { background: #E2B65C !important; box-shadow: 0 0 0 3px rgba(226, 182, 92, .25) !important; }
/* KPI + commission + referrals: gehra teal kaanch */
html.zdl-on :is(.rp-up-stat, .rp-up-comm-panel, .rp-up-refs-panel):not(#_):not(#_):not(#_) {
position: relative; overflow: hidden; border: 0 !important; border-radius: 18px !important;
background:
radial-gradient(90% 60% at 100% 0%, rgba(226, 182, 92, .16), rgba(226, 182, 92, 0) 60%),
linear-gradient(160deg, #0B4044 0%, #062A2D 55%, #031A1C 100%) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 236, 200, .32), inset 0 0 0 1px rgba(226, 182, 92, .3),
0 2px 6px rgba(4, 30, 32, .2), 0 24px 44px -24px rgba(4, 30, 32, .65) !important;
}
html.zdl-on :is(.rp-up-comm-panel, .rp-up-refs-panel):not(#_):not(#_):not(#_)::before { background: linear-gradient(90deg, rgba(226, 182, 92, 0), #F2C66D, rgba(226, 182, 92, 0)) !important; height: 1.5px !important; }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .rp-up-stat:not(#_):not(#_):not(#_) { transition: transform .25s cubic-bezier(.22, .8, .24, 1), box-shadow .25s ease-out; }
html.zdl-on .rp-up-stat:not(#_):not(#_):not(#_):hover { transform: translateY(-4px); }
}
html.zdl-on .rp-up-stat-icon:not(#_):not(#_):not(#_) {
background: linear-gradient(135deg, #FBE6AE, #E2B65C 60%, #C9973B) !important; border: 0 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px -6px rgba(232, 160, 60, .6) !important;
}
html.zdl-on .rp-up-stat-icon:not(#_):not(#_):not(#_) i { color: #3A2408 !important; -webkit-text-fill-color: #3A2408 !important; }
html.zdl-on .rp-up-stat-num:not(#_):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; }
html.zdl-on .rp-up-stat-num.earn:not(#_):not(#_):not(#_) {
background: linear-gradient(180deg, #FFF6DA, #FFD98A 55%, #E8B45A) !important; -webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html.zdl-on .rp-up-stat-label:not(#_):not(#_):not(#_) { color: rgba(247, 238, 221, .72) !important; -webkit-text-fill-color: rgba(247, 238, 221, .72) !important; }
/* commission panel */
html.zdl-on .rp-up-comm-title:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on .rp-up-comm-title:not(#_):not(#_):not(#_) i { color: #F2C66D !important; }
html.zdl-on .rp-up-wave-bar:not(#_):not(#_):not(#_) { background: linear-gradient(180deg, #FBE6AE, #C9973B) !important; }
html.zdl-on .rp-up-comm-row:not(#_):not(#_):not(#_) { border-color: rgba(226, 182, 92, .18) !important; background: transparent !important; }
html.zdl-on .rp-up-comm-pill:not(#_):not(#_):not(#_) {
color: #FBE6AE !important; -webkit-text-fill-color: #FBE6AE !important; background: rgba(226, 182, 92, .12) !important;
box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .45) !important; border: 0 !important;
}
html.zdl-on .rp-up-comm-plan:not(#_):not(#_):not(#_) { color: rgba(247, 238, 221, .82) !important; -webkit-text-fill-color: rgba(247, 238, 221, .82) !important; }
html.zdl-on .rp-up-comm-earn:not(#_):not(#_):not(#_) {
background: linear-gradient(180deg, #FFF6DA, #FFD98A 55%, #E8B45A) !important; -webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; -webkit-text-fill-color: transparent !important;
}
/* recent referrals / khaali */
html.zdl-on .rp-up-refs-panel :is(.rp-up-ref-name, div):not(#_):not(#_):not(#_) { color: rgba(247, 238, 221, .82) !important; }
html.zdl-on .rp-up-refs-panel .rp-up-ref-name:not(#_):not(#_):not(#_) { color: #FFF6E4 !important; }
html.zdl-on .rp-up-refs-panel :is(i.la-link, .las.la-link):not(#_):not(#_):not(#_) { color: #E2B65C !important; }
html.zdl-on .rp-up-ref-item:not(#_):not(#_):not(#_) { border-color: rgba(226, 182, 92, .16) !important; }
html.zdl-on .rp-up-ref-item:not(#_):not(#_):not(#_):hover { background: rgba(255, 255, 255, .05) !important; }
html.zdl-on .rp-up-avatar:not(#_):not(#_):not(#_) { background: linear-gradient(135deg, #FBE6AE, #E2B65C) !important; color: #3A2408 !important; }
html.zdl-on .rp-up-ref-status.ok:not(#_):not(#_):not(#_) { color: #7EE2B0 !important; }
html.zdl-on .rp-up-ref-status.pending:not(#_):not(#_):not(#_) { color: #F2C66D !important; }
html.zdl-on .rp-up-ref-date:not(#_):not(#_):not(#_) { color: rgba(247, 238, 221, .55) !important; }
/* link box + share */
html.zdl-on .rp-up-link-label:not(#_):not(#_):not(#_) { color: #8A5A12 !important; -webkit-text-fill-color: #8A5A12 !important; }
html.zdl-on .rp-up-link-box:not(#_):not(#_):not(#_) {
border: 0 !important; border-radius: 14px !important; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 250, 238, .8)) !important;
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .35), 0 10px 24px -14px rgba(120, 84, 24, .45) !important;
}
html.zdl-on .rp-up-link-inp:not(#_):not(#_):not(#_) { background: transparent !important; border: 0 !important; color: #10262A !important; font-size: 16px !important; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_) {
min-height: 48px; border: 0 !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; font-weight: 800 !important;
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9) !important; transition: filter .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_) i { color: #2A1708 !important; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):hover { filter: brightness(1.05); }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 2px; }
html.zdl-on .rp-up-sbtn:not(#_):not(#_):not(#_) {
min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 0 !important; border-radius: 999px !important; padding: 0 16px !important;
color: #10262A !important; -webkit-text-fill-color: #10262A !important; font-weight: 700 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 250, 238, .7)) !important;
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .28), 0 6px 14px -10px rgba(120, 84, 24, .4) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out !important;
}
html.zdl-on .rp-up-sbtn:not(#_):not(#_):not(#_):hover { transform: translateY(-2px); box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .5), 0 10px 20px -10px rgba(120, 84, 24, .5) !important; }
html.zdl-on .rp-up-sbtn:not(#_):not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .rp-up-sbtn-wa:not(#_):not(#_):not(#_) i { color: #1DA851 !important; }
html.zdl-on .rp-up-sbtn-tg:not(#_):not(#_):not(#_) i { color: #229ED9 !important; }
html.zdl-on .rp-up-sbtn-li:not(#_):not(#_):not(#_) i { color: #0A66C2 !important; }
html.zdl-on .rp-up-sbtn-db:not(#_):not(#_):not(#_) { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; background: linear-gradient(100deg, #E8BE63, #FBE6AE 50%, #E2B65C) !important; }
html.zdl-on .rp-up-sbtn-db:not(#_):not(#_):not(#_) i { color: #2A1708 !important; }
/* "Earn in 3 Simple Steps" */
html.zdl-on .rp-step:not(#_):not(#_):not(#_) {
border: 0 !important; border-radius: 20px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 250, 238, .62)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
box-shadow: inset 1.5px 1.5px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 2px 6px rgba(120, 84, 24, .06), 0 24px 44px -26px rgba(120, 84, 24, .5) !important;
}
html.zdl-on .rp-step-icon-box:not(#_):not(#_):not(#_) {
border: 0 !important;
background: radial-gradient(90% 70% at 30% 20%, rgba(255, 220, 150, .22), rgba(255, 220, 150, 0) 60%), linear-gradient(160deg, #0B4044, #031A1C) !important;
box-shadow: inset 0 1.5px 0 rgba(255, 236, 200, .35), inset 0 0 0 1px rgba(226, 182, 92, .45), 0 14px 28px -14px rgba(4, 30, 32, .6) !important;
}
html.zdl-on .rp-step-svg :is(path, circle):not(#_):not(#_) { stroke: #F2C66D; }
html.zdl-on .rp-step-svg circle[fill="#0F2E2B"]:not(#_), html.zdl-on .rp-step-svg [fill="#0F2E2B"]:not(#_) { fill: #F2C66D; }
html.zdl-on .rp-step-badge:not(#_):not(#_):not(#_) { color: #8A5A12 !important; -webkit-text-fill-color: #8A5A12 !important; background: #FFF4DA !important; box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .35) !important; border: 0 !important; }
html.zdl-on .rp-step-badge-dot:not(#_):not(#_):not(#_) { background: #E2B65C !important; }
html.zdl-on .rp-step-title:not(#_):not(#_):not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .rp-step-tag:not(#_):not(#_):not(#_) { color: #8A5A12 !important; -webkit-text-fill-color: #8A5A12 !important; }
html.zdl-on .rp-steps-line:not(#_):not(#_):not(#_) { background: linear-gradient(90deg, rgba(226, 182, 92, 0), #E2B65C 15%, #E2B65C 85%, rgba(226, 182, 92, 0)) !important; opacity: .6; }
html.zdl-on .rp-arrow-col :is(i, svg, path):not(#_):not(#_) { color: #C9973B !important; stroke: #C9973B; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_) :is(span, i) { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; opacity: 1 !important; }
html.zdl-on .rp-up-title span:not(#_):not(#_):not(#_) {
background: linear-gradient(100deg, #7A4A12 0%, #B8862F 40%, #E2B65C 70%, #9C6A22 100%) !important; -webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important; -webkit-text-fill-color: transparent !important;
}
/* v3 (Aditya: "green zyada", phir "golden accha nahi") — KPI cards + step icons saaf SAFED, brand teal
icon; sona sirf patli rekha. Gehra sirf commission panel. */
html.zdl-on .rp-up-stat:not(#_):not(#_):not(#_):not(#_) {
background: #FFFFFF !important; -webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 0 0 1px rgba(16, 38, 42, .07), 0 1px 2px rgba(16, 38, 42, .05), 0 12px 28px -16px rgba(16, 38, 42, .22) !important;
}
html.zdl-on .rp-up-stat:not(#_):not(#_):not(#_):not(#_)::after {
content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
background: linear-gradient(90deg, rgba(201, 151, 59, 0), #D9A84E, rgba(201, 151, 59, 0));
}
html.zdl-on .rp-up-stat-icon:not(#_):not(#_):not(#_):not(#_) { background: #E8F3F2 !important; box-shadow: none !important; }
html.zdl-on .rp-up-stat-icon:not(#_):not(#_):not(#_):not(#_) i { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
html.zdl-on .rp-up-stat-num:not(#_):not(#_):not(#_):not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .rp-up-stat-num.earn:not(#_):not(#_):not(#_):not(#_) { background: none !important; color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
html.zdl-on .rp-up-stat-label:not(#_):not(#_):not(#_):not(#_) { color: #66737A !important; -webkit-text-fill-color: #66737A !important; }
/* link + share: safed, sone ki jagah brand teal button */
html.zdl-on .rp-up-link-box:not(#_):not(#_):not(#_):not(#_) { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(16, 38, 42, .1), 0 8px 20px -14px rgba(16, 38, 42, .25) !important; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):not(#_) { background: #0A474C !important; box-shadow: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):not(#_) :is(span, i) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):not(#_):hover { background: #0C565C !important; filter: none; }
html.zdl-on .rp-up-copy-btn:not(#_):not(#_):not(#_):not(#_):focus-visible { outline: 2px solid #D9A84E; outline-offset: 2px; }
html.zdl-on .rp-up-sbtn:not(#_):not(#_):not(#_):not(#_) { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(16, 38, 42, .1), 0 4px 12px -8px rgba(16, 38, 42, .25) !important; }
html.zdl-on .rp-up-sbtn:not(#_):not(#_):not(#_):not(#_):hover { box-shadow: 0 0 0 1px rgba(10, 71, 76, .3), 0 8px 18px -10px rgba(16, 38, 42, .3) !important; }
html.zdl-on .rp-up-sbtn-db:not(#_):not(#_):not(#_):not(#_) { background: #10262A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html.zdl-on .rp-up-sbtn-db:not(#_):not(#_):not(#_):not(#_) i { color: #FFFFFF !important; }
html.zdl-on .rp-up-link-label:not(#_):not(#_):not(#_):not(#_), html.zdl-on .rp-up-greeting:not(#_):not(#_):not(#_):not(#_) { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
html.zdl-on .rp-up-greeting:not(#_):not(#_):not(#_):not(#_) { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(16, 38, 42, .1) !important; }
/* commission panel ke andar "No referrals" — dabba me dabba nahi */
html.zdl-on .rp-up-comm-panel .rp-up-refs-panel:not(#_):not(#_):not(#_) {
background: rgba(255, 255, 255, .03) !important; box-shadow: none !important; border: 1px dashed rgba(226, 182, 92, .4) !important; margin-top: 8px;
}
html.zdl-on .rp-up-comm-panel .rp-up-refs-panel:not(#_):not(#_):not(#_)::before { display: none !important; }
/* steps: safed card, icon halka teal tile + teal lakeer */
html.zdl-on .rp-step:not(#_):not(#_):not(#_):not(#_) {
background: #FFFFFF !important; -webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 0 0 1px rgba(16, 38, 42, .07), 0 1px 2px rgba(16, 38, 42, .05), 0 18px 36px -22px rgba(16, 38, 42, .25) !important;
}
html.zdl-on .rp-step-icon-box:not(#_):not(#_):not(#_):not(#_) { background: #E8F3F2 !important; box-shadow: inset 0 0 0 1px rgba(10, 71, 76, .12) !important; }
html.zdl-on #how-it-works .rp-step-icon-box :is(path, circle, line, polyline):not(#_):not(#_) { stroke: #0A474C !important; }
html.zdl-on .rp-step-svg [fill="#0F2E2B"]:not(#_):not(#_) { fill: #0A474C; }
html.zdl-on .rp-step-badge:not(#_):not(#_):not(#_):not(#_) { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; background: #E8F3F2 !important; box-shadow: none !important; }
html.zdl-on .rp-step-badge-dot:not(#_):not(#_):not(#_):not(#_) { background: #D9A84E !important; }
html.zdl-on .rp-step-tag:not(#_):not(#_):not(#_):not(#_) { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
/* diye (zdl.js refDiyas) */
html.zdl-on .zrd-row { position: relative; display: flex; align-items: flex-end; gap: 24px; margin: 24px 0 32px; padding: 0 8px 12px; }
html.zdl-on .zrd-row::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; pointer-events: none;
background:
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .75) 15%, #E2B65C 50%, rgba(226, 182, 92, .75) 85%, rgba(226, 182, 92, 0)) 0 1px / 100% 1px no-repeat,
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .75) 15%, #E2B65C 50%, rgba(226, 182, 92, .75) 85%, rgba(226, 182, 92, 0)) 0 12px / 100% 1px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M13 2.5l4 4.5-4 4.5-4-4.5z' fill='%23FFFFFF' stroke='%23C99436' stroke-width='.8'/%3E%3Ccircle cx='0' cy='7' r='1.4' fill='%23E2557F'/%3E%3Ccircle cx='26' cy='7' r='1.4' fill='%23E2557F'/%3E%3C/svg%3E") center / 26px 14px repeat-x;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
html.zdl-on :is(.zrd-row, .zrd-trio) .zdl-dslot .zdl-diya { margin-bottom: -14px; }
html.zdl-on :is(.zrd-row, .zrd-trio) .zdl-dslot .zdl-plate { width: 88px; }
html.zdl-on .zrd-trio { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 0 auto 16px; }
html.zdl-on .zrd-trio .zdl-dslot:not(.zrd-mid) { transform: scale(.78); transform-origin: 50% 100%; }
@media (max-width: 767px) {
html.zdl-on .zrd-row { gap: 8px; justify-content: center; }
html.zdl-on :is(.zrd-row, .zrd-trio) .zdl-dslot .zdl-plate { width: 72px; }
}
/* ZRD-END */
/* 26 Oct: (1) chat launcher — upar ke rule ka svg{position:relative} chhupe × icon ko bhi
flow me le aata tha → robot 9px baayein. × wapas absolute (flex centre par baithta hai).
(2) referral plan cards (zdh-rp maroon): saaf colour code — naam/daam cream, YOU EARN sone ka,
features halka cream, tick sona. Sweep ab in cards ko chhuta nahi (zdl.js SKIP). */
html.zdl-on body .zcw-launcher:not(#_):not(#_):not(#_) .zcw-ic-x { position: absolute !important; }
html.zdl-on #commissions .rp-plan.zdh-rp :is(.rp-plan-name, .rp-plan-price):not(#_):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; }
html.zdl-on #commissions .rp-plan.zdh-rp :is(.rp-plan-price span, .rp-plan-price-sub):not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .62) !important; -webkit-text-fill-color: rgba(255, 241, 226, .62) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-earn-box:not(#_):not(#_):not(#_) { background: linear-gradient(160deg, rgba(255, 214, 140, .14), rgba(255, 214, 140, .04)) !important; border: 1px dashed rgba(242, 198, 109, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-earn-tag:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-earn-amount:not(#_):not(#_):not(#_) { background: none !important; color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-earn-sub:not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .7) !important; -webkit-text-fill-color: rgba(255, 241, 226, .7) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-plan-features li:not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .86) !important; -webkit-text-fill-color: rgba(255, 241, 226, .86) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp :is(.rp-feat-check, .rp-feat-check i):not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; background-color: rgba(242, 198, 109, .14) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp :is(.rp-plan-icon-ring i):not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-plan-cta:not(#_):not(#_):not(#_) { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(242, 198, 109, .55) !important; color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-plan-cta:not(#_):not(#_):not(#_):hover { background: rgba(255, 255, 255, .12) !important; }
html.zdl-on #commissions .rp-plan.zdh-rp.featured .rp-plan-cta:not(#_):not(#_):not(#_) { background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; border: 0 !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-plan-badge:not(#_):not(#_):not(#_) { color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; background: linear-gradient(100deg, #FFD27A, #F2C66D 50%, #E2B65C) !important; border: 0 !important; }
html.zdl-on #commissions .rp-plan.zdh-rp .rp-plan-badge i:not(#_):not(#_):not(#_) { color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; }
/* ZIN-BEGIN ════ INNER PAGES premium (zdl.js innerPremium) · ?zin=off · /root/zdl-zin-revert.sh ════
Hero = garam aurora + do taraf ghoomte mandala + do jalte diye + sone ki rekha.
Card sections = glass stage (blobs) + liquid-glass cards, hover par sone ki dhaar. */
html.zdl-on .zin-hero:not(#_):not(#_) {
overflow: hidden; isolation: isolate; padding-bottom: clamp(88px, 9vw, 128px) !important;
background:
radial-gradient(60% 70% at 50% -10%, rgba(255, 214, 150, .6), rgba(255, 214, 150, 0) 70%),
radial-gradient(36% 56% at 6% 40%, rgba(255, 158, 112, .26), rgba(255, 158, 112, 0) 70%),
radial-gradient(36% 56% at 94% 44%, rgba(22, 133, 127, .16), rgba(22, 133, 127, 0) 70%),
linear-gradient(180deg, #FFF9EE 0%, #FFF2DC 100%) !important;
}
html.zdl-on .zin-hdeco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html.zdl-on .zin-mand { position: absolute; top: 50%; width: clamp(280px, 30vw, 460px); aspect-ratio: 1; margin-top: calc(clamp(280px, 30vw, 460px) / -2); color: rgba(184, 134, 47, .2); }
html.zdl-on .zin-mand svg { display: block; width: 100%; height: 100%; }
html.zdl-on .zin-mand.l { left: calc(clamp(280px, 30vw, 460px) / -2.6); }
html.zdl-on .zin-mand.r { right: calc(clamp(280px, 30vw, 460px) / -2.6); }
html.zdl-on .zin-hdiya { position: absolute; bottom: 36px; transform: scale(1.1); transform-origin: 50% 100%; }
html.zdl-on .zin-hdiya.l { left: 9%; }
html.zdl-on .zin-hdiya.r { right: 9%; }
html.zdl-on .zin-line { position: absolute; left: 50%; bottom: 40px; width: min(520px, 56%); height: 1px; transform: translateX(-50%);
background: linear-gradient(90deg, rgba(184, 134, 47, 0), rgba(184, 134, 47, .65), rgba(184, 134, 47, 0)); }
html.zdl-on .zin-line::after { content: ""; position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5.5px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.1 3.9L10 5 6.1 6.1 5 10 3.9 6.1 0 5l3.9-1.1z' fill='%23C9973B'/%3E%3C/svg%3E") center / contain no-repeat; }
/* hero ka eyebrow tag — kaanch ki pill, sone ka bindu */
html.zdl-on .zin-hero .custom-section-tag:not(#_):not(#_) {
background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
border: 0 !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .38), 0 6px 16px -10px rgba(120, 84, 24, .45) !important;
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .zin-mand svg { animation: zin-spin 140s linear infinite; }
html.zdl-on .zin-mand.r svg { animation-direction: reverse; }
}
@keyframes zin-spin { to { transform: rotate(360deg); } }
/* cards — liquid glass, upar se sone ki dhaar hover par */
html.zdl-on .zin-stage .zin-card:not(#_):not(#_) {
background-color: rgba(255, 255, 255, .5) !important;
background-image: linear-gradient(160deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .26) 100%) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
border: 0 !important; border-radius: 20px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5),
0 0 0 .5px rgba(184, 134, 47, .24), 0 2px 6px -2px rgba(120, 84, 24, .12), 0 18px 40px -24px rgba(120, 84, 24, .4) !important;
transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s ease-out !important;
}
html.zdl-on .zin-stage .zin-card:not(#_):not(#_):hover {
transform: translateY(-4px);
box-shadow:
inset 0 2px 0 rgba(226, 182, 92, .85), inset 0 0 0 1px rgba(255, 255, 255, .6),
0 0 0 .5px rgba(184, 134, 47, .4), 0 4px 10px -4px rgba(120, 84, 24, .16), 0 26px 50px -24px rgba(120, 84, 24, .5) !important;
}
/* card ka icon tile — sone ka kaanch squircle */
html.zdl-on .zin-card > [class*="icon"]:first-child:not(#_):not(#_) {
background: linear-gradient(145deg, rgba(255, 238, 196, .95), rgba(226, 182, 92, .38)) !important;
border: 0 !important; border-radius: 14px !important;
box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(184, 134, 47, .18), 0 0 0 1px rgba(201, 151, 59, .3), 0 6px 14px -8px rgba(184, 134, 47, .55) !important;
}
@media (max-width: 767px) {
html.zdl-on .zin-hdiya { bottom: 24px; transform: scale(.8); }
html.zdl-on .zin-hdiya.l { left: 4%; }
html.zdl-on .zin-hdiya.r { right: 4%; }
html.zdl-on .zin-mand { opacity: .7; }
html.zdl-on .zin-stage .zin-card:not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .86) !important; }
}
@media (prefers-reduced-motion: reduce) { html.zdl-on .zin-stage .zin-card:not(#_):not(#_):hover { transform: none; } }
/* ZIN-END */
/* ════ HELP CENTER — premium (zdl.js helpCenter) ═════════════════════════ */
html.zdl-on .hc-hero { padding: 104px 0 64px !important; }
html.zdl-on .hc-hero h1 { font-size: clamp(36px, 5vw, 60px) !important; letter-spacing: -.025em; line-height: 1.08; margin-bottom: 16px !important; }
html.zdl-on .hc-hero h1 .zhc-gold {
font: italic 600 1.1em/1 "Cormorant Garamond", Georgia, serif; letter-spacing: -.01em; padding: 0 .06em;
background: linear-gradient(100deg, #6E4A12 0%, #A8741F 24%, #D6A548 42%, #A06A1C 62%, #6E4A12 84%, #B07C26 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html.zdl-on .hc-hero .container > p { font-size: 17px !important; opacity: 1 !important; color: #4A5A58 !important; }
/* search — bada glass pill */
html.zdl-on .hc-hero .hc-search:not(#_) {
max-width: 640px; margin: 32px auto 0; padding: 8px; gap: 8px; border-radius: 999px; overflow: visible; align-items: center;
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 252, 244, .82)) !important;
border: 1px solid rgba(201, 151, 59, .28);
box-shadow: 0 1px 2px rgba(74, 44, 10, .06), 0 12px 32px rgba(120, 74, 20, .12), inset 0 1px 0 #fff !important;
transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
html.zdl-on .hc-hero .hc-search:focus-within { border-color: rgba(201, 151, 59, .7); box-shadow: 0 0 0 4px rgba(232, 190, 90, .22), 0 12px 32px rgba(120, 74, 20, .14) !important; }
html.zdl-on .hc-hero .hc-search input { background: transparent !important; padding: 16px 24px !important; font-size: 17px !important; color: #0F2E2B !important; min-width: 0; }
html.zdl-on .hc-hero .hc-search input::placeholder { color: #8A8F86; }
html.zdl-on .hc-hero .hc-search button { width: 56px; height: 56px; padding: 0 !important; border-radius: 50% !important; flex: none; transition: transform .15s ease-out; }
html.zdl-on .hc-hero .hc-search button:active { transform: scale(.96); }
html.zdl-on .zhc-pop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 24px auto 0; max-width: 680px; }
html.zdl-on .zhc-pop span { font-size: 13px; font-weight: 600; color: #6B6458; margin-right: 4px; }
html.zdl-on .zhc-pop button {
min-height: 36px; padding: 0 16px; border-radius: 999px; font: 600 13px/1 inherit; color: #0A474C; cursor: pointer;
background: rgba(255, 255, 255, .72); border: 1px solid rgba(10, 71, 76, .14);
box-shadow: 0 1px 2px rgba(10, 71, 76, .05); transition: background .18s ease-out, border-color .18s ease-out, transform .15s ease-out;
}
html.zdl-on .zhc-pop button:hover { background: #fff; border-color: rgba(201, 151, 59, .6); }
html.zdl-on .zhc-pop button:active { transform: scale(.97); }
html.zdl-on .zhc-pop button:focus-visible { outline: 2px solid #C9973B; outline-offset: 2px; }
html.zdl-on .zhc-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 24px; font-size: 13px; color: #5B6563; }
html.zdl-on .zhc-stats b { color: #0A474C; font-weight: 700; }
html.zdl-on .zhc-stats i { width: 4px; height: 4px; border-radius: 50%; background: #C9973B; }
/* SVG tiles — har topic ka apna rang */
html.zdl-on .zhc-tile {
display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; border-radius: 14px;
box-shadow: 0 1px 2px rgba(20, 10, 0, .12), 0 6px 16px var(--zt-s, rgba(10, 71, 76, .22)), inset 0 1px 0 rgba(255, 255, 255, .35);
background: linear-gradient(145deg, var(--zt-a), var(--zt-b));
}
html.zdl-on .zhc-tile.zhc-tile:not(#_):not(#_):not(#_) { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(145deg, var(--zt-a), var(--zt-b)) !important; border: 0 !important; }
html.zdl-on .zhc-tile svg { width: 55%; height: 55%; }
html.zdl-on .t-rocket { --zt-a: #F9B04A; --zt-b: #E2552B; --zt-s: rgba(226, 85, 43, .28); }
html.zdl-on .t-chat { --zt-a: #34D17E; --zt-b: #0E7F5C; --zt-s: rgba(14, 127, 92, .26); }
html.zdl-on .t-bot { --zt-a: #23A3A9; --zt-b: #0A474C; --zt-s: rgba(10, 71, 76, .28); }
html.zdl-on .t-megaphone { --zt-a: #F06AAE; --zt-b: #B5245F; --zt-s: rgba(181, 36, 95, .26); }
html.zdl-on .t-card { --zt-a: #F0CD72; --zt-b: #B8862F; --zt-s: rgba(184, 134, 47, .3); }
html.zdl-on .t-wrench { --zt-a: #7C93FB; --zt-b: #3446C8; --zt-s: rgba(52, 70, 200, .26); }
html.zdl-on .t-doc { --zt-a: #5E8F8C; --zt-b: #2F5F5C; }
/* categories — 3×2, text-left glass card */
html.zdl-on .hc-cats.zhc-on { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; margin-bottom: 64px !important; }
html.zdl-on .zhc-on .hc-cat:not(#_) {
position: relative; text-align: left !important; padding: 32px !important; border-radius: 24px !important; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 251, 242, .86)) !important;
border: 1px solid rgba(201, 151, 59, .2) !important;
box-shadow: 0 1px 2px rgba(74, 44, 10, .05), 0 8px 24px rgba(120, 74, 20, .08), inset 0 1px 0 #fff !important;
transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out !important;
}
html.zdl-on .zhc-on .hc-cat::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, #E8BE5A, transparent); opacity: .7; }
html.zdl-on .zhc-on .hc-cat:hover { transform: translateY(-4px) !important; border-color: rgba(201, 151, 59, .55) !important; box-shadow: 0 2px 4px rgba(74, 44, 10, .06), 0 20px 40px rgba(120, 74, 20, .14), inset 0 1px 0 #fff !important; }
html.zdl-on .zhc-on .hc-cat:active { transform: translateY(-1px) scale(.99) !important; }
html.zdl-on .zhc-on .hc-cat:focus-visible { outline: 2px solid #C9973B; outline-offset: 3px; }
html.zdl-on .zhc-on .hc-cat .hc-cat-icon { width: 56px !important; height: 56px !important; margin: 0 0 24px !important; font-size: 0 !important; }
html.zdl-on .zhc-on .hc-cat h3 { font-size: 20px !important; color: #0F2E2B !important; margin-bottom: 8px !important; letter-spacing: -.01em; }
html.zdl-on .zhc-on .hc-cat p { font-size: 14px !important; line-height: 1.55; color: #5B6563 !important; min-height: 44px; }
html.zdl-on .zhc-cat-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #0A474C; }
html.zdl-on .zhc-cat-go svg { width: 16px; height: 16px; transition: transform .2s ease-out; }
html.zdl-on .hc-cat:hover .zhc-cat-go svg { transform: translateX(4px); }
/* articles — har topic ek glass panel */
html.zdl-on #articles-container .zdl-orn { display: none !important; }
html.zdl-on .hc-articles-grid { gap: 24px !important; align-items: start; }
html.zdl-on .hc-section:not(#_) {
padding: 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 252, 245, .8));
border: 1px solid rgba(10, 71, 76, .08); box-shadow: 0 1px 2px rgba(10, 40, 40, .04), 0 8px 24px rgba(10, 40, 40, .06);
}
html.zdl-on .hc-section h2 { display: flex; align-items: center; gap: 16px; font-size: 20px !important; color: #0F2E2B !important; margin: 0 0 8px !important; padding: 0 0 16px !important; border-bottom: 1px solid rgba(201, 151, 59, .22) !important; }
html.zdl-on .hc-section h2 .zhc-tile { width: 40px; height: 40px; border-radius: 12px; }
html.zdl-on .hc-section h2 small { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #8A5F1A; background: rgba(232, 190, 90, .16); }
html.zdl-on .hc-article:not(#_) {
align-items: center !important; gap: 16px !important; margin: 0 -12px; padding: 12px !important; border-radius: 14px; border-bottom: 0 !important;
transition: background .18s ease-out;
}
html.zdl-on .hc-article + .hc-article { box-shadow: 0 -1px 0 rgba(10, 71, 76, .06); }
html.zdl-on .hc-article:hover { background: rgba(232, 190, 90, .1); }
html.zdl-on .hc-article:hover + .hc-article { box-shadow: none; }
html.zdl-on .hc-article:focus-visible { outline: 2px solid #C9973B; outline-offset: 0; }
html.zdl-on .hc-article > div:nth-child(2) { flex: 1; min-width: 0; }
html.zdl-on .hc-article-icon:not(#_) { width: 40px !important; height: 40px !important; border-radius: 12px !important; color: #0A474C; background: rgba(10, 71, 76, .06) !important; }
html.zdl-on .hc-article-icon svg { width: 20px; height: 20px; }
html.zdl-on .hc-article-title { font-size: 15px !important; color: #0F2E2B !important; margin-bottom: 4px !important; }
html.zdl-on .hc-article:hover .hc-article-title { text-decoration: none !important; color: #0A474C !important; }
html.zdl-on .hc-article-meta { font-size: 12px !important; color: #7A827F !important; }
html.zdl-on .zhc-lv { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
html.zdl-on .lv-beginner { color: #0E7F5C; background: rgba(52, 209, 126, .14); }
html.zdl-on .lv-intermediate { color: #9A5B0F; background: rgba(249, 176, 74, .18); }
html.zdl-on .lv-advanced { color: #B5245F; background: rgba(240, 106, 174, .14); }
html.zdl-on .zhc-chev { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #B8862F; transition: transform .2s ease-out, background .2s ease-out; }
html.zdl-on .zhc-chev svg { width: 16px; height: 16px; }
html.zdl-on .hc-article:hover .zhc-chev { transform: translateX(4px); background: rgba(232, 190, 90, .2); }
/* "Still need help?" — premium glass panel, WhatsApp sabse aage */
html.zdl-on .hc-contact:not(#_) {
position: relative; overflow: hidden; margin-top: 64px !important; padding: 56px 32px !important; border-radius: 28px !important;
background: radial-gradient(60% 120% at 50% 0%, rgba(232, 190, 90, .16), rgba(232, 190, 90, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 250, 238, .88)) !important;
border: 1px solid rgba(201, 151, 59, .3) !important;
box-shadow: 0 1px 2px rgba(74, 44, 10, .05), 0 16px 40px rgba(120, 74, 20, .1), inset 0 1px 0 #fff !important;
}
html.zdl-on .hc-contact::before { content: ""; position: absolute; left: 50%; top: 0; width: 160px; height: 2px; margin-left: -80px; background: linear-gradient(90deg, transparent, #E8BE5A, transparent); }
html.zdl-on .hc-contact h3 { font-size: clamp(24px, 3vw, 32px) !important; color: #0F2E2B !important; letter-spacing: -.02em; margin-bottom: 8px !important; }
html.zdl-on .hc-contact p { font-size: 16px !important; color: #5B6563 !important; margin-bottom: 32px !important; }
html.zdl-on .hc-contact .hc-contact-btns { gap: 16px !important; }
html.zdl-on .hc-contact .hc-contact-btn:not(#_) {
min-height: 52px; padding: 0 24px !important; border-radius: 999px !important; font-size: 15px !important; gap: 8px !important;
transition: transform .15s ease-out, box-shadow .2s ease-out, filter .2s ease-out;
}
html.zdl-on .hc-contact .hc-btn-wa:not(#_) { background: linear-gradient(145deg, #34D17E, #0E7F5C) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(14, 127, 92, .2), 0 8px 20px rgba(14, 127, 92, .28) !important; }
html.zdl-on .hc-contact .hc-btn-email:not(#_) { background: linear-gradient(145deg, #1A6E73, #0A474C) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(10, 71, 76, .2), 0 8px 20px rgba(10, 71, 76, .22) !important; }
html.zdl-on .hc-contact .hc-btn-ticket:not(#_) { background: rgba(255, 255, 255, .9) !important; color: #0A474C !important; border: 1px solid rgba(10, 71, 76, .2) !important; }
html.zdl-on .hc-contact .hc-contact-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
html.zdl-on .hc-contact .hc-contact-btn:active { transform: scale(.98); }
html.zdl-on .hc-contact .hc-contact-btn:focus-visible { outline: 2px solid #C9973B; outline-offset: 3px; }
/* khaali search */
html.zdl-on .zhc-empty:not([hidden]) {
display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; border-radius: 24px; text-align: center;
background: rgba(255, 255, 255, .8); border: 1px dashed rgba(201, 151, 59, .45);
}
html.zdl-on .zhc-empty b { font-size: 20px; color: #0F2E2B; }
html.zdl-on .zhc-empty span { color: #5B6563; }
html.zdl-on .zhc-empty a { margin-top: 8px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 24px; border-radius: 999px; font-weight: 700; color: #fff; background: linear-gradient(145deg, #34D17E, #0E7F5C); text-decoration: none; }
@media (max-width: 991px) { html.zdl-on .hc-cats.zhc-on { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (max-width: 575px) {
html.zdl-on .hc-hero { padding: 72px 0 48px !important; }
html.zdl-on .hc-hero .hc-search input { font-size: 16px !important; padding: 12px 16px !important; }
html.zdl-on .hc-hero .hc-search button { width: 48px; height: 48px; }
html.zdl-on .zhc-on .hc-cat:not(#_) { padding: 20px !important; border-radius: 20px !important; }
html.zdl-on .zhc-on .hc-cat .hc-cat-icon { width: 44px !important; height: 44px !important; margin-bottom: 16px !important; }
html.zdl-on .zhc-on .hc-cat h3 { font-size: 16px !important; }
html.zdl-on .zhc-on .hc-cat p { font-size: 13px !important; min-height: 0; }
html.zdl-on .hc-section:not(#_) { padding: 16px; border-radius: 20px; }
html.zdl-on .zhc-stats i { display: none; }
}
/* sweep inline !important rang lagata hai — button text hamesha padhne layak */
html.zdl-on .hc-contact :is(.hc-btn-wa, .hc-btn-email):not(#_):not(#_):not(#_), html.zdl-on .hc-contact :is(.hc-btn-wa, .hc-btn-email):not(#_):not(#_):not(#_) * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.zdl-on .hc-contact .hc-btn-ticket:not(#_):not(#_):not(#_), html.zdl-on .hc-contact .hc-btn-ticket:not(#_):not(#_):not(#_) * { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
@media (prefers-reduced-motion: reduce) { html.zdl-on .zhc-on .hc-cat:hover { transform: none !important; } }
/* ════ REFER & EARN plans — DYNAMIC (zdl.js refDynamic, 26 Oct) ═════════
Reveal = individual `translate`/`scale` (tilt `transform` se alag, dono saath chalte).
Sab compositor: opacity/transform. Reduce-motion: sirf fade + ginti, jhukaav nahi. */
html.zdl-on #commissions .rp-plan.zdl-dyn:not(#_) {
position: relative; isolation: isolate;
transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform .35s cubic-bezier(.2, .8, .2, 1), translate .7s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.2, .8, .2, 1), opacity .6s ease-out !important;
}
html.zdl-on #commissions .rp-plan.zdl-dyn.zdl-dyn-pre:not(#_) { opacity: 0; translate: 0 40px; scale: .96; }
html.zdl-on #commissions .rp-plan.zdl-dyn.zdl-dyn-in:not(#_) { opacity: 1; translate: 0 0; scale: 1; }
html.zdl-on #commissions .rp-plan.zdl-dyn.zdl-dyn-hot:not(#_) { translate: 0 -6px; transition: transform .12s ease-out, translate .3s cubic-bezier(.2, .8, .2, 1), scale .3s ease-out, opacity .3s ease-out !important; }
html.zdl-on #commissions .rp-plan.zdl-dyn:not(#_):active { scale: .99; }
/* cursor ke peeche sunehri roshni (content ke neeche) */
html.zdl-on .zdl-dyn-spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease-out;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 196, 110, .2), rgba(255, 196, 110, 0) 65%); }
html.zdl-on .zdl-dyn-hot .zdl-dyn-spot { opacity: 1; }
/* Growth: ghoomti sone ki rim */
html.zdl-on .zdl-dyn-ring { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.6px;
background: conic-gradient(from var(--zdl-ang), rgba(255, 231, 168, .1), #FBE6AE 10%, rgba(255, 231, 168, .1) 24%, rgba(242, 198, 109, .5) 50%, rgba(255, 231, 168, .1) 62%, #F6DC97 76%, rgba(255, 231, 168, .1));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: zdl-ring 6s linear infinite; }
html.zdl-on #commissions .rp-plan.featured.zdl-dyn:not(#_) { animation: zdl-dyn-breathe 3.2s ease-in-out infinite; }
@keyframes zdl-dyn-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 198, 109, 0); } 50% { box-shadow: 0 0 28px -4px rgba(242, 198, 109, .35); } }
/* YOU EARN box par chamak */
html.zdl-on #commissions .zdl-dyn .rp-earn-box:not(#_) { position: relative; overflow: hidden; }
html.zdl-on .zdl-dyn-shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none;
background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 236, 190, .22), rgba(255, 255, 255, 0));
transform: translateX(-120%) skewX(-12deg); animation: zdl-dyn-shine 4.2s ease-in-out 1.4s infinite; }
@keyframes zdl-dyn-shine { 0%, 60% { transform: translateX(-120%) skewX(-12deg); } 100% { transform: translateX(320%) skewX(-12deg); } }
html.zdl-on #commissions .zdl-dyn .rp-earn-amount:not(#_) { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
html.zdl-on #commissions .rp-plan.zdl-dyn.zdl-dyn-pre:not(#_) { translate: none; scale: none; }
html.zdl-on #commissions .rp-plan.zdl-dyn.zdl-dyn-hot:not(#_) { translate: none; }
html.zdl-on .zdl-dyn-ring { animation-duration: 14s; }
}
/* ════ FREE TOOLS — liquid glass workbench ═══════════════════════════
/free-tools ke 3 tool cards: peeche garam rangeen roshni (kaanch tabhi
kaanch lagta hai), card frosted glass + sone ka rim + upar sunehri
rekha, icon ek sone ka ratn, inputs kaanch ke khaane, buttons gloss.
.tools-grid sweep ki SKIP me (zdl.js) — inline rang yahan nahi lagte. */
html.zdl-on .tools-grid:not(#_) { position: relative; isolation: isolate; }
html.zdl-on .tools-grid:not(#_)::before {
content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none; border-radius: 48px;
background:
radial-gradient(30% 40% at 12% 30%, rgba(255, 160, 70, .32) 0%, rgba(255, 160, 70, 0) 70%),
radial-gradient(28% 40% at 50% 70%, rgba(22, 133, 127, .2) 0%, rgba(22, 133, 127, 0) 70%),
radial-gradient(30% 42% at 88% 28%, rgba(226, 85, 127, .24) 0%, rgba(226, 85, 127, 0) 70%),
radial-gradient(34% 44% at 70% 90%, rgba(239, 190, 90, .32) 0%, rgba(239, 190, 90, 0) 70%);
filter: blur(8px);
}
html.zdl-on .tools-grid .tool-card:not(#_):not(#_):not(#_) {
position: relative; border: 0 !important; border-radius: 24px !important; padding: 40px 32px 32px !important;
background:
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .9) 50%, rgba(226, 182, 92, 0)) 50% 0 / 70% 1.5px no-repeat,
radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(165deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4) 48%, rgba(255, 246, 228, .58)) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.9) !important; backdrop-filter: blur(22px) saturate(1.9) !important;
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(226, 182, 92, .4),
inset 0 -30px 50px -36px rgba(226, 182, 92, .4),
0 2px 6px rgba(120, 84, 24, .06), 0 24px 60px -28px rgba(120, 84, 24, .4), 0 50px 90px -60px rgba(214, 140, 60, .45) !important;
transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease-out !important;
}
@media (hover: hover) and (min-width: 992px) {
html.zdl-on .tools-grid .tool-card:not(#_):not(#_):not(#_):hover {
transform: translateY(-6px);
box-shadow:
inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .65),
inset 0 -30px 50px -36px rgba(226, 182, 92, .5),
0 4px 10px rgba(120, 84, 24, .08), 0 34px 70px -28px rgba(120, 84, 24, .45), 0 60px 110px -60px rgba(214, 140, 60, .55) !important;
}
}
/* icon — shaant kaanch ka tile (pehle gloss sona tha — bahut chilla raha tha) */
html.zdl-on .tools-grid .tool-card > .tool-card-icon:not(#_):not(#_):not(#_) {
width: 56px; height: 56px; border-radius: 16px !important; margin-bottom: 20px; font-size: 26px;
background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 246, 228, .7)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .35), 0 6px 14px -8px rgba(120, 84, 24, .3) !important;
filter: none;
}
html.zdl-on .tools-grid .tool-card h2:not(#_):not(#_) { font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -.01em; color: #10262A !important; -webkit-text-fill-color: #10262A !important; margin-bottom: 8px; }
html.zdl-on .tools-grid .tool-card > p:not(#_):not(#_) { color: #55655F !important; -webkit-text-fill-color: #55655F !important; font-size: .95rem !important; line-height: 1.6; margin-bottom: 24px !important; }
html.zdl-on .tools-grid .tool-label:not(#_):not(#_) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #8A5F1A !important; -webkit-text-fill-color: #8A5F1A !important; margin-bottom: 8px; }
/* inputs — kaanch ke khaane */
html.zdl-on .tools-grid .tool-input:not(#_):not(#_) {
min-height: 48px; padding: 0 16px; border: 0 !important; border-radius: 14px !important; font-size: 16px !important;
color: #10262A !important; -webkit-text-fill-color: #10262A !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .6)) !important;
box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .3), inset 0 2px 4px rgba(120, 84, 24, .07), 0 1px 0 rgba(255, 255, 255, .9) !important;
transition: box-shadow .18s ease-out, background-color .18s ease-out !important;
}
html.zdl-on .tools-grid textarea.tool-input:not(#_):not(#_) { padding: 14px 16px; min-height: 120px; line-height: 1.55; }
html.zdl-on .tools-grid .tool-input:not(#_):not(#_)::placeholder { color: #8C968F; -webkit-text-fill-color: #8C968F; }
html.zdl-on .tools-grid .tool-input:not(#_):not(#_):focus { outline: 0; background: #fff !important; box-shadow: inset 0 0 0 1.5px #C9973B, 0 0 0 4px rgba(226, 182, 92, .22) !important; }
/* buttons — teal gloss + sone ke rim wala kaanch */
html.zdl-on .tools-grid .tool-btn:not(#_):not(#_) {
min-height: 46px; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 14px !important;
color: #FFF8E6 !important; -webkit-text-fill-color: #FFF8E6 !important;
background: radial-gradient(90% 60% at 30% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #17807C 0%, #0A474C 60%, #073236 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(226, 182, 92, .6), 0 10px 22px -10px rgba(10, 71, 76, .65) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out !important;
}
html.zdl-on .tools-grid .tool-btn-outline:not(#_):not(#_), html.zdl-on .tools-grid .template-cat:not(#_):not(#_) {
min-height: 42px; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 14px !important;
color: #6E4A12 !important; -webkit-text-fill-color: #6E4A12 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 226, .62)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .5), 0 6px 14px -8px rgba(120, 84, 24, .4) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out !important;
}
html.zdl-on .tools-grid .template-cat:not(#_):not(#_) { min-height: 36px; padding: 0 16px !important; font-size: 13px !important; }
html.zdl-on .tools-grid .template-cat.active:not(#_):not(#_) {
color: #FFF8E6 !important; -webkit-text-fill-color: #FFF8E6 !important;
background: linear-gradient(180deg, #17807C, #0A474C 70%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(226, 182, 92, .7), 0 8px 16px -8px rgba(10, 71, 76, .6) !important;
}
html.zdl-on .tools-grid :is(.tool-btn, .tool-btn-outline, .template-cat):not(#_):not(#_):hover { transform: translateY(-1px); filter: brightness(1.05); }
html.zdl-on .tools-grid :is(.tool-btn, .tool-btn-outline, .template-cat):not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .tools-grid :is(.tool-btn, .tool-btn-outline, .template-cat):not(#_):not(#_):focus-visible { outline: 2px solid #C9973B; outline-offset: 3px; }
html.zdl-on .tools-grid .copied-badge:not(#_):not(#_) { background: #0A474C !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 999px; }
/* templates — kaanch ki pattiyan, hover par sone ki dhaar */
html.zdl-on .tools-grid .template-list:not(#_) { scrollbar-width: thin; scrollbar-color: rgba(201, 151, 59, .55) transparent; padding-right: 4px; }
html.zdl-on .tools-grid .template-item:not(#_):not(#_) {
border: 0 !important; border-radius: 14px !important; padding: 14px 16px !important; margin-bottom: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)) !important;
box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .2), inset 0 1px 0 #fff !important;
transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out !important; cursor: pointer;
}
html.zdl-on .tools-grid .template-item:not(#_):not(#_):hover {
transform: translateX(2px); background: #fff !important;
box-shadow: inset 3px 0 0 #E2B65C, inset 0 0 0 1px rgba(184, 134, 47, .4), 0 8px 18px -12px rgba(120, 84, 24, .45) !important;
}
html.zdl-on .tools-grid .template-item-name:not(#_):not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; font-weight: 700 !important; }
html.zdl-on .tools-grid .template-item-text:not(#_):not(#_) { color: #5F6E68 !important; -webkit-text-fill-color: #5F6E68 !important; }
/* result + character counter */
html.zdl-on .tools-grid .tool-result:not(#_):not(#_) { border-radius: 14px !important; background: rgba(255, 255, 255, .7) !important; border: 1px dashed rgba(184, 134, 47, .55) !important; color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
html.zdl-on .tools-grid .char-bar-wrap:not(#_):not(#_) { height: 6px; border-radius: 999px; background: rgba(184, 134, 47, .16) !important; overflow: hidden; }
html.zdl-on .tools-grid .char-bar:not(#_):not(#_) { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F0C96E, #C9973B 60%, #0A474C) !important; }
html.zdl-on .tools-grid .char-stats strong:not(#_) { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; }
@media (max-width: 991px) {
html.zdl-on .tools-grid .tool-card:not(#_):not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255, 255, 255, .86) !important; padding: 32px 24px 24px !important; }
html.zdl-on .tools-grid:not(#_)::before { inset: -20px -16px; }
}
/* formatting preview — WhatsApp chat bubble jaisa; format buttons ek line, toot-te nahi */
html.zdl-on .tools-grid #wa-preview-text:not(#_):not(#_) {
background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #E9F7EE, #DCF3E4) !important;
border-radius: 4px 16px 16px 16px !important; color: #10262A !important; -webkit-text-fill-color: #10262A !important;
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(10, 71, 76, .1), 0 6px 14px -10px rgba(10, 71, 76, .35);
}
html.zdl-on .tools-grid .tool-card :is(.tool-btn, .tool-btn-outline):not(#_):not(#_) { white-space: nowrap; }
html.zdl-on .tools-grid .tool-card div:has(> button[onclick^="insertFormat"]):not(#_) { flex-wrap: wrap; }
html.zdl-on .tools-grid .tool-card div:has(> button[onclick^="insertFormat"]) > button:not(#_):not(#_):not(#_) { flex: 1 1 auto; min-height: 40px; padding: 0 14px !important; font-size: 13px !important; }
/* template list — neeche dhire se ghulta hua (aur bhi hain, scroll karo) */
html.zdl-on .tools-grid .template-list:not(#_):not(#_) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); padding-bottom: 24px; }
/* ════ REFERRAL CALCULATOR — premium kumkum + sona (26 Oct) ══════════════
html.zdl-on par seedha (JS ke intezaar bina — pehle zdl-ref class aane tak halka
calculator dikhta tha). Plans jaisa maroon; sone ke sliders (zdl.js refCalcSkin
--zr-pct), sone ka total. Segment bars hataye — slider khud bhara dikhata hai. */
html.zdl-on #calculator .rpc-glass-card:not(#_):not(#_):not(#_) {
position: relative; overflow: hidden; isolation: isolate; border: 0 !important; border-radius: 24px !important;
background-color: #24040C !important;
background-image:
radial-gradient(60% 50% at 100% 0%, rgba(255, 160, 50, .2) 0%, rgba(255, 160, 50, 0) 60%),
radial-gradient(50% 40% at 0% 100%, rgba(214, 51, 76, .16) 0%, rgba(214, 51, 76, 0) 60%),
linear-gradient(160deg, #46091A 0%, #2A050F 55%, #170208 100%) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
box-shadow: inset 0 1.5px 0 rgba(255, 220, 160, .35), inset 0 0 0 1px rgba(242, 198, 109, .35), 0 30px 60px -30px rgba(70, 9, 26, .6) !important;
}
html.zdl-on #calculator .rpc-glass-card .rpc-panel-left:not(#_):not(#_):not(#_) { background: transparent !important; border-color: rgba(242, 198, 109, .16) !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-panel-right:not(#_):not(#_):not(#_) {
background: linear-gradient(180deg, rgba(255, 214, 140, .07), rgba(255, 214, 140, .02)) !important;
border-left: 1px solid rgba(242, 198, 109, .22) !important;
}
@media (max-width: 991px) { html.zdl-on #calculator .rpc-glass-card .rpc-panel-right:not(#_):not(#_):not(#_) { border-left: 0 !important; border-top: 1px solid rgba(242, 198, 109, .22) !important; } }
html.zdl-on #calculator .rpc-glass-card :is(p, span, div, small, label, strong, b):not(.zdl-x):not(.zdl-x *):not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .82) !important; -webkit-text-fill-color: rgba(255, 241, 226, .82) !important; }
html.zdl-on #calculator .rpc-glass-card :is(.rpc-panel-title, .rpc-total-label):not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; letter-spacing: .18em !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-panel-title:not(#_):not(#_):not(#_)::after { background: linear-gradient(90deg, rgba(242, 198, 109, .5), rgba(242, 198, 109, 0)) !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-sname:not(#_):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; font-weight: 700 !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-sprice-tag:not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .55) !important; -webkit-text-fill-color: rgba(255, 241, 226, .55) !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-scommission:not(#_):not(#_):not(#_) { color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
html.zdl-on #calculator .rpc-glass-card :is(.rpc-sref-count, .rpc-sref-count strong):not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .62) !important; -webkit-text-fill-color: rgba(255, 241, 226, .62) !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-sref-count strong:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-srow:not(#_):not(#_):not(#_) { border-color: rgba(242, 198, 109, .14) !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-sicon:not(#_):not(#_):not(#_) { background: rgba(255, 214, 140, .1) !important; border: 1px solid rgba(242, 198, 109, .45) !important; box-shadow: none !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-sicon i:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
/* sone ka slider */
html.zdl-on #calculator .rpc-gslider:not(#_):not(#_):not(#_) {
-webkit-appearance: none; appearance: none; height: 6px !important; border-radius: 999px !important; border: 0 !important;
background: linear-gradient(90deg, #C9973B 0%, #F6DC97 calc(var(--zr-pct, 10%) - 1%), #E2B65C var(--zr-pct, 10%), rgba(255, 241, 226, .12) var(--zr-pct, 10%)) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3) !important;
}
html.zdl-on #calculator .rpc-gslider:not(#_):not(#_):not(#_)::-webkit-slider-thumb {
-webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; cursor: grab; border: 2px solid #FFF3D0 !important;
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6D27A 55%, #C9973B) !important;
box-shadow: 0 0 0 5px rgba(242, 198, 109, .2), 0 0 16px rgba(255, 190, 90, .7), 0 2px 4px rgba(0, 0, 0, .4) !important;
transition: transform .15s ease-out;
}
html.zdl-on #calculator .rpc-gslider:not(#_):not(#_):not(#_):active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
html.zdl-on #calculator .rpc-gslider:not(#_):not(#_):not(#_)::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; border: 2px solid #FFF3D0;
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6D27A 55%, #C9973B); box-shadow: 0 0 0 5px rgba(242, 198, 109, .2), 0 0 16px rgba(255, 190, 90, .7);
}
html.zdl-on #calculator .rpc-gslider:not(#_):not(#_):not(#_):focus-visible { outline: 2px solid #F2C66D; outline-offset: 6px; }
html.zdl-on #calculator .rpc-segttrack:not(#_):not(#_):not(#_) { display: none !important; }
/* bada total */
html.zdl-on #calculator .rpc-glass-card :is(.rpc-total-amount, .rpc-total-amount span):not(#_):not(#_):not(#_) {
background: none !important; color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; font-variant-numeric: tabular-nums;
}
html.zdl-on #calculator .rpc-glass-card .rpc-total-amount:not(#_):not(#_):not(#_) { font-size: clamp(48px, 5.4vw, 72px) !important; letter-spacing: -.03em !important; text-shadow: 0 0 28px rgba(255, 180, 80, .3); }
html.zdl-on #calculator .rpc-glass-card .rpc-sum-row:not(#_):not(#_):not(#_) { border-color: rgba(242, 198, 109, .16) !important; }
html.zdl-on #calculator .rpc-glass-card :is(.rpc-sum-val, .rpc-sum-val span):not(#_):not(#_):not(#_) { color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; font-weight: 800 !important; }
html.zdl-on #calculator .rpc-glass-card .rpc-instant-note i:not(#_):not(#_):not(#_) { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on #calculator .rpc-glass-card .zdl-prang:not(#_):not(#_):not(#_) { opacity: .08 !important; }
/* ════ /solutions/* INDUSTRY PAGES — premium (zdl.js indPremium, 26 Oct) ════ */
html.zdl-on .ind-hero h1 .zdl-ind-acc { background: linear-gradient(100deg, #9C6E22, #D9A84E 40%, #B8862F 70%, #8A5A14); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* hero card: gehra teal liquid glass */
html.zdl-on .ind-hero .ind-hero-card:not(#_):not(#_):not(#_) {
position: relative; overflow: hidden; isolation: isolate; padding: 28px 28px 24px !important; border: 0 !important; border-radius: 24px !important;
background-color: rgba(5, 46, 50, .92) !important;
background-image: radial-gradient(70% 50% at 100% 0%, rgba(226, 182, 92, .2), rgba(226, 182, 92, 0) 60%), linear-gradient(180deg, rgba(12, 76, 80, .5) 0%, rgba(3, 26, 29, .6) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8) !important; backdrop-filter: blur(20px) saturate(1.8) !important;
box-shadow: inset 0 1.5px 0 rgba(255, 240, 200, .4), inset 0 0 0 1px rgba(255, 231, 168, .22), inset 0 -22px 36px -24px rgba(110, 230, 215, .2), 0 30px 60px -30px rgba(5, 46, 50, .55) !important;
}
html.zdl-on .ind-hero .ind-hero-card::before { display: none !important; }
html.zdl-on .ind-hero .ind-hero-card .zdl-plq-rim {
position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
background: linear-gradient(160deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .14) 14%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 64%, rgba(242, 198, 109, .4) 88%, rgba(255, 255, 255, .55) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.zdl-on .ind-hero .ind-hero-card h3:not(#_):not(#_):not(#_) { color: #FFF6E4 !important; -webkit-text-fill-color: #FFF6E4 !important; font-size: 20px !important; letter-spacing: -.02em; margin: 8px 0 16px !important; }
html.zdl-on .ind-hero .ind-cap-list li:not(#_):not(#_):not(#_) { color: rgba(247, 238, 221, .86) !important; -webkit-text-fill-color: rgba(247, 238, 221, .86) !important; border-color: rgba(255, 231, 168, .12) !important; padding: 10px 0 !important; }
html.zdl-on .ind-hero .ind-cap-list li i:not(#_):not(#_):not(#_) {
color: #3A2408 !important; -webkit-text-fill-color: #3A2408 !important; background: linear-gradient(135deg, #FBE6AE, #E2B65C) !important;
border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(226, 182, 92, .16) !important;
}
html.zdl-on .zdl-ind-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: #8FE3D6; -webkit-text-fill-color: #8FE3D6; background: rgba(143, 227, 214, .1); box-shadow: inset 0 0 0 1px rgba(143, 227, 214, .3); }
html.zdl-on .zdl-ind-live i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61, 220, 151, .25); animation: zdl-ind-pulse 1.8s ease-in-out infinite; }
@keyframes zdl-ind-pulse { 50% { opacity: .35; } }
/* chhota WhatsApp message preview */
html.zdl-on .zdl-ind-msg { position: relative; margin: 18px 0 0 auto; max-width: 88%; padding: 10px 14px 8px; border-radius: 14px 14px 4px 14px;
background: linear-gradient(180deg, #DCF8C6, #CBEFB2); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); animation: zdl-ind-msg .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
html.zdl-on .zdl-ind-msg p { margin: 0; font-size: 13px; line-height: 1.45; font-weight: 500; color: #10262A; -webkit-text-fill-color: #10262A; }
html.zdl-on .zdl-ind-msg span { display: block; margin-top: 2px; text-align: right; font-size: 10.5px; color: #5E7A6E; -webkit-text-fill-color: #5E7A6E; }
html.zdl-on .zdl-ind-msg b { color: #34B7F1; -webkit-text-fill-color: #34B7F1; font-weight: 700; letter-spacing: -.12em; }
@keyframes zdl-ind-msg { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* use-case cards */
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_) {
position: relative; overflow: hidden; isolation: isolate; border-radius: 20px !important;
background: linear-gradient(180deg, rgba(255, 253, 248, .96), rgba(255, 246, 228, .92)) !important; border: 1px solid rgba(226, 182, 92, .3) !important;
box-shadow: inset 0 1px 0 #fff, 0 2px 4px -2px rgba(120, 84, 24, .12), 0 18px 40px -26px rgba(120, 84, 24, .35) !important;
transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease-out, border-color .25s ease-out !important;
}
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_)::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease-out;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 200, 120, .22), rgba(255, 200, 120, 0) 65%);
}
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_):hover { transform: translateY(-6px); border-color: rgba(226, 182, 92, .7) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(226, 182, 92, .25), 0 26px 50px -26px rgba(120, 84, 24, .5) !important; }
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_):hover::after { opacity: 1; }
html.zdl-on .ind-usecases .ind-usecase-icon:not(#_):not(#_):not(#_) {
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6DC97 58%, #E2B65C) !important; border: 0 !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .35), 0 10px 22px -10px rgba(232, 160, 60, .6) !important;
transition: transform .35s cubic-bezier(.3, 1.5, .5, 1) !important;
}
html.zdl-on .ind-usecases .ind-usecase-icon i:not(#_):not(#_):not(#_) { color: #7A4C10 !important; -webkit-text-fill-color: #7A4C10 !important; }
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_):hover .ind-usecase-icon { transform: rotate(-6deg) scale(1.08); }
html.zdl-on .zdl-ind-n { position: absolute; top: 16px; right: 20px; font: italic 600 30px/1 "Cormorant Garamond", Georgia, serif; color: rgba(184, 134, 47, .35); -webkit-text-fill-color: rgba(184, 134, 47, .35); pointer-events: none; transition: color .25s ease-out; }
html.zdl-on .ind-usecase:hover .zdl-ind-n { color: rgba(184, 134, 47, .8); -webkit-text-fill-color: rgba(184, 134, 47, .8); }
html.zdl-on .ind-usecases .ind-usecase h3:not(#_):not(#_) { padding-right: 36px; }
/* CTA ka sone ka button */
html.zdl-on .ind-cta a.btn:not(#_):not(#_):not(#_) {
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 26px -12px rgba(232, 160, 60, .7) !important; transition: filter .18s ease-out, transform .18s ease-out;
}
html.zdl-on .ind-cta a.btn:not(#_):not(#_):not(#_):hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (max-width: 767px) {
html.zdl-on .ind-hero .ind-hero-card:not(#_):not(#_):not(#_) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(6, 46, 50, .98) !important; padding: 24px 20px 20px !important; }
}
/* ════ SOLUTIONS — use-cases + lead flow, liquid glass ═══════════════
/solutions/* ke use-case cards aur "lead flow" patti. 6 card 4-col me
4+2 aate the → ab 3-col (4/8 card ho to 4-col). Card frosted glass +
sone ki upar rekha, icon shaant ivory tile, flow ke number sone ke moti
ek sunehri dhaage se jude. .ind-usecases/.ind-flow sweep SKIP me. */
html.zdl-on .ind-usecases:not(#_) { position: relative; isolation: isolate; gap: 24px !important; }
@media (min-width: 992px) {
html.zdl-on .ind-usecases:not(#_) { grid-template-columns: repeat(3, 1fr) !important; }
html.zdl-on .ind-usecases:has(> :last-child:nth-child(4n)):not(#_) { grid-template-columns: repeat(4, 1fr) !important; }
}
html.zdl-on .ind-usecases:not(#_)::after {
content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none;
background:
radial-gradient(30% 45% at 10% 30%, rgba(255, 160, 70, .26) 0%, rgba(255, 160, 70, 0) 70%),
radial-gradient(28% 40% at 90% 25%, rgba(226, 85, 127, .2) 0%, rgba(226, 85, 127, 0) 70%),
radial-gradient(34% 44% at 55% 95%, rgba(22, 133, 127, .16) 0%, rgba(22, 133, 127, 0) 70%);
filter: blur(8px);
}
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_) {
border: 0 !important; border-radius: 22px !important; padding: 32px 28px 28px !important; overflow: hidden;
background:
radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(165deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .42) 50%, rgba(255, 246, 228, .6)) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(226, 182, 92, .38),
inset 0 -26px 44px -34px rgba(226, 182, 92, .38),
0 2px 6px rgba(120, 84, 24, .05), 0 22px 54px -28px rgba(120, 84, 24, .38) !important;
transition: box-shadow .3s ease-out !important;
}
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_)::before {
left: 20% !important; right: 20% !important; height: 1.5px !important;
background: linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .95), rgba(226, 182, 92, 0)) !important;
}
@media (hover: hover) {
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_):hover {
box-shadow:
inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .65),
inset 0 -26px 44px -34px rgba(226, 182, 92, .5),
0 4px 10px rgba(120, 84, 24, .07), 0 30px 64px -28px rgba(120, 84, 24, .46) !important;
}
}
html.zdl-on .ind-usecases .ind-usecase > .ind-usecase-icon:not(#_):not(#_):not(#_) {
width: 52px !important; height: 52px !important; border-radius: 16px !important; margin-bottom: 20px !important;
background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 246, 228, .72)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .38), 0 6px 14px -8px rgba(120, 84, 24, .32) !important;
}
html.zdl-on .ind-usecases .ind-usecase-icon i:not(#_):not(#_) { color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; font-size: 24px !important; }
html.zdl-on .ind-usecases .ind-usecase h3:not(#_):not(#_) { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.3; color: #10262A !important; -webkit-text-fill-color: #10262A !important; margin-bottom: 8px !important; }
html.zdl-on .ind-usecases .ind-usecase p:not(#_):not(#_) { font-size: 14.5px !important; line-height: 1.65 !important; color: #55655F !important; -webkit-text-fill-color: #55655F !important; }
/* lead flow — glass patti, sone ke moti, sunehra dhaaga */
html.zdl-on .ind-flow:not(#_):not(#_) {
margin-top: 40px; border: 0 !important; border-radius: 24px !important; padding: 40px 32px !important;
background:
linear-gradient(90deg, rgba(226, 182, 92, 0), rgba(226, 182, 92, .9) 50%, rgba(226, 182, 92, 0)) 50% 0 / 60% 1.5px no-repeat,
linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46) 50%, rgba(255, 246, 228, .62)) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .38), 0 22px 54px -28px rgba(120, 84, 24, .38) !important;
}
html.zdl-on .ind-flow > h3:not(#_):not(#_) { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.01em; color: #10262A !important; -webkit-text-fill-color: #10262A !important; margin-bottom: 32px !important; }
html.zdl-on .ind-flow .ind-flow-step-num:not(#_):not(#_) {
width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important;
font-weight: 800 !important; font-size: 16px !important; color: #0A474C !important; -webkit-text-fill-color: #0A474C !important;
background: radial-gradient(70% 50% at 35% 20%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #FFF6DC, #F2D088) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .5), 0 0 0 5px rgba(255, 255, 255, .55), 0 8px 16px -8px rgba(184, 120, 30, .55) !important;
position: relative; z-index: 1;
}
html.zdl-on .ind-flow .ind-flow-step-text:not(#_):not(#_) { font-size: 13.5px !important; line-height: 1.5 !important; color: #3F504B !important; -webkit-text-fill-color: #3F504B !important; margin-top: 12px; }
@media (max-width: 991px) {
html.zdl-on .ind-usecases .ind-usecase:not(#_):not(#_), html.zdl-on .ind-flow:not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .86) !important; }
html.zdl-on .ind-flow:not(#_):not(#_) { padding: 32px 20px !important; }
html.zdl-on .ind-usecases:not(#_)::after { inset: -20px -16px; }
}
/* ind fixes: bubble ka text site ke hero p-rule se pheeka hota tha; 6 cards 4+2 ki jagah 3+3 */
html.zdl-on .ind-hero .zdl-ind-msg p:not(#_):not(#_):not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; opacity: 1 !important; font-size: 13px !important; margin: 0 !important; }
html.zdl-on .ind-hero .zdl-ind-msg span:not(#_):not(#_):not(#_) { color: #5E7A6E !important; -webkit-text-fill-color: #5E7A6E !important; opacity: 1 !important; }
@media (min-width: 992px) { html.zdl-on .ind-usecases:not(#_):has(> .ind-usecase:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr) !important; } }
/* ── Compare table ticks — santulan (26 Oct; Aditya: "zupi ke ticks jyada dark, wati ke bohot kam") ──
ZupiChat: gehre teal ki jagah ujla emerald ratn (sone ki ring + chamak wahi) — ab bhi sabse aage.
Competitor: chhote halke icon ki jagah saaf 30px hara gola, halke rim ke saath — dikhe, par ZupiChat se kam. */
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_):not(#_) {
background: radial-gradient(75% 75% at 35% 28%, #7FE3C6 0%, #2DB592 48%, #168A72 100%) !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 3.5px rgba(226, 182, 92, .75), 0 8px 18px -8px rgba(22, 138, 114, .55), inset 0 1.5px 0 rgba(255, 255, 255, .55) !important;
}
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_) :is(svg, path) { stroke: #FFFFFF !important; color: #FFFFFF !important; }
html.zdl-on .cmp-wrap .cmp-ok:not(#_):not(#_) {
display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.3rem !important; line-height: 1;
color: #17a06a !important; -webkit-text-fill-color: #17a06a !important; background: #E6F6EE;
box-shadow: 0 0 0 1px rgba(23, 160, 106, .25), 0 4px 10px -6px rgba(23, 160, 106, .45);
}
/* ════ STARTUP & NGO FORM — premium (zdl.js spForm, 26 Oct) ════════════ */
html.zdl-on .sp-form-wrap.zdl-sp:not(#_):not(#_) {
position: relative; overflow: hidden; padding-top: 56px !important; border-radius: 24px !important;
background: linear-gradient(180deg, #FFFFFF, #FFFBF2) !important; border: 1px solid rgba(226, 182, 92, .45) !important;
box-shadow: inset 0 1px 0 #fff, 0 2px 4px -2px rgba(120, 84, 24, .14), 0 30px 60px -30px rgba(120, 84, 24, .4) !important;
}
html.zdl-on .zdl-sp-toran { position: absolute; left: 24px; right: 24px; top: 0; height: 30px; pointer-events: none; }
html.zdl-on .zdl-sp-toran svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(120, 84, 24, .18)); }
html.zdl-on .zdl-sp > h3:not(#_):not(#_) { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 800 !important; letter-spacing: -.025em !important; color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .zdl-sp > h3 i:not(#_):not(#_) { color: #B8862F !important; -webkit-text-fill-color: #B8862F !important; }
html.zdl-on .zdl-sp .sp-label:not(#_):not(#_) { font-size: 13px !important; font-weight: 700 !important; color: #2E4448 !important; -webkit-text-fill-color: #2E4448 !important; letter-spacing: -.005em; }
html.zdl-on .zdl-sp :is(.sp-input, .sp-select):not(#_):not(#_) {
min-height: 48px; border-radius: 12px !important; border: 1px solid rgba(16, 38, 42, .14) !important; background-color: #FFFEFB !important;
font-size: 15px !important; color: #10262A !important; -webkit-text-fill-color: #10262A !important;
box-shadow: inset 0 1px 2px rgba(16, 38, 42, .04) !important; transition: border-color .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out !important;
}
html.zdl-on .zdl-sp .sp-select:not(#_):not(#_) { -webkit-appearance: none; appearance: none; padding-right: 40px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23B8862F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important; }
html.zdl-on .zdl-sp :is(.sp-input, .sp-select):not(#_):not(#_):hover { border-color: rgba(184, 134, 47, .45) !important; }
html.zdl-on .zdl-sp :is(.sp-input, .sp-select):not(#_):not(#_):focus { outline: none; border-color: #D9A84E !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(226, 182, 92, .22) !important; }
html.zdl-on .zdl-sp .zda-ok :is(.sp-input, .sp-select):not(#_):not(#_) { border-color: #1F9D6B !important; background-color: #F3FBF7 !important; box-shadow: 0 0 0 3px rgba(31, 157, 107, .13) !important; }
html.zdl-on .zdl-sp .zda-bad :is(.sp-input, .sp-select):not(#_):not(#_) { border-color: #D93A3A !important; background-color: #FFF6F6 !important; box-shadow: 0 0 0 3px rgba(217, 58, 58, .12) !important; }
html.zdl-on .zdl-sp .zda-msg { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #C62F2F; display: flex; align-items: center; gap: 6px; }
html.zdl-on .zdl-sp .zda-msg::before { content: "!"; flex: 0 0 16px; height: 16px; border-radius: 50%; background: #D93A3A; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
html.zdl-on .zdl-sp .sp-submit:not(#_):not(#_) {
min-height: 54px; border-radius: 14px !important; font-size: 16px !important; font-weight: 800 !important;
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 14px 28px -12px rgba(232, 160, 60, .7) !important; transition: filter .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .zdl-sp .sp-submit:not(#_):not(#_) i { color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-on .zdl-sp .sp-submit:not(#_):not(#_):hover { filter: brightness(1.05); transform: translateY(-1px); }
html.zdl-on .zdl-sp .sp-submit:not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .zdl-sp .sp-submit:not(#_):not(#_):focus-visible { outline: 2px solid #B8862F; outline-offset: 3px; }
@media (max-width: 767px) { html.zdl-on .zdl-sp :is(.sp-input, .sp-select):not(#_):not(#_) { font-size: 16px !important; } }
/* ════ /agency — tiers + steps premium (zdl.js agPremium, 26 Oct) ═══════
Referral plans jaisa kumkum maroon + sona (Dhanteras plan palette). */
html.zdl-on .ag-pricing-grid .ag-plan.zdl-agp:not(#_):not(#_) {
position: relative; isolation: isolate; overflow: visible; border: 0 !important; border-radius: 24px !important;
background-color: #24040C !important;
background-image: radial-gradient(80% 50% at 100% 0%, rgba(255, 150, 50, .18) 0%, rgba(255, 150, 50, 0) 60%), linear-gradient(180deg, #3E0915 0%, #26050D 55%, #160207 100%) !important;
box-shadow: inset 0 1.5px 0 rgba(255, 220, 160, .3), inset 0 0 0 1px rgba(242, 198, 109, .32), 0 26px 50px -30px rgba(62, 9, 21, .65) !important;
transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform .35s cubic-bezier(.2, .8, .2, 1), translate .7s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.2, .8, .2, 1), opacity .6s ease-out !important;
}
html.zdl-on .ag-pricing-grid .ag-plan.zdl-agp.featured:not(#_):not(#_) {
background-image: radial-gradient(90% 34% at 50% 0%, rgba(255, 160, 50, .28) 0%, rgba(255, 160, 50, 0) 65%), linear-gradient(180deg, #4C0B19 0%, #300612 45%, #1A0309 100%) !important;
animation: zdl-dyn-breathe 3.2s ease-in-out infinite;
}
html.zdl-on .ag-plan.zdl-agp.zdl-dyn-pre:not(#_):not(#_) { opacity: 0; translate: 0 40px; scale: .96; }
html.zdl-on .ag-plan.zdl-agp.zdl-dyn-in:not(#_):not(#_) { opacity: 1; translate: 0 0; scale: 1; }
html.zdl-on .ag-plan.zdl-agp.zdl-dyn-hot:not(#_):not(#_) { translate: 0 -6px; transition: transform .12s ease-out, translate .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease-out !important; }
html.zdl-on .ag-plan.zdl-agp :is(h3, .clients, .disc-label, li, .discount):not(#_):not(#_):not(#_) { -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .ag-plan.zdl-agp h3:not(#_):not(#_):not(#_) { color: #FFF6E4 !important; font-weight: 800 !important; letter-spacing: -.02em; }
html.zdl-on .ag-plan.zdl-agp .clients:not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .62) !important; }
html.zdl-on .ag-plan.zdl-agp .discount:not(#_):not(#_):not(#_) {
color: #FFE7A8 !important; background: none !important; font-size: clamp(48px, 5vw, 64px) !important; font-weight: 900 !important; letter-spacing: -.04em !important;
font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(255, 180, 80, .3);
}
html.zdl-on .ag-plan.zdl-agp .disc-label:not(#_):not(#_):not(#_) { color: #F2C66D !important; font-weight: 600 !important; }
html.zdl-on .ag-plan.zdl-agp li:not(#_):not(#_):not(#_) { color: rgba(255, 241, 226, .86) !important; border-color: rgba(242, 198, 109, .14) !important; }
html.zdl-on .ag-plan.zdl-agp li:not(#_):not(#_):not(#_)::before { color: #F2C66D !important; -webkit-text-fill-color: #F2C66D !important; }
html.zdl-on .ag-plan.zdl-agp .ag-plan-badge:not(#_):not(#_):not(#_) {
color: #3A1406 !important; -webkit-text-fill-color: #3A1406 !important; background: linear-gradient(100deg, #FFD27A, #F2C66D 50%, #E2B65C) !important; border: 0 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .8), 0 6px 16px -8px rgba(242, 198, 109, .8) !important;
}
html.zdl-on .ag-plan.zdl-agp .ag-plan-cta:not(#_):not(#_):not(#_) {
min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px !important;
background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(242, 198, 109, .55) !important;
color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important; font-weight: 800 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important; transition: background-color .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .ag-plan.zdl-agp .ag-plan-cta:not(#_):not(#_):not(#_):hover { background: rgba(255, 255, 255, .12) !important; }
html.zdl-on .ag-plan.zdl-agp .ag-plan-cta:not(#_):not(#_):not(#_):active { transform: scale(.98); }
html.zdl-on .ag-plan.zdl-agp.featured .ag-plan-cta:not(#_):not(#_):not(#_) {
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; border: 0 !important;
color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 26px -12px rgba(232, 160, 60, .7) !important;
}
/* 4 steps: sone ke medallion + jodne wali sunehri lakeer */
html.zdl-on .ag-steps:not(#_) { position: relative; }
@media (min-width: 992px) {
html.zdl-on .ag-steps:not(#_)::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 0; border-top: 2px dashed rgba(201, 151, 59, .55); z-index: 0; }
}
html.zdl-on .ag-step:not(#_) { position: relative; z-index: 1; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
html.zdl-on .ag-step:not(#_):hover { transform: translateY(-4px); }
html.zdl-on .ag-step-num:not(#_):not(#_):not(#_) {
background: radial-gradient(circle at 35% 30%, #FFF8E4, #F6DC97 55%, #D9A84E) !important; color: #5A3408 !important; -webkit-text-fill-color: #5A3408 !important; border: 0 !important;
font-weight: 900 !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 4px #FFF4E2, 0 0 0 5px rgba(201, 151, 59, .45), 0 10px 22px -10px rgba(232, 160, 60, .7) !important;
transition: transform .35s cubic-bezier(.3, 1.5, .5, 1) !important;
}
html.zdl-on .ag-step:not(#_):hover .ag-step-num { transform: scale(1.1) rotate(-6deg); }
html.zdl-on .ag-cta a.btn:not(#_):not(#_):not(#_) {
background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 26px -12px rgba(232, 160, 60, .7) !important;
}
@media (prefers-reduced-motion: reduce) {
html.zdl-on .ag-plan.zdl-agp.zdl-dyn-pre:not(#_):not(#_) { translate: none; scale: none; }
html.zdl-on .ag-plan.zdl-agp.zdl-dyn-hot:not(#_):not(#_) { translate: none; }
}
/* ZRQ-BEGIN ════ ROI QUIZ (/roi-quiz) — premium ═════════════════════════
.quiz-wrap SKIP me hai (har step innerHTML se dobara banta hai, sweep inline
rang na thope). Card = safed liquid glass + sone ki rim, header gehra teal +
sone ki progress, options = glossy tiles, live panel = kaanch ki raseed. */
html.zdl-on .quiz-wrap:not(#_):not(#_) { position: relative; background: transparent !important; isolation: isolate; }
html.zdl-on .quiz-wrap:not(#_):not(#_)::before {
content: ""; position: absolute; inset: 120px 0 0; z-index: -1; pointer-events: none; filter: blur(40px);
background:
radial-gradient(28% 40% at 22% 30%, rgba(255, 150, 60, .35), transparent 70%),
radial-gradient(26% 36% at 80% 22%, rgba(226, 80, 130, .22), transparent 70%),
radial-gradient(30% 40% at 60% 80%, rgba(22, 133, 127, .25), transparent 70%);
}
html.zdl-on .quiz-intro-eyebrow:not(#_):not(#_) { background: linear-gradient(180deg, #fff, #FFF6E2) !important; color: #8A5A12 !important; box-shadow: 0 0 0 1px rgba(184, 134, 47, .3); }
html.zdl-on .quiz-intro-meta span:not(#_):not(#_) {
padding: 6px 12px; border-radius: 999px; color: #3E4A4D !important; background: rgba(255, 255, 255, .75);
box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .22);
}
html.zdl-on .quiz-intro-meta i:not(#_):not(#_) { color: #B8862F !important; }
/* card */
html.zdl-on .quiz-card:not(#_):not(#_) {
border: 0 !important; border-radius: 24px !important;
background: rgba(255, 255, 255, .86) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
box-shadow: inset 1.5px 1.5px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 2px 4px rgba(16, 38, 42, .06), 0 30px 60px -30px rgba(16, 38, 42, .45) !important;
}
html.zdl-on .quiz-header:not(#_):not(#_) {
position: relative;
background: radial-gradient(70% 120% at 100% 0%, rgba(226, 182, 92, .22), rgba(226, 182, 92, 0) 60%), linear-gradient(158deg, #0E4A4F, #072A2D 70%, #041C1E) !important;
box-shadow: inset 0 -1px 0 rgba(226, 182, 92, .45);
}
html.zdl-on .quiz-progress-bar:not(#_):not(#_) { height: 6px !important; background: rgba(255, 255, 255, .12) !important; border-radius: 6px !important; }
html.zdl-on .quiz-progress-fill:not(#_):not(#_) {
border-radius: 6px !important; background: linear-gradient(90deg, #C9973B, #FBE6AE 50%, #E2B65C) !important; background-size: 200% 100% !important;
box-shadow: 0 0 12px rgba(255, 196, 110, .6);
}
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .quiz-progress-fill:not(#_):not(#_) { animation: zrq-shim 2.4s linear infinite; }
@keyframes zrq-shim { to { background-position: -200% 0; } }
}
html.zdl-on .quiz-step-label:not(#_):not(#_) {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 700; letter-spacing: .04em;
color: #FBE6AE !important; background: rgba(226, 182, 92, .14); box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .4);
}
html.zdl-on .quiz-question:not(#_):not(#_) { font-size: 22px !important; color: #FFF8EC !important; }
/* options */
html.zdl-on .quiz-option:not(#_):not(#_) {
min-height: 64px; border: 0 !important; border-radius: 14px !important; background: #FFFFFF !important;
box-shadow: 0 0 0 1px rgba(16, 38, 42, .09), 0 1px 2px rgba(16, 38, 42, .04) !important;
transition: transform .18s ease-out, box-shadow .18s ease-out !important;
}
html.zdl-on .quiz-option:not(#_):not(#_):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(184, 134, 47, .55), 0 10px 22px -12px rgba(120, 84, 24, .45) !important; }
html.zdl-on .quiz-option:not(#_):not(#_):active { transform: scale(.99); }
html.zdl-on .quiz-option:not(#_):not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 2px; }
html.zdl-on .quiz-option.selected:not(#_):not(#_) {
position: relative; background: linear-gradient(90deg, #F2F8F6, #FFFFFF) !important;
box-shadow: 0 0 0 2px #0A474C, 0 12px 24px -14px rgba(10, 71, 76, .5) !important;
}
html.zdl-on .quiz-option.selected:not(#_):not(#_)::after {
content: "\2713"; position: absolute; right: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #3A2408; background: linear-gradient(135deg, #FBE6AE, #E2B65C);
box-shadow: 0 4px 10px -4px rgba(184, 120, 40, .7);
}
html.zdl-on .quiz-option-icon:not(#_):not(#_) {
width: 40px !important; height: 40px !important; border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(0, 0, 0, .06), 0 0 0 1px rgba(16, 38, 42, .06);
}
html.zdl-on .quiz-option-label:not(#_):not(#_) { font-size: 15px !important; color: #10262A !important; }
html.zdl-on .quiz-option-sub:not(#_):not(#_) { color: #66737A !important; }
html.zdl-on .quiz-next:not(#_):not(#_) {
min-height: 52px; border: 0 !important; border-radius: 14px !important; font-weight: 800 !important;
color: #2A1708 !important; background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 24px -12px rgba(232, 160, 60, .7) !important;
transition: filter .18s ease-out, transform .18s ease-out !important;
}
html.zdl-on .quiz-next:not(#_):not(#_):hover:not(:disabled) { filter: brightness(1.05); }
html.zdl-on .quiz-next:not(#_):not(#_):active:not(:disabled) { transform: scale(.98); }
html.zdl-on .quiz-next:not(#_):not(#_):disabled { filter: grayscale(.6) opacity(.55); box-shadow: none !important; }
html.zdl-on .quiz-back:not(#_):not(#_) { min-height: 44px; border-radius: 12px !important; background: rgba(255, 255, 255, .8) !important; box-shadow: 0 0 0 1px rgba(16, 38, 42, .12) !important; color: #10262A !important; }
/* live estimate — kaanch ki raseed */
html.zdl-on .quiz-live:not(#_):not(#_) {
position: relative; overflow: hidden; border: 0 !important; border-radius: 20px !important;
background: rgba(255, 255, 255, .86) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
box-shadow: inset 1.5px 1.5px 0 #fff, 0 0 0 1px rgba(184, 134, 47, .3), 0 24px 48px -28px rgba(16, 38, 42, .4) !important;
}
html.zdl-on .quiz-live:not(#_):not(#_)::before {
content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 151, 59, 0), #D9A84E, rgba(201, 151, 59, 0));
}
html.zdl-on .quiz-live-head:not(#_):not(#_) { color: #8A5A12 !important; }
html.zdl-on .quiz-live-dot:not(#_):not(#_) { background: #E2B65C !important; box-shadow: 0 0 0 0 rgba(226, 182, 92, .6); }
@media (prefers-reduced-motion: no-preference) {
html.zdl-on .quiz-live-dot:not(#_):not(#_) { animation: zrq-pulse 1.8s ease-out infinite; }
@keyframes zrq-pulse { to { box-shadow: 0 0 0 8px rgba(226, 182, 92, 0); } }
}
html.zdl-on .quiz-live-plan:not(#_):not(#_) { font-size: 22px !important; color: #10262A !important; }
html.zdl-on .quiz-live-row:not(#_):not(#_) { padding-bottom: 8px; border-bottom: 1px dashed rgba(184, 134, 47, .3); }
html.zdl-on .quiz-live-v:not(#_):not(#_) { color: #0A474C !important; }
html.zdl-on .quiz-live-foot:not(#_):not(#_) { color: #7A6544 !important; }
/* result */
html.zdl-on .quiz-result .qr-metrics:not(#_):not(#_) { background: #fff; }
html.zdl-on .quiz-result .qr-metric-val:not(#_):not(#_) { color: #0A474C !important; }
html.zdl-on .quiz-result .qr-btn-primary:not(#_):not(#_) {
border: 0 !important; color: #2A1708 !important; background: linear-gradient(100deg, #D9A84E, #F6DC97 42%, #E8BE63 62%, #C9973B) !important;
box-shadow: inset 0 1px 0 rgba(255, 250, 230, .9), 0 12px 24px -12px rgba(232, 160, 60, .7) !important;
}
@media (max-width: 767px) {
html.zdl-on .quiz-question:not(#_):not(#_) { font-size: 19px !important; }
/* phone: pehle sawaal, phir estimate */
html.zdl-on .quiz-layout:not(#_):not(#_) { display: flex; flex-direction: column; }
html.zdl-on .quiz-layout > .quiz-card:not(#_):not(#_) { order: -1; }
html.zdl-on .quiz-card:not(#_):not(#_), html.zdl-on .quiz-live:not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .95) !important; }
}
html.zdl-on .quiz-result .qr-send-btn:not(#_):not(#_) {
border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(180deg, #2BD46A, #1DA851) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -12px rgba(29, 168, 81, .7) !important;
}
html.zdl-on .quiz-result .qr-send-btn:not(#_):not(#_) i { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* ZRQ-END */
/* ════ DEVELOPER DOCS — premium (zdl.js devDocs) ═════════════════════════ */
/* hero: copy baayein, live sandbox terminal daayein */
html.zdl-on .dv-hero .zdv-hgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
html.zdl-on .dv-hero { padding: 104px 0 80px !important; }
html.zdl-on .dv-hero h1 { font-size: clamp(40px, 5.2vw, 64px) !important; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px !important; }
html.zdl-on .dv-hero h1 .zdv-gold {
font: italic 600 1.08em/1 "Cormorant Garamond", Georgia, serif; padding: 0 .06em;
background: linear-gradient(100deg, #6E4A12 0%, #A8741F 24%, #D6A548 42%, #A06A1C 62%, #6E4A12 84%, #B07C26 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html.zdl-on .zdv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
html.zdl-on .zdv-chips span {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #0A474C;
background: rgba(255, 255, 255, .7); border: 1px solid rgba(10, 71, 76, .14);
}
html.zdl-on .zdv-chips span::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #C9973B; }
/* terminal + code window — gehra teal kaanch */
html.zdl-on .zdv-hcode, html.zdl-on .zdv-code {
position: relative; overflow: hidden; border-radius: 20px;
background: radial-gradient(80% 60% at 100% 0%, rgba(31, 163, 154, .22), rgba(31, 163, 154, 0) 70%), linear-gradient(160deg, #0F2F30, #0A1F1C);
border: 1px solid rgba(232, 190, 90, .22);
box-shadow: 0 1px 2px rgba(10, 31, 28, .2), 0 24px 56px rgba(10, 31, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.zdl-on .zdv-hcode::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #E8BE5A, transparent); opacity: .7; }
html.zdl-on .zdv-code { border-radius: 14px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(10, 31, 28, .12), 0 12px 28px rgba(10, 31, 28, .16); }
html.zdl-on .zdv-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
html.zdl-on .zdv-code .zdv-bar { height: 36px; }
html.zdl-on .zdv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; flex: none; }
html.zdl-on .zdv-bar i:nth-child(2) { background: #FEBC2E; }
html.zdl-on .zdv-bar i:nth-child(3) { background: #28C840; }
html.zdl-on .zdv-bar span { margin-left: 8px; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(219, 236, 235, .55) !important; }
html.zdl-on .zdv-copy {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer;
font: 600 12px/1 inherit; color: #DBECEB; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
transition: background .18s ease-out, border-color .18s ease-out, transform .15s ease-out;
}
html.zdl-on .zdv-copy:hover { background: rgba(255, 255, 255, .12); }
html.zdl-on .zdv-copy:active { transform: scale(.97); }
html.zdl-on .zdv-copy:focus-visible { outline: 2px solid #E8BE5A; outline-offset: 2px; }
html.zdl-on .zdv-copy.ok { color: #0A1F1C; background: #8FE3B0; border-color: #8FE3B0; }
html.zdl-on .zdv-copy span { color: inherit !important; -webkit-text-fill-color: currentcolor !important; }
html.zdl-on .zdv-copy svg { width: 14px; height: 14px; flex: none; }
html.zdl-on .zdv-hcode pre { margin: 0; padding: 24px; max-height: 360px; overflow: auto; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: #DBECEB; white-space: pre; }
html.zdl-on .zdv-code pre.dv-code:not(#_) { margin: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 16px 20px !important; }
/* nav: sticky glass + numbering + scroll-spy */
html.zdl-on .zdv-on .dv-nav:not(#_) {
top: 120px; padding: 24px 16px !important; border-radius: 20px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 251, 242, .82)) !important;
border: 1px solid rgba(201, 151, 59, .22) !important; box-shadow: 0 1px 2px rgba(74, 44, 10, .05), 0 12px 28px rgba(120, 74, 20, .08) !important;
}
html.zdl-on .zdv-on .dv-nav strong { padding: 0 8px; margin-bottom: 8px !important; color: #8A5F1A !important; }
html.zdl-on .zdv-on .dv-nav a:not(#_) {
display: flex !important; align-items: center; gap: 12px; padding: 8px !important; border-radius: 10px; font-size: 14px !important;
color: #3C4A47 !important; transition: background .18s ease-out, color .18s ease-out;
}
html.zdl-on .zdv-on .dv-nav a:not(#_):hover { background: rgba(232, 190, 90, .12); color: #0A474C !important; }
html.zdl-on .zdv-on .dv-nav a.is-on:not(#_) { background: linear-gradient(90deg, rgba(232, 190, 90, .22), rgba(232, 190, 90, .05)); color: #0A474C !important; font-weight: 700; box-shadow: inset 3px 0 0 #C9973B; }
html.zdl-on .zdv-ni { flex: none; width: 24px; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #B8862F; }
/* sections: gold number */
html.zdl-on .zdv-on .dv-card h2 { display: flex; align-items: center; gap: 16px; font-size: 24px !important; letter-spacing: -.015em; margin-bottom: 16px !important; }
html.zdl-on .zdv-n {
flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff;
background: linear-gradient(145deg, #23A3A9, #0A474C); box-shadow: 0 1px 2px rgba(10, 71, 76, .2), 0 6px 16px rgba(10, 71, 76, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html.zdl-on .zdv-on .dv-card h3 { font-size: 17px !important; margin-top: 32px !important; }
html.zdl-on .zdv-on .dv-card :not(pre) > code { padding: 2px 8px; border-radius: 6px; font-size: .88em; color: #8A3B12; background: rgba(232, 190, 90, .16); }
html.zdl-on .zdv-on .dv-table { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(10, 71, 76, .08); }
html.zdl-on .zdv-on .dv-table th:not(#_) { background: rgba(10, 71, 76, .04); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5B6563 !important; padding: 12px 16px; }
html.zdl-on .zdv-on .dv-table td:not(#_) { padding: 12px 16px; }
html.zdl-on .zdv-on .dv-table tbody tr:hover td { background: rgba(232, 190, 90, .06); }
html.zdl-on .zdv-note:not(#_) {
position: relative; padding: 16px 16px 16px 56px !important; border: 1px solid rgba(201, 151, 59, .28) !important; border-left-width: 1px !important;
border-radius: 16px !important; background: linear-gradient(180deg, rgba(255, 246, 222, .9), rgba(255, 251, 240, .7)) !important;
}
html.zdl-on .zdv-note::before {
content: "i"; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
font: italic 700 14px/1 Georgia, serif; color: #fff; background: linear-gradient(145deg, #E8BE5A, #B8862F);
}
@media (max-width: 991px) {
html.zdl-on .dv-hero .zdv-hgrid { grid-template-columns: 1fr; gap: 32px; }
html.zdl-on .zdv-on.dv-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
html.zdl-on .zdv-on .dv-nav:not(#_) {
position: sticky; top: 136px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 8px !important; border-radius: 16px !important;
background: rgba(255, 252, 245, .97) !important;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.zdl-on .zdv-on .dv-nav::-webkit-scrollbar { display: none; }
html.zdl-on .zdv-on .dv-nav strong { display: none !important; }
html.zdl-on .zdv-on .dv-nav a:not(#_) { flex: none; white-space: nowrap; min-height: 40px; padding: 0 12px !important; }
html.zdl-on .zdv-on .dv-nav a.is-on:not(#_) { box-shadow: inset 0 -2px 0 #C9973B; }
}
@media (max-width: 575px) {
html.zdl-on .dv-hero { padding: 72px 0 56px !important; }
html.zdl-on .zdv-hcode pre { padding: 16px; font-size: 12px; max-height: 260px; }
html.zdl-on .zdv-on .dv-card h2 { font-size: 20px !important; gap: 12px; }
html.zdl-on .zdv-n { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
html.zdl-on .zdv-on .dv-card:not(#_) { padding: 20px !important; }
}
/* zdv-end */
/* ── Compare ticks v3 (26 Oct; Aditya: "jyada dynamics ho gaya") — ZupiChat ke ticks saaf thos
hara gola + safed tick, patla halka ring; sone ki ring / 3D chamak / shadow HATAYE.
Competitor se farq sirf bharav (thos vs halka) se. */
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_):not(#_):not(#_) {
width: 30px !important; height: 30px !important; border-radius: 50% !important;
background: #1F9D6B !important; background-image: none !important;
box-shadow: 0 0 0 3px rgba(31, 157, 107, .14) !important; filter: none !important; animation: none !important;
}
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_):not(#_):not(#_) :is(svg, path) { stroke: #FFFFFF !important; color: #FFFFFF !important; filter: none !important; }
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_):not(#_):not(#_)::before,
html.zdl-on .cmp-wrap .cmp-col-zc .cmp-yes:not(#_):not(#_):not(#_):not(#_)::after { content: none !important; }
/* ════ STATUS PAGE — liquid glass + asli hara "sab theek" ═════════════
Sweep "Operational" ka hara sona bana deta tha — status page par hara =
bharosa, isliye .st-wrap/.st-overall SKIP me aur yahan hara wapas,
dhadakti bindu ke saath. Rows kaanch ki, icon shaant ivory tile. */
html.zdl-on .st-overall:not(#_):not(#_) {
gap: 12px; padding: 12px 24px 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
color: #0E5C3A !important; -webkit-text-fill-color: #0E5C3A !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(240, 253, 244, .7)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(22, 163, 74, .28), 0 10px 24px -12px rgba(22, 120, 70, .45) !important;
}
html.zdl-on :is(.st-overall .dot, .st-operational .st-dot):not(#_):not(#_) { position: relative; background: #16A34A !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18), 0 0 10px rgba(22, 163, 74, .6); }
html.zdl-on .st-overall .dot:not(#_):not(#_) { width: 10px; height: 10px; }
html.zdl-on :is(.st-overall .dot, .st-operational .st-dot):not(#_):not(#_)::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(22, 163, 74, .5);
animation: zdl-st-pulse 2.4s ease-out infinite;
}
@keyframes zdl-st-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
@keyframes zdl-st-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
}
html.zdl-on .st-wrap .st-metric:not(#_):not(#_) {
border: 0 !important; border-radius: 22px !important; padding: 28px 24px !important; text-align: center;
background: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(165deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .44) 50%, rgba(255, 246, 228, .6)) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .38), 0 22px 50px -28px rgba(120, 84, 24, .38) !important;
}
html.zdl-on .st-wrap .st-metric-val:not(#_):not(#_) { font-size: 44px !important; font-weight: 800 !important; line-height: 1; color: #0E5C3A !important; -webkit-text-fill-color: #0E5C3A !important; }
html.zdl-on .st-wrap .st-metric-label:not(#_):not(#_) { margin-top: 8px; font-size: 13px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A5F1A !important; -webkit-text-fill-color: #8A5F1A !important; }
html.zdl-on .st-wrap .st-section-title:not(#_):not(#_) { font-size: 12px !important; letter-spacing: .1em !important; color: #8A5F1A !important; -webkit-text-fill-color: #8A5F1A !important; margin-bottom: 16px !important; }
html.zdl-on .st-wrap .st-service:not(#_):not(#_) {
border: 0 !important; border-radius: 18px !important; padding: 18px 24px !important; margin-bottom: 12px !important; gap: 16px;
background: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 55%, rgba(255, 248, 234, .62)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .3), 0 10px 26px -18px rgba(120, 84, 24, .4) !important;
transition: box-shadow .2s ease-out;
}
html.zdl-on .st-wrap .st-service:not(#_):not(#_):hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .6), 0 14px 30px -18px rgba(120, 84, 24, .5) !important; }
html.zdl-on .st-wrap .st-service-icon:not(#_):not(#_) {
width: 44px; height: 44px; border-radius: 14px; font-size: 20px; flex-shrink: 0;
background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 246, 228, .72)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 151, 59, .35), 0 6px 12px -8px rgba(120, 84, 24, .32);
}
html.zdl-on .st-wrap .st-service-name:not(#_):not(#_) { font-size: 16px !important; font-weight: 700 !important; color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .st-wrap .st-service-sub:not(#_):not(#_) { font-size: 13px !important; color: #5F6E68 !important; -webkit-text-fill-color: #5F6E68 !important; margin-top: 4px !important; }
html.zdl-on .st-wrap .st-badge:not(#_):not(#_) { padding: 6px 14px !important; font-size: 12.5px !important; white-space: nowrap; }
html.zdl-on .st-wrap .st-operational:not(#_):not(#_) {
color: #11804A !important; -webkit-text-fill-color: #11804A !important;
background: linear-gradient(180deg, rgba(240, 253, 244, .95), rgba(220, 252, 231, .75)) !important;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(22, 163, 74, .26);
}
html.zdl-on .st-wrap .st-operational .st-dot:not(#_):not(#_) { width: 8px !important; height: 8px !important; }
html.zdl-on .st-wrap .st-incidents:not(#_):not(#_) {
border: 0 !important; border-radius: 20px !important;
background: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 55%, rgba(255, 248, 234, .62)) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(226, 182, 92, .3), 0 12px 30px -18px rgba(120, 84, 24, .4) !important;
}
html.zdl-on .st-wrap .st-incident:not(#_):not(#_) { border-bottom-color: rgba(184, 134, 47, .16) !important; }
html.zdl-on .st-wrap .st-incident-title:not(#_):not(#_) { color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-on .st-wrap :is(.st-incident-date, .st-uptime-label):not(#_):not(#_) { color: #7A6A50 !important; -webkit-text-fill-color: #7A6A50 !important; }
html.zdl-on .st-wrap .st-incident-body:not(#_):not(#_) { color: #44534E !important; -webkit-text-fill-color: #44534E !important; }
@media (max-width: 767px) {
html.zdl-on .st-wrap :is(.st-service, .st-metric, .st-incidents):not(#_):not(#_) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .86) !important; }
html.zdl-on .st-wrap .st-service:not(#_):not(#_) { padding: 16px !important; flex-wrap: wrap; row-gap: 12px; }
html.zdl-on .st-wrap .st-service-info:not(#_):not(#_) { flex: 1 1 100%; align-items: flex-start; gap: 12px; }
html.zdl-on .st-wrap .st-service-icon:not(#_):not(#_) { width: 40px; height: 40px; font-size: 18px; }
html.zdl-on .st-wrap .st-service > div:last-child:not(#_) { padding-left: 52px; } /* badge text ke neeche, kinare pe na kate */
}
/* ════ AUDIT FIX 26 Oct — teal CTA box ke andar ke saade link teal-pe-teal (adrishya) the;
film ka "Sound" label dark frame par grey. Site-wide audit (188 loads) se pakde. */
html.zdl-on :is(.cta-box, .sec-cta) > a:not([class]):not(#_):not(#_) {
color: #FFE7A8 !important; -webkit-text-fill-color: #FFE7A8 !important;
text-decoration: underline; text-decoration-color: rgba(255, 231, 168, .5); text-underline-offset: 4px; font-weight: 700;
}
html.zdl-on :is(.cta-box, .sec-cta) > a:not([class]):not(#_):not(#_):hover { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.zdl-on #zhSnd span:not(#_):not(#_) { color: rgba(255, 248, 230, .92) !important; -webkit-text-fill-color: rgba(255, 248, 230, .92) !important; }
/* ZFM-BEGIN ════ FOOTER — phone (zdl.js footerMob) ════════════════════════ */
@media (max-width: 767px) {
html.zdl-on footer.zfm-on .row:not(#_) { --bs-gutter-y: 0; row-gap: 0; }
html.zdl-on footer.zfm-on .row > .zfm-col:not(#_):not(#_) { flex: 0 0 100%; max-width: 100%; margin-top: 0 !important; }
html.zdl-on footer.zfm-on .zfm-acc:not(#_):not(#_) { margin: 0 !important; }
html.zdl-on footer.zfm-on .row > :first-child:not(#_) { margin-bottom: 24px; }
/* accordion */
html.zdl-on footer .zfm-acc { border-bottom: 1px solid rgba(226, 182, 92, .18); }
html.zdl-on footer .zfm-acc.zfm-first { border-top: 1px solid rgba(226, 182, 92, .18); }
html.zdl-on footer .zfm-acc .custom-footer-title:not(#_):not(#_) {
display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0 !important; padding: 0 4px;
cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
html.zdl-on footer .zfm-acc .custom-footer-title:not(#_):not(#_)::after { display: none !important; }
html.zdl-on footer .zfm-acc .custom-footer-title:focus-visible { outline: 2px solid #E2B65C; outline-offset: -2px; border-radius: 8px; }
html.zdl-on footer .zfm-chev {
position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%;
background: rgba(226, 182, 92, .1); box-shadow: inset 0 0 0 1px rgba(226, 182, 92, .35);
}
html.zdl-on footer .zfm-chev::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px;
border-right: 2px solid #E2B65C; border-bottom: 2px solid #E2B65C; transform: rotate(45deg); transition: transform .2s ease-out, margin .2s ease-out;
}
html.zdl-on footer .zfm-acc.open .zfm-chev::before { transform: rotate(-135deg); margin-top: -2px; }
html.zdl-on footer .zfm-acc ul.custom-footer-links:not(#_):not(#_) { display: none !important; }
html.zdl-on footer .zfm-acc.open ul.custom-footer-links:not(#_):not(#_) {
display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 0 0 12px !important; padding: 0 4px;
}
html.zdl-on footer .zfm-acc.open ul.custom-footer-links li:not(#_):not(#_) { margin: 0 !important; }
html.zdl-on footer .zfm-acc.open ul.custom-footer-links a:not(#_):not(#_) { display: flex !important; align-items: center; min-height: 44px; padding: 0 !important; line-height: 1.3 !important; font-size: 15px; }
/* contact: kasa hua */
html.zdl-on footer .custom-footer-contact li:not(#_):not(#_) { margin-bottom: 8px !important; min-height: 44px; align-items: center; }
html.zdl-on footer .custom-footer-contact:not(#_):not(#_) { margin-bottom: 0 !important; }
html.zdl-on footer .share-btn-wrapper:not(#_):not(#_) { margin-top: 16px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html.zdl-on footer .custom-footer-desc:not(#_):not(#_) { font-size: 15px !important; line-height: 1.6 !important; }
/* Diwali card: chhota */
html.zdl-on footer .zdl-sign:not(#_):not(#_) { padding: 24px 16px !important; margin-bottom: 32px !important; }
html.zdl-on footer .zdl-sign .zdl-sign-lamps:not(#_) { transform: scale(.82); transform-origin: 50% 100%; margin-bottom: -8px; }
html.zdl-on footer .zdl-sign-h:not(#_):not(#_) { font-size: 44px !important; margin: 4px 0 8px !important; }
html.zdl-on footer .zdl-sign .zdl-sign-t:not(#_):not(#_) { font-size: 17px !important; line-height: 1.45 !important; }
html.zdl-on footer .custom-footer-bottom:not(#_):not(#_) { margin-top: 32px !important; }
}
/* ZFM-END */