/* ═══════════════════════════════════════════════════════════
   SkillSync — main.css
   Theme: Warm cream / terracotta — DM Serif Display + DM Sans
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root{
  --cream:#FAF7F2;--cream-d:#F2EDE4;--cream-m:#EDE5D8;
  --brown-dk:#2C1810;--brown-md:#5C3D2E;--brown-lt:#8A6552;
  --terra:#C17B4E;--terra-lt:#D4956A;--terra-pale:#F0DDD0;
  --rose:#C8908A;--rose-lt:#F0D8D0;--rose-pale:#FAF0EC;
  --green:#5A8C6B;--green-lt:#D5EDE0;
  --blue:#4A7FA5;--blue-lt:#D8EAF5;
  --red:#C0392B;--red-lt:#FDECEA;
  --border:#E2D5C8;--border-dk:#D0BFB0;
  --shadow-sm:0 1px 4px rgba(44,24,16,.06);
  --shadow-md:0 4px 16px rgba(44,24,16,.09);
  --shadow-lg:0 8px 36px rgba(44,24,16,.13);
  --shadow-xl:0 16px 56px rgba(44,24,16,.16);
  --r:14px;--r-sm:8px;--r-lg:20px;--r-xl:28px;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --t:.22s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--brown-dk);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hidden{display:none!important}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--border-dk);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--brown-lt)}

/* ── Container ──────────────────────────────────────────────── */
.container{max-width:1180px;margin:0 auto;padding:0 28px}

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:200;
  background:rgba(250,247,242,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t) var(--ease);
}
.navbar.scrolled{box-shadow:var(--shadow-md)}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:1.3rem;color:var(--brown-dk);
  text-decoration:none;transition:opacity var(--t);
}
.nav-brand:hover{opacity:.75}
.brand-hex{font-size:1.5rem;color:var(--terra)}
.nav-links{display:flex;gap:6px}
.nav-link{
  font-size:.875rem;font-weight:500;color:var(--brown-md);
  text-decoration:none;padding:6px 14px;border-radius:var(--r-sm);
  transition:all var(--t) var(--ease);
}
.nav-link:hover,.nav-link.active{color:var(--terra);background:var(--terra-pale)}
.nav-mobile-toggle{
  display:none;background:none;border:none;font-size:1.3rem;
  cursor:pointer;color:var(--brown-md);padding:4px 8px;
}
.nav-mobile-menu{
  padding:8px 28px 16px;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--border);
}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-mobile-toggle{display:block}
}

/* ── HERO (homepage) ────────────────────────────────────────── */
.hero{
  position:relative;padding:90px 28px 70px;text-align:center;
  overflow:hidden;background:var(--cream);
}
.hero-particles{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.particle{
  position:absolute;border-radius:50%;
  animation:float var(--dur,6s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  opacity:.35;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(180deg)}}
.hero-content{position:relative;max-width:820px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 18px;border-radius:99px;
  background:var(--terra-pale);border:1px solid var(--rose-lt);
  font-size:.78rem;font-weight:700;color:var(--terra);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:28px;
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--terra);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero-title{
  font-family:var(--serif);font-size:clamp(2.4rem,5.5vw,4rem);
  line-height:1.1;color:var(--brown-dk);margin-bottom:22px;letter-spacing:-.025em;
}
.hero-title em{font-style:italic;color:var(--terra)}
.hero-sub{
  font-size:1rem;color:var(--brown-md);max-width:600px;margin:0 auto 40px;
  font-weight:300;line-height:1.8;
}
.hero-method{
  display:flex;align-items:center;justify-content:center;gap:0;
  flex-wrap:wrap;gap:12px;
  background:var(--cream-d);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 28px;display:inline-flex;
}
.method-step{display:flex;align-items:center;gap:10px}
.method-num{
  font-family:var(--serif);font-size:1.1rem;color:var(--terra);
  line-height:1;
}
.method-text{font-size:.82rem;color:var(--brown-md);font-weight:500}
.method-arrow{color:var(--border-dk);font-size:1.1rem;margin:0 4px}
@media(max-width:600px){.method-arrow{display:none}}

/* ── UPLOAD SECTION ─────────────────────────────────────────── */
.upload-section{padding:0 0 60px}
.upload-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:36px;
}
@media(max-width:760px){.upload-grid{grid-template-columns:1fr}}

/* Cards */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.card:hover{box-shadow:var(--shadow-md)}

.card-num{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--terra);text-transform:uppercase;margin-bottom:8px;
}
.card-title{font-family:var(--serif);font-size:1.25rem;color:var(--brown-dk);margin-bottom:4px;font-weight:400}
.card-sub{font-size:.82rem;color:var(--brown-lt);margin-bottom:20px}

/* Drop Zone */
.drop-zone{
  border:2px dashed var(--border);border-radius:var(--r);
  padding:40px 24px;text-align:center;cursor:pointer;
  transition:all var(--t) var(--ease);background:var(--cream);
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--terra);background:var(--terra-pale)}
.drop-icon-wrap{margin-bottom:12px}
.drop-icon{font-size:2.4rem;animation:float 4s ease-in-out infinite}
.drop-primary{font-size:.9rem;font-weight:500;color:var(--brown-md);margin-bottom:4px}
.drop-secondary{font-size:.8rem;color:var(--brown-lt);margin:8px 0}

/* File confirmed */
.file-confirmed{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--green-lt);
  border-radius:var(--r-sm);margin-top:12px;
  animation:slideDown .3s var(--ease) both;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.file-conf-icon{
  width:32px;height:32px;border-radius:50%;background:var(--green);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.file-conf-info{flex:1;min-width:0}
.file-conf-name{font-size:.85rem;font-weight:600;color:var(--brown-dk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-conf-size{font-size:.75rem;color:var(--brown-lt)}
.file-remove{background:none;border:none;color:var(--brown-lt);cursor:pointer;font-size:.9rem;padding:4px 6px;border-radius:4px;transition:color var(--t);flex-shrink:0}
.file-remove:hover{color:var(--red)}

/* JD Textarea */
.jd-textarea{
  width:100%;height:230px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:14px 16px;
  font-family:var(--sans);font-size:.875rem;color:var(--brown-dk);
  background:var(--cream);resize:vertical;outline:none;
  line-height:1.65;transition:border-color var(--t) var(--ease);
}
.jd-textarea:focus{border-color:var(--terra)}
.jd-textarea::placeholder{color:var(--brown-lt)}
.jd-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.char-count{font-size:.75rem;color:var(--brown-lt)}
.clear-jd{background:none;border:none;font-size:.75rem;color:var(--brown-lt);cursor:pointer;transition:color var(--t)}
.clear-jd:hover{color:var(--terra)}

/* Buttons */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--brown-dk);color:#fff;border:none;
  border-radius:var(--r-sm);padding:13px 28px;
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;
  letter-spacing:.01em;transition:all var(--t) var(--ease);text-decoration:none;
}
.btn-primary:hover{background:var(--terra);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.btn-primary.btn-sm{padding:9px 20px;font-size:.82rem}

.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cream-d);color:var(--brown-md);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 18px;font-family:var(--sans);font-size:.82rem;
  font-weight:500;cursor:pointer;transition:all var(--t) var(--ease);
  text-decoration:none;
}
.btn-secondary:hover{background:var(--terra-pale);border-color:var(--terra);color:var(--terra)}
.btn-secondary.btn-sm{padding:8px 16px;font-size:.8rem}

.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--brown-dk);border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:9px 20px;
  font-family:var(--sans);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all var(--t) var(--ease);
}
.btn-outline:hover{border-color:var(--terra);color:var(--terra)}

/* Analyze Button */
.analyze-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.btn-analyze{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--brown-dk);color:#fff;border:none;
  border-radius:var(--r-sm);padding:16px 40px;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  cursor:pointer;letter-spacing:.01em;
  transition:all var(--t) var(--ease);position:relative;overflow:hidden;
}
.btn-analyze::before{
  content:'';position:absolute;inset:0;background:var(--terra);
  transform:translateX(-100%);transition:transform .35s var(--ease);
}
.btn-analyze:hover::before{transform:translateX(0)}
.btn-analyze:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-analyze:active{transform:translateY(0)}
.btn-analyze .analyze-btn-text,.btn-analyze .analyze-btn-arrow{position:relative;z-index:1}
.btn-analyze .analyze-btn-arrow{font-size:1.15rem;transition:transform var(--t) var(--ease)}
.btn-analyze:hover .analyze-btn-arrow{transform:translateX(5px)}
.btn-analyze:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-analyze:disabled::before{display:none}
.analyze-note{font-size:.78rem;color:var(--brown-lt)}

/* ── Loading ─────────────────────────────────────────────────── */
.loading-wrap{padding:40px 0}
.loading-card{
  display:flex;align-items:center;gap:28px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px 36px;max-width:560px;margin:0 auto;
  box-shadow:var(--shadow-md);
}
.loading-ring{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  border:3px solid var(--border);border-top-color:var(--terra);
  animation:spin .85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-steps{display:flex;flex-direction:column;gap:6px}
.l-step{
  display:flex;align-items:center;gap:10px;
  font-size:.83rem;color:var(--brown-lt);transition:all var(--t) var(--ease);
}
.l-step.active{color:var(--terra);font-weight:600}
.l-step.done{color:var(--green)}
.l-step-dot{
  width:7px;height:7px;border-radius:50%;background:var(--border);
  flex-shrink:0;transition:background var(--t);
}
.l-step.active .l-step-dot{background:var(--terra);animation:pulse 1.2s ease-in-out infinite}
.l-step.done .l-step-dot{background:var(--green)}

/* ── Error ───────────────────────────────────────────────────── */
.error-wrap{padding:20px 0}
.error-card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--red-lt);border:1px solid #f5c6c6;
  border-radius:var(--r-sm);padding:16px 20px;
  max-width:560px;margin:0 auto;
  animation:slideDown .3s var(--ease) both;
}
.error-icon{font-size:1.3rem;color:var(--red);flex-shrink:0;margin-top:2px}
.error-title{font-weight:700;color:var(--red);font-size:.88rem;margin-bottom:3px}
.error-msg{font-size:.82rem;color:#8B2222}
.error-close{
  background:none;border:none;color:#8B2222;cursor:pointer;
  font-size:.9rem;margin-left:auto;flex-shrink:0;padding:2px 6px;
  border-radius:4px;transition:background var(--t);
}
.error-close:hover{background:rgba(0,0,0,.06)}

/* ── Features Strip ─────────────────────────────────────────── */
.features-strip{
  padding:70px 0;
  background:var(--cream-d);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features-grid{grid-template-columns:1fr}}
.feature-item{
  display:flex;flex-direction:column;gap:10px;
  padding:24px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-sm);
  transition:all var(--t) var(--ease);
  animation-delay:var(--delay,0s);
}
.feature-item:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.feature-icon{font-size:1.8rem;line-height:1}
.feature-item h4{font-family:var(--serif);font-size:1rem;color:var(--brown-dk);font-weight:400}
.feature-item p{font-size:.82rem;color:var(--brown-lt);line-height:1.55}

/* ── No Data ─────────────────────────────────────────────────── */
.no-data-wrap{
  min-height:60vh;display:flex;align-items:center;justify-content:center;
  padding:60px 28px;
}
.no-data-card{
  text-align:center;max-width:400px;padding:48px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.no-data-icon{font-size:3rem;margin-bottom:16px}
.no-data-card h2{font-family:var(--serif);font-size:1.6rem;margin-bottom:10px;font-weight:400}
.no-data-card p{font-size:.9rem;color:var(--brown-md);margin-bottom:24px}

/* ── Page Hero ──────────────────────────────────────────────── */
.page-hero{padding:60px 0 40px;background:var(--cream)}
.page-heading{max-width:680px}
.page-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.page-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--brown-dk);margin-bottom:12px;font-weight:400}
.page-desc{font-size:.95rem;color:var(--brown-md);line-height:1.75;max-width:600px}

/* ── Score Hero (results page) ──────────────────────────────── */
.score-hero{
  padding:60px 0;
  background:linear-gradient(135deg, var(--brown-dk) 0%, #3D2218 100%);
}
.score-layout{
  display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center;
  margin-top:36px;
}
@media(max-width:760px){.score-layout{grid-template-columns:1fr;gap:36px}}

/* Score Ring */
.ring-container{position:relative;width:200px;height:200px;flex-shrink:0}
.score-svg{width:200px;height:200px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:12}
.ring-progress{
  fill:none;stroke:url(#ringGrad);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:534;stroke-dashoffset:534;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}
.ring-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.ring-score{
  font-family:var(--serif);font-size:2.6rem;color:#fff;line-height:1;
}
.ring-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-lt);margin-top:4px}

.score-detail-heading{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:16px;font-weight:400}
.formula-box{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-sm);padding:12px 18px;margin-bottom:20px;
}
.formula-box code{font-size:.82rem;color:var(--terra-lt);font-family:'Fira Mono','Courier New',monospace;letter-spacing:.01em}
.steps-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px}
@media(max-width:600px){.steps-grid{grid-template-columns:1fr}}
.step-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);padding:14px 16px;
  transition:background var(--t) var(--ease);
}
.step-card:hover{background:rgba(255,255,255,.12)}
.step-num{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px}
.step-val{font-family:var(--serif);font-size:1.5rem;color:var(--terra-lt);line-height:1;margin-bottom:4px}
.step-desc{font-size:.72rem;color:rgba(255,255,255,.4);line-height:1.4}
.result-nav-buttons{display:flex;gap:10px;flex-wrap:wrap}
.result-nav-buttons .btn-primary{background:var(--terra);color:#fff}
.result-nav-buttons .btn-primary:hover{background:var(--terra-lt)}
.result-nav-buttons .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
.result-nav-buttons .btn-secondary:hover{background:rgba(193,123,78,.3);border-color:var(--terra);color:#fff}

/* ── Skills Section (results) ───────────────────────────────── */
.skills-section{
  padding:60px 0;
  background:var(--cream-d);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.skills-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.skills-3col{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.skills-3col{grid-template-columns:1fr}}
.skill-col-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.skill-col-header h3{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brown-md)}
.mt20{margin-top:22px}
.skill-col-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--blue)}
.dot-rose{background:var(--rose)}
.dot-orange{background:var(--terra)}
.dot-green{background:var(--green)}
.dot-red{background:var(--red)}

/* Chip Cloud */
.chip-cloud{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
.chip{
  display:inline-flex;align-items:center;padding:4px 11px;
  border-radius:99px;font-size:.76rem;font-weight:500;
  letter-spacing:.01em;cursor:default;
  transition:transform var(--t) var(--ease);
}
.chip:hover{transform:translateY(-1px)}
.chip-hard{background:var(--blue-lt);color:var(--blue)}
.chip-soft{background:var(--rose-pale);color:var(--rose)}
.chip-jd{background:var(--terra-pale);color:var(--terra)}
.chip-matched{background:var(--green-lt);color:var(--green)}
.chip-missing{background:var(--red-lt);color:var(--red)}
.chip-empty{font-style:italic;color:var(--brown-lt);font-size:.8rem;padding:0}

/* ── Missing Skills ──────────────────────────────────────────── */
.missing-section{padding:60px 0;background:#fff}
.section-header{margin-bottom:36px}
.section-title{font-family:var(--serif);font-size:1.8rem;color:var(--brown-dk);margin-bottom:8px;font-weight:400}
.section-sub{font-size:.9rem;color:var(--brown-lt)}
.missing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.missing-card{
  background:var(--cream);border:1px solid var(--border);
  border-left:3.5px solid var(--terra);border-radius:var(--r);
  padding:22px;transition:box-shadow var(--t) var(--ease);
}
.missing-card:hover{box-shadow:var(--shadow-md)}
.missing-skill-name{font-size:1rem;font-weight:700;color:var(--brown-dk);margin-bottom:5px}
.missing-type-badge{
  display:inline-block;font-size:.68rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--terra);
  background:var(--terra-pale);padding:2px 10px;border-radius:99px;margin-bottom:14px;
}
.course-list{display:flex;flex-direction:column;gap:8px}
.course-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);
  text-decoration:none;transition:all var(--t) var(--ease);
}
.course-item:hover{border-color:var(--terra);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.course-plat{
  flex-shrink:0;font-size:.66rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-top:1px;
}
.plat-udemy{background:#EB3A00;color:#fff}
.plat-coursera{background:#0056D2;color:#fff}
.plat-deeplearning{background:#FF6F00;color:#fff}
.plat-default{background:var(--brown-dk);color:#fff}
.course-info{flex:1;min-width:0}
.course-name{font-size:.82rem;font-weight:600;color:var(--brown-dk);line-height:1.35;margin-bottom:3px}
.course-meta{font-size:.72rem;color:var(--brown-lt)}
.no-course{font-size:.82rem;color:var(--brown-lt);font-style:italic}
.no-course a{color:var(--terra);text-decoration:none}
.no-course a:hover{text-decoration:underline}

/* ── Roles Page ─────────────────────────────────────────────── */
.roles-section-page{padding:40px 0 80px;background:var(--cream)}
.roles-ranked{display:flex;flex-direction:column;gap:20px}
.role-big-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px 32px;box-shadow:var(--shadow-sm);
  transition:all var(--t) var(--ease);position:relative;overflow:hidden;
  cursor:pointer;text-decoration:none;color:inherit;
}
.role-big-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--terra),var(--rose));
  transform:scaleY(0);transition:transform .3s var(--ease);transform-origin:top;
}
.role-big-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.role-big-card:hover::after{transform:scaleY(1)}
@media(max-width:760px){.role-big-card{grid-template-columns:auto 1fr;}.role-big-rank-num{display:none}}
.role-big-rank{
  font-family:var(--serif);font-size:3rem;color:var(--border-dk);
  line-height:1;min-width:48px;text-align:center;
}
.role-big-body{}
.role-big-name{font-family:var(--serif);font-size:1.3rem;color:var(--brown-dk);margin-bottom:6px;font-weight:400}
.role-big-desc{font-size:.85rem;color:var(--brown-md);line-height:1.55;margin-bottom:14px}
.role-big-bar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.role-big-bar-track{flex:1;height:7px;background:var(--cream-m);border-radius:99px;overflow:hidden;max-width:320px}
.role-big-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--terra),var(--rose));transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.role-big-pct{font-family:var(--serif);font-size:1.2rem;color:var(--terra);min-width:46px}
.role-big-tags{display:flex;flex-wrap:wrap;gap:7px}
.role-tag{font-size:.73rem;padding:3px 10px;border-radius:99px;font-weight:500}
.tag-salary{background:var(--green-lt);color:var(--green)}
.tag-demand{background:var(--blue-lt);color:var(--blue)}
.tag-growth{background:var(--terra-pale);color:var(--terra)}
.role-big-action{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-left:24px;border-left:1px solid var(--border);min-width:120px;text-align:center;
}
.role-big-action .btn-primary{width:100%;justify-content:center}
.role-chips-label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brown-lt);margin-top:12px;margin-bottom:6px}
.role-chips-row{display:flex;flex-wrap:wrap;gap:5px}
.role-chip-sm{font-size:.72rem;padding:3px 9px;border-radius:99px;background:var(--cream-d);color:var(--brown-md);font-weight:500}

/* ── Roadmap Page ───────────────────────────────────────────── */
.roadmap-search-bar{
  display:flex;gap:12px;margin-top:28px;max-width:700px;
}
@media(max-width:600px){.roadmap-search-bar{flex-direction:column}}
.roadmap-input-lg{
  flex:1;padding:13px 18px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font-family:var(--sans);font-size:.9rem;
  color:var(--brown-dk);background:#fff;outline:none;
  transition:border-color var(--t) var(--ease);
}
.roadmap-input-lg:focus{border-color:var(--terra)}
.roadmap-input-lg::placeholder{color:var(--brown-lt)}
.quick-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.quick-label{font-size:.78rem;font-weight:600;color:var(--brown-lt);letter-spacing:.03em}
.quick-chip{
  padding:5px 14px;border-radius:99px;border:1px solid var(--border);
  background:#fff;font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:var(--brown-md);cursor:pointer;transition:all var(--t) var(--ease);
}
.quick-chip:hover{background:var(--terra-pale);border-color:var(--terra);color:var(--terra)}

.roadmap-loading{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:60px 28px;font-size:.9rem;color:var(--brown-lt);
}
.roadmap-content-section{padding:40px 0 80px}
.roadmap-role-title{
  font-family:var(--serif);font-size:1.6rem;color:var(--brown-dk);
  margin-bottom:40px;font-weight:400;
}
.roadmap-role-title span{color:var(--terra);font-style:italic}

.roadmap-timeline{
  position:relative;padding-left:44px;
}
.roadmap-timeline::before{
  content:'';position:absolute;left:17px;top:28px;bottom:28px;
  width:2px;background:linear-gradient(180deg,var(--terra),var(--rose-lt));
}
.phase-card{
  position:relative;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px 28px;margin-bottom:24px;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--t) var(--ease);
}
.phase-card:hover{box-shadow:var(--shadow-md)}
.phase-card::before{
  content:'';position:absolute;left:-35px;top:26px;
  width:16px;height:16px;border-radius:50%;
  background:var(--terra);border:3.5px solid var(--cream-d);
}
.phase-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.phase-icon-wrap{font-size:1.5rem}
.phase-name{font-family:var(--serif);font-size:1.15rem;color:var(--brown-dk);font-weight:400}
.phase-dur{
  margin-left:auto;font-size:.74rem;color:var(--brown-lt);
  background:var(--cream-d);padding:3px 12px;border-radius:99px;font-weight:500;
}
.phase-skills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.phase-skill{
  font-size:.76rem;padding:3px 10px;border-radius:99px;
  background:var(--terra-pale);color:var(--terra);font-weight:500;
}
.phase-resources{display:flex;flex-direction:column;gap:7px}
.phase-res{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:var(--cream);border:1px solid var(--border);
  border-radius:var(--r-sm);text-decoration:none;
  transition:all var(--t) var(--ease);
}
.phase-res:hover{border-color:var(--terra);background:var(--terra-pale)}
.phase-res-name{flex:1;font-size:.82rem;font-weight:500;color:var(--brown-dk)}
.phase-res-plat{font-size:.69rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brown-lt)}

/* ── Trending Page ──────────────────────────────────────────── */
.personalised-section{
  padding:60px 0 40px;background:var(--cream);border-bottom:1px solid var(--border);
}
.general-trending-section{padding:60px 0 80px;background:var(--cream-d)}
.trending-tag-header{margin-bottom:32px}
.trending-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.trending-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;transition:all var(--t) var(--ease);position:relative;overflow:hidden;
}
.trending-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--terra),var(--rose));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.trending-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.trending-card:hover::before{transform:scaleX(1)}
.t-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.t-name{font-size:.97rem;font-weight:700;color:var(--brown-dk)}
.t-badge{
  flex-shrink:0;font-size:.68rem;font-weight:700;
  padding:3px 10px;border-radius:99px;letter-spacing:.04em;
  text-transform:uppercase;
}
.badge-explosive{background:#FEE5D5;color:#C0392B}
.badge-rising{background:var(--terra-pale);color:var(--terra)}
.badge-growing{background:var(--green-lt);color:var(--green)}
.t-desc{font-size:.82rem;color:var(--brown-md);margin-bottom:12px;line-height:1.55}
.t-demand{font-size:.8rem;font-weight:700;color:var(--green);margin-bottom:5px}
.t-based{font-size:.73rem;color:var(--brown-lt);margin-bottom:12px}
.t-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:600;color:var(--terra);text-decoration:none;
  transition:gap var(--t) var(--ease);
}
.t-link:hover{gap:12px}

/* ── Footer ──────────────────────────────────────────────────── */
.footer{
  background:var(--brown-dk);padding:40px 0;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.footer-brand{font-family:var(--serif);font-size:1.15rem;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:8px}
.footer-brand .brand-hex{color:var(--terra)}
.footer-inner p{font-size:.8rem;color:rgba(255,255,255,.35)}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.2)!important}

/* ── Animations ──────────────────────────────────────────────── */
[data-animate]{opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-animate="fade-up"]{transform:translateY(24px)}
[data-animate="slide-left"]{transform:translateX(-28px)}
[data-animate="slide-right"]{transform:translateX(28px)}
[data-animate].in-view{opacity:1;transform:none}

.stagger-child{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.stagger-child.visible{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.anim-fade-up{animation:fadeUp .45s var(--ease) both}
.anim-slide-in{animation:slideIn .4s var(--ease) both}
.anim-scale-in{animation:scaleIn .4s var(--ease) both}