.home-page { max-width: 1540px; margin: 0 auto; }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr); align-items: center; gap: 54px; min-height: 540px; padding: 64px 58px; overflow: hidden; border-radius: 22px; color: #fff; background: linear-gradient(125deg, #1d6278 0%, #2b85a4 58%, #49c4e6 100%); box-shadow: 0 18px 42px rgba(29, 98, 120, .18); }
.home-hero::before, .home-hero::after { content: ""; position: absolute; pointer-events: none; }
.home-hero::before { width: 430px; height: 430px; right: 25%; bottom: -290px; border: 65px solid rgba(255,255,255,.035); border-radius: 48px; transform: rotate(-12deg); }
.home-hero::after { width: 280px; height: 280px; left: -170px; top: -180px; border: 55px solid rgba(255,255,255,.04); border-radius: 50%; }
.home-hero-content, .home-info-card { position: relative; z-index: 1; }
.home-eyebrow, .home-section-label { display: inline-flex; align-items: center; gap: 8px; color: #f05c2b; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.home-eyebrow { padding: 9px 14px; border-radius: 999px; background: #eef9fc; color: #155b72; }
.home-hero h1 { max-width: 850px; margin: 24px 0 15px; font-size: clamp(38px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -2px; font-weight: 800; }
.home-hero-content > p { max-width: 700px; margin: 0; color: #d8edf1; font-size: 18px; line-height: 1.65; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 19px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .15s, background .15s; }
.home-button:hover { transform: translateY(-2px); text-decoration: none; }
.home-button-primary { background: #f05c2b; color: #fff; box-shadow: inset 0 0 0 2px #ff8a64; }
.home-button-primary:hover { background: #d94c25; color: #fff; }
.home-button-secondary { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; }
.home-button-secondary:hover { background: rgba(255,255,255,.16); color: #fff; }
.home-trust-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; color: #c4e0e6; font-size: 12px; }
.home-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.home-info-card { padding: 28px; border: 3px solid #49c4e6; border-radius: 19px; background: #fff; color: #173c47; box-shadow: 0 20px 35px rgba(29, 98, 120, .20); }
.home-info-heading { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid #d9e5e9; }
.home-info-icon { display: grid; place-items: center; width: 28.8px; height: 43.2px; border-radius: 0; color: inherit; background: transparent; font-size: 22px; }
.home-institution-emblem { display: block; width: 28.8px; height: 43.2px; object-fit: contain; }
.home-info-heading small, .home-info-heading strong { display: block; }
.home-info-heading small { color: #2b85a4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.home-info-heading strong { margin-top: 3px; font-size: 20px; }
.home-info-card dl { margin: 8px 0 0; }
.home-info-card dl div { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #e1e9ec; }
.home-info-card dl div:last-child { border-bottom: 0; }
.home-info-card dt { color: #66808a; font-weight: 400; }
.home-info-card dd { margin: 0; text-align: right; font-weight: 700; }
.home-link-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; overflow: hidden; border-radius: 18px; background: linear-gradient(100deg, #1d6278, #2b85a4); box-shadow: 0 10px 24px rgba(29, 98, 120, .16); }
.home-link-item { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 84px; padding: 15px 17px; border-right: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; transition: background .15s ease; }
.home-link-item:last-child { border-right: 0; }
a.home-link-item:hover { color: #fff; background: rgba(255,255,255,.09); text-decoration: none; }
.home-link-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: #effafd; color: #2b85a4; font-size: 18px; }
.home-link-copy { min-width: 0; }
.home-link-copy strong, .home-link-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-link-copy strong { font-size: 14px; font-weight: 750; }
.home-link-copy small { margin-top: 4px; color: #cce8ed; font-size: 11px; }
.home-link-arrow { margin-left: auto; flex: 0 0 auto; color: #bde3ea; font-size: 12px; }
.home-social-item { padding-right: 13px; }
.home-social-links { display: flex; gap: 7px; margin-left: auto; }
.home-social-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 16px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.home-social-links .social-brand-facebook { background: #1877f2; }
.home-social-links .social-brand-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.home-social-links .social-brand-tiktok { background: #050505; }
.social-brand-icon { width: 19px; height: 19px; display: block; }
.home-social-links a:hover { transform: translateY(-2px); color: #fff; }
.home-section { padding: 38px 4px 10px; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.home-section-heading h2, .home-payment-copy h2, .home-help h2 { margin: 7px 0 0; color: #173c47; font-weight: 750; }
.home-section-heading h2 { font-size: 27px; }
.home-section-heading > a { color: #2b85a4; font-weight: 700; white-space: nowrap; }
.home-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.home-service-card { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 11px 16px; border: 1px solid #dbe7eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(20, 66, 79, .05); transition: transform .15s, box-shadow .15s; }
.home-service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20, 66, 79, .1); }
.home-service-card h3 { margin: 0 0 5px; color: #173c47; font-size: 16px; font-weight: 750; }
.home-service-card p { margin: 0; color: #66808a; font-size: 13px; }
.service-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; color: #fff; font-size: 17px; }
.service-water, .service-invoice { background: #49c4e6; }
.service-property, .service-market { background: #f05c2b; }
.service-business, .service-road { background: #2b85a4; }
.home-payment-panel { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 28px; margin-top: 22px; padding: 24px 30px; border-radius: 16px; background: #eaf7fb; }
.home-payment-copy h2 { font-size: 24px; }
.home-payment-copy p { max-width: 650px; margin: 8px 0 0; color: #5d7882; line-height: 1.45; }
.home-card-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home-card-brands div { display: grid; place-items: center; min-height: 70px; padding: 11px; border: 1px solid #d3e2e6; border-radius: 12px; background: #fff; }
.home-card-brands img { width: 66px; max-width: 100%; max-height: 40px; }
.home-help { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 14px 0; padding: 16px 22px; border: 1px solid #dbe7eb; border-radius: 15px; background: #fff; }
.home-help-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #2b85a4; font-size: 19px; }
.home-help h2 { font-size: 18px; }
.home-help p { margin: 3px 0 0; color: #66808a; }
.home-help-links { display: flex; gap: 10px; }
.home-help-links a { padding: 8px 11px; border-radius: 9px; background: #f0f6f7; color: #176b80; font-size: 12px; font-weight: 700; }
@media (max-width: 1250px) { .home-link-bar { grid-template-columns: repeat(2, 1fr); }.home-link-item { border-bottom: 1px solid rgba(255,255,255,.18); }.home-social-item { grid-column: 1 / -1; }.home-social-item .home-social-links { margin-left: 10px; } }
@media (max-width: 1100px) { .home-hero { grid-template-columns: 1fr; padding: 48px 38px; }.home-info-card { max-width: 620px; }.home-service-grid { grid-template-columns: repeat(2, 1fr); }.home-payment-panel { grid-template-columns: 1fr; }.home-help { grid-template-columns: auto 1fr; }.home-help-links { grid-column: 2; } }
@media (max-width: 650px) { .home-hero { min-height: auto; gap: 34px; padding: 38px 22px; border-radius: 16px; }.home-hero h1 { font-size: 38px; letter-spacing: -1px; }.home-hero-content > p { font-size: 16px; }.home-actions, .home-button { width: 100%; }.home-trust-row { gap: 12px; }.home-info-card { padding: 21px; }.home-link-bar { grid-template-columns: 1fr; border-radius: 14px; }.home-link-item, .home-social-item { grid-column: auto; min-height: 72px; border-right: 0; }.home-social-item { flex-wrap: wrap; }.home-social-item .home-social-links { width: 100%; margin: 3px 0 0 52px; }.home-section { padding-top: 30px; }.home-section-heading { align-items: start; flex-direction: column; }.home-section-heading h2 { font-size: 25px; }.home-service-grid { grid-template-columns: 1fr; }.home-payment-panel { padding: 22px 18px; }.home-card-brands { grid-template-columns: 1fr 1fr; }.home-help { grid-template-columns: 1fr; padding: 16px; }.home-help-links { grid-column: 1; flex-direction: column; } }