/* ============================================
   join.css — Role Chooser Page Only
   join.php
============================================ */

/* Fix: FA icons inside <a> tags need font reset */
.role-card i,
.role-perks li i,
.role-who i,
.role-cta i,
.hero-badge i {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

/* HERO */
.unified-hero {
  position: relative;
  background: linear-gradient(135deg, #062141 0%, #0a4d4d 100%);
  color: white;
  padding: 140px 25px 80px;
  text-align: center;
  overflow: hidden;
}
.hero-shapes { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); animation: floatShape 20s infinite ease-in-out; }
.shape-1 { width: 420px; height: 420px; top: -160px; right: -100px; }
.shape-2 { width: 260px; height: 260px; bottom: -80px; left: 12%; animation-delay: 7s; }
.shape-3 { width: 180px; height: 180px; top: 40%; left: -60px; animation-delay: 14s; }
@keyframes floatShape {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: .3; }
  50%      { transform: translateY(-40px) rotate(180deg); opacity: .6; }
}
.unified-hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 8px 22px;
  font-size: 14px; font-weight: 700; margin-bottom: 24px;
  animation: fadeUp .7s ease both;
}
.unified-hero-title {
  font-size: 52px; font-weight: 800; margin-bottom: 18px;
  letter-spacing: -.5px; line-height: 1.2;
  animation: fadeUp .8s .15s ease both;
}
.unified-hero-sub {
  font-size: 19px; opacity: .9; line-height: 1.75;
  max-width: 640px; margin: 0 auto;
  animation: fadeUp .8s .3s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CHOOSER SECTION */
.role-chooser-section {
  background: #f0f4f8;
  padding: 70px 20px 80px;
}
.role-chooser-wrap { max-width: 1100px; margin: 0 auto; }
.role-chooser-label {
  text-align: center; font-size: 13px; font-weight: 800;
  color: #0a4d4d; letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 44px;
  opacity: 0; animation: fadeUp .7s .2s ease both;
}
.role-cards-row {
  display: flex; align-items: stretch; justify-content: center;
  opacity: 0; animation: fadeUp .8s .35s ease both;
}

/* ROLE CARD — now an <a> tag */
.role-card {
  flex: 1; max-width: 480px; min-width: 280px;
  background: white;
  border: 2px solid rgba(6,33,65,0.08);
  border-radius: 24px;
  padding: 40px 36px;
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.role-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 64px rgba(6,33,65,0.17);
  border-color: rgba(10,77,77,0.28);
  text-decoration: none;
  color: inherit;
}
.role-card-glow {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
  background: linear-gradient(135deg, rgba(10,77,77,0.04), rgba(6,33,65,0.03));
}
.role-card:hover .role-card-glow { opacity: 1; }

/* Card icon */
.role-card-icon {
  width: 74px; height: 74px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(10,77,77,0.12), rgba(6,33,65,0.08));
  border: 1.5px solid rgba(10,77,77,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #0a4d4d;
  transition: all .4s ease;
}
.team-icon {
  background: linear-gradient(135deg, rgba(6,33,65,0.1), rgba(10,77,77,0.08));
  color: #062141;
}
.role-card:hover .role-card-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 12px 32px rgba(10,77,77,0.22);
}

/* Badges */
.expert-badge-pill {
  background: rgba(10,77,77,0.08); color: #0a4d4d;
  border: 1px solid rgba(10,77,77,0.2);
  border-radius: 999px; padding: 5px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  display: inline-block; width: fit-content;
}
.team-badge-pill {
  background: rgba(6,33,65,0.07); color: #062141;
  border: 1px solid rgba(6,33,65,0.18);
  border-radius: 999px; padding: 5px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  display: inline-block; width: fit-content;
}

.role-card h3 { font-size: 26px; font-weight: 800; color: #062141; line-height: 1.2; }
.role-desc { font-size: 15px; color: #475569; line-height: 1.75; }

.role-perks { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.role-perks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #374151; font-weight: 500;
}
.role-perks li i { color: #10b981; font-size: 14px; flex-shrink: 0; }

.role-who {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(10,77,77,0.05); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: #64748b; line-height: 1.6;
  border: 1px solid rgba(10,77,77,0.1);
}
.role-who i { color: #0a4d4d; font-size: 13px; flex-shrink: 0; margin-top: 2px; }

.role-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 16px;
  border-top: 1.5px solid #f1f5f9;
  font-size: 16px; font-weight: 800; color: #062141;
  transition: color .3s;
}
.role-cta i { font-size: 16px; transition: transform .3s; }
.role-card:hover .role-cta { color: #0a4d4d; }
.role-card:hover .role-cta i { transform: translateX(-8px); }

/* OR divider */
.role-or {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0 28px; position: relative;
}
.role-or span {
  background: #f0f4f8; color: #94a3b8;
  font-size: 13px; font-weight: 800;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; position: relative;
}
.role-or::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 100%; background: #e2e8f0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .role-cards-row { flex-direction: column; align-items: center; }
  .role-or { flex-direction: row; padding: 18px 0; }
  .role-or::before { width: 100%; height: 2px; }
  .role-card { max-width: 100%; width: 100%; }
}
@media (max-width: 768px) {
  .unified-hero { padding: 120px 20px 60px; }
  .unified-hero-title { font-size: 34px; }
  .unified-hero-sub { font-size: 16px; }
  .role-chooser-section { padding: 50px 16px 60px; }
}
@media (max-width: 480px) {
  .unified-hero-title { font-size: 28px; }
  .role-card { padding: 28px 22px; }
  .role-card h3 { font-size: 22px; }
}