:root {
  --black:       #080808;
  --white:       #ffffff;
  --gray-50:     #fafafa;
  --gray-100:    #f5f5f7;
  --gray-200:    #e8e8ed;
  --gray-300:    #d2d2d7;
  --gray-400:    #86868b;
  --gray-500:    #6e6e73;
  --gray-600:    #3a3a3c;
  --gray-800:    #1d1d1f;
  --accent:      #0066cc;
  --accent-lt:   #e8f0fb;
  --accent-h:    #0077ed;
  --red:         #ff3b30;
  --green:       #34c759;
  --purple:      #af52de;
  --orange:      #ff9500;
  --indigo:      #5856d6;

  --fd: 'Instrument Serif', Georgia, serif;
  --fb: 'DM Sans', -apple-system, sans-serif;

  --r-sm:   8px;  --r-md: 14px;
  --r-lg:   20px; --r-xl: 28px;
  --r-full: 9999px;

  --sh-sm: 0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --sh-md: 0 4px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --sh-lg: 0 8px 40px rgba(0,0,0,.12),0 3px 10px rgba(0,0,0,.06);
  --sh-xl: 0 20px 60px rgba(0,0,0,.16);

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --dur: .28s;
  --hh: 64px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: var(--fb);
  background: var(--white); color: var(--gray-800);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

.container { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ── Header ─────────────────────────────────── */
.hdr {
  position:fixed; top:0; left:0; right:0; height:var(--hh); z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:box-shadow var(--dur) var(--ease);
}
.hdr.scrolled { box-shadow:var(--sh-sm); }
.hdr-inner {
  height:100%; display:flex; align-items:center;
  justify-content:space-between; gap:2rem;
}
.logo { display:flex; align-items:center; gap:.625rem; cursor:pointer; }
.logo-box {
  width:34px; height:34px; background:var(--black); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform var(--dur) var(--spring);
}
.logo-box:hover { transform:scale(1.08) rotate(-4deg); }
.logo-box svg { width:18px; height:18px; fill:var(--white); }
.logo-name { font-weight:700; font-size:1.125rem; letter-spacing:-.04em; color:var(--black); }
.logo-tag  { font-size:.625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-400); }

.main-nav { display:flex; align-items:center; gap:.25rem; }
.nav-a {
  font-size:.875rem; font-weight:500; color:var(--gray-500);
  padding:.375rem .875rem; border-radius:var(--r-full);
  transition:all var(--dur) var(--ease); cursor:pointer;
  white-space:nowrap;
}
.nav-a:hover,.nav-a.active { color:var(--black); background:var(--gray-100); }

.hdr-btns { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.btn-icon {
  width:36px; height:36px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-500); transition:all var(--dur) var(--ease);
}
.btn-icon:hover { background:var(--gray-100); color:var(--black); }
.btn-sub {
  font-size:.8125rem; font-weight:700; color:var(--white);
  background:var(--black); padding:.5rem 1.125rem;
  border-radius:var(--r-full); transition:all var(--dur) var(--ease);
}
.btn-sub:hover { background:var(--accent); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,102,204,.3); }

/* ── Ticker ──────────────────────────────────── */
.ticker {
  background:var(--black); padding:.5rem 0;
  overflow:hidden; margin-top:var(--hh);
}
.ticker-in { display:flex; align-items:center; gap:1.5rem; }
.ticker-lbl {
  font-size:.625rem; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; background:var(--red); color:var(--white);
  padding:.2rem .625rem; border-radius:3px; flex-shrink:0;
}
.ticker-track { overflow:hidden; flex:1; }
.ticker-items {
  display:flex; gap:3rem; white-space:nowrap;
  animation:tick 30s linear infinite;
}
.ticker-items:hover { animation-play-state:paused; }
.ticker-items span {
  font-size:.8125rem; font-weight:500; color:rgba(255,255,255,.75);
  cursor:pointer; transition:color var(--dur) var(--ease);
}
.ticker-items span:hover { color:var(--white); }
@keyframes tick { to { transform:translateX(-50%); } }

/* ── Hero ────────────────────────────────────── */
.hero { padding:3rem 0 2rem; }
.hero-grid {
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:3px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
}
.hero-main {
  position:relative; min-height:480px;
  overflow:hidden; cursor:pointer; background:var(--gray-100);
}
.hero-side { display:flex; flex-direction:column; gap:3px; }
.hero-side-card {
  flex:1; position:relative; overflow:hidden;
  cursor:pointer; min-height:238px; background:var(--gray-100);
}
.card-bg {
  width:100%; height:100%; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:5rem; color:rgba(255,255,255,.06);
  letter-spacing:-.05em; transition:transform .7s var(--ease);
}
.hero-main:hover .card-bg { transform:scale(1.03); }
.hero-side-card:hover .card-bg { transform:scale(1.05); }
.hero-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 55%,transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2.5rem;
}
.hero-side-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 65%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
}
.badge {
  display:inline-flex; font-size:.625rem; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--white);
  padding:.2rem .625rem; border-radius:var(--r-full);
  margin-bottom:.625rem; width:fit-content;
}
.hero-ttl {
  font-family:var(--fd); color:var(--white);
  letter-spacing:-.025em; line-height:1.1;
}
.hero-main .hero-ttl { font-size:clamp(1.5rem,2.5vw,2.1rem); margin-bottom:.625rem; }
.hero-side .hero-ttl { font-size:1.0625rem; }
.hero-meta { display:flex; gap:.75rem; font-size:.8125rem; color:rgba(255,255,255,.6); }
.hero-meta-dot { color:rgba(255,255,255,.3); }

/* ── Cat bar ─────────────────────────────────── */
.cat-bar {
  background:var(--gray-50); border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200); padding:.875rem 0;
  overflow-x:auto; scrollbar-width:none;
}
.cat-bar::-webkit-scrollbar { display:none; }
.cat-bar-in { display:flex; gap:.5rem; white-space:nowrap; }
.cat-btn {
  font-size:.8125rem; font-weight:600; color:var(--gray-500);
  padding:.4rem 1rem; border-radius:var(--r-full);
  border:1px solid var(--gray-200); background:var(--white);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.cat-btn:hover,.cat-btn.active { background:var(--black); color:var(--white); border-color:var(--black); }

/* ── Main layout ─────────────────────────────── */
.main-wrap { display:grid; grid-template-columns:1fr 340px; gap:4rem; padding:4rem 0; }

/* Section header */
.sec-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:2rem; padding-bottom:1rem; border-bottom:2px solid var(--black);
}
.sec-lbl { font-size:.6875rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.sec-more {
  font-size:.8125rem; font-weight:700; color:var(--accent);
  cursor:pointer; display:flex; align-items:center; gap:.25rem;
  transition:gap var(--dur) var(--ease);
}
.sec-more:hover { gap:.5rem; }
.sec-more::after { content:'→'; }

/* ── Cards ───────────────────────────────────── */
.card-lg {
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  padding:2rem 0; border-bottom:1px solid var(--gray-200);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.card-lg:first-of-type { padding-top:0; }
.card-lg:hover { background:var(--gray-50); border-radius:var(--r-md); padding-left:1rem; padding-right:1rem; }

.card-md {
  display:grid; grid-template-columns:130px 1fr; gap:1.25rem;
  padding:1.25rem 0; border-bottom:1px solid var(--gray-200);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.card-md:hover { background:var(--gray-50); border-radius:var(--r-sm); padding-left:.75rem; padding-right:.75rem; }

.thumb {
  border-radius:var(--r-md); overflow:hidden;
  background:var(--gray-100);
}
.card-lg .thumb { aspect-ratio:16/10; }
.card-md .thumb { aspect-ratio:4/3; }

.thumb-ph {
  width:100%; height:100%; min-height:120px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); color:rgba(255,255,255,.08);
  font-size:2rem; letter-spacing:-.05em;
  transition:transform .5s var(--ease);
}
.card-lg:hover .thumb-ph { transform:scale(1.04); }
.card-md:hover .thumb-ph { transform:scale(1.05); }

.card-cat { font-size:.6875rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.card-ttl {
  font-family:var(--fd); color:var(--black); line-height:1.2;
  letter-spacing:-.025em; transition:color var(--dur) var(--ease);
}
.card-lg .card-ttl { font-size:clamp(1.1rem,2vw,1.5rem); }
.card-md .card-ttl { font-size:1rem; }
.card-lg:hover .card-ttl,.card-md:hover .card-ttl { color:var(--accent); }

.card-exc { font-size:.9375rem; line-height:1.65; color:var(--gray-500); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { display:flex; gap:.5rem; font-size:.8125rem; color:var(--gray-400); font-weight:500; }
.dot { color:var(--gray-300); }

/* Card numbered */
.card-sm {
  display:flex; gap:1rem; padding:1rem 0;
  border-bottom:1px solid var(--gray-200); cursor:pointer;
  transition:padding-left var(--dur) var(--ease);
}
.card-sm:last-child { border-bottom:none; }
.card-sm:hover { padding-left:.5rem; }
.card-sm:hover .card-ttl { color:var(--accent); }
.card-num {
  font-family:var(--fd); font-size:2rem; color:var(--gray-200);
  line-height:1; flex-shrink:0; width:2.5rem; text-align:center;
  transition:color var(--dur) var(--ease);
}
.card-sm:hover .card-num { color:var(--accent); }
.card-sm .card-ttl { font-size:.9375rem; }

/* ── Loading skeleton ────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); }
@keyframes shimmer { to { background-position:-200% 0; } }
.skel-card { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid var(--gray-200); }
.skel-thumb { aspect-ratio:16/10; border-radius:var(--r-md); }
.skel-body { display:flex; flex-direction:column; gap:.75rem; justify-content:center; }
.skel-line { height:.875rem; border-radius:4px; }

/* ── Sidebar ─────────────────────────────────── */
.sidebar { display:flex; flex-direction:column; gap:1.5rem; }
.widget {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--r-lg); padding:1.75rem;
}
.w-lbl {
  font-size:.625rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-400); margin-bottom:1.25rem; padding-bottom:.875rem;
  border-bottom:1px solid var(--gray-200);
}
.w-nl { background:var(--black); border-color:var(--black); }
.w-nl .w-lbl { color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.1); }
.w-nl h3 { color:var(--white); font-size:1.25rem; margin-bottom:.5rem; }
.w-nl p  { color:rgba(255,255,255,.6); font-size:.875rem; margin-bottom:1.25rem; }

.nl-input {
  width:100%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r-sm);
  padding:.75rem 1rem; color:var(--white); font-family:var(--fb);
  font-size:.9375rem; outline:none; margin-bottom:.75rem;
  transition:all var(--dur) var(--ease);
}
.nl-input::placeholder { color:rgba(255,255,255,.35); }
.nl-input:focus { border-color:var(--accent); }
.nl-btn {
  width:100%; background:var(--white); color:var(--black);
  font-weight:700; font-size:.875rem; padding:.75rem;
  border-radius:var(--r-sm); font-family:var(--fb);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.nl-btn:hover { background:var(--accent); color:var(--white); }

.tags-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag {
  font-size:.8125rem; font-weight:500; color:var(--gray-600);
  background:var(--white); border:1px solid var(--gray-200);
  padding:.3125rem .75rem; border-radius:var(--r-full);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.tag:hover { background:var(--black); color:var(--white); border-color:var(--black); transform:translateY(-1px); }

/* ── Single post ─────────────────────────────── */
.post-wrap { display:grid; grid-template-columns:1fr 320px; gap:5rem; padding:3rem 0 5rem; }
.post-cat-row { display:flex; gap:.75rem; margin-bottom:1.25rem; }
.post-title { font-family:var(--fd); font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-.03em; line-height:1.08; color:var(--black); margin-bottom:1.25rem; }
.post-deck { font-size:1.2rem; line-height:1.6; color:var(--gray-500); margin-bottom:2rem; }
.post-byline { display:flex; align-items:center; gap:1rem; padding:1.25rem 0; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); margin-bottom:2.5rem; }
.avatar { width:44px; height:44px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--accent),var(--indigo)); display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:.9375rem; flex-shrink:0; }
.byline-name { font-weight:600; font-size:.9375rem; color:var(--black); }
.byline-date { font-size:.8125rem; color:var(--gray-400); margin-top:2px; }
.share-btn {
  display:flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:600;
  color:var(--gray-600); background:var(--gray-100); border:1px solid var(--gray-200);
  padding:.4375rem .875rem; border-radius:var(--r-full); margin-left:auto;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.share-btn:hover { background:var(--black); color:var(--white); border-color:var(--black); }
.post-hero { border-radius:var(--r-xl); aspect-ratio:16/9; margin-bottom:3rem; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:5rem; color:rgba(255,255,255,.06); letter-spacing:-.05em; }
.post-body { font-size:1.125rem; line-height:1.85; color:var(--gray-600); }
.post-body p { margin-bottom:1.75rem; }
.post-body h2 { font-family:var(--fd); font-size:1.75rem; margin:3rem 0 1.25rem; color:var(--black); padding-bottom:.75rem; border-bottom:2px solid var(--gray-200); letter-spacing:-.02em; }
.post-body h3 { font-family:var(--fd); font-size:1.375rem; margin:2rem 0 .875rem; color:var(--black); }
.post-body strong { font-weight:600; color:var(--gray-800); }
.post-body a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(0,102,204,.3); }
.post-body blockquote { border-left:3px solid var(--accent); padding:1.25rem 1.5rem; margin:2rem 0; background:var(--accent-lt); border-radius:0 var(--r-md) var(--r-md) 0; }

.zim-callout { background:linear-gradient(135deg,var(--black),var(--gray-800)); border-radius:var(--r-lg); padding:2rem; margin:2.5rem 0; }
.zim-label { font-size:.625rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.875rem; display:flex; align-items:center; gap:.625rem; }
.zim-label::before { content:''; display:inline-block; width:20px; height:2px; background:var(--accent); }
.zim-callout p { color:rgba(255,255,255,.82)!important; font-size:1rem; line-height:1.75; margin:0!important; }

.post-src { display:flex; gap:.5rem; font-size:.8125rem; color:var(--gray-400); margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--gray-200); }
.post-src a { color:var(--gray-500); text-decoration:underline; }

.back-btn {
  display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem;
  font-weight:600; color:var(--gray-500); background:var(--gray-100);
  border:1px solid var(--gray-200); padding:.5rem 1rem;
  border-radius:var(--r-full); cursor:pointer; margin:2rem 0;
  transition:all var(--dur) var(--ease);
}
.back-btn:hover { background:var(--black); color:var(--white); border-color:var(--black); }

/* Related posts */
.related { padding:4rem 0; border-top:2px solid var(--black); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:2rem; }
.rel-card { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--gray-200); cursor:pointer; transition:all var(--dur) var(--ease); }
.rel-card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); border-color:transparent; }
.rel-thumb { aspect-ratio:16/9; overflow:hidden; }
.rel-thumb-ph { width:100%; height:100%; min-height:130px; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:1.5rem; color:rgba(255,255,255,.1); transition:transform .5s var(--ease); }
.rel-card:hover .rel-thumb-ph { transform:scale(1.05); }
.rel-body { padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.rel-ttl { font-family:var(--fd); font-size:1rem; color:var(--black); line-height:1.3; letter-spacing:-.02em; }
.rel-card:hover .rel-ttl { color:var(--accent); }

/* ── JOBS PAGE ───────────────────────────────── */
.jobs-hero { background:var(--black); padding:4rem 0 3rem; margin-top:0; }
.jobs-hero h1 { font-family:var(--fd); font-size:clamp(2rem,4vw,3rem); color:var(--white); margin-bottom:.75rem; letter-spacing:-.03em; }
.jobs-hero p { color:rgba(255,255,255,.6); font-size:1.0625rem; max-width:520px; margin-bottom:2rem; }
.jobs-stats { display:flex; gap:2rem; }
.jobs-stat-num { font-family:var(--fd); font-size:2rem; color:var(--white); line-height:1; }
.jobs-stat-lbl { font-size:.75rem; color:rgba(255,255,255,.5); font-weight:500; margin-top:.25rem; }

.jobs-wrap { display:grid; grid-template-columns:260px 1fr; gap:3rem; padding:3rem 0 5rem; align-items:start; }

.jobs-filters { position:sticky; top:calc(var(--hh) + 1.5rem); background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:1.5rem; }
.filter-section { margin-bottom:1.5rem; }
.filter-title { font-size:.6875rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); margin-bottom:.875rem; }
.filter-opt { display:flex; align-items:center; gap:.625rem; padding:.375rem 0; cursor:pointer; }
.filter-opt input { width:14px; height:14px; accent-color:var(--black); cursor:pointer; }
.filter-opt label { font-size:.9rem; color:var(--gray-600); cursor:pointer; transition:color var(--dur) var(--ease); }
.filter-opt:hover label { color:var(--black); }

.search-bar { display:flex; gap:.75rem; margin-bottom:1.5rem; }
.search-input {
  flex:1; padding:.75rem 1rem; border:1px solid var(--gray-200);
  border-radius:var(--r-md); font-family:var(--fb); font-size:.9375rem;
  outline:none; transition:all var(--dur) var(--ease); background:var(--white);
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.12); }
.search-go {
  background:var(--black); color:var(--white); font-weight:700;
  font-size:.875rem; padding:.75rem 1.5rem; border-radius:var(--r-md);
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.search-go:hover { background:var(--accent); }

.job-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--r-lg); padding:1.75rem; margin-bottom:1rem;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.job-card:hover { box-shadow:var(--sh-md); border-color:var(--accent-lt); transform:translateY(-2px); }
.job-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.job-co-logo {
  width:48px; height:48px; border-radius:var(--r-sm); background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1rem; color:var(--black); flex-shrink:0;
  border:1px solid var(--gray-200);
}
.job-info { flex:1; }
.job-title { font-family:var(--fd); font-size:1.1875rem; color:var(--black); letter-spacing:-.02em; margin-bottom:.25rem; }
.job-card:hover .job-title { color:var(--accent); }
.job-company { font-size:.9rem; font-weight:500; color:var(--gray-500); }
.job-meta-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.job-pill {
  font-size:.75rem; font-weight:600; padding:.2rem .625rem;
  border-radius:var(--r-full); border:1px solid;
}
.pill-type   { color:var(--accent); border-color:rgba(0,102,204,.25); background:var(--accent-lt); }
.pill-loc    { color:var(--gray-600); border-color:var(--gray-200); background:var(--gray-50); }
.pill-cat    { color:var(--purple); border-color:rgba(175,82,222,.2); background:rgba(175,82,222,.06); }
.pill-remote { color:var(--green); border-color:rgba(52,199,89,.25); background:rgba(52,199,89,.07); }
.job-salary { font-size:.875rem; font-weight:700; color:var(--black); white-space:nowrap; }
.job-desc { font-size:.9375rem; color:var(--gray-500); line-height:1.65; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.job-footer { display:flex; align-items:center; justify-content:space-between; }
.job-posted { font-size:.8125rem; color:var(--gray-400); }
.apply-btn {
  font-size:.8125rem; font-weight:700; color:var(--white);
  background:var(--black); padding:.5rem 1.25rem;
  border-radius:var(--r-full); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.apply-btn:hover { background:var(--accent); transform:translateY(-1px); }

/* Job detail modal */
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:2rem; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease);
}
.modal-bg.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--white); border-radius:var(--r-xl); padding:2.5rem;
  max-width:640px; width:100%; max-height:80vh; overflow-y:auto;
  position:relative; box-shadow:var(--sh-xl);
  transform:translateY(20px); transition:transform var(--dur) var(--ease);
}
.modal-bg.open .modal { transform:translateY(0); }
.modal-close {
  position:absolute; top:1.25rem; right:1.25rem;
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--gray-500); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.modal-close:hover { background:var(--black); color:var(--white); }
.modal-company { font-size:.875rem; font-weight:600; color:var(--accent); margin-bottom:.5rem; }
.modal-title { font-family:var(--fd); font-size:1.75rem; color:var(--black); letter-spacing:-.025em; margin-bottom:1rem; }
.modal-desc { font-size:1rem; line-height:1.75; color:var(--gray-600); margin-bottom:1.5rem; }
.modal-reqs h4 { font-size:.75rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); margin-bottom:.75rem; }
.modal-reqs ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.modal-reqs li { font-size:.9375rem; color:var(--gray-600); display:flex; align-items:center; gap:.625rem; }
.modal-reqs li::before { content:'✓'; color:var(--green); font-weight:900; }
.modal-apply {
  display:flex; margin-top:2rem; gap:1rem;
}
.modal-apply-btn {
  flex:1; font-size:.9375rem; font-weight:700; color:var(--white);
  background:var(--black); padding:.875rem; border-radius:var(--r-md);
  cursor:pointer; text-align:center; transition:all var(--dur) var(--ease);
}
.modal-apply-btn:hover { background:var(--accent); }

/* Post a job form */
.post-job-section { background:var(--gray-50); border-top:1px solid var(--gray-200); padding:4rem 0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:.8125rem; font-weight:700; color:var(--gray-600); }
.form-input, .form-select, .form-textarea {
  padding:.75rem 1rem; border:1px solid var(--gray-200); border-radius:var(--r-sm);
  font-family:var(--fb); font-size:.9375rem; outline:none; background:var(--white);
  transition:all var(--dur) var(--ease); color:var(--black);
}
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.12); }
.form-textarea { resize:vertical; min-height:120px; }
.form-submit {
  font-size:.9375rem; font-weight:700; color:var(--white);
  background:var(--black); padding:.9375rem 2rem; border-radius:var(--r-full);
  cursor:pointer; transition:all var(--dur) var(--ease); margin-top:.5rem;
}
.form-submit:hover { background:var(--accent); transform:translateY(-1px); }

/* ── ABOUT PAGE ──────────────────────────────── */
.about-hero { background:var(--black); padding:5rem 0 4rem; }
.about-hero h1 { font-family:var(--fd); font-size:clamp(2.5rem,5vw,4rem); color:var(--white); letter-spacing:-.03em; margin-bottom:1rem; }
.about-hero p { color:rgba(255,255,255,.6); font-size:1.125rem; max-width:580px; line-height:1.7; }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:4rem 0; }
.about-card { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-xl); padding:2.5rem; }
.about-icon { font-size:2rem; margin-bottom:1rem; }
.about-card h3 { font-family:var(--fd); font-size:1.5rem; color:var(--black); margin-bottom:.75rem; letter-spacing:-.02em; }
.about-card p { color:var(--gray-500); line-height:1.75; }

.tc-wrap { padding:4rem 0 6rem; }
.tc-nav { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:1.5rem; position:sticky; top:calc(var(--hh) + 1rem); }
.tc-nav-title { font-size:.6875rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); margin-bottom:1rem; }
.tc-nav-link { display:block; font-size:.875rem; color:var(--gray-500); padding:.375rem 0; cursor:pointer; transition:color var(--dur) var(--ease); border-bottom:1px solid var(--gray-100); }
.tc-nav-link:last-child { border-bottom:none; }
.tc-nav-link:hover { color:var(--accent); }
.tc-layout { display:grid; grid-template-columns:220px 1fr; gap:4rem; }
.tc-content h2 { font-family:var(--fd); font-size:2rem; color:var(--black); margin-bottom:1rem; letter-spacing:-.025em; padding-bottom:.75rem; border-bottom:2px solid var(--gray-200); margin-top:3rem; }
.tc-content h2:first-child { margin-top:0; }
.tc-content h3 { font-family:var(--fd); font-size:1.25rem; color:var(--black); margin:1.75rem 0 .75rem; }
.tc-content p { font-size:1rem; line-height:1.8; color:var(--gray-600); margin-bottom:1.25rem; }
.tc-content ul { margin:1rem 0 1.25rem 1.5rem; }
.tc-content li { font-size:1rem; line-height:1.75; color:var(--gray-600); margin-bottom:.5rem; }
.tc-content li::marker { color:var(--accent); }
.tc-ref { background:var(--accent-lt); border:1px solid rgba(0,102,204,.15); border-radius:var(--r-sm); padding:.875rem 1rem; margin:1rem 0; font-size:.875rem; color:var(--accent); font-weight:500; }

/* ── Newsletter section ──────────────────────── */
.nl-section { background:var(--gray-50); border-top:1px solid var(--gray-200); padding:5rem 0; text-align:center; }
.nl-section h2 { font-family:var(--fd); font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:.75rem; color:var(--black); }
.nl-section > .container > p { color:var(--gray-500); margin-bottom:2rem; font-size:1rem; max-width:440px; margin-left:auto; margin-right:auto; }
.nl-form { display:flex; gap:.75rem; max-width:420px; margin:0 auto; }
.nl-form input { flex:1; padding:.875rem 1.25rem; border:1px solid var(--gray-200); border-radius:var(--r-full); font-family:var(--fb); font-size:.9375rem; outline:none; transition:all var(--dur) var(--ease); }
.nl-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.12); }
.nl-form button { background:var(--black); color:var(--white); font-weight:700; font-size:.875rem; padding:.875rem 1.5rem; border-radius:var(--r-full); cursor:pointer; transition:all var(--dur) var(--ease); white-space:nowrap; }
.nl-form button:hover { background:var(--accent); transform:translateY(-1px); }

/* ── Footer ──────────────────────────────────── */
.footer { background:var(--black); color:var(--white); padding:4rem 0 2rem; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.foot-logo { display:flex; align-items:center; gap:.625rem; margin-bottom:1rem; }
.foot-logo .logo-box { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); }
.foot-logo .logo-name { color:var(--white); }
.foot-desc { font-size:.9rem; color:rgba(255,255,255,.45); line-height:1.7; max-width:280px; margin-bottom:1.5rem; }
.foot-social { display:flex; gap:.625rem; }
.social-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:.875rem; font-weight:900;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.social-btn:hover { background:var(--accent); border-color:var(--accent); color:var(--white); transform:translateY(-2px); }
.foot-col-ttl { font-size:.625rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1.25rem; }
.foot-links { display:flex; flex-direction:column; gap:.625rem; }
.foot-links a { font-size:.9rem; color:rgba(255,255,255,.55); cursor:pointer; transition:color var(--dur) var(--ease); }
.foot-links a:hover { color:var(--white); }
.foot-btm { display:flex; align-items:center; justify-content:space-between; padding-top:2rem; flex-wrap:wrap; gap:1rem; }
.foot-copy { font-size:.8125rem; color:rgba(255,255,255,.3); }
.foot-btm-links { display:flex; gap:1.5rem; }
.foot-btm-links a { font-size:.8125rem; color:rgba(255,255,255,.3); cursor:pointer; transition:color var(--dur) var(--ease); }
.foot-btm-links a:hover { color:rgba(255,255,255,.65); }

/* ── Search overlay ──────────────────────────── */
.srch-ov {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  backdrop-filter:blur(10px); z-index:2000; display:flex;
  align-items:flex-start; padding-top:15vh;
  opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease);
}
.srch-ov.open { opacity:1; pointer-events:all; }
.srch-box { width:100%; max-width:640px; margin:0 auto; padding:0 2rem; }
.srch-row {
  background:var(--white); border-radius:var(--r-xl);
  padding:1.25rem 1.5rem; display:flex; align-items:center;
  gap:1rem; box-shadow:var(--sh-xl);
}
.srch-input { flex:1; font-family:var(--fb); font-size:1.25rem; border:none; outline:none; color:var(--black); background:transparent; }
.srch-input::placeholder { color:var(--gray-300); }
.srch-esc { font-size:.75rem; font-weight:700; color:var(--gray-400); border:1px solid var(--gray-200); padding:.2rem .5rem; border-radius:3px; cursor:pointer; }

/* ── Progress bar ────────────────────────────── */
#prog { position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:9999; width:0; transition:width .1s linear; }

/* ── Page routing ────────────────────────────── */
.pg { display:none; }
.pg.active { display:block; }

/* ── Animations ──────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fu { animation:fadeUp .5s var(--ease) both; }
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}.d5{animation-delay:.33s}

/* ── Toast ───────────────────────────────────── */
.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:3000;
  background:var(--black); color:var(--white); font-size:.9375rem; font-weight:500;
  padding:1rem 1.5rem; border-radius:var(--r-md); box-shadow:var(--sh-xl);
  transform:translateY(100px); opacity:0; transition:all .3s var(--ease);
}
.toast.show { transform:translateY(0); opacity:1; }

/* ── Responsive ──────────────────────────────── */
@media(max-width:1024px){
  .main-wrap,.post-wrap,.tc-layout,.jobs-wrap { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-side { flex-direction:row; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; }
  .jobs-filters { position:static; }
}
@media(max-width:768px){
  :root { --hh:56px; }
  .container { padding:0 1.25rem; }
  .main-nav { display:none; }
  .btn-sub { display:none; }
  .card-lg { grid-template-columns:1fr; }
  .card-md { grid-template-columns:100px 1fr; }
  .hero-side { flex-direction:column; }
  .related-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; gap:2rem; }
  .form-grid { grid-template-columns:1fr; }
  .nl-form { flex-direction:column; }
  .foot-btm { flex-direction:column; text-align:center; }
}