/* =========================================================
   REMINDER BOX — CUSTOM STYLESHEET
   1. Root Variables
   2. Base / Reset
   3. Common Components (buttons, titles, icons)
   4. Header
   5. Hero
   6. Why Shop Owners Love
   7. How It Works
   8. Who Is It For
   9. Trusted by Shop Owners (Swiper)
   10. Download App
   11. Bottom CTA
   12. Footer
   13. Responsive
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */
:root {

    /* ---------- Brand Colors ---------- */
    --brand: #F0426B;
    --brand-dark: #D82853;
    --brand-light: #FDEBEF;
    --brand-soft: #FFF3F5;

    /* ---------- Neutral Colors ---------- */
    --heading: #1C1C1C;
    --body-color: #5F5F5F;
    --muted: #8A8A8A;
    --white: #FFFFFF;
    --black: #000000;
    --border: #F1DCE1;
    --dark: #111111;

    /* ---------- Background Colors ---------- */
    --bg-body: #FFFFFF;
    --bg-cream: #FFF7F4;
    --bg-pink: #FDF0F2;
    --bg-blush: #FCE7EA;

    /* ---------- Gradients ---------- */
    --grad-brand: linear-gradient(90deg, #F0426B 0%, #F26A85 100%);
    --grad-brand-hover: linear-gradient(90deg, #D82853 0%, #F0426B 100%);
    --grad-section: linear-gradient(180deg, #FFF7F4 0%, #FDF0F2 100%);
    --hero-overlay: linear-gradient(90deg,
            #FFF7F4 0%,
            rgba(255, 247, 244, .97) 35%,
            rgba(255, 247, 244, .80) 50%,
            rgba(255, 247, 244, .25) 65%,
            rgba(255, 247, 244, 0) 78%);
    --hero-overlay-mobile: linear-gradient(180deg,
            rgba(255, 247, 244, .96) 0%,
            rgba(255, 247, 244, .92) 55%,
            rgba(255, 247, 244, .55) 100%);

    /* ---------- Font Family ---------- */
    --font-main: "Poppins", sans-serif;

    /* ---------- Font Sizes ---------- */
    --fs-h1: 46px;
    --fs-h2: 32px;
    --fs-h3: 18px;
    --fs-h4: 15px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-tiny: 12px;
    --fs-icon: 26px;
    --fs-icon-sm: 20px;

    /* ---------- Font Weights ---------- */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;

    /* ---------- Line Heights ---------- */
    --lh-title: 1.25;
    --lh-body: 1.7;

    /* ---------- Spacing ---------- */
    --section-py: 50px;
    --container-px: 30px;
    --container-max: 1440px;
    --hero-min-h: 640px;
    --gap-sm: 10px;
    --gap-md: 20px;
    --gap-lg: 30px;

    /* ---------- Radius ---------- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 50px;
    --radius-circle: 50%;

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 4px 12px rgba(240, 66, 107, .08);
    --shadow-md: 0 10px 30px rgba(240, 66, 107, .10);
    --shadow-lg: 0 18px 45px rgba(240, 66, 107, .16);
    --shadow-btn: 0 8px 20px rgba(240, 66, 107, .30);

    /* ---------- Transition ---------- */
    --transition: all .35s ease;
}


/* =========================================================
   2. BASE / RESET
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-body);
    color: var(--body-color);
    background-color: var(--bg-body);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-main);
    color: var(--heading);
    line-height: var(--lh-title);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}


/* =========================================================
   3. COMMON COMPONENTS
   ========================================================= */
.container-fluid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}

.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.text-brand {
    color: var(--brand);
}

/* ----- Section title ----- */
.section-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--heading);
    margin-bottom: 0;
}

.title-line {
    display: block;
    width: 55px;
    height: 3px;
    background: var(--brand);
    border-radius: var(--radius-pill);
    margin-top: 12px;
    margin-bottom: 18px;
}

.title-line-center {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
}

.heart-line {
    position: relative;
    width: 90px;
    background: transparent;
    border-top: 2px dashed var(--brand);
    height: auto;
}

.heart-line::after {
    content: "\F415";
    font-family: "bootstrap-icons";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--brand);
    font-size: var(--fs-tiny);
    padding: 0 6px;
    line-height: 1;
}

/* ----- Buttons ----- */
.btn-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad-brand);
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    padding: 12px 26px;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-btn);
    transition: var(--transition);
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--grad-brand-hover);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(216, 40, 83, .38);
}

.btn-brand i {
    transition: var(--transition);
}

.btn-brand:hover i {
    transform: translateX(5px);
}

.btn-lg-brand {
    padding: 15px 32px;
    font-size: 16px;
}

.btn-light-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--brand);
    font-size: 16px;
    font-weight: var(--fw-semi);
    padding: 15px 32px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    transition: var(--transition);
}

.btn-light-brand:hover {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-3px);
}

.btn-light-brand i {
    transition: var(--transition);
}

.btn-light-brand:hover i {
    transform: translateX(5px);
}

/* ----- Icon circle (shared hover effect) ----- */
.icon-circle {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-circle);
    color: var(--brand);
    font-size: var(--fs-icon);
    background: var(--white);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.icon-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    transform: scale(0);
    border-radius: var(--radius-circle);
    transition: var(--transition);
    z-index: 0;
}

.icon-circle i {
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.why-item:hover .icon-circle::before,
.icon-circle:hover::before {
    transform: scale(1);
}

.why-item:hover .icon-circle,
.icon-circle:hover {
    border-color: transparent;
    box-shadow: var(--shadow-btn);
    transform: translateY(-6px);
}

.why-item:hover .icon-circle i,
.icon-circle:hover i {
    color: var(--white);
    transform: rotate(-10deg) scale(1.1);
}


/* =========================================================
   5. HERO
   ========================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    background-color: var(--bg-cream);
    background-image: url("hero-img.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    overflow: hidden;
}

/* Overlay — text side ko readable rakhta hai */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    z-index: 0;
}

.hero>.container-fluid {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* OPTIONAL VARIANT — image sirf right half me, full height.
   Use karne ke liye HTML me: <section class="hero hero-split"> */
.hero-split {
    background-image: none;
}

.hero-split::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url("images/hero-banner.png") center/cover no-repeat;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    z-index: 0;
}

.hero-split::before {
    background: none;
}

.hero-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}

.hero-badge i {
    color: var(--brand);
}

.hero-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--heading);
    margin-bottom: 0;
}

.hero-text {
    font-size: var(--fs-body);
    color: var(--body-color);
    max-width: 470px;
    margin-bottom: 25px;
}

/* ----- Category strip ----- */
.category-card {
    display: flex;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 10px;
    max-width: 620px;
    margin-bottom: 30px;
}

.category-item {
    flex: 1 0 80px;
    text-align: center;
    padding: 4px 6px;
    border-right: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
}

.category-item:last-child {
    border-right: 0;
}

.category-item i {
    display: block;
    font-size: var(--fs-icon-sm);
    color: var(--brand);
    margin-bottom: 6px;
    transition: var(--transition);
}

.category-item span {
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    color: var(--heading);
}

.category-item:hover i {
    transform: translateY(-5px) scale(1.18);
}

.category-item:hover span {
    color: var(--brand);
}

/* ----- Hero CTA ----- */
.hero-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--heading);
}

.play-circle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand);
    color: var(--brand);
    border-radius: var(--radius-circle);
    font-size: var(--fs-icon-sm);
    transition: var(--transition);
}

.btn-play:hover .play-circle {
    background: var(--brand);
    color: var(--white);
    box-shadow: var(--shadow-btn);
    transform: scale(1.08);
}

.btn-play:hover {
    color: var(--brand);
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--heading);
    margin-bottom: 0;
}

.hero-note i {
    color: var(--brand);
    font-size: 16px;
}


/* =========================================================
   6. WHY SHOP OWNERS LOVE
   ========================================================= */
.why-section {
    background: var(--grad-section);
}

.why-row {
    margin-top: 10px;
}

.why-col {
    border-right: 1px solid var(--border);
}

.why-col:last-child {
    border-right: 0;
}

.why-item {
    text-align: center;
    padding: 10px 12px;
}

.why-item .icon-circle {
    margin-bottom: 16px;
}

.why-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
    color: var(--heading);
    margin-bottom: 8px;
}

.why-text {
    font-size: var(--fs-small);
    color: var(--body-color);
    margin-bottom: 0;
    line-height: 1.6;
}


/* =========================================================
   7. HOW IT WORKS
   ========================================================= */
.how-section {
    background: var(--bg-pink);
}

.how-wrap {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px 25px;
}

.how-row {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 25px;
}

.step-col {
    position: relative;
}

.step-col:not(:last-child)::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    color: var(--brand);
    font-size: 16px;
    border-top: 2px dashed var(--brand-light);
    width: 34px;
    text-align: right;
    line-height: 0;
}

.step-card {
    position: relative;
    height: 100%;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px 18px 22px;
    transition: var(--transition);
}

.step-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
}

.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-brand);
    color: var(--white);
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
    border: 3px solid var(--white);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-btn);
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--brand);
    font-size: 30px;
    margin-bottom: 14px;
    transition: var(--transition);
}

.step-card:hover .step-icon {
    transform: translateY(-5px) rotate(-8deg) scale(1.12);
}

.step-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
    margin-bottom: 8px;
}

.step-text {
    font-size: var(--fs-small);
    margin-bottom: 0;
    line-height: 1.6;
}


/* =========================================================
   8. WHO IS IT FOR
   ========================================================= */
.who-section {
    background: var(--bg-pink);
}

.who-text {
    font-size: var(--fs-small);
    margin-bottom: 15px;
}

.who-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--heading);
    padding: 5px 0;
    transition: var(--transition);
}

.who-list li i {
    color: var(--brand);
    font-size: 16px;
    transition: var(--transition);
}

.who-list li:hover {
    color: var(--brand);
    transform: translateX(6px);
}

.who-list li:hover i {
    transform: scale(1.2);
}

.who-img {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 300px;
    box-shadow: var(--shadow-sm);
}

.who-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.who-img:hover img {
    transform: scale(1.08);
}


/* =========================================================
   9. TRUSTED BY SHOP OWNERS
   ========================================================= */
.trusted-section {
    background: var(--bg-pink);
}

.trusted-card {
    background: var(--bg-blush);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 35px 30px;
}

.trusted-head {
    border-right: 1px solid var(--border);
    padding-right: 25px;
}

.trusted-text {
    font-size: var(--fs-small);
    margin-bottom: 0;
}

.stat-row {
    text-align: center;
}

.stat-col {
    padding: 10px 8px;
    transition: var(--transition);
}

.stat-icon {
    display: inline-flex;
    color: var(--brand);
    font-size: 24px;
    margin-bottom: 8px;
    transition: var(--transition);
}

.stat-col:hover .stat-icon {
    transform: translateY(-6px) scale(1.15);
}

.stat-value {
    font-size: 22px;
    font-weight: var(--fw-bold);
    color: var(--heading);
    margin-bottom: 2px;
}

.stat-label {
    font-size: var(--fs-tiny);
    color: var(--body-color);
    margin-bottom: 0;
}

/* ----- Testimonial ----- */
.testimonial {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 210px;
}

.testimonial-body {
    position: relative;
    flex: 1;
    padding: 22px 18px;
}

.quote-icon {
    color: var(--brand);
    font-size: 26px;
    line-height: 1;
}

.stars {
    color: #FFB400;
    font-size: var(--fs-tiny);
    letter-spacing: 2px;
    display: inline-block;
    margin-left: 6px;
}

.testimonial-text {
    font-size: var(--fs-small);
    color: var(--body-color);
    margin: 10px 0 12px;
    line-height: 1.6;
}

.testimonial-name {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
    color: var(--heading);
    margin-bottom: 0;
}

.testimonial-role {
    font-size: var(--fs-tiny);
    color: var(--muted);
}

.testimonial-img {
    width: 42%;
    flex-shrink: 0;
}

.testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonialSwiper {
    padding-bottom: 30px;
}

.testimonialSwiper .swiper-pagination-bullet {
    background: var(--brand);
    opacity: .3;
    width: 8px;
    height: 8px;
}

.testimonialSwiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 22px;
    border-radius: var(--radius-pill);
}


/* =========================================================
   10. DOWNLOAD APP
   ========================================================= */
.app-section {
    background: var(--bg-pink);
}

.app-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 30px;
}

.app-phone img {
    max-height: 240px;
    width: auto;
    margin-inline: auto;
    transition: var(--transition);
}

.app-phone:hover img {
    transform: translateY(-8px);
}

.app-text {
    font-size: var(--fs-small);
    margin: 12px 0 18px;
}

.store-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dark);
    color: var(--white);
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.store-btn i {
    font-size: 24px;
    transition: var(--transition);
}

.store-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.store-btn small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.store-btn strong {
    font-size: 14px;
    font-weight: var(--fw-semi);
}

.store-btn:hover {
    background: var(--brand);
    color: var(--white);
    transform: translateY(-4px);
    box-shadow: var(--shadow-btn);
}

.store-btn:hover i {
    transform: scale(1.15);
}

.app-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--heading);
    padding: 6px 0;
    transition: var(--transition);
}

.app-list li i {
    color: var(--brand);
    font-size: 16px;
    transition: var(--transition);
}

.app-list li:hover {
    color: var(--brand);
    transform: translateX(6px);
}

.app-list li:hover i {
    transform: scale(1.2);
}

.qr-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.qr-box:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.qr-box img {
    width: 72px;
    height: 72px;
}

.qr-box span {
    font-size: var(--fs-tiny);
    font-weight: var(--fw-medium);
    color: var(--heading);
    line-height: 1.4;
}


/* =========================================================
   11. BOTTOM CTA
   ========================================================= */
.cta-section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    background: var(--bg-pink);
}

.cta-bar {
    background: var(--grad-brand);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-lg);
}

.cta-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    color: var(--white);
    font-size: 32px;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.cta-bar:hover .cta-icon {
    background: var(--white);
    color: var(--brand);
    transform: rotate(-8deg);
}

.cta-title {
    font-size: 26px;
    font-weight: var(--fw-bold);
    color: var(--white);
    margin-bottom: 6px;
}

.cta-text {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, .9);
    margin-bottom: 0;
}


/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
    background: var(--dark);
    padding: 18px 0;
}

.footer-text {
    font-size: var(--fs-tiny);
    color: rgba(255, 255, 255, .75);
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

/* ---------- Large desktop ---------- */
@media (max-width: 1399px) {
    :root {
        --fs-h1: 40px;
        --fs-h2: 28px;
    }

    :root {
        --hero-min-h: 600px;
    }
}

/* ---------- Small desktop ---------- */
@media (max-width: 1199px) {
    :root {
        --fs-h1: 34px;
        --fs-h2: 26px;
    }

    :root {
        --hero-min-h: 560px;
        --hero-overlay: linear-gradient(90deg,
                #FFF7F4 0%,
                rgba(255, 247, 244, .97) 40%,
                rgba(255, 247, 244, .70) 58%,
                rgba(255, 247, 244, .15) 75%,
                rgba(255, 247, 244, 0) 88%);
    }

    .who-img {
        height: 240px;
    }

    .testimonial-img {
        width: 38%;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    :root {
        --fs-h1: 32px;
    }

    .navbar-collapse {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: 12px;
        margin-top: 12px;
    }

    .navbar-nav .nav-link {
        padding: 8px 6px;
    }

    .navbar-nav .btn-brand {
        margin-top: 10px;
    }

    /* Hero: image poore section par, overlay upar se niche */
    .hero {
        min-height: 520px;
        background-position: center center;
        text-align: center;
    }

    .hero::before {
        background: var(--hero-overlay-mobile);
    }

    .hero-split {
        background-image: url("images/hero-banner.png");
    }

    .hero-split::after {
        display: none;
    }

    .hero-split::before {
        background: var(--hero-overlay-mobile);
    }

    .hero-text,
    .category-card {
        margin-inline: auto;
    }

    .hero-cta,
    .hero-note {
        justify-content: center;
    }

    .title-line {
        margin-inline: auto;
    }

    .why-col:nth-child(3n) {
        border-right: 0;
    }

    .why-col {
        margin-bottom: 22px;
    }

    .step-col::after {
        display: none;
    }

    .trusted-head {
        border-right: 0;
        padding-right: 0;
        text-align: center;
    }

    .who-section .section-title,
    .who-text,
    .who-list {
        text-align: center;
    }

    .who-list li {
        justify-content: center;
    }

    .app-card,
    .cta-bar {
        text-align: center;
    }

    .store-btns,
    .app-list li,
    .qr-box {
        justify-content: center;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    :root {
        --fs-h1: 28px;
        --fs-h2: 24px;
        --section-py: 40px;
    }

    .hero {
        min-height: auto;
        background-attachment: scroll;
    }

    .category-item {
        flex: 1 0 33.333%;
        border-right: 0;
        margin-bottom: 12px;
    }

    .why-col:nth-child(3n) {
        border-right: 1px solid var(--border);
    }

    .why-col:nth-child(2n) {
        border-right: 0;
    }

    .who-img {
        height: 200px;
    }

    .testimonial {
        flex-direction: column;
    }

    .testimonial-img {
        width: 100%;
        height: 180px;
    }

    .cta-title {
        font-size: 22px;
    }

    .site-footer {
        text-align: center;
    }
}

/* ---------- Small mobile ---------- */
@media (max-width: 575px) {
    .how-wrap {
        padding: 30px 18px;
    }

    .app-card,
    .cta-bar,
    .trusted-card {
        padding: 22px 18px;
    }

    .hero-cta {
        gap: 16px;
    }

    .btn-lg-brand,
    .btn-light-brand {
        padding: 13px 24px;
        font-size: 15px;
    }

    .qr-box {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}