.hero{background:#fff;border-bottom:1px solid var(--border)}
.heroBox{border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#111,#222);position:relative;min-height:340px}
.heroSlide{display:none;position:absolute;inset:0}
.heroSlide.isActive{display:block}
.heroInner{
  height:100%;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  padding:24px;
  color:#fff;align-items:center
}
.heroBadge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 10px;border-radius:999px;font-weight:1000;margin-bottom:10px}
.heroInner h1{margin:0 0 8px;font-size:34px;line-height:1.1}
.heroInner p{margin:0 0 14px;opacity:.9;max-width:56ch}

.heroMedia{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px}
.heroMedia img{border-radius:12px}

.heroNav{
  position:absolute;inset:auto 12px 12px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.heroDots{display:flex;gap:8px;align-items:center}
.heroDots button{
  width:10px;height:10px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.35)
}
.heroDots button.isActive{background:#fff}
.heroPrev,.heroNext{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:1000
}

@media (max-width: 900px){
  .heroInner{grid-template-columns:1fr}
}

/* Two-column info */
.info2col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width: 900px){.info2col{grid-template-columns:1fr}}
.infoBox{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}
.infoBox img{border-radius:14px}

/* Category tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 900px){.tiles{grid-template-columns:1fr}}
.tile{
  border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#111;position:relative;min-height:190px
}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.75}
.tileOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.tileOverlay h3{margin:0 0 8px}


/* TRUST SECTION */
.trustSection {
  background: #fff;
}

.trustGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px) {
  .trustGrid {
    grid-template-columns: 1fr;
  }
}

/* LEFT CAROUSEL */
.trustMedia {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.trustCarousel img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: none;
  animation: fadeIn 0.6s ease;
}

.trustCarousel img.active {
  display: block;
}

.trustCarouselNav {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: flex;
  justify-content: space-between;
}

.trustCarouselNav button {
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 20px;
  cursor: pointer;
}

/* RIGHT CONTENT */
.trustContent h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.trustContent h2 span {
  color: var(--red);
}

.trustIntro {
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 20px;
}

/* TRUST CARDS */
.trustCards {
  display: grid;
  gap: 14px;
}

.trustCard {
  display: flex;
  gap: 14px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.6s ease forwards;
}

.trustCard:nth-child(1) { animation-delay: .1s }
.trustCard:nth-child(2) { animation-delay: .2s }
.trustCard:nth-child(3) { animation-delay: .3s }
.trustCard:nth-child(4) { animation-delay: .4s }
.trustCard:nth-child(5) { animation-delay: .5s }

.trustCard .icon {
  font-size: 28px;
}

.trustCard h4 {
  margin: 0 0 4px;
  font-size: 16px;
}

.trustCard p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* ANIMATIONS */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}


/* REAL PROOF MEDIA */
.proofSection {
  background: #fff;
}

.proofTabs {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.proofTab {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  font-weight: 900;
  cursor: pointer;
}

.proofTab.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* CONTENT */
.proofContent {
  display: none;
  animation: fadeIn .4s ease;
}
.proofContent.active {
  display: block;
}

/* GRID */
.proofGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .proofGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .proofGrid { grid-template-columns: 1fr; }
}

.proofGrid img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* VIDEO */
.videoBox {
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.videoBox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* DEPTH */
.depthWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .depthWrap { grid-template-columns: 1fr; }
}

.depthTable {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.depthTable div {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 14px;
}
.depthTable div:nth-child(3n) {
  border-right: none;
}

/* ANIMATION */
@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}