/* ============================================================================
 * [Landing] "Application mobile" section — feature list + download area
 * ==========================================================================*/
/* section spacing (own the vertical rhythm; the theme's section_padding is not used here) */
.section_mobile_app { padding: 40px 0 54px; }
.section_mobile_app .app-download-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.fc-appfeatures { list-style: none; padding: 0; margin: 26px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fc-appfeatures li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e7ecf2; border-radius: 16px; padding: 18px 20px; box-shadow: 0 5px 16px rgba(20,42,74,.06); font-size: 14.5px; color: #5a6b7b; line-height: 1.3; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.fc-appfeatures li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,42,74,.11); border-color: #cfe4f4; }
/* suppress the theme's default check-bullet on about_us list items (we use our own icon chips) */
.fc-appfeatures li::before { content: none !important; display: none !important; }
/* reset the theme's eyebrow styling (about_us_inner span is uppercased/bold) for the feature labels */
.fc-appfeatures li span { text-transform: none; font-weight: 600; letter-spacing: normal; color: #3e5062; font-size: 14px; }
.fc-appfeatures li i { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #23b3e6 0%, #0187c5 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 14px rgba(1,135,197,.30); }
.fc-app-free { font-size: 13.5px; color: #8a95a3; margin-top: 16px; }
.fc-app-free i { color: #2bbf9a; margin-right: 6px; }
@media (max-width: 767px) { .fc-appfeatures { grid-template-columns: 1fr; } }

/* ============================================================================
 * [Landing] FenuaCompta mobile app mockup — a premium 3D iPhone whose screens
 * faithfully reproduce the real app (theme "Le Récif"). Rebuilt 1:1 from the
 * app's design tokens: Plus Jakarta Sans, cyan #20AEE3 / navy #1B4F8C palette,
 * real status bar + 5-tab bar, real screens (Accueil / Facturation / Facture /
 * Assistant). Tilts on scroll + cross-fades screens. Markup: .fc-phone-stage.
 * ==========================================================================*/
.fc-phone-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 660px; perspective: 1500px; perspective-origin: 50% 40%; }
.fc-phone__glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(32,174,227,.18), rgba(27,79,140,.09) 46%, rgba(32,174,227,0) 72%); z-index: 0; }
/* ground contact shadow so the phone rests on a surface rather than floating in void */
.fc-phone-stage::after { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; bottom: 24px; width: 252px; height: 40px; transform: translateX(-52%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(12,42,74,.34) 0%, rgba(12,42,74,0) 70%); filter: blur(4px); }

/* ---- device frame (titanium) ---- */
.fc-device {
    position: relative; z-index: 1; width: 300px; height: 648px; border-radius: 56px; padding: 12px;
    background: linear-gradient(234deg, #6a7587 0%, #3a4451 15%, #11151c 42%, #090c11 58%, #262d38 82%, #545e6d 100%);
    transform-style: preserve-3d;
    box-shadow:
        6px 30px 34px -12px rgba(12,42,74,.42),
        28px 54px 72px -26px rgba(12,42,74,.40),
        0 96px 128px -58px rgba(12,42,74,.36),
        inset 0 0 0 2px rgba(255,255,255,.06),
        inset 0 3px 3px rgba(255,255,255,.34),
        inset 0 -4px 7px rgba(0,0,0,.62),
        inset -7px 0 10px rgba(255,255,255,.13),
        inset 8px 0 13px rgba(0,0,0,.55);
    transform: rotateY(21deg) rotateX(4deg) rotate(-.5deg);
    transition: transform .2s ease-out; will-change: transform;
}
/* (idle float removed — phone stays grounded; scroll-tilt still applies) */
.fc-device::before { content: ""; position: absolute; inset: 3px; border-radius: 53px; pointer-events: none; z-index: 30;
    background: linear-gradient(220deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 78%, rgba(255,255,255,.14) 100%); }
/* real extruded device body (behind the front face) → perspective-correct thickness */
.fc-device::after { content: ""; position: absolute; inset: 0; border-radius: 56px; background: linear-gradient(240deg, #39424f 0%, #0a0d12 60%); box-shadow: 0 0 0 1px #05070b; transform: translateZ(-24px); }
/* side buttons */
.fc-btn { position: absolute; background: linear-gradient(90deg, #20262f, #454e5c); border-radius: 4px; z-index: 0; }
.fc-btn--act { left: -3px; top: 116px; width: 3px; height: 26px; }
.fc-btn--vup { left: -3px; top: 160px; width: 3px; height: 46px; }
.fc-btn--vdn { left: -3px; top: 216px; width: 3px; height: 46px; }
.fc-btn--pwr { right: -3px; top: 176px; width: 3px; height: 66px; border-radius: 4px 0 0 4px; background: linear-gradient(270deg, #20262f, #454e5c); }

/* ---- screen ---- */
.fc-screen {
    position: absolute; inset: 12px; border-radius: 44px; overflow: hidden; z-index: 2;
    background: #EEF2F7; color: #142A44;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --brand: #20AEE3; --brandS: #1B4F8C; --tint: #E4F6FC;
    --bg: #EEF2F7; --card: #FFFFFF; --alt: #F4F7FA; --bd: #E4E9F0;
    --ink: #142A44; --mut: #6B7A90; --sub: #9AA8BA;
    --ok: #0E7D70; --okb: #DEF4F1; --warn: #9A6512; --warnb: #FBEFD8; --dgr: #C2362B; --dgrb: #FDE7E4; --inf: #1B4F8C; --infb: #E4F6FC;
    --card-sh: 0 5px 12px rgba(12,42,74,.07); --card-sh-md: 0 12px 24px rgba(12,42,74,.10);
}
.fc-screen * { box-sizing: border-box; }
/* glass sheen for depth */
.fc-screen::after { content: ""; position: absolute; inset: 0; z-index: 32; pointer-events: none; border-radius: 44px;
    background: linear-gradient(118deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 11%, rgba(255,255,255,0) 27%, rgba(255,255,255,0) 100%); }

/* dynamic island */
.fc-island { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 94px; height: 27px; background: #05070b; border-radius: 16px; z-index: 22; }
.fc-island::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1c3350, #070c14 70%); }

/* status bar */
.fc-sb { position: absolute; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 30px; z-index: 18; color: #142A44; pointer-events: none; }
.fc-sb__t { font-size: 14px; font-weight: 700; letter-spacing: .2px; margin-top: -2px; }
.fc-sb__i { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: -2px; }

/* home indicator */
.fc-hi { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 106px; height: 4px; border-radius: 3px; background: #142A44; opacity: .3; z-index: 25; pointer-events: none; }

/* ---- cycling screens ---- */
.fc-view { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.fc-scr { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.fc-scr.is-active { opacity: 1; transform: none; }
.fc-body { height: 100%; overflow: hidden; padding: 5px 15px 86px; display: flex; flex-direction: column; gap: 6px; }
.fc-body > * { flex: 0 0 auto; }
.fc-scr--full .fc-body { padding-bottom: 14px; gap: 6px; }

/* shared bits */
.fc-ov { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); }
.fc-mny { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.4px; white-space: nowrap; }
.fc-mny i { font-style: normal; font-weight: 600; font-size: .66em; color: var(--mut); margin-left: 2px; }
.fc-card { background: var(--card); border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--card-sh); }
.fc-badge { display: inline-flex; align-items: center; line-height: 1; font-size: 9px; font-weight: 600; padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.fc-badge--ok { background: var(--okb); color: var(--ok); } .fc-badge--warn { background: var(--warnb); color: var(--warn); }
.fc-badge--dgr { background: var(--dgrb); color: var(--dgr); } .fc-badge--inf { background: var(--infb); color: var(--inf); }
.fc-badge--neu { background: var(--alt); color: var(--mut); }

/* ---- bottom tab bar (shared) ---- */
.fc-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -5px 16px rgba(12,42,74,.07); display: flex; padding: 9px 4px 12px; z-index: 14; }
.fc-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fc-tab__ic { width: 40px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--sub); transition: background .25s, color .25s; }
.fc-tab__ic i { line-height: 1; }
.fc-tab.is-on .fc-tab__ic { box-shadow: 0 5px 11px rgba(27,79,140,.32); }
.fc-tab__lb { font-size: 8px; font-weight: 500; color: var(--sub); letter-spacing: .1px; white-space: nowrap; }
.fc-tab.is-on .fc-tab__ic { background: var(--brandS); color: #fff; }
.fc-tab.is-on .fc-tab__lb { color: var(--brandS); font-weight: 700; }
.fc-screen.is-detail .fc-tabs { display: none; }

/* ============================ ACCUEIL ============================ */
.fc-greet { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.fc-greet__h { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); line-height: 1.1; }
.fc-greet__c { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); margin-top: 3px; }
.fc-greet__logo { width: 44px; height: 44px; border-radius: 15px; background: var(--brandS); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; flex: 0 0 auto; }

.fc-hero { border-radius: 20px; padding: 10px 15px; color: #fff; background: linear-gradient(140deg, #123A63 0%, #1B4F8C 100%); box-shadow: 0 14px 28px rgba(12,42,74,.28); }
.fc-hero__top { display: flex; align-items: center; justify-content: space-between; }
.fc-hero__ov { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.fc-hero__trend { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.15); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; color: #6ff0d0; }
.fc-hero__big { font-size: 24px; font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.fc-hero__big i { font-style: normal; font-weight: 600; font-size: .5em; color: rgba(255,255,255,.72); margin-left: 3px; }
.fc-hero__div { height: 1px; background: rgba(255,255,255,.15); margin: 0 -15px 8px; }
.fc-hero__row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.fc-hero__row .fa, .fc-hero__row .fas { color: rgba(255,255,255,.85); }
.fc-hero__row span { color: rgba(255,255,255,.75); }
.fc-hero__row b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-hero__row b i { font-style: normal; font-weight: 600; font-size: .66em; color: rgba(255,255,255,.6); margin-left: 2px; }

.fc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-tile { background: var(--card); border: 1px solid var(--bd); border-radius: 14px; padding: 9px 11px; box-shadow: var(--card-sh); position: relative; }
.fc-tile__ic { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-bottom: 4px; }
.fc-tile__ic--cy { background: var(--tint); color: var(--brand); } .fc-tile__ic--co { background: var(--dgrb); color: var(--dgr); }
.fc-tile__l { font-size: 11px; color: var(--mut); font-weight: 600; }
.fc-tile__v { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.fc-tile__v i { font-style: normal; font-weight: 600; font-size: .62em; color: var(--mut); margin-left: 2px; }
.fc-tile__ch { position: absolute; right: 10px; top: 12px; color: var(--sub); font-size: 11px; }

.fc-chart { padding: 9px 12px; }
.fc-chart__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fc-chart__hd h5 { font-size: 12px; line-height: 1.15; font-weight: 700; color: var(--ink); margin: 0; }
.fc-chart__yr { display: inline-flex; align-items: center; gap: 5px; background: var(--alt); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--mut); }
.fc-chart__leg { display: flex; gap: 18px; margin-bottom: 5px; }
.fc-chart__leg > div { display: flex; flex-direction: column; gap: 2px; }
.fc-chart__leg .fc-lgk { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--mut); }
.fc-chart__leg .fc-lgk .dot { width: 8px; height: 8px; border-radius: 50%; }
.fc-chart__leg .fc-lgv { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.fc-chart__leg .fc-lgv i { font-style: normal; font-weight: 600; font-size: .6em; margin-left: 2px; opacity: .7; }
.fc-chart svg { display: block; width: 100%; height: 40px; }
.fc-chart__ax { display: flex; justify-content: space-between; margin-top: 3px; padding: 0 2px; }
.fc-chart__ax span { font-size: 8.5px; color: var(--sub); font-weight: 600; }

/* ============================ FACTURATION ============================ */
.fc-seg { display: flex; gap: 22px; border-bottom: 1px solid var(--bd); padding: 0 2px; margin-bottom: 2px; }
.fc-seg span { font-size: 14px; font-weight: 600; color: var(--sub); padding-bottom: 8px; position: relative; }
.fc-seg span.on { color: var(--ink); font-weight: 700; }
.fc-seg span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.fc-srch { display: flex; gap: 9px; }
.fc-srch__f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 40px; background: #fff; border: 1.5px solid var(--bd); border-radius: 13px; padding: 0 13px; color: var(--sub); font-size: 12px; white-space: nowrap; overflow: hidden; }
.fc-srch__b { width: 40px; height: 40px; border-radius: 13px; background: #fff; border: 1.5px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--mut); font-size: 14px; }
.fc-pills { display: flex; gap: 8px; overflow: hidden; }
.fc-pill { font-size: 9.5px; font-weight: 700; line-height: 1; padding: 4px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--bd); color: var(--mut); white-space: nowrap; }
.fc-pill.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fc-mhdr { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); margin: 2px 2px -2px; }
.fc-inv { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--bd); border-radius: 15px; padding: 8px 12px; box-shadow: var(--card-sh); }
.fc-inv__t { width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.fc-inv__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-inv__m b { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fc-inv__sub { font-size: 10.5px; color: var(--sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-inv__r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.fc-inv__r .fc-mny { font-size: 13px; color: var(--ink); }
.fc-inv__r .fc-badge { font-size: 8.5px; padding: 3px 8px; border-radius: 6px; }
.fc-fab { position: absolute; right: 15px; bottom: 88px; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 12px 24px rgba(32,174,227,.45); z-index: 13; }

/* ============================ FACTURE (detail) ============================ */
.fc-back { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.fc-back span.c { width: 34px; height: 34px; border-radius: 999px; background: var(--alt); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fc-dt-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fc-dt-hd__num { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); }
.fc-dt-hd__cli { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; margin-top: 4px; line-height: 1.15; }
.fc-dt-total .fc-ov { display: block; margin-bottom: 2px; }
.fc-dt-total .big { font-size: 32px; font-weight: 800; letter-spacing: -.8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-dt-total .big i { font-style: normal; font-weight: 600; font-size: .42em; color: var(--mut); margin-left: 4px; }
.fc-dt-dates { display: flex; padding: 0; overflow: hidden; }
.fc-dt-dates > div { flex: 1; padding: 10px 14px; }
.fc-dt-dates > div + div { border-left: 1px solid var(--bd); }
.fc-dt-dates .l { font-size: 10px; color: var(--mut); font-weight: 600; }
.fc-dt-dates .v { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.fc-prev { position: relative; height: 78px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--bd); box-shadow: var(--card-sh); display: flex; align-items: center; justify-content: center; }
.fc-prev__ghost { position: absolute; inset: 0; padding: 14px; }
.fc-prev__ghost .g { display: block; background: #E6ECF3; border-radius: 4px; }
.fc-prev__ghost .g1 { width: 40px; height: 12px; } .fc-prev__ghost .g2 { width: 54px; height: 10px; margin-left: auto; margin-top: -12px; }
.fc-prev__ghost .g3 { width: 100%; height: 7px; margin-top: 16px; } .fc-prev__ghost .g4 { width: 80%; height: 7px; margin-top: 8px; } .fc-prev__ghost .g5 { width: 60%; height: 7px; margin-top: 8px; }
.fc-prev__ghost .g6 { width: 66px; height: 14px; margin-top: 16px; margin-left: auto; }
.fc-prev__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink); box-shadow: 0 6px 16px rgba(12,42,74,.14); }
.fc-prev__btn .fas { color: var(--brand); }
.fc-btn-out { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; border-radius: 13px; border: 1.5px solid var(--bd); background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.fc-btn-out .fas { color: var(--brandS); }
.fc-det { padding: 11px 14px; }
.fc-det .fc-ov { display: block; margin-bottom: 10px; }
.fc-li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.fc-li__d { font-size: 12.5px; font-weight: 600; color: var(--ink); } .fc-li__q { font-size: 10.5px; color: var(--sub); margin-top: 2px; }
.fc-li .fc-mny { font-size: 12.5px; color: var(--ink); }
.fc-sum { display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); padding: 5px 0; }
.fc-sum .fc-mny { color: var(--ink); font-weight: 600; }
.fc-sum--tot { border-top: 1px solid var(--bd); margin-top: 4px; padding-top: 9px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fc-sum--tot .fc-mny { font-size: 15px; }
.fc-btn-pri { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(32,174,227,.4); }

/* ============================ ASSISTANT ============================ */
.fc-as-hd { display: flex; align-items: center; gap: 10px; }
.fc-as-hd__ic { width: 36px; height: 36px; border-radius: 12px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.fc-as-hd__m { flex: 1; min-width: 0; }
.fc-as-hd__t { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.fc-as-hd__t .fas { font-size: 10px; color: var(--mut); }
.fc-as-hd__s { font-size: 10.5px; color: var(--sub); margin-top: 1px; }
.fc-as-hd__help { width: 34px; height: 34px; border-radius: 999px; background: var(--alt); color: var(--mut); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fc-as-hd__new { display: inline-flex; align-items: center; gap: 5px; background: var(--tint); color: var(--brandS); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; }
.fc-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; padding-top: 2px; }
.fc-bub { font-size: 12px; line-height: 1.4; padding: 8px 12px; border-radius: 15px; max-width: 86%; }
.fc-bub--me { align-self: flex-end; background: var(--brandS); color: #fff; border-bottom-right-radius: 5px; }
.fc-bub--ai { align-self: flex-start; background: #fff; border: 1px solid var(--bd); color: #33465c; border-bottom-left-radius: 5px; box-shadow: var(--card-sh); }
.fc-bub--ai b { color: var(--ink); }
.fc-statc { align-self: flex-start; width: 90%; background: #fff; border: 1px solid var(--bd); border-radius: 18px; padding: 14px; box-shadow: var(--card-sh-md); }
.fc-statc .fc-ov { display: block; margin-bottom: 5px; }
.fc-statc__big { font-size: 25px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-statc__big i { font-style: normal; font-weight: 600; font-size: .46em; color: var(--mut); margin-left: 3px; }
.fc-statc__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fc-statc__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--okb); border-radius: 999px; padding: 2px 8px; }
.fc-statc__sub { font-size: 11px; color: var(--sub); }
.fc-inbar { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.fc-inbar__f { flex: 1; height: 38px; background: #fff; border: 1px solid var(--bd); border-radius: 999px; display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: var(--sub); }
.fc-inbar__s { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; box-shadow: 0 6px 14px rgba(32,174,227,.4); }

/* reduced motion + responsive */
@media (prefers-reduced-motion: reduce) { .fc-device { animation: none; } }
@media (max-width: 991px) { .fc-phone-stage { min-height: 680px; margin-bottom: 30px; } .fc-device { transform: rotateY(10deg) rotateX(2deg); } }

/* ============================================================================
 * [Landing] carousel controls + adaptive right panels + receipt-scan screen
 * ==========================================================================*/

/* ---- carousel controls (below the phone) ---- */
.fc-controls { display: flex; align-items: center; gap: 14px; max-width: 320px; margin: 0 0 22px; }
.fc-controls .fc-nav { flex: 0 0 42px; width: 42px !important; height: 42px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid #e2e8f0; background: #fff; color: #1B4F8C; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(12,42,74,.09); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
@media (hover: hover) {
    .fc-controls .fc-nav:hover { background: #1B4F8C; border-color: #1B4F8C; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(27,79,140,.3); }
}
.fc-controls .fc-nav:active { transform: translateY(0); }
.fc-nav:active { transform: translateY(0); }
.fc-prog { flex: 1; display: flex; align-items: center; gap: 6px; align-self: stretch; }
.fc-prog__seg { flex: 1; height: 5px; border-radius: 999px; background: #dbe3ec; overflow: hidden; cursor: pointer; }
.fc-prog__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #23b3e6, #0187c5); border-radius: 999px; }

/* ---- adaptive right-column panels ---- */
.fc-panels { position: relative; min-height: 408px; margin: 6px 0 8px; }
.fc-panel { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.fc-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.fc-panel h3 { margin: 0 0 12px; }
.fc-panel > p { margin: 0 0 20px; }
/* the list fills the fixed-height panel, so its 3 cards share the space evenly (no dead gap
   under the last card) and each card vertically centres its icon + text */
.fc-panel .fc-appfeatures { grid-template-columns: 1fr; gap: 12px; margin: 0; flex: 1 1 auto; align-content: stretch; }
.fc-panel .fc-appfeatures li { padding: 15px 18px; align-items: center; }
.fc-panel .fc-appfeatures li .ft { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-panel .fc-appfeatures li .ft b { font-size: 14.5px; font-weight: 700; color: #1f2d3d; line-height: 1.2; }
.fc-panel .fc-appfeatures li .ft span { font-size: 11.5px; font-weight: 500; color: #93a0ad; line-height: 1.35; letter-spacing: normal; text-transform: none; }
.fc-panel .fc-appfeatures li .ft .fc-rates { display: flex; gap: 6px; margin-top: 4px; }
.fc-panel .fc-appfeatures li .ft .fc-rates { flex-wrap: wrap; }
.fc-panel .fc-appfeatures li .ft .fc-rates em { font-style: normal; font-size: 10px; font-weight: 700; color: #0187c5; background: #e7f6fc; border-radius: 6px; padding: 3px 7px; line-height: 1; white-space: nowrap; }
@media (max-width: 991px) {
    .fc-panels { min-height: 0; }
    .fc-panel { position: relative; opacity: 1; transform: none; }
    .fc-panel:not(.is-active) { display: none; }
    /* stacked layout: full-width copy, controls centered under the phone */
    .section_mobile_app .about_us_inner.p-l-40 { padding-left: 0; }
    .section_mobile_app .fc-controls { max-width: 340px; margin: 4px auto 22px; }
    .section_mobile_app .fc-phone-stage { min-height: 0; margin-top: 10px; }
}

/* ---- receipt-scan (AI) screen ---- */
.fc-screen.is-scan { background: #0b141d; }
.fc-screen.is-scan .fc-sb { color: #fff; }
.fc-scr--scan .fc-body { padding: 0; gap: 0; }
.fc-scan { display: flex; flex-direction: column; }
.fc-scan__cam { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(125% 90% at 50% 28%, #223444 0%, #0c151e 62%, #070d14 100%); }
.fc-scan__status { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); color: #fff; font-size: 9.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.fc-scan__status i { color: #37e2b4; }
.fc-scan__corner { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.85); }
.fc-scan__corner.tl { top: 46px; left: 28px; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.fc-scan__corner.tr { top: 46px; right: 28px; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.fc-scan__corner.bl { bottom: 30px; left: 28px; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.fc-scan__corner.br { bottom: 30px; right: 28px; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.fc-scan__receipt { width: 140px; background: #fff; border-radius: 7px; padding: 13px 13px 15px; box-shadow: 0 22px 44px rgba(0,0,0,.5); transform: rotate(-3deg); }
.fc-scan__receipt .rh { font-size: 10.5px; font-weight: 800; color: #142A44; text-align: center; letter-spacing: .5px; }
.fc-scan__receipt .rd { font-size: 7.5px; color: #9aa5b1; text-align: center; margin-bottom: 9px; }
.fc-scan__receipt .rl { height: 4px; background: #eef1f5; border-radius: 2px; margin: 5px 0; }
.fc-scan__receipt .rl.s { width: 58%; }
.fc-scan__receipt .rtot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #d7dde5; }
.fc-scan__receipt .rtot span { font-size: 8px; font-weight: 700; color: #6B7A90; }
.fc-scan__receipt .rtot b { font-size: 12px; font-weight: 800; color: #142A44; }
.fc-scan__laser { position: absolute; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, transparent, #37e2b4, transparent); box-shadow: 0 0 12px 2px rgba(55,226,180,.55); animation: fcLaser 2.8s ease-in-out infinite; }
@keyframes fcLaser { 0%, 100% { top: 62px; } 50% { top: 250px; } }
.fc-scan__out { background: #fff; border-radius: 22px 22px 0 0; margin-top: -18px; position: relative; z-index: 2; padding: 15px 16px 16px; box-shadow: 0 -8px 24px rgba(0,0,0,.22); }
.fc-scan__out .fc-ov { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fc-scan__out .fc-ov i { color: var(--brand); }
.fc-scan__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f3f7; }
.fc-scan__row:last-of-type { border-bottom: 0; }
.fc-scan__row .k { font-size: 11px; color: var(--mut); }
.fc-scan__row .v { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-scan__row .v .tag { display: inline-block; font-size: 8px; font-weight: 700; color: var(--ok); background: var(--okb); border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.fc-scan__save { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 18px rgba(32,174,227,.4); }
@media (prefers-reduced-motion: reduce) { .fc-scan__laser { animation: none; top: 150px; } }