/* ====== Base / Reset ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow-y: auto; }

:root{
  --ink: #0b1220;
  --muted: rgba(11,18,32,0.72);
  --glassBorder: rgba(15,23,42,0.14);
  --shadow: rgba(0,0,0,0.18);
}

/* ====== Page Root ====== */
.root{
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ====== Background (gradient + soft blobs) ====== */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Blue gradient (similar feel to your app global background) */
.bg-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(34,197,94,0.12), transparent 55%),
    radial-gradient(900px 600px at 85% 35%, rgba(34,197,94,0.10), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(234,179,8,0.10), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0a1020 40%, #070b16 100%);
}

.blur-patch{
  position: absolute;
  filter: blur(40px);
  opacity: 0.55;
  border-radius: 999px;
  mix-blend-mode: screen;
}

.blur-1{ width: 520px; height: 260px; left: 6%;  top: 14%;  background: rgba(34,197,94,0.32); }
.blur-2{ width: 420px; height: 220px; right: 8%; top: 18%;  background: rgba(234,179,8,0.22); }
.blur-3{ width: 640px; height: 290px; left: 18%; bottom: 10%; background: rgba(59,130,246,0.18); }

/* ====== Dashboard screenshot behind window ====== */
.page-bg{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 140vh;            /* allows scrolling to see more dashboard */
  display: flex;
  justify-content: center;
  padding: 72px 16px 140px;
}

.page-bg-img{
  width: 80%;                   /* you asked for 80% fill */
  max-width: 1400px;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
}

/* Optional repeating pattern behind screenshot (if file exists) */
.page-bg::before{
  content:"";
  position: absolute;
  inset: 0;
  background-image: url("/assets/teaser-pattern.png"); /* repeating file name you asked about */
  background-repeat: repeat;
  background-size: 520px auto;
  opacity: 0.06;
  pointer-events: none;
}

/* ====== Floating window ====== */
.window{
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  z-index: 5;

  /* If you want to lessen window width: adjust this width line */
  width: min(1120px, calc(100% - 48px));
  max-height: calc(100vh - 120px);
  overflow: auto;

  border-radius: 18px;
  background: rgba(255,255,255,0.96); /* you asked for teaser window white */
  color: var(--ink);
  border: 1px solid var(--glassBorder);
  box-shadow: 0 30px 90px var(--shadow);

  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
}

/* Two-column layout that DOES NOT collapse if left content is removed */
.window-inner{
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 520px);
  gap: 18px;
  padding: 18px;
  align-items: start;
}

/* Left column */
.copy-col{
  min-width: 0;
}

.badge{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.10);
  color: rgba(11,18,32,0.80);
  margin-bottom: 10px;
}

.title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.05;
  font-weight: 800;
}

.sub{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.small-print{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(11,18,32,0.62);
}

/* Right column */
.video-col{
  min-width: 0;
}

.video-frame{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 16px 50px rgba(0,0,0,0.20);
}

/* Maintain proper aspect ratio so video is NOT cut off */
.video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1080; /* your actual video size */
  object-fit: contain;
  background: #000;
}

.video-caption{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(11,18,32,0.65);
}

/* ====== Mobile ====== */
@media (max-width: 860px){
  .window{
    top: 72px;
    width: calc(100% - 24px);
    max-height: calc(100vh - 96px);
  }

  .window-inner{
    grid-template-columns: 1fr;
  }

  .page-bg{
    padding-top: 60px;
  }

  .page-bg-img{
    width: 92%;
  }
}