/* ============================================================
   HERO SECTION
============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: transparent;
}

/* ── Shared logo base ──
   --s is the visual size; logos whose artwork has padding or a
   wide aspect get a per-logo multiplier so they all LOOK equal. */
.logo {
  position: absolute;
  --s: clamp(60px, 6.5vw, 88px);
  width: var(--s);
  height: var(--s);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* =====================
   LEFT LOGOS — even rhythm: 6% / 30% / 54% / 78%
===================== */
.logo-supabase    { top: 6%;  left: 3%; }
.logo-antigravity { top: 30%; left: 3%; }
.logo-n8n         { top: 54%; left: 3%; width: calc(var(--s) * 1.12); }
.logo-lovable     { top: 78%; left: 3%; width: calc(var(--s) * 0.92); height: calc(var(--s) * 0.92); }

/* =====================
   RIGHT LOGOS — same rhythm as the left column
===================== */
/* react artwork has big transparent padding → larger box, pulled to the edge */
.logo-react  { top: 4.5%; right: 0.8%; width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.1); }
.logo-gemini { top: 30%;  right: 3%; }
.logo-retell { top: 54%;  right: 3%; width: calc(var(--s) * 0.92); height: calc(var(--s) * 0.92); border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10); }
.logo-ghl    { top: 78%;  right: 3%; }

/* =====================
   TITLE — full-width center
===================== */
.hero-title {
  position: absolute;
  top: 5%;
  left: 15%;
  right: 15%;
  text-align: center;
  font-weight: 900;
  color: #0a1628;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 5.5vw, 5.8rem);
  pointer-events: none;
  user-select: none;
}

/* =====================
   RAUF PHOTO — centered, only slightly overlapping the title
===================== */
.rauf-photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 78%;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  user-select: none;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .hero-title { font-size: clamp(2rem, 5.5vw, 4.2rem); }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .hero { min-height: 100svh; }

  .hero-title {
    top: 7%;
    left: 5%;
    right: 5%;
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
  }

  .rauf-photo {
    height: 60%;
    max-width: 96%;
  }

  /* Same even rhythm, below the title: 17% / 38% / 59% / 80% */
  .logo { --s: 52px; }

  .logo-supabase    { top: 17%; left: 3%; }
  .logo-antigravity { top: 38%; left: 3%; }
  .logo-n8n         { top: 59%; left: 3%; }
  .logo-lovable     { top: 80%; left: 3%; }

  .logo-react  { top: 16%; right: 0.5%; }
  .logo-gemini { top: 38%; right: 3%; }
  .logo-retell { top: 59%; right: 3%; border-radius: 12px; }
  .logo-ghl    { top: 80%; right: 3%; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 1.7rem; }
}