/* Prepverse Corporate - updated UI/UX
   External CSS for platform features, clients, pricing, use cases, enquiry modal tweaks.
*/

/* HERO */
.pp-hero {
  background-image:
    linear-gradient(120deg, rgba(10,25,60,0.72), rgba(3,56,129,0.48)),
    url("https://images.unsplash.com/photo-1529059997563-6e9f4a0d8c3b?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  padding: 64px 0;
  color: #fff;
}
.pp-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
}
.hero-fallback { display:none; }

/* section basics */
.pp-section { padding: 48px 0; }
.section-header h2 { font-size: 1.8rem; margin-bottom: 8px; }
.muted { color: #6b7280; }

/* Platform grid (3 per row desktop) */
.platform-grid.three-per-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 18px;
}
.platform-card {
  background: linear-gradient(180deg,#fff,#fbfdff);
  border-radius: 12px;
  padding: 22px;
  border: 1px solid rgba(11,37,70,0.06);
  box-shadow: 0 12px 28px rgba(11,37,70,0.04);
  transition: transform .22s ease, box-shadow .22s ease;
  text-align: left;
}
.platform-card:focus, .platform-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(11,37,70,0.08); outline:none; }
.platform-card .pc-ico { font-size: 34px; margin-bottom: 10px; display:block; }
.platform-card h4 { margin-bottom: 8px; color: #0b2546; }
.platform-card .pc-desc { color: #4b5563; line-height:1.4; }

/* Clients */
.clients-section { padding: 48px 0; }
.clients-header { text-align:center; margin-bottom:18px; }
.clients-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:18px;
  align-items:center;
  justify-items:center;
  max-width:1100px;
  margin: 0 auto;
}
.client-card {
  width:100%;
  max-width:240px;
  background:#fff;
  border-radius:10px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .22s ease, box-shadow .22s ease;
  border: 1px solid rgba(11,37,70,0.04);
}
.client-card img { max-width:180px; height:80px; object-fit:contain; display:block; }
.client-caption { text-align:center; font-size:0.9rem; color:#374151; }
.client-caption span { display:block; font-size:0.85rem; color:#6b7280; }

/* Carousel styles for Trusted-by section: horizontal auto-scrolling */
.clients-carousel {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border-radius: 10px;
}

/* Track: long horizontal flex container */
.clients-track {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 12px 24px;
  overflow-x: auto;
  scroll-behavior: auto; /* we control via JS */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Hide native scroll bar while keeping functionality */
.clients-track::-webkit-scrollbar { height: 6px; }
.clients-track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
.clients-track { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.12) transparent; }

/* Each client card */
.client-card {
  flex: 0 0 auto;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(11,37,70,0.04);
  box-shadow: 0 8px 20px rgba(11,37,70,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  scroll-snap-align: center;
}
.client-card img {
  width: 160px;
  height: 80px;
  object-fit: contain;
  display: block;
}
.client-card .client-caption { text-align: center; color: #374151; font-size: 0.92rem; }
.client-card:hover, .client-card:focus { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(11,37,70,0.08); outline: none; }

/* Controls */
.carousel-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.carousel-controls .btn {
  min-width: 72px;
}

/* When paused, show a subtle overlay indicator */
.clients-carousel.is-paused::after {
  content: "Paused";
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(11,37,70,0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 8;
  opacity: 0.95;
}

/* Pricing */
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.switch { position:relative; display:inline-block; width:54px; height:28px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#e2e8f0; transition:.4s; border-radius:28px; }
.slider:before { position:absolute; content:""; height:20px; width:20px; left:4px; bottom:4px; background:white; transition:.4s; border-radius:50%; box-shadow:0 2px 6px rgba(11,37,70,0.08); }
.switch input:checked + .slider { background:#1f6feb; }
.switch input:checked + .slider:before { transform: translateX(26px); }

.pricing-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top: 18px;
  align-items:stretch;
}
.plan-card {
  background:#fff;
  border-radius:12px;
  padding:22px;
  border:1px solid rgba(11,37,70,0.04);
  box-shadow:0 12px 30px rgba(11,37,70,0.04);
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
.plan-card .plan-badge {
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:#1f6feb;
  color:#fff;
  padding:6px 18px;
  border-radius:6px;
  font-size:0.85rem;
}
.plan-card.featured { border: 2px solid #1f6feb; transform: scale(1.03); }
.plan-head h4 { margin:0; font-size:1.2rem; }
.plan-price { font-size:2rem; font-weight:700; color:#0b2546; display:flex; align-items:baseline; gap:8px; }
.plan-price .period { font-size:0.95rem; color:#6b7280; }
.plan-features { list-style:none; padding-left:0; margin:0; color:#374151; }
.plan-features li { padding:6px 0; border-bottom:1px dashed rgba(11,37,70,0.03); }

/* CTA button in plan */
.plan-cta { margin-top:auto; }
.try-btn { width:100%; padding:12px 16px; border-radius:28px; }
.try-btn.primary { background:#1f6feb; color:#fff; border:none; }

/* Use cases */
.usecases-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top: 18px;
}
.usecase {
  background:#fff;
  border-radius:12px;
  padding:20px;
  text-align:center;
  border:1px solid rgba(11,37,70,0.04);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.usecase:hover { transform: translateY(-12px) scale(1.02); box-shadow:0 34px 60px rgba(11,37,70,0.09); }
.usecase img { width:64px; height:64px; border-radius:8px; object-fit:cover; margin-bottom:10px; }

/* Counters */
.counters-grid { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.counter { background:#fff; padding:18px; border-radius:10px; min-width:140px; box-shadow: 0 8px 20px rgba(11,37,70,0.04); text-align:center; }
.counter .num { font-size:1.6rem; font-weight:700; color:#0b2546; }

/* CTA */
.pp-cta .cta-row { display:flex; gap:12px; justify-content:center; align-items:center; }

/* Modal tweaks */
.modal .form-row { gap: 8px; }
.modal .btn { white-space: nowrap; }

/* Responsive: reduce right offset on medium screens */
@media (max-width: 1200px) {
  .hero-action-right { right: 28px; }
}

@media (max-width: 1100px) {
  .platform-grid.three-per-row { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .usecases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .client-card { width: 180px; }
  .clients-track { gap: 14px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
  .pp-hero .hero-grid { grid-template-columns:1fr; text-align:center; }
  .platform-grid.three-per-row { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .clients-grid { gap:12px; grid-template-columns: repeat(2,1fr); }
  .usecases-grid { grid-template-columns: 1fr; }
  .client-card img { max-width:120px; height:48px; }
}
@media (max-width: 576px) {
  .clients-track { gap: 12px; }
  .client-card { width: 160px; padding: 10px; }
  .carousel-controls { right: 8px; top: 8px; }
}