/* PsicoPro v0.3.1 — browser annotation pass */

.concept-hero h1 {
  margin-top: 0;
}

.concept-phone-prop {
  position: absolute;
  left: 7%;
  top: 32%;
  z-index: 3;
  width: 24%;
  aspect-ratio: 0.53;
  border: 2px solid rgba(236, 232, 222, 0.5);
  border-radius: 16% / 8%;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(160deg, #ddd7ce 0%, #b9b3ad 52%, #9b9691 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(9, 11, 24, 0.3) inset;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.concept-phone-prop::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 42%);
}

.concept-phone-camera {
  position: absolute;
  left: 10%;
  top: 7%;
  z-index: 2;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 24%;
  background:
    radial-gradient(circle at 29% 29%, #111520 0 14%, #4d5360 15% 20%, transparent 21%),
    radial-gradient(circle at 72% 29%, #111520 0 14%, #4d5360 15% 20%, transparent 21%),
    radial-gradient(circle at 29% 72%, #111520 0 14%, #4d5360 15% 20%, transparent 21%),
    rgba(185, 180, 174, 0.96);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.concept-phone-clamp {
  position: absolute;
  left: -13%;
  right: -13%;
  top: 48%;
  z-index: 4;
  height: 16%;
  border-radius: 12px;
  background: linear-gradient(180deg, #171a23, #090b11);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.concept-phone-tripod {
  position: absolute;
  left: 46%;
  top: 61%;
  z-index: 1;
  width: 8%;
  height: 86%;
  border-radius: 999px;
  background: linear-gradient(90deg, #11141d, #343946 48%, #0b0d13);
  transform-origin: top center;
}

.concept-phone-tripod::before,
.concept-phone-tripod::after {
  content: "";
  position: absolute;
  top: 72%;
  width: 100%;
  height: 55%;
  border-radius: 999px;
  background: linear-gradient(90deg, #11141d, #343946 48%, #0b0d13);
  transform-origin: top center;
}

.concept-phone-tripod::before {
  transform: rotate(25deg);
}

.concept-phone-tripod::after {
  transform: rotate(-25deg);
}

@media (max-width: 760px) {
  .concept-phone-prop {
    left: 6%;
    top: 34%;
    width: 25%;
  }
}