/* =====================================================
   TALENT PAGE  –  talent.css
   Dark theme | tl-* namespace
   ===================================================== */

/* ── UTILITIES ─────────────────────────────────────── */
.tl-accent-v { color: #7C5CFC; }
.tl-accent-c { color: #22D3EE; }

.tl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #22D3EE;
  margin-bottom: 1rem;
}
.tl-eyebrow--in {
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.25);
  border-radius: 50px;
  padding: .25rem .85rem;
  color: #22D3EE;
}

.tl-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.tl-section-header h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #F1EEFF;
  margin-bottom: .75rem;
}
.tl-section-header p {
  font-size: 1.05rem;
  color: #A89DC8;
  line-height: 1.7;
}

/* ── PAGE HEADER ───────────────────────────────────── */
.tl-header {
  position: relative;
  overflow: hidden;
  padding: 9rem 1.5rem 7rem;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,92,252,.22) 0%, transparent 70%),
              linear-gradient(180deg, #0D0D1A 0%, #0A0A0F 100%);
  text-align: center;
}

.tl-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,92,252,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,252,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.tl-header__dots {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(124,92,252,.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.tl-header__dots::after {
  content: '';
  position: absolute;
  top: 40%;
  right: -60%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(34,211,238,.15) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(30px);
}

.tl-header__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.tl-header__inner h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  color: #F1EEFF;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}
.tl-header__inner p {
  font-size: 1.1rem;
  color: #A89DC8;
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 2.2rem;
}

.tl-header__pills {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.tl-header__pills span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 600;
  color: #C9BEFF;
  background: rgba(124,92,252,.12);
  border: 1px solid rgba(124,92,252,.3);
}

/* ── TALENT POOL ───────────────────────────────────── */
.tl-pool {
  padding: 6rem 1.5rem;
  background: #0A0A0F;
}

.tl-pool__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.75rem;
}

.tl-pool-card {
  background: #111120;
  border: 1px solid #1E1E35;
  border-radius: 18px;
  padding: 2rem 1.75rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tl-pool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124,92,252,.5);
  box-shadow: 0 16px 40px rgba(124,92,252,.15);
}
.tl-pool-card--add {
  border: 1.5px dashed rgba(124,92,252,.35);
  background: rgba(124,92,252,.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tl-pool-card--add:hover {
  border-color: rgba(124,92,252,.7);
}

.tl-pool-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
}
.tl-icon--violet {
  background: rgba(124,92,252,.15);
  color: #9B7FFF;
  border: 1px solid rgba(124,92,252,.3);
}
.tl-icon--cyan {
  background: rgba(34,211,238,.1);
  color: #22D3EE;
  border: 1px solid rgba(34,211,238,.25);
}
.tl-icon--add {
  background: rgba(124,92,252,.1);
  color: #7C5CFC;
  border: 1px dashed rgba(124,92,252,.4);
}

.tl-pool-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #F1EEFF;
  margin-bottom: .6rem;
}
.tl-pool-card p {
  font-size: .92rem;
  color: #9B8BBF;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.tl-pool-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tl-pool-card__tags span {
  font-size: .72rem;
  font-weight: 600;
  padding: .22rem .7rem;
  border-radius: 50px;
  background: rgba(124,92,252,.1);
  color: #A78BFA;
  border: 1px solid rgba(124,92,252,.2);
}

.tl-apply-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 700;
  color: #22D3EE;
  text-decoration: none;
  transition: gap .25s;
}
.tl-apply-link:hover { gap: .75rem; }

/* ── OPEN ROLES ────────────────────────────────────── */
.tl-roles {
  padding: 6rem 1.5rem;
  background: #0D0D1A;
}

.tl-roles__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.tl-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #111120;
  border: 1px solid #1E1E35;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tl-role:hover {
  border-color: rgba(124,92,252,.45);
  box-shadow: 0 8px 30px rgba(124,92,252,.1);
}

.tl-role__left {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex: 1;
}
.tl-role__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(124,92,252,.12);
  border: 1px solid rgba(124,92,252,.25);
  color: #9B7FFF;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.tl-role__left h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #F1EEFF;
  margin-bottom: .35rem;
}
.tl-role__left p {
  font-size: .88rem;
  color: #9B8BBF;
  line-height: 1.55;
}

.tl-role__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tl-role__tag {
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 50px;
}
.tl-tag--violet {
  background: rgba(124,92,252,.15);
  color: #A78BFA;
  border: 1px solid rgba(124,92,252,.3);
}
.tl-tag--cyan {
  background: rgba(34,211,238,.1);
  color: #22D3EE;
  border: 1px solid rgba(34,211,238,.25);
}
.tl-tag--remote {
  background: rgba(255,255,255,.05);
  color: #9B8BBF;
  border: 1px solid rgba(255,255,255,.1);
}

.tl-role__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .87rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7C5CFC 0%, #22D3EE 100%);
  padding: .55rem 1.25rem;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s, transform .25s;
}
.tl-role__btn:hover { opacity: .88; transform: translateX(3px); }

/* ── WHY JOIN ──────────────────────────────────────── */
.tl-why {
  padding: 6rem 1.5rem;
  background: #0A0A0F;
}

.tl-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem;
}

.tl-why-card {
  position: relative;
  background: #111120;
  border: 1px solid #1E1E35;
  border-radius: 18px;
  padding: 2.25rem 1.75rem 2rem;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tl-why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124,92,252,.45);
  box-shadow: 0 16px 40px rgba(124,92,252,.12);
}

.tl-why-card__num {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(124,92,252,.1);
  line-height: 1;
  letter-spacing: -.02em;
  pointer-events: none;
}

.tl-why-card__icon {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #7C5CFC 0%, #22D3EE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tl-why-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F1EEFF;
  margin-bottom: .6rem;
}
.tl-why-card p {
  font-size: .9rem;
  color: #9B8BBF;
  line-height: 1.65;
}

/* ── CTA ───────────────────────────────────────────── */
.tl-cta {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, #0D0D1A 0%, #1A0A2E 50%, #0D1A2E 100%);
  text-align: center;
}
.tl-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(ellipse, rgba(124,92,252,.2) 0%, transparent 65%);
  pointer-events: none;
}

.tl-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.tl-cta__inner .tl-eyebrow { color: #22D3EE; }
.tl-cta__inner h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #F1EEFF;
  margin-bottom: 1rem;
}
.tl-cta__inner p {
  font-size: 1.05rem;
  color: #A89DC8;
  line-height: 1.7;
  margin-bottom: 2.25rem;
}

.tl-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #7C5CFC 0%, #22D3EE 100%);
  text-decoration: none;
  transition: opacity .25s, transform .25s;
  box-shadow: 0 0 30px rgba(124,92,252,.4);
}
.btn-primary:hover { opacity: .88; transform: translateY(-2px); }

.tl-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  color: #C9BEFF;
  border: 1.5px solid rgba(124,92,252,.4);
  text-decoration: none;
  transition: border-color .25s, color .25s;
}
.tl-ghost-btn:hover { border-color: rgba(124,92,252,.8); color: #F1EEFF; }

/* ── APPLICATION FORM ──────────────────────────────── */
.tl-apply {
  padding: 6rem 1.5rem;
  background: #0B0B18;
}

.tl-apply__form {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(124,92,252,.2);
  border-radius: 20px;
  padding: 2.5rem 2.5rem 2rem;
}

.tl-apply__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.tl-apply__field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.tl-apply__field--full {
  margin-bottom: 1.25rem;
}

.tl-apply__field label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C9BEFF;
}

.tl-apply__field label span {
  color: #22D3EE;
}

.tl-apply__field input,
.tl-apply__field select,
.tl-apply__field textarea {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(124,92,252,.25);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: #F1EEFF;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
  box-sizing: border-box;
}

.tl-apply__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C5CFC' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.tl-apply__field select option {
  background: #1A0A2E;
  color: #F1EEFF;
}

.tl-apply__field input::placeholder,
.tl-apply__field textarea::placeholder {
  color: rgba(168,157,200,.5);
}

.tl-apply__field input:focus,
.tl-apply__field select:focus,
.tl-apply__field textarea:focus {
  border-color: #7C5CFC;
  background: rgba(124,92,252,.07);
}

.tl-apply__field textarea {
  resize: vertical;
  min-height: 140px;
}

.tl-apply__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .5rem;
}

.tl-apply__privacy {
  font-size: .82rem;
  color: #7B6FA0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tl-apply__privacy i { color: #22D3EE; font-size: .75rem; }

@media (max-width: 640px) {
  .tl-apply__row { grid-template-columns: 1fr; }
  .tl-apply__form { padding: 1.75rem 1.25rem; }
  .tl-apply__footer { flex-direction: column; align-items: flex-start; }
}

/* ── FADE-UP ANIMATION ─────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.tl-pool__grid .fade-up:nth-child(1) { transition-delay: .05s; }
.tl-pool__grid .fade-up:nth-child(2) { transition-delay: .12s; }
.tl-pool__grid .fade-up:nth-child(3) { transition-delay: .19s; }
.tl-pool__grid .fade-up:nth-child(4) { transition-delay: .26s; }
.tl-pool__grid .fade-up:nth-child(5) { transition-delay: .33s; }
.tl-pool__grid .fade-up:nth-child(6) { transition-delay: .40s; }

.tl-why__grid .fade-up:nth-child(1) { transition-delay: .05s; }
.tl-why__grid .fade-up:nth-child(2) { transition-delay: .12s; }
.tl-why__grid .fade-up:nth-child(3) { transition-delay: .19s; }
.tl-why__grid .fade-up:nth-child(4) { transition-delay: .26s; }

.tl-roles__list .fade-up:nth-child(1) { transition-delay: .04s; }
.tl-roles__list .fade-up:nth-child(2) { transition-delay: .10s; }
.tl-roles__list .fade-up:nth-child(3) { transition-delay: .16s; }
.tl-roles__list .fade-up:nth-child(4) { transition-delay: .22s; }
.tl-roles__list .fade-up:nth-child(5) { transition-delay: .28s; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 768px) {
  .tl-role {
    flex-direction: column;
    align-items: flex-start;
  }
  .tl-role__right { justify-content: flex-start; }
  .tl-pool__grid { grid-template-columns: 1fr; }
  .tl-why__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .tl-why__grid { grid-template-columns: 1fr; }
}