/* ==========================================================================
   Design tokens — type scale, brand colours, motion.
   Define sizes here once; sections should reference these rather than
   hardcoding new px values.
   ========================================================================== */
:root {
    /* Dimensions */
    --header-height: 72px;

    /* Type scale */
    --fs-h1: 50px;
    --lh-h1: 64px;
    --fs-h2: 56px;
    --lh-h2: 68px;
    --fs-h3: 48px;
    --lh-h3: 60px;
    --fs-h4: 22px;
    --lh-h4: 30px;
    --fs-lead: 18px;
    --lh-lead: 32px;
    --fs-body: 16px;
    --lh-body: 28px;
    --fs-small: 14px;
    --lh-small: 22px;

    /* Brand */
    --brand-gradient: linear-gradient(90deg, #e03c3b 0%, #c11818 100%);
    --brand-red: #e03c3b;
    --brand-red-dark: #c11818;
    --ink: #111111;
    --ink-muted: #666666;

    /* Motion */
    --ease: 0.25s ease;
}

body {
    margin: 0;
    padding: 0;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
}

/*Home Page Design*/

/* ==========================================================================
   Header — minimal logo + hamburger trigger & smart sticky container
   ========================================================================== */
.ff-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
    will-change: transform;
}

.ff-site-header--hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.ff-site-header--scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.ff-site-header--at-top {
    box-shadow: none;
}

.ff-site-header:focus-within {
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .ff-site-header {
        transition: none !important;
    }
}

.ff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: var(--header-height);
    background-color: #191112;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 100;
}

.ff-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ff-header__logo img {
    width: auto;
    height: 56px;
    object-fit: contain;
}

.ff-header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease);
    flex-shrink: 0;
}

.ff-header__menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.ff-header__menu-btn:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

/* ==========================================================================
   Drawer backdrop
   ========================================================================== */
.ff-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.ff-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   Right-side navigation drawer
   ========================================================================== */
.ff-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    background-color: #1a1314;
    color: #fff;
    color-scheme: dark;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.ff-drawer.is-open {
    transform: translateX(0);
}

/* ── Drawer header ───────────────────────────────────────────── */
.ff-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    box-sizing: border-box;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ff-drawer__header a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.ff-drawer__logo {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.ff-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease);
    flex-shrink: 0;
}

.ff-drawer__close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.ff-drawer__close:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

/* ── Drawer body (scrollable) ────────────────────────────────── */
.ff-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    color-scheme: dark;
    /* Smooth iOS overscroll */
    -webkit-overflow-scrolling: touch;
}

/* Firefox custom scrollbar (only applied when ::-webkit-scrollbar is unsupported) */
@supports not selector(::-webkit-scrollbar) {
    .ff-drawer__body {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}

/* Slim modern scrollbar for drawer (WebKit / Chromium / Safari / Edge) */
.ff-drawer__body::-webkit-scrollbar {
    width: 6px;
}

.ff-drawer__body::-webkit-scrollbar-track {
    background: transparent;
}

.ff-drawer__body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    transition: background-color var(--ease);
}

.ff-drawer__body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(224, 60, 59, 0.65);
}

.ff-drawer__body::-webkit-scrollbar-thumb:active {
    background-color: var(--brand-red);
}

.ff-drawer__body::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* ── Section labels ──────────────────────────────────────────── */
.ff-drawer__section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.4);
    padding: 16px 24px 8px;
}

.ff-drawer__app-section .ff-drawer__section-label {
    padding: 16px 0 8px;
}

/* ── Navigation links ────────────────────────────────────────── */
.ff-drawer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-drawer__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 180ms ease;
}

.ff-drawer__nav-link span {
    display: inline-block;
    transition: transform 180ms ease;
}

.ff-drawer__nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.ff-drawer__nav-link:hover span {
    transform: translateX(4px);
}

.ff-drawer__nav-link:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: -2px;
    background-color: rgba(255, 255, 255, 0.06);
}

.ff-drawer__nav-link i {
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 180ms ease, transform 180ms ease;
}

.ff-drawer__nav-link:hover i {
    opacity: 0.8;
    transform: translateX(3px);
}

/* ── Divider ─────────────────────────────────────────────────── */
.ff-drawer__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 8px 24px;
}

/* ── App download section ────────────────────────────────────── */
.ff-drawer__app-section {
    padding: 0 24px 32px;
}

.ff-drawer__app-copy {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 18px;
}

.ff-drawer__store-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ff-drawer__store-badges a,
.ff-drawer__badge-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    border-radius: 6px;
    transition: opacity 180ms ease, transform 180ms ease;
}

.ff-drawer__store-badges a:hover,
.ff-drawer__badge-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.ff-drawer__store-badges a:active,
.ff-drawer__badge-btn:active {
    transform: translateY(0);
}

.ff-drawer__store-badges a:focus-visible,
.ff-drawer__badge-btn:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

.ff-drawer__store-badges img {
    height: 42px;
    width: auto;
    object-fit: contain;
    border-radius: 0;
}

/* Reuse the existing App Store invert pattern */
.ff-drawer__store-badges img.app-store-badge {
    filter: invert(1);
}

/* ── Inline iOS coming-soon notice ──────────────────────────── */
.ff-drawer__ios-notice {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--brand-red);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    animation: ffNoticeSlideDown 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ff-drawer__ios-notice[hidden] {
    display: none !important;
}

@keyframes ffNoticeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ff-drawer__ios-notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ff-drawer__ios-notice-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.2px;
}

.ff-drawer__ios-notice-title i {
    font-size: 15px;
    color: var(--brand-red);
}

.ff-drawer__ios-notice-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    line-height: 1;
    font-size: 13px;
    border-radius: 6px;
    transition: color 150ms ease, background-color 150ms ease;
}

.ff-drawer__ios-notice-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.ff-drawer__ios-notice-close:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 1px;
}

.ff-drawer__ios-notice-text {
    font-size: 12.5px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 12px 0;
}

.ff-drawer__ios-notice-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(224, 60, 59, 0.15);
    border: 1px solid rgba(224, 60, 59, 0.35);
    border-radius: 8px;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ff-drawer__ios-notice-cta:hover {
    background: rgba(224, 60, 59, 0.28);
    border-color: rgba(224, 60, 59, 0.6);
    color: #fff;
    transform: translateY(-1px);
}

.ff-drawer__ios-notice-cta:active {
    transform: translateY(0);
}

.ff-drawer__ios-notice-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ff-drawer__ios-notice-cta i {
    font-size: 14px;
    color: #fff;
}

.ff-drawer__region-note {
    margin-top: 14px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: rgba(255, 255, 255, 0.45);
}

/* ── Drawer footer (sticky CTA) ─────────────────────────────── */
.ff-drawer__footer {
    flex-shrink: 0;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ff-drawer__cta {
    display: block;
    width: 100%;
    padding: 14px 24px;
    text-align: center;
    font-weight: 600;
    font-size: var(--fs-body);
    color: #fff;
    text-decoration: none;
    background: var(--brand-gradient);
    border-radius: 30px;
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}

.ff-drawer__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(224, 60, 59, 0.35);
    filter: brightness(1.06);
    color: #fff;
}

.ff-drawer__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(224, 60, 59, 0.3);
    filter: brightness(0.95);
}

.ff-drawer__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

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

    .ff-drawer,
    .ff-drawer-backdrop {
        transition: none !important;
    }
}

.btn-typ1 {
    background: var(--brand-gradient);
    padding: 8px 25px;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}

.btn-typ1:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(224, 60, 59, 0.35);
    filter: brightness(1.06);
}

.btn-typ1:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(224, 60, 59, 0.3);
    filter: brightness(0.95);
}

.btn-typ1 a {
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-small);
    line-height: 100%;
    text-align: center;
    color: #fff;
}

/* The gradient lives on the wrapper while the link is a child, so without this
   only the text glyphs are clickable and the padding is dead space. The overlay
   stretches the hit area over the whole pill without moving the padding, which
   several section-specific rules still override. */
.btn-typ1>a::after,
.btn-typ1>button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.btn-typ1 a:focus-visible,
.btn-typ1 button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 30px;
}

/* .banner-img {
    width: 100%;
    height: 80vh;
} */
.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.btn-typ2 {
    border: 1px solid #fff;
    color: #fff;
    width: fit-content;
    text-align: center;
    border-radius: 30px;
    padding: 8px 22px;
    /* Was `transition: 1s` declared inside :hover — that made the fade-in take a
       full second and the fade-out instant, since the rule stops applying on exit. */
    transition: background-color var(--ease), color var(--ease);
}

.btn-typ2 a {
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    color: #fff;
    text-decoration: none;
}

.btn-typ2:hover {
    background-color: #fff;
}

.btn-typ2:hover a {
    color: #000;
    text-decoration: none;
}

.btn-typ2 a {
    transition: color var(--ease);
}

.hero-banner-full {
    position: relative;
    overflow: hidden;
}

.hero-banner-full .banner-cont {
    color: #fff;
}

.banner-cont-main {
    max-width: 560px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.banner-cont-main h1 {
    padding: 14px 0 4px 0;
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

.banner-cont-main .cont-typ1 {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

/* --- Hero badge / actions / store row ------------------------------------ */
.hero-badge span {
    font-weight: 500;
    font-size: var(--fs-small);
    line-height: 100%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-badge {
    /* Static badge, not a link — drop the interactive hover the pill normally has. */
    background-color: rgba(255, 255, 255, 0.08);
}

.hero-badge:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
}

/* Match the outline button's height to the solid one beside it. */
.hero-actions .btn-typ1,
.hero-actions .btn-typ2 {
    padding: 12px 28px;
}

.hero-actions .btn-typ2 a {
    font-size: var(--fs-small);
}

.store-avail {
    padding-top: 26px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: rgba(255, 255, 255, 0.7);
}

.hero-region-note {
    padding-top: 14px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: rgba(255, 255, 255, 0.7);
}

.img-group {
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.img-group img {
    /* Spacing comes from the flex gap on .img-group now. */
    height: 42px;
    width: auto;
    object-fit: contain;
    border-radius: 0;
}

/* The App Store asset ships white-on-black; inverting it makes it a white
   badge with black content, matching the light Google Play badge beside it. */
.img-group img.app-store-badge {
    filter: invert(1);
}

.banner-img {
    /* Two soft red glows layered in front of the hero photo — a large warm pool
       behind the left-hand copy and a tighter one behind the phone mockup — so
       the dark background reads as lit rather than flat. The solid colour last
       in the stack is the load-time fallback; without it the white headline
       flashes against white while the background image downloads. */
    background:
        radial-gradient(58% 62% at 22% 46%, rgba(224, 60, 59, 0.30) 0%, rgba(224, 60, 59, 0.10) 42%, rgba(224, 60, 59, 0) 72%),
        radial-gradient(38% 46% at 74% 58%, rgba(224, 60, 59, 0.22) 0%, rgba(193, 24, 24, 0) 70%),
        url(../images/Hero_1.png),
        #191112;
    height: 80vh;
    width: 100%;
    /* Per-layer values: the glows fill the box, the photo keeps its original
       cover/right-center framing. A single value would apply to every layer. */
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center center, center center, right center;
    background-repeat: no-repeat;
    border-radius: 0;
}

.banner-content-img {
    width: 100%;
}

.banner-content-img img {
    width: 350px;
    height: auto;
    position: absolute;
    bottom: -35px;
    right: 10%;
}

.cont-typ1 {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.what-we-pro {
    text-align: center;
}

.wwp-cont {
    max-width: 1030px;
    text-align: center;
    margin: 0 auto;
}

.sec-padding {
    padding: 80px 0;
}

.sec-padding-m {
    padding: 80px 0;
}

.what-we-pro .cont-typ1 {
    color: #888888;
    font-size: 18px;
}

h1 {
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

h2 {
    color: var(--ink);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-align: center;
}

h4 {
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

h5 {
    font-weight: 600;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

h6 {
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.post-icon {
    background: var(--brand-gradient);
    border-radius: 50%;
    /* Explicit box + centring: this was `width: fit-content` with padding around
       a 30x30 image, which goes oval as soon as an icon's proportions differ. */
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.post-icon img {
    width: 30px;
    height: 30px;
}

.post-icon i {
    font-size: 28px;
    line-height: 1;
    color: #fff;
}

/* Stretch so all four cards match the tallest, whatever the copy length. */
.post-serv {
    align-items: stretch;
}

.post-block-single {
    text-align: center;
    border: 1px solid #eeeeee;
    background-color: #fff;
    padding: 30px 25px;
    border-radius: 20px;
    margin: 45px 7px 0;
    flex: 0 0 23%;
    /* Equal card heights regardless of copy length. */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}

.post-block-single:hover {
    background-color: #fafafa;
    border-color: #e2e2e2;
    transform: translateY(-3px);
}

/* --- "The Problem" section ------------------------------------------------ */
.problem-sec {
    text-align: center;
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 36px auto 0;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.problem-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    padding: 14px 20px;
    transition: background-color var(--ease), border-color var(--ease);
}

.problem-list li:hover {
    background-color: #fafafa;
    border-color: #dcdcdc;
}

.problem-list li i {
    color: var(--brand-red);
    font-size: 16px;
    font-weight: 700;
    flex: 0 0 auto;
}

.problem-close {
    margin-top: 34px;
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- "The Problem" scroll-reveal animation -------------------------------- */
.problem-sec.is-reveal-ready .wwp-cont,
.problem-sec.is-reveal-ready .problem-list li,
.problem-sec.is-reveal-ready .problem-close {
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Slightly shorter upward movement and duration for closing punchline */
.problem-sec.is-reveal-ready .problem-close {
    transform: translateY(14px);
    transition-duration: 420ms;
}

/* Stagger sequence when section enters viewport */
.problem-sec.is-reveal-ready.is-revealed .wwp-cont {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-list li:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 90ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-list li:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 170ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-list li:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 250ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-list li:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 330ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-list li:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 410ms;
}

.problem-sec.is-reveal-ready.is-revealed .problem-close {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 490ms;
}

/* Post-animation cleanup: reset will-change and transform to maintain crisp subpixel rendering */
.problem-sec.is-reveal-ready.is-reveal-done .wwp-cont,
.problem-sec.is-reveal-ready.is-reveal-done .problem-close {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.problem-sec.is-reveal-ready.is-reveal-done .problem-list li {
    opacity: 1;
    transform: none;
    will-change: auto;
    transition: background-color var(--ease), border-color var(--ease);
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .problem-sec.is-reveal-ready .wwp-cont,
    .problem-sec.is-reveal-ready .problem-list li,
    .problem-sec.is-reveal-ready .problem-close {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* --- "How It Works" section ----------------------------------------------- */
.how-it-works {
    background-color: #fafafa;
    text-align: center;
}

.hiw-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 45px;
}

.hiw-step {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 20px;
    padding: 34px 28px;
    text-align: left;
    transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}

.hiw-step:hover {
    background-color: #fafafa;
    border-color: #e2e2e2;
    transform: translateY(-3px);
}

.hiw-num {
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 14px;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hiw-step h3 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin-bottom: 10px;
}

/* Card titles sit a step below section headings. */
.post-block-single h3 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

.what-we-pro .post-block-single .cont-typ1 {
    font-size: 14px;
    line-height: 20px;
}

.about-sec.sec-padding {
    padding: 80px 0 40px;
}

.about-background {
    background: url(../images/Hero.png);
    width: 100%;
    padding: 0 50px;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px 25px 25px 25px;
}

.video-section.sec-padding {
    padding: 0px 0 120px 0;
}

.about-us {
    position: relative;
    color: #fff;
    height: 100%;
}

.about-sec h2 {
    color: #fff;
    margin-bottom: 20px;
    text-align: left;
}

.col-sm-3.red-cont {
    width: fit-content;
}

.first-task h3,
.boost-income h3,
.fix-finder-comm h3,
.charity-banner h3 {
    margin-bottom: 20px;
}

.about-sec .cont-typ1 {
    font-size: 17px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.88);
    opacity: 1;
}

.about-img img {
    width: 75%;
}

.about-img {
    margin-top: -180px;
}

/* All four About Us callouts are live features, so they carry equal visual
   weight. Previously the base state was dimmed (31% white text, 50% icon) and
   only the first item carried .active, which read as three disabled features. */
.cont-typ2 {
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: #fff;
}

.single-list img {
    padding-right: 15px;
    opacity: 1;
}

.single-list {
    padding-bottom: 25px;
}

.single-list:hover img {
    opacity: 1;
}

.single-list:hover .about-cont.cont-typ2 {
    color: #fff;
}

h3 {
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

.cont-list ul {
    list-style: none;
    padding: 20px 0;
}

.cont-list ul li {
    position: relative;
    padding: 6px 0 6px 30px;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
}

.cont-list ul li:before {
    position: absolute;
    content: "";
    background: url(../images/Frame.png);
    height: 24px;
    width: 24px;
    top: 3px;
    left: 0;
}

.first-task .btn-typ1 {
    width: fit-content;
}

.sub-img-cont {
    position: relative;
    text-align: left;
}

.img-sec {
    text-align: right;
}

.active-btn::before {
    background: url(../images/Ellipse\ 7.png);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    content: "";
}

.active-btn {
    position: relative;
    padding-left: 8px;
}

.img-cont-full .btn-typ1 {
    padding: 5px 14px;
    position: absolute;
    right: 0;
    top: 3px;
}

.img-cont-full .btn-typ1 a {
    font-size: 12px;
}

.sub-img-cont .cont-typ1 {
    color: #888888;
    padding-bottom: 10px;
}

.sub-img-cont .img-cont-full {
    width: 345px;
    background-image: url(../images/Subtract.png);
    position: absolute;
    bottom: -70px;
    left: 0;
    padding: 13px;
    z-index: 1;
    box-shadow: 0px 0px 1px 0px #1e1e1e90;
}

.green-cont {
    font-weight: 400;
    font-size: 14px;
    line-height: 110.00000000000001%;
    color: #28b446;
}

.red-cont {
    font-weight: 400;
    font-size: 14px;
    line-height: 110.00000000000001%;
    background: linear-gradient(90deg, #e03c3b 0%, #c11818 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cont {
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    padding: 10px 0;
}

.set-icon {
    font-weight: 400;
    font-size: 16px;
    line-height: 110.00000000000001%;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.set-icon::before {
    background: url(../images/location.png);
    content: "";
    height: 18px;
    width: 18px;
    position: absolute;
    top: 0;
    left: 0;
}

.cont-img {
    width: 80%;
}

.front-icon {
    position: relative;
    padding-left: 22px;
}

.front-icon::before {
    position: absolute;
    width: 19px;
    height: 19px;
    top: 2px;
    left: 0;
    content: "";
    object-fit: contain;
}

.front-icon.comm::before {
    background: url(../images/message-favorite.png);
}

.front-icon.offer::before {
    background: url(../images/dollar-square.png);
}

.botm-cont {
    padding: 5px 10px;
}

.boost-income .img-sec {
    text-align: left;
}

.boost-income .img-sec {
    text-align: left;
}

.b-sub-img-cont {
    position: relative;
    text-align: left;
}

.b-sub-img-cont .img-cont-full {
    width: 345px;
    position: absolute;
    bottom: -125px;
    right: -43px;
}

.boost-income .btn-typ1 {
    width: fit-content;
}

.bgf5 {
    background-color: #f5f5f5;
    padding: 70px 0 160px;
}

.sec-padding.faq {
    padding: 50px 0 0;
}

.fix-finder-comm .btn-typ1 {
    width: fit-content;
}

.progress-container {
    box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1);
}

.progress-container,
.progress {
    background-color: #eee;
    border-radius: 5px;
    position: relative;
    height: 7px;
    width: 300px;
}

.progress {
    background-color: #e03c3b;
    width: 0;
    transition: width 0.4s linear;
}

.percentage {
    background-color: #e03c3b;
    border-radius: 5px;
    box-shadow: 0 4px 5px rgb(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    top: 20px;
    left: 0;
    transform: translateX(-50%);
    width: 40px;
    text-align: center;
    transition: left 0.4s linear;
}

.percentage::after {
    background-color: #e03c3b;
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 10px;
    width: 10px;
    z-index: -1;
}

.img-cont-full-back-color {
    background-color: #fff;
    box-shadow: 2px 2px 15px 0px #2222221a;
    border-radius: 20px;
    width: 350px;
    padding: 20px;
    position: absolute;
    bottom: -60px;
    left: 0;
}

table.table.w-100 {
    margin-top: 45px;
    background-color: #f5f5f5;
    border-radius: 14px;
}

.table.mile th {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #1e1e1e;
    border: 0;
    padding: 17px 12px;
}

.table.mile td {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: right;
    color: #888888;
    border: 0;
    padding: 17px 12px;
}

.table.mile tbody {
    border-top: 1px solid #eeeeee;
}

.carousel img {
    width: 70px;
    max-height: 70px;
    border-radius: 50%;
    margin-right: 1rem;
    overflow: hidden;
}

.carousel-inner {
    padding: 1em;
}

.wous .cont-typ1 {
    padding-bottom: 40px;
}

.card-body {
    border: 0px;
    background-color: #fafafa;
    text-align: left;
    border-radius: 20px;
    position: relative;
    padding-top: 70px;
}

.card-body::before {
    background: url("../images/Frame (1).png");
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    content: "";
    background-size: contain;
}

.card-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #888888;
}

.card-body .card-title.fw-bold {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #232323;
}

.card-body hr {
    color: #eeeeee;
}

#testimonialCarousel .carousel-indicators [data-bs-target] {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.carousel-indicators {
    bottom: -55px;
}

#testimonialCarousel .carousel-indicators .active[data-bs-target] {
    border: 1px solid #e03c3b;
    background-color: #e03c3b;
}

.owl-dots {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 30px 0px 0px;
}

.owl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cccccc;
    display: inline-block;
    margin: 0px 5px;
}

.owl-dot.active {
    background: linear-gradient(90deg, #e03c3b 0%, #c11818 100%);
    position: relative;
}

.owl-dot.active::after {
    border: 1px solid #e03c3b;
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    left: -2px;
}

.footer-full {
    /* Same glow treatment as the hero (shares Hero_1.png) so the page is framed
       consistently top and bottom. */
    background-image:
        radial-gradient(46% 70% at 18% 40%, rgba(224, 60, 59, 0.22) 0%, rgba(224, 60, 59, 0) 72%),
        url("../images/Hero_1.png");
    background-color: #191112;
    width: 100%;
    min-height: auto;
    height: auto;
    background-size: 100% 100%, cover;
    color: #fff;
    background-repeat: no-repeat;
    border-radius: 0;
    position: relative;
    background-position: center center, center center;
    padding-top: 70px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-full .logo-img {
    width: 175px;
}

.foot-cont {
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    opacity: 0.7;
}

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

.foot-title.red-cont {
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    padding-bottom: 15px;
}

ul.foot-list li,
.te li {
    padding: 4px 0;
}

ul.foot-list li:hover a,
.te li:hover {
    opacity: 1;
}

.footer-full .foot-list.te li a.mail-tel {
    opacity: 1 !important;
    color: #fff !important;
    word-break: break-word;
}

ul.foot-list li a,
.foot-list.te li {
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
}

hr {
    margin: 0;
}

.copy-r {
    position: relative;
    width: 100%;
    margin-top: 48px;
    background-color: #171211;
}

.copy-r a {
    text-align: center;
    color: #fff;
    padding: 20px 0;
    font-size: 16px;
    display: block;
    text-decoration: none;
}

.accordion,
.accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.accordion {
    background: #ffffff;
    margin: 40px 0 0;
}

.faq-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: start;
}

.faq-row:has(.active-faq),
.faq-row.has-active-faq {
    align-items: start;
}

.accordion-section {
    margin: 0;
    border-radius: 10px;
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.accordion-section-title {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    position: relative;
    padding: 12px 42px 12px 16px;
    background: #eeeeee;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    border: 0px;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    transition: all linear 0.15s;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

a.accordion-section-title:hover {
    color: #111;
}

.accordion-section-title:focus {
    color: #1a1918;
}

.accordion-section-title:focus-visible {
    outline: 2px solid var(--brand-red, #c11818);
    outline-offset: -2px;
}

.accordion-section-title .plus,
.accordion-section-title .minus {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-section-title .plus {
    display: flex;
}

.accordion-section-title .minus {
    display: none;
}

.active-faq.accordion-section-title .plus {
    display: none;
}

.active-faq.accordion-section-title .minus {
    display: flex;
}

.active-faq.accordion-section-title,
.accordion-section-title.active {
    border-radius: 10px 10px 0 0;
    flex: 0 0 auto;
}

.accordion-section-title.active {
    color: #1a1918;
}

.accordion-section-title.active .minus {
    display: flex;
}

.accordion-section-title.active .plus {
    display: none;
}

.accordion-section-title.active,
.accordion-section-title:hover {
    text-decoration: none;
}

.accordion-section-content {
    display: none;
    color: #888888;
    text-align: left;
    font-size: 15px;
    background-color: #eeeeee;
    padding: 0 16px 20px;
    border-radius: 0 0 10px 10px;
}

.accordion-section-content p {
    margin-top: 0;
    margin-bottom: 0;
}

.accordion-section-content#accordion-3 p {
    margin-bottom: 2px;
    line-height: 1.2;
}

.video-full {
    height: 100vh;
    width: 100%;
}

.video-full video {
    height: 100%;
    width: 100%;
    border-radius: 25px;
    object-fit: cover;
}

.backimg {
    position: relative;
}

.backimg img {
    position: absolute;
    top: -210px;
    right: 0;
    height: 440px;
}

.bg-body-tertiary {
    background: none !important;
}

.owl-carousel .owl-item .d-flex.align-items-center img {
    height: 65px;
    width: 65px;
    margin-right: 10px;
}