:root{
  --career-bg:#06111d;
  --career-bg-2:#0a2034;
  --career-surface:rgba(10,27,43,.84);
  --career-surface-2:rgba(13,33,52,.92);
  --career-line:rgba(147,197,253,.18);
  --career-line-strong:rgba(251,191,36,.32);
  --career-text:#ebf4fc;
  --career-muted:#a9bfd5;
  --career-soft:#d8e7f5;
  --career-accent:#fbbf24;
  --career-accent-2:#818cf8;
  --career-success:#22c55e;
  --career-shadow:0 28px 60px rgba(2,8,23,.42);
  --career-radius-lg:28px;
  --career-radius-md:18px;
  --career-radius-sm:14px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body.career-guide-page{
  margin:0;
  font-family:"Manrope",sans-serif;
  color:var(--career-text);
  min-height:100vh;
  background:
    radial-gradient(960px 520px at 92% -8%, rgba(251,191,36,.11), transparent 64%),
    radial-gradient(760px 440px at -12% 16%, rgba(129,140,248,.11), transparent 60%),
    linear-gradient(155deg, var(--career-bg) 0%, #0b1d31 42%, var(--career-bg-2) 100%);
}

.career-guide-page a{color:inherit;text-decoration:none}

.career-guide-shell{
  max-width:1280px;
  margin:0 auto;
  padding:18px 16px 36px;
}

.career-topbar{
  position:sticky;
  top:10px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border:1px solid var(--career-line);
  border-radius:20px;
  background:rgba(7,21,35,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 36px rgba(2,8,23,.24);
}

.career-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-shrink:0;
}

.career-brand img{
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.32);
}

.career-brand span{
  font-family:"Sora",sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
}

.career-nav{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.career-nav a{
  color:#bed2e5;
  font-size:.92rem;
  padding:8px 10px;
  border-radius:10px;
  transition:background .2s ease, color .2s ease;
}

.career-nav a:hover,
.career-nav a.active{
  color:#f6fbff;
  background:rgba(147,197,253,.14);
}

.career-topbar-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(129,140,248,.14));
  border:1px solid rgba(251,191,36,.24);
  color:#fff5d0;
  font-size:.86rem;
  font-weight:800;
}

.career-hero{
  margin-top:24px;
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, .85fr);
  gap:18px;
  padding:30px;
  border-radius:var(--career-radius-lg);
  border:1px solid var(--career-line);
  background:
    radial-gradient(520px 260px at 86% 8%, rgba(251,191,36,.12), transparent 72%),
    linear-gradient(155deg, rgba(18,39,66,.94), rgba(10,24,39,.94));
  box-shadow:var(--career-shadow);
  position:relative;
  overflow:hidden;
}

.career-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.16), transparent 70%);
  pointer-events:none;
}

.hero-copy,
.hero-panel{position:relative;z-index:1}

.hero-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--career-muted);
  font-size:.83rem;
}

.hero-breadcrumbs a:hover{color:#fff}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(251,191,36,.11);
  border:1px solid rgba(251,191,36,.24);
  color:#ffe9ad;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--career-accent);
  box-shadow:0 0 0 0 rgba(251,191,36,.58);
  animation:careerPulse 1.7s infinite;
}

@keyframes careerPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.58)}
  50%{box-shadow:0 0 0 7px rgba(251,191,36,0)}
}

.hero-title{
  margin:16px 0 0;
  font-family:"Sora",sans-serif;
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.08;
  letter-spacing:.2px;
}

.hero-title span{
  background:linear-gradient(90deg, #fbbf24, #fde68a 50%, #a5b4fc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-intro{
  margin-top:14px;
  max-width:760px;
  color:var(--career-muted);
  font-size:1rem;
  line-height:1.72;
}

.hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.hero-chip{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(147,197,253,.16);
  color:var(--career-soft);
  font-size:.82rem;
  font-weight:700;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.guide-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:14px;
  font-size:.9rem;
  font-weight:800;
  transition:transform .2s ease, filter .2s ease, background .2s ease;
}

.guide-button:hover{transform:translateY(-2px)}

.guide-button.primary{
  color:#07111c;
  background:linear-gradient(135deg, #fbbf24, #fde68a);
  box-shadow:0 12px 26px rgba(251,191,36,.22);
}

.guide-button.secondary{
  color:#eef6fd;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(147,197,253,.18);
}

.guide-button.secondary:hover{background:rgba(147,197,253,.12)}

.hero-panel{
  align-self:stretch;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(147,197,253,.14);
  background:linear-gradient(180deg, rgba(8,22,35,.7), rgba(11,28,46,.88));
}

.hero-panel-label{
  color:#ffe9ad;
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-panel h2{
  margin:10px 0 0;
  font-family:"Sora",sans-serif;
  font-size:1.1rem;
}

.hero-points{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.hero-points li{
  padding:12px 13px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(147,197,253,.12);
  color:var(--career-soft);
  line-height:1.55;
  font-size:.92rem;
}

.career-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(260px, .65fr);
  gap:18px;
  margin-top:18px;
}

.guide-article,
.guide-sidebar{
  display:grid;
  gap:18px;
  align-content:start;
}

.guide-section,
.sidebar-card,
.next-guides,
.cta-card{
  border:1px solid var(--career-line);
  border-radius:24px;
  background:linear-gradient(175deg, rgba(11,28,47,.95), rgba(9,24,40,.94));
  box-shadow:0 18px 36px rgba(2,8,23,.24);
}

.guide-section{padding:24px}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffe4a1;
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.section-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--career-accent-2);
}

.guide-section h2{
  margin:10px 0 0;
  font-family:"Sora",sans-serif;
  font-size:1.5rem;
  line-height:1.2;
}

.guide-section p{
  margin:12px 0 0;
  color:var(--career-muted);
  line-height:1.76;
  font-size:.98rem;
}

.guide-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.guide-grid.two{grid-template-columns:repeat(2, minmax(0, 1fr))}

.mini-card{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(147,197,253,.14);
}

.mini-card.accent{
  background:linear-gradient(160deg, rgba(251,191,36,.10), rgba(129,140,248,.10));
  border-color:var(--career-line-strong);
}

.mini-card h3{
  margin:0;
  font-family:"Sora",sans-serif;
  font-size:1rem;
}

.mini-card p{
  margin-top:10px;
  font-size:.92rem;
}

.guide-list,
.check-list,
.link-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.guide-list li,
.check-list li{
  position:relative;
  padding-left:18px;
  color:var(--career-soft);
  line-height:1.65;
}

.guide-list li::before,
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--career-accent);
}

.guide-note{
  margin-top:18px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(34,197,94,.09);
  border:1px solid rgba(34,197,94,.16);
  color:#ddfce7;
  line-height:1.68;
}

.sidebar-card{padding:20px}

.sidebar-title{
  font-family:"Sora",sans-serif;
  font-size:1rem;
}

.sidebar-card p{
  margin:10px 0 0;
  color:var(--career-muted);
  line-height:1.7;
  font-size:.92rem;
}

.link-list a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(147,197,253,.12);
  color:var(--career-soft);
  font-weight:700;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.link-list a:hover{
  transform:translateY(-1px);
  border-color:rgba(251,191,36,.34);
  background:rgba(251,191,36,.07);
}

.cta-card{padding:24px}

.cta-card h2{
  margin:0;
  font-family:"Sora",sans-serif;
  font-size:1.45rem;
}

.cta-card p{
  margin:10px 0 0;
  color:var(--career-muted);
  line-height:1.72;
}

.next-guides{
  margin-top:18px;
  padding:22px;
}

.next-guides-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.next-guides-head h2{
  margin:0;
  font-family:"Sora",sans-serif;
  font-size:1.22rem;
}

.next-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.next-card{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(147,197,253,.14);
  transition:transform .2s ease, border-color .2s ease;
}

.next-card:hover{
  transform:translateY(-2px);
  border-color:rgba(251,191,36,.34);
}

.next-card-label{
  color:#ffe4a1;
  font-size:.74rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.next-card h3{
  margin:10px 0 0;
  font-family:"Sora",sans-serif;
  font-size:1rem;
}

.next-card p{
  margin:8px 0 0;
  color:var(--career-muted);
  line-height:1.65;
  font-size:.9rem;
}

.career-footer{
  margin-top:18px;
  text-align:center;
  color:var(--career-muted);
  font-size:.86rem;
}

@media(max-width:1040px){
  .career-hero,
  .career-layout{grid-template-columns:1fr}
}

@media(max-width:760px){
  .career-topbar{flex-wrap:wrap}
  .career-nav{justify-content:flex-start}
  .career-topbar-cta{width:100%;justify-content:center}
  .career-hero{padding:24px}
  .guide-grid.two{grid-template-columns:1fr}
}

@media(max-width:560px){
  .career-guide-shell{padding:14px 12px 28px}
  .career-topbar{top:8px;padding:12px}
  .career-brand span{font-size:.98rem}
  .hero-title{font-size:1.92rem}
  .guide-section,
  .sidebar-card,
  .next-guides,
  .cta-card{padding:20px}
  .hero-actions{flex-direction:column}
  .guide-button{width:100%}
}