/* ============================================================
   DevHive — CAREERS (dark "Aurora Control" — consistent w/ site)
   Loaded AFTER careers.css (which still powers careers-admin).
   Same structure as light version, fully dark. Job system kept.
   Scoped to .careers.
   ============================================================ */

.careers{
  --bg:#0b1422;--bg2:#0e1a2c;
  --panel:rgba(255,255,255,.04);--panel2:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.09);--line3:rgba(255,255,255,.14);
  --txt:#9fb2c6;--txt-dim:#728aa1;--vio:#7b6cff;--teal:#00bdc3;--blue:#0277d4;
  --mono:"JetBrains Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,1,.36,1);
}
body.careers{background:var(--bg);color:var(--txt)}
.careers main{position:relative;z-index:1}
.careers::before,.careers::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
.careers::before{background:
  radial-gradient(900px 620px at 10% -8%,rgba(0,189,195,.15),transparent 60%),
  radial-gradient(840px 600px at 94% 4%,rgba(123,108,255,.14),transparent 60%),
  radial-gradient(1000px 760px at 50% 120%,rgba(2,119,212,.12),transparent 60%),
  linear-gradient(180deg,#0b1422,#0a1322 60%,#0b1422);
  animation:crDrift 28s ease-in-out infinite alternate}
.careers::after{background-image:linear-gradient(rgba(122,170,200,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 28%,#000,transparent 85%);mask-image:radial-gradient(ellipse 75% 60% at 50% 28%,#000,transparent 85%);opacity:.4}
@keyframes crDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-20px,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.careers::before{animation:none}}

.careers .section{position:relative;z-index:1;padding:100px 0}
.careers .section.tight{padding:70px 0}
.careers .section.alt{background:transparent}
.careers h1,.careers h2,.careers h3,.careers h4{color:#f3f8fc}
.careers .title{color:#fff}
.careers .lead{color:var(--txt)}
.careers .center{text-align:center}
.careers .sec-head{max-width:760px;margin:0 auto}
.careers .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7ff0e6;margin-bottom:16px}
.careers .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--vio))}
.careers .eyebrow.light{color:#7ff0e6}
.careers .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.careers .reveal.in{opacity:1;transform:none}
.careers .reveal.d1{transition-delay:.1s}.careers .reveal.d2{transition-delay:.2s}.careers .reveal.d3{transition-delay:.3s}

/* header light-glass on scroll (consistent with site) */
.careers .site-header.scrolled{background:rgba(8,14,24,.94);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06)}
.careers .site-header.scrolled .nav .nav-links>li>a{color:#e7f1f8}
.careers .site-header.scrolled .nav-links>li>a:hover,.careers .site-header.scrolled .nav-links>li>a.active{color:var(--teal)}
.careers .site-header.scrolled .brand .wordmark b{color:#fff}
.careers .site-header.scrolled .brand .wordmark span{color:var(--sky)}
.careers .site-header.scrolled .burger span{background:#fff}

/* ============================================================
   HERO — dark, photo collage + floating stats
   ============================================================ */
.careers .hero{position:relative;overflow:hidden;background:transparent}
.careers .hero::after{display:none}
.careers .hero .glow-orb,.careers .hero .scene{display:none}
.careers .hero-pad{position:relative;z-index:2;padding-top:158px;padding-bottom:96px}
.careers .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
.careers .hero .crumb{font:600 12px var(--mono);letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:18px}
.careers .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;background:var(--panel);border:1px solid var(--line2);color:#cfe0ea;font:600 13px var(--body);margin-bottom:22px}
.careers .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#3ee68f;box-shadow:0 0 0 4px rgba(62,230,143,.18)}
.careers .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,5.6vw,64px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.careers .hero h1 .grad-text{background:linear-gradient(120deg,#9ff7ee,#03aae1 50%,#9b8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.careers .hero .lead{font-size:18px;line-height:1.65;color:rgba(225,238,247,.86);max-width:52ch;margin:0 0 30px}
.careers .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.careers .btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line3)}
.careers .btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-3px)}

.cr-collage{position:relative;height:480px}
.cr-collage .ph{position:absolute;border-radius:20px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 70px -24px rgba(0,0,0,.7)}
.cr-collage .ph img{display:block;width:100%;height:100%;object-fit:cover}
.cr-collage .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent,rgba(0,189,195,.14))}
.cr-collage .p1{width:58%;height:62%;left:0;top:0;z-index:2;animation:crFloatA 9s ease-in-out infinite}
.cr-collage .p2{width:46%;height:50%;right:0;top:14%;z-index:3;animation:crFloatB 11s ease-in-out infinite}
.cr-collage .p3{width:50%;height:44%;left:12%;bottom:0;z-index:4;animation:crFloatA 10s ease-in-out infinite reverse}
@keyframes crFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes crFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.cr-collage .stat{position:absolute;z-index:5;background:rgba(8,15,26,.82);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:15px;padding:13px 17px;box-shadow:0 22px 48px -16px rgba(0,0,0,.7);display:flex;align-items:center;gap:11px;animation:crFloatB 8s ease-in-out infinite}
.cr-collage .stat .si{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,var(--teal),var(--blue));color:#fff}
.cr-collage .stat .si svg{width:19px;height:19px}
.cr-collage .stat b{display:block;font:800 17px var(--display);color:#fff;line-height:1}
.cr-collage .stat span{display:block;font:600 11px var(--mono);color:var(--txt-dim);margin-top:3px}
.cr-collage .st1{left:-22px;top:42%;animation-delay:.6s}
.cr-collage .st2{right:-14px;bottom:8%;animation-delay:1.8s}
@media(max-width:980px){.careers .hero-grid{grid-template-columns:1fr;gap:46px}.cr-collage{max-width:540px;margin:0 auto}}
@media(max-width:560px){.cr-collage{height:380px}.cr-collage .stat{display:none}}

/* ============================================================
   PERKS & BENEFITS (dark cards)
   ============================================================ */
.careers .perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.careers .perk{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:28px 24px;transition:transform .4s var(--ease),border-color .4s,background .4s}
.careers .perk::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--teal),var(--vio));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.careers .perk:hover{transform:translateY(-6px);border-color:rgba(0,189,195,.4);background:rgba(255,255,255,.05)}
.careers .perk:hover::before{transform:scaleX(1)}
.careers .perk .pk-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,189,195,.18),rgba(123,108,255,.16));color:#7ff0e6;border:1px solid rgba(127,240,230,.22);margin-bottom:16px}
.careers .perk .pk-ic svg{width:24px;height:24px}
.careers .perk h3{color:#fff;font-size:15.5px;margin:0 0 6px;font-family:var(--display)}
.careers .perk p{color:var(--txt);font-size:13px;line-height:1.55;margin:0}
@media(max-width:980px){.careers .perks-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.careers .perks-grid{grid-template-columns:1fr}}

/* ============================================================
   CULTURE split (dark)
   ============================================================ */
.careers .cul2{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.careers .cul2-media{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.careers .cul2-media img{width:100%;display:block}
.careers .cul2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent,rgba(0,189,195,.14))}
.careers .cul2 ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.careers .cul2 li{position:relative;padding-left:32px;color:#dbeaf3;font-size:15.5px;line-height:1.5;font-weight:500}
.careers .cul2 li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:linear-gradient(140deg,var(--teal),var(--vio))}
.careers .cul2 li::after{content:"";position:absolute;left:7px;top:6px;width:6px;height:10px;border:2px solid #05121d;border-top:0;border-left:0;transform:rotate(45deg)}
@media(max-width:900px){.careers .cul2{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   HIRING rail (dark)
   ============================================================ */
.careers .hire2{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:54px}
.careers .hire2::before{content:"";position:absolute;left:7%;right:7%;top:34px;height:2px;background:linear-gradient(90deg,transparent,var(--teal),var(--vio),transparent)}
.careers .h2step{position:relative;text-align:center}
.careers .h2step .hn{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:#fff;background:#0a1726;border:2px solid rgba(0,189,195,.5);box-shadow:0 0 0 6px var(--bg),0 0 24px rgba(0,189,195,.25)}
.careers .h2step h3{color:#fff;font-size:16px;margin:0 0 7px;font-family:var(--display)}
.careers .h2step p{color:var(--txt);font-size:13px;line-height:1.55;margin:0 auto;max-width:22ch}
@media(max-width:860px){.careers .hire2{grid-template-columns:1fr 1fr;gap:30px 18px}.careers .hire2::before{display:none}}
@media(max-width:460px){.careers .hire2{grid-template-columns:1fr}}

/* ============================================================
   OPEN ROLES (live job system) — dark
   ============================================================ */
.careers #roles{background:transparent}
.careers .jobs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:34px 0 22px}
.careers .jobs-count{color:#cfe0ea;font:600 14px var(--mono)}
.careers .jobs-count b{color:#fff}
.careers .job-filters{display:flex;flex-wrap:wrap;gap:9px}
.careers .job-filters .jf{font:700 12px var(--mono);color:#bcd0e0;background:var(--panel);border:1px solid var(--line2);border-radius:100px;padding:8px 15px;cursor:pointer;transition:all .3s}
.careers .job-filters .jf:hover{border-color:rgba(0,189,195,.4);color:#fff}
.careers .job-filters .jf.on{background:linear-gradient(120deg,var(--teal),var(--vio));color:#05241f;border-color:transparent}
.careers .job-list{display:flex;flex-direction:column;gap:14px}
.careers .job{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:24px 26px;transition:transform .4s var(--ease),border-color .4s,background .4s}
.careers .job:hover{transform:translateY(-4px);border-color:rgba(0,189,195,.4);background:rgba(255,255,255,.05)}
.careers .job .j-dept{display:inline-block;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9ff7ee;background:rgba(0,189,195,.14);border:1px solid rgba(0,189,195,.34);padding:4px 11px;border-radius:100px;margin-bottom:10px}
.careers .job h3{color:#fff;font-size:19px;margin:0 0 8px;font-family:var(--display)}
.careers .job .j-meta{display:flex;flex-wrap:wrap;gap:8px}
.careers .job .j-meta span{font:600 12px var(--mono);color:#bcd0e0;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:100px;padding:5px 12px}
.careers .job .j-cta{flex:none}
.careers .jobs-empty{text-align:center;background:var(--panel);border:1px solid var(--line2);border-radius:22px;padding:56px 30px}
.careers .jobs-empty .ei{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,189,195,.18),rgba(123,108,255,.16));color:#7ff0e6;border:1px solid rgba(127,240,230,.22)}
.careers .jobs-empty .ei svg{width:30px;height:30px}
.careers .jobs-empty h3{color:#fff;font-size:21px;margin:0 0 10px}
.careers .jobs-empty p{color:var(--txt);max-width:440px;margin:0 auto;font-size:15px;line-height:1.6}
.careers #jobsFootNote{color:var(--txt-dim)!important}
.careers #jobsFootNote a{color:#7ff0e6!important}
/* modal dark */
.careers .job-modal{position:fixed;inset:0;z-index:2000;display:none}
.careers .job-modal[aria-hidden="false"]{display:block}
.careers .jm-back{position:absolute;inset:0;background:rgba(2,6,12,.7);backdrop-filter:blur(4px)}
.careers .jm-panel{position:relative;z-index:2;max-width:620px;margin:6vh auto;max-height:88vh;overflow-y:auto;background:#0a1320;border:1px solid var(--line2);border-radius:24px;padding:38px 36px;box-shadow:0 50px 120px -30px rgba(0,0,0,.8)}
.careers .jm-close{position:absolute;right:18px;top:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:#cfe0ea;font-size:22px;line-height:1;cursor:pointer;transition:all .3s}
.careers .jm-close:hover{border-color:var(--teal);color:#fff}
.careers .jm-dept{display:inline-block;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9ff7ee;background:rgba(0,189,195,.14);border:1px solid rgba(0,189,195,.34);padding:4px 11px;border-radius:100px;margin-bottom:10px}
.careers .jm-panel h2{color:#fff;font-size:28px;margin:0 0 14px}
.careers .jm-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.careers .jm-meta span{font:600 12px var(--mono);color:#bcd0e0;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:100px;padding:6px 13px}
.careers .jm-section{margin-bottom:22px}
.careers .jm-section h4{color:#fff;font-size:15px;margin:0 0 10px;font-family:var(--display)}
.careers .jm-section p{color:var(--txt);font-size:14.5px;line-height:1.7;margin:0}
.careers .jm-section ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.careers .jm-section li{position:relative;padding-left:24px;color:#cfe0ea;font-size:14px;line-height:1.55}
.careers .jm-section li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:linear-gradient(120deg,var(--teal),var(--vio))}
.careers .jm-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.careers .jm-link{background:none;border:0;color:#7ff0e6;font-weight:700;font-size:14px;cursor:pointer;padding:0;margin-bottom:14px}
.careers .jm-tick{width:64px;height:64px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:rgba(0,189,195,.16);color:#5ff0df;border:1px solid rgba(0,189,195,.4)}
.careers .jm-tick svg{width:30px;height:30px}
.careers .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.careers .fld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.careers .fld label{color:#cfe0ea;font:600 13px var(--body)}
.careers .fld input,.careers .fld textarea{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;color:#eaf3fa;font-size:14px;font-family:var(--body);transition:border-color .3s}
.careers .fld input::placeholder,.careers .fld textarea::placeholder{color:#5d7588}
.careers .fld input:focus,.careers .fld textarea:focus{outline:none;border-color:var(--teal)}
.careers .fld textarea{min-height:110px;resize:vertical}
.careers .cv-up{display:flex;align-items:center;gap:12px;cursor:pointer;background:rgba(255,255,255,.03);border:1px dashed var(--line3);border-radius:12px;padding:12px 14px;transition:border-color .3s}
.careers .cv-up:hover{border-color:var(--teal)}
.careers .cv-up input[type=file]{display:none}
.careers .cv-up .cvi{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(0,189,195,.14);color:#7ff0e6;border:1px solid rgba(0,189,195,.25)}
.careers .cv-up .cvi svg{width:18px;height:18px}
.careers .cv-up .cvt b{display:block;color:#fff;font-size:13.5px}
.careers .cv-up .cvt small{display:block;color:var(--txt-dim);font:600 11px var(--mono);margin-top:2px}
.careers .ap-err{color:#ff8b8b;font-size:13.5px;margin:0}
@media(max-width:560px){.careers .fld-row{grid-template-columns:1fr}.careers .jm-panel{padding:30px 22px;margin:4vh auto}}

/* ============================================================
   TESTIMONIALS (dark)
   ============================================================ */
.careers .t3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.careers .tq{border-radius:20px;border:1px solid var(--line2);background:var(--panel);padding:28px 26px}
.careers .tq .qm{font-family:var(--display);font-size:54px;line-height:.5;color:rgba(127,240,230,.3);height:26px}
.careers .tq p{color:#dbeaf3;font-size:15px;line-height:1.6;margin:0 0 20px}
.careers .tq .who{display:flex;align-items:center;gap:12px}
.careers .tq .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line3)}
.careers .tq .who b{display:block;color:#fff;font-size:14px}
.careers .tq .who span{display:block;color:var(--txt-dim);font:600 11.5px var(--mono);margin-top:2px}
@media(max-width:860px){.careers .t3{grid-template-columns:1fr}}

/* ============================================================
   CTA — aurora band (dark, matches site)
   ============================================================ */
.careers .cta3{position:relative;overflow:hidden;border-radius:30px;padding:70px 40px;text-align:center;background:linear-gradient(160deg,rgba(0,189,195,.12),rgba(123,108,255,.12)),#0e1a2c;border:1px solid var(--line3)}
.careers .cta3::before{content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,transparent,rgba(0,189,195,.18),transparent 35%,rgba(123,108,255,.18),transparent 70%);animation:crCtaSpin 18s linear infinite}
@keyframes crCtaSpin{to{transform:rotate(360deg)}}
.careers .cta3>*{position:relative;z-index:2}
.careers .cta3 h2{color:#fff;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin:14px auto 0}
.careers .cta3 p{color:#bcd0e0;max-width:56ch;margin:16px auto 0;font-size:17px}
.careers .cta3 .hero-cta{justify-content:center;margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.careers .cta3 .btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.4);background:transparent}
.careers .cta3 .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
@media(prefers-reduced-motion:reduce){.careers .cta3::before{animation:none}}