.inventory-page {
  background: #12253a;
  color: #e2e8f0;
  font-family: "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* HERO */
.inv-hero {
  position: relative;     /* ADD THIS */
  padding: 60px 20px;
  text-align: center;
}

.inv-back-btn {
  position: absolute;
  top: 20px;
  right: 20px;        /* CHANGED */
  left: auto;         /* ADD THIS */
  background: rgba(80, 99, 250, 0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}


.inv-back-btn:hover {
  background: #fff;
  color: #000000;
}

.inv-hero-inner { max-width: 1100px; margin: 0 auto; }
.inv-hero h1 { font-size: 42px; color: #38bdf8; margin: 0 0 10px; }
.inv-hero p { color: #94a3b8; margin-bottom: 28px; font-size: 16px; }

.sales-hero-preview {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.sales-hero-placeholder {
  width: min(1100px, 100%);
  background: #1e293b;
  border-radius: 20px;
  border: 2px dashed #334155;
  overflow: hidden;
  position: relative;
  padding: 0;
}
/* Fit image inside hero box */
.dashboard-image {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Keeps the image fully visible */
  border-radius: 20px;
  display: block;
}

.slideshow-container {
  position: relative;
  width: min(1000px, 100%);
  height: auto;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
}

.fade {
  animation: fadeEffect 1s ease-in-out;
}

@keyframes fadeEffect {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
/* DASHBOARD BOX */
.inv-dashboard-section { padding: 50px 20px; text-align:center; }
.inv-dashboard-section h2 { color: #38bdf8; font-size: 30px; margin-bottom: 18px; }

.inv-dashboard-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 16px;
  background: #1e293b;
  border: 2px solid #334155;
  box-shadow: 0 12px 40px rgba(56,189,248,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
  display:flex; align-items:center; justify-content:center;
  min-height: 420px;
}
.inv-dashboard-placeholder {
  color:#94a3b8;
  font-size:18px;
}

/* METRICS */
.inv-metrics { padding: 80px 20px 0; text-align:center; }
.inv-metrics h2 { color:#38bdf8; margin-bottom:35px; font-size:28px; }
.inv-metrics-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  max-width:1200px;
  margin: 18px auto 0;
}
.inv-metric-card {
  background:#1b2633;
  border-radius:12px;
  padding:20px;
  border:1px solid rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s ease;
  color:#cbd5e1;
}
.inv-metric-card h3 { color:#38bdf8; margin:0 0 8px; }
.inv-metric-card p { margin:0; color:#9fb4d6; font-size:14px; }
.inv-metric-card:hover { transform:translateY(-8px); box-shadow:0 16px 40px rgba(56,189,248,0.12); }

/* IMPORTANCE (text left, video right) */
.inv-importance { padding: 120px 20px; }
.inv-importance-container {
  display:flex;
  gap: 32px;
  max-width:1200px;
  margin: 0 auto;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.inv-importance-text { flex:1 1 480px; min-width:320px; }
.inv-importance-text h2 { color:#38bdf8; font-size:28px; margin-bottom:12px; }
.inv-importance-text ul { color:#cbd5e1; line-height:1.9; padding-left:22px; }
.inv-importance-video { flex:0 1 520px; max-width:520px; min-width:300px; }
.inv-importance-video iframe {
  width:100%; height:315px; border-radius:12px; border:2px solid #334155;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}

/* FAQ */
.inv-faq { padding: 50px 20px 80px; text-align:left; max-width:900px; margin:0 auto; }
.inv-faq h2 { text-align:center; color:#38bdf8; margin-bottom:22px; font-size:28px; }
.inv-faq-list { display:block; }
.inv-faq-item { background:#1e293b; border:1px solid #334155; border-radius:10px; overflow:hidden; margin-bottom:14px; }
.inv-faq-question {
  width:100%; text-align:left; padding:16px 18px; background:none; border:none;
  color:#cbd5e1; font-size:16px; cursor:pointer;
}
.inv-faq-answer { max-height:0; overflow:hidden; padding:0 18px; color:#94a3b8; transition: max-height .35s ease, padding .35s ease; }
.inv-faq-answer.open { padding:14px 18px; }

/* Fade animation helper */
.fade-item { opacity:0; transform:translateY(24px); transition: all .7s ease-out; }
.fade-show { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .inv-metrics-grid { grid-template-columns: repeat(2,1fr); }
  .inv-importance-container { flex-direction:column-reverse; align-items:center; }
  .inv-importance-video { width:100%; max-width:720px; }
}
@media (max-width: 640px) {
  .inv-hero h1 { font-size:28px; }
  .inv-metrics-grid { grid-template-columns: 1fr; }
}