:root{ --bg:#ffffff; --card:rgba(255,255,255,.88); --text:#1b1022; --muted:#6b5b73; --purple:#5b2be0; --purple2:#7a3cff; --red:#e11d48; --red2:#ff2f5a; --border:rgba(91,43,224,.16); --shadow:0 18px 50px rgba(28,9,60,.10); --radius:18px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); /* ✅ main base background (stays everywhere) */ background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%); overflow-x:hidden; } /* ============================ GIF-like Animated Background (pure CSS, lightweight) ============================ */ body::before{ content:""; position:fixed; inset:-40px; z-index:-2; pointer-events:none; /* moving glow blobs */ background: radial-gradient(520px 420px at 12% 18%, rgba(122,60,255,.24), transparent 60%), radial-gradient(540px 440px at 88% 14%, rgba(225,29,72,.18), transparent 62%), radial-gradient(560px 480px at 50% 92%, rgba(91,43,224,.16), transparent 64%), radial-gradient(420px 360px at 70% 62%, rgba(255,47,90,.12), transparent 62%), radial-gradient(420px 360px at 28% 70%, rgba(122,60,255,.12), transparent 62%); filter: blur(2px); transform: translate3d(0,0,0); animation: bgFloat 14s ease-in-out infinite; } /* ============================ Dense Mesh Pattern (Option 2) Vertical slow movement ============================ */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; /* visible but classy */ opacity:.28; /* 2 layers: 1) Mesh SVG pattern (repeating) 2) Soft wave gradient overlay */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%235b2be0' stroke-opacity='0.55' stroke-width='1'%3E%3Cpath d='M10 40 L90 10 L160 40 L210 15'/%3E%3Cpath d='M10 110 L70 70 L140 95 L210 70'/%3E%3Cpath d='M10 180 L85 150 L155 180 L210 155'/%3E%3Cpath d='M35 10 L10 40 L35 70 L70 55 L90 10'/%3E%3Cpath d='M110 10 L90 10 L70 55 L110 85 L160 40'/%3E%3Cpath d='M190 10 L160 40 L175 85 L210 70 L210 15'/%3E%3Cpath d='M35 70 L10 110 L35 140 L85 150 L110 85'/%3E%3Cpath d='M175 85 L110 85 L85 150 L155 180 L210 155'/%3E%3Cpath d='M35 140 L10 180 L35 210'/%3E%3Cpath d='M155 180 L110 210'/%3E%3C/g%3E%3Cg fill='%23ff2f5a' fill-opacity='0.12'%3E%3Ccircle cx='90' cy='10' r='2'/%3E%3Ccircle cx='70' cy='55' r='2'/%3E%3Ccircle cx='160' cy='40' r='2'/%3E%3Ccircle cx='110' cy='85' r='2'/%3E%3Ccircle cx='85' cy='150' r='2'/%3E%3Ccircle cx='155' cy='180' r='2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(900px 600px at 15% 20%, rgba(122,60,255,.22), transparent 60%), radial-gradient(900px 600px at 85% 75%, rgba(255,47,90,.14), transparent 62%); background-repeat: repeat, no-repeat, no-repeat; /* mesh size + soft waves scale */ background-size: 10px 180px, 100% 100%, 100% 100%; /* start positions */ background-position: 0 0, 0 0, 0 0; /* vertical slow movement */ animation: meshDriftY 28s linear infinite; mix-blend-mode: multiply; } @keyframes meshDriftY{ 0%{ background-position: 0 0, 0 0, 0 0; } 100%{ /* mesh goes down slowly */ background-position: 0 520px, 0 0, 0 0; } } /* Reduce motion support */ @media (prefers-reduced-motion: reduce){ body::after{ animation:none !important; } } /* optional shimmer sweep - "gif" vibe */ .bg-shimmer{ position:fixed; inset:-50%; z-index:-1; pointer-events:none; background: linear-gradient(115deg, transparent 0%, rgba(122,60,255,.10) 20%, rgba(225,29,72,.08) 45%, transparent 70% ); transform: rotate(0deg); opacity:.35; mix-blend-mode:multiply; animation: shimmerMove 9s ease-in-out infinite; } /* If you want shimmer, add this one line in HTML just after :

*/ @keyframes bgFloat{ 0% { transform: translate3d(0,0,0) scale(1); } 35% { transform: translate3d(18px,-10px,0) scale(1.02); } 70% { transform: translate3d(-14px,12px,0) scale(1.01); } 100% { transform: translate3d(0,0,0) scale(1); } } @keyframes patternDrift{ 0% { background-position: 0 0; } 100% { background-position: 180px 260px; } } @keyframes shimmerMove{ 0% { transform: translate3d(-6%, -6%, 0) rotate(8deg); } 50% { transform: translate3d(6%, 6%, 0) rotate(8deg); } 100% { transform: translate3d(-6%, -6%, 0) rotate(8deg); } } /* Reduce motion support */ @media (prefers-reduced-motion: reduce){ body::before, body::after, .bg-shimmer{ animation:none !important; } } /* ============================ Topbar ============================ */ .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#D3D3D3; border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px); } .brand{display:flex; gap:10px; align-items:center} .logo{ width:40px; height:40px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; } .logo img{ width:100%; height:100%; object-fit:cover; /* ya contain agar full logo show karna hai */ } .brand-text{line-height:1.1} .brand-name{font-weight:800; letter-spacing:.2px} .brand-tag{font-size:12px;color:var(--muted)} .icon-btn{ width:42px;height:42px;border-radius:14px; border:0px; background:#D3D3D3; display:grid;place-items:center; cursor:pointer; } .icon-btn span{ display:block; width:18px;height:2px;border-radius:999px; background:linear-gradient(90deg, var(--purple), var(--red)); margin:2px 0; } .icon-btn.close{font-size:18px; color:var(--text)} .icon-btn.close span{display:none} /* ============================ Drawer ============================ */ .drawer{ position:fixed; z-index:60; top:0; right:-320px; width:320px; height:100vh; background:#D3D3D3; border-left:1px solid rgba(0,0,0,.06); box-shadow: -20px 0 60px rgba(0,0,0,.12); transition:right .25s ease; padding:14px; display:flex; flex-direction:column; gap:14px; backdrop-filter: blur(10px); } .drawer.open{right:0} .drawer-head{display:flex; align-items:center; justify-content:space-between} .drawer-title{font-weight:800} .drawer-nav{display:flex; flex-direction:column; gap:10px} .drawer-nav a{ text-decoration:none; color:var(--text); padding:12px 12px; border-radius:14px; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.70); /* ✅ no gradient rectangle */ } .drawer-nav a.chip{ border:0; color:#fff; background: linear-gradient(135deg, var(--purple), var(--red)); } .drawer-footer{margin-top:auto; display:flex; flex-direction:column; gap:10px} .pill{ text-decoration:none; display:flex;justify-content:center;align-items:center; padding:12px 14px;border-radius:16px; background: linear-gradient(135deg, var(--purple), var(--red)); color:#fff;font-weight:700; } .pill.outline{ background:#fff;color:var(--text); border:1px solid rgba(0,0,0,.10); } .pill.small{padding:8px 10px; border-radius:999px; font-size:12px; font-weight:800} .hint{font-size:12px;color:var(--muted)} .backdrop{ position:fixed; inset:0; z-index:55; background:rgba(10,5,20,.35); backdrop-filter: blur(2px); } /* ============================ Layout ============================ */ .main{padding:12px 12px 92px} .page{display:none} .page.active{display:block} /* ✅ HERO: no rectangle gradient */ .hero{ padding:14px; border-radius:var(--radius); background: rgba(255,255,255,0.78); backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow); } .hero-badge{ display:inline-flex; gap:8px; padding:8px 10px; border-radius:999px; font-size:12px; color:#2b1533; background:rgba(255,255,255,.78); border:1px solid rgba(0,0,0,.06); } h1{ margin:12px 0 8px; font-size: clamp(26px, 6.2vw, 42px); line-height:1.06; letter-spacing:-.6px; } .grad{ background: linear-gradient(90deg, var(--purple), var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; } .sub{ margin:0; color:var(--muted); font-size:14px; line-height:1.6; } .hero-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap} .btn{ border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:16px; text-decoration:none; font-weight:800; font-size:14px; } .btn.primary{ color:#fff; background: linear-gradient(135deg, var(--purple), var(--red)); box-shadow: 0 14px 30px rgba(91,43,224,.16); } .btn.ghost{ background:#fff; color:var(--text); border:1px solid rgba(0,0,0,.10); } .btn.small{padding:10px 12px; border-radius:14px; font-size:13px} .link{color:var(--purple); text-decoration:none; font-weight:800; font-size:13px} /* Trust cards */ .trust{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px} .trust-card{ padding:12px; border-radius:16px; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); border:1px solid rgba(0,0,0,.06); } .t-title{font-weight:900} .t-sub{font-size:12px;color:var(--muted); margin-top:2px} /* Sections */ .section{margin-top:14px} .section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 2px 10px; } .section h2{ margin:0; font-size:18px; letter-spacing:-.2px; } .right{display:flex; align-items:center; gap:10px} /* Grid cards */ .grid{display:grid; grid-template-columns:1fr; gap:10px} /* ✅ CARD: no gradient rectangle */ .card{ background: rgba(255,255,255,0.88); backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:12px; box-shadow: 0 12px 30px rgba(0,0,0,.05); } .card-ico{font-size:24px} .card-title{font-weight:900; margin-top:6px} .card-text{color:var(--muted); font-size:13px; margin-top:2px; line-height:1.5} .mini-btn{ margin-top:10px; width:100%; padding:10px 12px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background:#fff; font-weight:900; cursor:pointer; } .mini-btn:hover{border-color: rgba(91,43,224,.30)} /* Notes */ .note{ padding:10px 12px; border-radius:16px; background: rgba(255,255,255,.80); backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); color: #2b1533; font-size:13px; } .note.soft{ background: rgba(255,255,255,.80); } /* ✅ removed gradient */ .note.small{font-size:12px} /* Services list */ .service-list{display:flex; flex-direction:column; gap:10px; margin-top:10px} .svc{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:18px; background: rgba(255,255,255,0.88); /* ✅ no gradient rectangle */ backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); } .svc-left{display:flex; gap:10px; align-items:center} .svc-ico{ width:42px;height:42px;border-radius:16px; display:grid;place-items:center; background: rgba(122,60,255,.08); /* simple */ border:1px solid rgba(0,0,0,.06); } .svc-title{font-weight:900} .svc-sub{font-size:12px; color:var(--muted); margin-top:2px} .svc-right{display:flex; flex-direction:column; align-items:flex-end; gap:8px} .price{font-weight:900; color:#2b1533} /* Steps */ .steps{display:flex; flex-direction:column; gap:10px; margin-top:10px} .step{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:18px; background: rgba(255,255,255,0.88); /* ✅ no gradient */ backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); } .step-no{ width:34px;height:34px;border-radius:14px; display:grid; place-items:center; font-weight:900; color:#fff; background: linear-gradient(135deg, var(--purple), var(--red)); } .step-title{font-weight:900} .step-text{font-size:13px; color:var(--muted); line-height:1.5; margin-top:2px} /* Contact */ .contact-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px} .contact-actions{display:flex; gap:10px; margin-top:10px} .bullets{margin:10px 0 0; padding-left:16px; color:var(--muted); font-size:13px} .form-card{ margin-top:10px; padding:12px; border-radius:18px; background: rgba(255,255,255,0.88); backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); } .form-head{display:flex; align-items:center; justify-content:space-between; gap:12px} .form-title{font-weight:900} .form-sub{font-size:12px; color:var(--muted); margin-top:2px} /* Form */ label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:800; margin-top:10px} input,textarea{ width:100%; padding:12px 12px; border-radius:16px; border:1px solid rgba(0,0,0,.10); outline:none; font-size:14px; background: rgba(255,255,255,.92); } input:focus, textarea:focus{border-color: rgba(91,43,224,.35)} .row{display:grid; grid-template-columns:1fr; gap:10px} /* Checkout */ .checkout{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px} .cart{display:flex; flex-direction:column; gap:10px; margin-top:10px} .cart-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:10px 10px; border-radius:16px; background: rgba(255,255,255,.82); /* ✅ no gradient */ backdrop-filter: blur(7px); border:1px solid rgba(0,0,0,.06); } .ci-title{font-weight:900} .ci-sub{font-size:12px;color:var(--muted);margin-top:2px; line-height:1.4} .ci-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px} .ci-price{font-weight:900} .ci-btn{ padding:8px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.10); background:#fff; font-weight:900; cursor:pointer; } .divider{height:1px; background: rgba(0,0,0,.06); margin:12px 0} .tot-row{display:flex; justify-content:space-between; align-items:center} .totals .hint{margin-top:6px} /* ✅ Paybox no gradient rectangle */ .paybox{ margin-top:12px; padding:12px; border-radius:18px; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,0.88); backdrop-filter: blur(7px); } .pay-title{font-weight:900; margin-bottom:8px} .radio{ display:flex; gap:10px; align-items:flex-start; padding:10px 10px; border-radius:16px; border:1px solid rgba(0,0,0,.08); background:#fff; margin-top:8px; font-weight:700; } .radio input{margin-top:3px} .muted{display:block; font-size:12px; color:var(--muted); margin-top:2px} .cta-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; } /* Bottom Bar */ .bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 12px; background:rgba(255,255,255,.88); border-top:1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px); display:flex; gap:10px; } .bb-left{ flex:1; border-radius:18px; border:1px solid rgba(0,0,0,.10); background:#fff; padding:12px 12px; font-weight:900; display:flex; gap:10px; align-items:center; justify-content:center; cursor:pointer; } .dot{ width:10px;height:10px;border-radius:999px; background: linear-gradient(135deg, var(--purple), var(--red)); display:none; } .bb-right{ width:42%; border-radius:18px; background: linear-gradient(135deg, var(--purple), var(--red)); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; text-decoration:none; } /* Responsive */ @media (min-width: 720px){ .main{max-width:980px; margin:0 auto; padding-bottom:24px} .bottom-bar{display:none} .trust{grid-template-columns:repeat(3, 1fr)} .grid{grid-template-columns:repeat(2, 1fr)} .row{grid-template-columns:1fr 1fr} .checkout{grid-template-columns:1.1fr .9fr} .contact-grid{grid-template-columns:1fr 1fr} }