/* ══════════════════════════════════════════
   GLOBAL TOKENS
══════════════════════════════════════════ */
:root {
  --gold:        #E8A020;
  --gold-dark:   #B57A10;
  --gold-light:  #FDE9B8;
  --sun:         #F5C842;
  --navy:        #0A1628;
  --navy-mid:    #112240;
  --navy-light:  #1D3461;
  --white:       #FAFAF8;
  --gray-light:  #F2F0EB;
  --gray-mid:    #C8C5BC;
  --gray-text:   #6B6860;
  --green:       #2D7A4F;
  --green-light: #E3F5EC;
  --red:         #C0392B;
  --red-light:   #FDECEA;
  --font-display:'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --radius:      16px;
  --radius-sm:   8px;
  --shadow:      0 4px 32px rgba(10,22,40,0.12);
  --shadow-card: 0 2px 16px rgba(10,22,40,0.08);
}

*  { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 5%;
  background:rgba(10,22,40,0.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,160,32,0.2);
  transition:padding .3s;
}
.nav-logo {
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.nav-logo-icon {
  width:40px; height:40px; background:var(--gold);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.nav-logo-icon svg { width:22px; height:22px; }
.nav-logo-text {
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  color:var(--white); line-height:1.1;
}
.nav-logo-text span { color:var(--gold); }

.nav-links { display:flex; align-items:center; gap:1.75rem; list-style:none; }
.nav-links a {
  color:rgba(250,250,248,.75); text-decoration:none;
  font-size:.88rem; font-weight:400; letter-spacing:.02em;
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-cta {
  background:var(--gold); color:var(--navy) !important;
  padding:.5rem 1.2rem; border-radius:50px; font-weight:500 !important;
  transition:background .2s !important;
}
.nav-cta:hover { background:var(--sun) !important; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--white); border-radius:2px; transition:all .3s;
}
.mobile-menu {
  display:none; position:fixed; top:70px; left:0; right:0;
  background:rgba(10,22,40,.98);
  padding:1.5rem 5%; flex-direction:column; gap:1.25rem;
  border-bottom:1px solid rgba(232,160,32,.2); z-index:999;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  color:rgba(250,250,248,.8); text-decoration:none; font-size:1rem;
  padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); transition:color .2s;
}
.mobile-menu a:hover { color:var(--gold); }

/* ══════════════════════════════════════════
   HERO — CAREERS
══════════════════════════════════════════ */
.careers-hero {
  background:rgb(128, 128, 128, 0.8);;
  padding:140px 5% 90px;
  position:relative; overflow:hidden;
  margin-top: 70px;
}
.careers-hero::before {
  content:'';
  position:absolute; top:-200px; right:-100px;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(232,160,32,.1) 0%, transparent 70%);
  pointer-events:none;
}
.careers-hero::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(232,160,32,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,160,32,.04) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.careers-hero-inner {
  position:relative; z-index:2; max-width:680px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(232,160,32,.12);
  border:1px solid rgba(232,160,32,.3);
  color:var(--gold); font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem 1rem; border-radius:50px; margin-bottom:1.5rem;
}
.hero-badge::before {
  content:''; display:block; width:6px; height:6px;
  background:var(--gold); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.careers-hero h1 {
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:800; color:var(--white); line-height:1.1; margin-bottom:1.25rem;
}
.careers-hero h1 span { color:var(--gold); }
.careers-hero p {
  font-size:1.05rem; color:rgba(250,250,248,.65);
  line-height:1.75; max-width:520px; font-weight:300; margin-bottom:2rem;
}
.hero-pills { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(250,250,248,.8);
  font-size:.82rem; padding:.4rem .9rem; border-radius:50px;
}

/* ══════════════════════════════════════════
   WHY JOIN US
══════════════════════════════════════════ */
.why-join { padding:5rem 5%; background:var(--gray-light); }
.section-label {
  display:inline-block; font-size:.73rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-dark); background:var(--gold-light);
  padding:.32rem .85rem; border-radius:50px; margin-bottom:.9rem;
}
.section-title {
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.5vw,2.5rem);
  font-weight:700; color:var(--navy); line-height:1.15; margin-bottom:.85rem;
}
.section-subtitle {
  font-size:.95rem; color:var(--gray-text);
  line-height:1.7; max-width:540px; font-weight:300;
}
.perks-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem; margin-top:2.5rem;
}
.perk-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.75rem 1.5rem;
  border:1px solid rgba(10,22,40,.06);
  transition:transform .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.perk-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--sun));
  transform:scaleX(0); transition:transform .35s; transform-origin:left;
}
.perk-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.perk-card:hover::before { transform:scaleX(1); }
.perk-icon {
  width:48px; height:48px; background:var(--gold-light);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.perk-icon svg { width:24px; height:24px; }
.perk-title {
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--navy); margin-bottom:.5rem;
}
.perk-desc { font-size:.875rem; color:var(--gray-text); line-height:1.6; }

/* ══════════════════════════════════════════
   JOB LISTINGS
══════════════════════════════════════════ */
.jobs-section { padding:5rem 5%; background:var(--white); }
.jobs-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:1.5rem; margin-bottom:2rem;
}

/* Filters */
.filters {
  display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(10,22,40,.07);
}
.filter-btn {
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  padding:.45rem 1rem; border-radius:50px; cursor:pointer;
  border:1.5px solid rgba(10,22,40,.14);
  background:transparent; color:var(--gray-text);
  transition:all .2s;
}
.filter-btn:hover { border-color:var(--gold); color:var(--gold-dark); }
.filter-btn.active {
  background:var(--gold); border-color:var(--gold);
  color:var(--navy); font-weight:600;
}

/* Search bar */
.search-wrap {
  position:relative; max-width:340px; width:100%;
}
.search-wrap svg {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--gray-text); pointer-events:none;
}
.search-wrap input {
  width:100%; padding:.65rem 1rem .65rem 2.4rem;
  border:1.5px solid rgba(10,22,40,.12); border-radius:50px;
  font-family:var(--font-body); font-size:.88rem; color:var(--navy);
  background:var(--white); outline:none; transition:border-color .2s;
}
.search-wrap input:focus { border-color:var(--gold); }
.search-wrap input::placeholder { color:var(--gray-mid); }

/* Jobs list */
#jobsList { display:flex; flex-direction:column; gap:1rem; }
.no-results {
  text-align:center; padding:3rem 1rem;
  color:var(--gray-text); font-size:.95rem; display:none;
}

.job-card {
  background:var(--white);
  border:1.5px solid rgba(10,22,40,.07);
  border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  transition:border-color .25s, box-shadow .25s;
}
.job-card:hover { border-color:var(--gold); box-shadow:var(--shadow-card); }
.job-card.open .job-body { display:block; }
.job-card.open .chevron { transform:rotate(180deg); }

.job-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem 1.6rem;
}
.job-left { display:flex; align-items:center; gap:1rem; flex:1; min-width:0; }
.job-dept-icon {
  width:44px; height:44px; flex-shrink:0;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.job-dept-icon svg { width:22px; height:22px; }
.job-title-wrap { min-width:0; }
.job-title {
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.job-meta-row {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.3rem;
}
.job-tag {
  font-size:.72rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.22rem .65rem; border-radius:50px;
}
.tag-full { background:var(--green-light); color:var(--green); }
.tag-part { background:var(--gold-light);  color:var(--gold-dark); }
.tag-intern { background:#EEF2FF;           color:#4B5ABF; }
.tag-contract { background:#FFF3E0;         color:#E65100; }

.job-location {
  font-size:.8rem; color:var(--gray-text);
  display:flex; align-items:center; gap:4px;
}
.job-location svg { width:12px; height:12px; }

.job-right { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.job-exp {
  font-size:.8rem; color:var(--gray-text); white-space:nowrap;
}
.chevron {
  width:20px; height:20px; color:var(--gray-mid);
  transition:transform .3s; flex-shrink:0;
}

/* Job body */
.job-body {
  display:none;
  border-top:1px solid rgba(10,22,40,.06);
  padding:1.5rem 1.6rem;
  background:var(--gray-light);
}
.job-desc {
  font-size:.9rem; color:var(--gray-text); line-height:1.75;
  margin-bottom:1.25rem;
}
.job-section-title {
  font-family:var(--font-display); font-size:.88rem; font-weight:600;
  color:var(--navy); margin-bottom:.6rem; text-transform:uppercase;
  letter-spacing:.06em;
}
.job-list {
  list-style:none; margin-bottom:1.25rem;
}
.job-list li {
  font-size:.875rem; color:var(--gray-text); line-height:1.6;
  padding:.25rem 0; display:flex; gap:8px;
}
.job-list li::before {
  content:''; display:block; width:6px; height:6px;
  background:var(--gold); border-radius:50%; margin-top:8px; flex-shrink:0;
}
.job-footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-top:1.5rem;
  padding-top:1.25rem; border-top:1px solid rgba(10,22,40,.07);
}
.job-salary {
  font-size:.85rem; color:var(--gray-text);
  display:flex; align-items:center; gap:6px;
}
.job-salary strong { color:var(--navy); font-weight:500; }
.btn-apply {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:var(--white);
  font-family:var(--font-body); font-size:.88rem; font-weight:500;
  padding:.65rem 1.5rem; border-radius:50px; border:none;
  cursor:pointer; text-decoration:none;
  transition:background .2s, transform .2s;
}
.btn-apply:hover { background:var(--navy-light); transform:translateY(-1px); }
.btn-apply svg { width:14px; height:14px; }

/* ══════════════════════════════════════════
   APPLICATION MODAL
══════════════════════════════════════════ */
.modal-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(10,22,40,.6); backdrop-filter:blur(4px);
  z-index:2000; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-backdrop.open { display:flex; }
.modal {
  background:var(--white); border-radius:var(--radius);
  width:100%; max-width:600px; max-height:90vh;
  overflow-y:auto; position:relative;
  animation:slideUp .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(30px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.modal-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; padding:1.75rem 1.75rem 1.25rem;
  border-bottom:1px solid rgba(10,22,40,.07);
  position:sticky; top:0; background:var(--white); z-index:10;
}
.modal-title {
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:var(--navy); line-height:1.2;
}
.modal-subtitle { font-size:.82rem; color:var(--gray-text); margin-top:.25rem; }
.modal-close {
  width:34px; height:34px; border-radius:50%; background:var(--gray-light);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s;
}
.modal-close:hover { background:var(--gray-mid); }
.modal-close svg { width:16px; height:16px; }
.modal-body { padding:1.5rem 1.75rem 1.75rem; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:.1rem; }
.form-group.full { grid-column:1/-1; }
.form-group label {
  display:block; font-size:.78rem; font-weight:500;
  color:var(--gray-text); margin-bottom:.4rem; letter-spacing:.04em;
}
.form-group label .req { color:var(--red); margin-left:2px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:.7rem 1rem;
  background:var(--gray-light); border:1.5px solid rgba(10,22,40,.1);
  border-radius:var(--radius-sm); font-family:var(--font-body);
  font-size:.88rem; color:var(--navy); outline:none; transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--gold); background:var(--white); }
.form-group textarea { resize:vertical; min-height:90px; }

/* File upload */
.file-upload-label {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.25rem 1rem;
  border:2px dashed rgba(10,22,40,.15); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .2s, background .2s;
  text-align:center;
}
.file-upload-label:hover { border-color:var(--gold); background:var(--gold-light); }
.file-upload-label svg { width:24px; height:24px; color:var(--gold-dark); }
.file-upload-text {
  font-size:.82rem; color:var(--gray-text); line-height:1.4;
}
.file-upload-text strong { color:var(--navy); }
#resumeInput { display:none; }
.file-name {
  font-size:.78rem; color:var(--green);
  margin-top:.25rem; font-weight:500;
}

/* Progress bar */
.form-progress { margin-bottom:1.5rem; }
.progress-steps {
  display:flex; gap:0; margin-bottom:.75rem;
}
.progress-step {
  flex:1; height:4px; background:rgba(10,22,40,.1);
  border-radius:2px; margin-right:4px; transition:background .4s;
}
.progress-step.done { background:var(--gold); }
.progress-label {
  font-size:.75rem; color:var(--gray-text);
}

.modal-actions {
  display:flex; gap:.75rem; justify-content:flex-end;
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid rgba(10,22,40,.07);
}
.btn-back {
  padding:.7rem 1.4rem; border-radius:50px;
  border:1.5px solid rgba(10,22,40,.15);
  background:transparent; color:var(--navy);
  font-family:var(--font-body); font-size:.88rem;
  cursor:pointer; transition:all .2s;
}
.btn-back:hover { border-color:var(--navy); background:var(--gray-light); }
.btn-next {
  display:inline-flex; align-items:center; gap:6px;
  padding:.7rem 1.6rem; border-radius:50px;
  background:var(--gold); color:var(--navy);
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  border:none; cursor:pointer; transition:all .2s;
}
.btn-next:hover { background:var(--sun); }
.btn-next svg { width:14px; height:14px; }

/* Success state */
.success-screen {
  display:none; text-align:center; padding:2rem 1rem;
}
.success-icon {
  width:72px; height:72px; background:var(--green-light);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
}
.success-icon svg { width:36px; height:36px; color:var(--green); }
.success-title {
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  color:var(--navy); margin-bottom:.75rem;
}
.success-desc { font-size:.9rem; color:var(--gray-text); line-height:1.7; }
.success-ref {
  display:inline-block; margin-top:1rem;
  background:var(--gold-light); color:var(--gold-dark);
  font-size:.82rem; font-weight:600;
  padding:.4rem 1rem; border-radius:50px;
  letter-spacing:.04em;
}

/* ══════════════════════════════════════════
   STATS BANNER
══════════════════════════════════════════ */
.stats-banner {
  background:var(--gray-text); padding:3rem 5%;
}
.stats-inner {
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:2rem;
  max-width:900px; margin:0 auto; text-align:center;
}
.stat-item .stat-number {
  font-family:var(--font-display); font-size:2.2rem; font-weight:700;
  color:var(--gold); line-height:1;
}
.stat-item .stat-label {
  font-size:.8rem; color:rgba(250,250,248,.5);
  margin-top:.3rem; letter-spacing:.04em;
}

/* ══════════════════════════════════════════
   LIFE AT SOLARWATT
══════════════════════════════════════════ */
.life-section { padding:5rem 5%; background:var(--gray-light); }
.life-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem; margin-top:2.5rem;
}
.life-card {
  background:var(--white); border-radius:var(--radius);
  overflow:hidden; border:1px solid rgba(10,22,40,.06);
  transition:transform .3s;
}
.life-card:hover { transform:translateY(-4px); }
.life-card-img {
  height:160px; display:flex; align-items:center; justify-content:center;
  font-size:3.5rem;
}
.life-card-body { padding:1.25rem; }
.life-card-title {
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--navy); margin-bottom:.4rem;
}
.life-card-text { font-size:.85rem; color:var(--gray-text); line-height:1.6; }

/* ══════════════════════════════════════════
   PROCESS
══════════════════════════════════════════ */
.process-section { padding:5rem 5%; background:var(--white); }
.process-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem; margin-top:2.5rem; position:relative;
}
.process-card {
  background:var(--gray-light); border-radius:var(--radius);
  padding:1.5rem 1.25rem; text-align:center;
  border:1px solid rgba(10,22,40,.06);
  position:relative;
}
.process-num {
  width:36px; height:36px; background:var(--gold);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  color:var(--navy); margin:0 auto .85rem;
}
.process-title {
  font-family:var(--font-display); font-size:.95rem; font-weight:600;
  color:var(--navy); margin-bottom:.4rem;
}
.process-desc { font-size:.82rem; color:var(--gray-text); line-height:1.55; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  background:var(--navy); color:rgba(250,250,248,.5);
  padding:2rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  font-size:.82rem;
}
footer a { color:var(--gold); text-decoration:none; }
footer a:hover { color:var(--sun); }
.footer-socials { display:flex; gap:.6rem; }
.footer-social {
  width:32px; height:32px; background:rgba(255,255,255,.06);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:rgba(250,250,248,.5); text-decoration:none; transition:all .2s;
}
.footer-social:hover { background:var(--gold); color:var(--navy); }
.footer-social svg { width:14px; height:14px; }

/* ══════════════════════════════════════════
   SCROLL ANIMATION
══════════════════════════════════════════ */
.fade-up {
  opacity:0; transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.stagger-1{transition-delay:.05s}
.stagger-2{transition-delay:.12s}
.stagger-3{transition-delay:.19s}
.stagger-4{transition-delay:.26s}
.stagger-5{transition-delay:.33s}
.stagger-6{transition-delay:.40s}

/* Toast */
.toast {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:var(--navy); color:var(--white);
  padding:.9rem 1.4rem; border-radius:var(--radius-sm);
  font-size:.88rem; box-shadow:var(--shadow);
  border-left:4px solid var(--gold);
  transform:translateY(80px); opacity:0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1); z-index:9999;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:768px){
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .careers-hero { padding:110px 5% 60px; }
  .jobs-header { flex-direction:column; align-items:flex-start; }
  .search-wrap { max-width:100%; }
  .job-header { padding:1rem 1.1rem; flex-wrap:wrap; }
  .job-right .job-exp { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
  .modal-body { padding:1.25rem 1.25rem 1.5rem; }
  .stats-inner { gap:1.5rem; }
  footer { flex-direction:column; align-items:flex-start; }
}
@media(max-width:480px){
  section, .why-join, .jobs-section, .life-section, .process-section { padding:3.5rem 1.25rem; }
  nav { padding:1rem 1.25rem; }
  .perks-grid { grid-template-columns:1fr; }
  .modal { max-height:100vh; border-radius:var(--radius) var(--radius) 0 0; }
  .modal-backdrop { align-items:flex-end; padding:0; }
}