:root{--ink:#172a3a;--muted:#667480}
*{box-sizing:border-box}
.hidden{display:none!important}
body{margin:0;background:#edf3f6;color:var(--ink);font-family:Arial,"Noto Sans Devanagari",sans-serif}
button{font:inherit}
.app-shell{width:100%;max-width:590px;min-height:100vh;margin:auto;background:linear-gradient(180deg,#f7f5ff 0,#eef8f7 38%,#f4f7f9 100%);box-shadow:0 0 50px #b9c7d180}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;border-bottom:1px solid #e4e8ec;position:sticky;top:0;z-index:10}
.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:#fff;box-shadow:0 8px 20px #5630cb25;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.eyebrow{margin:0 0 2px;font-size:10px;font-weight:900;letter-spacing:2px;background:linear-gradient(90deg,#007f9f,#7133d3,#e01850,#ef8d00,#11945e);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar h1{margin:0;font-size:18px}
.app-title{font-weight:800;background:linear-gradient(90deg,#152d3c,#6335cc,#008a9a);-webkit-background-clip:text;background-clip:text;color:transparent}
.help{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid #d8dfe4;background:#f7fafb;color:#5a6570;font-weight:800}
.hero{padding:26px 22px 22px;color:#fff;background:radial-gradient(circle at 90% 15%,#29c6a5 0,transparent 35%),linear-gradient(135deg,#7032dc,#0879be 58%,#009f76)}
.hero-logo{display:block;width:152px;height:152px;margin:0 auto 10px;object-fit:contain;border-radius:26px;background:#ffffffed;box-shadow:0 16px 34px #15345a55}.hero-kicker{text-align:center!important;color:#fff2a5!important;font-size:9px!important;font-weight:900;letter-spacing:2px}.hero h2{margin:8px 0;text-align:center;font-size:29px;line-height:1.15;letter-spacing:-.6px;text-shadow:0 3px 12px #17407045}.hero h2 span{font-weight:900;background:linear-gradient(90deg,#fff,#fff0a8,#ffd1e5,#c9fff0);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:450px;margin:0 auto!important;text-align:center;color:#e8fbf6!important;font-size:12px!important;line-height:1.6!important}.hero p{margin:0;color:#e8fbf6;font-size:14px;line-height:1.55}
.service-ribbon{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:15px}.service-ribbon b{padding:6px 9px;border:1px solid #ffffff44;border-radius:20px;background:#ffffff1f;font-size:9px;letter-spacing:.3px;box-shadow:inset 0 0 12px #fff1}.service-ribbon b:nth-child(1){color:#fff1a3}.service-ribbon b:nth-child(2){color:#d9c2ff}.service-ribbon b:nth-child(3){color:#bff9ee}.service-ribbon b:nth-child(4){color:#ffd0de}
.brand-story{margin:14px 14px 0;padding:18px;border:1px solid #e4ddf7;border-radius:22px;background:linear-gradient(135deg,#fff 10%,#faf5ff 48%,#effcf8);box-shadow:0 10px 28px #6842b314}.story-kicker{margin:0;font-size:10px;font-weight:900;letter-spacing:.5px;background:linear-gradient(90deg,#7335d8,#df225d,#ed8d05,#009a76);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-story h3{margin:7px 0;font-size:18px;line-height:1.25;background:linear-gradient(90deg,#1b3040,#6a34cf,#008f87);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-story>p:not(.story-kicker){margin:0;color:#62717b;font-size:11px;line-height:1.65}.story-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.story-points span{padding:6px 8px;border-radius:9px;background:#fff;color:#394b58;font-size:8px;font-weight:700;box-shadow:0 3px 10px #4d647215}
.steps{display:flex;justify-content:space-between;padding:17px 28px 12px;background:#fff;border-bottom:1px solid #e5eaed}
.step{display:flex;align-items:center;gap:5px;color:#9aa5ad}
.step span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e9eef1;font-size:11px;font-weight:800}
.step small{font-size:10px;font-weight:700}
.step.active{color:#5f31c9}
.step.active span{color:#fff;background:linear-gradient(135deg,#7435e6,#08a083)}
.content-card{margin:14px;padding:20px 14px;border:1px solid #e0e6e9;border-radius:25px;background:#ffffffeb;box-shadow:0 14px 38px #5a71851a}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px 14px}
.section-heading span{color:#6d32dc;font-size:10px;font-weight:900;letter-spacing:1.2px}
.section-heading h3{margin:3px 0 0;font-size:21px}
.section-heading p{max-width:130px;margin:0 0 2px;text-align:right;color:#7b8790;font-size:10px}
.package-list{display:grid;gap:13px}
.package{position:relative;width:100%;display:flex;gap:11px;align-items:center;padding:15px 11px;text-align:left;color:inherit;border:1.5px solid #dfe6eb;border-radius:20px;background:#fff;cursor:pointer;overflow:hidden;transition:.18s ease}
.package:after{content:"";position:absolute;inset:auto -30px -35px auto;width:110px;height:90px;border-radius:50%;background:#7032dc12}
.package.selected{transform:translateY(-1px);border-color:#6d32dc;box-shadow:0 9px 25px #6334cc24}
.package.blue.selected{border-color:#0686c7}
.package.gold.selected{border-color:#e99d10}
.package.dcut-blue.selected{border-color:#075ddd;box-shadow:0 9px 25px #075ddd2b}
.package.dcut-multi.selected{border-color:#e44489;box-shadow:0 9px 25px #e4448928}
.package.handle-regular.selected{border-color:#79b927;box-shadow:0 9px 25px #79b9272e}
.radio{align-self:flex-start;flex:0 0 auto;display:grid;place-items:center;width:23px;height:23px;border:2px solid #c7d0d6;border-radius:50%;color:#fff;font-size:11px;z-index:2}
.selected .radio{border-color:transparent;background:linear-gradient(135deg,#7435e6,#00a77d)}
.bag-art{position:relative;flex:0 0 88px;height:104px;display:flex;align-items:flex-end;justify-content:center}
.bag-art>span{position:absolute;left:0;top:0;font-weight:900;font-size:17px;color:#7138d7}
.handle{position:absolute;top:8px;width:42px;height:30px;border:6px solid #7238d6;border-bottom:0;border-radius:20px 20px 0 0}
.bag-face{position:relative;z-index:1;width:92px;height:92px;border-radius:8px;background:url('/pack-1-model.png') center/contain no-repeat;filter:drop-shadow(0 9px 9px #25364a30);overflow:hidden}
.bag-face i,.bag-face b{position:relative;z-index:1;text-shadow:0 1px 3px #000}.bag-face i{font-style:normal;font-size:15px;font-weight:900}.bag-face b{margin-top:2px;font-size:6px;letter-spacing:.5px}
.blue .handle{border-color:#0684bd}
.blue .bag-face{background-image:url('/pack-2-model.png')}
.gold .handle{border-color:#e49c12}
.gold .bag-face{background-image:url('/pack-3-model.png')}
.dcut-blue{background:linear-gradient(120deg,#f4f9ff,#e3efff)!important}
.dcut-blue .bag-face{background-image:url('/d-cut-349-mockup.png');background-size:contain;background-position:center;background-repeat:no-repeat;border:0;border-radius:0;clip-path:none;filter:drop-shadow(0 9px 9px #163a7235)}
.dcut-blue .badge{color:#0752bd;background:#dceaff}
.dcut-multi{background:linear-gradient(120deg,#fff7fb,#fff5df)!important}
.dcut-multi .bag-face{background-image:url('/d-cut-399-mockup.png');background-size:contain;background-position:center;background-repeat:no-repeat;border:0;border-radius:0;clip-path:none;filter:drop-shadow(0 9px 9px #7c285235)}
.dcut-blue .bag-face:after,.dcut-multi .bag-face:after{content:"";position:absolute;z-index:3;left:50%;top:8px;transform:translateX(-50%);width:34px;height:10px;border-radius:10px;background:#f7f9fb;box-shadow:inset 0 1px 3px #172a3a55,0 0 0 2px #ffffffaa}
.dcut-blue .bag-face:after,.dcut-multi .bag-face:after{display:none}
.dcut-multi .badge{color:#bb2468;background:linear-gradient(90deg,#ffe0ef,#fff0b7,#dff8dd)}
.handle-regular{background:linear-gradient(120deg,#fffef5,#f3ffe3)!important}
.handle-regular .bag-face{background-image:url('/handle-regular-colour.png');background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:0;filter:drop-shadow(0 9px 9px #638b2535)}
.handle-regular .badge{color:#4f8515;background:#ecffd5}
.package.violet{background:linear-gradient(120deg,#fbf8ff 0%,#eee6ff 55%,#f7f1ff 100%)}
.package.violet:after{background:#7138d71a}
.package.blue{background:linear-gradient(120deg,#f4fcff 0%,#dff4ff 55%,#e9fbff 100%)}
.package.blue:after{background:#0787c51a}
.package.gold{background:linear-gradient(120deg,#fffdf4 0%,#fff0c9 55%,#fff8e5 100%)}
.package.gold:after{background:#e49c1220}
.violet .badge,.blue .badge,.gold .badge{padding:6px 11px;border-radius:7px;color:#fff;font-size:9px;font-weight:900;letter-spacing:.8px;box-shadow:0 4px 10px #263b4b24}
.violet .badge{background:linear-gradient(90deg,#6c32d7,#8e52ea)}
.blue .badge{background:linear-gradient(90deg,#057db9,#00a8aa)}
.gold .badge{background:linear-gradient(90deg,#d78300,#f1ad19);color:#fff}
.package-copy{flex:1;min-width:0;z-index:2}
.badge{display:inline-block;color:#6b34d6;background:#f1eaff;border-radius:20px;padding:4px 8px;font-size:8px;letter-spacing:.6px}
.blue .badge{color:#087cad;background:#e5f6fc}
.gold .badge{color:#a76000;background:#fff1ce}
.package .badge{display:inline-flex;align-items:center;min-height:25px;padding:6px 11px;border-radius:7px;color:#fff;font-size:9px;font-weight:900;line-height:1;letter-spacing:.75px;box-shadow:0 4px 10px #263b4b24;border:1px solid #ffffff55}
.package.dcut-blue .badge{color:#fff;background:linear-gradient(90deg,#075ddd,#2686e8)}
.package.dcut-multi .badge{color:#fff;background:linear-gradient(90deg,#c82d73,#ef6372)}
.package.handle-regular .badge{color:#fff;background:linear-gradient(90deg,#e4aa00,#7dbd24)}
.package.violet .badge{color:#fff;background:linear-gradient(90deg,#6c32d7,#8e52ea)}
.package.blue .badge{color:#fff;background:linear-gradient(90deg,#057db9,#00a8aa)}
.package.gold .badge{color:#fff;background:linear-gradient(90deg,#d78300,#f1ad19)}
.package h4{margin:7px 0;font-size:14px;line-height:1.25}
.package ul{display:grid;gap:3px;margin:0;padding:0;list-style:none;color:#65737d;font-size:10px}
.price{align-self:flex-start;flex:0 0 64px;text-align:right;z-index:2}
.price strong{display:block;font-size:21px;letter-spacing:-1px}
.price small{color:#75818a;font-size:9px}
.selection-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 12px;padding:12px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#27394b,#203144)}
.selection-summary div{display:grid;gap:3px}
.selection-summary small{color:#cbd7df;font-size:9px}
.selection-summary strong{font-size:11px}
.selection-summary>b{white-space:nowrap;font-size:19px}
.selection-summary>b small{color:#fff}
.primary{width:100%;border:0;border-radius:15px;padding:15px 17px;color:#fff;font-weight:800;font-size:15px;background:linear-gradient(90deg,#6f32de,#0782bd,#00a37a);box-shadow:0 10px 25px #174fd534;cursor:pointer}
.primary span{float:right;font-size:20px;line-height:16px}
.trust{margin:12px 0 0;text-align:center;color:#74818b;font-size:9px}
footer{padding:10px 20px 28px;text-align:center;color:#87939b;font-size:10px}
.mini-pack{display:flex;align-items:center;gap:10px;margin-bottom:17px;padding:11px;border:1px solid #e0e7eb;border-radius:15px;background:#f7fafb}.mini-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:url('/pack-1-model.png') center/contain no-repeat}.mini-thumb.blue{background-image:url('/pack-2-model.png')}.mini-thumb.gold{background-image:url('/pack-3-model.png')}.mini-thumb.dcut-blue{background-image:url('/d-cut-349-mockup.png');background-size:contain;background-repeat:no-repeat;border:0}.mini-thumb.dcut-multi{background-image:url('/d-cut-399-mockup.png');background-size:contain;background-repeat:no-repeat;background-position:center;border:0}.mini-thumb.handle-regular{background-image:url('/handle-regular-colour.png');background-size:contain;background-repeat:no-repeat;background-position:center;border:0}.mini-pack>div:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.mini-pack small{font-size:9px;color:#74818b}.mini-pack strong{font-size:11px}.mini-pack>b{white-space:nowrap;font-size:17px}
.design-form{display:grid;gap:13px}.design-form label{display:grid;gap:6px;color:#273949;font-size:12px;font-weight:700}.design-form input,.design-form textarea{width:100%;border:1.5px solid #d9e1e6;border-radius:12px;background:#fff;padding:12px;color:#172a3a;font-size:13px;outline:none}.design-form input:focus,.design-form textarea:focus{border-color:#5f35d5;box-shadow:0 0 0 3px #6335d513}.design-form textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.upload-box{padding:13px;border:1.5px dashed #8c73dd;border-radius:14px;background:#f8f5ff}.upload-box small{font-weight:400;color:#7a6c8e}.upload-box input{padding:8px;background:#fff}.consent{grid-template-columns:20px 1fr!important;align-items:start;padding:10px;border-radius:12px;background:#edf9f5}.consent input{width:17px;height:17px;margin:1px 0}.consent span{font-weight:500;line-height:1.5}.form-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.secondary{border:1px solid #d4dce1;border-radius:14px;background:#fff;color:#46535e;font-size:12px;font-weight:700}
.payment-card{text-align:center;padding:28px 20px}.success-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;color:#fff;font-size:26px;background:linear-gradient(135deg,#6d32dc,#00a17a);box-shadow:0 10px 24px #6334cc33}.payment-heading{justify-content:center}.payment-note{margin:0 auto 18px;max-width:420px;color:#64727d;font-size:13px;line-height:1.6}.pay-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:16px;border-radius:14px;text-align:left;color:#fff;background:#21364a}.pay-summary span{font-size:12px}.pay-summary strong{font-size:20px}.pay-summary small{font-size:10px}.text-button{margin-top:13px;border:0;background:transparent;color:#6635cd;font-weight:700;font-size:12px}
@media(max-width:420px){.step small{display:none}
.hero h2{font-size:25px}
.package{gap:7px;padding:13px 8px}
.bag-art{flex-basis:72px;height:94px}
.bag-face{width:76px;height:82px}
.package h4{font-size:12px}
.price{flex-basis:58px}
.price strong{font-size:19px}
.form-grid,.form-actions{grid-template-columns:1fr}.secondary{padding:13px}
}