:root{--brand:#0e1b4d;--accent:#2563eb}
body{font-family:Inter,system-ui,Arial,sans-serif;color:#243045;background:#fff}
.topbar{position:sticky;top:0;z-index:1030;background:#fff;box-shadow:0 2px 8px rgba(2,6,23,.04)}
.brand-badge{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#1e3faa);color:#fff;font-weight:700;margin-right:8px;padding:6px}
.brand-name{font-weight:700;color:var(--brand)}
.hero .carousel-caption{bottom:30%;text-align:left}
.hero img{height:520px;object-fit:cover}
.gradient{background:linear-gradient(135deg,var(--brand),#0ea5e9);color:#fff;padding:30px;border-radius:10px}
.footer{background:var(--brand);color:#fff;padding-top:30px}
.card-img-top{height:200px;object-fit:cover}
.btn-primary{background:var(--accent);border-color:var(--accent)}
.bg-light{background:#f8fafc}
a{color:inherit}

/* Flip card container */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Front & Back sides */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

/* Front */
.flip-card-front {
  background: #fff;
}

/* Back */
.flip-card-back {
  background: #0d6efd;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}