/* extra styles for landing-v2 */

/* Laptop frame */
.laptop-frame {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow:
    0 30px 80px -30px color-mix(in oklab, var(--g-primary) 30%, transparent),
    0 20px 50px -20px rgba(0,0,0,0.6);
  transform: perspective(2000px) rotateX(2deg);
  transition: transform .5s var(--ease);
}
.laptop-frame:hover {
  transform: perspective(2000px) rotateX(0deg);
}
.laptop-chrome {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.laptop-chrome .tl { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.laptop-chrome .tl.r { background: oklch(0.65 0.18 25); }
.laptop-chrome .tl.y { background: oklch(0.78 0.15 85); }
.laptop-chrome .tl.g { background: oklch(0.70 0.15 145); }
.laptop-screen { min-height: 520px; background: var(--card); }

/* Metric card hover */
.metric { transition: background .3s var(--ease); }
.metric:hover { background: var(--bg-raised) !important; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .trust-row { grid-template-columns: repeat(4, 1fr) !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .laptop-screen { min-height: 380px; }
  .laptop-screen > div { grid-template-columns: 1fr !important; }
}