/* salary-guide.css — AI Salary Calculator
   Uses tokens from style.css: --bg --pink --purple --teal --fh --fb */

/* ════════ HERO ════════ */
.sg-hero{position:relative;padding:120px 24px 80px;overflow:hidden;text-align:center;
  background:radial-gradient(ellipse at top,#1a0a2e 0%,var(--bg) 60%)}
.sg-hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(123,63,228,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(123,63,228,.08) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.sg-hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none}
.sg-glow-a{background:var(--purple);top:-100px;left:-100px}
.sg-glow-b{background:var(--pink);bottom:-150px;right:-100px}
.sg-hero-inner{position:relative;max-width:900px;margin:0 auto;z-index:2}
.sg-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;
  background:rgba(123,63,228,.12);border:1px solid rgba(123,63,228,.4);border-radius:100px;
  font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--teal);margin-bottom:24px}
.sg-pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);
  animation:sgPulse 1.6s infinite}
@keyframes sgPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sg-h1{font-family:var(--fh);font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.05;
  margin:0 0 20px;color:var(--white);letter-spacing:-1px}
.sg-grad{background:linear-gradient(90deg,var(--pink),var(--purple) 50%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sg-sub{font-size:18px;color:var(--gray2);max-width:680px;margin:0 auto 40px;line-height:1.6}
.sg-sub strong{color:var(--white)}
.sg-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:700px;margin:0 auto}
.sg-trust>div{padding:20px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px}
.sg-trust strong{display:block;font-family:var(--fh);font-size:32px;font-weight:800;
  background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;color:transparent}
.sg-trust span{font-size:12px;color:var(--gray3);text-transform:uppercase;letter-spacing:.5px}

/* ════════ CALCULATOR ════════ */
.sg-calc-wrap{padding:40px 24px 80px;display:flex;justify-content:center}
.sg-calc{width:100%;max-width:780px;background:linear-gradient(160deg,#10101e,#0c0c1a);
  border:1px solid var(--border2);border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(123,63,228,.15),0 0 0 1px rgba(255,45,107,.08)}
.sg-calc-head{padding:24px 32px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sg-calc-badge{font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:1.5px;
  color:var(--teal);padding:6px 12px;background:rgba(0,229,195,.08);
  border:1px solid rgba(0,229,195,.3);border-radius:6px}
.sg-progress{flex:1;min-width:120px;height:6px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.sg-progress-bar{height:100%;width:20%;background:linear-gradient(90deg,var(--purple),var(--pink),var(--teal));
  border-radius:100px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(255,45,107,.5)}
.sg-step-label{font-size:13px;color:var(--gray3);font-weight:500}
.sg-step-label span{color:var(--white);font-weight:700}

.sg-stage{padding:48px 32px;min-height:340px}
.sg-q{font-family:var(--fh);font-size:28px;font-weight:700;color:var(--white);
  margin:0 0 32px;line-height:1.3;letter-spacing:-.5px}
.sg-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sg-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;background:rgba(255,255,255,.025);border:1px solid var(--border2);
  border-radius:14px;color:var(--white);font-family:var(--fb);font-size:15px;font-weight:500;
  text-align:left;cursor:pointer;transition:all .25s}
.sg-opt span{color:var(--gray3);transition:all .25s}
.sg-opt:hover{background:rgba(123,63,228,.1);border-color:var(--purple);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(123,63,228,.2)}
.sg-opt:hover span{color:var(--teal);transform:translateX(4px)}

.sg-calc-foot{padding:20px 32px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.sg-btn-ghost{padding:10px 18px;background:transparent;border:1px solid var(--border2);
  border-radius:8px;color:var(--gray2);font-family:var(--fb);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.sg-btn-ghost:hover:not(:disabled){border-color:var(--pink);color:var(--white)}
.sg-btn-ghost:disabled{opacity:.3;cursor:not-allowed}
.sg-ai-status{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gray3)}
.sg-ai-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px var(--teal);animation:sgPulse 1.5s infinite}

/* ════════ RESULT ════════ */
.sg-result{animation:sgFade .5s ease}
@keyframes sgFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sg-result-tag{display:inline-block;padding:8px 16px;background:rgba(0,229,195,.1);
  border:1px solid rgba(0,229,195,.4);border-radius:100px;font-size:12px;font-weight:700;
  color:var(--teal);letter-spacing:.5px;margin-bottom:20px}
.sg-result-title{font-family:var(--fh);font-size:42px;font-weight:800;margin:0 0 12px;
  background:linear-gradient(135deg,var(--white),var(--pink));-webkit-background-clip:text;color:transparent;letter-spacing:-1px}
.sg-result-bio{color:var(--gray2);font-size:16px;line-height:1.6;margin:0 0 32px;max-width:560px}
.sg-result-bands{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.sg-band{padding:24px;border-radius:16px;border:1px solid var(--border2)}
.sg-band-usa{background:rgba(255,255,255,.025)}
.sg-band-mr{background:linear-gradient(160deg,rgba(255,45,107,.08),rgba(123,63,228,.08));
  border-color:rgba(255,45,107,.3);position:relative}
.sg-band-l{font-size:11px;font-weight:700;color:var(--gray3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.sg-band-v{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--white);line-height:1.1}
.sg-band-mr .sg-band-v{background:linear-gradient(90deg,var(--pink),var(--teal));-webkit-background-clip:text;color:transparent}
.sg-band-s{font-size:12px;color:var(--gray3);margin-top:6px}
.sg-result-cta{display:flex;gap:12px;flex-wrap:wrap}
.sg-cta-primary{flex:1;min-width:220px;padding:16px 28px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--pink),var(--purple));color:var(--white);
  font-family:var(--fb);font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 12px 32px rgba(255,45,107,.35);transition:transform .2s}
.sg-cta-primary:hover{transform:translateY(-2px)}
.sg-cta-ghost{padding:16px 24px;background:transparent;border:1px solid var(--border2);
  border-radius:12px;color:var(--gray2);font-family:var(--fb);font-weight:600;cursor:pointer;transition:all .2s}
.sg-cta-ghost:hover{border-color:var(--teal);color:var(--white)}

/* ════════ ROLES PREVIEW ════════ */
.sg-roles{padding:80px 24px;max-width:1200px;margin:0 auto;text-align:center}
.sg-roles h2{font-family:var(--fh);font-size:clamp(32px,4vw,48px);font-weight:800;margin:0 0 12px;color:var(--white)}
.sg-roles-sub{color:var(--gray2);font-size:16px;margin:0 0 48px}
.sg-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.sg-role-cat{padding:28px;background:linear-gradient(160deg,#10101e,#0c0c1a);
  border:1px solid var(--border);border-radius:18px;transition:all .3s}
.sg-role-cat:hover{border-color:rgba(123,63,228,.4);transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(123,63,228,.15)}
.sg-role-cat h3{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--white);
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.sg-role-cat h3 span{font-size:11px;color:var(--teal);font-weight:600;margin-left:6px}
.sg-role-cat ul{list-style:none;padding:0;margin:0}
.sg-role-cat li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;font-size:13px;color:var(--gray2);border-bottom:1px dashed rgba(255,255,255,.04)}
.sg-role-cat li:last-child{border-bottom:none}
.sg-role-cat em{font-style:normal;font-weight:700;font-size:12px;
  background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;color:transparent}

/* ════════ RESPONSIVE ════════ */
@media(max-width:768px){
  .sg-hero{padding:90px 20px 60px}
  .sg-trust{grid-template-columns:repeat(2,1fr);gap:14px}
  .sg-stage{padding:32px 22px;min-height:auto}
  .sg-q{font-size:22px;margin-bottom:24px}
  .sg-opts,.sg-result-bands,.sg-role-grid{grid-template-columns:1fr}
  .sg-calc-head{padding:18px 22px}
  .sg-calc-foot{padding:16px 22px}
  .sg-result-title{font-size:32px}
}