/* Scoped theme + layout for hacker lead form on home landing */

.hk-lead-embed {
  --hk-surface-card: #0b1320;
  --hk-surface-elevated: #0d1526;
  --hk-surface-input: #080f21;
  --hk-border: rgba(59, 86, 140, 0.35);
  --hk-border-subtle: rgba(255, 255, 255, 0.06);
  --hk-primary: #2563eb;
  --hk-primary-deep: #1d4ed8;
  --hk-text-primary: #ffffff;
  --hk-text-secondary: #c7cfdd;
  --hk-text-muted: #8b96a8;
  --hk-green: #22c55e;
  --hk-green-response: #1fe093;
  --hk-radius-card: 16px;
  --hk-radius-input: 10px;
  --hk-radius-button: 10px;
  --hk-radius-chip: 10px;
  --hk-gradient-primary: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  --hk-shadow-card: 0 10px 40px rgba(0, 0, 0, 0.5);
  --hk-shadow-form-glow: 0 0 48px rgba(37, 99, 235, 0.14);
  --hk-shadow-button: 0 8px 30px rgba(37, 99, 235, 0.5);

  min-width: 0;
  position: relative;
  z-index: 2;
}

/* --- Landing hero: copy left, form right --- */

.landing-hero-hacker.hero-section {
  min-height: auto;
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  align-items: stretch;
  background-color: var(--color-bg-hero, #050b1a);
  /* Art centered behind content; gradient layers dim brightness (not opacity on the PNG) */
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 11, 26, 0.88) 0%,
      rgba(5, 11, 26, 0.42) 30%,
      rgba(5, 11, 26, 0.38) 70%,
      rgba(5, 11, 26, 0.88) 100%
    ),
    radial-gradient(
      ellipse 78% 62% at 50% 42%,
      rgba(5, 11, 26, 0.12) 0%,
      rgba(5, 11, 26, 0.55) 58%,
      rgba(5, 11, 26, 0.82) 100%
    ),
    url("../home_desk/backround-hero.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center 42%;
  background-size: cover, cover, min(76%, 720px) auto;
}

/* index.css uses ::after on .hero-section for mobile overlays — keep landing hero clear */
.landing-hero-hacker.hero-section::before,
.landing-hero-hacker.hero-section::after {
  display: none;
  content: none;
}

.landing-hero-hacker .hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(0.5rem, 2vw, 1rem);
  position: relative;
  z-index: 2;
}

.landing-hero-hacker .hero-content {
  align-self: center;
  max-width: 560px;
  z-index: 1;
}

.landing-hero-hacker .hero-description {
  margin-bottom: 1.35rem;
  max-width: 52ch;
}

.landing-hero-hacker .hero-features {
  margin-bottom: 0;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.landing-hero-hacker .hk-lead-embed {
  width: 100%;
  max-width: 400px;
  justify-self: end;
  align-self: center;
}

.landing-hero-hacker .hk-lead-card {
  position: static;
  top: auto;
  padding: 1.35rem 1.25rem 1.4rem;
  margin: 0;
  background: rgba(11, 19, 32, 0.94);
}

.landing-hero-hacker .hk-lead-card__title {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
}

.landing-hero-hacker .hk-response-time {
  margin: 0.75rem 0 0;
  padding-top: 0.85rem;
  padding-bottom: 0.1rem;
}

.landing-hero-hacker .hk-response-time__value {
  font-size: clamp(1.35rem, 2.5vw, 1.5rem);
}

@media (min-width: 1200px) {
  .landing-hero-hacker.hero-section {
    background-size: cover, cover, min(72%, 680px) auto;
  }

  .landing-hero-hacker .hero-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 420px);
    gap: 3.5rem;
  }

  .landing-hero-hacker .hk-lead-embed {
    max-width: 420px;
  }
}

@media (max-width: 1023px) {
  .landing-hero-hacker.hero-section {
    min-height: auto;
  }
}

@media (max-width: 1024px) {
  .landing-hero-hacker.hero-section {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .landing-hero-hacker.hero-section {
    background-size: cover, cover, min(88%, 540px) auto;
    background-position: center, center, center 12%;
  }

  .landing-hero-hacker .hero-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding-inline: 0;
  }

  .landing-hero-hacker .hero-content {
    max-width: none;
    text-align: left;
  }

  .landing-hero-hacker .hk-lead-embed {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
    justify-self: center;
  }
}

/* --- Mobile: copy-first column, art behind form zone, thumb-friendly form --- */

@media (max-width: 768px) {
  .landing-hero-hacker.hero-section {
    padding:
      max(1.5rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      max(2rem, env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
    /* Darken top for headline; place artwork lower so it does not fight the title */
    background-image:
      linear-gradient(
        180deg,
        rgba(5, 11, 26, 0.96) 0%,
        rgba(5, 11, 26, 0.9) 32%,
        rgba(5, 11, 26, 0.72) 52%,
        rgba(5, 11, 26, 0.88) 100%
      ),
      radial-gradient(
        ellipse 120% 42% at 50% 78%,
        rgba(5, 11, 26, 0.2) 0%,
        rgba(5, 11, 26, 0.75) 100%
      ),
      url("../home_desk/backround-hero.png");
    background-size: cover, cover, min(115%, 500px) auto;
    background-position: center, center, center 68%;
  }

  .landing-hero-hacker .hero-container {
    gap: 1.5rem;
    padding-inline: 0;
  }

  .landing-hero-hacker .hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
  }

  .landing-hero-hacker .marketplace-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    font-size: 10px;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.85rem;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .landing-hero-hacker .hero-title {
    font-size: clamp(1.55rem, 7.2vw, 1.85rem);
    line-height: 1.15;
    margin-bottom: 0.85rem;
    max-width: 16ch;
  }

  .landing-hero-hacker .hero-description {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
    max-width: 36ch;
  }

  .landing-hero-hacker .hero-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
  }

  .landing-hero-hacker .feature-item {
    font-size: 0.9rem;
    min-height: 2.75rem;
    padding: 0.15rem 0;
  }

  .landing-hero-hacker .feature-item i {
    font-size: 1rem;
    flex-shrink: 0;
  }

  .landing-hero-hacker .hk-lead-embed {
    max-width: none;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .landing-hero-hacker .hk-lead-card {
    padding: 1.15rem 1rem 1.2rem;
    background: rgba(11, 19, 32, 0.97);
    box-shadow: var(--hk-shadow-card), var(--hk-shadow-form-glow);
  }

  .landing-hero-hacker .hk-lead-card__title {
    font-size: 1.25rem;
  }

  .landing-hero-hacker .hk-lead-form .form-control,
  .landing-hero-hacker .hk-lead-form .form-select {
    min-height: 2.75rem;
    font-size: 16px;
  }

  .landing-hero-hacker .hk-lead-form textarea.form-control {
    min-height: 5.5rem;
  }

  .landing-hero-hacker .hk-lead-form .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .landing-hero-hacker .hk-urgency__opts {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .landing-hero-hacker .hk-urgency__opt {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    font-size: 13px;
  }

  .landing-hero-hacker .hk-lead-submit {
    min-height: 3rem;
    font-size: 1rem;
  }

  .landing-hero-hacker .hk-response-time {
    margin-top: 0.65rem;
    padding-top: 0.75rem;
  }

  .landing-hero-hacker .hk-response-time__value {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .landing-hero-hacker.hero-section {
    background-size: cover, cover, min(130%, 440px) auto;
    background-position: center, center, center 72%;
  }

  .landing-hero-hacker .hero-title {
    max-width: none;
  }

  .landing-hero-hacker .hero-description {
    max-width: none;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .landing-hero-hacker.hero-section {
    padding-block: 1.25rem 1.5rem;
  }

  .landing-hero-hacker .hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: start;
    gap: 1.25rem;
  }

  .landing-hero-hacker .hero-title {
    font-size: 1.45rem;
    max-width: none;
  }

  .landing-hero-hacker .hero-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .landing-hero-hacker .feature-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.75rem;
    min-height: auto;
  }

  .landing-hero-hacker .hk-lead-embed {
    max-width: 360px;
    justify-self: end;
  }
}