/* ============================================================
   MethodIA — Device frames (browser window + phone)
   ============================================================ */

/* ── Browser window ── */
.browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 60px 120px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #111118;
  position: relative;
}

.browser-bar {
  height: 40px;
  background: #1c1c2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.browser-dot-red    { background: #ff5f57; }
.browser-dot-yellow { background: #febc2e; }
.browser-dot-green  { background: #28c840; }

.browser-url {
  flex: 1;
  height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
  white-space: nowrap;
  max-width: 340px;
}

.browser-screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: #0d0d18;
}

.browser-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ── Phone frame ── */
.phone {
  border-radius: 44px;
  padding: 12px;
  background: #1c1c28;
  box-shadow:
    0 40px 80px -10px rgba(0, 0, 0, 0.7),
    0 0 0 1.5px rgba(255, 255, 255, 0.08);
  position: relative;
}

.phone-screen {
  border-radius: 34px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: #0d0d18;
  position: relative;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.phone-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  pointer-events: none;
}

/* ── Glow behind devices ── */
.device-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.device-glow-cobalt  { background: rgba(42,  86, 232, 0.22); }
.device-glow-saffron { background: rgba(232, 149,  21, 0.14); }
.device-glow-purple  { background: rgba(102, 103, 171, 0.16); }

/* ── Floating phone over browser ── */
.device-stack {
  position: relative;
}
.device-stack .browser {
  position: relative;
  z-index: 2;
}
.device-stack .phone {
  position: absolute;
  z-index: 3;
  bottom: -5%;
  right: -5%;
  width: 22%;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .device-stack .phone { display: none; }
}

@media (max-width: 768px) {
  .browser { border-radius: 8px; }
  .phone   { display: none; }
}