:root {
      --blue: #1157da;
      --ink: #0c1730;
      --muted: #637087;
      --line: #e8ecf3;
      --green: #0c9e58
    }

    /* Nearby business cards: use a clear vertical card layout. */
    .nearby{height:255px;display:flex;flex-direction:column}.nearby img{float:none;width:100%;height:128px;object-fit:cover}.nearby .detail{margin-left:0;height:auto;padding:12px}.nearby .detail h3{font-size:14px;line-height:1.25;margin:0 0 6px}.nearby .rating{margin:0 0 6px}.nearby .type{margin-top:0;margin-bottom:7px}.nearby .chip{font-size:10px}

    .auth-modal{border:0;border-radius:14px;padding:0;width:min(440px,calc(100% - 28px));box-shadow:0 20px 60px #07142d55;color:#152238;font-family:'DM Sans',sans-serif}.auth-modal::backdrop{background:#101a2c99}.auth-modal-head{height:64px;padding:0 21px;border-bottom:1px solid #e7ebf2;display:flex;align-items:center;justify-content:space-between;font-size:17px}.auth-modal-head button{background:none;border:0;font-size:26px;color:#637087;cursor:pointer}.auth-modal-body{padding:23px}.auth-modal h2{font:800 22px Manrope;margin:0 0 7px}.auth-modal p{color:#637087;margin:0 0 21px}.auth-modal label{font-size:13px;font-weight:700;display:block;margin-bottom:7px}.phone-input{height:46px;border:1px solid #d8e0ea;border-radius:8px;display:flex;align-items:center;overflow:hidden;margin-bottom:7px}.phone-input:focus-within{border-color:#1157da;box-shadow:0 0 0 3px #e7efff}.phone-input span{padding:0 13px;border-right:1px solid #d8e0ea;font-weight:700}.phone-input input,.otp-input{border:0;outline:0;font:15px 'DM Sans';width:100%;height:100%;padding:0 12px}.modal-primary{width:100%;height:45px;border:0;border-radius:8px;background:#1157da;color:#fff;font-weight:700;cursor:pointer}.modal-primary:disabled{opacity:.6;cursor:wait}.modal-google-login{display:block;height:45px;margin-top:10px;border:1px solid #d8e0ea;border-radius:8px;color:#152238;text-align:center;line-height:43px;font-weight:700;text-decoration:none}.modal-google-login:hover{border-color:#1157da;background:#f5f8ff}.otp-input{height:46px;border:1px solid #d8e0ea;border-radius:8px;text-align:center;letter-spacing:4px;margin-bottom:7px}.otp-input:focus{border-color:#1157da;box-shadow:0 0 0 3px #e7efff}.link-button{border:0;background:none;color:#1157da;font-weight:700;cursor:pointer;display:block;margin:16px auto 0}.auth-error{display:block;min-height:18px;margin-bottom:8px;color:#c52e38;font-size:11px}.demo-otp{margin:0 0 12px;padding:9px 11px;color:#795d0b;background:#fff7d8;border:1px solid #ecd98c;border-radius:7px;font-size:12px}.demo-otp b{font-size:14px;letter-spacing:2px}
    .registration-name{margin-bottom:4px}.registration-name[hidden]{display:none}.registration-name label{display:block;margin:8px 0 7px;color:#344158;font-size:12px;font-weight:700}.auth-name-input{width:100%;height:46px;padding:0 12px;border:1px solid #d8e0ea;border-radius:8px;outline:0;font:15px 'DM Sans'}.auth-name-input:focus{border-color:#1157da;box-shadow:0 0 0 3px #e7efff}#modalOtpForm>label{display:block;margin-bottom:7px;color:#344158;font-size:12px;font-weight:700}

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      color: var(--ink);
      font: 14px 'DM Sans', Arial, sans-serif;
      background: #fff
    }

    .container {
      max-width: 1180px;
      margin: auto;
      padding: 0 24px
    }

    header {
      height: 76px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      background: #fff
    }

    .nav {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 38px
    }

    .brand {
      font: bold 28px Manrope;
      letter-spacing: -1.5px;
      color: #1649b7;
      display: flex;
      align-items: center;
      line-height: 1
    }

    .pin {
      width: 31px;
      height: 37px;
      border-radius: 50% 50% 50% 0;
      background: linear-gradient(145deg, #2cb5e5, #0b4dbd);
      transform: rotate(-45deg);
      margin-right: 9px;
      position: relative
    }

    .pin:after {
      content: '';
      position: absolute;
      width: 11px;
      height: 11px;
      border: 4px solid white;
      border-radius: 50%;
      left: 7px;
      top: 7px
    }

    .pin small {
      position: absolute;
      transform: rotate(45deg);
      top: 42px;
      left: -1px;
      font: 9px 'DM Sans';
      letter-spacing: 0;
      color: #28364c;
      white-space: nowrap
    }

    .searchbar {
      display: flex;
      flex: 1;
      gap: 8px;
      align-items: center
    }

    .header-location-picker{position:relative;flex:0 0 256px}.header-location-picker .location{width:100%;cursor:pointer;font:500 14px 'DM Sans';text-align:left}.header-location-picker .location svg{width:18px;color:#1761e8;stroke-width:2}.header-location-picker .location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-location-picker .location-chevron{margin-left:auto!important;width:16px!important;color:#9aa3b1!important;transition:transform .18s ease}.header-location-picker.is-open .location{border-color:#1761e8}.header-location-picker.is-open .location-chevron{transform:rotate(180deg)}
    .header-location-menu{position:absolute;z-index:100;top:calc(100% + 3px);left:0;width:256px;max-height:320px;overflow-y:auto;background:#fff;border:1px solid #d9dee7;border-radius:0 0 14px 14px;box-shadow:0 14px 30px #152b501c}.header-location-menu[hidden]{display:none}.current-location-action,.location-menu-item{display:flex;align-items:center;width:100%;border:0;background:#fff;text-align:left;cursor:pointer}.current-location-action{gap:12px;padding:17px 16px;border-bottom:1px solid #e6e8ed;color:#2863e8}.current-location-action:hover,.location-menu-item:hover{background:#f6f8fc}.current-location-action>svg{flex:0 0 20px;width:20px}.current-location-action span,.current-location-action b,.current-location-action small{display:block}.current-location-action b{font-size:13px}.current-location-action small{margin-top:3px;color:#4d74ec;font-size:11px;line-height:1.35}.location-menu-section{padding:13px 0 4px}.location-menu-section+.location-menu-section{border-top:1px solid #e6e8ed}.location-menu-title{display:block;padding:0 16px 10px;color:#8b929d;font-size:9px}.location-menu-item{gap:12px;min-height:48px;padding:0 16px;color:#171b24;font:500 12px 'DM Sans'}.location-menu-item svg{width:18px;color:#979ea8;stroke-width:2.2}.location-menu-empty{display:block;padding:10px 16px 18px;color:#8b929d;font-size:11px}
    .location-place-search{position:sticky;z-index:2;top:0;display:flex;align-items:center;gap:8px;padding:9px;background:#fff;border-bottom:1px solid #e6e8ed}.location-place-search svg{flex:0 0 17px;width:17px;color:#1761e8}.location-place-search input{min-width:0;width:100%;height:36px;padding:0 10px;border:1px solid #dbe1eb;border-radius:7px;outline:0;font:11px 'DM Sans'}.location-place-search input:focus{border-color:#1761e8}.pac-container{z-index:10000!important;font-family:'DM Sans',sans-serif}
    .header-query{position:relative;display:flex;align-items:center;flex:1;height:48px}.header-query input{width:100%;height:100%;padding:0 58px 0 18px;border:1px solid #dbe1eb;border-radius:24px;outline:0;color:#1b2940;font:14px 'DM Sans';background:#fff}.header-query input:focus{border-color:#1761e8;box-shadow:0 0 0 2px #1761e81a}.header-query button{position:absolute;right:5px;display:grid;place-items:center;width:39px;height:39px;border:0;border-radius:50%;color:#fff;background:#0968ed;cursor:pointer}.header-query button:hover{background:#075bd0}.header-query button svg{width:21px}
    .header-query>.search-suggestions{top:calc(100% + 7px);left:0;width:100%;max-height:360px;overflow-y:auto}.header-query>.search-suggestions button{position:static;height:auto;border-radius:8px;color:#27354a;background:#fff}.header-query>.search-suggestions button:hover{background:#f1f6ff}.header-query .suggestion-icon svg{width:17px}.header-query .suggestion-copy{min-width:0}.header-query .suggestion-copy b,.header-query .suggestion-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

    .field {
      height: 48px;
      border: 1px solid #dbe1eb;
      border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 10px;
      color: #1b2940;
      background: #fff
    }

    .location {width:238px}

    .query {
      flex: 1;
      color: #7c8799
    }

    .icon {
      color: #0c58df;
      font-size: 19px
    }

    .account {
      height: 42px;
      padding: 0 17px;
      border: 1px solid #dbe1eb;
      border-radius: 7px;
      background: #fff;
      font-weight: 700
    }

    .add {
      background: var(--blue);
      color: white;
      border: 0;
      border-radius: 7px;
      height: 42px;
      padding: 0 20px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none
    }

    .account{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#34435a}.account svg{width:16px}.user-header-actions{display:flex;align-items:center;gap:8px}.user-dashboard-link{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 13px;color:#1557cc;background:#f4f8ff;border:1px solid #cfe0fb;border-radius:8px;font-size:12px;font-weight:750;text-decoration:none}.user-dashboard-link svg{width:16px}.user-dashboard-link:hover{color:#0e4dbd;background:#eaf2ff}.user-menu{position:relative}.user-menu>summary{list-style:none;cursor:pointer}.user-menu>summary::-webkit-details-marker{display:none}.user-profile-icon{display:flex;align-items:center;gap:5px;color:#56657a;text-decoration:none}.user-profile-icon>span{display:grid;place-items:center;width:38px;height:38px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#1765df,#1249a9);border:3px solid #e8f1ff;border-radius:50%;font-size:10px;font-weight:800}.user-profile-icon>span img{width:100%;height:100%;object-fit:cover}.user-profile-icon>svg{width:12px;transition:transform .18s ease}.user-menu[open] .user-profile-icon>svg{transform:rotate(180deg)}.user-menu-dropdown{position:absolute;z-index:50;top:calc(100% + 10px);right:0;width:220px;padding:7px;background:#fff;border:1px solid #dfe6f0;border-radius:10px;box-shadow:0 12px 30px #1d355720}.user-menu-identity{padding:9px 10px 11px;border-bottom:1px solid #edf0f5}.user-menu-identity b,.user-menu-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-identity b{color:#26344a;font-size:11px}.user-menu-identity small{margin-top:3px;color:#7b8798;font-size:9px}.user-menu-dropdown a,.user-menu-dropdown button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;color:#45546a;background:transparent;border:0;border-radius:7px;font:700 10px 'DM Sans';text-align:left;text-decoration:none;cursor:pointer}.user-menu-dropdown a{margin-top:5px}.user-menu-dropdown a:hover,.user-menu-dropdown button:hover{background:#f3f6fb}.user-menu-dropdown button{color:#b53b45}.user-menu-dropdown svg{width:14px}.user-menu-dropdown form{margin:0}.add svg{width:15px}
    .seller-profile-trigger{display:flex;align-items:center;gap:7px;height:42px;padding:0 10px 0 6px;color:#fff;background:var(--blue);border-radius:8px}.seller-profile-trigger>span{display:grid;place-items:center;width:31px;height:31px;color:#155bd7;background:#fff;border-radius:7px;font-size:9px;font-weight:850}.seller-profile-trigger>b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.seller-profile-trigger>svg{width:12px}.seller-header-menu[open] .seller-profile-trigger>svg{transform:rotate(180deg)}.seller-menu-dropdown{width:235px}.seller-menu-dropdown .seller-add-menu{color:#155bd7;background:#eef4ff}.seller-menu-dropdown .seller-add-menu:hover{background:#e2edff}

    .hero {
      overflow: hidden;
      background: linear-gradient(105deg, #fff 44%, #f1f8ff);
      border-bottom: 1px solid var(--line)
    }

    .hero-main {
      height: 325px;
      display: flex;
      align-items: center;
      position: relative
    }

    .hero-copy {
      width: 48%;
      position: relative;
      z-index: 2
    }

    .hero h1 {
      font: 800 42px/1.1 Manrope;
      margin: 0 0 15px;
      letter-spacing: -1.7px
    }

    .hero h1 span {
      color: #1b60e6
    }

    .hero p {
      color: #4c5a70;
      font-size: 16px;
      line-height: 1.55;
      margin: 0 0 27px
    }

    .hero-search {
      width: 700px;
      height: 68px;
      background: #fff;
      border: 1px solid #d8dee8;
      border-radius: 11px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      box-shadow: 0 3px 10px #8aa6cc10
    }

    .hero-search>div {
      flex: 1;
      padding: 0 9px;
      border-right: 1px solid #dde3ed
    }

    .hero-search>div:last-of-type {
      border: 0
    }

    .label {
      font-weight: 600;
      font-size: 13px
    }

    .hint {
      font-size: 11px;
      color: #798598;
      margin-top: 5px
    }

    .search-btn {
      background: var(--blue);
      color: #fff;
      border: 0;
      border-radius: 8px;
      padding: 13px 28px;
      font-weight: 700;
      font-size: 14px
    }

    .city {
      position: absolute;
      right: -46px;
      bottom: 0;
      width: 58%;
      height: 285px;
      background: linear-gradient(180deg, transparent 15%, #cfe8fc 55%, #e8f5fb 100%);
      clip-path: polygon(0 100%, 0 70%, 6% 70%, 6% 36%, 12% 36%, 12% 56%, 18% 56%, 18% 28%, 25% 28%, 25% 53%, 31% 53%, 31% 16%, 38% 16%, 38% 61%, 45% 61%, 45% 31%, 52% 31%, 52% 58%, 59% 58%, 59% 13%, 65% 13%, 65% 64%, 71% 64%, 71% 41%, 78% 41%, 78% 54%, 85% 54%, 85% 23%, 92% 23%, 92% 65%, 100% 65%, 100% 100%)
    }

    .phone {
      position: absolute;
      right: 160px;
      bottom: 2px;
      width: 130px;
      height: 255px;
      border: 7px solid #132333;
      border-radius: 23px;
      background: linear-gradient(145deg, #fff, #dce8ef);
      transform: rotate(6deg);
      z-index: 1;
      box-shadow: 0 5px 10px #1d344866
    }

    .phone:before {
      content: '';
      position: absolute;
      top: 0;
      left: 36px;
      width: 50px;
      height: 9px;
      background: #142433;
      border-radius: 0 0 7px 7px
    }

    .roads {
      position: absolute;
      inset: 23px 10px;
      background: repeating-linear-gradient(35deg, transparent 0 27px, #cbd6df 28px 30px, transparent 31px 58px), repeating-linear-gradient(-43deg, transparent 0 37px, #d2dce3 38px 40px, transparent 41px 70px);
      opacity: .85
    }

    .mapdot {
      position: absolute;
      width: 15px;
      height: 20px;
      border-radius: 55% 55% 55% 0;
      transform: rotate(-45deg);
      z-index: 2
    }

    .mapdot:after {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      background: white;
      border-radius: 50%;
      top: 5px;
      left: 5px
    }

    .d1 {
      background: #0863dc;
      top: 80px;
      left: 27px
    }

    .d2 {
      background: #ff4c28;
      bottom: 46px;
      right: 30px
    }

    .d3 {
      background: #14ad58;
      top: 31px;
      right: 20px
    }

    .trend {
      height: 55px;
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 12px
    }

    .tag {
      padding: 5px 12px;
      border: 1px solid #e0e4eb;
      border-radius: 7px;
      background: #fafbfc
    }

    .section {
      padding: 18px 0 24px;
      border-bottom: 1px solid var(--line)
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 19px
    }

    .section h2 {
      font: 800 18px Manrope;
      margin: 0;
      letter-spacing: -.5px
    }

    .view {
      color: #0759db;
      font-weight: 700;
      font-size: 12px
    }

    .cats {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 13px;
      text-align: center
    }

    .cat-icon {
      height: 64px;
      border: 1px solid #e8ecf1;
      border-radius: 12px;
      background: linear-gradient(135deg, #f3fffb, #fff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 31px;
      box-shadow: 0 2px 5px #2d57990a
    }

    .cat p {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      margin: 7px -7px 0
    }

    .cat-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit
    }

    .categories-empty {
      grid-column: 1 / -1;
      margin: 0;
      padding: 24px;
      color: #7b8798;
      background: #f8faff;
      border: 1px dashed #d9e1ec;
      border-radius: 10px
    }

    .cards {
      display: flex;
      gap: 14px
    }

    .card {
      min-width: 0;
      flex: 1;
      border: 1px solid #e2e7ee;
      border-radius: 9px;
      overflow: hidden;
      background: #fff;
      position: relative
    }

    .service {
      display: block;
      height: 228px
    }

    .service img {
      width: 47%;
      height: 100%;
      object-fit: cover;
      float: left
    }

    .detail {
      padding: 11px 10px;
      margin-left: 47%;
      height: 178px
    }

    .verified {
      font-size: 10px;
      color: #098a4f;
      background: #e4f8ed;
      border-radius: 4px;
      padding: 3px 5px;
      display: inline-block
    }

    .detail h3 {
      font: 700 14px/1.25 Manrope;
      margin: 8px 0 5px
    }

    .rating {
      font-size: 12px;
      color: #ff9f12
    }

    .rating span {
      color: #526075
    }

    .type,
    .address {
      font-size: 10px;
      color: #58667a;
      margin-top: 8px
    }

    .chip {
      display: inline-block;
      color: #087b45;
      background: #ddf6e8;
      border-radius: 4px;
      font-size: 9px;
      padding: 4px;
      margin-top: 10px;
      white-space: nowrap
    }

    .actions {
      position: absolute;
      bottom: 8px;
      left: 10px;
      right: 10px;
      display: flex;
      gap: 8px
    }

    .actions button,
    .actions a {
      flex: 1;
      height: 29px;
      background: white;
      border: 1px solid #74a6ff;
      color: #075ce2;
      border-radius: 4px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none
    }

    .actions button:last-child,
    .actions a:last-child {
      border-color: #65c994;
      color: #088b4d
    }

    .offers {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px
    }

    .offer {
      height: 118px;
      border-radius: 7px;
      color: white;
      padding: 15px;
      position: relative;
      overflow: hidden
    }

    .offer:after {
      content: '✦';
      position: absolute;
      right: 17px;
      bottom: -19px;
      font-size: 82px;
      opacity: .22
    }

    .offer strong {
      font: 700 20px Manrope
    }

    .offer p {
      margin: 3px 0 17px;
      font-weight: 600
    }

    .offer small {
      font-weight: 600
    }

    .o1 {
      background: linear-gradient(130deg, #4132c7, #190a83)
    }

    .o2 {
      background: linear-gradient(130deg, #18bd8c, #0a8e92)
    }

    .o3 {
      background: linear-gradient(130deg, #ff8517, #f25016)
    }

    .o4 {
      background: linear-gradient(130deg, #fc4f65, #dc1849)
    }

    .emergency {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px
    }

    .em {
      height: 67px;
      border-radius: 7px;
      padding: 11px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      line-height: 1.3
    }

    .em b {
      font-size: 15px;
      color: #0757d7
    }

    .em i {
      font-style: normal;
      font-size: 27px
    }

    .em:nth-child(1) {
      background: #edf3ff
    }

    .em:nth-child(2) {
      background: #fff0f2
    }

    .em:nth-child(3) {
      background: #fff5e9
    }

    .em:nth-child(4) {
      background: #f9edff
    }

    .em:nth-child(5) {
      background: #eafafa
    }

    .em:nth-child(6) {
      background: #edf3ff
    }

    .nearby {
      height: 121px
    }

    .nearby img {
      width: 39%;
      height: 100%;
      object-fit: cover;
      float: left
    }

    .nearby .detail {
      margin-left: 39%;
      padding: 11px 9px;
      height: auto
    }

    .nearby .detail h3 {
      font-size: 12px;
      margin: 0 0 5px
    }

    .nearby .type {
      margin-top: 5px
    }

    footer {
      background: #fafbfc;
      padding: 34px 0 14px
    }

    .foot {
      display: grid;
      grid-template-columns: 1.6fr 1.2fr 1.2fr 1.2fr 1.5fr;
      gap: 24px
    }

    .foot .brand {
      font-size: 23px
    }

    .foot p,
    .foot a {
      font-size: 12px;
      color: #536076;
      line-height: 1.55;
      text-decoration: none
    }

    .foot h4 {
      margin: 4px 0 13px;
      font-size: 13px
    }

    .foot ul {
      padding: 0;
      margin: 0;
      list-style: none
    }

    .foot li {
      margin: 7px 0
    }

    .newsletter {
      display: flex;
      border: 1px solid #dde4ed;
      border-radius: 6px;
      overflow: hidden;
      height: 34px
    }

    .newsletter input {
      min-width: 0;
      border: 0;
      padding: 0 10px;
      flex: 1
    }

    .newsletter button {
      background: #1258d9;
      border: 0;
      color: white;
      padding: 0 10px;
      font-size: 11px
    }

    .copyright {
      border-top: 1px solid #e6eaf0;
      margin-top: 24px;
      padding-top: 13px;
      display: flex;
      justify-content: space-between;
      color: #67748a;
      font-size: 11px
    }

    @media(max-width:900px) {
      .nav {
        gap: 14px
      }

      .location {
        display: none
      }

      .hero h1 {
        font-size: 34px
      }

      .hero-search {
        width: 100%
      }

      .city {
        opacity: .42
      }

      .cards {
        overflow: auto
      }

      .card {
        min-width: 230px
      }

      .cats {
        grid-template-columns: repeat(6, 1fr)
      }

      .emergency {
        grid-template-columns: repeat(3, 1fr)
      }

      .foot {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(max-width:600px) {
      .container {
        padding: 0 16px
      }

      .query {
        display: none
      }

      .account {
        display: none
      }

      .user-dashboard-link{display:none}.user-profile-icon>span{width:36px;height:36px}.user-profile-icon>svg{display:none}.user-header-actions{margin-left:auto}.user-menu-dropdown{right:-4px}

      .brand {
        font-size: 23px
      }

      .hero-main {
        height: 420px;
        align-items: flex-start;
        padding-top: 36px
      }

      .hero-copy {
        width: 100%
      }

      .hero h1 {
        font-size: 32px
      }

      .hero p {
        font-size: 14px
      }

      .hero-search {
        height: auto;
        display: block;
        padding: 10px
      }

      .hero-search>div {
        border: 0;
        padding: 5px
      }

      .search-btn {
        width: 100%;
        margin-top: 8px
      }

      .phone {
        right: 25px;
        opacity: .55
      }

      .trend {
        overflow: auto;
        white-space: nowrap
      }

      .cats {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px
      }

      .offers {
        display: flex;
        overflow: auto
      }

      .offer {
        min-width: 240px
      }

      .emergency {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px
      }

      .foot {
        grid-template-columns: repeat(2, 1fr)
      }

      .foot>div:first-child {
        grid-column: span 2
      }

      .copyright {
        font-size: 10px
      }

      .section {
        padding: 18px 0
      }

      .add {
        padding: 0 12px
      }

      .service {
        min-width: 235px
      }
    }

    /* Professional UI refinement */
    body {
      background: #fff;
      color: #101c36;
      -webkit-font-smoothing: antialiased
    }

    .container {
      max-width: 1220px
    }

    .nav {
      gap: 30px
    }

    .brand {
      letter-spacing: -1.8px
    }

    .field,
    .account,
    .add,
    .search-btn,
    .tag,
    .card,
    .cat-icon,
    .offer,
    .em,
    .newsletter {
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
    }

    .field:focus-within {
      border-color: #3479ee;
      box-shadow: 0 0 0 3px #e6efff
    }

    .account:hover {
      border-color: #aac5f7;
      background: #f7faff
    }

    .add:hover,
    .search-btn:hover {
      background: #0948c4;
      box-shadow: 0 7px 15px #145bd138;
      transform: translateY(-1px)
    }

    button {
      cursor: pointer;
      font-family: inherit
    }

    .hero {
      background: radial-gradient(circle at 74% 20%, #e8f5ff 0, transparent 26%), linear-gradient(105deg, #fff 42%, #f7fbff)
    }

    .hero-main {
      height: 348px
    }

    .hero h1 {
      font-size: 44px;
      letter-spacing: -2.2px
    }

    .hero p {
      color: #536177
    }

    .hero-search {
      box-shadow: 0 14px 30px #24579c12;
      border-color: #dce4ef
    }

    .hero-search:hover {
      box-shadow: 0 16px 34px #24579c19
    }

    .trend {
      gap: 9px
    }

    .tag {
      background: #fff
    }

    .tag:hover {
      border-color: #b7cff7;
      color: #0759db;
      transform: translateY(-1px)
    }

    .section {
      padding: 26px 0
    }

    .section-title {
      margin-bottom: 20px
    }

    .section h2 {
      font-size: 19px
    }

    .view {
      padding: 6px 0
    }

    .view:hover {
      text-decoration: underline
    }

    .cat {
      cursor: pointer
    }

    .cat-icon {
      background: linear-gradient(145deg, #f8fffc, #fff);
      box-shadow: 0 4px 12px #31517d0a
    }

    .cat:hover .cat-icon {
      border-color: #bbd2fa;
      box-shadow: 0 8px 18px #2860ac18;
      transform: translateY(-3px)
    }

    .cat:hover p {
      color: #0759db
    }

    .cards {
      gap: 16px
    }

    .card {
      border-color: #e7ebf1;
      box-shadow: 0 2px 8px #142b4908
    }

    .card:hover {
      border-color: #c9d8ee;
      box-shadow: 0 13px 24px #132d5214;
      transform: translateY(-3px)
    }

    .service {
      height: 235px
    }

    .service img {
      filter: saturate(.9)
    }

    .detail h3 {
      letter-spacing: -.3px
    }

    .verified {
      font-weight: 700
    }

    .actions button:hover,
    .actions a:hover {
      background: #f0f6ff
    }

    .actions button:last-child:hover,
    .actions a:last-child:hover {
      background: #edfff4
    }

    .offers {
      gap: 16px
    }

    .offer {
      box-shadow: 0 8px 18px #142b4910
    }

    .offer:hover {
      transform: translateY(-3px);
      box-shadow: 0 13px 24px #142b4920
    }

    .em {
      border: 1px solid #edf0f4
    }

    .em:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px #142b4910
    }

    .nearby {
      height: 126px
    }

    .nearby img {
      filter: saturate(.85)
    }

    footer {
      background: linear-gradient(180deg, #fbfcff, #f7f9fc)
    }

    .foot a:hover {
      color: #0759db
    }

    .newsletter:focus-within {
      border-color: #78a7ff;
      box-shadow: 0 0 0 3px #e7f0ff
    }

    .newsletter button:hover {
      background: #0948c4
    }

    .copyright {
      color: #7a8495
    }

    /* Consistent modern visual language */
    .nav {
      height: 76px;
      gap: 30px
    }

    .brand {
      min-width: max-content
    }

    .nav .field {
      background: #fbfcff
    }

    .cat-icon {
      color: #1260dc
    }

    .cat-icon svg {
      width: 27px;
      height: 27px;
      stroke-width: 2.2
    }

    .cat:nth-child(1) .cat-icon {
      color: #13a869
    }

    .cat:nth-child(2) .cat-icon {
      color: #f05a21
    }

    .cat:nth-child(3) .cat-icon {
      color: #3274db
    }

    .cat:nth-child(4) .cat-icon {
      color: #7e47e6
    }

    .cat:nth-child(5) .cat-icon {
      color: #e64e58
    }

    .cat:nth-child(6) .cat-icon {
      color: #2265d3
    }

    .cat:nth-child(7) .cat-icon {
      color: #e74289
    }

    .cat:nth-child(8) .cat-icon {
      color: #f24a43
    }

    .cat:nth-child(9) .cat-icon {
      color: #e65381
    }

    .cat:nth-child(10) .cat-icon {
      color: #2769dd
    }

    .cat:nth-child(11) .cat-icon {
      color: #1c9a94
    }

    .service:before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 42%, #fff 42%);
      z-index: 0
    }

    .service img,
    .service .detail {
      position: relative;
      z-index: 1
    }

    .service .actions {
      position: absolute;
      z-index: 2
    }

    .nearby:before {
      display: none
    }

    .service .actions button,
    .service .actions a {
      min-width: 0;
      font-size: 12px;
      white-space: nowrap
    }

    .service .detail {
      overflow: hidden
    }

    .service .address {
      line-height: 1.4;
      min-height: 28px
    }

    @media(max-width:1024px) {
      .cards {
        overflow-x: auto;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory
      }

      .cards .card {
        flex: 0 0 280px;
        scroll-snap-align: start
      }

      .service {
        height: 238px
      }

      .offers {
        overflow-x: auto;
        padding-bottom: 8px
      }

      .offers .offer {
        min-width: 250px
      }

      .emergency {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(max-width:600px) {

      header,
      .nav {
        height: 66px
      }

      .pin {
        transform: scale(.8) rotate(-45deg);
        margin-right: 1px
      }

      .hero-main {
        height: 435px
      }

      .hero h1 {
        letter-spacing: -1.7px
      }

      .cat-icon {
        height: 58px
      }

      .cards .card {
        flex-basis: 276px
      }

      .service {
        height: 236px
      }

      .service img {
        width: 43%
      }

      .service .detail {
        margin-left: 43%
      }

      .service:before {
        background: linear-gradient(90deg, transparent 39%, #fff 39%)
      }

      .service .actions {
        left: 8px;
        right: 8px;
        gap: 6px
      }

      .service .actions button {
        font-size: 11px
      }

      .emergency {
        grid-template-columns: repeat(2, 1fr)
      }

      .card:hover,
      .offer:hover,
      .em:hover {
        transform: none
      }
    }

    /* Nearby business cards: use a clear vertical card layout. */
    .nearby{height:255px;display:flex;flex-direction:column}.nearby img{float:none;width:100%;height:128px;object-fit:cover}.nearby .detail{margin-left:0;height:auto;padding:12px}.nearby .detail h3{font-size:14px;line-height:1.25;margin:0 0 6px}.nearby .rating{margin:0 0 6px}.nearby .type{margin-top:0;margin-bottom:7px}.nearby .chip{font-size:10px}