/* UGI Resto — product visuals (light SaaS compositions) */

/* Atmosphere */
.hero-atmos,
.has-atmos { position: relative; }
.hero-atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
}
.blob-a { width: 280px; height: 280px; background: #BFDBFE; top: -60px; right: 12%; }
.blob-b { width: 220px; height: 220px; background: #99F6E4; bottom: 8%; left: -40px; }
.blob-c { width: 180px; height: 180px; background: #FED7AA; top: 40%; left: 35%; opacity: .35; }

.has-atmos::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
}
.has-atmos > .container { position: relative; z-index: 1; }

.section-head.compact { margin-bottom: 1.75rem; }

/* Hero stage composition */
.hero { isolation: isolate; }
.hero .site-container { position: relative; z-index: 1; }

.hero-visual {
    width: 100%;
    min-height: clamp(360px, 52vw, 520px);
}

.hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 13;
    min-height: 420px;
    max-height: 580px;
}

.hero-stage-glow {
    position: absolute;
    inset: 10% 6% 8% 10%;
    background:
        radial-gradient(circle at 70% 30%, rgba(37, 99, 235, 0.18), transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(20, 184, 166, 0.16), transparent 40%);
    border-radius: 32px;
    filter: blur(10px);
}

.hero-stage-grid {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .45;
    mask-image: linear-gradient(180deg, #000 35%, transparent);
}

.hero-main-panel {
    position: absolute;
    inset: 8% 6% 14% 14%;
    z-index: 2;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 28px 56px rgba(37, 99, 235, 0.14);
    background: #fff;
    border: 1px solid var(--border);
    padding: .75rem;
}

.hero-main-panel .dash-mock { gap: .55rem; }
.hero-main-panel .kpi-card,
.hero-main-panel .dash-card { padding: .7rem .8rem; }
.hero-main-panel .chart-bars { height: 78px; }
.hero-main-panel .dash-kds { display: none; } /* floating KDS replaces */

.float-card {
    position: absolute;
    z-index: 4;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.12));
    animation: float-y 5.5s ease-in-out infinite;
}
.float-phone {
    top: -2%;
    left: -8%;
    width: min(168px, 32%);
    z-index: 5;
    animation-delay: 0s;
}
.float-kds { top: 2%; right: -4%; width: min(168px, 30%); animation-delay: .6s; }
.float-floor { bottom: 0; left: 4%; width: min(148px, 28%); animation-delay: 1.1s; }
.float-stock { bottom: 2%; right: -2%; width: min(190px, 34%); animation-delay: 1.6s; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.device-phone {
    background: #0F172A;
    border-radius: 26px;
    padding: 7px;
    border: 2px solid #334155;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.device-notch {
    width: 38%;
    height: 7px;
    margin: 2px auto 5px;
    background: #020617;
    border-radius: 999px;
}

/* —— Premium QR menu phone screen —— */
.qr-phone .phone-screen.qr-menu {
    background: #fff;
    border-radius: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    height: auto;
    max-height: none;
}

.qm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .45rem .5rem .35rem;
}
.qm-brand {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.qm-logo {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(145deg, #2563EB, #14B8A6);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 800;
    flex-shrink: 0;
}
.qm-brand strong {
    display: block;
    font-size: .62rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qm-brand small {
    display: block;
    font-size: .48rem;
    font-weight: 700;
    color: #64748B;
    letter-spacing: .02em;
}
.qm-table {
    flex-shrink: 0;
    font-size: .52rem;
    font-weight: 800;
    color: #2563EB;
    background: #DBEAFE;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    padding: .18rem .4rem;
}

.qm-cover {
    position: relative;
    margin: 0 .45rem;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #E2E8F0;
}
.qm-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qm-cover-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .45rem .5rem .4rem;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.72));
    color: #fff;
}
.qm-cover-caption em {
    display: block;
    font-style: normal;
    font-size: .48rem;
    font-weight: 700;
    opacity: .9;
}
.qm-cover-caption span {
    font-size: .68rem;
    font-weight: 800;
}

.qm-cats {
    display: flex;
    gap: .25rem;
    padding: .4rem .45rem .25rem;
    overflow: hidden;
}
.qm-cats span {
    flex: 0 0 auto;
    font-size: .48rem;
    font-weight: 700;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: .18rem .4rem;
    white-space: nowrap;
}
.qm-cats .on {
    color: #fff;
    background: #2563EB;
    border-color: #2563EB;
}

.qm-list {
    display: grid;
    gap: .35rem;
    padding: .15rem .45rem .5rem;
}
.qm-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: .4rem;
    align-items: center;
    padding: .3rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}
.qm-item img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    background: #F1F5F9;
}
.qm-meta { min-width: 0; }
.qm-meta strong {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}
.qm-meta p {
    margin: .08rem 0 .12rem;
    font-size: .48rem;
    font-weight: 600;
    color: #64748B;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
}
.qm-row b {
    font-size: .58rem;
    font-weight: 800;
    color: #1E293B;
}
.qm-add {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #F97316;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.35);
}

.qm-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-top: auto;
    padding: .45rem .5rem .5rem;
    background: #0F172A;
    border-top: 1px solid #1E293B;
}
.qm-cart strong {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    color: #fff;
}
.qm-cart small {
    display: block;
    font-size: .45rem;
    font-weight: 600;
    color: #94A3B8;
}
.qm-cart-btn {
    flex-shrink: 0;
    font-size: .52rem;
    font-weight: 800;
    color: #fff;
    background: #F97316;
    border-radius: 999px;
    padding: .32rem .55rem;
}

/* Keep room for larger phone — don't fully cover dashboard */
.hero-main-panel {
    inset: 8% 6% 14% 16%;
}

.mini-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.mini-panel header {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .55rem;
    font-size: .68rem;
    font-weight: 800;
    color: var(--heading);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.mini-panel header i { color: var(--blue); }
.mini-kds { padding: .45rem; display: grid; gap: .35rem; }
.mini-ticket {
    border-radius: 10px;
    padding: .4rem .45rem;
    font-size: .65rem;
}
.mini-ticket strong { display: block; color: var(--heading); }
.mini-ticket span { color: #9A3412; font-weight: 600; }
.mini-ticket.warn { background: #FFF7ED; border: 1px solid #FED7AA; }
.mini-ticket.ok { background: #F0FDFA; border: 1px solid #99F6E4; }
.mini-ticket.ok span { color: #0F766E; }

.mini-floor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
    padding: .45rem;
}
.mini-floor span {
    aspect-ratio: 1;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 800;
    border: 1px solid var(--border);
    background: #F1F5F9;
}
.mini-floor .open { background: #CCFBF1; color: #0F766E; }
.mini-floor .busy { background: var(--blue-soft); color: var(--blue); }
.mini-floor .reserve { background: #FEF3C7; color: #B45309; }

.stock-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid #FDBA74;
    border-radius: 14px;
    padding: .65rem .75rem;
    box-shadow: var(--shadow);
}
.stock-alert i { color: var(--orange); font-size: 1.1rem; }
.stock-alert strong { display: block; font-size: .78rem; color: var(--heading); }
.stock-alert span { font-size: .7rem; color: var(--text); font-weight: 600; }

@media (max-width: 991.98px) {
    .hero-stage {
        aspect-ratio: 4 / 5;
        max-height: none;
        min-height: 460px;
    }
    .hero-main-panel { inset: 12% 6% 20% 8%; }
    .float-phone { width: min(150px, 38%); left: -2%; top: 0; }
    .float-kds { width: 132px; right: 0; }
    .float-floor { width: 118px; }
    .float-stock { width: 148px; }
}

@media (max-width: 575.98px) {
    .hero-stage { min-height: 440px; }
    .float-card { animation: none; }
    .float-phone { width: min(148px, 42%); left: 0; transform: none; }
    .float-kds { transform: scale(.92); transform-origin: top right; }
    .hero-main-panel .dash-kpis { grid-template-columns: repeat(3, 1fr); }
    .hero-main-panel .kpi-card strong { font-size: .95rem; }
    .hero-main-panel .kpi-hint { display: none; }
    /* On very small screens show fewer menu rows to avoid clutter */
    .qm-item:nth-child(n+3) { display: none; }
}

/* Module previews */
.module-card {
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.mod-preview {
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.1), transparent 40%),
        linear-gradient(160deg, #F8FAFC, #EFF6FF);
    border-bottom: 1px solid var(--border);
    padding: .75rem;
    display: grid;
    place-items: center;
}
.module-card .module-icon,
.module-card h3,
.module-card p,
.module-card .mod-link {
    margin-left: 1.35rem;
    margin-right: 1.35rem;
}
.module-card .module-icon { margin-top: 1.1rem; }
.module-card h3 { margin-top: .7rem; }
.module-card p { margin-top: .35rem; }
.module-card .mod-link { margin-top: .55rem; margin-bottom: 1.25rem; }

.mpv-phone {
    width: 72%;
    max-width: 160px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .45rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: .25rem;
}
.mpv-bar { font-size: .65rem; font-weight: 800; color: var(--blue); }
.mpv-row {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .3rem;
    border-radius: 6px;
    background: var(--bg);
}
.mpv-row.hi { background: var(--blue-soft); }
.mpv-cta, .mpv-cta.orange {
    text-align: center;
    font-size: .65rem;
    font-weight: 800;
    color: #fff;
    background: var(--orange);
    border-radius: 999px;
    padding: .3rem;
}

.mpv-list, .mpv-table, .mpv-pos, .mpv-report {
    width: 92%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .55rem;
    box-shadow: var(--shadow);
}
.mpv-line, .mpv-table > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
}
.mpv-line:last-child, .mpv-table > div:last-child { border-bottom: 0; }
.mpv-line em, .mpv-table em {
    font-style: normal;
    font-size: .62rem;
    font-weight: 800;
    padding: .12rem .4rem;
    border-radius: 999px;
}
.t-orange { background: var(--orange-soft); color: var(--orange-hover); }
.t-teal { background: var(--teal-soft); color: #0F766E; }
.t-blue { background: var(--blue-soft); color: var(--blue); }
.mpv-table .crit { color: #C2410C; }

.mpv-kds {
    width: 92%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}
.mpv-ticket {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    padding: .45rem;
    font-size: .68rem;
    font-weight: 800;
    color: var(--heading);
}
.mpv-ticket small { display: block; color: #9A3412; font-weight: 600; margin-top: .15rem; }
.mpv-ticket.ready { background: #F0FDFA; border-color: #99F6E4; }
.mpv-ticket.ready small { color: #0F766E; }

.mpv-floor {
    width: 88%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}
.mpv-floor i {
    font-style: normal;
    aspect-ratio: 1;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 800;
    border: 1px solid var(--border);
    background: #F1F5F9;
}
.mpv-floor .open { background: #CCFBF1; color: #0F766E; }
.mpv-floor .busy { background: var(--blue-soft); color: var(--blue); }
.mpv-floor .reserve { background: #FEF3C7; color: #B45309; }

.mpv-sum { font-size: .75rem; color: var(--text); margin-bottom: .4rem; }
.mpv-sum strong { display: block; font-size: 1.15rem; color: var(--heading); }
.mpv-pay { display: flex; gap: .3rem; margin-bottom: .45rem; }
.mpv-pay span {
    flex: 1;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    padding: .3rem;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
}
.mpv-pay .on { background: var(--blue-soft); border-color: #BFDBFE; color: var(--blue); }

.mpv-crm {
    width: 90%;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .65rem;
    box-shadow: var(--shadow);
}
.mpv-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--blue), var(--teal));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 800;
}
.mpv-crm strong { display: block; font-size: .78rem; color: var(--heading); }
.mpv-crm span { font-size: .65rem; color: var(--text); font-weight: 600; }
.mpv-crm > em {
    margin-left: auto;
    font-style: normal;
    font-size: .72rem;
    font-weight: 800;
    color: var(--teal);
    background: var(--teal-soft);
    padding: .2rem .45rem;
    border-radius: 999px;
}

.mpv-bars {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    height: 54px;
    margin-bottom: .4rem;
}
.mpv-bars i {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(180deg, var(--blue), #93C5FD);
}
.mpv-kpis {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 800;
    color: var(--heading);
}

/* Visual flow stepper */
.flow-visual {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .flow-visual { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .flow-visual { grid-template-columns: repeat(6, 1fr); gap: .5rem; }
}

.flow-node {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem .85rem 1.15rem;
    text-align: center;
    box-shadow: var(--shadow);
    height: 100%;
}
.flow-connector {
    display: none;
}
@media (min-width: 1200px) {
    .flow-connector {
        display: block;
        position: absolute;
        left: -14%;
        top: 48px;
        width: 28%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--blue), transparent);
    }
    .flow-connector::after {
        content: "";
        position: absolute;
        right: 0;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--teal);
    }
}

.flow-device {
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: .55rem;
}
.fd-phone {
    width: 40px;
    height: 64px;
    background: #1E293B;
    border-radius: 8px;
    padding: 4px;
}
.fd-phone .fd-screen {
    height: 100%;
    background: #fff;
    border-radius: 5px;
    display: grid;
    place-content: center;
    gap: 2px;
    font-size: .55rem;
    font-weight: 800;
    color: var(--blue);
}
.fd-phone .fd-screen i {
    width: 18px;
    height: 18px;
    margin: 2px auto 0;
    border: 2px solid var(--blue);
    border-radius: 4px;
}
.fd-tablet {
    width: 72px;
    height: 50px;
    background: #334155;
    border-radius: 8px;
    padding: 5px;
}
.fd-tablet .fd-screen {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    display: grid;
    place-content: center;
    font-size: .6rem;
    font-weight: 700;
    color: var(--heading);
}
.fd-kds {
    width: 70px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    padding: .45rem;
    text-align: left;
}
.fd-kds strong { display: block; font-size: .72rem; color: var(--heading); }
.fd-kds em { font-style: normal; font-size: .62rem; color: #9A3412; font-weight: 700; }
.fd-notify {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--teal-soft);
    border: 1px solid #99F6E4;
    display: grid;
    place-content: center;
    gap: .15rem;
    color: #0F766E;
    font-size: .7rem;
    font-weight: 800;
}
.fd-notify i { font-size: 1.1rem; color: var(--orange); }
.fd-pos {
    width: 72px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .45rem;
}
.fd-pos small { font-size: .6rem; color: var(--text); }
.fd-pos b { display: block; font-size: .95rem; color: var(--heading); }
.fd-report {
    width: 72px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .4rem;
    display: grid;
    align-items: end;
}
.fd-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.fd-bars i {
    flex: 1;
    background: linear-gradient(180deg, var(--blue), #93C5FD);
    border-radius: 2px;
}
.fd-bars i:nth-child(1) { height: 45%; }
.fd-bars i:nth-child(2) { height: 75%; }
.fd-bars i:nth-child(3) { height: 55%; }

.flow-node .flow-num {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: .25rem;
}
.flow-node h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 .25rem;
}
.flow-node p { font-size: .82rem; color: var(--text); margin: 0; }

/* Product showcases */
.product-media { min-width: 0; width: 100%; }
.showcase {
    width: 100%;
    min-height: 280px;
}

.showcase-orders {
    display: grid;
    gap: .85rem;
    grid-template-columns: 1.15fr .85fr;
    align-items: stretch;
}
@media (max-width: 575.98px) {
    .showcase-orders { grid-template-columns: 1fr; }
}

.show-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-width: 0;
}
.show-chrome {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .85rem;
    background: linear-gradient(180deg, #F8FAFC, #EFF6FF);
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 700;
    color: var(--heading);
}
.show-chrome .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CBD5E1;
}
.show-chrome .dot:nth-child(1) { background: #FCA5A5; }
.show-chrome .dot:nth-child(2) { background: #FCD34D; }
.show-chrome .dot:nth-child(3) { background: #86EFAC; }
.show-body { padding: .9rem; }

.show-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .75rem;
}
.show-order-head small { display: block; font-size: .72rem; color: #64748B; font-weight: 600; }
.show-order-head strong { font-size: .95rem; color: var(--heading); }
.show-line {
    display: flex;
    justify-content: space-between;
    padding: .55rem .65rem;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    margin-bottom: .4rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-strong);
}
.show-foot {
    display: flex;
    justify-content: space-between;
    margin: .75rem 0;
    font-weight: 700;
    color: var(--heading);
}
.show-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    padding: .65rem;
    pointer-events: none;
}

.show-stack { display: grid; gap: .55rem; align-content: start; }
.kds-card {
    border-radius: 14px;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
}
.kds-card header {
    font-size: .68rem;
    font-weight: 800;
    color: #64748B;
    margin-bottom: .25rem;
}
.kds-card strong { display: block; font-size: .9rem; color: var(--heading); }
.kds-card p { margin: .2rem 0 .45rem; font-size: .78rem; color: var(--text); }
.kds-card footer {
    font-size: .72rem;
    font-weight: 800;
}
.kds-card.status-cook { border-color: #FED7AA; background: #FFF7ED; }
.kds-card.status-cook footer { color: var(--orange-hover); }
.kds-card.status-ready { border-color: #99F6E4; background: #F0FDFA; }
.kds-card.status-ready footer { color: #0F766E; }
.kds-card.status-queue { background: #F8FAFC; }
.kds-card.status-queue footer { color: var(--blue); }

/* Floor showcase */
.showcase-floor {
    display: grid;
    grid-template-columns: 1.4fr .75fr;
    gap: .85rem;
    align-items: stretch;
}
@media (max-width: 767.98px) {
    .showcase-floor { grid-template-columns: 1fr; }
}
.floor-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin-bottom: .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text);
}
.floor-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: .3rem;
}
.lg-open { background: #5EEAD4; }
.lg-busy { background: #60A5FA; }
.lg-reserve { background: #FBBF24; }
.lg-bill { background: #FB923C; }

.floor-map {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.ft {
    aspect-ratio: 1.1;
    border-radius: 14px;
    border: 1px solid var(--border);
    display: grid;
    place-content: center;
    text-align: center;
    background: #F1F5F9;
}
.ft b { font-size: 1rem; color: var(--heading); }
.ft small { font-size: .65rem; font-weight: 700; color: var(--text); }
.ft.open { background: #CCFBF1; border-color: #99F6E4; }
.ft.busy { background: var(--blue-soft); border-color: #BFDBFE; }
.ft.reserve { background: #FEF3C7; border-color: #FDE68A; }
.ft.bill { background: #FFEDD5; border-color: #FED7AA; }
.ft.round { border-radius: 50%; }

.table-detail {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.1rem;
    box-shadow: var(--shadow-lg);
}
.table-detail small { font-size: .72rem; font-weight: 700; color: #64748B; }
.table-detail h4 { margin: .2rem 0 1rem; font-size: 1.35rem; color: var(--heading); }
.table-detail ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.table-detail li {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text);
}
.table-detail .c-busy { color: var(--blue); }
.td-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.td-actions span {
    text-align: center;
    font-size: .8rem;
    font-weight: 800;
    padding: .55rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-strong);
}
.td-actions .primary { background: var(--orange); border-color: var(--orange); color: #fff; }

/* Stock showcase */
.showcase-stock { display: grid; gap: .75rem; }
.stock-alerts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}
@media (max-width: 480px) { .stock-alerts { grid-template-columns: 1fr; } }
.sa-card {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .7rem .8rem;
    box-shadow: var(--shadow);
}
.sa-card.crit { border-color: #FDBA74; background: #FFF7ED; }
.sa-card.warn { border-color: #FDE68A; background: #FFFBEB; }
.sa-card i { color: var(--orange); }
.sa-card strong { display: block; font-size: .8rem; color: var(--heading); }
.sa-card span { font-size: .72rem; color: var(--text); font-weight: 600; }

.stock-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin-bottom: .75rem;
}
.stock-table th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
    padding: .4rem .35rem;
    border-bottom: 1px solid var(--border);
}
.stock-table td {
    padding: .55rem .35rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-strong);
}
.stock-table .row-crit { background: #FFF7ED; }
.stock-table em {
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    padding: .15rem .4rem;
    border-radius: 999px;
}
.stock-table .ok { background: var(--teal-soft); color: #0F766E; }
.stock-table .bad { background: var(--orange-soft); color: var(--orange-hover); }
.stock-table .mid { background: #FEF3C7; color: #B45309; }

.profit-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}
.profit-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .65rem;
}
.profit-card small { display: block; font-size: .68rem; font-weight: 700; color: #64748B; }
.profit-card strong { font-size: 1.05rem; color: var(--heading); }
.profit-card.teal { background: var(--teal-soft); border-color: #99F6E4; }
.profit-card.blue { background: var(--blue-soft); border-color: #BFDBFE; }

/* Reports showcase */
.showcase-reports { display: grid; gap: .75rem; }
.rep-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
@media (max-width: 575.98px) { .rep-kpis { grid-template-columns: repeat(2, 1fr); } }
.rep-kpi {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .7rem .75rem;
    box-shadow: var(--shadow);
}
.rep-kpi small { display: block; font-size: .68rem; font-weight: 700; color: #64748B; }
.rep-kpi strong { display: block; font-size: 1.1rem; color: var(--heading); margin: .15rem 0; }
.rep-kpi em { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--teal); }

.rep-chart {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    height: 120px;
    margin-bottom: .85rem;
    padding: .25rem .1rem;
}
.rep-chart span {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--blue), #93C5FD);
}

.rep-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 480px) { .rep-split { grid-template-columns: 1fr; } }
.rep-top h5, .rep-branch h5 {
    margin: 0 0 .55rem;
    font-size: .78rem;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rep-top ol { margin: 0; padding: 0; list-style: none; }
.rep-top li {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-strong);
}
.branch-bar {
    display: grid;
    grid-template-columns: 56px 1fr 48px;
    gap: .4rem;
    align-items: center;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-strong);
}
.branch-bar div {
    height: 8px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}
.branch-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    border-radius: 999px;
}

/* Audience cards */
.audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
}
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }

.audience-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.audience-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: #BFDBFE;
}
.audience-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.audience-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.45), transparent 40%),
        linear-gradient(135deg, #DBEAFE, #CCFBF1);
}
.theme-resto .audience-pattern { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 45%, #A5F3FC 100%); }
.theme-cafe .audience-pattern { background: linear-gradient(135deg, #FDE68A 0%, #FED7AA 40%, #FECACA 100%); }
.theme-fast .audience-pattern { background: linear-gradient(135deg, #FDBA74 0%, #FDE68A 50%, #BFDBFE 100%); }
.theme-hotel .audience-pattern { background: linear-gradient(135deg, #C7D2FE 0%, #DDD6FE 50%, #E0E7FF 100%); }
.theme-chain .audience-pattern { background: linear-gradient(135deg, #A5B4FC 0%, #99F6E4 55%, #BFDBFE 100%); }
.theme-delivery .audience-pattern { background: linear-gradient(135deg, #99F6E4 0%, #A5F3FC 45%, #BAE6FD 100%); }

.audience-ui {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(86%, 260px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    padding: .7rem .85rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    font-size: .82rem;
    font-weight: 700;
    color: var(--heading);
}
.audience-ui i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--blue);
    flex-shrink: 0;
}
.audience-body { padding: 1.15rem 1.25rem 1.35rem; }
.audience-body h3 {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
}
.audience-body p { margin: 0; color: var(--text); font-size: .95rem; }

/* Benefits visual */
.benefit-visual {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--teal-soft);
    display: grid;
    place-items: center;
    margin-bottom: .85rem;
}
.benefit-visual i {
    margin: 0;
    font-size: 1.35rem;
    color: var(--teal);
}
.benefit-spark {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 1px dashed rgba(20, 184, 166, 0.35);
    pointer-events: none;
}

.trust-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto .55rem;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}
.trust-item i { margin: 0; font-size: inherit; color: inherit; display: inline; }

/* Demo CTA devices */
.cta-band-visual { text-align: left; overflow: hidden; }
.cta-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 992px) {
    .cta-grid { grid-template-columns: 1fr 1.05fr; }
}
.cta-copy h2 { margin: 0 0 1rem; }
.cta-copy p { margin: 0 0 1.5rem; max-width: 34rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.demo-devices {
    position: relative;
    aspect-ratio: 16 / 11;
    min-height: 260px;
    max-width: 560px;
    margin-inline: auto;
}
.device-tablet {
    position: absolute;
    inset: 8% 18% 12% 4%;
    background: #334155;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15);
}
.tablet-bezel { height: 100%; background: #1E293B; border-radius: 12px; padding: 6px; }
.tablet-screen {
    height: 100%;
    background: #fff;
    border-radius: 8px;
    padding: .65rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.ts-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--heading);
}
.ts-top span {
    background: var(--teal-soft);
    color: #0F766E;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .62rem;
}
.ts-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}
.ts-kpis div {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .35rem;
}
.ts-kpis small { display: block; font-size: .58rem; color: #64748B; font-weight: 700; }
.ts-kpis b { font-size: .8rem; color: var(--heading); }
.ts-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    min-height: 48px;
}
.ts-chart i {
    flex: 1;
    height: var(--h);
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--blue), #93C5FD);
}
.ts-orders { display: grid; gap: .25rem; }
.ts-orders div {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-strong);
    background: var(--bg);
    border-radius: 6px;
    padding: .3rem .4rem;
    display: flex;
    justify-content: space-between;
}
.ts-orders em { font-style: normal; color: var(--orange-hover); }
.ts-orders .ok { color: #0F766E; }

.demo-phone {
    position: absolute;
    right: 2%;
    bottom: 0;
    width: min(38%, 140px);
    z-index: 2;
    animation: float-y 5s ease-in-out infinite;
}

@media (max-width: 575.98px) {
    .demo-devices { aspect-ratio: 5 / 4; }
    .device-tablet { inset: 4% 22% 20% 2%; }
    .demo-phone { width: 34%; }
}

/* Prevent horizontal overflow from floats */
.hero, .section, .cta-band, .trust-strip {
    overflow-x: clip;
}
.hero-stage, .showcase, .demo-devices, .module-grid, .audience-grid {
    max-width: 100%;
}

/* Product media sizing: ~half viewport content on desktop */
@media (min-width: 992px) {
    .product-block .product-media { min-height: 360px; }
    .product-frame { display: none; } /* legacy unused */
}