:root{
  --accent: #84b6ff;
  --accent-2: #c4b5fd;
}
*{ box-sizing: border-box; }
body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans'; }

/* Landing */
.landing .hero-bg{
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2)),
    url('../img/pexels-luis-gomes-166706-546819.jpg') center/cover no-repeat,
    radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.08), transparent);
  filter: saturate(1.1);
  z-index: -1;
}
.text-accent{ color: var(--accent); }
.glass{
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
}
.side-pane{
  background: rgba(175, 150, 150, 0.25);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 1rem;
}

/* Phone mockups */
.phone{
  display:block; text-decoration:none; color: inherit;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 32px;
  padding: 18px 12px 12px;
  box-shadow: 0 12px 35px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.phone:hover{ transform: translateY(-4px); box-shadow: 0 22px 55px rgba(0,0,0,.22); }
.phone-notch{
  width: 40%; height: 12px; margin: 0 auto 10px;
  background: rgba(0,0,0,.85); border-radius: 0 0 12px 12px;
}
.phone-screen{
  background: #fff;
  border-radius: 22px;
  min-height: 220px;
  border: 1px solid rgba(0,0,0,.06);
}
.mini-card{
  font-size: .75rem;
  background: #f1f3f5;
  border: 1px solid rgba(156, 88, 88, 0.852);
  border-radius: 999px;
  display: inline-block;
  padding: .25rem .6rem;
}

/* Chapters */
pre[class*="language-"]{ border-radius: 12px; }
.list-group-item.active{ background-color: #0d6efd; border-color: #0d6efd; }
.fw-extrabold{ font-weight: 800; }
.shadow-soft{ box-shadow: 0 12px 24px rgba(0,0,0,.18); }

/* Footer */
.footer{ background: #fff; border-top: 1px solid rgba(66, 210, 56, 0.927); }

.side-pane-img {
  border-radius: 12px;   /* matches your rounded style */
  max-height: 120px;     /* keeps it small and neat */
  object-fit: cover;     /* makes it look good in any size */
  width: 100%;           /* full width of the side-pane */
}
/* Bigger size + gradient lightning effect */
.logo-text {
  font-size: 4rem; /* Make it large */
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff4d4d, #ffcc00, #33ccff, #ff4d4d);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lightning 3s linear infinite;
  letter-spacing: 2px;
}

/* Accent for the 'Book' part */
.logo-accent {
  background: linear-gradient(90deg, #00ffcc, #ff00ff, #ffff00, #00ffcc);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lightning 3s linear infinite;
}

/* Lightning animation */
@keyframes lightning {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}