:root{
 --a:#6c5ce7;--a2:#8b7cf6;--dark:#101828;--text:#475467;--muted:#667085;
 --line:#e4e7ec;--bg:#f5f7fb;--white:#fff;--green:#16a34a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
button,input,textarea{font:inherit}button{cursor:pointer}
.nav{height:68px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #edf0f4;display:flex;align-items:center;justify-content:space-between;padding:0 max(15px,calc((100% - 1240px)/2));position:sticky;top:0;z-index:100}
.logo{font-weight:800;font-size:21px;color:var(--dark);text-decoration:none}.logo span{color:var(--a)}
.home{border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:#344054;text-decoration:none;font-size:12px;font-weight:700;background:#fff}
.page{max-width:1240px;margin:auto;padding:30px 20px 65px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.05fr);gap:28px;align-items:stretch;margin-bottom:24px}
.hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ey{display:inline-flex;align-self:flex-start;gap:7px;align-items:center;background:#eeeafe;color:#5d4ed0;border-radius:999px;padding:6px 11px;font-size:10px;font-weight:800;text-transform:uppercase}
.hero h1{font-size:clamp(28px,4vw,42px);line-height:1.08;color:var(--dark);margin:10px 0 8px;letter-spacing:-1px}
.hero p{font-size:14px;color:var(--muted);max-width:760px}
.hero-promise{margin-top:16px;padding:13px 15px;border-left:4px solid var(--a);background:#fff;border:1px solid #e8e5ff;border-left-width:4px;border-radius:10px;color:#344054;font-size:13px;line-height:1.5;box-shadow:0 8px 22px #1018280b}
.hero-promise strong{display:block;color:var(--dark);font-size:14px;margin-bottom:3px}
.hero-slider{position:relative;min-width:0}
.hero-slider-window{position:relative;overflow:hidden;border:1px solid #e4e7ec;border-radius:20px;background:#fff;box-shadow:0 16px 45px #10182812;min-height:245px}
.hero-slides{display:flex;transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform}
.hero-slide{min-width:100%;min-height:245px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;overflow:hidden}
.hero-slide-copy{position:relative;z-index:2;max-width:48%}
.hero-slide-kicker{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#6c5ce7;margin-bottom:6px}
.hero-slide h3{font-size:20px;line-height:1.1;color:var(--dark);margin-bottom:7px}
.hero-slide p{font-size:10px;color:#667085;line-height:1.45}
.hero-slide-art{position:relative;z-index:1;flex:1;min-width:0;height:185px;display:grid;place-items:center}
.hero-slide:nth-child(1){background:linear-gradient(135deg,#fbfbff,#f0efff)}
.hero-slide:nth-child(2){background:linear-gradient(135deg,#fffdf8,#f5efe4)}
.hero-slide:nth-child(3){background:linear-gradient(135deg,#f8fbff,#edf6ff)}
.hero-slide:nth-child(4){background:linear-gradient(135deg,#f8fbf9,#eef8f3)}
.hero-card-art{width:190px;aspect-ratio:1.75/1;border-radius:10px;box-shadow:0 18px 30px #1018282b;position:relative;overflow:hidden;background:linear-gradient(135deg,#111827,#6c5ce7);transform:rotate(-5deg)}
.hero-card-art:before{content:"";position:absolute;inset:0 0 0 58%;background:#ffffff18;transform:skewX(-18deg)}
.hero-card-art .ha-line{position:absolute;left:18px;top:20px;width:95px;height:12px;border-radius:5px;background:#fff}
.hero-card-art .ha-line:nth-child(2){top:44px;width:65px;height:7px;background:#ffffffbb}
.hero-card-art .ha-line:nth-child(3){top:66px;width:85px;height:5px;background:#ffffff75}
.hero-card-art.alt{background:#fff;border:1px solid #dfe3e8;transform:rotate(5deg)}
.hero-card-art.alt:before{left:auto;right:0;background:linear-gradient(160deg,#6c5ce7,#101828);width:38%;transform:none}
.hero-card-art.alt .ha-line{background:#111827}
.hero-card-stack{position:relative;width:210px;height:175px}
.hero-card-stack .hero-card-art{position:absolute;left:5px;top:25px;width:175px}
.hero-card-stack .hero-card-art:nth-child(2){left:28px;top:45px;transform:rotate(6deg)}
.hero-box-art{position:relative;width:170px;height:130px}
.hero-box{position:absolute;left:28px;top:30px;width:120px;height:78px;background:linear-gradient(135deg,#d9c09a,#b48b55);transform:skewY(7deg);border-radius:6px;box-shadow:0 15px 25px #10182825}
.hero-box:before{content:"";position:absolute;left:0;top:-18px;width:120px;height:25px;background:#ead7b8;transform:skewX(-34deg);border-radius:5px}
.hero-box:after{content:"WEBSINTECH";position:absolute;left:26px;top:30px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em}
.hero-pack-card{position:absolute;right:2px;top:5px;width:78px;aspect-ratio:1.75/1;border-radius:5px;background:#111827;transform:rotate(9deg);box-shadow:0 8px 15px #1018282b}
.hero-pack-card:after{content:"";position:absolute;left:10px;top:10px;width:38px;height:5px;border-radius:3px;background:#fff}
.delivery-art{position:relative;width:210px;height:170px}
.delivery-ring{position:absolute;inset:20px;border:2px dashed #6c5ce766;border-radius:50%}
.delivery-pin{position:absolute;width:54px;height:54px;border-radius:50% 50% 50% 8px;background:#6c5ce7;transform:rotate(-45deg);left:20px;top:50px;box-shadow:0 12px 25px #6c5ce73d}
.delivery-pin:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:18px;top:18px}
.delivery-box{position:absolute;right:18px;top:52px;width:58px;height:48px;background:#f59e0b;border-radius:7px;box-shadow:0 12px 22px #f59e0b30}
.delivery-box:before{content:"";position:absolute;left:26px;top:0;width:7px;height:48px;background:#fff8}
.delivery-badge{position:absolute;left:62px;bottom:12px;background:#fff;border:1px solid #e6e8ed;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800;color:#344054;box-shadow:0 8px 18px #10182812}
.india-art{position:relative;width:220px;height:170px;display:grid;place-items:center}
.india-map{width:125px;height:150px;background:linear-gradient(145deg,#dcfce7,#86efac);clip-path:polygon(46% 0,64% 8%,71% 22%,87% 30%,80% 43%,92% 57%,76% 65%,73% 80%,61% 75%,54% 100%,44% 84%,34% 77%,25% 61%,13% 55%,20% 41%,10% 29%,24% 21%,31% 9%);filter:drop-shadow(0 12px 15px #16a34a25);position:relative}
.india-route{position:absolute;width:155px;height:100px;border:2px dashed #16a34a99;border-radius:50%;transform:rotate(-18deg)}
.pan-badge{position:absolute;right:4px;bottom:13px;background:#fff;border:1px solid #dcefe4;border-radius:10px;padding:8px 11px;box-shadow:0 8px 18px #10182812}
.pan-badge strong{display:block;font-size:12px;color:#15803d}
.pan-badge span{font-size:8px;color:#667085}
.hero-slider-controls{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.hero-dots{display:flex;gap:5px}
.hero-dot{width:7px;height:7px;border:0;border-radius:50%;background:#cbd5e1;padding:0}
.hero-dot.active{width:19px;border-radius:99px;background:#6c5ce7}
.hero-arrows{display:flex;gap:5px}
.hero-arrow{width:27px;height:27px;border:1px solid #e4e7ec;background:#fff;color:#344054;border-radius:50%;font-size:10px;box-shadow:0 5px 14px #10182812}
.grid{display:grid;grid-template-columns:410px 1fr;gap:20px;align-items:start}
.panel{background:#fff;border:1px solid #e8ebf0;border-radius:20px;box-shadow:0 16px 45px #10182812}
.controls,.preview{padding:20px}
.stepbar{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px}
.stepitem{display:flex;align-items:center;gap:7px;color:#98a2b3;font-size:10px;font-weight:800}
.stepitem .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef0f4;color:#667085;flex:none}
.stepitem.active{color:#4f46b8}.stepitem.active .dot{background:#eeeafe;color:#5d4ed0}
.stepitem.current .dot{background:var(--a);color:#fff;box-shadow:0 0 0 4px #6c5ce71a}
.stepitem:after{content:"";height:3px;background:#e9eaf0;flex:1;border-radius:99px}.stepitem.active:after{background:#d9d3ff}
.stepitem:last-child:after{display:none}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.section-head h2{font-size:16px;color:var(--dark)}
.section-head span{font-size:10px;color:#98a2b3;font-weight:600}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.choice{border:1.5px solid #e8ebf0;background:#fff;border-radius:13px;padding:11px;text-align:left;transition:.18s;position:relative}
.choice:hover{border-color:#b9b1ff;transform:translateY(-1px)}
.choice.selected{border-color:var(--a);box-shadow:0 0 0 3px #6c5ce714;background:#fcfbff}
.choice .ico{width:34px;height:34px;border-radius:10px;background:#f2f0ff;color:#5d4ed0;display:grid;place-items:center;margin-bottom:8px}
.choice strong{display:block;color:#344054;font-size:11px;margin-bottom:2px}.choice small{display:block;color:#98a2b3;font-size:9px;line-height:1.35}
.choice .tick{display:none;position:absolute;right:7px;top:7px;background:var(--a);color:#fff;width:19px;height:19px;border-radius:50%;font-size:9px;place-items:center}
.choice.selected .tick{display:grid}
.design-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:18px}
.design{border:1.5px solid #e8ebf0;background:#fff;border-radius:12px;padding:5px;text-align:left;position:relative;transition:.18s}
.design:hover{border-color:#b9b1ff}.design.selected{border-color:var(--a);box-shadow:0 0 0 3px #6c5ce714}
.mini-card{height:62px;border-radius:8px;position:relative;overflow:hidden}
.mini-card:after{content:"";position:absolute;inset:auto -15px -25px auto;width:75px;height:75px;border-radius:50%;background:#ffffff20}
.mini-content{position:absolute;left:10px;top:10px;width:58%;height:10px;border-radius:4px;background:#fff}
.mini-content:after{content:"";position:absolute;left:0;top:17px;width:70%;height:5px;border-radius:3px;background:#ffffff70}
 .mini-1{background:linear-gradient(135deg,#111827,var(--a))}
.mini-2{background:#fff;border:1px solid #dfe3e8}.mini-2:before{content:"";position:absolute;left:0;top:0;width:28%;height:100%;background:var(--a);clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}.mini-2 .mini-content{background:#111827}.mini-2 .mini-content:after{background:#98a2b3}
.mini-3{background:linear-gradient(135deg,var(--a),#111827)}
.mini-4{background:#fff;border-left:7px solid var(--a)}.mini-4 .mini-content{background:#111827}.mini-4 .mini-content:after{background:#667085}
.mini-5{background:#111827;border:5px solid var(--a)}.mini-5 .mini-content{left:15px;top:15px}
.mini-6{background:linear-gradient(145deg,#f8fafc 0 58%,var(--a) 58%)}.mini-6 .mini-content{background:#111827}.mini-6 .mini-content:after{background:#667085}
.mini-7{background:#fff;border:1px solid #e2e5ea}.mini-7:before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:var(--a)}.mini-7 .mini-content{top:27px;background:#111827}.mini-7 .mini-content:after{background:#98a2b3}
.mini-8{background:linear-gradient(135deg,#fffdf8,#f2eee5);border:1px solid #e5dece}.mini-8:before{content:"";position:absolute;inset:7px;border:1px solid var(--a);border-radius:6px}.mini-8 .mini-content{background:#3b3f46;top:15px;left:15px;width:52%}.mini-8 .mini-content:after{background:#9aa0aa}
.mini-9{background:#f8fafc;border:1px solid #dfe3e8}.mini-9:before{content:"";position:absolute;left:0;top:0;width:100%;height:7px;background:var(--a)}.mini-9 .mini-content{background:#111827}.mini-9 .mini-content:after{background:#98a2b3}
.mini-10{background:#fff;border:2px solid var(--a)}.mini-10:before{content:"";position:absolute;inset:7px;border:1px solid var(--a);border-radius:5px;opacity:.55}.mini-10 .mini-content{background:#111827;left:13px;top:13px;width:55%}.mini-10 .mini-content:after{background:#98a2b3}
.mini-11{background:linear-gradient(120deg,#101828,var(--a));}.mini-11:before{content:"";position:absolute;left:-10%;top:-25%;width:50%;height:160%;border:1px solid #ffffff35;transform:rotate(30deg)}
.mini-12{background:#fff;border:1px solid #dfe3e8}.mini-12:before{content:"";position:absolute;right:0;top:0;width:34%;height:100%;background:linear-gradient(160deg,var(--a),#111827);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}.mini-12 .mini-content{background:#111827}.mini-12 .mini-content:after{background:#98a2b3}
.mini-13{background:#f4f6f8;border:1px solid #dfe3e8}.mini-13:before{content:"";position:absolute;left:12px;top:9px;width:3px;height:44px;background:var(--a)}.mini-13 .mini-content{background:#111827;left:22px}.mini-13 .mini-content:after{background:#98a2b3}
.mini-14{background:#fff;border:1px solid #dfe3e8}.mini-14:before{content:"";position:absolute;right:-10px;bottom:-28px;width:65px;height:65px;border:2px solid var(--a);border-radius:50%;transform:rotate(-18deg)}.mini-14 .mini-content{background:#111827}.mini-14 .mini-content:after{background:#98a2b3}
.mini-15{background:linear-gradient(145deg,#101828,#111827 55%,var(--a));border:1px solid #202938}.mini-15:before{content:"";position:absolute;inset:7px;border:1px solid #ffffff22;border-radius:7px}
.mini-16{background:linear-gradient(135deg,#fbfaf7,#eef4ef);border:1px solid #dfe5dc}.mini-16:before{content:"";position:absolute;right:8px;top:8px;width:38px;height:48px;border-radius:50%;background:var(--a);opacity:.22;transform:rotate(20deg)}.mini-16 .mini-content{background:#26312a}.mini-16 .mini-content:after{background:#7b877f}
.mini-17{background:linear-gradient(135deg,#0b1220,#101828 55%,var(--a))}.mini-17:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:13px 13px}
.mini-18{background:#fff;border:1px solid #dfe3e8}.mini-18:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff00 0 50%,var(--a) 50% 100%);opacity:.14}.mini-18 .mini-content{background:#111827}.mini-18 .mini-content:after{background:#98a2b3}
.design b{display:block;font-size:9px;color:#344054;padding:4px 4px 1px}.design small{display:block;font-size:7px;color:#98a2b3;padding:0 4px 4px}
.design .dtick{display:none;position:absolute;right:6px;top:6px;background:var(--a);color:#fff;width:18px;height:18px;border-radius:50%;place-items:center;font-size:8px}.design.selected .dtick{display:grid}

.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px}
.color{border:1.5px solid #e4e7ec;background:#fff;border-radius:10px;padding:6px;text-align:center;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.swatch{width:30px;height:22px;border-radius:7px;display:block;border:1px solid #d9dde5;box-shadow:inset 0 0 0 1px #ffffff55}.color small{font-size:7px;font-weight:800;color:#667085;line-height:1.1}
.color.selected{border-color:var(--a);box-shadow:0 0 0 3px #6c5ce714}.color.selected small{color:#4f46b8}

.field{margin-bottom:11px}.field label{display:block;font-size:10px;font-weight:800;color:#344054;margin-bottom:5px}
.field input,.field textarea{width:100%;padding:10px 11px;border:1px solid #dfe3e8;border-radius:9px;outline:0;font-size:12px;background:#fff;color:#101828}
.number-type{margin-top:0}.number-type-title{font-size:9px;font-weight:700;color:#667085;margin-bottom:6px}.number-inline{display:block;width:100%}.number-type-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:6px;width:100%}.number-option{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:38px;padding:7px 8px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;cursor:pointer;font-size:9px;font-weight:700;line-height:1.1;color:#344054;transition:.15s;white-space:nowrap;box-sizing:border-box}.number-option:hover{border-color:#b9b1ff;background:#fcfbff}.number-option input{appearance:none;-webkit-appearance:none;width:14px;height:14px;min-width:14px;margin:0;position:relative;border:1.5px solid #98a2b3;border-radius:3px;background:#fff;box-sizing:border-box;flex:none}.number-option input:checked{border-color:var(--a);background:var(--a)}.number-option input:checked::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.number-option span{display:block;min-width:0;line-height:1.1;letter-spacing:-.05px}.number-option:has(input:checked){border-color:var(--a);background:#f7f5ff;color:#4f46b8;box-shadow:0 0 0 2px #6c5ce712}.number-option.blank{justify-content:flex-start;padding:7px 8px}.number-option.blank .blank-label{display:block}.number-inline #wa{display:block;width:100%;min-width:0;margin:8px 0 0}
.field input:focus,.field textarea:focus{border-color:#8b7cf6;box-shadow:0 0 0 3px #6c5ce71a}.field textarea{min-height:55px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.logo-box{border:1px dashed #cfd4dc;background:#fafbfc;border-radius:10px;padding:10px}
.logo-box input{padding:0;border:0;box-shadow:none;background:transparent}
.logo-help{font-size:9px;color:#98a2b3;margin-top:5px}.logo-help i{color:var(--a);margin-right:4px}
.notice{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;padding:10px;border-radius:9px;font-size:10px;font-weight:700;margin-top:2px}

.preview{min-height:690px}.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.phead h2{font-size:16px;color:var(--dark)}
.selected-info{font-size:10px;color:#667085}.selected-info b{color:#4f46b8}
.toggle{background:#f2f4f7;padding:3px;border-radius:8px}.toggle button{border:0;background:transparent;padding:6px 10px;border-radius:6px;font-size:10px;font-weight:800;color:#667085}.toggle button.on{background:#fff;color:#5d4ed0}
.stage{min-height:475px;border-radius:16px;background:radial-gradient(circle at 15% 15%,#6c5ce710,transparent 30%),linear-gradient(135deg,#fafbfc,#edf0f5);display:flex;align-items:center;justify-content:center;padding:40px;overflow:hidden}

.card{--c:#6c5ce7;--darkc:#101828;--ink:#fff;width:min(760px,100%);aspect-ratio:1.75/1;border-radius:15px;position:relative;overflow:hidden;padding:7.5%;color:var(--ink);box-shadow:0 25px 55px #10182830;background:linear-gradient(135deg,var(--darkc),var(--c));display:flex;align-items:center}
.card:before,.card:after{content:"";position:absolute;pointer-events:none}
.card:after{width:280px;height:280px;border-radius:50%;right:-110px;bottom:-150px;background:#ffffff18}
.cardcontent{position:relative;z-index:3;max-width:74%;width:74%;margin:0}
.name{font-size: clamp(18px, 3.2vw, 32px);font-weight:800;line-height:1.05;letter-spacing:-.7px;color:var(--ink)}
.role{font-size:15px;margin:7px 0 16px;color:var(--ink);opacity:1}
.company{font-size:18px;font-weight:800;margin-bottom:10px;white-space:pre-line;color:var(--ink);opacity:1}
.contact{font-size:clamp(8px,1.4vw,12px);line-height:1.7;color:var(--ink);opacity:.9;text-decoration:none !important;-webkit-text-decoration:none !important}.contact *{text-decoration:none !important;-webkit-text-decoration:none !important}.contact-row{display:flex;align-items:flex-start;gap:7px;min-width:0}.contact-row .contact-icon{width:12px;min-width:12px;text-align:center;color:var(--ink);opacity:.95;font-size:.9em;line-height:1.8}.contact-row .contact-value{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.logo-wrap{position:absolute;z-index:4;right:7%;top:9%;width:auto;height:auto;max-width:28%;max-height:36%;display:none;align-items:center;justify-content:center;padding:0;background:transparent;box-shadow:none;overflow:visible}
.logo-wrap img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:scale(var(--logo-scale,1));transform-origin:center}
/* Modern light / dark templates. Text tone is set in JS from the template background. */
.card.style-1{background:linear-gradient(135deg,var(--darkc),var(--c))}
.card.style-1:before{width:46%;height:150%;right:-10%;top:-25%;background:#ffffff12;transform:rotate(18deg)}
.card.style-2{background:#fff;border:1px solid #dfe3e8}.card.style-2:before{width:28%;height:100%;left:0;top:0;background:var(--c);clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.card.style-3{background:linear-gradient(135deg,var(--c),var(--darkc))}.card.style-3:before{width:42%;height:145%;right:-8%;top:-24%;background:#ffffff14;transform:rotate(23deg)}
.card.style-4{background:#fff;border-left:9px solid var(--c);border-top:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.card.style-5{background:var(--darkc);border:7px solid var(--c);padding:7.2%}.card.style-5:before{left:7%;right:7%;bottom:13%;height:1px;background:var(--c)}
.card.style-6{background:linear-gradient(145deg,#fbfcfd 0 58%,var(--c) 58%)}
.card.style-6:before{right:0;top:0;width:44%;height:100%;background:#ffffff10;transform:skewX(-18deg)}
.card.style-7{background:#fff;border:1px solid #dfe3e8}.card.style-7:before{left:0;right:0;top:0;height:18%;background:var(--c)}
.card.style-8{background:linear-gradient(135deg,#fffdf8,#f1ede4);border:1px solid #e4dccd}.card.style-8:before{left:6%;right:6%;top:7%;bottom:7%;border:1px solid var(--c);border-radius:10px}
.card.style-9{background:#f8fafc;border:1px solid #dfe3e8}.card.style-9:before{left:0;top:0;width:100%;height:7px;background:var(--c)}
.card.style-10{background:#fff;border:2px solid var(--c)}.card.style-10:before{left:3.5%;right:3.5%;top:5.5%;bottom:5.5%;border:1px solid var(--c);border-radius:12px;opacity:.45}
.card.style-11{background:linear-gradient(120deg,#101828,var(--darkc) 45%,var(--c));}.card.style-11:before{left:-8%;top:-25%;width:52%;height:160%;border:1px solid #ffffff30;transform:rotate(30deg)}
.card.style-12{background:#fff;border:1px solid #dfe3e8}.card.style-12:before{right:0;top:0;width:34%;height:100%;background:linear-gradient(160deg,var(--c),var(--darkc));clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.card.style-13{background:linear-gradient(135deg,#ffffff,#f3f5f7);border:1px solid #dfe3e8}.card.style-13:before{left:7%;top:12%;width:3px;height:76%;background:var(--c)}
.card.style-14{background:#fff;border:1px solid #dfe3e8}.card.style-14:before{right:-7%;bottom:-32%;width:55%;height:125%;border-radius:50%;border:2px solid var(--c);box-shadow:0 0 0 18px #ffffff00,0 0 0 40px #ffffff00;transform:rotate(-18deg)}
.card.style-15{background:linear-gradient(145deg,var(--darkc),#111827 55%,var(--c));}.card.style-15:before{left:8%;right:8%;top:8%;bottom:8%;border:1px solid #ffffff22;border-radius:12px}.card.style-15:after{width:180px;height:180px;right:-55px;bottom:-90px;background:var(--c);opacity:.22}
.card.style-16{background:linear-gradient(135deg,#fbfaf7,#eef4ef);border:1px solid #dfe5dc}.card.style-16:before{right:7%;top:9%;width:30%;height:82%;border-radius:50% 50% 45% 55%;background:linear-gradient(160deg,var(--c),#ffffff00);opacity:.18;transform:rotate(20deg)}
.card.style-17{background:linear-gradient(135deg,#0b1220,#101828 55%,var(--c));}.card.style-17:before{inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:26px 26px}
.card.style-18{background:#fff;border:1px solid #dfe3e8}.card.style-18:before{left:0;top:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff00 0 50%,var(--c) 50% 100%);opacity:.12}.card.style-18:after{width:190px;height:190px;right:-80px;top:-90px;border:24px solid var(--c);background:transparent;opacity:.22}

.preview-note{text-align:center;font-size:10px;color:#98a2b3;margin-top:10px}
.bar{margin-top:17px;background:#fff;border:1px solid #e8ebf0;border-radius:14px;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}.bar strong{display:block;color:var(--dark);font-size:13px}.bar span{font-size:10px;color:var(--muted)}
.order{border:0;background:linear-gradient(135deg,#6c5ce7,#8b7cf6);color:#fff;border-radius:10px;padding:12px 18px;font-size:11px;font-weight:800;box-shadow:0 8px 20px #6c5ce72e}.order i{margin-left:6px}
.modal{position:fixed;inset:0;background:#0f172a99;backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:15px;z-index:200}
.modal.show{display:flex}
.box{width:min(520px,100%);max-height:min(92vh,760px);overflow:auto;background:#fff;border-radius:20px;padding:24px;position:relative;box-shadow:0 30px 90px #0004}
.close{position:absolute;right:14px;top:14px;border:0;background:#f2f4f7;color:#344054;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1}
.order-kicker{display:inline-flex;align-items:center;gap:7px;background:#eeeafe;color:#5146b8;border:1px solid #ded7ff;border-radius:999px;padding:6px 10px;font-size:9px;font-weight:800;margin-bottom:10px}
.box h3{color:var(--dark);font-size:20px;margin-bottom:5px}
.box p{font-size:11px;color:var(--muted);margin-bottom:16px}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-group{margin-bottom:10px}
.form-group label{display:block;font-size:10px;font-weight:800;color:#344054;margin-bottom:5px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 11px;border:1px solid #dfe3e8;border-radius:9px;outline:0;font-size:12px;background:#fff;color:#101828}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#8b7cf6;box-shadow:0 0 0 3px #6c5ce71a}
.action-btn{width:100%;border:0;background:linear-gradient(135deg,#6c5ce7,#8b7cf6);color:#fff;border-radius:10px;padding:12px 16px;font-size:11px;font-weight:800;box-shadow:0 8px 20px #6c5ce72e}
.action-btn:disabled{opacity:.65;cursor:not-allowed}
.secondary-action{width:100%;margin-top:8px;border:1px solid var(--line);background:#fff;color:#344054;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:800}
.summary-card{background:#f8f9fc;border:1px solid #eaecf0;border-radius:12px;padding:11px;margin-bottom:13px}
.summary-item{display:flex;justify-content:space-between;font-size:11px;padding:5px;gap:12px}
.summary-item b{color:var(--dark);text-align:right}
.summary-total{border-top:1px solid #e5e7eb;margin-top:7px;padding:10px 5px 3px;display:flex;justify-content:space-between;align-items:center}
.summary-total span{font-size:11px;font-weight:700;color:#475467}
.summary-total strong{font-size:19px;color:#16a34a}
.coupon-box{margin:10px 0 12px;padding:0;background:#fff;border:1px solid #e7e9ef;border-radius:10px;overflow:hidden}.coupon-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border:0;background:#fff;color:#344054;font-size:10px;font-weight:800;text-align:left;cursor:pointer}.coupon-toggle i{font-size:9px;color:#667085;transition:transform .2s ease}.coupon-box.open .coupon-toggle i{transform:rotate(180deg)}.coupon-content{display:none;padding:0 10px 10px}.coupon-box.open .coupon-content{display:block}.coupon-row{display:flex;gap:7px}.coupon-row input{flex:1;min-width:0;padding:10px 11px;border:1px solid #dfe3e8;border-radius:9px;outline:0;font-size:12px;text-transform:uppercase}.coupon-row input:focus{border-color:#8b7cf6;box-shadow:0 0 0 3px #6c5ce71a}.coupon-btn{border:0;background:#344054;color:#fff;border-radius:9px;padding:0 13px;font-size:10px;font-weight:800}.coupon-btn:disabled{opacity:.65}.coupon-message{display:none;font-size:9px;margin-top:6px}.coupon-message.success{display:block;color:#15803d}.coupon-message.error{display:block;color:#d63031}
.terms-line{display:flex;align-items:flex-start;gap:7px;font-size:10px;line-height:1.45;color:#667085;margin:10px 1px}
.terms-line input{margin-top:2px;accent-color:#6c5ce7}
.terms-line a{color:#5d4ed0;font-weight:700}
.tc-error{display:none;color:#d63031;background:#fff5f5;border:1px solid #ffd4d4;border-radius:8px;padding:8px;font-size:10px;margin:8px 0}
.pay-action{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 8px 20px #16a34a2e}
.success-step{text-align:center;padding:15px 4px 4px}
.success-icon{width:58px;height:58px;border-radius:50%;background:#dcfce7;color:#16a34a;display:grid;place-items:center;margin:0 auto 12px;font-size:25px}
.success-step h3{font-size:20px}
@media(max-width:600px){.order-grid{grid-template-columns:1fr}.box{padding:20px 15px;border-radius:16px}.summary-item{font-size:10px}.summary-total strong{font-size:17px}}

/* Desktop: keep the live preview visible while the user scrolls through the editor. */
@media(min-width:901px){
 .grid{align-items:start}
 .preview{
  position:sticky;
  top:88px;
  align-self:start;
  max-height:calc(100vh - 105px);
  overflow-y:auto;
  scrollbar-width:thin;
 }
}

@media(max-width:900px){
 .grid{grid-template-columns:1fr}.preview{order:-1;min-height:0}.stage{min-height:auto;padding:25px}.hero{grid-template-columns:1fr;gap:14px}.hero-slide{min-height:215px;padding:18px}.hero-slide-copy{max-width:52%}.hero-slide h3{font-size:17px}.hero-slide-art{height:155px}.hero-card-art{width:155px}.hero-card-stack{transform:scale(.9)}.hero-box-art{transform:scale(.88)}.delivery-art,.india-art{transform:scale(.88)}
 .cardcontent{min-width:0;max-width:70%;width:70%;overflow:hidden}
 .company{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
 .contact{overflow-wrap:anywhere;word-break:break-word;line-height:1.45}
 .logo-wrap{max-width:24%;max-height:30%}
}
.mobile-preview-fab{display:none;position:fixed;right:14px;bottom:18px;z-index:150;border:0;border-radius:999px;background:linear-gradient(135deg,#6c5ce7,#8b7cf6);color:#fff;padding:11px 15px;font-size:11px;font-weight:800;box-shadow:0 10px 28px #10182830;align-items:center;gap:7px}
@media(max-width:600px){
 .mobile-preview-fab{display:flex}
 .page{padding:16px 10px 70px}.controls,.preview{padding:12px}.hero{margin-bottom:14px;gap:12px}.hero h1{font-size:27px}.hero p{font-size:13px}.hero-promise{font-size:11px;padding:11px 12px;margin-top:12px}.hero-promise strong{font-size:12px}.hero-slider-window{min-height:205px;border-radius:16px}.hero-slide{min-height:205px;padding:15px 13px 35px;gap:8px}.hero-slide-copy{max-width:52%}.hero-slide-kicker{font-size:8px}.hero-slide h3{font-size:15px}.hero-slide p{font-size:8px}.hero-slide-art{height:140px}.hero-card-art{width:130px}.hero-card-stack{transform:scale(.72)}.hero-box-art{transform:scale(.7)}.delivery-art,.india-art{transform:scale(.7)}.hero-slider-controls{bottom:8px;left:10px;right:10px}.choice-grid{grid-template-columns:1fr 1fr}.design-grid{grid-template-columns:1fr 1fr}.mini-card{height:58px}.colors{gap:5px}.color{padding:4px}.swatch{height:25px}.color small{font-size:6px}.stage{padding:8px;min-height:0}.card{border-radius:9px;padding:6.5%}.cardcontent{max-width:68%;width:68%}.name{font-size: clamp(14px, 4.8vw, 21px);letter-spacing:-.35px}.role{font-size:11px;margin:4px 0 8px}.company{font-size:13px;margin-bottom:6px;line-height:1.25}.contact{font-size:8px;line-height:1.45}.contact-row{gap:5px}.contact-row .contact-icon{width:10px;min-width:10px}.logo-wrap{right:5%;top:8%;max-width:25%;max-height:28%}.bar{flex-direction:column;align-items:stretch;margin-top:10px;padding:10px}.order{width:100%}.two{grid-template-columns:1fr}.number-inline{align-items:stretch}.number-type-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.number-option{min-width:0;padding:7px 5px;font-size:8px;gap:4px;white-space:normal;justify-content:flex-start}.number-option input{width:13px;height:13px;min-width:13px}.number-option span{overflow-wrap:anywhere}.number-inline #wa{min-width:0}.phead{flex-wrap:wrap}.selected-info{width:100%;order:3}.stepitem{font-size:8px}.stepitem .dot{width:21px;height:21px;font-size:8px}
 .preview-note{font-size:9px;line-height:1.4}
}

/* MOBILE-FIRST FIX: bounded page width + independently swipeable template/color rows */
html,body{width:100%;max-width:100%;}
@media(max-width:900px){
 html,body{overflow-x:hidden!important;max-width:100%!important}
 .page{width:100%;max-width:100%;min-width:0;margin:0 auto}
 .hero,.grid,.panel,.controls,.preview,.stage{min-width:0;max-width:100%}
 .grid{grid-template-columns:minmax(0,1fr)!important;width:100%}
 .preview{width:100%;overflow:hidden}
 .stage{width:100%;padding:10px!important;overflow:hidden}
 .card{width:100%!important;max-width:100%!important;min-width:0}
}
@media(max-width:600px){
 .page{padding-left:8px!important;padding-right:8px!important}
 .panel.preview{padding:10px!important;overflow:hidden}
 .stage{padding:6px!important}
 #previewStyleColorControls{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}
 #previewStyleColorControls .preview-choice-section{width:100%;max-width:100%;min-width:0;overflow:hidden;margin:10px 0 14px}
 #previewStyleColorControls .preview-horizontal-track{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;padding:3px 2px 10px;contain:inline-size}
 #previewStyleColorControls .preview-templates-track #designGrid{display:flex!important;flex-flow:row nowrap!important;width:max-content!important;min-width:0!important;max-width:none!important;grid-template-columns:none!important;gap:8px!important}
 #previewStyleColorControls .preview-templates-track #designGrid>.design{flex:0 0 104px!important;width:104px!important;min-width:104px!important;max-width:104px!important}
 #previewStyleColorControls .preview-colors-track #colorGrid{display:flex!important;flex-flow:row nowrap!important;width:max-content!important;min-width:0!important;max-width:none!important;grid-template-columns:none!important;gap:7px!important}
 #previewStyleColorControls .preview-colors-track #colorGrid>.color{flex:0 0 60px!important;width:60px!important;min-width:60px!important;max-width:60px!important}
}