@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Flex:wght@400;500;700&display=swap";:root{--md-primary: #DC2626;--md-on-primary: #FFFFFF;--md-primary-container: #FEE2E2;--md-on-primary-container: #7F1D1D;--md-secondary: #F97316;--md-on-secondary: #FFFFFF;--md-secondary-container: #FFEDD5;--md-on-secondary-container: #7C2D12;--md-surface: #FEFBFF;--md-surface-variant: #E7E0EC;--md-on-surface: #1C1B1F;--md-on-surface-variant: #49454F;--md-background: #F8F7FC;--md-on-background: #1C1B1F;--md-error: #BA1A1A;--md-on-error: #FFFFFF;--md-success: #006E1C;--md-warning: #7D5700;--md-outline: #79747E;--md-outline-variant: #CAC4D0;--md-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);--md-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);--md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);--md-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, .15), 0 2px 3px rgba(0, 0, 0, .3);--md-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, .15), 0 4px 4px rgba(0, 0, 0, .3);--primary: var(--md-primary);--secondary: var(--md-secondary);--white: #FFFFFF;--dark: var(--md-on-surface);--light: var(--md-background);--gray: var(--md-on-surface-variant);--danger: var(--md-error);--success: var(--md-success);--warning: var(--md-warning)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;color:var(--md-on-background);background:var(--md-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:0 24px}.container-small{max-width:900px;margin:0 auto;padding:0 24px}h1,h2,h3,h4,h5,h6{font-family:Roboto Flex,Roboto,sans-serif;font-weight:500;line-height:1.3;margin-bottom:12px;letter-spacing:-.01em}h1{font-size:2rem;font-weight:700;letter-spacing:-.015em}h2{font-size:1.75rem;font-weight:600}h3{font-size:1.5rem;font-weight:500}h4{font-size:1.25rem;font-weight:500}p{margin-bottom:14px;font-size:.95rem;line-height:1.5;letter-spacing:.005em}a{text-decoration:none;color:var(--md-primary);transition:all .2s cubic-bezier(.4,0,.2,1)}a:hover{color:var(--md-secondary)}.btn-primary,.btn-outline,.btn-ghost,.btn-white,.btn-pay{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:100px;font-family:Roboto,sans-serif;font-weight:500;font-size:.875rem;letter-spacing:.02em;cursor:pointer;border:none;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden;box-shadow:var(--md-elevation-1)}.btn-primary{background:var(--md-primary);color:var(--md-on-primary)}.btn-primary:hover{background:linear-gradient(0deg,#0000001a,#0000001a),var(--md-primary);box-shadow:var(--md-elevation-2);transform:translateY(-1px)}.btn-primary:active{box-shadow:var(--md-elevation-1);transform:translateY(0)}.btn-outline{background:transparent;border:1px solid var(--md-outline);color:var(--md-primary);box-shadow:none}.btn-outline:hover{background:var(--md-primary-container);border-color:var(--md-primary)}.btn-ghost{background:transparent;color:var(--md-primary);box-shadow:none}.btn-ghost:hover{background:var(--md-primary-container)}.btn-white{background:var(--md-surface);color:var(--md-primary)}.btn-white:hover{box-shadow:var(--md-elevation-3);transform:translateY(-1px)}.btn-pay{background:var(--md-secondary);color:var(--md-on-secondary)}.btn-pay:hover{background:linear-gradient(0deg,#0000001a,#0000001a),var(--md-secondary);box-shadow:var(--md-elevation-2)}.btn-large{padding:16px 32px;font-size:1rem}.btn-full{width:100%;display:flex}.btn-primary:after,.btn-outline:after,.btn-ghost:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}.btn-primary:active:after,.btn-outline:active:after,.btn-ghost:active:after{opacity:1}.navbar{background:var(--md-surface);box-shadow:var(--md-elevation-2);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px)}.navbar .container{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;min-height:64px}.logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;color:var(--md-primary);font-family:Roboto Flex,sans-serif}.logo i{font-size:1.5rem;background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(220,38,38,.3))}.nav-links{display:flex;list-style:none;gap:8px}.nav-links a{color:var(--md-on-surface);font-weight:500;padding:8px 16px;border-radius:100px;transition:all .2s cubic-bezier(.4,0,.2,1)}.nav-links a:hover,.nav-links a.active{background:var(--md-primary-container);color:var(--md-primary)}.nav-auth,.nav-auth-user{display:flex;gap:12px;align-items:center}.wallet-balance{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--md-primary-container);border-radius:100px;color:var(--md-on-primary-container);font-weight:600;font-size:.875rem;box-shadow:var(--md-elevation-1);transition:all .2s cubic-bezier(.4,0,.2,1)}.wallet-balance:hover{box-shadow:var(--md-elevation-2);transform:translateY(-1px)}.wallet-balance i{font-size:1rem}.wallet-amount{font-weight:700;font-size:.95rem}.wallet-refresh-btn,.wallet-add-btn{background:transparent;border:none;color:var(--md-on-primary-container);cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.wallet-refresh-btn:hover,.wallet-add-btn:hover{background:#0000001a}.wallet-refresh-btn:active{transform:rotate(180deg)}.wallet-refresh-btn:disabled{opacity:.5;cursor:not-allowed}.wallet-refresh-btn i,.wallet-add-btn i{font-size:.875rem}.hero{background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%);color:var(--md-on-primary);padding:120px 0 80px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:150%;height:150%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);top:-50%;left:-25%;animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(30px,-30px) rotate(5deg)}}.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}.hero-content h1{font-size:2.25rem;margin-bottom:20px;font-weight:700}.hero-content p{font-size:1rem;margin-bottom:24px;opacity:.95;line-height:1.6}.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}.hero-image i{font-size:20rem;opacity:.15}.feature-card,.product-card,.payment-card{background:var(--md-surface);padding:24px;border-radius:24px;box-shadow:var(--md-elevation-1);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--md-outline-variant);position:relative;overflow:hidden}.feature-card:hover,.product-card:hover{box-shadow:var(--md-elevation-3);transform:translateY(-4px);border-color:var(--md-primary)}.feature-card{text-align:center}.feature-card i{font-size:2.5rem;color:var(--md-primary);margin-bottom:16px;display:inline-block;padding:16px;background:var(--md-primary-container);border-radius:16px}.features{padding:80px 0;background:var(--md-background)}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-size:1.875rem;margin-bottom:12px;color:var(--md-on-background)}.section-header p{font-size:1rem;color:var(--md-on-surface-variant);max-width:600px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.products{padding:80px 0;background:var(--md-surface)}.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.product-card{padding:32px}.product-card.featured{background:var(--md-secondary-container);border-color:var(--md-secondary);box-shadow:var(--md-elevation-2)}.badge{position:absolute;top:24px;right:24px;background:var(--md-secondary);color:var(--md-on-secondary);padding:6px 16px;border-radius:100px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.product-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:2.5rem;color:var(--md-on-primary)}.product-icon.life{background:linear-gradient(135deg,#dc2626,#f97316)}.product-icon.health{background:linear-gradient(135deg,#ef4444,#fb923c)}.product-icon.vehicle{background:linear-gradient(135deg,#b91c1c,#ea580c)}.product-features{list-style:none;margin:24px 0}.product-features li{padding:12px 0;border-bottom:1px solid var(--md-outline-variant);display:flex;align-items:center;gap:12px}.product-features i{color:var(--md-success)}.product-price{font-size:1.5rem;font-weight:700;color:var(--md-primary);margin:20px 0}.bbps-info{padding:80px 0;background:linear-gradient(135deg,#dc2626,#f97316);color:var(--md-on-primary);position:relative;overflow:hidden}.bbps-content{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:center;position:relative;z-index:1}.bbps-icon i{font-size:10rem;opacity:.2}.bbps-features{display:flex;gap:32px;margin:24px 0;flex-wrap:wrap}.bbps-features span{display:flex;align-items:center;gap:12px;background:#ffffff1a;padding:12px 20px;border-radius:100px;backdrop-filter:blur(10px)}.bbps-badge{background:var(--md-surface);padding:20px;border-radius:16px;text-align:center;margin-bottom:32px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--md-secondary);font-weight:600;box-shadow:var(--md-elevation-2)}.bbps-badge i{font-size:1.5rem}.cta{padding:80px 0;background:var(--md-on-surface);color:var(--md-surface);text-align:center}.cta h2{font-size:1.875rem;margin-bottom:20px}.cta p{font-size:1rem;margin-bottom:24px;opacity:.9}.footer{background:var(--md-on-surface);color:var(--md-surface);padding:60px 0 24px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:48px;margin-bottom:48px}.footer-col h4{margin-bottom:24px;color:var(--md-surface);font-weight:500}.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:12px}.footer-col a{color:#ffffffb3;transition:color .2s}.footer-col a:hover{color:var(--md-surface)}.social-links{display:flex;gap:12px;margin-top:24px}.social-links a{width:40px;height:40px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.social-links a:hover{background:var(--md-primary);transform:translateY(-2px)}.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);opacity:.7}.footer-simple{background:var(--md-on-surface);color:var(--md-surface);padding:24px 0;text-align:center}.auth-page{min-height:100vh;background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%);display:flex;flex-direction:column}#header-placeholder,#footer-placeholder{width:100%;flex-shrink:0}.auth-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}.auth-container{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;width:90%;background:var(--md-surface);border-radius:28px;overflow:hidden;box-shadow:var(--md-elevation-5)}.auth-container-vertical{display:flex!important;flex-direction:column;grid-template-columns:none!important}.auth-header{text-align:center;padding:32px 24px 24px;border-bottom:1px solid var(--md-outline-variant)}.auth-header h1{margin-bottom:12px;color:var(--md-on-surface)}.auth-header p{color:var(--md-on-surface-variant);margin-bottom:0}.auth-card{padding:32px}.auth-left{background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%);color:var(--md-on-primary);padding:60px 40px;position:relative;overflow:hidden}.auth-left:before{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);top:-50%;left:-50%}.auth-brand{margin-bottom:48px;position:relative;z-index:1}.auth-brand a{color:var(--md-on-primary)}.auth-features{margin-top:48px;position:relative;z-index:1}.auth-features .feature{display:flex;align-items:center;gap:16px;margin-bottom:24px;background:#ffffff1a;padding:16px;border-radius:16px;backdrop-filter:blur(10px)}.auth-features i{font-size:1.5rem}.auth-right{padding:60px 40px}.auth-form-wrapper h1{margin-bottom:12px}.auth-form-wrapper p{color:var(--md-on-surface-variant);margin-bottom:32px}.auth-form{margin-top:32px}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--md-on-surface);font-size:.875rem;letter-spacing:.01em}.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:1px solid var(--md-outline);border-radius:12px;font-size:1rem;font-family:Roboto,sans-serif;background:var(--md-surface);color:var(--md-on-surface);transition:all .2s cubic-bezier(.4,0,.2,1)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--md-primary);border-width:2px;padding:13px 15px;box-shadow:0 0 0 4px var(--md-primary-container)}.input-wrapper{position:relative}.input-wrapper i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--md-on-surface-variant)}.input-wrapper input{padding-left:48px}.toggle-password{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--md-on-surface-variant);padding:8px;border-radius:50%;transition:background .2s}.toggle-password:hover{background:var(--md-surface-variant)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.checkbox{display:flex;align-items:center;gap:8px}.terms-checkbox{margin:24px 0}.terms-checkbox label{display:flex;gap:12px;align-items:flex-start}.auth-footer{text-align:center;margin-top:24px}.quick-access{margin-top:32px;padding-top:32px;border-top:1px solid var(--md-outline-variant);text-align:center}.payment-section{padding:60px 0;background:var(--md-background);min-height:100vh}.payment-header{text-align:center;margin-bottom:48px}.payment-header i{font-size:3rem;color:var(--md-primary);margin-bottom:20px;padding:20px;background:var(--md-primary-container);border-radius:20px;display:inline-block}.biller-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:32px}.biller-card{background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:20px;padding:24px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:16px}.biller-card:hover{border-color:var(--md-primary);box-shadow:var(--md-elevation-2);transform:translateY(-2px);background:var(--md-primary-container)}.biller-icon{width:56px;height:56px;background:var(--md-primary-container);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--md-primary);font-size:1.5rem;flex-shrink:0}.biller-info{flex:1}.biller-info h4{margin:0 0 4px;font-size:1.1rem;color:var(--md-on-surface);font-weight:500}.biller-info p{margin:0;font-size:.875rem;color:var(--md-on-surface-variant)}.biller-arrow{color:var(--md-on-surface-variant);font-size:1.2rem;flex-shrink:0}.payment-card{background:var(--md-surface);border-radius:28px;padding:40px;box-shadow:var(--md-elevation-2)}.payment-methods-container{margin-top:32px;display:flex;flex-direction:column;gap:16px}.payment-method-btn{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--md-outline-variant);border-radius:20px;background:var(--md-surface);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;width:100%}.payment-method-btn:hover{border-color:var(--md-primary);box-shadow:var(--md-elevation-2);transform:translateY(-2px);background:var(--md-primary-container)}.payment-method-btn i{font-size:2rem;color:var(--md-primary);flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--md-primary-container);border-radius:12px}.payment-method-btn div{flex:1}.payment-method-btn strong{display:block;font-size:1.125rem;margin-bottom:4px;color:var(--md-on-surface);font-weight:500}.payment-method-btn p{margin:0;font-size:.875rem;color:var(--md-on-surface-variant)}.final-receipt{display:flex;gap:32px;margin-top:32px}#utilityBillFormContainer{flex:0 0 45%;max-width:45%}#utilityBillFormContainer .utilityBillForm{width:100%}.receipt-main{flex:0 0 50%;background:var(--md-surface-variant);padding:24px;border-radius:20px;border:1px solid var(--md-outline-variant)}.receipt-main table{width:100%!important;margin:0}.payment-steps{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}.step{display:flex;flex-direction:column;align-items:center;gap:12px}.step-number{width:56px;height:56px;border-radius:50%;background:var(--md-surface-variant);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.25rem;color:var(--md-on-surface-variant);transition:all .3s cubic-bezier(.4,0,.2,1)}.step.active .step-number{background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-elevation-2)}.step.completed .step-number{background:var(--md-success);color:#fff}.step-line{flex:1;height:2px;background:var(--md-outline-variant);margin:0 16px}.form-step{display:none}.form-step.active{display:block}.help-text{font-size:.75rem;color:var(--md-on-surface-variant);margin-top:8px}.policy-info,.payment-summary{background:var(--md-primary-container);padding:24px;border-radius:20px;margin-bottom:32px}.info-row,.summary-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--md-outline-variant)}.info-row:last-child,.summary-row:last-child{border-bottom:none}.summary-row.total{font-weight:700;font-size:1.25rem;color:var(--md-primary);margin-top:12px;padding-top:16px;border-top:2px solid var(--md-primary)}.premium-options h4,.payment-methods h4{margin-bottom:20px;font-weight:500}.amount-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.amount-btn{padding:14px;background:var(--md-surface);border:1px solid var(--md-outline);border-radius:12px;cursor:pointer;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1)}.amount-btn:hover{border-color:var(--md-primary);background:var(--md-primary-container)}.amount-btn.active{border-color:var(--md-primary);background:var(--md-primary);color:var(--md-on-primary)}.amount-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.loading-spinner{text-align:center;padding:48px 24px}.loading-spinner i{font-size:48px;color:var(--md-primary);margin-bottom:24px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner p{color:var(--md-on-surface-variant);font-size:1.125rem}.form-actions{display:flex;gap:16px;margin-top:32px}.form-actions button{flex:1}.payment-method{display:block;padding:16px;border:1px solid var(--md-outline);border-radius:16px;margin-bottom:16px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);background:var(--md-surface)}.payment-method:hover{border-color:var(--md-primary);background:var(--md-primary-container)}.payment-method input{margin-right:16px}.method-content{display:flex;align-items:center;gap:16px}.method-content i{font-size:2rem;color:var(--md-primary)}.security-info{text-align:center;margin-top:32px;padding:16px;background:var(--md-success);color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px}.security-info i{font-size:1.5rem}.success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%)}.success-container{background:var(--md-surface);padding:60px;border-radius:28px;max-width:600px;text-align:center;box-shadow:var(--md-elevation-5)}.success-animation i{font-size:4rem;color:var(--md-success);animation:scaleIn .5s cubic-bezier(.4,0,.2,1);display:inline-block;padding:24px;background:#006e1c1a;border-radius:50%}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.payment-details{background:var(--md-surface-variant);padding:32px;border-radius:20px;margin:32px 0;text-align:left}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--md-outline-variant)}.success-info{background:var(--md-primary-container);padding:16px;border-radius:16px;margin:24px 0;display:flex;align-items:center;gap:12px}.success-info i{color:var(--md-primary)}.success-actions{display:flex;gap:16px;margin-top:32px}.receipt-section{padding:60px 0;background:var(--md-background);min-height:100vh}.receipt-header{text-align:center;margin-bottom:48px}.receipt-header i{font-size:3rem;color:var(--md-primary);margin-bottom:20px;padding:20px;background:var(--md-primary-container);border-radius:20px;display:inline-block}#receiptContent{padding:24px}.receipt-table-container{width:100%}.receipt-table-container h3{margin-bottom:24px;color:var(--md-on-surface)}.receipt-table{width:100%;border-collapse:collapse;background:var(--md-surface);border-radius:16px;overflow:hidden;box-shadow:var(--md-elevation-1)}.receipt-table thead{background:var(--md-primary);color:var(--md-on-primary)}.receipt-table th{padding:16px;text-align:left;font-weight:500;letter-spacing:.02em}.receipt-table td{padding:14px 16px;border-bottom:1px solid var(--md-outline-variant)}.receipt-table tbody tr:last-child td{border-bottom:none}.receipt-table tbody tr:hover{background:var(--md-surface-variant)}.receipt-table td strong{color:var(--md-on-surface)}.status-success,.status-failed,.status-pending,.status-unknown{font-weight:600;padding:6px 12px;border-radius:100px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.status-success{color:#fff;background:var(--md-success)}.status-failed{color:#fff;background:var(--md-error)}.status-pending{color:var(--md-on-surface);background:var(--md-warning)}.status-unknown{color:#fff;background:var(--md-on-surface-variant)}.btn-sm{padding:8px 16px;font-size:.875rem}.loading{text-align:center;padding:48px;color:var(--md-primary);font-size:1.125rem}.loading i{font-size:2rem;margin-bottom:16px;animation:spin 1s linear infinite}.error-message{text-align:center;padding:48px;color:var(--md-error);background:#ba1a1a1a;border-radius:16px;border:1px solid var(--md-error)}.error-message p{margin:0;font-size:1.125rem}.page-header{background:linear-gradient(135deg,var(--md-primary) 0%,var(--md-secondary) 100%);color:var(--md-on-primary);padding:100px 0 60px;text-align:center;position:relative;overflow:hidden}.page-header:before{content:"";position:absolute;width:150%;height:150%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);top:-50%;left:-25%}.page-header h1{font-size:2rem;position:relative;z-index:1}.about-section,.contact-section,.mission-section,.why-choose{padding:80px 0}.about-grid,.contact-grid{display:grid;grid-template-columns:1fr;gap:60px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}.stat-box{background:var(--md-surface);padding:32px;border-radius:20px;text-align:center;box-shadow:var(--md-elevation-1)}.stat-box h3{color:var(--md-primary);font-size:2rem;font-weight:700}.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.mission-card{background:var(--md-surface);padding:40px;border-radius:24px;text-align:center;box-shadow:var(--md-elevation-1);transition:all .3s cubic-bezier(.4,0,.2,1)}.mission-card:hover{box-shadow:var(--md-elevation-3);transform:translateY(-4px)}.mission-card i{font-size:2.5rem;color:var(--md-primary);margin-bottom:20px;display:inline-block;padding:20px;background:var(--md-primary-container);border-radius:16px}.contact-methods{display:flex;flex-direction:column;gap:32px}.contact-item{display:flex;gap:24px;padding:24px;background:var(--md-surface);border-radius:20px;box-shadow:var(--md-elevation-1)}.contact-item i{font-size:1.5rem;color:var(--md-primary);background:var(--md-primary-container);padding:16px;border-radius:12px;width:52px;height:52px;display:flex;align-items:center;justify-content:center}.contact-form-wrapper{background:var(--md-surface);padding:48px;border-radius:24px;box-shadow:var(--md-elevation-2)}.contact-form .form-group{margin-bottom:24px}.legal-page{padding:60px 0;background:var(--md-background)}.last-updated{color:var(--md-on-surface-variant);font-style:italic;margin-bottom:32px}.legal-content{background:var(--md-surface);padding:48px;border-radius:24px;margin-bottom:32px;box-shadow:var(--md-elevation-1)}.legal-content section{margin-bottom:48px}.legal-content h2{color:var(--md-primary);margin-bottom:20px;font-weight:500}.legal-content ul{margin-left:32px;margin-top:16px}.legal-content li{margin-bottom:12px}.contact-box{background:var(--md-primary-container);padding:24px;border-radius:16px;margin-top:16px}.legal-footer{display:flex;gap:16px;justify-content:center}@media(max-width:768px){h1{font-size:1.75rem}h2{font-size:1.5rem}.navbar .container{flex-direction:column;gap:16px}.nav-links{flex-direction:column;gap:8px;text-align:center;width:100%}.nav-links a{width:100%;text-align:center}.hero .container{grid-template-columns:1fr}.hero-content h1{font-size:1.75rem}.hero-image{display:none}.hero-buttons{flex-direction:column}.auth-container{grid-template-columns:1fr}.auth-left,.auth-right{padding:40px 24px}.form-row{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.mission-grid{grid-template-columns:1fr}.payment-steps{flex-direction:column;gap:16px}.step-line{display:none}.amount-buttons{grid-template-columns:repeat(2,1fr)}.final-receipt{flex-direction:column}#utilityBillFormContainer,.receipt-main{flex:1 1 100%;max-width:100%}.success-container{padding:40px 24px}.bbps-content{grid-template-columns:1fr}.bbps-icon{display:none}}.nav-auth-user-content{display:flex;align-items:center;gap:12px}.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}html{scroll-behavior:smooth}::selection{background:var(--md-primary);color:var(--md-on-primary)}::-moz-selection{background:var(--md-primary);color:var(--md-on-primary)}