/* ---------- HERO ---------- */
 /* ====== HERO BANNER (image background, overlay content) ====== */
 .hero {
     position: relative;
     height: min(720px, 100vh);
     min-height: 600px;
     overflow: hidden;
 }

 .hero__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .hero__overlay {
     position: absolute;
     inset: 0;
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgb(0 0 0 / 41%) 0%, rgb(0 0 0 / 50%) 45%, rgb(0 0 0 / 29%) 75%, rgb(0 0 0 / 47%) 100%);
 }

 .hero__inner {
     text-align: center;
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 clamp(20px, 5vw, 72px);
     max-width: 1280px;
     margin: 0 auto;
     color: #fff
 }

 .hero__eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border-radius: 999px;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 22px;
     background: transparent !important;
     text-align: center;
     justify-content: center;
 }

 .hero__eyebrow i {
     color: #7be3c8
 }

 .hero__title {
     font-size: clamp(38px, 5.4vw, 54px) !important;
     font-weight: 600 !important;
     line-height: 1.05 !important;
     letter-spacing: -1px !important;
     max-width: 780px !important;
     margin: 0px auto 20px auto !important;
 }

 .hero__title em {
     font-style: normal;
     background: linear-gradient(90deg, #7be3c8, #bff5e3);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
 }

 .hero__desc {
     font-size: clamp(15px, 1.3vw, 18px);
     max-width: 590px;
     color: rgba(255, 255, 255, .92);
     line-height: 1.65;
     margin: auto;
     margin-top: 0px;
     margin-bottom: 24px;
 }

 .hero__cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #018E99;
     color: #fff;
     padding: 10px 32px;
     border-radius: 999px;
     font-weight: 500;
     text-decoration: none;
     width: fit-content;
     box-shadow: 0 18px 40px -12px rgba(123, 227, 200, .55);
     transition: transform .25s ease, box-shadow .25s ease;
     margin: auto;
     margin-top: 0;
 }

 .hero__cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 22px 50px -12px rgba(123, 227, 200, .7)
 }

 /* ====== HERO BADGES ====== */
 .hero__badges {
     display: flex;
     gap: 12px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 24px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, .12);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, .25);
     padding: 10px 24px;
     border-radius: 999px;
     font-size: 14px;
     font-weight: 600;
     color: #fff;
     transition: all .3s ease;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
     letter-spacing: .2px;
 }

 .hero-badge:hover {
     background: rgba(255, 255, 255, .2);
     border-color: rgba(255, 255, 255, .4);
     transform: translateY(-2px);
     box-shadow: 0 12px 32px rgba(123, 227, 200, .25);
 }

 .hero-badge i {
     font-size: 14px;
     color: #7be3c8;
     transition: transform .3s ease;
 }

 .hero-badge:hover i {
     transform: scale(1.15);
 }

 .hero-badge.badge-face {
     --accent: #7be3c8;
 }

 .hero-badge.badge-phone {
     --accent: #5bffd9;
 }

 .hero-badge.badge-video {
     --accent: #a3f8ff;
 }

 .hero-badge.badge-doc {
     --accent: #8ce6d8;
 }

 .hero-badge.badge-phone i {
     color: #5bffd9;
 }

 .hero-badge.badge-video i {
     color: #a3f8ff;
 }

 .hero-badge.badge-doc i {
     color: #8ce6d8;
 }

 /* Bottom-right site cards */
 .hero__sites {
     width: min(660px, calc(100% - 32px));
     display: flex;
     justify-content: center;
     align-items: center;
     margin: auto;
     gap: 15px;
 }

 .site-card {
     position: relative;
     display: block;
     background: rgba(255, 255, 255, .96);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, .6);
     border-radius: 18px;
     padding: 22px 56px 22px 22px;
     text-decoration: none;
     color: #0b3f45;
     box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .35);
     transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
     overflow: hidden;
     text-align: left;
     width: 350px;
 }

 .site-card:hover {
     transform: translateY(-6px);
     background: #fff;
     box-shadow: 0 28px 60px -20px rgba(0, 0, 0, .45)
 }

 .site-card h3 {
     margin: 0 0 6px;
     font-size: 16px;
     font-weight: 800;
     color: #0b3f45;
     line-height: 1.25
 }

 .site-card p {
     margin: 0;
     font-size: 12.5px;
     color: #557;
     line-height: 1.5
 }

 .site-card .arrow {
     position: absolute;
     top: 18px;
     right: 18px;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #018E99;
     color: #fff;
     font-size: 14px;
     transition: transform .3s ease
 }

 .site-card:hover .arrow {
     transform: rotate(-45deg) translate(2px, -2px)
 }

 .site-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: linear-gradient(180deg, #1aa6a6, #7be3c8);
     border-radius: 4px 0 0 4px
 }

 /* decorative blob */
 .blob {
     position: absolute;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 30%, rgba(26, 166, 166, .18), transparent 60%);
     top: -150px;
     right: -150px;
     z-index: -1;
 }

 .blob.b2 {
     top: auto;
     left: -200px;
     bottom: -200px;
     right: auto;
     background: radial-gradient(circle at 70% 70%, rgba(43, 191, 154, .16), transparent 60%);
 }

 /* ---------- SECTION HEAD ---------- */
 section {
     padding: 80px 0
 }

 .sec-head {
     text-align: center;
     max-width: 720px;
     margin: 0 auto 48px
 }

 .sec-head h2 {
     font-size: clamp(28px, 3.4vw, 40px);
     font-weight: 800;
     letter-spacing: -.5px;
     line-height: 1.15
 }

 .sec-head h2 em {
     font-style: normal;
     color: var(--teal-600)
 }

 .sec-head p {
     margin-top: 14px;
     color: var(--muted);
     font-size: 16px
 }

 /* ---------- SERVICES (3-up centered slider, active highlighted in teal) ---------- */
 .services {
     background: #f6fbfa;
     position: relative;
     overflow: hidden
 }

 .services .sec-head {
     margin-bottom: 50px
 }

 .services .sec-head .eyebrow {
     display: inline-block;
     border: 1.5px solid var(--teal-200);
     background: #fff;
     color: var(--teal-700);
     padding: 6px 16px;
     border-radius: 999px;
     font-size: 12.5px;
     font-weight: 600;
     letter-spacing: .3px;
     margin-bottom: 18px;
 }

 .svc-slider {
     position: relative;
     padding: 10px 0 30px
 }

 .svc-track-wrap {
     overflow: hidden
 }

 .svc-track {
     display: flex;
     gap: 24px;
     transition: transform .55s cubic-bezier(.65, .05, .36, 1);
     will-change: transform;
 }

 .svc-card {
     flex: 0 0 calc((100% - 48px)/3);
     background: #f1f5f4;
     border-radius: 26px;
     padding: 30px;
     display: flex;
     flex-direction: column;
     gap: 18px;
     min-height: 430px;
     border: 1px solid rgba(15, 42, 48, .05);
     transition: transform .45s, background .45s, box-shadow .45s, color .45s;
     position: relative;
 }

 .svc-card h3 {
     font-size: 24px;
     font-weight: 800;
     color: var(--ink);
     letter-spacing: -.4px
 }

 .svc-card .desc {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 1.55;
     max-width: 90%
 }

 .svc-thumb {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     flex: 1;
     min-height: 200px;
     background: #dde7e6;
 }

 .svc-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .6s
 }

 .svc-card:hover .svc-thumb img {
     transform: scale(1.05)
 }

 .svc-arrow-btn {
     position: absolute;
     right: 18px;
     bottom: 18px;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 14px;
     color: #fff;
     background: linear-gradient(135deg, #34d399, #0e9f6e);
     box-shadow: 0 10px 24px rgba(14, 159, 110, .4);
     transition: transform .3s;
 }

 .svc-card:hover .svc-arrow-btn {
     transform: rotate(-15deg) scale(1.08)
 }

 /* Active (centered) card */
 .svc-card.is-active {
     background: linear-gradient(160deg, #0b3d34 0%, #062722 100%);
     box-shadow: 0 30px 70px rgba(6, 39, 34, .35);
     transform: translateY(-6px);
 }

 .svc-card.is-active h3 {
     color: #fff
 }

 .svc-card.is-active .desc {
     color: rgba(255, 255, 255, .78)
 }

 .svc-card.is-active::after {
     content: "";
     position: absolute;
     inset: auto -2px -10px -2px;
     height: 30px;
     border-radius: 50%;
     background: radial-gradient(ellipse at center, rgba(52, 211, 153, .55), transparent 70%);
     filter: blur(14px);
     z-index: -1;
 }

 /* Slider controls */
 .svc-controls {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 28px;
     margin-top: 36px
 }

 .svc-nav {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: #fff;
     border: 1.5px solid var(--teal-200);
     color: var(--teal-700);
     display: grid;
     place-items: center;
     cursor: pointer;
     font-size: 14px;
     transition: .25s;
 }

 .svc-nav:hover {
     background: var(--teal-500);
     color: #fff;
     border-color: var(--teal-500)
 }

 .svc-dots {
     display: flex;
     gap: 9px;
     align-items: center
 }

 .svc-dot {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: #cfdedd;
     cursor: pointer;
     transition: .25s;
     border: none;
     padding: 0
 }

 .svc-dot.is-active {
     background: var(--teal-600);
     width: 28px;
     border-radius: 6px
 }

 /* ---------- MENTAL HEALTH BANNER ---------- */
 .mh-banner {
     position: relative;
     color: #fff;
     padding: 120px 0;
     text-align: center;
     overflow: hidden
 }

 .mh-banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(rgba(11, 79, 85, .78), rgba(14, 110, 117, .78)), url('hero.jpg') center/cover no-repeat
 }

 .mh-banner>.container {
     position: relative;
     z-index: 1;
     max-width: 840px
 }

 .mh-banner h2 {
     font-size: clamp(34px, 4vw, 48px);
     font-weight: 800;
     margin-bottom: 18px
 }

 .mh-banner p {
     font-size: 16.5px;
     color: rgba(255, 255, 255, .92);
     line-height: 1.7
 }

 /* ---------- PRINCIPLES BANNER ---------- */
 .principles {
     background: var(--teal-700);
     color: #fff;
     padding: 64px 0;
     text-align: center
 }

 .principles q {
     display: block;
     font-size: clamp(22px, 2.4vw, 30px);
     font-weight: 600;
     max-width: 980px;
     margin: 0 auto;
     line-height: 1.4;
     quotes: "\201C""\201D"
 }

 .principles q::before {
     content: open-quote;
     color: rgba(255, 255, 255, .5);
     margin-right: 6px
 }

 .principles q::after {
     content: close-quote;
     color: rgba(255, 255, 255, .5);
     margin-left: 6px
 }

 /* ---------- SUPPORT WAYS ---------- */
 .ways .sec-head h2 em {
     color: var(--teal-600)
 }

 .ways-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-top: 30px
 }

 .way {
     background: #fff;
     border: 1px solid var(--teal-100);
     border-radius: 16px;
     padding: 22px;
     display: flex;
     gap: 14px;
     align-items: flex-start;
     transition: transform .25s, box-shadow .25s, border-color .25s
 }

 .way:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-sm);
     border-color: var(--teal-300)
 }

 .way-ic {
     flex-shrink: 0;
     width: 42px;
     height: 42px;
     border-radius: 12px;
     background: var(--teal-50);
     color: var(--teal-600);
     display: grid;
     place-items: center;
     font-size: 18px
 }

 .way h4 {
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 4px;
     color: var(--ink)
 }

 .way p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.5
 }

 /* ---------- INFO GRID (image-11 style: white cards w/ floating glow icons + 2-line desc) ---------- */
 .info-cols {
     background: linear-gradient(180deg, #ffffff 0%, #f4faf9 100%)
 }

 .info-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px
 }

 .info-card {
     background: #fff;
     border: 1px solid rgba(15, 42, 48, .06);
     border-radius: 22px;
     padding: 30px;
     min-height: 240px;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .3s, box-shadow .3s;
 }

 .info-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 50px rgba(15, 42, 48, .10)
 }

 .info-card .top h3 {
     color: var(--ink);
     font-size: 19px;
     font-weight: 700;
     margin-bottom: 10px;
     line-height: 1.3;
     display: flex;
     align-items: center;
     gap: 10px
 }

 .info-card .top h3 i {
     color: var(--teal-500);
     font-size: 16px
 }

 .info-card .top p {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 1.55;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden
 }

 .info-card .glow-ic {
     align-self: flex-end;
     margin-top: 24px;
     width: 64px;
     height: 64px;
     border-radius: 18px;
     display: grid;
     place-items: center;
     font-size: 26px;
     color: #fff;
     background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
     box-shadow: 0 18px 40px rgba(26, 166, 166, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
     position: relative;
 }

 .info-card .glow-ic::after {
     content: "";
     position: absolute;
     inset: -18px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(26, 166, 166, .18), transparent 70%);
     z-index: -1
 }

 .info-card.v2 .glow-ic {
     background: linear-gradient(135deg, #7c5cff, #5b3df5)
 }

 .info-card.v2 .glow-ic::after {
     background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 70%)
 }

 .info-card.v3 .glow-ic {
     background: linear-gradient(135deg, #34d399, #0e9f6e)
 }

 .info-card.v3 .glow-ic::after {
     background: radial-gradient(circle, rgba(52, 211, 153, .22), transparent 70%)
 }

 .info-card.v4 .glow-ic {
     background: linear-gradient(135deg, #fb7185, #e11d48)
 }

 .info-card.v4 .glow-ic::after {
     background: radial-gradient(circle, rgba(251, 113, 133, .22), transparent 70%)
 }

 .info-card.v5 .glow-ic {
     background: linear-gradient(135deg, #60a5fa, #2563eb)
 }

 .info-card.v5 .glow-ic::after {
     background: radial-gradient(circle, rgba(96, 165, 250, .22), transparent 70%)
 }

 /* ---------- SITES FEATURE (two big cards, reference image) ---------- */
 .sites-feature {
     padding: 60px 0;
     background: #018e990a;
     position: relative;
     overflow: hidden
 }

 .sites-feature::before {
     content: "";
     position: absolute;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(26, 166, 166, .08), transparent 70%);
     top: -180px;
     right: -160px
 }

 .sites-feature::after {
     content: "";
     position: absolute;
     width: 480px;
     height: 480px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(43, 191, 154, .08), transparent 70%);
     bottom: -200px;
     left: -160px
 }

 .sites-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     position: relative;
     z-index: 1
 }

 .sf-card {
     position: relative;
     background: #fff;
     border-radius: 12px;
     padding: 32px 40px;
     box-shadow: 0 10px 30px -20px rgba(15, 42, 48, .12);
     overflow: hidden;
     transition: transform .35s ease, box-shadow .35s ease;
     border: 1px solid rgb(15 42 48 / 10%);
 }

 .sf-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(26, 166, 166, .06), transparent 60%);
     pointer-events: none;
 }

 .sf-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 30px 70px -28px rgba(15, 42, 48, .28)
 }

 .sf-icon {
     width: 55px;
     height: 55px;
     border-radius: 12px;
     display: grid;
     place-items: center;
     font-size: 22px;
     margin-bottom: 26px;
     position: relative;
 }

 .sf-card.blue .sf-icon {
     background: linear-gradient(135deg, #dbeafe, #bfdbfe);
     color: #1d4ed8
 }

 .sf-card.green .sf-icon {
     background: linear-gradient(135deg, #d1fae5, #a7f3d0);
     color: #047857
 }

 .sf-eyebrow {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1.6px;
     margin-bottom: 10px;
     display: block
 }

 .sf-card.blue .sf-eyebrow {
     color: #1d4ed8
 }

 .sf-card.green .sf-eyebrow {
     color: #047857
 }

 .sf-card h3 {
     font-size: 30px;
     font-weight: 800;
     line-height: 1.15;
     margin-bottom: 12px;
     color: var(--ink);
     letter-spacing: -.5px
 }

 .sf-card p {
     font-size: 15px;
     color: var(--muted);
     line-height: 1.7;
     margin-bottom: 20px
 }

 .sf-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 22px;
     border-radius: 12px;
     color: #fff;
     font-weight: 700;
     font-size: 14px;
     transition: transform .25s, box-shadow .25s;
     box-shadow: 0 14px 30px -10px rgba(15, 42, 48, .28);
 }

 .sf-card.blue .sf-btn {
     background: linear-gradient(135deg, #3b82f6, #1d4ed8)
 }

 .sf-card.green .sf-btn {
     background: linear-gradient(135deg, #10b981, #047857)
 }

 .sf-btn:hover {
     transform: translateY(-2px)
 }

 /* ---------- APP STORE CTA ---------- */
 .cta-touch {
     padding: 90px 0;
     background: var(--grad-banner);
     position: relative;
     overflow: hidden
 }

 .cta-touch::before {
     content: "";
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .06);
     top: -260px;
     left: -160px
 }

 .cta-touch::after {
     content: "";
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .05);
     bottom: -240px;
     right: -140px
 }

 .cta-inner {
     text-align: center;
     position: relative;
     z-index: 1;
     color: #fff;
     max-width: 760px;
     margin: 0 auto
 }

 .cta-inner .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, .15);
     backdrop-filter: blur(10px);
     padding: 8px 16px;
     border-radius: 999px;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .6px;
     margin-bottom: 22px
 }

 .cta-inner h2 {
     font-size: clamp(30px, 4vw, 46px);
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -.6px;
     margin-bottom: 18px
 }

 .cta-inner p {
     font-size: 16px;
     opacity: .92;
     margin-bottom: 34px;
     line-height: 1.65
 }

 .cta-actions {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap
 }

 .app-store-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     color: var(--ink);
     border-radius: 12px;
     text-decoration: none;
     font-weight: 600;
     font-size: 14px;
     transition: all .3s ease;
     border: none;
     cursor: pointer;
 }

 .app-store-btn img {
     max-width: 180px;
     border-radius: 10px;
 }

 .app-store-btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, .3)
 }

 .app-store-btn .store-icon {
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
 }

 .app-store-btn .store-text {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
 }

 .app-store-btn .store-label {
     font-size: 11px;
     font-weight: 500;
     opacity: .7
 }

 .app-store-btn .store-name {
     font-size: 14px;
     font-weight: 700;
 }



 /* ---------- RESPONSIVE ---------- */
 @media (max-width: 960px) {
     .nav {
         grid-template-columns: auto auto;
         gap: 12px
     }

     .nav-center {
         display: none;
         grid-column: 1 / -1;
         flex-direction: column;
         background: #fff;
         padding: 20px;
         border-radius: 14px;
         box-shadow: var(--shadow-sm)
     }

     .nav-center.open {
         display: flex
     }

     .menu-toggle {
         display: inline-flex
     }

     .hero {
         height: auto;
         min-height: 0;
     }

     .hero__inner {
         padding: 30px 18px;
     }

     .hero__sites {
         position: absolute;
         left: 16px;
         right: 16px;
         bottom: 18px;
         width: auto;
         grid-template-columns: 1fr 1fr;
         gap: 10px
     }

     .site-card {
         padding: 16px 46px 16px 16px
     }

     .site-card h3 {
         font-size: 14px
     }

     .site-card p {
         font-size: 11.5px
     }

     .site-card .arrow {
         width: 32px;
         height: 32px;
         top: 12px;
         right: 12px;
         font-size: 12px
     }

     .svc-card {
         flex: 0 0 calc((100% - 24px)/2);
         min-height: 380px
     }

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

     .info-grid {
         grid-template-columns: 1fr
     }

     .modal {
         grid-template-columns: 1fr;
         max-width: 440px
     }

     .modal-side {
         display: none
     }

     .sites-grid {
         grid-template-columns: 1fr;
         gap: 22px
     }

     .sf-card {
         padding: 34px 28px 30px
     }

     .sf-card h3 {
         font-size: 26px
     }
 }

 @media (max-width: 560px) {
     .ways-grid {
         grid-template-columns: 1fr
     }

     .nav-right .btn-ghost {
         display: none
     }

     .hero__sites {
         grid-template-columns: 1fr
     }

     .hero__inner {
         padding-bottom: 270px
     }

     section {
         padding: 60px 0
     }

     .svc-card {
         flex: 0 0 100%;
         min-height: 360px
     }

     .cta-actions {
         flex-direction: row;
         align-items: stretch;
         flex-wrap: nowrap;
         gap: 15px;
     }

     .app-store-btn img {
         max-width: 140px;
     }

     .cta-actions .btn {
         justify-content: center
     }

     .app-store-btn {
         /* width: 100%; */
         justify-content: center
     }

     .app-store-btn .store-text {
         align-items: center
     }

     .hero-badge {
         padding: 8px 18px;
     }

     .hero__sites {
         flex-wrap: wrap;
     }

     .sites-feature {
         padding: 40px 0;
     }

     .cta-touch {
         padding: 60px 0;
     }

     footer {
         padding: 15px 0;
     }

 }