/* ===============================================================
   Relay Me — home page styles
   Hero mock, terminal demo, how-it-works and feature grid.
   Loaded after site.css, which holds the shared tokens, nav,
   buttons and footer.
   =============================================================== */

/* HERO */
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-email {
  color: #c4d6ff;
  text-decoration: underline;
  text-decoration-color: rgba(196, 214, 255, 0.45);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.contact-email:hover,
.contact-email:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}
.contact-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-play {
  gap: 10px;
}
.play-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -4px rgba(31, 80, 242, 0.6);
  transition: transform 0.2s ease;
}
.btn-play:hover .play-icon {
  transform: scale(1.08);
}
.play-icon svg {
  width: 10px;
  height: 10px;
  fill: #fff;
  margin-left: 1px;
}
.demo-time {
  font-size: 0.78rem;
  color: #6b7585;
  font-weight: 500;
  padding-left: 6px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
/* MOCK */
.mock {
  margin-top: 80px;
  position: relative;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.mock-frame {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}
.mock-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.mock-url {
  margin-left: 12px;
  font-size: 0.8rem;
  color: #6b7585;
  font-family: var(--mono);
}
.mock-body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .mock-body { grid-template-columns: 1fr; }
}
.chat-msg {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.chat-msg.user {
  background: rgba(255, 255, 255, 0.05);
  color: #d6dce6;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-msg.bot {
  background: linear-gradient(45deg, rgba(47, 103, 255, 0.18) 0%, rgba(31, 80, 242, 0.18) 100%);
  border: 1px solid rgba(47, 103, 255, 0.3);
  color: #fff;
}
.chat-msg .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7585;
  margin-bottom: 6px;
}
.chat-msg.bot .label {
  color: #8eb1ff;
}
/* TERMINAL MOCK */
.terminal-body {
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.7;
  display: block;
}
.terminal-body .line {
  padding: 4px 0;
  color: #c8d0dd;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.terminal-body .prompt {
  color: #2f67ff;
  font-weight: 700;
  margin-right: 8px;
}
.terminal-body .cmd {
  color: #fff;
  font-weight: 600;
}
.terminal-body .arg {
  color: #8eb1ff;
}
.terminal-body .out {
  color: #6ee7a0;
  padding-left: 20px;
}
.terminal-body .out .check {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-right: 6px;
  flex-shrink: 0;
}
.terminal-body .out strong {
  color: #fff;
  font-weight: 600;
}
code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(47, 103, 255, 0.15);
  border: 1px solid rgba(47, 103, 255, 0.25);
  color: #c4d6ff;
}
/* HOW */
.how {
  padding: 60px 0 100px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}
.step { min-width: 0; }
@media (min-width: 881px) and (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
.step {
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.step-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue-1);
  margin-bottom: 14px;
}
.step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.step p {
  color: #aab3c2;
  font-size: 0.95rem;
  line-height: 1.55;
}
/* FEATURES */
.features {
  padding: 100px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; }
}
.card {
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 103, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}
.icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(45deg, rgba(47, 103, 255, 0.18) 0%, rgba(31, 80, 242, 0.18) 100%);
  border: 1px solid rgba(47, 103, 255, 0.3);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.icon svg {
  width: 22px;
  height: 22px;
  stroke: #8eb1ff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.card p {
  color: #aab3c2;
  font-size: 0.95rem;
  line-height: 1.55;
}
/* CTA */
/* FOOTER */
/* FAKE MENU */
.pop-menu .item .kbd { margin-left: auto; font-size: 0.7rem; color: #6b7585; font-family: var(--mono); }
.pop-menu .item.danger { color: #ff7a7a; }
.pop-menu .item.danger:hover { background: rgba(255, 122, 122, 0.08); color: #ff7a7a; }

/* ── DEMO PLAYER ────────────────────────────────────────────────────
   "Watch the demo" opens the video over the page rather than sending
   people to YouTube, so the tab they came in on is still here when the
   video ends. home.js builds these nodes and removes the whole overlay
   on close, which is what stops playback. */
.demo-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 9, 16, 0.85);
  backdrop-filter: blur(4px);
}
.demo-dialog {
  position: relative;
  width: min(960px, 100%);
}
.demo-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #05070c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
}
.demo-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.demo-pending {
  padding: 24px;
  text-align: center;
  color: #aab3c2;
  font-size: 0.95rem;
}
.demo-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #e6eaf2;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.demo-close:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 700px) {
  .demo-close { top: -38px; }
}