/* Landing page styles */
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#0F1115;color:#F5F7FA;font-family:'Inter',sans-serif;overflow-x:hidden;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
#navbar{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);padding:12px 0;}
.navbar-container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
#brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
#brand-icon{width:36px;height:36px;border-radius:10px;background:#7CFF5B;color:#0F1115;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.85rem;}
#brand-logo,
#footer-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}
#brand-name{font-size:1.05rem;font-weight:800;letter-spacing:-0.04em;}
#navigation{display:flex;gap:28px;}
.nav-link{font-size:0.88rem;color:rgba(245,247,250,0.6);text-decoration:none;transition:color 0.2s;}
.nav-link:hover{color:#F5F7FA;}
#navbar-actions{display:flex;gap:12px;align-items:center;}
.btn-primary{background:linear-gradient(135deg,#7CFF5B,#4FACFE);color:#0F1115;padding:12px 22px;border-radius:14px;border:none;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit;font-size:0.9rem;}
.btn-secondary{border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.03);color:#F5F7FA;padding:12px 22px;border-radius:14px;text-decoration:none;display:inline-block;font-size:0.9rem;}
#hero-section{padding:100px 0 80px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
#hero-badge{display:inline-block;background:rgba(124,255,91,0.08);border:1px solid rgba(124,255,91,0.2);color:#7CFF5B;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;padding:6px 14px;border-radius:999px;margin-bottom:24px;}
#hero-title{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-0.05em;margin-bottom:20px;}
.gradient-text{background:linear-gradient(135deg,#7CFF5B,#4FACFE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#hero-description{font-size:1.05rem;color:rgba(245,247,250,0.6);line-height:1.8;margin-bottom:32px;}
#hero-actions{display:flex;gap:14px;margin-bottom:48px;}
#hero-stats{display:flex;gap:32px;}
.stat-value{font-size:1.6rem;font-weight:800;letter-spacing:-0.04em;}
.stat-label{font-size:0.8rem;color:rgba(245,247,250,0.5);margin-top:4px;}
#hero-dashboard-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:24px;}
.dashboard-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.dashboard-title{font-weight:700;font-size:0.9rem;}
.dashboard-status{font-size:0.72rem;color:#7CFF5B;background:rgba(124,255,91,0.1);padding:4px 10px;border-radius:999px;}
.dashboard-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.metric-card{background:rgba(255,255,255,0.04);border-radius:14px;padding:16px;}
.metric-label{font-size:0.72rem;color:rgba(245,247,250,0.5);margin-bottom:6px;}
.metric-value{font-size:1.4rem;font-weight:800;letter-spacing:-0.04em;}
.inventory-preview-list{display:flex;flex-direction:column;gap:8px;}
.inventory-preview-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(255,255,255,0.03);border-radius:10px;}
.inventory-name{font-size:0.85rem;}
.inventory-status{font-size:0.72rem;font-weight:700;padding:3px 8px;border-radius:999px;}
.inventory-status.available{background:rgba(124,255,91,0.1);color:#7CFF5B;}
.inventory-status.reserved{background:rgba(255,184,0,0.1);color:#FFB800;}
.inventory-status.active{background:rgba(79,172,254,0.1);color:#4FACFE;}
.section{padding:80px 0;}
.section-header{text-align:center;max-width:680px;margin:0 auto 60px;}
.section-badge{display:inline-block;color:#7CFF5B;text-transform:uppercase;letter-spacing:0.14em;font-size:0.78rem;font-weight:700;margin-bottom:16px;}
.section-title{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;letter-spacing:-0.05em;margin-bottom:16px;}
.section-description{color:rgba(245,247,250,0.55);line-height:1.85;font-size:1rem;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:28px;}
.feature-icon{font-size:1.8rem;margin-bottom:16px;color:#7CFF5B;}
.feature-title{font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.feature-description{font-size:0.88rem;color:rgba(245,247,250,0.55);line-height:1.75;}
.workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.workflow-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:18px;padding:24px;}
.workflow-number{font-size:0.7rem;font-weight:800;color:#7CFF5B;text-transform:uppercase;letter-spacing:0.12em;display:block;margin-bottom:14px;}
.workflow-title{font-size:0.95rem;font-weight:700;margin-bottom:8px;}
.workflow-description{font-size:0.82rem;color:rgba(245,247,250,0.55);line-height:1.7;}
#cta-section{padding:80px 0;}
#cta-card{background:rgba(124,255,91,0.04);border:1px solid rgba(124,255,91,0.15);border-radius:28px;padding:60px;text-align:center;}
#cta-title{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-0.05em;margin-bottom:20px;line-height:1.15;}
#cta-description{color:rgba(245,247,250,0.6);line-height:1.8;max-width:560px;margin:0 auto 36px;}
#cta-actions{display:flex;gap:14px;justify-content:center;}
#footer{border-top:1px solid rgba(255,255,255,0.06);padding:32px 0;}
.footer-container{display:flex;justify-content:space-between;align-items:center;}
#footer-brand{display:flex;align-items:center;gap:10px;font-weight:700;}
#footer-copy{font-size:0.82rem;color:rgba(245,247,250,0.4);}
@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;}#hero-dashboard-card{display:none;}.features-grid{grid-template-columns:1fr 1fr;}.workflow-grid{grid-template-columns:1fr 1fr;}}

/* ── STAT ITEMS (hero section) ──────────────────────────── */
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── RETAIL MEDIA SECTION ───────────────────────────────── */
.retail-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.retail-media-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.retail-media-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
}

.retail-media-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.retail-media-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #7CFF5B;
    margin-top: 6px;
    box-shadow: 0 0 10px rgba(124,255,91,0.4);
}

.retail-media-item-text strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.retail-media-item-text p {
    font-size: 0.88rem;
    color: rgba(245,247,250,0.55);
    line-height: 1.65;
}

.retail-media-visual {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.retail-media-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    transition: border-color 0.2s, transform 0.2s;
}

.retail-media-card:hover {
    border-color: rgba(124,255,91,0.2);
    transform: translateX(4px);
}

.retail-media-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(124,255,91,0.08);
    color: #7CFF5B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.retail-media-card-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(245,247,250,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.retail-media-card-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #F5F7FA;
}

/* ── FOOTER brand icon (small, no id conflict) ───────────── */
.brand-icon-sm {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #7CFF5B;
    color: #0F1115;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
}

/* ── RESPONSIVE retail-media ─────────────────────────────── */
@media(max-width:1024px) {
    .retail-media-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media(max-width:640px){.features-grid,.workflow-grid{grid-template-columns:1fr;}#navigation{display:none;}}