/* ==========================================================================
   Sanad POS — public landing page
   Palette: primary #5C7358, darker #4A5D47, lighter #7A8F76
            tints #EEF2ED / #F7FAF6 / #F2F6F0, ink #23281F
   Headings: Plus Jakarta Sans. Body: Inter.
   ========================================================================== */

body { font-family: 'Inter', sans-serif; color: #23281F; }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; }

.section-tint { background: #F7FAF6; }

.section-eyebrow {
    text-align: center; font-weight: 700; text-transform: uppercase;
    color: #5C7358; letter-spacing: .08em; font-size: 13px; margin-bottom: 10px;
}
.section-heading {
    text-align: center; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0 0 14px;
}
.section-lead {
    text-align: center; color: #5B6357; max-width: 38rem; margin: 0 auto 48px; font-size: 15.5px;
}

/* ---- Hero ---- */
#hero { padding: 72px 0 64px; }
.hero-badge {
    display: inline-block; background: #EEF2ED; color: #4A5D47; font-size: 13px;
    font-weight: 600; padding: 7px 14px; border-radius: 999px; letter-spacing: .02em; margin-bottom: 22px;
}
.hero-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.01em; }
.hero-subtitle { font-size: 1.1rem; color: #5B6357; line-height: 1.6; max-width: 32rem; margin: 0 0 32px; }
.btn-primary-lg {
    background: #5C7358; color: #fff; font-weight: 600; font-size: 15.5px;
    padding: 14px 28px; border-radius: 12px; display: inline-block; transition: background .2s ease;
}
.btn-primary-lg:hover { background: #4A5D47; color: #fff; }
.btn-outline-lg {
    border: 1.5px solid #5C7358; color: #5C7358; font-weight: 600; font-size: 15.5px;
    padding: 14px 28px; border-radius: 12px; display: inline-block; transition: background .2s ease;
}
.btn-outline-lg:hover { background: #EEF2ED; color: #4A5D47; }
.hero-stats { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.hero-stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; color: #23281F; display: block; }
.hero-stat-label { font-size: 13px; color: #8A978A; }
.hero-placeholder {
    aspect-ratio: 4/3; border-radius: 20px; border: 1px solid #E3E8DF;
    background: repeating-linear-gradient(45deg, #F2F6F0, #F2F6F0 12px, #EAEFE7 12px, #EAEFE7 24px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 24px 60px rgba(74, 93, 71, .14);
}
.hero-placeholder-label {
    font-family: monospace; font-size: 12.5px; letter-spacing: .04em; color: #7A8F76;
    background: #fff; padding: 8px 14px; border-radius: 8px; border: 1px solid #E3E8DF;
}

/* ---- Feature cards (What we offer) ---- */
.feature-card { height: 100%; background: #fff; border: 1px solid #E3E8DF; border-radius: 14px; padding: 30px; }
.feature-icon {
    width: 42px; height: 42px; border-radius: 11px; background: #EEF2ED;
    display: flex; align-items: center; justify-content: center; color: #5C7358;
    font-weight: 700; font-size: 17px; margin-bottom: 16px;
}
.feature-title { font-weight: 700; font-size: 1.1rem; margin: 0 0 8px; }
.feature-desc { color: #5B6357; margin: 0; line-height: 1.55; font-size: 14.5px; }

/* ---- Products showcase ---- */
.product-card {
    height: 100%; background: #fff; border: 1px solid #E3E8DF; border-radius: 14px;
    padding: 32px 28px; display: flex; flex-direction: column; gap: 16px;
}
.product-icon { width: 52px; height: 52px; border-radius: 13px; object-fit: contain; border: 1px solid #ECEFE9; }
.product-wordmark { height: 22px; object-fit: contain; margin-bottom: 10px; display: block; }
.product-tag { display: inline-block; background: #F2F6F0; color: #4A5D47; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.product-desc { color: #5B6357; font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; }
.product-link { font-weight: 600; font-size: 14px; color: #5C7358; }
.product-link:hover { color: #4A5D47; }

/* ---- Downloads ---- */
.download-card {
    height: 100%; background: #fff; border: 1px solid #E3E8DF; border-radius: 14px; padding: 30px;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.download-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; border: 1px solid #ECEFE9; margin-bottom: 4px; }
.download-name { font-weight: 700; font-size: 1.05rem; margin: 0; }
.download-platform { font-size: 12px; font-weight: 600; color: #8A978A; text-transform: uppercase; letter-spacing: .04em; }
.download-desc { color: #5B6357; font-size: 13.5px; margin: 0 0 8px; line-height: 1.5; }
.download-btn { background: #5C7358; color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: 9px; display: inline-block; }
.download-btn:hover { background: #4A5D47; color: #fff; }
.download-btn-disabled { border: 1px solid #D7DED3; color: #8A978A; font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: 9px; background: none; }

/* ---- Who can use it (auto-scrolling marquee) ---- */
.who-heading { margin: 0 0 40px; padding: 0 24px; }
@keyframes whoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.who-fade { position: relative; overflow: hidden; }
.who-fade::before, .who-fade::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.who-fade::before { left: 0; background: linear-gradient(90deg, #FAFAF7, transparent); }
.who-fade::after { right: 0; background: linear-gradient(270deg, #FAFAF7, transparent); }
.who-track { display: flex; gap: 56px; width: max-content; animation: whoMarquee 28s linear infinite; }
.who-item { flex: 0 0 auto; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.who-icon-circle {
    width: 64px; height: 64px; border-radius: 999px; background: #F2F6F0;
    display: flex; align-items: center; justify-content: center; font-size: 26px; color: #5C7358;
}
.who-label { font-weight: 600; font-size: 13.5px; color: #5B6357; }

/* ---- Trusted-by / businesses we serve ---- */
.trust-logo-slot {
    aspect-ratio: 3/2; border: 1.5px dashed #D7DED3; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #B7C0B3; font-weight: 600; font-size: 12.5px; background: #fff; font-family: monospace;
}

/* ---- Packages / pricing (no prices — "contact for price") ---- */
.plan-card {
    position: relative; background: #fff; border: 1.5px solid #E3E8DF; border-radius: 16px;
    padding: 32px 28px; height: 100%; display: flex; flex-direction: column;
    box-shadow: 0 6px 20px rgba(92, 115, 88, .05); transition: transform .25s ease, box-shadow .25s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(92, 115, 88, .12); }
.plan-card-featured {
    border-color: #5C7358; background: linear-gradient(180deg, #fff 0%, #F2F6F0 100%);
    box-shadow: 0 18px 44px rgba(92, 115, 88, .16);
}
.plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: #5C7358; color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-weight: 800; font-size: 1.25rem; margin: 6px 0 4px; }
.plan-tagline { color: #8A8A8A; font-size: 13.5px; margin: 0 0 20px; min-height: 38px; }
.plan-price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.3rem; color: #5C7358; margin-bottom: 22px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: #4A4A4A; }
.plan-check { color: #5C7358; font-weight: 700; }
.plan-cta { margin-top: auto; text-align: center; padding: 12px 20px; border-radius: 9px; font-weight: 600; font-size: 14.5px; border: 1.5px solid #5C7358; display: block; }
.plan-cta-ghost { background: #fff; color: #5C7358; }
.plan-cta-ghost:hover { background: #EEF2ED; color: #4A5D47; }
.plan-cta-solid { background: #5C7358; color: #fff; }
.plan-cta-solid:hover { background: #4A5D47; color: #fff; }

/* ---- Contact ---- */
.contact-card { background: #4A5D47; border-radius: 24px; padding: 56px 48px; }
.contact-card-centered { text-align: center; max-width: 42rem; margin: 0 auto; }
.contact-heading { color: #fff; font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin: 0 0 12px; }
.contact-lead { color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; max-width: 30rem; }
.contact-card-centered .contact-lead { margin-inline: auto; }
.contact-cta {
    background: #fff; color: #4A5D47; font-weight: 700; font-size: 15px;
    padding: 13px 26px; border-radius: 11px; display: inline-block;
}
.contact-cta:hover { background: #F2F6F0; color: #4A5D47; }
.contact-info-box { background: rgba(255,255,255,.08); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.contact-info-label { display: block; color: rgba(255,255,255,.6); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.contact-info-value { display: block; color: #fff; font-weight: 600; font-size: 15px; }

/* ---- About page ---- */
.about-title { font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 16px; }
.about-lead { color: #5B6357; max-width: 40rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }
.about-placeholder {
    margin-top: 32px; aspect-ratio: 16/6; max-width: 56rem; margin-inline: auto;
    border: 2px dashed #CDD6CA; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    color: #8A978A; background: #F2F6F0; font-weight: 600;
}
.value-title { font-weight: 700; color: #5C7358; margin: 0 0 8px; font-size: 1.15rem; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .contact-card { padding: 40px 28px; }
}
@media (max-width: 767.98px) {
    #hero { padding: 48px 0 44px; text-align: center; }
    .hero-stats { justify-content: center; }
    .hero-subtitle { margin-inline: auto; }
}