/* ===== your palette ===== */
:root{
  /* dark */
  --d1:#2A2F66; --d2:#151A3A; --d3:#2A3165; --d4:#15193C;
  /* light */
  --l1:#609BE7; --l2:#6BA2E5; --l3:#72A5E7; --l4:#80ACEB; --l5:#9EBAEA;

  --text:#EAF1FF;
  --muted:#A9B7D5;
  --radius:18px;
  --inner-radius:16px;
}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inconsolata', monospace;
  color:var(--text);
  background:
    radial-gradient(900px 700px at 12% -10%, rgba(114,165,231,.15), transparent 60%),
    radial-gradient(1000px 800px at 110% 120%, rgba(128,172,235,.12), transparent 60%),
    linear-gradient(160deg, var(--d2), var(--d4) 55%, #0a0f22 100%);
  display:flex; align-items:center; justify-content:center;
  padding:48px 22px;
}

/* ===== card layout ===== */
.wrapper{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:42px;
  width:min(1150px, 94vw);
  min-height:620px;
  padding:42px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--d2) 92%, #000), color-mix(in oklab, var(--d4) 92%, #000));
  border-radius: var(--radius);
  box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    0 0 70px rgba(114,165,231,.22),
    0 0 140px rgba(128,172,235,.17);
}

/* ===== left / media ===== */
.left{ display:flex; align-items:center; }
.media-frame{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--inner-radius);
  background: linear-gradient(180deg, var(--d3), color-mix(in oklab, var(--d3) 70%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(114,165,231,.18),
    0 22px 40px rgba(0,0,0,.45);
  overflow:hidden;
  padding:10px;
}

/* video fills the frame */
.media-frame > video{
  position:absolute; inset:10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: calc(var(--inner-radius) - 10px);
}

/* ===== right / content ===== */
.right{ display:flex; flex-direction:column; }
.domain{
  color:var(--l4);
  text-decoration:none; font-weight:700; letter-spacing:.02em;
  margin-bottom:14px;
}
.domain:hover{ color:var(--l5); text-decoration:underline; }

h3{
  margin:18px 0 10px;
  color:var(--l3);
  text-decoration:underline;
  font-weight:700;
}

.list{ list-style:none; padding:0; margin:0 0 12px; }
.list li{
  margin:6px 0; padding-left:18px; position:relative; color:#E1E7F8;
}
.list li::before{
  content:"> "; position:absolute; left:0; top:0; color:var(--l2);
}

a{ color:#F5F8FF; text-decoration:none; }
a:hover{ color:var(--l3); text-decoration:underline; }

.quote{
  margin-top:auto; color:var(--l5); font-weight:600; letter-spacing:.01em;
}

/* ===== responsive ===== */
@media (max-width: 900px){
  .wrapper{ grid-template-columns: 1fr; gap:22px; padding:22px; }
  .media-frame{ aspect-ratio: 16 / 10; }
}