:root{--purple:#822878;--deep:#40143d;--ink:#251d27;--muted:#827781;--cream:#fbf8fa;--line:#eee5ed}*{box-sizing:border-box}body{background:var(--cream);color:var(--ink);margin:0;font-family:DM Sans,sans-serif}.app-shell{min-height:100vh}.hero{color:#fff;background:linear-gradient(118deg,#4a1748 0%,#76236f 52%,#a04490 100%);padding:0 max(24px,50vw - 590px) 72px}.topbar{border-bottom:1px solid #ffffff25;justify-content:space-between;align-items:center;height:82px;display:flex}.brand{align-items:center;gap:10px;font-size:14px;font-weight:700;display:flex}.brand img{object-fit:cover;border-radius:9px;width:38px;height:38px}.desktop-nav{gap:10px;margin-left:80px;display:flex}.desktop-nav button,.top-actions button{color:#fff;font:inherit;cursor:pointer;background:0 0;border:0}.desktop-nav button{color:#dfc8dd;border-radius:30px;padding:11px 18px;font-size:13px}.desktop-nav .nav-active{color:#fff;background:#ffffff1f}.top-actions{align-items:center;gap:13px;display:flex}.icon-button{padding:8px;position:relative}.icon-button i{background:#f4ae5c;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:5px}.avatar,.nav-avatar{border-radius:50%;place-items:center;width:34px;height:34px;display:grid;color:#4e1d42!important;background:#efc36f!important;font-weight:700!important}.hero-content{justify-content:space-between;align-items:end;gap:40px;max-width:1180px;margin:68px auto 0;display:flex}.eyebrow{letter-spacing:1.7px;color:#dcb9d8;margin:0 0 15px;font-size:10px;font-weight:700}.hero h1{letter-spacing:-3px;margin:0 0 23px;font-size:clamp(44px,6vw,72px);line-height:.98}.hero h1 em{color:#f2c880;font-family:Playfair Display,serif;font-weight:600}.hero-copy{color:#ead6e7;max-width:390px;font-size:15px;line-height:1.6}.hero-buttons{gap:12px;margin-top:30px;display:flex}.primary,.secondary{cursor:pointer;border:0;border-radius:7px;align-items:center;gap:9px;padding:13px 18px;font:600 13px DM Sans;display:flex}.primary{color:#4b1a43;background:#f1c774}.secondary{color:#fff;background:#ffffff1a}.balance-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff18;border:1px solid #ffffff32;border-radius:16px;width:300px;padding:22px 24px;box-shadow:0 20px 50px #260b2930}.card-top,.card-bottom{color:#e7cade;justify-content:space-between;align-items:center;font-size:11px;display:flex}.card-top button{color:#fff;letter-spacing:3px;background:0 0;border:0}.balance-card strong{letter-spacing:-1px;margin:25px 0;font-size:27px;display:block}.card-bottom{color:#edd8ab;font-size:12px}.content{max-width:1180px;margin:0 auto;padding:55px 24px 100px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:22px;display:flex}.section-heading h2{letter-spacing:-.8px;margin:0;font-size:25px}.purple-text{color:var(--purple)}.text-button{color:var(--purple);cursor:pointer;background:0 0;border:0;align-items:center;gap:3px;font:600 12px DM Sans;display:flex}.quick-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.quick-card{border:1px solid var(--line);text-align:left;color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:11px;padding:18px 14px;font:600 13px DM Sans;display:flex;box-shadow:0 4px 15px #50204908}.action-icon{border-radius:10px;place-items:center;width:39px;height:39px;display:grid}.purple{color:#87317d;background:#f2e5f1}.orange{color:#c87923;background:#fff0de}.green{color:#378766;background:#e2f2ec}.blue{color:#4481b4;background:#e5eff8}.card-arrow{color:#b8aab6;margin-left:auto}.banner{background:#461644;border-radius:13px;height:185px;margin:45px 0 9px;position:relative;overflow:hidden}.banner img{object-fit:cover;opacity:.68;width:100%;height:100%}.banner-overlay{color:#fff;justify-content:space-between;align-items:center;padding:0 40px;display:flex;position:absolute;inset:0}.banner-overlay p{letter-spacing:-.7px;font-size:25px;font-weight:600}.banner-overlay button{color:#fff;background:#ffffff18;border:1px solid #fff8;border-radius:5px;align-items:center;gap:8px;padding:11px 15px;font:600 12px DM Sans;display:flex}.dots{text-align:center}.dot{background:#d5c6d4;border:0;border-radius:50%;width:6px;height:6px;margin:0 3px;padding:0}.dot.active{background:var(--purple);border-radius:4px;width:19px}.services-heading{margin-top:55px}.service-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.service-card{border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:14px;padding:12px;display:flex}.service-card img{object-fit:cover;border-radius:9px;width:54px;height:54px}.service-card h3{margin:0 0 5px;font-size:14px}.service-card p{color:var(--muted);margin:0;font-size:11px}.service-card>svg{color:#b6a8b4;margin-left:auto}.qr-button{background:var(--purple);color:#fff;cursor:pointer;border:0;border-radius:50%;place-items:center;width:55px;height:55px;display:grid;position:fixed;bottom:28px;right:27px;box-shadow:0 8px 22px #63285d55}.mobile-nav{display:none}@media (max-width:700px){.hero{padding:0 20px 48px}.topbar{height:68px}.desktop-nav{display:none}.brand span{font-size:13px}.hero-content{margin-top:48px;display:block}.hero h1{letter-spacing:-2px;font-size:52px}.hero-copy{font-size:13px}.balance-card{width:100%;margin-top:38px}.content{padding:35px 18px 100px}.section-heading h2{font-size:21px}.quick-grid{grid-template-columns:repeat(2,1fr);gap:10px}.quick-card{padding:13px 10px;font-size:12px}.action-icon{width:34px;height:34px}.banner{height:145px;margin-top:32px}.banner-overlay{padding:30px 20px 0;display:block}.banner-overlay p{max-width:180px;margin:0 0 18px;font-size:20px}.banner-overlay button{padding:8px 10px;font-size:11px}.service-grid{grid-template-columns:1fr}.services-heading{margin-top:40px}.qr-button{width:50px;height:50px;bottom:73px;right:18px}.mobile-nav{border-top:1px solid var(--line);z-index:5;background:#fff;justify-content:space-around;height:62px;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav button{color:#aa9da9;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;font:500 10px DM Sans;display:flex}.mobile-nav .mobile-active{color:var(--purple)}.nav-avatar{width:20px;height:20px;font-size:9px}.hero-buttons{margin-top:24px}.primary,.secondary{padding:11px 13px;font-size:12px}}
