/* === PHONE-FIRST LAYOUT === */
.video-section {
  position: relative;
  width: 100%;
  min-height: 100dvh;            /* dynamic viewport on mobile */
  min-height: -webkit-fill-available; /* iOS fallback */
  height: 100svh;                /* small viewport height for mobile UI chrome */
  overflow: hidden;
}

/* Background video fills screen */
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for contrast */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* Center content */
.content-wrapper {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* Card on top of video */
.content-box {
  width: 92%;
  max-width: 420px;              /* good for phones; prevents overflow */
  background: rgba(0,0,0,.85);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  backdrop-filter: blur(2px);
}

/* Inner video scales to screen */
.content-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42dvh;             /* keep controls visible; no scroll */
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Body text */
.content-text {
  margin: 10px 0 14px;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Big, thumb-friendly CTA */
.cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #3b82f6;           /* blue-500 */
  color: #fff;
  text-decoration: none;
  padding: 14px 16px;            /* ~48px tap target height */
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background .2s ease;
}

.cta-btn:active { transform: translateY(1px); }
.cta-btn:hover  { background: #2563eb; }      /* blue-600 */

/* === OPTIONAL: minor tweaks for larger phones / small tablets === */
@media (min-width: 480px) {
  .content-box { padding: 16px; }
  .content-text { font-size: 1rem; }
  .content-video { max-height: 48dvh; }
}